@fusion.dev/helix-headless 0.142.1 → 0.144.0

package/dist/table/root/table-root.js

@@ -4,9 +4,10 @@ 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, MixinCollection, splitValues } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, fillTemplate, HelixElement, HelixSortEvent, MixinCollection, requestChange, splitValues, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
+import { cycle, format, parse, sort } from '../../data-table/root/order.js';
 import { edgeOf } from '../column/table-column.js';
 const tracksOf = (list, wanted) => {
     const words = splitValues(list, ' ');
@@ -38,12 +39,36 @@ const tracksOf = (list, wanted) => {
 const SHORT = 32;
 const FLOOR = '14ch';
 const SAMPLE = 200;
-const lengthOf = (element) => (element?.textContent ?? '').replace(/\s+/g, ' ').trim().length;
+const textOf = (element) => (element?.textContent ?? '').replace(/\s+/g, ' ').trim();
+const lengthOf = (element) => textOf(element).length;
+const numberOf = (value) => Number(value.replaceAll(',', ''));
 let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixElement) {
     constructor() {
         super(...arguments);
+        this.ascendingLabel = 'ascending';
         this.columns = '';
+        this.defaultSort = '';
+        this.descendingLabel = 'descending';
         this.label = '';
+        this.sortedLabel = 'Sorted by {column}, {order}';
+        this.unsortedLabel = 'Not sorted';
+        this.sortState = undefined;
+        this.aria = new AriaForwardController(this, {
+            label: true,
+            target: () => this.partNamed('table'),
+        });
+        this.heardSort = undefined;
+        this.handleHeadClick = (event) => {
+            const path = event.composedPath();
+            if (!path.some((node) => node instanceof Element && node.getAttribute('part') === 'sort')) {
+                return;
+            }
+            const columns = this.tableColumns;
+            const column = path.find((node) => columns.includes(node));
+            if (column?.canSort) {
+                this.toggleSort(column.field);
+            }
+        };
         this.handleSlotChange = () => {
             this.requestUpdate();
         };
@@ -51,6 +76,76 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.alignment = undefined;
         this.aligned = '';
     }
+    get sort() {
+        return this.sortState ?? this.defaultSort;
+    }
+    set sort(next) {
+        const previous = this.sort;
+        this.sortState = next;
+        this.requestUpdate('sort', previous);
+    }
+    requestSort(next) {
+        return requestChange({
+            apply: (value) => {
+                const previous = this.sort;
+                this.sortState = value;
+                this.requestUpdate('sort', previous);
+            },
+            event: (value) => new HelixSortEvent({ value }),
+            host: this,
+            next,
+        });
+    }
+    toggleSort(field) {
+        return this.requestSort(format(cycle(parse(this.sort), field)));
+    }
+    get arrangedRows() {
+        const rows = this.slotted;
+        const spec = parse(this.sort);
+        const declared = this.tableColumns;
+        const index = spec
+            ? declared.findIndex((column) => column.canSort && column.field === spec.field)
+            : -1;
+        if (!spec || index < 0) {
+            return rows;
+        }
+        const records = rows.map((element) => ({ element, value: textOf(element.children[index]) }));
+        const numeric = records.every(({ value }) => value === '' || Number.isFinite(numberOf(value)));
+        const order = numeric
+            ? (row) => (row.value === '' ? '' : numberOf(row.value))
+            : (row) => row.value;
+        const sorted = sort(records, spec, [{ field: spec.field, order }]);
+        return sorted.map((record) => record.element);
+    }
+    news() {
+        const current = this.sort;
+        let said = this.announced;
+        if (this.hasUpdated && current !== this.heardSort) {
+            const parsed = parse(current);
+            const column = parsed
+                ? this.tableColumns.find((one) => one.field === parsed.field)
+                : undefined;
+            said = parsed
+                ? fillTemplate(this.sortedLabel, {
+                    column: column?.textContent?.trim() || parsed.field,
+                    order: parsed.direction === 'asc' ? this.ascendingLabel : this.descendingLabel,
+                })
+                : this.unsortedLabel;
+        }
+        this.heardSort = current;
+        return said;
+    }
+    markSorted() {
+        const current = parse(this.sort);
+        for (const column of this.tableColumns) {
+            column.sorted =
+                current && column.canSort && column.field === current.field
+                    ? current.direction === 'asc'
+                        ? 'ascending'
+                        : 'descending'
+                    : undefined;
+        }
+    }
     get tableColumns() {
         return this.knownChildren.filter((child) => 'isTableColumn' in child && child.isTableColumn === true);
     }
@@ -96,11 +191,13 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         super.connectedCallback();
         this.watcher = new MutationObserver(() => this.requestUpdate());
         this.watcher.observe(this, { characterData: true, childList: true, subtree: true });
+        this.addEventListener('click', this.handleHeadClick);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.watcher?.disconnect();
         this.watcher = undefined;
+        this.removeEventListener('click', this.handleHeadClick);
     }
     static { this.shadowRootOptions = {
         ...HelixElement.shadowRootOptions,
@@ -123,7 +220,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             return;
         }
         head.assign(...this.tableColumns);
-        body.assign(...this.slotted);
+        body.assign(...this.arrangedRows);
     }
     alignCells() {
         if (typeof CSSStyleSheet === 'undefined' || !('replaceSync' in CSSStyleSheet.prototype)) {
@@ -146,10 +243,15 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             }
         }
     }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        this.announced = this.news();
