@fusion.dev/helix-headless 0.153.0 → 0.155.0

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

@@ -25,6 +25,10 @@ declare const HelixHeadlessAccordionItem_base: (new (...args: any[]) => import("
  * and a closed section is `hidden` and `inert` instead, and find in page skips
  * it.
  *
+ * A section whose trigger has no words, with nothing in its `summary` slot,
+ * is announced as a bare button, and a development build warns once with the
+ * kind `missing-name`.
+ *
  * While it is open, the content part carries the content's height as
  * `--accordion-content-height`, as Radix's accordion does, for a stylesheet
  * that animates the section open with keyframes of its own.
@@ -51,6 +55,7 @@ declare const HelixHeadlessAccordionItem_base: (new (...args: any[]) => import("
  *
  * @cssproperty --accordion-content-height - The height of the content, in pixels, written on the `content` part while the section is open.
  *
+ * @cssstate closing - While the item has closed and its content is still drawn, until the content part's animations end.
  * @cssstate open - While the item is open.
  */
 export declare class HelixHeadlessAccordionItem extends HelixHeadlessAccordionItem_base {
@@ -88,6 +93,11 @@ export declare class HelixHeadlessAccordionItem extends HelixHeadlessAccordionIt
      * for the reason `groupHeadingLevel` is a property.
      */
     groupHiddenUntilFound: boolean;
+    /**
+     * @internal The accordion's `mode`, written by the accordion, so the trigger
+     * of the open section says it cannot close under `single`.
+     */
+    groupMode: 'single' | 'single-collapsible' | undefined;
     /**
      * The level of the heading around the trigger, from 1 to 6.
      *
@@ -155,6 +165,7 @@ export declare class HelixHeadlessAccordionItem extends HelixHeadlessAccordionIt
      * and runs before the next paint or key press.
      */
     private readonly handleBeforeMatch;
+    protected firstUpdated(changed: PropertyValues): void;
     /** Whether the item was open at the last update, and `undefined` before one. */
     private wasOpen;
     /**
@@ -239,6 +250,10 @@ export declare class HelixHeadlessAccordionItem extends HelixHeadlessAccordionIt
      * the accessibility tree by itself, and an inert region is never searched.
      * It leaves the region's own box in the tree, so a closed findable section
      * drops `role="region"` and its name until it opens.
+     *
+     * Under `mode="single"` the open section's trigger is `aria-disabled`, as in
+     * Radix, because a press cannot close the last open section. It stays
+     * focusable, so the arrow keys still reach it.
      */
     protected render(): TemplateResult;
 }

package/dist/accordion/item/accordion-item.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 { animationsFinished, closestInstance, customElement, HelixElement, headingLevel, MixinControllerOpen, onUnlessFalse, } from '@fusion.dev/helix-core';
+import { animationsFinished, auditName, closestInstance, customElement, HelixElement, headingLevel, MixinControllerOpen, onUnlessFalse, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -18,6 +18,7 @@ let HelixHeadlessAccordionItem = class HelixHeadlessAccordionItem extends MixinC
         this.disabled = false;
         this.groupHeadingLevel = undefined;
         this.groupHiddenUntilFound = true;
+        this.groupMode = undefined;
         this.closing = false;
         this.handleBeforeMatch = (event) => {
             if (this.open || this.requestOpen(true)) {
@@ -76,6 +77,7 @@ let HelixHeadlessAccordionItem = class HelixHeadlessAccordionItem extends MixinC
         if (changed.has('open')) {
             this.closing = !this.open && changed.get('open') === true && this.findable;
         }
+        this.toggleState('closing', this.closing);
     }
     finishClosing() {
         void animationsFinished(this.partNamed('content')).then(() => {
@@ -84,6 +86,10 @@ let HelixHeadlessAccordionItem = class HelixHeadlessAccordionItem extends MixinC
             }
         });
     }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        auditName(this, () => this.renderRoot.querySelector(`#${TRIGGER_ID}`), 'Write its title in the `summary` slot.');
+    }
     get accordion() {
         return closestInstance(this, HelixHeadlessAccordion);
     }
@@ -129,12 +135,14 @@ let HelixHeadlessAccordionItem = class HelixHeadlessAccordionItem extends MixinC
         const shown = open || this.closing;
         const landmark = shown || !this.findable;
         const level = headingLevel(this.headingLevel ?? this.groupHeadingLevel);
+        const locked = open && this.groupMode === 'single';
         return html `
       <div part="container">
         <div part="heading" role="heading" aria-level=${level}>
         <button
           id=${TRIGGER_ID}
           aria-controls=${CONTENT_ID}
+          aria-disabled=${locked ? 'true' : nothing}
           aria-expanded=${open ? 'true' : 'false'}
           part="trigger"
           type="button"
@@ -175,6 +183,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessAccordionItem.prototype, "groupHiddenUntilFound", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessAccordionItem.prototype, "groupMode", void 0);
 __decorate([
     property({ attribute: 'heading-level', type: Number })
 ], HelixHeadlessAccordionItem.prototype, "headingLevel", void 0);

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

@@ -20,7 +20,8 @@ import { HelixHeadlessAccordionItem } from '../item/accordion-item.js';
  * Keys, on a trigger: Up and Down Arrow move to the previous and the next
  * trigger, and so do Left and Right, wrapping at the ends; Home and End go to
  * the first and the last. Enter and Space open and close the section. Disabled
- * sections are passed over.
+ * sections are passed over. Under `single` the open section's trigger is
+ * `aria-disabled`, because a press cannot close it.
  *
  * Each trigger is a button with `aria-expanded` and `aria-controls`, inside a
  * heading, level 3 unless `heading-level` says otherwise, so the sections are

package/dist/accordion/root/accordion-root.js

@@ -32,6 +32,7 @@ let HelixHeadlessAccordion = class HelixHeadlessAccordion extends HelixElement {
             whenHydrated(item, () => {
                 item.groupHeadingLevel = this.headingLevel;
                 item.groupHiddenUntilFound = this.hiddenUntilFound;
+                item.groupMode = this.mode;
             });
         }
         if (this.mode === undefined) {

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

@@ -35,6 +35,12 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * button "Inbox 8 unread", and stays current as the count changes. The styled
  * tier's `placement="inline"` draws the mark in the line for that case.
  *
+ * **An icon goes inside the mark** through the `icon` slot, before the count,
+ * as Web Awesome's badge takes one at its start. With no `value` the icon is
+ * the whole mark, such as a check on an avatar, drawn where the dot would be.
+ * The icon is hidden from screen readers: the count and `label` are what the
+ * mark says.
+ *
  * @since 0.1.0
  * @status stable
  * @category markers
@@ -42,12 +48,15 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/badge
  *
  * @slot - The element being decorated.
+ * @slot icon - An icon inside the mark, before the count, or the whole mark when there is no value. Hidden from screen readers.
  *
- * @csspart indicator - The count, or the dot when there is no value.
+ * @csspart icon - The slot the icon arrives through, inside the indicator. A slot draws no box, so it passes inherited properties, such as color, to the icon.
+ * @csspart indicator - The count, or the dot when there is no value. Carries `data-dot` when there is no value, `data-single` when the count is one character, and `data-blank` when the value is zero.
  *
  * @cssstate blank - The value is zero, so there is no mark.
  * @cssstate capped - The count is past `max`, so the mark shows `{max}+`.
- * @cssstate dot - There is no value, so the mark is a dot.
+ * @cssstate dot - There is no value and no icon, so the mark is a dot.
+ * @cssstate has-icon - Something is slotted into `icon`, so it is drawn inside the mark.
  */
 export declare class HelixHeadlessBadge extends HelixElement {
     /**
@@ -98,6 +107,10 @@ export declare class HelixHeadlessBadge extends HelixElement {
      * is showing a count must not lose the count for being handed one.
      */
     value: number | string;
+    /** Whether something is slotted into `icon`, read from the children. */
+    private hasIcon;
+    /** Reads whether an icon is slotted, from the children where they can be known. */
+    private readonly readIcon;
     /** The value as text, whatever it was set to. */
     private get given();
     /** Whether the value counts nothing, in which case there is no mark. */

package/dist/badge/root/badge-root.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement, focusTarget, HelixElement, wordsLocale } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { badgeBlank, badgeCapped, badgeText, badgeWords } from '../count.js';
 let HelixHeadlessBadge = class HelixHeadlessBadge extends HelixElement {
     constructor() {
@@ -14,6 +14,10 @@ let HelixHeadlessBadge = class HelixHeadlessBadge extends HelixElement {
         this.label = '';
         this.locale = '';
         this.value = '';
+        this.hasIcon = false;
+        this.readIcon = () => {
+            this.hasIcon = this.knownChildren.some((child) => child.slot === 'icon');
+        };
         this.handleSlotchange = () => {
             this.describe();
         };
@@ -81,9 +85,13 @@ let HelixHeadlessBadge = class HelixHeadlessBadge extends HelixElement {
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        if (!this.hasUpdated) {
+            this.readIcon();
+        }
         this.toggleState('capped', this.capped);
-        this.toggleState('dot', this.given.trim() === '');
+        this.toggleState('dot', this.given.trim() === '' && !this.hasIcon);
         this.toggleState('blank', this.blank);
+        this.toggleState('has-icon', this.hasIcon);
     }
     updated(changed) {
         super.updated(changed);
@@ -97,10 +105,16 @@ let HelixHeadlessBadge = class HelixHeadlessBadge extends HelixElement {
       <span
         part="indicator"
         data-blank=${blank ? '' : nothing}
+        data-dot=${this.given.trim() === '' ? '' : nothing}
         data-single=${text.length <= 1 ? '' : nothing}
         role="status"
         aria-label=${announced ? this.words : nothing}
-        >${blank ? html `<span aria-hidden="true">${text}</span>` : text}</span
+        ><slot
+          aria-hidden="true"
+          name="icon"
+          part="icon"
+          @slotchange=${this.readIcon}
+        ></slot>${blank ? html `<span aria-hidden="true">${text}</span>` : text}</span
       >`;
     }
 };
@@ -119,6 +133,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessBadge.prototype, "value", void 0);
+__decorate([
+    state()
+], HelixHeadlessBadge.prototype, "hasIcon", void 0);
 HelixHeadlessBadge = __decorate([
     customElement('helix-headless-badge')
 ], HelixHeadlessBadge);

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

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
+import { type CSSResultGroup, nothing, type PropertyValues, type TemplateResult } from 'lit';
 /**
  * @summary One step in a breadcrumb trail.
  *
@@ -11,8 +11,11 @@ import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'l
  * Set `href` to make the whole crumb an anchor, which works with Enter, middle
  * click, and the status bar, and before any JavaScript runs. A router cannot
  * reach an anchor inside a shadow root, so intercept the click for client-side
- * navigation, as with `Tree.Item` and `List.Item`. A trail that collapses also
- * reads `href` to rebuild its hidden crumbs elsewhere.
+ * navigation, as with `Tree.Item` and `List.Item`: a plain press on the link
+ * sends `helix-select` with the `href` as its value first, and canceling it
+ * keeps the browser from following, so a client-side router follows it
+ * instead, as React Aria's `onAction` lets a router do. A press with a
+ * modifier opens the link where the browser opens it and sends nothing.
  *
  * Without `href`, the crumb renders a plain `<span>` around what you slot,
  * including your own anchor.
@@ -37,12 +40,18 @@ import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'l
  * @slot separator - Replaces the chevron shown before this item.
  * @slot start - Content before the label, such as an icon.
  *
+ * @event {HelixSelectEvent} helix-select - A plain press on the crumb's link, with its `href` as the value, before the browser follows it. Cancelable: cancel it to keep the browser from following, as a client-side router does.
+ *
+ * @csspart expand - The button after the first crumb of a folded slotted trail, which shows the folded crumbs.
+ * @csspart fold-separator - The chevron before that button.
  * @csspart link - The crumb itself, which is an `<a>` where `href` is set.
  * @csspart separator - The separator preceding the item.
  * @csspart separator-mark - The chevron between crumbs, shown when no separator is slotted.
  *
+ * @cssstate current - While the crumb is the current page, marked `current` or the last of a trail with none marked.
  * @cssstate end - While the `end` slot holds something, so a stylesheet can join
  * the label and what follows it into one control.
+ * @cssstate folded - While a trail longer than its `max-items` has folded the crumb away. It takes no room.
  */
 export declare class HelixHeadlessBreadcrumb extends HelixElement {
     static styles: CSSResultGroup;
@@ -50,6 +59,18 @@ export declare class HelixHeadlessBreadcrumb extends HelixElement {
      * Marks this item as the page you are on.
      */
     current: boolean;
+    /**
+     * @internal Set by the trail: how many crumbs after this one a slotted trail
+     * longer than its `max-items` has folded, so this crumb draws the button
+     * that shows them. 0 draws none.
+     */
+    fold: number;
+    /**
+     * @internal Set by the trail: whether this crumb is folded away.
+     */
+    folded: boolean;
+    /** @internal Set by the trail: the name of the button that shows the folded crumbs. */
+    foldLabel: string;
     /**
      * The URL the crumb links to. The current page has none.
      *
@@ -74,6 +95,8 @@ export declare class HelixHeadlessBreadcrumb extends HelixElement {
      * `current`, so this one is said to be the current page.
      */
     implied: boolean;
+    /** @internal Set by the trail: what a press on the fold's button does. */
+    onFold: (() => void) | undefined;
     /**
      * The link's `rel` value, which describes how the linked page relates to this
      * one.
@@ -86,6 +109,16 @@ export declare class HelixHeadlessBreadcrumb extends HelixElement {
      */
     target: string;
     protected willUpdate(changed: PropertyValues): void;
+    /**
+     * Sends `helix-select` for a plain press on the link, and keeps the browser
+     * from following where it was canceled.
+     */
+    private readonly handleLinkClick;
+    /**
+     * The button that shows the crumbs a slotted trail folded after this one,
+     * with a chevron before it, drawn after the crumb's own label.
+     */
+    protected renderFold(): TemplateResult | typeof nothing;
     protected updated(changed: PropertyValues): void;
     /**
      * Says whether anything sits after the label.

package/dist/breadcrumbs/breadcrumb/breadcrumb.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 { customElement, HelixElement, hostAria, slotFilled, slotNamed, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, HelixSelectEvent, hostAria, plainClick, slotFilled, slotNamed, } from '@fusion.dev/helix-core';
 import { caretRight } from '@fusion.dev/helix-icons';
 import { css, html, nothing, } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -13,9 +13,21 @@ let HelixHeadlessBreadcrumb = class HelixHeadlessBreadcrumb extends HelixElement
     constructor() {
         super(...arguments);
         this.current = false;
+        this.fold = 0;
+        this.folded = false;
+        this.foldLabel = '';
         this.implied = false;
+        this.onFold = undefined;
         this.rel = '';
         this.target = '';
+        this.handleLinkClick = (event) => {
+            if (!plainClick(event)) {
+                return;
+            }
+            if (!this.dispatchEvent(new HelixSelectEvent({ value: this.href ?? '' }))) {
+                event.preventDefault();
+            }
+        };
         this.handleEnd = () => {
             this.markEnd();
         };
@@ -24,11 +36,29 @@ let HelixHeadlessBreadcrumb = class HelixHeadlessBreadcrumb extends HelixElement
     :host(:first-child) [part='separator'] {
       display: none;
     }
+
+    :host(:state(folded)) {
+      display: none;
+    }
   `; }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'listitem' });
         this.internals.ariaCurrent = this.current || this.implied ? 'page' : null;
+        this.toggleState('current', this.current || this.implied);
+        this.toggleState('folded', this.folded);
+    }
+    renderFold() {
+        if (this.fold === 0) {
+            return nothing;
+        }
+        return html `<span part="fold-separator" aria-hidden="true"
+        ><svg data-mirror fill="currentColor" viewBox=${caretRight.viewBox}>
+          ${unsafeSVG(caretRight.content)}
+        </svg></span
+      ><button part="expand" type="button" aria-label=${this.foldLabel} @click=${() => this.onFold?.()}>
+        …
+      </button>`;
     }
     updated(changed) {
         super.updated(changed);
@@ -55,14 +85,24 @@ let HelixHeadlessBreadcrumb = class HelixHeadlessBreadcrumb extends HelixElement
               href=${this.href ?? ''}
               target=${this.target || nothing}
               rel=${this.rel || nothing}
+              @click=${this.handleLinkClick}
               >${label}</a
             >`
-            : html `<span part="link">${label}</span>`}<slot name="end" @slotchange=${this.handleEnd}></slot>`;
+            : html `<span part="link">${label}</span>`}<slot name="end" @slotchange=${this.handleEnd}></slot>${this.renderFold()}`;
     }
 };
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessBreadcrumb.prototype, "current", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessBreadcrumb.prototype, "fold", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessBreadcrumb.prototype, "folded", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessBreadcrumb.prototype, "foldLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessBreadcrumb.prototype, "href", void 0);

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

@@ -35,11 +35,13 @@ export interface BreadcrumbItem {
  * array of `{ label, href }`, drawn as crumbs in order, the last one as the
  * current page. Slotted crumbs follow them. Use one way or the other in a trail.
  *
- * With `max-items`, a trail drawn from `items` that is longer folds its middle
- * into one crumb: the first crumb, a button, then the last `max-items` less one.
- * The button is named by `expand-label` and shows the whole trail, moving focus
- * to the first crumb it brought back. A new `items` folds again. Slotted crumbs
- * do not fold; write the folded crumb where the gap should be.
+ * With `max-items`, a trail that is longer folds its middle into one place:
+ * the first crumb, a button, then the last `max-items` less one. The button is
+ * named by `expand-label` and shows the whole trail, moving focus to the first
+ * crumb it brought back. A trail drawn from `items` draws the button as a
+ * crumb of its own, and a new `items` folds again. A slotted trail hides the
+ * crumbs it folds, which take no room, and its first crumb draws the button
+ * after its link; a change to the crumbs folds again.
  *
  * **Keyboard.** Each crumb with an `href` is a link and one tab stop, and
  * Enter follows it. The current page and the separators are not in the tab
@@ -58,6 +60,8 @@ export interface BreadcrumbItem {
  * @csspart crumb - Each crumb drawn from `items`.
  * @csspart crumb-collapsed - The crumb that holds the folded middle of a trail longer than `max-items`.
  * @csspart crumb-current - The crumb drawn from `items` for the current page.
+ * @csspart crumb-expand - The fold button a crumb draws after the first crumb of a folded slotted trail. A trail drawn from `items` draws its fold as a crumb of its own, `crumb-collapsed`, so this one is never drawn there.
+ * @csspart crumb-fold-separator - The chevron before that button.
  * @csspart crumb-link - The link, or the current page's words, of a crumb drawn from `items`.
  * @csspart crumb-separator - The separator before a crumb drawn from `items`.
  * @csspart crumb-separator-mark - The chevron before a crumb drawn from `items`.
@@ -98,6 +102,10 @@ export declare class HelixHeadlessBreadcrumbs extends HelixElement {
     maxItems?: number;
     /** Whether a reader has asked to see the whole of a folded trail. */
     private expanded;
+    /** The crumbs slotted into the trail, in order. */
+    private get slotted();
+    /** Shows the whole of a folded slotted trail and moves focus to the first crumb it brought back. */
+    private readonly unfold;
     /** Shows the whole trail and moves focus to the first crumb it brought back. */
     private readonly expand;
     protected willUpdate(changed: PropertyValues): void;
@@ -110,6 +118,8 @@ export declare class HelixHeadlessBreadcrumbs extends HelixElement {
      * not reflect, so nothing is written onto your markup.
      */
     private readonly markLast;
+    /** New crumbs fold again, as a new `items` does. */
+    private readonly handleSlotChange;
     /** The crumbs `items` describes, each a crumb of this tier. */
     protected renderItems(): TemplateResult | typeof nothing;
     protected render(): TemplateResult;

package/dist/breadcrumbs/root/breadcrumbs-root.js

@@ -17,6 +17,15 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
         this.items = [];
         this.label = 'Breadcrumb';
         this.expanded = false;
+        this.unfold = () => {
+            this.expanded = true;
+            this.updateComplete.then(() => {
+                const crumb = this.slotted[1];
+                const link = crumb?.shadowRoot?.querySelector('a[part="link"]') ??
+                    crumb?.querySelector('a[href]');
+                link?.focus();
+            });
+        };
         this.expand = () => {
             this.expanded = true;
             this.updateComplete.then(() => {
@@ -25,16 +34,32 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
             });
         };
         this.markLast = () => {
-            const crumbs = (this.renderRoot.querySelector('slot:not([name])')?.assignedElements() ?? []).filter((one) => one instanceof HelixHeadlessBreadcrumb);
+            const crumbs = this.slotted;
             const marked = crumbs.some((one) => one.current);
+            const most = this.maxItems ?? 0;
+            const fold = !this.expanded && this.items.length === 0 && most >= 2 && crumbs.length > most
+                ? crumbs.length - most
+                : 0;
+            const label = fold > 0 ? formatWords(this, 'expandLabel', { count: fold }) : '';
             crumbs.forEach((crumb, index) => {
                 whenHydrated(crumb, () => {
                     crumb.implied = !marked && this.items.length === 0 && index === crumbs.length - 1;
+                    crumb.folded = index > 0 && index <= fold;
+                    crumb.fold = index === 0 ? fold : 0;
+                    crumb.foldLabel = index === 0 ? label : '';
+                    crumb.onFold = index === 0 && fold > 0 ? this.unfold : undefined;
                 });
             });
         };
+        this.handleSlotChange = () => {
+            this.expanded = false;
+            this.markLast();
+        };
     }
     static { this.words = 'helix-breadcrumbs'; }
+    get slotted() {
+        return (this.renderRoot?.querySelector('slot:not([name])')?.assignedElements() ?? []).filter((one) => one instanceof HelixHeadlessBreadcrumb);
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label, role: 'navigation' });
@@ -65,7 +90,7 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
             ? nothing
             : html `<${crumb}
             part="crumb crumb-collapsed"
-            exportparts="link: crumb-link, separator: crumb-separator, separator-mark: crumb-separator-mark"
+            exportparts="expand: crumb-expand, fold-separator: crumb-fold-separator, link: crumb-link, separator: crumb-separator, separator-mark: crumb-separator-mark"
             ><button
               part="expand"
               type="button"
@@ -79,7 +104,7 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
         const rest = shown.slice(1);
         const draw = ({ index, item }) => html `<${crumb}
         part="crumb${index === last ? ' crumb-current' : ''}"
-        exportparts="link: crumb-link, separator: crumb-separator, separator-mark: crumb-separator-mark"
+        exportparts="expand: crumb-expand, fold-separator: crumb-fold-separator, link: crumb-link, separator: crumb-separator, separator-mark: crumb-separator-mark"
         href=${index === last ? nothing : (item.href ?? nothing)}
         rel=${item.rel ?? nothing}
         target=${item.target ?? nothing}
@@ -90,7 +115,7 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
     }
     render() {
         return html `<ol part="list" role="list">
-      ${this.renderItems()}<slot @slotchange=${this.markLast}></slot>
+      ${this.renderItems()}<slot @slotchange=${this.handleSlotChange}></slot>
     </ol>`;
     }
 };

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

