@skdx/web-components 0.26.0

package/dist/multi-select/MultiSelect.d.cts

@@ -0,0 +1,252 @@
+import { LitElement } from 'lit';
+/** @internal Selector for an option that is still an option and still live. */
+export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled])";
+/** @internal Event the root dispatches whenever its state moves, so every part can re-render off state it owns no attribute for. */
+export declare const MULTI_SELECT_UPDATE_EVENT = "skdx-multi-select-internal-update";
+/** Default `getSelectionLabel`: `"2 selected"`, or `"none selected"` at zero. */
+export declare function defaultGetSelectionLabel(count: number): string;
+/** What an `<skdx-multi-select-item>` registers about itself, so Enter can toggle it by id. */
+export interface SkdxMultiSelectItemEntry {
+    /** The value added to, or removed from, the selection when this option is chosen. */
+    value: string;
+    /** The item's `text-value`, or its rendered text — matched by `filter`, shown by a tag that declares none. */
+    text: string;
+}
+/**
+ * Decides which `<skdx-multi-select-item>`s survive the current draft text.
+ * `undefined` filters nothing — the consumer renders only the options that
+ * match, which is what an async or server-side search needs.
+ */
+export type SkdxMultiSelectFilter = (itemText: string, inputValue: string) => boolean;
+/**
+ * `<skdx-multi-select>` — the Web Components implementation of the shared
+ * MultiSelect contract (see `@skdx/shared`'s `multiSelectContract`). A
+ * `role="combobox"` input with virtual focus over a multi-selectable listbox,
+ * plus a tag strip rendering one removable tag per selected value.
+ *
+ * The root owns the `string[]` selection, the draft text and the popup's open
+ * state, and hands them down to every other `<skdx-multi-select-*>` part, which
+ * look it up with `closest('skdx-multi-select')`. Renders no visible box of its
+ * own (`display: contents`) — the field that visually wraps the tags and the
+ * input is yours to lay out.
+ *
+ * **Staying open is the entire ergonomic point**: `close-on-select` is off by
+ * default, the inverse of every single-select picker, because picking five
+ * things should cost five clicks rather than five clicks and five reopenings.
+ * Backspace on an empty input removes the last tag, the gesture every tag field
+ * has trained users to expect.
+ *
+ * `max` **disables rather than swallows**: once the cap is reached, unselected
+ * options go `aria-disabled` and stop responding, while already-selected ones
+ * stay removable — a control that silently ignores clicks reads as broken.
+ *
+ * Not form-associated: the contract's form behaviour is that the consumer
+ * serialises the `string[]`, typically through one hidden input per value,
+ * because there is no native control shaped like this.
+ *
+ * @example
+ * ```html
+ * <skdx-multi-select value='["React"]'>
+ *   <skdx-multi-select-tag-list aria-label="Selected skills">
+ *     <skdx-multi-select-tag value="React">
+ *       React
+ *       <skdx-multi-select-tag-remove>×</skdx-multi-select-tag-remove>
+ *     </skdx-multi-select-tag>
+ *   </skdx-multi-select-tag-list>
+ *   <skdx-multi-select-input aria-label="Skills" placeholder="Add a skill…"></skdx-multi-select-input>
+ *   <skdx-multi-select-content>
+ *     <skdx-multi-select-list aria-label="Skills">
+ *       <skdx-multi-select-item value="React">React</skdx-multi-select-item>
+ *     </skdx-multi-select-list>
+ *   </skdx-multi-select-content>
+ * </skdx-multi-select>
+ * ```
+ *
+ * @fires value-change - Fires with the whole new selection (`string[]`), not the toggled value, so the array can be written straight back to state. Never when the selection is unchanged.
+ * @fires input-value-change - Fires with the new draft text (string) on every keystroke, and with `''` when a selection clears it.
+ * @fires open-change - Fires with the new open state (boolean) whenever the option popup opens or closes.
+ * @fires open-change-complete - Fires with the new open state after `<skdx-multi-select-content>`'s enter or exit animation has finished — as soon as the popup has settled, when it declares no animation at all. Not cancelable: the change has already happened.
+ */
+export declare class SkdxMultiSelect extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Selected values, in selection order. A JSON array attribute
+     * (`value='["React","Vue"]'`) or a plain property assignment. Listen for
+     * `value-change` to observe or override changes.
+     * @default [] — nothing selected, so no tags are rendered.
+     */
+    value: string[];
+    /**
+     * Initially selected values, applied once on connect and only if `value` was
+     * not authored.
+     * @default [] — nothing selected.
+     */
+    defaultValue: string[];
+    /**
+     * The draft text currently in the input, typically used to filter the option
+     * list. Listen for `input-value-change`.
+     * @default '' — an empty field, so an unfiltered list.
+     */
+    inputValue: string;
+    /**
+     * Initial draft text, applied once on connect and only if `input-value` was
+     * not authored.
+     * @default '' — the field starts empty.
+     */
+    defaultInputValue: string;
+    /**
+     * Whether the option popup is open. Listen for `open-change`.
+     * @default false — the popup opens on the first keystroke or Arrow Down.
+     */
+    open: boolean;
+    /**
+     * Initial open state, applied once on connect and only if `open` was not
+     * authored.
+     * @default false
+     */
+    defaultOpen: boolean;
+    /**
+     * Largest number of values that can be selected. Once reached, unselected
+     * options become `aria-disabled` and stop responding rather than silently
+     * swallowing clicks; already-selected ones stay removable, so the way out of
+     * a full selection is always visible.
+     * @default undefined — no cap.
+     */
+    max?: number;
+    /**
+     * Close the popup after each selection. Off by default, which is the whole
+     * ergonomic point of a multi-select.
+     * @default false — the popup stays open across a run of selections.
+     */
+    closeOnSelect: boolean;
+    /**
+     * Predicate deciding which `<skdx-multi-select-item>`s survive the current
+     * draft text. A rejected item stops being an option entirely, so it leaves
+     * the option count and the highlight order exactly as if the consumer had
+     * never rendered it. Property only: an attribute cannot carry a function.
+     * @default undefined — nothing is filtered; the consumer renders only the matching items.
+     */
+    filter?: SkdxMultiSelectFilter;
+    /**
+     * Blocks all interaction: the input is natively `disabled`, tags cannot be
+     * removed, and the popup can never open.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Shows the selection but blocks any change to it — the input is natively
+     * `readonly` and still focusable (unlike `disabled`), tags are not removable,
+     * and no option can be toggled.
+     * @default false
+     */
+    readOnly: boolean;
+    /**
+     * Marks the field invalid, exposed as `aria-invalid`/`data-invalid` on
+     * `<skdx-multi-select-input>`.
+     * @default false
+     */
+    invalid: boolean;
+    /**
+     * Formats the message announced (through the shared live announcer) after
+     * every selection change. Toggling an option changes `aria-selected` on a
+     * node the user is not focused on, so without this a screen-reader user gets
+     * no confirmation that anything happened at all. Return an empty string to
+     * announce nothing. Property only.
+     * @default defaultGetSelectionLabel — e.g. `"2 selected"`
+     */
+    getSelectionLabel: (count: number) => string;
+    /** Id `<skdx-multi-select-list>` takes, and the input's `aria-controls` points at. */
+    readonly listId: string;
+    /** Id of the virtually-focused (`aria-activedescendant`) option, or `null`. */
+    activeId: string | null;
+    /** @internal The `<skdx-multi-select-input>` descendant — the floating-ui anchor for the popup. */
+    inputHost: HTMLElement | null;
+    /**
+     * @internal The mounted `<skdx-multi-select-content>`. Registered rather than
+     * looked up, because it is also what tells `<skdx-multi-select-input>` that
+     * something else owns Escape.
+     */
+    contentEl: HTMLElement | null;
+    private seeded;
+    private hasUpdatedOnce;
+    private teardownOpenChangeComplete?;
+    /** Whether the selection has reached `max`, so unselected options are inert. */
+    get atMax(): boolean;
+    /** Whether the root refuses every edit — `disabled` or `readOnly`. */
+    get locked(): boolean;
+    /** Whether one option value is currently selected. */
+    isSelected(value: string): boolean;
+    /** Sets the whole selection and dispatches `value-change`. A selection equal to the current one is a no-op. */
+    setValue(value: string[]): void;
+    /** Sets `inputValue` and dispatches `input-value-change`. Unchanged text is a no-op. */
+    setInputValue(value: string): void;
+    /** Sets `open` and dispatches `open-change`. Clears the virtual highlight on close; an unchanged state is a no-op. */
+    setOpen(open: boolean): void;
+    /**
+     * Toggles an option within the selection, honouring `max` and
+     * `closeOnSelect`. A locked root already makes every option inert, so that
+     * guard is the root's own invariant rather than a reachable path.
+     *
+     * At the cap an unselected value is left out, but the draft text is still
+     * cleared and `closeOnSelect` still applies — the cap decides what is
+     * selected, not what the field looks like afterwards.
+     */
+    toggle(value: string): void;
+    /** Removes one value from the selection — what a tag's remove button and Backspace both call. */
+    deselect(value: string): void;
+    /** Removes the last selected value; Backspace on an empty input. */
+    removeLast(): void;
+    /**
+     * Whether an item's text survives the current `filter` predicate and draft text.
+     *
+     * A call the family's `*-item` element makes on its root to decide its own visibility, not consumer API. It stays `public` to the compiler because the item is an instance of a different class, which `protected` cannot express.
+     *
+     * @internal
+     */
+    matchesFilter(itemText: string): boolean;
+    /** The registered text for a value, for a tag that declares none of its own. */
+    textFor(value: string): string | undefined;
+    /** Opens the popup and highlights the first or last option once it mounts. */
+    openWithHighlight(edge: 'first' | 'last'): void;
+    /**
+     * Sets the virtually-focused option id.
+     *
+     * Keyed on an id this element mints for its own options, so a consumer has nothing meaningful to pass — it is the `aria-activedescendant` wiring the input and item parts share with their root, not consumer API. It stays `public` to the compiler because those parts are instances of different classes, which `protected` cannot express.
+     *
+     * @internal
+     */
+    setActiveId(id: string | null): void;
+    private readonly itemRegistry;
+    /** @internal Called by each rendered `<skdx-multi-select-item>` so Enter can toggle it by id. */
+    registerItem(id: string, entry: SkdxMultiSelectItemEntry): void;
+    /** @internal Called when an item unmounts or is filtered out; a gone option can't stay highlighted. */
+    unregisterItem(id: string): void;
+    /**
+     * The registered entry for an option id, or `undefined` when it is no longer rendered.
+     *
+     * Keyed on an id this element mints for its own options, so a consumer has nothing meaningful to pass — it is the `aria-activedescendant` wiring the input and item parts share with their root, not consumer API. It stays `public` to the compiler because those parts are instances of different classes, which `protected` cannot express.
+     *
+     * @internal
+     */
+    getItem(id: string): SkdxMultiSelectItemEntry | undefined;
+    private reseedFrame?;
+    /**
+     * Virtual focus has to keep naming an option that is actually rendered, and
+     * the option the user is on is exactly the one ordinary typing removes.
+     * Re-points the highlight at the first survivor instead of dropping it, since
+     * `aria-activedescendant` naming a non-option is worse than naming none.
+     * Deferred a frame because the new option set has to be in the DOM first.
+     */
+    private scheduleReseed;
+    private emit;
+    private notify;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-multi-select': SkdxMultiSelect;
+    }
+}

