@fusion.dev/helix-headless 0.53.5 → 0.54.0

package/custom-elements.json

@@ -19169,17 +19169,13 @@
               "name": "format-button"
             },
             {
-              "description": "The saturation and brightness square.",
+              "description": "The saturation and brightness square. The mark showing where in the square the color sits is drawn on the square itself, which is `::part(grid)::after` from a consumer's sheet: the two channels are already on the square as `--color-picker-saturation` and `--color-picker-brightness`, so a box would have carried nothing, and this tier ships no CSS.",
               "name": "grid"
             },
             {
               "description": "The range input for its vertical axis.",
               "name": "grid-brightness"
             },
-            {
-              "description": "The mark showing where in the square the color sits.",
-              "name": "grid-handle"
-            },
             {
               "description": "The range input for the square's horizontal axis.",
               "name": "grid-saturation"
@@ -49308,7 +49304,7 @@
           "name": "HelixHeadlessLegend",
           "cssParts": [
             {
-              "description": "One name and its swatch.",
+              "description": "One name and its swatch. The swatch is drawn on the entry, which is `::part(entry)::before` from a consumer's sheet: the series is already on the entry as `--chart-series`, so a box would have carried nothing, and this tier ships no CSS.",
               "name": "entry"
             },
             {
@@ -49318,10 +49314,6 @@
             {
               "description": "One series name.",
               "name": "name"
-            },
-            {
-              "description": "The color a series is drawn in.",
-              "name": "swatch"
             }
           ],
           "members": [
@@ -71873,7 +71865,7 @@
           "name": "HelixHeadlessRadio",
           "cssParts": [
             {
-              "description": "The circle.",
+              "description": "The circle. The dot inside it is drawn on the box itself, which is `::part(box)::after` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.",
               "name": "box"
             },
             {
@@ -71883,10 +71875,6 @@
             {
               "description": "The words beside it.",
               "name": "label"
-            },
-            {
-              "description": "The dot inside it.",
-              "name": "mark"
             }
           ],
           "slots": [
@@ -83878,7 +83866,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "**The name is a button, and only the name.** The marker is `aria-hidden`\ndecoration, so wrapping it would add hit area and no meaning. It is `Button`\nrather than a `<button>` this element resets: the hover wash, the focus ring\nand the disabled treatment are decisions the button carries.\n\n**It says nothing about where a reader may go.** Every step is pressable and\nannounces itself with `helix-select`; refusing the ones ahead is `disabled`,\nwhich the consumer sets, because only they know whether a form can be\nskipped.\n\n**The marker is a slot whose fallback is the state.** A finished stage shows\na check, the current one a target, one not yet reached an empty ring. Exactly\none is rendered, chosen from the step's own two booleans, rather than three\nwith two hidden in CSS: the accessibility tree would otherwise carry marks\nthat are not there.",
+          "description": "**The name is a button, and only the name.** The marker is `aria-hidden`\ndecoration, so wrapping it would add hit area and no meaning. It is `Button`\nrather than a `<button>` this element resets: the hover wash, the focus ring\nand the disabled treatment are decisions the button carries.\n\n**It says nothing about where a reader may go.** Every step is pressable and\nannounces itself with `helix-select`; refusing the ones ahead is `disabled`,\nwhich the consumer sets, because only they know whether a form can be\nskipped.\n\n**The marker is a slot whose fallback is the state.** A finished stage shows\na check, the current one a target, one not yet reached an empty ring. Exactly\none is rendered, chosen from the step's own two booleans, rather than three\nwith two hidden in CSS: the accessibility tree would otherwise carry marks\nthat are not there.\n\n**The two half lines either side of the mark are a sheet's, on `::before` and\n`::after` of the step.** Both are placed entirely from properties the list\nhands down, so there was nothing about them for a box to carry, and this tier\nships no CSS: a box it rendered for one to paint would be an empty child\ncosting whatever the consumer's own layout charges for a child. `ListItem`\nmeasured that.",
           "name": "HelixHeadlessStep",
           "cssParts": [
             {
@@ -83901,10 +83889,6 @@
               "description": "The inner control.",
               "name": "label-button"
             },
-            {
-              "description": "The half line arriving from the step before.",
-              "name": "lead"
-            },
             {
               "description": "The glyph inside the marker: a tick, a dot, or an empty ring.",
               "name": "mark"
@@ -83912,10 +83896,6 @@
             {
               "description": "The shape carrying the number or the check.",
               "name": "marker"
-            },
-            {
-              "description": "The half line running on to the next.",
-              "name": "trail"
             }
           ],
           "slots": [
@@ -84484,11 +84464,7 @@
               "name": "label"
             },
             {
-              "description": "The part that moves.",
-              "name": "thumb"
-            },
-            {
-              "description": "The groove the thumb travels in.",
+              "description": "The groove. The thumb that travels in it is drawn on the groove itself, which is `::part(track)::after` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.",
               "name": "track"
             }
           ],
@@ -95705,10 +95681,6 @@
           "description": "**The time is a `<time>`, and only when there is a time to put in it.** Given\n`datetime`, the label a consumer wrote is wrapped in the element the platform\nhas for exactly this, so the machine-readable instant travels with the human\none: a crawler, a reader's own tooling and a copy-paste all get \"2026-08-19\",\nwhere \"yesterday\" on its own is a word. Given no `datetime`, it stays a span,\nbecause a `<time>` with nothing to be precise about is markup pretending.\n\n**The connector is this element's, not the list's.** Each entry draws the line\nthat arrives at it and hides it when it is first, which `:host(:first-child)`\nsettles with no index, no counting parent and no script. `Steps` and\n`Breadcrumbs` both do it this way and for the same reason.\n\n`tone` says what kind of event it was, and it is the only thing that colors\nthe mark. It takes `Announcement`'s vocabulary rather than a second one.",
           "name": "HelixHeadlessTimelineItem",
           "cssParts": [
-            {
-              "description": "The line arriving at this entry.",
-              "name": "connector"
-            },
             {
               "description": "What happened, and the time above it.",
               "name": "content"
@@ -95722,7 +95694,7 @@
               "name": "marker"
             },
             {
-              "description": "The column holding the mark and the line.",
+              "description": "The column holding the mark and the line. Both halves of the line are drawn on the rail, which is `::part(rail)::before` and `::after` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.",
               "name": "rail"
             },
             {
@@ -97796,10 +97768,6 @@
           "description": "The indicator is one element that travels, not a background that appears on\nwhichever item is current. A fill that swaps is two things changing at once\nand reads as a flicker; one that moves is a single object the eye follows,\nand it says where the selection came from as well as where it went.\n\nIts box is measured from the selected item and written onto the indicator as\ncustom properties, labels being different lengths. Measurement is client-side\nby necessity, so the server renders the indicator hidden and it fades in once\nit has somewhere to be, which is the harmless direction.",
           "name": "HelixHeadlessToggleGroup",
           "cssParts": [
-            {
-              "description": "The rule after an inline label, separating it from the items.",
-              "name": "divider"
-            },
             {
               "description": "What is wrong with it.",
               "name": "feedback"
@@ -97821,7 +97789,7 @@
               "name": "row"
             },
             {
-              "description": "The bar the items sit in.",
+              "description": "The bar the items sit in. The rule after an inline label, separating it from the items, is drawn on the bar, which is `::part(track)::before` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.",
               "name": "track"
             }
           ],
@@ -107374,13 +107342,9 @@
               "name": "fullscreen"
             },
             {
-              "description": "What is said while the picture waits for more of itself.",
+              "description": "What is said while the picture waits for more of itself. The part of that which spins is drawn on it, which is `::part(loading)::before` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.",
               "name": "loading"
             },
-            {
-              "description": "The part of that which spins.",
-              "name": "loading-mark"
-            },
             {
               "description": "The button that opens it.",
               "name": "more"

package/dist/color-picker/root/color-picker-root.d.ts

@@ -57,9 +57,12 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  * @csspart footer - The row holding the value and the tools.
  * @csspart format - The control that changes the syntax the value is written in.
  * @csspart format-button - The inner control.
- * @csspart grid - The saturation and brightness square.
+ * @csspart grid - The saturation and brightness square. The mark showing where
+ * in the square the color sits is drawn on the square itself, which is
+ * `::part(grid)::after` from a consumer's sheet: the two channels are already
+ * on the square as `--color-picker-saturation` and `--color-picker-brightness`,
+ * so a box would have carried nothing, and this tier ships no CSS.
  * @csspart grid-brightness - The range input for its vertical axis.
- * @csspart grid-handle - The mark showing where in the square the color sits.
  * @csspart grid-saturation - The range input for the square's horizontal axis.
  * @csspart sample - The chip of the current color, which copies it when pressed.
  * @csspart swatch - One preset.

package/dist/color-picker/root/color-picker-root.js

@@ -234,7 +234,6 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinContr
         @pointerdown=${this.handleGridPointer}
         @pointermove=${this.handleGridPointer}
       >
-        <span part="grid-handle" aria-hidden="true"></span>
         <input
           part="grid-saturation"
           type="range"

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

@@ -22,10 +22,12 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @aliases Key, Series Key
  * @documentation https://fusion.dev/helix/components/legend
  *
- * @csspart entry - One name and its swatch.
+ * @csspart entry - One name and its swatch. The swatch is drawn on the entry,
+ * which is `::part(entry)::before` from a consumer's sheet: the series is
+ * already on the entry as `--chart-series`, so a box would have carried nothing,
+ * and this tier ships no CSS.
  * @csspart list - The list itself.
  * @csspart name - One series name.
- * @csspart swatch - The color a series is drawn in.
  */
 export declare class HelixHeadlessLegend extends HelixElement {
     /**

package/dist/legend/root/legend-root.js

@@ -33,7 +33,6 @@ let HelixHeadlessLegend = class HelixHeadlessLegend extends HelixElement {
           style="--chart-series: var(--chart-series-${seriesIndex(index)})"
           role="listitem"
         >
-          <span aria-hidden="true" part="swatch"></span>
           <span part="name">${name}</span>
         </li>`)}
     </ul>`;

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

@@ -35,10 +35,12 @@ declare const HelixHeadlessRadio_base: (new (...args: any[]) => import("@fusion.
  *
  * @event {HelixSelectEvent} helix-select - Fired when this choice is made. Cancelable: refusing it takes the decision and nothing moves.
  *
- * @csspart box - The circle.
+ * @csspart box - The circle. The dot inside it is drawn on the box itself,
+ * which is `::part(box)::after` from a consumer's sheet: this tier ships no CSS,
+ * so a box it renders for one to paint is an empty child costing whatever the
+ * consumer's own layout charges for a child. `ListItem` measured that.
  * @csspart item - The button, which is the whole row.
  * @csspart label - The words beside it.
- * @csspart mark - The dot inside it.
  *
  * @cssstate selected - While it is the one chosen.
  */

package/dist/radio/root/radio-root.js

@@ -32,7 +32,7 @@ let HelixHeadlessRadio = class HelixHeadlessRadio extends MixinSelectableItem(He
       tabindex=${this.selected || this.focusable || !this.childrenKnown ? '0' : '-1'}
       @click=${() => this.select()}
     >
-      <span part="box"><span part="mark" aria-hidden="true"></span></span>
+      <span part="box"></span>
       <slot name="icon"></slot>
       <span part="label"><slot></slot></span>
     </button>`;

package/dist/steps/step/step.d.ts

@@ -21,6 +21,13 @@ import '../../button/index.js';
  * with two hidden in CSS: the accessibility tree would otherwise carry marks
  * that are not there.
  *
+ * **The two half lines either side of the mark are a sheet's, on `::before` and
+ * `::after` of the step.** Both are placed entirely from properties the list
+ * hands down, so there was nothing about them for a box to carry, and this tier
+ * ships no CSS: a box it rendered for one to paint would be an empty child
+ * costing whatever the consumer's own layout charges for a child. `ListItem`
+ * measured that.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Stage
@@ -38,10 +45,8 @@ import '../../button/index.js';
  * @csspart description - The line under it.
  * @csspart label - The step's name, which is a control.
  * @csspart label-button - The inner control.
- * @csspart lead - The half line arriving from the step before.
  * @csspart mark - The glyph inside the marker: a tick, a dot, or an empty ring.
  * @csspart marker - The shape carrying the number or the check.
- * @csspart trail - The half line running on to the next.
  */
 export declare class HelixHeadlessStep extends HelixElement {
     /**

package/dist/steps/step/step.js

@@ -49,9 +49,7 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
     </${this.tag('button')}>`;
     }
     render() {
-        return html `<span part="lead" aria-hidden="true"></span>
-      <span part="trail" aria-hidden="true"></span>
-      <span part="marker" aria-hidden="true">
+        return html `<span part="marker" aria-hidden="true">
         ${this.renderMarker()}
       </span>
       <span part="body">

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

@@ -38,8 +38,11 @@ declare const HelixHeadlessSwitch_base: (new (...args: any[]) => import("@fusion
  * @csspart field - The row: the track and its label.
  * @csspart hint - Help under the control, while nothing is wrong.
  * @csspart label - The words beside it.
- * @csspart thumb - The part that moves.
- * @csspart track - The groove the thumb travels in.
+ * @csspart track - The groove. The thumb that travels in it is drawn on the
+ * groove itself, which is `::part(track)::after` from a consumer's sheet: this
+ * tier ships no CSS, so a box it renders for one to paint is an empty child
+ * costing whatever the consumer's own layout charges for a child. `ListItem`
+ * measured that.
  *
  * @cssstate checked - While it is on.
  * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.

package/dist/switch/root/switch-root.js

@@ -54,7 +54,6 @@ let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerCheck
           @change=${this.handleChange}
           @input=${this.stopInner}
         />
-        <span part="thumb" aria-hidden="true"></span>
       </span>
       <span part="label"><slot>${this.label}</slot></span>
     </label>

package/dist/timeline/item/timeline-item.d.ts

@@ -31,11 +31,14 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * platform can answer, and it answers it at assignment time.
  * @slot time - When it happened, as a reader should see it written.
  *
- * @csspart connector - The line arriving at this entry.
  * @csspart content - What happened, and the time above it.
  * @csspart dot - The mark drawn where nothing was slotted for one.
  * @csspart marker - The mark on the line.
- * @csspart rail - The column holding the mark and the line.
+ * @csspart rail - The column holding the mark and the line. Both halves of the
+ * line are drawn on the rail, which is `::part(rail)::before` and `::after` from
+ * a consumer's sheet: this tier ships no CSS, so a box it renders for one to
+ * paint is an empty child costing whatever the consumer's own layout charges for
+ * a child. `ListItem` measured that.
  * @csspart time - When it happened.
  */
 export declare class HelixHeadlessTimelineItem extends HelixElement {

package/dist/timeline/item/timeline-item.js

@@ -31,10 +31,6 @@ let HelixHeadlessTimelineItem = class HelixHeadlessTimelineItem extends HelixEle
     render() {
         const when = html `<slot name="time"></slot>`;
         return html `<div part="rail">
-        <div
-          part="connector"
-          aria-hidden="true"
-        ></div>
         ${this.renderMarker()}
       </div>
       ${this.datetime === ''

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

@@ -29,13 +29,16 @@ declare const HelixHeadlessToggleGroup_base: (new (...args: any[]) => import("@f
  * @event {HelixSelectEvent} helix-select - Fired when an item is chosen. Dispatched by the item and listened for here. Cancelable: refusing it takes the decision and nothing moves.
  * @event {Event} input - Announced once the value has moved.
  *
- * @csspart divider - The rule after an inline label, separating it from the items.
  * @csspart feedback - What is wrong with it.
  * @csspart hint - Help under the row, while nothing is wrong.
  * @csspart indicator - The moving marker behind the selected item.
  * @csspart label - The question, over the row.
  * @csspart row - The line the track sits on, with whatever flanks it.
- * @csspart track - The bar the items sit in.
+ * @csspart track - The bar the items sit in. The rule after an inline label,
+ * separating it from the items, is drawn on the bar, which is
+ * `::part(track)::before` from a consumer's sheet: this tier ships no CSS, so a
+ * box it renders for one to paint is an empty child costing whatever the
+ * consumer's own layout charges for a child. `ListItem` measured that.
  *
  * @cssstate invalid - While there is feedback to show: the platform's verdict, or the consumer's `feedback`.
  */

package/dist/toggle/group/toggle-group.js

@@ -83,7 +83,7 @@ let HelixHeadlessToggleGroup = class HelixHeadlessToggleGroup extends MixinContr
       <div part="row">
         <slot name="start"></slot>
         <div part="track">
-        ${inside ? html `${label}<div part="divider" aria-hidden="true"></div>` : nothing}
+        ${inside ? label : nothing}
         <div part="indicator" aria-hidden="true"></div>
         <slot
           @slotchange=${() => {

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

@@ -69,7 +69,10 @@ import '../../menu/index.js';
  * @csspart forward - The control that goes on ten seconds.
  * @csspart fullscreen - The whole screen, and back.
  * @csspart loading - What is said while the picture waits for more of itself.
- * @csspart loading-mark - The part of that which spins.
+ * The part of that which spins is drawn on it, which is `::part(loading)::before`
+ * from a consumer's sheet: this tier ships no CSS, so a box it renders for one to
+ * paint is an empty child costing whatever the consumer's own layout charges for
+ * a child. `ListItem` measured that.
  * @csspart more - The button that opens it.
  * @csspart mute - Sound on and off.
  * @csspart next - Asks for the next item, where it was asked for.

package/dist/video/root/video-root.js

@@ -826,7 +826,6 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
               role="status"
               aria-live="polite"
             >
-              <span part="loading-mark" aria-hidden="true"></span>
               ${this.loadingLabel}
             </div>`
             : nothing}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.53.5",
+  "version": "0.54.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,14 +46,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.53.5",
-    "@fusion.dev/helix-icons": "0.53.5",
+    "@fusion.dev/helix-core": "0.54.0",
+    "@fusion.dev/helix-icons": "0.54.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.53.5",
-    "@fusion.dev/helix-testing": "0.53.5",
+    "@fusion.dev/helix-cem": "0.54.0",
+    "@fusion.dev/helix-testing": "0.54.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

@@ -21284,9 +21284,8 @@ export type CustomElements = {
    * - `footer`: The row holding the value and the tools.
    * - `format`: The control that changes the syntax the value is written in.
    * - `format-button`: The inner control.
-   * - `grid`: The saturation and brightness square.
+   * - `grid`: The saturation and brightness square. The mark showing where in the square the color sits is drawn on the square itself, which is `::part(grid)::after` from a consumer's sheet: the two channels are already on the square as `--color-picker-saturation` and `--color-picker-brightness`, so a box would have carried nothing, and this tier ships no CSS.
    * - `grid-brightness`: The range input for its vertical axis.
-   * - `grid-handle`: The mark showing where in the square the color sits.
    * - `grid-saturation`: The range input for the square's horizontal axis.
    * - `sample`: The chip of the current color, which copies it when pressed.
    * - `swatch`: One preset.
@@ -25954,10 +25953,9 @@ export type CustomElements = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `entry`: One name and its swatch.
+   * - `entry`: One name and its swatch. The swatch is drawn on the entry, which is `::part(entry)::before` from a consumer's sheet: the series is already on the entry as `--chart-series`, so a box would have carried nothing, and this tier ships no CSS.
    * - `list`: The list itself.
    * - `name`: One series name.
-   * - `swatch`: The color a series is drawn in.
    *
    * ## CSS States
    *
@@ -29807,10 +29805,9 @@ export type CustomElements = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `box`: The circle.
+   * - `box`: The circle. The dot inside it is drawn on the box itself, which is `::part(box)::after` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    * - `item`: The button, which is the whole row.
    * - `label`: The words beside it.
-   * - `mark`: The dot inside it.
    *
    * ## CSS States
    *
@@ -31717,6 +31714,13 @@ export type CustomElements = {
    * with two hidden in CSS: the accessibility tree would otherwise carry marks
    * that are not there.
    *
+   * **The two half lines either side of the mark are a sheet's, on `::before` and
+   * `::after` of the step.** Both are placed entirely from properties the list
+   * hands down, so there was nothing about them for a box to carry, and this tier
+   * ships no CSS: a box it rendered for one to paint would be an empty child
+   * costing whatever the consumer's own layout charges for a child. `ListItem`
+   * measured that.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -31776,10 +31780,8 @@ export type CustomElements = {
    * - `description`: The line under it.
    * - `label`: The step's name, which is a control.
    * - `label-button`: The inner control.
-   * - `lead`: The half line arriving from the step before.
    * - `mark`: The glyph inside the marker: a tick, a dot, or an empty ring.
    * - `marker`: The shape carrying the number or the check.
-   * - `trail`: The half line running on to the next.
    *
    * ## CSS States
    *
@@ -31957,8 +31959,7 @@ export type CustomElements = {
    * - `field`: The row: the track and its label.
    * - `hint`: Help under the control, while nothing is wrong.
    * - `label`: The words beside it.
-   * - `thumb`: The part that moves.
-   * - `track`: The groove the thumb travels in.
+   * - `track`: The groove. The thumb that travels in it is drawn on the groove itself, which is `::part(track)::after` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    *
    * ## CSS States
    *
@@ -33609,11 +33610,10 @@ export type CustomElements = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `connector`: The line arriving at this entry.
    * - `content`: What happened, and the time above it.
    * - `dot`: The mark drawn where nothing was slotted for one.
    * - `marker`: The mark on the line.
-   * - `rail`: The column holding the mark and the line.
+   * - `rail`: The column holding the mark and the line. Both halves of the line are drawn on the rail, which is `::part(rail)::before` and `::after` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    * - `time`: When it happened.
    *
    * ## CSS States
@@ -34068,13 +34068,12 @@ export type CustomElements = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `divider`: The rule after an inline label, separating it from the items.
    * - `feedback`: What is wrong with it.
    * - `hint`: Help under the row, while nothing is wrong.
    * - `indicator`: The moving marker behind the selected item.
    * - `label`: The question, over the row.
    * - `row`: The line the track sits on, with whatever flanks it.
-   * - `track`: The bar the items sit in.
+   * - `track`: The bar the items sit in. The rule after an inline label, separating it from the items, is drawn on the bar, which is `::part(track)::before` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    *
    * ## CSS States
    *
@@ -35624,8 +35623,7 @@ export type CustomElements = {
    * - `failure`: What is said when the source will not play.
    * - `forward`: The control that goes on ten seconds.
    * - `fullscreen`: The whole screen, and back.
-   * - `loading`: What is said while the picture waits for more of itself.
-   * - `loading-mark`: The part of that which spins.
+   * - `loading`: What is said while the picture waits for more of itself. The part of that which spins is drawn on it, which is `::part(loading)::before` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    * - `more`: The button that opens it.
    * - `mute`: Sound on and off.
    * - `next`: Asks for the next item, where it was asked for.
@@ -39274,9 +39272,8 @@ export type CustomElementsSolidJs = {
    * - `footer`: The row holding the value and the tools.
    * - `format`: The control that changes the syntax the value is written in.
    * - `format-button`: The inner control.
-   * - `grid`: The saturation and brightness square.
+   * - `grid`: The saturation and brightness square. The mark showing where in the square the color sits is drawn on the square itself, which is `::part(grid)::after` from a consumer's sheet: the two channels are already on the square as `--color-picker-saturation` and `--color-picker-brightness`, so a box would have carried nothing, and this tier ships no CSS.
    * - `grid-brightness`: The range input for its vertical axis.
-   * - `grid-handle`: The mark showing where in the square the color sits.
    * - `grid-saturation`: The range input for the square's horizontal axis.
    * - `sample`: The chip of the current color, which copies it when pressed.
    * - `swatch`: One preset.
@@ -44003,10 +44000,9 @@ export type CustomElementsSolidJs = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `entry`: One name and its swatch.
+   * - `entry`: One name and its swatch. The swatch is drawn on the entry, which is `::part(entry)::before` from a consumer's sheet: the series is already on the entry as `--chart-series`, so a box would have carried nothing, and this tier ships no CSS.
    * - `list`: The list itself.
    * - `name`: One series name.
-   * - `swatch`: The color a series is drawn in.
    *
    * ## CSS States
    *
@@ -47918,10 +47914,9 @@ export type CustomElementsSolidJs = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `box`: The circle.
+   * - `box`: The circle. The dot inside it is drawn on the box itself, which is `::part(box)::after` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    * - `item`: The button, which is the whole row.
    * - `label`: The words beside it.
-   * - `mark`: The dot inside it.
    *
    * ## CSS States
    *
@@ -49867,6 +49862,13 @@ export type CustomElementsSolidJs = {
    * with two hidden in CSS: the accessibility tree would otherwise carry marks
    * that are not there.
    *
+   * **The two half lines either side of the mark are a sheet's, on `::before` and
+   * `::after` of the step.** Both are placed entirely from properties the list
+   * hands down, so there was nothing about them for a box to carry, and this tier
+   * ships no CSS: a box it rendered for one to paint would be an empty child
+   * costing whatever the consumer's own layout charges for a child. `ListItem`
+   * measured that.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -49926,10 +49928,8 @@ export type CustomElementsSolidJs = {
    * - `description`: The line under it.
    * - `label`: The step's name, which is a control.
    * - `label-button`: The inner control.
-   * - `lead`: The half line arriving from the step before.
    * - `mark`: The glyph inside the marker: a tick, a dot, or an empty ring.
    * - `marker`: The shape carrying the number or the check.
-   * - `trail`: The half line running on to the next.
    *
    * ## CSS States
    *
@@ -50110,8 +50110,7 @@ export type CustomElementsSolidJs = {
    * - `field`: The row: the track and its label.
    * - `hint`: Help under the control, while nothing is wrong.
    * - `label`: The words beside it.
-   * - `thumb`: The part that moves.
-   * - `track`: The groove the thumb travels in.
+   * - `track`: The groove. The thumb that travels in it is drawn on the groove itself, which is `::part(track)::after` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    *
    * ## CSS States
    *
@@ -51794,11 +51793,10 @@ export type CustomElementsSolidJs = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `connector`: The line arriving at this entry.
    * - `content`: What happened, and the time above it.
    * - `dot`: The mark drawn where nothing was slotted for one.
    * - `marker`: The mark on the line.
-   * - `rail`: The column holding the mark and the line.
+   * - `rail`: The column holding the mark and the line. Both halves of the line are drawn on the rail, which is `::part(rail)::before` and `::after` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    * - `time`: When it happened.
    *
    * ## CSS States
@@ -52263,13 +52261,12 @@ export type CustomElementsSolidJs = {
    *
    * Custom selectors for styling elements within the component.
    *
-   * - `divider`: The rule after an inline label, separating it from the items.
    * - `feedback`: What is wrong with it.
    * - `hint`: Help under the row, while nothing is wrong.
    * - `indicator`: The moving marker behind the selected item.
    * - `label`: The question, over the row.
    * - `row`: The line the track sits on, with whatever flanks it.
-   * - `track`: The bar the items sit in.
+   * - `track`: The bar the items sit in. The rule after an inline label, separating it from the items, is drawn on the bar, which is `::part(track)::before` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    *
    * ## CSS States
    *
@@ -53847,8 +53844,7 @@ export type CustomElementsSolidJs = {
    * - `failure`: What is said when the source will not play.
    * - `forward`: The control that goes on ten seconds.
    * - `fullscreen`: The whole screen, and back.
-   * - `loading`: What is said while the picture waits for more of itself.
-   * - `loading-mark`: The part of that which spins.
+   * - `loading`: What is said while the picture waits for more of itself. The part of that which spins is drawn on it, which is `::part(loading)::before` from a consumer's sheet: this tier ships no CSS, so a box it renders for one to paint is an empty child costing whatever the consumer's own layout charges for a child. `ListItem` measured that.
    * - `more`: The button that opens it.
    * - `mute`: Sound on and off.
    * - `next`: Asks for the next item, where it was asked for.

package/types/vue.d.ts

@@ -9843,7 +9843,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessStepsVueProps,
     HelixHeadlessStepsVueEvents
   >;
-  /** **The name is a button, and only the name.** The marker is 'aria-hidden' decoration, so wrapping it would add hit area and no meaning. It is 'Button' rather than a '<button>' this element resets: the hover wash, the focus ring and the disabled treatment are decisions the button carries.  **It says nothing about where a reader may go.** Every step is pressable and announces itself with 'helix-select'; refusing the ones ahead is 'disabled', which the consumer sets, because only they know whether a form can be skipped.  **The marker is a slot whose fallback is the state.** A finished stage shows a check, the current one a target, one not yet reached an empty ring. Exactly one is rendered, chosen from the step's own two booleans, rather than three with two hidden in CSS: the accessibility tree would otherwise carry marks that are not there. */
+  /** **The name is a button, and only the name.** The marker is 'aria-hidden' decoration, so wrapping it would add hit area and no meaning. It is 'Button' rather than a '<button>' this element resets: the hover wash, the focus ring and the disabled treatment are decisions the button carries.  **It says nothing about where a reader may go.** Every step is pressable and announces itself with 'helix-select'; refusing the ones ahead is 'disabled', which the consumer sets, because only they know whether a form can be skipped.  **The marker is a slot whose fallback is the state.** A finished stage shows a check, the current one a target, one not yet reached an empty ring. Exactly one is rendered, chosen from the step's own two booleans, rather than three with two hidden in CSS: the accessibility tree would otherwise carry marks that are not there.  **The two half lines either side of the mark are a sheet's, on '::before' and '::after' of the step.** Both are placed entirely from properties the list hands down, so there was nothing about them for a box to carry, and this tier ships no CSS: a box it rendered for one to paint would be an empty child costing whatever the consumer's own layout charges for a child. 'ListItem' measured that. */
   "helix-headless-step": DefineCustomElement<
     HelixHeadlessStep,
     HelixHeadlessStepVueProps,