@fusion.dev/helix-headless 0.142.1 → 0.144.0

package/dist/tag/root/tag-root.js

@@ -4,32 +4,102 @@ 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, MixinDismissible } from '@fusion.dev/helix-core';
-import { x } from '@fusion.dev/helix-icons';
+import { customElement, drawDismiss, drawDismissGlyph, HelixElement, hostAria, MixinDismissible, slottedWords, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
-import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { property } from 'lit/decorators.js';
 let HelixHeadlessTag = class HelixHeadlessTag extends MixinDismissible(HelixElement) {
     constructor() {
         super(...arguments);
         this.dismissLabel = 'Remove';
+        this.disabled = false;
+        this.href = '';
+        this.value = '';
+    }
+    get words() {
+        return this.childrenKnown ? slottedWords(this, ['start', '']) : '';
+    }
+    get grouped() {
+        return this.focusable !== undefined;
+    }
+    focusItem() {
+        this.renderRoot
+            .querySelector(this.grouped ? '[part~="cell"]' : '[part~="link"], [part~="dismiss"]')
+            ?.focus();
+    }
+    get returnFocusTo() {
+        if (this.disabled) {
+            return null;
+        }
+        return this.grouped
+            ? this.renderRoot.querySelector('[part~="cell"]')
+            : super.returnFocusTo;
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        hostAria(this.internals, { role: this.grouped ? 'row' : '' });
+        this.internals.ariaSelected = this.selected === undefined ? null : String(this.selected);
+        this.internals.ariaDisabled = this.disabled ? 'true' : null;
+        this.toggleState('selected', this.selected === true);
+    }
+    get removeName() {
+        const words = this.words;
+        if (this.dismissLabel.includes('{label}')) {
+            return this.dismissLabel.replace('{label}', words).trim();
+        }
+        return words === '' || this.dismissLabel.includes(words)
+            ? this.dismissLabel
+            : `${this.dismissLabel} ${words}`;
+    }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.renderRoot.addEventListener('slotchange', () => this.requestUpdate());
+        this.finishHydration();
     }
     render() {
-        return html `<slot name="start" part="start"></slot>
-      <slot part="label"></slot>
-      ${this.dismissible
-            ? html `<button
-            part="dismiss"
-            type="button"
-            aria-label=${this.dismissLabel}
-            @click=${() => this.dismiss()}
-          >
-            <svg part="dismiss-mark" fill="currentColor" viewBox=${x.viewBox} aria-hidden="true">
-              ${unsafeSVG(x.content)}
-            </svg>
-          </button>`
-            : nothing}`;
+        const content = html `<slot name="start" part="start"></slot>${this.renderLabel()}${this.dismissible ? this.renderDismiss() : nothing}`;
+        return this.grouped
+            ? html `<span part="cell" role="gridcell" tabindex=${this.focusable ? '0' : '-1'}
+          >${content}</span
+        >`
+            : content;
+    }
+    renderLabel() {
+        if (this.href === '') {
+            return html `<slot part="label"></slot>`;
+        }
+        return html `<a
+      aria-disabled=${this.disabled ? 'true' : nothing}
+      href=${this.disabled ? nothing : this.href}
+      part="link"
+      tabindex=${this.grouped ? '-1' : nothing}
+      ><slot part="label"></slot
+    ></a>`;
+    }
+    renderDismiss() {
+        return drawDismiss({
+            disabled: this.disabled,
+            label: this.removeName,
+            mark: html `<slot name="dismiss-icon">${drawDismissGlyph()}</slot>`,
+            onDismiss: () => this.dismiss(),
+            tabindex: this.grouped ? '-1' : undefined,
+        });
     }
 };
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessTag.prototype, "disabled", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessTag.prototype, "focusable", void 0);
+__decorate([
+    property()
+], HelixHeadlessTag.prototype, "href", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessTag.prototype, "selected", void 0);
+__decorate([
+    property()
+], HelixHeadlessTag.prototype, "value", void 0);
 HelixHeadlessTag = __decorate([
     customElement('helix-headless-tag')
 ], HelixHeadlessTag);

package/dist/tag/selection.d.ts

