@fusion.dev/helix-headless 0.167.0 → 0.169.0

package/custom-elements.json

@@ -5613,7 +5613,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`."
             },
             {
               "kind": "field",
@@ -113053,6 +113053,16 @@
               "attribute": "orientation",
               "reflects": true
             },
+            {
+              "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
+            },
             {
               "kind": "field",
               "name": "current",
@@ -113484,6 +113494,14 @@
               },
               "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"
+            },
+            {
+              "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"
             }
           ],
           "cssStates": [
@@ -196364,6 +196382,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-headless",
-    "version": "0.167.0"
+    "version": "0.169.0"
   }
 }

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

@@ -95,7 +95,9 @@ export declare class HelixHeadlessAvatar extends HelixElement {
      * report `Image` gives, for the same reason. `load` and `error` fire once, so
      * a listener bound after the picture settled hears neither, which is the
      * platform on an `<img>` too, and this is what that listener asks instead.
-     * Mirrored to `data-status` rather than reflected, as `Image` explains.
+     * Mirrored to `data-status` rather than reflected, as `Image` explains, once a
+     * picture has loaded or failed. An avatar with no `src` reports `error` here
+     * and as `:state(error)`, and writes no `data-status`.
      */
     status: 'error' | 'loaded' | 'loading';
     /**

package/dist/avatar/root/avatar-root.js

@@ -78,8 +78,8 @@ let HelixHeadlessAvatar = class HelixHeadlessAvatar extends HelixElement {
         if (changed.has('src') || changed.has('fallbackDelay')) {
             this.startWait();
         }
-        if (changed.has('status')) {
-            if (this.status === 'loading') {
+        if (changed.has('status') || changed.has('src')) {
+            if (this.status === 'loading' || this.src === '') {
                 this.removeAttribute('data-status');
             }
             else {

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

@@ -90,6 +90,28 @@ export declare class HelixHeadlessNavigation extends HelixElement {
      * the column as it does along the row.
      */
     orientation?: 'vertical';
+    /**
+     * How the destinations are drawn, with `Tabs`' three values and for the same
+     * reasons.
+     *
+     * Unset is a pill under the current destination with nothing behind the row,
+     * for a bar inside other chrome. `underlined` is a rule under the row and a
+     * thicker one under the current destination, for a bar that heads a page, as
+     * a repository's or a project's sections do. `segmented` puts the pill in a
+     * framed, sunken track, for a short set that reads as one control.
+     *
+     * **The same words as `Tabs`, because a reader cannot tell the two apart.**
+     * Navigation moves between pages and tabs between the panels of one page,
+     * and the bar looks the same either way. A console whose sections are pages
+     * could not draw them the way its underlined tabs were drawn.
+     *
+     * Down a column, `underlined` stands the rule and the mark along the
+     * column's inline end.
+     *
+     * Reflected and left unset by default, so the host carries nothing a
+     * consumer's server markup does not already have.
+     */
+    variant?: 'segmented' | 'underlined';
     private current;
     /** The disclosures among the destinations that are open. */
     private readonly opened;

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

@@ -155,6 +155,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessNavigation.prototype, "orientation", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessNavigation.prototype, "variant", void 0);
 HelixHeadlessNavigation = __decorate([
     customElement('helix-headless-navigation')
 ], HelixHeadlessNavigation);