package/dist/multi-select/MultiSelect.d.ts

@@ -0,0 +1,252 @@
+import { LitElement } from 'lit';
+/** @internal Selector for an option that is still an option and still live. */
+export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled])";
+/** @internal Event the root dispatches whenever its state moves, so every part can re-render off state it owns no attribute for. */
+export declare const MULTI_SELECT_UPDATE_EVENT = "skdx-multi-select-internal-update";
+/** Default `getSelectionLabel`: `"2 selected"`, or `"none selected"` at zero. */
+export declare function defaultGetSelectionLabel(count: number): string;
+/** What an `<skdx-multi-select-item>` registers about itself, so Enter can toggle it by id. */
+export interface SkdxMultiSelectItemEntry {
+    /** The value added to, or removed from, the selection when this option is chosen. */
+    value: string;
+    /** The item's `text-value`, or its rendered text — matched by `filter`, shown by a tag that declares none. */
+    text: string;
+}
+/**
+ * Decides which `<skdx-multi-select-item>`s survive the current draft text.
+ * `undefined` filters nothing — the consumer renders only the options that
+ * match, which is what an async or server-side search needs.
+ */
+export type SkdxMultiSelectFilter = (itemText: string, inputValue: string) => boolean;
+/**
+ * `<skdx-multi-select>` — the Web Components implementation of the shared
+ * MultiSelect contract (see `@skdx/shared`'s `multiSelectContract`). A
+ * `role="combobox"` input with virtual focus over a multi-selectable listbox,
+ * plus a tag strip rendering one removable tag per selected value.
+ *
+ * The root owns the `string[]` selection, the draft text and the popup's open
+ * state, and hands them down to every other `<skdx-multi-select-*>` part, which
+ * look it up with `closest('skdx-multi-select')`. Renders no visible box of its
+ * own (`display: contents`) — the field that visually wraps the tags and the
+ * input is yours to lay out.
+ *
+ * **Staying open is the entire ergonomic point**: `close-on-select` is off by
+ * default, the inverse of every single-select picker, because picking five
+ * things should cost five clicks rather than five clicks and five reopenings.
+ * Backspace on an empty input removes the last tag, the gesture every tag field
+ * has trained users to expect.
+ *
+ * `max` **disables rather than swallows**: once the cap is reached, unselected
+ * options go `aria-disabled` and stop responding, while already-selected ones
+ * stay removable — a control that silently ignores clicks reads as broken.
+ *
+ * Not form-associated: the contract's form behaviour is that the consumer
+ * serialises the `string[]`, typically through one hidden input per value,
+ * because there is no native control shaped like this.
+ *
+ * @example
+ * ```html
+ * <skdx-multi-select value='["React"]'>
+ *   <skdx-multi-select-tag-list aria-label="Selected skills">
+ *     <skdx-multi-select-tag value="React">
+ *       React
+ *       <skdx-multi-select-tag-remove>×</skdx-multi-select-tag-remove>
+ *     </skdx-multi-select-tag>
+ *   </skdx-multi-select-tag-list>
+ *   <skdx-multi-select-input aria-label="Skills" placeholder="Add a skill…"></skdx-multi-select-input>
+ *   <skdx-multi-select-content>
+ *     <skdx-multi-select-list aria-label="Skills">
+ *       <skdx-multi-select-item value="React">React</skdx-multi-select-item>
+ *     </skdx-multi-select-list>
+ *   </skdx-multi-select-content>
+ * </skdx-multi-select>
+ * ```
+ *
+ * @fires value-change - Fires with the whole new selection (`string[]`), not the toggled value, so the array can be written straight back to state. Never when the selection is unchanged.
+ * @fires input-value-change - Fires with the new draft text (string) on every keystroke, and with `''` when a selection clears it.
+ * @fires open-change - Fires with the new open state (boolean) whenever the option popup opens or closes.
+ * @fires open-change-complete - Fires with the new open state after `<skdx-multi-select-content>`'s enter or exit animation has finished — as soon as the popup has settled, when it declares no animation at all. Not cancelable: the change has already happened.
+ */
+export declare class SkdxMultiSelect extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Selected values, in selection order. A JSON array attribute
+     * (`value='["React","Vue"]'`) or a plain property assignment. Listen for
+     * `value-change` to observe or override changes.
+     * @default [] — nothing selected, so no tags are rendered.
+     */
+    value: string[];
+    /**
+     * Initially selected values, applied once on connect and only if `value` was
+     * not authored.
+     * @default [] — nothing selected.
+     */
+    defaultValue: string[];
+    /**
+     * The draft text currently in the input, typically used to filter the option
+     * list. Listen for `input-value-change`.
+     * @default '' — an empty field, so an unfiltered list.
+     */
+    inputValue: string;
+    /**
+     * Initial draft text, applied once on connect and only if `input-value` was
+     * not authored.
+     * @default '' — the field starts empty.
+     */
+    defaultInputValue: string;
+    /**
+     * Whether the option popup is open. Listen for `open-change`.
+     * @default false — the popup opens on the first keystroke or Arrow Down.
+     */
+    open: boolean;
+    /**
+     * Initial open state, applied once on connect and only if `open` was not
+     * authored.
+     * @default false
+     */
+    defaultOpen: boolean;
+    /**
+     * Largest number of values that can be selected. Once reached, unselected
+     * options become `aria-disabled` and stop responding rather than silently
+     * swallowing clicks; already-selected ones stay removable, so the way out of
+     * a full selection is always visible.
+     * @default undefined — no cap.
+     */
+    max?: number;
+    /**
+     * Close the popup after each selection. Off by default, which is the whole
+     * ergonomic point of a multi-select.
+     * @default false — the popup stays open across a run of selections.
+     */
+    closeOnSelect: boolean;
+    /**
+     * Predicate deciding which `<skdx-multi-select-item>`s survive the current
+     * draft text. A rejected item stops being an option entirely, so it leaves
+     * the option count and the highlight order exactly as if the consumer had
+     * never rendered it. Property only: an attribute cannot carry a function.
+     * @default undefined — nothing is filtered; the consumer renders only the matching items.
+     */
+    filter?: SkdxMultiSelectFilter;
+    /**
+     * Blocks all interaction: the input is natively `disabled`, tags cannot be
+     * removed, and the popup can never open.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Shows the selection but blocks any change to it — the input is natively
+     * `readonly` and still focusable (unlike `disabled`), tags are not removable,
+     * and no option can be toggled.
+     * @default false
+     */
+    readOnly: boolean;
+    /**
+     * Marks the field invalid, exposed as `aria-invalid`/`data-invalid` on
+     * `<skdx-multi-select-input>`.
+     * @default false
+     */
+    invalid: boolean;
+    /**
+     * Formats the message announced (through the shared live announcer) after
+     * every selection change. Toggling an option changes `aria-selected` on a
+     * node the user is not focused on, so without this a screen-reader user gets
+     * no confirmation that anything happened at all. Return an empty string to
+     * announce nothing. Property only.
+     * @default defaultGetSelectionLabel — e.g. `"2 selected"`
+     */
+    getSelectionLabel: (count: number) => string;
+    /** Id `<skdx-multi-select-list>` takes, and the input's `aria-controls` points at. */
+    readonly listId: string;
+    /** Id of the virtually-focused (`aria-activedescendant`) option, or `null`. */
+    activeId: string | null;
+    /** @internal The `<skdx-multi-select-input>` descendant — the floating-ui anchor for the popup. */
+    inputHost: HTMLElement | null;
+    /**
+     * @internal The mounted `<skdx-multi-select-content>`. Registered rather than
+     * looked up, because it is also what tells `<skdx-multi-select-input>` that
+     * something else owns Escape.
+     */
+    contentEl: HTMLElement | null;
+    private seeded;
+    private hasUpdatedOnce;
+    private teardownOpenChangeComplete?;
+    /** Whether the selection has reached `max`, so unselected options are inert. */
+    get atMax(): boolean;
+    /** Whether the root refuses every edit — `disabled` or `readOnly`. */
+    get locked(): boolean;
+    /** Whether one option value is currently selected. */
+    isSelected(value: string): boolean;
+    /** Sets the whole selection and dispatches `value-change`. A selection equal to the current one is a no-op. */
+    setValue(value: string[]): void;
+    /** Sets `inputValue` and dispatches `input-value-change`. Unchanged text is a no-op. */
+    setInputValue(value: string): void;
+    /** Sets `open` and dispatches `open-change`. Clears the virtual highlight on close; an unchanged state is a no-op. */
+    setOpen(open: boolean): void;
+    /**
+     * Toggles an option within the selection, honouring `max` and
+     * `closeOnSelect`. A locked root already makes every option inert, so that
+     * guard is the root's own invariant rather than a reachable path.
+     *
+     * At the cap an unselected value is left out, but the draft text is still
+     * cleared and `closeOnSelect` still applies — the cap decides what is
+     * selected, not what the field looks like afterwards.
+     */
+    toggle(value: string): void;
+    /** Removes one value from the selection — what a tag's remove button and Backspace both call. */
+    deselect(value: string): void;
+    /** Removes the last selected value; Backspace on an empty input. */
+    removeLast(): void;
+    /**
+     * Whether an item's text survives the current `filter` predicate and draft text.
+     *
+     * A call the family's `*-item` element makes on its root to decide its own visibility, not consumer API. It stays `public` to the compiler because the item is an instance of a different class, which `protected` cannot express.
+     *
+     * @internal
+     */
+    matchesFilter(itemText: string): boolean;
+    /** The registered text for a value, for a tag that declares none of its own. */
+    textFor(value: string): string | undefined;
+    /** Opens the popup and highlights the first or last option once it mounts. */
+    openWithHighlight(edge: 'first' | 'last'): void;
+    /**
+     * Sets the virtually-focused option id.
+     *
+     * Keyed on an id this element mints for its own options, so a consumer has nothing meaningful to pass — it is the `aria-activedescendant` wiring the input and item parts share with their root, not consumer API. It stays `public` to the compiler because those parts are instances of different classes, which `protected` cannot express.
+     *
+     * @internal
+     */
+    setActiveId(id: string | null): void;
+    private readonly itemRegistry;
+    /** @internal Called by each rendered `<skdx-multi-select-item>` so Enter can toggle it by id. */
+    registerItem(id: string, entry: SkdxMultiSelectItemEntry): void;
+    /** @internal Called when an item unmounts or is filtered out; a gone option can't stay highlighted. */
+    unregisterItem(id: string): void;
+    /**
+     * The registered entry for an option id, or `undefined` when it is no longer rendered.
+     *
+     * Keyed on an id this element mints for its own options, so a consumer has nothing meaningful to pass — it is the `aria-activedescendant` wiring the input and item parts share with their root, not consumer API. It stays `public` to the compiler because those parts are instances of different classes, which `protected` cannot express.
+     *
+     * @internal
+     */
+    getItem(id: string): SkdxMultiSelectItemEntry | undefined;
+    private reseedFrame?;
+    /**
+     * Virtual focus has to keep naming an option that is actually rendered, and
+     * the option the user is on is exactly the one ordinary typing removes.
+     * Re-points the highlight at the first survivor instead of dropping it, since
+     * `aria-activedescendant` naming a non-option is worse than naming none.
+     * Deferred a frame because the new option set has to be in the DOM first.
+     */
+    private scheduleReseed;
+    private emit;
+    private notify;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-multi-select': SkdxMultiSelect;
+    }
+}

