@skdx/web-components 0.28.0 → 0.30.0

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

@@ -1,92 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * `<skdx-multi-select-input>` — the text field an `<skdx-multi-select>` is driven from, and the floating-ui anchor the option popup positions against. Renders an `<input type="text" role="combobox">` with `aria-expanded`, `aria-controls` pointing at `<skdx-multi-select-list>`, `aria-autocomplete="list"`, `aria-activedescendant` tracking the virtually-focused option, and `aria-invalid`/`aria-readonly` plus their `data-*` twins from the root.
- *
- * Real DOM focus never leaves it while the popup is open — Arrow Down/Up move a *virtual* highlight, and Enter toggles the highlighted option without closing (unless the root sets `close-on-select`). **Backspace on an empty field removes the last tag**; with text in the field it does the ordinary thing and deletes a character, because it must never eat a character the user is still editing.
- *
- * The selection-extending keys, all of them **only while the popup is open**:
- *
- * | Key | Effect |
- * | --- | --- |
- * | Shift+Arrow Down / Up | moves the highlight one enabled option *and* toggles it — nothing at all when the highlight cannot move, which is also what the cap produces |
- * | Shift+Space | selects every enabled option between the last one toggled on its own and the highlighted one |
- * | Home / End | moves the highlight to the first / last enabled option |
- *
- * Closed, none of the three is intercepted: Home and End move the caret and Space types a space, because this really is an editable text field and swallowing its own keys is how a keyboard user gets stuck in it. Every keyboard move of the highlight scrolls the option into view, since virtual focus scrolls nothing on its own.
- *
- * Give it an accessible name — an `aria-label` on this tag is moved onto the inner `<input>`, where the `combobox` role actually lives.
- *
- * @example
- * ```html
- * <skdx-multi-select-input aria-label="Skills" placeholder="Add a skill…"></skdx-multi-select-input>
- * ```
- *
- * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow root), for the same reason `<skdx-command-input>` and `<skdx-label>` do: `aria-controls` and `aria-activedescendant` are IDREFs, and an IDREF resolves only within its own tree. `<skdx-multi-select-list>` and every `<skdx-multi-select-item>` are the consumer's own light-DOM markup, so from inside a shadow root neither attribute could ever resolve — they were inert, and the highlighted option was never announced. Moving them onto the host is not an option here: the element the attributes belong on is the one that takes focus.
- *
- * @csspart input - The native `<input>` element. **`::part(input)` does not reach it.**
- * This element renders into the light DOM (see `createRenderRoot` below) and `::part()` only matches inside a shadow root, so the `part` attribute is inert here. It is kept so the name matches the shadow-DOM components and the styling-hooks contract. Style it as an ordinary descendant instead: `skdx-multi-select-input > input { … }`.
- */
-export declare class SkdxMultiSelectInput extends LitElement {
-    /** Light DOM, for the IDREF reasons in the class docblock. */
-    createRenderRoot(): this;
-    /** Placeholder for the derived MultiSelectInput. Only read while options is deriving the anatomy. @default '' — no placeholder. */
-    placeholder: string;
-    private root;
-    private label;
-    private readonly onRootUpdate;
-    connectedCallback(): void;
-    /**
-     * Reaches through to the native `<input>`, which is where the `combobox`
-     * role and the real focus live. The options call `inputHost.focus()` to put
-     * focus back after a click; without this override that would land on the
-     * (unfocusable) host and do nothing.
-     */
-    focus(options?: FocusOptions): void;
-    disconnectedCallback(): void;
-    /** Every option the highlight may land on, ranked by score when the root's `filter` scores numerically, DOM order otherwise. */
-    private options;
-    /**
-     * Moves virtual focus onto `option`, brings it into view, and reports the id
-     * it landed on.
-     *
-     * The explicit scroll is not optional: real DOM focus scrolls its target into
-     * view for free and virtual focus scrolls nothing at all, so a keyboard user
-     * extending a selection would otherwise be acting on options they cannot see —
-     * and the highlight is this component's only focus indicator.
-     * `block: 'nearest'` scrolls by the minimum needed and does nothing when the
-     * option is already visible. Optional-called because jsdom leaves
-     * `scrollIntoView` undefined.
-     *
-     * Only safe here, on a *move*: by the time the user presses a key the popup
-     * is positioned. The highlight set while the popup is opening uses the
-     * popup-local helper in `MultiSelect.ts` instead — see its docblock.
-     *
-     * @returns the id now highlighted, or `null` when there was nothing to move
-     * to. {@link extendSelection} needs it, because reading `root.activeId` back
-     * would report the option it just left.
-     */
-    private activate;
-    /** Moves the *virtual* highlight by one option, clamped at both ends. Real focus never moves. */
-    private moveActive;
-    /**
-     * Shift+Arrow: moves the highlight one option and toggles what it lands on,
-     * which is how a keyboard user grows a selection without stopping to press
-     * Enter at every step.
-     *
-     * Nothing toggles when the highlight did not actually move: navigation clamps
-     * at both ends, and a gesture that means "move *and* toggle" must not turn
-     * into "toggle the same option again" once it runs out of list. That also
-     * covers the cap, where every unselected option is already `aria-disabled`
-     * and therefore out of the navigation selector.
-     */
-    private extendSelection;
-    private readonly handleInput;
-    private readonly handleBlur;
-    private readonly handleKeyDown;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'skdx-multi-select-input': SkdxMultiSelectInput;
-    }
-}

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

