@skdx/web-components 0.26.0

package/dist/affix/Affix.d.cts

@@ -0,0 +1,123 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-affix>` — the Web Components implementation of the shared Affix
+ * contract (see `@skdx/shared`'s `affixContract`). Reports when the element
+ * has scrolled past a given offset, so it can be pinned.
+ *
+ * It inserts a zero-height, `aria-hidden` sentinel (`data-skdx-affix-sentinel`)
+ * into the light DOM immediately before itself — a sibling, deliberately, not a
+ * shadow-DOM child: the sentinel has to stay where the element *would* be, and
+ * a sentinel inside the host would travel with it the moment consumer CSS took
+ * the host out of flow, oscillating forever. That sentinel is watched by a
+ * single `IntersectionObserver` whose root is shrunk by `offset-top` /
+ * `offset-bottom` via `rootMargin`, which turns "would scroll past 64px" into a
+ * plain intersection test. Never a scroll listener: nothing runs per frame and
+ * nothing reads layout on the scroll path.
+ *
+ * Headless, so it pins nothing by itself: it flips `data-state` between
+ * `"affixed"` and `"static"`, fires `change`, and publishes the element's
+ * measured in-flow height as the `--skdx-affix-height` custom property (on both
+ * the host and the sentinel) so the consumer can hold the vacated space open.
+ * The positioning is one CSS rule you write:
+ *
+ * ```css
+ * skdx-affix[data-state='affixed'] {
+ *   position: fixed;
+ *   top: 0;
+ * }
+ * [data-skdx-affix-sentinel] {
+ *   height: var(--skdx-affix-height, 0px);
+ * }
+ * ```
+ *
+ * **Reach for `position: sticky` first.** Plain sticky needs no JavaScript and
+ * no component. Affix earns its place when you need to *know* about the
+ * transition — a shadow that appears only once a header sticks, an analytics
+ * ping, a title that swaps in — which CSS alone cannot tell you.
+ *
+ * Nothing is announced: the affixed state is presentational, the same content
+ * stays in the same reading order, and only where it is painted changes.
+ *
+ * @example
+ * ```html
+ * <skdx-affix offset-top="0">
+ *   <h2>Section title</h2>
+ * </skdx-affix>
+ * ```
+ *
+ * @fires change - Fires with the new affixed state (boolean) whenever it flips, and only then — it is deduped, so a scroll that does not cross the threshold emits nothing.
+ *
+ * @csspart affix - The wrapper inside the shadow root that slots the content.
+ */
+export declare class SkdxAffix extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Distance from the top edge of the scroll root at which the element counts
+     * as affixed. `0` flips the moment the element would scroll off the top;
+     * `64` flips 64px earlier, which is what you want under a fixed site header.
+     *
+     * Named `topOffset` rather than `offsetTop` only because `HTMLElement`
+     * already owns `offsetTop`; the attribute is `offset-top`, matching the
+     * `offsetTop` prop every other framework package exposes.
+     * @default undefined — the top edge is never pinned. With `offset-bottom`
+     * also unset, no `IntersectionObserver` is created at all, so set at least
+     * one of them.
+     */
+    topOffset?: number;
+    /**
+     * Distance from the bottom edge of the scroll root at which the element
+     * counts as affixed — the mirror of `offset-top`, for a bar pinned to the
+     * bottom until its natural position scrolls into view. Named `bottomOffset`
+     * to stay symmetric with `topOffset`.
+     * @default undefined — the bottom edge is never pinned.
+     */
+    bottomOffset?: number;
+    /**
+     * The scrolling ancestor the offsets are measured against, used as the
+     * `IntersectionObserver` root — either the element itself, or a selector
+     * resolved once, when the observer is built (set the `target` attribute to
+     * use the selector form from markup). The observer is torn down and rebuilt
+     * when this changes, and disconnected on removal.
+     * @default null — measured against the viewport.
+     */
+    target: Element | string | null;
+    /**
+     * Stops observing entirely: no `IntersectionObserver` is created and
+     * `data-state` stays `"static"`. Use it to switch the behaviour off at a
+     * breakpoint without removing the element.
+     * @default false
+     */
+    disabled: boolean;
+    /** The light-DOM sibling standing in for where this element sits in flow. */
+    private readonly sentinel;
+    private observer;
+    /** What the live observer was built from, so an unrelated update does not rebuild it. */
+    private observedRoot;
+    private observedMargin;
+    private affixed;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(): void;
+    private createSentinel;
+    /** Idempotent: `insertBefore` moves the sentinel, so a re-parented element takes it along. */
+    private mountSentinel;
+    private syncState;
+    private publishHeight;
+    /** Resolves `target` to the observer root. A selector is resolved here, once per observer. */
+    private resolveTarget;
+    private detachObserver;
+    private syncObserver;
+    private readonly handleIntersect;
+    /**
+     * The observer fires on every threshold crossing (and once on observe), and
+     * only the flips matter — so an unchanged state emits nothing.
+     */
+    private setAffixed;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-affix': SkdxAffix;
+    }
+}

package/dist/affix/Affix.d.ts

@@ -0,0 +1,123 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-affix>` — the Web Components implementation of the shared Affix
+ * contract (see `@skdx/shared`'s `affixContract`). Reports when the element
+ * has scrolled past a given offset, so it can be pinned.
+ *
+ * It inserts a zero-height, `aria-hidden` sentinel (`data-skdx-affix-sentinel`)
+ * into the light DOM immediately before itself — a sibling, deliberately, not a
+ * shadow-DOM child: the sentinel has to stay where the element *would* be, and
+ * a sentinel inside the host would travel with it the moment consumer CSS took
+ * the host out of flow, oscillating forever. That sentinel is watched by a
+ * single `IntersectionObserver` whose root is shrunk by `offset-top` /
+ * `offset-bottom` via `rootMargin`, which turns "would scroll past 64px" into a
+ * plain intersection test. Never a scroll listener: nothing runs per frame and
+ * nothing reads layout on the scroll path.
+ *
+ * Headless, so it pins nothing by itself: it flips `data-state` between
+ * `"affixed"` and `"static"`, fires `change`, and publishes the element's
+ * measured in-flow height as the `--skdx-affix-height` custom property (on both
+ * the host and the sentinel) so the consumer can hold the vacated space open.
+ * The positioning is one CSS rule you write:
+ *
+ * ```css
+ * skdx-affix[data-state='affixed'] {
+ *   position: fixed;
+ *   top: 0;
+ * }
+ * [data-skdx-affix-sentinel] {
+ *   height: var(--skdx-affix-height, 0px);
+ * }
+ * ```
+ *
+ * **Reach for `position: sticky` first.** Plain sticky needs no JavaScript and
+ * no component. Affix earns its place when you need to *know* about the
+ * transition — a shadow that appears only once a header sticks, an analytics
+ * ping, a title that swaps in — which CSS alone cannot tell you.
+ *
+ * Nothing is announced: the affixed state is presentational, the same content
+ * stays in the same reading order, and only where it is painted changes.
+ *
+ * @example
+ * ```html
+ * <skdx-affix offset-top="0">
+ *   <h2>Section title</h2>
+ * </skdx-affix>
+ * ```
+ *
+ * @fires change - Fires with the new affixed state (boolean) whenever it flips, and only then — it is deduped, so a scroll that does not cross the threshold emits nothing.
+ *
+ * @csspart affix - The wrapper inside the shadow root that slots the content.
+ */
+export declare class SkdxAffix extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Distance from the top edge of the scroll root at which the element counts
+     * as affixed. `0` flips the moment the element would scroll off the top;
+     * `64` flips 64px earlier, which is what you want under a fixed site header.
+     *
+     * Named `topOffset` rather than `offsetTop` only because `HTMLElement`
+     * already owns `offsetTop`; the attribute is `offset-top`, matching the
+     * `offsetTop` prop every other framework package exposes.
+     * @default undefined — the top edge is never pinned. With `offset-bottom`
+     * also unset, no `IntersectionObserver` is created at all, so set at least
+     * one of them.
+     */
+    topOffset?: number;
+    /**
+     * Distance from the bottom edge of the scroll root at which the element
+     * counts as affixed — the mirror of `offset-top`, for a bar pinned to the
+     * bottom until its natural position scrolls into view. Named `bottomOffset`
+     * to stay symmetric with `topOffset`.
+     * @default undefined — the bottom edge is never pinned.
+     */
+    bottomOffset?: number;
+    /**
+     * The scrolling ancestor the offsets are measured against, used as the
+     * `IntersectionObserver` root — either the element itself, or a selector
+     * resolved once, when the observer is built (set the `target` attribute to
+     * use the selector form from markup). The observer is torn down and rebuilt
+     * when this changes, and disconnected on removal.
+     * @default null — measured against the viewport.
+     */
+    target: Element | string | null;
+    /**
+     * Stops observing entirely: no `IntersectionObserver` is created and
+     * `data-state` stays `"static"`. Use it to switch the behaviour off at a
+     * breakpoint without removing the element.
+     * @default false
+     */
+    disabled: boolean;
+    /** The light-DOM sibling standing in for where this element sits in flow. */
+    private readonly sentinel;
+    private observer;
+    /** What the live observer was built from, so an unrelated update does not rebuild it. */
+    private observedRoot;
+    private observedMargin;
+    private affixed;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(): void;
+    private createSentinel;
+    /** Idempotent: `insertBefore` moves the sentinel, so a re-parented element takes it along. */
+    private mountSentinel;
+    private syncState;
+    private publishHeight;
+    /** Resolves `target` to the observer root. A selector is resolved here, once per observer. */
+    private resolveTarget;
+    private detachObserver;
+    private syncObserver;
+    private readonly handleIntersect;
+    /**
+     * The observer fires on every threshold crossing (and once on observe), and
+     * only the flips matter — so an unchanged state emits nothing.
+     */
+    private setAffixed;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-affix': SkdxAffix;
+    }
+}

