@skdx/web-components 0.26.0

package/dist/multi-select/MultiSelectTag.cjs

@@ -0,0 +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`
+    :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});

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

@@ -0,0 +1,61 @@
+import { LitElement } from 'lit';
+/** @internal Event a tag dispatches whenever its own state changes, so its remove button can re-render (same convention as `<skdx-tag>`). */
+export declare const MULTI_SELECT_TAG_UPDATE_EVENT = "skdx-multi-select-tag-internal-update";
+/**
+ * `<skdx-multi-select-tag>` — one selected value, rendered as a removable tag
+ * inside `<skdx-multi-select-tag-list>`. Sets `role="listitem"` and the
+ * `data-skdx-tag` marker on this host element, so it takes part in the tag
+ * list's roving tabindex exactly as an `<skdx-tag>` does — the list *is* an
+ * `<skdx-tag-group>`, and every one of its keyboard behaviours reaches this
+ * element through that marker.
+ *
+ * Takes only a `value`: the index the roving tab stop is keyed on is read from
+ * the root's selection, so the tags can be rendered from any list without the
+ * consumer keeping a parallel index. `Delete`/`Backspace` on a focused tag
+ * removes it, and focus moves to the neighbouring tag *before* the removal
+ * lands — the shared `focusTagNeighbor` from `<skdx-tag-group>`, not a second
+ * copy of it — so clearing three tags takes three key presses instead of three
+ * presses and three trips back through the document.
+ *
+ * `value` also names `<skdx-multi-select-tag-remove>`, so a strip of them
+ * announces "Remove React", "Remove TypeScript" rather than a row of identical
+ * "Remove"s.
+ *
+ * @example
+ * ```html
+ * <skdx-multi-select-tag value="React">
+ *   React
+ *   <skdx-multi-select-tag-remove>×</skdx-multi-select-tag-remove>
+ * </skdx-multi-select-tag>
+ * ```
+ */
+export declare class SkdxMultiSelectTag extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** The selected value this tag stands for. Its position in the root's `value` decides the tag's place in the roving tab order. @default '' */
+    value: string;
+    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. */
+    get isDisabled(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private syncHostAttributes;
+    /**
+     * @internal Moves focus to a neighbouring tag and then removes this value
+     * from the selection. A no-op while the root is locked. Named `requestDelete`
+     * rather than `remove` because `Element.prototype.remove()` already exists and
+     * takes the node out of the DOM.
+     */
+    requestDelete(): void;
+    private readonly handleKeydown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-multi-select-tag': SkdxMultiSelectTag;
+    }
+}

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

@@ -0,0 +1,61 @@
+import { LitElement } from 'lit';
+/** @internal Event a tag dispatches whenever its own state changes, so its remove button can re-render (same convention as `<skdx-tag>`). */
+export declare const MULTI_SELECT_TAG_UPDATE_EVENT = "skdx-multi-select-tag-internal-update";
+/**
+ * `<skdx-multi-select-tag>` — one selected value, rendered as a removable tag
+ * inside `<skdx-multi-select-tag-list>`. Sets `role="listitem"` and the
+ * `data-skdx-tag` marker on this host element, so it takes part in the tag
+ * list's roving tabindex exactly as an `<skdx-tag>` does — the list *is* an
+ * `<skdx-tag-group>`, and every one of its keyboard behaviours reaches this
+ * element through that marker.
+ *
+ * Takes only a `value`: the index the roving tab stop is keyed on is read from
+ * the root's selection, so the tags can be rendered from any list without the
+ * consumer keeping a parallel index. `Delete`/`Backspace` on a focused tag
+ * removes it, and focus moves to the neighbouring tag *before* the removal
+ * lands — the shared `focusTagNeighbor` from `<skdx-tag-group>`, not a second
+ * copy of it — so clearing three tags takes three key presses instead of three
+ * presses and three trips back through the document.
+ *
+ * `value` also names `<skdx-multi-select-tag-remove>`, so a strip of them
+ * announces "Remove React", "Remove TypeScript" rather than a row of identical
+ * "Remove"s.
+ *
+ * @example
+ * ```html
+ * <skdx-multi-select-tag value="React">
+ *   React
+ *   <skdx-multi-select-tag-remove>×</skdx-multi-select-tag-remove>
+ * </skdx-multi-select-tag>
+ * ```
+ */
+export declare class SkdxMultiSelectTag extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** The selected value this tag stands for. Its position in the root's `value` decides the tag's place in the roving tab order. @default '' */
+    value: string;
+    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. */
+    get isDisabled(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private syncHostAttributes;
+    /**
+     * @internal Moves focus to a neighbouring tag and then removes this value
+     * from the selection. A no-op while the root is locked. Named `requestDelete`
+     * rather than `remove` because `Element.prototype.remove()` already exists and
+     * takes the node out of the DOM.
+     */
+    requestDelete(): void;
+    private readonly handleKeydown;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-multi-select-tag': SkdxMultiSelectTag;
+    }
+}

package/dist/multi-select/MultiSelectTag.js

@@ -0,0 +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`
+    :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};