+    }
     updated(changed) {
         super.updated(changed);
         this.assign();
         this.alignCells();
+        this.markSorted();
     }
     render() {
         const template = this.template;
@@ -167,16 +269,37 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             this.handleSlotChange();
         }}
       ></slot>
-      ${this.renderStatus(this.hasRows)}
+      ${this.renderStatus(this.hasRows, 'cell')}
     </div>${this.renderLive(this.hasRows)}`;
     }
 };
+__decorate([
+    property({ attribute: 'ascending-label' })
+], HelixHeadlessTable.prototype, "ascendingLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessTable.prototype, "columns", void 0);
+__decorate([
+    property({ attribute: 'default-sort' })
+], HelixHeadlessTable.prototype, "defaultSort", void 0);
+__decorate([
+    property({ attribute: 'descending-label' })
+], HelixHeadlessTable.prototype, "descendingLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessTable.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixHeadlessTable.prototype, "sort", null);
+__decorate([
+    property({ attribute: 'sorted-label' })
+], HelixHeadlessTable.prototype, "sortedLabel", void 0);
+__decorate([
+    property({ attribute: 'unsorted-label' })
+], HelixHeadlessTable.prototype, "unsortedLabel", void 0);
+__decorate([
+    state()
+], HelixHeadlessTable.prototype, "sortState", void 0);
 HelixHeadlessTable = __decorate([
     customElement('helix-headless-table')
 ], HelixHeadlessTable);

package/dist/table/row/table-row.d.ts

@@ -32,6 +32,13 @@ export declare class HelixHeadlessTableRow extends HelixElement {
      */
     alignCells(rules: CSSStyleSheet): void;
     protected willUpdate(changed: PropertyValues): void;
+    /**
+     * Asks each cell to read its role again once the cells change.
+     *
+     * A `header` cell heads its row when a value sits beside it, and a cell that
+     * upgrades while its row is still being parsed has no value beside it yet.
+     */
+    private readonly handleSlotChange;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/table/row/table-row.js

@@ -11,6 +11,14 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
         super(...arguments);
         this.isTableRow = true;
         this.columnRules = undefined;
+        this.handleSlotChange = () => {
+            for (const cell of this.children) {
+                if ('isTableCell' in cell) {
+                    ;
+                    cell.requestUpdate();
+                }
+            }
+        };
     }
     alignCells(rules) {
         const root = this.renderRoot;
@@ -28,7 +36,7 @@ let HelixHeadlessTableRow = class HelixHeadlessTableRow extends HelixElement {
         hostAria(this.internals, { role: 'row' });
     }
     render() {
-        return html `<slot></slot>`;
+        return html `<slot @slotchange=${this.handleSlotChange}></slot>`;
     }
 };
 HelixHeadlessTableRow = __decorate([

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

@@ -1,4 +1,4 @@
-import { HelixElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
+import { AriaForwardController, HelixElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
 import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerActiveInterface) & typeof HelixElement;
 /**
@@ -36,8 +36,13 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
 export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
     protected readonly keys: KeyboardNavigationController;
     private readonly indicator;
+    /** Carries a host `aria-label` and `aria-labelledby` to the tab list. */
+    protected readonly aria: AriaForwardController;
     /**
      * The tab list's name, read by screen readers.
+     *
+     * An `aria-label` or `aria-labelledby` on the host names the tab list too,
+     * and wins over this.
      */
     label: string;
     /**

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement, IndicatorController, KeyboardNavigationController, MixinControllerActive, whenHydrated, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, HelixElement, IndicatorController, KeyboardNavigationController, MixinControllerActive, whenHydrated, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessTabPanel } from '../panel/tab-panel.js';
@@ -23,10 +23,14 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
             observe: () => this.tabs,
             surface: () => this.partNamed('tabs'),
         });
+        this.aria = new AriaForwardController(this, {
+            label: true,
+            target: () => this.partNamed('tabs'),
+        });
         this.label = 'Tabs';
         this.manual = false;
         this.handleSelection = (event) => {
-            if (event.defaultPrevented) {
+            if (event.defaultPrevented || !this.tabs.includes(event.target)) {
                 return;
             }
             this.requestActive(event.detail.value);

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

@@ -0,0 +1,107 @@
+import { HelixElement, KeyboardNavigationController } 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';
+/**
+ * @summary A set of tags that the arrow keys move through, and that can be removed and selected from the keyboard.
+ *
+ * @description
+ * A part of `Tag` that holds tags as one control: a grid of rows, one tab stop
+ * for the whole set. The arrow keys move between tags, Home and End go to the
+ * first and the last, and a typed letter goes to the next tag starting with
+ * it. Delete or Backspace removes the focused tag where it is `dismissible`,
+ * by sending its `helix-dismiss`: remove it from your list in the handler, and
+ * focus moves to the next tag, or the previous one after the last.
+ *
+ * `selection-mode` lets a reader select tags, with Space, Enter or a press:
+ * `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.
+ *
+ * Name the set with `label`.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @aliases Tag list, Chip group, Token list
+ * @documentation https://fusion.dev/helix/components/tag
+ *
+ * @slot - The tags, in the order they are read.
+ *
+ * @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.
+ */
+export declare class HelixHeadlessTagGroup extends HelixElement {
+    /**
+     * The name of the set, such as "Filters", which a screen reader announces
+     * before its tags.
+     */
+    label: string;
+    /**
+     * How many tags a reader can select: `single`, `multiple`, or none.
+     *
+     * Absent selects nothing, and the tags carry no selected state at all.
+     */
+    selectionMode?: TagSelectionMode;
+    /**
+     * The selected tags' values, separated by commas, since a value may hold a
+     * space.
+     *
+     * Set it to start with tags selected. A tag's value is its `value`, or its
+     * words where it has none.
+     */
+    value: string;
+    /** The tag the reader was last on, which keeps the tab stop. */
+    private last;
+    /**
+     * The arrow keys, Home, End and typed letters, moving focus and choosing
+     * nothing. From the focused tag rather than the selection, since a reader
+     * moves through selected and unselected tags alike, and without wrapping, as
+     * a list of tags has a first and a last.
+     */
+    protected readonly keys: KeyboardNavigationController;
+    /** 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. */
+    private get reachable();
+    /** A tag as the keyboard controller sees it: an item it moves focus to and never chooses. */
+    private navigable;
+    /**
+     * What a tag stands for in `value`: its own `value`, or its words.
+     *
+     * The words read off the tag's children here rather than through its
+     * `words`, which answers nothing until the tag's own first update: the
+     * group's first pass runs before that, and would match no tag.
+     */
+    private valueFor;
+    /**
+     * Tells every tag its place: whether it holds the one tab stop and whether
+     * it is selected. Through `whenHydrated`, so a tag a server rendered draws
+     * its served markup first.
+     */
+    private sync;
+    /** The tag a press or a key came from, read off the event's path. */
+    private tagOf;
+    /**
+     * Selects the tag, or lets it go, asking first.
+     *
+     * `helix-before-change` carries the `value` the press would leave, and a
+     * listener that refuses it keeps the selection. `change` follows once it
+     * has moved.
+     */
+    protected press(tag: HelixHeadlessTag): void;
+    private readonly handleKeydown;
+    private readonly handleClick;
+    private readonly handleFocusin;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-tag-group': HelixHeadlessTagGroup;
+    }
+}

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

