@skdx/web-components 0.28.0 → 0.30.0

package/dist/angle-slider/AngleSliderThumb.cjs

@@ -1,5 +1,5 @@
-"use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var p=(s,t)=>{for(var e in t)d(s,e,{get:t[e],enumerable:!0})},v=(s,t,e,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of m(t))!b.call(s,r)&&r!==e&&d(s,r,{get:()=>t[r],enumerable:!(i=c(t,r))||i.enumerable});return s};var k=s=>v(d({},"__esModule",{value:!0}),s),g=(s,t,e,i)=>{for(var r=i>1?void 0:i?c(t,e):t,a=s.length-1,n;a>=0;a--)(n=s[a])&&(r=(i?n(t,e,r):n(r))||r);return i&&r&&d(t,e,r),r};var y={};p(y,{SkdxAngleSliderThumb:()=>o});module.exports=k(y);var l=require("lit"),u=require("../internal/define.cjs"),h=require("../internal/styles.cjs");var o=class extends l.LitElement{constructor(){super(...arguments);this.root=null}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-angle-slider"),!this.root)throw new Error("<skdx-angle-slider-thumb> must be used inside <skdx-angle-slider>.");this.setAttribute("aria-hidden","true"),this.syncFromRoot()}disconnectedCallback(){this.root=null,super.disconnectedCallback()}syncFromRoot(){let e=this.root;e&&(this.setAttribute("data-value",String(e.value)),this.toggleAttribute("data-disabled",e.disabled),this.toggleAttribute("data-readonly",e.readOnly),this.toggleAttribute("data-dragging",e.hasAttribute("data-dragging")))}render(){return l.html`<slot></slot>`}};o.styles=[h.hiddenHostStyles,l.css`
+"use strict";var a=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var p=(s,t)=>{for(var e in t)a(s,e,{get:t[e],enumerable:!0})},v=(s,t,e,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of h(t))!b.call(s,r)&&r!==e&&a(s,r,{get:()=>t[r],enumerable:!(l=c(t,r))||l.enumerable});return s};var k=s=>v(a({},"__esModule",{value:!0}),s),u=(s,t,e,l)=>{for(var r=l>1?void 0:l?c(t,e):t,d=s.length-1,n;d>=0;d--)(n=s[d])&&(r=(l?n(t,e,r):n(r))||r);return l&&r&&a(t,e,r),r};var y={};p(y,{SkdxAngleSliderThumb:()=>i});module.exports=k(y);var o=require("lit"),g=require("../internal/define.cjs"),m=require("../internal/styles.cjs");var i=class extends o.LitElement{constructor(){super(...arguments);this.root=null}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-angle-slider"),!this.root)throw new Error("<skdx-angle-slider-thumb> must be used inside <skdx-angle-slider>.");this.setAttribute("aria-hidden","true"),this.syncFromRoot()}disconnectedCallback(){this.root=null,super.disconnectedCallback()}syncFromRoot(){let e=this.root;e&&(this.setAttribute("data-value",String(e.value)),this.toggleAttribute("data-disabled",e.disabled),this.toggleAttribute("data-readonly",e.readOnly),this.toggleAttribute("data-dragging",e.hasAttribute("data-dragging")))}render(){return o.html`<slot></slot>`}};i.styles=[m.hiddenHostStyles,o.css`
       :host {
         display: block;
       }
-    `],o=g([(0,u.customElement)("skdx-angle-slider-thumb","angle-slider","thumb")],o);0&&(module.exports={SkdxAngleSliderThumb});
+    `],i=u([(0,g.customElement)("skdx-angle-slider-thumb","angle-slider","thumb")],i);0&&(module.exports={SkdxAngleSliderThumb});

package/dist/angle-slider/AngleSliderThumb.d.cts

@@ -1,9 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-angle-slider-thumb>` — the handle showing the current angle.
- *
- * Purely visual: `aria-hidden`, out of tab order. The root publishes `--skdx-angle-slider-angle` for rotation.
- * Exposes `data-value`, `data-disabled`, `data-readonly`, `data-dragging` for styling.
+ * `<skdx-angle-slider-thumb>` is the purely visual handle showing the current angle, `aria-hidden` and out of tab order.
  *
  * @example
  * ```html
