@fusion.dev/helix-headless 0.143.0 → 0.145.0

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

@@ -8,6 +8,11 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * still there when the person comes back, and the content of every panel is in
  * the server-rendered markup for crawlers, whichever tab is open.
  *
+ * The host is the `tabpanel` while its tab is selected, through
+ * `ElementInternals`, so the tab's `aria-controls` can reach it from the tab's
+ * shadow root. The box inside takes the focus, for a panel with nothing
+ * focusable in it.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases TabPanel
@@ -15,7 +20,7 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  *
  * @slot - The panel's content.
  *
- * @csspart panel - The panel container.
+ * @csspart panel - The panel container, which takes the focus.
  *
  * @cssstate selected - While its tab is the one selected.
  */
@@ -28,10 +33,9 @@ export declare class HelixHeadlessTabPanel extends HelixElement {
      * writes: the tab already says it.
      *
      * A string and not a reference: an IDREF resolves only in the tree it is
-     * written in, and an element reference cannot reach a sibling shadow tree
-     * either, so `aria-labelledby` to the tab's own id leaves the panel with no
-     * accessible name. `aria-label` on a `tabpanel` is how the pattern names one
-     * anyway.
+     * written in, and the tab's control is inside the tab's shadow root, which no
+     * reference from the light DOM can reach. `aria-label` on a `tabpanel` is how
+     * the pattern names one anyway.
      */
     label: string;
     /**

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

@@ -4,8 +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 { customElement, HelixElement } from '@fusion.dev/helix-core';
-import { html, nothing } from 'lit';
+import { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessTabPanel = class HelixHeadlessTabPanel extends HelixElement {
     constructor() {
@@ -17,12 +17,11 @@ let HelixHeadlessTabPanel = class HelixHeadlessTabPanel extends HelixElement {
     willUpdate(changed) {
         super.willUpdate(changed);
         this.toggleState('selected', this.selected);
+        hostAria(this.internals, { label: this.label, role: this.selected ? 'tabpanel' : '' });
     }
     render() {
         return html `<div
       part="panel"
-      role="tabpanel"
-      aria-label=${this.label || nothing}
       ?hidden=${!this.selected}
       tabindex="0"
     >

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

@@ -16,6 +16,18 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  * panel is cheap. Set `manual` when showing a panel is expensive, so focus can
  * move without selecting.
  *
+ * `orientation="vertical"` sets the tabs in a column beside the panels, and the
+ * tab list says `aria-orientation="vertical"`. The arrow keys of both axes move
+ * 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.
+ *
+ * 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.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -29,7 +41,10 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  * @event {HelixBeforeActivateEvent} helix-before-activate - Fired before the active tab changes, and cancelable. Canceling it is the only way to block a change.
  * @event {HelixSelectEvent} helix-select - Fired when a tab is chosen. The tab sends it and the root handles it, so you can listen on the root. Cancelable: canceling it stops the change and leaves the decision to you.
  *
- * @csspart indicator - The marker that moves to the selected tab.
+ * @csspart indicator - The marker that moves to the selected tab. It carries the selected tab's
+ *   place and size as `--indicator-x`, `--indicator-y`, `--indicator-inline-size` and
+ *   `--indicator-block-size`, and `data-placed` once it has been placed, for a mark you draw
+ *   and animate yourself.
  * @csspart panels - The panel container.
  * @csspart tabs - The tab list.
  */
@@ -54,6 +69,13 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
      * panels on the way.
      */
     manual: boolean;
+    /**
+     * The direction the tabs run. `vertical` sets them in a column beside the
+     * panels and tells a screen reader the list is vertical.
+     *
+     * Optional, so the resting row writes no attribute onto the host.
+     */
+    orientation?: 'horizontal' | 'vertical';
     /**
      * How the row of tabs is drawn.
      *
@@ -80,6 +102,8 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
      */
     variant?: 'segmented' | 'underlined';
     private get tabs();
+    /** Whether any tab is a link, so arriving on one chooses nothing. */
+    private get linked();
     private get panels();
     private readonly handleSelection;
     /** Pushes the current value down to whichever tab and panel own it. */

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { AriaForwardController, customElement, HelixElement, IndicatorController, KeyboardNavigationController, MixinControllerActive, whenHydrated, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { HelixHeadlessTabPanel } from '../panel/tab-panel.js';
 import { HelixHeadlessTab } from '../tab/tab.js';
@@ -15,7 +15,7 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
         this.keys = new KeyboardNavigationController(this, {
             items: () => this.tabs,
             origin: 'focus',
-            selects: () => !this.manual,
+            selects: () => !this.manual && !this.linked,
         });
         this.indicator = new IndicatorController(this, {
             active: () => this.tabs.find((tab) => tab.selected),
@@ -43,6 +43,9 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
     get tabs() {
         return [...this.children].filter((child) => child instanceof HelixHeadlessTab);
     }
+    get linked() {
+        return this.tabs.some((tab) => (tab.href ?? '') !== '');
+    }
     get panels() {
         return [...this.children].filter((child) => child instanceof HelixHeadlessTabPanel);
     }
@@ -57,6 +60,13 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
             });
         }
         const names = new Map(tabs.map((tab) => [tab.value, (tab.textContent ?? '').trim()]));
+        const panels = new Map(this.panels.map((panel) => [panel.value, panel]));
+        for (const tab of tabs) {
+            const panel = panels.get(tab.value);
+            whenHydrated(tab, () => {
+                tab.controls = panel;
+            });
+        }
         for (const panel of this.panels) {
             const selected = panel.value === value;
             const label = names.get(panel.value) ?? '';
@@ -88,7 +98,12 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
         this.indicator.place();
     }
     render() {
-        return html `<div part="tabs" role="tablist" aria-label=${this.label}>
+        return html `<div
+        part="tabs"
+        role="tablist"
+        aria-label=${this.label}
+        aria-orientation=${this.orientation === 'vertical' ? 'vertical' : nothing}
+      >
         <slot @slotchange=${this.handleSlotChange}></slot>
         <span part="indicator" aria-hidden="true"></span>
       </div>
@@ -101,6 +116,9 @@ __decorate([
 __decorate([
     property({ reflect: true, type: Boolean })
 ], HelixHeadlessTabs.prototype, "manual", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessTabs.prototype, "orientation", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTabs.prototype, "variant", void 0);

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

@@ -7,10 +7,10 @@ declare const HelixHeadlessTab_base: (new (...args: any[]) => import("@fusion.de
  * @description
  * A tab is an element, because it manages selection and its own tab stop.
  *
- * Its id and the id it controls both come from `value`, so the link between a
- * tab and its panel works with server rendering. A generated id would differ
- * between the server render and the client render, and `aria-controls` would
- * point at nothing.
+ * With an `href`, the tab is a link: `role="tab"` on an `<a>`, which a press,
+ * Enter and the browser's own link gestures follow. `helix-select` is sent
+ * first, and canceling it keeps the browser from following, so a client-side
+ * router follows it instead.
  *
  * @since 0.1.0
  * @status stable
@@ -27,6 +27,38 @@ declare const HelixHeadlessTab_base: (new (...args: any[]) => import("@fusion.de
  */
 export declare class HelixHeadlessTab extends HelixHeadlessTab_base {
     protected itemPart: string;
+    /**
+     * @internal The panel this tab shows, written by the tab set. A property,
+     * because it is an element, and it reaches the tab's `aria-controls` as an
+     * element reference: the panel is in the light DOM, which a reference from
+     * inside this shadow root can reach.
+     */
+    controls: Element | undefined;
+    /**
+     * The URL the tab links to. Setting it renders the tab as a link, for a set
+     * of tabs that are pages of a site.
+     */
+    href?: string;
+    /**
+     * The link's `rel`, for a tab with an `href`.
+     */
+    rel?: string;
+    /**
+     * Where the link opens, such as `_blank`, for a tab with an `href`.
+     */
+    target?: string;
+    /**
+     * 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
+     * with a button other than the main one, opens the link where the browser
+     * opens it and chooses nothing here.
+     */
+    private readonly handleLinkClick;
+    /**
+     * Points the control's `aria-controls` at the panel, where the engine can.
+     * The control is this tab's own, so the reference is always its to clear.
+     */
+    protected updated(changed: PropertyValues): void;
     /**
      * Asks for the render that follows a hydration, so the stop stops being every
      * tab's.

package/dist/tabs/tab/tab.js

@@ -4,31 +4,74 @@ 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 } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { customElement, HelixElement, MixinSelectableItem, reflectElements, } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
 let HelixHeadlessTab = class HelixHeadlessTab extends MixinSelectableItem(HelixElement) {
     constructor() {
         super(...arguments);
         this.itemPart = 'tab';
+        this.controls = undefined;
+        this.handleLinkClick = (event) => {
+            if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+                return;
+            }
+            if (!this.select()) {
+                event.preventDefault();
+            }
+        };
+    }
+    updated(changed) {
+        super.updated(changed);
+        const control = this.renderRoot.querySelector('[part="tab"]');
+        reflectElements(control, 'ariaControlsElements', this.controls ? [this.controls] : [], true);
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
     }
     render() {
+        const tabindex = this.selected || !this.childrenKnown ? '0' : '-1';
+        if ((this.href ?? '') !== '') {
+            return html `<a
+        part="tab"
+        role="tab"
+        href=${this.disabled ? nothing : (this.href ?? nothing)}
+        target=${this.target || nothing}
+        rel=${this.rel || nothing}
+        aria-selected=${this.selected ? 'true' : 'false'}
+        aria-disabled=${this.disabled ? 'true' : nothing}
+        tabindex=${this.disabled ? nothing : tabindex}
+        @click=${this.handleLinkClick}
+      >
+        <slot></slot>
+      </a>`;
+        }
         return html `<button
       part="tab"
       role="tab"
       type="button"
       aria-selected=${this.selected ? 'true' : 'false'}
       ?disabled=${this.disabled}
-      tabindex=${this.selected || !this.childrenKnown ? '0' : '-1'}
+      tabindex=${tabindex}
       @click=${() => this.select()}
     >
       <slot></slot>
     </button>`;
     }
 };
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessTab.prototype, "controls", void 0);
+__decorate([
+    property()
+], HelixHeadlessTab.prototype, "href", void 0);
+__decorate([
+    property()
+], HelixHeadlessTab.prototype, "rel", void 0);
+__decorate([
+    property()
+], HelixHeadlessTab.prototype, "target", void 0);
 HelixHeadlessTab = __decorate([
     customElement('helix-headless-tab')
 ], HelixHeadlessTab);

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

@@ -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 {