@skdx/web-components 0.27.0 → 0.28.0

package/dist/affix/Affix.d.ts

@@ -1,42 +1,8 @@
 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.
+ * Reports when element scrolls past a given offset to pin it. Uses
+ * `IntersectionObserver` on a light-DOM sentinel. Flips `data-state` between
+ * `"affixed"` and `"static"`, fires `change`, and publishes CSS custom properties.
  *
  * @example
  * ```html
@@ -45,41 +11,20 @@ import { LitElement } from 'lit';
  * </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.
- *
+ * @fires change - Fires with the new affixed state when it changes.
  * @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.
-     */
+    /** Distance from top edge where element counts as affixed. @default undefined */
     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`.
+     * counts as affixed — the mirror of `offset-top`.
      * @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.
-     */
+    /** Scrolling ancestor used as IntersectionObserver root; selector or Element. @default null — viewport */
     target: Element | string | null;
     /**
      * Stops observing entirely: no `IntersectionObserver` is created and
@@ -91,6 +36,8 @@ export declare class SkdxAffix extends LitElement {
     /** The light-DOM sibling standing in for where this element sits in flow. */
     private readonly sentinel;
     private observer;
+    /** Re-publishes `--skdx-affix-height` whenever the host's own box changes. */
+    private resizeObserver;
     /** What the live observer was built from, so an unrelated update does not rebuild it. */
     private observedRoot;
     private observedMargin;
@@ -98,21 +45,36 @@ export declare class SkdxAffix extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(): void;
+    /**
+     * Keeps `--skdx-affix-height` current: a mount-only read goes stale once
+     * the host reflows for reasons unrelated to affixing (wrapped content, a
+     * webfont, a container query). Observed unconditionally in both states,
+     * since `position: sticky` never takes the host out of flow.
+     */
+    private attachResizeObserver;
     protected updated(): void;
     private createSentinel;
     /** Idempotent: `insertBefore` moves the sentinel, so a re-parented element takes it along. */
     private mountSentinel;
     private syncState;
+    /**
+     * Publishes the same two numbers that build `rootMargin`, so pinning
+     * cannot drift from detection. `auto` for an unset edge means "don't pin
+     * this side" — `0px` would pin a bottom-only bar to the top.
+     */
+    private publishOffsets;
     private publishHeight;
-    /** Resolves `target` to the observer root. A selector is resolved here, once per observer. */
+    /**
+     * Resolves `target` to the observer root, re-running `querySelector` on
+     * every call so a late-mounting container is picked up. Returns
+     * `'unresolved'`, not `null`, for a non-empty selector matching nothing —
+     * `null` means "the viewport", a different, real root.
+     */
     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.
-     */
+    /** The observer fires on every threshold crossing; only the flips matter. */
     private setAffixed;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/affix/Affix.js

@@ -1,5 +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`
+var d=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var o=(a,n,e,t)=>{for(var s=t>1?void 0:t?v(n,e):n,i=a.length-1,h;i>=0;i--)(h=a[i])&&(s=(t?h(n,e,s):h(s))||s);return t&&s&&d(n,e,s),s};import{css as b,html as f,LitElement as u}from"lit";import{property as l}from"lit/decorators.js";import{customElement as p}from"../internal/define.js";import{reflectHostState as c}from"../internal/part.js";var r=class extends u{constructor(){super(...arguments);this.target=null;this.disabled=!1;this.sentinel=this.createSentinel();this.observer=null;this.resizeObserver=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(),this.attachResizeObserver()}disconnectedCallback(){this.detachObserver(),this.resizeObserver?.disconnect(),this.resizeObserver=null,this.sentinel.remove(),super.disconnectedCallback()}firstUpdated(){this.publishHeight()}attachResizeObserver(){this.resizeObserver||typeof ResizeObserver>"u"||(this.resizeObserver=new ResizeObserver(()=>this.publishHeight()),this.resizeObserver.observe(this))}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(){c(this,{"data-state":this.affixed?"affixed":"static","data-disabled":this.disabled?"":null}),this.publishOffsets()}publishOffsets(){this.style.setProperty("--skdx-affix-offset-top",this.topOffset==null?"auto":`${this.topOffset}px`),this.style.setProperty("--skdx-affix-offset-bottom",this.bottomOffset==null?"auto":`${this.bottomOffset}px`)}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)??"unresolved":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`;if(t!=="unresolved"&&this.observer&&this.observedRoot===t&&this.observedMargin===s||(this.detachObserver(),t==="unresolved")||!e||typeof IntersectionObserver>"u")return;let i=t;this.observedRoot=i,this.observedMargin=s,this.observer=new IntersectionObserver(this.handleIntersect,{root:i,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 f`<div part="affix"><slot></slot></div>`}};r.styles=b`
     :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};
+  `,o([l({type:Number,attribute:"offset-top"})],r.prototype,"topOffset",2),o([l({type:Number,attribute:"offset-bottom"})],r.prototype,"bottomOffset",2),o([l({attribute:"target"})],r.prototype,"target",2),o([l({type:Boolean,reflect:!0})],r.prototype,"disabled",2),r=o([p("skdx-affix","affix","root")],r);export{r as SkdxAffix};

