@skdx/web-components 0.26.0

package/dist/internal/styles.js

@@ -0,0 +1,244 @@
+import{css as o,LitElement as h,unsafeCSS as p}from"lit";var x={...h.shadowRootOptions,delegatesFocus:!0},n=`
+  appearance: none;
+  background: none;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+  cursor: inherit;
+`,k=o`
+  button,
+  input,
+  select,
+  textarea {
+    ${p(n)}
+  }
+`,b=o`
+  :host {
+    position: relative;
+  }
+  :host > button,
+  :host > a,
+  :host > label {
+    display: inherit;
+    align-items: inherit;
+    justify-content: inherit;
+    gap: inherit;
+    flex: 1;
+    align-self: stretch;
+    min-width: 0;
+  }
+  :host > button::before,
+  :host > a::before,
+  :host > label::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+  }
+`,c=`@layer skdx-light-dom {
+  skdx-autocomplete-input,
+  skdx-combobox-input,
+  skdx-multi-select-input,
+  skdx-tree-select-input,
+  skdx-tree-select-item,
+  skdx-tree-select-tree { display: block; }
+
+  skdx-command-input,
+  skdx-date-picker-time-field,
+  skdx-label,
+  skdx-toast-region { display: contents; }
+
+  /* With the other four field inputs, not with the boxless hosts above: this
+     host is what wears .skdx-text-field__input, and that class is the whole
+     field surface \u2014 border, background, control height, padding (text-field.css
+     styles the input rather than the root precisely so a prefix icon or clear
+     button can sit inside the root). display:contents generates no box, so
+     none of it painted and the control rendered as bare reset text with the
+     clear button floating beside it. */
+  skdx-text-field-input { display: block; }
+
+  skdx-tree-select-trigger { display: inline-block; }
+
+  skdx-autocomplete-input input,
+  skdx-combobox-input input,
+  skdx-command-input input,
+  skdx-multi-select-input input,
+  skdx-password-input-field input,
+  skdx-text-field-input input,
+  skdx-tree-select-input input,
+  skdx-tree-select-trigger button {${n}  }
+
+  /* controlBoxOnHost, for the one field trigger that has no shadow root to
+     apply it in. The skin paints the host (.skdx-tree-select__trigger is the
+     full-width, control-height-md field box from _trigger.css), and React
+     paints that same class straight onto its <button>
+     (react/src/tree-select/TreeSelectTrigger.tsx). Without this the button was
+     a shrink-to-fit flex item sitting inside the field: the field looked right,
+     but the element that takes focus \u2014 and therefore the focus ring \u2014 hugged
+     the value text instead of the box. No ::before hit surface is needed the
+     way it is in a shadow root: the button now spans the host's content box,
+     so clicks land on it directly. */
+  skdx-tree-select-trigger button {
+    display: inherit;
+    align-items: inherit;
+    justify-content: inherit;
+    gap: inherit;
+    flex: 1;
+    align-self: stretch;
+    min-inline-size: 0;
+  }
+
+  /* Sizing, not reset: these sit inside a field box and are expected to fill
+     it. <skdx-text-field-input> joined them when it became a painted box above:
+     the skin's border and control height are on the host now, so its <input>
+     has to span that box or the text sits in a corner of the field and only
+     part of the field takes clicks. */
+  skdx-autocomplete-input input,
+  skdx-combobox-input input,
+  skdx-multi-select-input input,
+  skdx-text-field-input input,
+  skdx-tree-select-input input {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  /* The host owns the field's control height, so the input has to fill it
+     vertically too \u2014 otherwise the value sits on the box's top edge instead of
+     on its centre line. Only this one needs it: the other four are inside a
+     field box that sizes itself to its content row. */
+  skdx-text-field-input input {
+    height: 100%;
+  }
+
+  skdx-clipboard-input,
+  skdx-color-picker-area-thumb,
+  skdx-editable-input,
+  skdx-editable-textarea,
+  skdx-form-error-summary,
+  skdx-transfer-list-search { display: block; }
+
+  skdx-color-picker-format-select,
+  skdx-color-picker-input,
+  skdx-date-field,
+  skdx-date-picker-input,
+  skdx-number-field-input,
+  skdx-password-input-field,
+  skdx-pin-input-field,
+  skdx-tags-input-input,
+  skdx-time-field { display: inline-block; }
+
+  /* Not optional. The display rules above are author declarations, so they
+     outrank the UA's [hidden] { display: none } and would pin these elements
+     open \u2014 <skdx-editable-input>, <skdx-editable-textarea>,
+     <skdx-form-error-summary> and <skdx-transfer-list-search> all drive their
+     own visibility by assigning this.hidden, and would show their editor,
+     their empty summary and their search box at all times. This is what the
+     hiddenHostStyles these elements lost used to do from inside a shadow
+     root.
+
+     No backticks anywhere in this block: it lives inside a template literal,
+     where one would terminate the string. */
+  skdx-color-picker-area-thumb[hidden],
+  skdx-color-picker-format-select[hidden],
+  skdx-color-picker-input[hidden],
+  skdx-date-field[hidden],
+  skdx-editable-input[hidden],
+  skdx-editable-textarea[hidden],
+  skdx-form-error-summary[hidden],
+  skdx-time-field[hidden],
+  skdx-transfer-list-search[hidden] { display: none; }
+
+  skdx-clipboard-input input,
+  skdx-color-picker-format-select select,
+  skdx-color-picker-input input,
+  skdx-editable-input input,
+  skdx-editable-textarea textarea,
+  skdx-number-field-input input,
+  skdx-pin-input-field input,
+  skdx-tags-input-input input,
+  skdx-transfer-list-search input {${n}  }
+
+  /* Sizing, not reset: the skin paints the host, so the control has to fill it
+     rather than keep its intrinsic width \u2014 this is the rule
+     <skdx-color-picker-input> used to carry in its own static styles. */
+  skdx-clipboard-input input,
+  skdx-color-picker-input input,
+  skdx-editable-input input,
+  skdx-editable-textarea textarea,
+  skdx-number-field-input input,
+  skdx-password-input-field input,
+  skdx-pin-input-field input,
+  skdx-tags-input-input input,
+  skdx-transfer-list-search input {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  /* <skdx-pin-input-field> used to be excluded from the rule above, on the
+     reasoning that "a pin box is sized by the character width of the single
+     digit it holds, not by its container". That is true of the *box* and the
+     box is the host: pin-input.css gives :where(.skdx-pin-input__field) an
+     inline-size of --skdx-control-height-md and a block-size of
+     --skdx-control-height-lg. The rule governs the <input> *inside* that host,
+     which was left at a UA-intrinsic ~20-character width \u2014 225px measured in
+     Chromium, inside a 36px box. With text-align: center inherited from the
+     skin, the digit centred itself in the 225px input and landed ~112px to the
+     right of the box, outside it: a value of "12" rendered boxes that looked
+     empty. The block axis needs the same treatment for the same reason \u2014 a
+     30px-tall input inside a 42px box sits above the box's centre line \u2014 and
+     is scoped to this element because the other controls above sit in field
+     boxes whose height they are not meant to dictate. React has no equivalent
+     rule because its box *is* the <input>: the class goes straight on it
+     (react/src/pin-input/PinInputField.tsx), so the two builds only agree once
+     the control fills the host on both axes. */
+  skdx-pin-input-field input {
+    height: 100%;
+  }
+
+  /* Restores what <skdx-dialog-content> and <skdx-alert-dialog-content> lost when
+     their native <dialog> moved to the light DOM so the skin could reach it.
+     Their static styles went with the shadow root, and this pair is the part
+     that mattered: the open host spans the viewport but is click-through, so
+     the [role=dialog] element is not a 0x0 box that a11y tooling and Playwright
+     report as hidden, while clicks still land on the dialog itself. The dialog
+     re-arms pointer events because the host disowned them. */
+  skdx-dialog-content[data-state='open'],
+  skdx-alert-dialog-content[data-state='open'] {
+    display: block;
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  skdx-dialog-content > dialog,
+  skdx-alert-dialog-content > dialog {
+    pointer-events: auto;
+  }
+}`,a=!1;function f(){if(a||typeof document>"u")return;a=!0;let t=document.createElement("style");t.setAttribute("data-skdx-light-dom-styles",""),t.textContent=c,document.head.prepend(t)}var g=o`
+  :host([hidden]) {
+    display: none;
+  }
+`,r=`
+  slot {
+    vertical-align: inherit;
+    border-color: inherit;
+    border-radius: inherit;
+    mask-image: inherit;
+  }
+
+  :host(skdx-table-header),
+  :host(skdx-table-body),
+  :host(skdx-table-footer) {
+    vertical-align: middle;
+  }
+
+  :host(skdx-table-row),
+  :host(skdx-table-cell),
+  :host(skdx-table-header-cell),
+  :host(skdx-table-empty),
+  :host(skdx-table-expanded-row) {
+    vertical-align: inherit;
+  }
+`,l="data-skdx-inheritance",e;function m(t){let i=t.adoptedStyleSheets;if(e===void 0&&(e=null,typeof CSSStyleSheet=="function"&&i!==void 0))try{let d=new CSSStyleSheet;d.replaceSync(r),e=d}catch{}if(e!==null&&i!==void 0){if(i.includes(e))return;t.adoptedStyleSheets=[...i,e];return}if(t.querySelector(`style[${l}]`))return;let s=document.createElement("style");s.setAttribute(l,""),s.textContent=r,t.append(s)}export{m as adoptInheritanceStyles,b as controlBoxOnHost,x as delegatesFocusShadowRootOptions,g as hiddenHostStyles,f as installLightDomStyles,k as resetNativeControl};

