@jxsuite/ui 0.11.0 → 0.12.0

package/components/jx-checkbox.json

@@ -6,10 +6,13 @@
     "checked",
     "indeterminate",
     "disabled",
+    "required",
+    "invalid",
     "label",
     "labelledby",
     "describedby",
     "name",
+    "value",
     "size"
   ],
   "state": {
@@ -31,6 +34,18 @@
       "attribute": "disabled",
       "description": "Cannot be ticked or focused. Disabled, never absent."
     },
+    "required": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "required",
+      "description": "Forwarded to the control: a required box left unticked fails the form's own check."
+    },
+    "invalid": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "invalid",
+      "description": "The answer is refused: the control says aria-invalid and the box is ringed in the danger colour."
+    },
     "label": {
       "type": "string",
       "default": "",
@@ -55,6 +70,12 @@
       "attribute": "name",
       "description": "The form field name, forwarded to the control."
     },
+    "value": {
+      "type": "string",
+      "default": "",
+      "attribute": "value",
+      "description": "What a ticked box submits under its name. Empty leaves the platform's own \"on\"."
+    },
     "size": {
       "type": "string",
       "default": "md",
@@ -95,7 +116,8 @@
     "data-size": "${state.size}",
     "data-checked": "${state.checked ? '' : null}",
     "data-indeterminate": "${state.indeterminate ? '' : null}",
-    "data-disabled": "${state.disabled ? '' : null}"
+    "data-disabled": "${state.disabled ? '' : null}",
+    "data-invalid": "${state.invalid ? '' : null}"
   },
   "style": {
     "display": "inline-flex",
@@ -131,6 +153,12 @@
         "borderRadius": "var(--jx-radius-xs)"
       }
     },