package/dist/multi-select/MultiSelectTagList.cjs

@@ -0,0 +1 @@
+"use strict";var r=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var k=(o,t)=>{for(var s in t)r(o,s,{get:t[s],enumerable:!0})},E=(o,t,s,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of v(t))!u.call(o,e)&&e!==s&&r(o,e,{get:()=>t[e],enumerable:!(i=n(t,e))||i.enumerable});return o};var b=o=>E(r({},"__esModule",{value:!0}),o),m=(o,t,s,i)=>{for(var e=i>1?void 0:i?n(t,s):t,a=o.length-1,d;a>=0;a--)(d=o[a])&&(e=(i?d(t,s,e):d(e))||e);return i&&e&&r(t,s,e),e};var x={};k(x,{SkdxMultiSelectTagList:()=>l});module.exports=b(x);var p=require("../internal/define.cjs"),h=require("../tag-group/TagGroup.cjs"),c=require("./MultiSelect.cjs");var l=class extends h.SkdxTagGroup{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.syncFromRoot()}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-multi-select"),this.root?.addEventListener(c.MULTI_SELECT_UPDATE_EVENT,this.onRootUpdate),this.syncFromRoot()}disconnectedCallback(){this.root?.removeEventListener(c.MULTI_SELECT_UPDATE_EVENT,this.onRootUpdate),super.disconnectedCallback()}syncFromRoot(){this.root&&(this.disabled=this.root.locked)}};l=m([(0,p.customElement)("skdx-multi-select-tag-list","multi-select","tag-list")],l);0&&(module.exports={SkdxMultiSelectTagList});

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

@@ -0,0 +1,40 @@
+import { SkdxTagGroup } from '../tag-group/TagGroup.cjs';
+/**
+ * `<skdx-multi-select-tag-list>` — the strip of tags standing for an
+ * `<skdx-multi-select>`'s current selection.
+ *
+ * This **is** an `<skdx-tag-group>` — the class, subclassed, not a copy of it.
+ * That buys the whole roving-tabindex behaviour unchanged: the entire strip is
+ * a single Tab stop, the arrow keys (plus Home/End) move between tags,
+ * `orientation` and `loop` apply, and removing a tag hands focus to its
+ * neighbour rather than dropping it on `<body>`. Reimplementing that here would
+ * have been the second copy of the hardest keyboard code in the package.
+ *
+ * Renders `role="list"` on this host, so it needs an `aria-label` saying what
+ * the tags are — `role="list"` has no implicit accessible name. `disabled` is
+ * not settable here: it comes from the root's `disabled` *or* its `readOnly`,
+ * since neither may remove a tag.
+ *
+ * @example
+ * ```html
+ * <skdx-multi-select-tag-list aria-label="Selected skills">
+ *   <skdx-multi-select-tag value="React">
+ *     React
+ *     <skdx-multi-select-tag-remove>×</skdx-multi-select-tag-remove>
+ *   </skdx-multi-select-tag>
+ * </skdx-multi-select-tag-list>
+ * ```
+ */
+export declare class SkdxMultiSelectTagList extends SkdxTagGroup {
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** A locked root means no tag may be removed, which is exactly what the group's own `disabled` already expresses. */
+    private syncFromRoot;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-multi-select-tag-list': SkdxMultiSelectTagList;
+    }
+}

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