package/dist/multi-select/MultiSelect.js

@@ -0,0 +1,5 @@
+var p=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var s=(l,a,e,t)=>{for(var n=t>1?void 0:t?m(a,e):a,o=l.length-1,u;o>=0;o--)(u=l[o])&&(n=(t?u(a,e,n):u(n))||n);return t&&n&&p(a,e,n),n};import{css as c,html as f,LitElement as v}from"lit";import{property as r}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";import{nextId as b}from"../internal/ids.js";import{notifyOpenChangeComplete as y}from"../internal/open-change-complete.js";import{announce as E}from"../utils/live-announcer.js";var d='[role="option"]:not([data-disabled])',h="skdx-multi-select-internal-update";function I(l){return l===0?"none selected":`${l} selected`}function C(l,a){return l.length===a.length&&l.every((e,t)=>e===a[t])}var i=class extends v{constructor(){super(...arguments);this.value=[];this.defaultValue=[];this.inputValue="";this.defaultInputValue="";this.open=!1;this.defaultOpen=!1;this.closeOnSelect=!1;this.disabled=!1;this.readOnly=!1;this.invalid=!1;this.getSelectionLabel=I;this.listId=b("skdx-multi-select-list");this.activeId=null;this.inputHost=null;this.contentEl=null;this.seeded=!1;this.hasUpdatedOnce=!1;this.itemRegistry=new Map}get atMax(){return this.max!==void 0&&this.value.length>=this.max}get locked(){return this.disabled||this.readOnly}isSelected(e){return this.value.includes(e)}setValue(e){C(this.value,e)||(this.value=e,this.emit("value-change",e))}setInputValue(e){this.inputValue!==e&&(this.inputValue=e,this.emit("input-value-change",e))}setOpen(e){this.open!==e&&(this.open=e,e||(this.activeId=null),this.emit("open-change",e))}toggle(e){if(this.locked)return;let t=this.value,n=t;t.includes(e)?n=t.filter(o=>o!==e):(this.max===void 0||t.length<this.max)&&(n=[...t,e]),this.setValue(n),this.setInputValue(""),this.closeOnSelect&&this.setOpen(!1)}deselect(e){this.locked||!this.value.includes(e)||this.setValue(this.value.filter(t=>t!==e))}removeLast(){this.locked||this.value.length===0||this.setValue(this.value.slice(0,-1))}matchesFilter(e){return this.filter===void 0||this.filter(e,this.inputValue)}textFor(e){for(let t of this.itemRegistry.values())if(t.value===e)return t.text}openWithHighlight(e){this.setOpen(!0),requestAnimationFrame(()=>{let t=Array.from(this.querySelectorAll(d));t.length!==0&&this.setActiveId((e==="last"?t[t.length-1]:t[0]).id)})}setActiveId(e){this.activeId=e,this.notify()}registerItem(e,t){this.itemRegistry.set(e,t)}unregisterItem(e){this.itemRegistry.delete(e),this.activeId===e&&this.scheduleReseed()}getItem(e){return this.itemRegistry.get(e)}scheduleReseed(){this.reseedFrame===void 0&&(this.reseedFrame=requestAnimationFrame(()=>{this.reseedFrame=void 0;let e=this.activeId;if(e===null)return;let t=Array.from(this.querySelectorAll(d));t.some(n=>n.id===e)||this.setActiveId(t[0]?.id??null)}))}emit(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0})),this.notify()}notify(){this.dispatchEvent(new CustomEvent(h,{bubbles:!0,composed:!0})),this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.seeded||(this.seeded=!0,this.hasAttribute("value")||(this.value=this.defaultValue),this.hasAttribute("input-value")||(this.inputValue=this.defaultInputValue),this.hasAttribute("open")||(this.open=this.defaultOpen))}disconnectedCallback(){this.reseedFrame!==void 0&&cancelAnimationFrame(this.reseedFrame),this.reseedFrame=void 0,this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}updated(e){let t=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,e.has("value")&&!t&&E(this.getSelectionLabel(this.value.length)),e.size>0&&this.dispatchEvent(new CustomEvent(h,{bubbles:!0,composed:!0})),e.has("open")&&!t&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=y(()=>this.contentEl,this.open,n=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:n,bubbles:!0,composed:!0}))))}render(){return f`<slot></slot>`}};i.styles=c`
+    :host {
+      display: contents;
+    }
+  `,s([r({type:Array})],i.prototype,"value",2),s([r({type:Array,attribute:"default-value"})],i.prototype,"defaultValue",2),s([r({type:String,attribute:"input-value"})],i.prototype,"inputValue",2),s([r({type:String,attribute:"default-input-value"})],i.prototype,"defaultInputValue",2),s([r({type:Boolean,reflect:!0})],i.prototype,"open",2),s([r({type:Boolean,attribute:"default-open"})],i.prototype,"defaultOpen",2),s([r({type:Number})],i.prototype,"max",2),s([r({type:Boolean,attribute:"close-on-select",reflect:!0})],i.prototype,"closeOnSelect",2),s([r({attribute:!1})],i.prototype,"filter",2),s([r({type:Boolean,reflect:!0})],i.prototype,"disabled",2),s([r({type:Boolean,attribute:"read-only",reflect:!0})],i.prototype,"readOnly",2),s([r({type:Boolean,reflect:!0})],i.prototype,"invalid",2),s([r({attribute:!1})],i.prototype,"getSelectionLabel",2),i=s([g("skdx-multi-select")],i);export{h as MULTI_SELECT_UPDATE_EVENT,d as OPTION_SELECTOR,i as SkdxMultiSelect,I as defaultGetSelectionLabel};

package/dist/multi-select/MultiSelectContent.cjs

@@ -0,0 +1,5 @@
+"use strict";var u=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var g=(s,e)=>{for(var t in e)u(s,t,{get:e[t],enumerable:!0})},P=(s,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of O(e))!b.call(s,i)&&i!==t&&u(s,i,{get:()=>e[i],enumerable:!(n=v(e,i))||n.enumerable});return s};var w=s=>P(u({},"__esModule",{value:!0}),s),r=(s,e,t,n)=>{for(var i=n>1?void 0:n?v(e,t):e,c=s.length-1,p;c>=0;c--)(p=s[c])&&(i=(n?p(e,t,i):p(i))||i);return n&&i&&u(e,t,i),i};var L={};g(L,{SkdxMultiSelectContent:()=>o});module.exports=w(L);var l=require("lit"),a=require("lit/decorators.js"),m=require("../internal/closest.cjs"),y=require("../internal/define.cjs"),d=require("../internal/dismiss.cjs"),h=require("../internal/positioning.cjs"),E=require("../internal/styles.cjs"),f=require("./MultiSelect.cjs");var o=class extends l.LitElement{constructor(){super(...arguments);this.side="bottom";this.align="start";this.sideOffset=4;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.root=null;this.onRootUpdate=()=>this.syncHostState();this.preventFocusSteal=t=>t.preventDefault();this.handleDocumentKeyDown=t=>{t.key!=="Escape"||!this.root?.open||(t.preventDefault(),(0,d.dispatchEscapeKeyDown)(this,t)&&this.root.setOpen(!1))};this.handleOutsidePointerDown=t=>{!this.root?.open||this.isInside(t.target)||(0,d.dispatchOutside)(this,"pointer-down-outside",t)&&this.root.setOpen(!1)};this.handleOutsideFocus=t=>{if(!this.root?.open)return;let n=(0,d.focusOutsideTarget)(t);n===null||this.isInside(n)||(0,d.dispatchOutside)(this,"focus-outside",t)&&this.root.setOpen(!1)}}connectedCallback(){super.connectedCallback(),this.root=(0,m.closestThroughPortal)(this,"skdx-multi-select"),this.root&&(this.root.contentEl=this),this.root?.addEventListener(f.MULTI_SELECT_UPDATE_EVENT,this.onRootUpdate),this.addEventListener("mousedown",this.preventFocusSteal),document.addEventListener("keydown",this.handleDocumentKeyDown,!0),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener(f.MULTI_SELECT_UPDATE_EVENT,this.onRootUpdate),this.root?.contentEl===this&&(this.root.contentEl=null),this.removeEventListener("mousedown",this.preventFocusSteal),document.removeEventListener("keydown",this.handleDocumentKeyDown,!0),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.cleanupPosition?.(),this.cleanupPosition=void 0,super.disconnectedCallback()}isInside(t){return t?this.contains(t)||this.root?.contains(t)===!0:!1}syncHostState(){let t=this.root?.open??!1;this.setAttribute("data-state",t?"open":"closed"),this.setAttribute("data-side",this.side??"bottom"),this.setAttribute("data-align",this.align??"start"),this.hidden=!t,t?this.activate():this.deactivate()}activate(){this.cleanupPosition||!this.root?.inputHost||(this.cleanupPosition=(0,h.positionFloating)(this.root.inputHost,this,{side:this.side,align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding,collisionBoundary:this.collisionBoundary,component:"multi-select"}))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0}render(){return l.html`<slot></slot>`}};o.styles=[E.hiddenHostStyles,l.css`
+      :host {
+        display: block;
+      }
+    `],r([(0,a.property)({type:String})],o.prototype,"side",2),r([(0,a.property)({type:String})],o.prototype,"align",2),r([(0,a.property)({type:Number,attribute:"side-offset"})],o.prototype,"sideOffset",2),r([(0,a.property)({type:Number,attribute:"align-offset"})],o.prototype,"alignOffset",2),r([(0,a.property)({converter:h.optOutBoolean,attribute:"avoid-collisions"})],o.prototype,"avoidCollisions",2),r([(0,a.property)({type:Number,attribute:"collision-padding"})],o.prototype,"collisionPadding",2),r([(0,a.property)({attribute:!1})],o.prototype,"collisionBoundary",2),o=r([(0,y.customElement)("skdx-multi-select-content","multi-select","content")],o);0&&(module.exports={SkdxMultiSelectContent});

package/dist/multi-select/MultiSelectContent.d.cts

@@ -0,0 +1,87 @@
+import { LitElement } from 'lit';
+import { type PositionOptions } from '../internal/positioning.cjs';
+/**
+ * `<skdx-multi-select-content>` — the popup shell for the closest ancestor
+ * `<skdx-multi-select>`, positioned relative to `<skdx-multi-select-input>` via
+ * `@floating-ui/dom`. `data-state` and the `data-side`/`data-align` placement
+ * hooks (seeded from the configured `side`/`align`, then rewritten by
+ * `positionFloating` with floating-ui's resolved placement) are set directly on
+ * this host element, not inside shadow DOM, so light-DOM `querySelectorAll` is
+ * how descendant options are found.
+ *
+ * Carries **no ARIA role**: the listbox is `<skdx-multi-select-list>`, one level
+ * in, leaving room for a "3 of 8 selected" header or a footer that is not an
+ * option. Prevents `mousedown` from stealing focus off the input, which is what
+ * lets the popup stay open across a run of selections.
+ *
+ * `positionFloating` also writes the measurement custom properties
+ * `--skdx-multi-select-available-width` / `-available-height` / `-trigger-width` /
+ * `-transform-origin` onto this element on every reposition — so a panel whose
+ * height must stop at the viewport edge is CSS, not JavaScript.
+ *
+ * Closes on Escape or on an outside interaction, each announced first as
+ * `interact-outside` and then as the specific event, so one `preventDefault()`
+ * vetoes either path. Escape is owned here rather than by
+ * `<skdx-multi-select-input>`'s keydown handler: the document-level listener runs
+ * in the capture phase, i.e. *before* the input's, which is the only ordering in
+ * which a listener can still veto the close.
+ *
+ * @fires escape-key-down - Escape was pressed while open. Preventable.
+ * @fires pointer-down-outside - A pointer-down landed outside the multi select while open. Preventable.
+ * @fires focus-outside - Focus moved outside the multi select while open (detail: the original focusin). Preventable.
+ * @fires interact-outside - Either kind of outside interaction, fired immediately before the specific event so one handler can veto both. Preventable.
+ */
+export declare class SkdxMultiSelectContent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Preferred edge of the input to place the popup against. @default 'bottom' */
+    side: PositionOptions['side'];
+    /** Preferred alignment along that edge relative to the input. @default 'start' — the popup's leading edge lines up with the field's. */
+    align: PositionOptions['align'];
+    /** Pixel gap between the popup and the input's edge. @default 4 */
+    sideOffset: number;
+    /** Pixel offset along the alignment axis. @default 0 */
+    alignOffset: number;
+    /** Flip/shift to stay within the viewport instead of overflowing it. @default true — switch it off by value (`avoid-collisions="false"`), not by absence. */
+    avoidCollisions: boolean;
+    /**
+     * Minimum pixel distance to keep from the collision boundary when avoiding
+     * collisions. The `collision-padding` attribute sets a single number for
+     * every side; the per-side `{ top, right, bottom, left }` form is
+     * property-only, since an attribute cannot carry an object.
+     * @default 8
+     */
+    collisionPadding: NonNullable<PositionOptions['collisionPadding']>;
+    /**
+     * Element (or elements) collisions are measured against instead of this
+     * popup's clipping ancestors — the field wrapping the tags and the input is
+     * usually a fixed-height box with `overflow: hidden`, which is precisely what
+     * would clip the option list. Property-only: an `Element` cannot come from an
+     * attribute string.
+     * @default undefined — the popup's own clipping ancestors.
+     */
+    collisionBoundary?: PositionOptions['collisionBoundary'];
+    private root;
+    private readonly onRootUpdate;
+    private cleanupPosition?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly preventFocusSteal;
+    /**
+     * The layer is the whole control, not just this panel: real focus lives on
+     * `<skdx-multi-select-input>`, and the tag strip with its remove buttons sits
+     * beside it — everything inside the root is part of the field, not "outside".
+     */
+    private isInside;
+    private readonly handleDocumentKeyDown;
+    private readonly handleOutsidePointerDown;
+    private readonly handleOutsideFocus;
+    private syncHostState;
+    private activate;
+    private deactivate;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-multi-select-content': SkdxMultiSelectContent;
+    }
+}