@fusion.dev/helix 0.53.5 → 0.54.0

package/custom-elements.json

@@ -26369,7 +26369,7 @@
               }
             },
             {
-              "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",
               "inheritedFrom": {
                 "name": "HelixHeadlessColorPicker",
@@ -26384,14 +26384,6 @@
                 "module": "src/color-picker/root/color-picker-root.ts"
               }
             },
-            {
-              "description": "The mark showing where in the square the color sits.",
-              "name": "grid-handle",
-              "inheritedFrom": {
-                "name": "HelixHeadlessColorPicker",
-                "module": "src/color-picker/root/color-picker-root.ts"
-              }
-            },
             {
               "description": "The range input for the square's horizontal axis.",
               "name": "grid-saturation",
@@ -62235,7 +62227,7 @@
           "customElement": true,
           "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",
               "inheritedFrom": {
                 "name": "HelixHeadlessLegend",
@@ -62257,14 +62249,6 @@
                 "name": "HelixHeadlessLegend",
                 "module": "src/legend/root/legend-root.ts"
               }
-            },
-            {
-              "description": "The color a series is drawn in.",
-              "name": "swatch",
-              "inheritedFrom": {
-                "name": "HelixHeadlessLegend",
-                "module": "src/legend/root/legend-root.ts"
-              }
             }
           ],
           "cssStates": [
@@ -91091,7 +91075,7 @@
           ],
           "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",
               "inheritedFrom": {
                 "name": "HelixHeadlessRadio",
@@ -91113,14 +91097,6 @@
                 "name": "HelixHeadlessRadio",
                 "module": "src/radio/root/radio-root.ts"
               }
-            },
-            {
-              "description": "The dot inside it.",
-              "name": "mark",
-              "inheritedFrom": {
-                "name": "HelixHeadlessRadio",
-                "module": "src/radio/root/radio-root.ts"
-              }
             }
           ],
           "events": [
@@ -109636,14 +109612,6 @@
                 "module": "src/steps/step/step.ts"
               }
             },
-            {
-              "description": "The half line arriving from the step before.",
-              "name": "lead",
-              "inheritedFrom": {
-                "name": "HelixHeadlessStep",
-                "module": "src/steps/step/step.ts"
-              }
-            },
             {
               "description": "The glyph inside the marker: a tick, a dot, or an empty ring.",
               "name": "mark",
@@ -109659,14 +109627,6 @@
                 "name": "HelixHeadlessStep",
                 "module": "src/steps/step/step.ts"
               }
-            },
-            {
-              "description": "The half line running on to the next.",
-              "name": "trail",
-              "inheritedFrom": {
-                "name": "HelixHeadlessStep",
-                "module": "src/steps/step/step.ts"
-              }
             }
           ],
           "attributes": [
@@ -111009,15 +110969,7 @@
               }
             },
             {
-              "description": "The part that moves.",
-              "name": "thumb",
-              "inheritedFrom": {
-                "name": "HelixHeadlessSwitch",
-                "module": "src/switch/root/switch-root.ts"
-              }
-            },
-            {
-              "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",
               "inheritedFrom": {
                 "name": "HelixHeadlessSwitch",
@@ -123621,14 +123573,6 @@
             }
           ],
           "cssParts": [
-            {
-              "description": "The line arriving at this entry.",
-              "name": "connector",
-              "inheritedFrom": {
-                "name": "HelixHeadlessTimelineItem",
-                "module": "src/timeline/item/timeline-item.ts"
-              }
-            },
             {
               "description": "What happened, and the time above it.",
               "name": "content",
@@ -123654,7 +123598,7 @@
               }
             },
             {
-              "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",
               "inheritedFrom": {
                 "name": "HelixHeadlessTimelineItem",
@@ -125660,14 +125604,6 @@
                 "module": "src/toggle/group/toggle-group.ts"
               }
             },
