@fusion.dev/helix 0.167.0 → 0.169.0

package/custom-elements.json

@@ -8414,7 +8414,7 @@
                 "text": "'error' | 'loaded' | 'loading'"
               },
               "default": "'loading'",
-              "description": "The image's state: `loading` while it is on its way, `loaded` once it\narrives, or `error` when it fails and the initials replace it. An avatar\nwith no `src` has no image to wait for, and reports `error` as well, since\nthe initials are what it shows.\n\nRead-only to a consumer: it is a report rather than a setting, and the same\nreport `Image` gives, for the same reason. `load` and `error` fire once, so\na listener bound after the picture settled hears neither, which is the\nplatform on an `<img>` too, and this is what that listener asks instead.\nMirrored to `data-status` rather than reflected, as `Image` explains.",
+              "description": "The image's state: `loading` while it is on its way, `loaded` once it\narrives, or `error` when it fails and the initials replace it. An avatar\nwith no `src` has no image to wait for, and reports `error` as well, since\nthe initials are what it shows.\n\nRead-only to a consumer: it is a report rather than a setting, and the same\nreport `Image` gives, for the same reason. `load` and `error` fire once, so\na listener bound after the picture settled hears neither, which is the\nplatform on an `<img>` too, and this is what that listener asks instead.\nMirrored to `data-status` rather than reflected, as `Image` explains, once a\npicture has loaded or failed. An avatar with no `src` reports `error` here\nand as `:state(error)`, and writes no `data-status`.",
               "inheritedFrom": {
                 "name": "HelixHeadlessAvatar",
                 "module": "src/avatar/root/avatar-root.ts"
@@ -137475,7 +137475,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "One marker moves to the current destination. A moving marker is easier to\nfollow than a background that switches from one item to another, and the\nmovement shows which page you came from as well as which one is current.",
+          "description": "One marker moves to the current destination. A moving marker is easier to\nfollow than a background that switches from one item to another, and the\nmovement shows which page you came from as well as which one is current.\n\nThe marker depends on `variant`, as `Tabs`' mark does:\n\n- Unset, it is a pill on the current destination, with nothing behind the\n  row.\n- `underlined` makes it a bar along the bottom of the row, on a rule.\n- `segmented` makes it a raised pill inside a sunken track.",
           "name": "HelixNavigation",
           "cssProperties": [
             {
@@ -137487,7 +137487,7 @@
               "name": "--navigation-gap"
             },
             {
-              "description": "Fill of the marker on the current destination.",
+              "description": "Fill of the marker on the current destination: the bar under `underlined`, and the pill otherwise.",
               "name": "--navigation-indicator-color"
             },
             {
@@ -137495,9 +137495,13 @@
               "name": "--navigation-indicator-radius"
             },
             {
-              "description": "Shadow under the marker, for a marker that sits raised on the bar.",
+              "description": "Shadow under the marker, for a marker that sits raised on the bar, as `segmented` draws it.",
               "name": "--navigation-indicator-shadow"
             },
+            {
+              "description": "Height of the bar under `underlined`, and its width down a column.",
+              "name": "--navigation-indicator-thickness"
+            },
             {
               "description": "Text color of a destination that is not the current one. Read by the page's stylesheet, which styles the links you slot.",
               "name": "--navigation-item-color"
@@ -137533,6 +137537,10 @@
             {
               "description": "Corner radius of a destination, which its hover background follows.",
               "name": "--navigation-item-radius"
+            },
+            {
+              "description": "Color of the rule under the row in `underlined`.",
+              "name": "--navigation-rule-color"
             }
           ],
           "members": [
@@ -137629,6 +137637,20 @@
                 "module": "src/navigation/root/navigation-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'segmented' | 'underlined' | undefined"
+              },
+              "description": "How the destinations are drawn, with `Tabs`' three values and for the same\nreasons.\n\nUnset is a pill under the current destination with nothing behind the row,\nfor a bar inside other chrome. `underlined` is a rule under the row and a\nthicker one under the current destination, for a bar that heads a page, as\na repository's or a project's sections do. `segmented` puts the pill in a\nframed, sunken track, for a short set that reads as one control.\n\n**The same words as `Tabs`, because a reader cannot tell the two apart.**\nNavigation moves between pages and tabs between the panels of one page,\nand the bar looks the same either way. A console whose sections are pages\ncould not draw them the way its underlined tabs were drawn.\n\nDown a column, `underlined` stands the rule and the mark along the\ncolumn's inline end.\n\nReflected and left unset by default, so the host carries nothing a\nconsumer's server markup does not already have.",
+              "attribute": "variant",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "HelixHeadlessNavigation",
+                "module": "src/navigation/root/navigation-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "current",
@@ -138084,6 +138106,14 @@
               {
                 "description": "Links with the current page marked by a marker that moves to it.",
                 "slug": "preview"
+              },
+              {
+                "description": "Links in a sunken track, with the current page marked by a raised pill.",
+                "slug": "segmented"
+              },
+              {
+                "description": "Links with the current page marked by a bar on a rule under the row.",
+                "slug": "underlined"
               }
             ],
             "source": "helix/styled/src/navigation"
@@ -138164,6 +138194,18 @@
                 "name": "HelixHeadlessNavigation",
                 "module": "src/navigation/root/navigation-root.ts"
               }
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "'segmented' | 'underlined' | undefined"
+              },
+              "description": "How the destinations are drawn, with `Tabs`' three values and for the same\nreasons.\n\nUnset is a pill under the current destination with nothing behind the row,\nfor a bar inside other chrome. `underlined` is a rule under the row and a\nthicker one under the current destination, for a bar that heads a page, as\na repository's or a project's sections do. `segmented` puts the pill in a\nframed, sunken track, for a short set that reads as one control.\n\n**The same words as `Tabs`, because a reader cannot tell the two apart.**\nNavigation moves between pages and tabs between the panels of one page,\nand the bar looks the same either way. A console whose sections are pages\ncould not draw them the way its underlined tabs were drawn.\n\nDown a column, `underlined` stands the rule and the mark along the\ncolumn's inline end.\n\nReflected and left unset by default, so the host carries nothing a\nconsumer's server markup does not already have.",
+              "fieldName": "variant",
+              "inheritedFrom": {
+                "name": "HelixHeadlessNavigation",
+                "module": "src/navigation/root/navigation-root.ts"
+              }
             }
           ],
           "cssStates": [
@@ -245744,6 +245786,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix",
-    "version": "0.167.0"
+    "version": "0.169.0"
   }
 }

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