package/dist/internal/typeahead.cjs

@@ -0,0 +1 @@
+"use strict";var s=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var l=(t,r)=>{for(var i in r)s(t,i,{get:r[i],enumerable:!0})},b=(t,r,i,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let e of T(r))!g.call(t,e)&&e!==i&&s(t,e,{get:()=>r[e],enumerable:!(n=c(r,e))||n.enumerable});return t};var y=t=>b(s({},"__esModule",{value:!0}),t);var x={};l(x,{Typeahead:()=>a,isTypeaheadKey:()=>p,itemText:()=>E});module.exports=y(x);function p(t){return t.key.length===1&&!t.ctrlKey&&!t.metaKey&&!t.altKey}function E(t){return t.getAttribute("data-text-value")??t.textContent??""}var a=class{constructor(){this.buffer=""}match(r,i,n){clearTimeout(this.timer),this.buffer+=r.toLowerCase(),this.timer=setTimeout(()=>this.buffer="",1e3);let e=this.buffer,u=e.length>1&&[...e].every(o=>o===e[0]),m=u?e[0]:e,h=u||e.length===1?n+1:n;for(let o=0;o<i.length;o++){let f=(Math.max(h,0)+o)%i.length;if(i[f].trim().toLowerCase().startsWith(m))return f}return-1}clear(){clearTimeout(this.timer),this.buffer=""}};0&&(module.exports={Typeahead,isTypeaheadKey,itemText});