package/dist/affix/Affix.js

@@ -0,0 +1,5 @@
+var h=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var i=(a,n,e,t)=>{for(var s=t>1?void 0:t?v(n,e):n,l=a.length-1,d;l>=0;l--)(d=a[l])&&(s=(t?d(n,e,s):d(s))||s);return t&&s&&h(n,e,s),s};import{css as c,html as b,LitElement as p}from"lit";import{property as o}from"lit/decorators.js";import{customElement as u}from"../internal/define.js";import{reflectHostState as f}from"../internal/part.js";var r=class extends p{constructor(){super(...arguments);this.target=null;this.disabled=!1;this.sentinel=this.createSentinel();this.observer=null;this.observedRoot=null;this.observedMargin=null;this.affixed=!1;this.handleIntersect=e=>{let t=e[e.length-1];t&&this.setAffixed(!t.isIntersecting)}}connectedCallback(){super.connectedCallback(),this.mountSentinel(),this.syncState(),this.syncObserver()}disconnectedCallback(){this.detachObserver(),this.sentinel.remove(),super.disconnectedCallback()}firstUpdated(){this.publishHeight()}updated(){this.syncState(),this.syncObserver()}createSentinel(){let e=document.createElement("div");return e.setAttribute("data-skdx-affix-sentinel",""),e.setAttribute("aria-hidden","true"),e}mountSentinel(){this.parentNode?.insertBefore(this.sentinel,this)}syncState(){f(this,{"data-state":this.affixed?"affixed":"static","data-disabled":this.disabled?"":null})}publishHeight(){let e=`${this.offsetHeight}px`;this.style.setProperty("--skdx-affix-height",e),this.sentinel.style.setProperty("--skdx-affix-height",e)}resolveTarget(){let e=this.target;return typeof e!="string"?e:e?this.getRootNode().querySelector(e):null}detachObserver(){this.observer?.disconnect(),this.observer=null,this.observedRoot=null,this.observedMargin=null}syncObserver(){let e=!this.disabled&&(this.topOffset!=null||this.bottomOffset!=null),t=e?this.resolveTarget():null,s=`${-(this.topOffset??0)}px 0px ${-(this.bottomOffset??0)}px 0px`;this.observer&&this.observedRoot===t&&this.observedMargin===s||(this.detachObserver(),!(!e||typeof IntersectionObserver>"u")&&(this.observedRoot=t,this.observedMargin=s,this.observer=new IntersectionObserver(this.handleIntersect,{root:t,rootMargin:s,threshold:0}),this.observer.observe(this.sentinel)))}setAffixed(e){this.affixed!==e&&(this.affixed=e,this.publishHeight(),this.syncState(),this.dispatchEvent(new CustomEvent("change",{detail:e,bubbles:!0,composed:!0})))}render(){return b`<div part="affix"><slot></slot></div>`}};r.styles=c`
+    :host {
+      display: block;
+    }
+  `,i([o({type:Number,attribute:"offset-top"})],r.prototype,"topOffset",2),i([o({type:Number,attribute:"offset-bottom"})],r.prototype,"bottomOffset",2),i([o({attribute:"target"})],r.prototype,"target",2),i([o({type:Boolean,reflect:!0})],r.prototype,"disabled",2),r=i([u("skdx-affix","affix","root")],r);export{r as SkdxAffix};

