@skdx/web-components 0.26.0 → 0.28.0

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

@@ -1,48 +1,53 @@
 import { LitElement } from 'lit';
-/** @internal Selector for an option that is still an option and still live. */
+import type { SkdxOptionsInput } from '../internal/options.js';
+/** @internal Selector for a non-disabled option. */
 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. */
+/** @internal Update event dispatched on state changes. */
 export declare const MULTI_SELECT_UPDATE_EVENT = "skdx-multi-select-internal-update";
-/** Default `getSelectionLabel`: `"2 selected"`, or `"none selected"` at zero. */
+/**
+ * Scrolls option into view within the popup, centring like native `<select>`.
+ * Not using `scrollIntoView()` because floating-ui positions at document origin
+ * before transforms, causing unwanted page scroll on opening. Uses rect-based
+ * offsets instead of `offsetTop`.
+ * @internal
+ */
+export declare function scrollIntoPopup(content: HTMLElement, option: HTMLElement): void;
+/** Default selection label format. */
 export declare function defaultGetSelectionLabel(count: number): string;
-/** What an `<skdx-multi-select-item>` registers about itself, so Enter can toggle it by id. */
+/** Entry for a multi-select option. */
 export interface SkdxMultiSelectItemEntry {
-    /** The value added to, or removed from, the selection when this option is chosen. */
+    /** Value when chosen. */
     value: string;
-    /** The item's `text-value`, or its rendered text — matched by `filter`, shown by a tag that declares none. */
+    /** Item text, matched by filter. */
     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.
+ * Filter predicate that optionally ranks items; return `true`/positive number to keep,
+ * `false`/0 to exclude, and number values reorder by descending score.
  */
-export type SkdxMultiSelectFilter = (itemText: string, inputValue: string) => boolean;
+export type SkdxMultiSelectFilter = (itemText: string, inputValue: string) => boolean | number;
+/** Detail for `value-change` events; includes old/new values, reason, and changes. */
+export interface SkdxMultiSelectValueChangeDetail {
+    /** New selection in selection order. */
+    value: string[];
+    /** Previous selection or null if none. */
+    previousValue: string[] | null;
+    /** Why the change occurred. */
+    reason: 'keyboard' | 'pointer' | 'programmatic';
+    /** Values added to the selection. */
+    added: string[];
+    /** Values removed from the selection. */
+    removed: string[];
+}
+declare const SkdxMultiSelect_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
+    formAssociated: 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.
+ * `<skdx-multi-select>` — the Web Components implementation of `@skdx/shared`'s `multiSelectContract`: a `role="combobox"` input with virtual focus over a multi-selectable listbox, plus a tag strip with one removable tag per selected value.
  *
- * **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.
+ * The root owns the selection, draft text, and popup state, and hands them to every `<skdx-multi-select-*>` part via `closest('skdx-multi-select')`. It renders no box of its own (`display: contents`) — the field wrapping the tags and input is yours to lay out.
  *
- * `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.
+ * `close-on-select` is off by default, since picking several things should not cost a reopening per pick. Once `max` is reached, unselected options go `aria-disabled` rather than swallowing clicks. Form-associated via `ElementInternals`: with a `name`, the selection publishes as repeated `name=value` `FormData` entries.
  *
  * @example
  * ```html
@@ -62,187 +67,213 @@ export type SkdxMultiSelectFilter = (itemText: string, inputValue: string) => bo
  * </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.
+ * @fires value-change - Fires whenever the selection changes, carrying the new and previous selection, the reason, and which values were added or removed.
+ * @fires input-value-change - Fires with new draft text on every keystroke, and empty string when selection clears it.
+ * @fires open-change - Fires with the new open state when popup opens or closes.
+ * @fires open-change-complete - Fires once the popup animation completes.
+ *
+ * @slot option - Per-option content for the derived anatomy, addressed by `data-value` — this package's form of the `renderOption` hook the other four ports take as a function. Stamped into the matching `<skdx-multi-select-item>` in place of its plain label text.
+ * @slot tag - Per-value content for the derived tag strip, addressed by `data-value` — the `renderTag` hook's form here. Stamped into the matching `<skdx-multi-select-tag>` before its remove button.
  */
-export declare class SkdxMultiSelect extends LitElement {
+export declare class SkdxMultiSelect extends SkdxMultiSelect_base {
     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.
+     * Selected values, in selection order; for controlled usage.
      * @default [] — nothing selected, so no tags are rendered.
      */
     value: string[];
     /**
-     * Initially selected values, applied once on connect and only if `value` was
-     * not authored.
+     * Initially selected values for uncontrolled usage.
      * @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.
+     * Draft text in input for controlled usage; narrows option list.
+     * @default '' — an empty field, so the option list starts unfiltered.
      */
     inputValue: string;
     /**
-     * Initial draft text, applied once on connect and only if `input-value` was
-     * not authored.
+     * Initial draft text for uncontrolled usage.
      * @default '' — the field starts empty.
      */
     defaultInputValue: string;
     /**
-     * Whether the option popup is open. Listen for `open-change`.
+     * Whether popup is open for controlled usage.
      * @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.
+     * Initial open state for uncontrolled usage.
      * @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.
+     * Largest number of values selectable. Once reached, unselected options go aria-disabled; selected ones stay removable.
      * @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.
+     * Close the popup after each selection instead of staying open.
+     * @default false — the popup stays open, so picking five things costs five clicks.
      */
     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.
+     * Whether Control+A selects every enabled option while the popup is open.
+     * @default true
+     */
+    allowSelectAll: boolean;
+    /**
+     * Whether the option list is in flight; suppresses the selection-count announcement until options arrive.
+     * @default false
+     */
+    loading: boolean;
+    /**
+     * Predicate deciding which items survive the current draft text. Returns a boolean to filter, or a number to filter and rank (0 excludes, positive keeps).
      * @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.
+     * Flat or grouped option data to render tag list, input, Clear button, and listbox automatically, instead of hand composing parts. Ignored under full manual composition.
+     * @default undefined — no anatomy is derived; author the compound parts by hand.
+     */
+    options?: SkdxOptionsInput;
+    /**
+     * Placeholder for the derived MultiSelectInput. Only read while options is deriving the anatomy.
+     * @default undefined — no placeholder is derived.
+     */
+    placeholder?: string;
+    /**
+     * Whether the derived anatomy renders a Clear button that empties the selection and draft text in one action.
+     * @default false
+     */
+    clearable: boolean;
+    /**
+     * Blocks all interaction: input is disabled, tags cannot be removed, popup never opens.
      * @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.
+     * Shows selection but blocks changes — input stays focusable, tags not removable, no option can toggle.
      * @default false
      */
     readOnly: boolean;
     /**
-     * Marks the field invalid, exposed as `aria-invalid`/`data-invalid` on
-     * `<skdx-multi-select-input>`.
+     * Marks the field invalid, exposed as aria-invalid on the 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.
+     * Form field name. One hidden control per selected value produces repeated name=value entries like a native <select multiple>; draft text never submits.
+     * @default undefined — the multi-select submits nothing.
+     */
+    name?: string;
+    /**
+     * Marks the multi-select required: empty selection reports valueMissing. Meaningful only with name.
+     * @default false
+     */
+    required: boolean;
+    /**
+     * Id of the <form> the multi-select submits into, so it can live outside its owning form.
+     * @default undefined — the multi-select submits into its nearest ancestor form.
+     */
+    formId?: string;
+    /**
+     * Formats the message announced after each selection change. Without this, screen-reader users get no confirmation that anything happened. Return empty string to announce nothing. Counts *selected* options, not rendered options.
      * @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`. */
+    /** ID for the list and input's aria-controls. */
+    listId: string;
+    /** Virtual focus ID or null. */
     activeId: string | null;
-    /** @internal The `<skdx-multi-select-input>` descendant — the floating-ui anchor for the popup. */
+    /** @internal The floating-ui anchor element. */
     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.
+     * @internal The mounted popup content element.
      */
     contentEl: HTMLElement | null;
     private seeded;
     private hasUpdatedOnce;
     private teardownOpenChangeComplete?;
-    /** Whether the selection has reached `max`, so unselected options are inert. */
+    /** State snapshot for form reset. */
+    private initialValue?;
+    private initialInputValue?;
+    /** Whether selection has reached max. */
     get atMax(): boolean;
-    /** Whether the root refuses every edit — `disabled` or `readOnly`. */
+    /** Whether all edits are blocked. */
     get locked(): boolean;
-    /** Whether one option value is currently selected. */
+    /** @internal Check if a value is 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. */
+    /**
+     * @internal Set selection and dispatch value-change with reason and diff.
+     */
+    setValue(value: string[], reason?: SkdxMultiSelectValueChangeDetail['reason']): void;
+    /** @internal Dispatch value-change with unified payload. */
+    private emitValueChange;
+    /** @internal Set input text and dispatch input-value-change. */
     setInputValue(value: string): void;
-    /** Sets `open` and dispatches `open-change`. Clears the virtual highlight on close; an unchanged state is a no-op. */
+    /** @internal Set open state and dispatch open-change. */
     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.
+     * @internal Toggle option in selection, honouring max and closeOnSelect.
      */
-    toggle(value: string): void;
-    /** Removes one value from the selection — what a tag's remove button and Backspace both call. */
+    toggle(value: string, reason?: SkdxMultiSelectValueChangeDetail['reason']): void;
+    /** Range start for Shift+Space selection. */
+    private rangeAnchor;
+    /** Add values to selection; never deselects. Stops at max. */
+    private sweepSelect;
+    /** @internal Shift+Space: select range between anchor and highlighted option. */
+    selectRange(): void;
+    /** @internal Control+Shift+Home/End: sweep from highlight to list edge. */
+    selectToEdge(edge: 'first' | 'last'): void;
+    /** @internal Control+A: select all or clear if all selected. */
+    selectAllOrClear(): void;
+    /** @internal Remove value from selection. */
     deselect(value: string): void;
-    /** Removes the last selected value; Backspace on an empty input. */
+    /** @internal Clear selection and input text. */
+    clear(): void;
+    /** @internal Remove last selected value (Backspace on 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
-     */
+    /** @internal Check if item text passes current filter. */
     matchesFilter(itemText: string): boolean;
-    /** The registered text for a value, for a tag that declares none of its own. */
+    /** @internal Visible options, ranked by numeric filter scores. */
+    visibleOptions(): HTMLElement[];
+    /** @internal Get registered text for a value. */
     textFor(value: string): string | undefined;
-    /** Opens the popup and highlights the first or last option once it mounts. */
+    /** @internal Open popup and highlight first or last option. */
     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
-     */
+    /** @internal Set virtual focus ID. */
     setActiveId(id: string | null): void;
     private readonly itemRegistry;
-    /** @internal Called by each rendered `<skdx-multi-select-item>` so Enter can toggle it by id. */
+    /** @internal Count of visible options. */
+    get itemCount(): number;
+    /** @internal Register an option item. */
     registerItem(id: string, entry: SkdxMultiSelectItemEntry): void;
-    /** @internal Called when an item unmounts or is filtered out; a gone option can't stay highlighted. */
+    /** @internal Unregister an option item. */
     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
-     */
+    /** @internal Get registered option entry. */
     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.
-     */
+    /** Reschedule virtual focus on next visible option. */
     private scheduleReseed;
+    private reorderFrame?;
+    /** Re-apply score-based order after registration batch. */
+    private scheduleReorder;
     private emit;
     private notify;
+    /** Options ref for anatomy generation. */
+    private _anatomyOptionsRef?;
+    /** Clearable flag for anatomy generation. */
+    private _anatomyClearable;
     connectedCallback(): void;
+    /** Generate anatomy if no consumer-authored parts. */
+    private readonly fillAnatomy;
     disconnectedCallback(): void;
     protected updated(changed: Map<string, unknown>): void;
+    /** Sync form value and validity via ElementInternals. */
+    private syncFormState;
+    /** Restore initial selection and input text. */
+    formResetCallback(): void;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {
@@ -250,3 +281,4 @@ declare global {
         'skdx-multi-select': SkdxMultiSelect;
     }
 }
+export {};

package/dist/multi-select/MultiSelect.js

@@ -1,5 +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`
+var v=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var r=(o,u,e,t)=>{for(var i=t>1?void 0:t?g(u,e):u,n=o.length-1,a;n>=0;n--)(a=o[n])&&(i=(t?a(u,e,i):a(i))||i);return t&&i&&v(u,e,i),i};import{css as y,html as b,LitElement as I}from"lit";import{property as l}from"lit/decorators.js";import{hasAuthoredParts as V,hasGeneratedContent as E}from"../internal/authored.js";import{customElement as O}from"../internal/define.js";import{FormAssociated as C}from"../internal/form-associated.js";import{nextId as A}from"../internal/ids.js";import{notifyOpenChangeComplete as x}from"../internal/open-change-complete.js";import{filterKeeps as F,sortByScore as T}from"../internal/scored-filter.js";import{announce as R}from"../utils/live-announcer.js";import{fillMultiSelectAnatomy as L,MULTI_SELECT_ANATOMY_GENERATED as d,MULTI_SELECT_RENDER_SLOTS as w,refreshMultiSelectAnatomyText as _,syncMultiSelectTags as p}from"./MultiSelectAnatomy.js";var c='[role="option"]:not([data-disabled])',f="skdx-multi-select-internal-update";function k(o,u){let e=o.querySelector('[data-part="viewport"]')??o;if(e===u||!e.contains(u))return;let t=e.getBoundingClientRect(),i=u.getBoundingClientRect();e.scrollTop+=i.top-t.top-(t.height-i.height)/2}function S(o){return o===0?"none selected":`${o} selected`}function B(o,u){return o.length===u.length&&o.every((e,t)=>e===u[t])}var s=class extends C(I){constructor(){super(...arguments);this.value=[];this.defaultValue=[];this.inputValue="";this.defaultInputValue="";this.open=!1;this.defaultOpen=!1;this.closeOnSelect=!1;this.allowSelectAll=!0;this.loading=!1;this.clearable=!1;this.disabled=!1;this.readOnly=!1;this.invalid=!1;this.required=!1;this.getSelectionLabel=S;this.listId=A("skdx-multi-select-list");this.activeId=null;this.inputHost=null;this.contentEl=null;this.seeded=!1;this.hasUpdatedOnce=!1;this.rangeAnchor=null;this.itemRegistry=new Map;this._anatomyClearable=!1;this.fillAnatomy=()=>{if(V(this,d,w)){this._anatomyOptionsRef=void 0;return}this.options!==this._anatomyOptionsRef||this.clearable!==this._anatomyClearable||!E(this,d)?(this._anatomyClearable=this.clearable,this._anatomyOptionsRef=this.options,L(this),p(this)):_(this)}}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,t="programmatic"){if(B(this.value,e))return;let i=this.value;this.value=e,this.emitValueChange(e,i,t)}emitValueChange(e,t,i){let n={value:e,previousValue:t.length===0?null:t,reason:i,added:e.filter(a=>!t.includes(a)),removed:t.filter(a=>!e.includes(a))};this.dispatchEvent(new CustomEvent("value-change",{detail:n,bubbles:!0,composed:!0})),this.notify()}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,t="programmatic"){if(this.locked)return;this.rangeAnchor=e;let i=this.value,n=i;i.includes(e)?n=i.filter(a=>a!==e):(this.max===void 0||i.length<this.max)&&(n=[...i,e]),this.setValue(n,t),this.setInputValue(""),this.closeOnSelect&&this.setOpen(!1)}sweepSelect(e){let t=[...this.value];for(let i of e)if(!t.includes(i)){if(this.max!==void 0&&t.length>=this.max)break;t.push(i)}this.setValue(t,"keyboard"),this.setInputValue(""),this.closeOnSelect&&this.setOpen(!1)}selectRange(){if(this.locked)return;let e=this.visibleOptions(),t=e.findIndex(h=>h.id===this.activeId);if(t===-1)return;let i=e.findIndex(h=>h.dataset.value===this.rangeAnchor),n=i===-1?t:i,[a,m]=n<=t?[n,t]:[t,n];this.sweepSelect(e.slice(a,m+1).map(h=>h.dataset.value??""))}selectToEdge(e){if(this.locked)return;let t=this.visibleOptions(),i=t.findIndex(a=>a.id===this.activeId);if(i===-1)return;let n=e==="first"?t.slice(0,i+1):t.slice(i);this.sweepSelect(n.map(a=>a.dataset.value??""))}selectAllOrClear(){if(this.locked)return;let t=this.visibleOptions().map(n=>n.dataset.value??"");t.length>0&&t.every(n=>this.value.includes(n))?(this.setValue(this.value.filter(n=>!t.includes(n)),"keyboard"),this.setInputValue(""),this.closeOnSelect&&this.setOpen(!1)):this.sweepSelect(t)}deselect(e){this.locked||!this.value.includes(e)||this.setValue(this.value.filter(t=>t!==e),"pointer")}clear(){this.locked||(this.setValue([],"pointer"),this.setInputValue(""))}removeLast(){this.locked||this.value.length===0||this.setValue(this.value.slice(0,-1),"keyboard")}matchesFilter(e){return this.filter===void 0||F(this.filter(e,this.inputValue))}visibleOptions(){let e=this.filter;return e===void 0?Array.from(this.querySelectorAll(c)):T(this,c,t=>{let i=this.itemRegistry.get(t);if(!i)return null;let n=e(i.text,this.inputValue);return typeof n=="number"?n:null})}textFor(e){for(let t of this.itemRegistry.values())if(t.value===e)return t.text}openWithHighlight(e){this.setOpen(!0),requestAnimationFrame(()=>{let t=this.visibleOptions();if(t.length===0)return;let i=e==="last"?t[t.length-1]:t[0];this.setActiveId(i.id),this.contentEl&&k(this.contentEl,i)})}setActiveId(e){this.activeId=e,this.notify()}get itemCount(){return this.itemRegistry.size}registerItem(e,t){this.itemRegistry.set(e,t),this.scheduleReorder()}unregisterItem(e){this.itemRegistry.delete(e),this.activeId===e&&this.scheduleReseed(),this.scheduleReorder()}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=this.visibleOptions();t.some(i=>i.id===e)||this.setActiveId(t[0]?.id??null)}))}scheduleReorder(){this.reorderFrame===void 0&&(this.reorderFrame=requestAnimationFrame(()=>{this.reorderFrame=void 0,this.visibleOptions()}))}emit(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0})),this.notify()}notify(){this.dispatchEvent(new CustomEvent(f,{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),this.initialValue=[...this.value],this.initialInputValue=this.inputValue);let e=this.querySelector("skdx-multi-select-list")?.id;e&&(this.listId=e),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.reseedFrame!==void 0&&cancelAnimationFrame(this.reseedFrame),this.reseedFrame=void 0,this.reorderFrame!==void 0&&cancelAnimationFrame(this.reorderFrame),this.reorderFrame=void 0,this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}updated(e){let t=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,this.fillAnatomy(),e.has("value")&&p(this),e.has("value")&&!t&&!this.loading&&R(this.getSelectionLabel(this.value.length)),(e.has("value")||e.has("name")||e.has("required"))&&this.syncFormState(),e.size>0&&this.dispatchEvent(new CustomEvent(f,{bubbles:!0,composed:!0})),e.has("open")&&!t&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=x(()=>this.contentEl,this.open,i=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:i,bubbles:!0,composed:!0}))))}syncFormState(){this.setFormValue(this.multiFormValue(this.value)),this.setValueMissing(this.required&&this.value.length===0,"Please select an item in the list.",this.inputHost)}formResetCallback(){this.value=this.initialValue?[...this.initialValue]:[],this.inputValue=this.initialInputValue??"",this.rangeAnchor=null}render(){return b`<slot @slotchange=${this.fillAnatomy}></slot>`}};s.styles=y`
     :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};
+  `,r([l({type:Array})],s.prototype,"value",2),r([l({type:Array,attribute:"default-value"})],s.prototype,"defaultValue",2),r([l({type:String,attribute:"input-value"})],s.prototype,"inputValue",2),r([l({type:String,attribute:"default-input-value"})],s.prototype,"defaultInputValue",2),r([l({type:Boolean,reflect:!0})],s.prototype,"open",2),r([l({type:Boolean,attribute:"default-open"})],s.prototype,"defaultOpen",2),r([l({type:Number})],s.prototype,"max",2),r([l({type:Boolean,attribute:"close-on-select",reflect:!0})],s.prototype,"closeOnSelect",2),r([l({type:Boolean,attribute:"allow-select-all"})],s.prototype,"allowSelectAll",2),r([l({type:Boolean,reflect:!0})],s.prototype,"loading",2),r([l({attribute:!1})],s.prototype,"filter",2),r([l({attribute:!1})],s.prototype,"options",2),r([l({type:String})],s.prototype,"placeholder",2),r([l({type:Boolean,reflect:!0})],s.prototype,"clearable",2),r([l({type:Boolean,reflect:!0})],s.prototype,"disabled",2),r([l({type:Boolean,attribute:"read-only",reflect:!0})],s.prototype,"readOnly",2),r([l({type:Boolean,reflect:!0})],s.prototype,"invalid",2),r([l({type:String,reflect:!0})],s.prototype,"name",2),r([l({type:Boolean,reflect:!0})],s.prototype,"required",2),r([l({type:String,attribute:"form",reflect:!0})],s.prototype,"formId",2),r([l({attribute:!1})],s.prototype,"getSelectionLabel",2),s=r([O("skdx-multi-select")],s);export{f as MULTI_SELECT_UPDATE_EVENT,c as OPTION_SELECTOR,s as SkdxMultiSelect,S as defaultGetSelectionLabel,k as scrollIntoPopup};

package/dist/multi-select/MultiSelectAnatomy.cjs

@@ -0,0 +1 @@
+"use strict";var d=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var g=(t,e)=>{for(var s in e)d(t,s,{get:e[s],enumerable:!0})},S=(t,e,s,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of A(e))!E.call(t,i)&&i!==s&&d(t,i,{get:()=>e[i],enumerable:!(n=b(e,i))||n.enumerable});return t};var f=t=>S(d({},"__esModule",{value:!0}),t);var M={};g(M,{MULTI_SELECT_ANATOMY_GENERATED:()=>m,MULTI_SELECT_RENDER_SLOTS:()=>k,fillMultiSelectAnatomy:()=>L,refreshMultiSelectAnatomyText:()=>C,syncMultiSelectTags:()=>y});module.exports=f(M);var r=require("../internal/host-attributes.cjs"),o=require("../internal/options.cjs"),_=require("./MultiSelectTagList.cjs"),v=require("./MultiSelectTag.cjs"),O=require("./MultiSelectTagRemove.cjs"),R=require("./MultiSelectInput.cjs"),N=require("./MultiSelectClear.cjs"),D=require("./MultiSelectPortal.cjs"),H=require("./MultiSelectContent.cjs"),U=require("./MultiSelectList.cjs"),q=require("./MultiSelectItem.cjs"),F=require("./MultiSelectGroup.cjs"),I=require("./MultiSelectGroupLabel.cjs"),$=require("./MultiSelectEmpty.cjs"),m="data-skdx-multi-select-generated",k=["option","tag"],h="Clear selection";function L(t){let e=(0,o.renderSlotContent)(t,"option");(0,o.renderSlotContent)(t,"tag");let s=(0,r.claimHostAttributes)(t),n=(0,r.resolveHostLabel)(s,t.placeholder),i=document.createElement("skdx-multi-select-tag-list");i.setAttribute(m,""),(0,r.setOptionalAttribute)(i,"aria-label",n&&`${n} \u2014 selected`);let l=document.createElement("skdx-multi-select-input");l.setAttribute(m,""),t.placeholder&&l.setAttribute("placeholder",t.placeholder),(0,r.applyHostAttributes)(l,s,["aria-label"]),(0,r.setOptionalAttribute)(l,"aria-label",n);let c=document.createElement("skdx-multi-select-list");(0,r.setOptionalAttribute)(c,"aria-label",n),c.append(...(0,o.buildOptionElements)(t.options??[],{item:"skdx-multi-select-item",group:"skdx-multi-select-group",groupLabel:"skdx-multi-select-group-label",itemContent:e}));let u=document.createElement("skdx-multi-select-empty");u.textContent="No results found";let a=document.createElement("skdx-multi-select-content");a.setAttribute(m,""),a.append(c,u);let x=[i,l,a];if(t.clearable){let p=document.createElement("skdx-multi-select-clear");p.setAttribute(m,""),p.setAttribute("aria-label",h),p.textContent="\xD7",x.push(p)}t.replaceChildren(...x)}function C(t){let e=t.querySelector(":scope > skdx-multi-select-input");e&&(t.placeholder?e.setAttribute("placeholder",t.placeholder):e.removeAttribute("placeholder"))}function y(t){let e=t.querySelector(`:scope > skdx-multi-select-tag-list[${m}]`);if(!e)return;let s=Array.from(e.children,l=>l.getAttribute("value")),n=t.value;if(s.length===n.length&&s.every((l,c)=>l===n[c]))return;let i=(0,o.renderSlotContent)(t,"tag");e.replaceChildren(...n.map(l=>{let c=document.createElement("skdx-multi-select-tag");c.setAttribute("value",l);let u=i.get(l);u?c.append((0,o.stampRenderSlot)(u)):c.textContent=(0,o.findOptionLabel)(t.options,l)??t.textFor(l)??l;let a=document.createElement("skdx-multi-select-tag-remove");return a.textContent="\xD7",c.append(a),c}))}0&&(module.exports={MULTI_SELECT_ANATOMY_GENERATED,MULTI_SELECT_RENDER_SLOTS,fillMultiSelectAnatomy,refreshMultiSelectAnatomyText,syncMultiSelectTags});

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

@@ -0,0 +1,38 @@
+import type { SkdxMultiSelect } from './MultiSelect.cjs';
+import './MultiSelectTagList.cjs';
+import './MultiSelectTag.cjs';
+import './MultiSelectTagRemove.cjs';
+import './MultiSelectInput.cjs';
+import './MultiSelectClear.cjs';
+import './MultiSelectPortal.cjs';
+import './MultiSelectContent.cjs';
+import './MultiSelectList.cjs';
+import './MultiSelectItem.cjs';
+import './MultiSelectGroup.cjs';
+import './MultiSelectGroupLabel.cjs';
+import './MultiSelectEmpty.cjs';
+/** @internal Marks a direct child of `<skdx-multi-select>` this module generated. */
+export declare const MULTI_SELECT_ANATOMY_GENERATED = "data-skdx-multi-select-generated";
+/** @internal The named slots the derived anatomy consumes — see `renderSlotContent`. */
+export declare const MULTI_SELECT_RENDER_SLOTS: readonly ["option", "tag"];
+/**
+ * Builds the canonical anatomy: TagList, Input, and popup List of Items.
+ * Tags are synced separately via {@link syncMultiSelectTags} because they
+ * change more often. Slot content is claimed from light DOM; host attributes
+ * move onto the Input; resolved name labels the Input, List, and TagList.
+ * @internal
+ */
+export declare function fillMultiSelectAnatomy(root: SkdxMultiSelect): void;
+/**
+ * Refreshes the generated Input's `placeholder` without rebuilding the anatomy.
+ * `aria-label` is read once on connect.
+ * @internal
+ */
+export declare function refreshMultiSelectAnatomyText(root: SkdxMultiSelect): void;
+/**
+ * Rebuilds the generated TagList from `root.value`, separate from
+ * {@link fillMultiSelectAnatomy} because selection changes far more often than
+ * options. A no-op when value shape hasn't changed or anatomy wasn't generated.
+ * @internal
+ */
+export declare function syncMultiSelectTags(root: SkdxMultiSelect): void;

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

@@ -0,0 +1,38 @@
+import type { SkdxMultiSelect } from './MultiSelect.js';
+import './MultiSelectTagList.js';
+import './MultiSelectTag.js';
+import './MultiSelectTagRemove.js';
+import './MultiSelectInput.js';
+import './MultiSelectClear.js';
+import './MultiSelectPortal.js';
+import './MultiSelectContent.js';
+import './MultiSelectList.js';
+import './MultiSelectItem.js';
+import './MultiSelectGroup.js';
+import './MultiSelectGroupLabel.js';
+import './MultiSelectEmpty.js';
+/** @internal Marks a direct child of `<skdx-multi-select>` this module generated. */
+export declare const MULTI_SELECT_ANATOMY_GENERATED = "data-skdx-multi-select-generated";
+/** @internal The named slots the derived anatomy consumes — see `renderSlotContent`. */
+export declare const MULTI_SELECT_RENDER_SLOTS: readonly ["option", "tag"];
+/**
+ * Builds the canonical anatomy: TagList, Input, and popup List of Items.
+ * Tags are synced separately via {@link syncMultiSelectTags} because they
+ * change more often. Slot content is claimed from light DOM; host attributes
+ * move onto the Input; resolved name labels the Input, List, and TagList.
+ * @internal
+ */
+export declare function fillMultiSelectAnatomy(root: SkdxMultiSelect): void;
+/**
+ * Refreshes the generated Input's `placeholder` without rebuilding the anatomy.
+ * `aria-label` is read once on connect.
+ * @internal
+ */
+export declare function refreshMultiSelectAnatomyText(root: SkdxMultiSelect): void;
+/**
+ * Rebuilds the generated TagList from `root.value`, separate from
+ * {@link fillMultiSelectAnatomy} because selection changes far more often than
+ * options. A no-op when value shape hasn't changed or anatomy wasn't generated.
+ * @internal
+ */
+export declare function syncMultiSelectTags(root: SkdxMultiSelect): void;

package/dist/multi-select/MultiSelectAnatomy.js

@@ -0,0 +1 @@
+import{applyHostAttributes as x,claimHostAttributes as b,resolveHostLabel as A,setOptionalAttribute as u}from"../internal/host-attributes.js";import{buildOptionElements as E,findOptionLabel as g,renderSlotContent as p,stampRenderSlot as S}from"../internal/options.js";import"./MultiSelectTagList.js";import"./MultiSelectTag.js";import"./MultiSelectTagRemove.js";import"./MultiSelectInput.js";import"./MultiSelectClear.js";import"./MultiSelectPortal.js";import"./MultiSelectContent.js";import"./MultiSelectList.js";import"./MultiSelectItem.js";import"./MultiSelectGroup.js";import"./MultiSelectGroupLabel.js";import"./MultiSelectEmpty.js";var a="data-skdx-multi-select-generated",U=["option","tag"],f="Clear selection";function q(t){let n=p(t,"option");p(t,"tag");let s=b(t),i=A(s,t.placeholder),r=document.createElement("skdx-multi-select-tag-list");r.setAttribute(a,""),u(r,"aria-label",i&&`${i} \u2014 selected`);let e=document.createElement("skdx-multi-select-input");e.setAttribute(a,""),t.placeholder&&e.setAttribute("placeholder",t.placeholder),x(e,s,["aria-label"]),u(e,"aria-label",i);let l=document.createElement("skdx-multi-select-list");u(l,"aria-label",i),l.append(...E(t.options??[],{item:"skdx-multi-select-item",group:"skdx-multi-select-group",groupLabel:"skdx-multi-select-group-label",itemContent:n}));let o=document.createElement("skdx-multi-select-empty");o.textContent="No results found";let c=document.createElement("skdx-multi-select-content");c.setAttribute(a,""),c.append(l,o);let d=[r,e,c];if(t.clearable){let m=document.createElement("skdx-multi-select-clear");m.setAttribute(a,""),m.setAttribute("aria-label",f),m.textContent="\xD7",d.push(m)}t.replaceChildren(...d)}function F(t){let n=t.querySelector(":scope > skdx-multi-select-input");n&&(t.placeholder?n.setAttribute("placeholder",t.placeholder):n.removeAttribute("placeholder"))}function I(t){let n=t.querySelector(`:scope > skdx-multi-select-tag-list[${a}]`);if(!n)return;let s=Array.from(n.children,e=>e.getAttribute("value")),i=t.value;if(s.length===i.length&&s.every((e,l)=>e===i[l]))return;let r=p(t,"tag");n.replaceChildren(...i.map(e=>{let l=document.createElement("skdx-multi-select-tag");l.setAttribute("value",e);let o=r.get(e);o?l.append(S(o)):l.textContent=g(t.options,e)??t.textFor(e)??e;let c=document.createElement("skdx-multi-select-tag-remove");return c.textContent="\xD7",l.append(c),l}))}export{a as MULTI_SELECT_ANATOMY_GENERATED,U as MULTI_SELECT_RENDER_SLOTS,q as fillMultiSelectAnatomy,F as refreshMultiSelectAnatomyText,I as syncMultiSelectTags};

package/dist/multi-select/MultiSelectClear.cjs

@@ -0,0 +1,18 @@
+"use strict";var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var E=(o,t)=>{for(var s in t)a(o,s,{get:t[s],enumerable:!0})},k=(o,t,s,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of v(t))!f.call(o,e)&&e!==s&&a(o,e,{get:()=>t[e],enumerable:!(r=h(t,e))||r.enumerable});return o};var y=o=>k(a({},"__esModule",{value:!0}),o),m=(o,t,s,r)=>{for(var e=r>1?void 0:r?h(t,s):t,n=o.length-1,d;n>=0;n--)(d=o[n])&&(e=(r?d(t,s,e):d(e))||e);return r&&e&&a(t,s,e),e};var L={};E(L,{SkdxMultiSelectClear:()=>i});module.exports=y(L);var l=require("lit"),p=require("../internal/aria-label.cjs"),u=require("../internal/closest.cjs"),b=require("../internal/define.cjs"),c=require("./MultiSelect.cjs");var i=class extends l.LitElement{constructor(){super(...arguments);this.root=null;this.label=null;this.onRootUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.label??(this.label=(0,p.takeHostAriaLabel)(this)),this.root=(0,u.closestThroughPortal)(this,"skdx-multi-select"),this.root?.addEventListener(c.MULTI_SELECT_UPDATE_EVENT,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(c.MULTI_SELECT_UPDATE_EVENT,this.onRootUpdate),super.disconnectedCallback()}render(){if(!this.root)return l.html`<slot></slot>`;let s=this.root.value.length===0&&this.root.inputValue==="",r=this.root.disabled||this.root.readOnly||s;return l.html`
+      <button
+        type="button"
+        class="skdx-multi-select__clear"
+        data-part="clear"
+        aria-label="${this.label??l.nothing}"
+        ?disabled="${r}"
+        data-disabled="${this.root.disabled?"":l.nothing}"
+        data-readonly="${this.root.readOnly?"":l.nothing}"
+        @click="${()=>{this.root&&(this.root.clear(),this.root.inputHost?.focus?.())}}"
+      >
+        <slot></slot>
+      </button>
+    `}};i.styles=l.css`
+    :host {
+      display: inline-flex;
+    }
+  `,i=m([(0,b.customElement)("skdx-multi-select-clear","multi-select","clear")],i);0&&(module.exports={SkdxMultiSelectClear});

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

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * Optional button that empties a `<skdx-multi-select>` in one press — the whole selection *and* the draft text — and hands focus back to `<skdx-multi-select-input>`. Without it the only way out of a large selection is removing every tag one at a time.
+ *
+ * Its own tab stop, and a plain `<button type="button">` so it never submits the surrounding form. Disabled while there is nothing to clear, and while the root is `disabled` or `readOnly`.
+ *
+ * Give it an `aria-label`: a "✕" glyph is not an accessible name. It is moved onto the inner `<button>`, where the role that can carry a name lives.
+ */
+export declare class SkdxMultiSelectClear extends LitElement {
+    static styles: import("lit").CSSResult;
+    private root;
+    private label;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-multi-select-clear': SkdxMultiSelectClear;
+    }
+}

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

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+/**
+ * Optional button that empties a `<skdx-multi-select>` in one press — the whole selection *and* the draft text — and hands focus back to `<skdx-multi-select-input>`. Without it the only way out of a large selection is removing every tag one at a time.
+ *
+ * Its own tab stop, and a plain `<button type="button">` so it never submits the surrounding form. Disabled while there is nothing to clear, and while the root is `disabled` or `readOnly`.
+ *
+ * Give it an `aria-label`: a "✕" glyph is not an accessible name. It is moved onto the inner `<button>`, where the role that can carry a name lives.
+ */
+export declare class SkdxMultiSelectClear extends LitElement {
+    static styles: import("lit").CSSResult;
+    private root;
+    private label;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-multi-select-clear': SkdxMultiSelectClear;
+    }
+}