@fusion.dev/helix 0.44.0 → 0.46.0

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.46.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.46.0",
+    "@fusion.dev/helix-headless": "0.46.0",
+    "@fusion.dev/helix-styles": "0.46.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.46.0",
+    "@fusion.dev/helix-testing": "0.46.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

@@ -2826,7 +2826,7 @@ server markup never had, which React reports as a mismatch. The one-across
 case is the absent attribute, and the styles read it that way. */
   perView?: (HelixCarousel["perView"]) | undefined;
 
-  /** Fired when the slide in view changes, with its index. Cancelable where the carousel is about to move: refusing a control or an indicator takes the decision and nothing moves. A drag has already moved the track, so that one announces after the fact and refusing it does nothing. See `handleScroll`. */
+  /** Fired before the slide in view changes, with the index being asked for. Cancelable: refusing it takes the decision and nothing moves, including a drag, which is put back on the slide the index still holds. See `handleScroll`. */
   "onhelix-select"?: ((e: HelixCarouselHelixSelectElementEvent) => void) | undefined;
 };
 
@@ -3056,7 +3056,7 @@ its attribute on upgrade, and the host then carries something a consumer's
 server markup never had, which React reports as a mismatch. The one-across
 case is the absent attribute, and the styles read it that way. */
   "prop:perView"?: (HelixCarousel["perView"]) | undefined;
-  /** Fired when the slide in view changes, with its index. Cancelable where the carousel is about to move: refusing a control or an indicator takes the decision and nothing moves. A drag has already moved the track, so that one announces after the fact and refusing it does nothing. See `handleScroll`. */
+  /** Fired before the slide in view changes, with the index being asked for. Cancelable: refusing it takes the decision and nothing moves, including a drag, which is put back on the slide the index still holds. See `handleScroll`. */
   "on:helix-select"?: ((e: HelixCarouselHelixSelectElementEvent) => void) | undefined;
 
   /** Set the innerHTML of the element */
@@ -3211,10 +3211,13 @@ Reflected, because every one of the four is a visual state and a stylesheet
 has no other way to know. Absent is a settled message with nothing to
 report, which is what most of a transcript is, and it is the absence of the
 attribute rather than a value of it: there is no initializer, so nothing is
-reflected until something happens. */
+reflected until something happens.
+
+**The turn writes this once, on a retry nobody refused**, and `handleRetry`
+holds the reason. Everything else that moves it is the consumer's. */
   state?: (HelixChatMessage["state"]) | undefined;
 
-  /** Fired when the reader asks to send a failed message again, and cancelable. */
+  /** Fired when the reader asks to send a failed message again. Cancelable: a retry that stands puts the turn back on its way, and refusing it leaves the failure and the control offering it exactly where they were. */
   "onhelix-send"?: ((e: HelixChatMessageHelixSendElementEvent) => void) | undefined;
 };
 
@@ -3270,9 +3273,12 @@ Reflected, because every one of the four is a visual state and a stylesheet
 has no other way to know. Absent is a settled message with nothing to
 report, which is what most of a transcript is, and it is the absence of the
 attribute rather than a value of it: there is no initializer, so nothing is
-reflected until something happens. */
+reflected until something happens.
+
+**The turn writes this once, on a retry nobody refused**, and `handleRetry`
+holds the reason. Everything else that moves it is the consumer's. */
   "prop:state"?: (HelixChatMessage["state"]) | undefined;
-  /** Fired when the reader asks to send a failed message again, and cancelable. */
+  /** Fired when the reader asks to send a failed message again. Cancelable: a retry that stands puts the turn back on its way, and refusing it leaves the failure and the control offering it exactly where they were. */
   "on:helix-send"?: ((e: HelixChatMessageHelixSendElementEvent) => void) | undefined;
 
   /** Set the innerHTML of the element */
@@ -7558,7 +7564,7 @@ Here rather than on each control. */
 
   /** Announced once the value has moved. */
   onchange?: ((e: HelixFileInputElementEvent) => void) | undefined;
-  /** Fired before the chosen files change, with their names. Cancelable: refusing it takes the decision and nothing moves. */
+  /** Fired before the chosen files change, with their names. Cancelable: refusing it takes the decision and the field keeps the files it had, a pick the browser has already written included. */
   "onhelix-before-change"?: ((
     e: HelixFileInputHelixBeforeChangeElementEvent,
   ) => void) | undefined;
@@ -7621,7 +7627,7 @@ Here rather than on each control. */
   "prop:name"?: (HelixFileInput["name"]) | undefined;
   /** Announced once the value has moved. */
   "on:change"?: ((e: HelixFileInputElementEvent) => void) | undefined;
-  /** Fired before the chosen files change, with their names. Cancelable: refusing it takes the decision and nothing moves. */
+  /** Fired before the chosen files change, with their names. Cancelable: refusing it takes the decision and the field keeps the files it had, a pick the browser has already written included. */
   "on:helix-before-change"?: ((
     e: HelixFileInputHelixBeforeChangeElementEvent,
   ) => void) | undefined;
@@ -13636,6 +13642,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 +13747,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 +14102,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 +14165,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 +14277,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 +14382,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.
 
