@fusion.dev/helix-headless 0.154.0 → 0.156.0

package/dist/steps/step/step.js

@@ -26,6 +26,9 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
         this.status = new StatusController(this);
     }
     static { this.words = 'helix-step'; }
+    focus(options) {
+        this.partNamed('label')?.focus(options);
+    }
     select() {
         if (this.disabled || this.locked) {
             return;
@@ -44,6 +47,7 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
         super.willUpdate(changed);
         hostAria(this.internals, { role: 'listitem' });
         this.toggleState('invalid', this.invalid);
+        this.toggleState('locked', this.locked);
     }
     updated(changed) {
         super.updated(changed);

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

@@ -96,6 +96,11 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * | A letter or a word | Moves to the next row whose first cell starts with what you typed. |
  * | Tab | Leaves the table. |
  *
+ * When the rows did not load, set `error-text`, such as "The orders did not
+ * load", and put a button that tries again in the `error` slot. The line shows
+ * after the rows in place of the empty and loading lines, the live region says
+ * it, and the table takes the `error` state. Clear it once you try again.
+ *
  * The CSS custom properties listed for this component are written by it and
  * read by the stylesheet that draws it. Do not set them. Each holds a number
  * the component computes and CSS cannot, so the stylesheet can draw the table
@@ -109,6 +114,7 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  *
  * @slot - The table's rows.
  * @slot empty - Content shown when there are no rows and none are loading, such as a picture and a link. Falls back to `empty-text`, which the live region still says.
+ * @slot error - Content shown while `error-text` is set, such as a button that tries again. Falls back to `error-text`, which the live region still says.
  * @slot heading - Words that name the table, shown above it, such as a heading.
  * @slot loading - Content shown while the rows load, such as a spinner. Falls back to `loading-text`, which the live region still says.
  *
@@ -132,6 +138,7 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * @csspart checkbox-mark-indeterminate - Added to `checkbox-mark` while only some rows are selected.
  * @csspart drag-preview - A copy of the row a pointer drags by its grip, which follows the pointer in the top layer until the row is let go, in a `reorderable` table. Hidden from assistive technology.
  * @csspart empty - The text shown when there are no rows.
+ * @csspart error - The line shown after the rows while `error-text` is set, in place of the empty and loading text.
  * @csspart grid-end - An empty box after the rows, in a `grid` table. Tab focuses it on its way out of the table, so the key leaves from the end.
  * @csspart grid-start - An empty box before the rows, in a `grid` table. Shift with Tab focuses it on its way out of the table.
  * @csspart grip-head - The heading over the row grips, in a `reorderable` table.
@@ -142,6 +149,9 @@ declare const HelixHeadlessTable_base: (new (...args: any[]) => import("@fusion.
  * @csspart table - The grid.
  *
  * @cssproperty --table-template - The column track list the table works out from its columns. The component writes it inline on the element that reads it, so setting it has no effect. Set `columns` to change the tracks.
+ *
+ * @cssstate empty - While there are no rows and none are loading.
+ * @cssstate error - While `error-text` is set.
  */
 export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     /**
@@ -214,6 +224,16 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
     descendingLabel: string;
     /** What screen readers hear when a held row is dropped, in a `reorderable` table. */
     droppedLabel: string;
+    /**
+     * The text shown and announced when the rows could not load. Set it when a
+     * fetch fails, and clear it once you try again. Empty, the default, shows
+     * nothing.
+     *
+     * While it is set, a line after the rows shows it, or your own content in the
+     * `error` slot, in place of the empty and loading lines, and the live region
+     * says it.
+     */
+    errorText: string;
     /**
      * The table's name where neither `label` nor an `aria-label` or
      * `aria-labelledby` on the host gives it one.

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

@@ -44,7 +44,7 @@ const SAMPLE = 200;
 const textOf = (element) => (element?.textContent ?? '').replace(/\s+/g, ' ').trim();
 const lengthOf = (element) => textOf(element).length;
 const numberOf = (value) => Number(value.replaceAll(',', ''));
-const STATUS = new Set(['empty', 'loading']);
+const STATUS = new Set(['empty', 'error', 'loading']);
 const NAMED = new Set([...STATUS, 'heading']);
 let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixElement) {
     constructor() {
@@ -57,6 +57,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.defaultSort = '';
         this.descendingLabel = 'descending';
         this.droppedLabel = 'Dropped';
+        this.errorText = '';
         this.fallbackLabel = 'Table';
         this.grid = false;
         this.label = '';
@@ -496,6 +497,8 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
     }
     updated(changed) {
         super.updated(changed);
+        this.toggleState('error', this.errorText !== '');
+        this.toggleState('empty', !this.loading && !this.hasRows);
         this.assign();
         this.alignCells();
         this.markSorted();
@@ -561,8 +564,12 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             this.handleSlotChange();
         }}
       ></slot>
-      ${this.renderStatus(this.hasRows, grid ? 'gridcell' : 'cell')}
-    </div>${end}${this.renderLive(this.hasRows)}${this.reorder.drawDragPreview()}`;
+      ${this.errorText === ''
+            ? this.renderStatus(this.hasRows, grid ? 'gridcell' : 'cell')
+            : html `<p part="error" role="row"><span role=${grid ? 'gridcell' : 'cell'}><slot name="error">${this.errorText}</slot></span></p>`}
+    </div>${end}${this.errorText === ''
+            ? this.renderLive(this.hasRows)
+            : html `<span part="live" role="status">${this.errorText}</span>`}${this.reorder.drawDragPreview()}`;
     }
 };
 __decorate([
@@ -590,6 +597,9 @@ __decorate([
     words,
     property({ attribute: 'dropped-label' })
 ], HelixHeadlessTable.prototype, "droppedLabel", void 0);
+__decorate([
+    property({ attribute: 'error-text' })
+], HelixHeadlessTable.prototype, "errorText", void 0);
 __decorate([
     words,
     property({ attribute: 'fallback-label' })

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

@@ -50,6 +50,16 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  * `active` says so, with `helix-activate`. Where the removed tab had focus,
  * focus moves to the tab now selected.
  *
+ * **More tabs than fit.** With `scroll-controls`, a strip that scrolls shows a
+ * button at each end it can scroll toward, as Web Awesome's tab group does,
+ * and a press scrolls it most of its own length. The buttons are for the
+ * pointer, so they are out of the tab order and hidden from screen readers;
+ * the arrow keys already reach every tab, and the strip scrolls the selected
+ * tab into view. A strip scrolls once a stylesheet gives the `tabs` part an
+ * `overflow`, as the styled tier does.
+ *
+ * A tab with `dismissible` can be closed: see `Tabs.Tab`.
+ *
  * 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
@@ -74,6 +84,8 @@ declare const HelixHeadlessTabs_base: (new (...args: any[]) => import("@fusion.d
  *   `--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 scroll-end - The button that scrolls the strip toward its end, shown under `scroll-controls` while there is more that way.
+ * @csspart scroll-start - The button that scrolls the strip toward its start, shown under `scroll-controls` while there is more that way.
  * @csspart tabs - The tab list.
  */
 export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
@@ -109,6 +121,11 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
      * Optional, so the resting row writes no attribute onto the host.
      */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * Whether a strip with more tabs than fit shows a button at each end it can
+     * scroll toward.
+     */
+    scrollControls: boolean;
     /**
      * How the row of tabs is drawn.
      *
@@ -139,6 +156,17 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
     private get linked();
     private get panels();
     private readonly handleSelection;
+    /** Which ends the strip can scroll toward, under `scroll-controls`. */
+    private more;
+    /** Watches the strip's size for `scroll-controls`. */
+    private resizing;
+    /** Reads which ends of the strip have more tabs past them. */
+    private readonly measure;
+    /**
+     * Scrolls the strip most of its own length toward one end, smoothly unless
+     * the reader asked for less motion.
+     */
+    private scrollStrip;
     /** The values of the tabs the last pairing read, to tell a removed tab from one not yet here. */
     private held;
     /** Pushes the current value down to whichever tab and panel own it. */
@@ -155,6 +183,10 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(changed: PropertyValues): void;
+    /** Watches the strip's size while `scroll-controls` asks, and reads it. */
+    private watchStrip;
+    /** Brings the selected tab into the strip's view, and moves nothing else. */
+    private reveal;
     /**
      * The set changed: pair it up and measure it.
      *
@@ -172,6 +204,11 @@ export declare class HelixHeadlessTabs extends HelixHeadlessTabs_base {
      */
     private readonly handleSlotChange;
     protected updated(changed: PropertyValues): void;
+    /**
+     * One of the two scroll buttons, pointing the way it scrolls. A caret along
+     * the line is mirrored on a right-to-left page, and one down a column is not.
+     */
+    private renderScroll;
     protected render(): TemplateResult;
 }
 declare global {

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

@@ -4,9 +4,11 @@ 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, deepActiveElement, HelixActivateEvent, HelixElement, IndicatorController, KeyboardNavigationController, MixinControllerActive, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, deepActiveElement, HelixActivateEvent, HelixElement, IndicatorController, isRtl, KeyboardNavigationController, MixinControllerActive, scrollItemIntoView, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { caretDown, caretLeft, caretRight, caretUp } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { HelixHeadlessTabPanel } from '../panel/tab-panel.js';
 import { HelixHeadlessTab } from '../tab/tab.js';
 let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(HelixElement) {
@@ -29,12 +31,32 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
         });
         this.label = 'Tabs';
         this.manual = false;
+        this.scrollControls = false;
         this.handleSelection = (event) => {
             if (event.defaultPrevented || !this.tabs.includes(event.target)) {
                 return;
             }
             this.requestActive(event.detail.value);
         };
+        this.more = { end: false, start: false };
+        this.measure = () => {
+            const strip = this.partNamed('tabs');
+            if (!strip || !this.scrollControls) {
+                if (this.more.start || this.more.end) {
+                    this.more = { end: false, start: false };
+                }
+                return;
+            }
+            const down = this.orientation === 'vertical';
+            const along = Math.abs(down ? strip.scrollTop : strip.scrollLeft);
+            const length = down ? strip.clientHeight : strip.clientWidth;
+            const whole = down ? strip.scrollHeight : strip.scrollWidth;
+            const start = along > 1;
+            const end = along + length < whole - 1;
+            if (start !== this.more.start || end !== this.more.end) {
+                this.more = { end, start };
+            }
+        };
         this.held = [];
         this.handleFocusIn = (event) => {
             const path = event.composedPath();
@@ -44,6 +66,7 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
             this.sync();
             this.indicator.place();
             this.refocus();
+            this.measure();
         };
     }
     static { this.words = 'helix-tabs'; }
@@ -56,6 +79,16 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
     get panels() {
         return [...this.children].filter((child) => child instanceof HelixHeadlessTabPanel);
     }
+    scrollStrip(toward) {
+        const strip = this.partNamed('tabs');
+        if (!strip) {
+            return;
+        }
+        const down = this.orientation === 'vertical';
+        const by = (down ? strip.clientHeight : strip.clientWidth) * 0.75 * toward;
+        const behavior = matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth';
+        strip.scrollBy(down ? { behavior, top: by } : { behavior, left: isRtl(this) ? -by : by });
+    }
     sync() {
         const tabs = this.tabs;
         const declared = this.active === '' ? tabs.find((tab) => tab.selected) : undefined;
@@ -106,11 +139,16 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
         super.connectedCallback();
         this.addEventListener('helix-select', this.handleSelection);
         this.addEventListener('focusin', this.handleFocusIn);
+        if (this.hasUpdated) {
+            this.watchStrip();
+        }
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('helix-select', this.handleSelection);
         this.removeEventListener('focusin', this.handleFocusIn);
+        this.resizing?.disconnect();
+        this.resizing = undefined;
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -118,22 +156,68 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
         this.indicator.place();
         requestAnimationFrame(() => this.indicator.place());
     }
+    watchStrip() {
+        const strip = this.partNamed('tabs');
+        if (this.scrollControls && strip && !this.resizing) {
+            this.resizing = new ResizeObserver(this.measure);
+            this.resizing.observe(strip);
+        }
+        if (!this.scrollControls && this.resizing) {
+            this.resizing.disconnect();
+            this.resizing = undefined;
+        }
+        this.measure();
+    }
+    reveal() {
+        const strip = this.partNamed('tabs');
+        const tab = this.tabs.find((one) => one.selected);
+        if (strip && tab) {
+            scrollItemIntoView(tab, { padding: this.scrollControls ? 40 : 0, scroller: strip });
+        }
+    }
     updated(changed) {
         super.updated(changed);
         if (changed.has('active')) {
             this.sync();
+            if (changed.get('active') !== undefined) {
+                void this.updateComplete.then(() => this.reveal());
+            }
+        }
+        if (changed.has('scrollControls') || changed.has('orientation')) {
+            this.watchStrip();
         }
         this.indicator.place();
     }
+    renderScroll(toward) {
+        if (!this.scrollControls) {
+            return nothing;
+        }
+        const down = this.orientation === 'vertical';
+        const icon = down ? (toward > 0 ? caretDown : caretUp) : toward > 0 ? caretRight : caretLeft;
+        const glyph = html `<svg
+      data-mirror=${down ? nothing : ''}
+      aria-hidden="true"
+      fill="currentColor"
+      viewBox=${icon.viewBox}
+    >${unsafeSVG(icon.content)}</svg>`;
+        const shown = toward > 0 ? this.more.end : this.more.start;
+        const keepFocus = (event) => event.preventDefault();
+        return toward > 0
+            ? html `<button part="scroll-end" type="button" tabindex="-1" aria-hidden="true" ?hidden=${!shown} @mousedown=${keepFocus} @click=${() => this.scrollStrip(1)}>${glyph}</button>`
+            : html `<button part="scroll-start" type="button" tabindex="-1" aria-hidden="true" ?hidden=${!shown} @mousedown=${keepFocus} @click=${() => this.scrollStrip(-1)}>${glyph}</button>`;
+    }
     render() {
         return html `<div
         part="tabs"
         role="tablist"
         aria-label=${this.label}
         aria-orientation=${this.orientation === 'vertical' ? 'vertical' : nothing}
+        @scroll=${this.scrollControls ? this.measure : nothing}
       >
+        ${this.renderScroll(-1)}
         <slot @slotchange=${this.handleSlotChange}></slot>
         <span part="indicator" aria-hidden="true"><slot name="indicator"></slot></span>
+        ${this.renderScroll(1)}
       </div>
       <div part="panels"><slot name="panels" @slotchange=${this.handleSlotChange}></slot></div>`;
     }
@@ -148,9 +232,15 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTabs.prototype, "orientation", void 0);
+__decorate([
+    property({ attribute: 'scroll-controls', reflect: true, type: Boolean })
+], HelixHeadlessTabs.prototype, "scrollControls", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessTabs.prototype, "variant", void 0);
+__decorate([
+    state()
+], HelixHeadlessTabs.prototype, "more", void 0);
 HelixHeadlessTabs = __decorate([
     customElement('helix-headless-tabs')
 ], HelixHeadlessTabs);

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

@@ -1,6 +1,6 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
-declare const HelixHeadlessTab_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinSelectableItemInterface) & typeof HelixElement;
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+declare const HelixHeadlessTab_base: (new (...args: any[]) => import("@fusion.dev/helix-core").DismissibleElement) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinSelectableItemInterface) & typeof HelixElement;
 /**
  * @summary One tab in a tab list.
  *
@@ -12,6 +12,15 @@ declare const HelixHeadlessTab_base: (new (...args: any[]) => import("@fusion.de
  * first, and canceling it keeps the browser from following, so a client-side
  * router follows it instead.
  *
+ * With `dismissible`, the tab can be closed, as Web Awesome's closable tab
+ * can: a press on its `dismiss` mark, or Delete or Backspace while the tab
+ * has focus, sends `helix-dismiss`. The tab does not remove itself, because
+ * your code owns the set, so remove the tab and its panel in your handler.
+ * Focus moves to the tab beside it, and the tab set selects a tab that is
+ * left.
+ * The tab says the key through `aria-keyshortcuts`, and the mark is for the
+ * pointer, hidden from screen readers.
+ *
  * @since 0.1.0
  * @status stable
  * @aliases Tab
@@ -19,13 +28,20 @@ declare const HelixHeadlessTab_base: (new (...args: any[]) => import("@fusion.de
  *
  * @slot - The tab's label.
  *
+ * @event {HelixDismissEvent} helix-dismiss - A `dismissible` tab was asked to close. The tab does not remove itself, so remove it and its panel in response. Cancelable.
  * @event {HelixSelectEvent} helix-select - Fired when the tab is chosen. Cancelable: canceling it stops the change and leaves the decision to you.
  *
+ * @csspart dismiss - The mark a pointer presses to close a `dismissible` tab.
  * @csspart tab - The tab itself.
  *
  * @cssstate selected - While it is the tab selected.
  */
 export declare class HelixHeadlessTab extends HelixHeadlessTab_base {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-tab': { dismissLabel: 'Schließen' } })`.
+     */
+    static words: string;
     protected itemPart: string;
     /**
      * @internal The panel this tab shows, written by the tab set. A property,
@@ -34,6 +50,12 @@ export declare class HelixHeadlessTab extends HelixHeadlessTab_base {
      * inside this shadow root can reach.
      */
     controls: Element | undefined;
+    /**
+     * The tooltip on the mark that closes a `dismissible` tab. The mark is for
+     * the pointer and hidden from screen readers, which hear the Delete key
+     * through `aria-keyshortcuts`.
+     */
+    dismissLabel: string;
     /**
      * 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.
@@ -52,6 +74,20 @@ export declare class HelixHeadlessTab extends HelixHeadlessTab_base {
      * script can focus the tab the way it focuses a native one.
      */
     focus(options?: FocusOptions): void;
+    /**
+     * Sends `helix-dismiss` for a `dismissible` tab, and returns `false` where a
+     * listener refused it, or where the tab is not dismissible or is disabled.
+     * The tab stays where it is either way: removing it is yours. Where the tab
+     * had focus, focus moves to the tab beside it once you remove it.
+     */
+    dismiss(): boolean;
+    /** Where focus goes when a tab beside this one that held it is removed: this tab. */
+    protected get returnFocusTo(): HTMLElement | null;
+    /** A press on the mark closes the tab, and neither selects it nor follows its link. */
+    private readonly handleDismissPress;
+    private readonly handleKeydown;
+    /** The mark that closes a `dismissible` tab, inside the control so it shares its box. */
+    protected renderDismiss(): TemplateResult | typeof nothing;
     /**
      * 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,14 +4,28 @@ 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, plainClick, reflectElements, } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, MixinDismissible, MixinSelectableItem, plainClick, reflectElements, words, } from '@fusion.dev/helix-core';
+import { x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-let HelixHeadlessTab = class HelixHeadlessTab extends MixinSelectableItem(HelixElement) {
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+let HelixHeadlessTab = class HelixHeadlessTab extends MixinDismissible(MixinSelectableItem(HelixElement)) {
     constructor() {
         super(...arguments);
         this.itemPart = 'tab';
         this.controls = undefined;
+        this.dismissLabel = 'Close';
+        this.handleDismissPress = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.dismiss();
+        };
+        this.handleKeydown = (event) => {
+            if (this.dismissible && (event.key === 'Delete' || event.key === 'Backspace')) {
+                event.preventDefault();
+                this.dismiss();
+            }
+        };
         this.handleLinkClick = (event) => {
             if (!plainClick(event)) {
                 return;
@@ -21,9 +35,27 @@ let HelixHeadlessTab = class HelixHeadlessTab extends MixinSelectableItem(HelixE
             }
         };
     }
+    static { this.words = 'helix-tab'; }
     focus(options) {
         this.partNamed('tab')?.focus(options);
     }
+    dismiss() {
+        if (!this.dismissible || this.disabled) {
+            return false;
+        }
+        return super.dismiss();
+    }
+    get returnFocusTo() {
+        return this.partNamed('tab');
+    }
+    renderDismiss() {
+        if (!this.dismissible) {
+            return nothing;
+        }
+        return html `<span part="dismiss" aria-hidden="true" title=${this.dismissLabel} @click=${this.handleDismissPress}
+      ><svg fill="currentColor" viewBox=${x.viewBox} aria-hidden="true">${unsafeSVG(x.content)}</svg></span
+    >`;
+    }
     updated(changed) {
         super.updated(changed);
         const control = this.renderRoot.querySelector('[part="tab"]');
@@ -35,6 +67,7 @@ let HelixHeadlessTab = class HelixHeadlessTab extends MixinSelectableItem(HelixE
     }
     render() {
         const tabindex = this.selected || !this.childrenKnown ? '0' : '-1';
+        const shortcut = this.dismissible && !this.disabled ? 'Delete' : nothing;
         if ((this.href ?? '') !== '') {
             return html `<a
         part="tab"
@@ -44,10 +77,12 @@ let HelixHeadlessTab = class HelixHeadlessTab extends MixinSelectableItem(HelixE
         rel=${this.rel || nothing}
         aria-selected=${this.selected ? 'true' : 'false'}
         aria-disabled=${this.disabled ? 'true' : nothing}
+        aria-keyshortcuts=${shortcut}
         tabindex=${this.disabled ? nothing : tabindex}
         @click=${this.handleLinkClick}
+        @keydown=${this.handleKeydown}
       >
-        <slot></slot>
+        <slot></slot>${this.renderDismiss()}
       </a>`;
         }
         return html `<button
@@ -55,17 +90,23 @@ let HelixHeadlessTab = class HelixHeadlessTab extends MixinSelectableItem(HelixE
       role="tab"
       type="button"
       aria-selected=${this.selected ? 'true' : 'false'}
+      aria-keyshortcuts=${shortcut}
       ?disabled=${this.disabled}
       tabindex=${tabindex}
       @click=${() => this.select()}
+      @keydown=${this.handleKeydown}
     >
-      <slot></slot>
+      <slot></slot>${this.renderDismiss()}
     </button>`;
     }
 };
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessTab.prototype, "controls", void 0);
+__decorate([
+    words,
+    property({ attribute: 'dismiss-label' })
+], HelixHeadlessTab.prototype, "dismissLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessTab.prototype, "href", void 0);

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

@@ -17,8 +17,12 @@ export type TagSelectionMode = SelectionMode;
  * `selection-mode` lets a reader select tags, with Space, Enter or a press:
  * `single` selects one at a time and `multiple` any number. In `multiple`,
  * Shift with an arrow, Home or End selects the range from the tag last
- * pressed to the tag focus moves to, and Control or Command with A selects
- * every tag that is not disabled. `value` holds the
+ * pressed to the tag focus moves to, Shift with a press or Space selects the
+ * range to that tag, and Control or Command with A selects every tag that is
+ * not disabled. `selection-behavior="replace"` selects the tag a reader
+ * presses or moves to alone, as a file list does, and Control or Command
+ * with a press or Space adds or takes out one tag. `disallow-empty-selection`
+ * keeps one tag selected once one is. `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. A selected tag
@@ -56,6 +60,12 @@ export declare class HelixHeadlessTagGroup extends HelixElement {
      * `registerWords('de', { 'helix-tag-group': { emptyLabel: 'Keine Schlagwörter' } })`.
      */
     static words: string;
+    /**
+     * Keeps at least one tag selected once one is, as React Aria's
+     * `disallowEmptySelection`: a press or a key that would leave none selected
+     * is refused. Removing the last selected tag still takes it out of `value`.
+     */
+    disallowEmptySelection: boolean;
     /**
      * The words the group shows and says once its last tag is removed, where
      * nothing is in the `empty` slot.
@@ -66,6 +76,15 @@ export declare class HelixHeadlessTagGroup extends HelixElement {
      * before its tags.
      */
     label: string;
+    /**
+     * What a press, Space, or a move does to the tags already selected.
+     * `toggle`, the default, keeps them: a press adds or takes out the tag, and
+     * the arrow keys move focus alone. `replace` selects the tag alone, as a
+     * file list does, and the arrow keys carry the selection with focus.
+     * Control or Command with a press or Space adds or takes out one tag in
+     * `multiple`, and with an arrow moves focus without selecting.
+     */
+    selectionBehavior: 'replace' | 'toggle';
     /**
      * How many tags a reader can select: `single`, `multiple`, or none.
      *
@@ -129,7 +148,14 @@ export declare class HelixHeadlessTagGroup extends HelixElement {
      * listener that refuses it keeps the selection. `change` follows once it
      * has moved.
      */
-    protected press(tag: HelixHeadlessTag): void;
+    protected press(tag: HelixHeadlessTag, cause?: KeyboardEvent | MouseEvent): void;
+    /** Whether a press or a move selects the tag alone. */
+    private get replaces();
+    /**
+     * Asks for `value` to become `next`, where it changes and where it leaves a
+     * tag selected under `disallow-empty-selection`.
+     */
+    private ask;
     /** The reachable tags from one to the other, either way round. */
     private span;
     /**