+    "&[data-invalid] [part=\"input\"]:not(:focus-visible), & [part=\"input\"]:user-invalid:not(:focus-visible)": {
+      "$description": "A refused box is ringed, by the host's word or by the control's own once the reader has been through it. A ring and not a fill, because the box's fill is the platform's accent and says ticked. Focus keeps its own ring, which is the one a keyboard reader is following.",
+      "outline": "1px solid var(--jx-danger)",
+      "outlineOffset": "1px",
+      "borderRadius": "var(--jx-radius-xs)"
+    },
     "& [part=\"label\"]": {
       "minWidth": "0",
       "overflow": "hidden",
@@ -146,7 +174,7 @@
       "color": "var(--jx-fg-dim)"
     },
     "&[data-size=\"sm\"] > [part=\"control\"]": {
-      "$description": "The control is the `<label>` wrapping the input, and the label is the pointer target: a click anywhere on it toggles the box. At `sm` it draws 4px under the kit's control height, the WCAG 2.2 SC 2.5.8 floor (ui.md \u00a74.3), so the `::before` extends the hit area 2px beyond the box on every side — jx-tab's close-button technique, the same shape jx-button carries — and the region that accepts the pointer is `--jx-control-h` tall while the row stays 20px. -2px is exact here where jx-button needs -3px: an absolutely positioned box is offset from the PADDING edge, and the label draws no border, so its padding edge is its drawn edge. The label needs `position: relative` here for the pseudo-element to measure against; the input inside is 14px and needs nothing of its own, because the label around it is the target. Held by target-size.test.ts and the conformance gate. `contain: layout` keeps the reach LOCAL, as it does on jx-button's and jx-action-button's small controls: an absolutely positioned box still counts toward the SCROLLABLE overflow of the nearest ancestor whose `overflow` isn't `visible`, invisible or not, so a small checkbox touching a scrolling host's edge would add 2px to that host's scrollable region and draw a scrollbar over content that fit. The price is the baseline: a layout-contained label exports none, so a row aligned on `baseline` puts the label's bottom edge on its text baseline, and a row that holds a small checkbox centres it (`align-items: center`) instead.",
+      "$description": "The control is the `<label>` wrapping the input, and the label is the pointer target: a click anywhere on it toggles the box. At `sm` it draws 4px under the kit's control height, the WCAG 2.2 SC 2.5.8 floor (ui.md §4.3), so the `::before` extends the hit area 2px beyond the box on every side — jx-tab's close-button technique, the same shape jx-button carries — and the region that accepts the pointer is `--jx-control-h` tall while the row stays 20px. -2px is exact here where jx-button needs -3px: an absolutely positioned box is offset from the PADDING edge, and the label draws no border, so its padding edge is its drawn edge. The label needs `position: relative` here for the pseudo-element to measure against; the input inside is 14px and needs nothing of its own, because the label around it is the target. Held by target-size.test.ts and the conformance gate. `contain: layout` keeps the reach LOCAL, as it does on jx-button's and jx-action-button's small controls: an absolutely positioned box still counts toward the SCROLLABLE overflow of the nearest ancestor whose `overflow` isn't `visible`, invisible or not, so a small checkbox touching a scrolling host's edge would add 2px to that host's scrollable region and draw a scrollbar over content that fit. The price is the baseline: a layout-contained label exports none, so a row aligned on `baseline` puts the label's bottom edge on its text baseline, and a row that holds a small checkbox centres it (`align-items: center`) instead.",
       "position": "relative",
       "minHeight": "calc(var(--jx-control-h) - 4px)",
       "fontSize": "var(--jx-text-sm)",
@@ -187,11 +215,16 @@
             "aria-label": "${state.label || null}",
             "aria-labelledby": "${state.labelledby || null}",
             "aria-describedby": "${state.describedby || null}",
+            "aria-invalid": "${state.invalid ? 'true' : null}",
             "tabindex": "${state.tabindex || null}",
             "name": "${state.name || null}",
+            "value": "${state.value || null}",
             "disabled": {
               "$ref": "#/state/disabled"
             },
+            "required": {
+              "$ref": "#/state/required"
+            },
             "checked": {
               "$ref": "#/state/checked"
             }

package/components/jx-dialog.json

@@ -214,6 +214,7 @@
       "fontSize": "var(--jx-text-md)",
       "lineHeight": "var(--jx-leading-md)",
       "overflow": "auto",
+      "overscrollBehavior": "contain",
       "&::backdrop": {
         "background": "rgba(0, 0, 0, 0.4)"
       },
@@ -234,7 +235,8 @@
       "$description": "The one region that scrolls. Child combinators, not the descendant ones the parts below use, because a consumer's content is light DOM inside this same box and a surface may name a [part=\"body\"] of its own.",
       "flex": "1 1 auto",
       "minHeight": "0",
-      "overflowY": "auto"
+      "overflowY": "auto",
+      "overscrollBehavior": "contain"
     },
     "&[data-size=\"md\"] > [part=\"dialog\"]": {
       "width": "min(90vw, 32rem)"

package/components/jx-field.json

@@ -50,6 +50,12 @@
       "$src": "jx-ui:/behaviors/textfield.ts",
       "$export": "nameFieldControl",
       "description": "Mints the row's id stem and names the slotted control with it. A document cannot do either: the closed operator set has no counter, and no body can write a property on an element other than the one whose handler is running. It runs once, over what is slotted then: a control APPENDED to the row afterwards lands outside the control part, unplaced and unnamed. Keep the control in the document and switch its state rather than adding it later."
+    },
+    "onLabelClick": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/textfield.ts",
+      "$export": "focusFieldControl",
+      "description": "A click on the label moves focus to the control the row holds, as a label's for would. It only focuses: it never ticks a box or flips a switch, because a row's label sits a column away from its control. The control is found at the click, so one a kit element has since replaced is still reached."
     }
   },
   "attributes": {
@@ -136,7 +142,10 @@
         "part": "label",
         "id": "${state.uid ? state.uid + '-label' : null}"
       },
-      "textContent": "${state.label}"
+      "textContent": "${state.label}",
+      "onclick": {
+        "$ref": "#/state/onLabelClick"
+      }
     },
     {
       "tagName": "div",

package/components/jx-number-field.json

@@ -17,6 +17,9 @@
     "labelledby",
     "describedby",
     "disabled",
+    "readonly",
+    "required",
+    "invalid",
     "stepper",
     "step-up-label",
     "step-down-label",
@@ -78,6 +81,24 @@
       "attribute": "disabled",
       "description": "Cannot be edited, stepped or focused."
     },
