@fusion.dev/helix 0.44.0 → 0.45.0

package/custom-elements.json

@@ -47423,7 +47423,7 @@
           "helix": {
             "category": "forms",
             "since": "0.23.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/filter-input",
             "aliases": [
               "FilterToken",
@@ -48070,7 +48070,7 @@
           "helix": {
             "category": "forms",
             "since": "0.23.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/filter-input",
             "aliases": [
               "Facet",
@@ -48748,7 +48748,7 @@
           "helix": {
             "category": "forms",
             "since": "0.25.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/filter-input",
             "aliases": [
               "FacetPicker",
@@ -49367,7 +49367,7 @@
           "helix": {
             "category": "forms",
             "since": "0.23.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/filter-input",
             "aliases": [
               "Comparator",
@@ -51285,7 +51285,7 @@
           "helix": {
             "category": "forms",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/filter-input",
             "aliases": [
               "SearchField",
@@ -77987,6 +77987,21 @@
                 "module": "src/option/group/option-group.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "nameFromHeading",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Names the run after the heading it drew, whatever the heading is made of.\n\n**The string alone was not the name of the heading, it was the name of one\nway of writing it.** `label` reached `ariaLabel` and the slot reached the\nscreen, so a consumer who took the documented `label` slot for a heading\nricher than a string got a `role=\"group\"` with no accessible name at all,\nand the words they wrote were the one thing a reader could not hear: the\nheading carries `aria-hidden`, because the name was supposed to be on the\nhost already. Set both and they disagreed, the host saying the string and\nthe panel showing the slot.\n\nSo the host points at the heading, which is the one thing that is always\nwhat a reader sees. `ElementInternals` and not an IDREF, because the host\nis in the light DOM and the heading is in this shadow root, which is the\nboundary `aria-labelledby` cannot cross. `MixinField.linkHost` does the\nsame for a field's label and records the measurement.\n\nClient only. Element references need the nodes to exist, and the server has\nthe string.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessOptionGroup",
+                "module": "src/option/group/option-group.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "tier",
@@ -78319,7 +78334,7 @@
           "summary": "A named run of options inside a listbox.",
           "helix": {
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/option",
             "aliases": [
               "OptGroup",
@@ -78973,7 +78988,7 @@
           "helix": {
             "category": "forms",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/option",
             "aliases": [
               "Item",
@@ -89607,7 +89622,7 @@
           "summary": "A set of choices where exactly one is the answer.",
           "helix": {
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/radio",
             "aliases": [
               "RadioButtons",
@@ -90021,6 +90036,19 @@
                 "module": "src/radio/root/radio-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "focusable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether this choice holds the group's tab stop while nothing is chosen.\n\nThe stop rides on the selection, and an unanswered group has no selection,\nso without this every choice is `tabindex=\"-1\"` and the keyboard cannot\nenter the set at all.\n\n**Written by the group, with no attribute, and it reaches the control\nrather than the host.** A `tabindex` on the host is two faults at once: it\nis markup a consumer rendered and their server never sent, which React\nreports as a mismatch and does not patch up, and it puts the tab stop on\nthe element rather than on the `<button role=\"radio\">` inside it, so a\nscreen reader meets an unnamed box where a native group would have given\nthem an unchecked radio. `Toggle.Root` carries the same property for the\nsame reason.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessRadio",
+                "module": "src/radio/root/radio-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "selected",
@@ -90474,7 +90502,7 @@
           "helix": {
             "category": "forms",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/radio",
             "aliases": [
               "Option",
@@ -92466,9 +92494,8 @@
               "type": {
                 "text": "'rtl' | undefined"
               },
-              "description": "Writing direction inside the frame.",
-              "attribute": "direction",
-              "reflects": true
+              "description": "Writing direction inside the frame.\n\nNot reflected. It is payload for the render message and nothing selects on\nit, here or anywhere: a frame is a document of its own and what is written\non this host reaches nothing inside it, which is the same reason\n`colorMode` has to be sent rather than set.",
+              "attribute": "direction"
             },
             {
               "kind": "field",
@@ -92486,9 +92513,8 @@
               "type": {
                 "text": "'padded' | 'centered' | 'fullscreen' | 'hug' | undefined"
               },
-              "description": "How the example is placed in the frame.",
-              "attribute": "layout",
-              "reflects": true
+              "description": "How the example is placed in the frame.\n\n`padded` insets it and leaves it at the top, which is the resting case and\nwhat an absent value sends. `centered` gives it a measure and centers that\nbox in the frame. `hug` shrinks the example to its own content and centers\nwhat is left, which is the difference that matters for a component whose\nroot is a full-width block. `fullscreen` is the whole frame with no inset.\n\nNot reflected, for `direction`'s reason: the placement is applied by the\ndocument inside the frame, against its own root, so no rule on this side\ncould read it.",
+              "attribute": "layout"
             },
             {
               "kind": "field",
@@ -92956,7 +92982,7 @@
               "type": {
                 "text": "'rtl' | undefined"
               },
-              "description": "Writing direction inside the frame.",
+              "description": "Writing direction inside the frame.\n\nNot reflected. It is payload for the render message and nothing selects on\nit, here or anywhere: a frame is a document of its own and what is written\non this host reaches nothing inside it, which is the same reason\n`colorMode` has to be sent rather than set.",
               "fieldName": "direction"
             },
             {
@@ -92973,7 +92999,7 @@
               "type": {
                 "text": "'padded' | 'centered' | 'fullscreen' | 'hug' | undefined"
               },
-              "description": "How the example is placed in the frame.",
+              "description": "How the example is placed in the frame.\n\n`padded` insets it and leaves it at the top, which is the resting case and\nwhat an absent value sends. `centered` gives it a measure and centers that\nbox in the frame. `hug` shrinks the example to its own content and centers\nwhat is left, which is the difference that matters for a component whose\nroot is a full-width block. `fullscreen` is the whole frame with no inset.\n\nNot reflected, for `direction`'s reason: the placement is applied by the\ndocument inside the frame, against its own root, so no rule on this side\ncould read it.",
               "fieldName": "layout"
             },
             {
@@ -93193,9 +93219,8 @@
               "type": {
                 "text": "'horizontal' | 'vertical' | undefined"
               },
-              "description": "Whether the panes sit side by side or stacked.",
-              "attribute": "orientation",
-              "reflects": true
+              "description": "Whether the panes sit side by side or stacked.\n\nNot reflected, for `lead`'s reason above: no rule selects on it. The axis\nreaches the stylesheet as the inner splitter's own `orientation`, which is\nwhere the panes are laid out, and this element's sheet names no host\nattribute at all.",
+              "attribute": "orientation"
             },
             {
               "kind": "field",
@@ -93412,32 +93437,48 @@
             },
             {
               "kind": "method",
-              "name": "splitSettled",
+              "name": "requestSplit",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "boolean"
                 }
               },
-              "description": "Says the panes' divider has settled, so a consumer can keep it.\n\nWhen it settles, not while it moves. A drag is a stream of positions and\nonly the one it ends at is a preference; announcing each would ask whoever\nis listening to write to storage a hundred times to record one decision.\n\nThe sandbox does not keep it. Where a preference lives, and whether it\nshould be kept at all, is the consumer's to decide, and a component that\nwrote to storage on its own would be deciding for all of them under a key\nit chose.\n\n**A verb each, rather than one `helix-before-resize` naming which of the two\nmoved.** Both dividers are this element's, so `composedPath()[0]` is the same\nhost for either and the event name is the only thing that can separate them."
+              "parameters": [
+                {
+                  "name": "next",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Asks for the panes' divider to settle here, and moves it unless refused.\n\nWhen it settles, not while it moves. A drag is a stream of positions and\nonly the one it ends at is a preference; announcing each would ask whoever\nis listening to write to storage a hundred times to record one decision.\n\nThe sandbox does not keep it. Where a preference lives, and whether it\nshould be kept at all, is the consumer's to decide, and a component that\nwrote to storage on its own would be deciding for all of them under a key\nit chose.\n\n**Through `requestChange`, and never the other way round.** Both of these\nfired after `split` and `panelSize` had already been written, with the\nanswer dropped, so a consumer calling `preventDefault()` on an event whose\nown line says refusing it takes the decision changed nothing whatever: the\ndivider stayed where the drag left it and their handler read a value they\nhad just declined. `SandboxSource.edit` two files away already carries the\nargument, that assigning first turns a `before` event into one that has\nalready happened, and `Splitter`, whose `helix-before-resize` these two were\nsplit out of, has always announced through the audited path. Refusing one\nnow leaves `.position` bound to the value this element still holds, so the\ndivider goes back where it was.\n\n**A verb each, rather than one `helix-before-resize` naming which of the two\nmoved.** Both dividers are this element's, so `composedPath()[0]` is the same\nhost for either and the event name is the only thing that can separate them."
             },
             {
               "kind": "method",
-              "name": "panelSettled",
+              "name": "requestPanelSize",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "boolean"
                 }
               },
-              "description": "As `splitSettled`, for the panel, whose value is pixels rather than a share."
+              "parameters": [
+                {
+                  "name": "next",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "As `requestSplit`, for the panel, whose value is pixels rather than a share."
             },
             {
               "kind": "field",
               "name": "handlePanesChange",
               "privacy": "private",
               "readonly": true,
-              "description": "Answers a divider that has asked to move.\n\nBoth splitters are controlled from here, so neither applies anything on its\nown: each announces where it wants to go and this decides. That is what\nkeeps `split` and `panelSize` the truth about the arrangement rather than a\nstale copy of it.\n\n`target` against `currentTarget`, because a source pane's own change bubbles\nup through these same elements on its way to the host. Only a splitter\nspeaking for itself is one of ours, and only those are stopped: the sandbox\nannounces `helix-before-split` and `helix-before-panel-resize` in their\nplace, and a consumer never sees the two splitters inside it."
+              "description": "Answers a divider that has asked to move.\n\nBoth splitters are controlled from here, so neither applies anything on its\nown: each announces where it wants to go and this decides. That is what\nkeeps `split` and `panelSize` the truth about the arrangement rather than a\nstale copy of it.\n\n`target` against `currentTarget`, because a source pane's own change bubbles\nup through these same elements on its way to the host. Only a splitter\nspeaking for itself is one of ours, and only those are stopped: the sandbox\nannounces `helix-before-split` and `helix-before-panel-resize` in their\nplace, and a consumer never sees the two splitters inside it.\n\n**Refused as well as stopped, which is what \"controlled from here\" costs.**\nA splitter nobody refuses applies the move itself and says so in its own\ndocblock, so the sentence above was true only while nothing downstream ever\ndeclined: refusing `helix-before-split` left `split` at fifty and the\ndivider drawn at fifty-two, one element holding the arrangement and the\nother showing it. Refusing the inner request first makes this element the\nsingle answer.\n\n**And the divider is written back, because a refusal writes nothing.** A\nsplitter draws itself from where the gesture reached until its `position` is\nassigned, which is the setter's stated job, and a bound property Lit did not\nchange is a property Lit does not write. So the answer is assigned either\nway, which for an accepted move is the number the binding is about to carry\nanyway."
             },
             {
               "kind": "field",
@@ -93445,6 +93486,31 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "method",
+              "name": "answer",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "divider",
+                  "type": {
+                    "text": "EventTarget | null"
+                  }
+                },
+                {
+                  "name": "position",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Puts a divider where this element says it is.\n\nTyped by what is used rather than by the class, which is the whole of the\ncoupling: a splitter this does not import is one that can be replaced."
+            },
             {
               "kind": "method",
               "name": "watchBody",
@@ -93874,7 +93940,7 @@
               "type": {
                 "text": "'horizontal' | 'vertical' | undefined"
               },
-              "description": "Whether the panes sit side by side or stacked.",
+              "description": "Whether the panes sit side by side or stacked.\n\nNot reflected, for `lead`'s reason above: no rule selects on it. The axis\nreaches the stylesheet as the inner splitter's own `orientation`, which is\nwhere the panes are laid out, and this element's sheet names no host\nattribute at all.",
               "fieldName": "orientation"
             },
             {
@@ -100958,8 +101024,12 @@
           "helix": {
             "category": "navigation",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/skip-link",
+            "aliases": [
+              "Skip navigation",
+              "Skip to content"
+            ],
             "tier": "styled",
             "group": "SkipLink",
             "part": "Root",
@@ -116054,7 +116124,7 @@
           "helix": {
             "category": "typography",
             "since": "0.1.0",
-            "status": "experimental",
+            "status": "stable",
             "documentation": "https://fusion.dev/helix/components/text",
             "aliases": [
               "Paragraph",

package/dist/filter-input/chip/filter-chip.d.ts

@@ -13,7 +13,7 @@ import type { CSSResultGroup } from 'lit';
  * common chip free of jargon. See the headless note, which records the rule.
  *
  * @since 0.23.0
- * @status experimental
+ * @status stable
  * @category forms
  * @aliases FilterToken, FacetChip
  * @documentation https://fusion.dev/helix/components/filter-input

package/dist/filter-input/field/filter-field.d.ts

@@ -14,7 +14,7 @@ import type { CSSResultGroup } from 'lit';
  * away from its neighbors.
  *
  * @since 0.23.0
- * @status experimental
+ * @status stable
  * @category forms
  * @aliases Facet, Dimension
  * @documentation https://fusion.dev/helix/components/filter-input

package/dist/filter-input/menu/filter-menu.d.ts

@@ -15,7 +15,7 @@ import '../../menu/index.js';
  * immediately and why the operator is decided here rather than on the chip.
  *
  * @since 0.25.0
- * @status experimental
+ * @status stable
  * @category forms
  * @aliases FacetPicker, FilterBuilder
  * @documentation https://fusion.dev/helix/components/filter-input

package/dist/filter-input/operator/filter-operator.d.ts

@@ -12,7 +12,7 @@ import type { CSSResultGroup } from 'lit';
  * reason `FilterField`'s note gives.
  *
  * @since 0.23.0
- * @status experimental
+ * @status stable
  * @category forms
  * @aliases Comparator, Predicate
  * @documentation https://fusion.dev/helix/components/filter-input

package/dist/filter-input/root/filter-input-root.d.ts

@@ -26,7 +26,7 @@ import '../../option/index.js';
  * whatever holds it, not a `size` here.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category forms
  * @aliases SearchField, FacetInput, TokenInput
  * @documentation https://fusion.dev/helix/components/filter-input

package/dist/option/group/option-group.d.ts

@@ -9,7 +9,7 @@ import type { CSSResultGroup } from 'lit';
  * tells you which list, not something to read on its own.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @aliases OptGroup, Section
  * @documentation https://fusion.dev/helix/components/option
  */

package/dist/option/root/option-root.d.ts

@@ -10,7 +10,7 @@ import type { CSSResultGroup } from 'lit';
  * picked from what they are looking at.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category forms
  * @aliases Item, Choice
  * @documentation https://fusion.dev/helix/components/option

package/dist/radio/group/radio-group.d.ts

@@ -10,7 +10,7 @@ import type { CSSResultGroup } from 'lit';
  * group keeps its question above the row rather than beside the first choice.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @aliases RadioButtons, Choice group
  * @documentation https://fusion.dev/helix/components/radio
  *

package/dist/radio/root/radio-root.d.ts

@@ -14,7 +14,7 @@ import type { CSSResultGroup } from 'lit';
  * and being chosen is an answer rather than a state.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category forms
  * @aliases Option, Choice
  * @documentation https://fusion.dev/helix/components/radio

package/dist/sandbox/preview/sandbox-preview.d.ts

@@ -87,6 +87,11 @@ export declare class HelixSandboxPreview extends HelixElement {
     colorMode?: 'dark' | 'light';
     /**
      * Writing direction inside the frame.
+     *
+     * Not reflected. It is payload for the render message and nothing selects on
+     * it, here or anywhere: a frame is a document of its own and what is written
+     * on this host reaches nothing inside it, which is the same reason
+     * `colorMode` has to be sent rather than set.
      */
     direction?: 'rtl';
     /**
@@ -95,6 +100,16 @@ export declare class HelixSandboxPreview extends HelixElement {
     label: string;
     /**
      * How the example is placed in the frame.
+     *
+     * `padded` insets it and leaves it at the top, which is the resting case and
+     * what an absent value sends. `centered` gives it a measure and centers that
+     * box in the frame. `hug` shrinks the example to its own content and centers
+     * what is left, which is the difference that matters for a component whose
+     * root is a full-width block. `fullscreen` is the whole frame with no inset.
+     *
+     * Not reflected, for `direction`'s reason: the placement is applied by the
+     * document inside the frame, against its own root, so no rule on this side
+     * could read it.
      */
     layout?: 'padded' | 'centered' | 'fullscreen' | 'hug';
     /**

package/dist/sandbox/preview/sandbox-preview.js

@@ -114,13 +114,13 @@ __decorate([
     property({ attribute: 'color-mode' })
 ], HelixSandboxPreview.prototype, "colorMode", void 0);
 __decorate([
-    property({ reflect: true })
+    property()
 ], HelixSandboxPreview.prototype, "direction", void 0);
 __decorate([
     property()
 ], HelixSandboxPreview.prototype, "label", void 0);
 __decorate([
-    property({ reflect: true })
+    property()
 ], HelixSandboxPreview.prototype, "layout", void 0);
 __decorate([
     property()

package/dist/sandbox/root/sandbox-root.d.ts

@@ -95,6 +95,11 @@ export declare class HelixSandbox extends HelixElement {
     lead: 'source' | 'preview';
     /**
      * Whether the panes sit side by side or stacked.
+     *
+     * Not reflected, for `lead`'s reason above: no rule selects on it. The axis
+     * reaches the stylesheet as the inner splitter's own `orientation`, which is
+     * where the panes are laid out, and this element's sheet names no host
+     * attribute at all.
      */
     orientation?: 'horizontal' | 'vertical';
     /**
@@ -230,7 +235,7 @@ export declare class HelixSandbox extends HelixElement {
      */
     private get axis();
     /**
-     * Says the panes' divider has settled, so a consumer can keep it.
+     * Asks for the panes' divider to settle here, and moves it unless refused.
      *
      * When it settles, not while it moves. A drag is a stream of positions and
      * only the one it ends at is a preference; announcing each would ask whoever
@@ -241,13 +246,25 @@ export declare class HelixSandbox extends HelixElement {
      * wrote to storage on its own would be deciding for all of them under a key
      * it chose.
      *
+     * **Through `requestChange`, and never the other way round.** Both of these
+     * fired after `split` and `panelSize` had already been written, with the
+     * answer dropped, so a consumer calling `preventDefault()` on an event whose
+     * own line says refusing it takes the decision changed nothing whatever: the
+     * divider stayed where the drag left it and their handler read a value they
+     * had just declined. `SandboxSource.edit` two files away already carries the
+     * argument, that assigning first turns a `before` event into one that has
+     * already happened, and `Splitter`, whose `helix-before-resize` these two were
+     * split out of, has always announced through the audited path. Refusing one
+     * now leaves `.position` bound to the value this element still holds, so the
+     * divider goes back where it was.
+     *
      * **A verb each, rather than one `helix-before-resize` naming which of the two
      * moved.** Both dividers are this element's, so `composedPath()[0]` is the same
      * host for either and the event name is the only thing that can separate them.
      */
-    private splitSettled;
-    /** As `splitSettled`, for the panel, whose value is pixels rather than a share. */
-    private panelSettled;
+    private requestSplit;
+    /** As `requestSplit`, for the panel, whose value is pixels rather than a share. */
+    private requestPanelSize;
     /**
      * Answers a divider that has asked to move.
      *
@@ -261,9 +278,31 @@ export declare class HelixSandbox extends HelixElement {
      * speaking for itself is one of ours, and only those are stopped: the sandbox
      * announces `helix-before-split` and `helix-before-panel-resize` in their
      * place, and a consumer never sees the two splitters inside it.
+     *
+     * **Refused as well as stopped, which is what "controlled from here" costs.**
+     * A splitter nobody refuses applies the move itself and says so in its own
+     * docblock, so the sentence above was true only while nothing downstream ever
+     * declined: refusing `helix-before-split` left `split` at fifty and the
+     * divider drawn at fifty-two, one element holding the arrangement and the
+     * other showing it. Refusing the inner request first makes this element the
+     * single answer.
+     *
+     * **And the divider is written back, because a refusal writes nothing.** A
+     * splitter draws itself from where the gesture reached until its `position` is
+     * assigned, which is the setter's stated job, and a bound property Lit did not
+     * change is a property Lit does not write. So the answer is assigned either
+     * way, which for an accepted move is the number the binding is about to carry
+     * anyway.
      */
     private readonly handlePanesChange;
     private readonly handlePanelChange;
+    /**
+     * Puts a divider where this element says it is.
+     *
+     * Typed by what is used rather than by the class, which is the whole of the
+     * coupling: a splitter this does not import is one that can be replaced.
+     */
+    private answer;
     connectedCallback(): void;
     /** Watches the body, whose height is what the pane sizes are computed from. */
     private watchBody;

package/dist/sandbox/root/sandbox-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixBeforePanelResizeEvent, HelixBeforeSplitEvent, HelixElement, } from '@fusion.dev/helix-core';
+import { customElement, HelixBeforePanelResizeEvent, HelixBeforeSplitEvent, HelixElement, requestChange, } from '@fusion.dev/helix-core';
 import '../../splitter/index.js';
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -71,8 +71,9 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
             }
             const { value } = event.detail;
             event.stopPropagation();
-            this.split = Number(value);
-            this.splitSettled();
+            event.preventDefault();
+            this.requestSplit(Number(value));
+            this.answer(event.currentTarget, this.split);
         };
         this.handlePanelChange = (event) => {
             if (event.target !== event.currentTarget) {
@@ -80,11 +81,11 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
             }
             const { value } = event.detail;
             event.stopPropagation();
-            if (this.bodyHeight <= 0) {
-                return;
+            event.preventDefault();
+            if (this.bodyHeight > 0) {
+                this.requestPanelSize(Math.max(0, ((100 - Number(value)) / 100) * this.bodyHeight));
             }
-            this.panelSize = Math.max(0, ((100 - Number(value)) / 100) * this.bodyHeight);
-            this.panelSettled();
+            this.answer(event.currentTarget, this.panelPosition);
         };
         this.readPanel = () => {
             this.hasPanel = this.querySelector(':scope > [slot="panel"]') !== null;
@@ -135,11 +136,31 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
     get axis() {
         return this.orientation ?? 'horizontal';
     }
-    splitSettled() {
-        this.dispatchEvent(new HelixBeforeSplitEvent({ value: String(this.split) }));
+    requestSplit(next) {
+        return requestChange({
+            apply: (value) => {
+                this.split = value;
+            },
+            event: (value) => new HelixBeforeSplitEvent({ value: String(value) }),
+            host: this,
+            next,
+        });
+    }
+    requestPanelSize(next) {
+        return requestChange({
+            apply: (value) => {
+                this.panelSize = value;
+            },
+            event: (value) => new HelixBeforePanelResizeEvent({ value: String(value) }),
+            host: this,
+            next,
+        });
     }
-    panelSettled() {
-        this.dispatchEvent(new HelixBeforePanelResizeEvent({ value: String(this.panelSize) }));
+    answer(divider, position) {
+        const target = divider;
+        if (target && Number.isFinite(position)) {
+            target.position = position;
+        }
     }
     connectedCallback() {
         super.connectedCallback();
@@ -233,7 +254,7 @@ __decorate([
     property()
 ], HelixSandbox.prototype, "lead", void 0);
 __decorate([
-    property({ reflect: true })
+    property()
 ], HelixSandbox.prototype, "orientation", void 0);
 __decorate([
     property({ attribute: 'panel-collapsed-size', type: Number })

package/dist/sandbox/status-bar/sandbox-status-bar.js

@@ -28,7 +28,7 @@ let HelixSandboxStatusBar = class HelixSandboxStatusBar extends HelixElement {
       ${position === undefined ? nothing : html `<span part="caret">${position}</span>`}
       ${language === undefined
             ? nothing
-            : html `<span part="language">${LABELS[language] ?? language}</span>`}
+            : html `<span part="language">${Object.hasOwn(LABELS, language) ? LABELS[language] : language}</span>`}
       <slot name="end"></slot>`;
     }
     static { this.styles = styles; }

package/dist/skip-link/root/skip-link-root.d.ts

@@ -20,8 +20,9 @@ import type { CSSResultGroup } from 'lit';
  * region the id its `href` names.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category navigation
+ * @aliases Skip navigation, Skip to content
  * @documentation https://fusion.dev/helix/components/skip-link
  *
  * @cssproperty --skip-link-border-color - Color of the revealed link's edge.

package/dist/text/root/text-root.d.ts

@@ -33,7 +33,7 @@ import type { CSSResultGroup } from 'lit';
  * cross product, which is the explosion a named ramp exists to prevent.
  *
  * @since 0.1.0
- * @status experimental
+ * @status stable
  * @category typography
  * @aliases Paragraph, Copy, Label, Caption, Heading, Title
  * @documentation https://fusion.dev/helix/components/text

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -47,14 +47,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.44.0",
-    "@fusion.dev/helix-headless": "0.44.0",
-    "@fusion.dev/helix-styles": "0.44.0"
+    "@fusion.dev/helix-core": "0.45.0",
+    "@fusion.dev/helix-headless": "0.45.0",
+    "@fusion.dev/helix-styles": "0.45.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.44.0",
-    "@fusion.dev/helix-testing": "0.44.0",
+    "@fusion.dev/helix-cem": "0.45.0",
+    "@fusion.dev/helix-testing": "0.45.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -13636,6 +13636,21 @@ name is the fault `TreeItem` avoids by mirroring to `data-selected`.
 Splitting them means moving what every stylesheet selects on, which is a
 change of its own rather than a property being added. */
   defaultSelected?: (HelixRadio["defaultSelected"]) | undefined;
+  /** Whether this choice holds the group's tab stop while nothing is chosen.
+
+The stop rides on the selection, and an unanswered group has no selection,
+so without this every choice is `tabindex="-1"` and the keyboard cannot
+enter the set at all.
+
+**Written by the group, with no attribute, and it reaches the control
+rather than the host.** A `tabindex` on the host is two faults at once: it
+is markup a consumer rendered and their server never sent, which React
+reports as a mismatch and does not patch up, and it puts the tab stop on
+the element rather than on the `<button role="radio">` inside it, so a
+screen reader meets an unnamed box where a native group would have given
+them an unchecked radio. `Toggle.Root` carries the same property for the
+same reason. */
+  focusable?: (HelixRadio["focusable"]) | undefined;
 
   /** Fired when this choice is made. Cancelable: refusing it takes the decision and nothing moves. */
   "onhelix-select"?: ((e: HelixRadioHelixSelectElementEvent) => void) | undefined;
@@ -13726,6 +13741,21 @@ name is the fault `TreeItem` avoids by mirroring to `data-selected`.
 Splitting them means moving what every stylesheet selects on, which is a
 change of its own rather than a property being added. */
   "prop:defaultSelected"?: (HelixRadio["defaultSelected"]) | undefined;
+  /** Whether this choice holds the group's tab stop while nothing is chosen.
+
+The stop rides on the selection, and an unanswered group has no selection,
+so without this every choice is `tabindex="-1"` and the keyboard cannot
+enter the set at all.
+
+**Written by the group, with no attribute, and it reaches the control
+rather than the host.** A `tabindex` on the host is two faults at once: it
+is markup a consumer rendered and their server never sent, which React
+reports as a mismatch and does not patch up, and it puts the tab stop on
+the element rather than on the `<button role="radio">` inside it, so a
+screen reader meets an unnamed box where a native group would have given
+them an unchecked radio. `Toggle.Root` carries the same property for the
+same reason. */
+  "prop:focusable"?: (HelixRadio["focusable"]) | undefined;
   /** Fired when this choice is made. Cancelable: refusing it takes the decision and nothing moves. */
   "on:helix-select"?: ((e: HelixRadioHelixSelectElementEvent) => void) | undefined;
 
@@ -14066,11 +14096,26 @@ keyed on this attribute, and of the 56 tokens that differ by scheme the
 theme engine emits 19. The other 37 would stay light in a dark preview,
 including every one of the 24 series colors a chart reads. */
   colorMode?: (HelixSandboxPreview["colorMode"]) | undefined;
-  /** Writing direction inside the frame. */
+  /** Writing direction inside the frame.
+
+Not reflected. It is payload for the render message and nothing selects on
+it, here or anywhere: a frame is a document of its own and what is written
+on this host reaches nothing inside it, which is the same reason
+`colorMode` has to be sent rather than set. */
   direction?: (HelixSandboxPreview["direction"]) | undefined;
   /** Accessible name for the frame. */
   label?: (HelixSandboxPreview["label"]) | undefined;
-  /** How the example is placed in the frame. */
+  /** How the example is placed in the frame.
+
+`padded` insets it and leaves it at the top, which is the resting case and
+what an absent value sends. `centered` gives it a measure and centers that
+box in the frame. `hug` shrinks the example to its own content and centers
+what is left, which is the difference that matters for a component whose
+root is a full-width block. `fullscreen` is the whole frame with no inset.
+
+Not reflected, for `direction`'s reason: the placement is applied by the
+document inside the frame, against its own root, so no rule on this side
+could read it. */
   layout?: (HelixSandboxPreview["layout"]) | undefined;
   /** Markup to render. */
   source?: (HelixSandboxPreview["source"]) | undefined;
@@ -14114,11 +14159,26 @@ keyed on this attribute, and of the 56 tokens that differ by scheme the
 theme engine emits 19. The other 37 would stay light in a dark preview,
 including every one of the 24 series colors a chart reads. */
   "prop:colorMode"?: (HelixSandboxPreview["colorMode"]) | undefined;
-  /** Writing direction inside the frame. */
+  /** Writing direction inside the frame.
+
+Not reflected. It is payload for the render message and nothing selects on
+it, here or anywhere: a frame is a document of its own and what is written
+on this host reaches nothing inside it, which is the same reason
+`colorMode` has to be sent rather than set. */
   "prop:direction"?: (HelixSandboxPreview["direction"]) | undefined;
   /** Accessible name for the frame. */
   "prop:label"?: (HelixSandboxPreview["label"]) | undefined;
-  /** How the example is placed in the frame. */
+  /** How the example is placed in the frame.
+
+`padded` insets it and leaves it at the top, which is the resting case and
+what an absent value sends. `centered` gives it a measure and centers that
+box in the frame. `hug` shrinks the example to its own content and centers
+what is left, which is the difference that matters for a component whose
+root is a full-width block. `fullscreen` is the whole frame with no inset.
+
+Not reflected, for `direction`'s reason: the placement is applied by the
+document inside the frame, against its own root, so no rule on this side
+could read it. */
   "prop:layout"?: (HelixSandboxPreview["layout"]) | undefined;
   /** Markup to render. */
   "prop:source"?: (HelixSandboxPreview["source"]) | undefined;
@@ -14211,7 +14271,12 @@ names below keeps that true whichever way round they sit.
 `split` follows the lead pane rather than the source, so `split="30"` means
 the same thing in both directions: thirty percent to whatever comes first. */
   lead?: (HelixSandbox["lead"]) | undefined;
-  /** Whether the panes sit side by side or stacked. */
+  /** Whether the panes sit side by side or stacked.
+
+Not reflected, for `lead`'s reason above: no rule selects on it. The axis
+reaches the stylesheet as the inner splitter's own `orientation`, which is
+where the panes are laid out, and this element's sheet names no host
+attribute at all. */
   orientation?: (HelixSandbox["orientation"]) | undefined;
   /** What the panel's height becomes when it is closed.
 
@@ -14311,7 +14376,12 @@ names below keeps that true whichever way round they sit.
 `split` follows the lead pane rather than the source, so `split="30"` means
 the same thing in both directions: thirty percent to whatever comes first. */
   "prop:lead"?: (HelixSandbox["lead"]) | undefined;
-  /** Whether the panes sit side by side or stacked. */
+  /** Whether the panes sit side by side or stacked.
+
+Not reflected, for `lead`'s reason above: no rule selects on it. The axis
+reaches the stylesheet as the inner splitter's own `orientation`, which is
+where the panes are laid out, and this element's sheet names no host
+attribute at all. */
   "prop:orientation"?: (HelixSandbox["orientation"]) | undefined;
   /** What the panel's height becomes when it is closed.
 
@@ -32824,6 +32894,20 @@ export type CustomElements = {
    * name is the fault `TreeItem` avoids by mirroring to `data-selected`.
    * Splitting them means moving what every stylesheet selects on, which is a
    * change of its own rather than a property being added. (property only)
+   * - `focusable`: Whether this choice holds the group's tab stop while nothing is chosen.
+   *
+   * The stop rides on the selection, and an unanswered group has no selection,
+   * so without this every choice is `tabindex="-1"` and the keyboard cannot
+   * enter the set at all.
+   *
+   * **Written by the group, with no attribute, and it reaches the control
+   * rather than the host.** A `tabindex` on the host is two faults at once: it
+   * is markup a consumer rendered and their server never sent, which React
+   * reports as a mismatch and does not patch up, and it puts the tab stop on
+   * the element rather than on the `<button role="radio">` inside it, so a
+   * screen reader meets an unnamed box where a native group would have given
+   * them an unchecked radio. `Toggle.Root` carries the same property for the
+   * same reason. (property only)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -33158,8 +33242,23 @@ export type CustomElements = {
    * theme engine emits 19. The other 37 would stay light in a dark preview,
    * including every one of the 24 series colors a chart reads.
    * - `direction`: Writing direction inside the frame.
+   *
+   * Not reflected. It is payload for the render message and nothing selects on
+   * it, here or anywhere: a frame is a document of its own and what is written
+   * on this host reaches nothing inside it, which is the same reason
+   * `colorMode` has to be sent rather than set.
    * - `label`: Accessible name for the frame.
    * - `layout`: How the example is placed in the frame.
+   *
+   * `padded` insets it and leaves it at the top, which is the resting case and
+   * what an absent value sends. `centered` gives it a measure and centers that
+   * box in the frame. `hug` shrinks the example to its own content and centers
+   * what is left, which is the difference that matters for a component whose
+   * root is a full-width block. `fullscreen` is the whole frame with no inset.
+   *
+   * Not reflected, for `direction`'s reason: the placement is applied by the
+   * document inside the frame, against its own root, so no rule on this side
+   * could read it.
    * - `source`: Markup to render.
    * - `src`: Document the frame loads, which brings the styles and the elements.
    * - `styles`: Stylesheet applied inside the frame, alongside the markup.
@@ -33275,6 +33374,11 @@ export type CustomElements = {
    * `split` follows the lead pane rather than the source, so `split="30"` means
    * the same thing in both directions: thirty percent to whatever comes first.
    * - `orientation`: Whether the panes sit side by side or stacked.
+   *
+   * Not reflected, for `lead`'s reason above: no rule selects on it. The axis
+   * reaches the stylesheet as the inner splitter's own `orientation`, which is
+   * where the panes are laid out, and this element's sheet names no host
+   * attribute at all.
    * - `panel-collapsed-size`/`panelCollapsedSize`: What the panel's height becomes when it is closed.
    *
    * Zero closes it outright. A panel whose contents include the control that
@@ -52296,6 +52400,20 @@ export type CustomElementsSolidJs = {
    * name is the fault `TreeItem` avoids by mirroring to `data-selected`.
    * Splitting them means moving what every stylesheet selects on, which is a
    * change of its own rather than a property being added. (property only)
+   * - `focusable`: Whether this choice holds the group's tab stop while nothing is chosen.
+   *
+   * The stop rides on the selection, and an unanswered group has no selection,
+   * so without this every choice is `tabindex="-1"` and the keyboard cannot
+   * enter the set at all.
+   *
+   * **Written by the group, with no attribute, and it reaches the control
+   * rather than the host.** A `tabindex` on the host is two faults at once: it
+   * is markup a consumer rendered and their server never sent, which React
+   * reports as a mismatch and does not patch up, and it puts the tab stop on
+   * the element rather than on the `<button role="radio">` inside it, so a
+   * screen reader meets an unnamed box where a native group would have given
+   * them an unchecked radio. `Toggle.Root` carries the same property for the
+   * same reason. (property only)
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -52638,8 +52756,23 @@ export type CustomElementsSolidJs = {
    * theme engine emits 19. The other 37 would stay light in a dark preview,
    * including every one of the 24 series colors a chart reads.
    * - `direction`: Writing direction inside the frame.
+   *
+   * Not reflected. It is payload for the render message and nothing selects on
+   * it, here or anywhere: a frame is a document of its own and what is written
+   * on this host reaches nothing inside it, which is the same reason
+   * `colorMode` has to be sent rather than set.
    * - `label`: Accessible name for the frame.
    * - `layout`: How the example is placed in the frame.
+   *
+   * `padded` insets it and leaves it at the top, which is the resting case and
+   * what an absent value sends. `centered` gives it a measure and centers that
+   * box in the frame. `hug` shrinks the example to its own content and centers
+   * what is left, which is the difference that matters for a component whose
+   * root is a full-width block. `fullscreen` is the whole frame with no inset.
+   *
+   * Not reflected, for `direction`'s reason: the placement is applied by the
+   * document inside the frame, against its own root, so no rule on this side
+   * could read it.
    * - `source`: Markup to render.
    * - `src`: Document the frame loads, which brings the styles and the elements.
    * - `styles`: Stylesheet applied inside the frame, alongside the markup.
@@ -52758,6 +52891,11 @@ export type CustomElementsSolidJs = {
    * `split` follows the lead pane rather than the source, so `split="30"` means
    * the same thing in both directions: thirty percent to whatever comes first.
    * - `orientation`: Whether the panes sit side by side or stacked.
+   *
+   * Not reflected, for `lead`'s reason above: no rule selects on it. The axis
+   * reaches the stylesheet as the inner splitter's own `orientation`, which is
+   * where the panes are laid out, and this element's sheet names no host
+   * attribute at all.
    * - `panel-collapsed-size`/`panelCollapsedSize`: What the panel's height becomes when it is closed.
    *
    * Zero closes it outright. A panel whose contents include the control that

package/types/vue.d.ts

@@ -7029,6 +7029,21 @@ name is the fault `TreeItem` avoids by mirroring to `data-selected`.
 Splitting them means moving what every stylesheet selects on, which is a
 change of its own rather than a property being added. */
   defaultSelected?: (HelixRadio["defaultSelected"]) | undefined;
+  /** Whether this choice holds the group's tab stop while nothing is chosen.
+
+The stop rides on the selection, and an unanswered group has no selection,
+so without this every choice is `tabindex="-1"` and the keyboard cannot
+enter the set at all.
+
+**Written by the group, with no attribute, and it reaches the control
+rather than the host.** A `tabindex` on the host is two faults at once: it
+is markup a consumer rendered and their server never sent, which React
+reports as a mismatch and does not patch up, and it puts the tab stop on
+the element rather than on the `<button role="radio">` inside it, so a
+screen reader meets an unnamed box where a native group would have given
+them an unchecked radio. `Toggle.Root` carries the same property for the
+same reason. */
+  focusable?: (HelixRadio["focusable"]) | undefined;
 };
 
 export type HelixRadioVueEvents = {
@@ -7223,11 +7238,26 @@ keyed on this attribute, and of the 56 tokens that differ by scheme the
 theme engine emits 19. The other 37 would stay light in a dark preview,
 including every one of the 24 series colors a chart reads. */
   colorMode?: (HelixSandboxPreview["colorMode"]) | undefined;
-  /** Writing direction inside the frame. */
+  /** Writing direction inside the frame.
+
+Not reflected. It is payload for the render message and nothing selects on
+it, here or anywhere: a frame is a document of its own and what is written
+on this host reaches nothing inside it, which is the same reason
+`colorMode` has to be sent rather than set. */
   direction?: (HelixSandboxPreview["direction"]) | undefined;
   /** Accessible name for the frame. */
   label?: (HelixSandboxPreview["label"]) | undefined;
-  /** How the example is placed in the frame. */
+  /** How the example is placed in the frame.
+
+`padded` insets it and leaves it at the top, which is the resting case and
+what an absent value sends. `centered` gives it a measure and centers that
+box in the frame. `hug` shrinks the example to its own content and centers
+what is left, which is the difference that matters for a component whose
+root is a full-width block. `fullscreen` is the whole frame with no inset.
+
+Not reflected, for `direction`'s reason: the placement is applied by the
+document inside the frame, against its own root, so no rule on this side
+could read it. */
   layout?: (HelixSandboxPreview["layout"]) | undefined;
   /** Markup to render. */
   source?: (HelixSandboxPreview["source"]) | undefined;
@@ -7318,7 +7348,12 @@ names below keeps that true whichever way round they sit.
 `split` follows the lead pane rather than the source, so `split="30"` means
 the same thing in both directions: thirty percent to whatever comes first. */
   lead?: (HelixSandbox["lead"]) | undefined;
-  /** Whether the panes sit side by side or stacked. */
+  /** Whether the panes sit side by side or stacked.
+
+Not reflected, for `lead`'s reason above: no rule selects on it. The axis
+reaches the stylesheet as the inner splitter's own `orientation`, which is
+where the panes are laid out, and this element's sheet names no host
+attribute at all. */
   orientation?: (HelixSandbox["orientation"]) | undefined;
   /** What the panel's height becomes when it is closed.