@@ -1,92 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * `<skdx-multi-select-input>` — the text field an `<skdx-multi-select>` is driven from, and the floating-ui anchor the option popup positions against. Renders an `<input type="text" role="combobox">` with `aria-expanded`, `aria-controls` pointing at `<skdx-multi-select-list>`, `aria-autocomplete="list"`, `aria-activedescendant` tracking the virtually-focused option, and `aria-invalid`/`aria-readonly` plus their `data-*` twins from the root.
- *
- * Real DOM focus never leaves it while the popup is open — Arrow Down/Up move a *virtual* highlight, and Enter toggles the highlighted option without closing (unless the root sets `close-on-select`). **Backspace on an empty field removes the last tag**; with text in the field it does the ordinary thing and deletes a character, because it must never eat a character the user is still editing.
- *
- * The selection-extending keys, all of them **only while the popup is open**:
- *
- * | Key | Effect |
- * | --- | --- |
- * | Shift+Arrow Down / Up | moves the highlight one enabled option *and* toggles it — nothing at all when the highlight cannot move, which is also what the cap produces |
- * | Shift+Space | selects every enabled option between the last one toggled on its own and the highlighted one |
- * | Home / End | moves the highlight to the first / last enabled option |
- *
- * Closed, none of the three is intercepted: Home and End move the caret and Space types a space, because this really is an editable text field and swallowing its own keys is how a keyboard user gets stuck in it. Every keyboard move of the highlight scrolls the option into view, since virtual focus scrolls nothing on its own.
- *
- * Give it an accessible name — an `aria-label` on this tag is moved onto the inner `<input>`, where the `combobox` role actually lives.
- *
- * @example
- * ```html
- * <skdx-multi-select-input aria-label="Skills" placeholder="Add a skill…"></skdx-multi-select-input>
- * ```
- *
- * Renders **into light DOM** (`createRenderRoot()` returns `this` — no shadow root), for the same reason `<skdx-command-input>` and `<skdx-label>` do: `aria-controls` and `aria-activedescendant` are IDREFs, and an IDREF resolves only within its own tree. `<skdx-multi-select-list>` and every `<skdx-multi-select-item>` are the consumer's own light-DOM markup, so from inside a shadow root neither attribute could ever resolve — they were inert, and the highlighted option was never announced. Moving them onto the host is not an option here: the element the attributes belong on is the one that takes focus.
- *
- * @csspart input - The native `<input>` element. **`::part(input)` does not reach it.**
- * This element renders into the light DOM (see `createRenderRoot` below) and `::part()` only matches inside a shadow root, so the `part` attribute is inert here. It is kept so the name matches the shadow-DOM components and the styling-hooks contract. Style it as an ordinary descendant instead: `skdx-multi-select-input > input { … }`.
- */
-export declare class SkdxMultiSelectInput extends LitElement {
-    /** Light DOM, for the IDREF reasons in the class docblock. */
-    createRenderRoot(): this;
-    /** Placeholder for the derived MultiSelectInput. Only read while options is deriving the anatomy. @default '' — no placeholder. */
-    placeholder: string;
-    private root;
-    private label;
-    private readonly onRootUpdate;
-    connectedCallback(): void;
-    /**
-     * Reaches through to the native `<input>`, which is where the `combobox`
-     * role and the real focus live. The options call `inputHost.focus()` to put
-     * focus back after a click; without this override that would land on the
-     * (unfocusable) host and do nothing.
-     */
-    focus(options?: FocusOptions): void;
-    disconnectedCallback(): void;
-    /** Every option the highlight may land on, ranked by score when the root's `filter` scores numerically, DOM order otherwise. */
-    private options;
-    /**
-     * Moves virtual focus onto `option`, brings it into view, and reports the id
-     * it landed on.
-     *
-     * The explicit scroll is not optional: real DOM focus scrolls its target into
-     * view for free and virtual focus scrolls nothing at all, so a keyboard user
-     * extending a selection would otherwise be acting on options they cannot see —
-     * and the highlight is this component's only focus indicator.
-     * `block: 'nearest'` scrolls by the minimum needed and does nothing when the
-     * option is already visible. Optional-called because jsdom leaves
-     * `scrollIntoView` undefined.
-     *
-     * Only safe here, on a *move*: by the time the user presses a key the popup
-     * is positioned. The highlight set while the popup is opening uses the
-     * popup-local helper in `MultiSelect.ts` instead — see its docblock.
-     *
-     * @returns the id now highlighted, or `null` when there was nothing to move
-     * to. {@link extendSelection} needs it, because reading `root.activeId` back
-     * would report the option it just left.
-     */
-    private activate;
-    /** Moves the *virtual* highlight by one option, clamped at both ends. Real focus never moves. */
-    private moveActive;
-    /**
-     * Shift+Arrow: moves the highlight one option and toggles what it lands on,
-     * which is how a keyboard user grows a selection without stopping to press
-     * Enter at every step.
-     *
-     * Nothing toggles when the highlight did not actually move: navigation clamps
-     * at both ends, and a gesture that means "move *and* toggle" must not turn
-     * into "toggle the same option again" once it runs out of list. That also
-     * covers the cap, where every unselected option is already `aria-disabled`
-     * and therefore out of the navigation selector.
-     */
-    private extendSelection;
-    private readonly handleInput;
-    private readonly handleBlur;
-    private readonly handleKeyDown;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'skdx-multi-select-input': SkdxMultiSelectInput;
-    }
-}

package/dist/multi-select/MultiSelectInput.js