@@ -0,0 +1,40 @@
+import { SkdxTagGroup } from '../tag-group/TagGroup.js';
+/**
+ * `<skdx-multi-select-tag-list>` — the strip of tags standing for an
+ * `<skdx-multi-select>`'s current selection.
+ *
+ * This **is** an `<skdx-tag-group>` — the class, subclassed, not a copy of it.
+ * That buys the whole roving-tabindex behaviour unchanged: the entire strip is
+ * a single Tab stop, the arrow keys (plus Home/End) move between tags,
+ * `orientation` and `loop` apply, and removing a tag hands focus to its
+ * neighbour rather than dropping it on `<body>`. Reimplementing that here would
+ * have been the second copy of the hardest keyboard code in the package.
+ *
+ * Renders `role="list"` on this host, so it needs an `aria-label` saying what
+ * the tags are — `role="list"` has no implicit accessible name. `disabled` is
+ * not settable here: it comes from the root's `disabled` *or* its `readOnly`,
+ * since neither may remove a tag.
+ *
+ * @example
+ * ```html
+ * <skdx-multi-select-tag-list aria-label="Selected skills">
+ *   <skdx-multi-select-tag value="React">
+ *     React
+ *     <skdx-multi-select-tag-remove>×</skdx-multi-select-tag-remove>
+ *   </skdx-multi-select-tag>
+ * </skdx-multi-select-tag-list>
+ * ```
+ */
+export declare class SkdxMultiSelectTagList extends SkdxTagGroup {
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** A locked root means no tag may be removed, which is exactly what the group's own `disabled` already expresses. */
+    private syncFromRoot;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-multi-select-tag-list': SkdxMultiSelectTagList;
+    }
+}

package/dist/multi-select/MultiSelectTagList.js

@@ -0,0 +1 @@
+var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var d=(i,e,l,o)=>{for(var t=o>1?void 0:o?m(e,l):e,r=i.length-1,a;r>=0;r--)(a=i[r])&&(t=(o?a(e,l,t):a(t))||t);return o&&t&&n(e,l,t),t};import{customElement as p}from"../internal/define.js";import{SkdxTagGroup as h}from"../tag-group/TagGroup.js";import{MULTI_SELECT_UPDATE_EVENT as c}from"./MultiSelect.js";var s=class extends h{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.syncFromRoot()}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-multi-select"),this.root?.addEventListener(c,this.onRootUpdate),this.syncFromRoot()}disconnectedCallback(){this.root?.removeEventListener(c,this.onRootUpdate),super.disconnectedCallback()}syncFromRoot(){this.root&&(this.disabled=this.root.locked)}};s=d([p("skdx-multi-select-tag-list","multi-select","tag-list")],s);export{s as SkdxMultiSelectTagList};

package/dist/multi-select/MultiSelectTagRemove.cjs

