@skdx/web-components 0.26.0

package/dist/toast/Toast.d.ts

@@ -0,0 +1,80 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-toast>` — the Web Components implementation of the shared Toast
+ * contract (see `@skdx/shared`'s `toastContract`). A single toast
+ * notification: `role="status"` and `data-state` (`open`/`closed`) on the
+ * host. Must render under a `<skdx-toast-provider>`. Self-closes after
+ * `duration` ms (or the provider's default), pausing the timer while
+ * hovered, while focused, and while the page is hidden, and closing
+ * immediately on Escape. Author `role="alert"` to raise an error or warning
+ * assertively instead of the default polite `role="status"`. Announces its text
+ * content to screen readers via the provider's persistent `aria-live`
+ * region on mount/reopen. Self-closing and uncontrolled by default — mount
+ * one `<skdx-toast>` per notification and remove it from the DOM on
+ * `open-change` with `detail: false`.
+ *
+ * @fires open-change - Fires with the new open state whenever it changes, controlled or not.
+ *
+ * @example
+ * ```html
+ * <skdx-toast duration="4000" type="background">
+ *   <skdx-toast-title>Saved</skdx-toast-title>
+ *   <skdx-toast-description>Your changes have been saved.</skdx-toast-description>
+ *   <skdx-toast-action alt-text="Undo the save">Undo</skdx-toast-action>
+ *   <skdx-toast-close aria-label="Dismiss">✕</skdx-toast-close>
+ * </skdx-toast>
+ * ```
+ */
+export declare class SkdxToast extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Whether the toast is open, for controlled usage. Pair with `open-change`.
+     * @default undefined
+     */
+    open?: boolean;
+    /** Whether the toast is initially open, for uncontrolled usage — a toast is typically mounted already-visible. */
+    defaultOpen: boolean;
+    /**
+     * Auto-dismiss duration (ms). `Infinity` disables auto-dismiss. Falls back
+     * to the ancestor `<skdx-toast-provider>`'s `duration` when unset.
+     * @default undefined
+     */
+    duration?: number;
+    /**
+     * `'foreground'` interrupts the user (announced `assertive`);
+     * `'background'` does not (announced `polite`).
+     * @default 'foreground'
+     */
+    type: 'foreground' | 'background';
+    private _uncontrolledOpen;
+    private _initialized;
+    private provider;
+    private timerId?;
+    private remaining;
+    private startTime;
+    /** @internal Resolved open state, controlled or uncontrolled. */
+    get currentOpen(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private getDuration;
+    private readonly startTimer;
+    private readonly pauseTimer;
+    /**
+     * A hidden tab still runs timers, so a toast raised while the user is
+     * elsewhere would burn its whole duration unseen. Pause until the page is
+     * visible again — the same reason the timer pauses on hover/focus.
+     */
+    private readonly handleVisibilityChange;
+    private readonly handleKeyDown;
+    private announce;
+    private syncState;
+    /** Sets open state (updating internal state if uncontrolled) and fires `open-change`. */
+    setOpen(next: boolean): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-toast': SkdxToast;
+    }
+}

package/dist/toast/Toast.js

@@ -0,0 +1,5 @@
+var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var n=(a,s,e,i)=>{for(var r=i>1?void 0:i?u(s,e):s,d=a.length-1,h;d>=0;d--)(h=a[d])&&(r=(i?h(s,e,r):h(r))||r);return i&&r&&p(s,e,r),r};import{css as l,html as m,LitElement as v}from"lit";import{property as o,state as c}from"lit/decorators.js";import{customElement as f}from"../internal/define.js";import{optOutBoolean as y}from"../internal/positioning.js";import{hiddenHostStyles as b}from"../internal/styles.js";var t=class extends v{constructor(){super(...arguments);this.defaultOpen=!0;this.type="foreground";this._uncontrolledOpen=!0;this._initialized=!1;this.provider=null;this.remaining=0;this.startTime=0;this.startTimer=()=>{Number.isFinite(this.remaining)&&(clearTimeout(this.timerId),this.startTime=Date.now(),this.timerId=setTimeout(()=>this.setOpen(!1),this.remaining))};this.pauseTimer=()=>{clearTimeout(this.timerId),this.remaining-=Date.now()-this.startTime,this.startTime=Date.now()};this.handleVisibilityChange=()=>{this.currentOpen&&(document.hidden?this.pauseTimer():this.startTimer())};this.handleKeyDown=e=>{e.key==="Escape"&&this.setOpen(!1)}}get currentOpen(){return this.open!==void 0?this.open:this._uncontrolledOpen}connectedCallback(){super.connectedCallback(),this._initialized||(this._uncontrolledOpen=this.defaultOpen,this._initialized=!0),this.provider=this.closest("skdx-toast-provider"),this.hasAttribute("role")||this.setAttribute("role","status"),this.tabIndex=0,this.addEventListener("pointerenter",this.pauseTimer),this.addEventListener("pointerleave",this.startTimer),this.addEventListener("focus",this.pauseTimer),this.addEventListener("blur",this.startTimer),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("visibilitychange",this.handleVisibilityChange),window.addEventListener("pagehide",this.pauseTimer),this.syncState(),this.currentOpen&&(this.remaining=this.getDuration(),this.startTimer(),this.announce())}disconnectedCallback(){clearTimeout(this.timerId),this.removeEventListener("pointerenter",this.pauseTimer),this.removeEventListener("pointerleave",this.startTimer),this.removeEventListener("focus",this.pauseTimer),this.removeEventListener("blur",this.startTimer),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("visibilitychange",this.handleVisibilityChange),window.removeEventListener("pagehide",this.pauseTimer),super.disconnectedCallback()}updated(e){e.has("open")&&this.open!==void 0&&(this.syncState(),this.currentOpen?(this.remaining=this.getDuration(),this.startTimer()):clearTimeout(this.timerId))}getDuration(){return this.duration??this.provider?.duration??5e3}announce(){let e=this.textContent?.trim()??"",i=this.provider;!i||!e||i.updateComplete.then(()=>{i.announce(e,this.type==="foreground"?"assertive":"polite")})}syncState(){let e=this.currentOpen;this.setAttribute("data-state",e?"open":"closed"),this.hidden=!e}setOpen(e){this.currentOpen!==e&&(this.open===void 0&&(this._uncontrolledOpen=e,this.syncState(),e?(this.remaining=this.getDuration(),this.startTimer()):clearTimeout(this.timerId)),this.dispatchEvent(new CustomEvent("open-change",{detail:e,bubbles:!0,composed:!0})))}render(){return m`<slot></slot>`}};t.styles=[b,l`
+      :host {
+        display: block;
+      }
+    `],n([o({type:Boolean})],t.prototype,"open",2),n([o({converter:y,attribute:"default-open"})],t.prototype,"defaultOpen",2),n([o({type:Number})],t.prototype,"duration",2),n([o({type:String})],t.prototype,"type",2),n([c()],t.prototype,"_uncontrolledOpen",2),t=n([f("skdx-toast","toast","root")],t);export{t as SkdxToast};

package/dist/toast/ToastAction.cjs

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

package/dist/toast/ToastAction.d.cts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-toast-action>` — actionable button rendered inside a `<skdx-toast>`
+ * (e.g. "Undo"). Closes the toast after dispatching its own `click` (listen
+ * for `click` on this element for your own action logic). `alt-text` sets
+ * `aria-label` so assistive tech users who dismiss the toast before
+ * reaching it still know what the action would have done. Must be used
+ * inside `<skdx-toast>`.
+ *
+ * @csspart action - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxToastAction extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** Describes the action for assistive tech users who can't easily reach it. */
+    altText: string;
+    private toast;
+    connectedCallback(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-toast-action': SkdxToastAction;
+    }
+}

