@fusion.dev/helix-headless 0.143.0 → 0.144.0

package/dist/skeleton/root/skeleton-root.js

@@ -11,25 +11,40 @@ let HelixHeadlessSkeleton = class HelixHeadlessSkeleton extends HelixElement {
     constructor() {
         super(...arguments);
         this.label = '';
+        this.loading = false;
+    }
+    get wraps() {
+        return (this.childrenKnown &&
+            [...this.childNodes].some((node) => node.nodeType === 1 || (node.textContent ?? '').trim() !== ''));
     }
     willUpdate(changed) {
         super.willUpdate(changed);
+        this.internals.ariaBusy = this.loading ? 'true' : null;
         if (this.label) {
             hostAria(this.internals, { label: this.label, role: 'progressbar' });
             this.internals.ariaHidden = null;
         }
         else {
             hostAria(this.internals, { label: '', role: '' });
-            this.internals.ariaHidden = 'true';
+            this.internals.ariaHidden = this.wraps ? null : 'true';
         }
     }
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
+        this.finishHydration();
+    }
     render() {
-        return html `<span part="skeleton"></span>`;
+        return html `<span part="content" ?inert=${this.loading}
+        ><slot @slotchange=${() => this.requestUpdate()}></slot></span
+      ><span part="skeleton"></span>`;
     }
 };
 __decorate([
     property()
 ], HelixHeadlessSkeleton.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixHeadlessSkeleton.prototype, "loading", void 0);
 HelixHeadlessSkeleton = __decorate([
     customElement('helix-headless-skeleton')
 ], HelixHeadlessSkeleton);

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

