@fusion.dev/helix-headless 0.31.0 → 0.32.0

package/custom-elements.json

@@ -33998,7 +33998,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A row that opens a page *contains* that page: its rows are this row's own\nchildren, assigned to the `page` slot. The tree is the structure, so there\nare no ids to wire and a consumer who moves a row has moved its page with it.\n\n**It renders one of three things**, and which one is the stack's business\nrather than its own. On the page showing, it is a row. Showing its own page,\nit contributes that page's rows and nothing else, because its row belongs to\nthe page above. On neither, it renders nothing at all: the rows are in the\nlight DOM and come back untouched, so there is no state to keep and nothing\nto hide with an attribute this element would have to write onto itself.\n\nChoosing is announced, never applied. The row dispatches and the stack\ndecides whether that means drilling in or choosing a command.",
+          "description": "A row that opens a page *contains* that page: its rows are this row's own\nchildren, assigned to the `page` slot. The tree is the structure, so there\nare no ids to wire and a consumer who moves a row has moved its page with it.\n\n**It renders one of three things**, and which one is the stack's business\nrather than its own. On the page showing, it is a row. Showing its own page,\nit contributes that page's rows and nothing else, because its row belongs to\nthe page above. On neither, it renders nothing at all: the rows are in the\nlight DOM and come back untouched, so there is no state to keep and nothing\nto hide with an attribute this element would have to write onto itself.\n\nChoosing is announced, never applied. The row dispatches and the stack\ndecides whether that means drilling in or choosing a command.\n\n**A row that opens a page says so**, with a caret after its words and\n`aria-haspopup`, the way `Menu` marks a row with a submenu: a row that goes\nsomewhere and a row that does something otherwise look the same until one is\npressed. Not on the server, which cannot see the children and so cannot know.",
           "name": "HelixHeadlessDrilldownItem",
           "cssParts": [
             {
@@ -34008,6 +34008,10 @@
             {
               "description": "The words.",
               "name": "label"
+            },
+            {
+              "description": "The caret at the end of a row that opens a page, after the `end` slot. A caret points, so a sheet mirrors it in a right-to-left document.",
+              "name": "mark"
             }
           ],
           "slots": [
@@ -34077,6 +34081,23 @@
               "description": "Identifies the row to whatever is listening.",
               "attribute": "value"
             },
+            {
+              "kind": "field",
+              "name": "page",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether anything is slotted into `page`.\n\nState rather than a getter over `children`, for the reason `Menu.Item`\nbacks `hasSubmenu` the same way: a getter is read during `render()` with\nnothing to re-read it, so a page a framework fills after the row's first\nrender would open with no caret on the row that leads to it."
+            },
+            {
+              "kind": "field",
+              "name": "readPage",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Re-reads whether a page is slotted, from whichever `page` slot is current.\n\nBound in the template, on both of them. The row and the page it opens each\nrender a `slot[name=\"page\"]`, and moving between them makes Lit build a new\nslot and throw the old one away, which fires on its way out with nothing\nassigned: a listener on the discarded one would clear the caret on every row\nthat has been drilled into and back out of. `Menu.Item.readSubmenu` carries\nthe same note."
+            },
             {
               "kind": "method",
               "name": "focusItem",
@@ -84698,11 +84719,11 @@
               "kind": "field",
               "name": "align",
               "type": {
-                "text": "'center' | 'end' | 'start' | ''"
+                "text": "'center' | 'end' | 'start' | undefined"
               },
-              "default": "''",
-              "description": "Which edge the values line up against.\n\n`end` is what a column of numbers wants, so digits of the same magnitude sit\nabove each other. Left unset the cell inherits the table's own alignment,\nwhich is `start` for text in either writing direction.",
-              "attribute": "align"
+              "description": "Which edge the values line up against.\n\n`end` is what a column of numbers wants, so digits of the same magnitude sit\nabove each other. Left unset the cell inherits the table's own alignment,\nwhich is `start` for text in either writing direction. `helix-data-table`\naligns the cells it draws; a `helix-table`'s cells are markup the consumer\nwrote, and align as the consumer styles them. The heading is this element's\nown, and `@fusion.dev/helix` sets it to the same edge in either table.\n\n**Reflected, because the heading is drawn by a stylesheet and has no other\nway to learn it.** Set as a property, which is how React sets it, an\nunreflected `align` left no attribute to select on, so the heading stayed at\nthe start over a column of digits set to the end. It is the author's\ndeclaration and nothing moves it afterwards, so an attribute cannot come to\ndisagree with the element, which is the reason `open` records a custom\nstate instead. No default, so an unset column writes nothing onto its host.",
+              "attribute": "align",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -85285,10 +85306,9 @@
             {
               "name": "align",
               "type": {
-                "text": "'center' | 'end' | 'start' | ''"
+                "text": "'center' | 'end' | 'start' | undefined"
               },
-              "default": "''",
-              "description": "Which edge the values line up against.\n\n`end` is what a column of numbers wants, so digits of the same magnitude sit\nabove each other. Left unset the cell inherits the table's own alignment,\nwhich is `start` for text in either writing direction.",
+              "description": "Which edge the values line up against.\n\n`end` is what a column of numbers wants, so digits of the same magnitude sit\nabove each other. Left unset the cell inherits the table's own alignment,\nwhich is `start` for text in either writing direction. `helix-data-table`\naligns the cells it draws; a `helix-table`'s cells are markup the consumer\nwrote, and align as the consumer styles them. The heading is this element's\nown, and `@fusion.dev/helix` sets it to the same edge in either table.\n\n**Reflected, because the heading is drawn by a stylesheet and has no other\nway to learn it.** Set as a property, which is how React sets it, an\nunreflected `align` left no attribute to select on, so the heading stayed at\nthe start over a column of digits set to the end. It is the author's\ndeclaration and nothing moves it afterwards, so an attribute cannot come to\ndisagree with the element, which is the reason `open` records a custom\nstate instead. No default, so an unset column writes nothing onto its host.",
               "fieldName": "align"
             },
             {
@@ -100457,7 +100477,7 @@
               "name": "floating",
               "privacy": "private",
               "readonly": true,
-              "default": "new PopoverController(this, { anchor: () => this.target, arrow: () => this.partNamed('arrow'), /* Clear of the light, measured to the point of the arrow. The tour lights `spotlight-padding` around the target and the arrow reaches `n / sqrt(2)` past the panel's edge, and with no offset the panel sat on the target itself, over the lit margin, with its point 5.7px into what it pointed at. `offsetWidth` rather than a rect, which reports the rotated box. */ offset: () => { const tour = this.parentElement as (HTMLElement & { spotlightPadding?: number }) | null return ( (tour?.spotlightPadding ?? 0) + (this.partNamed('arrow')?.offsetWidth ?? 0) / Math.SQRT2 ) }, /* A press outside does not end a tour, and this is the decision rather than a stub. Everywhere else a surface closes on an outside press because pressing elsewhere means the reader is finished with it. Here elsewhere is the thing being pointed at: the scrim lets the pointer through on purpose, so the first press a reader makes on the button the tour is describing would be the press that ends the tour. Leaving is the skip control and `Escape`, both of which say so. */ onDismiss: () => {}, placement: () => this.placement, surface: () => this.partNamed('bubble'), })"
+              "default": "new PopoverController(this, { anchor: () => this.target, arrow: () => this.partNamed('arrow'), /* Clear of the light, measured to the point of the arrow. The tour lights `spotlight-padding` around the target and the arrow reaches `n / sqrt(2)` past the panel's edge, and with no offset the panel sat on the target itself, over the lit margin, with its point 5.7px into what it pointed at. `offsetWidth` rather than a rect, which reports the rotated box. */ offset: () => { const tour = this.parentElement as (HTMLElement & { spotlightPadding?: number }) | null return ( (tour?.spotlightPadding ?? 0) + (this.partNamed('arrow')?.offsetWidth ?? 0) / Math.SQRT2 ) }, /* A press outside does not end a tour, and this is the decision rather than a stub. Everywhere else a surface closes on an outside press because pressing elsewhere means the reader is finished with it. Here elsewhere is the thing being pointed at: the scrim lets the pointer through on purpose, so the first press a reader makes on the button the tour is describing would be the press that ends the tour. Leaving is the skip control and `Escape`, both of which say so. */ onDismiss: () => {}, /* The side the panel landed on, which is not always `placement`: a stop with no room on the side it asked for is moved. The styled tier points its arrow from `data-placement` on the panel, inside this shadow root; a stylesheet outside cannot follow `::part(arrow)` with an attribute, and reading the stop's own `placement` instead pointed the arrow from the side that was asked for, or from below wherever React had set it as a property and there was no attribute to read. */ onPlace: (placement) => { const side = placement.split('-')[0] this.toggleState('placed-bottom', side === 'bottom') this.toggleState('placed-left', side === 'left') this.toggleState('placed-right', side === 'right') this.toggleState('placed-top', side === 'top') }, placement: () => this.placement, surface: () => this.partNamed('bubble'), })"
             },
             {
               "kind": "method",
@@ -100907,6 +100927,32 @@
               "fieldName": "skipLabel"
             }
           ],
+          "cssStates": [
+            {
+              "description": "While the panel sits below its target.",
+              "name": "placed-bottom"
+            },
+            {
+              "description": "While the panel sits to the left of its target.",
+              "name": "placed-left"
+            },
+            {
+              "description": "While the panel sits to the right of its target.",
+              "name": "placed-right"
+            },
+            {
+              "description": "While the panel sits above its target.",
+              "name": "placed-top"
+            },
+            {
+              "description": "Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.",
+              "name": "settled",
+              "inheritedFrom": {
+                "name": "HelixElement",
+                "module": "src/helix-element/helix-element.ts"
+              }
+            }
+          ],
           "superclass": {
             "name": "HelixElement",
             "package": "@fusion.dev/helix-core"
@@ -100923,16 +100969,6 @@
           },
           "tagName": "helix-headless-tour-stop",
           "customElement": true,
-          "cssStates": [
-            {
-              "description": "Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.",
-              "name": "settled",
-              "inheritedFrom": {
-                "name": "HelixElement",
-                "module": "src/helix-element/helix-element.ts"
-              }
-            }
-          ],
           "modulePath": "src/tour/stop/tour-stop.ts",
           "definitionPath": "src/tour/stop/tour-stop.ts"
         }

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