package/dist/affix/index.cjs

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

package/dist/affix/index.d.cts

@@ -0,0 +1 @@
+export { SkdxAffix } from './Affix.cjs';

package/dist/affix/index.d.ts

@@ -0,0 +1 @@
+export { SkdxAffix } from './Affix.js';

package/dist/affix/index.js

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

package/dist/alert/Alert.cjs

@@ -0,0 +1,9 @@
+"use strict";var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var v=(r,e)=>{for(var t in e)l(r,t,{get:e[t],enumerable:!0})},g=(r,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of y(e))!f.call(r,s)&&s!==t&&l(r,s,{get:()=>e[s],enumerable:!(i=u(e,s))||i.enumerable});return r};var k=r=>g(l({},"__esModule",{value:!0}),r),n=(r,e,t,i)=>{for(var s=i>1?void 0:i?u(e,t):e,d=r.length-1,h;d>=0;d--)(h=r[d])&&(s=(i?h(e,t,s):h(s))||s);return i&&s&&l(e,t,s),s};var C={};v(C,{SkdxAlert:()=>o});module.exports=k(C);var a=require("lit"),p=require("lit/decorators.js"),b=require("../internal/define.cjs"),c=require("../internal/ids.cjs"),m=require("../internal/positioning.cjs");var o=class extends a.LitElement{constructor(){super(...arguments);this.alertRole="status";this.open=!0;this.handleSlotChange=()=>this.syncHostAttributes()}connectedCallback(){super.connectedCallback(),this.syncHostAttributes(),this.hidden=!this.open}updated(t){t.has("alertRole")&&this.syncHostAttributes(),t.has("open")&&(this.hidden=!this.open)}setOpen(t){this.open!==t&&(this.open=t,this.dispatchEvent(new CustomEvent("open-change",{detail:t,bubbles:!0,composed:!0})))}syncHostAttributes(){this.setAttribute("aria-live",this.alertRole==="alert"?"assertive":"polite");let t=this.querySelector("skdx-alert-title"),i=this.querySelector("skdx-alert-description");t&&this.setAttribute("aria-labelledby",(0,c.ensureId)(t,"skdx-alert","title")),i&&this.setAttribute("aria-describedby",(0,c.ensureId)(i,"skdx-alert","description"))}render(){return a.html`<slot @slotchange=${this.handleSlotChange}></slot>`}};o.styles=a.css`
+    :host {
+      display: block;
+    }
+    /* Without this, :host's display:block outranks the UA's [hidden] rule. */
+    :host([hidden]) {
+      display: none;
+    }
+  `,n([(0,p.property)({attribute:"role",type:String,reflect:!0})],o.prototype,"alertRole",2),n([(0,p.property)({converter:m.optOutBoolean,reflect:!0})],o.prototype,"open",2),o=n([(0,b.customElement)("skdx-alert","alert","root")],o);0&&(module.exports={SkdxAlert});

