@fusion.dev/helix-headless 0.103.3 → 0.104.0

package/dist/date-input/root/date-input-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 { AriaForwardController, valueAsDate as asDate, customElement, dateAsValue as fromDate, HelixFormElement, isDateValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinTokens, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsDate as asDate, customElement, fillTemplate, dateAsValue as fromDate, HelixFormElement, isDateValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinTokens, } from '@fusion.dev/helix-core';
 import { calendarBlank } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -35,6 +35,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
         this.fitted = undefined;
         this.wide = undefined;
         this.placeholder = 'YYYY-MM-DD';
+        this.removeLabel = 'Remove {name}';
         this.step = 1;
         this.draft = '';
         this.handleInput = (event) => {
@@ -138,21 +139,29 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
     get restCount() {
         return Math.max(0, dates(this.value).length - this.shownDates.length);
     }
+    get answers() {
+        return this.mode === undefined ? undefined : dates(this.value);
+    }
     validate() {
         const held = dates(this.value);
         if (held.length > 0 && !held.every(isDateValue)) {
-            return this.mode === undefined
-                ? 'Enter a date as YYYY-MM-DD.'
-                : 'Enter dates as YYYY-MM-DD, separated by commas.';
+            return (this.badInputMessage ||
+                (this.mode === undefined
+                    ? 'Enter a date as YYYY-MM-DD.'
+                    : 'Enter dates as YYYY-MM-DD, separated by commas.'));
         }
         if (this.min !== '' && held.some((one) => one < this.min)) {
-            return `Choose a date on or after ${this.min}.`;
+            return fillTemplate(this.rangeUnderflowMessage || 'Choose a date on or after {min}.', {
+                min: this.written(this.min),
+            });
         }
         if (this.max !== '' && held.some((one) => one > this.max)) {
-            return `Choose a date on or before ${this.max}.`;
+            return fillTemplate(this.rangeOverflowMessage || 'Choose a date on or before {max}.', {
+                max: this.written(this.max),
+            });
         }
         if (this.mode === 'range' && held.length > 2) {
-            return 'A range is two dates.';
+            return this.rangeLengthMessage || 'A range is two dates.';
         }
         return '';
     }
@@ -194,7 +203,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
                   part="date"
       exportparts="dismiss: date-dismiss, dismiss-mark: date-dismiss-mark, start: date-start"
                   dismissible
-                  dismiss-label=${`Remove ${date}`}
+                  dismiss-label=${fillTemplate(this.removeLabel, { name: this.written(date) })}
                   ?disabled=${this.isDisabled}
                   @helix-dismiss=${(event) => {
             event.stopPropagation();
@@ -248,7 +257,15 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
         </button>
       </div>
 
-      <div part="surface" id="surface" popover="manual" ?hidden=${!this.open}>
+      ${''}
+      <div
+        part="surface"
+        id="surface"
+        role="dialog"
+        aria-label=${this.triggerLabel}
+        popover="manual"
+        ?hidden=${!this.open}
+      >
         ${this.renderPicker()}
       </div>
       ${this.renderHint()}${this.renderFeedback()}`;
@@ -302,6 +319,18 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessDateInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ attribute: 'range-length-message' })
+], HelixHeadlessDateInput.prototype, "rangeLengthMessage", void 0);
+__decorate([
+    property({ attribute: 'range-overflow-message' })
+], HelixHeadlessDateInput.prototype, "rangeOverflowMessage", void 0);
+__decorate([
+    property({ attribute: 'range-underflow-message' })
+], HelixHeadlessDateInput.prototype, "rangeUnderflowMessage", void 0);
+__decorate([
+    property({ attribute: 'remove-label' })
+], HelixHeadlessDateInput.prototype, "removeLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessDateInput.prototype, "step", void 0);

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

@@ -58,6 +58,14 @@ declare const HelixHeadlessDatePicker_base: (new (...args: any[]) => import("@fu
  * @cssproperty --date-picker-column-count - How many month columns are drawn, capped at two. `--date-picker-columns` overrides it.
  */
 export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_base {
+    /**
+     * What a reader is told when the value holds something that is not a date.
+     *
+     * **Every sentence a control raises in the browser's bubble is a property**,
+     * named for the validity flag it reports, so a form in another language
+     * speaks it. Absent is the control's own sentence, in English.
+     */
+    badInputMessage?: string;
     /**
      * Month to open on, where nothing declared one.
      */
@@ -82,15 +90,6 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * Accessible name for the grid.
      */
     label: string;
-    /**
-     * The month on show, as `YYYY-MM`. Follows `value`, then the current month.
-     *
-     * Separate from `value` on purpose, so paging selects nothing and a consumer
-     * can drive the view. Reading gives the month on show; writing sets it, and
-     * `default-month` seeds one the calendar keeps until somebody does.
-     */
-    get month(): string;
-    set month(next: string);
     /**
      * Locale for month and day names.
      *
@@ -105,12 +104,21 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * Earliest selectable date, as `YYYY-MM-DD`.
      */
     min: string;
-    /** The month on show, whoever set it, and `undefined` until somebody has. */
-    private monthState;
     /**
      * How many dates can be held at once.
      */
     mode?: 'range' | 'multiple';
+    /** The month on show, whoever set it, and `undefined` until somebody has. */
+    private monthState;
+    /**
+     * The month on show, as `YYYY-MM`. Follows `value`, then the current month.
+     *
+     * Separate from `value` on purpose, so paging selects nothing and a consumer
+     * can drive the view. Reading gives the month on show; writing sets it, and
+     * `default-month` seeds one the calendar keeps until somebody does.
+     */
+    get month(): string;
+    set month(next: string);
     /**
      * How many months to show, side by side.
      */
@@ -229,6 +237,10 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      * date including the one already chosen.
      */
     step: number;
+    /**
+     * What a reader is told when a date is required and none is chosen.
+     */
+    valueMissingMessage?: string;
     /**
      * Reports "required and empty", or clears it.
      *
@@ -261,11 +273,11 @@ export declare class HelixHeadlessDatePicker extends HelixHeadlessDatePicker_bas
      *
      * **Nothing at all without a `name`, and that is the mechanism rather than a
      * detail.** It is what lets a calendar sit inside something that owns the
-     * form value, which is how `DatePicker` will hold one. The guard has to be
-     * explicit here in a way it does not for `Listbox`: a control reporting a
-     * plain string is skipped by the form when it has no name, but a `FormData`
-     * carries its own names and its entries are appended whatever the element is
-     * called, so an unnamed calendar would submit empty-named dates.
+     * form value, which is how `Date Input` holds one. `reportValues` keeps the
+     * guard, for every control that sends several answers: a plain string is
+     * skipped by the form when its control has no name, but a `FormData` carries
+     * its own names and its entries are appended whatever the element is called,
+     * so an unnamed calendar would submit empty-named dates.
      */
     private report;
     /**

package/dist/date-picker/root/date-picker-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 { valueAsDate as asDate, customElement, dateAsValue as fromDate, HelixFormElement, HelixNavigateEvent, hostAria, inlineStep, MixinControllerValue, requestChange, } from '@fusion.dev/helix-core';
+import { valueAsDate as asDate, customElement, dateAsValue as fromDate, HelixFormElement, HelixNavigateEvent, hostAria, inlineStep, MixinControllerValue, reportValues, requestChange, } from '@fusion.dev/helix-core';
 import { caretLeft, caretRight } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -231,14 +231,15 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
     reportRequired() {
         const anchor = this.partNamed('grid') ?? undefined;
         if (this.required && this.value === '') {
-            this.internals.setValidity({ valueMissing: true }, 'Choose a date.', anchor);
+            this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage || 'Choose a date.', anchor);
             return;
         }
         const held = this.selected;
         if (held.length > 0 && held.some((one) => asDate(one) === null)) {
-            this.internals.setValidity({ badInput: true }, this.mode === undefined
-                ? 'Enter a date as YYYY-MM-DD.'
-                : 'Enter dates as YYYY-MM-DD, separated by commas.', anchor);
+            this.internals.setValidity({ badInput: true }, this.badInputMessage ||
+                (this.mode === undefined
+                    ? 'Enter a date as YYYY-MM-DD.'
+                    : 'Enter dates as YYYY-MM-DD, separated by commas.'), anchor);
             return;
         }
         this.internals.setValidity({});
@@ -255,16 +256,11 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         this.reportRequired();
     }
     report() {
-        const dates = this.selected;
-        if (this.name === '' || this.disabled || dates.length === 0) {
+        if (this.disabled) {
             this.internals.setFormValue(null);
             return;
         }
-        const data = new FormData();
-        for (const date of dates) {
-            data.append(this.name, date);
-        }
-        this.internals.setFormValue(data);
+        reportValues(this.internals, this.name, this.selected);
     }
     get monthCount() {
         return Math.max(1, Math.floor(this.months) || 1);
@@ -391,6 +387,9 @@ let HelixHeadlessDatePicker = class HelixHeadlessDatePicker extends MixinControl
         this.value = Number.isNaN(ms) ? '' : fromDate(new Date(ms));
     }
 };
+__decorate([
+    property({ attribute: 'bad-input-message' })
+], HelixHeadlessDatePicker.prototype, "badInputMessage", void 0);
 __decorate([
     property({ attribute: 'default-month' })
 ], HelixHeadlessDatePicker.prototype, "defaultMonth", void 0);
@@ -409,9 +408,6 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessDatePicker.prototype, "label", void 0);
-__decorate([
-    property()
-], HelixHeadlessDatePicker.prototype, "month", null);
 __decorate([
     property()
 ], HelixHeadlessDatePicker.prototype, "locale", void 0);
@@ -424,6 +420,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessDatePicker.prototype, "mode", void 0);
+__decorate([
+    property()
+], HelixHeadlessDatePicker.prototype, "month", null);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessDatePicker.prototype, "months", void 0);
@@ -445,6 +444,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessDatePicker.prototype, "step", void 0);
+__decorate([
+    property({ attribute: 'value-missing-message' })
+], HelixHeadlessDatePicker.prototype, "valueMissingMessage", void 0);
 HelixHeadlessDatePicker = __decorate([
     customElement('helix-headless-date-picker')
 ], HelixHeadlessDatePicker);

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

@@ -40,6 +40,7 @@ declare const HelixHeadlessDrilldown_base: (new (...args: any[]) => import("@fus
  * @csspart back-mark - The glyph on the back control.
  * @csspart empty - Shown when there are no entries to show.
  * @csspart header - The bar above a page, holding the way back and its name.
+ * @csspart live - The empty and loading lines again, in a region a screen reader hears when they change. Visually hidden in the styled tier.
  * @csspart loading - Shown while the entries are still on their way.
  * @csspart page - The region the rows are in.
  * @csspart title - The name of the page showing.

package/dist/drilldown/root/drilldown-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, DrilldownController, HelixElement, hostAria, inlineStep, KeyboardNavigationController, MixinCollection, } from '@fusion.dev/helix-core';
+import { customElement, DrilldownController, HelixElement, hostAria, inlineStep, KeyboardNavigationController, keyClaimed, MixinCollection, } from '@fusion.dev/helix-core';
 import { caretLeft } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -48,6 +48,9 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
             }
         };
         this.handleKeydown = (event) => {
+            if (event.defaultPrevented || (event.key !== 'Escape' && keyClaimed(event))) {
+                return;
+            }
             const items = this.items;
             const current = items.findIndex((item) => item.matches(':focus-within'));
             const along = inlineStep(this, event.key);
@@ -151,7 +154,7 @@ let HelixHeadlessDrilldown = class HelixHeadlessDrilldown extends MixinCollectio
       <div aria-busy=${this.loading ? 'true' : nothing} part="page">
         <slot @slotchange=${(event) => this.countRows(event)}></slot>
         ${this.renderStatus(this.hasRows)}
-      </div>`;
+      </div>${this.renderLive(this.hasRows)}`;
     }
 };
 __decorate([

package/dist/element-events.generated.js

@@ -4,6 +4,21 @@ registerElementEvents({
     'helix-headless-announcement': ['helix-dismiss'],
     'helix-headless-app-header': ['helix-scrolled'],
     'helix-headless-avatar': ['error', 'load'],
+    'helix-headless-canvas': [
+        'helix-before-move',
+        'helix-before-reconnect',
+        'helix-before-relabel',
+        'helix-canvas-edit',
+        'helix-canvas-pan',
+        'helix-canvas-view',
+        'helix-canvas-zoom',
+        'helix-connect',
+        'helix-move',
+        'helix-reconnect',
+        'helix-relabel',
+        'helix-remove',
+        'helix-select',
+    ],
     'helix-headless-carousel': ['helix-select'],
     'helix-headless-chat': ['helix-before-pin', 'helix-history', 'helix-send'],
     'helix-headless-chat-composer': ['helix-send'],

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

@@ -1,5 +1,5 @@
-import { HelixElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { ArrivalController, HelixElement } from '@fusion.dev/helix-core';
+import { type TemplateResult } from 'lit';
 /**
  * @summary Says that a region has nothing in it, and what to do about it.
  *
@@ -8,10 +8,13 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * to load, so this exists to tell the difference: what would be here, and the
  * one action that would put something here.
  *
- * `role="status"` on a polite live region, because an empty view usually
- * arrives in place of content that was being fetched. Announcing it is the only
- * way a screen-reader user learns the search returned nothing, rather than
- * being left waiting.
+ * Announced, because an empty view usually arrives in place of content that was
+ * being fetched: saying so is the only way a screen-reader user learns the
+ * search returned nothing, rather than being left waiting. **From a region of
+ * its own that is there before its words are**, filled a frame after the view
+ * appears. The host was the region, and a page inserts an empty state with its
+ * message already in it, which is a region arriving with its words: read
+ * inconsistently at best.
  *
  * Every region is a bare slot. The reference ships an `empty-state-heading` and
  * an `empty-state-actions` whose only job is to assign themselves a slot on
@@ -27,6 +30,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot actions - The way out.
  * @slot heading - What is missing.
  * @slot icon - A mark above the heading.
+ *
+ * @csspart live - The heading and the message again, in a region a screen reader hears when the view appears. Visually hidden in the styled tier.
  */
 export declare class HelixHeadlessEmpty extends HelixElement {
     /**
@@ -37,7 +42,7 @@ export declare class HelixHeadlessEmpty extends HelixElement {
      * has nothing to announce because nothing changed.
      */
     noAnnounce: boolean;
-    protected willUpdate(changed: PropertyValues): void;
+    protected readonly arrival: ArrivalController;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/empty/root/empty-root.js

@@ -4,24 +4,27 @@ 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 { html } from 'lit';
+import { ArrivalController, customElement, HelixElement, slottedWords, } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessEmpty = class HelixHeadlessEmpty extends HelixElement {
     constructor() {
         super(...arguments);
         this.noAnnounce = false;
-    }
-    willUpdate(changed) {
-        super.willUpdate(changed);
-        hostAria(this.internals, { role: this.noAnnounce ? '' : 'status' });
-        this.internals.ariaLive = this.noAnnounce ? null : 'polite';
+        this.arrival = new ArrivalController(this, {
+            arriving: () => !this.serverRendered && document.readyState === 'complete',
+            text: () => slottedWords(this, ['heading', '']),
+        });
     }
     render() {
+        const say = () => this.arrival.say();
         return html `<slot name="icon"></slot>
-      <slot name="heading"></slot>
-      <slot></slot>
-      <slot name="actions"></slot>`;
+      <slot name="heading" @slotchange=${say}></slot>
+      <slot @slotchange=${say}></slot>
+      <slot name="actions"></slot>
+      ${this.noAnnounce
+            ? nothing
+            : html `<span part="live" role="status">${this.arrival.said}</span>`}`;
     }
 };
 __decorate([

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

@@ -75,7 +75,11 @@ export declare class HelixHeadlessFileInput extends HelixHeadlessFileInput_base
      */
     multiple: boolean;
     /**
-     * What the control removing one file is called, per file.
+     * What the control removing one file is called, with `{name}` filled in.
+     *
+     * **The name goes in**, so a row of them is heard as which one each
+     * removes rather than as "Remove" said once per file. A label with no
+     * `{name}` has it added after it.
      */
     removeLabel: string;
     /**

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

@@ -4,12 +4,13 @@ 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 { AriaForwardController, customElement, drawIcon, HelixBeforeChangeEvent, HelixFormElement, MixinField, requestChange, restoreValue, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, drawIcon, fillTemplate, HelixBeforeChangeEvent, HelixFormElement, MixinField, requestChange, restoreValue, } from '@fusion.dev/helix-core';
 import { trash } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import '../../tag/index.js';
+const named = (label, name) => label.includes('{name}') ? fillTemplate(label, { name }) : `${label} ${name}`;
 const size = (bytes, locale) => {
     const units = ['bytes', 'KB', 'MB', 'GB', 'TB'];
     let value = bytes;
@@ -41,7 +42,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         this.accept = '';
         this.locale = '';
         this.multiple = false;
-        this.removeLabel = 'Remove';
+        this.removeLabel = 'Remove {name}';
         this.triggerLabel = 'Choose files';
         this.dropping = false;
         this.committed = [];
@@ -143,7 +144,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         if (!control) {
             return;
         }
-        this.internals.setValidity(control.validity, control.validationMessage, control);
+        this.copyValidity(control);
         this.refreshFeedback();
     }
     firstUpdated(changed) {
@@ -155,6 +156,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
         this.control?.focus(options);
     }
     formResetCallback() {
+        super.formResetCallback();
         if (this.control) {
             restoreValue(this.control, '');
         }
@@ -212,7 +214,7 @@ let HelixHeadlessFileInput = class HelixHeadlessFileInput extends MixinField(Hel
                   <button
                     part="remove"
                     type="button"
-                    aria-label=${`${this.removeLabel} ${file.name}`}
+                    aria-label=${named(this.removeLabel, file.name)}
                     data-at=${at}
                     ?disabled=${this.isDisabled}
                     @click=${this.handleRemove}

package/dist/filter-input/menu/filter-menu.d.ts

@@ -72,6 +72,7 @@ import '../../menu/index.js';
  * @csspart menu-back-mark - The glyph on the back control.
  * @csspart menu-empty - Shown when there are no fields to offer.
  * @csspart menu-header - The bar above a field's page, holding the way back and its name.
+ * @csspart menu-live - The inner menu's `live`, the region a screen reader hears its empty and loading lines from.
  * @csspart menu-loading - Shown while the fields are still on their way.
  * @csspart menu-surface - The floating panel the menu is drawn on.
  * @csspart menu-title - The name of the field whose page is showing.

package/dist/filter-input/menu/filter-menu.js

@@ -119,7 +119,7 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
         return html `<${menu}
       part="menu"
       exportparts="back: menu-back, back-mark: menu-back-mark, empty: menu-empty, header: menu-header,
-        loading: menu-loading, surface: menu-surface, title: menu-title"
+        live: menu-live, loading: menu-loading, surface: menu-surface, title: menu-title"
       label=${this.label}
       @helix-select=${this.handleSelect}
     >

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

@@ -304,6 +304,11 @@ let HelixHeadlessFilterInput = class HelixHeadlessFilterInput extends MixinContr
         this.releaseCaret?.();
         this.releaseCaret = undefined;
         this.internals.setFormValue(this.value);
+        const control = this.control;
+        if (control) {
+            this.copyValidity(control);
+            this.refreshFeedback();
+        }
         this.markActive();
         this.settleOpen();
     }

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export * from './breadcrumbs/index.js';
 export * from './button/index.js';
 export * from './button-group/index.js';
 export * from './callout/index.js';
+export * from './canvas/index.js';
 export * from './card/index.js';
 export * from './carousel/index.js';
 export * from './chat/index.js';

package/dist/index.js

@@ -12,6 +12,7 @@ export * from './breadcrumbs/index.js';
 export * from './button/index.js';
 export * from './button-group/index.js';
 export * from './callout/index.js';
+export * from './canvas/index.js';
 export * from './card/index.js';
 export * from './carousel/index.js';
 export * from './chat/index.js';

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

@@ -94,7 +94,7 @@ let HelixHeadlessInput = class HelixHeadlessInput extends MixinControllerValue(M
         if (!control) {
             return;
         }
-        this.internals.setValidity(control.validity, control.validationMessage, control);
+        this.copyValidity(control);
         this.refreshFeedback();
     }
     focus(options) {

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

@@ -90,7 +90,13 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
     private readonly fullscreen;
     private readonly idle;
     protected readonly commands: CommandController;
-    /** The items, read from the host so the server has them too. */
+    /**
+     * The items, read from the host.
+     *
+     * **`knownChildren` and not `children`**, which is undefined on the server:
+     * spreading it threw the first time a lightbox was rendered there open,
+     * which is the first time anything asked it for its items on a server.
+     */
     private get items();
     /** The native dialog, or nothing where there is no DOM to hold one. */
     private get dialog();
@@ -139,6 +145,8 @@ export declare class HelixHeadlessLightbox extends HelixHeadlessLightbox_base {
     private readonly handleKeydown;
     /** Home and End, which are an index rather than a step. */
     private toEnd;
+    /** The item on screen: the one `active` names, or the first where it names none. */
+    private get shown();
     /**
      * A press on the backdrop, which lands on the dialog element itself.
      *

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

@@ -4,11 +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 { CommandController, customElement, FullscreenController, HelixElement, hostAria, IdleController, inlineStep, MixinControllerActive, MixinControllerOpen, resolveActiveItem, } from '@fusion.dev/helix-core';
+import { CommandController, customElement, FullscreenController, fillTemplate, HelixElement, hostAria, IdleController, inlineStep, keyClaimed, MixinControllerActive, MixinControllerOpen, resolveActiveItem, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { HelixHeadlessLightboxItem } from '../item/lightbox-item.js';
-const fill = (template, index, count) => template.replaceAll('{index}', String(index)).replaceAll('{count}', String(count));
 let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerActive(MixinControllerOpen(HelixElement)) {
     constructor() {
         super(...arguments);
@@ -46,6 +45,9 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             this.relayNativeEvent(event);
         };
         this.handleKeydown = (event) => {
+            if (keyClaimed(event) || event.altKey || event.ctrlKey || event.metaKey) {
+                return;
+            }
             const along = inlineStep(this, event.key);
             if (along === 1 || event.key === 'ArrowDown') {
                 event.preventDefault();
@@ -80,7 +82,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         };
     }
     get items() {
-        return [...this.children].filter((child) => child instanceof HelixHeadlessLightboxItem);
+        return this.knownChildren.filter((child) => child instanceof HelixHeadlessLightboxItem);
     }
     get dialog() {
         return this.renderRoot?.querySelector('dialog') ?? null;
@@ -105,23 +107,27 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         if (items.length === 0) {
             return;
         }
-        const current = items.findIndex((item) => item.value === this.active);
+        const shown = this.shown;
+        const current = shown ? items.indexOf(shown) : -1;
         const from = current === -1 ? 0 : current;
         const last = items.length - 1;
         const next = this.loop
             ? (from + by + items.length) % items.length
             : Math.min(Math.max(from + by, 0), last);
         const target = items[next];
-        if (target && target.value !== this.active) {
+        if (target && target !== shown) {
             this.requestActive(target.value);
         }
     }
     toEnd(at) {
         const target = this.items[at];
-        if (target && target.value !== this.active) {
+        if (target && target !== this.shown) {
             this.requestActive(target.value);
         }
     }
+    get shown() {
+        return resolveActiveItem(this.active ?? '', this.items);
+    }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label });
@@ -138,6 +144,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         }
         if (this.open && !dialog.open) {
             dialog.showModal();
+            dialog.focus({ preventScroll: true });
             this.idle.stir();
         }
         else if (!this.open && dialog.open) {
@@ -162,12 +169,15 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
         const items = this.items;
         const current = resolveActiveItem(this.active, items);
         const at = current ? items.indexOf(current) : -1;
-        this.announcement = at === -1 ? '' : fill(this.statusLabel, at + 1, items.length);
+        this.announcement =
+            at === -1 ? '' : fillTemplate(this.statusLabel, { count: items.length, index: at + 1 });
     }
     render() {
         return html `<dialog
       part="dialog"
       aria-label=${this.label || 'Lightbox'}
+      autofocus
+      tabindex="-1"
       @cancel=${this.handleCancel}
       @click=${this.handleBackdrop}
       @close=${this.handleClose}