@@ -0,0 +1,157 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { 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.label = '';
+        this.value = '';
+        this.keys = new KeyboardNavigationController(this, {
+            items: () => this.reachable.map((tag) => this.navigable(tag)),
+            origin: 'focus',
+            selects: () => false,
+            typeahead: (item) => item.words,
+            wrap: false,
+        });
+        this.handleKeydown = (event) => {
+            const tag = this.tagOf(event);
+            if (!tag || tag.disabled || event.altKey || event.ctrlKey || event.metaKey) {
+                return;
+            }
+            if (event.key === 'Delete' || event.key === 'Backspace') {
+                if (tag.dismissible) {
+                    event.preventDefault();
+                    tag.dismiss();
+                }
+                return;
+            }
+            if (event.key === 'Enter' && tag.href !== '') {
+                event.preventDefault();
+                tag.renderRoot.querySelector('[part~="link"]')?.click();
+                return;
+            }
+            if ((event.key === ' ' || event.key === 'Enter') && this.selectionMode) {
+                event.preventDefault();
+                this.press(tag);
+            }
+        };
+        this.handleClick = (event) => {
+            const tag = this.tagOf(event);
+            const control = event
+                .composedPath()
+                .some((node) => node instanceof Element &&
+                /(^| )(dismiss|link)( |$)/.test(node.getAttribute('part') ?? ''));
+            if (tag && !control) {
+                this.press(tag);
+            }
+        };
+        this.handleFocusin = (event) => {
+            const tag = this.tagOf(event);
+            if (tag && tag !== this.last) {
+                this.last = tag;
+                this.sync();
+            }
+        };
+    }
+    get tags() {
+        return [...(this.children ?? [])].filter((child) => child instanceof HelixHeadlessTag);
+    }
+    get reachable() {
+        return this.tags.filter((tag) => !tag.disabled);
+    }
+    navigable(tag) {
+        return {
+            contains: (node) => tag.contains(node),
+            disabled: tag.disabled,
+            focusItem: () => tag.focusItem(),
+            select: () => { },
+            selected: false,
+            words: tag.words,
+        };
+    }
+    valueFor(tag) {
+        return tag.value || slottedWords(tag, ['start', '']);
+    }
+    sync() {
+        const mode = this.selectionMode ?? 'none';
+        const chosen = new Set(commaList(this.value));
+        const tags = this.tags;
+        const items = tags.map((tag) => ({
+            disabled: tag.disabled,
+            selected: chosen.has(this.valueFor(tag)),
+            tag,
+        }));
+        const holder = rovingStop(items, items.find((item) => item.tag === this.last), { disabled: (item) => item.disabled, selected: (item) => item.selected })?.tag;
+        for (const tag of tags) {
+            whenHydrated(tag, () => {
+                tag.focusable = tag === holder;
+                tag.selected = mode === 'none' ? undefined : chosen.has(this.valueFor(tag));
+            });
+        }
+    }
+    tagOf(event) {
+        return event
+            .composedPath()
+            .find((node) => node instanceof HelixHeadlessTag);
+    }
+    press(tag) {
+        const mode = this.selectionMode ?? 'none';
+        if (mode === 'none' || tag.disabled) {
+            return;
+        }
+        requestChange({
+            apply: (value) => {
+                this.value = value;
+                this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+            },
+            event: (value) => new HelixBeforeChangeEvent({ value }),
+            host: this,
+            next: pressedValue(mode, this.value, this.valueFor(tag)),
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('keydown', this.handleKeydown);
+        this.addEventListener('click', this.handleClick);
+        this.addEventListener('focusin', this.handleFocusin);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('keydown', this.handleKeydown);
+        this.removeEventListener('click', this.handleClick);
+        this.removeEventListener('focusin', this.handleFocusin);
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        hostAria(this.internals, { label: this.label, role: 'grid' });
+        this.internals.ariaMultiSelectable = this.selectionMode === 'multiple' ? 'true' : null;
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.sync();
+    }
+    render() {
+        return html `<slot @slotchange=${() => this.sync()}></slot>`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessTagGroup.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'selection-mode' })
+], HelixHeadlessTagGroup.prototype, "selectionMode", void 0);
+__decorate([
+    property()
+], HelixHeadlessTagGroup.prototype, "value", void 0);
+HelixHeadlessTagGroup = __decorate([
+    customElement('helix-headless-tag-group')
+], HelixHeadlessTagGroup);
+export { HelixHeadlessTagGroup };

