@skdx/web-components 0.26.0 → 0.28.0

package/dist/multi-select/MultiSelectClear.js

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

package/dist/multi-select/MultiSelectContent.cjs

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

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

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

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

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

package/dist/multi-select/MultiSelectContent.js

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

package/dist/multi-select/MultiSelectEmpty.cjs

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

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

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+/**
+ * Fallback shown in place of the option list when no `<skdx-multi-select-item>`s are currently rendered — because the consumer's filtered results are empty, or because the root's `filter` rejected every item. Renders outside `role="listbox"` so the message is never announced as an option, and `aria-live="polite"` so one appearing while the user types is actually read. Renders nothing while an item is registered.
+ */
+export declare class SkdxMultiSelectEmpty extends LitElement {
+    static styles: import("lit").CSSResult;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-multi-select-empty': SkdxMultiSelectEmpty;
+    }
+}

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

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+/**
+ * Fallback shown in place of the option list when no `<skdx-multi-select-item>`s are currently rendered — because the consumer's filtered results are empty, or because the root's `filter` rejected every item. Renders outside `role="listbox"` so the message is never announced as an option, and `aria-live="polite"` so one appearing while the user types is actually read. Renders nothing while an item is registered.
+ */
+export declare class SkdxMultiSelectEmpty extends LitElement {
+    static styles: import("lit").CSSResult;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-multi-select-empty': SkdxMultiSelectEmpty;
+    }
+}

package/dist/multi-select/MultiSelectEmpty.js

@@ -0,0 +1,5 @@
+var m=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var n=(s,e,i,r)=>{for(var t=r>1?void 0:r?p(e,i):e,l=s.length-1,a;l>=0;l--)(a=s[l])&&(t=(r?a(e,i,t):a(t))||t);return r&&t&&m(e,i,t),t};import{css as h,html as d,LitElement as u}from"lit";import{closestThroughPortal as v}from"../internal/closest.js";import{customElement as b}from"../internal/define.js";import{MULTI_SELECT_UPDATE_EVENT as c}from"./MultiSelect.js";var o=class extends u{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.root=v(this,"skdx-multi-select"),this.root?.addEventListener(c,this.onRootUpdate),this.setAttribute("role","presentation"),this.setAttribute("aria-live","polite")}disconnectedCallback(){this.root?.removeEventListener(c,this.onRootUpdate),super.disconnectedCallback()}render(){return!this.root||this.root.itemCount>0?d``:d`<slot></slot>`}};o.styles=h`
+    :host {
+      display: block;
+    }
+  `,o=n([b("skdx-multi-select-empty","multi-select","empty")],o);export{o as SkdxMultiSelectEmpty};

package/dist/multi-select/MultiSelectGroup.cjs

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

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

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/**
+ * Groups related `<skdx-multi-select-item>`s together under a `<skdx-multi-select-group-label>`. Renders `role="group"` on its host, whose `aria-labelledby` names that label.
+ *
+ * The wiring is automatic, and a label is therefore required: `role="group"` takes no accessible name from its content.
+ */
+export declare class SkdxMultiSelectGroup extends LitElement {
+    static styles: import("lit").CSSResult;
+    private labelId;
+    connectedCallback(): void;
+    /** The id this group's `aria-labelledby` names, claimed by its label part. */
+    getLabelId(): string;
+    /** @internal Lets the label part republish an author-assigned id. */
+    setLabelId(id: string): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-multi-select-group': SkdxMultiSelectGroup;
+    }
+}

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

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+/**
+ * Groups related `<skdx-multi-select-item>`s together under a `<skdx-multi-select-group-label>`. Renders `role="group"` on its host, whose `aria-labelledby` names that label.
+ *
+ * The wiring is automatic, and a label is therefore required: `role="group"` takes no accessible name from its content.
+ */
+export declare class SkdxMultiSelectGroup extends LitElement {
+    static styles: import("lit").CSSResult;
+    private labelId;
+    connectedCallback(): void;
+    /** The id this group's `aria-labelledby` names, claimed by its label part. */
+    getLabelId(): string;
+    /** @internal Lets the label part republish an author-assigned id. */
+    setLabelId(id: string): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-multi-select-group': SkdxMultiSelectGroup;
+    }
+}