@@ -0,0 +1,17 @@
+"use strict";var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var E=(l,e)=>{for(var s in e)n(l,s,{get:e[s],enumerable:!0})},y=(l,e,s,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of v(e))!k.call(l,t)&&t!==s&&n(l,t,{get:()=>e[t],enumerable:!(a=p(e,t))||a.enumerable});return l};var f=l=>y(n({},"__esModule",{value:!0}),l),m=(l,e,s,a)=>{for(var t=a>1?void 0:a?p(e,s):e,d=l.length-1,c;d>=0;d--)(c=l[d])&&(t=(a?c(e,s,t):c(t))||t);return a&&t&&n(e,s,t),t};var C={};E(C,{SkdxMultiSelectTagRemove:()=>r});module.exports=f(C);var i=require("lit"),b=require("lit/decorators.js"),u=require("../internal/aria-label.cjs"),g=require("../internal/define.cjs"),o=require("../internal/styles.cjs"),h=require("./MultiSelectTag.cjs");var r=class extends i.LitElement{constructor(){super(...arguments);this.tag=null;this.label=null;this.handleUpdate=()=>this.requestUpdate();this.handleClick=()=>this.tag?.requestDelete()}connectedCallback(){if(super.connectedCallback(),this.label??(this.label=(0,u.takeHostAriaLabel)(this)),this.tag=this.closest("skdx-multi-select-tag"),!this.tag)throw new Error("<skdx-multi-select-tag-remove> must be used inside <skdx-multi-select-tag>.");this.tag.addEventListener(h.MULTI_SELECT_TAG_UPDATE_EVENT,this.handleUpdate)}disconnectedCallback(){this.tag?.removeEventListener(h.MULTI_SELECT_TAG_UPDATE_EVENT,this.handleUpdate),super.disconnectedCallback()}render(){let s=this.tag,a=this.label??`Remove ${s?.value??""}`.trim(),t=!!s?.isDisabled;return i.html`
+      <button
+        part="remove"
+        type="button"
+        tabindex="-1"
+        aria-label=${a}
+        ?disabled=${t}
+        data-disabled=${t?"":i.nothing}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};r.styles=[o.resetNativeControl,o.hiddenHostStyles,i.css`
+      :host {
+        display: inline-block;
+      }
+    `,o.controlBoxOnHost],m([(0,b.property)({type:String})],r.prototype,"label",2),r=m([(0,g.customElement)("skdx-multi-select-tag-remove","multi-select","tag-remove")],r);0&&(module.exports={SkdxMultiSelectTagRemove});

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

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-multi-select-tag-remove>` — removes its closest
+ * `<skdx-multi-select-tag>`'s value from the selection on click. Renders a
+ * native `<button type="button">` in shadow DOM named `Remove <value>` from the
+ * tag's own value, so a strip of them reads as "Remove React", "Remove
+ * TypeScript" rather than a row of identical "Remove" buttons.
+ *
+ * It is deliberately **not** a Tab stop: the tag list has a single Tab stop and
+ * the keyboard path to removal is `Delete`/`Backspace` on the tag itself.
+ * Tabbing through every tag *and* every remove button is exactly what the
+ * roving tab stop exists to avoid. Disabled whenever the root is `disabled` or
+ * `readOnly`. Must be used inside `<skdx-multi-select-tag>`.
+ *
+ * @example
+ * ```html
+ * <skdx-multi-select-tag value="React">
+ *   React
+ *   <skdx-multi-select-tag-remove>×</skdx-multi-select-tag-remove>
+ * </skdx-multi-select-tag>
+ * ```
+ *
+ * @csspart remove - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxMultiSelectTagRemove extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private tag;
+    /**
+     * Accessible name for the inner `<button>`, replacing the generated
+     * `Remove <value>`. Also where a consumer-written host `aria-label` lands:
+     * left where it was written it named nothing — the host has no role at all,
+     * which is a prohibited use of `aria-label` (axe's `aria-prohibited-attr`) —
+     * and the generated name silently won on the element that does have the
+     * role. Declared as a property so it is settable without the host-attribute
+     * detour and so the manifest lists it; an explicit `label` wins over a host
+     * `aria-label`, which is only read once, at connect.
+     * @default null — keeps `` `Remove ${value}` ``
+     */
+    label: string | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleUpdate;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-multi-select-tag-remove': SkdxMultiSelectTagRemove;
+    }
+}

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

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-multi-select-tag-remove>` — removes its closest
+ * `<skdx-multi-select-tag>`'s value from the selection on click. Renders a
+ * native `<button type="button">` in shadow DOM named `Remove <value>` from the
+ * tag's own value, so a strip of them reads as "Remove React", "Remove
+ * TypeScript" rather than a row of identical "Remove" buttons.
+ *
+ * It is deliberately **not** a Tab stop: the tag list has a single Tab stop and
+ * the keyboard path to removal is `Delete`/`Backspace` on the tag itself.
+ * Tabbing through every tag *and* every remove button is exactly what the
+ * roving tab stop exists to avoid. Disabled whenever the root is `disabled` or
+ * `readOnly`. Must be used inside `<skdx-multi-select-tag>`.
+ *
+ * @example
+ * ```html
+ * <skdx-multi-select-tag value="React">
+ *   React
+ *   <skdx-multi-select-tag-remove>×</skdx-multi-select-tag-remove>
+ * </skdx-multi-select-tag>
+ * ```
+ *
+ * @csspart remove - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxMultiSelectTagRemove extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private tag;
+    /**
+     * Accessible name for the inner `<button>`, replacing the generated
+     * `Remove <value>`. Also where a consumer-written host `aria-label` lands:
+     * left where it was written it named nothing — the host has no role at all,
+     * which is a prohibited use of `aria-label` (axe's `aria-prohibited-attr`) —
+     * and the generated name silently won on the element that does have the
+     * role. Declared as a property so it is settable without the host-attribute
+     * detour and so the manifest lists it; an explicit `label` wins over a host
+     * `aria-label`, which is only read once, at connect.
+     * @default null — keeps `` `Remove ${value}` ``
+     */
+    label: string | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleUpdate;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-multi-select-tag-remove': SkdxMultiSelectTagRemove;
+    }
+}

package/dist/multi-select/MultiSelectTagRemove.js

@@ -0,0 +1,17 @@
+var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var n=(i,a,e,l)=>{for(var t=l>1?void 0:l?m(a,e):a,r=i.length-1,o;r>=0;r--)(o=i[r])&&(t=(l?o(a,e,t):o(t))||t);return l&&t&&c(a,e,t),t};import{css as h,html as p,LitElement as b,nothing as u}from"lit";import{property as g}from"lit/decorators.js";import{takeHostAriaLabel as v}from"../internal/aria-label.js";import{customElement as k}from"../internal/define.js";import{controlBoxOnHost as E,hiddenHostStyles as y,resetNativeControl as f}from"../internal/styles.js";import{MULTI_SELECT_TAG_UPDATE_EVENT as d}from"./MultiSelectTag.js";var s=class extends b{constructor(){super(...arguments);this.tag=null;this.label=null;this.handleUpdate=()=>this.requestUpdate();this.handleClick=()=>this.tag?.requestDelete()}connectedCallback(){if(super.connectedCallback(),this.label??(this.label=v(this)),this.tag=this.closest("skdx-multi-select-tag"),!this.tag)throw new Error("<skdx-multi-select-tag-remove> must be used inside <skdx-multi-select-tag>.");this.tag.addEventListener(d,this.handleUpdate)}disconnectedCallback(){this.tag?.removeEventListener(d,this.handleUpdate),super.disconnectedCallback()}render(){let e=this.tag,l=this.label??`Remove ${e?.value??""}`.trim(),t=!!e?.isDisabled;return p`
+      <button
+        part="remove"
+        type="button"
+        tabindex="-1"
+        aria-label=${l}
+        ?disabled=${t}
+        data-disabled=${t?"":u}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};s.styles=[f,y,h`
+      :host {
+        display: inline-block;
+      }
+    `,E],n([g({type:String})],s.prototype,"label",2),s=n([k("skdx-multi-select-tag-remove","multi-select","tag-remove")],s);export{s as SkdxMultiSelectTagRemove};

