@jxsuite/ui 0.10.4 → 0.12.0

package/components/jx-accordion-item.json

@@ -167,7 +167,11 @@
       "overflow": "hidden",
       "textOverflow": "ellipsis",
       "whiteSpace": "nowrap",
-      "fontWeight": "500"
+      "color": "var(--jx-heading-color)",
+      "fontSize": "var(--jx-heading-size)",
+      "fontWeight": "var(--jx-heading-weight)",
+      "letterSpacing": "var(--jx-heading-tracking)",
+      "textTransform": "uppercase"
     },
     "& > [part=\"details\"] > [part=\"summary\"] > [part=\"actions\"]": {
       "display": "inline-flex",

package/components/jx-action-button.json

@@ -432,7 +432,7 @@
       "gap": "2px",
       "width": "100%",
       "minWidth": "0",
-      "padding": "var(--jx-space-2) var(--jx-space-1)",
+      "padding": "var(--jx-space-2) 0",
       "borderRadius": "0",
       "fontSize": "var(--jx-text-xs)",
       "lineHeight": "var(--jx-leading-xs)"

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": {
@@ -85,6 +91,14 @@
       "textOverflow": "ellipsis",
       "whiteSpace": "nowrap"
     },
+    "@container (max-width: 288px)": {
+      "$description": "A narrow row stacks on its own: when the nearest inline-size container is under 288px, the label goes above the control and reads from the left, exactly as `span` draws it. Under that width the 80px label column leaves the control too little room and cuts long labels off. A host opts its regions in by declaring `container-type: inline-size` (Studio's side panels do); with no container above it a row keeps its two columns, so a dialog's form is unchanged. The width is a px literal because a container condition cannot read a custom property, and not rem because Studio roots its type at 12px, which would make 18rem 216px.",
+      "gridTemplateColumns": "minmax(0, 1fr)",
+      "& > [part=\"label\"]": {
+        "width": "auto",
+        "textAlign": "left"
+      }
+    },
     "&[data-span] > [part=\"label\"]": {
       "width": "auto",
       "textAlign": "left"
@@ -128,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

@@ -0,0 +1,221 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxSlider",
+  "tagName": "jx-slider",
+  "observedAttributes": [
+    "label",
+    "labelledby",
+    "describedby",
+    "name",
+    "value",
+    "min",
+    "max",
+    "step",
+    "valuetext",
+    "disabled"
+  ],
+  "state": {
+    "label": {
+      "type": "string",
+      "default": "",
+      "attribute": "label",
+      "description": "The accessible name, forwarded to the inner range as aria-label. Required unless labelledby names a visible one: a slider is in the accessibility lint's LABELLED_ROLES, so it may not take its name from anything it contains, and an unnamed track is announced as \"slider\" and a number."
+    },
+    "labelledby": {
+      "type": "string",
+      "default": "",
+      "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,
+      "attribute": "value",
+      "description": "Where the thumb is, in the track's own units. It is bound to the inner range BOTH ways: as the value property, which is the live value once the reader's first drag has set the control's dirty flag, and as the value attribute, which is the control's default."
+    },
+    "min": {
+      "type": "number",
+      "default": 0,
+      "attribute": "min",
+      "description": "The bottom of the range."
+    },
+    "max": {
+      "type": "number",
+      "default": 100,
+      "attribute": "max",
+      "description": "The top of the range."
+    },
+    "step": {
+      "type": "number",
+      "default": 1,
+      "attribute": "step",
+      "description": "The grid the value moves on, for the platform's own arrow keys and for the kit's ten-step Shift+Arrow."
+    },
+    "valuetext": {
+      "type": "string",
+      "default": "",
+      "attribute": "valuetext",
+      "description": "What the value is announced as, forwarded to aria-valuetext: \"125%\" rather than the bare track position. Empty leaves the number to be read, which is right for a track whose units are its position."
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": false,
+      "attribute": "disabled",
+      "description": "Cannot be moved or focused. Forwarded to the inner range, so the refusal is the platform's rather than a style that only looks like one."
+    },
+    "fill": "${state.max > state.min ? Math.min(100, Math.max(0, (state.value - state.min) / (state.max - state.min) * 100)) : 0}",
+    "onInput": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/slider.ts",
+      "$export": "onSliderInput",
+      "emits": [
+        {
+          "name": "input",
+          "description": "The value is moving under the reader's hand. It comes from the ELEMENT, so e.target.value is the number in the track's own units."
+        }
+      ],
+      "description": "Mirrors the inner range into value and re-says the platform's own input from the host."
+    },
+    "onChange": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/slider.ts",
+      "$export": "onSliderChange",
+      "emits": [
+        {
+          "name": "change",
+          "description": "The reader committed the value; e.target is the element."
+        }
+      ],
+      "description": "The same mirror and the same re-say, for the commit."
+    },
+    "onKeydown": {
+      "$prototype": "Function",
+      "$src": "jx-ui:/behaviors/slider.ts",
+      "$export": "onSliderKeydown",
+      "description": "Shift+Arrow moves ten steps, which no range has of its own. A plain arrow, Home, End and the Page keys are the platform's and are not touched."
+    }
+  },
+  "oninput": {
+    "$ref": "#/state/onInput"
+  },
+  "onchange": {
+    "$ref": "#/state/onChange"
+  },
+  "onkeydown": {
+    "$ref": "#/state/onKeydown"
+  },
+  "attributes": {
+    "data-disabled": "${state.disabled ? '' : null}"
+  },
+  "style": {
+    "display": "block",
+    "&[hidden]": {
+      "display": "none"
+    },
+    "boxSizing": "border-box",
+    "inlineSize": "100%",
+    "minInlineSize": "64px",
+    "--jx-slider-track-h": "4px",
+    "--jx-slider-thumb": "12px",
+    "--jx-slider-fill": "${state.fill}%",
+    "&[data-disabled]": {
+      "opacity": "0.5"
+    },
+    "& [part=\"input\"]": {
+      "appearance": "none",
+      "display": "block",
+      "boxSizing": "border-box",
+      "inlineSize": "100%",
+      "blockSize": "var(--jx-control-h)",
+      "margin": "0",
+      "padding": "0",
+      "border": "0",
+      "background": "transparent",
+      "font": "inherit",
+      "cursor": "pointer",
+      "outline": "none",
+      ":focus-visible": {
+        "outline": "var(--jx-focus-ring)",
+        "outlineOffset": "1px",
+        "borderRadius": "var(--jx-radius-sm)"
+      },
+      ":disabled": {
+        "cursor": "default"
+      }
+    },
+    "& [part=\"input\"]::-webkit-slider-runnable-track": {
+      "blockSize": "var(--jx-slider-track-h)",
+      "borderRadius": "var(--jx-radius-sm)",
+      "background": "linear-gradient(to right, var(--jx-accent-solid) var(--jx-slider-fill), var(--jx-border-strong) var(--jx-slider-fill))"
+    },
+    "& [part=\"input\"]::-moz-range-track": {
+      "blockSize": "var(--jx-slider-track-h)",
+      "borderRadius": "var(--jx-radius-sm)",
+      "background": "var(--jx-border-strong)"
+    },
+    "& [part=\"input\"]::-moz-range-progress": {
+      "blockSize": "var(--jx-slider-track-h)",
+      "borderRadius": "var(--jx-radius-sm)",
+      "background": "var(--jx-accent-solid)"
+    },
+    "& [part=\"input\"]::-webkit-slider-thumb": {
+      "appearance": "none",
+      "boxSizing": "border-box",
+      "inlineSize": "var(--jx-slider-thumb)",
+      "blockSize": "var(--jx-slider-thumb)",
+      "marginBlockStart": "calc((var(--jx-slider-track-h) - var(--jx-slider-thumb)) / 2)",
+      "borderRadius": "50%",
+      "border": "2px solid var(--jx-bg)",
+      "boxShadow": "0 0 0 1px var(--jx-fg)",
+      "background": "var(--jx-fg)",
+      "cursor": "inherit"
+    },
+    "& [part=\"input\"]::-moz-range-thumb": {
+      "appearance": "none",
+      "boxSizing": "border-box",
+      "inlineSize": "var(--jx-slider-thumb)",
+      "blockSize": "var(--jx-slider-thumb)",
+      "borderRadius": "50%",
+      "border": "2px solid var(--jx-bg)",
+      "boxShadow": "0 0 0 1px var(--jx-fg)",
+      "background": "var(--jx-fg)",
+      "cursor": "inherit"
+    }
+  },
+  "children": [
+    {
+      "tagName": "input",
+      "attributes": {
+        "part": "input",
+        "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}",
+        "step": "${state.step}",
+        "value": "${state.value}",
+        "disabled": {
+          "$ref": "#/state/disabled"
+        }
+      },
+      "value": {
+        "$ref": "#/state/value"
+      }
+    }
+  ]
+}

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/components/jx-tree-item.json