@@ -0,0 +1,10 @@
+/** How many tags a group lets a reader select. */
+export type TagSelectionMode = 'multiple' | 'none' | 'single';
+/**
+ * The `value` a press on the tag carrying `pressed` leaves.
+ *
+ * `single` selects that tag alone, or none where it was the one selected.
+ * `multiple` adds it, or takes it out. `none` selects nothing and leaves the
+ * value as it was.
+ */
+export declare const pressedValue: (mode: TagSelectionMode, value: string, pressed: string) => string;

package/dist/tag/selection.js

@@ -0,0 +1,12 @@
+import { commaList, toggleValue } from '@fusion.dev/helix-core';
+export const pressedValue = (mode, value, pressed) => {
+    const now = commaList(value);
+    const held = now.includes(pressed);
+    if (mode === 'single') {
+        return held ? '' : pressed;
+    }
+    if (mode === 'multiple') {
+        return toggleValue(now, pressed).join(', ');
+    }
+    return value;
+};

package/dist/textarea/grow.d.ts

@@ -0,0 +1,22 @@
+/** What a box adds around its lines, and how tall one line is, in pixels. */
+export interface LineMetrics {
+    /** Padding and border above and below the lines. */
+    readonly around: number;
+    /** The height of one line. */
+    readonly line: number;
+}
+/**
+ * The height a growing field takes: what its text needs, held to `maxRows`
+ * lines where that is a positive number. The second answer says whether the
+ * text is taller than the cap, so the field scrolls.
+ */
+export declare const grownHeight: (needed: number, maxRows: number | undefined, metrics: LineMetrics) => {
+    height: number;
+    scrolls: boolean;
+};
+/**
+ * Reads a box's line height and what it adds around its lines from its
+ * computed style. A `normal` line height counts as 1.2 times the font size,
+ * which is what browsers draw it as for most fonts.
+ */
+export declare const lineMetrics: (style: CSSStyleDeclaration) => LineMetrics;

package/dist/textarea/grow.js

@@ -0,0 +1,20 @@
+export const grownHeight = (needed, maxRows, metrics) => {
+    if (maxRows === undefined || !(maxRows > 0) || metrics.line <= 0) {
+        return { height: needed, scrolls: false };
+    }
+    const cap = Math.ceil(maxRows * metrics.line + metrics.around);
+    return needed > cap ? { height: cap, scrolls: true } : { height: needed, scrolls: false };
+};
+export const lineMetrics = (style) => {
+    const px = (value) => Number.parseFloat(value) || 0;
+    const line = style.lineHeight === 'normal' || style.lineHeight === ''
+        ? px(style.fontSize) * 1.2
+        : px(style.lineHeight);
+    const around = style.boxSizing === 'border-box'
+        ? px(style.paddingBlockStart) +
+            px(style.paddingBlockEnd) +
+            px(style.borderBlockStartWidth) +
+            px(style.borderBlockEndWidth)
+        : 0;
+    return { around, line };
+};

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

