@fusion.dev/helix-headless 0.153.0 → 0.155.0

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;
     /**

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

@@ -11,8 +11,10 @@ import { HelixHeadlessTag } from '../root/tag-root.js';
 let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
     constructor() {
         super(...arguments);
+        this.disallowEmptySelection = false;
         this.emptyLabel = 'No tags';
         this.label = '';
+        this.selectionBehavior = 'toggle';
         this.value = '';
         this.keys = new KeyboardNavigationController(this, {
             items: () => this.reachable.map((tag) => this.navigable(tag)),
@@ -34,6 +36,13 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
                 }
                 return;
             }
+            if ((event.ctrlKey || event.metaKey) && event.key === ' ') {
+                if (this.replaces && multiple) {
+                    event.preventDefault();
+                    this.press(tag, event);
+                }
+                return;
+            }
             if (event.ctrlKey || event.metaKey) {
                 return;
             }
@@ -45,6 +54,9 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
                 else if (!event.shiftKey) {
                     this.anchor = to;
                     this.reached = to;
+                    if (this.replaces && to && !to.disabled) {
+                        this.ask(this.valueFor(to));
+                    }
                 }
                 return;
             }
@@ -62,7 +74,7 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
             }
             if ((event.key === ' ' || event.key === 'Enter') && this.selectionMode) {
                 event.preventDefault();
-                this.press(tag);
+                this.press(tag, event);
             }
         };
         this.handleClick = (event) => {
@@ -72,7 +84,7 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
                 .some((node) => node instanceof Element &&
                 /(^| )(dismiss|link)( |$)/.test(node.getAttribute('part') ?? ''));
             if (tag && !control) {
-                this.press(tag);
+                this.press(tag, event);
             }
         };
         this.handleDismiss = (event) => {
@@ -172,14 +184,33 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
             .composedPath()
             .find((node) => node instanceof HelixHeadlessTag);
     }
-    press(tag) {
+    press(tag, cause) {
         const mode = this.selectionMode ?? 'none';
         if (mode === 'none' || tag.disabled) {
             return;
         }
+        if (mode === 'multiple' && cause?.shiftKey && this.anchor?.isConnected) {
+            this.extend(this.anchor, tag);
+            return;
+        }
         this.anchor = tag;
         this.reached = tag;
-        requestValue(this, pressedValue(mode, this.written, this.valueFor(tag)), (value) => {
+        const adds = cause?.ctrlKey === true || cause?.metaKey === true;
+        this.ask(this.replaces && !(adds && mode === 'multiple')
+            ? this.valueFor(tag)
+            : pressedValue(mode, this.written, this.valueFor(tag)));
+    }
+    get replaces() {
+        return this.selectionMode !== undefined && this.selectionBehavior === 'replace';
+    }
+    ask(next) {
+        if (next === this.written) {
+            return;
+        }
+        if (this.disallowEmptySelection && commaList(next).length === 0) {
+            return;
+        }
+        requestValue(this, next, (value) => {
             this.value = value;
         });
     }
@@ -199,13 +230,7 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
         this.choose(this.tags.filter((tag) => chosen.includes(tag)));
     }
     choose(tags) {
-        const next = [...new Set(tags.map((tag) => this.valueFor(tag)))].join(', ');
-        if (next === this.written) {
-            return;
-        }
-        requestValue(this, next, (value) => {
-            this.value = value;
-        });
+        this.ask([...new Set(tags.map((tag) => this.valueFor(tag)))].join(', '));
     }
     connectedCallback() {
         super.connectedCallback();
@@ -241,6 +266,9 @@ let HelixHeadlessTagGroup = class HelixHeadlessTagGroup extends HelixElement {
         return html `<slot @slotchange=${this.handleSlotchange}></slot>${empty}`;
     }
 };
+__decorate([
+    property({ attribute: 'disallow-empty-selection', type: Boolean })
+], HelixHeadlessTagGroup.prototype, "disallowEmptySelection", void 0);
 __decorate([
     words,
     property({ attribute: 'empty-label' })
@@ -248,6 +276,9 @@ __decorate([
 __decorate([
     property()
 ], HelixHeadlessTagGroup.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'selection-behavior' })
+], HelixHeadlessTagGroup.prototype, "selectionBehavior", void 0);
 __decorate([
     property({ attribute: 'selection-mode' })
 ], HelixHeadlessTagGroup.prototype, "selectionMode", void 0);

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

@@ -25,6 +25,8 @@ declare const HelixHeadlessToggle_base: (new (...args: any[]) => import("@fusion
  * @documentation https://fusion.dev/helix/components/toggle
  *
  * @slot - The item's label.
+ * @slot end - Content after the label, such as a count or a shortcut.
+ * @slot start - Content before the label, such as an icon.
  *
  * @event {Event} change - Fired after a toggle button on its own is pressed or released.
  * @event {HelixSelectEvent} helix-select - Fired when the item is chosen. Cancelable: call `preventDefault()` to keep the current choice.

package/dist/toggle/root/toggle-root.js

@@ -53,7 +53,7 @@ let HelixHeadlessToggle = class HelixHeadlessToggle extends MixinSelectableItem(
       ?disabled=${this.disabled}
       tabindex=${alone || (this.focusable ?? this.selected) || !this.childrenKnown ? '0' : '-1'}
       @click=${() => this.select()}
-    ><slot></slot></button>`;
+    ><slot name="start"></slot><slot></slot><slot name="end"></slot></button>`;
     }
 };
 __decorate([

package/dist/tree/item/tree-item.d.ts

@@ -146,6 +146,11 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
      * tree: the item being moved, or the one the drop indicator is beside.
      */
     move?: TreeItemMove | undefined;
+    /**
+     * @internal The item's place among its siblings, counting from one, written
+     * by the tree for `aria-posinset`, for the reason `level` gives.
+     */
+    position?: number | undefined;
     /**
      * The link's `rel` value, which describes how the linked page relates to this
      * one.
@@ -168,6 +173,11 @@ export declare class HelixHeadlessTreeItem extends HelixHeadlessTreeItem_base {
      * row is not part of the tree React hydrates.
      */
     selected: boolean;
+    /**
+     * @internal How many siblings the item has, itself included, written by the
+     * tree for `aria-setsize`, for the reason `level` gives.
+     */
+    setSize?: number | undefined;
     /**
      * Where the link opens. Use it for a row that leaves the site.
      */