package/dist/multi-select/MultiSelectGroup.js

@@ -0,0 +1,5 @@
+var b=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(i,l,e,r)=>{for(var t=r>1?void 0:r?c(l,e):l,a=i.length-1,o;a>=0;a--)(o=i[a])&&(t=(r?o(l,e,t):o(t))||t);return r&&t&&b(l,e,t),t};import{css as m,html as n,LitElement as u}from"lit";import{customElement as h}from"../internal/define.js";import{nextId as g}from"../internal/ids.js";var s=class extends u{constructor(){super(...arguments);this.labelId=g("multi-select-group-label")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","group");let e=this.querySelector("skdx-multi-select-group-label")?.id;e&&(this.labelId=e),this.setAttribute("aria-labelledby",this.labelId)}getLabelId(){return this.labelId}setLabelId(e){this.labelId=e,this.setAttribute("aria-labelledby",this.labelId)}render(){return n`<slot></slot>`}};s.styles=m`
+    :host {
+      display: block;
+    }
+  `,s=d([h("skdx-multi-select-group","multi-select","group")],s);export{s as SkdxMultiSelectGroup};

package/dist/multi-select/MultiSelectGroupLabel.cjs

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

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

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+/**
+ * Heading for a `<skdx-multi-select-group>`. Carries the id its group points `aria-labelledby` at, so the group is named without the label itself becoming an option.
+ */
+export declare class SkdxMultiSelectGroupLabel extends LitElement {
+    static styles: import("lit").CSSResult;
+    private group;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-multi-select-group-label': SkdxMultiSelectGroupLabel;
+    }
+}

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

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+/**
+ * Heading for a `<skdx-multi-select-group>`. Carries the id its group points `aria-labelledby` at, so the group is named without the label itself becoming an option.
+ */
+export declare class SkdxMultiSelectGroupLabel extends LitElement {
+    static styles: import("lit").CSSResult;
+    private group;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-multi-select-group-label': SkdxMultiSelectGroupLabel;
+    }
+}

package/dist/multi-select/MultiSelectGroupLabel.js

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

package/dist/multi-select/MultiSelectInput.cjs

@@ -1,4 +1,4 @@
-"use strict";var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var g=(l,i)=>{for(var e in i)p(l,e,{get:i[e],enumerable:!0})},$=(l,i,e,t)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of E(i))!b.call(l,o)&&o!==e&&p(l,o,{get:()=>i[o],enumerable:!(t=u(i,o))||t.enumerable});return l};var k=l=>$(p({},"__esModule",{value:!0}),l),c=(l,i,e,t)=>{for(var o=t>1?void 0:t?u(i,e):i,d=l.length-1,a;d>=0;d--)(a=l[d])&&(o=(t?a(i,e,o):a(o))||o);return t&&o&&p(i,e,o),o};var I={};g(I,{SkdxMultiSelectInput:()=>n});module.exports=k(I);var r=require("lit"),h=require("lit/decorators.js"),f=require("../internal/aria-label.cjs"),v=require("../internal/define.cjs"),m=require("../internal/styles.cjs"),s=require("./MultiSelect.cjs");var n=class extends r.LitElement{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?this.moveActive(1):t.openWithHighlight("first");else if(e.key==="ArrowUp")e.preventDefault(),t.open?this.moveActive(-1):t.openWithHighlight("last");else if(e.key==="Enter"){let o=t.activeId?t.getItem(t.activeId):void 0;if(!o)return;e.preventDefault(),t.toggle(o.value)}else e.key==="Escape"?t.open&&!t.contentEl&&(e.preventDefault(),t.setOpen(!1)):e.key==="Backspace"&&t.inputValue===""&&t.removeLast()}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.label=(0,f.takeHostAriaLabel)(this),this.root=this.closest("skdx-multi-select"),this.root&&(this.root.inputHost=this),this.root?.addEventListener(s.MULTI_SELECT_UPDATE_EVENT,this.onRootUpdate),(0,m.installLightDomStyles)()}focus(e){this.querySelector("input")?.focus(e)}disconnectedCallback(){this.root?.removeEventListener(s.MULTI_SELECT_UPDATE_EVENT,this.onRootUpdate),this.root?.inputHost===this&&(this.root.inputHost=null),super.disconnectedCallback()}moveActive(e){let t=this.root;if(!t)return;let o=Array.from(t.querySelectorAll(s.OPTION_SELECTOR));if(o.length===0)return;let a=o.findIndex(y=>y.id===t.activeId)+e;a<0&&(a=0),a>=o.length&&(a=o.length-1),t.setActiveId(o[a].id)}render(){let e=this.root,t=e?.open??!1;return r.html`
+"use strict";var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var b=(a,o)=>{for(var e in o)d(a,e,{get:o[e],enumerable:!0})},E=(a,o,e,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of g(o))!k.call(a,i)&&i!==e&&d(a,i,{get:()=>o[i],enumerable:!(t=h(o,i))||t.enumerable});return a};var $=a=>E(d({},"__esModule",{value:!0}),a),u=(a,o,e,t)=>{for(var i=t>1?void 0:t?h(o,e):o,n=a.length-1,l;n>=0;n--)(l=a[n])&&(i=(t?l(o,e,i):l(i))||i);return t&&i&&d(o,e,i),i};var I={};b(I,{SkdxMultiSelectInput:()=>s});module.exports=$(I);var r=require("lit"),f=require("lit/decorators.js"),y=require("../internal/aria-label.cjs"),p=require("../internal/define.cjs"),m=require("../internal/styles.cjs"),c=require("./MultiSelect.cjs");var s=class extends r.LitElement{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=(0,y.takeHostAriaLabel)(this),this.root=this.closest("skdx-multi-select"),this.root?.addEventListener(c.MULTI_SELECT_UPDATE_EVENT,this.onRootUpdate),this.root&&(0,p.whenUpgraded)(this.root,()=>{this.root&&(this.root.inputHost=this)}),(0,m.installLightDomStyles)()}focus(e){this.querySelector("input")?.focus(e)}disconnectedCallback(){this.root?.removeEventListener(c.MULTI_SELECT_UPDATE_EVENT,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 l=i.findIndex(v=>v.id===t.activeId)+e;return l<0&&(l=0),l>=i.length&&(l=i.length-1),this.activate(i[l])}extendSelection(e){let t=this.root;if(!t)return;let i=t.activeId,n=this.moveActive(e);if(n===null||n===i)return;let l=t.getItem(n);l&&t.toggle(l.value,"keyboard")}render(){let e=this.root,t=e?.open??!1;return r.html`
       <input
         part="input"
         type="text"
@@ -10,6 +10,7 @@
         aria-controls=${e?.listId??r.nothing}
         aria-autocomplete="list"
         aria-activedescendant=${e?.activeId??r.nothing}
+        aria-busy=${e?.loading?"true":r.nothing}
         autocomplete="off"
         ?disabled=${e?.disabled??!1}
         ?readonly=${e?.readOnly??!1}
@@ -18,9 +19,10 @@
         data-invalid=${e?.invalid?"":r.nothing}
         data-readonly=${e?.readOnly?"":r.nothing}
         data-disabled=${e?.disabled?"":r.nothing}
+        data-loading=${e?.loading?"":r.nothing}
         data-state=${t?"open":"closed"}
         @input=${this.handleInput}
         @blur=${this.handleBlur}
         @keydown=${this.handleKeyDown}
       />
-    `}};c([(0,h.property)({type:String})],n.prototype,"placeholder",2),n=c([(0,v.customElement)("skdx-multi-select-input","multi-select","input")],n);0&&(module.exports={SkdxMultiSelectInput});
+    `}};u([(0,f.property)({type:String})],s.prototype,"placeholder",2),s=u([(0,p.customElement)("skdx-multi-select-input","multi-select","input")],s);0&&(module.exports={SkdxMultiSelectInput});

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

@@ -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;