@skdx/web-components 0.26.0

package/dist/listbox/ListboxLabel.d.cts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-listbox-label>` — the heading naming an `<skdx-listbox-group>`. It
+ * carries the id its group points `aria-labelledby` at (the group assigns one
+ * if the consumer hasn't), so the group is named without the label itself
+ * becoming an option.
+ *
+ * Must be used inside an `<skdx-listbox-group>` — a label with no group to name
+ * has nothing to attach to.
+ *
+ * @example
+ * ```html
+ * <skdx-listbox-group>
+ *   <skdx-listbox-label>Frameworks</skdx-listbox-label>
+ *   <skdx-listbox-item value="react">React</skdx-listbox-item>
+ * </skdx-listbox-group>
+ * ```
+ */
+export declare class SkdxListboxLabel extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-listbox-label': SkdxListboxLabel;
+    }
+}

package/dist/listbox/ListboxLabel.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-listbox-label>` — the heading naming an `<skdx-listbox-group>`. It
+ * carries the id its group points `aria-labelledby` at (the group assigns one
+ * if the consumer hasn't), so the group is named without the label itself
+ * becoming an option.
+ *
+ * Must be used inside an `<skdx-listbox-group>` — a label with no group to name
+ * has nothing to attach to.
+ *
+ * @example
+ * ```html
+ * <skdx-listbox-group>
+ *   <skdx-listbox-label>Frameworks</skdx-listbox-label>
+ *   <skdx-listbox-item value="react">React</skdx-listbox-item>
+ * </skdx-listbox-group>
+ * ```
+ */
+export declare class SkdxListboxLabel extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-listbox-label': SkdxListboxLabel;
+    }
+}

package/dist/listbox/ListboxLabel.js

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

package/dist/listbox/index.cjs

@@ -0,0 +1 @@
+"use strict";var e=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var s=Object.prototype.hasOwnProperty;var S=(x,o)=>{for(var r in o)e(x,r,{get:o[r],enumerable:!0})},I=(x,o,r,m)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of k(o))!s.call(x,t)&&t!==r&&e(x,t,{get:()=>o[t],enumerable:!(m=f(o,t))||m.enumerable});return x};var a=x=>I(e({},"__esModule",{value:!0}),x);var c={};S(c,{SkdxListbox:()=>b.SkdxListbox,SkdxListboxGroup:()=>p.SkdxListboxGroup,SkdxListboxItem:()=>d.SkdxListboxItem,SkdxListboxItemIndicator:()=>i.SkdxListboxItemIndicator,SkdxListboxLabel:()=>L.SkdxListboxLabel});module.exports=a(c);var b=require("./Listbox.cjs"),d=require("./ListboxItem.cjs"),i=require("./ListboxItemIndicator.cjs"),p=require("./ListboxGroup.cjs"),L=require("./ListboxLabel.cjs");0&&(module.exports={SkdxListbox,SkdxListboxGroup,SkdxListboxItem,SkdxListboxItemIndicator,SkdxListboxLabel});

package/dist/listbox/index.d.cts

@@ -0,0 +1,5 @@
+export { SkdxListbox } from './Listbox.cjs';
+export { SkdxListboxItem } from './ListboxItem.cjs';
+export { SkdxListboxItemIndicator } from './ListboxItemIndicator.cjs';
+export { SkdxListboxGroup } from './ListboxGroup.cjs';
+export { SkdxListboxLabel } from './ListboxLabel.cjs';

package/dist/listbox/index.d.ts

@@ -0,0 +1,5 @@
+export { SkdxListbox } from './Listbox.js';
+export { SkdxListboxItem } from './ListboxItem.js';
+export { SkdxListboxItemIndicator } from './ListboxItemIndicator.js';
+export { SkdxListboxGroup } from './ListboxGroup.js';
+export { SkdxListboxLabel } from './ListboxLabel.js';

package/dist/listbox/index.js

@@ -0,0 +1 @@
+import{SkdxListbox as t}from"./Listbox.js";import{SkdxListboxItem as e}from"./ListboxItem.js";import{SkdxListboxItemIndicator as b}from"./ListboxItemIndicator.js";import{SkdxListboxGroup as i}from"./ListboxGroup.js";import{SkdxListboxLabel as L}from"./ListboxLabel.js";export{t as SkdxListbox,i as SkdxListboxGroup,e as SkdxListboxItem,b as SkdxListboxItemIndicator,L as SkdxListboxLabel};

package/dist/loading-overlay/LoadingOverlay.cjs

