@fusion.dev/helix-headless 0.171.0 → 0.173.0

package/dist/copy-button/root/copy-button-root.d.ts

@@ -1,4 +1,5 @@
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { type Placement } from '@fusion.dev/helix-core';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import { HelixHeadlessIconButton } from '../../icon-button/root/icon-button-root.js';
 import '../../tooltip/index.js';
 /**
@@ -31,7 +32,17 @@ import '../../tooltip/index.js';
  * The button is named `label`, or the host's `aria-label`, and its name
  * changes to `copied-label` or `error-label` for the moment after a press. The
  * same words are said in a live region, so a screen reader hears the result,
- * and the tooltip shows them.
+ * and the tooltip shows them. The tooltip does not also describe the button,
+ * since its words are the button's name.
+ *
+ * **The tooltip.** It shows the name on hover and focus and the result after a
+ * press. `tooltip="copy"` shows it only for the result, and `tooltip="none"`
+ * draws none, as Web Awesome's copy button offers. `tooltip-placement` is the
+ * side it prefers, and it moves to another side where that one does not fit.
+ *
+ * **Words on the button.** `show-label` draws the name beside the icon, and
+ * the result in its place after a press. The button is as wide as the longest
+ * of the three, so a press does not resize it.
  *
  * @since 0.1.0
  * @status stable
@@ -50,6 +61,7 @@ import '../../tooltip/index.js';
  * @csspart live - The live region that says `copied-label` or `error-label` after a press, and `pending-label` when the button becomes pending under focus. It is rendered from the first time it says anything.
  * @csspart mark - The clipboard icon, and the confirmation icon that replaces it.
  * @csspart spinner - The ring a pending button turns, an empty element the styled button draws over the icon. It is rendered only while the button is pending.
+ * @csspart text - The words beside the icon, under `show-label`. It holds all three, `label`, `copied-label` and `error-label`, with all but the current one hidden.
  * @csspart tooltip - The tooltip bubble, forwarded from the tooltip inside the button.
  * @csspart tooltip-arrow - The tooltip's arrow, which points at the button.
  * @csspart tooltip-arrow-bottom - The arrow while the bubble is below the button, on the bubble's top edge. Set together with `tooltip-arrow`.
@@ -64,7 +76,6 @@ import '../../tooltip/index.js';
  * @cssstate copied - The moment after a successful copy, while `copied-label` names the button.
  * @cssstate failed - The moment after a press that put nothing on the clipboard, while `error-label` names the button.
  *
- * @withheld csspart text - Button's words, which this does not render: the label is the icon's name.
  * @withheld slot end - Button's, which this does not render.
  * @withheld slot start - Button's, which this does not render.
  */
@@ -106,6 +117,24 @@ export declare class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
      * world is called Copy. A consumer with a better word still sets it.
      */
     label: string;
+    /**
+     * Draws the name as words beside the icon, and the result in their place
+     * after a press. The button stays as wide as the longest of them.
+     */
+    showLabel: boolean;
+    /**
+     * When the tooltip shows: `full` on hover and focus and after a press,
+     * `copy` only after a press, to show the result, and `none` never, for a
+     * button whose result shows another way, such as under `show-label`.
+     *
+     * Unset is `full`, and the attribute stays absent until you write it.
+     */
+    tooltip?: 'copy' | 'full' | 'none';
+    /**
+     * The side the tooltip prefers. It moves to another side where this one
+     * does not fit.
+     */
+    tooltipPlacement: Placement;
     /**
      * The text copied to the clipboard.
      *
@@ -156,6 +185,9 @@ export declare class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
      */
     protected get forwardsLabel(): boolean;
     protected willUpdate(changed: PropertyValues): void;
