@skdx/web-components 0.27.0 → 0.28.0

package/dist/alert-dialog/AlertDialogContent.cjs

@@ -1 +1 @@
-"use strict";var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var O=Object.prototype.hasOwnProperty;var L=(s,i)=>{for(var t in i)d(s,t,{get:i[t],enumerable:!0})},w=(s,i,t,e)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of A(i))!O.call(s,o)&&o!==t&&d(s,o,{get:()=>i[o],enumerable:!(e=h(i,o))||e.enumerable});return s};var C=s=>w(d({},"__esModule",{value:!0}),s),p=(s,i,t,e)=>{for(var o=e>1?void 0:e?h(i,t):i,n=s.length-1,c;n>=0;n--)(c=s[n])&&(o=(e?c(i,t,o):c(o))||o);return e&&o&&d(i,t,o),o};var F={};L(F,{SkdxAlertDialogContent:()=>l});module.exports=C(F);var f=require("lit"),m=require("../internal/closest.cjs"),g=require("../internal/define.cjs"),r=require("../internal/dismiss.cjs"),u=require("../internal/ids.cjs"),y=require("../internal/part.cjs"),b=require("../internal/styles.cjs");var a=0,E="",k="";function x(){if(a===0){let s=window.innerWidth-document.documentElement.clientWidth;E=document.body.style.overflow,k=document.body.style.paddingRight,document.body.style.overflow="hidden",s>0&&(document.body.style.paddingRight=`${s}px`)}a++}function v(){a=Math.max(0,a-1),a===0&&(document.body.style.overflow=E,document.body.style.paddingRight=k)}var D="[data-skdx-alert-dialog-cancel]",l=class extends f.LitElement{constructor(){super(...arguments);this.childObserver=new MutationObserver(()=>{this.adoptChildren(),this.syncHostAttributes()});this.rootEl=null;this.locked=!1;this.wasOpen=!1;this.previouslyFocused=null;this.observer=new MutationObserver(()=>this.syncNativeDialog());this.handleCancel=t=>{(0,r.dispatchEscapeKeyDown)(this,t)||t.preventDefault()};this.handleClose=()=>this.rootEl?.setOpen(!1);this.handleBackdropClick=t=>{t.target===this.nativeDialog&&(0,r.dispatchOutside)(this,"pointer-down-outside",t)};this.handleOutsideFocus=t=>{if(!this.rootEl?.open)return;let e=(0,r.focusOutsideTarget)(t);!e||this.contains(e)||(0,r.dispatchOutside)(this,"focus-outside",t)}}createRenderRoot(){let t=document.createElement("dialog");return t.setAttribute("part","content"),(0,y.applyHostPart)(t,"alert-dialog","content"),t.addEventListener("cancel",this.handleCancel),t.addEventListener("close",this.handleClose),t.addEventListener("click",this.handleBackdropClick),this.append(t),this.adoptChildren(),t}adoptChildren(){let t=this.nativeDialog;if(!t)return;let e=document.activeElement;for(let o of Array.from(this.childNodes))o!==t&&t.append(o);e&&document.activeElement!==e&&t.contains(e)&&e.focus({preventScroll:!0})}connectedCallback(){if(super.connectedCallback(),(0,b.installLightDomStyles)(),this.rootEl=(0,m.closestThroughPortal)(this,"skdx-alert-dialog"),!this.rootEl)throw new Error("<skdx-alert-dialog-content> must be used inside <skdx-alert-dialog>.");this.observer.observe(this.rootEl,{attributeFilter:["open"]}),this.childObserver.observe(this,{childList:!0}),document.addEventListener("focusin",this.handleOutsideFocus),this.syncHostAttributes()}disconnectedCallback(){this.observer.disconnect(),this.childObserver.disconnect(),document.removeEventListener("focusin",this.handleOutsideFocus),this.locked&&(v(),this.locked=!1),super.disconnectedCallback()}firstUpdated(){this.syncNativeDialog()}syncHostAttributes(){let t=this.rootEl;if(!t)return;this.id=t.contentId,this.setAttribute("role","alertdialog"),this.setAttribute("aria-modal","true");let e=this.querySelector("skdx-alert-dialog-title"),o=this.querySelector("skdx-alert-dialog-description");e&&this.setAttribute("aria-labelledby",(0,u.ensureId)(e,"skdx-alert-dialog-content","title")),o&&this.setAttribute("aria-describedby",(0,u.ensureId)(o,"skdx-alert-dialog-content","description"));let n=t.open?"open":"closed";this.setAttribute("data-state",n),this.nativeDialog?.setAttribute("data-state",n)}get nativeDialog(){return this.querySelector("dialog")}syncNativeDialog(){this.syncHostAttributes();let t=this.rootEl,e=this.nativeDialog;!t||!e||(t.open&&!e.open?(0,r.focusOnOpen)(()=>e.showModal?.()):!t.open&&e.open&&(0,r.focusOnOpen)(()=>e.close?.()),t.open&&!this.locked?(x(),this.locked=!0):!t.open&&this.locked&&(v(),this.locked=!1),this.syncAutoFocus(t.open))}syncAutoFocus(t){if(t!==this.wasOpen){if(this.wasOpen=t,t){this.previouslyFocused=document.activeElement,this.focusInitialElement();return}(0,r.dispatchAutoFocus)(this,"close-auto-focus")&&this.previouslyFocused&&document.contains(this.previouslyFocused)&&this.previouslyFocused.focus?.({preventScroll:!0})}}focusInitialElement(){requestAnimationFrame(()=>(0,r.focusOnOpen)(()=>{if(!(0,r.dispatchAutoFocus)(this,"open-auto-focus"))return;(this.querySelector(D)??this).focus?.({preventScroll:!0})}))}};l=p([(0,g.customElement)("skdx-alert-dialog-content")],l);0&&(module.exports={SkdxAlertDialogContent});
+"use strict";var a=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var A=Object.prototype.hasOwnProperty;var D=(r,s)=>{for(var t in s)a(r,t,{get:s[t],enumerable:!0})},L=(r,s,t,e)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of O(s))!A.call(r,i)&&i!==t&&a(r,i,{get:()=>s[i],enumerable:!(e=f(s,i))||e.enumerable});return r};var x=r=>L(a({},"__esModule",{value:!0}),r),d=(r,s,t,e)=>{for(var i=e>1?void 0:e?f(s,t):s,u=r.length-1,h;u>=0;u--)(h=r[u])&&(i=(e?h(s,t,i):h(i))||i);return e&&i&&a(s,t,i),i};var S={};D(S,{SkdxAlertDialogContent:()=>n});module.exports=x(S);var y=require("lit"),p=require("lit/decorators.js"),v=require("../internal/aria-part.cjs"),g=require("../internal/closest.cjs"),b=require("../internal/define.cjs"),o=require("../internal/dismiss.cjs"),c=require("../internal/focus-targets.cjs"),E=require("../internal/part.cjs"),k=require("../internal/styles.cjs");var l=0,F="",w="";function H(){if(l===0){let r=window.innerWidth-document.documentElement.clientWidth;F=document.body.style.overflow,w=document.body.style.paddingRight,document.body.style.overflow="hidden",r>0&&(document.body.style.paddingRight=`${r}px`)}l++}function m(){l=Math.max(0,l-1),l===0&&(document.body.style.overflow=F,document.body.style.paddingRight=w)}var M="[data-skdx-alert-dialog-cancel]",n=class extends y.LitElement{constructor(){super(...arguments);this.childObserver=new MutationObserver(()=>{this.adoptChildren(),this.syncHostAttributes()});this.rootEl=null;this.locked=!1;this.wasOpen=!1;this.previouslyFocused=null;this.observer=new MutationObserver(()=>this.syncNativeDialog());this.handleCancel=t=>{let e=(this.rootEl?.dismiss??"escape")==="escape";(!(0,o.dispatchEscapeKeyDown)(this,t)||!e)&&t.preventDefault()};this.handleClose=()=>this.rootEl?.setOpen(!1);this.handleBackdropPointerDown=t=>{let e=(0,o.backdropPointerDown)(t,this.nativeDialog);e&&(0,o.dispatchOutside)(this,"pointer-down-outside",e)};this.handleOutsideFocus=t=>{if(!this.rootEl?.open)return;let e=(0,o.focusOutsideTarget)(t);!e||this.contains(e)||(0,o.dispatchOutside)(this,"focus-outside",t)}}createRenderRoot(){let t=document.createElement("dialog");return t.setAttribute("part","content"),(0,E.applyHostPart)(t,"alert-dialog","content"),t.addEventListener("cancel",this.handleCancel),t.addEventListener("close",this.handleClose),t.addEventListener("pointerdown",this.handleBackdropPointerDown),this.append(t),this.adoptChildren(),t}adoptChildren(){let t=this.nativeDialog;if(!t)return;let e=document.activeElement;for(let i of Array.from(this.childNodes))i!==t&&t.append(i);e&&document.activeElement!==e&&t.contains(e)&&e.focus({preventScroll:!0})}connectedCallback(){if(super.connectedCallback(),(0,k.installLightDomStyles)(),this.rootEl=(0,g.closestThroughPortal)(this,"skdx-alert-dialog"),!this.rootEl)throw new Error("<skdx-alert-dialog-content> must be used inside <skdx-alert-dialog>.");this.observer.observe(this.rootEl,{attributeFilter:["open","dismiss"]}),this.childObserver.observe(this,{childList:!0,subtree:!0}),document.addEventListener("focusin",this.handleOutsideFocus),this.syncHostAttributes()}disconnectedCallback(){this.observer.disconnect(),this.childObserver.disconnect(),document.removeEventListener("focusin",this.handleOutsideFocus),this.locked&&(m(),this.locked=!1),super.disconnectedCallback()}firstUpdated(){this.syncNativeDialog()}syncHostAttributes(){let t=this.rootEl;if(!t)return;this.id?t.contentId=this.id:this.id=t.contentId,this.setAttribute("role","alertdialog"),this.setAttribute("aria-modal","true"),(0,v.syncPartIdRef)(this,"aria-labelledby",this.querySelector("skdx-alert-dialog-title"),"skdx-alert-dialog-content","title"),(0,v.syncPartIdRef)(this,"aria-describedby",this.querySelector("skdx-alert-dialog-description"),"skdx-alert-dialog-content","description");let e=t.open?"open":"closed";this.setAttribute("data-state",e),this.setAttribute("data-dismiss",t.dismiss),this.nativeDialog?.setAttribute("data-state",e)}get nativeDialog(){return this.querySelector("dialog")}syncNativeDialog(){this.syncHostAttributes();let t=this.rootEl,e=this.nativeDialog;!t||!e||(t.open&&!e.open?(0,o.focusOnOpen)(()=>e.showModal?.()):!t.open&&e.open&&(0,o.focusOnOpen)(()=>e.close?.()),t.open&&!this.locked?(H(),this.locked=!0):!t.open&&this.locked&&(m(),this.locked=!1),this.syncAutoFocus(t.open))}syncAutoFocus(t){if(t!==this.wasOpen){if(this.wasOpen=t,t){this.previouslyFocused=document.activeElement,this.focusInitialElement();return}(0,o.dispatchAutoFocus)(this,"close-auto-focus")&&((0,c.applyFinalFocus)(this.finalFocus,"AlertDialog")||this.previouslyFocused&&this.previouslyFocused!==document.body&&document.contains(this.previouslyFocused)&&this.previouslyFocused.focus?.({preventScroll:!0}))}}focusInitialElement(){requestAnimationFrame(()=>(0,o.focusOnOpen)(()=>{if(!(0,o.dispatchAutoFocus)(this,"open-auto-focus"))return;let t=(0,c.resolveFocusSelector)(this,this.initialFocus,"initialFocus","AlertDialog"),e=this.querySelector(M);(t??e??this).focus?.({preventScroll:!0})}))}};d([(0,p.property)({type:String,attribute:"initial-focus"})],n.prototype,"initialFocus",2),d([(0,p.property)({type:String,attribute:"final-focus"})],n.prototype,"finalFocus",2),n=d([(0,b.customElement)("skdx-alert-dialog-content")],n);0&&(module.exports={SkdxAlertDialogContent});

