@skdx/web-components 0.30.0 → 0.31.0

package/dist/internal/field-core.d.cts

@@ -46,6 +46,8 @@ export interface FieldCharacterCountOptions {
 export declare function characterCountMessage(remaining: number): string;
 /** Whether a count has passed its threshold and should be rendered/announced. */
 export declare function characterCountVisible(count: number, maxLength: number, threshold?: number): boolean;
+/** Joins a Field's messages into one string, separated by a period unless a message already ends in sentence punctuation. */
+export declare function joinFieldMessages(messages: string[]): string;
 /** Fallback message when native constraint validation has no `validationMessage`. */
 export declare const NATIVE_INVALID_FALLBACK_MESSAGE = "This field is invalid.";
 /** Marks an element as this Field's control, an escape hatch for composites in shadow DOM. */

package/dist/internal/field-core.d.ts

@@ -46,6 +46,8 @@ export interface FieldCharacterCountOptions {
 export declare function characterCountMessage(remaining: number): string;
 /** Whether a count has passed its threshold and should be rendered/announced. */
 export declare function characterCountVisible(count: number, maxLength: number, threshold?: number): boolean;
+/** Joins a Field's messages into one string, separated by a period unless a message already ends in sentence punctuation. */
+export declare function joinFieldMessages(messages: string[]): string;
 /** Fallback message when native constraint validation has no `validationMessage`. */
 export declare const NATIVE_INVALID_FALLBACK_MESSAGE = "This field is invalid.";
 /** Marks an element as this Field's control, an escape hatch for composites in shadow DOM. */

package/dist/internal/field-core.js

@@ -1 +1 @@
-var C="validity-change",a="data-skdx-field",u="data-skdx-field-name",p="data-skdx-field-message",F="data-skdx-field-description",I="data-skdx-field-error",$="data-skdx-field-character-count",E="data-skdx-field-pending",c="data-skdx-field-resubmit",m="data-skdx-form-field",_="data-skdx-form-message",G=["validity-change","invalid","change","blur"],D="data-skdx-error-summary",j=1e3;function M(i){let e=Math.abs(i),t=e===1?"character":"characters";return i<0?`You have ${e} ${t} too many`:`You have ${e} ${t} remaining`}function V(i,e,t=0){return t<=0?!0:i>=e*t/100}var O="This field is invalid.",w="data-skdx-field-control",x=[`[${w}]`,'input:not([type="hidden"])',"select","textarea",'[role="textbox"]','[role="searchbox"]','[role="combobox"]','[role="listbox"]','[role="radiogroup"]','[role="group"]','[role="slider"]','[role="spinbutton"]','[role="checkbox"]','[role="radio"]','[role="switch"]'].join(", "),Y="data-skdx-field-required-indicator",k=new Set(["INPUT","SELECT","TEXTAREA"]),R=new Set(["radiogroup","group"]),B=['input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","button:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(", ");function T(i){return i==null?[]:(Array.isArray(i)?i:[i]).filter(t=>typeof t=="string"&&t.trim()!=="")}function S(i){for(let e of Array.from(i.querySelectorAll(x)))if(e.getAttribute("aria-hidden")!=="true"&&e.closest(`[${a}]`)===i)return e;return null}function f(i,e){return v(i,a,e)}function v(i,e,t){for(let r of Array.from(i.querySelectorAll(t)))if(r.closest(`[${e}]`)===i)return r;return null}function P(i){if(!i)return;let e=i;return e.type==="checkbox"||e.type==="radio"?e.checked:"value"in i?e.value:i.querySelector('input[aria-hidden="true"]')?.value}function d(i){return i==null||i===!1||i===""?!1:!(Array.isArray(i)&&i.length===0)}function o(i,e,t){t?i.setAttribute(e,""):i.removeAttribute(e)}function y(i,...e){let t=i.split(/\s+/).filter(Boolean);for(let r of e)r&&!t.includes(r)&&t.push(r);return t.join(" ")}function z(i){return i.closest("form, skdx-form")??i.parentElement??i}function N(i){let e=S(i),r=f(i,`[${I}]`)?.textContent?.trim()||i.getAttribute(p)||i.getAttribute(u)||"";return!e?.id||!r?[]:[{id:e.id,message:r}]}function H(i){let e=v(i,m,x);if(!e?.id||e.getAttribute("aria-invalid")!=="true")return[];let r=v(i,m,`[${_}]:not([hidden])`)?.textContent?.trim()||i.getAttribute(u)||"";return r?[{id:e.id,message:r}]:[]}function K(i){return Array.from(i.querySelectorAll(`[${a}][data-invalid], [${m}]`)).flatMap(t=>(t.hasAttribute(a)?N:H)(t))}var b="__skdxFieldCheckValidity",g="__skdxFieldReset";async function Q(i){let e=Array.from(i.querySelectorAll(`[${a}]`));return(await Promise.all(e.map(r=>r[b]?.()??Promise.resolve(!0)))).every(Boolean)}function X(i){for(let e of Array.from(i.querySelectorAll(`[${a}]`)))e[g]?.()}function J(i,e=document){let t=e.getElementById(i);if(!t)return;let r=t.getAttribute("role"),s=(t.tagName==="FIELDSET"||r!==null&&R.has(r)?t.querySelector(B):null)??t;s.focus(),s.scrollIntoView?.({block:"center"})}var A=class{constructor(e){this.options=e;this.props={};this.root=null;this.form=null;this.control=null;this.baseDescribedBy="";this.baseLabelledBy="";this.wroteLabelledBy=!1;this.wroteRequired=!1;this.wroteDisabled=!1;this.wroteGroupDisabled=!1;this.runToken=0;this.pending=!1;this.injected=[];this.custom=[];this.characterCount=null;this.awaitingSubmit=!1;this.handleInput=()=>{let e=this.isOverLimit(this.snapshot.count),t=this.readCount();this.update({dirty:!0,filled:d(this.resolveValue()),count:t,errors:this.composeErrors(t)}),this.scheduleCountAnnouncement(t,e),(this.props.mode==="change"||this.snapshot.errors.length>0)&&this.scheduleValidation()};this.handleFocusOut=()=>{let e=this.readCount();this.update({touched:!0,filled:d(this.resolveValue()),count:e,errors:this.composeErrors(e)});let t=this.validationTimer!==void 0;clearTimeout(this.validationTimer),this.validationTimer=void 0;let r=this.props.mode??"blur";(t||r==="blur"||this.snapshot.errors.length>0)&&this.runValidation()};this.handleSubmit=e=>{if(!this.form)return;let t=e.target;if(t!==this.form&&t?.closest?.("form")!==this.form||this.isEngineResubmit(e))return;this.markTouched();let r=this.runValidation({silent:this.hasErrorSummary()});if(L(r)){e.preventDefault(),this.awaitingSubmit=!0,Promise.resolve(r).then(()=>{this.awaitingSubmit&&(this.awaitingSubmit=!1,this.resubmitIfSettled())});return}(r.length>0||this.pending)&&e.preventDefault()};this.snapshot={controlId:"",errors:[],valid:!0,touched:!1,dirty:!1,filled:!1,count:0,validity:null}}get state(){return this.snapshot}setProps(e){let t=this.props.value;this.props=e;let r=T(e.errors??null),n=!q(this.injected,r);n&&(this.injected=r);let s=e.value!==t;if(!n&&!s)return;let l=this.readCount();this.update({count:l,filled:d(this.resolveValue()),errors:this.composeErrors(l)})}setCharacterCount(e){if((this.characterCount?.maxLength??null)===(e?.maxLength??null)&&(this.characterCount?.threshold??0)===(e?.threshold??0))return;this.characterCount=e;let r=this.readCount();this.update({count:r,errors:this.composeErrors(r)})}readCount(){let e=this.resolveValue();return typeof e=="string"?e.length:0}countMessage(e){return(this.props.getCharacterCountMessage??M)(e)}isOverLimit(e){return this.characterCount!==null&&e>this.characterCount.maxLength}composeErrors(e=this.snapshot.count){let t=[...this.injected,...this.custom];return this.characterCount&&this.isOverLimit(e)&&t.push(this.countMessage(this.characterCount.maxLength-e)),t}scheduleCountAnnouncement(e,t){let r=this.characterCount;if(!r)return;if(clearTimeout(this.announceTimer),this.isOverLimit(e)){t||this.options.announce(this.countMessage(r.maxLength-e),"assertive");return}if(!V(e,r.maxLength,r.threshold))return;let n=r.maxLength-e;this.announceTimer=setTimeout(()=>{this.options.announce(this.countMessage(n),"polite")},1e3)}connect(e){this.root=e,e.setAttribute(a,""),Object.defineProperty(e,b,{value:()=>this.validate(),configurable:!0,enumerable:!1,writable:!0}),Object.defineProperty(e,g,{value:()=>this.reset(),configurable:!0,enumerable:!1,writable:!0}),e.addEventListener("input",this.handleInput,!0),e.addEventListener("change",this.handleInput,!0),e.addEventListener("focusout",this.handleFocusOut,!0),this.form=e.closest("form"),this.form&&e.ownerDocument.addEventListener("submit",this.handleSubmit,!0),this.sync();let t=this.readCount();this.update({filled:d(this.resolveValue()),count:t,errors:this.composeErrors(t)})}disconnect(){clearTimeout(this.announceTimer),clearTimeout(this.validationTimer),this.validationTimer=void 0,this.awaitingSubmit=!1;let e=this.root;e&&(e.removeEventListener("input",this.handleInput,!0),e.removeEventListener("change",this.handleInput,!0),e.removeEventListener("focusout",this.handleFocusOut,!0),this.form&&e.ownerDocument.removeEventListener("submit",this.handleSubmit,!0),delete e[b],delete e[g],this.root=null,this.form=null,this.control=null)}sync(){let e=this.root;if(!e)return;let t=S(e);t!==this.control&&(this.control=t,this.baseDescribedBy=t?.getAttribute("aria-describedby")??"",this.baseLabelledBy=t?.getAttribute("aria-labelledby")??"",this.wroteLabelledBy=!1,this.wroteRequired=!1,this.wroteDisabled=!1,this.wroteGroupDisabled=!1);let{name:r}=this.props;r?e.setAttribute(u,r):e.removeAttribute(u);let n=this.snapshot.errors.join(" ");n?e.setAttribute(p,n):e.removeAttribute(p),this.applyStateAttributes(e),t&&(t.id||(t.id=this.options.controlId),t.id!==this.snapshot.controlId&&(this.snapshot={...this.snapshot,controlId:t.id,validity:this.readValidity()},this.options.onSnapshotChange(this.snapshot)),this.applyDescribedBy(e,t),this.snapshot.errors.length>0?t.setAttribute("aria-invalid","true"):t.removeAttribute("aria-invalid"),this.applyLabelledBy(e,t),this.applyConstraintState(t),this.applyStateAttributes(t))}applyDescribedBy(e,t){let r=f(e,`[${F}]`)!==null,n=f(e,`[${I}]`)!==null,s=y(this.baseDescribedBy,r?this.options.descriptionId:void 0,n?this.options.errorId:void 0);s?t.setAttribute("aria-describedby",s):t.removeAttribute("aria-describedby")}applyLabelledBy(e,t){let r=e.ownerDocument.getElementById(this.options.labelId)!==null;this.options.grouped&&r?(t.setAttribute("aria-labelledby",y(this.baseLabelledBy,this.options.labelId)),this.wroteLabelledBy=!0):this.wroteLabelledBy&&(this.baseLabelledBy?t.setAttribute("aria-labelledby",this.baseLabelledBy):t.removeAttribute("aria-labelledby"),this.wroteLabelledBy=!1)}applyConstraintState(e){let t=k.has(e.tagName),r=this.props.required===!0,n=this.props.disabled===!0;r?(t?e.setAttribute("required",""):e.setAttribute("aria-required","true"),this.wroteRequired=!0):this.wroteRequired&&(e.removeAttribute(t?"required":"aria-required"),this.wroteRequired=!1),n?(t?e.setAttribute("disabled",""):e.setAttribute("aria-disabled","true"),this.wroteDisabled=!0):this.wroteDisabled&&(e.removeAttribute(t?"disabled":"aria-disabled"),this.wroteDisabled=!1),t||this.applyGroupDisabled(e,n)}applyGroupDisabled(e,t){let r=e.getAttribute("role");if(!(!(e.tagName==="FIELDSET"||r!==null&&R.has(r))||!t&&!this.wroteGroupDisabled)){for(let s of e.querySelectorAll("input, select, textarea, button"))t?s.setAttribute("disabled",""):s.removeAttribute("disabled");this.wroteGroupDisabled=t}}validate(){return Promise.resolve(this.runValidation()).then(e=>e.length===0)}reset(){this.injected=[],this.custom=[],this.pending=!1,this.awaitingSubmit=!1,this.runToken++,clearTimeout(this.announceTimer),clearTimeout(this.validationTimer),this.validationTimer=void 0,this.markPending(!1);let e=this.readCount();this.update({touched:!1,dirty:!1,count:e,filled:d(this.resolveValue()),errors:this.composeErrors(e)}),this.sync()}markTouched(){this.snapshot.touched||this.update({touched:!0})}applyStateAttributes(e){let{errors:t,touched:r,dirty:n,filled:s,count:l}=this.snapshot;o(e,"data-invalid",t.length>0),o(e,"data-valid",t.length===0),o(e,"data-touched",r),o(e,"data-dirty",n),o(e,"data-filled",s),o(e,"data-over-limit",this.isOverLimit(l)),o(e,"data-disabled",this.props.disabled===!0)}resolveValue(){return this.props.value!==void 0?this.props.value:P(this.control)}readValidity(){return this.control?.validity??null}markPending(e){this.root&&o(this.root,E,e)}nativeMessage(){let e=this.control;return!e?.validity||e.validity.valid?null:e.validationMessage||this.props.invalidMessage||O}runValidation(e={}){let t=++this.runToken,r=this.props.validate?.(this.resolveValue());return L(r)?(this.pending=!0,this.markPending(!0),Promise.resolve(r).then(n=>t!==this.runToken?this.snapshot.errors:(this.pending=!1,this.markPending(!1),this.commit(n,e)))):this.commit(r,e)}commit(e,t){if(this.custom=T(e),this.custom.length===0){let h=this.nativeMessage();h&&!this.injected.includes(h)&&(this.custom=[h])}let r=this.readCount(),n=this.composeErrors(r),s=this.snapshot.errors.length===0;this.update({errors:n,count:r,filled:d(this.resolveValue())});let l=n[0];return l&&s&&!t.silent&&this.options.announce(l,"assertive"),n}update(e){let t={...this.snapshot,...e,valid:!0,validity:this.readValidity()};t.valid=t.errors.length===0,!U(this.snapshot,t)&&(this.snapshot=t,this.sync(),this.options.onSnapshotChange(t),this.root?.dispatchEvent(new CustomEvent(C,{bubbles:!0,composed:!0,detail:{valid:t.valid,errors:t.errors,touched:t.touched,dirty:t.dirty,filled:t.filled,count:t.count,validity:t.validity}})))}scheduleValidation(){clearTimeout(this.validationTimer),this.validationTimer=void 0;let e=this.props.mode==="change"?this.props.validationDebounceTime??0:0;if(e<=0){this.runValidation();return}this.validationTimer=setTimeout(()=>{this.validationTimer=void 0,this.runValidation()},e)}hasErrorSummary(){return this.form?.querySelector(`[${D}]`)!=null}isEngineResubmit(e){return this.form?.hasAttribute(c)?(this.snapshot.errors.length>0&&e.preventDefault(),!0):!1}resubmitIfSettled(){let e=this.form;if(!(!e||typeof e.requestSubmit!="function")&&!e.querySelector(`[${E}]`)&&!e.querySelector(`[${a}][data-invalid]`)){e.setAttribute(c,"");try{e.requestSubmit()}finally{e.removeAttribute(c)}}}};function L(i){return typeof i?.then=="function"}function q(i,e){return i.length===e.length&&i.every((t,r)=>t===e[r])}function U(i,e){return i.controlId===e.controlId&&i.valid===e.valid&&i.touched===e.touched&&i.dirty===e.dirty&&i.filled===e.filled&&i.count===e.count&&i.validity===e.validity&&i.errors.length===e.errors.length&&i.errors.every((t,r)=>t===e.errors[r])}export{j as CHARACTER_COUNT_ANNOUNCE_DELAY_MS,G as ERROR_SUMMARY_RESCAN_EVENTS,$ as FIELD_CHARACTER_COUNT_ATTRIBUTE,w as FIELD_CONTROL_ATTRIBUTE,x as FIELD_CONTROL_SELECTOR,F as FIELD_DESCRIPTION_ATTRIBUTE,I as FIELD_ERROR_ATTRIBUTE,D as FIELD_ERROR_SUMMARY_ATTRIBUTE,p as FIELD_MESSAGE_ATTRIBUTE,u as FIELD_NAME_ATTRIBUTE,E as FIELD_PENDING_ATTRIBUTE,Y as FIELD_REQUIRED_INDICATOR_ATTRIBUTE,c as FIELD_RESUBMIT_ATTRIBUTE,a as FIELD_ROOT_ATTRIBUTE,C as FIELD_VALIDITY_CHANGE_EVENT,m as FORM_FIELD_ATTRIBUTE,_ as FORM_MESSAGE_ATTRIBUTE,A as FieldController,O as NATIVE_INVALID_FALLBACK_MESSAGE,M as characterCountMessage,V as characterCountVisible,K as collectFieldErrors,z as errorSummaryScope,S as findFieldControl,J as focusFieldTarget,d as isFilled,T as normalizeMessages,P as readControlValue,X as resetFields,Q as validateFields};
+var C="validity-change",a="data-skdx-field",u="data-skdx-field-name",p="data-skdx-field-message",F="data-skdx-field-description",x="data-skdx-field-error",$="data-skdx-field-character-count",E="data-skdx-field-pending",c="data-skdx-field-resubmit",f="data-skdx-form-field",_="data-skdx-form-message",G=["validity-change","invalid","change","blur"],D="data-skdx-error-summary",j=1e3;function M(i){let e=Math.abs(i),t=e===1?"character":"characters";return i<0?`You have ${e} ${t} too many`:`You have ${e} ${t} remaining`}function V(i,e,t=0){return t<=0?!0:i>=e*t/100}function Y(i){return i.map((e,t)=>t===i.length-1||/[.!?]$/.test(e)?e:`${e}.`).join(" ")}var O="This field is invalid.",w="data-skdx-field-control",I=[`[${w}]`,'input:not([type="hidden"])',"select","textarea",'[role="textbox"]','[role="searchbox"]','[role="combobox"]','[role="listbox"]','[role="radiogroup"]','[role="group"]','[role="slider"]','[role="spinbutton"]','[role="checkbox"]','[role="radio"]','[role="switch"]'].join(", "),z="data-skdx-field-required-indicator",k=new Set(["INPUT","SELECT","TEXTAREA"]),R=new Set(["radiogroup","group"]),B=['input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","button:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(", ");function T(i){return i==null?[]:(Array.isArray(i)?i:[i]).filter(t=>typeof t=="string"&&t.trim()!=="")}function S(i){for(let e of Array.from(i.querySelectorAll(I)))if(e.getAttribute("aria-hidden")!=="true"&&e.closest(`[${a}]`)===i)return e;return null}function m(i,e){return v(i,a,e)}function v(i,e,t){for(let r of Array.from(i.querySelectorAll(t)))if(r.closest(`[${e}]`)===i)return r;return null}function P(i){if(!i)return;let e=i;return e.type==="checkbox"||e.type==="radio"?e.checked:"value"in i?e.value:i.querySelector('input[aria-hidden="true"]')?.value}function d(i){return i==null||i===!1||i===""?!1:!(Array.isArray(i)&&i.length===0)}function o(i,e,t){t?i.setAttribute(e,""):i.removeAttribute(e)}function y(i,...e){let t=i.split(/\s+/).filter(Boolean);for(let r of e)r&&!t.includes(r)&&t.push(r);return t.join(" ")}function K(i){return i.closest("form, skdx-form")??i.parentElement??i}function N(i){let e=S(i),r=m(i,`[${x}]`)?.textContent?.trim()||i.getAttribute(p)||i.getAttribute(u)||"";return!e?.id||!r?[]:[{id:e.id,message:r}]}function H(i){let e=v(i,f,I);if(!e?.id||e.getAttribute("aria-invalid")!=="true")return[];let r=v(i,f,`[${_}]:not([hidden])`)?.textContent?.trim()||i.getAttribute(u)||"";return r?[{id:e.id,message:r}]:[]}function Q(i){return Array.from(i.querySelectorAll(`[${a}][data-invalid], [${f}]`)).flatMap(t=>(t.hasAttribute(a)?N:H)(t))}var b="__skdxFieldCheckValidity",g="__skdxFieldReset";async function X(i){let e=Array.from(i.querySelectorAll(`[${a}]`));return(await Promise.all(e.map(r=>r[b]?.()??Promise.resolve(!0)))).every(Boolean)}function J(i){for(let e of Array.from(i.querySelectorAll(`[${a}]`)))e[g]?.()}function W(i,e=document){let t=e.getElementById(i);if(!t)return;let r=t.getAttribute("role"),s=(t.tagName==="FIELDSET"||r!==null&&R.has(r)?t.querySelector(B):null)??t;s.focus(),s.scrollIntoView?.({block:"center"})}var A=class{constructor(e){this.options=e;this.props={};this.root=null;this.form=null;this.control=null;this.baseDescribedBy="";this.baseLabelledBy="";this.wroteLabelledBy=!1;this.wroteRequired=!1;this.wroteDisabled=!1;this.wroteGroupDisabled=!1;this.runToken=0;this.pending=!1;this.injected=[];this.custom=[];this.characterCount=null;this.awaitingSubmit=!1;this.handleInput=()=>{let e=this.isOverLimit(this.snapshot.count),t=this.readCount();this.update({dirty:!0,filled:d(this.resolveValue()),count:t,errors:this.composeErrors(t)}),this.scheduleCountAnnouncement(t,e),(this.props.mode==="change"||this.snapshot.errors.length>0)&&this.scheduleValidation()};this.handleFocusOut=()=>{let e=this.readCount();this.update({touched:!0,filled:d(this.resolveValue()),count:e,errors:this.composeErrors(e)});let t=this.validationTimer!==void 0;clearTimeout(this.validationTimer),this.validationTimer=void 0;let r=this.props.mode??"blur";(t||r==="blur"||this.snapshot.errors.length>0)&&this.runValidation()};this.handleSubmit=e=>{if(!this.form)return;let t=e.target;if(t!==this.form&&t?.closest?.("form")!==this.form||this.isEngineResubmit(e))return;this.markTouched();let r=this.runValidation({silent:this.hasErrorSummary()});if(L(r)){e.preventDefault(),this.awaitingSubmit=!0,Promise.resolve(r).then(()=>{this.awaitingSubmit&&(this.awaitingSubmit=!1,this.resubmitIfSettled())});return}(r.length>0||this.pending)&&e.preventDefault()};this.snapshot={controlId:"",errors:[],valid:!0,touched:!1,dirty:!1,filled:!1,count:0,validity:null}}get state(){return this.snapshot}setProps(e){let t=this.props.value;this.props=e;let r=T(e.errors??null),n=!q(this.injected,r);n&&(this.injected=r);let s=e.value!==t;if(!n&&!s)return;let l=this.readCount();this.update({count:l,filled:d(this.resolveValue()),errors:this.composeErrors(l)})}setCharacterCount(e){if((this.characterCount?.maxLength??null)===(e?.maxLength??null)&&(this.characterCount?.threshold??0)===(e?.threshold??0))return;this.characterCount=e;let r=this.readCount();this.update({count:r,errors:this.composeErrors(r)})}readCount(){let e=this.resolveValue();return typeof e=="string"?e.length:0}countMessage(e){return(this.props.getCharacterCountMessage??M)(e)}isOverLimit(e){return this.characterCount!==null&&e>this.characterCount.maxLength}composeErrors(e=this.snapshot.count){let t=[...this.injected,...this.custom];return this.characterCount&&this.isOverLimit(e)&&t.push(this.countMessage(this.characterCount.maxLength-e)),t}scheduleCountAnnouncement(e,t){let r=this.characterCount;if(!r)return;if(clearTimeout(this.announceTimer),this.isOverLimit(e)){t||this.options.announce(this.countMessage(r.maxLength-e),"assertive");return}if(!V(e,r.maxLength,r.threshold))return;let n=r.maxLength-e;this.announceTimer=setTimeout(()=>{this.options.announce(this.countMessage(n),"polite")},1e3)}connect(e){this.root=e,e.setAttribute(a,""),Object.defineProperty(e,b,{value:()=>this.validate(),configurable:!0,enumerable:!1,writable:!0}),Object.defineProperty(e,g,{value:()=>this.reset(),configurable:!0,enumerable:!1,writable:!0}),e.addEventListener("input",this.handleInput,!0),e.addEventListener("change",this.handleInput,!0),e.addEventListener("focusout",this.handleFocusOut,!0),this.form=e.closest("form"),this.form&&e.ownerDocument.addEventListener("submit",this.handleSubmit,!0),this.sync();let t=this.readCount();this.update({filled:d(this.resolveValue()),count:t,errors:this.composeErrors(t)})}disconnect(){clearTimeout(this.announceTimer),clearTimeout(this.validationTimer),this.validationTimer=void 0,this.awaitingSubmit=!1;let e=this.root;e&&(e.removeEventListener("input",this.handleInput,!0),e.removeEventListener("change",this.handleInput,!0),e.removeEventListener("focusout",this.handleFocusOut,!0),this.form&&e.ownerDocument.removeEventListener("submit",this.handleSubmit,!0),delete e[b],delete e[g],this.root=null,this.form=null,this.control=null)}sync(){let e=this.root;if(!e)return;let t=S(e);t!==this.control&&(this.control=t,this.baseDescribedBy=t?.getAttribute("aria-describedby")??"",this.baseLabelledBy=t?.getAttribute("aria-labelledby")??"",this.wroteLabelledBy=!1,this.wroteRequired=!1,this.wroteDisabled=!1,this.wroteGroupDisabled=!1);let{name:r}=this.props;r?e.setAttribute(u,r):e.removeAttribute(u);let n=this.snapshot.errors.join(" ");n?e.setAttribute(p,n):e.removeAttribute(p),this.applyStateAttributes(e),t&&(t.id||(t.id=this.options.controlId),t.id!==this.snapshot.controlId&&(this.snapshot={...this.snapshot,controlId:t.id,validity:this.readValidity()},this.options.onSnapshotChange(this.snapshot)),this.applyDescribedBy(e,t),this.snapshot.errors.length>0?t.setAttribute("aria-invalid","true"):t.removeAttribute("aria-invalid"),this.applyLabelledBy(e,t),this.applyConstraintState(t),this.applyStateAttributes(t))}applyDescribedBy(e,t){let r=m(e,`[${F}]`)!==null,n=m(e,`[${x}]`)!==null,s=y(this.baseDescribedBy,r?this.options.descriptionId:void 0,n?this.options.errorId:void 0);s?t.setAttribute("aria-describedby",s):t.removeAttribute("aria-describedby")}applyLabelledBy(e,t){let r=e.ownerDocument.getElementById(this.options.labelId)!==null;this.options.grouped&&r?(t.setAttribute("aria-labelledby",y(this.baseLabelledBy,this.options.labelId)),this.wroteLabelledBy=!0):this.wroteLabelledBy&&(this.baseLabelledBy?t.setAttribute("aria-labelledby",this.baseLabelledBy):t.removeAttribute("aria-labelledby"),this.wroteLabelledBy=!1)}applyConstraintState(e){let t=k.has(e.tagName),r=this.props.required===!0,n=this.props.disabled===!0;r?(t?e.setAttribute("required",""):e.setAttribute("aria-required","true"),this.wroteRequired=!0):this.wroteRequired&&(e.removeAttribute(t?"required":"aria-required"),this.wroteRequired=!1),n?(t?e.setAttribute("disabled",""):e.setAttribute("aria-disabled","true"),this.wroteDisabled=!0):this.wroteDisabled&&(e.removeAttribute(t?"disabled":"aria-disabled"),this.wroteDisabled=!1),t||this.applyGroupDisabled(e,n)}applyGroupDisabled(e,t){let r=e.getAttribute("role");if(!(!(e.tagName==="FIELDSET"||r!==null&&R.has(r))||!t&&!this.wroteGroupDisabled)){for(let s of e.querySelectorAll("input, select, textarea, button"))t?s.setAttribute("disabled",""):s.removeAttribute("disabled");this.wroteGroupDisabled=t}}validate(){return Promise.resolve(this.runValidation()).then(e=>e.length===0)}reset(){this.injected=[],this.custom=[],this.pending=!1,this.awaitingSubmit=!1,this.runToken++,clearTimeout(this.announceTimer),clearTimeout(this.validationTimer),this.validationTimer=void 0,this.markPending(!1);let e=this.readCount();this.update({touched:!1,dirty:!1,count:e,filled:d(this.resolveValue()),errors:this.composeErrors(e)}),this.sync()}markTouched(){this.snapshot.touched||this.update({touched:!0})}applyStateAttributes(e){let{errors:t,touched:r,dirty:n,filled:s,count:l}=this.snapshot;o(e,"data-invalid",t.length>0),o(e,"data-valid",t.length===0),o(e,"data-touched",r),o(e,"data-dirty",n),o(e,"data-filled",s),o(e,"data-over-limit",this.isOverLimit(l)),o(e,"data-disabled",this.props.disabled===!0)}resolveValue(){return this.props.value!==void 0?this.props.value:P(this.control)}readValidity(){return this.control?.validity??null}markPending(e){this.root&&o(this.root,E,e)}nativeMessage(){let e=this.control;return!e?.validity||e.validity.valid?null:e.validationMessage||this.props.invalidMessage||O}runValidation(e={}){let t=++this.runToken,r=this.props.validate?.(this.resolveValue());return L(r)?(this.pending=!0,this.markPending(!0),Promise.resolve(r).then(n=>t!==this.runToken?this.snapshot.errors:(this.pending=!1,this.markPending(!1),this.commit(n,e)))):this.commit(r,e)}commit(e,t){if(this.custom=T(e),this.custom.length===0){let h=this.nativeMessage();h&&!this.injected.includes(h)&&(this.custom=[h])}let r=this.readCount(),n=this.composeErrors(r),s=this.snapshot.errors.length===0;this.update({errors:n,count:r,filled:d(this.resolveValue())});let l=n[0];return l&&s&&!t.silent&&this.options.announce(l,"assertive"),n}update(e){let t={...this.snapshot,...e,valid:!0,validity:this.readValidity()};t.valid=t.errors.length===0,!U(this.snapshot,t)&&(this.snapshot=t,this.sync(),this.options.onSnapshotChange(t),this.root?.dispatchEvent(new CustomEvent(C,{bubbles:!0,composed:!0,detail:{valid:t.valid,errors:t.errors,touched:t.touched,dirty:t.dirty,filled:t.filled,count:t.count,validity:t.validity}})))}scheduleValidation(){clearTimeout(this.validationTimer),this.validationTimer=void 0;let e=this.props.mode==="change"?this.props.validationDebounceTime??0:0;if(e<=0){this.runValidation();return}this.validationTimer=setTimeout(()=>{this.validationTimer=void 0,this.runValidation()},e)}hasErrorSummary(){return this.form?.querySelector(`[${D}]`)!=null}isEngineResubmit(e){return this.form?.hasAttribute(c)?(this.snapshot.errors.length>0&&e.preventDefault(),!0):!1}resubmitIfSettled(){let e=this.form;if(!(!e||typeof e.requestSubmit!="function")&&!e.querySelector(`[${E}]`)&&!e.querySelector(`[${a}][data-invalid]`)){e.setAttribute(c,"");try{e.requestSubmit()}finally{e.removeAttribute(c)}}}};function L(i){return typeof i?.then=="function"}function q(i,e){return i.length===e.length&&i.every((t,r)=>t===e[r])}function U(i,e){return i.controlId===e.controlId&&i.valid===e.valid&&i.touched===e.touched&&i.dirty===e.dirty&&i.filled===e.filled&&i.count===e.count&&i.validity===e.validity&&i.errors.length===e.errors.length&&i.errors.every((t,r)=>t===e.errors[r])}export{j as CHARACTER_COUNT_ANNOUNCE_DELAY_MS,G as ERROR_SUMMARY_RESCAN_EVENTS,$ as FIELD_CHARACTER_COUNT_ATTRIBUTE,w as FIELD_CONTROL_ATTRIBUTE,I as FIELD_CONTROL_SELECTOR,F as FIELD_DESCRIPTION_ATTRIBUTE,x as FIELD_ERROR_ATTRIBUTE,D as FIELD_ERROR_SUMMARY_ATTRIBUTE,p as FIELD_MESSAGE_ATTRIBUTE,u as FIELD_NAME_ATTRIBUTE,E as FIELD_PENDING_ATTRIBUTE,z as FIELD_REQUIRED_INDICATOR_ATTRIBUTE,c as FIELD_RESUBMIT_ATTRIBUTE,a as FIELD_ROOT_ATTRIBUTE,C as FIELD_VALIDITY_CHANGE_EVENT,f as FORM_FIELD_ATTRIBUTE,_ as FORM_MESSAGE_ATTRIBUTE,A as FieldController,O as NATIVE_INVALID_FALLBACK_MESSAGE,M as characterCountMessage,V as characterCountVisible,Q as collectFieldErrors,K as errorSummaryScope,S as findFieldControl,W as focusFieldTarget,d as isFilled,Y as joinFieldMessages,T as normalizeMessages,P as readControlValue,J as resetFields,X as validateFields};

package/dist/internal/form-associated.cjs

@@ -1 +1 @@
-"use strict";var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var g=(s,t)=>{for(var i in t)n(s,i,{get:t[i],enumerable:!0})},p=(s,t,i,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of u(t))!c.call(s,e)&&e!==i&&n(s,e,{get:()=>t[e],enumerable:!(r=m(t,e))||r.enumerable});return s};var f=s=>p(n({},"__esModule",{value:!0}),s);var M={};g(M,{FormAssociated:()=>v});module.exports=f(M);var y=["badInput","customError","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valueMissing"];function h(s){let t={};for(let i of y)s[i]&&(t[i]=!0);return t}function V(s,t){let i=t;for(;i;){if(i===s)return!0;i=i instanceof ShadowRoot?i.host:i.parentNode}return!1}function v(s){class t extends s{constructor(...e){super(...e);this.intrinsicValidity={flags:{},message:""};this.customValidityMessage="";this.internals=this.attachInternals()}get form(){return this.internals.form??null}set form(e){e?.id?this.setAttribute("form",e.id):this.removeAttribute("form")}checkValidity(){return this.internals.checkValidity?.()??!0}reportValidity(){return this.internals.reportValidity?.()??!0}applyValidity(e,l,a){this.intrinsicValidity={flags:e,message:l,...a&&{anchor:a}},this.publishValidity()}publishValidity(){let{flags:e,message:l,anchor:a}=this.intrinsicValidity,o=this.customValidityMessage,d=a&&V(this,a)?a:void 0;this.internals.setValidity?.(o?{...e,customError:!0}:e,o||l,d)}setCustomValidity(e){this.customValidityMessage=e,this.publishValidity()}formResetCallback(){}formDisabledCallback(e){this.disabled=e}setFormValue(e){this.internals.setFormValue?.(e)}multiFormValue(e){let l=this.name;if(!l||e.length===0)return null;let a=new FormData;for(let o of e)a.append(l,o);return a}setValueMissing(e,l,a){this.applyValidity(e?{valueMissing:!0}:{},this.requiredMessage||l,a)}setRangeViolation(e,l,a){let o={};e==="underflow"?o={rangeUnderflow:!0}:e==="overflow"&&(o={rangeOverflow:!0}),this.applyValidity(o,l,a)}setStepMismatch(e,l,a){this.applyValidity(e?{stepMismatch:!0}:{},l,a)}mirrorValidity(e){this.applyValidity(h(e.validity),e.validationMessage,e)}}return t.formAssociated=!0,t}0&&(module.exports={FormAssociated});
+"use strict";var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var g=(s,t)=>{for(var i in t)n(s,i,{get:t[i],enumerable:!0})},p=(s,t,i,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of u(t))!c.call(s,e)&&e!==i&&n(s,e,{get:()=>t[e],enumerable:!(o=m(t,e))||o.enumerable});return s};var y=s=>p(n({},"__esModule",{value:!0}),s);var M={};g(M,{FormAssociated:()=>v});module.exports=y(M);var f=["badInput","customError","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valueMissing"];function h(s){let t={};for(let i of f)s[i]&&(t[i]=!0);return t}function V(s,t){let i=t;for(;i;){if(i===s)return!0;i=i instanceof ShadowRoot?i.host:i.parentNode}return!1}function v(s){class t extends s{constructor(...e){super(...e);this.intrinsicValidity={flags:{},message:""};this.customValidityMessage="";this.internals=this.attachInternals()}get form(){return this.internals.form??null}set form(e){e?.id?this.setAttribute("form",e.id):this.removeAttribute("form")}checkValidity(){return this.internals.checkValidity?.()??!0}reportValidity(){return this.internals.reportValidity?.()??!0}applyValidity(e,l,a){this.intrinsicValidity={flags:e,message:l,...a&&{anchor:a}},this.publishValidity()}publishValidity(){let{flags:e,message:l,anchor:a}=this.intrinsicValidity,r=this.customValidityMessage,d=a&&V(this,a)?a:void 0;this.internals.setValidity?.(r?{...e,customError:!0}:e,r||l,d)}setCustomValidity(e){this.customValidityMessage=e,this.publishValidity()}formResetCallback(){}formDisabledCallback(e){this.disabled=e}setFormValue(e){this.internals.setFormValue?.(e)}multiFormValue(e){let l=this.name;if(!l||e.length===0)return null;let a=new FormData;for(let r of e)a.append(l,r);return a}setValueMissing(e,l,a){this.applyValidity(e?{valueMissing:!0}:{},this.requiredMessage||l,a)}setRangeViolation(e,l,a){let r={};e==="underflow"?r={rangeUnderflow:!0}:e==="overflow"&&(r={rangeOverflow:!0}),this.applyValidity(r,l,a)}setStepMismatch(e,l,a){this.applyValidity(e?{stepMismatch:!0}:{},l,a)}mirrorValidity(e){if(!e.willValidate){this.applyValidity({},"",e);return}this.applyValidity(h(e.validity),e.validationMessage,e)}}return t.formAssociated=!0,t}0&&(module.exports={FormAssociated});

package/dist/internal/form-associated.js

@@ -1 +1 @@
-var n=["badInput","customError","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valueMissing"];function d(o){let l={};for(let a of n)o[a]&&(l[a]=!0);return l}function m(o,l){let a=l;for(;a;){if(a===o)return!0;a=a instanceof ShadowRoot?a.host:a.parentNode}return!1}function c(o){class l extends o{constructor(...e){super(...e);this.intrinsicValidity={flags:{},message:""};this.customValidityMessage="";this.internals=this.attachInternals()}get form(){return this.internals.form??null}set form(e){e?.id?this.setAttribute("form",e.id):this.removeAttribute("form")}checkValidity(){return this.internals.checkValidity?.()??!0}reportValidity(){return this.internals.reportValidity?.()??!0}applyValidity(e,i,t){this.intrinsicValidity={flags:e,message:i,...t&&{anchor:t}},this.publishValidity()}publishValidity(){let{flags:e,message:i,anchor:t}=this.intrinsicValidity,s=this.customValidityMessage,r=t&&m(this,t)?t:void 0;this.internals.setValidity?.(s?{...e,customError:!0}:e,s||i,r)}setCustomValidity(e){this.customValidityMessage=e,this.publishValidity()}formResetCallback(){}formDisabledCallback(e){this.disabled=e}setFormValue(e){this.internals.setFormValue?.(e)}multiFormValue(e){let i=this.name;if(!i||e.length===0)return null;let t=new FormData;for(let s of e)t.append(i,s);return t}setValueMissing(e,i,t){this.applyValidity(e?{valueMissing:!0}:{},this.requiredMessage||i,t)}setRangeViolation(e,i,t){let s={};e==="underflow"?s={rangeUnderflow:!0}:e==="overflow"&&(s={rangeOverflow:!0}),this.applyValidity(s,i,t)}setStepMismatch(e,i,t){this.applyValidity(e?{stepMismatch:!0}:{},i,t)}mirrorValidity(e){this.applyValidity(d(e.validity),e.validationMessage,e)}}return l.formAssociated=!0,l}export{c as FormAssociated};
+var n=["badInput","customError","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valueMissing"];function d(r){let l={};for(let a of n)r[a]&&(l[a]=!0);return l}function m(r,l){let a=l;for(;a;){if(a===r)return!0;a=a instanceof ShadowRoot?a.host:a.parentNode}return!1}function c(r){class l extends r{constructor(...e){super(...e);this.intrinsicValidity={flags:{},message:""};this.customValidityMessage="";this.internals=this.attachInternals()}get form(){return this.internals.form??null}set form(e){e?.id?this.setAttribute("form",e.id):this.removeAttribute("form")}checkValidity(){return this.internals.checkValidity?.()??!0}reportValidity(){return this.internals.reportValidity?.()??!0}applyValidity(e,i,t){this.intrinsicValidity={flags:e,message:i,...t&&{anchor:t}},this.publishValidity()}publishValidity(){let{flags:e,message:i,anchor:t}=this.intrinsicValidity,s=this.customValidityMessage,o=t&&m(this,t)?t:void 0;this.internals.setValidity?.(s?{...e,customError:!0}:e,s||i,o)}setCustomValidity(e){this.customValidityMessage=e,this.publishValidity()}formResetCallback(){}formDisabledCallback(e){this.disabled=e}setFormValue(e){this.internals.setFormValue?.(e)}multiFormValue(e){let i=this.name;if(!i||e.length===0)return null;let t=new FormData;for(let s of e)t.append(i,s);return t}setValueMissing(e,i,t){this.applyValidity(e?{valueMissing:!0}:{},this.requiredMessage||i,t)}setRangeViolation(e,i,t){let s={};e==="underflow"?s={rangeUnderflow:!0}:e==="overflow"&&(s={rangeOverflow:!0}),this.applyValidity(s,i,t)}setStepMismatch(e,i,t){this.applyValidity(e?{stepMismatch:!0}:{},i,t)}mirrorValidity(e){if(!e.willValidate){this.applyValidity({},"",e);return}this.applyValidity(d(e.validity),e.validationMessage,e)}}return l.formAssociated=!0,l}export{c as FormAssociated};

package/dist/internal/light-dom-styles.cjs

@@ -1,4 +1,4 @@
-"use strict";var n=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var x=(t,e)=>{for(var s in e)n(t,s,{get:e[s],enumerable:!0})},u=(t,e,s,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of p(e))!a.call(t,i)&&i!==s&&n(t,i,{get:()=>e[i],enumerable:!(o=l(e,i))||o.enumerable});return t};var k=t=>u(n({},"__esModule",{value:!0}),t);var g={};x(g,{installLightDomStyles:()=>h});module.exports=k(g);var d=require("./styles.cjs"),c=`@layer skdx-light-dom {
+"use strict";var n=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var x=(t,e)=>{for(var s in e)n(t,s,{get:e[s],enumerable:!0})},u=(t,e,s,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of a(e))!p.call(t,i)&&i!==s&&n(t,i,{get:()=>e[i],enumerable:!(o=l(e,i))||o.enumerable});return t};var k=t=>u(n({},"__esModule",{value:!0}),t);var g={};x(g,{installLightDomStyles:()=>h});module.exports=k(g);var d=require("./styles.cjs"),c=`@layer skdx-light-dom {
   skdx-autocomplete-input,
   skdx-combobox-input,
   skdx-mentions-input,
@@ -158,6 +158,8 @@
     display: block;
     position: fixed;
     inset: 0;
+    /* Fixed hosts form a stacking context; without this a non-modal dialog paints under the overlay scrim. */
+    z-index: var(--skdx-z-index-modal);
     pointer-events: none;
   }
 

package/dist/internal/light-dom-styles.js

@@ -158,6 +158,8 @@ import{NATIVE_CONTROL_RESET as e}from"./styles.js";var s=`@layer skdx-light-dom
     display: block;
     position: fixed;
     inset: 0;
+    /* Fixed hosts form a stacking context; without this a non-modal dialog paints under the overlay scrim. */
+    z-index: var(--skdx-z-index-modal);
     pointer-events: none;
   }
 

package/dist/internal/media-query.cjs

@@ -0,0 +1 @@
+"use strict";var a=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var r=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var s=(e,n)=>{for(var t in n)a(e,t,{get:n[t],enumerable:!0})},u=(e,n,t,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of r(n))!c.call(e,i)&&i!==t&&a(e,i,{get:()=>n[i],enumerable:!(o=d(n,i))||o.enumerable});return e};var f=e=>u(a({},"__esModule",{value:!0}),e);var m={};s(m,{matchesMediaQuery:()=>w,subscribeMediaQuery:()=>h});module.exports=f(m);function w(e){return typeof window>"u"||typeof window.matchMedia!="function"?!1:window.matchMedia(e).matches}function h(e,n){if(typeof window>"u"||typeof window.matchMedia!="function")return()=>{};let t=window.matchMedia(e),o=i=>n(i.matches);return t.addEventListener("change",o),()=>t.removeEventListener("change",o)}0&&(module.exports={matchesMediaQuery,subscribeMediaQuery});

package/dist/internal/media-query.d.cts

@@ -0,0 +1,7 @@
+/** Whether `query` currently matches; `false` wherever `matchMedia` is missing (SSR, some test runners). */
+export declare function matchesMediaQuery(query: string): boolean;
+/**
+ * Calls `onChange` with the new match state whenever `query` flips, and returns the unsubscribe.
+ * A no-op returning a no-op wherever `matchMedia` is missing.
+ */
+export declare function subscribeMediaQuery(query: string, onChange: (matches: boolean) => void): () => void;

package/dist/internal/media-query.d.ts

@@ -0,0 +1,7 @@
+/** Whether `query` currently matches; `false` wherever `matchMedia` is missing (SSR, some test runners). */
+export declare function matchesMediaQuery(query: string): boolean;
+/**
+ * Calls `onChange` with the new match state whenever `query` flips, and returns the unsubscribe.
+ * A no-op returning a no-op wherever `matchMedia` is missing.
+ */
+export declare function subscribeMediaQuery(query: string, onChange: (matches: boolean) => void): () => void;

package/dist/internal/media-query.js

@@ -0,0 +1 @@
+function a(e){return typeof window>"u"||typeof window.matchMedia!="function"?!1:window.matchMedia(e).matches}function d(e,i){if(typeof window>"u"||typeof window.matchMedia!="function")return()=>{};let n=window.matchMedia(e),t=o=>i(o.matches);return n.addEventListener("change",t),()=>n.removeEventListener("change",t)}export{a as matchesMediaQuery,d as subscribeMediaQuery};

package/dist/internal/menu-panel.cjs

@@ -1,4 +1,4 @@
-"use strict";var f=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var L=(s,o)=>{for(var e in o)f(s,e,{get:o[e],enumerable:!0})},K=(s,o,e,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of O(o))!b.call(s,i)&&i!==e&&f(s,i,{get:()=>o[i],enumerable:!(t=w(o,i))||t.enumerable});return s};var D=s=>K(f({},"__esModule",{value:!0}),s),d=(s,o,e,t)=>{for(var i=t>1?void 0:t?w(o,e):o,a=s.length-1,l;a>=0;a--)(l=s[a])&&(i=(t?l(o,e,i):l(i))||i);return t&&i&&f(o,e,i),i};var k={};L(k,{SkdxMenuPanelBase:()=>r});module.exports=D(k);var p=require("lit"),c=require("lit/decorators.js"),y=require("./body-scroll-lock.cjs"),g=require("./direction.cjs"),n=require("./dismiss.cjs"),m=require("./menu-sub.cjs"),v=require("./outsideInert.cjs"),h=require("./positioning.cjs"),E=require("./styles.cjs"),u=require("./typeahead.cjs");var r=class extends p.LitElement{constructor(){super(...arguments);this.side="bottom";this.align="start";this.sideOffset=4;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.loop=!0;this.owner=null;this.ownerEvent="";this.panelComponent="menu";this.arrowSelector="skdx-menu-arrow";this.triggerSelector="skdx-menu-trigger";this.keepFocusInPanel=!1;this.ownsNavigationKeys=!1;this.onOwnerUpdate=()=>{this.syncHostState(),this.afterOwnerUpdate()};this.typeahead=new u.Typeahead;this.layer={insideElements:()=>this.layerInsideElements()};this.scrollLocked=!1;this.handleOutsidePointerDown=e=>{if(!this.owner?.open)return;let t=e.target;this.contains(t)||this.pointerExempt(t)||(0,n.dispatchOutside)(this,"pointer-down-outside",e)&&this.closeOwner()};this.handleOutsideFocus=e=>{if(!this.owner?.open)return;let t=(0,n.focusOutsideTarget)(e);!t||this.contains(t)||this.focusExempt(t)||(0,n.dispatchOutside)(this,"focus-outside",e)&&this.closeOwner()};this.handleEscape=e=>{(0,n.dispatchEscapeKeyDown)(this,e)&&this.closeAndRefocus()};this.handleDocumentKeyDown=e=>{this.owner?.open&&(0,n.handleEscapeKeyDown)(e,this.layer,this.handleEscape)};this.handleKeyDown=e=>{let t=(0,m.menuItems)(this).filter(a=>a.closest('[role="menu"]')===this),i=t.indexOf(document.activeElement);if(e.key==="Tab"){this.closeAndRefocus();return}if(e.altKey&&e.key==="ArrowUp"){this.closeAndRefocus();return}if(!this.extraKeyDown(e)){if(e.key==="ArrowDown"||e.key==="ArrowUp"){this.onArrowKey(e,t,i);return}if(e.key==="Home"||e.key==="End"){e.preventDefault(),this.claimKey(e),(e.key==="Home"?t[0]:t[t.length-1])?.focus();return}if((0,u.isTypeaheadKey)(e)){this.claimKey(e);let a=this.typeahead.match(e.key,t.map(u.itemText),i);a!==-1&&(e.preventDefault(),t[a]?.focus())}}}}resolveOwner(){return null}closeOwner(){}afterOwnerUpdate(){}layerInsideElements(){return[this,this.owner?.querySelector(this.triggerSelector)]}connectedCallback(){if(super.connectedCallback(),this.setAttribute("role","menu"),this.setAttribute("aria-orientation","vertical"),this.tabIndex=-1,this.owner=this.resolveOwner(),this.owner?.addEventListener(this.ownerEvent,this.onOwnerUpdate),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.owner){this.owner.contentEl=this,this.id?(this.owner.contentId=this.id,this.claimedAuthoredId(this.id)):this.id=this.owner.contentId,this.hasAttribute("aria-label")||this.setAttribute("aria-labelledby",this.owner.triggerId);let e=this.owner.querySelector(this.triggerSelector);if(e){let t=(0,g.resolveDirection)(e);t&&this.setAttribute("dir",t)}}this.syncHostState()}claimedAuthoredId(e){}disconnectedCallback(){this.owner?.contentEl===this&&(this.owner.contentEl=null),this.owner?.removeEventListener(this.ownerEvent,this.onOwnerUpdate),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.releaseLayer?.(),this.releaseLayer=void 0,this.cleanupPosition?.(),this.typeahead.clear(),(0,v.setOutsideInert)(this,!1),this.setBodyScrollLock(!1),super.disconnectedCallback()}firstUpdated(){this.owner?.open&&this.activate()}writePlacementState(){this.setAttribute("data-side",this.side??"bottom"),this.setAttribute("data-align",this.align??"start")}syncHostState(){let e=this.owner?.open??!1;this.setAttribute("data-state",e?"open":"closed"),this.writePlacementState(),this.hidden=!e,this.applyOpenState(e)}applyOpenState(e){e&&!this.releaseLayer?this.releaseLayer=(0,n.pushDismissLayer)(this.layer):!e&&this.releaseLayer&&(this.releaseLayer(),this.releaseLayer=void 0);let t=e&&(this.owner?.modal??!1);(0,v.setOutsideInert)(this,t),this.setBodyScrollLock(t),e?this.activate():this.deactivate()}setBodyScrollLock(e){e!==this.scrollLocked&&(this.scrollLocked=e,e?(0,y.lockBodyScroll)():(0,y.unlockBodyScroll)())}updated(e){!this.cleanupPosition||!(0,h.placementChanged)(e)||(this.deactivate(),this.position())}focusPreventsScroll(){return!1}activate(){this.position(),requestAnimationFrame(()=>(0,n.focusOnOpen)(()=>{if(this.keepFocusInPanel&&this.contains(document.activeElement))return;let e=(0,m.menuItems)(this);((this.owner?.openIntent==="last"?e[e.length-1]:e[0])??this).focus({preventScroll:this.focusPreventsScroll()})}))}anchor(){return this.owner?.triggerEl??null}positionOptions(){return{side:this.side,align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding,collisionBoundary:this.collisionBoundary,component:this.panelComponent,arrow:()=>this.querySelector(this.arrowSelector)}}position(){if(this.cleanupPosition)return;let e=this.anchor();e&&(this.cleanupPosition=(0,h.positionFloating)(e,this,this.positionOptions()))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0}pointerExempt(e){return(0,n.triggerContains)(this.owner?.triggerEl??null,e)}focusExempt(e){return this.pointerExempt(e)}extraKeyDown(e){return!1}claimKey(e){this.ownsNavigationKeys&&e.stopPropagation()}closeAndRefocus(){this.closeOwner(),this.owner?.focusTrigger()}onArrowKey(e,t,i){if(t.length===0&&!this.ownsNavigationKeys||(e.preventDefault(),this.claimKey(e),t.length===0))return;let a=e.key==="ArrowDown"?1:-1,l=i+a;l>=t.length?l=this.loop?0:t.length-1:l<0&&(l=this.loop?t.length-1:0),t[l]?.focus()}render(){return p.html`<slot></slot>`}};r.styles=[E.hiddenHostStyles,p.css`
+"use strict";var f=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var L=(s,n)=>{for(var e in n)f(s,e,{get:n[e],enumerable:!0})},K=(s,n,e,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of O(n))!b.call(s,i)&&i!==e&&f(s,i,{get:()=>n[i],enumerable:!(t=w(n,i))||t.enumerable});return s};var D=s=>K(f({},"__esModule",{value:!0}),s),d=(s,n,e,t)=>{for(var i=t>1?void 0:t?w(n,e):n,a=s.length-1,l;a>=0;a--)(l=s[a])&&(i=(t?l(n,e,i):l(i))||i);return t&&i&&f(n,e,i),i};var k={};L(k,{SkdxMenuPanelBase:()=>r});module.exports=D(k);var p=require("lit"),c=require("lit/decorators.js"),y=require("./body-scroll-lock.cjs"),g=require("./direction.cjs"),o=require("./dismiss.cjs"),m=require("./menu-sub.cjs"),v=require("./outsideInert.cjs"),h=require("./positioning.cjs"),E=require("./styles.cjs"),u=require("./typeahead.cjs");var r=class extends p.LitElement{constructor(){super(...arguments);this.side="bottom";this.align="start";this.sideOffset=4;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.loop=!0;this.owner=null;this.ownerEvent="";this.panelComponent="menu";this.arrowSelector="skdx-menu-arrow";this.triggerSelector="skdx-menu-trigger";this.keepFocusInPanel=!1;this.ownsNavigationKeys=!1;this.onOwnerUpdate=()=>{this.syncHostState(),this.afterOwnerUpdate()};this.typeahead=new u.Typeahead;this.layer={insideElements:()=>this.layerInsideElements()};this.scrollLocked=!1;this.handleOutsidePointerDown=e=>{if(!this.owner?.open)return;let t=e.target;this.contains(t)||this.pointerExempt(t)||(0,o.nestedLayerContains)(this.layer,t)||(0,o.dispatchOutside)(this,"pointer-down-outside",e)&&this.closeOwner()};this.handleOutsideFocus=e=>{if(!this.owner?.open)return;let t=(0,o.focusOutsideTarget)(e);!t||this.contains(t)||this.focusExempt(t)||(0,o.nestedLayerContains)(this.layer,t)||(0,o.dispatchOutside)(this,"focus-outside",e)&&this.closeOwner()};this.handleEscape=e=>{(0,o.dispatchEscapeKeyDown)(this,e)&&this.closeAndRefocus()};this.handleDocumentKeyDown=e=>{this.owner?.open&&(0,o.handleEscapeKeyDown)(e,this.layer,this.handleEscape)};this.handleKeyDown=e=>{let t=(0,m.menuItems)(this).filter(a=>a.closest('[role="menu"]')===this),i=t.indexOf(document.activeElement);if(e.key==="Tab"){this.closeAndRefocus();return}if(e.altKey&&e.key==="ArrowUp"){this.closeAndRefocus();return}if(!this.extraKeyDown(e)){if(e.key==="ArrowDown"||e.key==="ArrowUp"){this.onArrowKey(e,t,i);return}if(e.key==="Home"||e.key==="End"){e.preventDefault(),this.claimKey(e),(e.key==="Home"?t[0]:t[t.length-1])?.focus();return}if((0,u.isTypeaheadKey)(e)){this.claimKey(e);let a=this.typeahead.match(e.key,t.map(u.itemText),i);a!==-1&&(e.preventDefault(),t[a]?.focus())}}}}resolveOwner(){return null}closeOwner(){}afterOwnerUpdate(){}layerInsideElements(){return[this,this.owner?.querySelector(this.triggerSelector)]}connectedCallback(){if(super.connectedCallback(),this.setAttribute("role","menu"),this.setAttribute("aria-orientation","vertical"),this.tabIndex=-1,this.owner=this.resolveOwner(),this.owner?.addEventListener(this.ownerEvent,this.onOwnerUpdate),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.owner){this.owner.contentEl=this,this.id?(this.owner.contentId=this.id,this.claimedAuthoredId(this.id)):this.id=this.owner.contentId,this.hasAttribute("aria-label")||this.setAttribute("aria-labelledby",this.owner.triggerId);let e=this.owner.querySelector(this.triggerSelector);if(e){let t=(0,g.resolveDirection)(e);t&&this.setAttribute("dir",t)}}this.syncHostState()}claimedAuthoredId(e){}disconnectedCallback(){this.owner?.contentEl===this&&(this.owner.contentEl=null),this.owner?.removeEventListener(this.ownerEvent,this.onOwnerUpdate),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.releaseLayer?.(),this.releaseLayer=void 0,this.cleanupPosition?.(),this.typeahead.clear(),(0,v.setOutsideInert)(this,!1),this.setBodyScrollLock(!1),super.disconnectedCallback()}firstUpdated(){this.owner?.open&&this.activate()}writePlacementState(){this.setAttribute("data-side",this.side??"bottom"),this.setAttribute("data-align",this.align??"start")}syncHostState(){let e=this.owner?.open??!1;this.setAttribute("data-state",e?"open":"closed"),this.writePlacementState(),this.hidden=!e,this.applyOpenState(e)}applyOpenState(e){e&&!this.releaseLayer?this.releaseLayer=(0,o.pushDismissLayer)(this.layer):!e&&this.releaseLayer&&(this.releaseLayer(),this.releaseLayer=void 0);let t=e&&(this.owner?.modal??!1);(0,v.setOutsideInert)(this,t),this.setBodyScrollLock(t),e?this.activate():this.deactivate()}setBodyScrollLock(e){e!==this.scrollLocked&&(this.scrollLocked=e,e?(0,y.lockBodyScroll)():(0,y.unlockBodyScroll)())}updated(e){!this.cleanupPosition||!(0,h.placementChanged)(e)||(this.deactivate(),this.position())}focusPreventsScroll(){return!1}activate(){this.position(),requestAnimationFrame(()=>(0,o.focusOnOpen)(()=>{if(this.keepFocusInPanel&&this.contains(document.activeElement))return;let e=(0,m.menuItems)(this);((this.owner?.openIntent==="last"?e[e.length-1]:e[0])??this).focus({preventScroll:this.focusPreventsScroll()})}))}anchor(){return this.owner?.triggerEl??null}positionOptions(){return{side:this.side,align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding,collisionBoundary:this.collisionBoundary,component:this.panelComponent,arrow:()=>this.querySelector(this.arrowSelector)}}position(){if(this.cleanupPosition)return;let e=this.anchor();e&&(this.cleanupPosition=(0,h.positionFloating)(e,this,this.positionOptions()))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0}pointerExempt(e){return(0,o.triggerContains)(this.owner?.triggerEl??null,e)}focusExempt(e){return this.pointerExempt(e)}extraKeyDown(e){return!1}claimKey(e){this.ownsNavigationKeys&&e.stopPropagation()}closeAndRefocus(){this.closeOwner(),this.owner?.focusTrigger()}onArrowKey(e,t,i){if(t.length===0&&!this.ownsNavigationKeys||(e.preventDefault(),this.claimKey(e),t.length===0))return;let a=e.key==="ArrowDown"?1:-1,l=i+a;l>=t.length?l=this.loop?0:t.length-1:l<0&&(l=this.loop?t.length-1:0),t[l]?.focus()}render(){return p.html`<slot></slot>`}};r.styles=[E.hiddenHostStyles,p.css`
       :host {
         display: block;
       }

package/dist/internal/menu-panel.js

@@ -1,5 +1,5 @@
-var f=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var s=(d,l,e,t)=>{for(var i=t>1?void 0:t?y(l,e):l,n=d.length-1,r;n>=0;n--)(r=d[n])&&(i=(t?r(l,e,i):r(i))||i);return t&&i&&f(l,e,i),i};import{css as m,html as v,LitElement as w}from"lit";import{property as a}from"lit/decorators.js";import{lockBodyScroll as g,unlockBodyScroll as E}from"./body-scroll-lock.js";import{resolveDirection as O}from"./direction.js";import{dispatchEscapeKeyDown as b,dispatchOutside as c,focusOnOpen as L,focusOutsideTarget as K,handleEscapeKeyDown as D,pushDismissLayer as k,triggerContains as P}from"./dismiss.js";import{menuItems as h}from"./menu-sub.js";import{setOutsideInert as p}from"./outsideInert.js";import{optOutBoolean as u,placementChanged as A,positionFloating as S}from"./positioning.js";import{hiddenHostStyles as I}from"./styles.js";import{isTypeaheadKey as T,itemText as H,Typeahead as x}from"./typeahead.js";var o=class extends w{constructor(){super(...arguments);this.side="bottom";this.align="start";this.sideOffset=4;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.loop=!0;this.owner=null;this.ownerEvent="";this.panelComponent="menu";this.arrowSelector="skdx-menu-arrow";this.triggerSelector="skdx-menu-trigger";this.keepFocusInPanel=!1;this.ownsNavigationKeys=!1;this.onOwnerUpdate=()=>{this.syncHostState(),this.afterOwnerUpdate()};this.typeahead=new x;this.layer={insideElements:()=>this.layerInsideElements()};this.scrollLocked=!1;this.handleOutsidePointerDown=e=>{if(!this.owner?.open)return;let t=e.target;this.contains(t)||this.pointerExempt(t)||c(this,"pointer-down-outside",e)&&this.closeOwner()};this.handleOutsideFocus=e=>{if(!this.owner?.open)return;let t=K(e);!t||this.contains(t)||this.focusExempt(t)||c(this,"focus-outside",e)&&this.closeOwner()};this.handleEscape=e=>{b(this,e)&&this.closeAndRefocus()};this.handleDocumentKeyDown=e=>{this.owner?.open&&D(e,this.layer,this.handleEscape)};this.handleKeyDown=e=>{let t=h(this).filter(n=>n.closest('[role="menu"]')===this),i=t.indexOf(document.activeElement);if(e.key==="Tab"){this.closeAndRefocus();return}if(e.altKey&&e.key==="ArrowUp"){this.closeAndRefocus();return}if(!this.extraKeyDown(e)){if(e.key==="ArrowDown"||e.key==="ArrowUp"){this.onArrowKey(e,t,i);return}if(e.key==="Home"||e.key==="End"){e.preventDefault(),this.claimKey(e),(e.key==="Home"?t[0]:t[t.length-1])?.focus();return}if(T(e)){this.claimKey(e);let n=this.typeahead.match(e.key,t.map(H),i);n!==-1&&(e.preventDefault(),t[n]?.focus())}}}}resolveOwner(){return null}closeOwner(){}afterOwnerUpdate(){}layerInsideElements(){return[this,this.owner?.querySelector(this.triggerSelector)]}connectedCallback(){if(super.connectedCallback(),this.setAttribute("role","menu"),this.setAttribute("aria-orientation","vertical"),this.tabIndex=-1,this.owner=this.resolveOwner(),this.owner?.addEventListener(this.ownerEvent,this.onOwnerUpdate),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.owner){this.owner.contentEl=this,this.id?(this.owner.contentId=this.id,this.claimedAuthoredId(this.id)):this.id=this.owner.contentId,this.hasAttribute("aria-label")||this.setAttribute("aria-labelledby",this.owner.triggerId);let e=this.owner.querySelector(this.triggerSelector);if(e){let t=O(e);t&&this.setAttribute("dir",t)}}this.syncHostState()}claimedAuthoredId(e){}disconnectedCallback(){this.owner?.contentEl===this&&(this.owner.contentEl=null),this.owner?.removeEventListener(this.ownerEvent,this.onOwnerUpdate),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.releaseLayer?.(),this.releaseLayer=void 0,this.cleanupPosition?.(),this.typeahead.clear(),p(this,!1),this.setBodyScrollLock(!1),super.disconnectedCallback()}firstUpdated(){this.owner?.open&&this.activate()}writePlacementState(){this.setAttribute("data-side",this.side??"bottom"),this.setAttribute("data-align",this.align??"start")}syncHostState(){let e=this.owner?.open??!1;this.setAttribute("data-state",e?"open":"closed"),this.writePlacementState(),this.hidden=!e,this.applyOpenState(e)}applyOpenState(e){e&&!this.releaseLayer?this.releaseLayer=k(this.layer):!e&&this.releaseLayer&&(this.releaseLayer(),this.releaseLayer=void 0);let t=e&&(this.owner?.modal??!1);p(this,t),this.setBodyScrollLock(t),e?this.activate():this.deactivate()}setBodyScrollLock(e){e!==this.scrollLocked&&(this.scrollLocked=e,e?g():E())}updated(e){!this.cleanupPosition||!A(e)||(this.deactivate(),this.position())}focusPreventsScroll(){return!1}activate(){this.position(),requestAnimationFrame(()=>L(()=>{if(this.keepFocusInPanel&&this.contains(document.activeElement))return;let e=h(this);((this.owner?.openIntent==="last"?e[e.length-1]:e[0])??this).focus({preventScroll:this.focusPreventsScroll()})}))}anchor(){return this.owner?.triggerEl??null}positionOptions(){return{side:this.side,align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding,collisionBoundary:this.collisionBoundary,component:this.panelComponent,arrow:()=>this.querySelector(this.arrowSelector)}}position(){if(this.cleanupPosition)return;let e=this.anchor();e&&(this.cleanupPosition=S(e,this,this.positionOptions()))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0}pointerExempt(e){return P(this.owner?.triggerEl??null,e)}focusExempt(e){return this.pointerExempt(e)}extraKeyDown(e){return!1}claimKey(e){this.ownsNavigationKeys&&e.stopPropagation()}closeAndRefocus(){this.closeOwner(),this.owner?.focusTrigger()}onArrowKey(e,t,i){if(t.length===0&&!this.ownsNavigationKeys||(e.preventDefault(),this.claimKey(e),t.length===0))return;let n=e.key==="ArrowDown"?1:-1,r=i+n;r>=t.length?r=this.loop?0:t.length-1:r<0&&(r=this.loop?t.length-1:0),t[r]?.focus()}render(){return v`<slot></slot>`}};o.styles=[I,m`
+var y=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var s=(d,l,e,t)=>{for(var i=t>1?void 0:t?m(l,e):l,n=d.length-1,r;n>=0;n--)(r=d[n])&&(i=(t?r(l,e,i):r(i))||i);return t&&i&&y(l,e,i),i};import{css as v,html as w,LitElement as g}from"lit";import{property as a}from"lit/decorators.js";import{lockBodyScroll as E,unlockBodyScroll as O}from"./body-scroll-lock.js";import{resolveDirection as b}from"./direction.js";import{dispatchEscapeKeyDown as L,dispatchOutside as c,focusOnOpen as K,focusOutsideTarget as D,handleEscapeKeyDown as k,nestedLayerContains as h,pushDismissLayer as P,triggerContains as A}from"./dismiss.js";import{menuItems as p}from"./menu-sub.js";import{setOutsideInert as u}from"./outsideInert.js";import{optOutBoolean as f,placementChanged as S,positionFloating as I}from"./positioning.js";import{hiddenHostStyles as T}from"./styles.js";import{isTypeaheadKey as H,itemText as x,Typeahead as C}from"./typeahead.js";var o=class extends g{constructor(){super(...arguments);this.side="bottom";this.align="start";this.sideOffset=4;this.alignOffset=0;this.avoidCollisions=!0;this.collisionPadding=8;this.loop=!0;this.owner=null;this.ownerEvent="";this.panelComponent="menu";this.arrowSelector="skdx-menu-arrow";this.triggerSelector="skdx-menu-trigger";this.keepFocusInPanel=!1;this.ownsNavigationKeys=!1;this.onOwnerUpdate=()=>{this.syncHostState(),this.afterOwnerUpdate()};this.typeahead=new C;this.layer={insideElements:()=>this.layerInsideElements()};this.scrollLocked=!1;this.handleOutsidePointerDown=e=>{if(!this.owner?.open)return;let t=e.target;this.contains(t)||this.pointerExempt(t)||h(this.layer,t)||c(this,"pointer-down-outside",e)&&this.closeOwner()};this.handleOutsideFocus=e=>{if(!this.owner?.open)return;let t=D(e);!t||this.contains(t)||this.focusExempt(t)||h(this.layer,t)||c(this,"focus-outside",e)&&this.closeOwner()};this.handleEscape=e=>{L(this,e)&&this.closeAndRefocus()};this.handleDocumentKeyDown=e=>{this.owner?.open&&k(e,this.layer,this.handleEscape)};this.handleKeyDown=e=>{let t=p(this).filter(n=>n.closest('[role="menu"]')===this),i=t.indexOf(document.activeElement);if(e.key==="Tab"){this.closeAndRefocus();return}if(e.altKey&&e.key==="ArrowUp"){this.closeAndRefocus();return}if(!this.extraKeyDown(e)){if(e.key==="ArrowDown"||e.key==="ArrowUp"){this.onArrowKey(e,t,i);return}if(e.key==="Home"||e.key==="End"){e.preventDefault(),this.claimKey(e),(e.key==="Home"?t[0]:t[t.length-1])?.focus();return}if(H(e)){this.claimKey(e);let n=this.typeahead.match(e.key,t.map(x),i);n!==-1&&(e.preventDefault(),t[n]?.focus())}}}}resolveOwner(){return null}closeOwner(){}afterOwnerUpdate(){}layerInsideElements(){return[this,this.owner?.querySelector(this.triggerSelector)]}connectedCallback(){if(super.connectedCallback(),this.setAttribute("role","menu"),this.setAttribute("aria-orientation","vertical"),this.tabIndex=-1,this.owner=this.resolveOwner(),this.owner?.addEventListener(this.ownerEvent,this.onOwnerUpdate),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("pointerdown",this.handleOutsidePointerDown),document.addEventListener("focusin",this.handleOutsideFocus),this.owner){this.owner.contentEl=this,this.id?(this.owner.contentId=this.id,this.claimedAuthoredId(this.id)):this.id=this.owner.contentId,this.hasAttribute("aria-label")||this.setAttribute("aria-labelledby",this.owner.triggerId);let e=this.owner.querySelector(this.triggerSelector);if(e){let t=b(e);t&&this.setAttribute("dir",t)}}this.syncHostState()}claimedAuthoredId(e){}disconnectedCallback(){this.owner?.contentEl===this&&(this.owner.contentEl=null),this.owner?.removeEventListener(this.ownerEvent,this.onOwnerUpdate),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("pointerdown",this.handleOutsidePointerDown),document.removeEventListener("focusin",this.handleOutsideFocus),this.releaseLayer?.(),this.releaseLayer=void 0,this.cleanupPosition?.(),this.typeahead.clear(),u(this,!1),this.setBodyScrollLock(!1),super.disconnectedCallback()}firstUpdated(){this.owner?.open&&this.activate()}writePlacementState(){this.setAttribute("data-side",this.side??"bottom"),this.setAttribute("data-align",this.align??"start")}syncHostState(){let e=this.owner?.open??!1;this.setAttribute("data-state",e?"open":"closed"),this.writePlacementState(),this.hidden=!e,this.applyOpenState(e)}applyOpenState(e){e&&!this.releaseLayer?this.releaseLayer=P(this.layer):!e&&this.releaseLayer&&(this.releaseLayer(),this.releaseLayer=void 0);let t=e&&(this.owner?.modal??!1);u(this,t),this.setBodyScrollLock(t),e?this.activate():this.deactivate()}setBodyScrollLock(e){e!==this.scrollLocked&&(this.scrollLocked=e,e?E():O())}updated(e){!this.cleanupPosition||!S(e)||(this.deactivate(),this.position())}focusPreventsScroll(){return!1}activate(){this.position(),requestAnimationFrame(()=>K(()=>{if(this.keepFocusInPanel&&this.contains(document.activeElement))return;let e=p(this);((this.owner?.openIntent==="last"?e[e.length-1]:e[0])??this).focus({preventScroll:this.focusPreventsScroll()})}))}anchor(){return this.owner?.triggerEl??null}positionOptions(){return{side:this.side,align:this.align,sideOffset:this.sideOffset,alignOffset:this.alignOffset,avoidCollisions:this.avoidCollisions,collisionPadding:this.collisionPadding,collisionBoundary:this.collisionBoundary,component:this.panelComponent,arrow:()=>this.querySelector(this.arrowSelector)}}position(){if(this.cleanupPosition)return;let e=this.anchor();e&&(this.cleanupPosition=I(e,this,this.positionOptions()))}deactivate(){this.cleanupPosition?.(),this.cleanupPosition=void 0}pointerExempt(e){return A(this.owner?.triggerEl??null,e)}focusExempt(e){return this.pointerExempt(e)}extraKeyDown(e){return!1}claimKey(e){this.ownsNavigationKeys&&e.stopPropagation()}closeAndRefocus(){this.closeOwner(),this.owner?.focusTrigger()}onArrowKey(e,t,i){if(t.length===0&&!this.ownsNavigationKeys||(e.preventDefault(),this.claimKey(e),t.length===0))return;let n=e.key==="ArrowDown"?1:-1,r=i+n;r>=t.length?r=this.loop?0:t.length-1:r<0&&(r=this.loop?t.length-1:0),t[r]?.focus()}render(){return w`<slot></slot>`}};o.styles=[T,v`
       :host {
         display: block;
       }
-    `],s([a({type:String,reflect:!0})],o.prototype,"side",2),s([a({type:String,reflect:!0})],o.prototype,"align",2),s([a({type:Number,reflect:!0,attribute:"side-offset"})],o.prototype,"sideOffset",2),s([a({type:Number,reflect:!0,attribute:"align-offset"})],o.prototype,"alignOffset",2),s([a({converter:u,attribute:"avoid-collisions"})],o.prototype,"avoidCollisions",2),s([a({type:Number,attribute:"collision-padding"})],o.prototype,"collisionPadding",2),s([a({attribute:!1})],o.prototype,"collisionBoundary",2),s([a({converter:u})],o.prototype,"loop",2);export{o as SkdxMenuPanelBase};
+    `],s([a({type:String,reflect:!0})],o.prototype,"side",2),s([a({type:String,reflect:!0})],o.prototype,"align",2),s([a({type:Number,reflect:!0,attribute:"side-offset"})],o.prototype,"sideOffset",2),s([a({type:Number,reflect:!0,attribute:"align-offset"})],o.prototype,"alignOffset",2),s([a({converter:f,attribute:"avoid-collisions"})],o.prototype,"avoidCollisions",2),s([a({type:Number,attribute:"collision-padding"})],o.prototype,"collisionPadding",2),s([a({attribute:!1})],o.prototype,"collisionBoundary",2),s([a({converter:f})],o.prototype,"loop",2);export{o as SkdxMenuPanelBase};

package/dist/internal/options.cjs

@@ -1 +1 @@
-"use strict";var p=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var S=(n,e)=>{for(var t in e)p(n,t,{get:e[t],enumerable:!0})},O=(n,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of b(e))!g.call(n,i)&&i!==t&&p(n,i,{get:()=>e[i],enumerable:!(r=x(e,i))||r.enumerable});return n};var k=n=>O(p({},"__esModule",{value:!0}),n);var D={};S(D,{buildOptionElements:()=>f,defaultOptionsFilter:()=>v,findOptionLabel:()=>m,renderSlotContent:()=>E,stampRenderSlot:()=>c});module.exports=k(D);var a=require("lit"),d=require("./glyphs.cjs");function u(n){return Array.isArray(n.options)}var s=new WeakMap;function E(n,e){let t=s.get(n);t||(t=new Map,s.set(n,t));let r=t.get(e);r||(r=new Map,t.set(e,r));for(let i of Array.from(n.children))i.getAttribute("slot")===e&&(r.set(i.getAttribute("data-value")??"",i),i.remove());return r}function c(n){let e=n.cloneNode(!0);return e.removeAttribute("slot"),e}function f(n,e){return n.map(t=>{if(u(t)){let o=document.createElement(e.group),l=document.createElement(e.groupLabel);return l.textContent=t.label,o.append(l,...f(t.options,e)),o}let r=document.createElement(e.item);r.setAttribute("value",t.value),t.disabled&&r.setAttribute("disabled","");let i=e.itemContent?.get(t.value);if(i?r.append(c(i)):r.textContent=t.label??t.value,e.itemIndicator){r.setAttribute("text-value",t.label??t.value);let o=document.createElement(e.itemIndicator);(0,a.render)(d.checkGlyph,o),r.insertBefore(o,r.firstChild)}return r})}function m(n,e){if(n){for(let t of n)if(u(t)){let r=m(t.options,e);if(r!==void 0)return r}else if(t.value===e)return t.label??t.value}}function v(n,e){return n.toLowerCase().includes(e.trim().toLowerCase())}0&&(module.exports={buildOptionElements,defaultOptionsFilter,findOptionLabel,renderSlotContent,stampRenderSlot});
+"use strict";var p=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var S=(n,e)=>{for(var t in e)p(n,t,{get:e[t],enumerable:!0})},O=(n,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of b(e))!g.call(n,o)&&o!==t&&p(n,o,{get:()=>e[o],enumerable:!(r=x(e,o))||r.enumerable});return n};var k=n=>O(p({},"__esModule",{value:!0}),n);var D={};S(D,{buildOptionElements:()=>m,defaultOptionsFilter:()=>v,findOptionLabel:()=>f,renderSlotContent:()=>E,stampRenderSlot:()=>c});module.exports=k(D);var a=require("lit"),d=require("./glyphs.cjs");function u(n){return Array.isArray(n.options)}var s=new WeakMap;function E(n,e){let t=s.get(n);t||(t=new Map,s.set(n,t));let r=t.get(e);r||(r=new Map,t.set(e,r));for(let o of Array.from(n.children))o.getAttribute("slot")===e&&(r.set(o.getAttribute("data-value")??"",o),o.remove());return r}function c(n){let e=n.cloneNode(!0);return e.removeAttribute("slot"),e}function m(n,e){return n.map(t=>{if(u(t)){let i=document.createElement(e.group),l=document.createElement(e.groupLabel);return l.textContent=t.label,i.append(l,...m(t.options,e)),i}let r=document.createElement(e.item);r.setAttribute("value",t.value),t.disabled&&r.setAttribute("disabled","");let o=e.itemContent?.get(t.value);if(o?r.append(c(o)):r.textContent=t.label??t.value,e.itemIndicator){r.setAttribute("text-value",t.label??t.value);let i=document.createElement(e.itemIndicator);(0,a.render)(d.checkGlyph,i),r.append(i)}return r})}function f(n,e){if(n){for(let t of n)if(u(t)){let r=f(t.options,e);if(r!==void 0)return r}else if(t.value===e)return t.label??t.value}}function v(n,e){return n.toLowerCase().includes(e.trim().toLowerCase())}0&&(module.exports={buildOptionElements,defaultOptionsFilter,findOptionLabel,renderSlotContent,stampRenderSlot});

package/dist/internal/options.d.cts

@@ -63,5 +63,5 @@ export declare function stampRenderSlot(source: Element): Element;
 export declare function buildOptionElements(options: SkdxOptionsInput, tags: SkdxOptionTags): Element[];
 /** Label for `value` in options; used for read-out before the item registers its label. @internal */
 export declare function findOptionLabel(options: SkdxOptionsInput | undefined, value: string): string | undefined;
-/** Case-insensitive substring match applied to derived `options` when no `filter` is set. @internal */
+/** Default `filter`: case-insensitive substring match applied to derived `options` when none is set. */
 export declare function defaultOptionsFilter(text: string, inputValue: string): boolean;

package/dist/internal/options.d.ts

@@ -63,5 +63,5 @@ export declare function stampRenderSlot(source: Element): Element;
 export declare function buildOptionElements(options: SkdxOptionsInput, tags: SkdxOptionTags): Element[];
 /** Label for `value` in options; used for read-out before the item registers its label. @internal */
 export declare function findOptionLabel(options: SkdxOptionsInput | undefined, value: string): string | undefined;
-/** Case-insensitive substring match applied to derived `options` when no `filter` is set. @internal */
+/** Default `filter`: case-insensitive substring match applied to derived `options` when none is set. */
 export declare function defaultOptionsFilter(text: string, inputValue: string): boolean;

package/dist/internal/options.js

@@ -1 +1 @@
-import{render as a}from"lit";import{checkGlyph as d}from"./glyphs.js";function s(r){return Array.isArray(r.options)}var l=new WeakMap;function b(r,t){let e=l.get(r);e||(e=new Map,l.set(r,e));let n=e.get(t);n||(n=new Map,e.set(t,n));for(let i of Array.from(r.children))i.getAttribute("slot")===t&&(n.set(i.getAttribute("data-value")??"",i),i.remove());return n}function u(r){let t=r.cloneNode(!0);return t.removeAttribute("slot"),t}function c(r,t){return r.map(e=>{if(s(e)){let o=document.createElement(t.group),p=document.createElement(t.groupLabel);return p.textContent=e.label,o.append(p,...c(e.options,t)),o}let n=document.createElement(t.item);n.setAttribute("value",e.value),e.disabled&&n.setAttribute("disabled","");let i=t.itemContent?.get(e.value);if(i?n.append(u(i)):n.textContent=e.label??e.value,t.itemIndicator){n.setAttribute("text-value",e.label??e.value);let o=document.createElement(t.itemIndicator);a(d,o),n.insertBefore(o,n.firstChild)}return n})}function f(r,t){if(r){for(let e of r)if(s(e)){let n=f(e.options,t);if(n!==void 0)return n}else if(e.value===t)return e.label??e.value}}function g(r,t){return r.toLowerCase().includes(t.trim().toLowerCase())}export{c as buildOptionElements,g as defaultOptionsFilter,f as findOptionLabel,b as renderSlotContent,u as stampRenderSlot};
+import{render as a}from"lit";import{checkGlyph as d}from"./glyphs.js";function s(r){return Array.isArray(r.options)}var l=new WeakMap;function b(r,t){let e=l.get(r);e||(e=new Map,l.set(r,e));let n=e.get(t);n||(n=new Map,e.set(t,n));for(let o of Array.from(r.children))o.getAttribute("slot")===t&&(n.set(o.getAttribute("data-value")??"",o),o.remove());return n}function u(r){let t=r.cloneNode(!0);return t.removeAttribute("slot"),t}function c(r,t){return r.map(e=>{if(s(e)){let i=document.createElement(t.group),p=document.createElement(t.groupLabel);return p.textContent=e.label,i.append(p,...c(e.options,t)),i}let n=document.createElement(t.item);n.setAttribute("value",e.value),e.disabled&&n.setAttribute("disabled","");let o=t.itemContent?.get(e.value);if(o?n.append(u(o)):n.textContent=e.label??e.value,t.itemIndicator){n.setAttribute("text-value",e.label??e.value);let i=document.createElement(t.itemIndicator);a(d,i),n.append(i)}return n})}function m(r,t){if(r){for(let e of r)if(s(e)){let n=m(e.options,t);if(n!==void 0)return n}else if(e.value===t)return e.label??e.value}}function g(r,t){return r.toLowerCase().includes(t.trim().toLowerCase())}export{c as buildOptionElements,g as defaultOptionsFilter,m as findOptionLabel,b as renderSlotContent,u as stampRenderSlot};

package/dist/internal/styles.cjs

@@ -1,4 +1,4 @@
-"use strict";var a=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var S=Object.prototype.hasOwnProperty;var u=(t,e)=>{for(var o in e)a(t,o,{get:e[o],enumerable:!0})},f=(t,e,o,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of p(e))!S.call(t,r)&&r!==o&&a(t,r,{get:()=>e[r],enumerable:!(s=c(e,r))||s.enumerable});return t};var b=t=>f(a({},"__esModule",{value:!0}),t);var C={};u(C,{NATIVE_CONTROL_RESET:()=>h,adoptInheritanceStyles:()=>E,controlBoxOnHost:()=>g,delegatesFocusShadowRootOptions:()=>x,hiddenHostStyles:()=>k,partInheritsHostBox:()=>m,resetNativeControl:()=>y});module.exports=b(C);var n=require("lit"),x={...n.LitElement.shadowRootOptions,delegatesFocus:!0},h=`
+"use strict";var a=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var p=(t,e)=>{for(var n in e)a(t,n,{get:e[n],enumerable:!0})},S=(t,e,n,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of u(e))!f.call(t,r)&&r!==n&&a(t,r,{get:()=>e[r],enumerable:!(s=c(e,r))||s.enumerable});return t};var b=t=>S(a({},"__esModule",{value:!0}),t);var m={};p(m,{NATIVE_CONTROL_RESET:()=>d,adoptInheritanceStyles:()=>v,controlBoxOnHost:()=>g,delegatesFocusShadowRootOptions:()=>x,hiddenHostStyles:()=>k,partInheritsHostBox:()=>w,resetNativeControl:()=>y});module.exports=b(m);var o=require("lit"),x={...o.LitElement.shadowRootOptions,delegatesFocus:!0},d=`
   appearance: none;
   background: none;
   border: 0;
@@ -8,17 +8,26 @@
   color: inherit;
   text-align: inherit;
   cursor: inherit;
-`,y=n.css`
+  outline: none;
+`,y=o.css`
   button,
   input,
   select,
   textarea {
-    ${(0,n.unsafeCSS)(h)}
+    ${(0,o.unsafeCSS)(d)}
   }
-`,g=n.css`
+`,g=o.css`
   :host {
     position: relative;
   }
+  /* delegatesFocus never matches :focus-visible on the host itself (only on the
+     shadow-DOM control it forwards focus to), so the light-DOM reset in base.css
+     that keys off :focus-visible can't reach it; draw the ring here instead,
+     around the host's own padded box, keyed off the inner control's own state. */
+  :host:has(:focus-visible) {
+    outline: var(--skdx-focus-ring-width) solid var(--skdx-color-focus-ring);
+    outline-offset: var(--skdx-focus-ring-offset);
+  }
   :host > button,
   :host > a,
   :host > label {
@@ -29,6 +38,10 @@
     flex: 1;
     align-self: stretch;
     min-width: 0;
+    /* The ring above draws on the host; the UA default ring on this inner
+       control (which resetNativeControl doesn't reach for a/label) would
+       otherwise double up, tight around its own unpadded box. */
+    outline: none;
   }
   :host > button::before,
   :host > a::before,
@@ -37,7 +50,7 @@
     position: absolute;
     inset: 0;
   }
-`,m=n.css`
+`,w=o.css`
   span {
     display: inherit;
     align-items: inherit;
@@ -46,7 +59,7 @@
     font: inherit;
     color: inherit;
   }
-`,k=n.css`
+`,k=o.css`
   :host([hidden]) {
     display: none;
   }
@@ -71,4 +84,4 @@
   :host(skdx-table-expanded-row) {
     vertical-align: inherit;
   }
-`,d="data-skdx-inheritance",i;function E(t){let e=t.adoptedStyleSheets;if(i===void 0&&(i=null,typeof CSSStyleSheet=="function"&&e!==void 0))try{let s=new CSSStyleSheet;s.replaceSync(l),i=s}catch{}if(i!==null&&e!==void 0){if(e.includes(i))return;t.adoptedStyleSheets=[...e,i];return}if(t.querySelector(`style[${d}]`))return;let o=document.createElement("style");o.setAttribute(d,""),o.textContent=l,t.append(o)}0&&(module.exports={NATIVE_CONTROL_RESET,adoptInheritanceStyles,controlBoxOnHost,delegatesFocusShadowRootOptions,hiddenHostStyles,partInheritsHostBox,resetNativeControl});
+`,h="data-skdx-inheritance",i;function v(t){let e=t.adoptedStyleSheets;if(i===void 0&&(i=null,typeof CSSStyleSheet=="function"&&e!==void 0))try{let s=new CSSStyleSheet;s.replaceSync(l),i=s}catch{}if(i!==null&&e!==void 0){if(e.includes(i))return;t.adoptedStyleSheets=[...e,i];return}if(t.querySelector(`style[${h}]`))return;let n=document.createElement("style");n.setAttribute(h,""),n.textContent=l,t.append(n)}0&&(module.exports={NATIVE_CONTROL_RESET,adoptInheritanceStyles,controlBoxOnHost,delegatesFocusShadowRootOptions,hiddenHostStyles,partInheritsHostBox,resetNativeControl});

package/dist/internal/styles.d.cts

@@ -5,7 +5,7 @@
  */
 export declare const delegatesFocusShadowRootOptions: ShadowRootInit;
 /** UA-chrome reset shared by the shadow-DOM `resetNativeControl` sheet and the light-DOM sheet. @internal */
-export declare const NATIVE_CONTROL_RESET = "\n  appearance: none;\n  background: none;\n  border: 0;\n  margin: 0;\n  padding: 0;\n  font: inherit;\n  color: inherit;\n  text-align: inherit;\n  cursor: inherit;\n";
+export declare const NATIVE_CONTROL_RESET = "\n  appearance: none;\n  background: none;\n  border: 0;\n  margin: 0;\n  padding: 0;\n  font: inherit;\n  color: inherit;\n  text-align: inherit;\n  cursor: inherit;\n  outline: none;\n";
 /** Removes UA chrome from native controls in the shadow root, since the shadow boundary blocks document styles that light-DOM frameworks get for free. */
 export declare const resetNativeControl: import("lit").CSSResult;
 /** Host box styling for `@skdx/skins` to paint, while a `::before` overlay keeps the whole surface as the native control's hit target. */

package/dist/internal/styles.d.ts

@@ -5,7 +5,7 @@
  */
 export declare const delegatesFocusShadowRootOptions: ShadowRootInit;
 /** UA-chrome reset shared by the shadow-DOM `resetNativeControl` sheet and the light-DOM sheet. @internal */
-export declare const NATIVE_CONTROL_RESET = "\n  appearance: none;\n  background: none;\n  border: 0;\n  margin: 0;\n  padding: 0;\n  font: inherit;\n  color: inherit;\n  text-align: inherit;\n  cursor: inherit;\n";
+export declare const NATIVE_CONTROL_RESET = "\n  appearance: none;\n  background: none;\n  border: 0;\n  margin: 0;\n  padding: 0;\n  font: inherit;\n  color: inherit;\n  text-align: inherit;\n  cursor: inherit;\n  outline: none;\n";
 /** Removes UA chrome from native controls in the shadow root, since the shadow boundary blocks document styles that light-DOM frameworks get for free. */
 export declare const resetNativeControl: import("lit").CSSResult;
 /** Host box styling for `@skdx/skins` to paint, while a `::before` overlay keeps the whole surface as the native control's hit target. */

package/dist/internal/styles.js

@@ -1,4 +1,4 @@
-import{css as o,LitElement as l,unsafeCSS as d}from"lit";var p={...l.shadowRootOptions,delegatesFocus:!0},h=`
+import{css as n,LitElement as l,unsafeCSS as h}from"lit";var u={...l.shadowRootOptions,delegatesFocus:!0},d=`
   appearance: none;
   background: none;
   border: 0;
@@ -8,17 +8,26 @@ import{css as o,LitElement as l,unsafeCSS as d}from"lit";var p={...l.shadowRootO
   color: inherit;
   text-align: inherit;
   cursor: inherit;
-`,S=o`
+  outline: none;
+`,f=n`
   button,
   input,
   select,
   textarea {
-    ${d(h)}
+    ${h(d)}
   }
-`,u=o`
+`,p=n`
   :host {
     position: relative;
   }
+  /* delegatesFocus never matches :focus-visible on the host itself (only on the
+     shadow-DOM control it forwards focus to), so the light-DOM reset in base.css
+     that keys off :focus-visible can't reach it; draw the ring here instead,
+     around the host's own padded box, keyed off the inner control's own state. */
+  :host:has(:focus-visible) {
+    outline: var(--skdx-focus-ring-width) solid var(--skdx-color-focus-ring);
+    outline-offset: var(--skdx-focus-ring-offset);
+  }
   :host > button,
   :host > a,
   :host > label {
@@ -29,6 +38,10 @@ import{css as o,LitElement as l,unsafeCSS as d}from"lit";var p={...l.shadowRootO
     flex: 1;
     align-self: stretch;
     min-width: 0;
+    /* The ring above draws on the host; the UA default ring on this inner
+       control (which resetNativeControl doesn't reach for a/label) would
+       otherwise double up, tight around its own unpadded box. */
+    outline: none;
   }
   :host > button::before,
   :host > a::before,
@@ -37,7 +50,7 @@ import{css as o,LitElement as l,unsafeCSS as d}from"lit";var p={...l.shadowRootO
     position: absolute;
     inset: 0;
   }
-`,f=o`
+`,S=n`
   span {
     display: inherit;
     align-items: inherit;
@@ -46,7 +59,7 @@ import{css as o,LitElement as l,unsafeCSS as d}from"lit";var p={...l.shadowRootO
     font: inherit;
     color: inherit;
   }
-`,b=o`
+`,b=n`
   :host([hidden]) {
     display: none;
   }
@@ -71,4 +84,4 @@ import{css as o,LitElement as l,unsafeCSS as d}from"lit";var p={...l.shadowRootO
   :host(skdx-table-expanded-row) {
     vertical-align: inherit;
   }
-`,a="data-skdx-inheritance",e;function x(t){let n=t.adoptedStyleSheets;if(e===void 0&&(e=null,typeof CSSStyleSheet=="function"&&n!==void 0))try{let s=new CSSStyleSheet;s.replaceSync(r),e=s}catch{}if(e!==null&&n!==void 0){if(n.includes(e))return;t.adoptedStyleSheets=[...n,e];return}if(t.querySelector(`style[${a}]`))return;let i=document.createElement("style");i.setAttribute(a,""),i.textContent=r,t.append(i)}export{h as NATIVE_CONTROL_RESET,x as adoptInheritanceStyles,u as controlBoxOnHost,p as delegatesFocusShadowRootOptions,b as hiddenHostStyles,f as partInheritsHostBox,S as resetNativeControl};
+`,a="data-skdx-inheritance",e;function x(t){let o=t.adoptedStyleSheets;if(e===void 0&&(e=null,typeof CSSStyleSheet=="function"&&o!==void 0))try{let s=new CSSStyleSheet;s.replaceSync(r),e=s}catch{}if(e!==null&&o!==void 0){if(o.includes(e))return;t.adoptedStyleSheets=[...o,e];return}if(t.querySelector(`style[${a}]`))return;let i=document.createElement("style");i.setAttribute(a,""),i.textContent=r,t.append(i)}export{d as NATIVE_CONTROL_RESET,x as adoptInheritanceStyles,p as controlBoxOnHost,u as delegatesFocusShadowRootOptions,b as hiddenHostStyles,S as partInheritsHostBox,f as resetNativeControl};

package/dist/list/ListItem.cjs

@@ -1,27 +1,32 @@
-"use strict";var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var g=(o,t)=>{for(var s in t)r(o,s,{get:t[s],enumerable:!0})},x=(o,t,s,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of y(t))!k.call(o,e)&&e!==s&&r(o,e,{get:()=>t[e],enumerable:!(n=h(t,e))||n.enumerable});return o};var b=o=>x(r({},"__esModule",{value:!0}),o),d=(o,t,s,n)=>{for(var e=n>1?void 0:n?h(t,s):t,a=o.length-1,c;a>=0;a--)(c=o[a])&&(e=(n?c(t,s,e):c(e))||e);return n&&e&&r(t,s,e),e};var $={};g($,{SkdxListItem:()=>l});module.exports=b($);var i=require("lit"),p=require("lit/decorators.js"),u=require("../internal/define.cjs"),v=require("../internal/styles.cjs"),f=require("../list-item/ListItemAnatomy.cjs");var[m]=f.LIST_ITEM_RENDER_SLOTS,l=class extends i.LitElement{constructor(){super(...arguments);this.list=null;this.onIconSlotChange=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.list=this.closest("skdx-list"),this.setAttribute("role","listitem")}render(){let s=this.querySelector(`:scope > [slot="${m}"]`)!==null,n=s?void 0:this.list?.getDefaultIcon(),e=s||n!==void 0;return i.html`<li
+"use strict";var r=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var k=(o,e)=>{for(var i in e)r(o,i,{get:e[i],enumerable:!0})},x=(o,e,i,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of f(e))!g.call(o,t)&&t!==i&&r(o,t,{get:()=>e[t],enumerable:!(n=m(e,t))||n.enumerable});return o};var b=o=>x(r({},"__esModule",{value:!0}),o),d=(o,e,i,n)=>{for(var t=n>1?void 0:n?m(e,i):e,a=o.length-1,c;a>=0;a--)(c=o[a])&&(t=(n?c(e,i,t):c(t))||t);return n&&t&&r(e,i,t),t};var T={};k(T,{SkdxListItem:()=>l});module.exports=b(T);var s=require("lit"),p=require("lit/decorators.js"),u=require("../internal/define.cjs"),y=require("../internal/styles.cjs"),v=require("../list-item/ListItemAnatomy.cjs");var[h]=v.LIST_ITEM_RENDER_SLOTS,l=class extends s.LitElement{constructor(){super(...arguments);this.list=null;this.onIconSlotChange=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.list=this.closest("skdx-list"),this.setAttribute("role","listitem")}render(){let i=this.querySelector(`:scope > [slot="${h}"]`)!==null,n=i?void 0:this.list?.getDefaultIcon(),t=i||n!==void 0;return s.html`<li
       part="item"
       role="presentation"
-      value=${this.value??i.nothing}
-      style=${e?"list-style: none":i.nothing}
+      value=${this.value??s.nothing}
+      style=${t?"list-style: none":s.nothing}
     >
-      ${e?i.html`<span part="indicator"
+      ${t?s.html`<span part="indicator"
               ><slot
-                name=${m}
+                name=${h}
                 @slotchange=${this.onIconSlotChange}
                 >${n}</slot
               ></span
-            >`:i.html`<slot
-              name=${m}
+            >`:s.html`<slot
+              name=${h}
               @slotchange=${this.onIconSlotChange}
               hidden
             ></slot>`}<slot></slot>
-    </li>`}};l.styles=[v.hiddenHostStyles,i.css`
+    </li>`}};l.styles=[y.hiddenHostStyles,s.css`
       :host {
         display: contents;
       }
       li {
         font: inherit;
         color: inherit;
+        /* The host is display: contents, so this <li> is the actual flex item
+           the List's column layout stretches — without a width it shrinks to
+           its content instead, wrapping every item into a narrow column. */
+        width: 100%;
+        box-sizing: border-box;
       }
       li::marker {
         color: var(--skdx-list-marker-color, currentColor);

package/dist/list/ListItem.js

@@ -1,27 +1,32 @@
-var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var a=(n,i,o,t)=>{for(var e=t>1?void 0:t?p(i,o):i,l=n.length-1,r;l>=0;l--)(r=n[l])&&(e=(t?r(i,o,e):r(e))||e);return t&&e&&h(i,o,e),e};import{css as u,html as c,LitElement as v,nothing as m}from"lit";import{property as f}from"lit/decorators.js";import{customElement as y}from"../internal/define.js";import{hiddenHostStyles as k}from"../internal/styles.js";import{LIST_ITEM_RENDER_SLOTS as g}from"../list-item/ListItemAnatomy.js";var[d]=g,s=class extends v{constructor(){super(...arguments);this.list=null;this.onIconSlotChange=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.list=this.closest("skdx-list"),this.setAttribute("role","listitem")}render(){let o=this.querySelector(`:scope > [slot="${d}"]`)!==null,t=o?void 0:this.list?.getDefaultIcon(),e=o||t!==void 0;return c`<li
+var m=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var a=(n,s,o,e)=>{for(var t=e>1?void 0:e?p(s,o):s,l=n.length-1,r;l>=0;l--)(r=n[l])&&(t=(e?r(s,o,t):r(t))||t);return e&&t&&m(s,o,t),t};import{css as u,html as c,LitElement as y,nothing as h}from"lit";import{property as v}from"lit/decorators.js";import{customElement as f}from"../internal/define.js";import{hiddenHostStyles as g}from"../internal/styles.js";import{LIST_ITEM_RENDER_SLOTS as k}from"../list-item/ListItemAnatomy.js";var[d]=k,i=class extends y{constructor(){super(...arguments);this.list=null;this.onIconSlotChange=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.list=this.closest("skdx-list"),this.setAttribute("role","listitem")}render(){let o=this.querySelector(`:scope > [slot="${d}"]`)!==null,e=o?void 0:this.list?.getDefaultIcon(),t=o||e!==void 0;return c`<li
       part="item"
       role="presentation"
-      value=${this.value??m}
-      style=${e?"list-style: none":m}
+      value=${this.value??h}
+      style=${t?"list-style: none":h}
     >
-      ${e?c`<span part="indicator"
+      ${t?c`<span part="indicator"
               ><slot
                 name=${d}
                 @slotchange=${this.onIconSlotChange}
-                >${t}</slot
+                >${e}</slot
               ></span
             >`:c`<slot
               name=${d}
               @slotchange=${this.onIconSlotChange}
               hidden
             ></slot>`}<slot></slot>
-    </li>`}};s.styles=[k,u`
+    </li>`}};i.styles=[g,u`
       :host {
         display: contents;
       }
       li {
         font: inherit;
         color: inherit;
+        /* The host is display: contents, so this <li> is the actual flex item
+           the List's column layout stretches — without a width it shrinks to
+           its content instead, wrapping every item into a narrow column. */
+        width: 100%;
+        box-sizing: border-box;
       }
       li::marker {
         color: var(--skdx-list-marker-color, currentColor);
@@ -37,4 +42,4 @@ var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var a=(n,i,o,t
         margin-inline-end: var(--skdx-space-2, 0.5em);
         color: var(--skdx-list-marker-color, currentColor);
       }
-    `],a([f({type:Number})],s.prototype,"value",2),s=a([y("skdx-list-item","list","item")],s);export{s as SkdxListItem};
+    `],a([v({type:Number})],i.prototype,"value",2),i=a([f("skdx-list-item","list","item")],i);export{i as SkdxListItem};

package/dist/loading-overlay/LoadingOverlayBackdrop.cjs

@@ -1,4 +1,4 @@
-"use strict";var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var y=(o,t)=>{for(var s in t)a(o,s,{get:t[s],enumerable:!0})},g=(o,t,s,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of b(t))!f.call(o,e)&&e!==s&&a(o,e,{get:()=>t[e],enumerable:!(i=p(t,e))||i.enumerable});return o};var E=o=>g(a({},"__esModule",{value:!0}),o),c=(o,t,s,i)=>{for(var e=i>1?void 0:i?p(t,s):t,d=o.length-1,n;d>=0;d--)(n=o[d])&&(e=(i?n(t,s,e):n(e))||e);return i&&e&&a(t,s,e),e};var k={};y(k,{SkdxLoadingOverlayBackdrop:()=>r});module.exports=E(k);var l=require("lit"),m=require("lit/decorators.js"),u=require("../internal/define.cjs"),v=require("../internal/styles.cjs"),h=require("./LoadingOverlay.cjs");var r=class extends l.LitElement{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.syncHostState()}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-loading-overlay"),!this.root)throw new Error("<skdx-loading-overlay-backdrop> must be used inside <skdx-loading-overlay>.");this.setAttribute("aria-hidden","true"),this.root.addEventListener(h.LOADING_OVERLAY_UPDATE_EVENT,this.onRootUpdate),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener(h.LOADING_OVERLAY_UPDATE_EVENT,this.onRootUpdate),super.disconnectedCallback()}syncHostState(){let s=this.root?.effectiveVisible??!1;this.setAttribute("data-state",s?"visible":"hidden"),this.toggleAttribute("data-full-screen",this.root?.fullScreen??!1),this.hidden=!s}render(){return l.html`<slot></slot>`}};r.styles=[v.hiddenHostStyles,l.css`
+"use strict";var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var y=(o,t)=>{for(var s in t)a(o,s,{get:t[s],enumerable:!0})},g=(o,t,s,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of b(t))!f.call(o,e)&&e!==s&&a(o,e,{get:()=>t[e],enumerable:!(i=p(t,e))||i.enumerable});return o};var k=o=>g(a({},"__esModule",{value:!0}),o),c=(o,t,s,i)=>{for(var e=i>1?void 0:i?p(t,s):t,d=o.length-1,n;d>=0;d--)(n=o[d])&&(e=(i?n(t,s,e):n(e))||e);return i&&e&&a(t,s,e),e};var E={};y(E,{SkdxLoadingOverlayBackdrop:()=>r});module.exports=k(E);var l=require("lit"),m=require("lit/decorators.js"),u=require("../internal/define.cjs"),v=require("../internal/styles.cjs"),h=require("./LoadingOverlay.cjs");var r=class extends l.LitElement{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.syncHostState()}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-loading-overlay, skdx-backdrop"),!this.root)throw new Error("<skdx-loading-overlay-backdrop> must be used inside <skdx-loading-overlay>.");this.setAttribute("aria-hidden","true"),this.root.addEventListener(h.LOADING_OVERLAY_UPDATE_EVENT,this.onRootUpdate),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener(h.LOADING_OVERLAY_UPDATE_EVENT,this.onRootUpdate),super.disconnectedCallback()}syncHostState(){let s=this.root?.effectiveVisible??!1;this.setAttribute("data-state",s?"visible":"hidden"),this.toggleAttribute("data-full-screen",this.root?.fullScreen??!1),this.hidden=!s}render(){return l.html`<slot></slot>`}};r.styles=[v.hiddenHostStyles,l.css`
       :host {
         display: block;
       }

package/dist/loading-overlay/LoadingOverlayBackdrop.js

@@ -1,4 +1,4 @@
-var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(r,s,e,i)=>{for(var t=i>1?void 0:i?h(s,e):s,l=r.length-1,a;l>=0;l--)(a=r[l])&&(t=(i?a(s,e,t):a(t))||t);return i&&t&&c(s,e,t),t};import{css as p,html as m,LitElement as u}from"lit";import{property as v}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{hiddenHostStyles as f}from"../internal/styles.js";import{LOADING_OVERLAY_UPDATE_EVENT as n}from"./LoadingOverlay.js";var o=class extends u{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.syncHostState()}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-loading-overlay"),!this.root)throw new Error("<skdx-loading-overlay-backdrop> must be used inside <skdx-loading-overlay>.");this.setAttribute("aria-hidden","true"),this.root.addEventListener(n,this.onRootUpdate),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener(n,this.onRootUpdate),super.disconnectedCallback()}syncHostState(){let e=this.root?.effectiveVisible??!1;this.setAttribute("data-state",e?"visible":"hidden"),this.toggleAttribute("data-full-screen",this.root?.fullScreen??!1),this.hidden=!e}render(){return m`<slot></slot>`}};o.styles=[f,p`
+var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(r,s,e,i)=>{for(var t=i>1?void 0:i?h(s,e):s,l=r.length-1,a;l>=0;l--)(a=r[l])&&(t=(i?a(s,e,t):a(t))||t);return i&&t&&c(s,e,t),t};import{css as p,html as m,LitElement as u}from"lit";import{property as v}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{hiddenHostStyles as f}from"../internal/styles.js";import{LOADING_OVERLAY_UPDATE_EVENT as n}from"./LoadingOverlay.js";var o=class extends u{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.syncHostState()}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-loading-overlay, skdx-backdrop"),!this.root)throw new Error("<skdx-loading-overlay-backdrop> must be used inside <skdx-loading-overlay>.");this.setAttribute("aria-hidden","true"),this.root.addEventListener(n,this.onRootUpdate),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener(n,this.onRootUpdate),super.disconnectedCallback()}syncHostState(){let e=this.root?.effectiveVisible??!1;this.setAttribute("data-state",e?"visible":"hidden"),this.toggleAttribute("data-full-screen",this.root?.fullScreen??!1),this.hidden=!e}render(){return m`<slot></slot>`}};o.styles=[f,p`
       :host {
         display: block;
       }