@fusion.dev/helix 0.33.4 → 0.34.0

package/custom-elements.json

@@ -13154,8 +13154,28 @@
               "name": "--carousel-block-size"
             },
             {
-              "description": "Space between slides.",
-              "name": "--carousel-gap"
+              "description": "Space between slides. A sheet sets it and the component measures the run with it.",
+              "name": "--carousel-gap",
+              "inheritedFrom": {
+                "name": "HelixHeadlessCarousel",
+                "module": "src/carousel/root/carousel-root.ts"
+              }
+            },
+            {
+              "description": "The size one pane is laid out at. A sheet sets it and the component measures the run with it.",
+              "name": "--carousel-pane",
+              "inheritedFrom": {
+                "name": "HelixHeadlessCarousel",
+                "module": "src/carousel/root/carousel-root.ts"
+              }
+            },
+            {
+              "description": "How far short of a whole pixel the run ends, on the last slide alone, for a sheet to take up as `margin-inline-end`. See `runEnd`.",
+              "name": "--carousel-run-end",
+              "inheritedFrom": {
+                "name": "HelixHeadlessCarousel",
+                "module": "src/carousel/root/carousel-root.ts"
+              }
             }
           ],
           "members": [
@@ -13726,6 +13746,21 @@
                 "module": "src/carousel/root/carousel-root.ts"
               }
             },
+            {
+              "kind": "method",
+              "name": "runEnd",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string | typeof nothing"
+                }
+              },
+              "description": "How far short of a whole pixel the run of slides ends, for the last one.\n\n**The run has to end on a whole pixel, because a right-to-left track cannot\nreach a fraction.** Three across 692 makes the run 450.66 longer than the\ntrack. Chromium measures a right-to-left scroller from its far end and\nfloors that length, so the track stops at -450 where a left-to-right one\nrounds to 451, and two thirds of a pixel of the slide before stays at the\nleading edge. Ending on a whole pixel, the far end is one number both ways\nand the last place rests on it in both, so a swipe to the end stops there\ntoo.\n\n**Here rather than in a stylesheet, because the count is the component's.**\nThe arithmetic wants how many slides there are, and CSS can only ask\n`sibling-count()`, which is Chromium-only, evaluates to 0 through\n`::part()`, and needs a `:last-child` that `::part()` cannot carry either.\nSo the styled tier could correct its run and a consumer writing their own\nseveral-across sheet could not: measured in Chromium at three across, the\nheadless tier rested at 451 against -450 while the styled tier rested at\none number both ways. Published from here, one declaration reading this\ngets both tiers and any consumer to the same place.\n\n**WebKit takes the margin and does not need it**, which is the reason a\ncorrection written in CSS looked like enough. It has no `sibling-count()`\nat all, so nothing reached that engine, and its track rested on one number\nboth ways anyway. Measured with the margin in place, the same widths:\nevery resting place is the number it was without it.\n\n**On the last slide alone, which is what makes that one declaration\nenough.** A sheet writes `margin-inline-end: var(--carousel-run-end, 0px)`\nacross every pane and the fallback answers on all but the last, so nothing\nhas to select a slide by its position in the run.\n\n**A sheet says how wide a pane is and how far apart they sit, and this\nreads both back.** Set neither and the correction is invalid at\ncomputed-value time, which is the fallback rather than a broken margin. The\npercentage resolves where the value is used, on the last pane, so it is the\ntrack's content box and not the track's own containing block: the width the\nrun is actually measured against.\n\nHorizontal only. A vertical track scrolls the other axis, `scrollTop`\ncounts up from zero whatever the writing mode, and there is no far end to\nfloor.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessCarousel",
+                "module": "src/carousel/root/carousel-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "tier",
@@ -131846,6 +131881,20 @@
                 "module": "src/tree/root/tree-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "nesting",
