@fusion.dev/helix-headless 0.142.0 → 0.143.0

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

@@ -4,18 +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;
 };
+var HelixHeadlessCheckboxGroup_1;
 import { customElement, DisabledCascadeController, HelixBeforeChangeEvent, HelixFormElement, hostAria, MixinField, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessCheckbox } from '../../checkbox/root/checkbox-root.js';
-let HelixHeadlessCheckboxGroup = class HelixHeadlessCheckboxGroup extends MixinField(HelixFormElement) {
+let HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = class HelixHeadlessCheckboxGroup extends MixinField(HelixFormElement) {
     constructor() {
         super(...arguments);
-        this.value = '';
+        this.declared = '';
+        this.pending = false;
+        this.watched = new Set();
+        this.member = {
+            hostUpdated: () => {
+                if (this.isConnected && this.value !== this.judged) {
+                    this.requestUpdate();
+                }
+            },
+        };
         this.cascade = new DisabledCascadeController(this, {
             items: () => this.boxes,
         });
-        this.seeded = false;
         this.handleToggle = (event) => {
             const target = event.target;
             const changed = this.boxes.find((box) => box === target);
@@ -32,6 +41,7 @@ let HelixHeadlessCheckboxGroup = class HelixHeadlessCheckboxGroup extends MixinF
                 .map((box) => box.value)
                 .join(',');
             if (!this.dispatchEvent(new HelixBeforeChangeEvent({ value: next }))) {
+                event.preventDefault();
                 return;
             }
             this.value = next;
@@ -39,30 +49,68 @@ let HelixHeadlessCheckboxGroup = class HelixHeadlessCheckboxGroup extends MixinF
             this.announceChange();
         };
         this.handleMemberNative = (event) => {
-            if (event.target !== this) {
+            if (event.target instanceof HelixHeadlessCheckbox && this.holds(event.target)) {
                 event.stopImmediatePropagation();
             }
         };
     }
+    get value() {
+        if (this.pending || !this.hasUpdated || !this.childrenKnown) {
+            return this.declared;
+        }
+        const boxes = this.boxes;
+        return boxes.length === 0
+            ? this.declared
+            : boxes
+                .filter((box) => box.checked)
+                .map((box) => box.value)
+                .join(',');
+    }
+    set value(next) {
+        const previous = this.declared;
+        this.declared = next;
+        this.pending = true;
+        this.requestUpdate('value', previous);
+    }
     get boxes() {
-        return [...this.children].filter((child) => child instanceof HelixHeadlessCheckbox);
+        return [...this.querySelectorAll('*')].filter((element) => element instanceof HelixHeadlessCheckbox && this.holds(element));
+    }
+    holds(box) {
+        let parent = box.parentElement;
+        while (parent && parent !== this) {
+            if (parent instanceof HelixHeadlessCheckboxGroup_1) {
+                return false;
+            }
+            parent = parent.parentElement;
+        }
+        return parent === this;
     }
     sync() {
-        const wanted = new Set(this.value
-            .split(',')
-            .map((entry) => entry.trim())
-            .filter(Boolean));
-        for (const box of this.boxes) {
+        const boxes = this.boxes;
+        for (const box of boxes) {
             if (this.name !== '' && box.name === '') {
                 box.name = this.name;
             }
-            box.checked = wanted.has(box.value);
+            if (!this.watched.has(box)) {
+                box.addController(this.member);
+                this.watched.add(box);
+            }
         }
-    }
-    seed() {
-        const checked = this.boxes.filter((box) => box.checked).map((box) => box.value);
-        if (checked.length > 0) {
-            this.value = checked.join(',');
+        for (const box of this.watched) {
+            if (!boxes.includes(box)) {
+                this.unwatch(box);
+            }
+        }
+        if (!this.pending || boxes.length === 0) {
+            return;
+        }
+        this.pending = false;
+        const wanted = new Set(this.declared
+            .split(',')
+            .map((entry) => entry.trim())
+            .filter(Boolean));
+        for (const box of boxes) {
+            box.checked = wanted.has(box.value);
         }
     }
     connectedCallback() {
@@ -70,45 +118,45 @@ let HelixHeadlessCheckboxGroup = class HelixHeadlessCheckboxGroup extends MixinF
         this.addEventListener('helix-before-toggle', this.handleToggle);
         this.addEventListener('change', this.handleMemberNative);
         this.addEventListener('input', this.handleMemberNative);
+        this.observer = new MutationObserver(() => this.requestUpdate());
+        this.observer.observe(this, { childList: true, subtree: true });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-before-toggle', this.handleToggle);
         this.removeEventListener('change', this.handleMemberNative);
         this.removeEventListener('input', this.handleMemberNative);
+        this.observer?.disconnect();
+        this.observer = undefined;
+        for (const box of this.watched) {
+            this.unwatch(box);
+        }
+    }
+    unwatch(box) {
+        box.removeController(this.member);
+        this.watched.delete(box);
     }
     willUpdate(changed) {
         super.willUpdate(changed);
         hostAria(this.internals, { label: this.label, role: 'group' });
         this.internals.ariaRequired = this.required ? 'true' : null;
-        if (!this.seeded && this.childrenKnown) {
-            this.seeded = true;
-            if (this.value === '') {
-                this.seed();
-            }
-        }
-    }
-    firstUpdated(changed) {
-        super.firstUpdated(changed);
-        if (!this.seeded && this.children !== undefined) {
-            this.seeded = true;
-            if (this.value === '') {
-                this.seed();
-            }
-        }
     }
     formResetCallback() {
         super.formResetCallback();
-        this.value = this.getAttribute('value') ?? '';
-        this.seeded = false;
+        const declared = this.getAttribute('value');
+        if (declared !== null) {
+            this.value = declared;
+        }
+        this.requestUpdate();
     }
     validate() {
-        this.reportRequired(this.value === '', 'Choose at least one to continue.', 'items');
+        this.judged = this.value;
+        this.reportRequired(this.judged === '', 'Choose at least one to continue.', 'items');
     }
     updated(changed) {
         super.updated(changed);
-        this.validate();
         this.sync();
+        this.validate();
         this.linkHost();
     }
     render() {
@@ -122,8 +170,8 @@ let HelixHeadlessCheckboxGroup = class HelixHeadlessCheckboxGroup extends MixinF
 };
 __decorate([
     property()
-], HelixHeadlessCheckboxGroup.prototype, "value", void 0);
-HelixHeadlessCheckboxGroup = __decorate([
+], HelixHeadlessCheckboxGroup.prototype, "value", null);
+HelixHeadlessCheckboxGroup = HelixHeadlessCheckboxGroup_1 = __decorate([
     customElement('helix-headless-checkbox-group')
 ], HelixHeadlessCheckboxGroup);
 export { HelixHeadlessCheckboxGroup };

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

@@ -15,7 +15,7 @@ import { type TemplateResult } from 'lit';
  * @since 0.1.0
  * @status stable
  * @category typography
- * @aliases Inline code, Kbd
+ * @aliases Inline code
  * @documentation https://fusion.dev/helix/components/code
  *
  * @slot - The code.

package/dist/code-block/root/code-block-root.d.ts

@@ -69,6 +69,14 @@ import '../../copy-button/index.js';
  * @csspart text - In a diff, a line's code.
  */
 export declare class HelixHeadlessCodeBlock extends HelixElement {
+    /**
+     * The copy button's name and tooltip text after a copy.
+     */
+    copiedLabel: string;
+    /**
+     * The copy button's name and tooltip text before a copy.
+     */
+    copyLabel: string;
     /**
      * Whether the content is a unified diff, drawn as the lines it changed.
      *
@@ -133,6 +141,17 @@ export declare class HelixHeadlessCodeBlock extends HelixElement {
      * server sent, which rendered it empty.
      */
     private get text();
+    /**
+     * Watches the code for edits that change no slot assignment.
+     *
+     * A framework updating one string child writes the text node's data in
+     * place, which React does, and that fires no `slotchange`. The block showed
+     * the new code while its button copied the old, and a diff edited that way
+     * was not redrawn.
+     */
+    private observer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
     /**

package/dist/code-block/root/code-block-root.js

@@ -13,6 +13,8 @@ import { pairLines, parsePatch } from '../patch.js';
 let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
     constructor() {
         super(...arguments);
+        this.copiedLabel = 'Copied';
+        this.copyLabel = 'Copy code';
         this.diff = false;
         this.label = '';
         this.noCopy = false;
@@ -38,6 +40,17 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
             .map((node) => node.textContent ?? '')
             .join('');
     }
+    connectedCallback() {
+        super.connectedCallback();
+        if (typeof MutationObserver !== 'undefined') {
+            this.observer ??= new MutationObserver(() => this.requestUpdate());
+            this.observer.observe(this, { characterData: true, childList: true, subtree: true });
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.observer?.disconnect();
+    }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
@@ -69,7 +82,8 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         tooltip-arrow-left: copy-tooltip-arrow-left, tooltip-arrow-right: copy-tooltip-arrow-right,
         tooltip-arrow-top: copy-tooltip-arrow-top, tooltip-bottom: copy-tooltip-bottom,
         tooltip-left: copy-tooltip-left, tooltip-right: copy-tooltip-right, tooltip-top: copy-tooltip-top"
-      label="Copy code"
+      copied-label=${this.copiedLabel}
+      label=${this.copyLabel}
       .value=${value}
     ></${this.tag('copy-button')}>`;
     }
@@ -121,6 +135,12 @@ let HelixHeadlessCodeBlock = class HelixHeadlessCodeBlock extends HelixElement {
         })}<slot hidden @slotchange=${() => this.requestUpdate()}></slot>`;
     }
 };
+__decorate([
+    property({ attribute: 'copied-label' })
+], HelixHeadlessCodeBlock.prototype, "copiedLabel", void 0);
+__decorate([
+    property({ attribute: 'copy-label' })
+], HelixHeadlessCodeBlock.prototype, "copyLabel", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessCodeBlock.prototype, "diff", void 0);

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

@@ -23,6 +23,11 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  * not survive a round trip through a formatter. Date Input does the same with
  * dates.
  *
+ * Typing sends `input` on each keystroke and `change` when you leave the
+ * field, as a text field does, so the message about a color it cannot read
+ * waits until you are done. Dragging in the panel sends `input` as the color
+ * moves and `change` when it settles.
+ *
  * The component sets `--color-input-swatch`, so do not set it yourself. It
  * holds the resolved color, so the styled tier can paint the swatch without
  * parsing the value.
@@ -44,7 +49,7 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  * @event {HelixBeforeCloseEvent} helix-before-close - The panel is about to close. Cancelable: cancel it to keep it open.
  * @event {HelixBeforeOpenEvent} helix-before-open - The panel is about to open. Cancelable: cancel it to keep it closed.
  * @event {Event} input - Fired as the value changes.
- * @event {Event} toggle - The panel opened or closed. The event carries `newState` and `oldState`.
+ * @event {ToggleEvent} toggle - The panel opened or closed. The event carries `newState` and `oldState`.
  *
  * @csspart control - The text input that holds the value. Absent in the `swatch` variant.
  * @csspart feedback - The message that says what is wrong with the value.
@@ -125,6 +130,19 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
      * The text the field shows before a color is entered.
      */
     placeholder: string;
+    /**
+     * Whether the color is locked. A read-only field still submits its value.
+     *
+     * The field can be read and copied from, and the panel does not open, as on
+     * Date Input and Time Input.
+     */
+    readOnly: boolean;
+    /** Typed, so a keystroke is announced as `input` alone. See `announcesInput`. */
+    protected readonly announcesInput = true;
+    /** Requests a new value. While `readOnly` is set, nothing changes. */
+    requestValue(next: string): boolean;
+    /** Requests the panel open or closed. While `readOnly` is set, it does not open. */
+    requestOpen(next: boolean): boolean;
     /**
      * Colors offered under the picker, as a comma-separated list.
      */
@@ -193,6 +211,13 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
      * not mean.
      */
     private readonly handlePickerChange;
+    /**
+     * The picker's `change`, said under this element's name.
+     *
+     * The picker sends it when a drag, a key or a preset settles the color, so
+     * this field does too, and a drag is one `change` rather than one a frame.
+     */
+    private readonly handlePickerSettled;
     /**
      * The picker is about to take the pointer over, so the panel gets out of the
      * way and comes back after.

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

@@ -19,6 +19,8 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         this.autocomplete = 'off';
         this.noFormat = false;
         this.placeholder = '#000000';
+        this.readOnly = false;
+        this.announcesInput = true;
         this.swatches = '';
         this.triggerLabel = 'Choose a color';
         this.settled = '';
@@ -32,9 +34,17 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
             if (event.composedPath()[0] !== event.currentTarget) {
                 return;
             }
-            this.requestValue(event.detail.value);
+            if (!this.requestValue(event.detail.value)) {
+                event.preventDefault();
+            }
             this.restore();
         };
+        this.handlePickerSettled = (event) => {
+            event.stopPropagation();
+            if (event.composedPath()[0] === event.currentTarget) {
+                this.announceChange();
+            }
+        };
         this.handleSampleStart = () => {
             this.requestOpen(false);
         };
@@ -42,6 +52,18 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
             this.requestOpen(true);
         };
     }
+    requestValue(next) {
+        if (this.readOnly) {
+            return false;
+        }
+        return super.requestValue(next);
+    }
+    requestOpen(next) {
+        if (next && this.readOnly) {
+            return false;
+        }
+        return super.requestOpen(next);
+    }
     get anchor() {
         return this.control ?? this.partNamed('trigger');
     }
@@ -99,7 +121,7 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
       swatches=${this.swatches || nothing}
       ?disabled=${this.isDisabled}
       @helix-before-change=${this.handlePickerChange}
-      @change=${this.stopInner}
+      @change=${this.handlePickerSettled}
       @input=${this.stopInner}
       @helix-sample-start=${this.handleSampleStart}
       @helix-sample-end=${this.handleSampleEnd}
@@ -130,8 +152,11 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
           aria-describedby=${this.describedBy ?? nothing}
           aria-invalid=${this.invalidity ?? nothing}
           ?disabled=${this.isDisabled}
+          ?readonly=${this.readOnly}
           ?required=${this.required}
+          @change=${this.handleCommit}
           @input=${this.handleInput}
+          @keypress=${this.handleKeypress}
         />`}
         <slot name="end"></slot>
         <button
@@ -139,6 +164,7 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
           id=${this.variant === 'swatch' ? 'control' : nothing}
           type="button"
           aria-controls="surface"
+          aria-disabled=${this.readOnly ? 'true' : nothing}
           aria-expanded=${this.open ? 'true' : 'false'}
           aria-haspopup="dialog"
           aria-label=${this.variant === 'swatch' ? nothing : this.triggerLabel}
@@ -148,7 +174,7 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
                 : 'swatch-value'
             : nothing}
           ?disabled=${this.isDisabled}
-          @click=${() => this.toggleOpen()}
+          @click=${this.handleTriggerClick}
         >
           <span
             part="preview"
@@ -190,6 +216,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessColorInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ attribute: 'readonly', reflect: true, type: Boolean })
+], HelixHeadlessColorInput.prototype, "readOnly", void 0);
 __decorate([
     property()
 ], HelixHeadlessColorInput.prototype, "swatches", void 0);

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

@@ -21,6 +21,12 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  * hue or saturation, so a model read back from the value would turn red into
  * gray after you drag to the bottom of the square and back.
  *
+ * The square is one tab stop. In it, the up and down arrows move brightness
+ * and the left and right arrows move saturation, and PageUp and PageDown move
+ * brightness by ten. The picker sends `input` as the color moves and `change`
+ * when a drag, a key, a typed value or a preset settles it, as
+ * `<input type="color">` does.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -89,6 +95,10 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * ramps. A consumer who wants autofill can still ask.
      */
     autocomplete: string;
+    /**
+     * The message shown when the value is text that is not a color.
+     */
+    badInputMessage?: string;
     /**
      * What the square's vertical ramp is called.
      *
@@ -210,13 +220,11 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * would give one control two of each. What is left is the validity call and
      * the anchor the browser points its bubble at.
      *
-     * **Emptiness is the only fault reported, and bad input deliberately is
-     * not.** The value row is typed into a character at a time and every
-     * keystroke reaches `requestValue`, so `#0`, `#00` and `#00f` would each be a
-     * reported fault on the way to `#00ff00`. Date Picker and Time Picker can
-     * report bad input because their value moves only on a commit. Color Input
-     * reports it for this family instead, once, against the field the reader
-     * typed into.
+     * **Text that is not a color is bad input**, so a form does not submit
+     * `#00` from a half-typed value. The picker draws no message of its own, so
+     * reporting it as each keystroke arrives shows nothing until the form asks;
+     * Color Input shows its own message against the field the reader typed
+     * into.
      */
     required: boolean;
     /**
@@ -268,6 +276,18 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * which reads back as hue 0 and saturation 0, and the next drag starts gray.
      */
     private owned;
+    /** Dragged and keyed, so a move is announced as `input` alone. See `announcesInput`. */
+    protected readonly announcesInput = true;
+    /** Whether the value has moved since `change` was last sent. */
+    private unsettled;
+    /**
+     * Sends `change` for a value that has settled, where it moved.
+     *
+     * Measured before this: a six-step drag sent six `change` events, so a
+     * consumer saving on `change`, as they would for `<input type="color">`,
+     * saved on every frame.
+     */
+    private settle;
     /** The current color: the last one moved to, the value, or the start color. */
     get color(): Color;
     /**
@@ -365,6 +385,16 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * `required`.
      */
     private sync;
+    /**
+     * Moves the square from the keyboard, both axes from either of its inputs.
+     *
+     * The square is two native ranges, and a native range maps every arrow to
+     * its own one axis: on the saturation input, ArrowUp moved the handle
+     * sideways. Here the vertical keys move brightness and the horizontal keys
+     * move saturation, turned on a right-to-left page as the pointer is, which is
+     * what React Aria's ColorArea does.
+     */
+    private readonly handleAreaKeydown;
     /**
      * Reports "required and empty", or clears it.
      *