+    "readonly": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "readonly",
+      "description": "The value can be read, selected and submitted and not changed: forwarded to the control, and the stepper buttons and the shifted arrows stand down with it, because the platform's own stepUp() ignores readonly."
+    },
+    "required": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "required",
+      "description": "Forwarded to the control, which is the element that validates: an empty required field fails the form's own check."
+    },
+    "invalid": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "invalid",
+      "description": "The value is refused: the control says aria-invalid and draws in the danger colour."
+    },
     "stepper": {
       "type": "boolean",
       "default": false,
@@ -205,7 +226,8 @@
     "data-size": "${state.size}",
     "data-disabled": "${state.disabled ? '' : null}",
     "data-stepper": "${state.stepper ? '' : null}",
-    "data-bad-input": "${state.badInput ? '' : null}"
+    "data-bad-input": "${state.badInput ? '' : null}",
+    "data-invalid": "${state.invalid ? '' : null}"
   },
   "style": {
     "display": "inline-flex",
@@ -263,6 +285,13 @@
         "cursor": "default"
       }
     },
+    "&[data-invalid] [part=\"input\"]": {
+      "borderColor": "var(--jx-danger)"
+    },
+    "& [part=\"input\"]:user-invalid:is(:out-of-range, :required)": {
+      "$description": "The control's own verdict, once the reader has finished with it: a number outside min and max, or a required field left empty. Not a bare :user-invalid, which is also true of a step mismatch — and a field with no step attribute has a step of one, so every fraction a reader typed into it would draw as an error.",
+      "borderColor": "var(--jx-danger)"
+    },
     "& [part=\"stepper-slot\"]": {
       "display": "contents"
     },
@@ -332,6 +361,7 @@
             "aria-label": "${state.label || null}",
             "aria-labelledby": "${state.labelledby || null}",
             "aria-describedby": "${state.describedby || null}",
+            "aria-invalid": "${state.invalid ? 'true' : null}",
             "name": "${state.name || null}",
             "min": "${state.min || null}",
             "max": "${state.max || null}",
@@ -339,6 +369,12 @@
             "disabled": {
               "$ref": "#/state/disabled"
             },
+            "readonly": {
+              "$ref": "#/state/readonly"
+            },
+            "required": {
+              "$ref": "#/state/required"
+            },
             "value": "${state.value}"
           },
           "value": {
@@ -378,9 +414,7 @@
                     "type": "button",
                     "tabindex": "-1",
                     "aria-label": "${state.stepUpLabel}",
-                    "disabled": {
-                      "$ref": "#/state/disabled"
-                    }
+                    "disabled": "${state.disabled || state.readonly}"
                   },
                   "onclick": {
                     "$ref": "#/state/onStepUp"
@@ -408,9 +442,7 @@
                     "type": "button",
                     "tabindex": "-1",
                     "aria-label": "${state.stepDownLabel}",
-                    "disabled": {
-                      "$ref": "#/state/disabled"
-                    }
+                    "disabled": "${state.disabled || state.readonly}"
                   },
                   "onclick": {
                     "$ref": "#/state/onStepDown"

package/components/jx-option.json

@@ -264,6 +264,14 @@
     "&[aria-selected=\"true\"] [part=\"description\"], &[aria-selected=\"true\"] [part=\"end\"], &[aria-selected=\"true\"] [part=\"icon\"]": {
       "$description": "A highlighted row draws on the accent, and a muted grey on an accent fails SC 1.4.3. Every channel takes the row's own ink instead of keeping its own.",
       "color": "inherit"
+    },
+    "@(forced-colors: active)": {
+      "&[aria-selected=\"true\"]": {
+        "$description": "The highlighted row, redrawn. Forced colours replace the accent fill with the list's own Canvas, so the caret would move through a menu, a listbox or a combobox with nothing on screen following it. The system's selection pair says it instead, as jx-action-group does for its chosen segment; the description, end and icon already inherit the row's ink.",
+        "forcedColorAdjust": "none",
+        "background": "Highlight",
+        "color": "HighlightText"
+      }
     }
   },
   "children": [

package/components/jx-select.json

@@ -102,6 +102,11 @@
       "default": "",
       "description": "This element's own id stem, minted on mount. The error and help sentences take their ids from it, and the control names those ids in aria-describedby."
     },
