@skdx/web-components 0.28.0 → 0.29.0

package/dist/combobox/ComboboxInput.cjs

@@ -1,31 +1,31 @@
-"use strict";var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var x=(r,a)=>{for(var e in a)d(r,e,{get:a[e],enumerable:!0})},$=(r,a,e,t)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of g(a))!k.call(r,o)&&o!==e&&d(r,o,{get:()=>a[o],enumerable:!(t=u(a,o))||t.enumerable});return r};var E=r=>$(d({},"__esModule",{value:!0}),r),c=(r,a,e,t)=>{for(var o=t>1?void 0:t?u(a,e):a,n=r.length-1,l;n>=0;n--)(l=r[n])&&(o=(t?l(a,e,o):l(o))||o);return t&&o&&d(a,e,o),o};var D={};x(D,{SkdxComboboxInput:()=>s});module.exports=E(D);var i=require("lit"),h=require("lit/decorators.js"),f=require("../internal/aria-label.cjs"),p=require("../internal/define.cjs"),m=require("../internal/part.cjs"),v=require("../internal/styles.cjs");var O=new Set(["Home","End","PageUp","PageDown"]),s=class extends i.LitElement{constructor(){super(...arguments);this.placeholder="";this.root=null;this.label=null;this.onUpdate=()=>this.requestUpdate();this.handleInput=e=>{let t=this.root;t&&(t.setInputValue(e.target.value),t.open||t.setOpen(!0))};this.handleFocusOut=e=>{let t=this.root;if(!t)return;let o=e.relatedTarget;o&&(this.contains(o)||t.contentEl?.contains(o))||t.reconcileDraftText()};this.handleClick=()=>{let e=this.root;!e||e.openOn==="type"||e.readOnly||e.open||e.setOpen(!0)};this.handleFocus=()=>{let e=this.root;!e||e.openOn!=="focus"||e.readOnly||e.open||e.setOpen(!0)};this.handleKeyDown=e=>{let t=this.root;if(t)if(e.altKey&&e.key==="ArrowDown")e.preventDefault(),t.open||t.setOpen(!0);else if(e.altKey&&e.key==="ArrowUp")e.preventDefault(),t.activeId&&this.commitActive(),t.open&&t.setOpen(!1);else 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(O.has(e.key)&&t.open){e.preventDefault();let o=this.options(),n=e.key==="Home"||e.key==="PageUp";this.activate(n?o[0]:o[o.length-1])}else e.key==="Enter"?t.activeId?(e.preventDefault(),this.commitActive()):t.allowCustomValue&&t.inputValue!==""?(e.preventDefault(),t.selectItem(t.inputValue,t.inputValue,"keyboard")):t.open&&t.setOpen(!1):e.key==="Escape"&&t.open&&!t.contentEl&&(e.preventDefault(),t.setOpen(!1))}}createRenderRoot(){return this}focus(e){this.querySelector("input")?.focus(e)}connectedCallback(){super.connectedCallback(),this.label??(this.label=(0,f.takeHostAriaLabel)(this)),this.root=this.closest("skdx-combobox"),this.root?.addEventListener("skdx-combobox-internal-update",this.onUpdate),this.root&&(0,p.whenUpgraded)(this.root,()=>{this.root&&(this.root.inputHost=this)}),(0,v.installLightDomStyles)()}disconnectedCallback(){this.root?.removeEventListener("skdx-combobox-internal-update",this.onUpdate),super.disconnectedCallback()}updated(){let e=this.root;(0,m.reflectHostState)(this,{"data-invalid":e?.invalid?"":null,"data-readonly":e?.readOnly?"":null,"data-loading":e?.loading?"":null,"data-multiple":e?.multiple?"":null})}options(){return this.root?.visibleOptions()??[]}activate(e){e&&(this.root?.setActiveId(e.id,"keyboard"),e.scrollIntoView?.({block:"nearest"}))}moveActive(e){let t=this.root;if(!t)return;let o=this.options();if(o.length===0)return;let n=o.findIndex(b=>b.id===t.activeId),l=n===-1?e===1?-1:0:n,y=t.loop?(l+e+o.length)%o.length:Math.min(o.length-1,Math.max(0,l+e));this.activate(o[y])}commitActive(){let e=this.root;if(!e?.activeId)return;let t=e.getItem(e.activeId);t&&e.selectItem(t.value,t.text||t.value,"keyboard")}render(){let e=this.root,t=e?.open??!1;return i.html`
+"use strict";var u=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var O=Object.prototype.hasOwnProperty;var I=(a,o)=>{for(var e in o)u(a,e,{get:o[e],enumerable:!0})},k=(a,o,e,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of E(o))!O.call(a,i)&&i!==e&&u(a,i,{get:()=>o[i],enumerable:!(t=f(o,i))||t.enumerable});return a};var $=a=>k(u({},"__esModule",{value:!0}),a),d=(a,o,e,t)=>{for(var i=t>1?void 0:t?f(o,e):o,s=a.length-1,r;s>=0;s--)(r=a[s])&&(i=(t?r(o,e,i):r(i))||i);return t&&i&&u(o,e,i),i};var w={};I(w,{SkdxComboboxInput:()=>l});module.exports=$(w);var n=require("lit"),p=require("lit/decorators.js"),v=require("../internal/aria-label.cjs"),h=require("../internal/define.cjs"),m=require("../internal/light-dom-styles.cjs"),y=require("../internal/part.cjs"),c=require("./family.cjs");var x=new Set(["Home","End","PageUp","PageDown"]),l=class extends n.LitElement{constructor(){super(...arguments);this.placeholder="";this.root=null;this.label=null;this.onUpdate=()=>this.requestUpdate();this.handleInput=e=>{let t=this.root;t&&(t.setInputValue(e.target.value),t.open||t.setOpen(!0))};this.handleFocusOut=e=>{let t=this.root;if(!t)return;let i=e.relatedTarget;i&&(this.contains(i)||t.contentEl?.contains(i))||t.reconcileDraftText()};this.handleClick=()=>{let e=this.root;!e||e.openOn==="type"||e.readOnly||e.open||e.setOpen(!0)};this.handleFocus=()=>{let e=this.root;!e||e.openOn!=="focus"||e.readOnly||e.open||e.setOpen(!0)};this.handleKeyDown=e=>{let t=this.root;t&&(e.key==="ArrowDown"?(e.preventDefault(),this.onArrowDown(t,e.altKey)):e.key==="ArrowUp"?(e.preventDefault(),this.onArrowUp(t,e.altKey)):x.has(e.key)&&t.open?this.onEdgeKey(e):e.key==="Enter"?this.onEnter(e,t):e.key==="Escape"&&t.open&&!t.contentEl&&(e.preventDefault(),t.setOpen(!1)))}}createRenderRoot(){return this}focus(e){this.querySelector("input")?.focus(e)}connectedCallback(){super.connectedCallback(),this.label??(this.label=(0,v.takeHostAriaLabel)(this)),this.root=c.COMBOBOX_FAMILY.root(this),this.root?.addEventListener(c.COMBOBOX_FAMILY.event,this.onUpdate),this.root&&(0,h.whenUpgraded)(this.root,()=>{this.root&&(this.root.inputHost=this)}),(0,m.installLightDomStyles)()}disconnectedCallback(){this.root?.removeEventListener(c.COMBOBOX_FAMILY.event,this.onUpdate),super.disconnectedCallback()}updated(){let e=this.root;(0,y.reflectHostState)(this,{"data-invalid":e?.invalid?"":null,"data-readonly":e?.readOnly?"":null,"data-loading":e?.loading?"":null,"data-multiple":e?.multiple?"":null})}options(){return this.root?.visibleOptions()??[]}activate(e){e&&(this.root?.setActiveId(e.id,"keyboard"),e.scrollIntoView?.({block:"nearest"}))}moveActive(e){let t=this.root;if(!t)return;let i=this.options();if(i.length===0)return;let r=i.findIndex(g=>g.id===t.activeId);r===-1&&(r=e===1?-1:0);let b=t.loop?(r+e+i.length)%i.length:Math.min(i.length-1,Math.max(0,r+e));this.activate(i[b])}commitActive(){let e=this.root;if(!e?.activeId)return;let t=e.getItem(e.activeId);t&&e.selectItem(t.value,t.text||t.value,"keyboard")}onArrowDown(e,t){if(t){e.open||e.setOpen(!0);return}e.open?this.moveActive(1):e.openWithHighlight("first")}onArrowUp(e,t){if(t){e.activeId&&this.commitActive(),e.open&&e.setOpen(!1);return}e.open?this.moveActive(-1):e.openWithHighlight("last")}onEdgeKey(e){e.preventDefault();let t=this.options(),i=e.key==="Home"||e.key==="PageUp";this.activate(i?t[0]:t[t.length-1])}onEnter(e,t){t.activeId?(e.preventDefault(),this.commitActive()):t.allowCustomValue&&t.inputValue!==""?(e.preventDefault(),t.selectItem(t.inputValue,t.inputValue,"keyboard")):t.open&&t.setOpen(!1)}renderState(){let e=this.root;return e?{open:e.open,inputValue:e.inputValue,contentId:e.contentId,activeId:e.activeId,readOnly:e.readOnly,disabled:e.disabled,required:e.required,invalid:e.invalid,loading:e.loading,multiple:e.multiple}:{open:!1,inputValue:"",contentId:null,activeId:null,readOnly:!1,disabled:!1,required:!1,invalid:!1,loading:!1,multiple:!1}}render(){let e=this.renderState();return n.html`
       <input
         part="input"
         type="text"
         role="combobox"
         placeholder=${this.placeholder}
-        .value=${e?.inputValue??""}
-        aria-expanded=${t}
-        aria-controls=${e?.contentId??i.nothing}
+        .value=${e.inputValue}
+        aria-expanded=${e.open}
+        aria-controls=${e.contentId??n.nothing}
         aria-autocomplete="list"
-        aria-label=${this.label??i.nothing}
-        aria-activedescendant=${e?.activeId??i.nothing}
+        aria-label=${this.label??n.nothing}
+        aria-activedescendant=${e.activeId??n.nothing}
         autocomplete="off"
-        ?readonly=${e?.readOnly??!1}
-        ?disabled=${e?.disabled??!1}
-        ?required=${e?.required??!1}
-        aria-invalid=${e?.invalid?"true":i.nothing}
-        data-disabled=${e?.disabled?"":i.nothing}
-        aria-readonly=${e?.readOnly?"true":i.nothing}
-        aria-busy=${e?.loading?"true":i.nothing}
-        data-invalid=${e?.invalid?"":i.nothing}
-        data-readonly=${e?.readOnly?"":i.nothing}
-        data-loading=${e?.loading?"":i.nothing}
-        data-multiple=${e?.multiple?"":i.nothing}
+        ?readonly=${e.readOnly}
+        ?disabled=${e.disabled}
+        aria-required=${e.required?"true":n.nothing}
+        aria-invalid=${e.invalid?"true":n.nothing}
+        data-disabled=${e.disabled?"":n.nothing}
+        aria-readonly=${e.readOnly?"true":n.nothing}
+        aria-busy=${e.loading?"true":n.nothing}
+        data-invalid=${e.invalid?"":n.nothing}
+        data-readonly=${e.readOnly?"":n.nothing}
+        data-loading=${e.loading?"":n.nothing}
+        data-multiple=${e.multiple?"":n.nothing}
         @input=${this.handleInput}
         @click=${this.handleClick}
         @focus=${this.handleFocus}
         @keydown=${this.handleKeyDown}
         @focusout=${this.handleFocusOut}
       />
-    `}};c([(0,h.property)({type:String})],s.prototype,"placeholder",2),s=c([(0,p.customElement)("skdx-combobox-input","combobox","input")],s);0&&(module.exports={SkdxComboboxInput});
+    `}};d([(0,p.property)({type:String})],l.prototype,"placeholder",2),d([(0,p.property)({type:String,reflect:!0,attribute:"data-shape"})],l.prototype,"shape",2),d([(0,p.property)({type:String,reflect:!0,attribute:"data-size"})],l.prototype,"size",2),l=d([(0,h.customElement)("skdx-combobox-input","combobox","input")],l);0&&(module.exports={SkdxComboboxInput});