@@ -1,28 +0,0 @@
-var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(s,a,e,t)=>{for(var i=t>1?void 0:t?h(a,e):a,l=s.length-1,o;l>=0;l--)(o=s[l])&&(i=(t?o(a,e,i):o(i))||i);return t&&i&&c(a,e,i),i};import{html as f,LitElement as y,nothing as r}from"lit";import{property as m}from"lit/decorators.js";import{takeHostAriaLabel as v}from"../internal/aria-label.js";import{customElement as g,whenUpgraded as k}from"../internal/define.js";import{installLightDomStyles as b}from"../internal/styles.js";import{MULTI_SELECT_UPDATE_EVENT as p}from"./MultiSelect.js";var n=class extends y{constructor(){super(...arguments);this.placeholder="";this.root=null;this.label=null;this.onRootUpdate=()=>this.requestUpdate();this.handleInput=e=>{let t=this.root;t&&(t.setInputValue(e.target.value),t.open||t.setOpen(!0))};this.handleBlur=()=>{this.root?.setOpen(!1)};this.handleKeyDown=e=>{let t=this.root;if(t)if(e.key==="ArrowDown")e.preventDefault(),t.open?e.shiftKey?this.extendSelection(1):this.moveActive(1):t.openWithHighlight("first");else if(e.key==="ArrowUp")e.preventDefault(),t.open?e.shiftKey?this.extendSelection(-1):this.moveActive(-1):t.openWithHighlight("last");else if((e.key==="Home"||e.key==="End")&&e.ctrlKey&&e.shiftKey){if(!t.open)return;e.preventDefault(),t.selectToEdge(e.key==="Home"?"first":"last")}else if((e.key==="Home"||e.key==="End")&&t.open){e.preventDefault();let i=this.options();this.activate(e.key==="Home"?i[0]:i[i.length-1])}else if(e.key===" "&&e.shiftKey&&t.open&&t.activeId!==null)e.preventDefault(),t.selectRange();else if(e.key==="Enter"){let i=t.activeId?t.getItem(t.activeId):void 0;if(!i)return;e.preventDefault(),t.toggle(i.value,"keyboard")}else if(e.key==="Escape")t.open&&!t.contentEl&&(e.preventDefault(),t.setOpen(!1));else if((e.ctrlKey||e.metaKey)&&e.key.toLowerCase()==="a"){if(!t.open||!t.allowSelectAll)return;e.preventDefault(),t.selectAllOrClear()}else e.key==="Backspace"&&t.inputValue===""&&t.removeLast()}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.label=v(this),this.root=this.closest("skdx-multi-select"),this.root?.addEventListener(p,this.onRootUpdate),this.root&&k(this.root,()=>{this.root&&(this.root.inputHost=this)}),b()}focus(e){this.querySelector("input")?.focus(e)}disconnectedCallback(){this.root?.removeEventListener(p,this.onRootUpdate),this.root?.inputHost===this&&(this.root.inputHost=null),super.disconnectedCallback()}options(){return this.root?.visibleOptions()??[]}activate(e){return e?(this.root?.setActiveId(e.id),e.scrollIntoView?.({block:"nearest"}),e.id):null}moveActive(e){let t=this.root;if(!t)return null;let i=this.options();if(i.length===0)return null;let o=i.findIndex(u=>u.id===t.activeId)+e;return o<0&&(o=0),o>=i.length&&(o=i.length-1),this.activate(i[o])}extendSelection(e){let t=this.root;if(!t)return;let i=t.activeId,l=this.moveActive(e);if(l===null||l===i)return;let o=t.getItem(l);o&&t.toggle(o.value,"keyboard")}render(){let e=this.root,t=e?.open??!1;return f`
-      <input
-        part="input"
-        type="text"
-        role="combobox"
-        aria-label=${this.label??r}
-        placeholder=${this.placeholder}
-        .value=${e?.inputValue??""}
-        aria-expanded=${t}
-        aria-controls=${e?.listId??r}
-        aria-autocomplete="list"
-        aria-activedescendant=${e?.activeId??r}
-        aria-busy=${e?.loading?"true":r}
-        autocomplete="off"
-        ?disabled=${e?.disabled??!1}
-        ?readonly=${e?.readOnly??!1}
-        aria-invalid=${e?.invalid?"true":r}
-        aria-readonly=${e?.readOnly?"true":r}
-        data-invalid=${e?.invalid?"":r}
-        data-readonly=${e?.readOnly?"":r}
-        data-disabled=${e?.disabled?"":r}
-        data-loading=${e?.loading?"":r}
-        data-state=${t?"open":"closed"}
-        @input=${this.handleInput}
-        @blur=${this.handleBlur}
-        @keydown=${this.handleKeyDown}
-      />
-    `}};d([m({type:String})],n.prototype,"placeholder",2),n=d([g("skdx-multi-select-input","multi-select","input")],n);export{n as SkdxMultiSelectInput};

package/dist/multi-select/MultiSelectItem.cjs

@@ -1,8 +0,0 @@
-"use strict";var h=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var A=(s,i)=>{for(var t in i)h(s,t,{get:i[t],enumerable:!0})},E=(s,i,t,r)=>{if(i&&typeof i=="object"||typeof i=="function")for(let e of f(i))!g.call(s,e)&&e!==t&&h(s,e,{get:()=>i[e],enumerable:!(r=v(i,e))||r.enumerable});return s};var x=s=>E(h({},"__esModule",{value:!0}),s),d=(s,i,t,r)=>{for(var e=r>1?void 0:r?v(i,t):i,n=s.length-1,l;n>=0;n--)(l=s[n])&&(e=(r?l(i,t,e):l(e))||e);return r&&e&&h(i,t,e),e};var y={};A(y,{SkdxMultiSelectItem:()=>o});module.exports=x(y);var a=require("lit"),u=require("lit/decorators.js"),m=require("../internal/closest.cjs"),p=require("../internal/define.cjs"),b=require("../internal/ids.cjs"),c=require("./MultiSelect.cjs");var o=class extends a.LitElement{constructor(){super(...arguments);this.value="";this.disabled=!1;this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleSelect=()=>{this.isInert||!this.root||(this.root.toggle(this.value,"pointer"),this.root.inputHost?.focus?.())};this.handlePointerEnter=()=>{this.isInert||this.root?.setActiveId(this.id)}}get itemText(){return this.textValue??this.textContent?.trim()??""}get isInert(){let t=this.root;return this.disabled?!0:t?t.locked||t.atMax&&!t.isSelected(this.value):!1}connectedCallback(){super.connectedCallback(),this.id||(this.id=(0,b.nextId)("skdx-multi-select-item")),this.setAttribute("role","option"),this.root=(0,m.closestThroughPortal)(this,"skdx-multi-select"),this.root?.addEventListener(c.MULTI_SELECT_UPDATE_EVENT,this.onRootUpdate),this.addEventListener("click",this.handleSelect),this.addEventListener("pointerenter",this.handlePointerEnter)}disconnectedCallback(){this.root?.unregisterItem(this.id),this.root?.removeEventListener(c.MULTI_SELECT_UPDATE_EVENT,this.onRootUpdate),this.removeEventListener("click",this.handleSelect),this.removeEventListener("pointerenter",this.handlePointerEnter),super.disconnectedCallback()}updated(){let t=this.root,r=!t||t.matchesFilter(this.itemText);if(this.hidden=!r,!r){this.hasAttribute("role")&&this.removeAttribute("role"),t?.unregisterItem(this.id);return}this.getAttribute("role")!=="option"&&this.setAttribute("role","option"),t?.registerItem(this.id,{value:this.value,text:this.itemText});let e=t?.isSelected(this.value)??!1,n=t?.activeId===this.id,l=this.isInert;this.setAttribute("data-value",this.value),this.setAttribute("aria-selected",String(e)),this.setAttribute("data-state",e?"checked":"unchecked"),n?this.setAttribute("data-highlighted",""):this.removeAttribute("data-highlighted"),l?(this.hasAttribute("data-disabled")||this.setAttribute("data-disabled",""),this.getAttribute("aria-disabled")!=="true"&&this.setAttribute("aria-disabled","true")):(this.removeAttribute("data-disabled"),this.removeAttribute("aria-disabled"))}render(){return a.html`<slot></slot>`}};o.styles=a.css`
-    :host {
-      display: block;
-    }
-    :host([hidden]) {
-      display: none;
-    }
-  `,d([(0,u.property)({type:String})],o.prototype,"value",2),d([(0,u.property)({type:Boolean,reflect:!0})],o.prototype,"disabled",2),d([(0,u.property)({type:String,attribute:"text-value"})],o.prototype,"textValue",2),o=d([(0,p.customElement)("skdx-multi-select-item","multi-select","item")],o);0&&(module.exports={SkdxMultiSelectItem});

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