package/dist/alert/Alert.cjs

@@ -1,4 +1,4 @@
-"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`
+"use strict";var u=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var M=Object.prototype.hasOwnProperty;var E=s=>{throw TypeError(s)};var C=(s,t)=>{for(var e in t)u(s,e,{get:t[e],enumerable:!0})},O=(s,t,e,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of H(t))!M.call(s,o)&&o!==e&&u(s,o,{get:()=>t[o],enumerable:!(i=b(t,o))||i.enumerable});return s};var k=s=>O(u({},"__esModule",{value:!0}),s),l=(s,t,e,i)=>{for(var o=i>1?void 0:i?b(t,e):t,h=s.length-1,p;h>=0;h--)(p=s[h])&&(o=(i?p(t,e,o):p(o))||o);return i&&o&&u(t,e,o),o};var v=(s,t,e)=>t.has(s)||E("Cannot "+e);var m=(s,t,e)=>(v(s,t,"read from private field"),e?e.call(s):t.get(s)),L=(s,t,e)=>t.has(s)?E("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(s):t.set(s,e),A=(s,t,e,i)=>(v(s,t,"write to private field"),i?i.call(s,e):t.set(s,e),e);var D={};C(D,{SkdxAlert:()=>r});module.exports=k(D);var d=require("lit"),n=require("lit/decorators.js"),T=require("../internal/authored.cjs"),g=require("../internal/define.cjs"),y=require("../internal/ids.cjs"),R=require("../internal/positioning.cjs"),f=require("../internal/tabbable.cjs"),c=require("./AlertAnatomy.cjs");function w(s,t){for(let e=s.previousElementSibling;e;e=e.previousElementSibling){let i=e.matches(f.TABBABLE_SELECTOR)?e:e.querySelector(f.TABBABLE_SELECTOR);if(i){i.focus();return}}t?.isConnected&&t.focus()}var B=["status","alert"],a,r=class extends d.LitElement{constructor(){super(...arguments);L(this,a,"status");this.closeLabel="Dismiss";this.dismissOnEscape=!1;this.open=!0;this.title="";this.dismissible=!1;this.previouslyFocused=null;this.fillAnatomy=()=>{(0,T.hasAuthoredParts)(this,c.ALERT_ANATOMY_GENERATED,c.ALERT_RENDER_SLOTS)||((0,c.fillAlertAnatomy)(this),this.syncHostAttributes())};this.handleKeydown=e=>{!this.dismissOnEscape||e.key!=="Escape"||(e.preventDefault(),this.setOpen(!1))};this.handleSlotChange=()=>{this.fillAnatomy(),this.syncHostAttributes()}}set alertRole(e){let i=B.includes(e)?e:"status",o=m(this,a);A(this,a,i),this.requestUpdate("alertRole",o)}get alertRole(){return m(this,a)}connectedCallback(){super.connectedCallback(),this.previouslyFocused=this.ownerDocument.activeElement??null,this.addEventListener("keydown",this.handleKeydown),this.syncHostAttributes(),this.hidden=!this.open,queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback()}updated(e){e.has("alertRole")&&this.syncHostAttributes(),e.has("open")&&(this.hidden=!this.open),(e.has("title")||e.has("description")||e.has("dismissible"))&&this.fillAnatomy()}setOpen(e){this.open!==e&&(e||w(this,this.previouslyFocused),this.open=e,this.dispatchEvent(new CustomEvent("open-change",{detail:e,bubbles:!0,composed:!0})))}syncHostAttributes(){this.setAttribute("aria-live",this.alertRole==="alert"?"assertive":"polite");let e=this.querySelector("skdx-alert-title"),i=this.querySelector("skdx-alert-description");e&&this.setAttribute("aria-labelledby",(0,y.ensureId)(e,"skdx-alert","title")),i&&this.setAttribute("aria-describedby",(0,y.ensureId)(i,"skdx-alert","description"))}render(){return d.html`<slot @slotchange=${this.handleSlotChange}></slot>`}};a=new WeakMap,r.styles=d.css`
     :host {
       display: block;
     }
@@ -6,4 +6,4 @@
     :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});
