@fusion.dev/helix 0.43.0 → 0.45.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.
 
@@ -15676,11 +15746,11 @@ has an honest answer. */
   /** How far one arrow press moves it, as a percentage. */
   step?: (HelixSplitter["step"]) | undefined;
 
-  /** Fired before a pane shuts or reopens, and cancelable. */
+  /** Fired before a pane shuts or reopens, and only where the position it is derived from stood. Cancelable: refusing it leaves the pane as it was and the divider where the gesture put it. */
   "onhelix-before-collapse"?: ((
     e: HelixSplitterHelixBeforeCollapseElementEvent,
   ) => void) | undefined;
-  /** Fired before the divider settles, and cancelable. */
+  /** Fired before the divider settles. Cancelable: refusing it takes the whole of where the gesture ended, so no collapse follows from it either. A drag has already drawn itself by then and holds where it was dropped until the consumer assigns their own. */
   "onhelix-before-resize"?: ((
     e: HelixSplitterHelixBeforeResizeElementEvent,
   ) => void) | undefined;
@@ -15796,11 +15866,11 @@ has an honest answer. */
   "prop:orientation"?: (HelixSplitter["orientation"]) | undefined;
   /** How far one arrow press moves it, as a percentage. */
   "prop:step"?: (HelixSplitter["step"]) | undefined;
-  /** Fired before a pane shuts or reopens, and cancelable. */
+  /** Fired before a pane shuts or reopens, and only where the position it is derived from stood. Cancelable: refusing it leaves the pane as it was and the divider where the gesture put it. */
   "on:helix-before-collapse"?: ((
     e: HelixSplitterHelixBeforeCollapseElementEvent,
   ) => void) | undefined;
-  /** Fired before the divider settles, and cancelable. */
+  /** Fired before the divider settles. Cancelable: refusing it takes the whole of where the gesture ended, so no collapse follows from it either. A drag has already drawn itself by then and holds where it was dropped until the consumer assigns their own. */
   "on:helix-before-resize"?: ((
     e: HelixSplitterHelixBeforeResizeElementEvent,
   ) => void) | undefined;
@@ -18810,8 +18880,6 @@ The shape is `Carousel`'s, which is the nearest thing in the library: a
   "onhelix-complete"?: ((e: HelixTourHelixCompleteElementEvent) => void) | undefined;
   /** A stop's own controls asking the tour to move, dispatched by the stop and heard here because the tour is what moves. */
   "onhelix-tour-ask"?: ((e: HelixTourHelixTourAskElementEvent) => void) | undefined;