package/dist/tag/index.d.ts

@@ -1 +1,2 @@
+export * from './group/tag-group.js';
 export * from './root/tag-root.js';

package/dist/tag/index.js

@@ -1 +1,2 @@
+export * from './group/tag-group.js';
 export * from './root/tag-root.js';

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

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessTag_base: (new (...args: any[]) => import("@fusion.dev/helix-core").DismissibleElement) & typeof HelixElement;
 /**
  * @summary A short label that adds metadata to content.
@@ -12,6 +12,21 @@ declare const HelixHeadlessTag_base: (new (...args: any[]) => import("@fusion.de
  * The remove button sends `helix-dismiss`. The tag does not remove itself,
  * because your code owns the list it is in, so remove it in your handler. A
  * listener can cancel `helix-dismiss`, and `dismiss()` then returns `false`.
+ * When the handler removes a tag whose remove button has focus, focus moves to
+ * the next tag's remove button, or to the previous one's after the last tag.
+ *
+ * The remove button is named for its tag, such as "Remove Apple", so a list of
+ * buttons says which tag each one removes. Write `{label}` in `dismiss-label`
+ * 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
@@ -20,18 +35,85 @@ 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.
+     *
+     * **Named for its tag**, because a set of tags each named "Remove" is a list
+     * of buttons that says nothing about which tag each one takes away. The
+     * words are the tag's slotted text, its category first, and `{label}` in
+     * `dismissLabel` says where they go. Without it they follow the verb, unless
+     * the label already holds them, which is what a page naming each button by
+     * hand wrote.
+     *
+     * Read from the children, so empty on a server and while hydrating, where
+     * the name is the verb alone until the update after.
+     */
+    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 {