package/dist/multi-select/index.cjs

@@ -0,0 +1 @@
+"use strict";var r=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var g=(e,t)=>{for(var o in t)r(e,o,{get:t[o],enumerable:!0})},I=(e,t,o,x)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of a(t))!n.call(e,l)&&l!==o&&r(e,l,{get:()=>t[l],enumerable:!(x=k(t,l))||x.enumerable});return e};var L=e=>I(r({},"__esModule",{value:!0}),e);var T={};g(T,{SkdxMultiSelect:()=>S.SkdxMultiSelect,SkdxMultiSelectContent:()=>p.SkdxMultiSelectContent,SkdxMultiSelectInput:()=>i.SkdxMultiSelectInput,SkdxMultiSelectItem:()=>f.SkdxMultiSelectItem,SkdxMultiSelectList:()=>M.SkdxMultiSelectList,SkdxMultiSelectPortal:()=>u.SkdxMultiSelectPortal,SkdxMultiSelectTag:()=>m.SkdxMultiSelectTag,SkdxMultiSelectTagList:()=>c.SkdxMultiSelectTagList,SkdxMultiSelectTagRemove:()=>d.SkdxMultiSelectTagRemove,defaultGetSelectionLabel:()=>S.defaultGetSelectionLabel});module.exports=L(T);var S=require("./MultiSelect.cjs"),i=require("./MultiSelectInput.cjs"),u=require("./MultiSelectPortal.cjs"),c=require("./MultiSelectTagList.cjs"),m=require("./MultiSelectTag.cjs"),d=require("./MultiSelectTagRemove.cjs"),p=require("./MultiSelectContent.cjs"),M=require("./MultiSelectList.cjs"),f=require("./MultiSelectItem.cjs");0&&(module.exports={SkdxMultiSelect,SkdxMultiSelectContent,SkdxMultiSelectInput,SkdxMultiSelectItem,SkdxMultiSelectList,SkdxMultiSelectPortal,SkdxMultiSelectTag,SkdxMultiSelectTagList,SkdxMultiSelectTagRemove,defaultGetSelectionLabel});

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

