@fusion.dev/helix-headless 0.103.3 → 0.104.1

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

@@ -66,22 +66,6 @@ export declare class HelixHeadlessCarousel extends HelixElement {
      * Whether the carousel advances on its own.
      */
     autoplay: boolean;
-    /**
-     * The slide in view, counted from zero.
-     *
-     * Reading gives the real slide. Writing always applies, the way a script
-     * assigning to a native control does, and is a seed and a correction rather
-     * than a claim of ownership: a consumer who wants the decision refuses the
-     * `helix-select`. `default-index` is where the carousel starts until
-     * something moves it.
-     *
-     * The same contract the four mixins carry, written out here rather than
-     * extracted, because a slide is addressed by position and every one of those
-     * mixins is keyed by a name. One consumer is not a mixin: if a second numeric
-     * state turns up, this is what it is extracted from.
-     */
-    get index(): number;
-    set index(next: number);
     /**
      * Whether the previous and next controls are shown.
      *
@@ -112,6 +96,34 @@ export declare class HelixHeadlessCarousel extends HelixElement {
      * Slide to start on, where nothing declared one.
      */
     defaultIndex: number;
+    /**
+     * The slide in view, counted from zero.
+     *
+     * Reading gives the real slide. Writing always applies, the way a script
+     * assigning to a native control does, and is a seed and a correction rather
+     * than a claim of ownership: a consumer who wants the decision refuses the
+     * `helix-select`. `default-index` is where the carousel starts until
+     * something moves it.
+     *
+     * The same contract the four mixins carry, written out here rather than
+     * extracted, because a slide is addressed by position and every one of those
+     * mixins is keyed by a name. One consumer is not a mixin: if a second numeric
+     * state turns up, this is what it is extracted from.
+     */
+    get index(): number;
+    set index(next: number);
+    /**
+     * What one indicator is called, with `{index}` filled in.
+     *
+     * **Every word the carousel speaks is a property**, so a page in another
+     * language hears its own: only `label` was, and the controls around it
+     * read out in English.
+     */
+    indicatorLabel: string;
+    /**
+     * What the row of indicators is called, with the carousel's `{label}` filled in.
+     */
+    indicatorsLabel: string;
     /**
      * How long each slide is held, in milliseconds.
      */
@@ -128,6 +140,10 @@ export declare class HelixHeadlessCarousel extends HelixElement {
      * Whether moving past either end wraps to the other.
      */
     loop: boolean;
+    /**
+     * What the control that moves forward is called.
+     */
+    nextLabel: string;
     /**
      * Which way the track runs.
      *
@@ -212,6 +228,27 @@ export declare class HelixHeadlessCarousel extends HelixElement {
      * case is the absent attribute, and the styles read it that way.
      */
     perView?: number | 'auto';
+    /**
+     * What the control that moves back is called.
+     */
+    previousLabel: string;
+    /**
+     * What each slide is called, with `{index}` and `{count}` filled in.
+     */
+    slideLabel: string;
+    /**
+     * What a slide is, read out in place of its role: `aria-roledescription`,
+     * which is a word a reader hears and so a word to translate.
+     */
+    slideRoleLabel: string;
+    /**
+     * What the rotation control is called while it would start rotation.
+     */
+    startLabel: string;
+    /**
+     * And while it would stop it.
+     */
+    stopLabel: string;
     /**
      * A declared `perView` as both tiers use it: a whole number, one at least.
      *

package/dist/carousel/root/carousel-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, HelixSelectEvent, hostAria, inlineStep, isRtl, requestChange, } from '@fusion.dev/helix-core';
+import { customElement, fillTemplate, HelixElement, HelixSelectEvent, hostAria, inlineStep, isRtl, requestChange, } from '@fusion.dev/helix-core';
 import { caretLeft, caretRight, play, stop } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -23,12 +23,20 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         super(...arguments);
         this.autoplay = false;
         this.defaultIndex = 0;
+        this.indicatorLabel = 'Slide {index}';
+        this.indicatorsLabel = '{label} slides';
         this.interval = 5000;
         this.indexState = undefined;
         this.scrolledFor = 0;
         this.label = 'Carousel';
         this.loop = false;
+        this.nextLabel = 'Next slide';
         this.rotating = false;
+        this.previousLabel = 'Previous slide';
+        this.slideLabel = '{index} of {count}';
+        this.slideRoleLabel = 'slide';
+        this.startLabel = 'Start slide rotation';
+        this.stopLabel = 'Stop slide rotation';
         this.readFit = () => {
             const fitted = this.measure();
             if (fitted === undefined || fitted === this.fitted) {
@@ -259,6 +267,9 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         this.watcher = new MutationObserver(() => this.requestUpdate());
         this.watcher.observe(this, { childList: true });
         this.watchPane();
+        if (this.hasUpdated) {
+            this.runTimer();
+        }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -340,7 +351,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
             ? html `<button
                 part="rotation"
                 type="button"
-                aria-label=${rotating ? 'Stop slide rotation' : 'Start slide rotation'}
+                aria-label=${rotating ? this.stopLabel : this.startLabel}
                 @click=${() => (rotating ? this.stop() : this.start())}
               >
                 <svg part="rotation-mark"
@@ -357,7 +368,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
             : html `<button
                   part="previous"
                   type="button"
-                  aria-label="Previous slide"
+                  aria-label=${this.previousLabel}
                   @click=${() => this.goTo(this.index - 1)}
                 >
                   <svg part="previous-mark" data-mirror fill="currentColor" viewBox=${caretLeft.viewBox} aria-hidden="true">
@@ -367,7 +378,7 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
                 <button
                   part="next"
                   type="button"
-                  aria-label="Next slide"
+                  aria-label=${this.nextLabel}
                   @click=${() => this.goTo(this.index + 1)}
                 >
                   <svg part="next-mark" data-mirror fill="currentColor" viewBox=${caretRight.viewBox} aria-hidden="true">
@@ -388,8 +399,8 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
         ${this.slides.map((_, index) => html `<div
             part="slide"
             role="group"
-            aria-roledescription="slide"
-            aria-label=${`${index + 1} of ${this.slides.length}`}
+            aria-roledescription=${this.slideRoleLabel}
+            aria-label=${fillTemplate(this.slideLabel, { count: this.slides.length, index: index + 1 })}
             style=${index === last ? this.runEnd() : nothing}
           >
             <slot
@@ -399,14 +410,14 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
           </div>`)}
       </div>
       ${this.slides.length > 1 && this.across !== undefined
-            ? html `<div part="indicators" role="group" aria-label=${`${this.label} slides`}>
+            ? html `<div part="indicators" role="group" aria-label=${fillTemplate(this.indicatorsLabel, { label: this.label })}>
               ${''}
               ${Array.from({ length: this.positions }).map((_place, at) => {
                 const current = at === (this.showing ?? this.index);
                 return html `<button
                   part="indicator${current ? ' indicator-current' : ''}"
                   type="button"
-                  aria-label=${`Slide ${at + 1}`}
+                  aria-label=${fillTemplate(this.indicatorLabel, { index: at + 1 })}
                   aria-current=${at === this.index ? 'true' : nothing}
                   tabindex=${at === this.index ? '0' : '-1'}
                   ?data-current=${current}
@@ -421,15 +432,21 @@ let HelixHeadlessCarousel = class HelixHeadlessCarousel extends HelixElement {
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessCarousel.prototype, "autoplay", void 0);
-__decorate([
-    property({ type: Number })
-], HelixHeadlessCarousel.prototype, "index", null);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessCarousel.prototype, "controls", void 0);
 __decorate([
     property({ attribute: 'default-index', type: Number })
 ], HelixHeadlessCarousel.prototype, "defaultIndex", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessCarousel.prototype, "index", null);
+__decorate([
+    property({ attribute: 'indicator-label' })
+], HelixHeadlessCarousel.prototype, "indicatorLabel", void 0);
+__decorate([
+    property({ attribute: 'indicators-label' })
+], HelixHeadlessCarousel.prototype, "indicatorsLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessCarousel.prototype, "interval", void 0);
@@ -439,6 +456,9 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], HelixHeadlessCarousel.prototype, "loop", void 0);
+__decorate([
+    property({ attribute: 'next-label' })
+], HelixHeadlessCarousel.prototype, "nextLabel", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessCarousel.prototype, "orientation", void 0);
@@ -448,6 +468,21 @@ __decorate([
 __decorate([
     property({ attribute: 'per-view', converter: COUNT_OR_AUTO, reflect: true })
 ], HelixHeadlessCarousel.prototype, "perView", void 0);
+__decorate([
+    property({ attribute: 'previous-label' })
+], HelixHeadlessCarousel.prototype, "previousLabel", void 0);
+__decorate([
+    property({ attribute: 'slide-label' })
+], HelixHeadlessCarousel.prototype, "slideLabel", void 0);
+__decorate([
+    property({ attribute: 'slide-role-label' })
+], HelixHeadlessCarousel.prototype, "slideRoleLabel", void 0);
+__decorate([
+    property({ attribute: 'start-label' })
+], HelixHeadlessCarousel.prototype, "startLabel", void 0);
+__decorate([
+    property({ attribute: 'stop-label' })
+], HelixHeadlessCarousel.prototype, "stopLabel", void 0);
 __decorate([
     state()
 ], HelixHeadlessCarousel.prototype, "fitted", void 0);

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

@@ -134,6 +134,10 @@ export declare class HelixHeadlessChat extends HelixHeadlessChat_base {
     static readonly ESTIMATE = 72;
     /**
      * Whether to open pinned, where nothing declared it.
+     *
+     * `default-pinned="false"` opens away from the bottom. A plain boolean
+     * attribute could not say that: it is true by being there, whatever it holds,
+     * so a default of true had no attribute that turned it off.
      */
     defaultPinned: boolean;
     /**

package/dist/chat/root/chat-root.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var HelixHeadlessChat_1;
-import { customElement, HelixBeforePinEvent, HelixElement, HelixHistoryEvent, hostAria, MixinCollection, requestChange, VirtualizeController, } from '@fusion.dev/helix-core';
+import { customElement, HelixBeforePinEvent, HelixElement, HelixHistoryEvent, hostAria, MixinCollection, onUnlessFalse, requestChange, VirtualizeController, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { keyed } from 'lit/directives/keyed.js';
@@ -343,7 +343,9 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         this.opening = true;
         requestAnimationFrame(() => {
             this.opening = false;
-            this.reachHistory();
+            if (this.isConnected) {
+                this.reachHistory();
+            }
         });
     }
     disconnectedCallback() {
@@ -361,6 +363,10 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         this.countRegions();
         if (changed.has('history')) {
             this.asked = false;
+            if (this.history === 'loading' && changed.get('history') !== undefined) {
+                this.announcement = this.historyText;
+                this.said += 1;
+            }
         }
         if (changed.has('turns')) {
             this.follow(changed.get('turns'));
@@ -433,9 +439,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
         ?data-windowed=${fed}
         @scroll=${this.handleScroll}
       >
-        ${this.history === 'loading'
-            ? html `<p part="history" role="status">${this.historyText}</p>`
-            : nothing}
+        ${this.history === 'loading' ? html `<p part="history">${this.historyText}</p>` : nothing}
         ${fed ? this.renderTurns() : nothing}
         <slot name="messages" @slotchange=${this.handleSlotChange}></slot>
         ${this.renderStatus(fed || this.messages.length > 0 || !this.childrenKnown)}
@@ -444,7 +448,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
       <div part="resume" ?hidden=${!away || !this.has('resume')} @click=${this.handleResume}>
         <slot name="resume"></slot>
       </div>
-      <div part="status" role="status" ?hidden=${!this.has('status')}>
+      <div part="status" role="status" ?data-empty=${!this.has('status')}>
         <slot name="status"></slot>
       </div>
       <div part="composer" ?hidden=${!this.has('composer')}>
@@ -453,7 +457,7 @@ let HelixHeadlessChat = class HelixHeadlessChat extends MixinCollection(HelixEle
     }
 };
 __decorate([
-    property({ attribute: 'default-pinned', type: Boolean })
+    property({ attribute: 'default-pinned', converter: onUnlessFalse })
 ], HelixHeadlessChat.prototype, "defaultPinned", void 0);
 __decorate([
     property()

package/dist/checkbox/root/checkbox-root.js

@@ -37,6 +37,7 @@ let HelixHeadlessCheckbox = class HelixHeadlessCheckbox extends MixinControllerC
         this.reportRequired(!this.checked, 'Tick this box to continue.', 'control');
     }
     formResetCallback() {
+        super.formResetCallback();
         this.indeterminate = false;
         this.resetChecked();
     }

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

@@ -116,6 +116,16 @@ export declare class HelixHeadlessCheckboxGroup extends HelixHeadlessCheckboxGro
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
+    /**
+     * Goes back to the set the markup started with.
+     *
+     * **Seeded again rather than cleared.** The form resets each box too, in the
+     * same task and after this, so by the next update the boxes are back to
+     * what they declared and the seed reads them. Without this the group kept
+     * the reader's set, reported valid over boxes the reset had emptied, and
+     * ticked them again the next time anything updated it.
+     */
+    formResetCallback(): void;
     /**
      * Refuses an empty set where one was required.
      *

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

@@ -97,6 +97,11 @@ let HelixHeadlessCheckboxGroup = class HelixHeadlessCheckboxGroup extends MixinF
             }
         }
     }
+    formResetCallback() {
+        super.formResetCallback();
+        this.value = this.getAttribute('value') ?? '';
+        this.seeded = false;
+    }
     validate() {
         this.reportRequired(this.value === '', 'Choose at least one to continue.', 'items');
     }

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

@@ -57,13 +57,13 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         }
         const control = this.control;
         if (this.value !== '' && parseColor(this.value) === null) {
-            this.internals.setValidity({ badInput: true }, 'Enter a color, like #ff0000, rgb(255 0 0) or hsl(0 100% 50%).', anchor);
+            this.internals.setValidity({ badInput: true }, this.badInputMessage || 'Enter a color, like #ff0000, rgb(255 0 0) or hsl(0 100% 50%).', anchor);
         }
         else if (control) {
-            this.internals.setValidity(control.validity, control.validationMessage, control);
+            this.copyValidity(control);
         }
         else {
-            this.internals.setValidity(this.required && this.value === '' ? { valueMissing: true } : {}, this.required && this.value === '' ? 'Choose a color.' : '', anchor);
+            this.internals.setValidity(this.required && this.value === '' ? { valueMissing: true } : {}, this.required && this.value === '' ? this.valueMissingMessage || 'Choose a color.' : '', anchor);
         }
         this.refreshFeedback();
     }
@@ -137,7 +137,12 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
           aria-controls="surface"
           aria-expanded=${this.open ? 'true' : 'false'}
           aria-haspopup="dialog"
-          aria-label=${this.triggerLabel}
+          aria-label=${this.variant === 'swatch' ? nothing : this.triggerLabel}
+          aria-labelledby=${this.variant === 'swatch'
+            ? this.labeled
+                ? `${this.labelId} swatch-value`
+                : 'swatch-value'
+            : nothing}
           ?disabled=${this.isDisabled}
           @click=${() => this.toggleOpen()}
         >
@@ -146,10 +151,21 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
             style="--color-input-swatch: ${this.value === '' ? 'transparent' : this.painted}"
           ></span>
           <slot name="trigger"></slot>
+          ${this.variant === 'swatch'
+            ? html `<span id="swatch-value" hidden>${this.value || this.triggerLabel}</span>`
+            : nothing}
         </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()}`;

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

@@ -90,6 +90,25 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * ramps. A consumer who wants autofill can still ask.
      */
     autocomplete: string;
+    /**
+     * What the square's vertical ramp is called.
+     *
+     * **Every word the picker speaks is a property**, so a page in another
+     * language hears its own rather than English between its own labels.
+     */
+    brightnessLabel: string;
+    /**
+     * What the sample says for a moment after it copied the value.
+     */
+    copiedLabel: string;
+    /**
+     * What the sample is called, which copies the value, with `{value}` filled in.
+     */
+    copyLabel: string;
+    /**
+     * What the eyedropper is called.
+     */
+    eyedropperLabel: string;
     /**
      * The syntax the value is written in: `hex`, `rgb` or `hsl`.
      *
@@ -97,6 +116,14 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * `hex` still takes an `rgb()` handed to it and stores the hex for it.
      */
     format?: ColorFormat;
+    /**
+     * What the syntax toggle is called, with `{format}` filled in.
+     */
+    formatLabel: string;
+    /**
+     * What the hue channel is called.
+     */
+    hueLabel: string;
     /**
      * Whether the current selection fails validation.
      *
@@ -130,6 +157,14 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * would then be unreadable and unpasteable without opening a panel.
      */
     noValue: boolean;
+    /**
+     * What the opacity channel is called, where `alpha` offers one.
+     */
+    opacityLabel: string;
+    /**
+     * What the row of `swatches` is called.
+     */
+    presetsLabel: string;
     /**
      * Whether the control refuses changes while still submitting its value.
      *
@@ -182,10 +217,30 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * typed into.
      */
     required: boolean;
+    /**
+     * What the square's horizontal ramp is called.
+     */
+    saturationLabel: string;
     /**
      * Colors offered under the picker, as a comma-separated list.
      */
     swatches: string;
+    /**
+     * What the group holding the eyedropper and the syntax toggle is called.
+     */
+    toolsLabel: string;
+    /**
+     * What the text field holding the value is called.
+     */
+    valueLabel: string;
+    /**
+     * What a reader is told when a color is required and none is chosen.
+     *
+     * **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.
+     */
+    valueMissingMessage?: string;
     /**
      * The color the reader has moved to, or nothing while they have moved none.
      *