package/dist/alert/Alert.d.cts

@@ -0,0 +1,70 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-alert>` — the Web Components implementation of the shared Alert
+ * contract (see `@skdx/shared`'s `alertContract`). Sets `role`/`aria-live`
+ * and its `aria-labelledby`/`aria-describedby` directly on the host element
+ * rather than inside shadow DOM, because an IDREF can't cross a shadow
+ * boundary: the host and its slotted `<skdx-alert-title>` /
+ * `<skdx-alert-description>` children share the light-DOM tree scope, so
+ * that's the only place the association can live.
+ *
+ * The property is named `alertRole` (mapped to the `role` attribute) rather
+ * than `role`, since `role` is already a native `Element` accessor
+ * (`ARIAMixin`) that a Lit reactive property of a narrower type cannot
+ * safely override.
+ *
+ * `open` is a plain reflected property defaulting to `true` — like a native
+ * `<input>`'s `checked`, there is no separate controlled/uncontrolled mode:
+ * the property is the single source of truth, and a consumer that wants
+ * "controlled" behavior listens for `open-change` and writes the property
+ * back. Dismissing hides the host with the native `hidden` attribute rather
+ * than removing it, since a custom element cannot unrender itself the way
+ * the other four frameworks' roots can — `hidden` takes the whole subtree out
+ * of the accessibility tree just the same. Nothing here runs on a timer.
+ *
+ * @example
+ * ```html
+ * <skdx-alert role="alert">
+ *   <skdx-alert-icon>⚠️</skdx-alert-icon>
+ *   <skdx-alert-title>Something went wrong</skdx-alert-title>
+ *   <skdx-alert-description>Please try again.</skdx-alert-description>
+ *   <skdx-alert-action><button type="button">Retry</button></skdx-alert-action>
+ *   <skdx-alert-close>✕</skdx-alert-close>
+ * </skdx-alert>
+ * ```
+ *
+ * @fires open-change - Fired with the new open state whenever the alert is dismissed or reopened.
+ */
+export declare class SkdxAlert extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * `"status"` (default) is a polite live region for informational banners.
+     * Use `"alert"` for assertive, time-critical messages.
+     * @default 'status'
+     */
+    alertRole: 'status' | 'alert';
+    /**
+     * Visibility. Set to `false` (or activate `<skdx-alert-close>`) to dismiss;
+     * listen for `open-change` to observe or override changes.
+     * @default true
+     */
+    open: boolean;
+    connectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /**
+     * Sets `open` and dispatches a bubbling, composed `open-change` event with
+     * the new value as `detail`. Setting the state it is already in is a no-op —
+     * nothing is dispatched, matching React's `useControllableState`
+     * (`packages/react/src/utils/useControllableState.ts:60`) and the contract
+     * stated at `carousel/Carousel.ts:247-251`.
+     */
+    setOpen(next: boolean): void;
+    private readonly handleSlotChange;
+    private syncHostAttributes;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-alert': SkdxAlert;
+    }
+}

package/dist/alert/Alert.d.ts

@@ -0,0 +1,70 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-alert>` — the Web Components implementation of the shared Alert
+ * contract (see `@skdx/shared`'s `alertContract`). Sets `role`/`aria-live`
+ * and its `aria-labelledby`/`aria-describedby` directly on the host element
+ * rather than inside shadow DOM, because an IDREF can't cross a shadow
+ * boundary: the host and its slotted `<skdx-alert-title>` /
+ * `<skdx-alert-description>` children share the light-DOM tree scope, so
+ * that's the only place the association can live.
+ *
+ * The property is named `alertRole` (mapped to the `role` attribute) rather
+ * than `role`, since `role` is already a native `Element` accessor
+ * (`ARIAMixin`) that a Lit reactive property of a narrower type cannot
+ * safely override.
+ *
+ * `open` is a plain reflected property defaulting to `true` — like a native
+ * `<input>`'s `checked`, there is no separate controlled/uncontrolled mode:
+ * the property is the single source of truth, and a consumer that wants
+ * "controlled" behavior listens for `open-change` and writes the property
+ * back. Dismissing hides the host with the native `hidden` attribute rather
+ * than removing it, since a custom element cannot unrender itself the way
+ * the other four frameworks' roots can — `hidden` takes the whole subtree out
+ * of the accessibility tree just the same. Nothing here runs on a timer.
+ *
+ * @example
+ * ```html
+ * <skdx-alert role="alert">
+ *   <skdx-alert-icon>⚠️</skdx-alert-icon>
+ *   <skdx-alert-title>Something went wrong</skdx-alert-title>
+ *   <skdx-alert-description>Please try again.</skdx-alert-description>
+ *   <skdx-alert-action><button type="button">Retry</button></skdx-alert-action>
+ *   <skdx-alert-close>✕</skdx-alert-close>
+ * </skdx-alert>
+ * ```
+ *
+ * @fires open-change - Fired with the new open state whenever the alert is dismissed or reopened.
+ */
+export declare class SkdxAlert extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * `"status"` (default) is a polite live region for informational banners.
+     * Use `"alert"` for assertive, time-critical messages.
+     * @default 'status'
+     */
+    alertRole: 'status' | 'alert';
+    /**
+     * Visibility. Set to `false` (or activate `<skdx-alert-close>`) to dismiss;
+     * listen for `open-change` to observe or override changes.
+     * @default true
+     */
+    open: boolean;
+    connectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /**
+     * Sets `open` and dispatches a bubbling, composed `open-change` event with
+     * the new value as `detail`. Setting the state it is already in is a no-op —
+     * nothing is dispatched, matching React's `useControllableState`
+     * (`packages/react/src/utils/useControllableState.ts:60`) and the contract
+     * stated at `carousel/Carousel.ts:247-251`.
+     */
+    setOpen(next: boolean): void;
+    private readonly handleSlotChange;
+    private syncHostAttributes;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-alert': SkdxAlert;
+    }
+}