package/dist/internal/typeahead.d.cts

@@ -0,0 +1,46 @@
+/** Whether a keydown is a plain printable character rather than a shortcut or a named key. */
+export declare function isTypeaheadKey(event: KeyboardEvent): boolean;
+/**
+ * The text typeahead matches an item against: its explicit `data-text-value`
+ * if it has one, else its rendered text.
+ *
+ * Raw `textContent` alone is wrong for any item that renders more than its
+ * label — an item with an item indicator reads as `"✓Apple"`, so typing `a`
+ * skips exactly the items that are currently selected. `data-text-value` is
+ * the escape hatch, and this is the one precedence rule every matcher in the
+ * repo follows.
+ *
+ * The items searched here are the light-DOM custom elements themselves
+ * (`<skdx-select-option>`, `<skdx-menu-item>`, …), so both halves read the light
+ * tree: the attribute sits on the host, and `textContent` is the host's own
+ * slotted children — indicator glyph included, which is the whole problem.
+ *
+ * @internal
+ */
+export declare function itemText(el: Element): string;
+/**
+ * The letter-key search a native `<select>` runs, owning the accumulating
+ * buffer and its timer so each element that needs one just holds an instance.
+ *
+ * Lifted verbatim out of `<skdx-select-trigger>`, which had to inline it while
+ * new util files were off-limits; `<skdx-listbox>` runs the identical search
+ * over its options, which is what made the copy worth hoisting. Not to be
+ * confused with `<skdx-select-content>`'s own weaker 500ms DOM typeahead, which
+ * still has its own inline copy.
+ */
+export declare class Typeahead {
+    private buffer;
+    private timer?;
+    /**
+     * Matches `key` against a *label collection* rather than against focusable
+     * DOM nodes. The 1s buffer means `"s"`, `"a"` in quick succession searches
+     * for `"sa"`, while the same two keys a second apart are two separate
+     * single-letter searches; repeating one letter cycles through the entries
+     * starting with it.
+     *
+     * @returns the index to move to, or `-1` for no match.
+     */
+    match(key: string, labels: string[], currentIndex: number): number;
+    /** Drops the pending buffer and its timer. Call from `disconnectedCallback`. */
+    clear(): void;
+}