@@ -133,15 +133,17 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         }
         const vertical = this.orientation === 'vertical';
         const target = this.edgeOf(slide, track, this.bleed(track));
+        const at = vertical ? { top: target } : { left: target };
         if (Math.abs(target - (vertical ? track.scrollTop : track.scrollLeft)) < 1) {
+            if (this.settling) {
+                track.scrollTo({ behavior: 'instant', ...at });
+                this.settling = false;
+            }
             return;
         }
         const still = globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
         this.settling = true;
-        track.scrollTo({
-            behavior: still ? 'instant' : 'smooth',
-            ...(vertical ? { top: target } : { left: target }),
-        });
+        track.scrollTo({ behavior: still ? 'instant' : 'smooth', ...at });
     }
     stop() {
         this.stopped = true;

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

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { nothing, type TemplateResult } from 'lit';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary One row of a drill-down, which may hold a page of its own.
  *
@@ -18,6 +18,11 @@ import { nothing, type TemplateResult } from 'lit';
  * Choosing is announced, never applied. The row dispatches and the stack
  * decides whether that means drilling in or choosing a command.
  *
+ * **A row that opens a page says so**, with a caret after its words and
+ * `aria-haspopup`, the way `Menu` marks a row with a submenu: a row that goes
+ * somewhere and a row that does something otherwise look the same until one is
+ * pressed. Not on the server, which cannot see the children and so cannot know.
+ *
  * @since 0.1.0
  * @status experimental
  * @aliases Panel item, Drill row
@@ -32,6 +37,7 @@ import { nothing, type TemplateResult } from 'lit';
  *
  * @csspart item - The row itself.
  * @csspart label - The words.
+ * @csspart mark - The caret at the end of a row that opens a page, after the `end` slot. A caret points, so a sheet mirrors it in a right-to-left document.
  */
 export declare class HelixHeadlessDrilldownItem extends HelixElement {
     /**
@@ -74,6 +80,35 @@ export declare class HelixHeadlessDrilldownItem extends HelixElement {
      * Identifies the row to whatever is listening.
      */
     value: string;
+    /**
+     * Whether anything is slotted into `page`.
+     *
+     * State rather than a getter over `children`, for the reason `Menu.Item`
+     * backs `hasSubmenu` the same way: a getter is read during `render()` with
+     * nothing to re-read it, so a page a framework fills after the row's first
+     * render would open with no caret on the row that leads to it.
+     */
+    private page;
+    /**
+     * Reads the children before each render, where they can be known.
+     *
+     * Not on the server, where there are none to read, nor while hydrating what
+     * one sent, whose row carried no caret. `finishHydration` asks for the read
+     * that skipped.
+     */
+    protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(changed: PropertyValues): void;
+    /**
+     * Re-reads whether a page is slotted, from whichever `page` slot is current.
+     *
+     * Bound in the template, on both of them. The row and the page it opens each
+     * render a `slot[name="page"]`, and moving between them makes Lit build a new
+     * slot and throw the old one away, which fires on its way out with nothing
+     * assigned: a listener on the discarded one would clear the caret on every row
+     * that has been drilled into and back out of. `Menu.Item.readSubmenu` carries
+     * the same note.
+     */
+    private readonly readPage;
     /** Moves focus onto the row itself. */
     focusItem(): void;
     /** Announces that this row was chosen. */

package/dist/drilldown/item/drilldown-item.js

@@ -5,8 +5,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, HelixElement, HelixSelectEvent } from '@fusion.dev/helix-core';
+import { caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixElement {
     constructor() {
         super(...arguments);
@@ -16,6 +18,21 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
         this.onPage = true;
         this.showingPage = false;
         this.value = '';
+        this.page = false;
+        this.readPage = () => {
+            const slot = this.renderRoot.querySelector('slot[name="page"]');
+            this.page = (slot?.assignedElements().length ?? 0) > 0;
+        };
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        if (this.childrenKnown) {
+            this.page = this.knownChildren.some((child) => child.slot === 'page');
+        }
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
     }
     focusItem() {
         this.partNamed('item')?.focus();
@@ -28,7 +45,7 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
     }
     render() {
         if (this.showingPage) {
-            return html `<slot name="page"></slot>`;
+            return html `<slot name="page" @slotchange=${this.readPage}></slot>`;
         }
         if (!this.onPage) {
             return nothing;
@@ -38,13 +55,20 @@ let HelixHeadlessDrilldownItem = class HelixHeadlessDrilldownItem extends HelixE
       type="button"
       role="menuitem"
       aria-disabled=${this.disabled ? 'true' : nothing}
+      aria-haspopup=${this.page ? 'menu' : nothing}
       tabindex=${this.focusable ? '0' : '-1'}
       @click=${() => this.select()}
     >
       <slot name="start"></slot>
       <span part="label"><slot></slot></span>
       <slot name="end"></slot>
-    </button>`;
+      ${this.page
+            ? html `<svg part="mark" fill="currentColor" viewBox=${caretRight.viewBox} aria-hidden="true">
+              ${unsafeSVG(caretRight.content)}
+            </svg>`
+            : nothing}
+    </button>
+    <div hidden><slot name="page" @slotchange=${this.readPage}></slot></div>`;
     }
 };
 __decorate([
@@ -62,6 +86,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessDrilldownItem.prototype, "value", void 0);
+__decorate([
+    state()
+], HelixHeadlessDrilldownItem.prototype, "page", void 0);
 HelixHeadlessDrilldownItem = __decorate([
     customElement('helix-headless-drilldown-item')
 ], HelixHeadlessDrilldownItem);

package/dist/table/column/table-column.d.ts

@@ -79,9 +79,20 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
      *
      * `end` is what a column of numbers wants, so digits of the same magnitude sit
      * above each other. Left unset the cell inherits the table's own alignment,
-     * which is `start` for text in either writing direction.
+     * which is `start` for text in either writing direction. `helix-data-table`
+     * aligns the cells it draws; a `helix-table`'s cells are markup the consumer
+     * wrote, and align as the consumer styles them. The heading is this element's
+     * own, and `@fusion.dev/helix` sets it to the same edge in either table.
+     *
+     * **Reflected, because the heading is drawn by a stylesheet and has no other
+     * way to learn it.** Set as a property, which is how React sets it, an
+     * unreflected `align` left no attribute to select on, so the heading stayed at
+     * the start over a column of digits set to the end. It is the author's
+     * declaration and nothing moves it afterwards, so an attribute cannot come to
+     * disagree with the element, which is the reason `open` records a custom
+     * state instead. No default, so an unset column writes nothing onto its host.
      */
-    align: 'center' | 'end' | 'start' | '';
+    align?: 'center' | 'end' | 'start';
     /**
      * How to read the cell, where the field alone will not do.
      *

package/dist/table/column/table-column.js

@@ -29,7 +29,6 @@ export const at = (row, path) => {
 let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixElement {
     constructor() {
         super(...arguments);
-        this.align = '';
         this.cell = undefined;
         this.compare = undefined;
         this.field = '';
@@ -172,7 +171,7 @@ let HelixHeadlessTableColumn = class HelixHeadlessTableColumn extends HelixEleme
     }
 };
 __decorate([
-    property()
+    property({ reflect: true })
 ], HelixHeadlessTableColumn.prototype, "align", void 0);
 __decorate([
     property({ attribute: false })

package/dist/tour/stop/tour-stop.d.ts

@@ -54,6 +54,11 @@ import '../../button/index.js';
  * @csspart next-button - The inner control.
  * @csspart skip - The control that leaves the tour.
  * @csspart skip-button - The inner control.
+ *
+ * @cssstate placed-bottom - While the panel sits below its target.
+ * @cssstate placed-left - While the panel sits to the left of its target.
+ * @cssstate placed-right - While the panel sits to the right of its target.
+ * @cssstate placed-top - While the panel sits above its target.
  */
 export declare class HelixHeadlessTourStop extends HelixElement {
     /**

package/dist/tour/stop/tour-stop.js

@@ -28,6 +28,13 @@ let HelixHeadlessTourStop = class HelixHeadlessTourStop extends HelixElement {
                 return ((tour?.spotlightPadding ?? 0) + (this.partNamed('arrow')?.offsetWidth ?? 0) / Math.SQRT2);
             },
             onDismiss: () => { },
+            onPlace: (placement) => {
+                const side = placement.split('-')[0];
+                this.toggleState('placed-bottom', side === 'bottom');
+                this.toggleState('placed-left', side === 'left');
+                this.toggleState('placed-right', side === 'right');
+                this.toggleState('placed-top', side === 'top');
+            },
             placement: () => this.placement,
             surface: () => this.partNamed('bubble'),
         });

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.31.0",
+  "version": "0.32.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.31.0",
-    "@fusion.dev/helix-icons": "0.31.0",
+    "@fusion.dev/helix-core": "0.32.0",
+    "@fusion.dev/helix-icons": "0.32.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.31.0",
-    "@fusion.dev/helix-testing": "0.31.0",
+    "@fusion.dev/helix-cem": "0.32.0",
+    "@fusion.dev/helix-testing": "0.32.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

@@ -13321,7 +13321,18 @@ export type HelixHeadlessTableColumnProps = {
 
 `end` is what a column of numbers wants, so digits of the same magnitude sit
 above each other. Left unset the cell inherits the table's own alignment,
-which is `start` for text in either writing direction. */
+which is `start` for text in either writing direction. `helix-data-table`
+aligns the cells it draws; a `helix-table`'s cells are markup the consumer
+wrote, and align as the consumer styles them. The heading is this element's
+own, and `@fusion.dev/helix` sets it to the same edge in either table.
+
+**Reflected, because the heading is drawn by a stylesheet and has no other
+way to learn it.** Set as a property, which is how React sets it, an
+unreflected `align` left no attribute to select on, so the heading stayed at
+the start over a column of digits set to the end. It is the author's
+declaration and nothing moves it afterwards, so an attribute cannot come to
+disagree with the element, which is the reason `open` records a custom
+state instead. No default, so an unset column writes nothing onto its host. */
   align?: (HelixHeadlessTableColumn["align"]) | undefined;
   /** The key this column reads out of a row.
 
@@ -13399,7 +13410,18 @@ export type HelixHeadlessTableColumnSolidJsProps = {
 
 `end` is what a column of numbers wants, so digits of the same magnitude sit
 above each other. Left unset the cell inherits the table's own alignment,
-which is `start` for text in either writing direction. */
+which is `start` for text in either writing direction. `helix-data-table`
+aligns the cells it draws; a `helix-table`'s cells are markup the consumer
+wrote, and align as the consumer styles them. The heading is this element's
+own, and `@fusion.dev/helix` sets it to the same edge in either table.
+
+**Reflected, because the heading is drawn by a stylesheet and has no other
+way to learn it.** Set as a property, which is how React sets it, an
+unreflected `align` left no attribute to select on, so the heading stayed at
+the start over a column of digits set to the end. It is the author's
+declaration and nothing moves it afterwards, so an attribute cannot come to
+disagree with the element, which is the reason `open` records a custom
+state instead. No default, so an unset column writes nothing onto its host. */
   "prop:align"?: (HelixHeadlessTableColumn["align"]) | undefined;
   /** The key this column reads out of a row.
 
@@ -22219,6 +22241,11 @@ export type CustomElements = {
    * Choosing is announced, never applied. The row dispatches and the stack
    * decides whether that means drilling in or choosing a command.
    *
+   * **A row that opens a page says so**, with a caret after its words and
+   * `aria-haspopup`, the way `Menu` marks a row with a submenu: a row that goes
+   * somewhere and a row that does something otherwise look the same until one is
+   * pressed. Not on the server, which cannot see the children and so cannot know.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -22289,6 +22316,7 @@ export type CustomElements = {
    *
    * - `item`: The row itself.
    * - `label`: The words.
+   * - `mark`: The caret at the end of a row that opens a page, after the `end` slot. A caret points, so a sheet mirrors it in a right-to-left document.
    *
    * ## CSS States
    *
@@ -30329,7 +30357,18 @@ export type CustomElements = {
    *
    * `end` is what a column of numbers wants, so digits of the same magnitude sit
    * above each other. Left unset the cell inherits the table's own alignment,
-   * which is `start` for text in either writing direction.
+   * which is `start` for text in either writing direction. `helix-data-table`
+   * aligns the cells it draws; a `helix-table`'s cells are markup the consumer
+   * wrote, and align as the consumer styles them. The heading is this element's
+   * own, and `@fusion.dev/helix` sets it to the same edge in either table.
+   *
+   * **Reflected, because the heading is drawn by a stylesheet and has no other
+   * way to learn it.** Set as a property, which is how React sets it, an
+   * unreflected `align` left no attribute to select on, so the heading stayed at
+   * the start over a column of digits set to the end. It is the author's
+   * declaration and nothing moves it afterwards, so an attribute cannot come to
+   * disagree with the element, which is the reason `open` records a custom
+   * state instead. No default, so an unset column writes nothing onto its host.
    * - `field`: The key this column reads out of a row.
    *
    * Dot paths resolve, so `field="owner.name"` reads a nested value: a result
@@ -32789,6 +32828,10 @@ export type CustomElements = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `placed-bottom`: While the panel sits below its target.
+   * - `placed-left`: While the panel sits to the left of its target.
+   * - `placed-right`: While the panel sits to the right of its target.
+   * - `placed-top`: While the panel sits above its target.
    * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-headless-tour-stop": Partial<
@@ -39211,6 +39254,11 @@ export type CustomElementsSolidJs = {
    * Choosing is announced, never applied. The row dispatches and the stack
    * decides whether that means drilling in or choosing a command.
    *
+   * **A row that opens a page says so**, with a caret after its words and
+   * `aria-haspopup`, the way `Menu` marks a row with a submenu: a row that goes
+   * somewhere and a row that does something otherwise look the same until one is
+   * pressed. Not on the server, which cannot see the children and so cannot know.
+   *
    * ## Attributes & Properties
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
@@ -39281,6 +39329,7 @@ export type CustomElementsSolidJs = {
    *
    * - `item`: The row itself.
    * - `label`: The words.
+   * - `mark`: The caret at the end of a row that opens a page, after the `end` slot. A caret points, so a sheet mirrors it in a right-to-left document.
    *
    * ## CSS States
    *
@@ -47463,7 +47512,18 @@ export type CustomElementsSolidJs = {
    *
    * `end` is what a column of numbers wants, so digits of the same magnitude sit
    * above each other. Left unset the cell inherits the table's own alignment,
-   * which is `start` for text in either writing direction.
+   * which is `start` for text in either writing direction. `helix-data-table`
+   * aligns the cells it draws; a `helix-table`'s cells are markup the consumer
+   * wrote, and align as the consumer styles them. The heading is this element's
+   * own, and `@fusion.dev/helix` sets it to the same edge in either table.
+   *
+   * **Reflected, because the heading is drawn by a stylesheet and has no other
+   * way to learn it.** Set as a property, which is how React sets it, an
+   * unreflected `align` left no attribute to select on, so the heading stayed at
+   * the start over a column of digits set to the end. It is the author's
+   * declaration and nothing moves it afterwards, so an attribute cannot come to
+   * disagree with the element, which is the reason `open` records a custom
+   * state instead. No default, so an unset column writes nothing onto its host.
    * - `field`: The key this column reads out of a row.
    *
    * Dot paths resolve, so `field="owner.name"` reads a nested value: a result
@@ -49972,6 +50032,10 @@ export type CustomElementsSolidJs = {
    *
    * These can be used to apply styling when a component is in a given state.
    *
+   * - `placed-bottom`: While the panel sits below its target.
+   * - `placed-left`: While the panel sits to the left of its target.
+   * - `placed-right`: While the panel sits to the right of its target.
+   * - `placed-top`: While the panel sits above its target.
    * - `settled`: Set a frame after the first render. Transitions are held off until it is, so an element never animates its own arrival.
    */
   "helix-headless-tour-stop": Partial<

package/types/vue.d.ts

@@ -6834,7 +6834,18 @@ export type HelixHeadlessTableColumnVueProps = {
 
 `end` is what a column of numbers wants, so digits of the same magnitude sit
 above each other. Left unset the cell inherits the table's own alignment,
-which is `start` for text in either writing direction. */
+which is `start` for text in either writing direction. `helix-data-table`
+aligns the cells it draws; a `helix-table`'s cells are markup the consumer
+wrote, and align as the consumer styles them. The heading is this element's
+own, and `@fusion.dev/helix` sets it to the same edge in either table.
+
+**Reflected, because the heading is drawn by a stylesheet and has no other
+way to learn it.** Set as a property, which is how React sets it, an
+unreflected `align` left no attribute to select on, so the heading stayed at
+the start over a column of digits set to the end. It is the author's
+declaration and nothing moves it afterwards, so an attribute cannot come to
+disagree with the element, which is the reason `open` records a custom
+state instead. No default, so an unset column writes nothing onto its host. */
   align?: (HelixHeadlessTableColumn["align"]) | undefined;
   /** The key this column reads out of a row.
 
@@ -9020,7 +9031,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeadlessDrawerVueProps,
     HelixHeadlessDrawerVueEvents
   >;
-  /** A row that opens a page *contains* that page: its rows are this row's own children, assigned to the 'page' slot. The tree is the structure, so there are no ids to wire and a consumer who moves a row has moved its page with it.  **It renders one of three things**, and which one is the stack's business rather than its own. On the page showing, it is a row. Showing its own page, it contributes that page's rows and nothing else, because its row belongs to the page above. On neither, it renders nothing at all: the rows are in the light DOM and come back untouched, so there is no state to keep and nothing to hide with an attribute this element would have to write onto itself.  Choosing is announced, never applied. The row dispatches and the stack decides whether that means drilling in or choosing a command. */
+  /** A row that opens a page *contains* that page: its rows are this row's own children, assigned to the 'page' slot. The tree is the structure, so there are no ids to wire and a consumer who moves a row has moved its page with it.  **It renders one of three things**, and which one is the stack's business rather than its own. On the page showing, it is a row. Showing its own page, it contributes that page's rows and nothing else, because its row belongs to the page above. On neither, it renders nothing at all: the rows are in the light DOM and come back untouched, so there is no state to keep and nothing to hide with an attribute this element would have to write onto itself.  Choosing is announced, never applied. The row dispatches and the stack decides whether that means drilling in or choosing a command.  **A row that opens a page says so**, with a caret after its words and 'aria-haspopup', the way 'Menu' marks a row with a submenu: a row that goes somewhere and a row that does something otherwise look the same until one is pressed. Not on the server, which cannot see the children and so cannot know. */
   "helix-headless-drilldown-item": DefineCustomElement<
     HelixHeadlessDrilldownItem,
     HelixHeadlessDrilldownItemVueProps,