package/dist/toast/ToastAction.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-toast-action>` — actionable button rendered inside a `<skdx-toast>`
+ * (e.g. "Undo"). Closes the toast after dispatching its own `click` (listen
+ * for `click` on this element for your own action logic). `alt-text` sets
+ * `aria-label` so assistive tech users who dismiss the toast before
+ * reaching it still know what the action would have done. Must be used
+ * inside `<skdx-toast>`.
+ *
+ * @csspart action - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxToastAction extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** Describes the action for assistive tech users who can't easily reach it. */
+    altText: string;
+    private toast;
+    connectedCallback(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-toast-action': SkdxToastAction;
+    }
+}

package/dist/toast/ToastAction.js

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

package/dist/toast/ToastClose.cjs

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

package/dist/toast/ToastClose.d.cts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-toast-close>` — button that dismisses the toast when clicked.
+ * Renders inside `<skdx-toast>` anywhere you like. Must be used inside
+ * `<skdx-toast>`.
+ *
+ * Set `label` when the slotted content is a glyph (`×`): the button lives in
+ * this element's shadow root, so an `aria-label` on the host would not name it.
+ *
+ * @csspart close - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxToastClose extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** Accessible name for the button, for when its content is a glyph rather than words. */
+    label: string;
+    private toast;
+    connectedCallback(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-toast-close': SkdxToastClose;
+    }
+}