-  /** Says the state moved, carrying `newState` and `oldState`. */
-  ontoggle?: ((e: HelixTourElementEvent) => void) | undefined;
 };
 
 export type HelixTourSolidJsProps = {
@@ -18864,8 +18932,6 @@ The shape is `Carousel`'s, which is the nearest thing in the library: a
   "on:helix-complete"?: ((e: HelixTourHelixCompleteElementEvent) => void) | undefined;
   /** A stop's own controls asking the tour to move, dispatched by the stop and heard here because the tour is what moves. */
   "on:helix-tour-ask"?: ((e: HelixTourHelixTourAskElementEvent) => void) | undefined;
-  /** Says the state moved, carrying `newState` and `oldState`. */
-  "on:toggle"?: ((e: HelixTourElementEvent) => void) | undefined;
 
   /** Set the innerHTML of the element */
   innerHTML?: (string) | undefined;
@@ -30601,6 +30667,7 @@ export type CustomElements = {
    * - `media`: An avatar or icon identifying who or what it came from.
    * - `caption`: A second line qualifying it, quieter than the first. A bare slot rather than a box, so an item without one pays nothing for it; style it through `::slotted()`.
    * - `detail`: A block belonging to the row rather than a line about it: a quoted comment, a status moving from one value to another, a preview. Unlike `caption` nothing here sets a size or an ink, because whatever fills it usually brings its own.
+   * - `dismiss`: Replaces the glyph inside the dismiss control, which is drawn only where the row is `dismissible`.
    *
    * ## Methods
    *
@@ -32827,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
@@ -33161,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.
@@ -33278,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
@@ -35068,8 +35169,8 @@ export type CustomElements = {
    *
    * Events that will be emitted by the component.
    *
-   * - `helix-before-collapse`: Fired before a pane shuts or reopens, and cancelable.
-   * - `helix-before-resize`: Fired before the divider settles, and cancelable.
+   * - `helix-before-collapse`: Fired before a pane shuts or reopens, and only where the position it is derived from stood. Cancelable: refusing it leaves the pane as it was and the divider where the gesture put it.
+   * - `helix-before-resize`: Fired before the divider settles. Cancelable: refusing it takes the whole of where the gesture ended, so no collapse follows from it either. A drag has already drawn itself by then and holds where it was dropped until the consumer assigns their own.
    *
    * ## Slots
    *
@@ -38218,7 +38319,6 @@ export type CustomElements = {
    * - `helix-before-close`: Fired before the reader leaves early. Cancelable: refusing it takes the decision and nothing moves.
    * - `helix-complete`: Fired when the last stop is finished.
    * - `helix-tour-ask`: A stop's own controls asking the tour to move, dispatched by the stop and heard here because the tour is what moves.
-   * - `toggle`: Says the state moved, carrying `newState` and `oldState`.
    *
    * ## Slots
    *
@@ -50021,6 +50121,7 @@ export type CustomElementsSolidJs = {
    * - `media`: An avatar or icon identifying who or what it came from.
    * - `caption`: A second line qualifying it, quieter than the first. A bare slot rather than a box, so an item without one pays nothing for it; style it through `::slotted()`.
    * - `detail`: A block belonging to the row rather than a line about it: a quoted comment, a status moving from one value to another, a preview. Unlike `caption` nothing here sets a size or an ink, because whatever fills it usually brings its own.
+   * - `dismiss`: Replaces the glyph inside the dismiss control, which is drawn only where the row is `dismissible`.
    *
    * ## Methods
    *
@@ -52299,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
@@ -52641,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.
@@ -52761,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
@@ -54593,8 +54728,8 @@ export type CustomElementsSolidJs = {
    *
    * Events that will be emitted by the component.
    *
-   * - `helix-before-collapse`: Fired before a pane shuts or reopens, and cancelable.
-   * - `helix-before-resize`: Fired before the divider settles, and cancelable.
+   * - `helix-before-collapse`: Fired before a pane shuts or reopens, and only where the position it is derived from stood. Cancelable: refusing it leaves the pane as it was and the divider where the gesture put it.
+   * - `helix-before-resize`: Fired before the divider settles. Cancelable: refusing it takes the whole of where the gesture ended, so no collapse follows from it either. A drag has already drawn itself by then and holds where it was dropped until the consumer assigns their own.
    *
    * ## Slots
    *
@@ -57821,7 +57956,6 @@ export type CustomElementsSolidJs = {
    * - `helix-before-close`: Fired before the reader leaves early. Cancelable: refusing it takes the decision and nothing moves.
    * - `helix-complete`: Fired when the last stop is finished.
    * - `helix-tour-ask`: A stop's own controls asking the tour to move, dispatched by the stop and heard here because the tour is what moves.
-   * - `toggle`: Says the state moved, carrying `newState` and `oldState`.
    *
    * ## Slots
    *

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.
 
@@ -8094,9 +8129,9 @@ has an honest answer. */
 };
 
 export type HelixSplitterVueEvents = {
-  /** Fired before a pane shuts or reopens, and cancelable. */
+  /** Fired before a pane shuts or reopens, and only where the position it is derived from stood. Cancelable: refusing it leaves the pane as it was and the divider where the gesture put it. */
   "helix-before-collapse": HelixSplitterHelixBeforeCollapseElementEvent;
-  /** Fired before the divider settles, and cancelable. */
+  /** Fired before the divider settles. Cancelable: refusing it takes the whole of where the gesture ended, so no collapse follows from it either. A drag has already drawn itself by then and holds where it was dropped until the consumer assigns their own. */
   "helix-before-resize": HelixSplitterHelixBeforeResizeElementEvent;
 };
 
@@ -9670,8 +9705,6 @@ export type HelixTourVueEvents = {
   "helix-complete": HelixTourHelixCompleteElementEvent;
   /** A stop's own controls asking the tour to move, dispatched by the stop and heard here because the tour is what moves. */
   "helix-tour-ask": HelixTourHelixTourAskElementEvent;
-  /** Says the state moved, carrying `newState` and `oldState`. */
-  toggle: HelixTourElementEvent;
 };
 
 /** `HelixTourStop` component event */