@@ -1,48 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * `<skdx-multi-select-item>` — one option inside `<skdx-multi-select-list>`. Sets `role="option"` on itself (light DOM, so the input's `aria-activedescendant` can reference it) with `aria-selected`, `data-value`, `data-state` (`checked`/`unchecked`), `data-highlighted` for virtual focus — the attribute to style the keyboard cursor from, since real DOM focus stays on the input — and `data-disabled`.
- *
- * Clicking or pressing Enter **toggles** it and leaves the popup open (unless the root sets `close-on-select`), so picking five options costs five clicks. The draft text is cleared on every selection: it was the search that found this option, and keeping it would leave the list filtered down to the one item just picked.
- *
- * Once the root's `max` is reached, still-unselected options become `aria-disabled` and stop responding rather than silently swallowing clicks — an option that looks available and does nothing is worse than one that says it is unavailable. Already-selected options stay live, so the way out of a full selection is always visible.
- *
- * When the root has a `filter` predicate, a rejected item drops its `role="option"` and hides: it is no longer an option at all, so it leaves the option count and the highlight order exactly as if the consumer had never rendered it.
- *
- * @example
- * ```html
- * <skdx-multi-select-item value="React">React</skdx-multi-select-item>
- * ```
- */
-export declare class SkdxMultiSelectItem extends LitElement {
-    static styles: import("lit").CSSResult;
-    /** Value added to or removed from the root's selection when this option is chosen. Required. @default '' */
-    value: string;
-    /** Excludes this option from selection and highlight. @default false */
-    disabled: boolean;
-    /**
-     * Text the root's `filter` predicate matches against, and the text a tag
-     * shows when none is given. Falls back to this item's rendered text content.
-     * @default undefined — falls back to the item's own text content.
-     */
-    textValue?: string;
-    /** The text this item is measured by; readable from the light DOM whether or not it is currently an option. */
-    private get itemText();
-    private root;
-    private readonly onRootUpdate;
-    /**
-     * A locked root makes every option inert; a full selection blocks adding but
-     * never removing, so an already-selected option stays live.
-     */
-    private get isInert();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private readonly handleSelect;
-    private readonly handlePointerEnter;
-    protected updated(): void;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'skdx-multi-select-item': SkdxMultiSelectItem;
-    }
-}

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

@@ -1,48 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * `<skdx-multi-select-item>` — one option inside `<skdx-multi-select-list>`. Sets `role="option"` on itself (light DOM, so the input's `aria-activedescendant` can reference it) with `aria-selected`, `data-value`, `data-state` (`checked`/`unchecked`), `data-highlighted` for virtual focus — the attribute to style the keyboard cursor from, since real DOM focus stays on the input — and `data-disabled`.
- *
- * Clicking or pressing Enter **toggles** it and leaves the popup open (unless the root sets `close-on-select`), so picking five options costs five clicks. The draft text is cleared on every selection: it was the search that found this option, and keeping it would leave the list filtered down to the one item just picked.
- *
- * Once the root's `max` is reached, still-unselected options become `aria-disabled` and stop responding rather than silently swallowing clicks — an option that looks available and does nothing is worse than one that says it is unavailable. Already-selected options stay live, so the way out of a full selection is always visible.
- *
- * When the root has a `filter` predicate, a rejected item drops its `role="option"` and hides: it is no longer an option at all, so it leaves the option count and the highlight order exactly as if the consumer had never rendered it.
- *
- * @example
- * ```html
- * <skdx-multi-select-item value="React">React</skdx-multi-select-item>
- * ```
- */
-export declare class SkdxMultiSelectItem extends LitElement {
-    static styles: import("lit").CSSResult;
-    /** Value added to or removed from the root's selection when this option is chosen. Required. @default '' */
-    value: string;
-    /** Excludes this option from selection and highlight. @default false */
-    disabled: boolean;
-    /**
-     * Text the root's `filter` predicate matches against, and the text a tag
-     * shows when none is given. Falls back to this item's rendered text content.
-     * @default undefined — falls back to the item's own text content.
-     */
-    textValue?: string;
-    /** The text this item is measured by; readable from the light DOM whether or not it is currently an option. */
-    private get itemText();
-    private root;
-    private readonly onRootUpdate;
-    /**
-     * A locked root makes every option inert; a full selection blocks adding but
-     * never removing, so an already-selected option stays live.
-     */
-    private get isInert();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private readonly handleSelect;
-    private readonly handlePointerEnter;
-    protected updated(): void;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'skdx-multi-select-item': SkdxMultiSelectItem;
-    }
-}

package/dist/multi-select/MultiSelectItem.js