@@ -2,4 +2,10 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {display: block;}[part="nav"] {align-items: center;block-size: var(--navigation-block-size, var(--helix-size-control-sm));display: flex;gap: var(--navigation-gap, var(--helix-space-2xs));min-inline-size: 0;overflow-x: auto;position: relative;}::slotted(:is(ul, ol, [role="list"])) {align-items: center;block-size: 100%;display: flex;gap: var(--navigation-gap, var(--helix-space-2xs));list-style: none;margin: var(--helix-space-none);padding: var(--helix-space-none);}:host([orientation="vertical"]) ::slotted(:is(ul, ol, [role="list"])) {align-items: stretch;block-size: auto;flex-direction: column;}[part="indicator"] {background-color: var(--navigation-indicator-color, var(--helix-color-surface-sunken));block-size: var(--indicator-block-size, 0);border-radius: var(--navigation-indicator-radius, var(--helix-radii-sm));box-shadow: var(--navigation-indicator-shadow, none);inline-size: var(--indicator-inline-size, 0);inset-block-start: 50%;inset-inline-start: 0;opacity: 0;position: absolute;translate: var(--indicator-x, 0) -50%;transition:
 translate var(--helix-duration-normal) var(--helix-easing-emphasized),
 inline-size var(--helix-duration-normal) var(--helix-easing-emphasized),
-opacity var(--helix-duration-fast) var(--helix-easing-standard);z-index: var(--helix-layer-base);}[part="indicator"][data-placed] {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;}}`);
+opacity var(--helix-duration-fast) var(--helix-easing-standard);z-index: var(--helix-layer-base);}[part="indicator"][data-placed] {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);}:host([variant="underlined"]) [part="nav"] {background-image: linear-gradient(
+var(--navigation-rule-color, var(--helix-color-border)),
+var(--navigation-rule-color, var(--helix-color-border))
+);background-position: bottom;background-repeat: repeat-x;background-size: 100% var(--helix-border-thin);}:host([variant="underlined"]) [part="indicator"] {background-color: var(--navigation-indicator-color, var(--helix-color-primary));block-size: var(--navigation-indicator-thickness, var(--helix-border-thick));border-radius: var(--navigation-indicator-radius, var(--helix-radii-none));inset-block-end: 0;inset-block-start: auto;translate: var(--indicator-x, 0) 0;}:host([variant="segmented"]) [part="nav"] {background-color: var(--helix-color-surface-sunken);block-size: var(--navigation-block-size, var(--helix-size-control));border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-sizing: border-box;inline-size: fit-content;max-inline-size: 100%;padding: var(--helix-space-2xs);}:host([variant="segmented"]) [part="indicator"] {background-color: var(--navigation-indicator-color, var(--helix-color-surface-overlay));border-radius: var(
+--navigation-indicator-radius,
+calc(var(--helix-radii-sm) - var(--helix-border-thin))
+);box-shadow: var(--navigation-indicator-shadow, var(--helix-shadow-sm));}:host([orientation="vertical"][variant="underlined"]) [part="nav"] {background-position: right;background-repeat: repeat-y;background-size: var(--helix-border-thin) 100%;}:host([orientation="vertical"][variant="underlined"]) [part="indicator"] {block-size: var(--indicator-block-size, 0);inline-size: var(--navigation-indicator-thickness, var(--helix-border-thick));inset-block-start: 0;inset-inline-end: 0;inset-inline-start: auto;translate: 0 var(--indicator-y, 0);}:host([orientation="vertical"][variant="segmented"]) [part="nav"] {block-size: auto;}:host([orientation="vertical"][variant="underlined"]:dir(rtl)) [part="nav"] {background-position: left;}@media print {:host {display: none;}}`);

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