package/dist/internal/typeahead.d.ts

@@ -0,0 +1,46 @@
+/** Whether a keydown is a plain printable character rather than a shortcut or a named key. */
+export declare function isTypeaheadKey(event: KeyboardEvent): boolean;
+/**
+ * The text typeahead matches an item against: its explicit `data-text-value`
+ * if it has one, else its rendered text.
+ *
+ * Raw `textContent` alone is wrong for any item that renders more than its
+ * label — an item with an item indicator reads as `"✓Apple"`, so typing `a`
+ * skips exactly the items that are currently selected. `data-text-value` is
+ * the escape hatch, and this is the one precedence rule every matcher in the
+ * repo follows.
+ *
+ * The items searched here are the light-DOM custom elements themselves
+ * (`<skdx-select-option>`, `<skdx-menu-item>`, …), so both halves read the light
+ * tree: the attribute sits on the host, and `textContent` is the host's own
+ * slotted children — indicator glyph included, which is the whole problem.
+ *
+ * @internal
+ */
+export declare function itemText(el: Element): string;
+/**
+ * The letter-key search a native `<select>` runs, owning the accumulating
+ * buffer and its timer so each element that needs one just holds an instance.
+ *
+ * Lifted verbatim out of `<skdx-select-trigger>`, which had to inline it while
+ * new util files were off-limits; `<skdx-listbox>` runs the identical search
+ * over its options, which is what made the copy worth hoisting. Not to be
+ * confused with `<skdx-select-content>`'s own weaker 500ms DOM typeahead, which
+ * still has its own inline copy.
+ */
+export declare class Typeahead {
+    private buffer;
+    private timer?;
+    /**
+     * Matches `key` against a *label collection* rather than against focusable
+     * DOM nodes. The 1s buffer means `"s"`, `"a"` in quick succession searches
+     * for `"sa"`, while the same two keys a second apart are two separate
+     * single-letter searches; repeating one letter cycles through the entries
+     * starting with it.
+     *
+     * @returns the index to move to, or `-1` for no match.
+     */
+    match(key: string, labels: string[], currentIndex: number): number;
+    /** Drops the pending buffer and its timer. Call from `disconnectedCallback`. */
+    clear(): void;
+}

package/dist/internal/typeahead.js

@@ -0,0 +1 @@
+function h(t){return t.key.length===1&&!t.ctrlKey&&!t.metaKey&&!t.altKey}function c(t){return t.getAttribute("data-text-value")??t.textContent??""}var a=class{constructor(){this.buffer=""}match(u,i,n){clearTimeout(this.timer),this.buffer+=u.toLowerCase(),this.timer=setTimeout(()=>this.buffer="",1e3);let e=this.buffer,o=e.length>1&&[...e].every(r=>r===e[0]),f=o?e[0]:e,m=o||e.length===1?n+1:n;for(let r=0;r<i.length;r++){let s=(Math.max(m,0)+r)%i.length;if(i[s].trim().toLowerCase().startsWith(f))return s}return-1}clear(){clearTimeout(this.timer),this.buffer=""}};export{a as Typeahead,h as isTypeaheadKey,c as itemText};

package/dist/kbd/Kbd.cjs

@@ -0,0 +1,9 @@
+"use strict";var n=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var h=(r,e)=>{for(var o in e)n(r,o,{get:e[o],enumerable:!0})},y=(r,e,o,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of b(e))!f.call(r,t)&&t!==o&&n(r,t,{get:()=>e[t],enumerable:!(s=a(e,t))||s.enumerable});return r};var E=r=>y(n({},"__esModule",{value:!0}),r),c=(r,e,o,s)=>{for(var t=s>1?void 0:s?a(e,o):e,m=r.length-1,d;m>=0;m--)(d=r[m])&&(t=(s?d(e,o,t):d(t))||t);return s&&t&&n(e,o,t),t};var g={};h(g,{SkdxKbd:()=>i});module.exports=E(g);var l=require("lit"),k=require("../internal/define.cjs"),p=require("../internal/styles.cjs");var i=class extends l.LitElement{render(){return l.html`<kbd part="kbd"><slot></slot></kbd>`}};i.styles=[p.hiddenHostStyles,l.css`
+      :host {
+        display: inline-block;
+      }
+      kbd {
+        font: inherit;
+        color: inherit;
+      }
+    `],i=c([(0,k.customElement)("skdx-kbd","kbd","root")],i);0&&(module.exports={SkdxKbd});