+              "type": {
+                "text": "'heading' | 'peer' | 'subordinate' | undefined"
+              },
+              "description": "What a step inward means: nothing, a rank, or a heading over what follows.\n\nAll three answers are right, for different trees, which is why this is\nasked rather than decided. `peer` is a file explorer: every row is the same\nkind of thing, a name that may hold more names, and the indent alone says\nwhere one sits. `subordinate` is side navigation or a categorization: a\nsection holds pages and a facet holds values, so a step inward is a change\nof kind and the rows say so. `heading` is a documentation sidebar, where\nthe change is at the *parent*: \"Getting started\" is not a lesser page than\nthe pages under it and not a page at all, it is the name of the list, so\nthe branch takes the rail-heading treatment and its children stay at the\nsize every other row is.\n\n`subordinate` and `heading` are not the same answer said twice. One keys on\ndepth and quiets the child; the other keys on holding children and relabels\nthe parent, so a top-level leaf beside a branch is untouched by the first\nand untouched by the second for opposite reasons.\n\nOn the root rather than the item, because it is a fact about the tree. Set\nper row it would make a tree writable in which one branch ranks its\nchildren and the next does not, and it would have to be repeated on every\nrow to say one thing.\n\nHere rather than on the styled tier, because it is not about paint: with\nevery stylesheet deleted it is still true that this tree ranks its depths,\nthat this one heads them, and that a file explorer does neither. The styled\ntier steps a subordinate row once down the type scale and sets a heading\nbranch as a label; a headless consumer reads the attribute and the\n`--tree-level` each row carries, and draws either however they like.\n\n**Optional, with no default**, per the reflected-property rule: a value\nwritten here appears in the served markup of every tree anybody renders.\nThe resting state is the absence of the attribute, which is `peer`.",
+              "attribute": "nesting",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "HelixHeadlessTree",
+                "module": "src/tree/root/tree-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "watcher",
@@ -132430,6 +132479,18 @@
                 "name": "HelixHeadlessTree",
                 "module": "src/tree/root/tree-root.ts"
               }
+            },
+            {
+              "name": "nesting",
+              "type": {
+                "text": "'heading' | 'peer' | 'subordinate' | undefined"
+              },
+              "description": "What a step inward means: nothing, a rank, or a heading over what follows.\n\nAll three answers are right, for different trees, which is why this is\nasked rather than decided. `peer` is a file explorer: every row is the same\nkind of thing, a name that may hold more names, and the indent alone says\nwhere one sits. `subordinate` is side navigation or a categorization: a\nsection holds pages and a facet holds values, so a step inward is a change\nof kind and the rows say so. `heading` is a documentation sidebar, where\nthe change is at the *parent*: \"Getting started\" is not a lesser page than\nthe pages under it and not a page at all, it is the name of the list, so\nthe branch takes the rail-heading treatment and its children stay at the\nsize every other row is.\n\n`subordinate` and `heading` are not the same answer said twice. One keys on\ndepth and quiets the child; the other keys on holding children and relabels\nthe parent, so a top-level leaf beside a branch is untouched by the first\nand untouched by the second for opposite reasons.\n\nOn the root rather than the item, because it is a fact about the tree. Set\nper row it would make a tree writable in which one branch ranks its\nchildren and the next does not, and it would have to be repeated on every\nrow to say one thing.\n\nHere rather than on the styled tier, because it is not about paint: with\nevery stylesheet deleted it is still true that this tree ranks its depths,\nthat this one heads them, and that a file explorer does neither. The styled\ntier steps a subordinate row once down the type scale and sets a heading\nbranch as a label; a headless consumer reads the attribute and the\n`--tree-level` each row carries, and draws either however they like.\n\n**Optional, with no default**, per the reflected-property rule: a value\nwritten here appears in the served markup of every tree anybody renders.\nThe resting state is the absence of the attribute, which is `peer`.",
+              "fieldName": "nesting",
+              "inheritedFrom": {
+                "name": "HelixHeadlessTree",
+                "module": "src/tree/root/tree-root.ts"
+              }
             }
           ],
           "superclass": {
@@ -132470,6 +132531,10 @@
                 "description": "A node told its own depth, for a tree built from a flat list rather than by nesting.",
                 "slug": "flattened"
               },