+    "plain": {
+      "type": "boolean",
+      "default": false,
+      "description": "Written at mount, never authored: the engine has no appearance: base-select, so the control is the platform's plain select. A plain select draws an option as its text and nothing else, which would run a row's label and its description together into one word, so the description is left out of the row while this is true. Faces, swatches and group headings are drawing only and simply do not appear."
+    },
     "hasError": {
       "$expression": {
         "operator": "!==",
@@ -266,6 +271,10 @@
     "&[data-invalid] select": {
       "borderColor": "var(--jx-danger)"
     },
+    "& select:user-invalid": {
+      "$description": "The control's own verdict after the reader has been through it, drawn as the host's is: a required select left on its empty row.",
+      "borderColor": "var(--jx-danger)"
+    },
     "& [part=\"trigger\"]": {
       "display": "flex",
       "alignItems": "center",
@@ -500,9 +509,9 @@
                 "tagName": "span",
                 "attributes": {
                   "part": "description",
-                  "hidden": "${!$map.item.description}"
+                  "hidden": "${state.plain || !$map.item.description}"
                 },
-                "textContent": "${$map.item.description || ''}"
+                "textContent": "${state.plain ? '' : $map.item.description || ''}"
               }
             ]
           }
@@ -600,9 +609,9 @@
                       "tagName": "span",
                       "attributes": {
                         "part": "description",
-                        "hidden": "${!$map.item.description}"
+                        "hidden": "${state.plain || !$map.item.description}"
                       },
-                      "textContent": "${$map.item.description || ''}"
+                      "textContent": "${state.plain ? '' : $map.item.description || ''}"
                     }
                   ]
                 }

package/components/jx-slider.json

@@ -5,6 +5,8 @@
   "observedAttributes": [
     "label",
     "labelledby",
+    "describedby",
+    "name",
     "value",
     "min",
     "max",
@@ -25,6 +27,18 @@
       "attribute": "labelledby",
       "description": "Forwarded to the inner range as aria-labelledby, for a visible label the element does not own."
     },
+    "describedby": {
+      "type": "string",
+      "default": "",
+      "attribute": "describedby",
+      "description": "The id of the sentence that describes the control, forwarded as its aria-describedby. A jx-field row writes it for a slider slotted into one."
+    },
+    "name": {
+      "type": "string",
+      "default": "",
+      "attribute": "name",
+      "description": "The name the value is submitted under, forwarded to the control."
+    },
     "value": {
       "type": "number",
       "default": 0,
@@ -188,6 +202,8 @@
         "type": "range",
         "aria-label": "${state.label || null}",
         "aria-labelledby": "${state.labelledby || null}",
+        "aria-describedby": "${state.describedby || null}",
+        "name": "${state.name || null}",
         "aria-valuetext": "${state.valuetext || null}",
         "min": "${state.min}",
         "max": "${state.max}",

package/components/jx-switch.json

@@ -5,11 +5,13 @@
   "observedAttributes": [
     "checked",
     "disabled",
+    "required",
     "hint",
     "label",
     "labelledby",
     "describedby",
     "name",
+    "value",
     "size"
   ],
   "$elements": [
@@ -30,6 +32,12 @@
       "attribute": "disabled",
       "description": "Cannot be flipped or focused. Disabled, never absent, and the hint moves from the tip to the row's title while it is: a disabled control cannot open a tip, and why the setting cannot be changed is exactly what the reader hovers to find out."
     },
+    "required": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "required",
+      "description": "Forwarded to the control: a required switch left off fails the form's own check."
+    },
     "hint": {
       "type": "string",
       "default": "",
@@ -60,6 +68,12 @@
       "attribute": "name",
       "description": "The form field name, forwarded to the control."
     },