+    /** Whether the last render showed a result, so `tooltip="copy"` opens and closes on the change. */
+    private showedResult;
+    protected updated(changed: PropertyValues): void;
     /** @internal A copy button never submits, so it is no form's default button. */
     protected get submitsForm(): boolean;
     /**
@@ -211,6 +243,14 @@ export declare class HelixHeadlessCopyButton extends HelixHeadlessIconButton {
     protected renderCopiedIcon(): TemplateResult;
     /** The mark for a press that put nothing on the clipboard, behind a seam of its own. */
     protected renderFailedIcon(): TemplateResult;
+    /**
+     * The words beside the icon, under `show-label`, behind a seam of its own.
+     *
+     * All three are drawn and only the current one shows, so the button is as
+     * wide as the longest of them and a press does not resize it. Hidden from a
+     * screen reader, which hears the same words as the button's name.
+     */
+    protected renderText(): TemplateResult | typeof nothing;
     /**
      * The bubble the control sits inside, behind a seam.
      *

package/dist/copy-button/root/copy-button-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessCopyButton_1;
-import { CopyController, customElement, HelixCopyErrorEvent, words } from '@fusion.dev/helix-core';
+import { CopyController, customElement, HelixCopyErrorEvent, words, } from '@fusion.dev/helix-core';
 import { check, copy, x } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -22,8 +22,11 @@ let HelixHeadlessCopyButton = class HelixHeadlessCopyButton extends HelixHeadles
         this.feedbackDuration = 1600;
         this.from = '';
         this.label = 'Copy';
+        this.showLabel = false;
+        this.tooltipPlacement = 'top';
         this.value = '';
         this.namedBy = null;
+        this.showedResult = false;
         this.clipboard = new CopyController(this, { after: () => this.feedbackDuration });
         this.handleCopy = async (event) => {
             if (this.pending) {
@@ -62,6 +65,24 @@ let HelixHeadlessCopyButton = class HelixHeadlessCopyButton extends HelixHeadles
         this.toggleState('copied', this.copied);
         this.toggleState('failed', this.failed);
     }
+    updated(changed) {
+        super.updated(changed);
+        const result = this.copied || this.failed;
+        if (result === this.showedResult) {
+            return;
+        }
+        this.showedResult = result;
+        if (this.tooltip !== 'copy') {
+            return;
+        }
+        const tip = this.renderRoot.querySelector('[data-copy-tooltip]');
+        if (result) {
+            tip?.show();
+        }
+        else {
+            tip?.hide();
+        }
+    }
     get submitsForm() {
         return false;
     }
@@ -94,7 +115,7 @@ let HelixHeadlessCopyButton = class HelixHeadlessCopyButton extends HelixHeadles
       @keydown=${this.notePress}
       @pointerdown=${this.notePress}
     >
-      ${this.renderCopiedIcon()} ${this.renderFailedIcon()} ${this.renderCopyIcon()}${this.renderSpinner()}
+      ${this.renderCopiedIcon()} ${this.renderFailedIcon()} ${this.renderCopyIcon()}${this.renderSpinner()}${this.renderText()}
       </button>`)}${this.renderLive()}`;
     }
     renderCopyIcon() {
@@ -112,8 +133,24 @@ let HelixHeadlessCopyButton = class HelixHeadlessCopyButton extends HelixHeadles
       >${HelixHeadlessCopyButton_1.icon(x)}</slot
     >`;
     }
+    renderText() {
+        if (!this.showLabel) {
+            return nothing;
+        }
+        const resting = !this.copied && !this.failed;
+        return html `<span part="text" aria-hidden="true"
+      ><span ?hidden=${!resting}>${this.namedBy || this.label}</span
+      ><span ?hidden=${!this.copied}>${this.copiedLabel}</span
+      ><span ?hidden=${!this.failed}>${this.errorLabel}</span
+    ></span>`;
+    }
     renderTooltip(control) {
-        return html `<${this.tag('tooltip')} content=${this.says} persist
+        if (this.tooltip === 'none') {
+            return control;
+        }
+        const content = this.tooltip === 'copy' && !this.copied && !this.failed ? '' : this.says;
+        return html `<${this.tag('tooltip')} content=${content} persist
+    data-copy-tooltip placement=${this.tooltipPlacement}
     exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom,
       arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right,
       arrow-top: tooltip-arrow-top, tooltip, tooltip-bottom, tooltip-left, tooltip-right,
@@ -140,6 +177,15 @@ __decorate([
     words,
     property()
 ], HelixHeadlessCopyButton.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'show-label', reflect: true, type: Boolean })
+], HelixHeadlessCopyButton.prototype, "showLabel", void 0);
+__decorate([
+    property()
+], HelixHeadlessCopyButton.prototype, "tooltip", void 0);
+__decorate([
+    property({ attribute: 'tooltip-placement' })
+], HelixHeadlessCopyButton.prototype, "tooltipPlacement", void 0);
 __decorate([
     property()
 ], HelixHeadlessCopyButton.prototype, "value", void 0);

package/dist/data-table/root/data-table-root.d.ts

@@ -208,7 +208,7 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * @csspart select - The cell that holds a row's checkbox.
  * @csspart select-all - The heading that holds the checkbox that selects every row.
  * @csspart select-selected - Added to `select` in a selected row.
- * @csspart table - The grid.
+ * @csspart table - The grid. While `windowed`, the box that scrolls, which needs only a block size on this tier.
  * @csspart toggle - The mark in a row header that a press opens and closes its row by, in a tree grid.
  * @csspart toggle-mark - The caret in `toggle`. It points along the line while the row is closed and down while it is open.
  * @csspart toggle-open - Added to `toggle` while its row is open.
@@ -586,6 +586,10 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * Off by default. Windowing costs a scroll listener, a measurement per row
      * drawn, and a `block-size` on the scrolling box, and a table of twenty rows
      * should pay none of them.
+     *
+     * While windowed, the `table` part scrolls on this tier: it carries
+     * `data-scroller`, and `core` ships `[data-scroller] { overflow: auto }` into
+     * every shadow root. You still need to give it a block size.
      */
     windowed: boolean;
     private sortState;

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