@@ -0,0 +1,5 @@
+"use strict";var c=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var T=(i,t)=>{for(var e in t)c(i,e,{get:t[e],enumerable:!0})},A=(i,t,e,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of g(t))!E.call(i,l)&&l!==e&&c(i,l,{get:()=>t[l],enumerable:!(a=b(t,l))||a.enumerable});return i};var k=i=>A(c({},"__esModule",{value:!0}),i),o=(i,t,e,a)=>{for(var l=a>1?void 0:a?b(t,e):t,u=i.length-1,h;u>=0;u--)(h=i[u])&&(l=(a?h(t,e,l):h(l))||l);return a&&l&&c(t,e,l),l};var B={};T(B,{LOADING_OVERLAY_UPDATE_EVENT:()=>v,SkdxLoadingOverlay:()=>s});module.exports=k(B);var n=require("lit"),r=require("lit/decorators.js"),f=require("../internal/define.cjs"),y=require("../utils/live-announcer.cjs");var d=0,m="",p="";function w(){if(d===0){let i=window.innerWidth-document.documentElement.clientWidth;m=document.body.style.overflow,p=document.body.style.paddingRight,document.body.style.overflow="hidden",i>0&&(document.body.style.paddingRight=`${i}px`)}d++}function V(){d=Math.max(0,d-1),d===0&&(document.body.style.overflow=m,document.body.style.paddingRight=p)}var v="skdx-loading-overlay-internal-update",s=class extends n.LitElement{constructor(){super(...arguments);this.visible=!1;this.defaultVisible=!1;this.fullScreen=!1;this.loadingLabel="Loading";this.delay=0;this.delayElapsed=!1;this.lastVisible=!1;this.hasSynced=!1;this.locked=!1}get effectiveVisible(){return this.visible&&(this.delay<=0||this.delayElapsed)}connectedCallback(){super.connectedCallback(),this.defaultVisible&&!this.hasAttribute("visible")&&(this.visible=!0)}disconnectedCallback(){clearTimeout(this.delayTimer),this.delayTimer=void 0,this.delayElapsed=!1,this.setBodyLock(!1),this.removeAttribute("inert"),this.removeAttribute("aria-busy"),super.disconnectedCallback()}updated(e){(e.has("visible")||e.has("delay"))&&this.rearmDelay(),this.syncState()}rearmDelay(){clearTimeout(this.delayTimer),this.delayTimer=void 0,this.delayElapsed=!1,!(!this.visible||this.delay<=0)&&(this.delayTimer=setTimeout(()=>{this.delayTimer=void 0,this.delayElapsed=!0,this.syncState()},this.delay))}syncState(){let e=this.effectiveVisible;e?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy"),this.toggleAttribute("inert",e),this.setAttribute("data-state",e?"visible":"hidden"),this.toggleAttribute("data-full-screen",this.fullScreen),this.setBodyLock(e&&this.fullScreen),e?this.announcedLabel!==this.loadingLabel&&(this.announcedLabel=this.loadingLabel,(0,y.announce)(this.loadingLabel)):this.announcedLabel=void 0,this.dispatchEvent(new CustomEvent(v));let a=!this.hasSynced;this.hasSynced=!0,e!==this.lastVisible&&(this.lastVisible=e,!a&&this.dispatchEvent(new CustomEvent("visible-change",{detail:e,bubbles:!0,composed:!0})))}setBodyLock(e){e!==this.locked&&(this.locked=e,e?w():V())}render(){return n.html`<slot></slot>`}};s.styles=n.css`
+    :host {
+      display: block;
+    }
+  `,o([(0,r.property)({type:Boolean,reflect:!0})],s.prototype,"visible",2),o([(0,r.property)({type:Boolean,attribute:"default-visible"})],s.prototype,"defaultVisible",2),o([(0,r.property)({type:Boolean,reflect:!0,attribute:"full-screen"})],s.prototype,"fullScreen",2),o([(0,r.property)({type:String,attribute:"loading-label"})],s.prototype,"loadingLabel",2),o([(0,r.property)({type:Number})],s.prototype,"delay",2),s=o([(0,f.customElement)("skdx-loading-overlay","loading-overlay","root")],s);0&&(module.exports={LOADING_OVERLAY_UPDATE_EVENT,SkdxLoadingOverlay});

package/dist/loading-overlay/LoadingOverlay.d.cts

@@ -0,0 +1,120 @@
+import { LitElement } from 'lit';
+/** Dispatched on the root whenever the parts' view of its state changes. @internal */
+export declare const LOADING_OVERLAY_UPDATE_EVENT = "skdx-loading-overlay-internal-update";
+/**
+ * `<skdx-loading-overlay>` — the Web Components implementation of the shared
+ * LoadingOverlay contract (see `@skdx/shared`'s `loadingOverlayContract`): a
+ * scrim and an indicator over a region whose content is busy. Wraps the
+ * content being covered, owns the visibility (`visible` / `default-visible` /
+ * the `visible-change` event) and hands the *effective* state down to
+ * `<skdx-loading-overlay-backdrop>` and `<skdx-loading-overlay-content>`, which
+ * look this element up via `closest('skdx-loading-overlay')` — custom elements
+ * have no context API, so the DOM tree itself is the shared context.
+ *
+ * Renders a plain block box: give it `position: relative` and the layers cover
+ * exactly this box; set `full-screen` and they cover the viewport instead.
+ *
+ * While visible the host is `aria-busy="true"` and carries `inert`, so the
+ * pointer and the tab sequence both stop at the overlay rather than walking
+ * into the controls it is hiding. Deliberately **not** a focus trap: this is
+ * not a dialog, there is nothing inside to focus and nothing to dismiss, so
+ * trapping would strand the keyboard on a spinner. Because `inert` also takes
+ * the subtree out of the accessibility tree, the announcement is made through
+ * the process-wide live region (see `announce`) rather than from the
+ * `<skdx-spinner>` inside — a `role="status"` in an inert subtree announces
+ * nothing.
+ *
+ * `delay` exists for the same reason `<skdx-tooltip>` has one: a request that
+ * resolves in 80ms should never paint a spinner. The timer is cancelled when
+ * `visible` flips back to false before it fires, and on disconnect.
+ *
+ * `data-state` is `"visible"`/`"hidden"` and reflects the *effective*
+ * visibility, i.e. after `delay`.
+ *
+ * @example
+ * ```html
+ * <skdx-loading-overlay visible delay="150" loading-label="Loading invoices" style="position: relative">
+ *   <p>INV-1041 · $2,400</p>
+ *   <skdx-loading-overlay-backdrop></skdx-loading-overlay-backdrop>
+ *   <skdx-loading-overlay-content></skdx-loading-overlay-content>
+ * </skdx-loading-overlay>
+ * ```
+ *
+ * @fires visible-change - Fires with the new effective visibility (boolean) when the overlay actually appears or disappears — that is, *after* `delay`. It reports the effective transition rather than echoing the property back, because the moment a delayed overlay paints is the one thing the caller cannot derive for itself. Suppressed when the effective state is unchanged, and never fired for the state the element mounts in.
+ */
+export declare class SkdxLoadingOverlay extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Whether work is in flight. The property is the single source of truth,
+     * like a native `<input>`'s `checked`: a consumer that wants controlled
+     * behaviour listens for `visible-change` and writes it back.
+     * @default false — the overlay starts hidden and the wrapped content is
+     * interactive.
+     */
+    visible: boolean;
+    /**
+     * Initial visibility, for uncontrolled usage. Applied once, on connect, and
+     * only if `visible` wasn't already set.
+     * @default false — hidden on first paint, so nothing is announced for it.
+     */
+    defaultVisible: boolean;
+    /**
+     * Cover the viewport instead of this element's own box. Emits
+     * `data-full-screen` (style it `position: fixed; inset: 0`) and locks body
+     * scroll while visible.
+     * @default false — the overlay covers only this element's box and **never**
+     * locks the body, because freezing the whole page for a spinner over one
+     * card is a bug, not a feature.
+     */
+    fullScreen: boolean;
+    /**
+     * Text announced politely when the overlay becomes visible, and the default
+     * `<skdx-spinner>` label inside `<skdx-loading-overlay-content>`.
+     * @default 'Loading' — announced as "Loading"; name the work ("Loading
+     * invoices") when the page has more than one thing that can be busy.
+     */
+    loadingLabel: string;
+    /**
+     * Milliseconds to wait after `visible` turns true before the overlay
+     * actually appears. A response that arrives inside the window never renders
+     * an overlay at all, which is what stops the flash-of-spinner on fast
+     * requests. The pending timer is cancelled if `visible` flips back to false
+     * first, and on disconnect.
+     * @default 0 — shows immediately, so nothing is hidden from a slow
+     * connection by accident.
+     */
+    delay: number;
+    /** Has the `delay` window elapsed for the current show? Not reactive — every write is followed by a manual sync. */
+    private delayElapsed;
+    private delayTimer?;
+    /** Effective visibility as of the last sync, so `visible-change` fires on transitions only. */
+    private lastVisible;
+    private hasSynced;
+    /** Whether *this* element currently holds a body scroll lock, so lock/unlock stay balanced. */
+    private locked;
+    /** Label last handed to the live region, cleared on hide so the next show announces again. */
+    private announcedLabel?;
+    /**
+     * The *effective* visibility — `visible` after `delay` has elapsed, not the
+     * raw property. This is what the parts render against, so a request that
+     * resolves inside the delay window never shows an overlay at all.
+     */
+    get effectiveVisible(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private rearmDelay;
+    /**
+     * Writes the effective state onto the host, mirrors it to the parts, and
+     * reports the transition. Called from `updated()` and from the delay timer,
+     * which fires outside any Lit update.
+     */
+    private syncState;
+    private setBodyLock;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-loading-overlay': SkdxLoadingOverlay;
+    }
+}

package/dist/loading-overlay/LoadingOverlay.d.ts

@@ -0,0 +1,120 @@
+import { LitElement } from 'lit';
+/** Dispatched on the root whenever the parts' view of its state changes. @internal */
+export declare const LOADING_OVERLAY_UPDATE_EVENT = "skdx-loading-overlay-internal-update";
+/**
+ * `<skdx-loading-overlay>` — the Web Components implementation of the shared
+ * LoadingOverlay contract (see `@skdx/shared`'s `loadingOverlayContract`): a
+ * scrim and an indicator over a region whose content is busy. Wraps the
+ * content being covered, owns the visibility (`visible` / `default-visible` /
+ * the `visible-change` event) and hands the *effective* state down to
+ * `<skdx-loading-overlay-backdrop>` and `<skdx-loading-overlay-content>`, which
+ * look this element up via `closest('skdx-loading-overlay')` — custom elements
+ * have no context API, so the DOM tree itself is the shared context.
+ *
+ * Renders a plain block box: give it `position: relative` and the layers cover
+ * exactly this box; set `full-screen` and they cover the viewport instead.
+ *
+ * While visible the host is `aria-busy="true"` and carries `inert`, so the
+ * pointer and the tab sequence both stop at the overlay rather than walking
+ * into the controls it is hiding. Deliberately **not** a focus trap: this is
+ * not a dialog, there is nothing inside to focus and nothing to dismiss, so
+ * trapping would strand the keyboard on a spinner. Because `inert` also takes
+ * the subtree out of the accessibility tree, the announcement is made through
+ * the process-wide live region (see `announce`) rather than from the
+ * `<skdx-spinner>` inside — a `role="status"` in an inert subtree announces
+ * nothing.
+ *
+ * `delay` exists for the same reason `<skdx-tooltip>` has one: a request that
+ * resolves in 80ms should never paint a spinner. The timer is cancelled when
+ * `visible` flips back to false before it fires, and on disconnect.
+ *
+ * `data-state` is `"visible"`/`"hidden"` and reflects the *effective*
+ * visibility, i.e. after `delay`.
+ *
+ * @example
+ * ```html
+ * <skdx-loading-overlay visible delay="150" loading-label="Loading invoices" style="position: relative">
+ *   <p>INV-1041 · $2,400</p>
+ *   <skdx-loading-overlay-backdrop></skdx-loading-overlay-backdrop>
+ *   <skdx-loading-overlay-content></skdx-loading-overlay-content>
+ * </skdx-loading-overlay>
+ * ```
+ *
+ * @fires visible-change - Fires with the new effective visibility (boolean) when the overlay actually appears or disappears — that is, *after* `delay`. It reports the effective transition rather than echoing the property back, because the moment a delayed overlay paints is the one thing the caller cannot derive for itself. Suppressed when the effective state is unchanged, and never fired for the state the element mounts in.
+ */
+export declare class SkdxLoadingOverlay extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Whether work is in flight. The property is the single source of truth,
+     * like a native `<input>`'s `checked`: a consumer that wants controlled
+     * behaviour listens for `visible-change` and writes it back.
+     * @default false — the overlay starts hidden and the wrapped content is
+     * interactive.
+     */
+    visible: boolean;
+    /**
+     * Initial visibility, for uncontrolled usage. Applied once, on connect, and
+     * only if `visible` wasn't already set.
+     * @default false — hidden on first paint, so nothing is announced for it.
+     */
+    defaultVisible: boolean;
+    /**
+     * Cover the viewport instead of this element's own box. Emits
+     * `data-full-screen` (style it `position: fixed; inset: 0`) and locks body
+     * scroll while visible.
+     * @default false — the overlay covers only this element's box and **never**
+     * locks the body, because freezing the whole page for a spinner over one
+     * card is a bug, not a feature.
+     */
+    fullScreen: boolean;
+    /**
+     * Text announced politely when the overlay becomes visible, and the default
+     * `<skdx-spinner>` label inside `<skdx-loading-overlay-content>`.
+     * @default 'Loading' — announced as "Loading"; name the work ("Loading
+     * invoices") when the page has more than one thing that can be busy.
+     */
+    loadingLabel: string;
+    /**
+     * Milliseconds to wait after `visible` turns true before the overlay
+     * actually appears. A response that arrives inside the window never renders
+     * an overlay at all, which is what stops the flash-of-spinner on fast
+     * requests. The pending timer is cancelled if `visible` flips back to false
+     * first, and on disconnect.
+     * @default 0 — shows immediately, so nothing is hidden from a slow
+     * connection by accident.
+     */
+    delay: number;
+    /** Has the `delay` window elapsed for the current show? Not reactive — every write is followed by a manual sync. */
+    private delayElapsed;
+    private delayTimer?;
+    /** Effective visibility as of the last sync, so `visible-change` fires on transitions only. */
+    private lastVisible;
+    private hasSynced;
+    /** Whether *this* element currently holds a body scroll lock, so lock/unlock stay balanced. */
+    private locked;
+    /** Label last handed to the live region, cleared on hide so the next show announces again. */
+    private announcedLabel?;
+    /**
+     * The *effective* visibility — `visible` after `delay` has elapsed, not the
+     * raw property. This is what the parts render against, so a request that
+     * resolves inside the delay window never shows an overlay at all.
+     */
+    get effectiveVisible(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private rearmDelay;
+    /**
+     * Writes the effective state onto the host, mirrors it to the parts, and
+     * reports the transition. Called from `updated()` and from the delay timer,
+     * which fires outside any Lit update.
+     */
+    private syncState;
+    private setBodyLock;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-loading-overlay': SkdxLoadingOverlay;
+    }
+}

package/dist/loading-overlay/LoadingOverlay.js

@@ -0,0 +1,5 @@
+var b=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var l=(s,o,e,a)=>{for(var i=a>1?void 0:a?f(o,e):o,d=s.length-1,c;d>=0;d--)(c=s[d])&&(i=(a?c(o,e,i):c(i))||i);return a&&i&&b(o,e,i),i};import{css as y,html as m,LitElement as p}from"lit";import{property as r}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{announce as g}from"../utils/live-announcer.js";var n=0,u="",h="";function E(){if(n===0){let s=window.innerWidth-document.documentElement.clientWidth;u=document.body.style.overflow,h=document.body.style.paddingRight,document.body.style.overflow="hidden",s>0&&(document.body.style.paddingRight=`${s}px`)}n++}function T(){n=Math.max(0,n-1),n===0&&(document.body.style.overflow=u,document.body.style.paddingRight=h)}var A="skdx-loading-overlay-internal-update",t=class extends p{constructor(){super(...arguments);this.visible=!1;this.defaultVisible=!1;this.fullScreen=!1;this.loadingLabel="Loading";this.delay=0;this.delayElapsed=!1;this.lastVisible=!1;this.hasSynced=!1;this.locked=!1}get effectiveVisible(){return this.visible&&(this.delay<=0||this.delayElapsed)}connectedCallback(){super.connectedCallback(),this.defaultVisible&&!this.hasAttribute("visible")&&(this.visible=!0)}disconnectedCallback(){clearTimeout(this.delayTimer),this.delayTimer=void 0,this.delayElapsed=!1,this.setBodyLock(!1),this.removeAttribute("inert"),this.removeAttribute("aria-busy"),super.disconnectedCallback()}updated(e){(e.has("visible")||e.has("delay"))&&this.rearmDelay(),this.syncState()}rearmDelay(){clearTimeout(this.delayTimer),this.delayTimer=void 0,this.delayElapsed=!1,!(!this.visible||this.delay<=0)&&(this.delayTimer=setTimeout(()=>{this.delayTimer=void 0,this.delayElapsed=!0,this.syncState()},this.delay))}syncState(){let e=this.effectiveVisible;e?this.setAttribute("aria-busy","true"):this.removeAttribute("aria-busy"),this.toggleAttribute("inert",e),this.setAttribute("data-state",e?"visible":"hidden"),this.toggleAttribute("data-full-screen",this.fullScreen),this.setBodyLock(e&&this.fullScreen),e?this.announcedLabel!==this.loadingLabel&&(this.announcedLabel=this.loadingLabel,g(this.loadingLabel)):this.announcedLabel=void 0,this.dispatchEvent(new CustomEvent(A));let a=!this.hasSynced;this.hasSynced=!0,e!==this.lastVisible&&(this.lastVisible=e,!a&&this.dispatchEvent(new CustomEvent("visible-change",{detail:e,bubbles:!0,composed:!0})))}setBodyLock(e){e!==this.locked&&(this.locked=e,e?E():T())}render(){return m`<slot></slot>`}};t.styles=y`
+    :host {
+      display: block;
+    }
+  `,l([r({type:Boolean,reflect:!0})],t.prototype,"visible",2),l([r({type:Boolean,attribute:"default-visible"})],t.prototype,"defaultVisible",2),l([r({type:Boolean,reflect:!0,attribute:"full-screen"})],t.prototype,"fullScreen",2),l([r({type:String,attribute:"loading-label"})],t.prototype,"loadingLabel",2),l([r({type:Number})],t.prototype,"delay",2),t=l([v("skdx-loading-overlay","loading-overlay","root")],t);export{A as LOADING_OVERLAY_UPDATE_EVENT,t as SkdxLoadingOverlay};

package/dist/loading-overlay/LoadingOverlayBackdrop.cjs

@@ -0,0 +1,5 @@
+"use strict";var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var y=(o,t)=>{for(var s in t)a(o,s,{get:t[s],enumerable:!0})},f=(o,t,s,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of m(t))!u.call(o,e)&&e!==s&&a(o,e,{get:()=>t[e],enumerable:!(i=h(t,e))||i.enumerable});return o};var k=o=>f(a({},"__esModule",{value:!0}),o),v=(o,t,s,i)=>{for(var e=i>1?void 0:i?h(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"),b=require("../internal/define.cjs"),p=require("../internal/styles.cjs"),c=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(c.LOADING_OVERLAY_UPDATE_EVENT,this.onRootUpdate),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener(c.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=[p.hiddenHostStyles,l.css`
+      :host {
+        display: block;
+      }
+    `],r=v([(0,b.customElement)("skdx-loading-overlay-backdrop","loading-overlay","backdrop")],r);0&&(module.exports={SkdxLoadingOverlayBackdrop});

package/dist/loading-overlay/LoadingOverlayBackdrop.d.cts

@@ -0,0 +1,40 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-loading-overlay-backdrop>` — the scrim that covers the work in
+ * progress. Rendered `aria-hidden`: it is pure decoration, the busy state is
+ * carried by the root's `aria-busy` and its announcement, not by a dimmed
+ * rectangle.
+ *
+ * `data-state="visible" | "hidden"`, `data-full-screen` and `hidden` are set
+ * on this **host** element rather than inside shadow DOM, so a consumer's own
+ * stylesheet can position and animate it without piercing a shadow boundary —
+ * one rule set styles both the inline (`position: absolute; inset: 0`) and the
+ * full-screen (`position: fixed; inset: 0`) case. `hidden` while the overlay
+ * is not effectively visible, so declaring an exit animation on
+ * `[data-state='hidden']` is the consumer's call rather than something this
+ * element forces.
+ *
+ * Must be used inside `<skdx-loading-overlay>`, which it finds with
+ * `closest()` — custom elements have no context API.
+ *
+ * @example
+ * ```html
+ * <skdx-loading-overlay visible>
+ *   <skdx-loading-overlay-backdrop></skdx-loading-overlay-backdrop>
+ * </skdx-loading-overlay>
+ * ```
+ */
+export declare class SkdxLoadingOverlayBackdrop extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncHostState;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-loading-overlay-backdrop': SkdxLoadingOverlayBackdrop;
+    }
+}