+    "value": {
+      "type": "string",
+      "default": "",
+      "attribute": "value",
+      "description": "What a switch that is on submits under its name. Empty leaves the platform's own \"on\"."
+    },
     "size": {
       "type": "string",
       "default": "md",
@@ -272,9 +286,13 @@
             "aria-describedby": "${[state.hasTip ? state.uid + '-tip' : null, state.describedby || null].filter(Boolean).join(' ') || null}",
             "tabindex": "${state.tabindex || null}",
             "name": "${state.name || null}",
+            "value": "${state.value || null}",
             "disabled": {
               "$ref": "#/state/disabled"
             },
+            "required": {
+              "$ref": "#/state/required"
+            },
             "checked": {
               "$ref": "#/state/checked"
             }

package/components/jx-textfield.json

@@ -278,7 +278,26 @@
             "Escape": [
               {
                 "if": {
-                  "$ref": "#/state/showClear"
+                  "operator": "&&",
+                  "target": {
+                    "operator": "&&",
+                    "target": {
+                      "operator": "!",
+                      "target": {
+                        "$ref": "event#/isComposing"
+                      }
+                    },
+                    "value": {
+                      "operator": "!==",
+                      "target": {
+                        "$ref": "event#/keyCode"
+                      },
+                      "value": 229
+                    }
+                  },
+                  "value": {
+                    "$ref": "#/state/showClear"
+                  }
                 },
                 "then": [
                   {
@@ -307,16 +326,35 @@
                 "if": {
                   "operator": "&&",
                   "target": {
-                    "operator": "===",
+                    "operator": "&&",
                     "target": {
-                      "$ref": "#/state/type"
+                      "operator": "!",
+                      "target": {
+                        "$ref": "event#/isComposing"
+                      }
                     },
-                    "value": "search"
+                    "value": {
+                      "operator": "!==",
+                      "target": {
+                        "$ref": "event#/keyCode"
+                      },
+                      "value": 229
+                    }
                   },
                   "value": {
-                    "operator": "!",
+                    "operator": "&&",
                     "target": {
-                      "$ref": "#/state/multiline"
+                      "operator": "===",
+                      "target": {
+                        "$ref": "#/state/type"
+                      },
+                      "value": "search"
+                    },
+                    "value": {
+                      "operator": "!",
+                      "target": {
+                        "$ref": "#/state/multiline"
+                      }
                     }
                   }
                 },
@@ -340,7 +378,7 @@
           "description": "Escape finished emptying a clearable field; e.target is the field."
         }
       ],
-      "description": "Two keys, and nothing else. Escape empties a clearable field that has something in it, and cancels so the key does not also close whatever the field sits in. Enter is cancelled on a single-line search field: a search input inside a form submits it, and a search field is the one kind that never means to — the element owns no form, so the guard lives here rather than at every call site. A textarea never submits on Enter, so a multiline field keeps the key and the reader keeps the newline."
+      "description": "Two keys, and nothing else. Escape empties a clearable field that has something in it, and cancels so the key does not also close whatever the field sits in. Enter is cancelled on a single-line search field: a search input inside a form submits it, and a search field is the one kind that never means to — the element owns no form, so the guard lives here rather than at every call site. A textarea never submits on Enter, so a multiline field keeps the key and the reader keeps the newline. A key pressed while an input method is composing belongs to the input method: the Enter that accepts a candidate and the Escape that dismisses the candidate list are neither a submit nor a clear, so both cases stand down while event.isComposing is true or the key code is 229, which is how the engines that have already ended the composition still mark its last key."
     }
   },
   "onkeydown": {
@@ -435,6 +473,10 @@
     "&[data-invalid] [part=\"input\"]": {
       "borderColor": "var(--jx-danger)"
     },
+    "& [part=\"input\"]:user-invalid": {
+      "$description": "The control's OWN verdict, drawn the way the host's is: a required field left empty or an address that is not one draws the danger border once the reader has finished with it. :user-invalid and never :invalid, which is true of an untouched required field before anyone has typed.",
+      "borderColor": "var(--jx-danger)"
+    },
     "&[data-clearable] [part=\"input\"]": {
       "::-webkit-search-cancel-button": {
         "appearance": "none"
@@ -447,7 +489,7 @@
       "fontSize": "var(--jx-text-lg)"
     },
     "& [part=\"clear\"]": {
-      "$description": "The clear button sits inside the field's border, so it draws 2px under the field's height: 22px in a 24px field, and 18px in an `sm` one. The `::before` is its hit area (WCAG 2.2 SC 2.5.8, ui.md \u00a74.3): an empty pseudo-element inset by half the difference between the drawn box and the kit's control height, which is -1px on a default field and -3px on a small one, so the region that accepts the pointer is `--jx-control-h` square at every size while the glyph and its hover box stay where they were. On a large field the difference is positive and the pseudo-element is an invisible box INSIDE a button that is already over the floor, which changes nothing. jx-tab's close button is the technique; the button is absolutely positioned already, so it is its own containing block. The extension lies over the input it clears, which was true of the drawn button too, and 2px past the field's edge at `sm`, where a neighbour at the kit's 4px gap extends 2px back and the two abut. `contain: layout` keeps the expansion LOCAL: an absolutely positioned box still counts toward the SCROLLABLE overflow of the nearest ancestor whose `overflow` is not `visible`, invisible or not, so a host that scrolls picks up a couple of phantom pixels from every `::before` like this one between it and the field, and draws a scrollbar over content that already fit.",
+      "$description": "The clear button sits inside the field's border, so it draws 2px under the field's height: 22px in a 24px field, and 18px in an `sm` one. The `::before` is its hit area (WCAG 2.2 SC 2.5.8, ui.md §4.3): an empty pseudo-element inset by half the difference between the drawn box and the kit's control height, which is -1px on a default field and -3px on a small one, so the region that accepts the pointer is `--jx-control-h` square at every size while the glyph and its hover box stay where they were. On a large field the difference is positive and the pseudo-element is an invisible box INSIDE a button that is already over the floor, which changes nothing. jx-tab's close button is the technique; the button is absolutely positioned already, so it is its own containing block. The extension lies over the input it clears, which was true of the drawn button too, and 2px past the field's edge at `sm`, where a neighbour at the kit's 4px gap extends 2px back and the two abut. `contain: layout` keeps the expansion LOCAL: an absolutely positioned box still counts toward the SCROLLABLE overflow of the nearest ancestor whose `overflow` is not `visible`, invisible or not, so a host that scrolls picks up a couple of phantom pixels from every `::before` like this one between it and the field, and draws a scrollbar over content that already fit.",
       "position": "absolute",
       "insetBlockStart": "1px",
       "insetInlineEnd": "1px",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/ui",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "The Jx UI kit: interface elements authored as Jx documents, with their theme and icons",
   "license": "MIT",
   "repository": {
@@ -58,8 +58,8 @@
     "upgrade": "bun update --latest && bun install"
   },
   "dependencies": {
-    "@jxsuite/runtime": "^6.3.0",
-    "@jxsuite/schema": "^5.6.0"
+    "@jxsuite/runtime": "^7.0.0",
+    "@jxsuite/schema": "^6.0.0"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^21.0.4",

package/project.json

@@ -129,17 +129,15 @@
       "--jx-radius-md": "6px",
       "--jx-radius-lg": "10px",
       "--jx-focus-ring": "2px solid var(--jx-accent)",
-      "--jx-shadow-popover": "0 0 0 1px var(--jx-border-strong), 0 8px 24px -8px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.3)",
-      "--jx-shadow-dialog": "0 0 0 1px var(--jx-border-strong), 0 24px 64px -16px rgb(0 0 0 / 0.7)",
+      "--jx-shadow-popover": "0 0 0 1px var(--jx-border-strong), 0 8px 24px -8px light-dark(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.6)), 0 2px 6px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.3))",
+      "--jx-shadow-dialog": "0 0 0 1px var(--jx-border-strong), 0 24px 64px -16px light-dark(rgb(0 0 0 / 0.25), rgb(0 0 0 / 0.7))",
       "--jx-dur-1": "150ms",
       "--jx-dur-2": "200ms",
       "--jx-ease-out": "cubic-bezier(0.2, 0, 0, 1)",
       "--jx-ease-in": "cubic-bezier(0.4, 0, 1, 1)",
       "colorScheme": "light dark",
       "&[data-theme=\"light\"]": {
-        "colorScheme": "light",
-        "--jx-shadow-popover": "0 0 0 1px var(--jx-border-strong), 0 8px 24px -8px rgb(0 0 0 / 0.18), 0 2px 6px rgb(0 0 0 / 0.1)",
-        "--jx-shadow-dialog": "0 0 0 1px var(--jx-border-strong), 0 24px 64px -16px rgb(0 0 0 / 0.25)"
+        "colorScheme": "light"
       },
       "&[data-theme=\"dark\"]": {
         "colorScheme": "dark"

package/src/behaviors/combobox.ts

@@ -390,6 +390,15 @@ export function onComboboxKeydown(state: ComboboxState, event: KeyboardEvent): v
   if (!host || event.ctrlKey || event.metaKey) {
     return;
   }
+  /*
+   * An input method is composing: the arrows walk ITS candidate list and Enter accepts ITS
+   * candidate, so none of them is the reader's answer to this list yet. `keyCode` 229 is the same
+   * statement from the engines that fire the keydown before `compositionstart` sets the flag.
+   */
+  // oxlint-disable-next-line typescript/no-deprecated -- the only signal Safari gives for the Enter that ends a composition.
+  if (event.isComposing || event.keyCode === 229) {
+    return;
+  }
   const rows = rowsOf(state);
   const at = Number(state.activeIndex ?? -1);
   switch (event.key) {

package/src/behaviors/number-field.ts

@@ -87,7 +87,9 @@ function announce(host: HTMLElement): void {
 export function stepBy(state: NumberFieldState, event: Event, n: number): void {
   const host = hostOf(event);
   const control = host ? controlOf(host) : null;
-  if (!host || !control) {
+  /* `stepUp()` and `stepDown()` are script, and script may write a readonly control: the platform
+     only stops the reader's own keys. The element steps on the reader's behalf, so it stops too. */
+  if (!host || !control || control.readOnly) {
     return;
   }
   try {

package/src/behaviors/select.ts

@@ -55,6 +55,20 @@ export interface SelectState {
   unlisted?: SelectRow[];
   /** This element's own id stem, minted at mount. */
   uid?: string;
+  /** Whether the engine draws a plain select: it has no `appearance: base-select`. */
+  plain?: boolean;
+}
+
+/**
+ * Whether the engine can draw a select's own list, which is what every row's drawing depends on.
+ *
+ * Asked of the engine and never guessed from its name. An engine without the feature still gives a
+ * working control, with the platform's own list: it ignores the trigger button and the group
+ * headings, and draws each row as its text. That is why the one thing the fallback has to change is
+ * text: a row's label and its description are two spans, and read as text they are one word.
+ */
+export function drawsOwnList(): boolean {
+  return typeof CSS !== "undefined" && CSS.supports("appearance", "base-select");
 }
 
 /** How many stems have been minted, so no two instances share one. */
@@ -136,6 +150,7 @@ export function syncSelect(state: SelectState, sel: HTMLSelectElement): void {
 export function mountSelect(state: SelectState, host: HTMLElement): void {
   minted += 1;
   state.uid = `jx-select-${minted}`;
+  state.plain = !drawsOwnList();
   const sel = controlOf(host);
   if (!sel) {
     return;

package/src/behaviors/textfield.ts

@@ -109,6 +109,44 @@ export function mintFieldId(state: TextfieldState): void {
 
 let namedRows = 0;
 
+/** The native controls a reader can be IN, which is where a row's label leads. */
+const FOCUSABLE_CONTROLS = "input:not([type=hidden]), select, textarea, button";
+
+/**
+ * A click on a `jx-field`'s label moves focus to the control the row holds, which is what a `<label
+ * for>` does and what a reader aiming at the bigger target expects.
+ *
+ * It is done here rather than with a `for`, because `for` needs an id on the native control and the
+ * control a kit element draws is its own to replace: `jx-textfield` swaps an `<input>` for a
+ * `<textarea>` when `multiline` changes, and an id minted at mount would not survive that. So the
+ * control is looked up at the click: the slotted element itself when it is a native control,
+ * otherwise the first one it draws.
+ *
+ * The click moves focus and nothing else. It does not tick a box or flip a switch: the row's label
+ * sits a column away from its control and Studio's rows are dense, so a label that toggled would
+ * change a setting on a click that was aimed at reading it. A disabled control takes no focus, and
+ * the platform is what says so.
+ *
+ * @param _state The row's reactive scope, which this never reads.
+ * @param event The click on the row's label.
+ */
+export function focusFieldControl(_state: FieldRowState, event: Event): void {
+  const label = event.currentTarget;
+  if (!(label instanceof Element)) {
+    return;
+  }
+  const control = label.nextElementSibling?.firstElementChild;
+  if (!control) {
+    return;
+  }
+  const target = control.matches(FOCUSABLE_CONTROLS)
+    ? control
+    : control.querySelector(FOCUSABLE_CONTROLS);
+  if (target instanceof HTMLElement) {
+    target.focus();
+  }
+}
+
 /** Whether an element's DEFINITION says it can be named — that it observes `labelledby`. */
 function observesNaming(el: Element): boolean {
   const def = customElements.get(el.localName);