@fusion.dev/helix-headless 0.145.0 → 0.147.0

package/dist/tabs/panel/tab-panel.js

@@ -4,15 +4,41 @@ 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 { property } from 'lit/decorators.js';
+import { customElement, focusableElements, HelixElement, hostAria } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
 let HelixHeadlessTabPanel = class HelixHeadlessTabPanel extends HelixElement {
     constructor() {
         super(...arguments);
         this.label = '';
         this.selected = false;
         this.value = '';
+        this.holdsStop = false;
+        this.watcher = typeof MutationObserver === 'undefined'
+            ? undefined
+            : new MutationObserver(() => this.readStops());
+        this.readStops = () => {
+            this.holdsStop = this.selected && focusableElements(this).length > 0;
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.watcher?.observe(this, {
+            attributeFilter: ['contenteditable', 'disabled', 'hidden', 'href', 'tabindex'],
+            attributes: true,
+            childList: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.watcher?.disconnect();
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('selected')) {
+            this.readStops();
+        }
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -23,9 +49,9 @@ let HelixHeadlessTabPanel = class HelixHeadlessTabPanel extends HelixElement {
         return html `<div
       part="panel"
       ?hidden=${!this.selected}
-      tabindex="0"
+      tabindex=${this.holdsStop ? nothing : '0'}
     >
-      <slot></slot>
+      <slot @slotchange=${this.readStops}></slot>
     </div>`;
     }
 };
@@ -38,6 +64,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTabPanel.prototype, "value", void 0);
+__decorate([
+    state()
+], HelixHeadlessTabPanel.prototype, "holdsStop", void 0);
 HelixHeadlessTabPanel = __decorate([
     customElement('helix-headless-tab-panel')
 ], HelixHeadlessTabPanel);

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

@@ -21,13 +21,26 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  * between tabs either way.
  *
  * A tab with an `href` is a link, for tabs that are pages of a site. Pressing
- * it follows the link, and the arrow keys move focus without choosing, so
- * arrowing past a tab never leaves the page. Mark the tab of the page you are
- * on with `selected`, or set `active` to its value.
+ * it follows the link. Where any tab is a link, the arrow keys move focus
+ * without choosing on every tab of the list, as under `manual`, so arrowing
+ * past a tab never leaves the page and the list answers the keys one way.
+ * Mark the tab of the page you are on with `selected`, or set `active` to its
+ * value.
  *
  * Each tab says which panel it controls through `aria-controls`, set as an
  * element reference to the panel's host, where the engine has reflection.
  *
+ * Keys, on the tab list: Left and Right Arrow move between tabs, and so do Up
+ * and Down; Home and End go to the first and the last. The horizontal arrows
+ * follow the reading direction, so on a right-to-left page Left moves on.
+ * Disabled tabs are passed over. Tab leaves the list for the selected panel,
+ * which is a tab stop only while it holds nothing focusable.
+ *
+ * The `indicator` part moves to the selected tab and carries its place and
+ * size, so a mark of your own can be drawn there: style the part, or slot an
+ * element into `indicator`, which sits inside the part and reads the same
+ * properties.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -35,6 +48,7 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  * @documentation https://fusion.dev/helix/components/tabs
  *
  * @slot - The tabs, as direct children of this element.
+ * @slot indicator - A mark of your own, drawn inside the `indicator` part, where `--indicator-x`, `--indicator-y`, `--indicator-inline-size` and `--indicator-block-size` reach it.
  * @slot panels - The panels, as direct children of this element. Panels inside a wrapper are not paired with tabs, because pairing reads only the direct children.
  *
  * @event {HelixActivateEvent} helix-activate - Fired after the active tab changes, so the element already holds the new value.

package/dist/tabs/root/tabs-root.js

@@ -105,7 +105,7 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
         aria-orientation=${this.orientation === 'vertical' ? 'vertical' : nothing}
       >
         <slot @slotchange=${this.handleSlotChange}></slot>
-        <span part="indicator" aria-hidden="true"></span>
+        <span part="indicator" aria-hidden="true"><slot name="indicator"></slot></span>
       </div>
       <div part="panels"><slot name="panels" @slotchange=${this.handleSlotChange}></slot></div>`;
     }

package/dist/tabs/tab/tab.d.ts

@@ -47,6 +47,11 @@ export declare class HelixHeadlessTab extends HelixHeadlessTab_base {
      * Where the link opens, such as `_blank`, for a tab with an `href`.
      */
     target?: string;
+    /**
+     * Moves focus to the tab's control, the button or the link inside it, so a
+     * script can focus the tab the way it focuses a native one.
+     */
+    focus(options?: FocusOptions): void;
     /**
      * Chooses the tab before the browser follows its link, and keeps the browser
      * from following where the choice was refused. A press with a modifier, or

package/dist/tabs/tab/tab.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, MixinSelectableItem, reflectElements, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, MixinSelectableItem, plainClick, reflectElements, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessTab = class HelixHeadlessTab extends MixinSelectableItem(HelixElement) {
@@ -13,7 +13,7 @@ let HelixHeadlessTab = class HelixHeadlessTab extends MixinSelectableItem(HelixE
         this.itemPart = 'tab';
         this.controls = undefined;
         this.handleLinkClick = (event) => {
-            if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+            if (!plainClick(event)) {
                 return;
             }
             if (!this.select()) {
@@ -21,6 +21,9 @@ let HelixHeadlessTab = class HelixHeadlessTab extends MixinSelectableItem(HelixE
             }
         };
     }
+    focus(options) {
+        this.partNamed('tab')?.focus(options);
+    }
     updated(changed) {
         super.updated(changed);
         const control = this.renderRoot.querySelector('[part="tab"]');

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

@@ -1,7 +1,8 @@
-import { HelixElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
+import { HelixElement, KeyboardNavigationController, type SelectionMode } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 import { HelixHeadlessTag } from '../root/tag-root.js';
-import { type TagSelectionMode } from '../selection.js';
+/** How many tags a group lets a reader select: core's `SelectionMode`. */
+export type TagSelectionMode = SelectionMode;
 /**
  * @summary A set of tags that the arrow keys move through, and that can be removed and selected from the keyboard.
  *
@@ -17,9 +18,18 @@ import { type TagSelectionMode } from '../selection.js';
  * `single` selects one at a time and `multiple` any number. `value` holds the
  * selected tags' values, separated by commas, and a change asks with
  * `helix-before-change` and tells with `change`. Enter on a tag with an
- * `href` follows its link. A `disabled` tag is passed over.
+ * `href` follows its link. A `disabled` tag is passed over. A selected tag
+ * that is removed leaves `value`, which then sends `change`.
  *
- * Name the set with `label`.
+ * Name the set with `label`. Each tag is named by its words alone, without
+ * its remove button. `value` takes an array of values on the property as
+ * well, as React sets `value={['Apple']}`; a press writes it back as a
+ * string.
+ *
+ * **Removing the last tag keeps focus in the group.** With no tags left the
+ * set is a `group`, and focus moves to its `empty` part,
+ * which holds the `empty` slot: put words there such as "No filters" for a
+ * reader to hear. With nothing slotted it says `empty-label`, "No tags".
  *
  * @since 0.1.0
  * @status stable
@@ -27,12 +37,20 @@ import { type TagSelectionMode } from '../selection.js';
  * @documentation https://fusion.dev/helix/components/tag
  *
  * @slot - The tags, in the order they are read.
+ * @slot empty - Shown in place of the tags while there are none, such as "No filters". Its fallback is `empty-label`.
  *
  * @event {Event} change - Fired once a press has changed which tags are selected.
  * @event {HelixBeforeChangeEvent} helix-before-change - Fired before a press changes which tags are selected, with the `value` it would leave. Cancelable.
  * @event {HelixDismissEvent} helix-dismiss - A tag's remove button was pressed, or Delete or Backspace on the focused tag. Bubbles from that tag, which is its `target`; remove the tag in response. Cancelable.
+ *
+ * @csspart empty - Holds the `empty` slot while the group has no tags, rendered only then. Takes focus when the last tag is removed.
  */
 export declare class HelixHeadlessTagGroup extends HelixElement {
+    /**
+     * The words the group shows and says once its last tag is removed, where
+     * nothing is in the `empty` slot.
+     */
+    emptyLabel: string;
     /**
      * The name of the set, such as "Filters", which a screen reader announces
      * before its tags.
@@ -51,7 +69,7 @@ export declare class HelixHeadlessTagGroup extends HelixElement {
      * Set it to start with tags selected. A tag's value is its `value`, or its
      * words where it has none.
      */
-    value: string;
+    value: string | readonly string[];
     /** The tag the reader was last on, which keeps the tab stop. */
     private last;
     /**
@@ -61,6 +79,11 @@ export declare class HelixHeadlessTagGroup extends HelixElement {
      * a list of tags has a first and a last.
      */
     protected readonly keys: KeyboardNavigationController;
+    /**
+     * `value` as one written list, separated by commas, however it was set:
+     * an array of values is joined.
+     */
+    private get written();
     /** The tags the group holds, in order. */
     get tags(): HelixHeadlessTag[];
     /** The tags a key can land on, which are the ones that are not disabled. */
@@ -93,9 +116,25 @@ export declare class HelixHeadlessTagGroup extends HelixElement {
     protected press(tag: HelixHeadlessTag): void;
     private readonly handleKeydown;
     private readonly handleClick;
+    /**
+     * What happens once a tag has asked to be removed and the page has had its
+     * turn: a selected tag that left takes its value out of `value`, and focus
+     * that the last tag took with it comes to the group's `empty` part.
+     *
+     * Asked after the event and again a frame later, as `MixinDismissible`
+     * asks, because a framework removes the tag on its next render, after the
+     * handler. A canceled dismissal changes nothing.
+     */
+    private readonly handleDismiss;
+    private readonly handleSlotchange;
     private readonly handleFocusin;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Whether the group is known to hold no tags, which a server and a
+     * hydrating render cannot know: there it holds whatever it was given.
+     */
+    private get empty();
     protected willUpdate(changed: PropertyValues<this>): void;
     protected updated(changed: PropertyValues<this>): void;
     protected render(): TemplateResult;

package/dist/tag/group/tag-group.js

@@ -4,21 +4,21 @@ 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 { commaList, customElement, HelixBeforeChangeEvent, HelixElement, hostAria, KeyboardNavigationController, requestChange, rovingStop, slottedWords, whenHydrated, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { commaList, customElement, deepActiveElement, deepContains, HelixBeforeChangeEvent, HelixElement, hostAria, KeyboardNavigationController, pressedValue, prunedValue, requestChange, rovingStop, slottedWords, typeaheadByWords, whenHydrated, } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessTag } from '../root/tag-root.js';
-import { pressedValue } from '../selection.js';
 let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
     constructor() {
         super(...arguments);
+        this.emptyLabel = 'No tags';
         this.label = '';
         this.value = '';
         this.keys = new KeyboardNavigationController(this, {
             items: () => this.reachable.map((tag) => this.navigable(tag)),
             origin: 'focus',
             selects: () => false,
-            typeahead: (item) => item.words,
+            typeahead: typeaheadByWords(),
             wrap: false,
         });
         this.handleKeydown = (event) => {
@@ -53,6 +53,37 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
                 this.press(tag);
             }
         };
+        this.handleDismiss = (event) => {
+            const tag = this.tagOf(event);
+            if (!tag) {
+                return;
+            }
+            const had = deepContains(this, deepActiveElement());
+            const settle = async () => {
+                if (event.defaultPrevented || tag.isConnected) {
+                    return;
+                }
+                const left = this.tags.map((one) => this.valueFor(one));
+                const pruned = prunedValue(this.written, this.valueFor(tag), left);
+                if (pruned !== this.written) {
+                    this.value = pruned;
+                    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+                }
+                const active = document.activeElement;
+                if (!had || this.tags.length > 0 || (active !== null && active !== document.body)) {
+                    return;
+                }
+                this.requestUpdate();
+                await this.updateComplete;
+                this.renderRoot.querySelector('[part~="empty"]')?.focus();
+            };
+            queueMicrotask(() => void settle());
+            requestAnimationFrame(() => void settle());
+        };
+        this.handleSlotchange = () => {
+            this.sync();
+            this.requestUpdate();
+        };
         this.handleFocusin = (event) => {
             const tag = this.tagOf(event);
             if (tag && tag !== this.last) {
@@ -61,6 +92,14 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
             }
         };
     }
+    get written() {
+        return typeof this.value === 'string'
+            ? this.value
+            : this.value
+                .map((one) => String(one).trim())
+                .filter((one) => one !== '')
+                .join(', ');
+    }
     get tags() {
         return [...(this.children ?? [])].filter((child) => child instanceof HelixHeadlessTag);
     }
@@ -82,7 +121,7 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
     }
     sync() {
         const mode = this.selectionMode ?? 'none';
-        const chosen = new Set(commaList(this.value));
+        const chosen = new Set(commaList(this.written));
         const tags = this.tags;
         const items = tags.map((tag) => ({
             disabled: tag.disabled,
@@ -114,7 +153,7 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
             },
             event: (value) => new HelixBeforeChangeEvent({ value }),
             host: this,
-            next: pressedValue(mode, this.value, this.valueFor(tag)),
+            next: pressedValue(mode, this.written, this.valueFor(tag)),
         });
     }
     connectedCallback() {
@@ -122,26 +161,38 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
         this.addEventListener('keydown', this.handleKeydown);
         this.addEventListener('click', this.handleClick);
         this.addEventListener('focusin', this.handleFocusin);
+        this.addEventListener('helix-dismiss', this.handleDismiss);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('keydown', this.handleKeydown);
         this.removeEventListener('click', this.handleClick);
         this.removeEventListener('focusin', this.handleFocusin);
+        this.removeEventListener('helix-dismiss', this.handleDismiss);
+    }
+    get empty() {
+        return this.childrenKnown && this.tags.length === 0;
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        hostAria(this.internals, { label: this.label, role: 'grid' });
-        this.internals.ariaMultiSelectable = this.selectionMode === 'multiple' ? 'true' : null;
+        const empty = this.empty;
+        hostAria(this.internals, { label: this.label, role: empty ? 'group' : 'grid' });
+        this.internals.ariaMultiSelectable = this.selectionMode === 'multiple' && !empty ? 'true' : null;
     }
     updated(changed) {
         super.updated(changed);
         this.sync();
     }
     render() {
-        return html `<slot @slotchange=${() => this.sync()}></slot>`;
+        const empty = this.empty
+            ? html `<div part="empty" tabindex="-1"><slot name="empty">${this.emptyLabel}</slot></div>`
+            : nothing;
+        return html `<slot @slotchange=${this.handleSlotchange}></slot>${empty}`;
     }
 };
+__decorate([
+    property({ attribute: 'empty-label' })
+], HelixHeadlessTagGroup.prototype, "emptyLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessTagGroup.prototype, "label", void 0);

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

@@ -36,7 +36,10 @@ let HelixHeadlessTag = class HelixHeadlessTag extends MixinDismissible(HelixElem
     }
     willUpdate(changed) {
         super.willUpdate(changed);
-        hostAria(this.internals, { role: this.grouped ? 'row' : '' });
+        hostAria(this.internals, {
+            label: this.grouped ? this.words : '',
+            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);
@@ -58,7 +61,11 @@ let HelixHeadlessTag = class HelixHeadlessTag extends MixinDismissible(HelixElem
     render() {
         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'}
+            ? html `<span
+          aria-label=${this.words || nothing}
+          part="cell"
+          role="gridcell"
+          tabindex=${this.focusable ? '0' : '-1'}
           >${content}</span
         >`
             : content;

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

@@ -1,4 +1,4 @@
-import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixFormElement, type OwnRule } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessTextarea_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
@@ -17,12 +17,27 @@ declare const HelixHeadlessTextarea_base: (new (...args: any[]) => import("@fusi
  * `max-rows` stops the growth at that many lines, and the field scrolls past
  * them.
  *
+ * `clearable` draws a button that empties the field while it holds text, and
+ * sends `helix-clear`, as `Input` does. `validate` adds your own rule, run on
+ * every change once the browser finds nothing wrong, as React Aria's
+ * TextField `validate` does.
+ *
+ * **Keyboard.** The field's own keys are the platform's, and Enter starts a
+ * new line. The clear button under `clearable` is a tab stop of its own after
+ * the field.
+ *
+ * The inner textarea is named by `label`, or by a host `aria-label`,
+ * `aria-labelledby` or `<label for>`, and is described by the hint and the
+ * message, with `aria-invalid` while a message shows. The clear button is
+ * named `clear-label`.
+ *
  * @since 0.1.0
  * @status stable
  * @category forms
  * @aliases Multiline, TextArea
  * @documentation https://fusion.dev/helix/components/textarea
  *
+ * @slot clear-icon - Replaces the cross on the clear button, under `clearable`.
  * @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.
@@ -31,15 +46,18 @@ declare const HelixHeadlessTextarea_base: (new (...args: any[]) => import("@fusi
  *
  * @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 {HelixClearEvent} helix-clear - Fired after the clear button has emptied the field, after `input` and `change`.
  * @event {Event} input - Fired after the value changes.
  *
+ * @csspart clear - The button that empties the field, under `clearable`.
  * @csspart control - The textarea itself.
  * @csspart feedback - The message that says what is wrong.
  * @csspart field - The box that holds the textarea.
  * @csspart hint - Help under the field, while nothing is wrong.
  * @csspart label - The label above the field.
  *
- * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
+ * @cssstate blank - The field holds no text.
+ * @cssstate invalid - The control has an error to show, from the browser's validation, `validate`, or your `feedback`.
  */
 export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
     protected readonly aria: AriaForwardController;
@@ -57,6 +75,14 @@ export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
      * Grows the box to fit its content, so it does not scroll.
      */
     autoGrow: boolean;
+    /**
+     * Draws a button that empties the field while it holds text.
+     */
+    clearable: boolean;
+    /**
+     * The accessible name of the clear button, which shows only an icon.
+     */
+    clearLabel: string;
     /**
      * How many characters wide the box is, when the layout does not set its
      * width.
@@ -194,6 +220,11 @@ export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
     focus(options?: FocusOptions): void;
     /** Reports the value and the validity the host stands behind. */
     private sync;
+    /**
+     * Empties the field and puts the caret back in it, through `requestValue`,
+     * so a consumer who owns the value can refuse. `Input` clears the same way.
+     */
+    private readonly handleClear;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
@@ -212,11 +243,19 @@ export declare class HelixHeadlessTextarea extends HelixHeadlessTextarea_base {
      * How many lines the box is before anything is typed.
      */
     rows: number;
+    /**
+     * Your own rule for the value, run on every change once the browser finds
+     * nothing wrong. Return a message, or a list of them, to mark the field
+     * invalid, and `true`, `null`, or nothing to accept the value.
+     */
+    validate?: OwnRule;
     /**
      * How the browser wraps the text, and whether the breaks are submitted with
      * it.
      */
     wrap: 'hard' | 'off' | 'soft';
+    /** The cross on the clear button, behind a seam a tier can move. */
+    protected renderClearIcon(): TemplateResult;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -4,7 +4,8 @@ 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, HelixFormElement, holdCaret, isRtl, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
+import { AriaForwardController, applyOwnRule, customElement, drawIcon, HelixClearEvent, HelixFormElement, holdCaret, isRtl, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
+import { x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { grownHeight, lineMetrics } from '../grow.js';
@@ -17,6 +18,8 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
         this.announcesInput = true;
         this.autocomplete = '';
         this.autoGrow = false;
+        this.clearable = false;
+        this.clearLabel = 'Clear';
         this.dirName = '';
         this.placeholder = '';
         this.readOnly = false;
@@ -32,6 +35,17 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
             event.stopPropagation();
             this.announceChange();
         };
+        this.handleClear = () => {
+            if (this.value !== '' && this.requestValue('')) {
+                this.announceChange();
+                this.dispatchEvent(new HelixClearEvent());
+            }
+            const control = this.control;
+            if (control) {
+                restoreValue(control, this.value);
+                control.focus();
+            }
+        };
         this.rows = 3;
         this.wrap = 'soft';
     }
@@ -112,6 +126,7 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
             return;
         }
         this.copyValidity(control);
+        applyOwnRule(this.internals, control, this.validate, this.value);
         this.refreshFeedback();
     }
     connectedCallback() {
@@ -140,6 +155,7 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        this.toggleState('blank', this.value === '');
         if (!this.hasUpdated) {
             return;
         }
@@ -155,6 +171,9 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
         this.sync();
         this.grow();
     }
+    renderClearIcon() {
+        return html `<slot name="clear-icon">${drawIcon(x)}</slot>`;
+    }
     render() {
         return html `${this.renderLabel()}
     <div part="field">
@@ -180,6 +199,16 @@ let HelixHeadlessTextarea = class HelixHeadlessTextarea extends MixinControllerV
         @change=${this.handleChange}
       ></textarea>
       <slot name="end"></slot>
+      ${this.clearable && this.value !== '' && !this.isDisabled && !this.readOnly
+            ? html `<button
+              part="clear"
+              type="button"
+              aria-label=${this.clearLabel}
+              @click=${this.handleClear}
+            >
+              ${this.renderClearIcon()}
+            </button>`
+            : nothing}
     </div>
     ${this.renderHint()}${this.renderFeedback()}`;
     }
@@ -190,6 +219,12 @@ __decorate([
 __decorate([
     property({ attribute: 'auto-grow', reflect: true, type: Boolean })
 ], HelixHeadlessTextarea.prototype, "autoGrow", void 0);
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessTextarea.prototype, "clearable", void 0);
+__decorate([
+    property({ attribute: 'clear-label' })
+], HelixHeadlessTextarea.prototype, "clearLabel", void 0);
 __decorate([
     property({ type: Number })
 ], HelixHeadlessTextarea.prototype, "cols", void 0);
@@ -214,6 +249,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], HelixHeadlessTextarea.prototype, "rows", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessTextarea.prototype, "validate", void 0);
 __decorate([
     property()
 ], HelixHeadlessTextarea.prototype, "wrap", void 0);