@@ -0,0 +1,10 @@
+export { SkdxMultiSelect, defaultGetSelectionLabel } from './MultiSelect.cjs';
+export type { SkdxMultiSelectFilter, SkdxMultiSelectItemEntry } from './MultiSelect.cjs';
+export { SkdxMultiSelectInput } from './MultiSelectInput.cjs';
+export { SkdxMultiSelectPortal } from './MultiSelectPortal.cjs';
+export { SkdxMultiSelectTagList } from './MultiSelectTagList.cjs';
+export { SkdxMultiSelectTag } from './MultiSelectTag.cjs';
+export { SkdxMultiSelectTagRemove } from './MultiSelectTagRemove.cjs';
+export { SkdxMultiSelectContent } from './MultiSelectContent.cjs';
+export { SkdxMultiSelectList } from './MultiSelectList.cjs';
+export { SkdxMultiSelectItem } from './MultiSelectItem.cjs';

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

@@ -0,0 +1,10 @@
+export { SkdxMultiSelect, defaultGetSelectionLabel } from './MultiSelect.js';
+export type { SkdxMultiSelectFilter, SkdxMultiSelectItemEntry } from './MultiSelect.js';
+export { SkdxMultiSelectInput } from './MultiSelectInput.js';
+export { SkdxMultiSelectPortal } from './MultiSelectPortal.js';
+export { SkdxMultiSelectTagList } from './MultiSelectTagList.js';
+export { SkdxMultiSelectTag } from './MultiSelectTag.js';
+export { SkdxMultiSelectTagRemove } from './MultiSelectTagRemove.js';
+export { SkdxMultiSelectContent } from './MultiSelectContent.js';
+export { SkdxMultiSelectList } from './MultiSelectList.js';
+export { SkdxMultiSelectItem } from './MultiSelectItem.js';

package/dist/multi-select/index.js

@@ -0,0 +1 @@
+import{SkdxMultiSelect as l,defaultGetSelectionLabel as o}from"./MultiSelect.js";import{SkdxMultiSelectInput as r}from"./MultiSelectInput.js";import{SkdxMultiSelectPortal as i}from"./MultiSelectPortal.js";import{SkdxMultiSelectTagList as c}from"./MultiSelectTagList.js";import{SkdxMultiSelectTag as d}from"./MultiSelectTag.js";import{SkdxMultiSelectTagRemove as M}from"./MultiSelectTagRemove.js";import{SkdxMultiSelectContent as k}from"./MultiSelectContent.js";import{SkdxMultiSelectList as n}from"./MultiSelectList.js";import{SkdxMultiSelectItem as I}from"./MultiSelectItem.js";export{l as SkdxMultiSelect,k as SkdxMultiSelectContent,r as SkdxMultiSelectInput,I as SkdxMultiSelectItem,n as SkdxMultiSelectList,i as SkdxMultiSelectPortal,d as SkdxMultiSelectTag,c as SkdxMultiSelectTagList,M as SkdxMultiSelectTagRemove,o as defaultGetSelectionLabel};