package/dist/toast/ToastClose.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-toast-close>` — button that dismisses the toast when clicked.
+ * Renders inside `<skdx-toast>` anywhere you like. Must be used inside
+ * `<skdx-toast>`.
+ *
+ * Set `label` when the slotted content is a glyph (`×`): the button lives in
+ * this element's shadow root, so an `aria-label` on the host would not name it.
+ *
+ * @csspart close - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxToastClose extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** Accessible name for the button, for when its content is a glyph rather than words. */
+    label: string;
+    private toast;
+    connectedCallback(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-toast-close': SkdxToastClose;
+    }
+}

package/dist/toast/ToastClose.js

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

package/dist/toast/ToastDescription.cjs

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

package/dist/toast/ToastDescription.d.cts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+/** `<skdx-toast-description>` — the toast's body text. */
+export declare class SkdxToastDescription extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-toast-description': SkdxToastDescription;
+    }
+}

package/dist/toast/ToastDescription.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+/** `<skdx-toast-description>` — the toast's body text. */
+export declare class SkdxToastDescription extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-toast-description': SkdxToastDescription;
+    }
+}

package/dist/toast/ToastDescription.js

@@ -0,0 +1,5 @@
+var a=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var i=(o,r,l,s)=>{for(var e=s>1?void 0:s?n(r,l):r,m=o.length-1,d;m>=0;m--)(d=o[m])&&(e=(s?d(r,l,e):d(e))||e);return s&&e&&a(r,l,e),e};import{css as c,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,c`
+      :host {
+        display: block;
+      }
+    `],t=i([h("skdx-toast-description","toast","description")],t);export{t as SkdxToastDescription};

package/dist/toast/ToastProvider.cjs

@@ -0,0 +1,22 @@
+"use strict";var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var E=(i,e)=>{for(var o in e)n(i,o,{get:e[o],enumerable:!0})},x=(i,e,o,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of m(e))!h.call(i,t)&&t!==o&&n(i,t,{get:()=>e[t],enumerable:!(a=u(e,t))||a.enumerable});return i};var f=i=>x(n({},"__esModule",{value:!0}),i),l=(i,e,o,a)=>{for(var t=a>1?void 0:a?u(e,o):e,d=i.length-1,p;d>=0;d--)(p=i[d])&&(t=(a?p(e,o,t):p(t))||t);return a&&t&&n(e,o,t),t};var y={};E(y,{SkdxToastProvider:()=>r});module.exports=f(y);var s=require("lit"),c=require("lit/decorators.js"),v=require("../internal/define.cjs");var w=s.css`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+`,r=class extends s.LitElement{constructor(){super(...arguments);this.duration=5e3;this.label="Notification";this.politeEl=null;this.assertiveEl=null}firstUpdated(){this.politeEl=this.shadowRoot.querySelector('[data-skdx-toast-announcer="polite"]'),this.assertiveEl=this.shadowRoot.querySelector('[data-skdx-toast-announcer="assertive"]')}announce(o,a){let t=a==="assertive"?this.assertiveEl:this.politeEl;!t||!o||(t.textContent="",window.setTimeout(()=>{t.textContent=o},0))}render(){return s.html`
+      <slot></slot>
+      <div data-skdx-toast-announcer="polite" aria-live="polite" aria-atomic="true"></div>
+      <div data-skdx-toast-announcer="assertive" aria-live="assertive" aria-atomic="true"></div>
+    `}};r.styles=s.css`
+    :host {
+      display: contents;
+    }
+    [data-skdx-toast-announcer] {
+      ${w}
+    }
+  `,l([(0,c.property)({type:Number})],r.prototype,"duration",2),l([(0,c.property)({type:String})],r.prototype,"label",2),r=l([(0,v.customElement)("skdx-toast-provider")],r);0&&(module.exports={SkdxToastProvider});

package/dist/toast/ToastProvider.d.cts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-toast-provider>` — the Web Components implementation of the shared
+ * Toast contract's `ToastProvider` (see `@skdx/shared`'s `toastContract`).
+ * App-level ancestor that supplies default toast `duration`, the accessible
+ * region `label`, and a persistent `aria-live` announcer used by every
+ * descendant `<skdx-toast>` — mount once near the root of your app, alongside
+ * a `<skdx-toast-viewport>`.
+ *
+ * Renders its slotted children plus two visually-hidden live regions
+ * (`polite`/`assertive`) in shadow DOM.
+ *
+ * @example
+ * ```html
+ * <skdx-toast-provider duration="5000">
+ *   <!-- app content -->
+ *   <skdx-toast-viewport></skdx-toast-viewport>
+ * </skdx-toast-provider>
+ * ```
+ */
+export declare class SkdxToastProvider extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Default auto-dismiss duration (ms), used by any `<skdx-toast>` that doesn't set its own `duration`. */
+    duration: number;
+    /** Accessible label for the toast region announced by assistive tech. */
+    label: string;
+    private politeEl;
+    private assertiveEl;
+    protected firstUpdated(): void;
+    /** @internal Copies a toast's text into a persistent live region so screen readers reliably announce it. */
+    announce(message: string, priority: 'polite' | 'assertive'): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-toast-provider': SkdxToastProvider;
+    }
+}