package/dist/alert/Alert.js

@@ -0,0 +1,9 @@
+var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var o=(a,i,t,e)=>{for(var s=e>1?void 0:e?c(i,t):i,l=a.length-1,n;l>=0;l--)(n=a[l])&&(s=(e?n(i,t,s):n(s))||s);return e&&s&&p(i,t,s),s};import{css as u,html as b,LitElement as m}from"lit";import{property as d}from"lit/decorators.js";import{customElement as y}from"../internal/define.js";import{ensureId as h}from"../internal/ids.js";import{optOutBoolean as f}from"../internal/positioning.js";var r=class extends m{constructor(){super(...arguments);this.alertRole="status";this.open=!0;this.handleSlotChange=()=>this.syncHostAttributes()}connectedCallback(){super.connectedCallback(),this.syncHostAttributes(),this.hidden=!this.open}updated(t){t.has("alertRole")&&this.syncHostAttributes(),t.has("open")&&(this.hidden=!this.open)}setOpen(t){this.open!==t&&(this.open=t,this.dispatchEvent(new CustomEvent("open-change",{detail:t,bubbles:!0,composed:!0})))}syncHostAttributes(){this.setAttribute("aria-live",this.alertRole==="alert"?"assertive":"polite");let t=this.querySelector("skdx-alert-title"),e=this.querySelector("skdx-alert-description");t&&this.setAttribute("aria-labelledby",h(t,"skdx-alert","title")),e&&this.setAttribute("aria-describedby",h(e,"skdx-alert","description"))}render(){return b`<slot @slotchange=${this.handleSlotChange}></slot>`}};r.styles=u`
+    :host {
+      display: block;
+    }
+    /* Without this, :host's display:block outranks the UA's [hidden] rule. */
+    :host([hidden]) {
+      display: none;
+    }
+  `,o([d({attribute:"role",type:String,reflect:!0})],r.prototype,"alertRole",2),o([d({converter:f,reflect:!0})],r.prototype,"open",2),r=o([y("skdx-alert","alert","root")],r);export{r as SkdxAlert};

