@fusion.dev/helix-headless 0.21.0 → 0.23.0

package/custom-elements.json

@@ -3777,7 +3777,7 @@
               "name": ""
             },
             {
-              "description": "After it, for a count or a mark.",
+              "description": "After the label and outside the link, so it may be a control: this is where a switcher's menu trigger goes. A count or a mark is equally at home here and is no longer read into the link's accessible name.",
               "name": "end"
             },
             {
@@ -38926,6 +38926,23 @@
               "default": "false",
               "description": "Whether anything is slotted into `submenu`. Read after first render.\n\nState rather than a getter over `children`. A getter is read during\n`render()` with nothing to re-read it, so a submenu arriving after the\nrow's first render produces no caret and no `aria-haspopup` while selecting\nthe row still drills in, which is what a framework filling a submenu on\ndemand hits every time. `Tree.Item` backs `branch` the same way for the\nsame reason.\n\nKept in step by `readSubmenu`, which is bound in the template rather than\nonce at first render. See the note there."
             },
+            {
+              "kind": "field",
+              "name": "start",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether anything is slotted before the label.\n\nThe leading box is drawn only where there is something to put in it, the\nsame way the trailing mark is. What keeps the labels on one edge is the\ntrack the menu reserves for the page, not a box on every row, so a row with\nnothing here takes no box and still lines up with its neighbors.\n\nRead from the slot rather than from the light DOM, because the light DOM\nanswer is not reactive: a consumer who adds an icon to one row after first\nrender changes nothing this element is told about, and `slotchange` is\nexactly the thing that is."
+            },
+            {
+              "kind": "field",
+              "name": "readStart",
+              "privacy": "private",
+              "readonly": true,
+              "description": "Re-reads whether anything is before the label.\n\nThe slot itself is always rendered and it is the box around it that comes\nand goes, which is what makes this safe where `readSubmenu` needed the note\nit carries: there is one `slot[name=\"start\"]` in one template branch, so it\nis never rebuilt and never fires on its way out."
+            },
             {
               "kind": "field",
               "name": "readSubmenu",
@@ -39528,6 +39545,17 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "method",
+              "name": "markColumns",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Says whether the page showing reserves a column either side of its labels.\n\n**A fact no row can answer for itself**, which is why the columns were\nunconditional. A row knows about its own start slot and nothing about its\nneighbors, so a page where one row has an icon and the rest do not draws two\ndifferent left edges for its text. Reserving on every row instead charged\nevery menu for a column nothing in it was ever going to fill: measured on a\npage of two plain rows, the text started 36 pixels into the row, of which 12\nwas the row's own padding and 24 a leading column and its seam. The same\npage now starts at 12, and a page where one row does have a mark still\nstarts both of its rows at 36.\n\n**Per page rather than per menu**, because a submenu is a different set of\nrows: a page of checkable filters under a page of plain ones reserves on one\nand not on the other, and asking the whole tree would hand the plain page\nthe filters' column. `Notifications` answers the same question for its media\ncolumn the same way, and for the same reason.\n\nRead off the light DOM rather than off the rows, so it does not depend on\nwhich children have upgraded by the time this runs."
+            },
             {
               "kind": "method",
               "name": "mark",

package/dist/breadcrumbs/breadcrumb/breadcrumb.d.ts

@@ -37,7 +37,9 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot - The step's label. Without an `href` this may be the consumer's own
  * anchor, styled with `data-link="quiet"`, since a slotted anchor belongs to the
  * outer tree and cannot be reached from this component's styles.
- * @slot end - After it, for a count or a mark.
+ * @slot end - After the label and outside the link, so it may be a control: this is where a
+ * switcher's menu trigger goes. A count or a mark is equally at home here and is no longer
+ * read into the link's accessible name.
  * @slot separator - Replaces the chevron shown before this item.
  * @slot start - Before the label, for an icon.
  *

package/dist/breadcrumbs/breadcrumb/breadcrumb.js

@@ -29,7 +29,7 @@ let HelixHeadlessBreadcrumb = class HelixHeadlessBreadcrumb extends HelixElement
     >`;
     }
     render() {
-        const label = html `<slot name="start"></slot><slot></slot><slot name="end"></slot>`;
+        const label = html `<slot name="start"></slot><slot></slot>`;
         const linked = (this.href ?? '') !== '' && !this.current;
         return html `<span part="separator" aria-hidden="true"
         >${this.renderSeparator()}</span
@@ -41,7 +41,7 @@ let HelixHeadlessBreadcrumb = class HelixHeadlessBreadcrumb extends HelixElement
               rel=${this.rel || nothing}
               >${label}</a
             >`
-            : html `<span part="link">${label}</span>`}`;
+            : html `<span part="link">${label}</span>`}<slot name="end"></slot>`;
     }
 };
 __decorate([

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

@@ -144,7 +144,30 @@ export declare class HelixHeadlessMenuItem extends HelixElement {
      * once at first render. See the note there.
      */
     private submenu;
+    /**
+     * Whether anything is slotted before the label.
+     *
+     * The leading box is drawn only where there is something to put in it, the
+     * same way the trailing mark is. What keeps the labels on one edge is the
+     * track the menu reserves for the page, not a box on every row, so a row with
+     * nothing here takes no box and still lines up with its neighbors.
+     *
+     * Read from the slot rather than from the light DOM, because the light DOM
+     * answer is not reactive: a consumer who adds an icon to one row after first
+     * render changes nothing this element is told about, and `slotchange` is
+     * exactly the thing that is.
+     */
+    private start;
     protected firstUpdated(changed: PropertyValues): void;
+    /**
+     * Re-reads whether anything is before the label.
+     *
+     * The slot itself is always rendered and it is the box around it that comes
+     * and goes, which is what makes this safe where `readSubmenu` needed the note
+     * it carries: there is one `slot[name="start"]` in one template branch, so it
+     * is never rebuilt and never fires on its way out.
+     */
+    private readonly readStart;
     /**
      * Re-reads whether anything is in the submenu, from whichever slot is current.
      *

package/dist/menu/item/menu-item.js

@@ -24,6 +24,11 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
         this.value = '';
         this.isMenuItem = true;
         this.submenu = false;
+        this.start = false;
+        this.readStart = () => {
+            const slot = this.renderRoot.querySelector('slot[name="start"]');
+            this.start = (slot?.assignedNodes().length ?? 0) > 0;
+        };
         this.readSubmenu = () => {
             const slot = this.renderRoot.querySelector('slot[name="submenu"]');
             this.submenu = (slot?.assignedElements().length ?? 0) > 0;
@@ -53,6 +58,7 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.readSubmenu();
+        this.readStart();
     }
     focus() {
         this.renderRoot.querySelector('[part="item"]')?.focus();
@@ -83,7 +89,9 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
         const linked = this.href !== '' && !this.disabled;
         const role = this.checkable || this.checked ? 'menuitemcheckbox' : 'menuitem';
         const checkedState = this.checkable || this.checked ? (this.checked ? 'true' : 'false') : nothing;
-        const inside = html `<span part="start"><slot name="start"></slot></span>
+        const inside = html `<span part="start" ?data-empty=${!this.start}
+          ><slot name="start" @slotchange=${this.readStart}></slot
+        ></span>
         <slot></slot>
         ${submenu
             ? html `<svg