package/dist/kbd/Kbd.d.cts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-kbd>` — the Web Components implementation of the shared Kbd contract
+ * (see `@skdx/shared`'s `kbdContract`). A semantic keyboard-shortcut label
+ * with no state, ARIA, or behavior beyond the native `<kbd>` element it
+ * wraps in shadow DOM — sizing, font, and border/chip styling are
+ * brand-layer concerns applied via `skdx-kbd::part(kbd)`.
+ *
+ * @example
+ * ```html
+ * <p>Press <skdx-kbd>⌘</skdx-kbd> + <skdx-kbd>K</skdx-kbd> to open the command menu.</p>
+ * ```
+ *
+ * @csspart kbd - The native `<kbd>` element inside the shadow root.
+ */
+export declare class SkdxKbd extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-kbd': SkdxKbd;
+    }
+}

package/dist/kbd/Kbd.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-kbd>` — the Web Components implementation of the shared Kbd contract
+ * (see `@skdx/shared`'s `kbdContract`). A semantic keyboard-shortcut label
+ * with no state, ARIA, or behavior beyond the native `<kbd>` element it
+ * wraps in shadow DOM — sizing, font, and border/chip styling are
+ * brand-layer concerns applied via `skdx-kbd::part(kbd)`.
+ *
+ * @example
+ * ```html
+ * <p>Press <skdx-kbd>⌘</skdx-kbd> + <skdx-kbd>K</skdx-kbd> to open the command menu.</p>
+ * ```
+ *
+ * @csspart kbd - The native `<kbd>` element inside the shadow root.
+ */
+export declare class SkdxKbd extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-kbd': SkdxKbd;
+    }
+}

package/dist/kbd/Kbd.js

@@ -0,0 +1,9 @@
+var d=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var m=(s,r,i,o)=>{for(var e=o>1?void 0:o?a(r,i):r,l=s.length-1,n;l>=0;l--)(n=s[l])&&(e=(o?n(r,i,e):n(e))||e);return o&&e&&d(r,i,e),e};import{css as c,html as k,LitElement as p}from"lit";import{customElement as b}from"../internal/define.js";import{hiddenHostStyles as f}from"../internal/styles.js";var t=class extends p{render(){return k`<kbd part="kbd"><slot></slot></kbd>`}};t.styles=[f,c`
+      :host {
+        display: inline-block;
+      }
+      kbd {
+        font: inherit;
+        color: inherit;
+      }
+    `],t=m([b("skdx-kbd","kbd","root")],t);export{t as SkdxKbd};

package/dist/kbd/index.cjs

@@ -0,0 +1 @@
+"use strict";var b=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var t=(o,d)=>{for(var x in d)b(o,x,{get:d[x],enumerable:!0})},K=(o,d,x,e)=>{if(d&&typeof d=="object"||typeof d=="function")for(let r of m(d))!p.call(o,r)&&r!==x&&b(o,r,{get:()=>d[r],enumerable:!(e=k(d,r))||e.enumerable});return o};var S=o=>K(b({},"__esModule",{value:!0}),o);var a={};t(a,{SkdxKbd:()=>f.SkdxKbd});module.exports=S(a);var f=require("./Kbd.cjs");0&&(module.exports={SkdxKbd});

package/dist/kbd/index.d.cts

@@ -0,0 +1 @@
+export { SkdxKbd } from './Kbd.cjs';

package/dist/kbd/index.d.ts

@@ -0,0 +1 @@
+export { SkdxKbd } from './Kbd.js';

package/dist/kbd/index.js

@@ -0,0 +1 @@
+import{SkdxKbd as r}from"./Kbd.js";export{r as SkdxKbd};

package/dist/label/Label.cjs