package/dist/loading-overlay/LoadingOverlayBackdrop.d.ts

@@ -0,0 +1,40 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-loading-overlay-backdrop>` — the scrim that covers the work in
+ * progress. Rendered `aria-hidden`: it is pure decoration, the busy state is
+ * carried by the root's `aria-busy` and its announcement, not by a dimmed
+ * rectangle.
+ *
+ * `data-state="visible" | "hidden"`, `data-full-screen` and `hidden` are set
+ * on this **host** element rather than inside shadow DOM, so a consumer's own
+ * stylesheet can position and animate it without piercing a shadow boundary —
+ * one rule set styles both the inline (`position: absolute; inset: 0`) and the
+ * full-screen (`position: fixed; inset: 0`) case. `hidden` while the overlay
+ * is not effectively visible, so declaring an exit animation on
+ * `[data-state='hidden']` is the consumer's call rather than something this
+ * element forces.
+ *
+ * Must be used inside `<skdx-loading-overlay>`, which it finds with
+ * `closest()` — custom elements have no context API.
+ *
+ * @example
+ * ```html
+ * <skdx-loading-overlay visible>
+ *   <skdx-loading-overlay-backdrop></skdx-loading-overlay-backdrop>
+ * </skdx-loading-overlay>
+ * ```
+ */
+export declare class SkdxLoadingOverlayBackdrop extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncHostState;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-loading-overlay-backdrop': SkdxLoadingOverlayBackdrop;
+    }
+}

package/dist/loading-overlay/LoadingOverlayBackdrop.js

@@ -0,0 +1,5 @@
+var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(r,o,e,i)=>{for(var t=i>1?void 0:i?h(o,e):o,l=r.length-1,a;l>=0;l--)(a=r[l])&&(t=(i?a(o,e,t):a(t))||t);return i&&t&&c(o,e,t),t};import{css as v,html as b,LitElement as p}from"lit";import{customElement as m}from"../internal/define.js";import{hiddenHostStyles as u}from"../internal/styles.js";import{LOADING_OVERLAY_UPDATE_EVENT as n}from"./LoadingOverlay.js";var s=class extends p{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 b`<slot></slot>`}};s.styles=[u,v`
+      :host {
+        display: block;
+      }
+    `],s=d([m("skdx-loading-overlay-backdrop","loading-overlay","backdrop")],s);export{s as SkdxLoadingOverlayBackdrop};

package/dist/loading-overlay/LoadingOverlayContent.cjs

@@ -0,0 +1,7 @@
+"use strict";var a=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var y=(o,t)=>{for(var s in t)a(o,s,{get:t[s],enumerable:!0})},f=(o,t,s,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of b(t))!u.call(o,e)&&e!==s&&a(o,e,{get:()=>t[e],enumerable:!(i=h(t,e))||i.enumerable});return o};var g=o=>f(a({},"__esModule",{value:!0}),o),p=(o,t,s,i)=>{for(var e=i>1?void 0:i?h(t,s):t,n=o.length-1,d;n>=0;n--)(d=o[n])&&(e=(i?d(t,s,e):d(e))||e);return i&&e&&a(t,s,e),e};var k={};y(k,{SkdxLoadingOverlayContent:()=>r});module.exports=g(k);var l=require("lit"),v=require("../internal/define.cjs"),m=require("../internal/styles.cjs"),x=require("../spinner/Spinner.cjs"),c=require("./LoadingOverlay.cjs");var r=class extends l.LitElement{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>{this.syncHostState(),this.requestUpdate()}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-loading-overlay"),!this.root)throw new Error("<skdx-loading-overlay-content> must be used inside <skdx-loading-overlay>.");this.root.addEventListener(c.LOADING_OVERLAY_UPDATE_EVENT,this.onRootUpdate),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener(c.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 part="content"
+      ><skdx-spinner label=${this.root?.loadingLabel??"Loading"}></skdx-spinner
+    ></slot>`}};r.styles=[m.hiddenHostStyles,l.css`
+      :host {
+        display: block;
+      }
+    `],r=p([(0,v.customElement)("skdx-loading-overlay-content","loading-overlay","content")],r);0&&(module.exports={SkdxLoadingOverlayContent});