package/dist/navigation-menu/NavigationMenu.cjs

@@ -0,0 +1,5 @@
+"use strict";var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var v=(r,t)=>{for(var e in t)n(r,e,{get:t[e],enumerable:!0})},y=(r,t,e,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of h(t))!d.call(r,i)&&i!==e&&n(r,i,{get:()=>t[i],enumerable:!(o=p(t,i))||o.enumerable});return r};var b=r=>y(n({},"__esModule",{value:!0}),r),l=(r,t,e,o)=>{for(var i=o>1?void 0:o?p(t,e):t,u=r.length-1,c;u>=0;u--)(c=r[u])&&(i=(o?c(t,e,i):c(i))||i);return o&&i&&n(t,e,i),i};var f={};v(f,{SkdxNavigationMenu:()=>s});module.exports=b(f);var a=require("lit"),m=require("lit/decorators.js"),T=require("../internal/define.cjs");var D=150,s=class extends a.LitElement{constructor(){super(...arguments);this.value="";this.delayDuration=200;this.skipDelayDuration=300;this.isOpenDelayed=!0}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","navigation"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Main")}disconnectedCallback(){clearTimeout(this.openTimer),clearTimeout(this.closeTimer),clearTimeout(this.skipDelayTimer),super.disconnectedCallback()}setValue(e){this.value=e,clearTimeout(this.skipDelayTimer),e?this.isOpenDelayed=!1:this.skipDelayTimer=setTimeout(()=>this.isOpenDelayed=!0,this.skipDelayDuration),this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("skdx-navigation-menu-internal-update",{composed:!0}))}onTriggerEnter(e){clearTimeout(this.closeTimer),clearTimeout(this.openTimer),this.isOpenDelayed?this.openTimer=setTimeout(()=>this.setValue(e),this.delayDuration):this.setValue(e)}onTriggerLeave(){clearTimeout(this.openTimer),clearTimeout(this.closeTimer),this.closeTimer=setTimeout(()=>this.setValue(""),D)}onContentEnter(){clearTimeout(this.closeTimer)}onContentLeave(){this.onTriggerLeave()}onItemSelect(e){clearTimeout(this.openTimer),clearTimeout(this.closeTimer),this.setValue(e)}onClose(){clearTimeout(this.openTimer),clearTimeout(this.closeTimer),this.setValue("")}render(){return a.html`<slot></slot>`}};s.styles=a.css`
+    :host {
+      display: block;
+    }
+  `,l([(0,m.property)({type:String,reflect:!0})],s.prototype,"value",2),l([(0,m.property)({type:Number,attribute:"delay-duration"})],s.prototype,"delayDuration",2),l([(0,m.property)({type:Number,attribute:"skip-delay-duration"})],s.prototype,"skipDelayDuration",2),s=l([(0,T.customElement)("skdx-navigation-menu","navigation-menu","root")],s);0&&(module.exports={SkdxNavigationMenu});

package/dist/navigation-menu/NavigationMenu.d.cts

