⋯ 16 lines Show the 16 lines above this hunk @@ -17,6 +17,8 @@ const panelAccessibilityDisabled = state(false) 17 17 const longPressStatus = state ( '' ) 18 18 const longPressAccessibilityDisabled = state ( false ) 19 19 const switchValue = state ( false ) 20 + const nullableSwitchValue = state ( true ) 21 + const precedenceSwitchValue = state ( false ) 20 22 const invalidSwitchColors = state ( false ) 21 23 const pickerValue = state ( 'one' ) 22 24 const itemsPickerValue = state ( 'one' ) ⋯ 2 lines Show the 2 lines above this hunk @@ -25,6 +27,7 @@ const dateValue = state('2026-10-12') 25 27 const timeValue = state ( '07:30' ) 26 28 const countdownValue = state ( '01:30:45' ) 27 29 const checkboxValue = state ( false ) 30 + const checkboxPrecedenceValue = state ( false ) 28 31 const checkboxStatus = state ( 'checkbox pending' ) 29 32 const invalidControlColors = state ( false ) 30 33 const invalidControlStyleStatus = state ( '' ) ⋯ 379 lines Show the 379 lines above this hunk @@ -410,6 +413,14 @@ function toggleSwitch(event) { 410 413 status . set ( switchValue ( ) ? 'switch on' : 'switch off' ) 411 414 } 412 415 416 + function toggleNullableSwitch ( event ) { 417 + nullableSwitchValue . set ( event . value ) 418 + } 419 + 420 + function togglePrecedenceSwitch ( event ) { 421 + precedenceSwitchValue . set ( event . value ) 422 + } 423 + 413 424 function choosePicker ( event ) { 414 425 pickerValue . set ( event . value ) 415 426 status . set ( `picker ${pickerValue()}` ) ⋯ 28 lines Show the 28 lines above this hunk @@ -444,6 +455,10 @@ function chooseCheckbox(event) { 444 455 checkboxStatus . set ( event . value ? 'checkbox on' : 'checkbox off' ) 445 456 } 446 457 458 + function choosePrecedenceCheckbox ( event ) { 459 + checkboxPrecedenceValue . set ( event . value ) 460 + } 461 + 447 462 function toggleInvalidControlColors ( ) { 448 463 invalidControlColors . update ( value = > ! value ) 449 464 invalidControlStyleStatus . set ( invalidControlColors ( ) ? 'invalid control colors on' : 'invalid control colors off' ) ⋯ 396 lines Show the 396 lines above this hunk @@ -846,8 +861,10 @@ function openDetailsThenUpdateBackground() { 846 861 < Switch testID = "uncontrolled-switch" / > 847 862 < Button testID = "toggle-invalid-switch-colors" @ click = "toggleInvalidSwitchColors()" > Toggle invalid switch colors < / Button > 848 863 { { - - value - change selects the legacy native API when checked is also supplied . - - } } 849 - < Switch testID = "nullable-switch" : value = "null" : checked = "true" @ value - change = " toggleSwitch ($event)" / > 850 - < Switch testID = "switch-value-precedence" : value = "false" : checked = "true" @ value - change = "toggleSwitch($event)" / > 864 + < Switch testID = "nullable-switch" : value = "null" : checked = "true" @ value - change = " toggleNullableSwitch ($event)" / > 865 + < Text testID = "nullable-switch-status" : text = "nullableSwitchValue() ? 'nullable switch on' : 'nullable switch off'" / > 866 + < Switch testID = "switch-value-precedence" : value = "false" : checked = "true" @ value - change = "togglePrecedenceSwitch($event)" / > 867 + < Text testID = "switch-precedence-status" : text = "precedenceSwitchValue() ? 'precedence switch on' : 'precedence switch off'" / > 851 868 < select testID = "native-picker" : value = "pickerValue" @ change = "choosePicker($event)" > 852 869 < option value = "one" > One < / option > 853 870 < option value = "two" > Two < / option > ⋯ 11 lines Show the 11 lines above this hunk @@ -865,7 +882,8 @@ function openDetailsThenUpdateBackground() { 865 882 < Checkbox testID = "native-checkbox" label = "Accept terms" : value = "checkboxValue" : color = "invalidControlColors ? 'not-a-color' : '#22c55e'" @ value - change = "chooseCheckbox($event)" / > 866 883 < Text testID = "checkbox-status" : text = "checkboxStatus" / > 867 884 < Checkbox testID = "native-checkbox-indeterminate" label = "Mixed terms" indeterminate / > 868 - < Checkbox testID = "checkbox-checked-precedence" : checked = "false" : value = "true" @ value - change = " chooseCheckbox ($event)" / > 885 + < Checkbox testID = "checkbox-checked-precedence" : checked = "false" : value = "true" @ value - change = " choosePrecedenceCheckbox ($event)" / > 886 + < Text testID = "checkbox-precedence-status" : text = "checkboxPrecedenceValue() ? 'precedence checkbox on' : 'precedence checkbox off'" / > 869 887 < Button testID = "toggle-invalid-control-colors" @ click = "toggleInvalidControlColors()" > Toggle invalid control colors < / Button > 870 888 < Text testID = "invalid-control-style-status" : text = "invalidControlStyleStatus" / > 871 889 < Text testID = "date-event-status" : text = "dateEventStatus" / >