@jxsuite/ui 0.10.3 → 0.11.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-field.json

@@ -85,6 +85,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"

package/components/jx-slider.json

@@ -0,0 +1,205 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "JxSlider",
+  "tagName": "jx-slider",
+  "observedAttributes": [
+    "label",
+    "labelledby",
+    "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."
+    },
+    "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-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-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.3",
+  "version": "0.11.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.1",
-    "@jxsuite/schema": "^5.4.0"
+    "@jxsuite/runtime": "^6.3.0",
+    "@jxsuite/schema": "^5.6.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",

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/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
+          }
+        }
+      ]
+    }
+  ]
+}