package/dist/loading-overlay/LoadingOverlayContent.d.cts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+import '../spinner/Spinner.cjs';
+/**
+ * `<skdx-loading-overlay-content>` — the indicator layer sitting on top of the
+ * backdrop: a spinner, a message, whatever the overlay needs to say. Carries
+ * the same `data-state="visible" | "hidden"`, `data-full-screen` and `hidden`
+ * hooks as `<skdx-loading-overlay-backdrop>`, all on this **host** element so a
+ * consumer's stylesheet can position and animate it without piercing a shadow
+ * boundary.
+ *
+ * With no slotted children it falls back to the existing `<skdx-spinner>`,
+ * labelled with the root's `loading-label` — composing the indicator the
+ * library already ships rather than growing a second one. Slot in your own
+ * content to replace it entirely.
+ *
+ * The whole overlay sits inside the root's `inert` subtree, so nothing here is
+ * focusable or announced; the "Loading" announcement is made by the root
+ * through the process-wide live region instead.
+ *
+ * Must be used inside `<skdx-loading-overlay>`, which it finds with `closest()`
+ * — custom elements have no context API.
+ *
+ * @example
+ * ```html
+ * <skdx-loading-overlay visible loading-label="Loading invoices">
+ *   <skdx-loading-overlay-backdrop></skdx-loading-overlay-backdrop>
+ *   <skdx-loading-overlay-content></skdx-loading-overlay-content>
+ * </skdx-loading-overlay>
+ * ```
+ *
+ * @csspart content - The shadow-root wrapper holding the slot and its default `<skdx-spinner>`.
+ */
+export declare class SkdxLoadingOverlayContent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncHostState;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-loading-overlay-content': SkdxLoadingOverlayContent;
+    }
+}

package/dist/loading-overlay/LoadingOverlayContent.d.ts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+import '../spinner/Spinner.js';
+/**
+ * `<skdx-loading-overlay-content>` — the indicator layer sitting on top of the
+ * backdrop: a spinner, a message, whatever the overlay needs to say. Carries
+ * the same `data-state="visible" | "hidden"`, `data-full-screen` and `hidden`
+ * hooks as `<skdx-loading-overlay-backdrop>`, all on this **host** element so a
+ * consumer's stylesheet can position and animate it without piercing a shadow
+ * boundary.
+ *
+ * With no slotted children it falls back to the existing `<skdx-spinner>`,
+ * labelled with the root's `loading-label` — composing the indicator the
+ * library already ships rather than growing a second one. Slot in your own
+ * content to replace it entirely.
+ *
+ * The whole overlay sits inside the root's `inert` subtree, so nothing here is
+ * focusable or announced; the "Loading" announcement is made by the root
+ * through the process-wide live region instead.
+ *
+ * Must be used inside `<skdx-loading-overlay>`, which it finds with `closest()`
+ * — custom elements have no context API.
+ *
+ * @example
+ * ```html
+ * <skdx-loading-overlay visible loading-label="Loading invoices">
+ *   <skdx-loading-overlay-backdrop></skdx-loading-overlay-backdrop>
+ *   <skdx-loading-overlay-content></skdx-loading-overlay-content>
+ * </skdx-loading-overlay>
+ * ```
+ *
+ * @csspart content - The shadow-root wrapper holding the slot and its default `<skdx-spinner>`.
+ */
+export declare class SkdxLoadingOverlayContent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncHostState;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-loading-overlay-content': SkdxLoadingOverlayContent;
+    }
+}

package/dist/loading-overlay/LoadingOverlayContent.js

@@ -0,0 +1,7 @@
+var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var n=(r,o,e,i)=>{for(var t=i>1?void 0:i?h(o,e):o,l=r.length-1,a;l>=0;l--)(a=r[l])&&(t=(i?a(o,e,t):a(t))||t);return i&&t&&c(o,e,t),t};import{css as p,html as v,LitElement as m}from"lit";import{customElement as b}from"../internal/define.js";import{hiddenHostStyles as u}from"../internal/styles.js";import"../spinner/Spinner.js";import{LOADING_OVERLAY_UPDATE_EVENT as d}from"./LoadingOverlay.js";var s=class extends m{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>{this.syncHostState(),this.requestUpdate()}}connectedCallback(){if(super.connectedCallback(),this.root=this.closest("skdx-loading-overlay"),!this.root)throw new Error("<skdx-loading-overlay-content> must be used inside <skdx-loading-overlay>.");this.root.addEventListener(d,this.onRootUpdate),this.syncHostState()}disconnectedCallback(){this.root?.removeEventListener(d,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 v`<slot part="content"
+      ><skdx-spinner label=${this.root?.loadingLabel??"Loading"}></skdx-spinner
+    ></slot>`}};s.styles=[u,p`
+      :host {
+        display: block;
+      }
+    `],s=n([b("skdx-loading-overlay-content","loading-overlay","content")],s);export{s as SkdxLoadingOverlayContent};

package/dist/loading-overlay/index.cjs

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

package/dist/loading-overlay/index.d.cts

@@ -0,0 +1,3 @@
+export { SkdxLoadingOverlay } from './LoadingOverlay.cjs';
+export { SkdxLoadingOverlayBackdrop } from './LoadingOverlayBackdrop.cjs';
+export { SkdxLoadingOverlayContent } from './LoadingOverlayContent.cjs';

package/dist/loading-overlay/index.d.ts

@@ -0,0 +1,3 @@
+export { SkdxLoadingOverlay } from './LoadingOverlay.js';
+export { SkdxLoadingOverlayBackdrop } from './LoadingOverlayBackdrop.js';
+export { SkdxLoadingOverlayContent } from './LoadingOverlayContent.js';

package/dist/loading-overlay/index.js

@@ -0,0 +1 @@
+import{SkdxLoadingOverlay as a}from"./LoadingOverlay.js";import{SkdxLoadingOverlayBackdrop as e}from"./LoadingOverlayBackdrop.js";import{SkdxLoadingOverlayContent as n}from"./LoadingOverlayContent.js";export{a as SkdxLoadingOverlay,e as SkdxLoadingOverlayBackdrop,n as SkdxLoadingOverlayContent};

package/dist/menubar/Menubar.cjs

@@ -0,0 +1,5 @@
+"use strict";var m=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var T=(a,r)=>{for(var e in r)m(a,e,{get:r[e],enumerable:!0})},g=(a,r,e,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of E(r))!v.call(a,i)&&i!==e&&m(a,i,{get:()=>r[i],enumerable:!(t=h(r,i))||t.enumerable});return a};var b=a=>g(m({},"__esModule",{value:!0}),a),c=(a,r,e,t)=>{for(var i=t>1?void 0:t?h(r,e):r,o=a.length-1,d;o>=0;o--)(d=a[o])&&(i=(t?d(r,e,i):d(i))||i);return t&&i&&m(r,e,i),i};var k={};T(k,{SkdxMenubar:()=>n});module.exports=b(k);var l=require("lit"),u=require("lit/decorators.js"),p=require("../internal/define.cjs"),y=require("../internal/direction.cjs"),f=require("../internal/typeahead.cjs");var w="[data-skdx-menubar-trigger]:not([disabled])",n=class extends l.LitElement{constructor(){super(...arguments);this.value="";this.typeahead="";this.handleKeyDown=e=>{let t=Array.from(this.querySelectorAll(w));if(t.length===0)return;let i=t.indexOf(document.activeElement),o=(0,y.directionalKey)(e.key,this);if(o==="ArrowRight"||o==="ArrowLeft"){e.preventDefault();let s=i+(o==="ArrowRight"?1:-1);s<0&&(s=t.length-1),s>=t.length&&(s=0),t[s]?.focus();return}if(o==="Home"){e.preventDefault(),t[0]?.focus();return}if(o==="End"){e.preventDefault(),t[t.length-1]?.focus();return}e.key.length===1&&!e.altKey&&!e.ctrlKey&&!e.metaKey&&(this.typeahead+=e.key.toLowerCase(),clearTimeout(this.typeaheadTimer),this.typeaheadTimer=setTimeout(()=>this.typeahead="",1e3),t.find(s=>(0,f.itemText)(s).trim().toLowerCase().startsWith(this.typeahead))?.focus())}}connectedCallback(){super.connectedCallback(),this.setAttribute("role","menubar"),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),clearTimeout(this.typeaheadTimer),super.disconnectedCallback()}setValue(e){this.value!==e&&(this.value=e,this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("skdx-menubar-internal-update",{composed:!0})))}render(){return l.html`<slot></slot>`}};n.styles=l.css`
+    :host {
+      display: block;
+    }
+  `,c([(0,u.property)({type:String,reflect:!0})],n.prototype,"value",2),n=c([(0,p.customElement)("skdx-menubar","menubar","root")],n);0&&(module.exports={SkdxMenubar});