@@ -20,6 +20,13 @@ declare const HelixHeadlessSlider_base: (new (...args: any[]) => import("@fusion
  *
  * A range with two thumbs is two inputs stacked on one track, because there is
  * no native two-thumb range. Each thumb keeps its own value.
+ * `min-steps-between-thumbs` keeps them that many steps apart.
+ *
+ * `format-options` writes the value with `Intl.NumberFormat` in `locale`, as a
+ * currency, a percent or a unit, and `formatter` writes it with a function of
+ * your own, such as words for a scale. Either one is what a screen reader
+ * hears, what the readout shows and what the marker labels say. `value-text`
+ * still wraps it in a sentence, with the formatted value in its place.
  *
  * `required` comes with the field mixin and cannot fail. A range is never
  * empty: the platform shows its midpoint when no value is set, and `willUpdate`
@@ -62,6 +69,27 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
     protected readonly aria: AriaForwardController;
     /** Typed or dragged, so every edit is announced. See `announcesInput`. */
     protected readonly announcesInput = true;
+    /**
+     * `Intl.NumberFormat` options the value is written with: a currency, a
+     * percent, a unit, or a number of decimals. Written as JSON in the
+     * attribute.
+     *
+     * ```html
+     * <helix-slider format-options='{"style":"currency","currency":"USD"}'></helix-slider>
+     * ```
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /**
+     * Writes a value as text, in place of `format-options`: words for a scale,
+     * or anything `Intl.NumberFormat` cannot say. A property, since a function
+     * cannot be written in an attribute.
+     */
+    formatter?: (value: number) => string;
+    /**
+     * The locale `format-options` writes the value in, such as `de-DE`. Empty is
+     * the reader's own.
+     */
+    locale: string;
     /**
      * Shows the value at each mark.
      */
@@ -102,6 +130,11 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
     min: number;
     /** The name of a range's lower thumb, read after the slider's label. */
     minimumLabel: string;
+    /**
+     * How many steps a range's two thumbs stay apart, as Zag's
+     * `minStepsBetweenThumbs`. A thumb pushed closer stops there.
+     */
+    minStepsBetweenThumbs: number;
     /**
      * The direction the track runs. `vertical` stands it on end.
      *
@@ -223,6 +256,12 @@ export declare class HelixHeadlessSlider extends HelixHeadlessSlider_base {
      * step, or for a range, two of them in order.
      */
     private sanitize;
+    /** How far apart a range's thumbs stay, in the slider's own units. */
+    private get gap();
+    /** Whether the value is written by `formatter` or `format-options`. */
+    private get formats();
+    /** A value as the reader sees it: formatted where asked, the number otherwise. */
+    private said;
     /** What a screen reader says for one thumb, where `value-text` asks. */
     private spoken;
     protected updated(changed: PropertyValues): void;

package/dist/slider/root/slider-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 { AriaForwardController, customElement, fillTemplate, HelixFormElement, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, fillTemplate, formatNumber, HelixFormElement, MixinControllerValue, MixinField, restoreValue, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue(MixinField(HelixFormElement)) {
@@ -14,12 +14,14 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
             target: () => this.partNamed('control'),
         });
         this.announcesInput = true;
+        this.locale = '';
         this.markerLabels = false;
         this.markers = 0;
         this.max = 100;
         this.maximumLabel = 'maximum';
         this.min = 0;
         this.minimumLabel = 'minimum';
+        this.minStepsBetweenThumbs = 0;
         this.range = false;
         this.showValue = false;
         this.step = 1;
@@ -29,9 +31,10 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
             if (this.range) {
                 const [start, end] = this.bounds;
                 const moved = Number(control.value);
+                const gap = this.gap;
                 const pair = control.dataset.thumb === 'start'
-                    ? [Math.min(moved, end), end]
-                    : [start, Math.max(moved, start)];
+                    ? [Math.min(moved, end - gap), end]
+                    : [start, Math.max(moved, start + gap)];
                 this.requestValue(pair.join(','));
                 restoreValue(control, String(control.dataset.thumb === 'start' ? this.bounds[0] : this.bounds[1]));
                 return;
@@ -47,7 +50,7 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         this.valueText = '';
     }
     get reserve() {
-        const widest = Math.max(String(this.min).length, String(this.max).length);
+        const widest = Math.max(this.said(this.min).length, this.said(this.max).length);
         return this.range ? widest * 2 + ' to '.length : widest;
     }
     get precision() {
@@ -141,8 +144,27 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         const at = Number.isFinite(parsed) ? parsed : this.min + (this.max - this.min) / 2;
         return String(this.settled(at));
     }
+    get gap() {
+        return Math.max(0, this.minStepsBetweenThumbs) * this.step;
+    }
+    get formats() {
+        return this.formatter !== undefined || this.formatOptions !== undefined;
+    }
+    said(at) {
+        const number = typeof at === 'number' ? at : Number.parseFloat(at);
+        if (!Number.isFinite(number)) {
+            return String(at);
+        }
+        if (this.formatter) {
+            return this.formatter(number);
+        }
+        return this.formatOptions ? formatNumber(number, this.locale, this.formatOptions) : String(at);
+    }
     spoken(at) {
-        return this.valueText ? fillTemplate(this.valueText, { value: at }) : nothing;
+        if (this.valueText) {
+            return fillTemplate(this.valueText, { value: this.said(at) });
+        }
+        return this.formats ? this.said(at) : nothing;
     }
     updated(changed) {
         super.updated(changed);
@@ -161,8 +183,8 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
         step=${this.step}
         .value=${String(at)}
         aria-labelledby=${this.labeled ? `${this.labelId} ${which}-name` : `${which}-name`}
-        aria-valuemin=${which === 'end' ? start : nothing}
-        aria-valuemax=${which === 'start' ? end : nothing}
+        aria-valuemin=${which === 'end' ? start + this.gap : nothing}
+        aria-valuemax=${which === 'start' ? end - this.gap : nothing}
         aria-valuetext=${this.spoken(at)}
         aria-describedby=${this.describedBy ?? nothing}
         aria-invalid=${this.invalidity ?? nothing}
@@ -207,7 +229,9 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
               ${this.markerValues.map((at) => html `<span
                     part="marker"
                     style="--slider-marker-at: ${((at - this.min) / (this.max - this.min)) * 100}%"
-                    >${this.markerLabels ? html `<span part="marker-label">${at}</span>` : nothing}</span
+                    >${this.markerLabels
+                ? html `<span part="marker-label">${this.said(at)}</span>`
+                : nothing}</span
                   >`)}
             </div>`
             : nothing}
@@ -217,13 +241,22 @@ let HelixHeadlessSlider = class HelixHeadlessSlider extends MixinControllerValue
               for=${this.range ? 'control control-end' : 'control'}
               aria-hidden="true"
               style=${`--_slider-output-reserve: ${this.reserve}ch`}
-              >${this.range ? `${start} to ${end}` : this.value}</output
+              >${this.range ? `${this.said(start)} to ${this.said(end)}` : this.said(this.value)}</output
             >`
             : nothing}
     </div>
     ${this.renderHint()}${this.renderFeedback()}`;
     }
 };
+__decorate([
+    property({ attribute: 'format-options', type: Object })
+], HelixHeadlessSlider.prototype, "formatOptions", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessSlider.prototype, "formatter", void 0);
+__decorate([
+    property()
+], HelixHeadlessSlider.prototype, "locale", void 0);
 __decorate([
     property({ attribute: 'marker-labels', reflect: true, type: Boolean })
 ], HelixHeadlessSlider.prototype, "markerLabels", void 0);
@@ -242,6 +275,9 @@ __decorate([
 __decorate([
     property({ attribute: 'minimum-label' })
 ], HelixHeadlessSlider.prototype, "minimumLabel", void 0);
+__decorate([
+    property({ attribute: 'min-steps-between-thumbs', type: Number })
+], HelixHeadlessSlider.prototype, "minStepsBetweenThumbs", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixHeadlessSlider.prototype, "orientation", void 0);

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

@@ -21,6 +21,8 @@ import { type PropertyValues, type TemplateResult } from 'lit';
  * @slot - The value.
  * @slot label - What the value measures.
  * @slot unit - The unit, shown beside the value.
+ *
+ * @csspart value - The slot the value is written in. A slot draws no box, so it takes the inherited properties, such as color and font, and passes them to the value.
  */
 export declare class HelixHeadlessStat extends HelixElement {
     /**

package/dist/stat/root/stat-root.js

@@ -23,7 +23,7 @@ let HelixHeadlessStat = class HelixHeadlessStat extends HelixElement {
     }
     render() {
         return html `<slot name="label"></slot>
-      <slot></slot>
+      <slot part="value"></slot>
       <slot name="unit"></slot>`;
     }
 };

package/dist/steps/step/step.d.ts

@@ -38,6 +38,7 @@ import '../../button/index.js';
  * @csspart description - The line under the name.
  * @csspart label - The step's name, which is a control.
  * @csspart label-button - The button inside the label.
+ * @csspart label-live - The live region inside that button, rendered only from the first time the button is pending.
  * @csspart label-text - The words on that button, trimmed to their capitals and baseline.
  * @csspart mark - The glyph inside the marker: a tick, a dot, or an empty ring.
  * @csspart marker - The shape carrying the number or the check.

package/dist/steps/step/step.js

@@ -40,7 +40,7 @@ let HelixHeadlessStep = class HelixHeadlessStep extends HelixElement {
     renderLabel() {
         return html `<${this.tag('button')}
       part="label"
-      exportparts="button: label-button, text: label-text"
+      exportparts="button: label-button, live: label-live, text: label-text"
       emphasis="ghost"
       ?disabled=${this.disabled}
       @click=${this.select}

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

@@ -1,5 +1,5 @@
 import { AriaForwardController, HelixFormElement, HostClickController } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 declare const HelixHeadlessSwitch_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerCheckedInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A control that turns something on or off.
@@ -40,7 +40,9 @@ declare const HelixHeadlessSwitch_base: (new (...args: any[]) => import("@fusion
  * @csspart track - The track. Draw the thumb on the track itself, with
  * `::part(track)::after` in your stylesheet. This tier ships no CSS, so it
  * renders no separate thumb element, which would be an empty child that costs
- * your layout as much as any other child. `ListItem` measured that cost.
+ * your layout as much as any other child. `ListItem` measured that cost. A
+ * subclass that draws one returns it from `renderThumb`, as the styled switch
+ * does.
  *
  * @cssstate checked - While it is on.
  * @cssstate invalid - The control has an error to show, from the browser's validation or from your `feedback`.
@@ -70,6 +72,14 @@ export declare class HelixHeadlessSwitch extends HelixHeadlessSwitch_base {
      * rendered, which React reports on hydration and does not patch up.
      */
     private markEmpty;
+    /**
+     * The thumb, drawn inside the track after the input: nothing on this tier.
+     *
+     * A seam for a tier that draws the thumb as an element, so it can be a part
+     * and hold icons. An element here would be an empty child on every page that
+     * loads only this tier, which is the cost the `track` part notes.
+     */
+    protected renderThumb(): TemplateResult | typeof nothing;
     protected render(): TemplateResult;
 }
 declare global {

package/dist/switch/root/switch-root.js

@@ -43,6 +43,9 @@ let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerCheck
     markEmpty() {
         markRegion(this.renderRoot, 'label', ['']);
     }
+    renderThumb() {
+        return nothing;
+    }
     render() {
         return html `<label part="field">
       <span part="track">
@@ -55,9 +58,11 @@ let HelixHeadlessSwitch = class HelixHeadlessSwitch extends MixinControllerCheck
           ?required=${this.required}
           aria-describedby=${this.describedBy ?? nothing}
           aria-invalid=${this.invalidity ?? nothing}
+          aria-readonly=${this.readOnly ? 'true' : nothing}
           @change=${this.handleChange}
+          @click=${this.holdReadOnly}
           @input=${this.stopInner}
-        />
+        />${this.renderThumb()}
       </span>
       <span part="label"><slot>${this.label}</slot></span>
     </label>

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';