@skdx/web-components 0.26.0 → 0.28.0

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

@@ -1,47 +1,35 @@
 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.
+ * `<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.
+ * 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.
  *
- * Give it an accessible name — an `aria-label` on this tag is moved onto the
- * inner `<input>`, where the `combobox` role actually lives.
+ * 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.
+ * 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 { … }`.
+ * 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 text shown while the draft text is empty. @default '' — no placeholder. */
+    /** Placeholder for the derived MultiSelectInput. Only read while options is deriving the anatomy. @default '' — no placeholder. */
     placeholder: string;
     private root;
     private label;
@@ -55,8 +43,43 @@ export declare class SkdxMultiSelectInput extends LitElement {
      */
     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;

package/dist/multi-select/MultiSelectInput.js

@@ -1,26 +1,28 @@
-var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(s,l,t,e)=>{for(var o=e>1?void 0:e?h(l,t):l,n=s.length-1,i;n>=0;n--)(i=s[n])&&(o=(e?i(l,t,o):i(o))||o);return e&&o&&u(l,t,o),o};import{html as f,LitElement as v,nothing as r}from"lit";import{property as m}from"lit/decorators.js";import{takeHostAriaLabel as y}from"../internal/aria-label.js";import{customElement as E}from"../internal/define.js";import{installLightDomStyles as b}from"../internal/styles.js";import{MULTI_SELECT_UPDATE_EVENT as p,OPTION_SELECTOR as g}from"./MultiSelect.js";var a=class extends v{constructor(){super(...arguments);this.placeholder="";this.root=null;this.label=null;this.onRootUpdate=()=>this.requestUpdate();this.handleInput=t=>{let e=this.root;e&&(e.setInputValue(t.target.value),e.open||e.setOpen(!0))};this.handleBlur=()=>{this.root?.setOpen(!1)};this.handleKeyDown=t=>{let e=this.root;if(e)if(t.key==="ArrowDown")t.preventDefault(),e.open?this.moveActive(1):e.openWithHighlight("first");else if(t.key==="ArrowUp")t.preventDefault(),e.open?this.moveActive(-1):e.openWithHighlight("last");else if(t.key==="Enter"){let o=e.activeId?e.getItem(e.activeId):void 0;if(!o)return;t.preventDefault(),e.toggle(o.value)}else t.key==="Escape"?e.open&&!e.contentEl&&(t.preventDefault(),e.setOpen(!1)):t.key==="Backspace"&&e.inputValue===""&&e.removeLast()}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.label=y(this),this.root=this.closest("skdx-multi-select"),this.root&&(this.root.inputHost=this),this.root?.addEventListener(p,this.onRootUpdate),b()}focus(t){this.querySelector("input")?.focus(t)}disconnectedCallback(){this.root?.removeEventListener(p,this.onRootUpdate),this.root?.inputHost===this&&(this.root.inputHost=null),super.disconnectedCallback()}moveActive(t){let e=this.root;if(!e)return;let o=Array.from(e.querySelectorAll(g));if(o.length===0)return;let i=o.findIndex(c=>c.id===e.activeId)+t;i<0&&(i=0),i>=o.length&&(i=o.length-1),e.setActiveId(o[i].id)}render(){let t=this.root,e=t?.open??!1;return f`
+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=${t?.inputValue??""}
-        aria-expanded=${e}
-        aria-controls=${t?.listId??r}
+        .value=${e?.inputValue??""}
+        aria-expanded=${t}
+        aria-controls=${e?.listId??r}
         aria-autocomplete="list"
-        aria-activedescendant=${t?.activeId??r}
+        aria-activedescendant=${e?.activeId??r}
+        aria-busy=${e?.loading?"true":r}
         autocomplete="off"
-        ?disabled=${t?.disabled??!1}
-        ?readonly=${t?.readOnly??!1}
-        aria-invalid=${t?.invalid?"true":r}
-        aria-readonly=${t?.readOnly?"true":r}
-        data-invalid=${t?.invalid?"":r}
-        data-readonly=${t?.readOnly?"":r}
-        data-disabled=${t?.disabled?"":r}
-        data-state=${e?"open":"closed"}
+        ?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})],a.prototype,"placeholder",2),a=d([E("skdx-multi-select-input","multi-select","input")],a);export{a as SkdxMultiSelectInput};
+    `}};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,4 +1,4 @@
-"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,l=s.length-1,n;l>=0;l--)(n=s[l])&&(e=(r?n(i,t,e):n(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),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,l=t?.activeId===this.id,n=this.isInert;this.setAttribute("data-value",this.value),this.setAttribute("aria-selected",String(e)),this.setAttribute("data-state",e?"selected":"unselected"),l?this.setAttribute("data-highlighted",""):this.removeAttribute("data-highlighted"),n?(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`
+"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;
     }

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