@@ -181,9 +181,14 @@
       "justifyContent": "center",
       "inlineSize": "14px",
       "flex": "none",
+      "alignSelf": "stretch",
       "color": "var(--jx-fg-dim)",
       "--jx-icon-size": "12px"
     },
+    "&[aria-expanded] [part=\"twisty\"]": {
+      "$description": "A row that can open answers a press on its twisty, so it says so: the cursor is `pointer` rather than whatever the row inherits (a host that makes the whole row a drag handle draws `grab`, and a chevron that looks grabbable is an invitation to start a drag instead of a toggle). The box is the row's whole height (`align-self: stretch` above), because a click target as tall as a 12px glyph loses the press to a pixel of vertical drift. A leaf has no `aria-expanded` and keeps its row's cursor: its dead cell is not a control.",
+      "cursor": "pointer"
+    },
     "& [part=\"label\"]": {
       "flex": "1",
       "minWidth": "0",

package/icons/list.json

@@ -20,6 +20,7 @@
   "arrows-clockwise": ["regular"],
   "arrows-horizontal": ["regular"],
   "arrows-in-line-horizontal": ["regular"],
+  "arrows-in-line-vertical": ["regular"],
   "arrows-out": ["regular"],
   "arrows-out-line-horizontal": ["regular"],
   "arrows-out-line-vertical": ["regular"],

package/icons/manifest.json

@@ -67,6 +67,9 @@
     "arrows-in-line-horizontal": {
       "regular": "M136,40V216a8,8,0,0,1-16,0V40a8,8,0,0,1,16,0ZM69.66,90.34a8,8,0,0,0-11.32,11.32L76.69,120H16a8,8,0,0,0,0,16H76.69L58.34,154.34a8,8,0,0,0,11.32,11.32l32-32a8,8,0,0,0,0-11.32ZM240,120H179.31l18.35-18.34a8,8,0,0,0-11.32-11.32l-32,32a8,8,0,0,0,0,11.32l32,32a8,8,0,0,0,11.32-11.32L179.31,136H240a8,8,0,0,0,0-16Z"
     },
+    "arrows-in-line-vertical": {
+      "regular": "M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM122.34,101.66a8,8,0,0,0,11.32,0l32-32a8,8,0,0,0-11.32-11.32L136,76.69V16a8,8,0,0,0-16,0V76.69L101.66,58.34A8,8,0,0,0,90.34,69.66Zm11.32,52.68a8,8,0,0,0-11.32,0l-32,32a8,8,0,0,0,11.32,11.32L120,179.31V240a8,8,0,0,0,16,0V179.31l18.34,18.35a8,8,0,0,0,11.32-11.32Z"
+    },
     "arrows-out": {
       "regular": "M216,48V96a8,8,0,0,1-16,0V67.31l-42.34,42.35a8,8,0,0,1-11.32-11.32L188.69,56H160a8,8,0,0,1,0-16h48A8,8,0,0,1,216,48ZM98.34,146.34,56,188.69V160a8,8,0,0,0-16,0v48a8,8,0,0,0,8,8H96a8,8,0,0,0,0-16H67.31l42.35-42.34a8,8,0,0,0-11.32-11.32ZM208,152a8,8,0,0,0-8,8v28.69l-42.34-42.35a8,8,0,0,0-11.32,11.32L188.69,200H160a8,8,0,0,0,0,16h48a8,8,0,0,0,8-8V160A8,8,0,0,0,208,152ZM67.31,56H96a8,8,0,0,0,0-16H48a8,8,0,0,0-8,8V96a8,8,0,0,0,16,0V67.31l42.34,42.35a8,8,0,0,0,11.32-11.32Z"
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/ui",
-  "version": "0.10.4",
+  "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.2.2",
-    "@jxsuite/schema": "^5.5.0"
+    "@jxsuite/runtime": "^7.0.0",
+    "@jxsuite/schema": "^6.0.0"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^21.0.4",

package/project.json

@@ -15,7 +15,9 @@
       "--jx-gray-200": "#e1e1e7",
       "--jx-gray-300": "#c9c9d2",
       "--jx-gray-400": "#a2a2af",
+      "--jx-gray-450": "#8f8f9d",
       "--jx-gray-500": "#7c7c8b",
+      "--jx-gray-550": "#6d6d7c",
       "--jx-gray-600": "#5e5e6c",
       "--jx-gray-700": "#45454f",
       "--jx-gray-800": "#2f2f36",
@@ -76,7 +78,7 @@
       "--jx-border-strong": "light-dark(var(--jx-gray-300), var(--jx-gray-700))",
       "--jx-fg": "light-dark(var(--jx-gray-900), var(--jx-gray-100))",
       "--jx-fg-dim": "light-dark(var(--jx-gray-600), var(--jx-gray-400))",
-      "--jx-fg-muted": "var(--jx-gray-500)",
+      "--jx-fg-muted": "light-dark(var(--jx-gray-550), var(--jx-gray-450))",
       "--jx-accent": "light-dark(var(--jx-blue-600), var(--jx-blue-500))",
       "--jx-accent-solid": "var(--jx-blue-600)",
       "--jx-accent-hover": "light-dark(var(--jx-blue-700), var(--jx-blue-400))",
@@ -99,7 +101,7 @@
       "--jx-switch-thumb": "light-dark(#ffffff, var(--jx-gray-100))",
       "--jx-font-sans": "\"Inter Variable\", \"Inter\", system-ui, -apple-system, \"Segoe UI\", sans-serif",
       "--jx-font-mono": "\"JetBrains Mono\", \"SF Mono\", \"Fira Code\", monospace",
-      "--jx-text-xs": "10px",
+      "--jx-text-xs": "11px",
       "--jx-text-sm": "11px",
       "--jx-text-md": "12px",
       "--jx-text-lg": "14px",
@@ -107,6 +109,10 @@
       "--jx-leading-sm": "16px",
       "--jx-leading-md": "18px",
       "--jx-leading-lg": "20px",
+      "--jx-heading-size": "var(--jx-text-sm)",
+      "--jx-heading-weight": "600",
+      "--jx-heading-tracking": "0.06em",
+      "--jx-heading-color": "var(--jx-fg-dim)",
       "--jx-space-1": "2px",
       "--jx-space-2": "4px",
       "--jx-space-3": "8px",
@@ -123,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/slider.ts

@@ -0,0 +1,126 @@
+/**
+ * `jx-slider`'s behaviour sidecar: ten steps, and one event contract.
+ *
+ * The element is ONE native `<input type="range">`, so almost nothing is left for this file. The
+ * platform owns the thumb, the drag, the along-axis arrows with their clamping and snapping, Home,
+ * End, PageUp, PageDown, the focus ring, `:disabled`, and every word of `role="slider"` with its
+ * `aria-valuemin`, `aria-valuemax` and `aria-valuenow`. An arrow key with no `Shift` on it returns
+ * from {@link onSliderKeydown} untouched so that stays true.
+ *
+ * Two things are the kit's, and both are `jx-color-slider`'s (its sidecar is the model):
+ * `Shift`+Arrow moves ten steps, which no range has of its own, and the inner control's own `input`
+ * and `change` are STOPPED and re-dispatched from the host, so a listener reads `e.target.value`
+ * off the ELEMENT as a number and never has to ask which node fired. A native `dblclick` is not
+ * touched: it bubbles from the range, and the host document that wants "double-click resets"
+ * listens for it.
+ *
+ * @docs extending/ui-kit
+ */
+
+import { ARROW_SIGN, snapToStep } from "../color.ts";
+
+/** The tag this sidecar belongs to. */
+const HOST = "jx-slider";
+
+/** The reactive scope a `jx-slider` document hands its handlers. */
+export interface SliderState {
+  /** Where the thumb is, in the track's own units. */
+  value: number;
+  /** The bottom of the range. */
+  min: number;
+  /** The top of the range. */
+  max: number;
+  /** The grid the value moves on. */
+  step: number;
+  /** Whether the element refuses to move. */
+  disabled: boolean;
+}
+
+/** The `jx-slider` an event is being handled on. */
+function hostOf(event: Event): HTMLElement | null {
+  const target = event.currentTarget;
+  return target instanceof HTMLElement && target.localName === HOST ? target : null;
+}
+
+/** The element's own native range. */
+function controlOf(host: HTMLElement): HTMLInputElement | null {
+  return host.querySelector<HTMLInputElement>('input[part="input"]');
+}
+
+/** Say the value moved, from the HOST, in the platform's own names. */
+function announce(host: HTMLElement, ...names: string[]): void {
+  for (const name of names) {
+    host.dispatchEvent(new Event(name, { bubbles: true }));
+  }
+}
+
+/**
+ * The inner range's `input`: mirror it, and re-say it from the host.
+ *
+ * @param state The element's reactive scope.
+ * @param event The range's own input event.
+ */
+export function onSliderInput(state: SliderState, event: Event): void {
+  const host = hostOf(event);
+  if (!host || event.target === host) {
+    /* The listener sits on the ROOT so `currentTarget` is the element, which means it also hears
+       the element's own re-dispatch. That one has already been accounted for. */
+    return;
+  }
+  event.stopPropagation();
+  /* SAFETY: the element's only form control is its `input[part="input"]` range, so an `input` event
+     reaching the host from anything other than the host itself was fired by that range. */
+  state.value = Number((event.target as HTMLInputElement).value);
+  announce(host, "input");
+}
+
+/**
+ * The inner range's `change`: the same stop, and the commit re-said from the host.
+ *
+ * @param state The element's reactive scope.
+ * @param event The range's own change event.
+ */
+export function onSliderChange(state: SliderState, event: Event): void {
+  const host = hostOf(event);
+  if (!host || event.target === host) {
+    return;
+  }
+  event.stopPropagation();
+  /* SAFETY: the element's only form control is its `input[part="input"]` range, so a `change` event
+     reaching the host from anything other than the host itself was fired by that range. */
+  state.value = Number((event.target as HTMLInputElement).value);
+  announce(host, "change");
+}
+
+/**
+ * `Shift`+Arrow: ten steps, cancelled so the platform's own single step does not run on top.
+ *
+ * @param state The element's reactive scope.
+ * @param event The keydown.
+ */
+export function onSliderKeydown(state: SliderState, event: KeyboardEvent): void {
+  const host = hostOf(event);
+  const sign = ARROW_SIGN.get(event.key);
+  if (!host || !sign || !event.shiftKey || state.disabled === true) {
+    return;
+  }
+  event.preventDefault();
+  const min = Number.isFinite(Number(state.min)) ? Number(state.min) : 0;
+  const top = Number(state.max);
+  const max = Number.isFinite(top) && top > min ? top : min + 100;
+  const step =
+    Number(state.step) > 0 && Number.isFinite(Number(state.step)) ? Number(state.step) : 1;
+  const next = snapToStep(Number(state.value) + sign * step * 10, step, min, max);
+  if (next === Number(state.value)) {
+    return;
+  }
+  state.value = next;
+  /* The control follows through its own binding, but the binding is what a RENDER does and the
+     events go out now, so the control is written here too: a host that reads the range back out of
+     `e.target` during the handler must not see the value it had before the key. */
+  const control = controlOf(host);
+  if (control) {
+    control.value = String(next);
+  }
+  announce(host, "input", "change");
+}

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);

package/src/documents.ts

@@ -27,6 +27,7 @@ import jxCombobox from "../components/jx-combobox.json";
 import jxListbox from "../components/jx-listbox.json";
 import jxOption from "../components/jx-option.json";
 import jxSelect from "../components/jx-select.json";
+import jxSlider from "../components/jx-slider.json";
 import jxSpinner from "../components/jx-spinner.json";
 import jxSplit from "../components/jx-split.json";
 import jxTooltip from "../components/jx-tooltip.json";
@@ -86,6 +87,7 @@ export const documents = {
   "jx-switch": kitDocument(jxSwitch),
   "jx-number-field": kitDocument(jxNumberField),
   "jx-select": kitDocument(jxSelect),
+  "jx-slider": kitDocument(jxSlider),
   "jx-option": kitDocument(jxOption),
   "jx-listbox": kitDocument(jxListbox),
   "jx-combobox": kitDocument(jxCombobox),

package/src/index.ts

@@ -23,6 +23,7 @@ import * as numberField from "./behaviors/number-field.ts";
 import * as actionGroup from "./behaviors/action-group.ts";
 import * as popover from "./behaviors/popover.ts";
 import * as select from "./behaviors/select.ts";
+import * as slider from "./behaviors/slider.ts";
 import * as split from "./behaviors/split.ts";
 import * as swatchGroup from "./behaviors/swatch-group.ts";
 import * as tabs from "./behaviors/tabs.ts";
@@ -68,6 +69,7 @@ export const KIT_MODULES = {
   "jx-ui:/behaviors/action-group.ts": actionGroup,
   "jx-ui:/behaviors/popover.ts": popover,
   "jx-ui:/behaviors/select.ts": select,
+  "jx-ui:/behaviors/slider.ts": slider,
   "jx-ui:/behaviors/split.ts": split,
   "jx-ui:/behaviors/swatch-group.ts": swatchGroup,
   "jx-ui:/behaviors/tabs.ts": tabs,

package/src/loaders.ts

@@ -38,6 +38,7 @@ export const KIT_LOADERS = {
   "jx-ui:/behaviors/action-group.ts": () => import("./behaviors/action-group.ts"),
   "jx-ui:/behaviors/popover.ts": () => import("./behaviors/popover.ts"),
   "jx-ui:/behaviors/select.ts": () => import("./behaviors/select.ts"),
+  "jx-ui:/behaviors/slider.ts": () => import("./behaviors/slider.ts"),
   "jx-ui:/behaviors/split.ts": () => import("./behaviors/split.ts"),
   "jx-ui:/behaviors/swatch-group.ts": () => import("./behaviors/swatch-group.ts"),
   "jx-ui:/behaviors/tabs.ts": () => import("./behaviors/tabs.ts"),

package/stylebook/jx-icon.json

@@ -31,6 +31,7 @@
       "arrows-clockwise",
       "arrows-horizontal",
       "arrows-in-line-horizontal",
+      "arrows-in-line-vertical",
       "arrows-out",
       "arrows-out-line-horizontal",
       "arrows-out-line-vertical",

package/stylebook/jx-slider.json

@@ -0,0 +1,151 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StylebookSlider",
+  "tagName": "main",
+  "$elements": [
+    {
+      "$ref": "../components/jx-slider.json"
+    }
+  ],
+  "state": {
+    "level": 40
+  },
+  "style": {
+    "fontFamily": "var(--jx-font-sans)",
+    "fontSize": "var(--jx-text-md)",
+    "color": "var(--jx-fg)",
+    "background": "var(--jx-bg)",
+    "padding": "var(--jx-space-6)",
+    "minHeight": "100vh",
+    "& > h1": {
+      "fontSize": "var(--jx-text-lg)",
+      "fontWeight": "600",
+      "margin": "0 0 var(--jx-space-5)"
+    },
+    "& > h2": {
+      "fontSize": "var(--jx-text-md)",
+      "fontWeight": "600",
+      "margin": "var(--jx-space-6) 0 var(--jx-space-3)"
+    },
+    "& > p": {
+      "color": "var(--jx-fg-dim)",
+      "margin": "0 0 var(--jx-space-5)"
+    },
+    "& [role=\"group\"]": {
+      "display": "flex",
+      "alignItems": "center",
+      "gap": "var(--jx-space-4)",
+      "margin": "0 0 var(--jx-space-4)",
+      "maxWidth": "420px"
+    },
+    "& [role=\"group\"] > span": {
+      "width": "90px",
+      "color": "var(--jx-fg-muted)",
+      "fontSize": "var(--jx-text-sm)"
+    },
+    "& [role=\"group\"] > jx-slider": {
+      "flex": "1 1 200px"
+    }
+  },
+  "children": [
+    {
+      "tagName": "h1",
+      "textContent": "jx-slider"
+    },
+    {
+      "tagName": "p",
+      "textContent": "One native range. The platform supplies the slider role, the announced value, the thumb, the drag, the arrow keys with their clamping, and Home, End, PageUp and PageDown; the element adds a filled track, a ten-step Shift+Arrow and valuetext, and re-says the platform's own input and change from itself, so a listener always reads e.target.value off the element."
+    },
+    {
+      "tagName": "h2",
+      "textContent": "Bound"
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "Level, bound both ways"
+      },
+      "children": [
+        {
+          "tagName": "span",
+          "textContent": "Level"
+        },
+        {
+          "tagName": "jx-slider",
+          "$props": {
+            "label": "Level",
+            "valuetext": "${Math.round(state.level)} percent",
+            "value": {
+              "$ref": "#/state/level"
+            }
+          },
+          "oninput": {
+            "$prototype": "Function",
+            "body": [
+              {
+                "operator": "=",
+                "target": {
+                  "$ref": "#/state/level"
+                },
+                "value": {
+                  "$ref": "event#/target/value"
+                }
+              }
+            ]
+          }
+        },
+        {
+          "tagName": "span",
+          "textContent": "${Math.round(state.level)}%"
+        }
+      ]
+    },
+    {
+      "tagName": "h2",
+      "textContent": "States"
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "A coarse grid and a refusal"
+      },
+      "children": [
+        {
+          "tagName": "span",
+          "textContent": "Step 25"
+        },
+        {
+          "tagName": "jx-slider",
+          "$props": {
+            "label": "Quarter steps",
+            "step": 25,
+            "value": 50
+          }
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "role": "group",
+        "aria-label": "Disabled"
+      },
+      "children": [
+        {
+          "tagName": "span",
+          "textContent": "Disabled"
+        },
+        {
+          "tagName": "jx-slider",
+          "$props": {
+            "label": "Locked",
+            "disabled": true,
+            "value": 70
+          }
+        }
+      ]
+    }
+  ]
+}