@@ -1,8 +0,0 @@
-var u=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var n=(l,r,t,s)=>{for(var e=s>1?void 0:s?c(r,t):r,o=l.length-1,a;o>=0;o--)(a=l[o])&&(e=(s?a(r,t,e):a(e))||e);return s&&e&&u(r,t,e),e};import{css as v,html as m,LitElement as p}from"lit";import{property as d}from"lit/decorators.js";import{closestThroughPortal as b}from"../internal/closest.js";import{customElement as f}from"../internal/define.js";import{nextId as g}from"../internal/ids.js";import{MULTI_SELECT_UPDATE_EVENT as h}from"./MultiSelect.js";var i=class extends p{constructor(){super(...arguments);this.value="";this.disabled=!1;this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleSelect=()=>{this.isInert||!this.root||(this.root.toggle(this.value,"pointer"),this.root.inputHost?.focus?.())};this.handlePointerEnter=()=>{this.isInert||this.root?.setActiveId(this.id)}}get itemText(){return this.textValue??this.textContent?.trim()??""}get isInert(){let t=this.root;return this.disabled?!0:t?t.locked||t.atMax&&!t.isSelected(this.value):!1}connectedCallback(){super.connectedCallback(),this.id||(this.id=g("skdx-multi-select-item")),this.setAttribute("role","option"),this.root=b(this,"skdx-multi-select"),this.root?.addEventListener(h,this.onRootUpdate),this.addEventListener("click",this.handleSelect),this.addEventListener("pointerenter",this.handlePointerEnter)}disconnectedCallback(){this.root?.unregisterItem(this.id),this.root?.removeEventListener(h,this.onRootUpdate),this.removeEventListener("click",this.handleSelect),this.removeEventListener("pointerenter",this.handlePointerEnter),super.disconnectedCallback()}updated(){let t=this.root,s=!t||t.matchesFilter(this.itemText);if(this.hidden=!s,!s){this.hasAttribute("role")&&this.removeAttribute("role"),t?.unregisterItem(this.id);return}this.getAttribute("role")!=="option"&&this.setAttribute("role","option"),t?.registerItem(this.id,{value:this.value,text:this.itemText});let e=t?.isSelected(this.value)??!1,o=t?.activeId===this.id,a=this.isInert;this.setAttribute("data-value",this.value),this.setAttribute("aria-selected",String(e)),this.setAttribute("data-state",e?"checked":"unchecked"),o?this.setAttribute("data-highlighted",""):this.removeAttribute("data-highlighted"),a?(this.hasAttribute("data-disabled")||this.setAttribute("data-disabled",""),this.getAttribute("aria-disabled")!=="true"&&this.setAttribute("aria-disabled","true")):(this.removeAttribute("data-disabled"),this.removeAttribute("aria-disabled"))}render(){return m`<slot></slot>`}};i.styles=v`
-    :host {
-      display: block;
-    }
-    :host([hidden]) {
-      display: none;
-    }
-  `,n([d({type:String})],i.prototype,"value",2),n([d({type:Boolean,reflect:!0})],i.prototype,"disabled",2),n([d({type:String,attribute:"text-value"})],i.prototype,"textValue",2),i=n([f("skdx-multi-select-item","multi-select","item")],i);export{i as SkdxMultiSelectItem};

package/dist/multi-select/MultiSelectList.cjs

@@ -1,5 +0,0 @@
-"use strict";var c=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var f=(l,t)=>{for(var s in t)c(l,s,{get:t[s],enumerable:!0})},k=(l,t,s,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of p(t))!b.call(l,e)&&e!==s&&c(l,e,{get:()=>t[e],enumerable:!(i=d(t,e))||i.enumerable});return l};var v=l=>k(c({},"__esModule",{value:!0}),l),h=(l,t,s,i)=>{for(var e=i>1?void 0:i?d(t,s):t,m=l.length-1,a;m>=0;m--)(a=l[m])&&(e=(i?a(t,s,e):a(e))||e);return i&&e&&c(t,s,e),e};var x={};f(x,{SkdxMultiSelectList:()=>o});module.exports=v(x);var r=require("lit"),u=require("../internal/closest.cjs"),n=require("../internal/define.cjs");var o=class extends r.LitElement{constructor(){super(...arguments);this.root=null}connectedCallback(){super.connectedCallback(),this.setAttribute("role","listbox"),this.setAttribute("aria-multiselectable","true"),this.root=(0,u.closestThroughPortal)(this,"skdx-multi-select"),this.root&&(this.id?this.root.listId=this.id:this.id=this.root.listId)}render(){return r.html`<slot></slot>`}};o.styles=r.css`
-    :host {
-      display: block;
-    }
-  `,o=h([(0,n.customElement)("skdx-multi-select-list","multi-select","list")],o);0&&(module.exports={SkdxMultiSelectList});

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

@@ -1,26 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * `<skdx-multi-select-list>` — the `role="listbox"` holding an `<skdx-multi-select>`'s options, marked `aria-multiselectable="true"` so assistive technology announces it as a list you take several things from rather than one. Takes the id the input's `aria-controls` points at, so it must be present whenever the popup is.
- *
- * The attribute is set by presence rather than value: `aria-multiselectable="false"` is still read as multi-selectable by some screen readers, so it is never written.
- *
- * The role and the id sit on this host element, not inside shadow DOM, so that `aria-controls` can reach it and the options stay light-DOM children of an actual listbox. `role="listbox"` has no implicit accessible name — put an `aria-label` (or `aria-labelledby`) on this tag saying what the options are.
- *
- * @example
- * ```html
- * <skdx-multi-select-list aria-label="Skills">
- *   <skdx-multi-select-item value="React">React</skdx-multi-select-item>
- * </skdx-multi-select-list>
- * ```
- */
-export declare class SkdxMultiSelectList extends LitElement {
-    static styles: import("lit").CSSResult;
-    private root;
-    connectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'skdx-multi-select-list': SkdxMultiSelectList;
-    }
-}

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