@@ -1,28 +1,12 @@
 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` (`selected`/`unselected`), `data-highlighted` for virtual focus
- * — the attribute to style the keyboard cursor from, since real DOM focus stays
- * on the input — and `data-disabled`.
+ * `<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.
+ * 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.
+ * 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.
+ * 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
@@ -31,14 +15,13 @@ import { LitElement } from 'lit';
  */
 export declare class SkdxMultiSelectItem extends LitElement {
     static styles: import("lit").CSSResult;
-    /** The value added to, or removed from, the root's selection when this option is chosen. Required. @default '' */
+    /** Value added to or removed from the root's selection when this option is chosen. Required. @default '' */
     value: string;
-    /** Excludes this option from selection, pointer highlight and keyboard navigation entirely. @default false */
+    /** 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,
-     * which is only wrong when the item renders more than its label.
+     * 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;

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

@@ -1,28 +1,12 @@
 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` (`selected`/`unselected`), `data-highlighted` for virtual focus
- * — the attribute to style the keyboard cursor from, since real DOM focus stays
- * on the input — and `data-disabled`.
+ * `<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.
+ * 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.
+ * 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.
+ * 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
@@ -31,14 +15,13 @@ import { LitElement } from 'lit';
  */
 export declare class SkdxMultiSelectItem extends LitElement {
     static styles: import("lit").CSSResult;
-    /** The value added to, or removed from, the root's selection when this option is chosen. Required. @default '' */
+    /** Value added to or removed from the root's selection when this option is chosen. Required. @default '' */
     value: string;
-    /** Excludes this option from selection, pointer highlight and keyboard navigation entirely. @default false */
+    /** 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,
-     * which is only wrong when the item renders more than its label.
+     * 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;

package/dist/multi-select/MultiSelectItem.js

@@ -1,8 +1,8 @@
-var u=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var l=(n,r,t,s)=>{for(var e=s>1?void 0:s?c(r,t):r,o=n.length-1,a;o>=0;o--)(a=n[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),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?"selected":"unselected"),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`
+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;
     }
-  `,l([d({type:String})],i.prototype,"value",2),l([d({type:Boolean,reflect:!0})],i.prototype,"disabled",2),l([d({type:String,attribute:"text-value"})],i.prototype,"textValue",2),i=l([f("skdx-multi-select-item","multi-select","item")],i);export{i as SkdxMultiSelectItem};
+  `,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 +1,5 @@
-"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,o)=>{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:!(o=d(t,e))||o.enumerable});return l};var v=l=>k(c({},"__esModule",{value:!0}),l),u=(l,t,s,o)=>{for(var e=o>1?void 0:o?d(t,s):t,m=l.length-1,a;m>=0;m--)(a=l[m])&&(e=(o?a(t,s,e):a(e))||e);return o&&e&&c(t,s,e),e};var x={};f(x,{SkdxMultiSelectList:()=>r});module.exports=v(x);var i=require("lit"),n=require("../internal/closest.cjs"),h=require("../internal/define.cjs");var r=class extends i.LitElement{constructor(){super(...arguments);this.root=null}connectedCallback(){super.connectedCallback(),this.setAttribute("role","listbox"),this.setAttribute("aria-multiselectable","true"),this.root=(0,n.closestThroughPortal)(this,"skdx-multi-select"),this.root&&(this.id=this.root.listId)}render(){return i.html`<slot></slot>`}};r.styles=i.css`
+"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;
     }
-  `,r=u([(0,h.customElement)("skdx-multi-select-list","multi-select","list")],r);0&&(module.exports={SkdxMultiSelectList});
+  `,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,19 +1,10 @@
 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.
+ * `<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 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.
+ * 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

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

@@ -1,19 +1,10 @@
 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.
+ * `<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 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.
+ * 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

package/dist/multi-select/MultiSelectList.js

@@ -1,4 +1,4 @@
-var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var m=(o,e,r,s)=>{for(var t=s>1?void 0:s?d(e,r):e,i=o.length-1,c;i>=0;i--)(c=o[i])&&(t=(s?c(e,r,t):c(t))||t);return s&&t&&a(e,r,t),t};import{css as u,html as n,LitElement as h}from"lit";import{closestThroughPortal as p}from"../internal/closest.js";import{customElement as b}from"../internal/define.js";var l=class extends h{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)}render(){return n`<slot></slot>`}};l.styles=u`
+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;
     }

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

@@ -1,20 +1,10 @@
 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.
+ * `<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()`.
+ * 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.
+ * 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

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

@@ -1,20 +1,10 @@
 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.
+ * `<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()`.
+ * 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.
+ * 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

package/dist/multi-select/MultiSelectTag.cjs

@@ -1,5 +1,5 @@
-"use strict";var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var k=(i,t)=>{for(var s in t)d(i,s,{get:t[s],enumerable:!0})},x=(i,t,s,r)=>{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:!(r=p(t,e))||r.enumerable});return i};var A=i=>x(d({},"__esModule",{value:!0}),i),u=(i,t,s,r)=>{for(var e=r>1?void 0:r?p(t,s):t,n=i.length-1,h;n>=0;n--)(h=i[n])&&(e=(r?h(t,s,e):h(e))||e);return r&&e&&d(t,s,e),e};var f={};k(f,{MULTI_SELECT_TAG_UPDATE_EVENT:()=>b,SkdxMultiSelectTag:()=>l});module.exports=A(f);var o=require("lit"),m=require("lit/decorators.js"),v=require("../internal/define.cjs"),a=require("../tag-group/TagGroup.cjs"),c=require("./MultiSelect.cjs");var b="skdx-multi-select-tag-internal-update",l=class extends o.LitElement{constructor(){super(...arguments);this.value="";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.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(c.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(c.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>`}};l.styles=o.css`
+"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;
     }
-  `,u([(0,m.property)({type:String})],l.prototype,"value",2),l=u([(0,v.customElement)("skdx-multi-select-tag","multi-select","tag")],l);0&&(module.exports={MULTI_SELECT_TAG_UPDATE_EVENT,SkdxMultiSelectTag});
+  `,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

@@ -2,24 +2,11 @@ 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.
+ * `<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.
+ * 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.
+ * `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
@@ -31,14 +18,23 @@ export declare const MULTI_SELECT_TAG_UPDATE_EVENT = "skdx-multi-select-tag-inte
  */
 export declare class SkdxMultiSelectTag extends LitElement {
     static styles: import("lit").CSSResult;
-    /** The selected value this tag stands for. Its position in the root's `value` decides the tag's place in the roving tab order. @default '' */
+    /** 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 A locked root means no tag may be removed. */
+    /** @internal This tag's own `disabled`, or a locked root — either means it may not be removed. */
     get isDisabled(): boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;

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

@@ -2,24 +2,11 @@ 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.
+ * `<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.
+ * 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.
+ * `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
@@ -31,14 +18,23 @@ export declare const MULTI_SELECT_TAG_UPDATE_EVENT = "skdx-multi-select-tag-inte
  */
 export declare class SkdxMultiSelectTag extends LitElement {
     static styles: import("lit").CSSResult;
-    /** The selected value this tag stands for. Its position in the root's `value` decides the tag's place in the roving tab order. @default '' */
+    /** 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 A locked root means no tag may be removed. */
+    /** @internal This tag's own `disabled`, or a locked root — either means it may not be removed. */
     get isDisabled(): boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/multi-select/MultiSelectTag.js

@@ -1,5 +1,5 @@
-var u=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(l,i,t,r)=>{for(var e=r>1?void 0:r?c(i,t):i,o=l.length-1,a;o>=0;o--)(a=l[o])&&(e=(r?a(i,t,e):a(e))||e);return r&&e&&u(i,t,e),e};import{css as p,html as m,LitElement as v}from"lit";import{property as b}from"lit/decorators.js";import{customElement as E}from"../internal/define.js";import{focusTagNeighbor as y,TAG_GROUP_UPDATE_EVENT as n}from"../tag-group/TagGroup.js";import{MULTI_SELECT_UPDATE_EVENT as h}from"./MultiSelect.js";var k="skdx-multi-select-tag-internal-update",s=class extends v{constructor(){super(...arguments);this.value="";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.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(n,this.onUpdate),this.root?.addEventListener(h,this.onUpdate),this.addEventListener("keydown",this.handleKeydown),this.syncHostAttributes(),this.list.syncTabStops()}disconnectedCallback(){this.list?.removeEventListener(n,this.onUpdate),this.root?.removeEventListener(h,this.onUpdate),this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback(),this.list?.syncTabStops()}updated(){this.syncHostAttributes(),this.dispatchEvent(new CustomEvent(k))}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=p`
+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;
     }
-  `,d([b({type:String})],s.prototype,"value",2),s=d([E("skdx-multi-select-tag","multi-select","tag")],s);export{k as MULTI_SELECT_TAG_UPDATE_EVENT,s as SkdxMultiSelectTag};
+  `,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};