package/dist/combobox/ComboboxInput.d.cts

@@ -1,16 +1,24 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Text field with real DOM focus and keyboard navigation. Renders input
- * with role="combobox" into light DOM for IDREF resolution.
- *
- * Must be given an accessible name via `<label>`, `aria-labelledby`, or
- * `aria-label` — role="combobox" takes no name from content.
+ * Text field with real DOM focus and keyboard navigation, rendering
+ * `role="combobox"` into light DOM for IDREF resolution — requires an
+ * accessible name via `<label>`, `aria-labelledby`, or `aria-label`.
  */
 export declare class SkdxComboboxInput extends LitElement {
     /** Light DOM, for the IDREF reasons in the class docblock. */
-    createRenderRoot(): this;
+    createRenderRoot(): HTMLElement | DocumentFragment;
     /** Placeholder text shown when the draft text is empty. */
     placeholder: string;
+    /**
+     * Corner rounding the skin applies, reflected as `data-shape`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
+     */
+    shape?: 'rounded' | 'square' | (string & {}) | undefined;
+    /**
+     * Control scale the skin renders, reflected as `data-size`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
+     */
+    size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined;
     private root;
     private label;
     private readonly onUpdate;
@@ -25,33 +33,21 @@ export declare class SkdxComboboxInput extends LitElement {
     protected updated(): 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` and brings it into view. The explicit
-     * scroll is not optional: virtual focus scrolls nothing on its own, unlike
-     * real DOM focus. `block: 'nearest'` avoids yanking the page when the
-     * option is already visible. Optional-called since jsdom/happy-dom leave
-     * `scrollIntoView` undefined.
-     *
-     * Only safe on a move, once the popup is positioned. The highlight set
-     * while the listbox is *opening* uses the listbox-local helper in
-     * `Combobox.ts` instead.
-     */
     private activate;
     private moveActive;
     private commitActive;
     private readonly handleInput;
-    /**
-     * Leaving the combobox reconciles the draft text with the selection — the
-     * root owns the rule, this only decides what counts as leaving. Focus
-     * moving *into* the popup is not leaving, since reconciling there would
-     * rewrite the field out from under a user still choosing.
-     */
     private readonly handleFocusOut;
     /** `openOn` is cumulative with typing and the arrow keys, never a replacement for them. */
     private readonly handleClick;
     private readonly handleFocus;
     private readonly handleKeyDown;
-    render(): import("lit").TemplateResult<1>;
+    private onArrowDown;
+    private onArrowUp;
+    private onEdgeKey;
+    private onEnter;
+    private renderState;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/combobox/ComboboxInput.d.ts

@@ -1,16 +1,24 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Text field with real DOM focus and keyboard navigation. Renders input
- * with role="combobox" into light DOM for IDREF resolution.
- *
- * Must be given an accessible name via `<label>`, `aria-labelledby`, or
- * `aria-label` — role="combobox" takes no name from content.
+ * Text field with real DOM focus and keyboard navigation, rendering
+ * `role="combobox"` into light DOM for IDREF resolution — requires an
+ * accessible name via `<label>`, `aria-labelledby`, or `aria-label`.
  */
 export declare class SkdxComboboxInput extends LitElement {
     /** Light DOM, for the IDREF reasons in the class docblock. */
-    createRenderRoot(): this;
+    createRenderRoot(): HTMLElement | DocumentFragment;
     /** Placeholder text shown when the draft text is empty. */
     placeholder: string;
+    /**
+     * Corner rounding the skin applies, reflected as `data-shape`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
+     */
+    shape?: 'rounded' | 'square' | (string & {}) | undefined;
+    /**
+     * Control scale the skin renders, reflected as `data-size`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
+     */
+    size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined;
     private root;
     private label;
     private readonly onUpdate;
@@ -25,33 +33,21 @@ export declare class SkdxComboboxInput extends LitElement {
     protected updated(): 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` and brings it into view. The explicit
-     * scroll is not optional: virtual focus scrolls nothing on its own, unlike
-     * real DOM focus. `block: 'nearest'` avoids yanking the page when the
-     * option is already visible. Optional-called since jsdom/happy-dom leave
-     * `scrollIntoView` undefined.
-     *
-     * Only safe on a move, once the popup is positioned. The highlight set
-     * while the listbox is *opening* uses the listbox-local helper in
-     * `Combobox.ts` instead.
-     */
     private activate;
     private moveActive;
     private commitActive;
     private readonly handleInput;
-    /**
-     * Leaving the combobox reconciles the draft text with the selection — the
-     * root owns the rule, this only decides what counts as leaving. Focus
-     * moving *into* the popup is not leaving, since reconciling there would
-     * rewrite the field out from under a user still choosing.
-     */
     private readonly handleFocusOut;
     /** `openOn` is cumulative with typing and the arrow keys, never a replacement for them. */
     private readonly handleClick;
     private readonly handleFocus;
     private readonly handleKeyDown;
-    render(): import("lit").TemplateResult<1>;
+    private onArrowDown;
+    private onArrowUp;
+    private onEdgeKey;
+    private onEnter;
+    private renderState;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/combobox/ComboboxInput.js

@@ -1,31 +1,31 @@
-var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(s,n,e,t)=>{for(var o=t>1?void 0:t?h(n,e):n,a=s.length-1,r;a>=0;a--)(r=s[a])&&(o=(t?r(n,e,o):r(o))||o);return t&&o&&u(n,e,o),o};import{html as f,LitElement as m,nothing as i}from"lit";import{property as v}from"lit/decorators.js";import{takeHostAriaLabel as y}from"../internal/aria-label.js";import{customElement as b,whenUpgraded as g}from"../internal/define.js";import{reflectHostState as k}from"../internal/part.js";import{installLightDomStyles as x}from"../internal/styles.js";var $=new Set(["Home","End","PageUp","PageDown"]),l=class extends m{constructor(){super(...arguments);this.placeholder="";this.root=null;this.label=null;this.onUpdate=()=>this.requestUpdate();this.handleInput=e=>{let t=this.root;t&&(t.setInputValue(e.target.value),t.open||t.setOpen(!0))};this.handleFocusOut=e=>{let t=this.root;if(!t)return;let o=e.relatedTarget;o&&(this.contains(o)||t.contentEl?.contains(o))||t.reconcileDraftText()};this.handleClick=()=>{let e=this.root;!e||e.openOn==="type"||e.readOnly||e.open||e.setOpen(!0)};this.handleFocus=()=>{let e=this.root;!e||e.openOn!=="focus"||e.readOnly||e.open||e.setOpen(!0)};this.handleKeyDown=e=>{let t=this.root;if(t)if(e.altKey&&e.key==="ArrowDown")e.preventDefault(),t.open||t.setOpen(!0);else if(e.altKey&&e.key==="ArrowUp")e.preventDefault(),t.activeId&&this.commitActive(),t.open&&t.setOpen(!1);else 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($.has(e.key)&&t.open){e.preventDefault();let o=this.options(),a=e.key==="Home"||e.key==="PageUp";this.activate(a?o[0]:o[o.length-1])}else e.key==="Enter"?t.activeId?(e.preventDefault(),this.commitActive()):t.allowCustomValue&&t.inputValue!==""?(e.preventDefault(),t.selectItem(t.inputValue,t.inputValue,"keyboard")):t.open&&t.setOpen(!1):e.key==="Escape"&&t.open&&!t.contentEl&&(e.preventDefault(),t.setOpen(!1))}}createRenderRoot(){return this}focus(e){this.querySelector("input")?.focus(e)}connectedCallback(){super.connectedCallback(),this.label??(this.label=y(this)),this.root=this.closest("skdx-combobox"),this.root?.addEventListener("skdx-combobox-internal-update",this.onUpdate),this.root&&g(this.root,()=>{this.root&&(this.root.inputHost=this)}),x()}disconnectedCallback(){this.root?.removeEventListener("skdx-combobox-internal-update",this.onUpdate),super.disconnectedCallback()}updated(){let e=this.root;k(this,{"data-invalid":e?.invalid?"":null,"data-readonly":e?.readOnly?"":null,"data-loading":e?.loading?"":null,"data-multiple":e?.multiple?"":null})}options(){return this.root?.visibleOptions()??[]}activate(e){e&&(this.root?.setActiveId(e.id,"keyboard"),e.scrollIntoView?.({block:"nearest"}))}moveActive(e){let t=this.root;if(!t)return;let o=this.options();if(o.length===0)return;let a=o.findIndex(c=>c.id===t.activeId),r=a===-1?e===1?-1:0:a,p=t.loop?(r+e+o.length)%o.length:Math.min(o.length-1,Math.max(0,r+e));this.activate(o[p])}commitActive(){let e=this.root;if(!e?.activeId)return;let t=e.getItem(e.activeId);t&&e.selectItem(t.value,t.text||t.value,"keyboard")}render(){let e=this.root,t=e?.open??!1;return f`
+var f=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var l=(s,r,e,t)=>{for(var i=t>1?void 0:t?v(r,e):r,d=s.length-1,o;d>=0;d--)(o=s[d])&&(i=(t?o(r,e,i):o(i))||i);return t&&i&&f(r,e,i),i};import{html as m,LitElement as y,nothing as n}from"lit";import{property as u}from"lit/decorators.js";import{takeHostAriaLabel as b}from"../internal/aria-label.js";import{customElement as g,whenUpgraded as E}from"../internal/define.js";import{installLightDomStyles as O}from"../internal/light-dom-styles.js";import{reflectHostState as I}from"../internal/part.js";import{COMBOBOX_FAMILY as p}from"./family.js";var k=new Set(["Home","End","PageUp","PageDown"]),a=class extends y{constructor(){super(...arguments);this.placeholder="";this.root=null;this.label=null;this.onUpdate=()=>this.requestUpdate();this.handleInput=e=>{let t=this.root;t&&(t.setInputValue(e.target.value),t.open||t.setOpen(!0))};this.handleFocusOut=e=>{let t=this.root;if(!t)return;let i=e.relatedTarget;i&&(this.contains(i)||t.contentEl?.contains(i))||t.reconcileDraftText()};this.handleClick=()=>{let e=this.root;!e||e.openOn==="type"||e.readOnly||e.open||e.setOpen(!0)};this.handleFocus=()=>{let e=this.root;!e||e.openOn!=="focus"||e.readOnly||e.open||e.setOpen(!0)};this.handleKeyDown=e=>{let t=this.root;t&&(e.key==="ArrowDown"?(e.preventDefault(),this.onArrowDown(t,e.altKey)):e.key==="ArrowUp"?(e.preventDefault(),this.onArrowUp(t,e.altKey)):k.has(e.key)&&t.open?this.onEdgeKey(e):e.key==="Enter"?this.onEnter(e,t):e.key==="Escape"&&t.open&&!t.contentEl&&(e.preventDefault(),t.setOpen(!1)))}}createRenderRoot(){return this}focus(e){this.querySelector("input")?.focus(e)}connectedCallback(){super.connectedCallback(),this.label??(this.label=b(this)),this.root=p.root(this),this.root?.addEventListener(p.event,this.onUpdate),this.root&&E(this.root,()=>{this.root&&(this.root.inputHost=this)}),O()}disconnectedCallback(){this.root?.removeEventListener(p.event,this.onUpdate),super.disconnectedCallback()}updated(){let e=this.root;I(this,{"data-invalid":e?.invalid?"":null,"data-readonly":e?.readOnly?"":null,"data-loading":e?.loading?"":null,"data-multiple":e?.multiple?"":null})}options(){return this.root?.visibleOptions()??[]}activate(e){e&&(this.root?.setActiveId(e.id,"keyboard"),e.scrollIntoView?.({block:"nearest"}))}moveActive(e){let t=this.root;if(!t)return;let i=this.options();if(i.length===0)return;let o=i.findIndex(h=>h.id===t.activeId);o===-1&&(o=e===1?-1:0);let c=t.loop?(o+e+i.length)%i.length:Math.min(i.length-1,Math.max(0,o+e));this.activate(i[c])}commitActive(){let e=this.root;if(!e?.activeId)return;let t=e.getItem(e.activeId);t&&e.selectItem(t.value,t.text||t.value,"keyboard")}onArrowDown(e,t){if(t){e.open||e.setOpen(!0);return}e.open?this.moveActive(1):e.openWithHighlight("first")}onArrowUp(e,t){if(t){e.activeId&&this.commitActive(),e.open&&e.setOpen(!1);return}e.open?this.moveActive(-1):e.openWithHighlight("last")}onEdgeKey(e){e.preventDefault();let t=this.options(),i=e.key==="Home"||e.key==="PageUp";this.activate(i?t[0]:t[t.length-1])}onEnter(e,t){t.activeId?(e.preventDefault(),this.commitActive()):t.allowCustomValue&&t.inputValue!==""?(e.preventDefault(),t.selectItem(t.inputValue,t.inputValue,"keyboard")):t.open&&t.setOpen(!1)}renderState(){let e=this.root;return e?{open:e.open,inputValue:e.inputValue,contentId:e.contentId,activeId:e.activeId,readOnly:e.readOnly,disabled:e.disabled,required:e.required,invalid:e.invalid,loading:e.loading,multiple:e.multiple}:{open:!1,inputValue:"",contentId:null,activeId:null,readOnly:!1,disabled:!1,required:!1,invalid:!1,loading:!1,multiple:!1}}render(){let e=this.renderState();return m`
       <input
         part="input"
         type="text"
         role="combobox"
         placeholder=${this.placeholder}
-        .value=${e?.inputValue??""}
-        aria-expanded=${t}
-        aria-controls=${e?.contentId??i}
+        .value=${e.inputValue}
+        aria-expanded=${e.open}
+        aria-controls=${e.contentId??n}
         aria-autocomplete="list"
-        aria-label=${this.label??i}
-        aria-activedescendant=${e?.activeId??i}
+        aria-label=${this.label??n}
+        aria-activedescendant=${e.activeId??n}
         autocomplete="off"
-        ?readonly=${e?.readOnly??!1}
-        ?disabled=${e?.disabled??!1}
-        ?required=${e?.required??!1}
-        aria-invalid=${e?.invalid?"true":i}
-        data-disabled=${e?.disabled?"":i}
-        aria-readonly=${e?.readOnly?"true":i}
-        aria-busy=${e?.loading?"true":i}
-        data-invalid=${e?.invalid?"":i}
-        data-readonly=${e?.readOnly?"":i}
-        data-loading=${e?.loading?"":i}
-        data-multiple=${e?.multiple?"":i}
+        ?readonly=${e.readOnly}
+        ?disabled=${e.disabled}
+        aria-required=${e.required?"true":n}
+        aria-invalid=${e.invalid?"true":n}
+        data-disabled=${e.disabled?"":n}
+        aria-readonly=${e.readOnly?"true":n}
+        aria-busy=${e.loading?"true":n}
+        data-invalid=${e.invalid?"":n}
+        data-readonly=${e.readOnly?"":n}
+        data-loading=${e.loading?"":n}
+        data-multiple=${e.multiple?"":n}
         @input=${this.handleInput}
         @click=${this.handleClick}
         @focus=${this.handleFocus}
         @keydown=${this.handleKeyDown}
         @focusout=${this.handleFocusOut}
       />
-    `}};d([v({type:String})],l.prototype,"placeholder",2),l=d([b("skdx-combobox-input","combobox","input")],l);export{l as SkdxComboboxInput};
+    `}};l([u({type:String})],a.prototype,"placeholder",2),l([u({type:String,reflect:!0,attribute:"data-shape"})],a.prototype,"shape",2),l([u({type:String,reflect:!0,attribute:"data-size"})],a.prototype,"size",2),a=l([g("skdx-combobox-input","combobox","input")],a);export{a as SkdxComboboxInput};

package/dist/combobox/ComboboxItem.cjs

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

package/dist/combobox/ComboboxItem.d.cts

@@ -1,9 +1,8 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * Selectable option in `<skdx-combobox-content>`: `role="option"` with
- * `aria-selected`, `data-state`, `data-highlighted`. Click selects
- * (refocus input) or toggles (multiple); hover moves virtual highlight.
- * Filtered items drop role and hide (not counted as options).
+ * `aria-selected`, `data-state`, `data-highlighted`, selected or toggled on
+ * click, virtually highlighted on hover, and hidden without a role when filtered out.
  */
 export declare class SkdxComboboxItem extends LitElement {
     static styles: import("lit").CSSResult;
@@ -16,10 +15,6 @@ export declare class SkdxComboboxItem extends LitElement {
      * @default undefined — falls back to item text content.
      */
     textValue?: string;
-    /**
-     * Text for filtering. Light DOM keeps it readable even when filtered out,
-     * allowing a widened query to bring it straight back.
-     */
     private get itemText();
     private root;
     private readonly onUpdate;
@@ -28,7 +23,7 @@ export declare class SkdxComboboxItem extends LitElement {
     private readonly handleSelect;
     private readonly handlePointerEnter;
     protected updated(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/combobox/ComboboxItem.d.ts

@@ -1,9 +1,8 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * Selectable option in `<skdx-combobox-content>`: `role="option"` with
- * `aria-selected`, `data-state`, `data-highlighted`. Click selects
- * (refocus input) or toggles (multiple); hover moves virtual highlight.
- * Filtered items drop role and hide (not counted as options).
+ * `aria-selected`, `data-state`, `data-highlighted`, selected or toggled on
+ * click, virtually highlighted on hover, and hidden without a role when filtered out.
  */
 export declare class SkdxComboboxItem extends LitElement {
     static styles: import("lit").CSSResult;
@@ -16,10 +15,6 @@ export declare class SkdxComboboxItem extends LitElement {
      * @default undefined — falls back to item text content.
      */
     textValue?: string;
-    /**
-     * Text for filtering. Light DOM keeps it readable even when filtered out,
-     * allowing a widened query to bring it straight back.
-     */
     private get itemText();
     private root;
     private readonly onUpdate;
@@ -28,7 +23,7 @@ export declare class SkdxComboboxItem extends LitElement {
     private readonly handleSelect;
     private readonly handlePointerEnter;
     protected updated(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/combobox/ComboboxItem.js

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

package/dist/combobox/ComboboxPortal.d.cts

@@ -1,12 +1,8 @@
 import { SkdxPortal } from '../utils/portal.cjs';
 /**
  * Teleports `<skdx-combobox-content>` to `document.body` (or a custom
- * `container`) so the listbox escapes clipping and `overflow` from the input's
- * ancestors. The host element stays in place; only children move into a `<div
- * data-skdx-portal>`, so removing the root removes portalled content with it.
- *
- * Parts hide via `hidden` rather than unmounting, so there is no `force-mount`
- * behavior or exit-animation lifecycle.
+ * `container`) so the listbox escapes clipping and `overflow` from the
+ * input's ancestors, with parts hiding via `hidden` rather than unmounting.
  *
  * @example
  * ```html

package/dist/combobox/ComboboxPortal.d.ts

@@ -1,12 +1,8 @@
 import { SkdxPortal } from '../utils/portal.js';
 /**
  * Teleports `<skdx-combobox-content>` to `document.body` (or a custom
- * `container`) so the listbox escapes clipping and `overflow` from the input's
- * ancestors. The host element stays in place; only children move into a `<div
- * data-skdx-portal>`, so removing the root removes portalled content with it.
- *
- * Parts hide via `hidden` rather than unmounting, so there is no `force-mount`
- * behavior or exit-animation lifecycle.
+ * `container`) so the listbox escapes clipping and `overflow` from the
+ * input's ancestors, with parts hiding via `hidden` rather than unmounting.
  *
  * @example
  * ```html

package/dist/combobox/ComboboxTrigger.cjs

@@ -1,4 +1,4 @@
-"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var x=(r,n)=>{for(var e in n)d(r,e,{get:n[e],enumerable:!0})},y=(r,n,e,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of f(n))!v.call(r,o)&&o!==e&&d(r,o,{get:()=>n[o],enumerable:!(t=c(n,o))||t.enumerable});return r};var k=r=>y(d({},"__esModule",{value:!0}),r),p=(r,n,e,t)=>{for(var o=t>1?void 0:t?c(n,e):n,l=r.length-1,s;l>=0;l--)(s=r[l])&&(o=(t?s(n,e,o):s(o))||o);return t&&o&&d(n,e,o),o};var E={};x(E,{SkdxComboboxTrigger:()=>i});module.exports=k(E);var a=require("lit"),u=require("../internal/aria-label.cjs"),b=require("../internal/define.cjs"),m=require("../internal/part.cjs"),h=require("../internal/styles.cjs");var i=class extends a.LitElement{constructor(){super(...arguments);this.root=null;this.label=null;this.onRootUpdate=()=>this.requestUpdate();this.handleMouseDown=e=>e.preventDefault();this.handleClick=()=>{let e=this.root;!e||e.readOnly||(e.setOpen(!e.open),e.inputHost?.focus?.())}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.label=(0,u.takeHostAriaLabel)(this),this.root=this.closest("skdx-combobox"),this.root?.addEventListener("skdx-combobox-internal-update",this.onRootUpdate),(0,h.installLightDomStyles)()}disconnectedCallback(){this.root?.removeEventListener("skdx-combobox-internal-update",this.onRootUpdate),super.disconnectedCallback()}focus(e){this.querySelector(":scope > button")?.focus(e)}firstUpdated(){let e=this.querySelector(":scope > button");if(!e)return;let t=this.firstChild;for(;t&&t!==e;){let o=t.nextSibling;t.nodeType===Node.COMMENT_NODE||t.nodeType===Node.TEXT_NODE&&t.textContent.trim()===""||e.append(t),t=o}}updated(){(0,m.reflectHostState)(this,{"data-state":this.root?.open??!1?"open":"closed","data-disabled":this.root?.disabled?"":null,"data-readonly":this.root?.readOnly?"":null})}render(){let e=this.root,t=e?.open??!1,o=e?.disabled??!1;return a.html`
+"use strict";var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var x=(n,r)=>{for(var e in r)d(n,e,{get:r[e],enumerable:!0})},E=(n,r,e,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of f(r))!y.call(n,o)&&o!==e&&d(n,o,{get:()=>r[o],enumerable:!(t=p(r,o))||t.enumerable});return n};var M=n=>E(d({},"__esModule",{value:!0}),n),u=(n,r,e,t)=>{for(var o=t>1?void 0:t?p(r,e):r,l=n.length-1,c;l>=0;l--)(c=n[l])&&(o=(t?c(r,e,o):c(o))||o);return t&&o&&d(r,e,o),o};var g={};x(g,{SkdxComboboxTrigger:()=>i});module.exports=M(g);var a=require("lit"),m=require("../internal/aria-label.cjs"),b=require("../internal/define.cjs"),h=require("../internal/light-dom-styles.cjs"),v=require("../internal/part.cjs"),s=require("./family.cjs");var i=class extends a.LitElement{constructor(){super(...arguments);this.root=null;this.label=null;this.onRootUpdate=()=>this.requestUpdate();this.handleMouseDown=e=>e.preventDefault();this.handleClick=()=>{let e=this.root;!e||e.readOnly||(e.setOpen(!e.open),e.inputHost?.focus?.())}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.label=(0,m.takeHostAriaLabel)(this),this.root=s.COMBOBOX_FAMILY.root(this),this.root?.addEventListener(s.COMBOBOX_FAMILY.event,this.onRootUpdate),(0,h.installLightDomStyles)()}disconnectedCallback(){this.root?.removeEventListener(s.COMBOBOX_FAMILY.event,this.onRootUpdate),super.disconnectedCallback()}focus(e){this.querySelector(":scope > button")?.focus(e)}firstUpdated(){let e=this.querySelector(":scope > button");if(!e)return;let t=this.firstChild;for(;t&&t!==e;){let o=t.nextSibling;t.nodeType===Node.COMMENT_NODE||t.nodeType===Node.TEXT_NODE&&t.textContent.trim()===""||e.append(t),t=o}}updated(){(0,v.reflectHostState)(this,{"data-state":this.root?.open??!1?"open":"closed","data-disabled":this.root?.disabled?"":null,"data-readonly":this.root?.readOnly?"":null})}render(){let e=this.root,t=e?.open??!1,o=e?.disabled??!1;return a.html`
       <button
         part="trigger"
         type="button"
@@ -13,4 +13,4 @@
         @mousedown=${this.handleMouseDown}
         @click=${this.handleClick}
       ></button>
-    `}};i=p([(0,b.customElement)("skdx-combobox-trigger","combobox","trigger")],i);0&&(module.exports={SkdxComboboxTrigger});
+    `}};i=u([(0,b.customElement)("skdx-combobox-trigger","combobox","trigger")],i);0&&(module.exports={SkdxComboboxTrigger});

package/dist/combobox/ComboboxTrigger.d.cts

@@ -1,8 +1,8 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Optional button to toggle `<skdx-combobox>` listbox. Not a tab stop or focus destination;
- * virtual-focus widget keeps focus on input. Renders into light DOM so `aria-controls` IDREF
- * resolves. Children move into the rendered `<button>` once.
+ * Optional button to toggle the `<skdx-combobox>` listbox, not a tab stop or
+ * focus destination since focus stays on the input, rendered into light DOM
+ * so `aria-controls` IDREF resolves.
  *
  * @example
  * ```html
@@ -14,7 +14,7 @@ import { LitElement } from 'lit';
  */
 export declare class SkdxComboboxTrigger extends LitElement {
     /** Light DOM, for the IDREF reasons in the class docblock. */
-    createRenderRoot(): this;
+    createRenderRoot(): HTMLElement | DocumentFragment;
     private root;
     private label;
     private readonly onRootUpdate;
@@ -28,7 +28,7 @@ export declare class SkdxComboboxTrigger extends LitElement {
     private readonly handleMouseDown;
     private readonly handleClick;
     protected updated(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/combobox/ComboboxTrigger.d.ts

@@ -1,8 +1,8 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Optional button to toggle `<skdx-combobox>` listbox. Not a tab stop or focus destination;
- * virtual-focus widget keeps focus on input. Renders into light DOM so `aria-controls` IDREF
- * resolves. Children move into the rendered `<button>` once.
+ * Optional button to toggle the `<skdx-combobox>` listbox, not a tab stop or
+ * focus destination since focus stays on the input, rendered into light DOM
+ * so `aria-controls` IDREF resolves.
  *
  * @example
  * ```html
@@ -14,7 +14,7 @@ import { LitElement } from 'lit';
  */
 export declare class SkdxComboboxTrigger extends LitElement {
     /** Light DOM, for the IDREF reasons in the class docblock. */
-    createRenderRoot(): this;
+    createRenderRoot(): HTMLElement | DocumentFragment;
     private root;
     private label;
     private readonly onRootUpdate;
@@ -28,7 +28,7 @@ export declare class SkdxComboboxTrigger extends LitElement {
     private readonly handleMouseDown;
     private readonly handleClick;
     protected updated(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/combobox/ComboboxTrigger.js

@@ -1,16 +1,16 @@
-var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var s=(l,n,e,t)=>{for(var o=t>1?void 0:t?p(n,e):n,a=l.length-1,d;a>=0;a--)(d=l[a])&&(o=(t?d(n,e,o):d(o))||o);return t&&o&&c(n,e,o),o};import{html as u,LitElement as b,nothing as r}from"lit";import{takeHostAriaLabel as m}from"../internal/aria-label.js";import{customElement as h}from"../internal/define.js";import{reflectHostState as f}from"../internal/part.js";import{installLightDomStyles as v}from"../internal/styles.js";var i=class extends b{constructor(){super(...arguments);this.root=null;this.label=null;this.onRootUpdate=()=>this.requestUpdate();this.handleMouseDown=e=>e.preventDefault();this.handleClick=()=>{let e=this.root;!e||e.readOnly||(e.setOpen(!e.open),e.inputHost?.focus?.())}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.label=m(this),this.root=this.closest("skdx-combobox"),this.root?.addEventListener("skdx-combobox-internal-update",this.onRootUpdate),v()}disconnectedCallback(){this.root?.removeEventListener("skdx-combobox-internal-update",this.onRootUpdate),super.disconnectedCallback()}focus(e){this.querySelector(":scope > button")?.focus(e)}firstUpdated(){let e=this.querySelector(":scope > button");if(!e)return;let t=this.firstChild;for(;t&&t!==e;){let o=t.nextSibling;t.nodeType===Node.COMMENT_NODE||t.nodeType===Node.TEXT_NODE&&t.textContent.trim()===""||e.append(t),t=o}}updated(){f(this,{"data-state":this.root?.open??!1?"open":"closed","data-disabled":this.root?.disabled?"":null,"data-readonly":this.root?.readOnly?"":null})}render(){let e=this.root,t=e?.open??!1,o=e?.disabled??!1;return u`
+var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var c=(l,r,e,t)=>{for(var o=t>1?void 0:t?u(r,e):r,a=l.length-1,d;a>=0;a--)(d=l[a])&&(o=(t?d(r,e,o):d(o))||o);return t&&o&&p(r,e,o),o};import{html as m,LitElement as b,nothing as n}from"lit";import{takeHostAriaLabel as h}from"../internal/aria-label.js";import{customElement as v}from"../internal/define.js";import{installLightDomStyles as f}from"../internal/light-dom-styles.js";import{reflectHostState as y}from"../internal/part.js";import{COMBOBOX_FAMILY as s}from"./family.js";var i=class extends b{constructor(){super(...arguments);this.root=null;this.label=null;this.onRootUpdate=()=>this.requestUpdate();this.handleMouseDown=e=>e.preventDefault();this.handleClick=()=>{let e=this.root;!e||e.readOnly||(e.setOpen(!e.open),e.inputHost?.focus?.())}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.label=h(this),this.root=s.root(this),this.root?.addEventListener(s.event,this.onRootUpdate),f()}disconnectedCallback(){this.root?.removeEventListener(s.event,this.onRootUpdate),super.disconnectedCallback()}focus(e){this.querySelector(":scope > button")?.focus(e)}firstUpdated(){let e=this.querySelector(":scope > button");if(!e)return;let t=this.firstChild;for(;t&&t!==e;){let o=t.nextSibling;t.nodeType===Node.COMMENT_NODE||t.nodeType===Node.TEXT_NODE&&t.textContent.trim()===""||e.append(t),t=o}}updated(){y(this,{"data-state":this.root?.open??!1?"open":"closed","data-disabled":this.root?.disabled?"":null,"data-readonly":this.root?.readOnly?"":null})}render(){let e=this.root,t=e?.open??!1,o=e?.disabled??!1;return m`
       <button
         part="trigger"
         type="button"
         tabindex="-1"
-        aria-label=${this.label??r}
+        aria-label=${this.label??n}
         aria-expanded=${t}
-        aria-controls=${t?e?.contentId??r:r}
+        aria-controls=${t?e?.contentId??n:n}
         ?disabled=${o}
-        data-disabled=${o?"":r}
-        data-readonly=${e?.readOnly?"":r}
+        data-disabled=${o?"":n}
+        data-readonly=${e?.readOnly?"":n}
         data-state=${t?"open":"closed"}
         @mousedown=${this.handleMouseDown}
         @click=${this.handleClick}
       ></button>
-    `}};i=s([h("skdx-combobox-trigger","combobox","trigger")],i);export{i as SkdxComboboxTrigger};
+    `}};i=c([v("skdx-combobox-trigger","combobox","trigger")],i);export{i as SkdxComboboxTrigger};

package/dist/combobox/family.cjs

@@ -0,0 +1 @@
+"use strict";var t=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var p=(b,o)=>{for(var e in o)t(b,e,{get:o[e],enumerable:!0})},s=(b,o,e,x)=>{if(o&&typeof o=="object"||typeof o=="function")for(let m of c(o))!d.call(b,m)&&m!==e&&t(b,m,{get:()=>o[m],enumerable:!(x=i(o,m))||x.enumerable});return b};var C=b=>s(t({},"__esModule",{value:!0}),b);var k={};p(k,{COMBOBOX_FAMILY:()=>f});module.exports=C(k);var r=require("../internal/family.cjs"),f=(0,r.defineFamily)("combobox",{selector:"skdx-combobox",init:{bubbles:!0,composed:!0}});0&&(module.exports={COMBOBOX_FAMILY});

package/dist/combobox/family.d.cts

@@ -0,0 +1,3 @@
+import type { SkdxCombobox } from './Combobox.cjs';
+/** @internal The broadcast every `<skdx-combobox-*>` part re-renders on, and the lookup that finds their root. */
+export declare const COMBOBOX_FAMILY: import("../internal/family.cjs").SkdxFamily<SkdxCombobox>;

package/dist/combobox/family.d.ts

@@ -0,0 +1,3 @@
+import type { SkdxCombobox } from './Combobox.js';
+/** @internal The broadcast every `<skdx-combobox-*>` part re-renders on, and the lookup that finds their root. */
+export declare const COMBOBOX_FAMILY: import("../internal/family.js").SkdxFamily<SkdxCombobox>;

package/dist/combobox/family.js

@@ -0,0 +1 @@
+import{defineFamily as o}from"../internal/family.js";var m=o("combobox",{selector:"skdx-combobox",init:{bubbles:!0,composed:!0}});export{m as COMBOBOX_FAMILY};