@fusion.dev/helix-headless 0.146.0 → 0.147.0

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

@@ -4,14 +4,18 @@ 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, fillTemplate, HelixElement } from '@fusion.dev/helix-core';
+import { customElement, fillTemplate, formatNumber, HelixElement } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessBadge = class HelixHeadlessBadge extends HelixElement {
     constructor() {
         super(...arguments);
         this.label = '';
+        this.locale = '';
         this.value = '';
+        this.handleSlotchange = () => {
+            this.describe();
+        };
     }
     get given() {
         return String(this.value ?? '');
@@ -19,18 +23,91 @@ let HelixHeadlessBadge = class HelixHeadlessBadge extends HelixElement {
     get blank() {
         return this.given.trim() !== '' && Number(this.given) === 0;
     }
+    get capped() {
+        const count = Number(this.given);
+        return this.max !== undefined && Number.isFinite(count) && count > this.max;
+    }
     get text() {
+        const write = (count) => this.formatOptions ? formatNumber(count, this.locale, this.formatOptions) : String(count);
+        if (this.capped) {
+            return `${write(this.max)}+`;
+        }
         const count = Number(this.given);
-        if (this.max !== undefined && Number.isFinite(count) && count > this.max) {
-            return `${this.max}+`;
+        return this.formatOptions && this.given.trim() !== '' && Number.isFinite(count)
+            ? write(count)
+            : this.given;
+    }
+    get words() {
+        const text = this.text;
+        if (this.blank || (text === '' && this.label === '')) {
+            return '';
+        }
+        return fillTemplate(this.label, { count: text }) || text;
+    }
+    wrapped() {
+        const found = this.renderRoot
+            .querySelector('slot:not([name])')
+            ?.assignedElements({ flatten: true })
+            .find((element) => element instanceof HTMLElement &&
+            (element.tabIndex >= 0 || element.shadowRoot?.delegatesFocus === true));
+        const inner = found?.shadowRoot?.delegatesFocus
+            ? found.shadowRoot.querySelector('a[href], button, input, select, textarea')
+            : null;
+        return inner ?? found;
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        requestAnimationFrame(() => this.describe());
+    }
+    describe() {
+        const words = this.words;
+        const control = words === '' ? undefined : this.wrapped();
+        if (this.described && this.described !== control) {
+            this.undescribe();
+        }
+        if (!control || !('ariaDescribedByElements' in control)) {
+            return;
+        }
+        const own = control.getAttribute('aria-describedby') || control.ariaDescribedByElements?.length;
+        if (control !== this.described && own) {
+            return;
         }
-        return this.given;
+        this.internals.ariaLabel = words;
+        control.ariaDescribedByElements = [this];
+        this.described = control;
+    }
+    undescribe() {
+        if (this.described?.ariaDescribedByElements?.includes(this)) {
+            this.described.ariaDescribedByElements = null;
+        }
+        this.described = undefined;
+        this.internals.ariaLabel = null;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.undescribe();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.hasUpdated) {
+            this.describe();
+        }
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.toggleState('capped', this.capped);
+        this.toggleState('dot', this.given.trim() === '');
+        this.toggleState('blank', this.blank);
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.describe();
     }
     render() {
         const blank = this.blank;
         const text = this.text;
         const announced = !blank && (text !== '' || this.label !== '');
-        return html `<slot></slot>
+        return html `<slot @slotchange=${this.handleSlotchange}></slot>
       <span
         part="indicator"
         data-blank=${blank ? '' : nothing}
@@ -41,9 +118,15 @@ let HelixHeadlessBadge = class HelixHeadlessBadge extends HelixElement {
       >`;
     }
 };
+__decorate([
+    property({ attribute: 'format-options', type: Object })
+], HelixHeadlessBadge.prototype, "formatOptions", void 0);
 __decorate([
     property()
 ], HelixHeadlessBadge.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixHeadlessBadge.prototype, "locale", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessBadge.prototype, "max", void 0);

package/dist/bar-chart/root/bar-chart-root.js

@@ -4,10 +4,10 @@ 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 { byRow, CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesNames, ticks, unbroken, } from '@fusion.dev/helix-core';
+import { byRow, CHART_PLOT, customElement, drawTooltip, extent, formatNumbers, HelixElement, linear, linePath, MixinChartSource, PLOT_HEIGHT, PLOT_WIDTH, seriesIndex, seriesKey, seriesNames, ticks, unbroken, } from '@fusion.dev/helix-core';
 import { html, nothing, svg } from 'lit';
 import { property } from 'lit/decorators.js';
-import { stackEnds, stackSpans } from '../stack.js';
+import { stackEnds, stackedReadings, stackSpans } from '../stack.js';
 import '../../tooltip/index.js';
 let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource(HelixElement) {
     constructor() {
@@ -38,23 +38,13 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
             return html `<div id=${CHART_PLOT} part="plot"></div>`;
         }
         const scaled = this.scaled;
-        const own = (one) => scaled.has(one.name.trim().toLowerCase());
+        const own = (one) => scaled.has(seriesKey(one.name));
         const shown = series.filter((one) => this.showsSeries(one.name));
         const values = shown.flatMap((one) => one.points.map((point) => point.value));
         const lined = this.lined;
-        const readingsOf = (group) => {
-            if (!this.stacked) {
-                return group.flatMap((one) => one.points.map((point) => point.value));
-            }
-            const columns = group.filter((one) => !lined.has(one.name.trim().toLowerCase()));
-            const slots = columns.map((one) => byRow(one, categories.length));
-            return [
-                ...group
-                    .filter((one) => lined.has(one.name.trim().toLowerCase()))
-                    .flatMap((one) => one.points.map((point) => point.value)),
-                ...stackEnds(categories.map((_, at) => slots.map((one) => one[at]?.value))),
-            ];
-        };
+        const readingsOf = (group) => this.stacked
+            ? stackedReadings(group, categories.length, (one) => lined.has(seriesKey(one.name)))
+            : group.flatMap((one) => one.points.map((point) => point.value));
         const on = (which) => {
             const found = readingsOf(shown.filter(which));
             return found.length > 0 ? found : values.length > 0 ? values : [0];
@@ -96,11 +86,11 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
         const slot = 100 / categories.length;
         const lined = this.lined;
         const scaled = this.scaled;
-        const own = (one) => scaled.has(one.name.trim().toLowerCase());
+        const own = (one) => scaled.has(seriesKey(one.name));
         const against = (one) => z !== undefined && own(one) ? z : y;
         const columns = series
             .map((one, index) => ({ one, slots: byRow(one, categories.length), tone: index }))
-            .filter(({ one }) => !lined.has(one.name.trim().toLowerCase()) && this.showsSeries(one.name));
+            .filter(({ one }) => !lined.has(seriesKey(one.name)) && this.showsSeries(one.name));
         const abreast = this.stacked ? 1 : columns.length;
         const stride = (slot * 0.72) / Math.max(abreast, 1);
         const gap = abreast > 1 ? stride * 0.08 : 0;
@@ -178,7 +168,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
                     : bar(point.value, index, depth, tone, against(one));
             })}
             </g>`)}
-        ${series.map((one) => lined.has(one.name.trim().toLowerCase()) && this.showsSeries(one.name)
+        ${series.map((one) => lined.has(seriesKey(one.name)) && this.showsSeries(one.name)
             ? this.renderLine(one, series.indexOf(one), slot, against(one), sideways)
             : nothing)}
       </svg>
@@ -269,8 +259,9 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartSource
             .map((one) => byRow(one, this.readings)[at]?.value)
             .filter((one) => one !== undefined);
         const values = this.stacked ? stackEnds([reached]) : reached;
+        const lined = this.lined;
         const all = this.stacked
-            ? stackEnds(Array.from({ length: this.readings }, (_, row) => shown.map((one) => byRow(one, this.readings)[row]?.value)))
+            ? stackedReadings(shown, this.readings, (one) => lined.has(seriesKey(one.name)))
             : shown.flatMap((one) => one.points.map((point) => point.value));
         const [low, high] = extent(all.length > 0 ? all : [0]);
         const domain = [Math.min(0, low), Math.max(0, high)];

package/dist/bar-chart/stack.d.ts

@@ -1,3 +1,4 @@
+import { type Series } from '@fusion.dev/helix-core';
 /** Where a column starts and ends along the measure, in the data's own units. */
 export type Span = readonly [from: number, to: number];
 /**
@@ -13,3 +14,12 @@ export declare const stackSpans: (values: readonly (number | undefined)[]) => (S
  * of negatives. `categories` holds each category's readings, one per column.
  */
 export declare const stackEnds: (categories: readonly (readonly (number | undefined)[])[]) => number[];
+/**
+ * The readings a stacked scale has to hold, over `count` categories: every
+ * reading of a series drawn as a line, which `lined` says, and the top and
+ * foot of each category's stack of the others.
+ *
+ * The plot's scale and the tooltip's placing ask the same question, and
+ * answered apart they disagreed about the lines.
+ */
+export declare const stackedReadings: (group: readonly Series[], count: number, lined: (one: Series) => boolean) => number[];

package/dist/bar-chart/stack.js

@@ -1,3 +1,4 @@
+import { byRow } from '@fusion.dev/helix-core';
 export const stackSpans = (values) => {
     let up = 0;
     let down = 0;
@@ -17,3 +18,10 @@ export const stackSpans = (values) => {
     });
 };
 export const stackEnds = (categories) => categories.flatMap((values) => stackSpans(values).flatMap((span) => (span === undefined ? [] : [span[1]])));
+export const stackedReadings = (group, count, lined) => {
+    const slots = group.filter((one) => !lined(one)).map((one) => byRow(one, count));
+    return [
+        ...group.filter(lined).flatMap((one) => one.points.map((point) => point.value)),
+        ...stackEnds(Array.from({ length: count }, (_, at) => slots.map((one) => one[at]?.value))),
+    ];
+};

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

@@ -37,6 +37,9 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @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 end - While the `end` slot holds something, so a stylesheet can join
+ * the label and what follows it into one control.
  */
 export declare class HelixHeadlessBreadcrumb extends HelixElement {
     /**
@@ -74,6 +77,17 @@ export declare class HelixHeadlessBreadcrumb extends HelixElement {
      */
     target: string;
     protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    /**
+     * Says whether anything sits after the label.
+     *
+     * A switcher's trigger in `end` makes the crumb a split control, and its
+     * label is drawn as the first half of it. No selector can ask a slot what was
+     * assigned to it, so this is script. Answered from a DOM, so the server
+     * writes the resting answer and the first client update corrects it.
+     */
+    private markEnd;
+    private readonly handleEnd;
     /**
      * The mark between one crumb and the next.
      *

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 } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, hostAria, slotFilled } from '@fusion.dev/helix-core';
 import { caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -15,12 +15,22 @@ let HelixHeadlessBreadcrumb = class HelixHeadlessBreadcrumb extends HelixElement
         this.current = false;
         this.rel = '';
         this.target = '';
+        this.handleEnd = () => {
+            this.markEnd();
+        };
     }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'listitem' });
         this.internals.ariaCurrent = this.current ? 'page' : null;
     }
+    updated(changed) {
+        super.updated(changed);
+        this.markEnd();
+    }
+    markEnd() {
+        this.toggleState('end', slotFilled(this.renderRoot?.querySelector('slot[name="end"]')));
+    }
     renderSeparator() {
         return html `<slot name="separator"
       ><svg part="separator-mark" data-mirror fill="currentColor" viewBox=${caretRight.viewBox}>
@@ -41,7 +51,7 @@ let HelixHeadlessBreadcrumb = class HelixHeadlessBreadcrumb extends HelixElement
               rel=${this.rel || nothing}
               >${label}</a
             >`
-            : html `<span part="link">${label}</span>`}<slot name="end"></slot>`;
+            : html `<span part="link">${label}</span>`}<slot name="end" @slotchange=${this.handleEnd}></slot>`;
     }
 };
 __decorate([

package/dist/breadcrumbs/root/breadcrumbs-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 { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
+import { customElement, fillTemplate, HelixElement, hostAria } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -55,7 +55,7 @@ let HelixHeadlessBreadcrumbs = class HelixHeadlessBreadcrumbs extends HelixEleme
             ><button
               part="expand"
               type="button"
-              aria-label=${this.expandLabel.replace('{count}', String(folded))}
+              aria-label=${fillTemplate(this.expandLabel, { count: String(folded) })}
               @click=${this.expand}
             >
               …

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

@@ -18,13 +18,12 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  *
  * The inner control is always `type="button"`, because a
  * `<button type="submit">` inside a shadow root cannot submit a form outside
- * it. To submit, the button calls `requestSubmit()` on its form, which runs
- * validation, unlike `submit()`.
- *
- * A `submit` listener reads `event.submitter` as `null`, because the platform
- * accepts only a native submit button there. The button's `name` and `value`
- * are in the form data, so read them from `new FormData(form)` to tell two
- * submit buttons apart.
+ * it. To submit, the button puts a hidden native submit button carrying its
+ * `name`, `value` and `form*` overrides into the form, calls
+ * `requestSubmit()` with it, which runs validation, unlike `submit()`, and
+ * takes it out again, as Shoelace and Web Awesome do. A `submit` listener
+ * reads that button as `event.submitter`, so `event.submitter.value` and
+ * `new FormData(form, event.submitter)` tell two submit buttons apart.
  *
  * As the first submit button in its form, it is the form's default button:
  * Enter in a text field of the form presses it, as it presses a native one.
@@ -54,6 +53,7 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  *
  * @csspart button - The inner control.
  * @csspart live - The live region that says `pending-label` when the button becomes pending under focus. It is rendered from the first time the button is pending, and the styled button clips it out of view.
+ * @csspart spinner - The ring a pending button turns, an empty element the styled button draws over the words. It is rendered only while the button is pending.
  * @csspart text - The button's words, which the styled button trims to their capitals and baseline so the letters sit at the middle in any font.
  *
  * @cssstate pending - The button is pending: `pending` is set.
@@ -135,18 +135,13 @@ export declare class HelixHeadlessButton extends HelixFormElement {
     /**
      * Where this button's submission goes, overriding the form's own.
      *
-     * **The five `form*` overrides work by writing the form and putting it back**,
-     * which is the only mechanism available and is closer to the platform than it
-     * sounds. `requestSubmit(submitter)` is how a native submitter carries these,
-     * and it refuses ours twice over: the inner `<button>` is `type="button"` so
-     * it is not a submit button, and it sits in this shadow root so its form owner
-     * is not the consumer's form. Both throw. So the submission is started with no
-     * submitter and the overrides are applied to the form for the duration of it.
-     *
-     * The whole submit algorithm runs synchronously inside `requestSubmit()`, so
-     * the window is one call and a `finally` closes it whether or not a listener
-     * refused. What a `submit` handler observes during that window is the form a
-     * native submitter would have given it, which is the point.
+     * **The five `form*` overrides ride on a native submit button that stands in
+     * for this one**, because `requestSubmit(submitter)` refuses the inner
+     * `<button>` twice over: it is `type="button"`, and it sits in this shadow
+     * root, so its form owner is not the consumer's form. The stand-in is a
+     * hidden `<button type="submit">` in the form for the one synchronous call,
+     * so the platform applies the overrides to that submission alone and leaves
+     * the form as it was. See `submitAs`.
      */
     formAction: string;
     /**
@@ -249,13 +244,10 @@ export declare class HelixHeadlessButton extends HelixFormElement {
      * The value this button submits under its own `name`, as a native submit
      * button does.
      *
-     * **Reported for exactly the submission this button starts and not otherwise.**
+     * **Sent with exactly the submission this button starts and not otherwise.**
      * A native submit button contributes `name=value` only when it is the one
-     * that submitted, and every other button on the form contributes nothing. A
-     * form-associated element reporting a value continuously would contribute on
-     * every submission whoever started it, which is a different feature wearing
-     * the same name, so `submit` below sets it, submits, and clears it inside one
-     * synchronous call.
+     * that submitted, and every other button on the form contributes nothing,
+     * which is what the native button standing in for this one at submit does.
      *
      * `CopyButton` has a `value` of its own meaning the text to put on the
      * clipboard, which is not this and is why it is declared there rather than
@@ -263,19 +255,8 @@ export declare class HelixHeadlessButton extends HelixFormElement {
      */
     value: string;
     /**
-     * Submits the form as this button, for the length of one call.
-     *
-     * Everything a native submitter carries is written onto the form, the
-     * submission is started, and everything is put back. See `formAction` for why
-     * `requestSubmit(submitter)` is not available to a control inside a shadow
-     * root.
-     *
-     * `novalidate` is in the same list rather than reached by `form.submit()`,
-     * which looks like the shortcut and is not: `submit()` skips the `submit`
-     * event as well as the validation, so a consumer's handler would stop running
-     * the moment somebody wrote `formnovalidate`. Turning the flag on and calling
-     * `requestSubmit()` skips the validation alone, which is what the attribute
-     * means.
+     * Submits the form as this button, through a native submit button carrying
+     * its name, value and overrides. See `formAction`.
      */
     private submit;
     /**
@@ -346,6 +327,11 @@ export declare class HelixHeadlessButton extends HelixFormElement {
     /** Called by the browser when the button's form changes. */
     formAssociatedCallback(form: HTMLFormElement | null): void;
     protected render(): TemplateResult;
+    /**
+     * The ring a pending button turns, behind a seam a tier can move: an empty
+     * element, hidden from a screen reader, which hears `pending-label` instead.
+     */
+    protected renderSpinner(): TemplateResult | typeof nothing;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { AriaForwardController, customElement, defaultButton, drawStatus, elementById, HelixFallbackCommandEvent, HelixFormElement, HelixPressEvent, pressType, StatusController, submitsOnEnter, supportsInvokers, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { submitAs } from '../submitter.js';
 let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
     constructor() {
         super(...arguments);
@@ -103,42 +104,7 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
         }
     }
     submit(form) {
-        const undo = [];
-        const override = (attribute, value) => {
-            if (value === null) {
-                return;
-            }
-            const had = form.getAttribute(attribute);
-            form.setAttribute(attribute, value);
-            undo.push(() => {
-                if (had === null) {
-                    form.removeAttribute(attribute);
-                }
-                else {
-                    form.setAttribute(attribute, had);
-                }
-            });
-        };
-        override('action', this.formAction || null);
-        override('enctype', this.formEnctype || null);
-        override('method', this.formMethod || null);
-        override('novalidate', this.formNoValidate ? '' : null);
-        override('target', this.formTarget || null);
-        const reports = this.name !== '';
-        if (reports) {
-            this.internals.setFormValue(this.value);
-        }
-        try {
-            form.requestSubmit();
-        }
-        finally {
-            for (const put of undo) {
-                put();
-            }
-            if (reports) {
-                this.internals.setFormValue(null);
-            }
-        }
+        submitAs(form, this);
     }
     get commandForElement() {
         const button = this.renderRoot?.querySelector('button');
@@ -222,9 +188,12 @@ let HelixHeadlessButton = class HelixHeadlessButton extends HelixFormElement {
       @keydown=${this.notePress}
       @pointerdown=${this.notePress}
     >
-      ${label}
+      ${label}${this.renderSpinner()}
     </button>${this.renderLive()}`;
     }
+    renderSpinner() {
+        return this.pending ? html `<span part="spinner" aria-hidden="true"></span>` : nothing;
+    }
 };
 __decorate([
     property()

package/dist/button/submitter.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Submitting a form through a native submit button that stands in for one in a
+ * shadow root.
+ *
+ * `requestSubmit(submitter)` takes only a native submit button whose form is
+ * the form, and a button inside a shadow root is neither. A hidden native
+ * `<button type="submit">` carrying the same name, value and `form*`
+ * overrides is put into the form for the one synchronous call, as Shoelace and
+ * Web Awesome do, so the platform does the rest: `event.submitter` is a
+ * button with the name and value, `new FormData(form, event.submitter)`
+ * includes them, and the overrides apply to that submission alone.
+ */
+/** What a submit button carries into the submission it starts. */
+export interface Carried {
+    formAction: string;
+    formEnctype: string;
+    formMethod: string;
+    formNoValidate: boolean;
+    formTarget: string;
+    name: string;
+    value: string;
+}
+/**
+ * Submits `form` as a native submit button carrying `carried` would, and takes
+ * that button out again whether or not a listener refused the submission.
+ */
+export declare const submitAs: (form: HTMLFormElement, carried: Carried) => void;

package/dist/button/submitter.js

@@ -0,0 +1,25 @@
+export const submitAs = (form, carried) => {
+    const stand = form.ownerDocument.createElement('button');
+    stand.type = 'submit';
+    stand.hidden = true;
+    for (const [attribute, value] of [
+        ['formaction', carried.formAction],
+        ['formenctype', carried.formEnctype],
+        ['formmethod', carried.formMethod],
+        ['formtarget', carried.formTarget],
+        ['name', carried.name],
+    ]) {
+        if (value !== '') {
+            stand.setAttribute(attribute, value);
+        }
+    }
+    stand.value = carried.value;
+    stand.formNoValidate = carried.formNoValidate;
+    form.append(stand);
+    try {
+        form.requestSubmit(stand);
+    }
+    finally {
+        stand.remove();
+    }
+};

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

@@ -31,6 +31,12 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * 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.
  *
+ * **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
+ * with a header differently, as Web Awesome's `with-header` does, with no
+ * attribute written onto the card. Read in the browser, so a served card
+ * carries none until the script runs.
+ *
  * @since 0.1.0
  * @status stable
  * @category layout
@@ -52,6 +58,10 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @csspart header-actions - The slot the header's controls arrive through, drawing no box, as `body` does.
  * @csspart header-row - The line holding `header` and `header-actions`, drawn only while `header-actions` holds something.
  * @csspart media - The slot the media arrives through, drawing no box, as `body` does.
+ *
+ * @cssstate has-footer - Something is slotted into `footer` or `footer-actions`.
+ * @cssstate has-header - Something is slotted into `header` or `header-actions`.
+ * @cssstate has-media - Something is slotted into `media`.
  */
 export declare class HelixHeadlessCard extends HelixElement {
     /**
@@ -92,7 +102,8 @@ export declare class HelixHeadlessCard extends HelixElement {
     private headerActions;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
-    private readonly readActions;
+    protected firstUpdated(changed: PropertyValues): void;
+    private readonly readRegions;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/card/root/card-root.js

@@ -15,10 +15,13 @@ let HelixHeadlessCard = class HelixHeadlessCard extends HelixElement {
         this.namedBy = null;
         this.footerActions = false;
         this.headerActions = false;
-        this.readActions = () => {
+        this.readRegions = () => {
             const filled = (name) => slotFilled(this.renderRoot?.querySelector(`slot[name="${name}"]`));
             this.headerActions = filled('header-actions');
             this.footerActions = filled('footer-actions');
+            this.toggleState('has-media', filled('media'));
+            this.toggleState('has-header', this.headerActions || filled('header'));
+            this.toggleState('has-footer', this.footerActions || filled('footer'));
         };
     }
     willUpdate(changed) {
@@ -28,20 +31,24 @@ let HelixHeadlessCard = class HelixHeadlessCard extends HelixElement {
     }
     updated(changed) {
         super.updated(changed);
-        this.readActions();
+        this.readRegions();
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.renderRoot.addEventListener('slotchange', this.readRegions);
     }
     render() {
         const header = html `<slot name="header" part="header"></slot
       ><slot
         name="header-actions"
         part="header-actions"
-        @slotchange=${this.readActions}
+        @slotchange=${this.readRegions}
       ></slot>`;
         const footer = html `<slot name="footer" part="footer"></slot
       ><slot
         name="footer-actions"
         part="footer-actions"
-        @slotchange=${this.readActions}
+        @slotchange=${this.readRegions}
       ></slot>`;
         return html `
       <slot name="media" part="media"></slot>