@@ -65,6 +65,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired before a press changes `value`, with the value it would leave in `detail.value`. Cancelable: call `preventDefault()` to keep the buttons as they are.
  *
  * @cssproperty --button-group-pressed - Written on the control inside each toggle button of a group with `selection-mode`: `1` while it is pressed and `0` while it is not. Read it in a `::part(button)` rule to draw the pressed look.
+ *
+ * @cssstate pressed - While a group with `selection-mode` has a button pressed.
  */
 export declare class HelixHeadlessButtonGroup extends HelixElement {
     /**

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

@@ -145,6 +145,7 @@ let HelixHeadlessButtonGroup = class HelixHeadlessButtonGroup extends HelixEleme
         const toolbar = this.roving;
         hostAria(this.internals, { label: this.label, role: toolbar ? 'toolbar' : 'group' });
         this.internals.ariaOrientation = toolbar ? (this.orientation ?? null) : null;
+        this.toggleState('pressed', Boolean(this.selectionMode) && commaList(this.value).length > 0);
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);

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

@@ -13,13 +13,17 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * through with `::part`.
  *
  * Name the card with `label`, as a Stat Group is named, or with `aria-label`
- * or `aria-labelledby`. These are the only names that work with server
- * rendering, because reading a title from the light DOM needs a DOM, and the
- * server has none. `label` is set through `ElementInternals`, so it writes no
- * attribute onto the card. **A named card is a group**, so a
+ * or `aria-labelledby`. `label` is set through `ElementInternals`, so it
+ * writes no attribute onto the card. **A named card is a group**, so a
  * reader entering it hears its name; an unnamed one has no role, since a group
  * with no name only adds "group" to what a reader says.
  *
+ * **With none of those, a heading in `header` names the card**, such as the
+ * `<h2>` of its title, by reference, so the name follows the heading's words.
+ * Reading a heading needs a DOM, so a served card is named by it once the
+ * script runs; `label`, `aria-label` and `aria-labelledby` are the names a
+ * server writes.
+ *
  * Each region's slot is a part of the same name, `body` for the main content,
  * as Web Awesome's card names its regions. A slot draws no box, so a part
  * passes inherited properties to what is slotted, and a page wanting a box
@@ -29,7 +33,9 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * header's and the footer's line, as Web Awesome's card does. While one holds
  * something, its line is a `header-row` or `footer-row` part; otherwise there
  * is no wrapper and every region is a bare slot. A server cannot see slotted
- * content, so served actions sit on their own line until the script runs.
+ * content, so a served card has no row; the styled tier sets served actions at
+ * the end of their line from the stylesheet alone, so they do not move when
+ * the script runs.
  *
  * **The card says which regions it holds**, as `:state(has-media)`,
  * `:state(has-header)` and `:state(has-footer)`, so a sheet can draw a card
@@ -87,20 +93,34 @@ export declare class HelixHeadlessCard extends HelixElement {
      */
     mediaPlacement?: 'end';
     /**
-     * @internal The host's `aria-labelledby`, observed so the card becomes a
-     * group once it is named. Not reflected: the attribute is the consumer's.
+     * Hears a name written on the card, which no property mirrors.
+     *
+     * Lit observes the attributes of its own properties only, and `ariaLabel`
+     * and `ariaLabelledByElements` belong to the platform. Observed here rather
+     * than through a property, so the manifest lists no attribute of the card's
+     * own for them.
      */
-    protected labelledBy: string | null;
+    static get observedAttributes(): string[];
     /**
-     * @internal The host's `aria-label`, observed for the same reason as
-     * `labelledBy`. Not reflected: the attribute is the consumer's.
+     * Called by the browser when an observed attribute changes. A name written
+     * or taken off asks for an update, because it decides whether the card is a
+     * group and whether its heading names it.
      */
-    protected namedBy: string | null;
+    attributeChangedCallback(name: string, old: string | null, value: string | null): void;
     /** Whether `footer-actions` holds something, read from the slot. */
     private footerActions;
     /** Whether `header-actions` holds something, read from the slot. */
     private headerActions;
     protected willUpdate(changed: PropertyValues): void;
+    /**
+     * Says what the card is and what names it. On the host, since the host is
+     * the box, and from `willUpdate`, which the server calls too.
+     *
+     * **A heading in `header` is the name only where nothing else is**, and it
+     * names the card by reference, so a renamed heading renames the card. An
+     * engine without element references hears its words.
+     */
+    private writeName;
     protected updated(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
     private readonly readRegions;