+  `,l([(0,n.property)({attribute:"role",type:String,reflect:!0})],r.prototype,"alertRole",1),l([(0,n.property)({attribute:"close-label",type:String})],r.prototype,"closeLabel",2),l([(0,n.property)({attribute:"dismiss-on-escape",type:Boolean})],r.prototype,"dismissOnEscape",2),l([(0,n.property)({converter:R.optOutBoolean,reflect:!0})],r.prototype,"open",2),l([(0,n.property)({type:String})],r.prototype,"title",2),l([(0,n.property)({type:String})],r.prototype,"description",2),l([(0,n.property)({type:Boolean})],r.prototype,"dismissible",2),r=l([(0,g.customElement)("skdx-alert","alert","root")],r);0&&(module.exports={SkdxAlert});

package/dist/alert/Alert.d.cts

@@ -11,7 +11,15 @@ import { LitElement } from 'lit';
  * 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.
+ * safely override. The contract, the docs and the generated framework mapping
+ * all call it `role`, which is the attribute a consumer writes — the JS
+ * spelling is a documented per-framework adaptation, not a second property.
+ *
+ * An unrecognised `role` attribute is coerced to `'status'`. The other four
+ * frameworks get that narrowing from their compilers; without it,
+ * `<skdx-alert role="region">` would produce an element with a non-live role
+ * carrying `aria-live="polite"` — a combination no assistive technology does
+ * anything sensible with.
  *
  * `open` is a plain reflected property defaulting to `true` — like a native
  * `<input>`'s `checked`, there is no separate controlled/uncontrolled mode:
@@ -22,34 +30,82 @@ import { LitElement } from 'lit';
  * 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.
  *
+ * The recipe: `title`/`description` and the `icon`/`action`/`close` slots
+ * derive the whole anatomy (see `AlertAnatomy.ts`). Hand composition still
+ * wins — write any part as a child and nothing is derived; the parts
+ * themselves are advanced primitives, from
+ * `@skdx/web-components/primitives/alert`.
+ *
  * @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 data-status="success" title="Saved" description="Your changes are live.">
+ *   <span slot="icon">✓</span>
  * </skdx-alert>
  * ```
  *
  * @fires open-change - Fired with the new open state whenever the alert is dismissed or reopened.
  */
 export declare class SkdxAlert extends LitElement {
+    #private;
     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';
+    set alertRole(next: string);
+    get alertRole(): 'status' | 'alert';
+    /**
+     * Accessible name for `<skdx-alert-close>`, an icon-only button with no visible text.
+     * Lives on the root, not the part. `label` on `AlertClose` overrides.
+     * @default 'Dismiss'
+     */
+    closeLabel: string;
+    /**
+     * Whether `Escape` dismisses the alert while focus is inside it. Opt-in;
+     * when enabled, focus restores to the nearest focusable element before the alert.
+     * @default false
+     */
+    dismissOnEscape: boolean;
     /**
      * Visibility. Set to `false` (or activate `<skdx-alert-close>`) to dismiss;
      * listen for `open-change` to observe or override changes.
      * @default true
      */
     open: boolean;
+    /**
+     * Heading for the derived anatomy's `<skdx-alert-title>` — the alert's
+     * accessible name. Shadows `HTMLElement.title`, so a set title shows the
+     * browser's tooltip on hover.
+     * @default ''
+     */
+    title: string;
+    /**
+     * Supporting text for the derived anatomy's `<skdx-alert-description>` — the
+     * alert's accessible description.
+     * @default undefined
+     */
+    description?: string;
+    /**
+     * Whether the derived anatomy includes a dismiss button, named by `closeLabel`.
+     * @default false
+     */
+    dismissible: boolean;
+    /**
+     * The element that held focus when this alert connected — the fallback
+     * target for {@link focusAfterAlertDismiss}. Captured here rather than on
+     * dismissal, when the focused element is the close button that is about to
+     * go.
+     */
+    private previouslyFocused;
     connectedCallback(): void;
+    /**
+     * Draws the canonical anatomy into the light DOM when this element has no
+     * consumer-authored part, and hands it straight back once one appears.
+     */
+    private readonly fillAnatomy;
+    disconnectedCallback(): void;
+    private readonly handleKeydown;
     protected updated(changed: Map<string, unknown>): void;
     /**
      * Sets `open` and dispatches a bubbling, composed `open-change` event with
@@ -57,6 +113,14 @@ export declare class SkdxAlert extends LitElement {
      * nothing is dispatched, matching React's `useControllableState`
      * (`packages/react/src/utils/useControllableState.ts:60`) and the contract
      * stated at `carousel/Carousel.ts:247-251`.
+     *
+     * Declared in `alertContract.publicMethods` as framework-specific: the
+     * other four frameworks express the same operation as a
+     * prop assignment, and this package's `open` is a plain reflected property
+     * with no controlled/uncontrolled split, so `setOpen` is what gives the
+     * assignment an event. It is public rather than internal because
+     * `<skdx-alert-close>` reaches it across a shadow boundary and a consumer
+     * driving the alert imperatively needs the same door.
      */
     setOpen(next: boolean): void;
     private readonly handleSlotChange;

package/dist/alert/Alert.d.ts

@@ -11,7 +11,15 @@ import { LitElement } from 'lit';
  * 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.
+ * safely override. The contract, the docs and the generated framework mapping
+ * all call it `role`, which is the attribute a consumer writes — the JS
+ * spelling is a documented per-framework adaptation, not a second property.
+ *
+ * An unrecognised `role` attribute is coerced to `'status'`. The other four
+ * frameworks get that narrowing from their compilers; without it,
+ * `<skdx-alert role="region">` would produce an element with a non-live role
+ * carrying `aria-live="polite"` — a combination no assistive technology does
+ * anything sensible with.
  *
  * `open` is a plain reflected property defaulting to `true` — like a native
  * `<input>`'s `checked`, there is no separate controlled/uncontrolled mode:
@@ -22,34 +30,82 @@ import { LitElement } from 'lit';
  * 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.
  *
+ * The recipe: `title`/`description` and the `icon`/`action`/`close` slots
+ * derive the whole anatomy (see `AlertAnatomy.ts`). Hand composition still
+ * wins — write any part as a child and nothing is derived; the parts
+ * themselves are advanced primitives, from
+ * `@skdx/web-components/primitives/alert`.
+ *
  * @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 data-status="success" title="Saved" description="Your changes are live.">
+ *   <span slot="icon">✓</span>
  * </skdx-alert>
  * ```
  *
  * @fires open-change - Fired with the new open state whenever the alert is dismissed or reopened.
  */
 export declare class SkdxAlert extends LitElement {
+    #private;
     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';
+    set alertRole(next: string);
+    get alertRole(): 'status' | 'alert';
+    /**
+     * Accessible name for `<skdx-alert-close>`, an icon-only button with no visible text.
+     * Lives on the root, not the part. `label` on `AlertClose` overrides.
+     * @default 'Dismiss'
+     */
+    closeLabel: string;
+    /**
+     * Whether `Escape` dismisses the alert while focus is inside it. Opt-in;
+     * when enabled, focus restores to the nearest focusable element before the alert.
+     * @default false
+     */
+    dismissOnEscape: boolean;
     /**
      * Visibility. Set to `false` (or activate `<skdx-alert-close>`) to dismiss;
      * listen for `open-change` to observe or override changes.
      * @default true
      */
     open: boolean;
+    /**
+     * Heading for the derived anatomy's `<skdx-alert-title>` — the alert's
+     * accessible name. Shadows `HTMLElement.title`, so a set title shows the
+     * browser's tooltip on hover.
+     * @default ''
+     */
+    title: string;
+    /**
+     * Supporting text for the derived anatomy's `<skdx-alert-description>` — the
+     * alert's accessible description.
+     * @default undefined
+     */
+    description?: string;
+    /**
+     * Whether the derived anatomy includes a dismiss button, named by `closeLabel`.
+     * @default false
+     */
+    dismissible: boolean;
+    /**
+     * The element that held focus when this alert connected — the fallback
+     * target for {@link focusAfterAlertDismiss}. Captured here rather than on
+     * dismissal, when the focused element is the close button that is about to
+     * go.
+     */
+    private previouslyFocused;
     connectedCallback(): void;
+    /**
+     * Draws the canonical anatomy into the light DOM when this element has no
+     * consumer-authored part, and hands it straight back once one appears.
+     */
+    private readonly fillAnatomy;
+    disconnectedCallback(): void;
+    private readonly handleKeydown;
     protected updated(changed: Map<string, unknown>): void;
     /**
      * Sets `open` and dispatches a bubbling, composed `open-change` event with
@@ -57,6 +113,14 @@ export declare class SkdxAlert extends LitElement {
      * nothing is dispatched, matching React's `useControllableState`
      * (`packages/react/src/utils/useControllableState.ts:60`) and the contract
      * stated at `carousel/Carousel.ts:247-251`.
+     *
+     * Declared in `alertContract.publicMethods` as framework-specific: the
+     * other four frameworks express the same operation as a
+     * prop assignment, and this package's `open` is a plain reflected property
+     * with no controlled/uncontrolled split, so `setOpen` is what gives the
+     * assignment an event. It is public rather than internal because
+     * `<skdx-alert-close>` reaches it across a shadow boundary and a consumer
+     * driving the alert imperatively needs the same door.
      */
     setOpen(next: boolean): void;
     private readonly handleSlotChange;

package/dist/alert/Alert.js

@@ -1,4 +1,4 @@
-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`
+var E=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var h=t=>{throw TypeError(t)};var l=(t,s,e,i)=>{for(var r=i>1?void 0:i?v(s,e):s,d=t.length-1,c;d>=0;d--)(c=t[d])&&(r=(i?c(s,e,r):c(r))||r);return i&&r&&E(s,e,r),r};var p=(t,s,e)=>s.has(t)||h("Cannot "+e);var u=(t,s,e)=>(p(t,s,"read from private field"),e?e.call(t):s.get(t)),m=(t,s,e)=>s.has(t)?h("Cannot add the same private member more than once"):s instanceof WeakSet?s.add(t):s.set(t,e),y=(t,s,e,i)=>(p(t,s,"write to private field"),i?i.call(t,e):s.set(t,e),e);import{css as L,html as A,LitElement as T}from"lit";import{property as n}from"lit/decorators.js";import{hasAuthoredParts as g}from"../internal/authored.js";import{customElement as R}from"../internal/define.js";import{ensureId as f}from"../internal/ids.js";import{optOutBoolean as H}from"../internal/positioning.js";import{TABBABLE_SELECTOR as b}from"../internal/tabbable.js";import{ALERT_ANATOMY_GENERATED as M,ALERT_RENDER_SLOTS as C,fillAlertAnatomy as O}from"./AlertAnatomy.js";function k(t,s){for(let e=t.previousElementSibling;e;e=e.previousElementSibling){let i=e.matches(b)?e:e.querySelector(b);if(i){i.focus();return}}s?.isConnected&&s.focus()}var w=["status","alert"],a,o=class extends T{constructor(){super(...arguments);m(this,a,"status");this.closeLabel="Dismiss";this.dismissOnEscape=!1;this.open=!0;this.title="";this.dismissible=!1;this.previouslyFocused=null;this.fillAnatomy=()=>{g(this,M,C)||(O(this),this.syncHostAttributes())};this.handleKeydown=e=>{!this.dismissOnEscape||e.key!=="Escape"||(e.preventDefault(),this.setOpen(!1))};this.handleSlotChange=()=>{this.fillAnatomy(),this.syncHostAttributes()}}set alertRole(e){let i=w.includes(e)?e:"status",r=u(this,a);y(this,a,i),this.requestUpdate("alertRole",r)}get alertRole(){return u(this,a)}connectedCallback(){super.connectedCallback(),this.previouslyFocused=this.ownerDocument.activeElement??null,this.addEventListener("keydown",this.handleKeydown),this.syncHostAttributes(),this.hidden=!this.open,queueMicrotask(this.fillAnatomy)}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeydown),super.disconnectedCallback()}updated(e){e.has("alertRole")&&this.syncHostAttributes(),e.has("open")&&(this.hidden=!this.open),(e.has("title")||e.has("description")||e.has("dismissible"))&&this.fillAnatomy()}setOpen(e){this.open!==e&&(e||k(this,this.previouslyFocused),this.open=e,this.dispatchEvent(new CustomEvent("open-change",{detail:e,bubbles:!0,composed:!0})))}syncHostAttributes(){this.setAttribute("aria-live",this.alertRole==="alert"?"assertive":"polite");let e=this.querySelector("skdx-alert-title"),i=this.querySelector("skdx-alert-description");e&&this.setAttribute("aria-labelledby",f(e,"skdx-alert","title")),i&&this.setAttribute("aria-describedby",f(i,"skdx-alert","description"))}render(){return A`<slot @slotchange=${this.handleSlotChange}></slot>`}};a=new WeakMap,o.styles=L`
     :host {
       display: block;
     }
@@ -6,4 +6,4 @@ var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var o=(a,i,t,e
     :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};
+  `,l([n({attribute:"role",type:String,reflect:!0})],o.prototype,"alertRole",1),l([n({attribute:"close-label",type:String})],o.prototype,"closeLabel",2),l([n({attribute:"dismiss-on-escape",type:Boolean})],o.prototype,"dismissOnEscape",2),l([n({converter:H,reflect:!0})],o.prototype,"open",2),l([n({type:String})],o.prototype,"title",2),l([n({type:String})],o.prototype,"description",2),l([n({type:Boolean})],o.prototype,"dismissible",2),o=l([R("skdx-alert","alert","root")],o);export{o as SkdxAlert};