@@ -0,0 +1 @@
+"use strict";var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var E=(r,e)=>{for(var t in e)s(r,t,{get:e[t],enumerable:!0})},v=(r,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of b(e))!u.call(r,l)&&l!==t&&s(r,l,{get:()=>e[l],enumerable:!(i=p(e,l))||i.enumerable});return r};var y=r=>v(s({},"__esModule",{value:!0}),r),d=(r,e,t,i)=>{for(var l=i>1?void 0:i?p(e,t):e,a=r.length-1,n;a>=0;a--)(n=r[a])&&(l=(i?n(e,t,l):n(l))||l);return i&&l&&s(e,t,l),l};var g={};E(g,{SkdxLabel:()=>o});module.exports=y(g);var h=require("lit"),f=require("lit/decorators.js"),c=require("../internal/define.cjs"),m=require("../internal/styles.cjs");var o=class extends h.LitElement{constructor(){super(...arguments);this.labelEl=document.createElement("label")}createRenderRoot(){return this}connectedCallback(){if(super.connectedCallback(),(0,m.installLightDomStyles)(),!this.labelEl.isConnected){for(this.labelEl.setAttribute("part","label"),this.labelEl.addEventListener("mousedown",t=>{!t.defaultPrevented&&t.detail>1&&t.preventDefault()});this.firstChild;)this.labelEl.append(this.firstChild);this.append(this.labelEl)}this.syncFor()}updated(t){t.has("for")&&this.syncFor()}syncFor(){this.for?this.labelEl.setAttribute("for",this.for):this.labelEl.removeAttribute("for")}};d([(0,f.property)({type:String})],o.prototype,"for",2),o=d([(0,c.customElement)("skdx-label","label","root")],o);0&&(module.exports={SkdxLabel});

package/dist/label/Label.d.cts

@@ -0,0 +1,55 @@
+import { LitElement, type PropertyValues } from 'lit';
+/**
+ * `<skdx-label>` — the Web Components implementation of the shared Label
+ * contract (see `@skdx/shared`'s `labelContract`). Renders **directly into
+ * light DOM** (`createRenderRoot()` returns `this` — no shadow root),
+ * unlike every other component in this package.
+ *
+ * A native `<label for="id">` resolves `for` only against elements in its
+ * own tree; inside a shadow root that means only that shadow root's own
+ * subtree, so a shadow-encapsulated label could never associate with a
+ * sibling light-DOM control by id — the same "IDREF can't cross a shadow
+ * boundary" issue `<skdx-dialog-content>` works around by moving
+ * `aria-labelledby` onto its host. Label has no host/inner split to move it
+ * to (the label *is* the whole element), so it has to render in light DOM
+ * instead. Consumers may also just nest the control inside `<skdx-label>`
+ * rather than using `for`/id — implicit wrapping association works either
+ * way, in light or shadow DOM.
+ *
+ * The inner `<label>` is built and its original slotted content moved into
+ * it imperatively (not via a `lit-html` template): with `createRenderRoot()`
+ * returning `this`, lit-html's light-DOM render only ever *appends* after
+ * whatever children already exist (it has no shadow-root `<slot>` to
+ * reproject through), so a declarative `html\`<label><slot></slot></label>\``
+ * here would land as an empty sibling *after* the original text instead of
+ * wrapping it.
+ *
+ * @example
+ * ```html
+ * <skdx-label for="email">Email</skdx-label>
+ * <input id="email" type="email" />
+ * ```
+ *
+ * @csspart label - The native `<label>` element. **`::part(label)` 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-label > label { … }`.
+ */
+export declare class SkdxLabel extends LitElement {
+    createRenderRoot(): this;
+    /**
+     * Associates with a form control by id, mirroring native `<label for>`.
+     * @default undefined
+     */
+    for?: string;
+    private readonly labelEl;
+    connectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    private syncFor;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-label': SkdxLabel;
+    }
+}

package/dist/label/Label.d.ts

