@fusion.dev/helix 0.133.0 → 0.134.0

package/custom-elements.json

@@ -1371,10 +1371,18 @@
           "description": "Full width and flat. The tone is a tinted fill and a hairline along the\nbottom edge, with no border on the other sides, so the announcement is a band\nacross the top of the page.",
           "name": "HelixAnnouncement",
           "cssProperties": [
+            {
+              "description": "The band's fill, in place of the one its separation gives it. A tone's tint still paints over it, so a band that sets this usually carries no tone.",
+              "name": "--announcement-background-color"
+            },
             {
               "description": "The band's minimum height, so adding a control to it does not move the page down. A message long enough to wrap makes the band taller.",
               "name": "--announcement-block-size"
             },
+            {
+              "description": "The message's color, to pair with a fill set through the background hook.",
+              "name": "--announcement-foreground-color"
+            },
             {
               "description": "The inline padding, matched to the page.",
               "name": "--announcement-inset"
@@ -1385,9 +1393,9 @@
               "kind": "field",
               "name": "separation",
               "type": {
-                "text": "'elevated' | 'filled' | undefined"
+                "text": "'elevated' | 'filled' | 'outlined' | undefined"
               },
-              "description": "The surface level the band sits on.\n\n`filled` is the resting one, a well sunk below the page. `elevated` brings\nit up to the surface step, for a band that reads as part of the furniture\nrather than as a slot cut into it.\n\n**`separation` and not `tone`, because a rung is not a meaning.** A band\ncan be `info` and elevated at the same time, and two values that can both\nbe true are two axes, which is the test the registry answers to.\n\nStyled and not headless, because a rung of a ladder is paint: the headless\ntier has no stylesheet to sit a band on. `tone` crosses because meaning\nsurvives having nothing to paint with, and it is the only axis that does.",
+              "description": "The surface level the band sits on.\n\n`filled` is the resting one, a well sunk below the page. `elevated` brings\nit up to the surface step, for a band that reads as part of the furniture\nrather than as a slot cut into it. `outlined` draws a hairline under the\nband, in its tone where it has one; no other value draws a line.\n\n**`separation` and not `tone`, because a rung is not a meaning.** A band\ncan be `info` and elevated at the same time, and two values that can both\nbe true are two axes, which is the test the registry answers to.\n\nStyled and not headless, because a rung of a ladder is paint: the headless\ntier has no stylesheet to sit a band on. `tone` crosses because meaning\nsurvives having nothing to paint with, and it is the only axis that does.",
               "attribute": "separation",
               "reflects": true
             },
@@ -1836,9 +1844,9 @@
             {
               "name": "separation",
               "type": {
-                "text": "'elevated' | 'filled' | undefined"
+                "text": "'elevated' | 'filled' | 'outlined' | undefined"
               },
-              "description": "The surface level the band sits on.\n\n`filled` is the resting one, a well sunk below the page. `elevated` brings\nit up to the surface step, for a band that reads as part of the furniture\nrather than as a slot cut into it.\n\n**`separation` and not `tone`, because a rung is not a meaning.** A band\ncan be `info` and elevated at the same time, and two values that can both\nbe true are two axes, which is the test the registry answers to.\n\nStyled and not headless, because a rung of a ladder is paint: the headless\ntier has no stylesheet to sit a band on. `tone` crosses because meaning\nsurvives having nothing to paint with, and it is the only axis that does.",
+              "description": "The surface level the band sits on.\n\n`filled` is the resting one, a well sunk below the page. `elevated` brings\nit up to the surface step, for a band that reads as part of the furniture\nrather than as a slot cut into it. `outlined` draws a hairline under the\nband, in its tone where it has one; no other value draws a line.\n\n**`separation` and not `tone`, because a rung is not a meaning.** A band\ncan be `info` and elevated at the same time, and two values that can both\nbe true are two axes, which is the test the registry answers to.\n\nStyled and not headless, because a rung of a ladder is paint: the headless\ntier has no stylesheet to sit a band on. `tone` crosses because meaning\nsurvives having nothing to paint with, and it is the only axis that does.",
               "fieldName": "separation"
             },
             {
@@ -1908,7 +1916,7 @@
                 "slug": "events"
               },
               {
-                "description": "A filled band, an elevated band, and an elevated band with a tone.",
+                "description": "A filled band, an elevated band, an elevated band with a tone, and a band with a line under it.",
                 "slug": "separation"
               },
               {
@@ -95886,6 +95894,20 @@
                 "module": "src/navigation/root/navigation-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "'vertical' | undefined"
+              },
+              "description": "Stacks the destinations in a column, for a sidebar, where unset is a row\nfor a header or a footer. The marker follows the current destination down\nthe column as it does along the row.",
+              "attribute": "orientation",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "HelixHeadlessNavigation",
+                "module": "src/navigation/root/navigation-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "current",
@@ -96321,6 +96343,18 @@
                 "name": "HelixHeadlessNavigation",
                 "module": "src/navigation/root/navigation-root.ts"
               }
+            },
+            {
+              "name": "orientation",
+              "type": {
+                "text": "'vertical' | undefined"
+              },
+              "description": "Stacks the destinations in a column, for a sidebar, where unset is a row\nfor a header or a footer. The marker follows the current destination down\nthe column as it does along the row.",
+              "fieldName": "orientation",
+              "inheritedFrom": {
+                "name": "HelixHeadlessNavigation",
+                "module": "src/navigation/root/navigation-root.ts"
+              }
             }
           ],
           "cssStates": [

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

@@ -13,10 +13,9 @@ export const styles = createSheet(`:host {
 --_announcement-ground: var(--helix-color-background);
 
 align-items: center;
-background-color: var(--helix-color-surface-sunken);
+background-color: var(--announcement-background-color, var(--helix-color-surface-sunken));
 
-border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
-color: var(--helix-color-foreground);
+color: var(--announcement-foreground-color, var(--helix-color-foreground));
 display: flex;
 font-size: var(--helix-text-sm);
 
@@ -51,7 +50,6 @@ position: relative;
 
 :host([tone="neutral"]) {
 background-image: none;
-border-block-end-color: var(--helix-color-border);
 }
 
 :host([tone="primary"]) {
@@ -74,21 +72,28 @@ color-mix(in oklab, var(--_announcement-color) 10%, var(--_announcement-ground))
 color-mix(in oklab, var(--_announcement-color) 20%, var(--_announcement-ground))
 )
 );
-border-block-end-color: color-mix(
-in oklab,
-var(--_announcement-color) 40%,
-var(--_announcement-ground)
-);
 }
 
 :host([separation="filled"]) {
-background-color: var(--helix-color-surface-sunken);
+background-color: var(--announcement-background-color, var(--helix-color-surface-sunken));
 }
 
 :host([separation="elevated"]) {
 --_announcement-ground: var(--helix-color-surface);
 
-background-color: var(--helix-color-surface);
+background-color: var(--announcement-background-color, var(--helix-color-surface));
+}
+
+:host([separation="outlined"]) {
+border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
+}
+
+:host([separation="outlined"][tone]:not([tone="neutral"])) {
+border-block-end-color: color-mix(
+in oklab,
+var(--_announcement-color) 40%,
+var(--_announcement-ground)
+);
 }
 
 [part="content"] {

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

@@ -14,7 +14,9 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Banner, Notification bar, Alert bar
  * @documentation https://fusion.dev/helix/components/announcement
  *
+ * @cssproperty --announcement-background-color - The band's fill, in place of the one its separation gives it. A tone's tint still paints over it, so a band that sets this usually carries no tone.
  * @cssproperty --announcement-block-size - The band's minimum height, so adding a control to it does not move the page down. A message long enough to wrap makes the band taller.
+ * @cssproperty --announcement-foreground-color - The message's color, to pair with a fill set through the background hook.
  * @cssproperty --announcement-inset - The inline padding, matched to the page.
  */
 export declare class HelixAnnouncement extends HelixHeadlessAnnouncement {
@@ -23,7 +25,8 @@ export declare class HelixAnnouncement extends HelixHeadlessAnnouncement {
      *
      * `filled` is the resting one, a well sunk below the page. `elevated` brings
      * it up to the surface step, for a band that reads as part of the furniture
-     * rather than as a slot cut into it.
+     * rather than as a slot cut into it. `outlined` draws a hairline under the
+     * band, in its tone where it has one; no other value draws a line.
      *
      * **`separation` and not `tone`, because a rung is not a meaning.** A band
      * can be `info` and elevated at the same time, and two values that can both
@@ -33,7 +36,7 @@ export declare class HelixAnnouncement extends HelixHeadlessAnnouncement {
      * tier has no stylesheet to sit a band on. `tone` crosses because meaning
      * survives having nothing to paint with, and it is the only axis that does.
      */
-    separation?: 'elevated' | 'filled';
+    separation?: 'elevated' | 'filled' | 'outlined';
     static styles: CSSResultGroup;
 }
 declare global {

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

@@ -19,8 +19,8 @@ color: var(--helix-color-foreground-subtle);
 }
 
 [part="trigger"] {
-align-items: stretch;
 all: unset;
+align-items: stretch;
 align-self: stretch;
 box-sizing: border-box;
 cursor: pointer;

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

@@ -12,6 +12,8 @@ border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
 :host([kind="ordered"]),
 :host([kind="unordered"]) {
 
+contain: style;
+
 padding-inline-start: var(--list-marker-gutter, var(--helix-space-md));
 }
 

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

@@ -37,6 +37,18 @@ z-index: var(--helix-layer-base);
 opacity: 1;
 }
 
+:host([orientation="vertical"]) [part="nav"] {
+align-items: stretch;
+block-size: auto;
+flex-direction: column;
+overflow-x: visible;
+}
+
+:host([orientation="vertical"]) [part="indicator"] {
+inset-block-start: 0;
+translate: var(--indicator-x, 0) var(--indicator-y, 0);
+}
+
 @media print {
 :host {
 display: none;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.133.0",
+  "version": "0.134.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -51,13 +51,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.133.0",
-    "@fusion.dev/helix-headless": "0.133.0",
-    "@fusion.dev/helix-styles": "0.133.0"
+    "@fusion.dev/helix-core": "0.134.0",
+    "@fusion.dev/helix-headless": "0.134.0",
+    "@fusion.dev/helix-styles": "0.134.0"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.133.0",
-    "@fusion.dev/helix-testing": "0.133.0",
+    "@fusion.dev/helix-cem": "0.134.0",
+    "@fusion.dev/helix-testing": "0.134.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

@@ -666,7 +666,8 @@ export type HelixAnnouncementProps = {
 
 `filled` is the resting one, a well sunk below the page. `elevated` brings
 it up to the surface step, for a band that reads as part of the furniture
-rather than as a slot cut into it.
+rather than as a slot cut into it. `outlined` draws a hairline under the
+band, in its tone where it has one; no other value draws a line.
 
 **`separation` and not `tone`, because a rung is not a meaning.** A band
 can be `info` and elevated at the same time, and two values that can both
@@ -724,7 +725,8 @@ export type HelixAnnouncementSolidJsProps = {
 
 `filled` is the resting one, a well sunk below the page. `elevated` brings
 it up to the surface step, for a band that reads as part of the furniture
-rather than as a slot cut into it.
+rather than as a slot cut into it. `outlined` draws a hairline under the
+band, in its tone where it has one; no other value draws a line.
 
 **`separation` and not `tone`, because a rung is not a meaning.** A band
 can be `info` and elevated at the same time, and two values that can both
@@ -16511,11 +16513,19 @@ fair summary of a task and a poor one of a quantity. */
 export type HelixNavigationProps = {
   /** The landmark's name, read by screen readers. */
   label?: (HelixNavigation["label"]) | undefined;
+  /** Stacks the destinations in a column, for a sidebar, where unset is a row
+for a header or a footer. The marker follows the current destination down
+the column as it does along the row. */
+  orientation?: (HelixNavigation["orientation"]) | undefined;
 };
 
 export type HelixNavigationSolidJsProps = {
   /** The landmark's name, read by screen readers. */
   "prop:label"?: (HelixNavigation["label"]) | undefined;
+  /** Stacks the destinations in a column, for a sidebar, where unset is a row
+for a header or a footer. The marker follows the current destination down
+the column as it does along the row. */
+  "prop:orientation"?: (HelixNavigation["orientation"]) | undefined;
 
   /** Set the innerHTML of the element */
   innerHTML?: (string) | undefined;
@@ -27296,7 +27306,8 @@ export type CustomElements = {
    *
    * `filled` is the resting one, a well sunk below the page. `elevated` brings
    * it up to the surface step, for a band that reads as part of the furniture
-   * rather than as a slot cut into it.
+   * rather than as a slot cut into it. `outlined` draws a hairline under the
+   * band, in its tone where it has one; no other value draws a line.
    *
    * **`separation` and not `tone`, because a rung is not a meaning.** A band
    * can be `info` and elevated at the same time, and two values that can both
@@ -27378,7 +27389,9 @@ export type CustomElements = {
    *
    * CSS variables available for styling the component.
    *
+   * - `--announcement-background-color`: The band's fill, in place of the one its separation gives it. A tone's tint still paints over it, so a band that sets this usually carries no tone. (default: `undefined`)
    * - `--announcement-block-size`: The band's minimum height, so adding a control to it does not move the page down. A message long enough to wrap makes the band taller. (default: `undefined`)
+   * - `--announcement-foreground-color`: The message's color, to pair with a fill set through the background hook. (default: `undefined`)
    * - `--announcement-inset`: The inline padding, matched to the page. (default: `undefined`)
    *
    * ## CSS Parts
@@ -39753,6 +39766,9 @@ export type CustomElements = {
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
    * - `label`: The landmark's name, read by screen readers.
+   * - `orientation`: Stacks the destinations in a column, for a sidebar, where unset is a row
+   * for a header or a footer. The marker follows the current destination down
+   * the column as it does along the row.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -49469,7 +49485,8 @@ export type CustomElementsSolidJs = {
    *
    * `filled` is the resting one, a well sunk below the page. `elevated` brings
    * it up to the surface step, for a band that reads as part of the furniture
-   * rather than as a slot cut into it.
+   * rather than as a slot cut into it. `outlined` draws a hairline under the
+   * band, in its tone where it has one; no other value draws a line.
    *
    * **`separation` and not `tone`, because a rung is not a meaning.** A band
    * can be `info` and elevated at the same time, and two values that can both
@@ -49551,7 +49568,9 @@ export type CustomElementsSolidJs = {
    *
    * CSS variables available for styling the component.
    *
+   * - `--announcement-background-color`: The band's fill, in place of the one its separation gives it. A tone's tint still paints over it, so a band that sets this usually carries no tone. (default: `undefined`)
    * - `--announcement-block-size`: The band's minimum height, so adding a control to it does not move the page down. A message long enough to wrap makes the band taller. (default: `undefined`)
+   * - `--announcement-foreground-color`: The message's color, to pair with a fill set through the background hook. (default: `undefined`)
    * - `--announcement-inset`: The inline padding, matched to the page. (default: `undefined`)
    *
    * ## CSS Parts
@@ -62171,6 +62190,9 @@ export type CustomElementsSolidJs = {
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
    * - `label`: The landmark's name, read by screen readers.
+   * - `orientation`: Stacks the destinations in a column, for a sidebar, where unset is a row
+   * for a header or a footer. The marker follows the current destination down
+   * the column as it does along the row.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -71883,8 +71905,12 @@ export type CustomCssProperties = {
   "--accordion-gap"?: (string) | undefined;
   /** The corner radius of each item when outlined. */
   "--accordion-radius"?: (string) | undefined;
+  /** The band's fill, in place of the one its separation gives it. A tone's tint still paints over it, so a band that sets this usually carries no tone. */
+  "--announcement-background-color"?: (string) | undefined;
   /** The band's minimum height, so adding a control to it does not move the page down. A message long enough to wrap makes the band taller. */
   "--announcement-block-size"?: (string) | undefined;
+  /** The message's color, to pair with a fill set through the background hook. */
+  "--announcement-foreground-color"?: (string) | undefined;
   /** The inline padding, matched to the page. */
   "--announcement-inset"?: (string) | undefined;
   /** The filter behind the banner. Set it to `none` when you pair the header with a panel. */

package/types/vue.d.ts

@@ -383,7 +383,8 @@ export type HelixAnnouncementVueProps = {
 
 `filled` is the resting one, a well sunk below the page. `elevated` brings
 it up to the surface step, for a band that reads as part of the furniture
-rather than as a slot cut into it.
+rather than as a slot cut into it. `outlined` draws a hairline under the
+band, in its tone where it has one; no other value draws a line.
 
 **`separation` and not `tone`, because a rung is not a meaning.** A band
 can be `info` and elevated at the same time, and two values that can both
@@ -8467,6 +8468,10 @@ export type HelixMeterVueEvents = {};
 export type HelixNavigationVueProps = {
   /** The landmark's name, read by screen readers. */
   label?: (HelixNavigation["label"]) | undefined;
+  /** Stacks the destinations in a column, for a sidebar, where unset is a row
+for a header or a footer. The marker follows the current destination down
+the column as it does along the row. */
+  orientation?: (HelixNavigation["orientation"]) | undefined;
 };
 
 export type HelixNavigationVueEvents = {};
@@ -13888,8 +13893,12 @@ export type CustomCssProperties = {
   "--accordion-gap"?: (string) | undefined;
   /** The corner radius of each item when outlined. */
   "--accordion-radius"?: (string) | undefined;
+  /** The band's fill, in place of the one its separation gives it. A tone's tint still paints over it, so a band that sets this usually carries no tone. */
+  "--announcement-background-color"?: (string) | undefined;
   /** The band's minimum height, so adding a control to it does not move the page down. A message long enough to wrap makes the band taller. */
   "--announcement-block-size"?: (string) | undefined;
+  /** The message's color, to pair with a fill set through the background hook. */
+  "--announcement-foreground-color"?: (string) | undefined;
   /** The inline padding, matched to the page. */
   "--announcement-inset"?: (string) | undefined;
   /** The filter behind the banner. Set it to `none` when you pair the header with a panel. */