@fusion.dev/helix-headless 0.170.0 → 0.172.0

package/dist/color-input/root/color-input-root.d.ts

@@ -31,7 +31,8 @@ declare const HelixHeadlessColorInput_base: (new (...args: any[]) => import("@fu
  *
  * The trigger and ArrowDown open the panel with focus in the square. Tab moves
  * between the panel's controls without leaving it, and Escape closes it and
- * returns focus to the field.
+ * returns focus to the control that opened it: the trigger after a press, and
+ * the field after ArrowDown.
  *
  * The component sets `--color-input-swatch`, so do not set it yourself. It
  * holds the resolved color, so the styled tier can paint the swatch without
@@ -305,6 +306,19 @@ export declare class HelixHeadlessColorInput extends HelixHeadlessColorInput_bas
      */
     protected sync(): void;
     protected updated(changed: PropertyValues): void;
+    /** Whether the trigger's press opened the panel that is open now. */
+    private pressedOpen;
+    /**
+     * The trigger's press, which notes that it opened the panel, so Escape hands
+     * focus back to the trigger.
+     */
+    private readonly handlePress;
+    /**
+     * Hands focus back to the control that opened the panel: the trigger after
+     * its press, which is the APG date picker dialog's rule, and the text after
+     * ArrowDown from it.
+     */
+    protected returnFocus(): void;
     /**
      * The picker the field opens, behind a seam the styled tier can move.
      *

package/dist/color-input/root/color-input-root.js

@@ -55,6 +55,12 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         this.handleSampleEnd = () => {
             this.requestOpen(true);
         };
+        this.pressedOpen = false;
+        this.handlePress = () => {
+            const opening = !this.open;
+            this.handleTriggerClick();
+            this.pressedOpen = opening && this.open;
+        };
     }
     static { this.words = 'helix-color-input'; }
     requestValue(next) {
@@ -117,6 +123,18 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
         if (changed.has('value') && parseColor(this.value)) {
             this.settled = this.value;
         }
+        if (changed.has('open') && !this.open) {
+            this.pressedOpen = false;
+        }
+    }
+    returnFocus() {
+        const trigger = this.pressedOpen ? this.partNamed('trigger') : null;
+        this.pressedOpen = false;
+        if (trigger) {
+            trigger.focus();
+            return;
+        }
+        super.returnFocus();
     }
     renderPicker() {
         return html `<${this.tag('color-picker')}
@@ -204,7 +222,7 @@ let HelixHeadlessColorInput = class HelixHeadlessColorInput extends MixinPickerF
                 : 'swatch-value'
             : nothing}
           ?disabled=${this.isDisabled}
-          @click=${this.handleTriggerClick}
+          @click=${this.handlePress}
         >
           <span
             part="preview"

package/dist/color-picker/root/color-picker-root.d.ts

@@ -1,5 +1,5 @@
-import { type Color, type ColorFormat, type ColorWords, HelixFormElement, KeyboardNavigationController } from '@fusion.dev/helix-core';
-import { type PropertyValues, type TemplateResult } from 'lit';
+import { type Color, type ColorFormat, type ColorWords, HelixFormElement, KeyboardNavigationController, type PickerFailure } from '@fusion.dev/helix-core';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
 import '../../button/index.js';
 import '../../button-group/index.js';
 import '../../slider/index.js';
@@ -82,7 +82,7 @@ declare const HelixHeadlessColorPicker_base: (new (...args: any[]) => import("@f
  * @csspart eyedropper-live - The live region of the button inside `eyedropper`, which says its pending label.
  * @csspart eyedropper-spinner - The ring the eyedropper button turns while it is pending.
  * @csspart eyedropper-text - The words on the button inside `eyedropper`, trimmed to their capitals and baseline.
- * @csspart feedback - The message under the picker, while `feedback` is set.
+ * @csspart feedback - The message under the picker: `feedback`, or what is wrong with the answer once the picker is marked invalid.
  * @csspart field - One channel's number field with its label, in `channel-fields`.
  * @csspart field-input - The number input in a channel's field.
  * @csspart field-label - The name above a channel's number input.
@@ -321,10 +321,11 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
      * the anchor the browser points its bubble at.
      *
      * **Text that is not a color is bad input**, so a form does not submit
-     * `#00` from a half-typed value. The picker draws no message of its own, so
-     * reporting it as each keystroke arrives shows nothing until the form asks;
-     * Color Input shows its own message against the field the reader typed
-     * into.
+     * `#00` from a half-typed value. The picker marks it, and says
+     * `badInputMessage` under itself, once the reader leaves the value field or
+     * presses Enter, and a missing color once the reader has committed one or a
+     * form has refused the picker. Color Input shows its own message against the
+     * field the reader typed into.
      */
     required: boolean;
     /**
@@ -404,6 +405,52 @@ export declare class HelixHeadlessColorPicker extends HelixHeadlessColorPicker_b
     private get hinted();
     /** The ids a control in the picker is described by: the help, then the message. */
     private get describedBy();
+    /**
+     * Whether the reader is typing into the value field, between the first
+     * keystroke and the `change` that ends it.
+     *
+     * Half-typed text is rarely a color: `#00ff00` passes through `#0` and
+     * `#00ff0` on the way. So text that is not a color is refused once the
+     * reader leaves the field or presses Enter, and not on every keystroke.
+     */
+    private typing;
+    /**
+     * Text in the value field that is not a color, or undefined while the field
+     * holds the value.
+     *
+     * **Kept in the field and out of the value**, as a native number field keeps
+     * "12e": the text stays where the reader can correct it, the value stays the
+     * last color, and the picker reports `badInput` until the text is a color or
+     * the value moves. Measured before this: typed "nonsense" became the value,
+     * so a form read `brand=nonsense` and the square had no color to show.
+     */
+    private draft;
+    /**
+     * A required picker with no color is missing, and text that is not a color
+     * is refused, once the reader has finished typing it. See
+     * `MixinPickerFeedback.marked`.
+     *
+     * Measured before this: typed "nonsense" and a required picker its form
+     * refused both failed `checkValidity()` while `:state(invalid)` stayed off,
+     * the value field had no `aria-invalid`, and nothing was said.
+     */
+    protected get failure(): PickerFailure | undefined;
+    /**
+     * The line under the picker: `feedback`, or, where the picker is marked by
+     * its own validation, what is wrong.
+     */
+    private get said();
+    /**
+     * A reset ends any typing and takes back text that was not a color, so the
+     * field shows the color the reset put back.
+     */
+    formResetCallback(): void;
+    /**
+     * The line `said` holds, or nothing while it is empty. `role="alert"`, as
+     * every field's feedback line has, so the message is announced when it
+     * appears.
+     */
+    protected renderPickerFeedback(): TemplateResult | typeof nothing;
     /** Whether a pointer is dragging the square's handle, said as `:state(dragging)`. */
     private dragging;
     /** Whether the eyedropper is open, said as `:state(sampling)`. */

package/dist/color-picker/root/color-picker-root.js

@@ -56,6 +56,8 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
         this.handleNamingSlot = () => {
             this.requestUpdate();
         };
+        this.typing = false;
+        this.draft = undefined;
         this.dragging = false;
         this.picking = false;
         this.owned = false;
@@ -68,7 +70,14 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
                 return;
             }
             const typed = event.target.value;
+            this.typing = true;
             const parsed = parseColor(typed);
+            if (!parsed && typed.trim() !== '') {
+                this.draft = typed;
+                this.sync();
+                return;
+            }
+            this.draft = undefined;
             if (parsed) {
                 this.moved = parsed;
                 this.owned = typed !== this.value;
@@ -261,9 +270,47 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
         return this.hint !== '' || this.slottedIn('hint').length > 0;
     }
     get describedBy() {
-        const ids = [this.hinted ? 'hint' : '', this.feedback === '' ? '' : 'feedback'].filter(Boolean);
+        const ids = [this.hinted ? 'hint' : '', this.said === '' ? '' : 'feedback'].filter(Boolean);
         return ids.length > 0 ? ids.join(' ') : nothing;
     }
+    get failure() {
+        if (this.draft !== undefined) {
+            return this.typing ? undefined : 'refused';
+        }
+        if (this.value === '') {
+            return this.required ? 'missing' : undefined;
+        }
+        return parseColor(this.value) === null ? 'refused' : undefined;
+    }
+    get said() {
+        if (this.feedback !== '') {
+            return this.feedback;
+        }
+        if (!this.marked || this.invalid) {
+            return '';
+        }
+        const failure = this.failure;
+        return failure === 'refused'
+            ? this.badInputMessage
+            : failure === 'missing'
+                ? this.valueMissingMessage
+                : '';
+    }
+    formResetCallback() {
+        super.formResetCallback();
+        this.typing = false;
+        if (this.draft !== undefined) {
+            this.draft = undefined;
+            const field = this.partNamed('value');
+            if (field) {
+                field.value = this.value;
+            }
+        }
+    }
+    renderPickerFeedback() {
+        const said = this.said;
+        return said === '' ? nothing : html `<p part="feedback" id="feedback" role="alert">${said}</p>`;
+    }
     settle() {
         if (this.unsettled) {
             this.unsettled = false;
@@ -299,6 +346,10 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
         this.reportRequired();
     }
     reportRequired() {
+        if (this.draft !== undefined) {
+            this.internals.setValidity({ badInput: true }, this.badInputMessage, this.partNamed('value') ?? this.partNamed('grid') ?? undefined);
+            return;
+        }
         if (this.required && this.value === '') {
             this.internals.setValidity({ valueMissing: true }, this.valueMissingMessage, this.partNamed('grid') ?? undefined);
             return;
@@ -424,6 +475,9 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
         this.move({ [channel]: Number(control.value) });
     }
     willUpdate(changed) {
+        if (changed.has('value')) {
+            this.draft = undefined;
+        }
         super.willUpdate(changed);
         const outside = [...(this.internals.labels ?? [])];
         const named = this.named;
@@ -630,6 +684,7 @@ let HelixHeadlessColorPicker = class HelixHeadlessColorPicker extends MixinPicke
                 @input=${this.handleValueInput}
                 @change=${(event) => {
                 event.stopPropagation();
+                this.typing = false;
                 this.settle();
             }}
               />`}
@@ -770,6 +825,12 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessColorPicker.prototype, "swatchAt", void 0);
+__decorate([
+    state()
+], HelixHeadlessColorPicker.prototype, "typing", void 0);
+__decorate([
+    state()
+], HelixHeadlessColorPicker.prototype, "draft", void 0);
 __decorate([
     state()
 ], HelixHeadlessColorPicker.prototype, "dragging", void 0);

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

@@ -240,12 +240,13 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
     /**
      * Whether more than one option can be chosen.
      *
-     * The list already does the work: `value` comes apart on commas, a press
-     * toggles rather than replaces, and the arrows move without choosing. What
-     * this adds is the tags, and keeping the panel open between picks.
+     * The list already does the work: `value` is the chosen values joined with
+     * commas, a press toggles rather than replaces, and the arrows move without
+     * choosing. What this adds is the tags, and keeping the panel open between
+     * picks.
      *
-     * A comma is therefore not available inside an option's value, which is the
-     * listbox's contract and not this element's to change.
+     * An option's value may hold a comma, and it is read as one value, as
+     * `Select` and `Listbox` read it. So may an answer the reader created.
      *
      * **The list is told, and the field is not.** `aria-multiselectable` belongs
      * to `listbox`, `grid`, `tree` and `tablist`, and `combobox` dropped it in
@@ -385,8 +386,17 @@ export declare class HelixHeadlessCombobox extends HelixHeadlessCombobox_base {
      */
     protected readonly upgradeWatch: UpgradeController;
     protected readonly panel: PopoverController;
-    /** The values chosen, in the order they were chosen. */
+    /**
+     * The values chosen, in the order they were chosen, read against the
+     * options' values and the answers created here, so a value that holds a
+     * comma is one value. See `chosenValues`.
+     *
+     * Measured before this: choosing `Paris, France` drew two tags, "Paris" and
+     * "France", and the form received two entries.
+     */
     private get values();
+    /** The answers created here, which no option holds, kept so their commas read as theirs. */
+    private readonly created;
     /**
      * The chosen options themselves, for their words.
      *

package/dist/combobox/root/combobox-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, afterLinkFollowed, countLabel, customElement, DelayController, drawAutofill, drawStatus, formatWords, HelixCreateEvent, HelixFilterEvent, HelixFormElement, handedLocale, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, onApple, PopoverController, reportValues, StatusController, submitImplicitly, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
+import { AriaForwardController, afterLinkFollowed, chosenValues, countLabel, customElement, DelayController, drawAutofill, drawStatus, formatWords, HelixCreateEvent, HelixFilterEvent, HelixFormElement, handedLocale, MixinControllerOpen, MixinControllerValue, MixinField, MixinTokens, onApple, PopoverController, reportValues, StatusController, submitImplicitly, UpgradeController, words, wordsLocale, } from '@fusion.dev/helix-core';
 import { caretDown } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -69,6 +69,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
             placement: 'bottom-start',
             surface: () => this.partNamed('surface'),
         });
+        this.created = new Set();
         this.handleInput = (event) => {
             event.stopPropagation();
             const typed = event.target.value;
@@ -252,7 +253,11 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         return this.partNamed('listbox');
     }
     get values() {
-        return this.value === '' ? [] : this.value.split(',');
+        const known = new Set(this.created);
+        for (const option of optionsAmong(this.knownChildren)) {
+            known.add(option.value);
+        }
+        return chosenValues(this.value, known, this.multiple);
     }
     get chosen() {
         const options = optionsAmong(this.knownChildren);
@@ -296,6 +301,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
             return;
         }
         const next = this.multiple ? [...this.values, wanted].join(',') : wanted;
+        this.created.add(wanted);
         if (!this.requestValue(next)) {
             return;
         }
@@ -343,6 +349,7 @@ let HelixHeadlessCombobox = class HelixHeadlessCombobox extends MixinControllerO
         }
         const named = (this.listbox?.options ?? []).find((option) => option.text.trim().toLowerCase() === typed.toLowerCase());
         const answer = named?.value ?? typed;
+        this.created.add(answer);
         if (this.multiple) {
             if (!this.values.includes(answer)) {
                 this.requestValue([...this.values, answer].join(','));

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

@@ -55,7 +55,8 @@ declare const HelixHeadlessCommand_base: (new (...args: any[]) => import("@fusio
  * | `hotkey`, Command or Control with K by default | Opens the palette from anywhere on the page, or closes it. With `inline`, puts focus in its filter field. |
  * | Down, Up | Moves the highlight to the next or the previous command, round from the last to the first. |
  * | Page Down, Page Up | Moves the highlight by as many commands as the list shows at once. |
- * | Home, End, Left, Right | Move the caret in the filter field. |
+ * | Home, End | Move the caret in the filter field. With `home-end="list"`, move the highlight to the first or the last command. |
+ * | Left, Right | Move the caret in the filter field. |
  * | Enter | Runs the highlighted command, or follows it where it is a link, and closes the palette. On a command with `opens`, shows its page. |
  * | Command or Control with Enter | Takes the highlighted command's `alternate` destination, where it has one. |
  * | Backspace | In an empty filter on a page, goes back to the page before. |
@@ -144,6 +145,14 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
      * property only, there being no way to write a function in markup.
      */
     filterMatch?: ((text: string, filter: string) => boolean) | undefined;
+    /**
+     * Where Home and End go from the filter field.
+     *
+     * Absent, they move the caret, as APG's combobox has them. `list` moves the
+     * highlight to the first or the last command, as React Aria's Autocomplete
+     * does, and Shift with either still selects the text.
+     */
+    homeEnd?: 'list';
     /**
      * The key that opens the palette, written as `mod+k`, `shift+p`, or `k`,
      * in Kbd's chord spelling: `mod` is Command or Control, `ctrl`, `cmd`,
@@ -178,6 +187,12 @@ export declare class HelixHeadlessCommand extends HelixHeadlessCommand_base {
      * Accessible name for the overlay, which has no visible heading.
      */
     label: string;
+    /**
+     * How the commands are laid out, as Listbox's `layout`: `grid` draws them in
+     * rows and columns, for a palette of icons or emoji, and the arrow keys
+     * follow the rows and the columns. Absent is one command under another.
+     */
+    layout?: 'grid' | 'stack';
     /**
      * What the list says when its commands could not be loaded, such as after a
      * request to a server fails. Empty, null or no attribute is no error, so

package/dist/command/root/command-root.js

@@ -246,6 +246,8 @@ let HelixHeadlessCommand = class HelixHeadlessCommand extends MixinControllerOpe
         results-label=${this.resultsLabel}
         ?loading=${this.loading}
         .items=${this.items}
+        .fieldHomeEnd=${this.homeEnd === 'list'}
+        layout=${this.layout ?? nothing}
         filterable
         @helix-before-change=${this.handleChange}
         @helix-filter=${this.handleFilter}
@@ -299,6 +301,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessCommand.prototype, "filterMatch", void 0);
+__decorate([
+    property({ attribute: 'home-end' })
+], HelixHeadlessCommand.prototype, "homeEnd", void 0);
 __decorate([
     property()
 ], HelixHeadlessCommand.prototype, "hotkey", void 0);
@@ -312,6 +317,9 @@ __decorate([
     words,
     property()
 ], HelixHeadlessCommand.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessCommand.prototype, "layout", void 0);
 __decorate([
     property({ attribute: 'load-error' })
 ], HelixHeadlessCommand.prototype, "loadError", void 0);

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

@@ -208,7 +208,7 @@ declare const HelixHeadlessDataTable_base: (new (...args: any[]) => import("@fus
  * @csspart select - The cell that holds a row's checkbox.
  * @csspart select-all - The heading that holds the checkbox that selects every row.
  * @csspart select-selected - Added to `select` in a selected row.
- * @csspart table - The grid.
+ * @csspart table - The grid. While `windowed`, the box that scrolls, which needs only a block size on this tier.
  * @csspart toggle - The mark in a row header that a press opens and closes its row by, in a tree grid.
  * @csspart toggle-mark - The caret in `toggle`. It points along the line while the row is closed and down while it is open.
  * @csspart toggle-open - Added to `toggle` while its row is open.
@@ -586,6 +586,10 @@ export declare class HelixHeadlessDataTable extends HelixHeadlessDataTable_base
      * Off by default. Windowing costs a scroll listener, a measurement per row
      * drawn, and a `block-size` on the scrolling box, and a table of twenty rows
      * should pay none of them.
+     *
+     * While windowed, the `table` part scrolls on this tier: it carries
+     * `data-scroller`, and `core` ships `[data-scroller] { overflow: auto }` into
+     * every shadow root. You still need to give it a block size.
      */
     windowed: boolean;
     private sortState;

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

@@ -1228,6 +1228,7 @@ let HelixHeadlessDataTable = class HelixHeadlessDataTable extends MixinCollectio
         part="table"
         role="rowgroup"
         aria-busy=${this.loading ? 'true' : nothing}
+        ?data-scroller=${this.windowed}
         style=${template ? `--data-table-template: ${template}` : nothing}
         @scroll=${this.handleScroll}
       >

package/dist/dialog/root/dialog-root.js

@@ -31,6 +31,7 @@ let HelixHeadlessDialog = class HelixHeadlessDialog extends MixinControllerOpen(
                 '--show': () => this.show(),
                 '--toggle': () => this.toggleOpen(),
             },
+            expanded: () => this.open,
         });
         this.persistent = false;
         this.returned = '';

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

@@ -74,6 +74,10 @@ declare const HelixHeadlessDrawer_base: (new (...args: any[]) => import("@fusion
  * <helix-headless-drawer id="nav">…</helix-headless-drawer>
  * ```
  *
+ * From its first press, a button that opens the drawer this way says whether
+ * the drawer is open: a Helix button through `expanded`, and any other
+ * element with `aria-expanded`.
+ *
  * @since 0.1.0
  * @status stable
  * @category overlays

package/dist/drawer/root/drawer-root.js

@@ -19,6 +19,7 @@ let HelixHeadlessDrawer = class HelixHeadlessDrawer extends MixinControllerOpen(
                 '--show': () => this.requestOpen(true),
                 '--toggle': () => this.toggleOpen(),
             },
+            expanded: () => this.open,
         });
         this.dismissible = false;
         this.dismissLabel = 'Close';

package/dist/element-events.generated.js

@@ -196,6 +196,7 @@ registerElementEvents({
     'helix-headless-map-terrain': ['helix-map-part-change'],
     'helix-headless-megamenu': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-headless-menu': [
+        'change',
         'helix-before-close',
         'helix-before-open',
         'helix-filter',

package/dist/filter-input/chip/filter-chip.d.ts

@@ -28,9 +28,10 @@ declare const HelixHeadlessFilterChip_base: (new (...args: any[]) => import("@fu
  * press. `requestChange` documents the pattern.
  *
  * **Keyboard.** The remove button is a tab stop of its own, and Enter or Space
- * on it asks to remove the filter. In a `FilterInput`, Backspace in the empty
- * field asks to remove the last chip, the arrow keys move between the field
- * and the chips, and Delete or Backspace on a chip asks to remove it.
+ * on it asks to remove the filter. In a `FilterInput`, the field's text is the
+ * one tab stop: Backspace in the empty field asks to remove the last chip, the
+ * arrow keys move between the field and the chips, and Delete or Backspace on
+ * a chip asks to remove it.
  *
  * The remove button is named `dismiss-label` followed by the chip's words,
  * such as "Remove filter Status is not open", so a row of chips says which
@@ -78,6 +79,15 @@ export declare class HelixHeadlessFilterChip extends HelixHeadlessFilterChip_bas
      * closing a message.
      */
     dismissLabel: string;
+    /**
+     * Whether the remove button is a tab stop of its own.
+     *
+     * `FilterInput` writes `false` on the chips in its `tags` slot: the field's
+     * text is its one tab stop, and the arrow keys move from the text to the
+     * chips, as in a `multiple` Combobox. No attribute: it is coordination
+     * between elements, as `Tag.dismissTabStop` is.
+     */
+    dismissTabStop: boolean;
     /**
      * The name of the field the filter is on, as shown on the chip.
      *

package/dist/filter-input/chip/filter-chip.js

@@ -13,6 +13,7 @@ let HelixHeadlessFilterChip = class HelixHeadlessFilterChip extends MixinDismiss
     constructor() {
         super(...arguments);
         this.dismissLabel = 'Remove filter';
+        this.dismissTabStop = true;
         this.label = '';
         this.operatorLabel = '';
     }
@@ -43,6 +44,7 @@ let HelixHeadlessFilterChip = class HelixHeadlessFilterChip extends MixinDismiss
               part="dismiss"
               type="button"
               aria-label=${this.removeName}
+              tabindex=${this.dismissTabStop ? nothing : '-1'}
               @click=${() => this.dismiss()}
             >
               <svg part="dismiss-mark" fill="currentColor" viewBox=${x.viewBox} aria-hidden="true">
@@ -56,6 +58,9 @@ __decorate([
     words,
     property({ attribute: 'dismiss-label' })
 ], HelixHeadlessFilterChip.prototype, "dismissLabel", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessFilterChip.prototype, "dismissTabStop", void 0);
 __decorate([
     property()
 ], HelixHeadlessFilterChip.prototype, "label", void 0);

package/dist/filter-input/menu/filter-menu.js

@@ -180,7 +180,6 @@ let HelixHeadlessFilterMenu = class HelixHeadlessFilterMenu extends HelixElement
                   part="divider"
                   exportparts="content: divider-content, line: divider-line"
                   slot="submenu"
-                  announced
                 ></${divider}>`
                 : nothing}
           ${offered.map((option) => html `<${item}