@@ -0,0 +1,125 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-navigation-menu>` — the Web Components implementation of the shared
+ * NavigationMenu contract (see `@skdx/shared`'s `navigationMenuContract`).
+ * A hover/click-driven navigation menu: owns which item's content is open
+ * and hands hover-intent timers down to descendant parts via
+ * `closest('skdx-navigation-menu')`. Sets `role="navigation"` and
+ * `aria-label="Main"` by default (override via `aria-label`).
+ *
+ * Opening a trigger is delayed by `delay-duration` on first hover, but once
+ * one item is open, moving to a sibling trigger within `skip-delay-duration`
+ * of closing switches instantly.
+ *
+ * @example
+ * ```html
+ * <skdx-navigation-menu>
+ *   <skdx-navigation-menu-list>
+ *     <skdx-navigation-menu-item value="products">
+ *       <skdx-navigation-menu-trigger>Products</skdx-navigation-menu-trigger>
+ *       <skdx-navigation-menu-content>
+ *         <skdx-navigation-menu-link href="/products/a">Product A</skdx-navigation-menu-link>
+ *       </skdx-navigation-menu-content>
+ *     </skdx-navigation-menu-item>
+ *   </skdx-navigation-menu-list>
+ *   <skdx-navigation-menu-indicator></skdx-navigation-menu-indicator>
+ * </skdx-navigation-menu>
+ * ```
+ *
+ * @fires value-change - Fired with the `value` of the item whose content is now open, or `''` when the menu closes.
+ */
+export declare class SkdxNavigationMenu extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Value of the currently open item's content (`""` when none are open). Listen for `value-change`. */
+    value: string;
+    /** Delay before hovering a trigger opens its content (ms). */
+    delayDuration: number;
+    /** Window after closing during which re-hovering a sibling trigger opens instantly (ms). */
+    skipDelayDuration: number;
+    private isOpenDelayed;
+    private openTimer?;
+    private closeTimer?;
+    private skipDelayTimer?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private setValue;
+    /**
+     * Starts (or, once already delay-skipped, immediately runs) the open timer for
+     * `itemValue`.
+     *
+     * A coordination call the parts make on their root, not consumer API — the
+     * shared contract declares no public methods here. It stays `public` to the
+     * compiler because `<skdx-navigation-menu-trigger>` and `<skdx-navigation-menu-
+     * content>` reach it across instances of different classes, which `protected`
+     * cannot express.
+     *
+     * @internal
+     */
+    onTriggerEnter(itemValue: string): void;
+    /**
+     * Starts the close timer.
+     *
+     * A coordination call the parts make on their root, not consumer API — the
+     * shared contract declares no public methods here. It stays `public` to the
+     * compiler because `<skdx-navigation-menu-trigger>` and `<skdx-navigation-menu-
+     * content>` reach it across instances of different classes, which `protected`
+     * cannot express.
+     *
+     * @internal
+     */
+    onTriggerLeave(): void;
+    /**
+     * Cancels a pending close (pointer moved from trigger onto content).
+     *
+     * A coordination call the parts make on their root, not consumer API — the
+     * shared contract declares no public methods here. It stays `public` to the
+     * compiler because `<skdx-navigation-menu-trigger>` and `<skdx-navigation-menu-
+     * content>` reach it across instances of different classes, which `protected`
+     * cannot express.
+     *
+     * @internal
+     */
+    onContentEnter(): void;
+    /**
+     * Same as {@link onTriggerLeave} — restarts the close timer.
+     *
+     * A coordination call the parts make on their root, not consumer API — the
+     * shared contract declares no public methods here. It stays `public` to the
+     * compiler because `<skdx-navigation-menu-trigger>` and `<skdx-navigation-menu-
+     * content>` reach it across instances of different classes, which `protected`
+     * cannot express.
+     *
+     * @internal
+     */
+    onContentLeave(): void;
+    /**
+     * Opens `itemValue` immediately (click/keyboard selection, not hover-delayed).
+     *
+     * A coordination call the parts make on their root, not consumer API — the
+     * shared contract declares no public methods here. It stays `public` to the
+     * compiler because `<skdx-navigation-menu-trigger>` and `<skdx-navigation-menu-
+     * content>` reach it across instances of different classes, which `protected`
+     * cannot express.
+     *
+     * @internal
+     */
+    onItemSelect(itemValue: string): void;
+    /**
+     * Closes whatever is open immediately.
+     *
+     * A coordination call the parts make on their root, not consumer API — the
+     * shared contract declares no public methods here. It stays `public` to the
+     * compiler because `<skdx-navigation-menu-trigger>` and `<skdx-navigation-menu-
+     * content>` reach it across instances of different classes, which `protected`
+     * cannot express.
+     *
+     * @internal
+     */
+    onClose(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-navigation-menu': SkdxNavigationMenu;
+    }
+}