@@ -1,26 +0,0 @@
-import { LitElement } from 'lit';
-/**
- * `<skdx-multi-select-list>` — the `role="listbox"` holding an `<skdx-multi-select>`'s options, marked `aria-multiselectable="true"` so assistive technology announces it as a list you take several things from rather than one. Takes the id the input's `aria-controls` points at, so it must be present whenever the popup is.
- *
- * The attribute is set by presence rather than value: `aria-multiselectable="false"` is still read as multi-selectable by some screen readers, so it is never written.
- *
- * The role and the id sit on this host element, not inside shadow DOM, so that `aria-controls` can reach it and the options stay light-DOM children of an actual listbox. `role="listbox"` has no implicit accessible name — put an `aria-label` (or `aria-labelledby`) on this tag saying what the options are.
- *
- * @example
- * ```html
- * <skdx-multi-select-list aria-label="Skills">
- *   <skdx-multi-select-item value="React">React</skdx-multi-select-item>
- * </skdx-multi-select-list>
- * ```
- */
-export declare class SkdxMultiSelectList extends LitElement {
-    static styles: import("lit").CSSResult;
-    private root;
-    connectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'skdx-multi-select-list': SkdxMultiSelectList;
-    }
-}

package/dist/multi-select/MultiSelectList.js

@@ -1,5 +0,0 @@
-var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var m=(i,e,o,s)=>{for(var t=s>1?void 0:s?d(e,o):e,r=i.length-1,c;r>=0;r--)(c=i[r])&&(t=(s?c(e,o,t):c(t))||t);return s&&t&&a(e,o,t),t};import{css as h,html as u,LitElement as n}from"lit";import{closestThroughPortal as p}from"../internal/closest.js";import{customElement as b}from"../internal/define.js";var l=class extends n{constructor(){super(...arguments);this.root=null}connectedCallback(){super.connectedCallback(),this.setAttribute("role","listbox"),this.setAttribute("aria-multiselectable","true"),this.root=p(this,"skdx-multi-select"),this.root&&(this.id?this.root.listId=this.id:this.id=this.root.listId)}render(){return u`<slot></slot>`}};l.styles=h`
-    :host {
-      display: block;
-    }
-  `,l=m([b("skdx-multi-select-list","multi-select","list")],l);export{l as SkdxMultiSelectList};

package/dist/multi-select/MultiSelectPortal.cjs

@@ -1 +0,0 @@
-"use strict";var s=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var g=(t,e)=>{for(var a in e)s(t,a,{get:e[a],enumerable:!0})},E=(t,e,a,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let m of i(e))!x.call(t,m)&&m!==a&&s(t,m,{get:()=>e[m],enumerable:!(o=c(e,m))||o.enumerable});return t};var T=t=>E(s({},"__esModule",{value:!0}),t),n=(t,e,a,o)=>{for(var m=o>1?void 0:o?c(e,a):e,l=t.length-1,p;l>=0;l--)(p=t[l])&&(m=(o?p(e,a,m):p(m))||m);return o&&m&&s(e,a,m),m};var b={};g(b,{SkdxMultiSelectPortal:()=>r});module.exports=T(b);var d=require("../internal/define.cjs"),f=require("../utils/portal.cjs");var r=class extends f.SkdxPortal{};r=n([(0,d.customElement)("skdx-multi-select-portal")],r);0&&(module.exports={SkdxMultiSelectPortal});

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

@@ -1,27 +0,0 @@
-import { SkdxPortal } from '../utils/portal.cjs';
-/**
- * `<skdx-multi-select-portal>` — teleports `<skdx-multi-select-content>` to `document.body` (or a custom `container`), which matters here in particular: the field wrapping the tags and the input is usually a fixed-height box with `overflow: hidden`, and that is precisely what would clip the option list.
- *
- * The **host element stays where you wrote it** and the *children* are the things that move, into a `<div data-skdx-portal>` — so removing the family root removes the portalled content with it, and the parts inside still resolve that root through `closestThroughPortal()`.
- *
- * Adds nothing to `<skdx-portal>` but its tag name. Unlike React's `MultiSelectPortal` it takes no `force-mount` and does not unmount on close: the parts here never unmount, they hide via `hidden`, so there is nothing to force and nothing to keep alive for an exit animation.
- *
- * @example
- * ```html
- * <skdx-multi-select>
- *   <skdx-multi-select-input aria-label="Skills"></skdx-multi-select-input>
- *   <skdx-multi-select-portal>
- *     <skdx-multi-select-content>
- *       <skdx-multi-select-list aria-label="Skills">…</skdx-multi-select-list>
- *     </skdx-multi-select-content>
- *   </skdx-multi-select-portal>
- * </skdx-multi-select>
- * ```
- */
-export declare class SkdxMultiSelectPortal extends SkdxPortal {
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'skdx-multi-select-portal': SkdxMultiSelectPortal;
-    }
-}

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

@@ -1,27 +0,0 @@
-import { SkdxPortal } from '../utils/portal.js';
-/**
- * `<skdx-multi-select-portal>` — teleports `<skdx-multi-select-content>` to `document.body` (or a custom `container`), which matters here in particular: the field wrapping the tags and the input is usually a fixed-height box with `overflow: hidden`, and that is precisely what would clip the option list.
- *
- * The **host element stays where you wrote it** and the *children* are the things that move, into a `<div data-skdx-portal>` — so removing the family root removes the portalled content with it, and the parts inside still resolve that root through `closestThroughPortal()`.
- *
- * Adds nothing to `<skdx-portal>` but its tag name. Unlike React's `MultiSelectPortal` it takes no `force-mount` and does not unmount on close: the parts here never unmount, they hide via `hidden`, so there is nothing to force and nothing to keep alive for an exit animation.
- *
- * @example
- * ```html
- * <skdx-multi-select>
- *   <skdx-multi-select-input aria-label="Skills"></skdx-multi-select-input>
- *   <skdx-multi-select-portal>
- *     <skdx-multi-select-content>
- *       <skdx-multi-select-list aria-label="Skills">…</skdx-multi-select-list>
- *     </skdx-multi-select-content>
- *   </skdx-multi-select-portal>
- * </skdx-multi-select>
- * ```
- */
-export declare class SkdxMultiSelectPortal extends SkdxPortal {
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'skdx-multi-select-portal': SkdxMultiSelectPortal;
-    }
-}

package/dist/multi-select/MultiSelectPortal.js