package/dist/toast/ToastProvider.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-toast-provider>` — the Web Components implementation of the shared
+ * Toast contract's `ToastProvider` (see `@skdx/shared`'s `toastContract`).
+ * App-level ancestor that supplies default toast `duration`, the accessible
+ * region `label`, and a persistent `aria-live` announcer used by every
+ * descendant `<skdx-toast>` — mount once near the root of your app, alongside
+ * a `<skdx-toast-viewport>`.
+ *
+ * Renders its slotted children plus two visually-hidden live regions
+ * (`polite`/`assertive`) in shadow DOM.
+ *
+ * @example
+ * ```html
+ * <skdx-toast-provider duration="5000">
+ *   <!-- app content -->
+ *   <skdx-toast-viewport></skdx-toast-viewport>
+ * </skdx-toast-provider>
+ * ```
+ */
+export declare class SkdxToastProvider extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Default auto-dismiss duration (ms), used by any `<skdx-toast>` that doesn't set its own `duration`. */
+    duration: number;
+    /** Accessible label for the toast region announced by assistive tech. */
+    label: string;
+    private politeEl;
+    private assertiveEl;
+    protected firstUpdated(): void;
+    /** @internal Copies a toast's text into a persistent live region so screen readers reliably announce it. */
+    announce(message: string, priority: 'polite' | 'assertive'): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-toast-provider': SkdxToastProvider;
+    }
+}

package/dist/toast/ToastProvider.js

@@ -0,0 +1,22 @@
+var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var r=(s,a,i,o)=>{for(var t=o>1?void 0:o?u(a,i):a,n=s.length-1,l;n>=0;n--)(l=s[n])&&(t=(o?l(a,i,t):l(t))||t);return o&&t&&c(a,i,t),t};import{css as p,html as v,LitElement as m}from"lit";import{property as d}from"lit/decorators.js";import{customElement as h}from"../internal/define.js";var E=p`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+`,e=class extends m{constructor(){super(...arguments);this.duration=5e3;this.label="Notification";this.politeEl=null;this.assertiveEl=null}firstUpdated(){this.politeEl=this.shadowRoot.querySelector('[data-skdx-toast-announcer="polite"]'),this.assertiveEl=this.shadowRoot.querySelector('[data-skdx-toast-announcer="assertive"]')}announce(i,o){let t=o==="assertive"?this.assertiveEl:this.politeEl;!t||!i||(t.textContent="",window.setTimeout(()=>{t.textContent=i},0))}render(){return v`
+      <slot></slot>
+      <div data-skdx-toast-announcer="polite" aria-live="polite" aria-atomic="true"></div>
+      <div data-skdx-toast-announcer="assertive" aria-live="assertive" aria-atomic="true"></div>
+    `}};e.styles=p`
+    :host {
+      display: contents;
+    }
+    [data-skdx-toast-announcer] {
+      ${E}
+    }
+  `,r([d({type:Number})],e.prototype,"duration",2),r([d({type:String})],e.prototype,"label",2),e=r([h("skdx-toast-provider")],e);export{e as SkdxToastProvider};

package/dist/toast/ToastRegion.cjs

@@ -0,0 +1,26 @@
+"use strict";var d=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var $=(s,r)=>{for(var t in r)d(s,t,{get:r[t],enumerable:!0})},x=(s,r,t,e)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of k(r))!v.call(s,i)&&i!==t&&d(s,i,{get:()=>r[i],enumerable:!(e=u(r,i))||e.enumerable});return s};var f=s=>x(d({},"__esModule",{value:!0}),s),p=(s,r,t,e)=>{for(var i=e>1?void 0:e?u(r,t):r,c=s.length-1,l;c>=0;c--)(l=s[c])&&(i=(e?l(r,t,i):l(i))||i);return e&&i&&d(r,t,i),i};var y={};$(y,{SkdxToastRegion:()=>a});module.exports=f(y);var o=require("lit"),m=require("lit/decorators.js"),b=require("lit/directives/repeat.js"),h=require("../internal/define.cjs"),T=require("../internal/styles.cjs"),g=require("./Toast.cjs"),C=require("./ToastAction.cjs"),L=require("./ToastClose.cjs"),_=require("./ToastDescription.cjs"),w=require("./ToastProvider.cjs"),M=require("./ToastTitle.cjs"),O=require("./ToastViewport.cjs"),n=require("./toaster.cjs");var a=class extends o.LitElement{constructor(){super(...arguments);this.toaster=(0,n.createToaster)()}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),(0,T.installLightDomStyles)(),this.subscribeToToaster()}disconnectedCallback(){this.unsubscribe?.(),this.unsubscribe=void 0,super.disconnectedCallback()}willUpdate(t){t.has("toaster")&&this.isConnected&&this.subscribeToToaster()}subscribeToToaster(){this.unsubscribe?.(),this.unsubscribe=this.toaster.subscribe(()=>this.requestUpdate())}durationFor(t){return t.duration??(t.type==="loading"?1/0:void 0)}render(){let t=this.toaster;return o.html`
+      <skdx-toast-provider .label=${t.label} .duration=${t.duration}>
+        <skdx-toast-viewport data-placement=${t.placement}>
+          <!-- Keyed on the revision too, so update() replaces the element:
+               that re-announces the new text and restarts the timer for it. -->
+          ${(0,b.repeat)(t.getToasts(),e=>`${e.id}:${e.revision}`,e=>o.html`
+              <skdx-toast
+                role=${n.TOAST_ROLE_BY_TYPE[e.type]}
+                type=${n.TOAST_POLITENESS_BY_TYPE[e.type]}
+                .duration=${this.durationFor(e)}
+                data-type=${e.type}
+                @open-change=${i=>{i.detail||t.dismiss(e.id)}}
+              >
+                ${e.title?o.html`<skdx-toast-title>${e.title}</skdx-toast-title>`:o.nothing}
+                ${e.description?o.html`<skdx-toast-description>${e.description}</skdx-toast-description>`:o.nothing}
+                ${e.action?o.html`<skdx-toast-action
+                        alt-text=${e.action.altText}
+                        @click=${()=>e.action?.onClick?.()}
+                        >${e.action.label}</skdx-toast-action
+                      >`:o.nothing}
+                <skdx-toast-close label=${e.closeLabel??"Dismiss"}>×</skdx-toast-close>
+              </skdx-toast>
+            `)}
+        </skdx-toast-viewport>
+      </skdx-toast-provider>
+    `}};p([(0,m.property)({attribute:!1})],a.prototype,"toaster",2),a=p([(0,h.customElement)("skdx-toast-region")],a);0&&(module.exports={SkdxToastRegion});

package/dist/toast/ToastRegion.d.cts

@@ -0,0 +1,58 @@
+import { LitElement } from 'lit';
+import './Toast.cjs';
+import './ToastAction.cjs';
+import './ToastClose.cjs';
+import './ToastDescription.cjs';
+import './ToastProvider.cjs';
+import './ToastTitle.cjs';
+import './ToastViewport.cjs';
+import { type ToasterStore } from './toaster.cjs';
+/**
+ * `<skdx-toast-region>` — renders a {@link createToaster} queue: an
+ * `<skdx-toast-provider>` + `<skdx-toast-viewport>` region hosting one
+ * `<skdx-toast>` per visible entry. Put one near the end of your page and set
+ * its `toaster` property; everything after that is imperative
+ * (`toaster.create({ title })`) from anywhere.
+ *
+ * The viewport is a labelled `region` landmark: **F6** moves focus into it
+ * from anywhere on the page, **Shift+F6** returns focus to where it was, and
+ * focus is restored automatically when the toast holding it is removed.
+ *
+ * @example
+ * ```html
+ * <skdx-toast-region></skdx-toast-region>
+ * <script type="module">
+ *   import { createToaster } from '@skdx/web-components/toast';
+ *   const toaster = createToaster({ max: 3, placement: 'bottom-end' });
+ *   document.querySelector('skdx-toast-region').toaster = toaster;
+ *   toaster.create({ title: 'Saved', type: 'success' });
+ * </script>
+ * ```
+ */
+export declare class SkdxToastRegion extends LitElement {
+    /**
+     * Renders into light DOM, unlike the rest of the package. This element
+     * renders toasts it doesn't own the markup of, and the library is headless
+     * — behind a shadow root the page's own CSS could not reach a single toast
+     * it raises, which is the whole point of a headless design system.
+     */
+    protected createRenderRoot(): HTMLElement;
+    /**
+     * The queue to render. Defaults to a toaster of its own, so a region
+     * dropped in with no wiring still works — read it back off the element to
+     * raise toasts against it.
+     */
+    toaster: ToasterStore;
+    private unsubscribe?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: Map<string, unknown>): void;
+    private subscribeToToaster;
+    private durationFor;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-toast-region': SkdxToastRegion;
+    }
+}

package/dist/toast/ToastRegion.d.ts

@@ -0,0 +1,58 @@
+import { LitElement } from 'lit';
+import './Toast.js';
+import './ToastAction.js';
+import './ToastClose.js';
+import './ToastDescription.js';
+import './ToastProvider.js';
+import './ToastTitle.js';
+import './ToastViewport.js';
+import { type ToasterStore } from './toaster.js';
+/**
+ * `<skdx-toast-region>` — renders a {@link createToaster} queue: an
+ * `<skdx-toast-provider>` + `<skdx-toast-viewport>` region hosting one
+ * `<skdx-toast>` per visible entry. Put one near the end of your page and set
+ * its `toaster` property; everything after that is imperative
+ * (`toaster.create({ title })`) from anywhere.
+ *
+ * The viewport is a labelled `region` landmark: **F6** moves focus into it
+ * from anywhere on the page, **Shift+F6** returns focus to where it was, and
+ * focus is restored automatically when the toast holding it is removed.
+ *
+ * @example
+ * ```html
+ * <skdx-toast-region></skdx-toast-region>
+ * <script type="module">
+ *   import { createToaster } from '@skdx/web-components/toast';
+ *   const toaster = createToaster({ max: 3, placement: 'bottom-end' });
+ *   document.querySelector('skdx-toast-region').toaster = toaster;
+ *   toaster.create({ title: 'Saved', type: 'success' });
+ * </script>
+ * ```
+ */
+export declare class SkdxToastRegion extends LitElement {
+    /**
+     * Renders into light DOM, unlike the rest of the package. This element
+     * renders toasts it doesn't own the markup of, and the library is headless
+     * — behind a shadow root the page's own CSS could not reach a single toast
+     * it raises, which is the whole point of a headless design system.
+     */
+    protected createRenderRoot(): HTMLElement;
+    /**
+     * The queue to render. Defaults to a toaster of its own, so a region
+     * dropped in with no wiring still works — read it back off the element to
+     * raise toasts against it.
+     */
+    toaster: ToasterStore;
+    private unsubscribe?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: Map<string, unknown>): void;
+    private subscribeToToaster;
+    private durationFor;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-toast-region': SkdxToastRegion;
+    }
+}

package/dist/toast/ToastRegion.js

@@ -0,0 +1,26 @@
+var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var c=(a,i,t,e)=>{for(var r=e>1?void 0:e?u(i,t):i,n=a.length-1,d;n>=0;n--)(d=a[n])&&(r=(e?d(i,t,r):d(r))||r);return e&&r&&p(i,t,r),r};import{html as o,LitElement as m,nothing as l}from"lit";import{property as b}from"lit/decorators.js";import{repeat as h}from"lit/directives/repeat.js";import{customElement as T}from"../internal/define.js";import{installLightDomStyles as k}from"../internal/styles.js";import"./Toast.js";import"./ToastAction.js";import"./ToastClose.js";import"./ToastDescription.js";import"./ToastProvider.js";import"./ToastTitle.js";import"./ToastViewport.js";import{createToaster as v,TOAST_POLITENESS_BY_TYPE as $,TOAST_ROLE_BY_TYPE as x}from"./toaster.js";var s=class extends m{constructor(){super(...arguments);this.toaster=v()}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),k(),this.subscribeToToaster()}disconnectedCallback(){this.unsubscribe?.(),this.unsubscribe=void 0,super.disconnectedCallback()}willUpdate(t){t.has("toaster")&&this.isConnected&&this.subscribeToToaster()}subscribeToToaster(){this.unsubscribe?.(),this.unsubscribe=this.toaster.subscribe(()=>this.requestUpdate())}durationFor(t){return t.duration??(t.type==="loading"?1/0:void 0)}render(){let t=this.toaster;return o`
+      <skdx-toast-provider .label=${t.label} .duration=${t.duration}>
+        <skdx-toast-viewport data-placement=${t.placement}>
+          <!-- Keyed on the revision too, so update() replaces the element:
+               that re-announces the new text and restarts the timer for it. -->
+          ${h(t.getToasts(),e=>`${e.id}:${e.revision}`,e=>o`
+              <skdx-toast
+                role=${x[e.type]}
+                type=${$[e.type]}
+                .duration=${this.durationFor(e)}
+                data-type=${e.type}
+                @open-change=${r=>{r.detail||t.dismiss(e.id)}}
+              >
+                ${e.title?o`<skdx-toast-title>${e.title}</skdx-toast-title>`:l}
+                ${e.description?o`<skdx-toast-description>${e.description}</skdx-toast-description>`:l}
+                ${e.action?o`<skdx-toast-action
+                        alt-text=${e.action.altText}
+                        @click=${()=>e.action?.onClick?.()}
+                        >${e.action.label}</skdx-toast-action
+                      >`:l}
+                <skdx-toast-close label=${e.closeLabel??"Dismiss"}>×</skdx-toast-close>
+              </skdx-toast>
+            `)}
+        </skdx-toast-viewport>
+      </skdx-toast-provider>
+    `}};c([b({attribute:!1})],s.prototype,"toaster",2),s=c([T("skdx-toast-region")],s);export{s as SkdxToastRegion};

package/dist/toast/ToastTitle.cjs

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

package/dist/toast/ToastTitle.d.cts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+/** `<skdx-toast-title>` — the toast's heading, announced as part of the toast's accessible text. */
+export declare class SkdxToastTitle extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-toast-title': SkdxToastTitle;
+    }
+}

package/dist/toast/ToastTitle.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from 'lit';
+/** `<skdx-toast-title>` — the toast's heading, announced as part of the toast's accessible text. */
+export declare class SkdxToastTitle extends LitElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-toast-title': SkdxToastTitle;
+    }
+}

package/dist/toast/ToastTitle.js

@@ -0,0 +1,5 @@
+var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var a=(o,r,l,s)=>{for(var t=s>1?void 0:s?c(r,l):r,m=o.length-1,i;m>=0;m--)(i=o[m])&&(t=(s?i(r,l,t):i(t))||t);return s&&t&&n(r,l,t),t};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 e=class extends f{render(){return p`<slot></slot>`}};e.styles=[y,d`
+      :host {
+        display: block;
+      }
+    `],e=a([h("skdx-toast-title","toast","title")],e);export{e as SkdxToastTitle};