@fusion.dev/helix 0.31.0 → 0.32.0

package/custom-elements.json

@@ -42602,6 +42602,31 @@
                 "module": "src/drilldown/item/drilldown-item.ts"
               }
             },
+            {
+              "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.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessDrilldownItem",
+                "module": "src/drilldown/item/drilldown-item.ts"
+              }
+            },
+            {
+              "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.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessDrilldownItem",
+                "module": "src/drilldown/item/drilldown-item.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "focusItem",
@@ -43030,6 +43055,14 @@
                 "name": "HelixHeadlessDrilldownItem",
                 "module": "src/drilldown/item/drilldown-item.ts"
               }
+            },
+            {
+              "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",
+              "inheritedFrom": {
+                "name": "HelixHeadlessDrilldownItem",
+                "module": "src/drilldown/item/drilldown-item.ts"
+              }
             }
           ],
           "attributes": [
@@ -109478,11 +109511,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.",
+              "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,
               "inheritedFrom": {
                 "name": "HelixHeadlessTableColumn",
                 "module": "src/table/column/table-column.ts"
@@ -110222,10 +110255,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",
               "inheritedFrom": {
                 "name": "HelixHeadlessTableColumn",
@@ -128514,7 +128546,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'), })",
               "inheritedFrom": {
                 "name": "HelixHeadlessTourStop",
                 "module": "src/tour/stop/tour-stop.ts"
@@ -129119,6 +129151,38 @@
             }
           ],
           "cssStates": [
+            {
+              "description": "While the panel sits below its target.",
+              "name": "placed-bottom",
+              "inheritedFrom": {
+                "name": "HelixHeadlessTourStop",
+                "module": "src/tour/stop/tour-stop.ts"
+              }
+            },
+            {
+              "description": "While the panel sits to the left of its target.",
+              "name": "placed-left",
+              "inheritedFrom": {
+                "name": "HelixHeadlessTourStop",
+                "module": "src/tour/stop/tour-stop.ts"
+              }
+            },
+            {
+              "description": "While the panel sits to the right of its target.",
+              "name": "placed-right",
+              "inheritedFrom": {
+                "name": "HelixHeadlessTourStop",
+                "module": "src/tour/stop/tour-stop.ts"
+              }
+            },
+            {
+              "description": "While the panel sits above its target.",
+              "name": "placed-top",
+              "inheritedFrom": {
+                "name": "HelixHeadlessTourStop",
+                "module": "src/tour/stop/tour-stop.ts"
+              }
+            },
             {
               "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",

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

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import type { CSSResultGroup, TemplateResult } from 'lit';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 /**
  * @summary A lit, drifting background, drawn from the token layer.
  *
@@ -265,7 +265,7 @@ export declare class HelixAura extends HelixElement {
      */
     private openBy;
     protected render(): TemplateResult;
-    protected firstUpdated(): void;
+    protected firstUpdated(changed: PropertyValues): void;
     private start;
     /**
      * The context and the program, from whatever canvas can still give one.

package/dist/aura/root/aura-root.js

@@ -129,7 +129,8 @@ let HelixAura = class HelixAura extends HelixElement {
     render() {
         return html `<canvas part="canvas" aria-hidden="true"></canvas>`;
     }
-    firstUpdated() {
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
         this.start();
     }
     start() {

package/dist/data-table/root/data-table-root.css.js

@@ -73,15 +73,11 @@ border-block-end-color: transparent;
 }
 
 ::slotted(helix-table-column) {
-border-block-end: var(--helix-border-thin) solid
-var(--data-table-rule-color, var(--helix-color-border));
-color: var(--data-table-heading-color, var(--helix-color-foreground-subtle));
-font-family: var(--helix-font-sans);
-font-size: var(--data-table-text, var(--helix-text-sm));
-font-weight: var(--helix-weight-medium);
-padding-block: var(--data-table-padding-block, var(--helix-space-sm));
-padding-inline: var(--data-table-padding-inline, var(--helix-space-sm));
-text-align: start;
+--_table-heading-color: var(--data-table-heading-color);
+--_table-heading-padding-block: var(--data-table-padding-block);
+--_table-heading-padding-inline: var(--data-table-padding-inline);
+--_table-heading-rule-color: var(--data-table-rule-color);
+--_table-heading-text: var(--data-table-text);
 }
 
 ::slotted(helix-table-column[sortable]) {
@@ -144,10 +140,19 @@ overscroll-behavior: contain;
 }
 
 :host([windowed]) ::slotted(helix-table-column) {
+--_table-heading-background-color: var(
+--data-table-heading-background-color,
+var(--helix-color-background)
+);
+--_table-heading-layer: var(--helix-layer-sticky);
+--_table-heading-position: sticky;
+}
+
+:host([windowed]) [part="select-all"] {
 background-color: var(--data-table-heading-background-color, var(--helix-color-background));
 inset-block-start: 0;
 position: sticky;
-z-index: 1;
+z-index: var(--helix-layer-sticky);
 }
 
 [part="before"],

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

@@ -27,6 +27,17 @@ text-overflow: ellipsis;
 white-space: nowrap;
 }
 
+[part="mark"] {
+block-size: var(--helix-size-icon-tight);
+color: var(--helix-color-foreground-subtle);
+flex: none;
+inline-size: var(--helix-size-icon-tight);
+}
+
+:host(:dir(rtl)) [part="mark"] {
+scale: -1 1;
+}
+
 :host(:not([disabled])) [part="item"]:hover {
 background-color: var(
 --drilldown-item-hover-color,

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

@@ -121,7 +121,7 @@ export declare class HelixOrb extends HelixElement {
     private last;
     protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;
-    protected firstUpdated(): void;
+    protected firstUpdated(changed: PropertyValues): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private start;

package/dist/orb/root/orb-root.js

@@ -86,7 +86,8 @@ let HelixOrb = class HelixOrb extends HelixElement {
     render() {
         return html `<canvas part="canvas" aria-hidden="true"></canvas>`;
     }
-    firstUpdated() {
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
         this.start();
     }
     connectedCallback() {

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

@@ -5,22 +5,30 @@ display: contents;
 
 [part="column"] {
 align-items: center;
-border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
+border-block-end: var(--helix-border-thin) solid
+var(--_table-heading-rule-color, var(--helix-color-border));
 box-sizing: border-box;
 
-color: var(--helix-color-foreground-muted);
+color: var(--_table-heading-color, var(--helix-color-foreground-muted));
 display: flex;
 font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
+font-size: var(--_table-heading-text, var(--helix-text-sm));
 font-weight: var(--helix-weight-semibold);
 
 min-block-size: var(--helix-size-control-loose);
 min-inline-size: 0;
-padding-inline-end: var(--helix-space-md);
+padding-block: var(--_table-heading-padding-block, var(--helix-space-none));
+padding-inline: var(
+--_table-heading-padding-inline,
+var(--helix-space-none) var(--helix-space-md)
+);
 }
 
 [part="column"] {
-position: relative;
+background-color: var(--_table-heading-background-color, transparent);
+inset-block-start: 0;
+position: var(--_table-heading-position, relative);
+z-index: var(--_table-heading-layer, auto);
 }
 
 [part="sort"] {
@@ -34,6 +42,16 @@ gap: var(--helix-space-2xs);
 min-inline-size: 0;
 }
 
+:host([align="center"]) [part="column"],
+:host([align="center"]) [part="sort"] {
+justify-content: center;
+}
+
+:host([align="end"]) [part="column"],
+:host([align="end"]) [part="sort"] {
+justify-content: flex-end;
+}
+
 [part="sort"]:focus-visible,
 [part="grip"]:focus-visible,
 [part="resizer"]:focus-visible {

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.31.0",
+  "version": "0.32.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.31.0",
-    "@fusion.dev/helix-headless": "0.31.0",
-    "@fusion.dev/helix-styles": "0.31.0"
+    "@fusion.dev/helix-core": "0.32.0",
+    "@fusion.dev/helix-headless": "0.32.0",
+    "@fusion.dev/helix-styles": "0.32.0"
   },
   "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

@@ -15884,7 +15884,18 @@ export type HelixTableColumnProps = {
 
 `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?: (HelixTableColumn["align"]) | undefined;
   /** The key this column reads out of a row.
 
@@ -15962,7 +15973,18 @@ export type HelixTableColumnSolidJsProps = {
 
 `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"?: (HelixTableColumn["align"]) | undefined;
   /** The key this column reads out of a row.
 
@@ -25629,6 +25651,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
    *
@@ -34475,7 +34498,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
@@ -37004,6 +37038,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-tour-stop": Partial<
@@ -44075,6 +44113,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
    *
@@ -53139,7 +53178,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
@@ -55727,6 +55777,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-tour-stop": Partial<

package/types/vue.d.ts

@@ -8148,7 +8148,18 @@ export type HelixTableColumnVueProps = {
 
 `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?: (HelixTableColumn["align"]) | undefined;
   /** The key this column reads out of a row.