package/dist/alert/AlertAction.cjs

@@ -0,0 +1,5 @@
+"use strict";var i=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var E=(a,e)=>{for(var r in e)i(a,r,{get:e[r],enumerable:!0})},b=(a,e,r,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of v(e))!f.call(a,t)&&t!==r&&i(a,t,{get:()=>e[t],enumerable:!(s=n(e,t))||s.enumerable});return a};var g=a=>b(i({},"__esModule",{value:!0}),a),d=(a,e,r,s)=>{for(var t=s>1?void 0:s?n(e,r):e,m=a.length-1,c;m>=0;m--)(c=a[m])&&(t=(s?c(e,r,t):c(t))||t);return s&&t&&i(e,r,t),t};var h={};E(h,{SkdxAlertAction:()=>o});module.exports=g(h);var l=require("lit"),p=require("../internal/define.cjs");var o=class extends l.LitElement{render(){return l.html`<div part="action"><slot></slot></div>`}};o.styles=l.css`
+    :host {
+      display: block;
+    }
+  `,o=d([(0,p.customElement)("skdx-alert-action","alert","action")],o);0&&(module.exports={SkdxAlertAction});

package/dist/alert/AlertAction.d.cts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-alert-action>` — container for the alert's buttons and links
+ * ("Retry", "View details"). A plain `<div>` with no role and no behavior; it
+ * exists so the action row is an addressable part to style and compose
+ * against.
+ *
+ * @csspart action - The `<div>` element inside the shadow root.
+ */
+export declare class SkdxAlertAction extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-alert-action': SkdxAlertAction;
+    }
+}

package/dist/alert/AlertAction.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-alert-action>` — container for the alert's buttons and links
+ * ("Retry", "View details"). A plain `<div>` with no role and no behavior; it
+ * exists so the action row is an addressable part to style and compose
+ * against.
+ *
+ * @csspart action - The `<div>` element inside the shadow root.
+ */
+export declare class SkdxAlertAction extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-alert-action': SkdxAlertAction;
+    }
+}