@@ -1 +0,0 @@
-var c=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var p=(o,m,r,t)=>{for(var e=t>1?void 0:t?n(m,r):m,s=o.length-1,l;s>=0;s--)(l=o[s])&&(e=(t?l(m,r,e):l(e))||e);return t&&e&&c(m,r,e),e};import{customElement as d}from"../internal/define.js";import{SkdxPortal as f}from"../utils/portal.js";var a=class extends f{};a=p([d("skdx-multi-select-portal")],a);export{a as SkdxMultiSelectPortal};

package/dist/multi-select/MultiSelectTag.cjs

@@ -1,5 +0,0 @@
-"use strict";var d=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var f=(i,t)=>{for(var s in t)d(i,s,{get:t[s],enumerable:!0})},k=(i,t,s,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of E(t))!y.call(i,e)&&e!==s&&d(i,e,{get:()=>t[e],enumerable:!(l=v(t,e))||l.enumerable});return i};var x=i=>k(d({},"__esModule",{value:!0}),i),n=(i,t,s,l)=>{for(var e=l>1?void 0:l?v(t,s):t,h=i.length-1,u;h>=0;h--)(u=i[h])&&(e=(l?u(t,s,e):u(e))||e);return l&&e&&d(t,s,e),e};var A={};f(A,{MULTI_SELECT_TAG_UPDATE_EVENT:()=>b,SkdxMultiSelectTag:()=>r});module.exports=x(A);var o=require("lit"),c=require("lit/decorators.js"),m=require("../internal/define.cjs"),a=require("../tag-group/TagGroup.cjs"),p=require("./MultiSelect.cjs");var b="skdx-multi-select-tag-internal-update",r=class extends o.LitElement{constructor(){super(...arguments);this.value="";this.disabled=!1;this.root=null;this.list=null;this.onUpdate=()=>{this.syncHostAttributes(),this.requestUpdate()};this.handleKeydown=s=>{s.key!=="Delete"&&s.key!=="Backspace"||(s.preventDefault(),this.requestDelete())}}get index(){return Math.max(this.root?.value.indexOf(this.value)??-1,0)}get isDisabled(){return this.disabled||(this.root?.locked??!1)}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-multi-select"),this.list=this.closest("skdx-multi-select-tag-list"),!this.list)throw new Error("<skdx-multi-select-tag> must be used inside <skdx-multi-select-tag-list>.");this.setAttribute("role","listitem"),this.setAttribute("data-skdx-tag",""),this.hasAttribute("tabindex")||this.setAttribute("tabindex","-1"),this.list.addEventListener(a.TAG_GROUP_UPDATE_EVENT,this.onUpdate),this.root?.addEventListener(p.MULTI_SELECT_UPDATE_EVENT,this.onUpdate),this.addEventListener("keydown",this.handleKeydown),this.syncHostAttributes(),this.list.syncTabStops()}disconnectedCallback(){this.list?.removeEventListener(a.TAG_GROUP_UPDATE_EVENT,this.onUpdate),this.root?.removeEventListener(p.MULTI_SELECT_UPDATE_EVENT,this.onUpdate),this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback(),this.list?.syncTabStops()}updated(){this.syncHostAttributes(),this.dispatchEvent(new CustomEvent(b))}syncHostAttributes(){this.setAttribute("data-value",this.value),this.isDisabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}requestDelete(){this.isDisabled||(this.list?.setActiveIndex((0,a.focusTagNeighbor)(this,this.index)),this.root?.deselect(this.value))}render(){return o.html`<slot></slot>`}};r.styles=o.css`
-    :host {
-      display: inline-block;
-    }
-  `,n([(0,c.property)({type:String})],r.prototype,"value",2),n([(0,c.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),r=n([(0,m.customElement)("skdx-multi-select-tag","multi-select","tag")],r);0&&(module.exports={MULTI_SELECT_TAG_UPDATE_EVENT,SkdxMultiSelectTag});

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

@@ -1,57 +0,0 @@
-import { LitElement } from 'lit';
-/** @internal Event a tag dispatches whenever its own state changes, so its remove button can re-render (same convention as `<skdx-tag>`). */
-export declare const MULTI_SELECT_TAG_UPDATE_EVENT = "skdx-multi-select-tag-internal-update";
-/**
- * `<skdx-multi-select-tag>` — one selected value, rendered as a removable tag inside `<skdx-multi-select-tag-list>`. Sets `role="listitem"` and the `data-skdx-tag` marker on this host element, so it takes part in the tag list's roving tabindex exactly as an `<skdx-tag>` does — the list *is* an `<skdx-tag-group>`, and every one of its keyboard behaviours reaches this element through that marker.
- *
- * Takes only a `value`: the index the roving tab stop is keyed on is read from the root's selection, so the tags can be rendered from any list without the consumer keeping a parallel index. `Delete`/`Backspace` on a focused tag removes it, and focus moves to the neighbouring tag *before* the removal lands — the shared `focusTagNeighbor` from `<skdx-tag-group>`, not a second copy of it — so clearing three tags takes three key presses instead of three presses and three trips back through the document.
- *
- * `value` also names `<skdx-multi-select-tag-remove>`, so a strip of them announces "Remove React", "Remove TypeScript" rather than a row of identical "Remove"s.
- *
- * @example
- * ```html
- * <skdx-multi-select-tag value="React">
- *   React
- *   <skdx-multi-select-tag-remove>×</skdx-multi-select-tag-remove>
- * </skdx-multi-select-tag>
- * ```
- */
-export declare class SkdxMultiSelectTag extends LitElement {
-    static styles: import("lit").CSSResult;
-    /** The selected value this tag represents. Required: it deselects when remove is clicked. @default '' */
-    value: string;
-    /**
-     * Locks this tag: remove button refuses, painted with data-disabled, roving focus steps over it. Per-tag (not per-root) for pinned values like mandatory scopes.
-     *
-     * Present in React, Vue, Svelte and Angular from the start and missing only
-     * here, because those four inherit it from the shared
-     * `Tag` part's props while a custom element has to declare its own.
-     * @default false
-     */
-    disabled: boolean;
-    private root;
-    private list;
-    private readonly onUpdate;
-    /** This tag's position in the root's selection — the index removal hands focus by. */
-    private get index();
-    /** @internal This tag's own `disabled`, or a locked root — either means it may not be removed. */
-    get isDisabled(): boolean;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected updated(): void;
-    private syncHostAttributes;
-    /**
-     * @internal Moves focus to a neighbouring tag and then removes this value
-     * from the selection. A no-op while the root is locked. Named `requestDelete`
-     * rather than `remove` because `Element.prototype.remove()` already exists and
-     * takes the node out of the DOM.
-     */
-    requestDelete(): void;
-    private readonly handleKeydown;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'skdx-multi-select-tag': SkdxMultiSelectTag;
-    }
-}

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

@@ -1,57 +0,0 @@
-import { LitElement } from 'lit';
-/** @internal Event a tag dispatches whenever its own state changes, so its remove button can re-render (same convention as `<skdx-tag>`). */
-export declare const MULTI_SELECT_TAG_UPDATE_EVENT = "skdx-multi-select-tag-internal-update";
-/**
- * `<skdx-multi-select-tag>` — one selected value, rendered as a removable tag inside `<skdx-multi-select-tag-list>`. Sets `role="listitem"` and the `data-skdx-tag` marker on this host element, so it takes part in the tag list's roving tabindex exactly as an `<skdx-tag>` does — the list *is* an `<skdx-tag-group>`, and every one of its keyboard behaviours reaches this element through that marker.
- *
- * Takes only a `value`: the index the roving tab stop is keyed on is read from the root's selection, so the tags can be rendered from any list without the consumer keeping a parallel index. `Delete`/`Backspace` on a focused tag removes it, and focus moves to the neighbouring tag *before* the removal lands — the shared `focusTagNeighbor` from `<skdx-tag-group>`, not a second copy of it — so clearing three tags takes three key presses instead of three presses and three trips back through the document.
- *
- * `value` also names `<skdx-multi-select-tag-remove>`, so a strip of them announces "Remove React", "Remove TypeScript" rather than a row of identical "Remove"s.
- *
- * @example
- * ```html
- * <skdx-multi-select-tag value="React">
- *   React
- *   <skdx-multi-select-tag-remove>×</skdx-multi-select-tag-remove>
- * </skdx-multi-select-tag>
- * ```
- */
-export declare class SkdxMultiSelectTag extends LitElement {
-    static styles: import("lit").CSSResult;
-    /** The selected value this tag represents. Required: it deselects when remove is clicked. @default '' */
-    value: string;
-    /**
-     * Locks this tag: remove button refuses, painted with data-disabled, roving focus steps over it. Per-tag (not per-root) for pinned values like mandatory scopes.
-     *
-     * Present in React, Vue, Svelte and Angular from the start and missing only
-     * here, because those four inherit it from the shared
-     * `Tag` part's props while a custom element has to declare its own.
-     * @default false
-     */
-    disabled: boolean;
-    private root;
-    private list;
-    private readonly onUpdate;
-    /** This tag's position in the root's selection — the index removal hands focus by. */
-    private get index();
-    /** @internal This tag's own `disabled`, or a locked root — either means it may not be removed. */
-    get isDisabled(): boolean;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected updated(): void;
-    private syncHostAttributes;
-    /**
-     * @internal Moves focus to a neighbouring tag and then removes this value
-     * from the selection. A no-op while the root is locked. Named `requestDelete`
-     * rather than `remove` because `Element.prototype.remove()` already exists and
-     * takes the node out of the DOM.
-     */
-    requestDelete(): void;
-    private readonly handleKeydown;
-    render(): import("lit").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'skdx-multi-select-tag': SkdxMultiSelectTag;
-    }
-}

package/dist/multi-select/MultiSelectTag.js

@@ -1,5 +0,0 @@
-var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=(o,i,t,r)=>{for(var e=r>1?void 0:r?p(i,t):i,a=o.length-1,d;a>=0;a--)(d=o[a])&&(e=(r?d(i,t,e):d(e))||e);return r&&e&&c(i,t,e),e};import{css as v,html as m,LitElement as b}from"lit";import{property as n}from"lit/decorators.js";import{customElement as E}from"../internal/define.js";import{focusTagNeighbor as y,TAG_GROUP_UPDATE_EVENT as h}from"../tag-group/TagGroup.js";import{MULTI_SELECT_UPDATE_EVENT as u}from"./MultiSelect.js";var f="skdx-multi-select-tag-internal-update",s=class extends b{constructor(){super(...arguments);this.value="";this.disabled=!1;this.root=null;this.list=null;this.onUpdate=()=>{this.syncHostAttributes(),this.requestUpdate()};this.handleKeydown=t=>{t.key!=="Delete"&&t.key!=="Backspace"||(t.preventDefault(),this.requestDelete())}}get index(){return Math.max(this.root?.value.indexOf(this.value)??-1,0)}get isDisabled(){return this.disabled||(this.root?.locked??!1)}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-multi-select"),this.list=this.closest("skdx-multi-select-tag-list"),!this.list)throw new Error("<skdx-multi-select-tag> must be used inside <skdx-multi-select-tag-list>.");this.setAttribute("role","listitem"),this.setAttribute("data-skdx-tag",""),this.hasAttribute("tabindex")||this.setAttribute("tabindex","-1"),this.list.addEventListener(h,this.onUpdate),this.root?.addEventListener(u,this.onUpdate),this.addEventListener("keydown",this.handleKeydown),this.syncHostAttributes(),this.list.syncTabStops()}disconnectedCallback(){this.list?.removeEventListener(h,this.onUpdate),this.root?.removeEventListener(u,this.onUpdate),this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback(),this.list?.syncTabStops()}updated(){this.syncHostAttributes(),this.dispatchEvent(new CustomEvent(f))}syncHostAttributes(){this.setAttribute("data-value",this.value),this.isDisabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}requestDelete(){this.isDisabled||(this.list?.setActiveIndex(y(this,this.index)),this.root?.deselect(this.value))}render(){return m`<slot></slot>`}};s.styles=v`
-    :host {
-      display: inline-block;
-    }
-  `,l([n({type:String})],s.prototype,"value",2),l([n({type:Boolean,reflect:!0})],s.prototype,"disabled",2),s=l([E("skdx-multi-select-tag","multi-select","tag")],s);export{f as MULTI_SELECT_TAG_UPDATE_EVENT,s as SkdxMultiSelectTag};