package/dist/alert/AlertAnatomy.cjs

@@ -0,0 +1 @@
+"use strict";var s=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var m=(t,e)=>{for(var l in e)s(t,l,{get:e[l],enumerable:!0})},p=(t,e,l,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of a(e))!d.call(t,r)&&r!==l&&s(t,r,{get:()=>e[r],enumerable:!(n=o(e,r))||n.enumerable});return t};var x=t=>p(s({},"__esModule",{value:!0}),t);var E={};m(E,{ALERT_ANATOMY_GENERATED:()=>c,ALERT_RENDER_SLOTS:()=>k,fillAlertAnatomy:()=>u});module.exports=x(E);var i=require("../internal/derive.cjs"),S=require("./AlertIcon.cjs"),R=require("./AlertTitle.cjs"),T=require("./AlertDescription.cjs"),N=require("./AlertAction.cjs"),_=require("./AlertClose.cjs"),c="data-skdx-alert-generated",k=["icon","action","close"];function A(t){let e=c,l=(0,i.claimSlot)(t,"close","skdx-alert-close",e);if(l)return t.dismissible||l.childNodes.length>0?l:null;if(!t.dismissible)return null;let n=document.createElement("skdx-alert-close");return n.setAttribute(e,"close"),n}function u(t){let e=c,l=[(0,i.claimSlot)(t,"icon","skdx-alert-icon",e),(0,i.textPart)(t,"skdx-alert-title",t.title,e),(0,i.textPart)(t,"skdx-alert-description",t.description,e),(0,i.claimSlot)(t,"action","skdx-alert-action",e),A(t)].filter(n=>n!==null);(0,i.applyChildren)(t,l)}0&&(module.exports={ALERT_ANATOMY_GENERATED,ALERT_RENDER_SLOTS,fillAlertAnatomy});