@@ -19,7 +16,7 @@ export declare class SkdxAngleSliderThumb extends LitElement {
     disconnectedCallback(): void;
     /** @internal Mirrors the root's state onto this host. Called by the root after every update. */
     syncFromRoot(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/angle-slider/AngleSliderThumb.d.ts

@@ -1,9 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-angle-slider-thumb>` — the handle showing the current angle.
- *
- * Purely visual: `aria-hidden`, out of tab order. The root publishes `--skdx-angle-slider-angle` for rotation.
- * Exposes `data-value`, `data-disabled`, `data-readonly`, `data-dragging` for styling.
+ * `<skdx-angle-slider-thumb>` is the purely visual handle showing the current angle, `aria-hidden` and out of tab order.
  *
  * @example
  * ```html
@@ -19,7 +16,7 @@ export declare class SkdxAngleSliderThumb extends LitElement {
     disconnectedCallback(): void;
     /** @internal Mirrors the root's state onto this host. Called by the root after every update. */
     syncFromRoot(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/angle-slider/AngleSliderThumb.js

@@ -1,5 +1,5 @@
-var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var a=(o,r,t,i)=>{for(var e=i>1?void 0:i?c(r,t):r,l=o.length-1,d;l>=0;l--)(d=o[l])&&(e=(i?d(r,t,e):d(e))||e);return i&&e&&n(r,t,e),e};import{css as g,html as u,LitElement as h}from"lit";import{customElement as m}from"../internal/define.js";import{hiddenHostStyles as b}from"../internal/styles.js";var s=class extends h{constructor(){super(...arguments);this.root=null}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-angle-slider"),!this.root)throw new Error("<skdx-angle-slider-thumb> must be used inside <skdx-angle-slider>.");this.setAttribute("aria-hidden","true"),this.syncFromRoot()}disconnectedCallback(){this.root=null,super.disconnectedCallback()}syncFromRoot(){let t=this.root;t&&(this.setAttribute("data-value",String(t.value)),this.toggleAttribute("data-disabled",t.disabled),this.toggleAttribute("data-readonly",t.readOnly),this.toggleAttribute("data-dragging",t.hasAttribute("data-dragging")))}render(){return u`<slot></slot>`}};s.styles=[b,g`
+var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(i,r,t,l)=>{for(var e=l>1?void 0:l?c(r,t):r,o=i.length-1,a;o>=0;o--)(a=i[o])&&(e=(l?a(r,t,e):a(e))||e);return l&&e&&n(r,t,e),e};import{css as u,html as g,LitElement as m}from"lit";import{customElement as h}from"../internal/define.js";import{hiddenHostStyles as b}from"../internal/styles.js";var s=class extends m{constructor(){super(...arguments);this.root=null}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-angle-slider"),!this.root)throw new Error("<skdx-angle-slider-thumb> must be used inside <skdx-angle-slider>.");this.setAttribute("aria-hidden","true"),this.syncFromRoot()}disconnectedCallback(){this.root=null,super.disconnectedCallback()}syncFromRoot(){let t=this.root;t&&(this.setAttribute("data-value",String(t.value)),this.toggleAttribute("data-disabled",t.disabled),this.toggleAttribute("data-readonly",t.readOnly),this.toggleAttribute("data-dragging",t.hasAttribute("data-dragging")))}render(){return g`<slot></slot>`}};s.styles=[b,u`
       :host {
         display: block;
       }
-    `],s=a([m("skdx-angle-slider-thumb","angle-slider","thumb")],s);export{s as SkdxAngleSliderThumb};
+    `],s=d([h("skdx-angle-slider-thumb","angle-slider","thumb")],s);export{s as SkdxAngleSliderThumb};

package/dist/aspect-ratio/AspectRatio.cjs

@@ -1,7 +1,10 @@
-"use strict";var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var w=(e,t)=>{for(var o in t)l(e,o,{get:t[o],enumerable:!0})},x=(e,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of g(t))!y.call(e,r)&&r!==o&&l(e,r,{get:()=>t[r],enumerable:!(i=p(t,r))||i.enumerable});return e};var E=e=>x(l({},"__esModule",{value:!0}),e),d=(e,t,o,i)=>{for(var r=i>1?void 0:i?p(t,o):t,n=e.length-1,m;n>=0;n--)(m=e[n])&&(r=(i?m(t,o,r):m(r))||r);return i&&r&&l(t,o,r),r};var M={};w(M,{SkdxAspectRatio:()=>a,resolveAspectRatio:()=>v});module.exports=E(M);var s=require("lit"),u=require("lit/decorators.js"),f=require("../internal/define.cjs"),b=require("../internal/styles.cjs"),h=require("../utils/is-dev-mode.cjs");var c=!1;function v(e){return Number.isFinite(e)&&e>0?e:(c||(c=!0,(0,h.isDevMode)()&&console.warn(`[skdx] AspectRatio: \`ratio\` must be a finite number greater than zero, got ${e}. Falling back to the default of 1. A non-positive ratio is not a valid CSS aspect-ratio, so the declaration would be discarded and the box would collapse to no height.`)),1)}var a=class extends s.LitElement{constructor(){super(...arguments);this.ratio=1}render(){return s.html`<div part="aspect-ratio" style=${`aspect-ratio: ${v(this.ratio)}`}>
+"use strict";var l=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var w=(e,t)=>{for(var o in t)l(e,o,{get:t[o],enumerable:!0})},T=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of y(t))!g.call(e,r)&&r!==o&&l(e,r,{get:()=>t[r],enumerable:!(a=d(t,r))||a.enumerable});return e};var x=e=>T(l({},"__esModule",{value:!0}),e),p=(e,t,o,a)=>{for(var r=a>1?void 0:a?d(t,o):t,n=e.length-1,m;n>=0;n--)(m=e[n])&&(r=(a?m(t,o,r):m(r))||r);return a&&r&&l(t,o,r),r};var E={};w(E,{SkdxAspectRatio:()=>i,resolveAspectRatio:()=>v});module.exports=x(E);var s=require("lit"),u=require("lit/decorators.js"),f=require("../internal/define.cjs"),b=require("../internal/dev-mode.cjs"),h=require("../internal/styles.cjs");var c=!1;function v(e){return Number.isFinite(e)&&e>0?e:(c||(c=!0,(0,b.isDevMode)()&&console.warn(`[skdx] AspectRatio: \`ratio\` must be a finite number greater than zero, got ${e}. Falling back to the default of 1. A non-positive ratio is not a valid CSS aspect-ratio, so the declaration would be discarded and the box would collapse to no height.`)),1)}var i=class extends s.LitElement{constructor(){super(...arguments);this.ratio=1}render(){return s.html`<div
+      part="aspect-ratio"
+      style=${`aspect-ratio: ${v(this.ratio)}`}
+    >
       <slot></slot>
-    </div>`}};a.styles=[b.hiddenHostStyles,s.css`
+    </div>`}};i.styles=[h.hiddenHostStyles,s.css`
       :host {
         display: block;
       }
-    `],d([(0,u.property)({type:Number})],a.prototype,"ratio",2),a=d([(0,f.customElement)("skdx-aspect-ratio","aspect-ratio","root")],a);0&&(module.exports={SkdxAspectRatio,resolveAspectRatio});
+    `],p([(0,u.property)({type:Number})],i.prototype,"ratio",2),i=p([(0,f.customElement)("skdx-aspect-ratio","aspect-ratio","root")],i);0&&(module.exports={SkdxAspectRatio,resolveAspectRatio});

package/dist/aspect-ratio/AspectRatio.d.cts

@@ -1,14 +1,10 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Fallback for invalid ratios. Non-positive or non-finite numbers are invalid
- * CSS `aspect-ratio` values; the declaration is discarded and the element
- * collapses to no height (looks broken).
+ * Fallback for invalid ratios, since non-positive or non-finite numbers collapse the CSS `aspect-ratio` box.
  */
 export declare function resolveAspectRatio(ratio: number): number;
 /**
- * Maintains a fixed width:height ratio for content via the `aspect-ratio` CSS
- * property. Independent of consumer CSS. Requires a containing block with a
- * definite inline size; `aspect-ratio` resolves one axis from the other.
+ * Maintains a fixed width:height ratio for content via the `aspect-ratio` CSS property.
  *
  * @example
  * ```html
@@ -29,7 +25,7 @@ export declare class SkdxAspectRatio extends LitElement {
      * @default 1
      */
     ratio: number;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/aspect-ratio/AspectRatio.d.ts

@@ -1,14 +1,10 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * Fallback for invalid ratios. Non-positive or non-finite numbers are invalid
- * CSS `aspect-ratio` values; the declaration is discarded and the element
- * collapses to no height (looks broken).
+ * Fallback for invalid ratios, since non-positive or non-finite numbers collapse the CSS `aspect-ratio` box.
  */
 export declare function resolveAspectRatio(ratio: number): number;
 /**
- * Maintains a fixed width:height ratio for content via the `aspect-ratio` CSS
- * property. Independent of consumer CSS. Requires a containing block with a
- * definite inline size; `aspect-ratio` resolves one axis from the other.
+ * Maintains a fixed width:height ratio for content via the `aspect-ratio` CSS property.
  *
  * @example
  * ```html
@@ -29,7 +25,7 @@ export declare class SkdxAspectRatio extends LitElement {
      * @default 1
      */
     ratio: number;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/aspect-ratio/AspectRatio.js

@@ -1,7 +1,10 @@
-var d=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var n=(e,o,a,i)=>{for(var t=i>1?void 0:i?p(o,a):o,s=e.length-1,l;s>=0;s--)(l=e[s])&&(t=(i?l(o,a,t):l(t))||t);return i&&t&&d(o,a,t),t};import{css as c,html as u,LitElement as f}from"lit";import{property as b}from"lit/decorators.js";import{customElement as h}from"../internal/define.js";import{hiddenHostStyles as v}from"../internal/styles.js";import{isDevMode as g}from"../utils/is-dev-mode.js";var m=!1;function y(e){return Number.isFinite(e)&&e>0?e:(m||(m=!0,g()&&console.warn(`[skdx] AspectRatio: \`ratio\` must be a finite number greater than zero, got ${e}. Falling back to the default of 1. A non-positive ratio is not a valid CSS aspect-ratio, so the declaration would be discarded and the box would collapse to no height.`)),1)}var r=class extends f{constructor(){super(...arguments);this.ratio=1}render(){return u`<div part="aspect-ratio" style=${`aspect-ratio: ${y(this.ratio)}`}>
+var p=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var n=(e,o,i,a)=>{for(var t=a>1?void 0:a?d(o,i):o,s=e.length-1,l;s>=0;s--)(l=e[s])&&(t=(a?l(o,i,t):l(t))||t);return a&&t&&p(o,i,t),t};import{css as c,html as u,LitElement as f}from"lit";import{property as b}from"lit/decorators.js";import{customElement as h}from"../internal/define.js";import{isDevMode as v}from"../internal/dev-mode.js";import{hiddenHostStyles as y}from"../internal/styles.js";var m=!1;function g(e){return Number.isFinite(e)&&e>0?e:(m||(m=!0,v()&&console.warn(`[skdx] AspectRatio: \`ratio\` must be a finite number greater than zero, got ${e}. Falling back to the default of 1. A non-positive ratio is not a valid CSS aspect-ratio, so the declaration would be discarded and the box would collapse to no height.`)),1)}var r=class extends f{constructor(){super(...arguments);this.ratio=1}render(){return u`<div
+      part="aspect-ratio"
+      style=${`aspect-ratio: ${g(this.ratio)}`}
+    >
       <slot></slot>
-    </div>`}};r.styles=[v,c`
+    </div>`}};r.styles=[y,c`
       :host {
         display: block;
       }
-    `],n([b({type:Number})],r.prototype,"ratio",2),r=n([h("skdx-aspect-ratio","aspect-ratio","root")],r);export{r as SkdxAspectRatio,y as resolveAspectRatio};
+    `],n([b({type:Number})],r.prototype,"ratio",2),r=n([h("skdx-aspect-ratio","aspect-ratio","root")],r);export{r as SkdxAspectRatio,g as resolveAspectRatio};

package/dist/autocomplete/Autocomplete.cjs

@@ -1,5 +1,5 @@
-"use strict";var d=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var A=(l,a)=>{for(var t in a)d(l,t,{get:a[t],enumerable:!0})},L=(l,a,t,e)=>{if(a&&typeof a=="object"||typeof a=="function")for(let i of R(a))!x.call(l,i)&&i!==t&&d(l,i,{get:()=>a[i],enumerable:!(e=b(a,i))||e.enumerable});return l};var F=l=>L(d({},"__esModule",{value:!0}),l),n=(l,a,t,e)=>{for(var i=e>1?void 0:e?b(a,t):a,o=l.length-1,p;o>=0;o--)(p=l[o])&&(i=(e?p(a,t,i):p(i))||i);return e&&i&&d(a,t,i),i};var M={};A(M,{AUTOCOMPLETE_UPDATE_EVENT:()=>g,OPTION_SELECTOR:()=>m,SkdxAutocomplete:()=>s,defaultGetSuggestionCountLabel:()=>T,scrollIntoPopup:()=>I});module.exports=F(M);var h=require("lit"),r=require("lit/decorators.js"),f=require("../internal/authored.cjs"),y=require("../internal/define.cjs"),O=require("../internal/form-associated.cjs"),V=require("../internal/ids.cjs"),E=require("../internal/open-change-complete.cjs"),v=require("../internal/positioning.cjs"),c=require("../internal/scored-filter.cjs"),C=require("../utils/live-announcer.cjs"),u=require("./AutocompleteAnatomy.cjs");var m='[role="option"]:not([data-disabled])',g="skdx-autocomplete-internal-update";function I(l,a){let t=l.querySelector('[data-part="viewport"]')??l;if(t===a||!t.contains(a))return;let e=t.getBoundingClientRect(),i=a.getBoundingClientRect();t.scrollTop+=i.top-e.top-(e.height-i.height)/2}function T(l){return`${l} suggestion${l===1?"":"s"} available`}var s=class extends(0,O.FormAssociated)(h.LitElement){constructor(){super(...arguments);this.value="";this.defaultValue="";this.inputValue="";this.open=!1;this.defaultOpen=!1;this.allowCustomValue=!0;this.openOnFocus=!1;this.autoHighlight=!1;this.loop=!0;this.disabled=!1;this.readOnly=!1;this.invalid=!1;this.loading=!1;this.getResultCountLabel=T;this.listId=(0,V.nextId)("skdx-autocomplete-list");this.activeId=null;this.inputHost=null;this.contentEl=null;this.committedText="";this.seeded=!1;this.itemRegistry=new Map;this.itemObserver=new MutationObserver(()=>{this.announceSuggestionCount(),this.visibleOptions()});this.fillAnatomy=()=>{if((0,f.hasAuthoredParts)(this,u.AUTOCOMPLETE_ANATOMY_GENERATED,u.AUTOCOMPLETE_RENDER_SLOTS)){this._anatomyOptionsRef=void 0;return}this.options!==this._anatomyOptionsRef||!(0,f.hasGeneratedContent)(this,u.AUTOCOMPLETE_ANATOMY_GENERATED)?(this._anatomyOptionsRef=this.options,(0,u.fillAutocompleteAnatomy)(this)):(0,u.refreshAutocompleteAnatomyText)(this)};this.hasUpdatedOnce=!1}setValue(t,e="programmatic",i=!1){if(this.value===t)return;let o=this.value;this.value=t;let p={value:t,previousValue:o===""?null:o,reason:e,created:i};this.dispatchEvent(new CustomEvent("value-change",{detail:p,bubbles:!0,composed:!0})),this.notify()}setInputValue(t){this.inputValue!==t&&(this.inputValue=t,this.emit("input-value-change",t))}setOpen(t){this.open!==t&&(this.open=t,t||(this.activeId=null),this.emit("open-change",t))}isSelected(t){return t!==""&&t===this.value}matchesFilter(t){return typeof this.filter!="function"||(0,c.filterKeeps)(this.filter(t,this.inputValue))}visibleOptions(){let t=this.filter;return typeof t!="function"?Array.from(this.querySelectorAll(m)):(0,c.sortByScore)(this,m,e=>{let i=this.itemRegistry.get(e);if(!i)return null;let o=t(i.text,this.inputValue);return typeof o=="number"?o:null})}commitItem(t,e,i="programmatic"){this.disabled||this.readOnly||(this.setValue(t,i,!1),this.setInputValue(e),this.committedText=e,this.setOpen(!1))}commitInputValue(t="keyboard"){if(!(this.disabled||this.readOnly)){if(!this.allowCustomValue){this.setInputValue(this.committedText),this.setOpen(!1);return}this.setValue(this.inputValue,t,!0),this.committedText=this.inputValue,this.setOpen(!1)}}revert(){this.setInputValue(this.committedText),this.setOpen(!1)}clear(){this.setValue("","pointer",!1),this.setInputValue(""),this.committedText="",this.setOpen(!1)}openWithHighlight(t){this.setOpen(!0),requestAnimationFrame(()=>{let e=this.visibleOptions();if(e.length===0)return;let i=t==="last"?e[e.length-1]:e[0];this.setActiveId(i.id),this.contentEl&&I(this.contentEl,i)})}setActiveId(t){this.activeId=t,this.notify()}registerItem(t,e){this.itemRegistry.set(t,e),this.activeId===null&&this.scheduleReseed()}unregisterItem(t){this.itemRegistry.delete(t),(this.activeId===t||this.activeId===null)&&this.scheduleReseed()}getItem(t){return this.itemRegistry.get(t)}scheduleReseed(){this.reseedFrame===void 0&&(this.reseedFrame=requestAnimationFrame(()=>{this.reseedFrame=void 0;let t=this.activeId;if(t===null&&!(this.autoHighlight&&this.open))return;let e=this.visibleOptions();if(t!==null&&e.some(o=>o.id===t))return;let i=e[0]?.id??null;i===null&&t===null||this.setActiveId(i)}))}emit(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0})),this.notify()}notify(){this.dispatchEvent(new CustomEvent(g,{bubbles:!0,composed:!0})),this.requestUpdate()}announceSuggestionCount(){!this.open||this.loading||(0,C.announce)(this.getResultCountLabel(this.querySelectorAll(m).length))}connectedCallback(){super.connectedCallback();let t=this.querySelector("skdx-autocomplete-list")?.id;t&&(this.listId=t),this.seeded||(this.seeded=!0,this.hasAttribute("value")||(this.value=this.defaultValue),this.hasAttribute("input-value")||(this.inputValue=this.defaultInputValue??this.value),this.hasAttribute("open")||(this.open=this.defaultOpen),this.committedText=this.inputValue,this.initialValue=this.value,this.initialInputValue=this.inputValue),this.itemObserver.observe(this,{childList:!0,subtree:!0,attributeFilter:["data-disabled","role"]}),queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.itemObserver.disconnect(),this.reseedFrame!==void 0&&cancelAnimationFrame(this.reseedFrame),this.reseedFrame=void 0,this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}updated(t){let e=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,this.fillAnatomy(),(t.has("inputValue")||t.has("name"))&&this.setFormValue(this.inputValue),(t.has("open")||t.has("loading"))&&this.open&&this.announceSuggestionCount(),t.has("open")&&this.open&&this.autoHighlight&&this.activeId===null&&this.scheduleReseed(),(t.has("inputValue")||t.has("filter"))&&requestAnimationFrame(()=>this.visibleOptions()),t.size>0&&this.dispatchEvent(new CustomEvent(g,{bubbles:!0,composed:!0})),t.has("open")&&!e&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=(0,E.notifyOpenChangeComplete)(()=>this.contentEl,this.open,i=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:i,bubbles:!0,composed:!0}))))}formResetCallback(){this.value=this.initialValue??"",this.inputValue=this.initialInputValue??"",this.committedText=this.inputValue}render(){return h.html`<slot @slotchange=${this.fillAnatomy}></slot>`}};s.styles=h.css`
+"use strict";var f=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var M=(l,a)=>{for(var t in a)f(l,t,{get:a[t],enumerable:!0})},A=(l,a,t,e)=>{if(a&&typeof a=="object"||typeof a=="function")for(let i of L(a))!x.call(l,i)&&i!==t&&f(l,i,{get:()=>a[i],enumerable:!(e=b(a,i))||e.enumerable});return l};var _=l=>A(f({},"__esModule",{value:!0}),l),n=(l,a,t,e)=>{for(var i=e>1?void 0:e?b(a,t):a,o=l.length-1,d;o>=0;o--)(d=l[o])&&(i=(e?d(a,t,i):d(i))||i);return e&&i&&f(a,t,i),i};var B={};M(B,{AUTOCOMPLETE_UPDATE_EVENT:()=>y,OPTION_SELECTOR:()=>m,SkdxAutocomplete:()=>s,defaultGetSuggestionCountLabel:()=>F,scrollIntoPopup:()=>R});module.exports=_(B);var p=require("lit"),r=require("lit/decorators.js"),c=require("../internal/authored.cjs"),O=require("../internal/define.cjs"),h=require("../internal/events.cjs"),V=require("../internal/form-associated.cjs"),I=require("../internal/ids.cjs"),C=require("../internal/open-change-complete.cjs"),T=require("../internal/options.cjs"),g=require("../internal/positioning.cjs"),v=require("../internal/scored-filter.cjs"),E=require("../utils/live-announcer.cjs"),u=require("./AutocompleteAnatomy.cjs");var m='[role="option"]:not([data-disabled])',y="skdx-autocomplete-internal-update";function R(l,a){let t=l.querySelector('[data-part="viewport"]')??l;if(t===a||!t.contains(a))return;let e=t.getBoundingClientRect(),i=a.getBoundingClientRect();t.scrollTop+=i.top-e.top-(e.height-i.height)/2}function F(l){return`${l} suggestion${l===1?"":"s"} available`}var s=class extends(0,V.FormAssociated)(p.LitElement){constructor(){super(...arguments);this.value="";this.defaultValue="";this.inputValue="";this.open=!1;this.defaultOpen=!1;this.allowCustomValue=!0;this.openOnFocus=!1;this.autoHighlight=!1;this.loop=!0;this.disabled=!1;this.readOnly=!1;this.invalid=!1;this.loading=!1;this.getResultCountLabel=F;this.clearable=!1;this.listId=(0,I.nextId)("skdx-autocomplete-list");this.activeId=null;this.inputHost=null;this.contentEl=null;this.committedText="";this.seeded=!1;this.itemRegistry=new Map;this.itemObserver=new MutationObserver(()=>{this.announceSuggestionCount(),this.visibleOptions()});this.fillAnatomy=()=>{if((0,c.hasAuthoredParts)(this,u.AUTOCOMPLETE_ANATOMY_GENERATED,u.AUTOCOMPLETE_RENDER_SLOTS)){this._anatomyOptionsRef=void 0,this._anatomyClearableRef=void 0;return}this.options!==this._anatomyOptionsRef||this.clearable!==this._anatomyClearableRef||!(0,c.hasGeneratedContent)(this,u.AUTOCOMPLETE_ANATOMY_GENERATED)?(this._anatomyOptionsRef=this.options,this._anatomyClearableRef=this.clearable,(0,u.fillAutocompleteAnatomy)(this),this.observeOptions()):(0,u.refreshAutocompleteAnatomyText)(this)};this.hasUpdatedOnce=!1}setValue(t,e="programmatic",i=!1){if(this.value===t)return;let o=this.value;this.value=t,(0,h.emit)(this,"value-change",{value:t,previousValue:o===""?null:o,reason:e,created:i}),this.notify()}setInputValue(t){this.inputValue!==t&&(this.inputValue=t,this.emit("input-value-change",t))}setOpen(t){this.open!==t&&(this.open=t,t||(this.activeId=null),this.emit("open-change",t))}isSelected(t){return t!==""&&t===this.value}matchesFilter(t){let e;return typeof this.filter=="function"?e=this.filter:this.options&&(e=T.defaultOptionsFilter),!e||(0,v.filterKeeps)(e(t,this.inputValue))}visibleOptions(){let t=this.filter;return typeof t!="function"?Array.from(this.querySelectorAll(m)):(0,v.sortByScore)(this,m,e=>{let i=this.itemRegistry.get(e);if(!i)return null;let o=t(i.text,this.inputValue);return typeof o=="number"?o:null})}commitItem(t,e,i="programmatic"){this.disabled||this.readOnly||(this.setValue(t,i,!1),this.setInputValue(e),this.committedText=e,this.setOpen(!1))}commitInputValue(t="keyboard"){if(!(this.disabled||this.readOnly)){if(!this.allowCustomValue){this.setInputValue(this.committedText),this.setOpen(!1);return}this.setValue(this.inputValue,t,!0),this.committedText=this.inputValue,this.setOpen(!1)}}revert(){this.setInputValue(this.committedText),this.setOpen(!1)}clear(){this.setValue("","pointer",!0),this.setInputValue(""),this.committedText="",this.setOpen(!1)}openWithHighlight(t){this.setOpen(!0),requestAnimationFrame(()=>{let e=this.visibleOptions();if(e.length===0)return;let i=t==="last"?e[e.length-1]:e[0];this.setActiveId(this.activeId??i.id),this.contentEl&&R(this.contentEl,i)})}setActiveId(t){this.activeId=t,this.notify()}registerItem(t,e){this.itemRegistry.set(t,e),this.activeId===null&&this.scheduleReseed()}unregisterItem(t){this.itemRegistry.delete(t),(this.activeId===t||this.activeId===null)&&this.scheduleReseed()}getItem(t){return this.itemRegistry.get(t)}scheduleReseed(){this.reseedFrame===void 0&&(this.reseedFrame=requestAnimationFrame(()=>{this.reseedFrame=void 0;let t=this.activeId;if(t===null&&!(this.autoHighlight&&this.open))return;let e=this.visibleOptions();if(t!==null&&e.some(o=>o.id===t))return;let i=e[0]?.id??null;i===null&&t===null||this.setActiveId(i)}))}emit(t,e){(0,h.emit)(this,t,e),this.notify()}notify(){(0,h.emit)(this,y),this.requestUpdate()}announceSuggestionCount(){!this.open||this.loading||(0,E.announce)(this.getResultCountLabel(this.querySelectorAll(m).length))}connectedCallback(){super.connectedCallback();let t=this.querySelector("skdx-autocomplete-list")?.id;t&&(this.listId=t),this.seeded||(this.seeded=!0,this.hasAttribute("value")||(this.value=this.defaultValue),this.hasAttribute("input-value")||(this.inputValue=this.defaultInputValue??this.value),this.hasAttribute("open")||(this.open=this.defaultOpen),this.committedText=this.inputValue,this.initialValue=this.value,this.initialInputValue=this.inputValue),this.observeOptions(),queueMicrotask(this.fillAnatomy)}observeOptions(){this.itemObserver.disconnect(),this.itemObserver.observe(this.querySelector("skdx-autocomplete-list")??this,{childList:!0,subtree:!0,attributeFilter:["data-disabled","role"]})}disconnectedCallback(){this.itemObserver.disconnect(),this.reseedFrame!==void 0&&cancelAnimationFrame(this.reseedFrame),this.reseedFrame=void 0,this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}updated(t){let e=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,this.fillAnatomy(),(t.has("inputValue")||t.has("name"))&&this.setFormValue(this.inputValue),this.syncOpenState(t),(t.has("inputValue")||t.has("filter"))&&requestAnimationFrame(()=>this.visibleOptions()),t.size>0&&(0,h.emit)(this,y),t.has("open")&&!e&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=(0,C.notifyOpenChangeComplete)(()=>this.contentEl,this.open,i=>(0,h.emit)(this,"open-change-complete",i)))}syncOpenState(t){(t.has("open")||t.has("loading"))&&this.open&&this.announceSuggestionCount(),t.has("open")&&this.open&&this.autoHighlight&&this.activeId===null&&this.scheduleReseed()}formResetCallback(){this.value=this.initialValue??"",this.inputValue=this.initialInputValue??"",this.committedText=this.inputValue}render(){return p.html`<slot @slotchange=${this.fillAnatomy}></slot>`}};s.styles=p.css`
     :host {
       display: contents;
     }
-  `,n([(0,r.property)({type:String,reflect:!0})],s.prototype,"value",2),n([(0,r.property)({type:String,attribute:"default-value"})],s.prototype,"defaultValue",2),n([(0,r.property)({type:String,attribute:"input-value"})],s.prototype,"inputValue",2),n([(0,r.property)({type:String,attribute:"default-input-value"})],s.prototype,"defaultInputValue",2),n([(0,r.property)({type:Boolean,reflect:!0})],s.prototype,"open",2),n([(0,r.property)({type:Boolean,attribute:"default-open"})],s.prototype,"defaultOpen",2),n([(0,r.property)({converter:v.optOutBoolean,attribute:"allow-custom-value"})],s.prototype,"allowCustomValue",2),n([(0,r.property)({type:Boolean,attribute:"open-on-focus",reflect:!0})],s.prototype,"openOnFocus",2),n([(0,r.property)({type:Boolean,attribute:"auto-highlight",reflect:!0})],s.prototype,"autoHighlight",2),n([(0,r.property)({converter:v.optOutBoolean,attribute:"loop"})],s.prototype,"loop",2),n([(0,r.property)({attribute:!1})],s.prototype,"filter",2),n([(0,r.property)({type:Boolean,reflect:!0})],s.prototype,"disabled",2),n([(0,r.property)({type:Boolean,attribute:"read-only",reflect:!0})],s.prototype,"readOnly",2),n([(0,r.property)({type:Boolean,reflect:!0})],s.prototype,"invalid",2),n([(0,r.property)({type:Boolean,reflect:!0})],s.prototype,"loading",2),n([(0,r.property)({type:String,reflect:!0})],s.prototype,"name",2),n([(0,r.property)({type:String,attribute:"form",reflect:!0})],s.prototype,"formId",2),n([(0,r.property)({attribute:!1})],s.prototype,"getResultCountLabel",2),n([(0,r.property)({attribute:!1})],s.prototype,"options",2),n([(0,r.property)({type:String})],s.prototype,"placeholder",2),s=n([(0,y.customElement)("skdx-autocomplete")],s);0&&(module.exports={AUTOCOMPLETE_UPDATE_EVENT,OPTION_SELECTOR,SkdxAutocomplete,defaultGetSuggestionCountLabel,scrollIntoPopup});
+  `,n([(0,r.property)({type:String,reflect:!0})],s.prototype,"value",2),n([(0,r.property)({type:String,attribute:"default-value"})],s.prototype,"defaultValue",2),n([(0,r.property)({type:String,attribute:"input-value"})],s.prototype,"inputValue",2),n([(0,r.property)({type:String,attribute:"default-input-value"})],s.prototype,"defaultInputValue",2),n([(0,r.property)({type:Boolean,reflect:!0})],s.prototype,"open",2),n([(0,r.property)({type:Boolean,attribute:"default-open"})],s.prototype,"defaultOpen",2),n([(0,r.property)({converter:g.optOutBoolean,attribute:"allow-custom-value"})],s.prototype,"allowCustomValue",2),n([(0,r.property)({type:Boolean,attribute:"open-on-focus",reflect:!0})],s.prototype,"openOnFocus",2),n([(0,r.property)({type:Boolean,attribute:"auto-highlight",reflect:!0})],s.prototype,"autoHighlight",2),n([(0,r.property)({converter:g.optOutBoolean,attribute:"loop"})],s.prototype,"loop",2),n([(0,r.property)({attribute:!1})],s.prototype,"filter",2),n([(0,r.property)({type:Boolean,reflect:!0})],s.prototype,"disabled",2),n([(0,r.property)({type:Boolean,attribute:"read-only",reflect:!0})],s.prototype,"readOnly",2),n([(0,r.property)({type:Boolean,reflect:!0})],s.prototype,"invalid",2),n([(0,r.property)({type:Boolean,reflect:!0})],s.prototype,"loading",2),n([(0,r.property)({type:String,reflect:!0})],s.prototype,"name",2),n([(0,r.property)({type:String,attribute:"form",reflect:!0})],s.prototype,"formId",2),n([(0,r.property)({attribute:!1})],s.prototype,"getResultCountLabel",2),n([(0,r.property)({attribute:!1})],s.prototype,"options",2),n([(0,r.property)({type:String})],s.prototype,"placeholder",2),n([(0,r.property)({type:Boolean,reflect:!0})],s.prototype,"clearable",2),s=n([(0,O.customElement)("skdx-autocomplete")],s);0&&(module.exports={AUTOCOMPLETE_UPDATE_EVENT,OPTION_SELECTOR,SkdxAutocomplete,defaultGetSuggestionCountLabel,scrollIntoPopup});

package/dist/autocomplete/Autocomplete.d.cts

@@ -1,13 +1,11 @@
-import { LitElement } from 'lit';
-import type { SkdxOptionsInput } from '../internal/options.cjs';
-/** @internal Selector for a suggestion that is still an option and still live, mirrored from the React autocomplete util. */
+import { LitElement, type TemplateResult } from 'lit';
+import { type SkdxOptionsInput } from '../internal/options.cjs';
+/** @internal Selector for a suggestion that is still an option and still live. */
 export declare const OPTION_SELECTOR = "[role=\"option\"]:not([data-disabled])";
 /** @internal Root state change event for part re-rendering. */
 export declare const AUTOCOMPLETE_UPDATE_EVENT = "skdx-autocomplete-internal-update";
 /**
- * Scrolls option into view inside popup. Not scrollIntoView(): on opening,
- * floating-ui is at document origin, so ancestor-walking scrolls page to top.
- * @internal
+ * @internal Scrolls an option into view inside the popup rather than the page.
  */
 export declare function scrollIntoPopup(content: HTMLElement, option: HTMLElement): void;
 /** Default `getResultCountLabel`: `"1 suggestion available"` / `"3 suggestions available"`. */
@@ -32,28 +30,11 @@ export interface SkdxAutocompleteItemEntry {
 }
 /** Filter predicate or `'manual'` (default). Predicate returning a number also ranks matches by score. */
 export type SkdxAutocompleteFilter = 'manual' | ((itemText: string, inputValue: string) => boolean | number);
-declare const SkdxAutocomplete_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
+declare const SkdxAutocomplete_base: typeof LitElement & (new (...args: any[]) => import("../index.cjs").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
 /**
- * `<skdx-autocomplete>` — the Web Components implementation of
- * `@skdx/shared`'s `autocompleteContract`. A WAI-ARIA 1.2 "combobox with
- * list autocomplete" with one difference from `<skdx-combobox>`: **the
- * committed value does not have to come from the list** — type "foo", tab
- * away, and "foo" is the answer.
- *
- * The root owns two pieces of state — draft `input-value` and committed
- * `value` — plus popup open state, and hands them to every
- * `<skdx-autocomplete-*>` part via `closest('skdx-autocomplete')`.
- *
- * Real DOM focus never leaves `<skdx-autocomplete-input>`; the highlighted
- * suggestion is virtual, named by `aria-activedescendant`. Filtering is the
- * consumer's job by default; set the `filter` property to move it inside
- * the component instead. `loading` publishes `aria-busy` and silences the
- * count announcement.
- *
- * Form-associated via `ElementInternals`: with a `name`, the field submits
- * the text currently in the input.
+ * `<skdx-autocomplete>` is a WAI-ARIA 1.2 combobox with list autocomplete whose committed value doesn't have to come from the list.
  *
  * @example
  * ```html