package/dist/alert-dialog/AlertDialogContent.d.cts

@@ -1,66 +1,40 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-alert-dialog-content>` — the alert dialog's panel. Renders a native
- * `<dialog>` in the **light DOM** and imperatively calls `showModal()`/`close()` as
- * the ancestor `<skdx-alert-dialog>`'s open state changes, giving focus
- * trapping and top-layer stacking for free (same approach as
- * `<skdx-dialog-content>` — see `dialogContract`'s doc comment for why Portal/
- * Overlay collapse into the native element instead of separate parts).
+ * Alert dialog panel: renders native `<dialog>` in light DOM and calls
+ * showModal() / close() as ancestor open state changes. Outside interaction only
+ * reports (via interact-outside / pointer-down-outside / focus-outside), never closes
+ * — only Escape or action/cancel click closes. Initial focus on Cancel button or
+ * initial-focus selector, returns to previous focus on close. Both fire open-auto-focus
+ * / close-auto-focus events. Carries data-dismiss, aria attributes stay on host.
+ * Must be inside <skdx-alert-dialog>.
  *
- * Unlike `<skdx-dialog-content>`, an outside interaction never closes it —
- * only Escape (unless an `escape-key-down` listener calls
- * `event.preventDefault()`) or an explicit `<skdx-alert-dialog-action>` /
- * `<skdx-alert-dialog-cancel>` click. It still *reports* outside interaction
- * (a backdrop click, or focus moving outside) as
- * `interact-outside` followed by the specific `pointer-down-outside` /
- * `focus-outside`, so a consumer can nudge the dialog or flash the Cancel
- * button; there is nothing to veto, since nothing was going to happen.
- *
- * Initial focus lands on the Cancel button (the "default to the safe action"
- * alertdialog guidance), falling back to the container itself, and focus
- * returns to whatever was focused before on close — both announced first as
- * `open-auto-focus`/`close-auto-focus`.
- *
- * `role`, `aria-modal`, `aria-labelledby`, and `aria-describedby` stay on this
- * host element rather than on the `<dialog>`: the host is the element carrying
- * {@link SkdxAlertDialog.contentId}, which the trigger's `aria-controls` points
- * at. Must be used inside `<skdx-alert-dialog>`.
- *
- * @fires escape-key-down - Escape was pressed while open (detail: the native `cancel` Event). Preventable.
- * @fires pointer-down-outside - A click landed on the backdrop while open (detail: the MouseEvent). Notification only — it never closes the alert dialog.
- * @fires focus-outside - Focus moved to an element outside this content while open (detail: the original focusin). Notification only.
- * @fires interact-outside - Either kind of outside interaction, fired immediately before the specific event. Notification only.
- * @fires open-auto-focus - Fired before focus is moved into the content on open. Preventing it leaves focus where it is.
- * @fires close-auto-focus - Fired before focus is returned to whatever was focused before opening. Preventing it suppresses the return.
- * @csspart content - The native `<dialog>` element. **`::part(content)` does not reach it.**
- * This element renders into the light DOM (see `createRenderRoot` below) and `::part()` only
- * matches inside a shadow root, so the `part` attribute is inert here. It is kept so the name
- * matches the shadow-DOM components and the styling-hooks contract. Style it as an ordinary
- * descendant instead: `skdx-alert-dialog-content > dialog { … }`.
+ * @fires escape-key-down - Fires when Escape is pressed while open; preventDefault() keeps it open.
+ * @fires pointer-down-outside - Fires on pointer-down outside the panel while open; notification only.
+ * @fires focus-outside - Fires when focus moves outside the panel while open; carries custom event.
+ * @fires interact-outside - Fires before pointer or focus outside interactions; notification only.
+ * @fires open-auto-focus - Before focus moves in on open (preventable).
+ * @fires close-auto-focus - Before focus returns on close (preventable).
+ * @csspart content - Native `<dialog>`. Light DOM element; ::part() doesn't reach it. Use descendant selector instead.
  */
 export declare class SkdxAlertDialogContent extends LitElement {
+    /** Light DOM with <dialog> as render root; @skdx/skins is document stylesheet that can't cross shadow boundary. */
+    createRenderRoot(): HTMLElement;
+    /** Move consumer's children into <dialog> (no slot in light DOM). Move causes blur, so restore focus if child was focused. */
+    private adoptChildren;
+    /** Watch children post-render and title/description removals; needs subtree since parts are moved into <dialog>. */
+    private readonly childObserver;
     /**
-     * Light DOM, with the `<dialog>` itself as the render root — the same move
-     * `<skdx-dialog-content>` makes, for the same reason. `@skdx/skins` is a
-     * document stylesheet that cannot cross a shadow boundary, and its scrim
-     * selector `dialog.skdx-alert-dialog__content::backdrop` is tag-qualified, so
-     * the class has to sit on the `<dialog>` and the `<dialog>` has to be in the
-     * consumer's tree. See `<skdx-dialog-content>`'s `createRenderRoot()` for the
-     * full argument.
+     * CSS selector for element to focus on open (instead of Cancel button).
+     * Resolved against the panel; no match falls back to Cancel, then panel. Warns if no match.
+     * @default undefined
      */
-    createRenderRoot(): HTMLElement;
+    initialFocus?: string;
     /**
-     * Moves everything the consumer put in this element into the `<dialog>` —
-     * there is no `<slot>` in a light-DOM element to project them through.
-     *
-     * Terminates without a re-entrancy flag: {@link childObserver} watches this
-     * host's `childList` only (no `subtree`), so the appends *into* the
-     * `<dialog>` are invisible to it and the pass its removals queue finds
-     * nothing left to move.
+     * CSS selector for element to focus on close (instead of previous). Resolved
+     * against the whole document (target often isn't the trigger).
+     * @default undefined
      */
-    private adoptChildren;
-    /** Children appended after the first render still have to end up in the `<dialog>`. */
-    private readonly childObserver;
+    finalFocus?: string;
     private rootEl;
     private locked;
     private wasOpen;
@@ -70,17 +44,19 @@ export declare class SkdxAlertDialogContent extends LitElement {
     disconnectedCallback(): void;
     protected firstUpdated(): void;
     private syncHostAttributes;
-    /**
-     * The `<dialog>` created by {@link createRenderRoot} — a light-DOM child, so
-     * this is a plain `querySelector` rather than a walk through `shadowRoot`.
-     */
+    /** The `<dialog>` created by {@link createRenderRoot}, a light-DOM child. */
     private get nativeDialog();
     private syncNativeDialog;
     private syncAutoFocus;
     private focusInitialElement;
     private readonly handleCancel;
     private readonly handleClose;
-    private readonly handleBackdropClick;
+    /**
+     * The backdrop path, on `pointerdown` not `click`: same phase and payload
+     * as every other outside pointer-down, keeping `pointer-down-outside` one
+     * event across all five frameworks. Never dismisses, but still reports.
+     */
+    private readonly handleBackdropPointerDown;
     private readonly handleOutsideFocus;
 }
 declare global {

package/dist/alert-dialog/AlertDialogContent.d.ts

@@ -1,66 +1,40 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-alert-dialog-content>` — the alert dialog's panel. Renders a native
- * `<dialog>` in the **light DOM** and imperatively calls `showModal()`/`close()` as
- * the ancestor `<skdx-alert-dialog>`'s open state changes, giving focus
- * trapping and top-layer stacking for free (same approach as
- * `<skdx-dialog-content>` — see `dialogContract`'s doc comment for why Portal/
- * Overlay collapse into the native element instead of separate parts).
+ * Alert dialog panel: renders native `<dialog>` in light DOM and calls
+ * showModal() / close() as ancestor open state changes. Outside interaction only
+ * reports (via interact-outside / pointer-down-outside / focus-outside), never closes
+ * — only Escape or action/cancel click closes. Initial focus on Cancel button or
+ * initial-focus selector, returns to previous focus on close. Both fire open-auto-focus
+ * / close-auto-focus events. Carries data-dismiss, aria attributes stay on host.
+ * Must be inside <skdx-alert-dialog>.
  *