@@ -8,6 +8,13 @@ import type { CSSResultGroup } from 'lit';
  * follow than a background that switches from one item to another, and the
  * movement shows which page you came from as well as which one is current.
  *
+ * The marker depends on `variant`, as `Tabs`' mark does:
+ *
+ * - Unset, it is a pill on the current destination, with nothing behind the
+ *   row.
+ * - `underlined` makes it a bar along the bottom of the row, on a rule.
+ * - `segmented` makes it a raised pill inside a sunken track.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -16,10 +23,11 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --navigation-block-size - Height of the bar in a row. Each destination fills it.
  * @cssproperty --navigation-gap - Space between destinations.
- * @cssproperty --navigation-indicator-color - Fill of the marker on the current destination.
+ * @cssproperty --navigation-indicator-color - Fill of the marker on the current destination: the bar under `underlined`, and the pill otherwise.
  * @cssproperty --navigation-indicator-radius - Corner radius of the marker.
  * @cssproperty --navigation-indicator-shadow - Shadow under the marker, for a marker that sits
- *   raised on the bar.
+ *   raised on the bar, as `segmented` draws it.
+ * @cssproperty --navigation-indicator-thickness - Height of the bar under `underlined`, and its width down a column.
  * @cssproperty --navigation-item-color - Text color of a destination that is not the current one. Read by the page's stylesheet, which styles the links you slot.
  * @cssproperty --navigation-item-current-color - Text color of the current destination, the one marked `aria-current="page"`.
  * @cssproperty --navigation-item-current-font-weight - Weight of the current destination's text.
@@ -29,6 +37,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --navigation-item-hover-color - Text color of a destination under the pointer.
  * @cssproperty --navigation-item-padding-inline - Space either side of a destination's text.
  * @cssproperty --navigation-item-radius - Corner radius of a destination, which its hover background follows.
+ * @cssproperty --navigation-rule-color - Color of the rule under the row in `underlined`.
  */
 export declare class HelixNavigation extends HelixHeadlessNavigation {
     static styles: CSSResultGroup;