@@ -0,0 +1,55 @@
+import { LitElement, type PropertyValues } from 'lit';
+/**
+ * `<skdx-label>` — the Web Components implementation of the shared Label
+ * contract (see `@skdx/shared`'s `labelContract`). Renders **directly into
+ * light DOM** (`createRenderRoot()` returns `this` — no shadow root),
+ * unlike every other component in this package.
+ *
+ * A native `<label for="id">` resolves `for` only against elements in its
+ * own tree; inside a shadow root that means only that shadow root's own
+ * subtree, so a shadow-encapsulated label could never associate with a
+ * sibling light-DOM control by id — the same "IDREF can't cross a shadow
+ * boundary" issue `<skdx-dialog-content>` works around by moving
+ * `aria-labelledby` onto its host. Label has no host/inner split to move it
+ * to (the label *is* the whole element), so it has to render in light DOM
+ * instead. Consumers may also just nest the control inside `<skdx-label>`
+ * rather than using `for`/id — implicit wrapping association works either
+ * way, in light or shadow DOM.
+ *
+ * The inner `<label>` is built and its original slotted content moved into
+ * it imperatively (not via a `lit-html` template): with `createRenderRoot()`
+ * returning `this`, lit-html's light-DOM render only ever *appends* after
+ * whatever children already exist (it has no shadow-root `<slot>` to
+ * reproject through), so a declarative `html\`<label><slot></slot></label>\``
+ * here would land as an empty sibling *after* the original text instead of
+ * wrapping it.
+ *
+ * @example
+ * ```html
+ * <skdx-label for="email">Email</skdx-label>
+ * <input id="email" type="email" />
+ * ```
+ *
+ * @csspart label - The native `<label>` element. **`::part(label)` 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-label > label { … }`.
+ */
+export declare class SkdxLabel extends LitElement {
+    createRenderRoot(): this;
+    /**
+     * Associates with a form control by id, mirroring native `<label for>`.
+     * @default undefined
+     */
+    for?: string;
+    private readonly labelEl;
+    connectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    private syncFor;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-label': SkdxLabel;
+    }
+}

package/dist/label/Label.js

@@ -0,0 +1 @@
+var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var n=(o,l,e,i)=>{for(var t=i>1?void 0:i?p(l,e):l,s=o.length-1,a;s>=0;s--)(a=o[s])&&(t=(i?a(l,e,t):a(t))||t);return i&&t&&d(l,e,t),t};import{LitElement as h}from"lit";import{property as f}from"lit/decorators.js";import{customElement as c}from"../internal/define.js";import{installLightDomStyles as m}from"../internal/styles.js";var r=class extends h{constructor(){super(...arguments);this.labelEl=document.createElement("label")}createRenderRoot(){return this}connectedCallback(){if(super.connectedCallback(),m(),!this.labelEl.isConnected){for(this.labelEl.setAttribute("part","label"),this.labelEl.addEventListener("mousedown",e=>{!e.defaultPrevented&&e.detail>1&&e.preventDefault()});this.firstChild;)this.labelEl.append(this.firstChild);this.append(this.labelEl)}this.syncFor()}updated(e){e.has("for")&&this.syncFor()}syncFor(){this.for?this.labelEl.setAttribute("for",this.for):this.labelEl.removeAttribute("for")}};n([f({type:String})],r.prototype,"for",2),r=n([c("skdx-label","label","root")],r);export{r as SkdxLabel};

package/dist/label/index.cjs

@@ -0,0 +1 @@
+"use strict";var a=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var m=(o,e)=>{for(var x in e)a(o,x,{get:e[x],enumerable:!0})},p=(o,e,x,b)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of k(e))!l.call(o,r)&&r!==x&&a(o,r,{get:()=>e[r],enumerable:!(b=f(e,r))||b.enumerable});return o};var t=o=>p(a({},"__esModule",{value:!0}),o);var L={};m(L,{SkdxLabel:()=>d.SkdxLabel});module.exports=t(L);var d=require("./Label.cjs");0&&(module.exports={SkdxLabel});

package/dist/label/index.d.cts

@@ -0,0 +1 @@
+export { SkdxLabel } from './Label.cjs';

package/dist/label/index.d.ts

@@ -0,0 +1 @@
+export { SkdxLabel } from './Label.js';

package/dist/label/index.js

@@ -0,0 +1 @@
+import{SkdxLabel as r}from"./Label.js";export{r as SkdxLabel};

package/dist/listbox/Listbox.cjs