+              {
+                "description": "Depth as a position, depth as a rank, and a branch that is a heading.",
+                "slug": "nesting"
+              },
               {
                 "description": "The same tree with a glyph on each node.",
                 "slug": "with-icons"

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

@@ -2,13 +2,13 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 --_carousel-bleed: var(--carousel-bleed, var(--helix-space-md));
 --_carousel-gap: var(--carousel-gap, var(--helix-space-md));
-
---_carousel-pane: calc(round(var(--_carousel-share) - 0.015625px, 0.03125px) + 0.015625px);
 --_carousel-per-view: 1;
 --_carousel-share: calc(
 (100% - (var(--_carousel-per-view) - 1) * var(--_carousel-gap)) /
 var(--_carousel-per-view)
 );
+
+--carousel-pane: calc(round(var(--_carousel-share) - 0.015625px, 0.03125px) + 0.015625px);
 }
 
 :host {
@@ -179,6 +179,8 @@ inline-size: 1em;
 }
 
 [part="track"] {
+
+--carousel-gap: var(--_carousel-gap);
 display: flex;
 gap: var(--_carousel-gap);
 overflow-x: auto;
@@ -204,21 +206,11 @@ scroll-snap-type: y mandatory;
 
 [part="slide"] {
 display: flex;
-flex: 0 0 var(--_carousel-pane);
+flex: 0 0 var(--carousel-pane);
+margin-inline-end: var(--carousel-run-end, 0px);
 scroll-snap-align: start;
 }
 
-:host(:not([orientation="vertical"])) [part="slide"]:last-child {
---_carousel-overrun: calc(
-sibling-count() *
-(var(--_carousel-pane) + var(--_carousel-gap)) -
-var(--_carousel-gap) -
-100%
-);
---_carousel-run-end: calc(round(var(--_carousel-overrun), 1px) - var(--_carousel-overrun));
-margin-inline-end: var(--_carousel-run-end);
-}
-
 [part="slide"] ::slotted(*) {
 flex: 1 1 0;
 min-block-size: 0;

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

@@ -22,7 +22,6 @@ import type { CSSResultGroup } from 'lit';
  * focus ring is not clipped by it. Defaults to enough for `--helix-shadow-md`, which reaches
  * 16px below the box it is on; a slide on `--helix-shadow-lg` reaches 44px and wants more.
  * @cssproperty --carousel-block-size - Height of a vertical track.
- * @cssproperty --carousel-gap - Space between slides.
  */
 export declare class HelixCarousel extends HelixHeadlessCarousel {
     /**

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

@@ -18,7 +18,7 @@ color: var(--helix-color-foreground-muted);
 cursor: pointer;
 display: flex;
 
-font-size: var(--helix-text-sm);
+font-size: var(--_tree-text, var(--helix-text-sm));
 gap: var(--helix-space-2xs);
 
 margin-block-end: var(--tree-gap, var(--helix-space-2xs));
@@ -50,13 +50,20 @@ var(--_tree-reserve, calc(var(--_tree-chevron) + var(--helix-space-2xs)))
 }
 
 [part="row"]:has([part="toggle"]) {
+color: var(--_tree-heading-ink, var(--helix-color-foreground-muted));
+font-size: var(--_tree-heading-text, var(--_tree-text, var(--helix-text-sm)));
 font-weight: var(--helix-weight-medium);
+letter-spacing: var(--_tree-heading-tracking, var(--helix-tracking-normal));
 }
 
 [part="row"]:not(:has([part="toggle"])) {
 font-weight: var(--helix-weight-medium);
 }
 
+slot[name="children"]::slotted(*) {
+--_tree-text: var(--_tree-nested-text, var(--helix-text-sm));
+}
+
 [part="row"]:hover {
 background-color: var(--helix-color-surface-raised);
 color: var(--helix-color-foreground);

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

@@ -20,6 +20,16 @@ flex-direction: column;
 --_tree-reserve: var(--helix-space-none);
 }
 
+:host([nesting="subordinate"]) {
+--_tree-nested-text: var(--helix-text-xs);
+}
+
+:host([nesting="heading"]) {
+--_tree-heading-ink: var(--helix-color-foreground-subtle);
+--_tree-heading-text: var(--helix-text-xs);
+--_tree-heading-tracking: var(--helix-tracking-wide);
+}
+
 :host([loading]) [part="tree"] {
 opacity: 0.5;
 }

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.33.4",
+  "version": "0.34.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.33.4",
-    "@fusion.dev/helix-headless": "0.33.4",
-    "@fusion.dev/helix-styles": "0.33.4"
+    "@fusion.dev/helix-core": "0.34.0",
+    "@fusion.dev/helix-headless": "0.34.0",
+    "@fusion.dev/helix-styles": "0.34.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.33.4",
-    "@fusion.dev/helix-testing": "0.33.4",
+    "@fusion.dev/helix-cem": "0.34.0",
+    "@fusion.dev/helix-testing": "0.34.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

@@ -18861,6 +18861,40 @@ Ignored once `active` is written. */
   defaultActive?: (HelixTree["defaultActive"]) | undefined;
   /** Accessible name for the tree. */
   label?: (HelixTree["label"]) | undefined;
+  /** What a step inward means: nothing, a rank, or a heading over what follows.
+
+All three answers are right, for different trees, which is why this is
+asked rather than decided. `peer` is a file explorer: every row is the same
+kind of thing, a name that may hold more names, and the indent alone says
+where one sits. `subordinate` is side navigation or a categorization: a
+section holds pages and a facet holds values, so a step inward is a change
+of kind and the rows say so. `heading` is a documentation sidebar, where
+the change is at the *parent*: "Getting started" is not a lesser page than
+the pages under it and not a page at all, it is the name of the list, so
+the branch takes the rail-heading treatment and its children stay at the
+size every other row is.
+
+`subordinate` and `heading` are not the same answer said twice. One keys on
+depth and quiets the child; the other keys on holding children and relabels
+the parent, so a top-level leaf beside a branch is untouched by the first
+and untouched by the second for opposite reasons.
+
+On the root rather than the item, because it is a fact about the tree. Set
+per row it would make a tree writable in which one branch ranks its
+children and the next does not, and it would have to be repeated on every
+row to say one thing.
+
+Here rather than on the styled tier, because it is not about paint: with
+every stylesheet deleted it is still true that this tree ranks its depths,
+that this one heads them, and that a file explorer does neither. The styled
+tier steps a subordinate row once down the type scale and sets a heading
+branch as a label; a headless consumer reads the attribute and the
+`--tree-level` each row carries, and draws either however they like.
+
+**Optional, with no default**, per the reflected-property rule: a value
+written here appears in the served markup of every tree anybody renders.
+The resting state is the absence of the attribute, which is `peer`. */
+  nesting?: (HelixTree["nesting"]) | undefined;
 
   /** Fired when an item is chosen. Dispatched by the item and listened for here, because the tree is what a consumer holds a reference to. Cancelable: refusing it takes the decision and nothing moves. */
   "onhelix-select"?: ((e: HelixTreeHelixSelectElementEvent) => void) | undefined;
@@ -18950,6 +18984,40 @@ Ignored once `active` is written. */
   "prop:defaultActive"?: (HelixTree["defaultActive"]) | undefined;
   /** Accessible name for the tree. */
   "prop:label"?: (HelixTree["label"]) | undefined;
+  /** What a step inward means: nothing, a rank, or a heading over what follows.
+
+All three answers are right, for different trees, which is why this is
+asked rather than decided. `peer` is a file explorer: every row is the same
+kind of thing, a name that may hold more names, and the indent alone says
+where one sits. `subordinate` is side navigation or a categorization: a
+section holds pages and a facet holds values, so a step inward is a change
+of kind and the rows say so. `heading` is a documentation sidebar, where
+the change is at the *parent*: "Getting started" is not a lesser page than
+the pages under it and not a page at all, it is the name of the list, so
+the branch takes the rail-heading treatment and its children stay at the
+size every other row is.
+
+`subordinate` and `heading` are not the same answer said twice. One keys on
+depth and quiets the child; the other keys on holding children and relabels
+the parent, so a top-level leaf beside a branch is untouched by the first
+and untouched by the second for opposite reasons.
+
+On the root rather than the item, because it is a fact about the tree. Set
+per row it would make a tree writable in which one branch ranks its
+children and the next does not, and it would have to be repeated on every
+row to say one thing.
+
+Here rather than on the styled tier, because it is not about paint: with
+every stylesheet deleted it is still true that this tree ranks its depths,
+that this one heads them, and that a file explorer does neither. The styled
+tier steps a subordinate row once down the type scale and sets a heading
+branch as a label; a headless consumer reads the attribute and the
+`--tree-level` each row carries, and draws either however they like.
+
+**Optional, with no default**, per the reflected-property rule: a value
+written here appears in the served markup of every tree anybody renders.
+The resting state is the absence of the attribute, which is `peer`. */
+  "prop:nesting"?: (HelixTree["nesting"]) | undefined;
   /** Fired when an item is chosen. Dispatched by the item and listened for here, because the tree is what a consumer holds a reference to. Cancelable: refusing it takes the decision and nothing moves. */
   "on:helix-select"?: ((e: HelixTreeHelixSelectElementEvent) => void) | undefined;
   /** Fired once the current one has moved, so the element already holds it. */
@@ -22041,7 +22109,9 @@ export type CustomElements = {
    *
    * - `--carousel-bleed`: Room inside the scroller so a slide's own shadow, border or focus ring is not clipped by it. Defaults to enough for `--helix-shadow-md`, which reaches 16px below the box it is on; a slide on `--helix-shadow-lg` reaches 44px and wants more. (default: `undefined`)
    * - `--carousel-block-size`: Height of a vertical track. (default: `undefined`)
-   * - `--carousel-gap`: Space between slides. (default: `undefined`)
+   * - `--carousel-gap`: Space between slides. A sheet sets it and the component measures the run with it. (default: `undefined`)
+   * - `--carousel-pane`: The size one pane is laid out at. A sheet sets it and the component measures the run with it. (default: `undefined`)
+   * - `--carousel-run-end`: How far short of a whole pixel the run ends, on the last slide alone, for a sheet to take up as `margin-inline-end`. See `runEnd`. (default: `undefined`)
    *
    * ## CSS Parts
    *
@@ -37715,6 +37785,39 @@ export type CustomElements = {
    *
    * Ignored once `active` is written.
    * - `label`: Accessible name for the tree.
+   * - `nesting`: What a step inward means: nothing, a rank, or a heading over what follows.
+   *
+   * All three answers are right, for different trees, which is why this is
+   * asked rather than decided. `peer` is a file explorer: every row is the same
+   * kind of thing, a name that may hold more names, and the indent alone says
+   * where one sits. `subordinate` is side navigation or a categorization: a
+   * section holds pages and a facet holds values, so a step inward is a change
+   * of kind and the rows say so. `heading` is a documentation sidebar, where
+   * the change is at the *parent*: "Getting started" is not a lesser page than
+   * the pages under it and not a page at all, it is the name of the list, so
+   * the branch takes the rail-heading treatment and its children stay at the
+   * size every other row is.
+   *
+   * `subordinate` and `heading` are not the same answer said twice. One keys on
+   * depth and quiets the child; the other keys on holding children and relabels
+   * the parent, so a top-level leaf beside a branch is untouched by the first
+   * and untouched by the second for opposite reasons.
+   *
+   * On the root rather than the item, because it is a fact about the tree. Set
+   * per row it would make a tree writable in which one branch ranks its
+   * children and the next does not, and it would have to be repeated on every
+   * row to say one thing.
+   *
+   * Here rather than on the styled tier, because it is not about paint: with
+   * every stylesheet deleted it is still true that this tree ranks its depths,
+   * that this one heads them, and that a file explorer does neither. The styled
+   * tier steps a subordinate row once down the type scale and sets a heading
+   * branch as a label; a headless consumer reads the attribute and the
+   * `--tree-level` each row carries, and draws either however they like.
+   *
+   * **Optional, with no default**, per the reflected-property rule: a value
+   * written here appears in the served markup of every tree anybody renders.
+   * The resting state is the absence of the attribute, which is `peer`.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -40862,7 +40965,9 @@ export type CustomElementsSolidJs = {
    *
    * - `--carousel-bleed`: Room inside the scroller so a slide's own shadow, border or focus ring is not clipped by it. Defaults to enough for `--helix-shadow-md`, which reaches 16px below the box it is on; a slide on `--helix-shadow-lg` reaches 44px and wants more. (default: `undefined`)
    * - `--carousel-block-size`: Height of a vertical track. (default: `undefined`)
-   * - `--carousel-gap`: Space between slides. (default: `undefined`)
+   * - `--carousel-gap`: Space between slides. A sheet sets it and the component measures the run with it. (default: `undefined`)
+   * - `--carousel-pane`: The size one pane is laid out at. A sheet sets it and the component measures the run with it. (default: `undefined`)
+   * - `--carousel-run-end`: How far short of a whole pixel the run ends, on the last slide alone, for a sheet to take up as `margin-inline-end`. See `runEnd`. (default: `undefined`)
    *
    * ## CSS Parts
    *
@@ -56881,6 +56986,39 @@ export type CustomElementsSolidJs = {
    *
    * Ignored once `active` is written.
    * - `label`: Accessible name for the tree.
+   * - `nesting`: What a step inward means: nothing, a rank, or a heading over what follows.
+   *
+   * All three answers are right, for different trees, which is why this is
+   * asked rather than decided. `peer` is a file explorer: every row is the same
+   * kind of thing, a name that may hold more names, and the indent alone says
+   * where one sits. `subordinate` is side navigation or a categorization: a
+   * section holds pages and a facet holds values, so a step inward is a change
+   * of kind and the rows say so. `heading` is a documentation sidebar, where
+   * the change is at the *parent*: "Getting started" is not a lesser page than
+   * the pages under it and not a page at all, it is the name of the list, so
+   * the branch takes the rail-heading treatment and its children stay at the
+   * size every other row is.
+   *
+   * `subordinate` and `heading` are not the same answer said twice. One keys on
+   * depth and quiets the child; the other keys on holding children and relabels
+   * the parent, so a top-level leaf beside a branch is untouched by the first
+   * and untouched by the second for opposite reasons.
+   *
+   * On the root rather than the item, because it is a fact about the tree. Set
+   * per row it would make a tree writable in which one branch ranks its
+   * children and the next does not, and it would have to be repeated on every
+   * row to say one thing.
+   *
+   * Here rather than on the styled tier, because it is not about paint: with
+   * every stylesheet deleted it is still true that this tree ranks its depths,
+   * that this one heads them, and that a file explorer does neither. The styled
+   * tier steps a subordinate row once down the type scale and sets a heading
+   * branch as a label; a headless consumer reads the attribute and the
+   * `--tree-level` each row carries, and draws either however they like.
+   *
+   * **Optional, with no default**, per the reflected-property rule: a value
+   * written here appears in the served markup of every tree anybody renders.
+   * The resting state is the absence of the attribute, which is `peer`.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -57855,8 +57993,12 @@ export type CustomCssProperties = {
   "--carousel-bleed"?: (string) | undefined;
   /** Height of a vertical track. */
   "--carousel-block-size"?: (string) | undefined;
-  /** Space between slides. */
+  /** Space between slides. A sheet sets it and the component measures the run with it. */
   "--carousel-gap"?: (string) | undefined;
+  /** The size one pane is laid out at. A sheet sets it and the component measures the run with it. */
+  "--carousel-pane"?: (string) | undefined;
+  /** How far short of a whole pixel the run ends, on the last slide alone, for a sheet to take up as `margin-inline-end`. See `runEnd`. */
+  "--carousel-run-end"?: (string) | undefined;
   /** Fill behind the composer. */
   "--chat-composer-background-color"?: (string) | undefined;
   /** The composer's edge, so a theme can remove it. */

package/types/vue.d.ts

@@ -9717,6 +9717,40 @@ Ignored once `active` is written. */
   defaultActive?: (HelixTree["defaultActive"]) | undefined;
   /** Accessible name for the tree. */
   label?: (HelixTree["label"]) | undefined;
+  /** What a step inward means: nothing, a rank, or a heading over what follows.
+
+All three answers are right, for different trees, which is why this is
+asked rather than decided. `peer` is a file explorer: every row is the same
+kind of thing, a name that may hold more names, and the indent alone says
+where one sits. `subordinate` is side navigation or a categorization: a
+section holds pages and a facet holds values, so a step inward is a change
+of kind and the rows say so. `heading` is a documentation sidebar, where
+the change is at the *parent*: "Getting started" is not a lesser page than
+the pages under it and not a page at all, it is the name of the list, so
+the branch takes the rail-heading treatment and its children stay at the
+size every other row is.
+
+`subordinate` and `heading` are not the same answer said twice. One keys on
+depth and quiets the child; the other keys on holding children and relabels
+the parent, so a top-level leaf beside a branch is untouched by the first
+and untouched by the second for opposite reasons.
+
+On the root rather than the item, because it is a fact about the tree. Set
+per row it would make a tree writable in which one branch ranks its
+children and the next does not, and it would have to be repeated on every
+row to say one thing.
+
+Here rather than on the styled tier, because it is not about paint: with
+every stylesheet deleted it is still true that this tree ranks its depths,
+that this one heads them, and that a file explorer does neither. The styled
+tier steps a subordinate row once down the type scale and sets a heading
+branch as a label; a headless consumer reads the attribute and the
+`--tree-level` each row carries, and draws either however they like.
+
+**Optional, with no default**, per the reflected-property rule: a value
+written here appears in the served markup of every tree anybody renders.
+The resting state is the absence of the attribute, which is `peer`. */
+  nesting?: (HelixTree["nesting"]) | undefined;
 };
 
 export type HelixTreeVueEvents = {
@@ -10277,8 +10311,12 @@ export type CustomCssProperties = {
   "--carousel-bleed"?: (string) | undefined;
   /** Height of a vertical track. */
   "--carousel-block-size"?: (string) | undefined;
-  /** Space between slides. */
+  /** Space between slides. A sheet sets it and the component measures the run with it. */
   "--carousel-gap"?: (string) | undefined;
+  /** The size one pane is laid out at. A sheet sets it and the component measures the run with it. */
+  "--carousel-pane"?: (string) | undefined;
+  /** How far short of a whole pixel the run ends, on the last slide alone, for a sheet to take up as `margin-inline-end`. See `runEnd`. */
+  "--carousel-run-end"?: (string) | undefined;
   /** Fill behind the composer. */
   "--chat-composer-background-color"?: (string) | undefined;
   /** The composer's edge, so a theme can remove it. */