package/dist/alert/AlertAction.js

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

package/dist/alert/AlertClose.cjs

@@ -0,0 +1,9 @@
+"use strict";var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var k=(l,t)=>{for(var r in t)n(l,r,{get:t[r],enumerable:!0})},v=(l,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of u(t))!f.call(l,e)&&e!==r&&n(l,e,{get:()=>t[e],enumerable:!(s=m(t,e))||s.enumerable});return l};var E=l=>v(n({},"__esModule",{value:!0}),l),p=(l,t,r,s)=>{for(var e=s>1?void 0:s?m(t,r):t,c=l.length-1,d;c>=0;c--)(d=l[c])&&(e=(s?d(t,r,e):d(e))||e);return s&&e&&n(t,r,e),e};var y={};k(y,{SkdxAlertClose:()=>o});module.exports=E(y);var a=require("lit"),h=require("lit/decorators.js"),b=require("../internal/define.cjs"),i=require("../internal/styles.cjs");var o=class extends a.LitElement{constructor(){super(...arguments);this.label="Dismiss";this.alertEl=null;this.handleClick=()=>this.alertEl?.setOpen(!1)}connectedCallback(){if(super.connectedCallback(),this.alertEl=this.closest("skdx-alert"),!this.alertEl)throw new Error("<skdx-alert-close> must be used inside <skdx-alert>.")}render(){return a.html`
+      <button part="close" type="button" aria-label=${this.label} @click=${this.handleClick}>
+        <slot></slot>
+      </button>
+    `}};o.shadowRootOptions=i.delegatesFocusShadowRootOptions,o.styles=[i.resetNativeControl,a.css`
+      :host {
+        display: inline-block;
+      }
+    `,i.controlBoxOnHost],p([(0,h.property)({type:String})],o.prototype,"label",2),o=p([(0,b.customElement)("skdx-alert-close","alert","close")],o);0&&(module.exports={SkdxAlertClose});

package/dist/alert/AlertClose.d.cts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-alert-close>` — button that dismisses the alert when clicked, by
+ * calling the parent `<skdx-alert>`'s `setOpen(false)` (which also fires
+ * `open-change`). Must be used inside `<skdx-alert>`.
+ *
+ * Carries a default accessible name of `"Dismiss"` so the common icon-only
+ * close button is never an unnamed button; set the `label` attribute to
+ * override it.
+ *
+ * @csspart close - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxAlertClose extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** Accessible name for the dismiss button. @default 'Dismiss' */
+    label: string;
+    private alertEl;
+    connectedCallback(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-alert-close': SkdxAlertClose;
+    }
+}

package/dist/alert/AlertClose.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-alert-close>` — button that dismisses the alert when clicked, by
+ * calling the parent `<skdx-alert>`'s `setOpen(false)` (which also fires
+ * `open-change`). Must be used inside `<skdx-alert>`.
+ *
+ * Carries a default accessible name of `"Dismiss"` so the common icon-only
+ * close button is never an unnamed button; set the `label` attribute to
+ * override it.
+ *
+ * @csspart close - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxAlertClose extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** Accessible name for the dismiss button. @default 'Dismiss' */
+    label: string;
+    private alertEl;
+    connectedCallback(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-alert-close': SkdxAlertClose;
+    }
+}