@@ -14,6 +14,8 @@ declare const HelixHeadlessTextarea_base: (new (...args: any[]) => import("@fusi
  *
  * `rows` sets the starting height, and `auto-grow` makes the field grow with
  * its content. You can use both: `rows` sets where an empty field begins.
+ * `max-rows` stops the growth at that many lines, and the field scrolls past
+ * them.
  *
  * @since 0.1.0
  * @status stable
@@ -21,6 +23,12 @@ declare const HelixHeadlessTextarea_base: (new (...args: any[]) => import("@fusi
  * @aliases Multiline, TextArea
  * @documentation https://fusion.dev/helix/components/textarea
  *
+ * @slot end - After the text, for an icon or an action beside it.
+ * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
+ * @slot hint - Help under the control, for content richer than the `hint` text.
+ * @slot label - The label, for content richer than the `label` text.
+ * @slot start - Before the text, for an icon.
+ *
  * @event {Event} change - Sent from the textarea when the user finishes an edit.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired as the text changes, and cancelable.
  * @event {Event} input - Fired after the value changes.
@@ -75,6 +83,11 @@ export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
      * The most characters the value can have.
      */
     maxLength?: number;
+    /**
+     * How many lines an `auto-grow` field grows to before it scrolls. Absent,
+     * it grows with all of its text.
+     */
+    maxRows?: number;
     /**
      * The fewest characters the value can have.
      *

package/dist/textarea/root/textarea-root.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { AriaForwardController, customElement, HelixFormElement, holdCaret, isRtl, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
+import { grownHeight, lineMetrics } from '../grow.js';
 let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerValue(MixinField(HelixFormElement)) {
     constructor() {
         super(...arguments);
@@ -51,7 +52,9 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
         if (next === 0) {
             return;
         }
-        control.style.blockSize = `${next}px`;
+        const grown = grownHeight(next, this.maxRows, lineMetrics(getComputedStyle(control)));
+        control.style.blockSize = `${grown.height}px`;
+        control.style.overflowY = grown.scrolls ? 'auto' : '';
     }
     formValue() {
         const control = this.control;
@@ -103,7 +106,7 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
         this.control?.focus(options);
     }
     sync() {
-        this.internals.setFormValue(this.formValue());
+        this.internals.setFormValue(this.formValue(), this.value);
         const control = this.control;
         if (!control) {
             return;
@@ -155,6 +158,7 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
     render() {
         return html `${this.renderLabel()}
     <div part="field">
+      <slot name="start"></slot>
       <textarea
         part="control"
         id=${this.controlId}
@@ -175,6 +179,7 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
         @input=${this.handleInput}
         @change=${this.handleChange}
       ></textarea>
+      <slot name="end"></slot>
     </div>
     ${this.renderHint()}${this.renderFeedback()}`;
     }
@@ -194,6 +199,9 @@ __decorate([
 __decorate([
     property({ attribute: 'maxlength', type: Number })
 ], HelixHeadlessTextarea.prototype, "maxLength", void 0);
+__decorate([
+    property({ attribute: 'max-rows', type: Number })
+], HelixHeadlessTextarea.prototype, "maxRows", void 0);
 __decorate([
     property({ attribute: 'minlength', type: Number })
 ], HelixHeadlessTextarea.prototype, "minLength", void 0);

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

@@ -1,9 +1,8 @@
-import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixFormElement, type HourCycle } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
-import '../../icon/index.js';
 import '../../tag/index.js';
 import '../../time-picker/index.js';
-declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerEditingInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinTokensInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
+declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinSegmentedFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerEditingInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinTokensInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A field for a time, typed or picked from a list.
  *
@@ -16,13 +15,25 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * You can type a time or pick one. The list offers times at a step, and the
  * field lets you enter any time, such as `09:07`.
  *
- * The value is always `HH:mm` on a 24-hour clock, because that is what the form
+ * The value is always `HH:mm` on a 24-hour clock, or `HH:mm:ss` with
+ * `seconds`, because that is what the form
  * submits, what `min` and `max` compare against, and what sorts correctly as a
  * string. While idle, the field shows the time in the user's locale format.
  * Once the caret is in the field, it shows the value itself, because a
  * formatted time such as `2:30 PM` cannot be typed back and `Intl` has no
  * parser for it.
  *
+ * Typing sends `input` on each keystroke and `change` when you leave the
+ * field. The trigger and ArrowDown open the list, and so does a press into the
+ * field; Tab into the field opens nothing. In the list, the arrow keys, typed digits and PageUp and PageDown
+ * move through the times, and Enter, Space or a click chooses one and closes
+ * the panel. With `variant="wheels"` each wheel moves the time as you turn it,
+ * the panel stays open, and Enter or Escape closes it.
+ *
+ * With `segmented`, the field is a row of segments in place of the text: an
+ * hour, a minute, and AM or PM where the clock has them, each set with digits
+ * or the arrow keys. Alt+Down opens the list from a segment.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
@@ -38,13 +49,14 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @event {HelixBeforeCloseEvent} helix-before-close - Fired before the list closes. Cancelable: canceling it keeps the list open and leaves the decision to you.
  * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the list opens. Cancelable: canceling it keeps the list closed and leaves the decision to you.
  * @event {Event} input - Fired after the value changes.
- * @event {Event} toggle - Fired after the list opens or closes, with `newState` and `oldState`.
+ * @event {ToggleEvent} toggle - Fired after the list opens or closes, with `newState` and `oldState`.
  *
  * @csspart control - The text input.
  * @csspart feedback - The message that says what is wrong with the value.
  * @csspart field - The box that holds the text and the trigger.
  * @csspart hint - Help under the field, while nothing is wrong.
  * @csspart label - The label above the field.
+ * @csspart literal - The text the locale writes between two segments, such as a colon, in `segmented`.
  * @csspart picker - The time picker inside the panel.
  * @csspart picker-column - One column of the picker.
  * @csspart picker-column-empty - The text shown when the filter hides every option.
@@ -80,12 +92,17 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @csspart picker-option-label - The option's label.
  * @csspart picker-option-text - The label and the caption, as one column.
  * @csspart rest - The count of times held beyond the ones shown. A `<button>` with `expandable`, and a `<span>` without it.
+ * @csspart segment - One part of the time, an hour, a minute, a second or AM and PM, in `segmented`.
+ * @csspart segment-placeholder - A segment with nothing in it yet. Applied with `segment`.
+ * @csspart segments - The row of segments that holds the time, in `segmented`.
  * @csspart surface - The floating panel.
  * @csspart tags - The row the times sit in.
  * @csspart time - One held time, as a tag, in `multiple`.
+ * @csspart time-cell - The tag's grid cell, which a tag draws only inside a tag group.
  * @csspart time-dismiss - The remove button, when `dismissible`.
  * @csspart time-dismiss-mark - The default icon on the remove button, shown when none is slotted.
  * @csspart time-label - The label, trimmed to its capitals and baseline.
+ * @csspart time-link - The tag's link around its label, which a tag draws only with `href`.
  * @csspart time-start - The category before the label.
  * @csspart trigger - The control that opens the list.
  * @csspart trigger-icon - The icon on the button that opens the clock.
@@ -102,6 +119,22 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * lets autofill work at all.
      */
     autocomplete: string;
+    /** Typed, so a keystroke is announced as `input` alone. See `announcesInput`. */
+    protected readonly announcesInput = true;
+    /**
+     * Times that cannot be chosen, as `HH:mm`, separated by commas or spaces.
+     *
+     * Handed to the list, which offers them as unavailable, and checked against
+     * a typed time, which is then invalid.
+     */
+    disableTimes: string;
+    /**
+     * The clock the times are written on: `h12` for twelve hours with a
+     * meridiem, `h23` for twenty-four. Absent is the locale's own.
+     *
+     * Handed to the list. The value is `HH:mm` on twenty-four hours either way.
+     */
+    hourCycle?: HourCycle;
     /**
      * Language tag the times are written in.
      *
@@ -155,7 +188,14 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      */
     removeLabel: string;
     /**
-     * How far apart the offered times are, in minutes.
+     * Whether times carry their seconds: the value is `HH:mm:ss`, a typed time
+     * may give them, the field writes them, and the list's `step` counts seconds.
+     * See Time Picker's `seconds`.
+     */
+    seconds: boolean;
+    /**
+     * How far apart the offered times are, in minutes, or in seconds with
+     * `seconds`.
      */
     step: number;
     /**
@@ -172,8 +212,25 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * The name of the button that opens the list, read by screen readers.
      */
     triggerLabel: string;
+    /**
+     * The message shown when `disable-times` bars a time.
+     */
+    unavailableMessage?: string;
     /** Every time in the value, which may hold more than one. */
     private get held();
+    /**
+     * Segments hold one time, so `range` and `multiple` keep the line of text,
+     * whose separators and tags are how those modes write several.
+     */
+    protected get segmentable(): boolean;
+    protected get segmentedKind(): 'time';
+    protected get segmentLocale(): string;
+    protected get segmentOptions(): {
+        hourCycle?: HourCycle | undefined;
+        seconds: boolean;
+    };
+    /** Whether a typed time is one this field holds, to the second where it holds seconds. */
+    private isTime;
     /** One time, written the way `time-style` asks for. */
     private written;
     /** What the field shows: the value while it is being edited, a reading when not. */
@@ -204,6 +261,14 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
     private get picked();
     private readonly handleInput;
     private readonly handlePicked;
+    /**
+     * Enter on the wheels closes the panel, the time on them being the answer.
+     *
+     * The list closes on the choice Enter makes. A wheel turned by the arrows
+     * already holds its time, so Enter there chooses nothing new, and this is
+     * what says the reader is done.
+     */
+    private readonly handleWheelEnter;
     /** Each time, where `mode` holds several, sent one entry each. */
     protected get answers(): readonly string[] | undefined;
     /** What is wrong with the times, which the text input cannot say. */