package/dist/alert/AlertAnatomy.d.cts

@@ -0,0 +1,16 @@
+import type { SkdxAlert } from './Alert.cjs';
+import './AlertIcon.cjs';
+import './AlertTitle.cjs';
+import './AlertDescription.cjs';
+import './AlertAction.cjs';
+import './AlertClose.cjs';
+/** @internal Marks a direct child of `<skdx-alert>` this module generated. */
+export declare const ALERT_ANATOMY_GENERATED = "data-skdx-alert-generated";
+/** @internal The slot markers the derived anatomy consumes, so they do not read as hand composition. */
+export declare const ALERT_RENDER_SLOTS: readonly ["icon", "action", "close"];
+/**
+ * Build the canonical anatomy: Icon, Title, Description, Action, and Close.
+ * Rebuilt in place on relevant changes; consumer's icon/action content survives.
+ * @internal
+ */
+export declare function fillAlertAnatomy(root: SkdxAlert): void;

package/dist/alert/AlertAnatomy.d.ts

@@ -0,0 +1,16 @@
+import type { SkdxAlert } from './Alert.js';
+import './AlertIcon.js';
+import './AlertTitle.js';
+import './AlertDescription.js';
+import './AlertAction.js';
+import './AlertClose.js';
+/** @internal Marks a direct child of `<skdx-alert>` this module generated. */
+export declare const ALERT_ANATOMY_GENERATED = "data-skdx-alert-generated";
+/** @internal The slot markers the derived anatomy consumes, so they do not read as hand composition. */
+export declare const ALERT_RENDER_SLOTS: readonly ["icon", "action", "close"];
+/**
+ * Build the canonical anatomy: Icon, Title, Description, Action, and Close.
+ * Rebuilt in place on relevant changes; consumer's icon/action content survives.
+ * @internal
+ */
+export declare function fillAlertAnatomy(root: SkdxAlert): void;

