@fusion.dev/helix-headless 0.171.0 → 0.172.0

package/dist/chat/composer/chat-composer.d.ts

@@ -28,6 +28,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * Sending an empty required composer counts as trying. Tabbing past an empty
  * composer marks nothing.
  *
+ * **`feedback` is a message of your own about the draft**, such as one your
+ * server sent back. While it is set, the composer is invalid at once, does
+ * not send or submit, shows the message under the field, and a screen reader
+ * hears it as it appears. Clear it to let the draft go.
+ *
  * **`typing` says whether the user is writing**, and `helix-typing` is sent
  * each time it changes: when they start, and when they send or stop for
  * `typing-timeout` milliseconds. Pass it on to show "is typing" to the other
@@ -48,13 +53,14 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @csspart composer - The whole composer.
  * @csspart end - The box around the `end` slot.
+ * @csspart feedback - The `feedback` message, under the field while it is set.
  * @csspart field - The text field.
  * @csspart mark - The icon inside the send button.
  * @csspart send - The send button.
  * @csspart start - The box around the `start` slot.
  * @csspart tools - The row under the field.
  *
- * @cssstate invalid - The draft fails `required`, `minlength`, `maxlength`, or a custom error, and the reader has tried to send or submit it, or edited the field and left it.
+ * @cssstate invalid - The draft fails `required`, `minlength`, `maxlength`, or a custom error, and the reader has tried to send or submit it, or edited the field and left it. Or `feedback` is set.
  */
 export declare class HelixHeadlessChatComposer extends HelixFormElement {
     /**
@@ -62,6 +68,12 @@ export declare class HelixHeadlessChatComposer extends HelixFormElement {
      * `registerWords('de', { 'helix-chat-composer': { sendLabel: 'Senden' } })`.
      */
     static words: string;
+    /**
+     * A message about the draft, shown under the field. While set, the composer
+     * is invalid, does not send, and does not submit, as a field's `feedback`
+     * does, and the message is announced as it appears.
+     */
+    feedback: string;
     /**
      * The field's name, read by screen readers.
      */
@@ -123,6 +135,17 @@ export declare class HelixHeadlessChatComposer extends HelixFormElement {
     private writing;
     /** Whether the reader has tried to send or submit the draft, or edited it and left. */
     private touched;
+    /**
+     * Whether the reader has typed in the field since it last held a fresh
+     * draft: since it rendered, since a send cleared it, or since a reset.
+     *
+     * **A send clears the field, and the field still sends `change` as it is
+     * left**, because the platform compares the text with what it held when it
+     * was focused. Measured in Chromium before this: a required composer sent
+     * "hi", cleared, and on Tab showed itself invalid over an empty draft
+     * nobody had written.
+     */
+    private edited;
     /** Whether the composer shows that its draft is wrong. */
     private shownInvalid;
     /** The pause after which the user has stopped writing. */
@@ -147,10 +170,14 @@ export declare class HelixHeadlessChatComposer extends HelixFormElement {
      * back to. `value` does not reflect, so its attribute stays as written.
      */
     private get declared();
+    /** @internal `feedback` marks the composer invalid, as a field's does. */
+    protected get validityFeedback(): string;
     /** Puts back the draft the markup declared when the form is reset. */
     formResetCallback(): void;
     /** The reader has had a go at the draft, so whether it is wrong can be shown. */
     private readonly touch;
+    /** The field's `change`, which counts only after the reader typed in it. */
+    private readonly handleChange;
     /** Brings back the draft when the browser restores the form. */
     formStateRestoreCallback(state: string | File | FormData | null): void;
     /**

package/dist/chat/composer/chat-composer.js

@@ -13,6 +13,7 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFormElement {
     constructor() {
         super(...arguments);
+        this.feedback = '';
         this.label = 'Message';
         this.placeholder = '';
         this.required = false;
@@ -24,15 +25,22 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         this.isChatComposer = true;
         this.writing = false;
         this.touched = false;
+        this.edited = false;
         this.shownInvalid = false;
         this.pause = new DelayController(this, { renders: false });
         this.touch = () => {
             this.touched = true;
             this.requestUpdate();
         };
+        this.handleChange = () => {
+            if (this.edited) {
+                this.touch();
+            }
+        };
         this.handleInput = (event) => {
             event.stopPropagation();
             this.value = event.target.value;
+            this.edited = true;
             this.dispatchEvent(new Event('input'));
             this.markTyping(this.value !== '');
         };
@@ -87,16 +95,21 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         }
         this.value = '';
         this.touched = false;
+        this.edited = false;
         this.markTyping(false);
         return true;
     }
     get declared() {
         return this.getAttribute('value') ?? '';
     }
+    get validityFeedback() {
+        return this.feedback;
+    }
     formResetCallback() {
         super.formResetCallback();
         this.value = this.declared;
         this.touched = false;
+        this.edited = false;
         this.requestUpdate();
     }
     formStateRestoreCallback(state) {
@@ -117,7 +130,7 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         if (field?.validity) {
             this.internals.setValidity(field.validity, field.validationMessage, field);
         }
-        const invalid = this.touched && !this.internals.validity.valid;
+        const invalid = this.feedback !== '' || (this.touched && !this.internals.validity.valid);
         this.toggleState('invalid', invalid);
         this.internals.ariaInvalid = invalid ? 'true' : 'false';
         if (invalid !== this.shownInvalid) {
@@ -166,8 +179,9 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         minlength=${this.minLength ?? nothing}
         maxlength=${this.maxLength ?? nothing}
         aria-invalid=${this.shownInvalid ? 'true' : nothing}
+        aria-describedby=${this.feedback === '' ? nothing : 'feedback'}
         ?disabled=${this.isDisabled}
-        @change=${this.touch}
+        @change=${this.handleChange}
         @input=${this.handleInput}
         @keydown=${this.handleKey}
       ></textarea>
@@ -176,9 +190,14 @@ let HelixHeadlessChatComposer = class HelixHeadlessChatComposer extends HelixFor
         <span part="end"><slot name="end"></slot></span>
         ${this.renderSend()}
       </div>
-    </div>`;
+    </div>${this.feedback === ''
+            ? nothing
+            : html `<p part="feedback" id="feedback" role="alert">${this.feedback}</p>`}`;
     }
 };
+__decorate([
+    property()
+], HelixHeadlessChatComposer.prototype, "feedback", void 0);
 __decorate([
     words,
     property()

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

@@ -37,6 +37,13 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
  * `loading` while you fetch, then prepend the older turns. The turn the user
  * was reading stays in place on screen.
  *
+ * The transcript is a `log`, the role for content added in order where the
+ * newest matters most, and it answers the APG feed's keys. The `feed` role
+ * reads its articles as a list from the top, with no newest end to stay
+ * pinned to, so the log keeps the role a conversation has. While `loading` is
+ * set or older turns load, the log carries `aria-busy`, as the APG asks of a
+ * feed.
+ *
  * The log is `aria-live="off"`. A separate status region announces each new
  * turn once, when it has finished arriving. It skips the user's own turns
  * unless they failed to send, turns loaded as history, and the turns already
@@ -49,6 +56,12 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
  * conversations. `turns` draws a long
  * transcript one window at a time, so the log needs a block size of its own.
  *
+ * The log scrolls on this tier. It carries `data-scroller`, and `core` ships
+ * `[data-scroller] { overflow: auto }` into every shadow root, so pinning,
+ * history and the window work with no stylesheet. You still need to give the
+ * log a block size, such as `helix-headless-chat::part(log) { block-size:
+ * 20rem }`.
+ *
  * **A conversation is built from three elements.** The chat holds the
  * transcript, a `Chat.Message` stands for each turn, and a `Chat.Composer` sits
  * in the `composer` slot. When the user sends, `helix-send` reaches the chat:
@@ -65,7 +78,9 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
  * turn says its place, such as "3 of 40", windowed or not. The transcript is
  * a tab stop while it holds a turn, and the turn a reader moved to is one
  * too. Moving to an older turn unpins a transcript that scrolls and scrolls
- * the turn into view, and moving to the newest pins it again.
+ * the turn into view, and moving to the newest pins it again. When the turn
+ * holding focus is removed, focus moves to the turn that took its place, or to
+ * the one before it where it was the last.
  *
  * | Key | What it does |
  * |---|---|
@@ -120,7 +135,7 @@ declare const HelixHeadlessChat_base: (new (...args: any[]) => import("@fusion.d
  * @csspart indicator - The three dots before the words that say who is typing, which the styled tier animates as a message's are. Hidden from screen readers.
  * @csspart live - The region where screen readers announce each turn once it has arrived.
  * @csspart loading - Shown while the history loads.
- * @csspart log - The transcript, which scrolls.
+ * @csspart log - The transcript, which scrolls. On this tier, it needs only a block size.
  * @csspart message - The message drawn for a turn from `turns`, forwarded whole.
  * @csspart message-actions - The controls on a turn from `turns`, beside its time.
  * @csspart message-avatar - The avatar box of a turn from `turns`.
@@ -518,6 +533,27 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
      */
     private follow;
     protected updated(changed: PropertyValues): void;
+    /** The turn focus is in, by its place and its identity, once a reader is in one. */
+    private held;
+    /** Notes the turn focus went into, or that it went somewhere else. */
+    private readonly handleFocusIn;
+    /**
+     * Forgets the turn once focus moves to something outside the transcript.
+     * A move to nothing is kept, since removing the turn that held focus is
+     * one.
+     */
+    private readonly handleFocusOut;
+    /**
+     * Moves focus to a neighbor where removing the turn that held it dropped
+     * focus to the body: the turn that took its place, or the one before it
+     * where it was the last.
+     *
+     * **Focus went to the body**, and Page Down did nothing until the reader
+     * tabbed back into the transcript. List and Virtual List move focus to a
+     * neighbor the same way, as React Aria's GridList does. Focus anywhere but
+     * the body is where you put it, and is left there.
+     */
+    private followRemoved;
     /**
      * Hands each turn written as a child the words it is named with, once it
      * has hydrated, so its first render is the server's.

package/dist/chat/root/chat-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 HelixHeadlessChat_1;
-import { ChildrenController, customElement, drawIcon, focusableElements, formatWords, HelixBeforePinEvent, HelixElement, HelixHistoryEvent, HelixPinEvent, hostAria, MixinCollection, onUnlessFalse, reportRuntime, requestChange, UpgradeController, VirtualizeController, whenHydrated, words, wordsConverter, } from '@fusion.dev/helix-core';
+import { ChildrenController, customElement, deepActiveElement, drawIcon, focusableElements, formatWords, HelixBeforePinEvent, HelixElement, HelixHistoryEvent, HelixPinEvent, hostAria, MixinCollection, onUnlessFalse, reportRuntime, requestChange, UpgradeController, VirtualizeController, whenHydrated, words, wordsConverter, } from '@fusion.dev/helix-core';
 import { arrowDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -98,6 +98,21 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
             this.resume();
         };
         this.warnedMixed = false;
+        this.handleFocusIn = (event) => {
+            const at = this.turnFrom(event.composedPath());
+            if (at === undefined || at < 0) {
+                this.held = undefined;
+                return;
+            }
+            const id = this.fed ? this.identity(this.turns[at]) : this.messages[at];
+            this.held = { at, id };
+        };
+        this.handleFocusOut = (event) => {
+            const to = event.relatedTarget;
+            if (to instanceof Node && !this.contains(to) && !this.renderRoot?.contains?.(to)) {
+                this.held = undefined;
+            }
+        };
         this.handleKeydown = (event) => {
             if (event.defaultPrevented || event.altKey || event.metaKey || event.shiftKey) {
                 return;
@@ -423,6 +438,8 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('keydown', this.handleKeydown);
+        this.addEventListener('focusin', this.handleFocusIn);
+        this.addEventListener('focusout', this.handleFocusOut);
         this.settling = new MutationObserver(this.handleSettle);
         this.settling.observe(this, { attributeFilter: ['state'], subtree: true });
         this.opening = true;
@@ -436,6 +453,8 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('keydown', this.handleKeydown);
+        this.removeEventListener('focusin', this.handleFocusIn);
+        this.removeEventListener('focusout', this.handleFocusOut);
         this.settling?.disconnect();
         this.settling = undefined;
         this.grower?.disconnect();
@@ -506,6 +525,23 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         this.remember();
         this.reachHistory();
         this.announce();
+        this.followRemoved();
+    }
+    followRemoved() {
+        const held = this.held;
+        if (held === undefined) {
+            return;
+        }
+        const ids = this.fed ? this.turns.map((turn) => this.identity(turn)) : this.messages;
+        if (ids.includes(held.id)) {
+            return;
+        }
+        this.held = undefined;
+        const active = deepActiveElement();
+        if (ids.length === 0 || (active !== null && active !== document.body)) {
+            return;
+        }
+        void this.focusTurn(Math.min(held.at, ids.length - 1));
     }
     tellTurns() {
         const messages = this.messages;
@@ -670,6 +706,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         part="log"
         role="log"
         aria-live="off"
+        data-scroller
         aria-label=${this.label || this.fallbackLabel}
         aria-busy=${busy ? 'true' : nothing}
         ?data-windowed=${fed}

package/dist/color-input/root/color-input-root.d.ts

@@ -31,7 +31,8 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  *
  * The trigger and ArrowDown open the panel with focus in the square. Tab moves
  * between the panel's controls without leaving it, and Escape closes it and
- * returns focus to the field.
+ * returns focus to the control that opened it: the trigger after a press, and
+ * the field after ArrowDown.
  *
  * The component sets `--color-input-swatch`, so do not set it yourself. It
  * holds the resolved color, so the styled tier can paint the swatch without
@@ -305,6 +306,19 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
      */
     protected sync(): void;
     protected updated(changed: PropertyValues): void;
+    /** Whether the trigger's press opened the panel that is open now. */
+    private pressedOpen;
+    /**
+     * The trigger's press, which notes that it opened the panel, so Escape hands
+     * focus back to the trigger.
+     */
+    private readonly handlePress;
+    /**
+     * Hands focus back to the control that opened the panel: the trigger after
+     * its press, which is the APG date picker dialog's rule, and the text after
+     * ArrowDown from it.
+     */
+    protected returnFocus(): void;
     /**
      * The picker the field opens, behind a seam the styled tier can move.
      *

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

@@ -55,6 +55,12 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         this.handleSampleEnd = () => {
             this.requestOpen(true);
         };
+        this.pressedOpen = false;
+        this.handlePress = () => {
+            const opening = !this.open;
+            this.handleTriggerClick();
+            this.pressedOpen = opening && this.open;
+        };
     }
     static { this.words = 'helix-color-input'; }
     requestValue(next) {
@@ -117,6 +123,18 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         if (changed.has('value') && parseColor(this.value)) {
             this.settled = this.value;
         }
+        if (changed.has('open') && !this.open) {
+            this.pressedOpen = false;
+        }
+    }
+    returnFocus() {
+        const trigger = this.pressedOpen ? this.partNamed('trigger') : null;
+        this.pressedOpen = false;
+        if (trigger) {
+            trigger.focus();
+            return;
+        }
+        super.returnFocus();
     }
     renderPicker() {
         return html `<${this.tag('color-picker')}
@@ -204,7 +222,7 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
                 : 'swatch-value'
             : nothing}
           ?disabled=${this.isDisabled}
-          @click=${this.handleTriggerClick}
+          @click=${this.handlePress}
         >
           <span
             part="preview"

package/dist/color-picker/root/color-picker-root.d.ts

@@ -445,7 +445,11 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * field shows the color the reset put back.
      */
     formResetCallback(): void;
-    /** The line `said` holds, or nothing while it is empty. */
+    /**
+     * The line `said` holds, or nothing while it is empty. `role="alert"`, as
+     * every field's feedback line has, so the message is announced when it
+     * appears.
+     */
     protected renderPickerFeedback(): TemplateResult | typeof nothing;
     /** Whether a pointer is dragging the square's handle, said as `:state(dragging)`. */
     private dragging;

package/dist/color-picker/root/color-picker-root.js

@@ -309,7 +309,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
     }
     renderPickerFeedback() {
         const said = this.said;
-        return said === '' ? nothing : html `<p part="feedback" id="feedback">${said}</p>`;
+        return said === '' ? nothing : html `<p part="feedback" id="feedback" role="alert">${said}</p>`;
     }
     settle() {
         if (this.unsettled) {

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',

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/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;
         }