-            {
-              "description": "The rule after an inline label, separating it from the items.",
-              "name": "divider",
-              "inheritedFrom": {
-                "name": "HelixHeadlessToggleGroup",
-                "module": "src/toggle/group/toggle-group.ts"
-              }
-            },
             {
               "description": "What is wrong with it.",
               "name": "feedback",
@@ -125701,7 +125637,7 @@
               }
             },
             {
-              "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",
               "inheritedFrom": {
                 "name": "HelixHeadlessToggleGroup",
@@ -138719,21 +138655,13 @@
               }
             },
             {
-              "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",
               "inheritedFrom": {
                 "name": "HelixHeadlessVideo",
                 "module": "src/video/root/video-root.ts"
               }
             },
-            {
-              "description": "The part of that which spins.",
-              "name": "loading-mark",
-              "inheritedFrom": {
-                "name": "HelixHeadlessVideo",
-                "module": "src/video/root/video-root.ts"
-              }
-            },
             {
               "description": "The button that opens it.",
               "name": "more",

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

@@ -43,11 +43,12 @@ position: relative;
 touch-action: none;
 }
 
-[part="grid-handle"] {
+[part="grid"]::after {
 block-size: var(--helix-size-icon-tight);
 border: var(--helix-border-thick) solid var(--helix-color-surface);
 border-radius: var(--helix-radii-full);
 box-shadow: var(--helix-shadow-sm);
+content: "";
 inline-size: var(--helix-size-icon-tight);
 inset-block-start: calc(100% - var(--color-picker-brightness, 100%));
 inset-inline-start: var(--color-picker-saturation, 100%);
@@ -56,7 +57,7 @@ position: absolute;
 translate: -50% -50%;
 }
 
-:host(:dir(rtl)) [part="grid-handle"] {
+:host(:dir(rtl)) [part="grid"]::after {
 translate: 50% -50%;
 }
 

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

@@ -33,15 +33,18 @@ flex-direction: row-reverse;
 text-align: end;
 }
 
-[part="swatch"] {
+[part="entry"]::before {
+--_legend-shade: color-mix(in oklab, var(--chart-series) 60%, var(--helix-color-background));
+
 block-size: var(--legend-swatch-size, var(--helix-space-sm));
 
 border-radius: var(--helix-radii-sm);
+content: "";
 flex: 0 0 auto;
 inline-size: var(--legend-swatch-size, var(--helix-space-sm));
 }
 
-[part="entry"] [part="swatch"] {
+[part="entry"]::before {
 background-color: color-mix(
 in oklab,
 var(--chart-series) calc(var(--_legend-area, 1) * var(--_legend-through, 1) * 100%),
@@ -49,8 +52,8 @@ transparent
 );
 }
 
-[part="entry"][data-emphasis="outlined"] [part="swatch"],
-:host([emphasis="outlined"]) [part="entry"]:not([data-emphasis]) [part="swatch"] {
+[part="entry"][data-emphasis="outlined"]::before,
+:host([emphasis="outlined"]) [part="entry"]:not([data-emphasis])::before {
 background-color: color-mix(
 in oklab,
 var(--_legend-shade) calc(var(--_legend-through, 1) * 100%),
@@ -60,23 +63,19 @@ border: var(--legend-swatch-stroke, var(--helix-border-thick)) solid
 color-mix(in oklab, var(--chart-series) calc(var(--_legend-through, 1) * 100%), transparent);
 }
 
-[part="entry"][data-emphasis="subtle"] [part="swatch"],
-:host([emphasis="subtle"]) [part="entry"]:not([data-emphasis]) [part="swatch"] {
+[part="entry"][data-emphasis="subtle"]::before,
+:host([emphasis="subtle"]) [part="entry"]:not([data-emphasis])::before {
 --_legend-area: 0.2;
 border: var(--legend-swatch-stroke, var(--helix-border-thick)) solid
 color-mix(in oklab, var(--chart-series) calc(var(--_legend-through, 1) * 100%), transparent);
 }
 
-[part="swatch"] {
---_legend-shade: color-mix(in oklab, var(--chart-series) 60%, var(--helix-color-background));
-}
-
-[part="entry"][data-material="glass"] [part="swatch"],
-:host([material="glass"]) [part="entry"]:not([data-material]) [part="swatch"] {
+[part="entry"][data-material="glass"]::before,
+:host([material="glass"]) [part="entry"]:not([data-material])::before {
 --_legend-through: calc(0.62 * var(--helix-material-opacity));
 }
 
-:host([material="frosted"]) [part="entry"]:not([data-material]) [part="swatch"] {
+:host([material="frosted"]) [part="entry"]:not([data-material])::before {
 --_legend-through: calc(0.88 * var(--helix-material-opacity));
 }
 

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

@@ -43,17 +43,18 @@ border-color: var(--radio-border-color, var(--helix-color-foreground-muted));
 border-color: var(--radio-border-color, var(--helix-color-foreground));
 }
 
-[part="mark"] {
+[part="box"]::after {
 background-color: var(--radio-mark-color, var(--helix-color-foreground));
 block-size: calc(var(--_radio-size) * 0.4);
 border-radius: var(--helix-radii-full);
+content: "";
 inline-size: calc(var(--_radio-size) * 0.4);
 
 scale: 0;
 transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized);
 }
 
-:host(:state(selected)) [part="mark"] {
+:host(:state(selected)) [part="box"]::after {
 scale: 1;
 }
 

package/dist/steps/step/step.css.js

@@ -13,29 +13,30 @@ position: relative;
 row-gap: var(--_steps-row-gap, var(--helix-space-2xs));
 }
 
-[part="lead"],
-[part="trail"] {
+:host::before,
+:host::after {
 background-color: var(--steps-connector-color, var(--helix-color-border));
+content: "";
 position: absolute;
 z-index: 0;
 }
 
-[part="lead"] {
+:host::before {
 block-size: var(--_steps-lead-block-size, var(--helix-border-thin));
 inline-size: var(--_steps-lead-inline-size, 0);
 inset-block-start: var(--_steps-lead-block-start, 50%);
 inset-inline-start: var(--_steps-lead-inline-start, 0);
 }
 
-[part="trail"] {
+:host::after {
 block-size: var(--_steps-trail-block-size, var(--helix-border-thin));
 inline-size: var(--_steps-trail-inline-size, 0);
 inset-block-start: var(--_steps-trail-block-start, 50%);
 inset-inline-start: var(--_steps-trail-inline-start, 0);
 }
 
-:host(:first-child) [part="lead"],
-:host(:last-child) [part="trail"] {
+:host(:first-child)::before,
+:host(:last-child)::after {
 display: none;
 }
 

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

@@ -41,12 +41,13 @@ background-color var(--helix-duration-fast) var(--helix-easing-standard),
 border-color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
-[part="thumb"] {
+[part="track"]::after {
 
 background-color: var(--switch-thumb-color, var(--helix-color-surface-overlay));
 block-size: calc(var(--_switch-height) - var(--_switch-inset) * 2);
 border: var(--helix-border-thin) solid var(--helix-color-border);
 border-radius: var(--helix-radii-full);
+content: "";
 inline-size: calc(var(--_switch-height) - var(--_switch-inset) * 2);
 inset-block-start: 50%;
 
@@ -57,7 +58,7 @@ translate: 0 -50%;
 transition: translate var(--helix-duration-fast) var(--helix-easing-emphasized);
 }
 
-:host(:state(checked)) [part="thumb"] {
+:host(:state(checked)) [part="track"]::after {
 border-color: transparent;
 }
 
@@ -76,14 +77,14 @@ margin: var(--helix-space-none);
 opacity: 0;
 }
 
-:host(:state(checked)) [part="thumb"] {
+:host(:state(checked)) [part="track"]::after {
 
 background-color: var(--switch-thumb-color, var(--helix-color-foreground-on-accent));
 
 translate: calc(var(--_switch-width) - var(--_switch-height)) -50%;
 }
 
-[part="control"]:focus-visible + [part="thumb"] {
+[part="track"]:has([part="control"]:focus-visible)::after {
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: var(--helix-size-focus-offset);
 }

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

@@ -13,14 +13,16 @@ grid-template-rows: subgrid;
 justify-items: center;
 }
 
-[part="connector"] {
+[part="rail"]::before {
 background-color: var(--helix-color-border);
 block-size: 100%;
+content: "";
+grid-column: 1;
 grid-row: 1;
 inline-size: var(--timeline-rail-size, var(--helix-border-thin));
 }
 
-:host(:first-child) [part="connector"] {
+:host(:first-child) [part="rail"]::before {
 visibility: hidden;
 }
 

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

@@ -9,18 +9,22 @@ gap: var(--helix-space-2xs);
 align-self: center;
 margin-block: 0;
 
+order: -2;
+
 padding-block: 0;
 padding-inline-start: var(--helix-space-xs);
 white-space: nowrap;
 }
 
-[part="divider"] {
+:host([label-placement="start"]) [part="track"]::before {
 align-self: center;
 background-color: var(--helix-color-border);
-block-size: 60%;
+block-size: calc(var(--_toggle-height) * 0.6);
+content: "";
 flex: none;
 inline-size: var(--helix-border-thin);
 margin-inline: var(--helix-space-xs);
+order: -1;
 }
 
 :host([label-placement="start"]) {

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

@@ -356,13 +356,14 @@ position: absolute;
 translate: -50% -50%;
 }
 
-[part="loading-mark"] {
+[part="loading"]::before {
 animation: video-spin var(--_video-spin) linear infinite;
 block-size: var(--helix-size-icon-tight);
 border: var(--helix-border-thick) solid
 color-mix(in oklab, var(--helix-color-foreground-media) 30%, transparent);
 border-block-start-color: var(--helix-color-foreground-media);
 border-radius: var(--helix-radii-full);
+content: "";
 flex: 0 0 auto;
 inline-size: var(--helix-size-icon-tight);
 }
@@ -374,7 +375,7 @@ rotate: 1turn;
 }
 
 @media (prefers-reduced-motion: reduce) {
-[part="loading-mark"] {
+[part="loading"]::before {
 animation: none;
 }
 }

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.53.5",
+  "version": "0.54.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.53.5",
-    "@fusion.dev/helix-headless": "0.53.5",
-    "@fusion.dev/helix-styles": "0.53.5"
+    "@fusion.dev/helix-core": "0.54.0",
+    "@fusion.dev/helix-headless": "0.54.0",
+    "@fusion.dev/helix-styles": "0.54.0"
   },
   "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

@@ -24832,9 +24832,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.
@@ -29664,10 +29663,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
    *
@@ -33697,10 +33695,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
    *
@@ -36321,10 +36318,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
    *
@@ -36510,8 +36505,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
    *
@@ -38218,11 +38212,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
@@ -38663,12 +38656,11 @@ export type CustomElements = {
    * Custom selectors for styling elements within the component.
    *
    * - `indicator`: The moving marker behind the selected item.
-   * - `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.
    * - `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
    *
@@ -40245,8 +40237,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.
@@ -44407,9 +44398,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.
@@ -49332,10 +49322,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
    *
@@ -53453,10 +53442,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
    *
@@ -56143,10 +56131,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
    *
@@ -56334,8 +56320,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
    *
@@ -58079,11 +58064,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
@@ -58538,12 +58522,11 @@ export type CustomElementsSolidJs = {
    * Custom selectors for styling elements within the component.
    *
    * - `indicator`: The moving marker behind the selected item.
-   * - `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.
    * - `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
    *
@@ -60156,8 +60139,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.