package/dist/alert/AlertAnatomy.js

@@ -0,0 +1 @@
+import{applyChildren as c,claimSlot as n,textPart as r}from"../internal/derive.js";import"./AlertIcon.js";import"./AlertTitle.js";import"./AlertDescription.js";import"./AlertAction.js";import"./AlertClose.js";var s="data-skdx-alert-generated",A=["icon","action","close"];function o(t){let e=s,l=n(t,"close","skdx-alert-close",e);if(l)return t.dismissible||l.childNodes.length>0?l:null;if(!t.dismissible)return null;let i=document.createElement("skdx-alert-close");return i.setAttribute(e,"close"),i}function u(t){let e=s,l=[n(t,"icon","skdx-alert-icon",e),r(t,"skdx-alert-title",t.title,e),r(t,"skdx-alert-description",t.description,e),n(t,"action","skdx-alert-action",e),o(t)].filter(i=>i!==null);c(t,l)}export{s as ALERT_ANATOMY_GENERATED,A as ALERT_RENDER_SLOTS,u as fillAlertAnatomy};

package/dist/alert/AlertClose.cjs

@@ -1,5 +1,10 @@
-"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}>
+"use strict";var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var f=(l,t)=>{for(var r in t)n(l,r,{get:t[r],enumerable:!0})},k=(l,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of u(t))!E.call(l,e)&&e!==r&&n(l,e,{get:()=>t[e],enumerable:!(s=m(t,e))||s.enumerable});return l};var v=l=>k(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={};f(y,{SkdxAlertClose:()=>o});module.exports=v(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.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??this.alertEl?.closeLabel??"Dismiss"}
+        @click=${this.handleClick}
+      >
         <slot></slot>
       </button>
     `}};o.shadowRootOptions=i.delegatesFocusShadowRootOptions,o.styles=[i.resetNativeControl,a.css`

package/dist/alert/AlertClose.d.cts

@@ -1,20 +1,21 @@
 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.
+ * `<skdx-alert-close>` — button that dismisses the alert by calling the parent
+ * `<skdx-alert>`'s `setOpen(false)`. Carries a default accessible name from the
+ * parent's `close-label` (defaulting to `"Dismiss"`). Dismissing moves focus
+ * rather than dropping it. Must be used inside `<skdx-alert>`.
  *
  * @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;
+    /**
+     * Accessible name for the dismiss button, overriding the parent alert's
+     * `close-label`.
+     * @default undefined — the parent alert's `close-label`, itself defaulting to `'Dismiss'`
+     */
+    label?: string;
     private alertEl;
     connectedCallback(): void;
     private readonly handleClick;

package/dist/alert/AlertClose.d.ts

@@ -1,20 +1,21 @@
 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.
+ * `<skdx-alert-close>` — button that dismisses the alert by calling the parent
+ * `<skdx-alert>`'s `setOpen(false)`. Carries a default accessible name from the
+ * parent's `close-label` (defaulting to `"Dismiss"`). Dismissing moves focus
+ * rather than dropping it. Must be used inside `<skdx-alert>`.
  *
  * @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;
+    /**
+     * Accessible name for the dismiss button, overriding the parent alert's
+     * `close-label`.
+     * @default undefined — the parent alert's `close-label`, itself defaulting to `'Dismiss'`
+     */
+    label?: string;
     private alertEl;
     connectedCallback(): void;
     private readonly handleClick;

package/dist/alert/AlertClose.js

@@ -1,9 +1,14 @@
-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}>
+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 E,delegatesFocusShadowRootOptions as f,resetNativeControl as k}from"../internal/styles.js";var e=class extends h{constructor(){super(...arguments);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??this.alertEl?.closeLabel??"Dismiss"}
+        @click=${this.handleClick}
+      >
         <slot></slot>
       </button>
-    `}};e.shadowRootOptions=k,e.styles=[v,p`
+    `}};e.shadowRootOptions=f,e.styles=[k,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};
+    `,E],n([b({type:String})],e.prototype,"label",2),e=n([u("skdx-alert-close","alert","close")],e);export{e as SkdxAlertClose};