- * Unlike `<skdx-dialog-content>`, an outside interaction never closes it —
- * only Escape (unless an `escape-key-down` listener calls
- * `event.preventDefault()`) or an explicit `<skdx-alert-dialog-action>` /
- * `<skdx-alert-dialog-cancel>` click. It still *reports* outside interaction
- * (a backdrop click, or focus moving outside) as
- * `interact-outside` followed by the specific `pointer-down-outside` /
- * `focus-outside`, so a consumer can nudge the dialog or flash the Cancel
- * button; there is nothing to veto, since nothing was going to happen.
- *
- * Initial focus lands on the Cancel button (the "default to the safe action"
- * alertdialog guidance), falling back to the container itself, and focus
- * returns to whatever was focused before on close — both announced first as
- * `open-auto-focus`/`close-auto-focus`.
- *
- * `role`, `aria-modal`, `aria-labelledby`, and `aria-describedby` stay on this
- * host element rather than on the `<dialog>`: the host is the element carrying
- * {@link SkdxAlertDialog.contentId}, which the trigger's `aria-controls` points
- * at. Must be used inside `<skdx-alert-dialog>`.
- *
- * @fires escape-key-down - Escape was pressed while open (detail: the native `cancel` Event). Preventable.
- * @fires pointer-down-outside - A click landed on the backdrop while open (detail: the MouseEvent). Notification only — it never closes the alert dialog.
- * @fires focus-outside - Focus moved to an element outside this content while open (detail: the original focusin). Notification only.
- * @fires interact-outside - Either kind of outside interaction, fired immediately before the specific event. Notification only.
- * @fires open-auto-focus - Fired before focus is moved into the content on open. Preventing it leaves focus where it is.
- * @fires close-auto-focus - Fired before focus is returned to whatever was focused before opening. Preventing it suppresses the return.
- * @csspart content - The native `<dialog>` element. **`::part(content)` does not reach it.**
- * This element renders into the light DOM (see `createRenderRoot` below) and `::part()` only
- * matches inside a shadow root, so the `part` attribute is inert here. It is kept so the name
- * matches the shadow-DOM components and the styling-hooks contract. Style it as an ordinary
- * descendant instead: `skdx-alert-dialog-content > dialog { … }`.
+ * @fires escape-key-down - Fires when Escape is pressed while open; preventDefault() keeps it open.
+ * @fires pointer-down-outside - Fires on pointer-down outside the panel while open; notification only.
+ * @fires focus-outside - Fires when focus moves outside the panel while open; carries custom event.
+ * @fires interact-outside - Fires before pointer or focus outside interactions; notification only.
+ * @fires open-auto-focus - Before focus moves in on open (preventable).
+ * @fires close-auto-focus - Before focus returns on close (preventable).
+ * @csspart content - Native `<dialog>`. Light DOM element; ::part() doesn't reach it. Use descendant selector instead.
  */
 export declare class SkdxAlertDialogContent extends LitElement {
+    /** Light DOM with <dialog> as render root; @skdx/skins is document stylesheet that can't cross shadow boundary. */
+    createRenderRoot(): HTMLElement;
+    /** Move consumer's children into <dialog> (no slot in light DOM). Move causes blur, so restore focus if child was focused. */
+    private adoptChildren;
+    /** Watch children post-render and title/description removals; needs subtree since parts are moved into <dialog>. */
+    private readonly childObserver;
     /**
-     * Light DOM, with the `<dialog>` itself as the render root — the same move
-     * `<skdx-dialog-content>` makes, for the same reason. `@skdx/skins` is a
-     * document stylesheet that cannot cross a shadow boundary, and its scrim
-     * selector `dialog.skdx-alert-dialog__content::backdrop` is tag-qualified, so
-     * the class has to sit on the `<dialog>` and the `<dialog>` has to be in the
-     * consumer's tree. See `<skdx-dialog-content>`'s `createRenderRoot()` for the
-     * full argument.
+     * CSS selector for element to focus on open (instead of Cancel button).
+     * Resolved against the panel; no match falls back to Cancel, then panel. Warns if no match.
+     * @default undefined
      */
-    createRenderRoot(): HTMLElement;
+    initialFocus?: string;
     /**
-     * Moves everything the consumer put in this element into the `<dialog>` —
-     * there is no `<slot>` in a light-DOM element to project them through.
-     *
-     * Terminates without a re-entrancy flag: {@link childObserver} watches this
-     * host's `childList` only (no `subtree`), so the appends *into* the
-     * `<dialog>` are invisible to it and the pass its removals queue finds
-     * nothing left to move.
+     * CSS selector for element to focus on close (instead of previous). Resolved
+     * against the whole document (target often isn't the trigger).
+     * @default undefined
      */
-    private adoptChildren;
-    /** Children appended after the first render still have to end up in the `<dialog>`. */
-    private readonly childObserver;
+    finalFocus?: string;
     private rootEl;
     private locked;
     private wasOpen;
@@ -70,17 +44,19 @@ export declare class SkdxAlertDialogContent extends LitElement {
     disconnectedCallback(): void;
     protected firstUpdated(): void;
     private syncHostAttributes;
-    /**
-     * The `<dialog>` created by {@link createRenderRoot} — a light-DOM child, so
-     * this is a plain `querySelector` rather than a walk through `shadowRoot`.
-     */
+    /** The `<dialog>` created by {@link createRenderRoot}, a light-DOM child. */
     private get nativeDialog();
     private syncNativeDialog;
     private syncAutoFocus;
     private focusInitialElement;
     private readonly handleCancel;
     private readonly handleClose;
-    private readonly handleBackdropClick;
+    /**
+     * The backdrop path, on `pointerdown` not `click`: same phase and payload
+     * as every other outside pointer-down, keeping `pointer-down-outside` one
+     * event across all five frameworks. Never dismisses, but still reports.
+     */
+    private readonly handleBackdropPointerDown;
     private readonly handleOutsideFocus;
 }
 declare global {

package/dist/alert-dialog/AlertDialogContent.js

@@ -1 +1 @@
-var g=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var c=(i,r,t,e)=>{for(var o=e>1?void 0:e?y(r,t):r,s=i.length-1,a;s>=0;s--)(a=i[s])&&(o=(e?a(r,t,o):a(o))||o);return e&&o&&g(r,t,o),o};import{LitElement as b}from"lit";import{closestThroughPortal as E}from"../internal/closest.js";import{customElement as k}from"../internal/define.js";import{dispatchAutoFocus as u,dispatchEscapeKeyDown as A,dispatchOutside as h,focusOnOpen as d,focusOutsideTarget as O}from"../internal/dismiss.js";import{ensureId as p}from"../internal/ids.js";import{applyHostPart as L}from"../internal/part.js";import{installLightDomStyles as w}from"../internal/styles.js";var n=0,f="",m="";function C(){if(n===0){let i=window.innerWidth-document.documentElement.clientWidth;f=document.body.style.overflow,m=document.body.style.paddingRight,document.body.style.overflow="hidden",i>0&&(document.body.style.paddingRight=`${i}px`)}n++}function v(){n=Math.max(0,n-1),n===0&&(document.body.style.overflow=f,document.body.style.paddingRight=m)}var x="[data-skdx-alert-dialog-cancel]",l=class extends b{constructor(){super(...arguments);this.childObserver=new MutationObserver(()=>{this.adoptChildren(),this.syncHostAttributes()});this.rootEl=null;this.locked=!1;this.wasOpen=!1;this.previouslyFocused=null;this.observer=new MutationObserver(()=>this.syncNativeDialog());this.handleCancel=t=>{A(this,t)||t.preventDefault()};this.handleClose=()=>this.rootEl?.setOpen(!1);this.handleBackdropClick=t=>{t.target===this.nativeDialog&&h(this,"pointer-down-outside",t)};this.handleOutsideFocus=t=>{if(!this.rootEl?.open)return;let e=O(t);!e||this.contains(e)||h(this,"focus-outside",t)}}createRenderRoot(){let t=document.createElement("dialog");return t.setAttribute("part","content"),L(t,"alert-dialog","content"),t.addEventListener("cancel",this.handleCancel),t.addEventListener("close",this.handleClose),t.addEventListener("click",this.handleBackdropClick),this.append(t),this.adoptChildren(),t}adoptChildren(){let t=this.nativeDialog;if(!t)return;let e=document.activeElement;for(let o of Array.from(this.childNodes))o!==t&&t.append(o);e&&document.activeElement!==e&&t.contains(e)&&e.focus({preventScroll:!0})}connectedCallback(){if(super.connectedCallback(),w(),this.rootEl=E(this,"skdx-alert-dialog"),!this.rootEl)throw new Error("<skdx-alert-dialog-content> must be used inside <skdx-alert-dialog>.");this.observer.observe(this.rootEl,{attributeFilter:["open"]}),this.childObserver.observe(this,{childList:!0}),document.addEventListener("focusin",this.handleOutsideFocus),this.syncHostAttributes()}disconnectedCallback(){this.observer.disconnect(),this.childObserver.disconnect(),document.removeEventListener("focusin",this.handleOutsideFocus),this.locked&&(v(),this.locked=!1),super.disconnectedCallback()}firstUpdated(){this.syncNativeDialog()}syncHostAttributes(){let t=this.rootEl;if(!t)return;this.id=t.contentId,this.setAttribute("role","alertdialog"),this.setAttribute("aria-modal","true");let e=this.querySelector("skdx-alert-dialog-title"),o=this.querySelector("skdx-alert-dialog-description");e&&this.setAttribute("aria-labelledby",p(e,"skdx-alert-dialog-content","title")),o&&this.setAttribute("aria-describedby",p(o,"skdx-alert-dialog-content","description"));let s=t.open?"open":"closed";this.setAttribute("data-state",s),this.nativeDialog?.setAttribute("data-state",s)}get nativeDialog(){return this.querySelector("dialog")}syncNativeDialog(){this.syncHostAttributes();let t=this.rootEl,e=this.nativeDialog;!t||!e||(t.open&&!e.open?d(()=>e.showModal?.()):!t.open&&e.open&&d(()=>e.close?.()),t.open&&!this.locked?(C(),this.locked=!0):!t.open&&this.locked&&(v(),this.locked=!1),this.syncAutoFocus(t.open))}syncAutoFocus(t){if(t!==this.wasOpen){if(this.wasOpen=t,t){this.previouslyFocused=document.activeElement,this.focusInitialElement();return}u(this,"close-auto-focus")&&this.previouslyFocused&&document.contains(this.previouslyFocused)&&this.previouslyFocused.focus?.({preventScroll:!0})}}focusInitialElement(){requestAnimationFrame(()=>d(()=>{if(!u(this,"open-auto-focus"))return;(this.querySelector(x)??this).focus?.({preventScroll:!0})}))}};l=c([k("skdx-alert-dialog-content")],l);export{l as SkdxAlertDialogContent};
+var g=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var l=(o,r,t,e)=>{for(var i=e>1?void 0:e?b(r,t):r,a=o.length-1,d;a>=0;a--)(d=o[a])&&(i=(e?d(r,t,i):d(i))||i);return e&&i&&g(r,t,i),i};import{LitElement as E}from"lit";import{property as u}from"lit/decorators.js";import{syncPartIdRef as h}from"../internal/aria-part.js";import{closestThroughPortal as k}from"../internal/closest.js";import{customElement as F}from"../internal/define.js";import{backdropPointerDown as w,dispatchAutoFocus as p,dispatchEscapeKeyDown as O,dispatchOutside as v,focusOnOpen as c,focusOutsideTarget as A}from"../internal/dismiss.js";import{applyFinalFocus as D,resolveFocusSelector as L}from"../internal/focus-targets.js";import{applyHostPart as x}from"../internal/part.js";import{installLightDomStyles as H}from"../internal/styles.js";var n=0,m="",y="";function M(){if(n===0){let o=window.innerWidth-document.documentElement.clientWidth;m=document.body.style.overflow,y=document.body.style.paddingRight,document.body.style.overflow="hidden",o>0&&(document.body.style.paddingRight=`${o}px`)}n++}function f(){n=Math.max(0,n-1),n===0&&(document.body.style.overflow=m,document.body.style.paddingRight=y)}var S="[data-skdx-alert-dialog-cancel]",s=class extends E{constructor(){super(...arguments);this.childObserver=new MutationObserver(()=>{this.adoptChildren(),this.syncHostAttributes()});this.rootEl=null;this.locked=!1;this.wasOpen=!1;this.previouslyFocused=null;this.observer=new MutationObserver(()=>this.syncNativeDialog());this.handleCancel=t=>{let e=(this.rootEl?.dismiss??"escape")==="escape";(!O(this,t)||!e)&&t.preventDefault()};this.handleClose=()=>this.rootEl?.setOpen(!1);this.handleBackdropPointerDown=t=>{let e=w(t,this.nativeDialog);e&&v(this,"pointer-down-outside",e)};this.handleOutsideFocus=t=>{if(!this.rootEl?.open)return;let e=A(t);!e||this.contains(e)||v(this,"focus-outside",t)}}createRenderRoot(){let t=document.createElement("dialog");return t.setAttribute("part","content"),x(t,"alert-dialog","content"),t.addEventListener("cancel",this.handleCancel),t.addEventListener("close",this.handleClose),t.addEventListener("pointerdown",this.handleBackdropPointerDown),this.append(t),this.adoptChildren(),t}adoptChildren(){let t=this.nativeDialog;if(!t)return;let e=document.activeElement;for(let i of Array.from(this.childNodes))i!==t&&t.append(i);e&&document.activeElement!==e&&t.contains(e)&&e.focus({preventScroll:!0})}connectedCallback(){if(super.connectedCallback(),H(),this.rootEl=k(this,"skdx-alert-dialog"),!this.rootEl)throw new Error("<skdx-alert-dialog-content> must be used inside <skdx-alert-dialog>.");this.observer.observe(this.rootEl,{attributeFilter:["open","dismiss"]}),this.childObserver.observe(this,{childList:!0,subtree:!0}),document.addEventListener("focusin",this.handleOutsideFocus),this.syncHostAttributes()}disconnectedCallback(){this.observer.disconnect(),this.childObserver.disconnect(),document.removeEventListener("focusin",this.handleOutsideFocus),this.locked&&(f(),this.locked=!1),super.disconnectedCallback()}firstUpdated(){this.syncNativeDialog()}syncHostAttributes(){let t=this.rootEl;if(!t)return;this.id?t.contentId=this.id:this.id=t.contentId,this.setAttribute("role","alertdialog"),this.setAttribute("aria-modal","true"),h(this,"aria-labelledby",this.querySelector("skdx-alert-dialog-title"),"skdx-alert-dialog-content","title"),h(this,"aria-describedby",this.querySelector("skdx-alert-dialog-description"),"skdx-alert-dialog-content","description");let e=t.open?"open":"closed";this.setAttribute("data-state",e),this.setAttribute("data-dismiss",t.dismiss),this.nativeDialog?.setAttribute("data-state",e)}get nativeDialog(){return this.querySelector("dialog")}syncNativeDialog(){this.syncHostAttributes();let t=this.rootEl,e=this.nativeDialog;!t||!e||(t.open&&!e.open?c(()=>e.showModal?.()):!t.open&&e.open&&c(()=>e.close?.()),t.open&&!this.locked?(M(),this.locked=!0):!t.open&&this.locked&&(f(),this.locked=!1),this.syncAutoFocus(t.open))}syncAutoFocus(t){if(t!==this.wasOpen){if(this.wasOpen=t,t){this.previouslyFocused=document.activeElement,this.focusInitialElement();return}p(this,"close-auto-focus")&&(D(this.finalFocus,"AlertDialog")||this.previouslyFocused&&this.previouslyFocused!==document.body&&document.contains(this.previouslyFocused)&&this.previouslyFocused.focus?.({preventScroll:!0}))}}focusInitialElement(){requestAnimationFrame(()=>c(()=>{if(!p(this,"open-auto-focus"))return;let t=L(this,this.initialFocus,"initialFocus","AlertDialog"),e=this.querySelector(S);(t??e??this).focus?.({preventScroll:!0})}))}};l([u({type:String,attribute:"initial-focus"})],s.prototype,"initialFocus",2),l([u({type:String,attribute:"final-focus"})],s.prototype,"finalFocus",2),s=l([F("skdx-alert-dialog-content")],s);export{s as SkdxAlertDialogContent};

package/dist/alert-dialog/AlertDialogOverlay.cjs

@@ -1,15 +1,10 @@
-"use strict";var l=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var b=(o,e)=>{for(var s in e)l(o,s,{get:e[s],enumerable:!0})},m=(o,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!g.call(o,t)&&t!==s&&l(o,t,{get:()=>e[t],enumerable:!(r=c(e,t))||r.enumerable});return o};var y=o=>m(l({},"__esModule",{value:!0}),o),h=(o,e,s,r)=>{for(var t=r>1?void 0:r?c(e,s):e,n=o.length-1,d;n>=0;n--)(d=o[n])&&(t=(r?d(e,s,t):d(t))||t);return r&&t&&l(e,s,t),t};var k={};b(k,{SkdxAlertDialogOverlay:()=>a});module.exports=y(k);var i=require("lit"),p=require("../internal/closest.cjs"),v=require("../internal/define.cjs");var a=class extends i.LitElement{constructor(){super(...arguments);this.alertDialogEl=null;this.observer=new MutationObserver(()=>this.syncHostState())}connectedCallback(){if(super.connectedCallback(),this.alertDialogEl=(0,p.closestThroughPortal)(this,"skdx-alert-dialog"),!this.alertDialogEl)throw new Error("<skdx-alert-dialog-overlay> must be used inside <skdx-alert-dialog>.");this.observer.observe(this.alertDialogEl,{attributeFilter:["open"]}),this.syncHostState()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}syncHostState(){let s=this.alertDialogEl?.open??!1;this.setAttribute("data-state",s?"open":"closed"),this.hidden=!s}render(){return i.html`<slot></slot>`}};a.styles=i.css`
+"use strict";var i=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var b=(o,e)=>{for(var r in e)i(o,r,{get:e[r],enumerable:!0})},g=(o,e,r,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!m.call(o,t)&&t!==r&&i(o,t,{get:()=>e[t],enumerable:!(s=c(e,t))||s.enumerable});return o};var k=o=>g(i({},"__esModule",{value:!0}),o),p=(o,e,r,s)=>{for(var t=s>1?void 0:s?c(e,r):e,n=o.length-1,d;n>=0;n--)(d=o[n])&&(t=(s?d(e,r,t):d(t))||t);return s&&t&&i(e,r,t),t};var y={};b(y,{SkdxAlertDialogOverlay:()=>l});module.exports=k(y);var a=require("lit"),v=require("../internal/closest.cjs"),h=require("../internal/define.cjs");var l=class extends a.LitElement{constructor(){super(...arguments);this.alertDialogEl=null;this.observer=new MutationObserver(()=>this.syncHostState())}connectedCallback(){if(super.connectedCallback(),this.alertDialogEl=(0,v.closestThroughPortal)(this,"skdx-alert-dialog"),!this.alertDialogEl)throw new Error("<skdx-alert-dialog-overlay> must be used inside <skdx-alert-dialog>.");this.observer.observe(this.alertDialogEl,{attributeFilter:["open"]}),this.syncHostState()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}syncHostState(){let r=this.alertDialogEl?.open??!1;this.setAttribute("data-state",r?"open":"closed"),this.hidden=!r}render(){return a.html`<slot></slot>`}};l.styles=a.css`
     :host {
       display: block;
-      /* Parity with React's AlertDialogOverlay. Inert here — the dialog and its
-         backdrop sit in the top layer above this host, and this host is inert
-         while the dialog is modal — but it keeps the rendered style identical
-         across ports and survives an ancestor that sets pointer-events: none.
-         A :host rule, which the spec ranks below any outer-document rule
-         targeting the host, so a consumer can still override it. */
+      /* Inert (dialog in top layer), but pointer-events: auto survives ancestor pointer-events: none. :host rank allows consumer override. */
       pointer-events: auto;
     }
     :host([hidden]) {
       display: none;
     }
-  `,a=h([(0,v.customElement)("skdx-alert-dialog-overlay","alert-dialog","overlay")],a);0&&(module.exports={SkdxAlertDialogOverlay});
+  `,l=p([(0,h.customElement)("skdx-alert-dialog-overlay","alert-dialog","overlay")],l);0&&(module.exports={SkdxAlertDialogOverlay});

package/dist/alert-dialog/AlertDialogOverlay.d.cts

@@ -1,22 +1,8 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-alert-dialog-overlay>` — the scrim rendered behind
- * `<skdx-alert-dialog-content>`, typically styled to dim the page. Identical to
- * `<skdx-dialog-overlay>` in every respect but the family it reads its open
- * state from; see that element for the full reasoning.
- *
- * In short: `<skdx-alert-dialog-content>` keeps `showModal()`, so the top layer,
- * `inert` and the native focus trap are unchanged. This element exists because
- * a `::backdrop` pseudo-element cannot carry `.skdx-alert-dialog__overlay`, the
- * part the other four frameworks all expose. The scrims do not stack, because
- * `@skdx/skins` sets the native `::backdrop` to `transparent` for every
- * framework (`skins/src/components/_overlay.css`) — React's content is a plain
- * `<div>` with no `::backdrop`, so the overlay part is the only scrim there and
- * now the only one here.
- *
- * `data-state` and `hidden` are set on this **host** element rather than inside
- * shadow DOM, so a consumer's own stylesheet can position and animate it
- * without piercing a shadow boundary. Must be used inside `<skdx-alert-dialog>`.
+ * Alert-dialog scrim (typically dimmed). Identical to dialog-overlay but reads alert-dialog state.
+ * Exists because `::backdrop` can't carry overlay parts. Sets `data-state`/`hidden` on host
+ * for consumer styling without piercing boundaries.
  *
  * @example
  * ```html

package/dist/alert-dialog/AlertDialogOverlay.d.ts

@@ -1,22 +1,8 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-alert-dialog-overlay>` — the scrim rendered behind
- * `<skdx-alert-dialog-content>`, typically styled to dim the page. Identical to
- * `<skdx-dialog-overlay>` in every respect but the family it reads its open
- * state from; see that element for the full reasoning.
- *
- * In short: `<skdx-alert-dialog-content>` keeps `showModal()`, so the top layer,
- * `inert` and the native focus trap are unchanged. This element exists because
- * a `::backdrop` pseudo-element cannot carry `.skdx-alert-dialog__overlay`, the
- * part the other four frameworks all expose. The scrims do not stack, because
- * `@skdx/skins` sets the native `::backdrop` to `transparent` for every
- * framework (`skins/src/components/_overlay.css`) — React's content is a plain
- * `<div>` with no `::backdrop`, so the overlay part is the only scrim there and
- * now the only one here.
- *
- * `data-state` and `hidden` are set on this **host** element rather than inside
- * shadow DOM, so a consumer's own stylesheet can position and animate it
- * without piercing a shadow boundary. Must be used inside `<skdx-alert-dialog>`.
+ * Alert-dialog scrim (typically dimmed). Identical to dialog-overlay but reads alert-dialog state.
+ * Exists because `::backdrop` can't carry overlay parts. Sets `data-state`/`hidden` on host
+ * for consumer styling without piercing boundaries.
  *
  * @example
  * ```html

package/dist/alert-dialog/AlertDialogOverlay.js

@@ -1,15 +1,10 @@
-var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var n=(a,o,t,r)=>{for(var e=r>1?void 0:r?c(o,t):o,i=a.length-1,l;i>=0;i--)(l=a[i])&&(e=(r?l(o,t,e):l(e))||e);return r&&e&&d(o,t,e),e};import{css as h,html as p,LitElement as v}from"lit";import{closestThroughPortal as u}from"../internal/closest.js";import{customElement as g}from"../internal/define.js";var s=class extends v{constructor(){super(...arguments);this.alertDialogEl=null;this.observer=new MutationObserver(()=>this.syncHostState())}connectedCallback(){if(super.connectedCallback(),this.alertDialogEl=u(this,"skdx-alert-dialog"),!this.alertDialogEl)throw new Error("<skdx-alert-dialog-overlay> must be used inside <skdx-alert-dialog>.");this.observer.observe(this.alertDialogEl,{attributeFilter:["open"]}),this.syncHostState()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}syncHostState(){let t=this.alertDialogEl?.open??!1;this.setAttribute("data-state",t?"open":"closed"),this.hidden=!t}render(){return p`<slot></slot>`}};s.styles=h`
+var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var n=(l,o,t,s)=>{for(var e=s>1?void 0:s?c(o,t):o,a=l.length-1,i;a>=0;a--)(i=l[a])&&(e=(s?i(o,t,e):i(e))||e);return s&&e&&d(o,t,e),e};import{css as p,html as v,LitElement as h}from"lit";import{closestThroughPortal as u}from"../internal/closest.js";import{customElement as m}from"../internal/define.js";var r=class extends h{constructor(){super(...arguments);this.alertDialogEl=null;this.observer=new MutationObserver(()=>this.syncHostState())}connectedCallback(){if(super.connectedCallback(),this.alertDialogEl=u(this,"skdx-alert-dialog"),!this.alertDialogEl)throw new Error("<skdx-alert-dialog-overlay> must be used inside <skdx-alert-dialog>.");this.observer.observe(this.alertDialogEl,{attributeFilter:["open"]}),this.syncHostState()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}syncHostState(){let t=this.alertDialogEl?.open??!1;this.setAttribute("data-state",t?"open":"closed"),this.hidden=!t}render(){return v`<slot></slot>`}};r.styles=p`
     :host {
       display: block;
-      /* Parity with React's AlertDialogOverlay. Inert here — the dialog and its
-         backdrop sit in the top layer above this host, and this host is inert
-         while the dialog is modal — but it keeps the rendered style identical
-         across ports and survives an ancestor that sets pointer-events: none.
-         A :host rule, which the spec ranks below any outer-document rule
-         targeting the host, so a consumer can still override it. */
+      /* Inert (dialog in top layer), but pointer-events: auto survives ancestor pointer-events: none. :host rank allows consumer override. */
       pointer-events: auto;
     }
     :host([hidden]) {
       display: none;
     }
-  `,s=n([g("skdx-alert-dialog-overlay","alert-dialog","overlay")],s);export{s as SkdxAlertDialogOverlay};
+  `,r=n([m("skdx-alert-dialog-overlay","alert-dialog","overlay")],r);export{r as SkdxAlertDialogOverlay};

package/dist/alert-dialog/AlertDialogPortal.d.cts

@@ -1,18 +1,12 @@
 import { SkdxPortal } from '../utils/portal.cjs';
 /**
- * `<skdx-alert-dialog-portal>` — teleports `<skdx-alert-dialog-content>` to
- * `document.body` (or a custom `container`), so the alert dialog escapes any
- * clipping or `overflow` ancestor of the trigger that opened it.
+ * Teleports `<skdx-alert-dialog-content>` to `document.body` (or a custom
+ * `container`) so the dialog escapes clipping or `overflow` ancestors of the
+ * trigger. The host element stays in place; only children move into a `<div
+ * data-skdx-portal>`, so removing the root removes portalled content with it.
  *
- * The **host element stays where you wrote it** and the *children* are the
- * things that move, into a `<div data-skdx-portal>` — so removing the family
- * root removes the portalled content with it, and the parts inside still
- * resolve that root through `closestThroughPortal()`.
- *
- * Adds nothing to `<skdx-portal>` but its tag name. Unlike React's
- * `AlertDialogPortal` it takes no `force-mount` and does not unmount on close: the
- * parts here never unmount, they hide via `hidden`, so there is nothing to
- * force and nothing to keep alive for an exit animation.
+ * Parts hide via `hidden` rather than unmounting, so there is no `force-mount`
+ * behavior or exit-animation lifecycle.
  *
  * @example
  * ```html

package/dist/alert-dialog/AlertDialogPortal.d.ts

@@ -1,18 +1,12 @@
 import { SkdxPortal } from '../utils/portal.js';
 /**
- * `<skdx-alert-dialog-portal>` — teleports `<skdx-alert-dialog-content>` to
- * `document.body` (or a custom `container`), so the alert dialog escapes any
- * clipping or `overflow` ancestor of the trigger that opened it.
+ * Teleports `<skdx-alert-dialog-content>` to `document.body` (or a custom
+ * `container`) so the dialog escapes clipping or `overflow` ancestors of the
+ * trigger. The host element stays in place; only children move into a `<div
+ * data-skdx-portal>`, so removing the root removes portalled content with it.
  *
- * The **host element stays where you wrote it** and the *children* are the
- * things that move, into a `<div data-skdx-portal>` — so removing the family
- * root removes the portalled content with it, and the parts inside still
- * resolve that root through `closestThroughPortal()`.
- *
- * Adds nothing to `<skdx-portal>` but its tag name. Unlike React's
- * `AlertDialogPortal` it takes no `force-mount` and does not unmount on close: the
- * parts here never unmount, they hide via `hidden`, so there is nothing to
- * force and nothing to keep alive for an exit animation.
+ * Parts hide via `hidden` rather than unmounting, so there is no `force-mount`
+ * behavior or exit-animation lifecycle.
  *
  * @example
  * ```html

package/dist/alert-dialog/index.cjs

@@ -1 +1 @@
-"use strict";var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var c=(o,r)=>{for(var t in r)l(o,t,{get:r[t],enumerable:!0})},C=(o,r,t,x)=>{if(r&&typeof r=="object"||typeof r=="function")for(let e of S(r))!n.call(o,e)&&e!==t&&l(o,e,{get:()=>r[e],enumerable:!(x=m(r,e))||x.enumerable});return o};var T=o=>C(l({},"__esModule",{value:!0}),o);var s={};c(s,{SkdxAlertDialog:()=>i.SkdxAlertDialog,SkdxAlertDialogAction:()=>f.SkdxAlertDialogAction,SkdxAlertDialogCancel:()=>k.SkdxAlertDialogCancel,SkdxAlertDialogContent:()=>A.SkdxAlertDialogContent,SkdxAlertDialogDescription:()=>d.SkdxAlertDialogDescription,SkdxAlertDialogOverlay:()=>p.SkdxAlertDialogOverlay,SkdxAlertDialogPortal:()=>g.SkdxAlertDialogPortal,SkdxAlertDialogTitle:()=>D.SkdxAlertDialogTitle,SkdxAlertDialogTrigger:()=>a.SkdxAlertDialogTrigger});module.exports=T(s);var i=require("./AlertDialog.cjs"),a=require("./AlertDialogTrigger.cjs"),g=require("./AlertDialogPortal.cjs"),p=require("./AlertDialogOverlay.cjs"),A=require("./AlertDialogContent.cjs"),D=require("./AlertDialogTitle.cjs"),d=require("./AlertDialogDescription.cjs"),f=require("./AlertDialogAction.cjs"),k=require("./AlertDialogCancel.cjs");0&&(module.exports={SkdxAlertDialog,SkdxAlertDialogAction,SkdxAlertDialogCancel,SkdxAlertDialogContent,SkdxAlertDialogDescription,SkdxAlertDialogOverlay,SkdxAlertDialogPortal,SkdxAlertDialogTitle,SkdxAlertDialogTrigger});
+"use strict";var i=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var g=(l,e)=>{for(var t in e)i(l,t,{get:e[t],enumerable:!0})},k=(l,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of a(e))!d.call(l,o)&&o!==t&&i(l,o,{get:()=>e[o],enumerable:!(r=D(e,o))||r.enumerable});return l};var p=l=>k(i({},"__esModule",{value:!0}),l);var s={};g(s,{SkdxAlertDialog:()=>x.SkdxAlertDialog});module.exports=p(s);var x=require("./AlertDialog.cjs");0&&(module.exports={SkdxAlertDialog});

package/dist/alert-dialog/index.d.cts

@@ -1,9 +1 @@
-export { SkdxAlertDialog } from './AlertDialog.cjs';
-export { SkdxAlertDialogTrigger } from './AlertDialogTrigger.cjs';
-export { SkdxAlertDialogPortal } from './AlertDialogPortal.cjs';
-export { SkdxAlertDialogOverlay } from './AlertDialogOverlay.cjs';
-export { SkdxAlertDialogContent } from './AlertDialogContent.cjs';
-export { SkdxAlertDialogTitle } from './AlertDialogTitle.cjs';
-export { SkdxAlertDialogDescription } from './AlertDialogDescription.cjs';
-export { SkdxAlertDialogAction } from './AlertDialogAction.cjs';
-export { SkdxAlertDialogCancel } from './AlertDialogCancel.cjs';
+export { SkdxAlertDialog, type SkdxAlertDialogDismiss, type SkdxAlertDialogTone, } from './AlertDialog.cjs';

package/dist/alert-dialog/index.d.ts

@@ -1,9 +1 @@
-export { SkdxAlertDialog } from './AlertDialog.js';
-export { SkdxAlertDialogTrigger } from './AlertDialogTrigger.js';
-export { SkdxAlertDialogPortal } from './AlertDialogPortal.js';
-export { SkdxAlertDialogOverlay } from './AlertDialogOverlay.js';
-export { SkdxAlertDialogContent } from './AlertDialogContent.js';
-export { SkdxAlertDialogTitle } from './AlertDialogTitle.js';
-export { SkdxAlertDialogDescription } from './AlertDialogDescription.js';
-export { SkdxAlertDialogAction } from './AlertDialogAction.js';
-export { SkdxAlertDialogCancel } from './AlertDialogCancel.js';
+export { SkdxAlertDialog, type SkdxAlertDialogDismiss, type SkdxAlertDialogTone, } from './AlertDialog.js';

package/dist/alert-dialog/index.js

@@ -1 +1 @@
-import{SkdxAlertDialog as e}from"./AlertDialog.js";import{SkdxAlertDialogTrigger as l}from"./AlertDialogTrigger.js";import{SkdxAlertDialogPortal as i}from"./AlertDialogPortal.js";import{SkdxAlertDialogOverlay as g}from"./AlertDialogOverlay.js";import{SkdxAlertDialogContent as A}from"./AlertDialogContent.js";import{SkdxAlertDialogTitle as d}from"./AlertDialogTitle.js";import{SkdxAlertDialogDescription as k}from"./AlertDialogDescription.js";import{SkdxAlertDialogAction as S}from"./AlertDialogAction.js";import{SkdxAlertDialogCancel as c}from"./AlertDialogCancel.js";export{e as SkdxAlertDialog,S as SkdxAlertDialogAction,c as SkdxAlertDialogCancel,A as SkdxAlertDialogContent,k as SkdxAlertDialogDescription,g as SkdxAlertDialogOverlay,i as SkdxAlertDialogPortal,d as SkdxAlertDialogTitle,l as SkdxAlertDialogTrigger};
+import{SkdxAlertDialog as o}from"./AlertDialog.js";export{o as SkdxAlertDialog};

package/dist/alert-dialog/primitives.cjs

@@ -0,0 +1 @@
+"use strict";var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var n=Object.prototype.hasOwnProperty;var c=(o,r)=>{for(var t in r)l(o,t,{get:r[t],enumerable:!0})},C=(o,r,t,x)=>{if(r&&typeof r=="object"||typeof r=="function")for(let e of S(r))!n.call(o,e)&&e!==t&&l(o,e,{get:()=>r[e],enumerable:!(x=m(r,e))||x.enumerable});return o};var T=o=>C(l({},"__esModule",{value:!0}),o);var s={};c(s,{SkdxAlertDialog:()=>i.SkdxAlertDialog,SkdxAlertDialogAction:()=>f.SkdxAlertDialogAction,SkdxAlertDialogCancel:()=>k.SkdxAlertDialogCancel,SkdxAlertDialogContent:()=>A.SkdxAlertDialogContent,SkdxAlertDialogDescription:()=>d.SkdxAlertDialogDescription,SkdxAlertDialogOverlay:()=>p.SkdxAlertDialogOverlay,SkdxAlertDialogPortal:()=>g.SkdxAlertDialogPortal,SkdxAlertDialogTitle:()=>D.SkdxAlertDialogTitle,SkdxAlertDialogTrigger:()=>a.SkdxAlertDialogTrigger});module.exports=T(s);var i=require("./AlertDialog.cjs"),a=require("./AlertDialogTrigger.cjs"),g=require("./AlertDialogPortal.cjs"),p=require("./AlertDialogOverlay.cjs"),A=require("./AlertDialogContent.cjs"),D=require("./AlertDialogTitle.cjs"),d=require("./AlertDialogDescription.cjs"),f=require("./AlertDialogAction.cjs"),k=require("./AlertDialogCancel.cjs");0&&(module.exports={SkdxAlertDialog,SkdxAlertDialogAction,SkdxAlertDialogCancel,SkdxAlertDialogContent,SkdxAlertDialogDescription,SkdxAlertDialogOverlay,SkdxAlertDialogPortal,SkdxAlertDialogTitle,SkdxAlertDialogTrigger});

package/dist/alert-dialog/primitives.d.cts

@@ -0,0 +1,33 @@
+/**
+ * Advanced primitives for `<skdx-alert-dialog>` — the parts the recipe composes.
+ * Reach for these when you need a custom structure. Tag names are global;
+ * only which class an import resolves to changes.
+ *
+ * @example
+ * ```ts
+ * import * as AlertDialog from '@skdx/web-components/primitives/alert-dialog';
+ * ```
+ * ```html
+ * <skdx-alert-dialog>
+ *   <skdx-alert-dialog-trigger>Delete account</skdx-alert-dialog-trigger>
+ *   <skdx-alert-dialog-portal>
+ *     <skdx-alert-dialog-overlay></skdx-alert-dialog-overlay>
+ *     <skdx-alert-dialog-content>
+ *       <skdx-alert-dialog-title>Are you sure?</skdx-alert-dialog-title>
+ *       <skdx-alert-dialog-description>This action cannot be undone.</skdx-alert-dialog-description>
+ *       <skdx-alert-dialog-cancel>Cancel</skdx-alert-dialog-cancel>
+ *       <skdx-alert-dialog-action>Delete</skdx-alert-dialog-action>
+ *     </skdx-alert-dialog-content>
+ *   </skdx-alert-dialog-portal>
+ * </skdx-alert-dialog>
+ * ```
+ */
+export { SkdxAlertDialog } from './AlertDialog.cjs';
+export { SkdxAlertDialogTrigger } from './AlertDialogTrigger.cjs';
+export { SkdxAlertDialogPortal } from './AlertDialogPortal.cjs';
+export { SkdxAlertDialogOverlay } from './AlertDialogOverlay.cjs';
+export { SkdxAlertDialogContent } from './AlertDialogContent.cjs';
+export { SkdxAlertDialogTitle } from './AlertDialogTitle.cjs';
+export { SkdxAlertDialogDescription } from './AlertDialogDescription.cjs';
+export { SkdxAlertDialogAction } from './AlertDialogAction.cjs';
+export { SkdxAlertDialogCancel } from './AlertDialogCancel.cjs';

package/dist/alert-dialog/primitives.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Advanced primitives for `<skdx-alert-dialog>` — the parts the recipe composes.
+ * Reach for these when you need a custom structure. Tag names are global;
+ * only which class an import resolves to changes.
+ *
+ * @example
+ * ```ts
+ * import * as AlertDialog from '@skdx/web-components/primitives/alert-dialog';
+ * ```
+ * ```html
+ * <skdx-alert-dialog>
+ *   <skdx-alert-dialog-trigger>Delete account</skdx-alert-dialog-trigger>
+ *   <skdx-alert-dialog-portal>
+ *     <skdx-alert-dialog-overlay></skdx-alert-dialog-overlay>
+ *     <skdx-alert-dialog-content>
+ *       <skdx-alert-dialog-title>Are you sure?</skdx-alert-dialog-title>
+ *       <skdx-alert-dialog-description>This action cannot be undone.</skdx-alert-dialog-description>
+ *       <skdx-alert-dialog-cancel>Cancel</skdx-alert-dialog-cancel>
+ *       <skdx-alert-dialog-action>Delete</skdx-alert-dialog-action>
+ *     </skdx-alert-dialog-content>
+ *   </skdx-alert-dialog-portal>
+ * </skdx-alert-dialog>
+ * ```
+ */
+export { SkdxAlertDialog } from './AlertDialog.js';
+export { SkdxAlertDialogTrigger } from './AlertDialogTrigger.js';
+export { SkdxAlertDialogPortal } from './AlertDialogPortal.js';
+export { SkdxAlertDialogOverlay } from './AlertDialogOverlay.js';
+export { SkdxAlertDialogContent } from './AlertDialogContent.js';
+export { SkdxAlertDialogTitle } from './AlertDialogTitle.js';
+export { SkdxAlertDialogDescription } from './AlertDialogDescription.js';
+export { SkdxAlertDialogAction } from './AlertDialogAction.js';
+export { SkdxAlertDialogCancel } from './AlertDialogCancel.js';

package/dist/alert-dialog/primitives.js

@@ -0,0 +1 @@
+import{SkdxAlertDialog as e}from"./AlertDialog.js";import{SkdxAlertDialogTrigger as l}from"./AlertDialogTrigger.js";import{SkdxAlertDialogPortal as i}from"./AlertDialogPortal.js";import{SkdxAlertDialogOverlay as g}from"./AlertDialogOverlay.js";import{SkdxAlertDialogContent as A}from"./AlertDialogContent.js";import{SkdxAlertDialogTitle as d}from"./AlertDialogTitle.js";import{SkdxAlertDialogDescription as k}from"./AlertDialogDescription.js";import{SkdxAlertDialogAction as S}from"./AlertDialogAction.js";import{SkdxAlertDialogCancel as c}from"./AlertDialogCancel.js";export{e as SkdxAlertDialog,S as SkdxAlertDialogAction,c as SkdxAlertDialogCancel,A as SkdxAlertDialogContent,k as SkdxAlertDialogDescription,g as SkdxAlertDialogOverlay,i as SkdxAlertDialogPortal,d as SkdxAlertDialogTitle,l as SkdxAlertDialogTrigger};