@@ -0,0 +1,5 @@
+"use strict";var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var A=Object.prototype.hasOwnProperty;var E=(i,t)=>{for(var e in t)c(i,e,{get:t[e],enumerable:!0})},w=(i,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of g(t))!A.call(i,l)&&l!==e&&c(i,l,{get:()=>t[l],enumerable:!(r=m(t,l))||r.enumerable});return i};var k=i=>w(c({},"__esModule",{value:!0}),i),n=(i,t,e,r)=>{for(var l=r>1?void 0:r?m(t,e):t,a=i.length-1,u;a>=0;a--)(u=i[a])&&(l=(r?u(t,e,l):u(l))||l);return r&&l&&c(t,e,l),l};var C={};E(C,{OPTION_SELECTOR:()=>y,SkdxListbox:()=>s,findListboxRoot:()=>V});module.exports=k(C);var d=require("lit"),o=require("lit/decorators.js"),v=require("../internal/define.cjs"),h=require("../internal/selection.cjs"),b=require("../internal/styles.cjs"),p=require("../internal/typeahead.cjs");var y='[role="option"]:not([data-disabled])';function V(i){for(let t=i.parentElement;t!==null;t=t.parentElement)if(t instanceof s||t.localName==="skdx-listbox")return t;return null}var f={fromAttribute:i=>i??void 0,toAttribute:i=>Array.isArray(i)||i===void 0?null:i},s=class extends d.LitElement{constructor(){super(...arguments);this.multiple=!1;this.disabled=!1;this.activeValue=null;this.typeahead=new p.Typeahead;this.handleKeyDown=e=>{let r=this.options,l=r.indexOf(e.target);if(e.key==="ArrowDown"||e.key==="ArrowUp"){if(e.preventDefault(),r.length===0)return;let u=e.key==="ArrowDown"?1:-1;r[Math.min(r.length-1,Math.max(0,l+u))]?.focus();return}if(e.key==="Home"||e.key==="End"){e.preventDefault(),(e.key==="Home"?r[0]:r[r.length-1])?.focus();return}if(e.defaultPrevented||!(0,p.isTypeaheadKey)(e))return;let a=this.typeahead.match(e.key,r.map(x),l);a!==-1&&(e.preventDefault(),r[a].focus())};this.handleSlotChange=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.setAttribute("role","listbox"),this.addEventListener("keydown",this.handleKeyDown),this.syncHostState()}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),this.typeahead.clear(),super.disconnectedCallback()}willUpdate(){this.hasUpdated||(this.value??(this.value=this.defaultValue)),this.activeValue===null&&this.seedActiveValue()}updated(e){this.syncHostState(),e.size>0&&this.dispatchEvent(new CustomEvent("skdx-listbox-internal-update"))}syncHostState(){this.multiple?(this.setAttribute("aria-multiselectable","true"),this.setAttribute("data-multiple","")):(this.removeAttribute("aria-multiselectable"),this.removeAttribute("data-multiple")),this.disabled?(this.setAttribute("aria-disabled","true"),this.setAttribute("data-disabled","")):(this.removeAttribute("aria-disabled"),this.removeAttribute("data-disabled"))}seedActiveValue(){let e=this.options,l=(e.find(a=>this.isSelected(a.getAttribute("data-value")??""))??e[0])?.getAttribute("data-value");l&&(this.activeValue=l)}get options(){return Array.from(this.querySelectorAll(y))}get selectedValues(){return(0,h.toValues)(this.value)}isSelected(e){return this.selectedValues.includes(e)}selectItem(e){let r=(0,h.nextSelection)(this.selectedValues,e,this.multiple);this.value=r,this.dispatchEvent(new CustomEvent("value-change",{detail:r,bubbles:!0,composed:!0}))}setActiveValue(e){this.activeValue=e}render(){return d.html`<slot @slotchange=${this.handleSlotChange}></slot>`}};s.styles=[b.hiddenHostStyles,d.css`
+      :host {
+        display: block;
+      }
+    `],n([(0,o.property)({converter:f,reflect:!0})],s.prototype,"value",2),n([(0,o.property)({converter:f,attribute:"default-value"})],s.prototype,"defaultValue",2),n([(0,o.property)({type:Boolean,reflect:!0})],s.prototype,"multiple",2),n([(0,o.property)({type:Boolean,reflect:!0})],s.prototype,"disabled",2),n([(0,o.state)()],s.prototype,"activeValue",2),s=n([(0,v.customElement)("skdx-listbox","listbox","root")],s);function x(i){return i.getAttribute("data-text-value")??i.textContent??""}0&&(module.exports={OPTION_SELECTOR,SkdxListbox,findListboxRoot});