@@ -110,7 +91,6 @@ export declare class SkdxAutocomplete extends SkdxAutocomplete_base {
     defaultOpen: boolean;
     /**
      * Allows committing text that is not in the suggestion list via Tab, Enter, or blur.
-     * Defaulting to `true` means the attribute must be switched off by value, not by absence.
      * @default true
      */
     allowCustomValue: boolean;
@@ -125,8 +105,7 @@ export declare class SkdxAutocomplete extends SkdxAutocomplete_base {
      */
     autoHighlight: boolean;
     /**
-     * Wraps arrow navigation around the ends of the suggestion list; Arrow Down from last highlights first.
-     * Write `loop="false"` to clamp at the ends. Home/End always jump to an end.
+     * Wraps arrow navigation around the ends of the suggestion list; Arrow Down from the last item highlights the first.
      * @default true
      */
     loop: boolean;
@@ -151,8 +130,7 @@ export declare class SkdxAutocomplete extends SkdxAutocomplete_base {
      */
     invalid: boolean;
     /**
-     * Marks suggestions in flight: `aria-busy="true"` and `data-loading` on input and content.
-     * Suppresses suggestion-count announcement while loading.
+     * Marks suggestions in flight, publishing `aria-busy` and `data-loading`, and suppresses the count announcement.
      * @default false
      */
     loading: boolean;
@@ -162,8 +140,7 @@ export declare class SkdxAutocomplete extends SkdxAutocomplete_base {
      */
     name?: string;
     /**
-     * Id of the form this submits into; allows living outside its form element.
-     * Property is `formId` (attribute is `form`) to avoid shadowing the readonly `form` getter.
+     * Id of the form this submits into, allowing it to live outside its form element.
      * @default undefined — submits into nearest ancestor form.
      */
     formId?: string;
@@ -173,8 +150,7 @@ export declare class SkdxAutocomplete extends SkdxAutocomplete_base {
      */
     getResultCountLabel: (count: number) => string;
     /**
-     * Suggestion collection for data-driven rendering; auto-derives Input, Trigger, popup.
-     * Flat list or `{ label, options }` groups. Set `filter` to narrow.
+     * Suggestion collection for data-driven rendering that auto-derives Input, Trigger, and the popup.
      * @default undefined — author parts by hand.
      */
     options?: SkdxOptionsInput;
@@ -183,6 +159,11 @@ export declare class SkdxAutocomplete extends SkdxAutocomplete_base {
      * @default undefined — no placeholder is derived.
      */
     placeholder?: string;
+    /**
+     * Whether the derived anatomy renders a Clear button that empties draft text and committed value.
+     * @default false — no Clear button is derived.
+     */
+    clearable: boolean;
     /** Id for `<skdx-autocomplete-list>` and input's `aria-controls`. */
     listId: string;
     /** Id of virtually-focused suggestion or `null`. */
@@ -191,68 +172,40 @@ export declare class SkdxAutocomplete extends SkdxAutocomplete_base {
     inputHost: HTMLElement | null;
     /** @internal Mounted autocomplete-content, registered to own Escape. */
     contentEl: HTMLElement | null;
-    /** Text Escape restores. */
     private committedText;
     private initialValue?;
     private initialInputValue?;
     private seeded;
-    /**
-     * Sets `value` and dispatches `value-change`; no-op if value is unchanged. @internal
-     */
+    /** @internal Sets `value` and dispatches `value-change`; a no-op if unchanged. */
     setValue(value: string, reason?: SkdxAutocompleteValueChangeDetail['reason'], created?: boolean): void;
-    /**
-     * Sets `inputValue` and dispatches `input-value-change`; no-op if unchanged. @internal
-     */
+    /** @internal Sets `inputValue` and dispatches `input-value-change`; a no-op if unchanged. */
     setInputValue(value: string): void;
-    /**
-     * Sets `open` and dispatches `open-change`; clears virtual highlight on close. @internal
-     */
+    /** @internal Sets `open` and dispatches `open-change`; clears virtual highlight on close. */
     setOpen(open: boolean): void;
-    /**
-     * Whether a suggestion's value is the committed one; for `aria-selected`. @internal
-     */
+    /** @internal Whether a suggestion's value is the committed one; for `aria-selected`. */
     isSelected(value: string): boolean;
-    /**
-     * Whether item text survives the current filter and draft text. @internal
-     */
+    /** @internal Whether item text survives the current filter and draft text. */
     matchesFilter(itemText: string): boolean;
-    /**
-     * Visible suggestions, ranked by numeric filter predicate.
-     * Sorts by descending score and sets inline CSS `order`. @internal
-     */
+    /** @internal Visible suggestions, ranked by numeric filter predicate via inline CSS `order`. */
     visibleOptions(): HTMLElement[];
-    /**
-     * Commits a suggestion: writes text to input, value to `value`, and closes. @internal
-     */
+    /** @internal Commits a suggestion: writes text to input, value to `value`, and closes. */
     commitItem(value: string, text: string, reason?: SkdxAutocompleteValueChangeDetail['reason']): void;
-    /**
-     * Commits raw draft as value or restores last committed text if allowCustomValue is off. @internal
-     */
+    /** @internal Commits raw draft as value, or restores the last committed text if `allowCustomValue` is off. */
     commitInputValue(reason?: SkdxAutocompleteValueChangeDetail['reason']): void;
-    /**
-     * Closes and puts the last committed text back in the input (Escape). @internal
-     */
+    /** @internal Closes and puts the last committed text back in the input (Escape). */
     revert(): void;
-    /**
-     * Empties draft text, committed value, and remembered text together. @internal
-     */
+    /** @internal Empties draft text, committed value, and remembered text together. */
     clear(): void;
-    /**
-     * Opens popup and highlights first or last suggestion once it mounts. @internal
-     */
+    /** @internal Opens the popup and highlights the first or last suggestion once it mounts. */
     openWithHighlight(edge: 'first' | 'last'): void;
-    /**
-     * Sets the virtually-focused suggestion id. @internal
-     */
+    /** @internal Sets the virtually-focused suggestion id. */
     setActiveId(id: string | null): void;
     private readonly itemRegistry;
     /** @internal Called by rendered items so Enter can commit by id. */
     registerItem(id: string, entry: SkdxAutocompleteItemEntry): void;
     /** @internal Called when item unmounts or is filtered out. */
     unregisterItem(id: string): void;
-    /**
-     * The registered entry for a suggestion id, or `undefined` if no longer rendered. @internal
-     */
+    /** @internal The registered entry for a suggestion id, or `undefined` if no longer rendered. */
     getItem(id: string): SkdxAutocompleteItemEntry | undefined;
     private reseedFrame?;
     /** Re-points virtual focus; deferred a frame so new options land in the DOM. */
@@ -263,16 +216,19 @@ export declare class SkdxAutocomplete extends SkdxAutocomplete_base {
     private readonly itemObserver;
     private announceSuggestionCount;
     private _anatomyOptionsRef?;
+    private _anatomyClearableRef?;
     connectedCallback(): void;
+    private observeOptions;
     /** Draws canonical anatomy when no consumer-authored parts exist; rebuilds tear down suggestions. */
     private readonly fillAnatomy;
     disconnectedCallback(): void;
     private hasUpdatedOnce;
     private teardownOpenChangeComplete?;
     protected updated(changed: Map<string, unknown>): void;
+    private syncOpenState;
     /** Restores committed value and draft text from connection; fires no change event. */
     formResetCallback(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {