@skdx/web-components 0.26.0

package/dist/select/SelectValue.d.ts

@@ -0,0 +1,41 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-select-value>` — displays the closest ancestor `<skdx-select>`'s
+ * selected option label (as registered by its `<skdx-select-option>`s), or
+ * `placeholder` when nothing is selected. Renders a `pointer-events: none`
+ * `<span>` in shadow DOM so clicks pass through to the trigger.
+ *
+ * Unlike the other framework packages, this element always renders the
+ * auto-derived label — it has no reliable way to detect "did the consumer
+ * provide their own default-slot content" without a `slotchange` listener,
+ * so overriding the label via light-DOM children isn't supported here.
+ *
+ * While the root is `multiple`, renders one chip per selected option instead —
+ * a `data-chip` span carrying `data-value`, to be styled like a TagsInput tag.
+ * The chips are deliberately inert: the trigger is a `<button>`, so a remove
+ * button nested inside one would be invalid HTML and unreachable by keyboard.
+ * Deselecting happens in the listbox. They live in *this element's shadow
+ * root* (everything this element renders does), so a test reaches them through
+ * `valueEl.shadowRoot`, not through `valueEl` itself.
+ *
+ * @csspart chip - One selected-value chip, rendered only while the root is `multiple`.
+ */
+export declare class SkdxSelectValue extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Content shown when no value is selected.
+     * @default undefined — renders nothing when no value is selected.
+     */
+    placeholder?: string;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-select-value': SkdxSelectValue;
+    }
+}

package/dist/select/SelectValue.js

@@ -0,0 +1,6 @@
+var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(i,l,t,o)=>{for(var e=o>1?void 0:o?c(l,t):l,a=i.length-1,n;a>=0;a--)(n=i[a])&&(e=(o?n(l,t,e):n(e))||e);return o&&e&&p(l,t,e),e};import{css as h,html as s,LitElement as m}from"lit";import{property as u}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{reflectHostState as f}from"../internal/part.js";var r=class extends m{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-select"),this.root?.addEventListener("skdx-select-internal-update",this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-select-internal-update",this.onRootUpdate),super.disconnectedCallback()}updated(){f(this,{"data-multiple":this.root?.multiple?"":null,"data-placeholder":(this.root?.selectedValues.length??0)===0?"":null})}render(){let t=this.root;if(!t)return s``;let o=t.selectedValues;return o.length===0?s`${this.placeholder}`:t.multiple?s`${o.map(e=>s`<span part="chip" data-chip data-value=${e}>${t.getOptionLabel(e)}</span>`)}`:s`${t.getOptionLabel(o[0])}`}};r.styles=h`
+    :host {
+      display: inline;
+      pointer-events: none;
+    }
+  `,d([u({type:String})],r.prototype,"placeholder",2),r=d([v("skdx-select-value","select","value")],r);export{r as SkdxSelectValue};

package/dist/select/SelectViewport.cjs

@@ -0,0 +1,10 @@
+"use strict";var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var f=(s,e)=>{for(var o in e)i(s,o,{get:e[o],enumerable:!0})},p=(s,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!v.call(s,t)&&t!==o&&i(s,t,{get:()=>e[t],enumerable:!(r=m(e,t))||r.enumerable});return s};var g=s=>p(i({},"__esModule",{value:!0}),s),c=(s,e,o,r)=>{for(var t=r>1?void 0:r?m(e,o):e,n=s.length-1,h;n>=0;n--)(h=s[n])&&(t=(r?h(e,o,t):h(t))||t);return r&&t&&i(e,o,t),t};var w={};f(w,{SkdxSelectViewport:()=>l});module.exports=g(w);var a=require("lit"),d=require("../internal/define.cjs");var l=class extends a.LitElement{render(){return a.html`<slot></slot>`}};l.styles=a.css`
+    :host {
+      display: block;
+      /* The element's whole reason to exist. React's SelectViewport sets the
+         same thing as an inline style; here it is a host default the skin or
+         the consumer can still override, since a document rule targeting the
+         host beats a :host rule from inside the shadow root. */
+      overflow: auto;
+    }
+  `,l=c([(0,d.customElement)("skdx-select-viewport","select","viewport")],l);0&&(module.exports={SkdxSelectViewport});

package/dist/select/SelectViewport.d.cts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-select-viewport>` — the scroll container between
+ * `<skdx-select-content>` and its options.
+ *
+ * Optional. `<skdx-select-content>` is a perfectly good parent for options on
+ * its own, and every existing consumer nests them directly; this exists so a
+ * long list can scroll *inside* the popover while the content box keeps its
+ * padding and border fixed, which is the one thing a single element cannot do.
+ *
+ * Safe to insert between the two: the root and the content both find options
+ * with a descendant `querySelectorAll('skdx-select-option')`
+ * (`Select.ts`, `SelectContent.ts`), not a child combinator, so an
+ * intervening wrapper changes nothing about selection, typeahead or roving
+ * focus. It carries no role of its own for the same reason a generic scroll
+ * div does not: `role="listbox"` on the content owns its `option`
+ * *descendants*, and adding a role here would break that ownership.
+ *
+ * @example
+ * ```html
+ * <skdx-select-content>
+ *   <skdx-select-viewport>
+ *     <skdx-select-option value="react">React</skdx-select-option>
+ *   </skdx-select-viewport>
+ * </skdx-select-content>
+ * ```
+ *
+ * @slot - The options, and any groups, labels or separators between them.
+ */
+export declare class SkdxSelectViewport extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-select-viewport': SkdxSelectViewport;
+    }
+}

package/dist/select/SelectViewport.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-select-viewport>` — the scroll container between
+ * `<skdx-select-content>` and its options.
+ *
+ * Optional. `<skdx-select-content>` is a perfectly good parent for options on
+ * its own, and every existing consumer nests them directly; this exists so a
+ * long list can scroll *inside* the popover while the content box keeps its
+ * padding and border fixed, which is the one thing a single element cannot do.
+ *
+ * Safe to insert between the two: the root and the content both find options
+ * with a descendant `querySelectorAll('skdx-select-option')`
+ * (`Select.ts`, `SelectContent.ts`), not a child combinator, so an
+ * intervening wrapper changes nothing about selection, typeahead or roving
+ * focus. It carries no role of its own for the same reason a generic scroll
+ * div does not: `role="listbox"` on the content owns its `option`
+ * *descendants*, and adding a role here would break that ownership.
+ *
+ * @example
+ * ```html
+ * <skdx-select-content>
+ *   <skdx-select-viewport>
+ *     <skdx-select-option value="react">React</skdx-select-option>
+ *   </skdx-select-viewport>
+ * </skdx-select-content>
+ * ```
+ *
+ * @slot - The options, and any groups, labels or separators between them.
+ */
+export declare class SkdxSelectViewport extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-select-viewport': SkdxSelectViewport;
+    }
+}

package/dist/select/SelectViewport.js

@@ -0,0 +1,10 @@
+var h=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var n=(r,s,l,o)=>{for(var e=o>1?void 0:o?m(s,l):s,a=r.length-1,i;a>=0;a--)(i=r[a])&&(e=(o?i(s,l,e):i(e))||e);return o&&e&&h(s,l,e),e};import{css as c,html as d,LitElement as u}from"lit";import{customElement as v}from"../internal/define.js";var t=class extends u{render(){return d`<slot></slot>`}};t.styles=c`
+    :host {
+      display: block;
+      /* The element's whole reason to exist. React's SelectViewport sets the
+         same thing as an inline style; here it is a host default the skin or
+         the consumer can still override, since a document rule targeting the
+         host beats a :host rule from inside the shadow root. */
+      overflow: auto;
+    }
+  `,t=n([v("skdx-select-viewport","select","viewport")],t);export{t as SkdxSelectViewport};

package/dist/select/index.cjs

@@ -0,0 +1 @@
+"use strict";var S=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var s=(t,e)=>{for(var o in e)S(t,o,{get:e[o],enumerable:!0})},w=(t,e,o,x)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of V(e))!b.call(t,r)&&r!==o&&S(t,r,{get:()=>e[r],enumerable:!(x=T(e,r))||x.enumerable});return t};var y=t=>w(S({},"__esModule",{value:!0}),t);var C={};s(C,{SkdxSelect:()=>p.SkdxSelect,SkdxSelectContent:()=>f.SkdxSelectContent,SkdxSelectGroup:()=>I.SkdxSelectGroup,SkdxSelectIcon:()=>d.SkdxSelectIcon,SkdxSelectItemIndicator:()=>n.SkdxSelectItemIndicator,SkdxSelectItemText:()=>i.SkdxSelectItemText,SkdxSelectLabel:()=>g.SkdxSelectLabel,SkdxSelectOption:()=>a.SkdxSelectOption,SkdxSelectPortal:()=>l.SkdxSelectPortal,SkdxSelectSeparator:()=>u.SkdxSelectSeparator,SkdxSelectTrigger:()=>c.SkdxSelectTrigger,SkdxSelectValue:()=>m.SkdxSelectValue,SkdxSelectViewport:()=>k.SkdxSelectViewport});module.exports=y(C);var p=require("./Select.cjs"),c=require("./SelectTrigger.cjs"),l=require("./SelectPortal.cjs"),m=require("./SelectValue.cjs"),d=require("./SelectIcon.cjs"),f=require("./SelectContent.cjs"),k=require("./SelectViewport.cjs"),a=require("./SelectOption.cjs"),i=require("./SelectItemText.cjs"),n=require("./SelectItemIndicator.cjs"),I=require("./SelectGroup.cjs"),g=require("./SelectLabel.cjs"),u=require("./SelectSeparator.cjs");0&&(module.exports={SkdxSelect,SkdxSelectContent,SkdxSelectGroup,SkdxSelectIcon,SkdxSelectItemIndicator,SkdxSelectItemText,SkdxSelectLabel,SkdxSelectOption,SkdxSelectPortal,SkdxSelectSeparator,SkdxSelectTrigger,SkdxSelectValue,SkdxSelectViewport});

package/dist/select/index.d.cts

@@ -0,0 +1,14 @@
+export { SkdxSelect } from './Select.cjs';
+export type { SkdxSelectItemDescriptor } from './Select.cjs';
+export { SkdxSelectTrigger } from './SelectTrigger.cjs';
+export { SkdxSelectPortal } from './SelectPortal.cjs';
+export { SkdxSelectValue } from './SelectValue.cjs';
+export { SkdxSelectIcon } from './SelectIcon.cjs';
+export { SkdxSelectContent } from './SelectContent.cjs';
+export { SkdxSelectViewport } from './SelectViewport.cjs';
+export { SkdxSelectOption } from './SelectOption.cjs';
+export { SkdxSelectItemText } from './SelectItemText.cjs';
+export { SkdxSelectItemIndicator } from './SelectItemIndicator.cjs';
+export { SkdxSelectGroup } from './SelectGroup.cjs';
+export { SkdxSelectLabel } from './SelectLabel.cjs';
+export { SkdxSelectSeparator } from './SelectSeparator.cjs';

package/dist/select/index.d.ts

@@ -0,0 +1,14 @@
+export { SkdxSelect } from './Select.js';
+export type { SkdxSelectItemDescriptor } from './Select.js';
+export { SkdxSelectTrigger } from './SelectTrigger.js';
+export { SkdxSelectPortal } from './SelectPortal.js';
+export { SkdxSelectValue } from './SelectValue.js';
+export { SkdxSelectIcon } from './SelectIcon.js';
+export { SkdxSelectContent } from './SelectContent.js';
+export { SkdxSelectViewport } from './SelectViewport.js';
+export { SkdxSelectOption } from './SelectOption.js';
+export { SkdxSelectItemText } from './SelectItemText.js';
+export { SkdxSelectItemIndicator } from './SelectItemIndicator.js';
+export { SkdxSelectGroup } from './SelectGroup.js';
+export { SkdxSelectLabel } from './SelectLabel.js';
+export { SkdxSelectSeparator } from './SelectSeparator.js';

package/dist/select/index.js

@@ -0,0 +1 @@
+import{SkdxSelect as r}from"./Select.js";import{SkdxSelectTrigger as S}from"./SelectTrigger.js";import{SkdxSelectPortal as p}from"./SelectPortal.js";import{SkdxSelectValue as l}from"./SelectValue.js";import{SkdxSelectIcon as d}from"./SelectIcon.js";import{SkdxSelectContent as k}from"./SelectContent.js";import{SkdxSelectViewport as i}from"./SelectViewport.js";import{SkdxSelectOption as I}from"./SelectOption.js";import{SkdxSelectItemText as u}from"./SelectItemText.js";import{SkdxSelectItemIndicator as V}from"./SelectItemIndicator.js";import{SkdxSelectGroup as s}from"./SelectGroup.js";import{SkdxSelectLabel as y}from"./SelectLabel.js";import{SkdxSelectSeparator as D}from"./SelectSeparator.js";export{r as SkdxSelect,k as SkdxSelectContent,s as SkdxSelectGroup,d as SkdxSelectIcon,V as SkdxSelectItemIndicator,u as SkdxSelectItemText,y as SkdxSelectLabel,I as SkdxSelectOption,p as SkdxSelectPortal,D as SkdxSelectSeparator,S as SkdxSelectTrigger,l as SkdxSelectValue,i as SkdxSelectViewport};

package/dist/separator/Separator.cjs

@@ -0,0 +1,10 @@
+"use strict";var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var g=(o,t)=>{for(var r in t)s(o,r,{get:t[r],enumerable:!0})},E=(o,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of y(t))!u.call(o,e)&&e!==r&&s(o,e,{get:()=>t[e],enumerable:!(n=p(t,e))||n.enumerable});return o};var H=o=>E(s({},"__esModule",{value:!0}),o),l=(o,t,r,n)=>{for(var e=n>1?void 0:n?p(t,r):t,c=o.length-1,d;c>=0;c--)(d=o[c])&&(e=(n?d(t,r,e):d(e))||e);return n&&e&&s(t,r,e),e};var $={};g($,{SkdxSeparator:()=>i});module.exports=H($);var a=require("lit"),m=require("lit/decorators.js"),v=require("../internal/define.cjs"),h=require("../internal/part.cjs"),f=require("../internal/styles.cjs");var i=class extends a.LitElement{constructor(){super(...arguments);this.orientation="horizontal";this.decorative=!1}updated(){(0,h.reflectHostState)(this,{"data-orientation":this.orientation})}render(){let r=this.orientation==="vertical";return a.html`<div
+      part="separator"
+      data-orientation=${this.orientation}
+      role=${this.decorative?"none":"separator"}
+      aria-orientation=${!this.decorative&&r?"vertical":a.nothing}
+    ></div>`}};i.styles=[f.hiddenHostStyles,a.css`
+      :host {
+        display: block;
+      }
+    `],l([(0,m.property)({type:String,reflect:!0})],i.prototype,"orientation",2),l([(0,m.property)({type:Boolean,reflect:!0})],i.prototype,"decorative",2),i=l([(0,v.customElement)("skdx-separator","separator","root")],i);0&&(module.exports={SkdxSeparator});

package/dist/separator/Separator.d.cts

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-separator>` — the Web Components implementation of the shared
+ * Separator contract (see `@skdx/shared`'s `separatorContract`). A visual
+ * or semantic divider between content. Renders `role="separator"` with
+ * `aria-orientation` (vertical only) by default, or `role="none"` (removed
+ * from the accessibility tree) when `decorative`. Always exposes
+ * `data-orientation` for styling via `skdx-separator::part(separator)`.
+ *
+ * @example
+ * ```html
+ * <p>Section one</p>
+ * <skdx-separator></skdx-separator>
+ * <p>Section two</p>
+ * ```
+ *
+ * @csspart separator - The element carrying the separator's role/orientation.
+ */
+export declare class SkdxSeparator extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Layout axis. Always exposed as `data-orientation`; only exposed as `aria-orientation` when vertical and not decorative. */
+    orientation: 'horizontal' | 'vertical';
+    /** When true, the separator is purely visual and removed from the accessibility tree (`role="none"`). */
+    decorative: boolean;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-separator': SkdxSeparator;
+    }
+}

package/dist/separator/Separator.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-separator>` — the Web Components implementation of the shared
+ * Separator contract (see `@skdx/shared`'s `separatorContract`). A visual
+ * or semantic divider between content. Renders `role="separator"` with
+ * `aria-orientation` (vertical only) by default, or `role="none"` (removed
+ * from the accessibility tree) when `decorative`. Always exposes
+ * `data-orientation` for styling via `skdx-separator::part(separator)`.
+ *
+ * @example
+ * ```html
+ * <p>Section one</p>
+ * <skdx-separator></skdx-separator>
+ * <p>Section two</p>
+ * ```
+ *
+ * @csspart separator - The element carrying the separator's role/orientation.
+ */
+export declare class SkdxSeparator extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Layout axis. Always exposed as `data-orientation`; only exposed as `aria-orientation` when vertical and not decorative. */
+    orientation: 'horizontal' | 'vertical';
+    /** When true, the separator is purely visual and removed from the accessibility tree (`role="none"`). */
+    decorative: boolean;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-separator': SkdxSeparator;
+    }
+}

package/dist/separator/Separator.js

@@ -0,0 +1,10 @@
+var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var a=(n,o,r,i)=>{for(var t=i>1?void 0:i?m(o,r):o,s=n.length-1,l;s>=0;s--)(l=n[s])&&(t=(i?l(o,r,t):l(t))||t);return i&&t&&d(o,r,t),t};import{css as p,html as v,LitElement as h,nothing as f}from"lit";import{property as c}from"lit/decorators.js";import{customElement as y}from"../internal/define.js";import{reflectHostState as u}from"../internal/part.js";import{hiddenHostStyles as g}from"../internal/styles.js";var e=class extends h{constructor(){super(...arguments);this.orientation="horizontal";this.decorative=!1}updated(){u(this,{"data-orientation":this.orientation})}render(){let r=this.orientation==="vertical";return v`<div
+      part="separator"
+      data-orientation=${this.orientation}
+      role=${this.decorative?"none":"separator"}
+      aria-orientation=${!this.decorative&&r?"vertical":f}
+    ></div>`}};e.styles=[g,p`
+      :host {
+        display: block;
+      }
+    `],a([c({type:String,reflect:!0})],e.prototype,"orientation",2),a([c({type:Boolean,reflect:!0})],e.prototype,"decorative",2),e=a([y("skdx-separator","separator","root")],e);export{e as SkdxSeparator};

package/dist/separator/index.cjs

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

package/dist/separator/index.d.cts

@@ -0,0 +1 @@
+export { SkdxSeparator } from './Separator.cjs';

package/dist/separator/index.d.ts

@@ -0,0 +1 @@
+export { SkdxSeparator } from './Separator.js';

package/dist/separator/index.js

@@ -0,0 +1 @@
+import{SkdxSeparator as a}from"./Separator.js";export{a as SkdxSeparator};

package/dist/skeleton/Skeleton.cjs

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

package/dist/skeleton/Skeleton.d.cts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-skeleton>` — the Web Components implementation of the shared
+ * Skeleton contract (see `@skdx/shared`'s `skeletonContract`). A loading
+ * placeholder block, hidden from assistive tech (`aria-hidden="true"`) so
+ * screen readers don't announce placeholder content as if it were real.
+ * Shape/size and shimmer animation are brand-layer concerns applied via
+ * `skdx-skeleton::part(skeleton)`.
+ *
+ * @example
+ * ```html
+ * <skdx-skeleton style="width: 200px; height: 20px"></skdx-skeleton>
+ * ```
+ *
+ * @csspart skeleton - The placeholder block element inside the shadow root.
+ */
+export declare class SkdxSkeleton extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-skeleton': SkdxSkeleton;
+    }
+}

package/dist/skeleton/Skeleton.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-skeleton>` — the Web Components implementation of the shared
+ * Skeleton contract (see `@skdx/shared`'s `skeletonContract`). A loading
+ * placeholder block, hidden from assistive tech (`aria-hidden="true"`) so
+ * screen readers don't announce placeholder content as if it were real.
+ * Shape/size and shimmer animation are brand-layer concerns applied via
+ * `skdx-skeleton::part(skeleton)`.
+ *
+ * @example
+ * ```html
+ * <skdx-skeleton style="width: 200px; height: 20px"></skdx-skeleton>
+ * ```
+ *
+ * @csspart skeleton - The placeholder block element inside the shadow root.
+ */
+export declare class SkdxSkeleton extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-skeleton': SkdxSkeleton;
+    }
+}

package/dist/skeleton/Skeleton.js

@@ -0,0 +1,9 @@
+var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var a=(i,r,o,s)=>{for(var e=s>1?void 0:s?m(r,o):r,d=i.length-1,l;d>=0;d--)(l=i[d])&&(e=(s?l(r,o,e):l(e))||e);return s&&e&&n(r,o,e),e};import{css as c,html as h,LitElement as p}from"lit";import{customElement as v}from"../internal/define.js";import{hiddenHostStyles as f}from"../internal/styles.js";var t=class extends p{render(){return h`<div part="skeleton" aria-hidden="true" data-skdx-skeleton></div>`}};t.styles=[f,c`
+      :host {
+        display: inline-block;
+      }
+      div {
+        width: 100%;
+        height: 100%;
+      }
+    `],t=a([v("skdx-skeleton","skeleton","root")],t);export{t as SkdxSkeleton};

package/dist/skeleton/index.cjs

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

package/dist/skeleton/index.d.cts

@@ -0,0 +1 @@
+export { SkdxSkeleton } from './Skeleton.cjs';

package/dist/skeleton/index.d.ts

@@ -0,0 +1 @@
+export { SkdxSkeleton } from './Skeleton.js';

package/dist/skeleton/index.js

@@ -0,0 +1 @@
+import{SkdxSkeleton as k}from"./Skeleton.js";export{k as SkdxSkeleton};

package/dist/skip-link/SkipLink.cjs

@@ -0,0 +1,9 @@
+"use strict";var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var v=o=>{throw TypeError(o)};var T=(o,e)=>{for(var t in e)l(o,t,{get:e[t],enumerable:!0})},A=(o,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of I(e))!x.call(o,r)&&r!==t&&l(o,r,{get:()=>e[r],enumerable:!(s=h(e,r))||s.enumerable});return o};var R=o=>A(l({},"__esModule",{value:!0}),o),n=(o,e,t,s)=>{for(var r=s>1?void 0:s?h(e,t):e,p=o.length-1,f;p>=0;p--)(f=o[p])&&(r=(s?f(e,t,r):f(r))||r);return s&&r&&l(e,t,r),r};var $=(o,e,t)=>e.has(o)||v("Cannot "+t);var m=(o,e,t)=>e.has(o)?v("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(o):e.set(o,t);var b=(o,e,t)=>($(o,e,"access private method"),t);var B={};T(B,{SkdxSkipLink:()=>i});module.exports=R(B);var c=require("lit"),u=require("lit/decorators.js"),E=require("../internal/define.cjs"),a=require("../internal/styles.cjs");var g=[["position","absolute"],["width","1px"],["height","1px"],["overflow","hidden"],["clip","rect(0, 0, 0, 0)"],["white-space","nowrap"]],y=[["position","absolute"],["top","0"],["left","0"],["z-index","999"]],d,w,i=class extends c.LitElement{constructor(){super(...arguments);m(this,d);this.targetId="";this.visible=!1}willUpdate(){b(this,d,w).call(this)}focus(t){this.shadowRoot?.querySelector("a")?.focus(t)}focusTarget(){let t=document.getElementById(this.targetId);t&&(t.hasAttribute("tabindex")||(t.setAttribute("tabindex","-1"),t.addEventListener("blur",()=>t.removeAttribute("tabindex"),{once:!0})),t.focus())}render(){return c.html`<a
+      part="link"
+      href="#${this.targetId}"
+      data-state=${this.visible?"visible":"hidden"}
+      @click=${()=>this.focusTarget()}
+      @focus=${()=>{this.visible=!0}}
+      @blur=${()=>{this.visible=!1}}
+      ><slot></slot
+    ></a>`}};d=new WeakSet,w=function(){let t=this.style;for(let[s]of[...g,...y])t.removeProperty(s);for(let[s,r]of this.visible?y:g)t.setProperty(s,r)},i.shadowRootOptions=a.delegatesFocusShadowRootOptions,i.styles=[a.hiddenHostStyles,a.controlBoxOnHost],n([(0,u.property)({type:String,attribute:"target-id",reflect:!0})],i.prototype,"targetId",2),n([(0,u.state)()],i.prototype,"visible",2),i=n([(0,E.customElement)("skdx-skip-link","skip-link","root")],i);0&&(module.exports={SkdxSkipLink});

package/dist/skip-link/SkipLink.d.cts

@@ -0,0 +1,95 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-skip-link>` — the Web Components implementation of the shared SkipLink
+ * contract (see `@skdx/shared`'s `skipLinkContract`). The WCAG 2.4.1
+ * bypass-block link: place it as the first focusable element on the page so a
+ * keyboard or screen-reader user can Tab once and jump straight past repeated
+ * navigation.
+ *
+ * It is clipped out of sight until focused and revealed while focused
+ * (`data-state="hidden" | "visible"` on the `link` part), and on activation it
+ * programmatically focuses `target-id` — see `#focusTarget` for why that
+ * matters. The host carries the box (it is `position: absolute` in both states,
+ * so revealing the link never reflows the page); see `static styles` for why it
+ * is not `display: contents`.
+ *
+ * @example
+ * ```html
+ * <skdx-skip-link target-id="main-content">Skip to main content</skdx-skip-link>
+ * <nav>…</nav>
+ * <main id="main-content">…</main>
+ * ```
+ *
+ * @csspart link - The anchor itself, carrying the href and the data-state hook.
+ */
+export declare class SkdxSkipLink extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    /**
+     * The box lives on the host, and as an *inline* style.
+     *
+     * Two constraints, and only this placement satisfies both.
+     *
+     * It must be on the host, because the skin paints `.skdx-skip-link` there —
+     * position and clip at rest, and on focus the padding, fill, radius and shadow
+     * (`skins/src/components/skip-link.css:11-46`). This is the one root in the
+     * package whose skin rule sets no `display` of its own, so unlike
+     * `.skdx-command` and `.skdx-timeline` the outer tree never overrides a boxless
+     * host. Under `display: contents` every non-inherited declaration was dropped
+     * and the revealed link rendered as bare primary-coloured text on whatever sat
+     * at page top-left: measured `[0,0]` against React's `[1,1]` in
+     * `parity.spec.ts`.
+     *
+     * It must be inline, because a `:host` rule reaches this element only through
+     * Lit's adopted stylesheet — and an adopted stylesheet is exactly what does
+     * not always apply. Measured, not assumed: under happy-dom
+     * `getComputedStyle(host).position` reads `static` and `.width` reads `auto`
+     * with the `:host` rules in place, so a CSS-only hiding is invisible to every
+     * unit test in this package and `assertSkipLinkContract` could not see it at
+     * all. An earlier revision of this file moved the hiding into `:host` and
+     * recorded losing that robustness as a deliberate trade; it was not a good
+     * one, and three tests said so.
+     *
+     * So: the same two style objects React applies to its `<a>`
+     * (`react/src/skip-link/SkipLink.tsx:12-25`), applied here to the host, which
+     * is this framework's classed root. Same properties, same values, same
+     * cascade weight — a consumer's own rule still loses to both, identically.
+     * The skin's padding/fill/radius/shadow are untouched by them and still paint.
+     */
+    static styles: import("lit").CSSResult[];
+    /** The id of the element to jump to, usually the page's main landmark. */
+    targetId: string;
+    /** Whether the link currently holds focus, and is therefore on screen. */
+    private visible;
+    protected willUpdate(): void;
+    /**
+     * Reaches through to the `<a>`, which is where focus — and therefore the
+     * reveal — actually lives.
+     *
+     * In the light-DOM frameworks the classed element *is* the anchor, so
+     * `skipLinkEl.focus()` brings it on screen. Here the class sits on a host
+     * that takes no focus of its own, so the same call did nothing and the
+     * reveal was unreachable programmatically —
+     * `delegatesFocus` alone does not cover it in every engine. Same pattern as
+     * `<skdx-combobox-input>` and the other host-wraps-a-control parts.
+     */
+    focus(options?: FocusOptions): void;
+    /**
+     * Moves focus to the target, making it focusable first if it isn't already.
+     *
+     * Without this, a bare `<a href="#main">` only changes the URL hash:
+     * `<main>` is not focusable, so in several browser + screen-reader
+     * combinations focus stays on the link and the next Tab lands back in the
+     * header — the bypass silently fails. The `tabindex` is only added when the
+     * target has none of its own (never clobber an author's value) and is
+     * removed again on the target's next blur, so the DOM is left exactly as it
+     * was found.
+     */
+    private focusTarget;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-skip-link': SkdxSkipLink;
+    }
+}

package/dist/skip-link/SkipLink.d.ts

@@ -0,0 +1,95 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-skip-link>` — the Web Components implementation of the shared SkipLink
+ * contract (see `@skdx/shared`'s `skipLinkContract`). The WCAG 2.4.1
+ * bypass-block link: place it as the first focusable element on the page so a
+ * keyboard or screen-reader user can Tab once and jump straight past repeated
+ * navigation.
+ *
+ * It is clipped out of sight until focused and revealed while focused
+ * (`data-state="hidden" | "visible"` on the `link` part), and on activation it
+ * programmatically focuses `target-id` — see `#focusTarget` for why that
+ * matters. The host carries the box (it is `position: absolute` in both states,
+ * so revealing the link never reflows the page); see `static styles` for why it
+ * is not `display: contents`.
+ *
+ * @example
+ * ```html
+ * <skdx-skip-link target-id="main-content">Skip to main content</skdx-skip-link>
+ * <nav>…</nav>
+ * <main id="main-content">…</main>
+ * ```
+ *
+ * @csspart link - The anchor itself, carrying the href and the data-state hook.
+ */
+export declare class SkdxSkipLink extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    /**
+     * The box lives on the host, and as an *inline* style.
+     *
+     * Two constraints, and only this placement satisfies both.
+     *
+     * It must be on the host, because the skin paints `.skdx-skip-link` there —
+     * position and clip at rest, and on focus the padding, fill, radius and shadow
+     * (`skins/src/components/skip-link.css:11-46`). This is the one root in the
+     * package whose skin rule sets no `display` of its own, so unlike
+     * `.skdx-command` and `.skdx-timeline` the outer tree never overrides a boxless
+     * host. Under `display: contents` every non-inherited declaration was dropped
+     * and the revealed link rendered as bare primary-coloured text on whatever sat
+     * at page top-left: measured `[0,0]` against React's `[1,1]` in
+     * `parity.spec.ts`.
+     *
+     * It must be inline, because a `:host` rule reaches this element only through
+     * Lit's adopted stylesheet — and an adopted stylesheet is exactly what does
+     * not always apply. Measured, not assumed: under happy-dom
+     * `getComputedStyle(host).position` reads `static` and `.width` reads `auto`
+     * with the `:host` rules in place, so a CSS-only hiding is invisible to every
+     * unit test in this package and `assertSkipLinkContract` could not see it at
+     * all. An earlier revision of this file moved the hiding into `:host` and
+     * recorded losing that robustness as a deliberate trade; it was not a good
+     * one, and three tests said so.
+     *
+     * So: the same two style objects React applies to its `<a>`
+     * (`react/src/skip-link/SkipLink.tsx:12-25`), applied here to the host, which
+     * is this framework's classed root. Same properties, same values, same
+     * cascade weight — a consumer's own rule still loses to both, identically.
+     * The skin's padding/fill/radius/shadow are untouched by them and still paint.
+     */
+    static styles: import("lit").CSSResult[];
+    /** The id of the element to jump to, usually the page's main landmark. */
+    targetId: string;
+    /** Whether the link currently holds focus, and is therefore on screen. */
+    private visible;
+    protected willUpdate(): void;
+    /**
+     * Reaches through to the `<a>`, which is where focus — and therefore the
+     * reveal — actually lives.
+     *
+     * In the light-DOM frameworks the classed element *is* the anchor, so
+     * `skipLinkEl.focus()` brings it on screen. Here the class sits on a host
+     * that takes no focus of its own, so the same call did nothing and the
+     * reveal was unreachable programmatically —
+     * `delegatesFocus` alone does not cover it in every engine. Same pattern as
+     * `<skdx-combobox-input>` and the other host-wraps-a-control parts.
+     */
+    focus(options?: FocusOptions): void;
+    /**
+     * Moves focus to the target, making it focusable first if it isn't already.
+     *
+     * Without this, a bare `<a href="#main">` only changes the URL hash:
+     * `<main>` is not focusable, so in several browser + screen-reader
+     * combinations focus stays on the link and the next Tab lands back in the
+     * header — the bypass silently fails. The `tabindex` is only added when the
+     * target has none of its own (never clobber an author's value) and is
+     * removed again on the target's next blur, so the DOM is left exactly as it
+     * was found.
+     */
+    private focusTarget;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-skip-link': SkdxSkipLink;
+    }
+}

package/dist/skip-link/SkipLink.js

@@ -0,0 +1,9 @@
+var m=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var c=o=>{throw TypeError(o)};var a=(o,e,t,s)=>{for(var r=s>1?void 0:s?b(e,t):e,n=o.length-1,d;n>=0;n--)(d=o[n])&&(r=(s?d(e,t,r):d(r))||r);return s&&r&&m(e,t,r),r};var g=(o,e,t)=>e.has(o)||c("Cannot "+t);var u=(o,e,t)=>e.has(o)?c("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(o):e.set(o,t);var p=(o,e,t)=>(g(o,e,"access private method"),t);import{html as y,LitElement as E}from"lit";import{property as w,state as I}from"lit/decorators.js";import{customElement as x}from"../internal/define.js";import{controlBoxOnHost as T,delegatesFocusShadowRootOptions as A,hiddenHostStyles as R}from"../internal/styles.js";var f=[["position","absolute"],["width","1px"],["height","1px"],["overflow","hidden"],["clip","rect(0, 0, 0, 0)"],["white-space","nowrap"]],h=[["position","absolute"],["top","0"],["left","0"],["z-index","999"]],l,v,i=class extends E{constructor(){super(...arguments);u(this,l);this.targetId="";this.visible=!1}willUpdate(){p(this,l,v).call(this)}focus(t){this.shadowRoot?.querySelector("a")?.focus(t)}focusTarget(){let t=document.getElementById(this.targetId);t&&(t.hasAttribute("tabindex")||(t.setAttribute("tabindex","-1"),t.addEventListener("blur",()=>t.removeAttribute("tabindex"),{once:!0})),t.focus())}render(){return y`<a
+      part="link"
+      href="#${this.targetId}"
+      data-state=${this.visible?"visible":"hidden"}
+      @click=${()=>this.focusTarget()}
+      @focus=${()=>{this.visible=!0}}
+      @blur=${()=>{this.visible=!1}}
+      ><slot></slot
+    ></a>`}};l=new WeakSet,v=function(){let t=this.style;for(let[s]of[...f,...h])t.removeProperty(s);for(let[s,r]of this.visible?h:f)t.setProperty(s,r)},i.shadowRootOptions=A,i.styles=[R,T],a([w({type:String,attribute:"target-id",reflect:!0})],i.prototype,"targetId",2),a([I()],i.prototype,"visible",2),i=a([x("skdx-skip-link","skip-link","root")],i);export{i as SkdxSkipLink};

package/dist/skip-link/index.cjs

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

package/dist/skip-link/index.d.cts

@@ -0,0 +1 @@
+export { SkdxSkipLink } from './SkipLink.cjs';

package/dist/skip-link/index.d.ts

@@ -0,0 +1 @@
+export { SkdxSkipLink } from './SkipLink.js';

package/dist/skip-link/index.js

@@ -0,0 +1 @@
+import{SkdxSkipLink as o}from"./SkipLink.js";export{o as SkdxSkipLink};