package/dist/alert/AlertClose.js

@@ -0,0 +1,9 @@
+var c=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var n=(o,l,s,r)=>{for(var t=r>1?void 0:r?d(l,s):l,a=o.length-1,i;a>=0;a--)(i=o[a])&&(t=(r?i(l,s,t):i(t))||t);return r&&t&&c(l,s,t),t};import{css as p,html as m,LitElement as h}from"lit";import{property as b}from"lit/decorators.js";import{customElement as u}from"../internal/define.js";import{controlBoxOnHost as f,delegatesFocusShadowRootOptions as k,resetNativeControl as v}from"../internal/styles.js";var e=class extends h{constructor(){super(...arguments);this.label="Dismiss";this.alertEl=null;this.handleClick=()=>this.alertEl?.setOpen(!1)}connectedCallback(){if(super.connectedCallback(),this.alertEl=this.closest("skdx-alert"),!this.alertEl)throw new Error("<skdx-alert-close> must be used inside <skdx-alert>.")}render(){return m`
+      <button part="close" type="button" aria-label=${this.label} @click=${this.handleClick}>
+        <slot></slot>
+      </button>
+    `}};e.shadowRootOptions=k,e.styles=[v,p`
+      :host {
+        display: inline-block;
+      }
+    `,f],n([b({type:String})],e.prototype,"label",2),e=n([u("skdx-alert-close","alert","close")],e);export{e as SkdxAlertClose};

package/dist/alert/AlertDescription.cjs

@@ -0,0 +1,5 @@
+"use strict";var i=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var E=(r,e)=>{for(var s in e)i(r,s,{get:e[s],enumerable:!0})},b=(r,e,s,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of v(e))!f.call(r,t)&&t!==s&&i(r,t,{get:()=>e[t],enumerable:!(o=c(e,t))||o.enumerable});return r};var g=r=>b(i({},"__esModule",{value:!0}),r),n=(r,e,s,o)=>{for(var t=o>1?void 0:o?c(e,s):e,d=r.length-1,m;d>=0;d--)(m=r[d])&&(t=(o?m(e,s,t):m(t))||t);return o&&t&&i(e,s,t),t};var h={};E(h,{SkdxAlertDescription:()=>a});module.exports=g(h);var l=require("lit"),p=require("../internal/define.cjs");var a=class extends l.LitElement{render(){return l.html`<div part="description"><slot></slot></div>`}};a.styles=l.css`
+    :host {
+      display: block;
+    }
+  `,a=n([(0,p.customElement)("skdx-alert-description","alert","description")],a);0&&(module.exports={SkdxAlertDescription});

package/dist/alert/AlertDescription.d.cts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-alert-description>` — renders a `<div>` in shadow DOM. The parent
+ * `<skdx-alert>` assigns this element's light-DOM `id` (if it doesn't already
+ * have one) and points its own `aria-describedby` at it.
+ *
+ * @csspart description - The `<div>` element inside the shadow root.
+ */
+export declare class SkdxAlertDescription extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-alert-description': SkdxAlertDescription;
+    }
+}

package/dist/alert/AlertDescription.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-alert-description>` — renders a `<div>` in shadow DOM. The parent
+ * `<skdx-alert>` assigns this element's light-DOM `id` (if it doesn't already
+ * have one) and points its own `aria-describedby` at it.
+ *
+ * @csspart description - The `<div>` element inside the shadow root.
+ */
+export declare class SkdxAlertDescription extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-alert-description': SkdxAlertDescription;
+    }
+}

package/dist/alert/AlertDescription.js

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

package/dist/alert/AlertIcon.cjs

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