@@ -22590,7 +22666,7 @@ export type CustomElements = {
    *
    * Events that will be emitted by the component.
    *
-   * - `helix-select`: Fired when the slide in view changes, with its index. Cancelable where the carousel is about to move: refusing a control or an indicator takes the decision and nothing moves. A drag has already moved the track, so that one announces after the fact and refusing it does nothing. See `handleScroll`.
+   * - `helix-select`: Fired before the slide in view changes, with the index being asked for. Cancelable: refusing it takes the decision and nothing moves, including a drag, which is put back on the slide the index still holds. See `handleScroll`.
    *
    * ## Slots
    *
@@ -22793,6 +22869,9 @@ export type CustomElements = {
    * report, which is what most of a transcript is, and it is the absence of the
    * attribute rather than a value of it: there is no initializer, so nothing is
    * reflected until something happens.
+   *
+   * **The turn writes this once, on a retry nobody refused**, and `handleRetry`
+   * holds the reason. Everything else that moves it is the consumer's.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -22818,7 +22897,7 @@ export type CustomElements = {
    *
    * Events that will be emitted by the component.
    *
-   * - `helix-send`: Fired when the reader asks to send a failed message again, and cancelable.
+   * - `helix-send`: Fired when the reader asks to send a failed message again. Cancelable: a retry that stands puts the turn back on its way, and refusing it leaves the failure and the control offering it exactly where they were.
    *
    * ## Slots
    *
@@ -26750,7 +26829,7 @@ export type CustomElements = {
    * Events that will be emitted by the component.
    *
    * - `change`: Announced once the value has moved.
-   * - `helix-before-change`: Fired before the chosen files change, with their names. Cancelable: refusing it takes the decision and nothing moves.
+   * - `helix-before-change`: Fired before the chosen files change, with their names. Cancelable: refusing it takes the decision and the field keeps the files it had, a pick the browser has already written included.
    * - `input`: Announced once the value has moved.
    *
    * ## Slots
@@ -26781,6 +26860,11 @@ export type CustomElements = {
    * picker come back out the same way.
    * - `focus(options?: FocusOptions) => void`: Puts focus on the input, the way a label pointing at one would.
    * - `formResetCallback() => void`: Empties it, which is what a form reset means for a file input.
+   *
+   * Not through `commit`, and that is the point of the split: a reset is the
+   * form's decision and there is nothing here for a listener to refuse. What it
+   * owes is the report and the platform's own announcement, which is what
+   * `settle` is.
    * - `formDisabledCallback(disabled: boolean) => void`: The platform's notice that an ancestor fieldset changed.
    *
    * **The argument is the effective state, and taking it whole is what latched
@@ -32824,6 +32908,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 +33256,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 +33388,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
@@ -41856,7 +41974,7 @@ export type CustomElementsSolidJs = {
    *
    * Events that will be emitted by the component.
    *
-   * - `helix-select`: Fired when the slide in view changes, with its index. Cancelable where the carousel is about to move: refusing a control or an indicator takes the decision and nothing moves. A drag has already moved the track, so that one announces after the fact and refusing it does nothing. See `handleScroll`.
+   * - `helix-select`: Fired before the slide in view changes, with the index being asked for. Cancelable: refusing it takes the decision and nothing moves, including a drag, which is put back on the slide the index still holds. See `handleScroll`.
    *
    * ## Slots
    *
@@ -42065,6 +42183,9 @@ export type CustomElementsSolidJs = {
    * report, which is what most of a transcript is, and it is the absence of the
    * attribute rather than a value of it: there is no initializer, so nothing is
    * reflected until something happens.
+   *
+   * **The turn writes this once, on a retry nobody refused**, and `handleRetry`
+   * holds the reason. Everything else that moves it is the consumer's.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -42090,7 +42211,7 @@ export type CustomElementsSolidJs = {
    *
    * Events that will be emitted by the component.
    *
-   * - `helix-send`: Fired when the reader asks to send a failed message again, and cancelable.
+   * - `helix-send`: Fired when the reader asks to send a failed message again. Cancelable: a retry that stands puts the turn back on its way, and refusing it leaves the failure and the control offering it exactly where they were.
    *
    * ## Slots
    *
@@ -46089,7 +46210,7 @@ export type CustomElementsSolidJs = {
    * Events that will be emitted by the component.
    *
    * - `change`: Announced once the value has moved.
-   * - `helix-before-change`: Fired before the chosen files change, with their names. Cancelable: refusing it takes the decision and nothing moves.
+   * - `helix-before-change`: Fired before the chosen files change, with their names. Cancelable: refusing it takes the decision and the field keeps the files it had, a pick the browser has already written included.
    * - `input`: Announced once the value has moved.
    *
    * ## Slots
@@ -46120,6 +46241,11 @@ export type CustomElementsSolidJs = {
    * picker come back out the same way.
    * - `focus(options?: FocusOptions) => void`: Puts focus on the input, the way a label pointing at one would.
    * - `formResetCallback() => void`: Empties it, which is what a form reset means for a file input.
+   *
+   * Not through `commit`, and that is the point of the split: a reset is the
+   * form's decision and there is nothing here for a listener to refuse. What it
+   * owes is the report and the platform's own announcement, which is what
+   * `settle` is.
    * - `formDisabledCallback(disabled: boolean) => void`: The platform's notice that an ancestor fieldset changed.
    *
    * **The argument is the effective state, and taking it whole is what latched
@@ -52296,6 +52422,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 +52778,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 +52913,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