@fusion.dev/helix-headless 0.143.0 → 0.144.0

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

@@ -20,6 +20,14 @@ declare const HelixHeadlessTag_base: (new (...args: any[]) => import("@fusion.de
  * to put the tag's words somewhere else, such as `dismiss-label="{label}
  * entfernen"`.
  *
+ * `href` makes the label a link, and `disabled` takes the tag out of reach: its
+ * link and its remove button stop answering.
+ *
+ * **In a `Tag.Group` a tag is a row of a grid.** The group gives it its role,
+ * its place in the one tab stop and, where the group selects, whether it is
+ * selected. Its remove button leaves the tab order there, Delete and Backspace
+ * doing its job from the row.
+ *
  * @since 0.1.0
  * @status stable
  * @category markers
@@ -27,17 +35,65 @@ declare const HelixHeadlessTag_base: (new (...args: any[]) => import("@fusion.de
  * @documentation https://fusion.dev/helix/components/tag
  *
  * @slot - The tag's label.
+ * @slot dismiss-icon - Replaces the glyph on the remove button.
  * @slot start - The category the label belongs to, shown before it in a heavier weight.
  *
  * @event {HelixDismissEvent} helix-dismiss - The remove button was pressed. The tag does not remove itself, so remove it in response. Cancelable.
  *
+ * @csspart cell - The grid cell around everything the tag shows, rendered only in a `Tag.Group`, where it takes focus.
  * @csspart dismiss - The button that removes the tag.
  * @csspart dismiss-mark - The icon on the remove button.
  * @csspart label - The label, which the styled tag trims to its capitals and baseline so the letters sit at the middle in any font.
+ * @csspart link - The link around the label, under `href`.
  * @csspart start - The category before the label.
+ *
+ * @cssstate selected - The tag is selected in a `Tag.Group` that selects.
  */
 export declare class HelixHeadlessTag extends HelixHeadlessTag_base {
     dismissLabel: string;
+    /**
+     * Takes the tag out of reach: its link and its remove button stop
+     * answering, and in a `Tag.Group` the arrow keys pass over it and it cannot
+     * be selected or removed.
+     */
+    disabled: boolean;
+    /**
+     * Whether the tag holds its group's tab stop.
+     *
+     * Written by `Tag.Group` on every tag it holds, and unset outside one, which
+     * is how a tag knows it is a row. No attribute: it is coordination between
+     * elements, the same shape `Toggle.focusable` has.
+     */
+    focusable?: boolean;
+    /**
+     * Makes the label a link to this address.
+     */
+    href: string;
+    /**
+     * Whether the tag is selected, in a `Tag.Group` that selects.
+     *
+     * Written by the group from its own `value`, and unset where nothing can be
+     * selected, which is what keeps `aria-selected` off a set that does not
+     * select.
+     */
+    selected?: boolean | undefined;
+    /**
+     * What the tag stands for in its group's `value`.
+     *
+     * Absent is the tag's own words, its category first.
+     */
+    value: string;
+    /** The tag's words, its category first, or none where the children are not known yet. */
+    get words(): string;
+    /** Whether a `Tag.Group` holds this tag, which makes it a row. */
+    private get grouped();
+    /**
+     * Moves focus to the tag: its cell in a group, and otherwise its link or
+     * its remove button, whichever it has.
+     */
+    focusItem(): void;
+    protected get returnFocusTo(): HTMLElement | null;
+    protected willUpdate(changed: PropertyValues<this>): void;
     /**
      * The remove button's name: `dismissLabel` with the tag's own words.
      *
@@ -54,6 +110,10 @@ export declare class HelixHeadlessTag extends HelixHeadlessTag_base {
     private get removeName();
     protected firstUpdated(changed: PropertyValues): void;
     protected render(): TemplateResult;
+    /** The label, inside a link under `href`, behind a seam a tier can move. */
+    protected renderLabel(): TemplateResult;
+    /** The remove button, behind a seam a tier can move. */
+    protected renderDismiss(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -4,17 +4,45 @@ 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, slottedWords } 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.childrenKnown ? slottedWords(this, ['start', '']) : '';
+        const words = this.words;
         if (this.dismissLabel.includes('{label}')) {
             return this.dismissLabel.replace('{label}', words).trim();
         }
@@ -28,22 +56,50 @@ let HelixHeadlessTag = class HelixHeadlessTag extends MixinDismissible(HelixElem
         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.removeName}
-            @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,9 +23,11 @@ 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.
@@ -79,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;
@@ -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,8 +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 '../../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.
  *
@@ -15,7 +15,8 @@ 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
@@ -23,11 +24,16 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * parser for it.
  *
  * Typing sends `input` on each keystroke and `change` when you leave the
- * field. In the list, the arrow keys, typed digits and PageUp and PageDown
+ * 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
@@ -50,6 +56,7 @@ declare const HelixHeadlessTimeInput_base: (new (...args: any[]) => import("@fus
  * @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.
@@ -85,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.
@@ -116,6 +128,13 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
      * 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.
      *
@@ -169,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;
     /**
@@ -192,6 +218,19 @@ export declare class HelixHeadlessTimeInput extends HelixHeadlessTimeInput_base
     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. */