@@ -1228,6 +1228,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         part="table"
         role="rowgroup"
         aria-busy=${this.loading ? 'true' : nothing}
+        ?data-scroller=${this.windowed}
         style=${template ? `--data-table-template: ${template}` : nothing}
         @scroll=${this.handleScroll}
       >

package/dist/dialog/root/dialog-root.js

@@ -31,6 +31,7 @@ let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(
                 '--show': () => this.show(),
                 '--toggle': () => this.toggleOpen(),
             },
+            expanded: () => this.open,
         });
         this.persistent = false;
         this.returned = '';

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

@@ -74,6 +74,10 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * <helix-headless-drawer id="nav">…</helix-headless-drawer>
  * ```
  *
+ * From its first press, a button that opens the drawer this way says whether
+ * the drawer is open: a Helix button through `expanded`, and any other
+ * element with `aria-expanded`.
+ *
  * @since 0.1.0
  * @status stable
  * @category overlays

package/dist/drawer/root/drawer-root.js

@@ -19,6 +19,7 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
                 '--show': () => this.requestOpen(true),
                 '--toggle': () => this.toggleOpen(),
             },
+            expanded: () => this.open,
         });
         this.dismissible = false;
         this.dismissLabel = 'Close';

package/dist/element-events.generated.js

@@ -196,6 +196,7 @@ registerElementEvents({
     'helix-headless-map-terrain': ['helix-map-part-change'],
     'helix-headless-megamenu': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-headless-menu': [
+        'change',
         'helix-before-close',
         'helix-before-open',
         'helix-filter',
@@ -362,7 +363,9 @@ registerElementEvents({
     'helix-headless-virtual-list': [
         'change',
         'helix-before-change',
+        'helix-before-reorder',
         'helix-load-more',
         'helix-range-change',
+        'helix-reorder',
     ],
 });

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

@@ -44,6 +44,7 @@ declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.
  * @slot footer - Content below the graph.
  * @slot fullscreen-icon - Replaces the glyph inside the fullscreen button.
  * @slot header - Content above the graph.
+ * @slot loading - What the panel shows while `loading` is set and the list holds no notes. Defaults to `loading-label`.
  * @slot pan-down-icon - Replaces the glyph inside the pan down button.
  * @slot pan-end-icon - Replaces the glyph inside the button that pans toward the end of a line of text.
  * @slot pan-start-icon - Replaces the glyph inside the button that pans toward the start of a line of text.
@@ -80,6 +81,7 @@ declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.
  * @csspart legend-swatch - The mark in a group's color, before its name.
  * @csspart list - The list of notes, which draws only the rows in view.
  * @csspart live - What screen readers hear: how many notes there are when a search or the legend changes it, and which way the drawing went after a key or a control moved it.
+ * @csspart loading - The box in place of the list while `loading` is set and it holds no notes, holding the `loading` slot.
  * @csspart note - One note in the list.
  * @csspart note-cursor - The note the keyboard is on in the list.
  * @csspart note-linked - A note linked to or from the selected one.
@@ -103,6 +105,7 @@ declare const HelixHeadlessGraph_base: (new (...args: any[]) => import("@fusion.
  * @cssstate empty - The list holds no notes: the graph has none, or a search or the groups hid them all.
  * @cssstate fullscreen - The graph fills the screen.
  * @cssstate idle - The user has been still long enough for the header and footer to fade.
+ * @cssstate loading - While `loading` is set.
  * @cssstate local - The drawing shows the selected note's local graph, with `depth`.
  * @cssstate panel-open - A graph with `no-panel` has the search and the list open over the drawing.
  * @cssstate ready - The graph has been drawn whole, after `helix-graph-ready`.
@@ -169,6 +172,13 @@ export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
     links: readonly GraphLink[];
     /** How a note that links to the selected one is described, with `{note}`. */
     linksToLabel: string;
+    /**
+     * Marks the graph as busy while its notes arrive: the list is `aria-busy`,
+     * and the panel says so where it holds no notes yet.
+     */
+    loading: boolean;
+    /** What the panel says while `loading` is set and the list holds no notes. */
+    loadingLabel: string;
     /** What screen readers hear once the drawing has moved down, after `moved()`. */
     movedDownLabel: string;
     /** What screen readers hear once the drawing has moved left, after `moved()`. */
@@ -185,6 +195,18 @@ export declare class HelixHeadlessGraph extends HelixHeadlessGraph_base {
      * such as at the top of a page, where the drawing takes the whole frame.
      */
     noPanel: boolean;
+    /**
+     * What each note's row in the list shows in place of its name: a function
+     * given the note that returns text, an element or a Lit template.
+     *
+     * For an icon by its kind, or a date under its name, as React Aria's
+     * `ListBoxItem` takes children. The row is still named by the note's name,
+     * which typeahead and the search find it by, and described by how it stands
+     * to the selected note. Return the name with your content where it should
+     * still show. A property only, there being no way to write a function in
+     * markup.
+     */
+    noteContent?: ((node: GraphNode) => unknown) | undefined;
     /** The list's name, read by screen readers, and the name of the button that opens it with `no-panel`. */
     notesLabel: string;
     /**

package/dist/graph/root/graph-root.js

@@ -27,6 +27,8 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
         this.linkedFromLabel = 'Linked from {note}';
         this.links = [];
         this.linksToLabel = 'Links to {note}';
+        this.loading = false;
+        this.loadingLabel = 'Loading notes';
         this.movedDownLabel = 'Moved down';
         this.movedLeftLabel = 'Moved left';
         this.movedRightLabel = 'Moved right';
@@ -163,6 +165,7 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
         super.willUpdate(changed);
         this.toggleState('fullscreen', this.filled);
         this.toggleState('idle', this.resting);
+        this.toggleState('loading', this.loading);
         this.toggleState('panel-open', this.noPanel && this.panelOpen);
         this.toggleState('searching', this.query.trim() !== '');
         this.toggleState('selected', this.active !== '');
@@ -389,14 +392,15 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
         aria-selected=${chosen ? 'true' : 'false'}
         aria-posinset=${index + 1}
         aria-setsize=${total}
-        aria-description=${relation || nothing}
+        aria-describedby=${relation ? `note-${index}-relation` : nothing}
+        aria-label=${this.noteContent ? nameOf(entry.node) : nothing}
         @click=${() => {
                 this.cursor = index;
                 this.choose(index);
             }}
       >
-        <span part="note-name">${nameOf(entry.node)}</span>
-        ${relation ? html `<span part="note-relation" aria-hidden="true">${relation}</span>` : nothing}
+        <span part="note-name">${this.noteContent ? this.noteContent(entry.node) : nameOf(entry.node)}</span>
+        ${relation ? html `<span part="note-relation" id=${`note-${index}-relation`} aria-hidden="true">${relation}</span>` : nothing}
       </div>`;
         })}`;
     }
@@ -458,7 +462,7 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
             data-scroller
             aria-label=${this.notesLabel}
             aria-activedescendant=${cursor}
-            aria-keyshortcuts="ArrowUp ArrowDown Home End PageUp PageDown Enter Space"
+            aria-busy=${this.loading ? 'true' : nothing}
             @keydown=${this.handleListKeydown}
             @scroll=${() => this.virtualize.measure()}
           >
@@ -467,7 +471,9 @@ let HelixHeadlessGraph = class HelixHeadlessGraph extends MixinViewport(MixinCon
             <div part="after" role="presentation" style="block-size: ${after}px"></div>
           </div>
           ${this.entries.length === 0
-            ? html `<div part="empty"><slot name="empty">${this.emptyLabel}</slot></div>`
+            ? this.loading
+                ? html `<div part="loading"><slot name="loading">${this.loadingLabel}</slot></div>`
+                : html `<div part="empty"><slot name="empty">${this.emptyLabel}</slot></div>`
             : nothing}
         </div>
       </div>
@@ -529,6 +535,13 @@ __decorate([
     words,
     property({ attribute: 'links-to-label' })
 ], HelixHeadlessGraph.prototype, "linksToLabel", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessGraph.prototype, "loading", void 0);
+__decorate([
+    words,
+    property({ attribute: 'loading-label' })
+], HelixHeadlessGraph.prototype, "loadingLabel", void 0);
 __decorate([
     words,
     property({ attribute: 'moved-down-label' })
@@ -551,6 +564,9 @@ __decorate([
 __decorate([
     property({ attribute: 'no-panel', reflect: true, type: Boolean })
 ], HelixHeadlessGraph.prototype, "noPanel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessGraph.prototype, "noteContent", void 0);
 __decorate([
     words,
     property({ attribute: 'notes-label' })

package/dist/lightbox/root/lightbox-root.js

@@ -91,6 +91,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
                 '--show': () => this.show(),
                 '--toggle': () => this.toggleOpen(),
             },
+            expanded: () => this.open,
         });
         this.handleSlotChange = () => {
             this.requestUpdate();

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

@@ -244,7 +244,8 @@ export declare class HelixHeadlessList extends HelixElement {
     /**
      * The selected rows' values, separated by commas with no spaces, such as `a,c`, in a list that selects.
      *
-     * Set it to start with rows selected. A row's value is its `value`, or its
+     * A press or a key writes it in row order, as Data Table does, whatever
+     * order the rows were chosen in. Set it to start with rows selected. A row's value is its `value`, or its
      * words where it has none.
      */
     value: string;
@@ -328,6 +329,10 @@ export declare class HelixHeadlessList extends HelixElement {
     /**
      * Selects what a press or a key leaves, asking first. `helix-before-change`
      * carries the `value` it would leave, and `change` follows once it has moved.
+     *
+     * In row order, as Data Table and Table write theirs, whatever order the
+     * rows were chosen in: a press on the fourth row and then the first is
+     * `a,d`.
      */
     private choose;
     /** What `choiceValue` needs of this list for a row. */

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { auditName, commaList, customElement, deepActiveElement, drawStatus, focusItemOf, formatWords, HelixActionEvent, HelixElement, HelixLoadMoreEvent, hostAria, inlineStep, KeyboardNavigationController, placeKey, pressedOwnControl, ReorderController, requestReorder, requestValue, rovingStop, StatusController, scrollingAncestor, scrollRoom, selectsAll, typeaheadByWords, UpgradeController, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { auditName, commaList, customElement, deepActiveElement, drawStatus, focusItemOf, formatWords, HelixActionEvent, HelixElement, HelixLoadMoreEvent, hostAria, inlineStep, inRowOrder, KeyboardNavigationController, placeKey, pressedOwnControl, ReorderController, requestReorder, requestValue, rovingStop, StatusController, scrollingAncestor, scrollRoom, selectsAll, typeaheadByWords, UpgradeController, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessListItem } from '../item/list-item.js';
@@ -262,7 +262,8 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
         if (next === null) {
             return;
         }
-        requestValue(this, next, (value) => {
+        const ordered = inRowOrder(commaList(next), this.rows.map((row) => this.valueFor(row))).join(',');
+        requestValue(this, ordered, (value) => {
             this.value = value;
         });
     }

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

@@ -394,7 +394,8 @@ export declare class HelixHeadlessListbox extends HelixHeadlessListbox_base {
      * sounded the same. Said when the filter changes and the count with it, so
      * a keystroke that leaves the same options says nothing new. An empty filter
      * says nothing, being the list as it was given; no matches is `empty-text`,
-     * which the region says in place of this.
+     * which the region says in place of this. A load that ends says the count
+     * too, whatever the filter.
      */
     private tell;
     /**

package/dist/listbox/root/listbox-root.js

@@ -260,13 +260,14 @@ let HelixHeadlessListbox = class HelixHeadlessListbox extends MixinCollection(Mi
         if (!this.hasUpdated) {
             return;
         }
-        if (!changed.has('filter')) {
+        const loaded = changed.get('loading') === true && !this.loading;
+        if (!changed.has('filter') && !loaded) {
             this.tellActive(changed);
             return;
         }
         const count = this.shown.length;
         this.announced =
-            this.filter.trim() && count
+            (this.filter.trim() || loaded) && count
                 ? this.resultLabel
                     ? countLabel(count, this.resultLabel, this.resultsLabel, wordsLocale(this))
                     : formatWords(this, 'resultsLabel', { count })

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

@@ -81,6 +81,8 @@ import '../../kbd/index.js';
  * @csspart surface - The panel a submenu opens in beside the row, under the menu's `submenus="flyout"`.
  *
  * @cssstate checked - The row is checked.
+ * @cssstate disabled - The row is disabled.
+ * @cssstate expanded - Under `submenus="flyout"`, the row's submenu is open beside it.
  * @cssstate highlighted - In a menu with `filterable`, the arrow keys or the pointer reached the row while focus stays in the filter field.
  * @cssstate submenu-mark - Under `submenus="flyout"`, a row in this row's submenu can be ticked or opens a submenu, so the submenu keeps its trailing column.
  * @cssstate submenu-start - Under `submenus="flyout"`, a row in this row's submenu has content before its label, so the submenu keeps its leading column.

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

@@ -93,6 +93,8 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
         super.willUpdate(changed);
         this.toggleState('checked', this.checked);
         this.toggleState('highlighted', this.virtual && this.highlighted);
+        this.toggleState('disabled', this.disabled);
+        this.toggleState('expanded', this.expanded);
         if (!this.childrenKnown) {
             return;
         }