package/dist/alert/index.cjs

@@ -1 +1 @@
-"use strict";var x=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var n=(o,r)=>{for(var t in r)x(o,t,{get:r[t],enumerable:!0})},s=(o,r,t,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let e of i(r))!c.call(o,e)&&e!==t&&x(o,e,{get:()=>r[e],enumerable:!(l=S(r,e))||l.enumerable});return o};var C=o=>s(x({},"__esModule",{value:!0}),o);var D={};n(D,{SkdxAlert:()=>p.SkdxAlert,SkdxAlertAction:()=>m.SkdxAlertAction,SkdxAlertClose:()=>k.SkdxAlertClose,SkdxAlertDescription:()=>d.SkdxAlertDescription,SkdxAlertIcon:()=>f.SkdxAlertIcon,SkdxAlertTitle:()=>A.SkdxAlertTitle});module.exports=C(D);var p=require("./Alert.cjs"),A=require("./AlertTitle.cjs"),d=require("./AlertDescription.cjs"),f=require("./AlertIcon.cjs"),k=require("./AlertClose.cjs"),m=require("./AlertAction.cjs");0&&(module.exports={SkdxAlert,SkdxAlertAction,SkdxAlertClose,SkdxAlertDescription,SkdxAlertIcon,SkdxAlertTitle});
+"use strict";var x=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var p=(e,r)=>{for(var t in r)x(e,t,{get:r[t],enumerable:!0})},A=(e,r,t,d)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of l(r))!m.call(e,o)&&o!==t&&x(e,o,{get:()=>r[o],enumerable:!(d=k(r,o))||d.enumerable});return e};var S=e=>A(x({},"__esModule",{value:!0}),e);var a={};p(a,{SkdxAlert:()=>f.SkdxAlert});module.exports=S(a);var f=require("./Alert.cjs");0&&(module.exports={SkdxAlert});

package/dist/alert/index.d.cts

@@ -1,6 +1 @@
 export { SkdxAlert } from './Alert.cjs';
-export { SkdxAlertTitle } from './AlertTitle.cjs';
-export { SkdxAlertDescription } from './AlertDescription.cjs';
-export { SkdxAlertIcon } from './AlertIcon.cjs';
-export { SkdxAlertClose } from './AlertClose.cjs';
-export { SkdxAlertAction } from './AlertAction.cjs';