@@ -104,7 +112,8 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
                 >
                   ${unsafeSVG(check.content)}
                 </svg>`
-                : html `<span part="mark" aria-hidden="true"></span>`}`;
+                :
+                    nothing}`;
         return html `${linked
             ? html `<a
             part="item"
@@ -165,6 +174,9 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessMenuItem.prototype, "submenu", void 0);
+__decorate([
+    state()
+], HelixHeadlessMenuItem.prototype, "start", void 0);
 HelixHeadlessMenuItem = __decorate([
     customElement('helix-headless-menu-item')
 ], HelixHeadlessMenuItem);

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

@@ -126,6 +126,29 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected updated(changed: PropertyValues): void;
+    /**
+     * Says whether the page showing reserves a column either side of its labels.
+     *
+     * **A fact no row can answer for itself**, which is why the columns were
+     * unconditional. A row knows about its own start slot and nothing about its
+     * neighbors, so a page where one row has an icon and the rest do not draws two
+     * different left edges for its text. Reserving on every row instead charged
+     * every menu for a column nothing in it was ever going to fill: measured on a
+     * page of two plain rows, the text started 36 pixels into the row, of which 12
+     * was the row's own padding and 24 a leading column and its seam. The same
+     * page now starts at 12, and a page where one row does have a mark still
+     * starts both of its rows at 36.
+     *
+     * **Per page rather than per menu**, because a submenu is a different set of
+     * rows: a page of checkable filters under a page of plain ones reserves on one
+     * and not on the other, and asking the whole tree would hand the plain page
+     * the filters' column. `Notifications` answers the same question for its media
+     * column the same way, and for the same reason.
+     *
+     * Read off the light DOM rather than off the rows, so it does not depend on
+     * which children have upgraded by the time this runs.
+     */
+    private markColumns;
     /**
      * Walks the tree marking which rows are on the page showing.
      *

package/dist/menu/root/menu-root.js

@@ -159,6 +159,12 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
             }
             this.mark(item, this.drilldown.atRoot);
         }
+        this.markColumns();
+    }
+    markColumns() {
+        const rows = this.drilldown.rows;
+        this.toggleState('start', rows.some((row) => row.querySelector(':scope > [slot="start"]') !== null));
+        this.toggleState('mark', rows.some((row) => row.checkable || row.checked || this.drilldown.hasPage(row)));
     }
     mark(item, onPage) {
         item.onPage = onPage;

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.21.0",
+  "version": "0.23.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -45,14 +45,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.21.0",
-    "@fusion.dev/helix-icons": "0.21.0",
+    "@fusion.dev/helix-core": "0.23.0",
+    "@fusion.dev/helix-icons": "0.23.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.21.0",
-    "@fusion.dev/helix-testing": "0.21.0",
+    "@fusion.dev/helix-cem": "0.23.0",
+    "@fusion.dev/helix-testing": "0.23.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^3.3.0",

package/types/jsx.d.ts

@@ -16544,7 +16544,7 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The step's label. Without an `href` this may be the consumer's own anchor, styled with `data-link="quiet"`, since a slotted anchor belongs to the outer tree and cannot be reached from this component's styles.
-   * - `end`: After it, for a count or a mark.
+   * - `end`: After the label and outside the link, so it may be a control: this is where a switcher's menu trigger goes. A count or a mark is equally at home here and is no longer read into the link's accessible name.
    * - `separator`: Replaces the chevron shown before this item.
    * - `start`: Before the label, for an icon.
    *
@@ -31007,7 +31007,7 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `(default)`: The step's label. Without an `href` this may be the consumer's own anchor, styled with `data-link="quiet"`, since a slotted anchor belongs to the outer tree and cannot be reached from this component's styles.
-   * - `end`: After it, for a count or a mark.
+   * - `end`: After the label and outside the link, so it may be a control: this is where a switcher's menu trigger goes. A count or a mark is equally at home here and is no longer read into the link's accessible name.
    * - `separator`: Replaces the chevron shown before this item.
    * - `start`: Before the label, for an icon.
    *