@skdx/web-components 0.28.0 → 0.29.0

package/dist/dialog/DialogContent.d.ts

@@ -1,91 +1,38 @@
 import { LitElement } from 'lit';
 /**
- * Dialog's panel: renders native `<dialog>` in light DOM, imperatively calling
- * `showModal()`/`show()`/`close()` with open state—providing focus trap,
- * top-layer stacking, and focus-return for free. Closes on Escape or outside
- * interaction (pointer-down on backdrop, focus outside), each announced first as
- * `interact-outside` then specific event so one `preventDefault()` vetoes both.
- * Root's `dismiss` policy gates which channels close it; all events fire regardless.
- *
- * Focus moves announced as `open-auto-focus`/`close-auto-focus`, cancelable—if
- * prevented, consumer places focus by hand. ARIA attributes (`role`,
- * `aria-modal`, `aria-labelledby`, `aria-describedby`) on host, not dialog,
- * because host carries {@link SkdxDialogRoot.contentId} for `aria-controls`.
- * IDREF attributes appear only while Title/Description rendered.
- *
+ * Dialog's panel: renders a native `<dialog>` in light DOM, driven imperatively via `showModal()`/`show()`/`close()`.
  * @fires escape-key-down - Escape was pressed while open (detail: the native `cancel` Event). Preventable.
- * @fires pointer-down-outside - A pointer-down landed on the backdrop while open (detail: the `PointerEvent`, the same payload and the same phase React reports every outside pointer-down on). Preventable.
+ * @fires pointer-down-outside - A pointer-down landed on the backdrop while open (detail: the `PointerEvent`, on the same `pointerdown` phase as every other outside pointer-down). Preventable.
  * @fires focus-outside - Focus moved to an element outside this content while open (detail: the original focusin). Preventable.
  * @fires interact-outside - Either kind of outside interaction, fired immediately before the specific event so one handler can veto both. Preventable.
  * @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 and `::part()` only matches inside a shadow root,
- * so the `part` attribute is inert here. Style it as an ordinary descendant: `skdx-dialog-content > dialog { … }`.
+ * @csspart content - The native `<dialog>` element. `::part(content)` cannot reach it, since this renders into light DOM — style it as `skdx-dialog-content > dialog { … }`.
  */
 export declare class SkdxDialogContent extends LitElement {
-    /**
-     * Light DOM, with the `<dialog>` itself as the render root.
-     *
-     * `@skdx/skins` is a document stylesheet, so it cannot cross a shadow
-     * boundary — and every rule that paints this component names the `<dialog>`:
-     * `.skdx-dialog__content` for the panel surface and the centring, and
-     * `dialog.skdx-dialog__content::backdrop` for the scrim. That last one is
-     * *tag-qualified* and generates on a top-layer element, so nothing on the
-     * host can stand in for it: the class has to be on the `<dialog>`, and the
-     * `<dialog>` has to be in the consumer's tree. Behind a shadow root none of
-     * it matched and a skinned dialog rendered as bare UA chrome with no scrim.
-     *
-     * Making the `<dialog>` the render root — rather than `this` — keeps the
-     * host to a single child, and keeps Lit's part markers out of the way of
-     * {@link adoptChildren}, which has to move the consumer's own children in
-     * here because a light-DOM element has no `<slot>` to project them through.
-     */
     createRenderRoot(): HTMLElement;
-    /**
-     * Moves everything the consumer put in this element into the `<dialog>`.
-     *
-     * Terminates without a re-entrancy flag even though {@link childObserver}
-     * watches the whole subtree: the appends *into* the `<dialog>` do queue a
-     * second pass, and that pass finds nothing left to move, mutates nothing,
-     * and queues no third. The loop stops after one no-op either way.
-     */
     private adoptChildren;
-    /**
-     * Children appended after the first render still have to end up in the
-     * `<dialog>` — and the Title/Description wiring has to notice when one of
-     * them *leaves*.
-     *
-     * Watched with `subtree`, unlike its light-DOM siblings, because the parts
-     * this element names do not live among its own children: {@link adoptChildren}
-     * has already moved them into the `<dialog>`, so a consumer removing a Title
-     * mutates the `<dialog>`'s child list and nothing else. Without the subtree
-     * the removal is invisible here and `aria-labelledby` is left pointing at an
-     * id that is no longer in the document.
-     */
     private readonly childObserver;
     /**
-     * CSS selector for the element inside this panel that should receive focus on
-     * open, instead of its first tabbable element. Resolved with `querySelector`
-     * against the panel, and only when `open-auto-focus` was not prevented — a
-     * consumer that has taken the move over wins outright. A selector matching
-     * nothing falls back to the first tabbable element, then the panel itself,
-     * and warns: focus stranded on `<body>` is unreachable from the keyboard
-     * while the page behind is inert.
+     * CSS selector for the element inside this panel that should receive focus on open, instead of the first tabbable one.
      * @default undefined — focus lands where the native `<dialog>` puts it.
      */
     initialFocus?: string;
     /**
-     * CSS selector for the element that should receive focus on close, instead of
-     * whatever held it before the dialog opened. Resolved against the whole
-     * **document**, not the panel: by close time the panel is going away, and the
-     * reason to name a final target is that the element which opened the dialog
-     * may no longer exist. Applied only when `close-auto-focus` was not
-     * prevented; a selector matching nothing falls back to the previously focused
-     * element and warns.
+     * CSS selector, resolved against the document, for the element that should receive focus on close.
      * @default undefined — focus returns to the element focused before opening.
      */
     finalFocus?: string;
+    /**
+     * Panel width the skin renders, reflected as `data-size`; may be written as that attribute directly.
+     * @default undefined — the skin's medium width.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+    /**
+     * Severity rung the skin colours from, reflected as `data-status`; may be written as that attribute directly.
+     * @default undefined — the skin's neutral palette.
+     */
+    status?: 'info' | 'success' | 'warning' | 'danger' | (string & {}) | undefined;
     private dialogAncestor;
     private locked;
     private wasOpen;
@@ -94,25 +41,15 @@ export declare class SkdxDialogContent extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(): void;
+    protected updated(changed: Map<string, unknown>): 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`.
-     * Always the first `<dialog>` in the subtree: it is appended before any of
-     * the consumer's own children are adopted into it.
-     */
     private get nativeDialog();
     private syncNativeDialog;
     private syncAutoFocus;
     private readonly handleCancel;
     private readonly handleClose;
-    /**
-     * The backdrop path, on `pointerdown` rather than `click`: same phase and
-     * same payload type as the document-level outside path, which is what makes
-     * `pointer-down-outside` one event in all five frameworks. See
-     * {@link backdropPointerDown} for why the backdrop cannot ride that path.
-     */
     private readonly handleBackdropPointerDown;
+    private readonly handleOutsidePointerDown;
     private readonly handleOutsideFocus;
 }
 declare global {

package/dist/dialog/DialogContent.js

@@ -1 +1 @@
-var b=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var l=(o,n,t,e)=>{for(var i=e>1?void 0:e?k(n,t):n,a=o.length-1,d;a>=0;a--)(d=o[a])&&(i=(e?d(n,t,i):d(i))||i);return e&&i&&b(n,t,i),i};import{LitElement as A}from"lit";import{property as u}from"lit/decorators.js";import{syncPartIdRef as h}from"../internal/aria-part.js";import{closestThroughPortal as D}from"../internal/closest.js";import{customElement as E}from"../internal/define.js";import{backdropPointerDown as F,dispatchAutoFocus as p,dispatchEscapeKeyDown as w,dispatchOutside as f,focusOnOpen as c,focusOutsideTarget as O}from"../internal/dismiss.js";import{applyFinalFocus as x,initialFocusTarget as L}from"../internal/focus-targets.js";import{applyHostPart as S}from"../internal/part.js";import{installLightDomStyles as H}from"../internal/styles.js";var r=0,g="",y="";function M(){if(r===0){let o=window.innerWidth-document.documentElement.clientWidth;g=document.body.style.overflow,y=document.body.style.paddingRight,document.body.style.overflow="hidden",o>0&&(document.body.style.paddingRight=`${o}px`)}r++}function v(){r=Math.max(0,r-1),r===0&&(document.body.style.overflow=g,document.body.style.paddingRight=y)}function m(o){return o==="any"||o==="outside"}var s=class extends A{constructor(){super(...arguments);this.childObserver=new MutationObserver(()=>{this.adoptChildren(),this.syncHostAttributes()});this.dialogAncestor=null;this.locked=!1;this.wasOpen=!1;this.previouslyFocused=null;this.observer=new MutationObserver(()=>this.syncNativeDialog());this.handleCancel=t=>{let e=this.dialogAncestor?.effectiveDismiss??"any",i=e==="any"||e==="escape";(!w(this,t)||!i)&&t.preventDefault()};this.handleClose=()=>this.dialogAncestor?.setOpen(!1);this.handleBackdropPointerDown=t=>{let e=F(t,this.nativeDialog);e&&f(this,"pointer-down-outside",e)&&this.dialogAncestor?.modal&&m(this.dialogAncestor.effectiveDismiss)&&this.nativeDialog?.close?.()};this.handleOutsideFocus=t=>{if(!this.dialogAncestor?.open)return;let e=O(t);!e||this.contains(e)||f(this,"focus-outside",t)&&this.dialogAncestor.modal&&m(this.dialogAncestor.effectiveDismiss)&&this.nativeDialog?.close?.()}}createRenderRoot(){let t=document.createElement("dialog");return t.setAttribute("part","content"),S(t,"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.dialogAncestor=D(this,"skdx-dialog, skdx-dialog-root"),!this.dialogAncestor)throw new Error("<skdx-dialog-content> must be used inside <skdx-dialog> or <skdx-dialog-root>.");this.observer.observe(this.dialogAncestor,{attributeFilter:["open","modal","dismiss","dismissible"]}),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&&(v(),this.locked=!1),super.disconnectedCallback()}firstUpdated(){this.syncNativeDialog()}syncHostAttributes(){let t=this.dialogAncestor;if(!t)return;this.id?t.contentId=this.id:this.id=t.contentId,this.setAttribute("role","dialog"),t.modal?this.setAttribute("aria-modal","true"):this.removeAttribute("aria-modal"),h(this,"aria-labelledby",this.querySelector("skdx-dialog-title"),"skdx-dialog-content","title"),h(this,"aria-describedby",this.querySelector("skdx-dialog-description"),"skdx-dialog-content","description");let e=t.open?"open":"closed";this.setAttribute("data-state",e),this.setAttribute("data-dismiss",t.effectiveDismiss),this.nativeDialog?.setAttribute("data-state",e)}get nativeDialog(){return this.querySelector("dialog")}syncNativeDialog(){this.syncHostAttributes();let t=this.dialogAncestor,e=this.nativeDialog;if(!t||!e)return;t.open&&!e.open?c(()=>{t.modal?e.showModal?.():e.show?.()}):!t.open&&e.open&&c(()=>e.close?.());let i=t.open&&t.modal;i&&!this.locked?M():!i&&this.locked&&v(),this.locked=i,this.syncAutoFocus(t.open)}syncAutoFocus(t){if(t!==this.wasOpen){if(this.wasOpen=t,t){this.previouslyFocused=document.activeElement,requestAnimationFrame(()=>c(()=>{if(p(this,"open-auto-focus")){if(this.initialFocus){L(this,this.initialFocus,"Dialog").focus({preventScroll:!0});return}this.contains(document.activeElement)||this.focus({preventScroll:!0})}}));return}p(this,"close-auto-focus")&&(x(this.finalFocus,"Dialog")||this.previouslyFocused&&this.previouslyFocused!==document.body&&document.contains(this.previouslyFocused)&&this.previouslyFocused.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([E("skdx-dialog-content")],s);export{s as SkdxDialogContent};
+var m=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var a=(r,l,t,e)=>{for(var i=e>1?void 0:e?b(l,t):l,s=r.length-1,o;s>=0;s--)(o=r[s])&&(i=(e?o(l,t,i):o(i))||i);return e&&i&&m(l,t,i),i};import{LitElement as y}from"lit";import{property as d}from"lit/decorators.js";import{forwardAuthoredAria as A,syncPartIdRef as f}from"../internal/aria-part.js";import{lockBodyScroll as D,unlockBodyScroll as p}from"../internal/body-scroll-lock.js";import{closestThroughPortal as E}from"../internal/closest.js";import{customElement as k}from"../internal/define.js";import{autoFocusRelay as v,backdropPointerDown as w,dispatchEscapeKeyDown as F,dispatchOutside as c,focusOnOpen as u,focusOutsideTarget as O,triggerContains as g}from"../internal/dismiss.js";import{applyOpenAutoFocus as L,returnFocus as M}from"../internal/focus-targets.js";import{installLightDomStyles as x}from"../internal/light-dom-styles.js";import{applyHostPart as H}from"../internal/part.js";function h(r){return r==="any"||r==="outside"}var n=class extends y{constructor(){super(...arguments);this.childObserver=new MutationObserver(()=>{this.adoptChildren(),this.syncHostAttributes()});this.dialogAncestor=null;this.locked=!1;this.wasOpen=!1;this.previouslyFocused=null;this.observer=new MutationObserver(()=>this.syncNativeDialog());this.handleCancel=t=>{let e=this.dialogAncestor?.effectiveDismiss??"any",i=e==="any"||e==="escape";(!F(this,t)||!i)&&t.preventDefault()};this.handleClose=()=>this.dialogAncestor?.setOpen(!1);this.handleBackdropPointerDown=t=>{let e=w(t,this.nativeDialog);e&&c(this,"pointer-down-outside",e)&&this.dialogAncestor?.effectiveModal&&h(this.dialogAncestor.effectiveDismiss)&&this.nativeDialog?.close?.()};this.handleOutsidePointerDown=t=>{if(!this.dialogAncestor?.open)return;let e=t.target;!e||this.contains(e)||e===this.nativeDialog||g(this.dialogAncestor.triggerEl,e)||c(this,"pointer-down-outside",t)&&this.dialogAncestor.effectiveModal&&h(this.dialogAncestor.effectiveDismiss)&&this.nativeDialog?.close?.()};this.handleOutsideFocus=t=>{if(!this.dialogAncestor?.open)return;let e=O(t);!e||this.contains(e)||g(this.dialogAncestor.triggerEl,e)||c(this,"focus-outside",t)&&this.dialogAncestor.effectiveModal&&h(this.dialogAncestor.effectiveDismiss)&&this.nativeDialog?.close?.()}}createRenderRoot(){let t=document.createElement("dialog");return t.setAttribute("part","content"),H(t,"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(),x(),this.dialogAncestor=E(this,"skdx-dialog, skdx-dialog-root"),!this.dialogAncestor)throw new Error("<skdx-dialog-content> must be used inside <skdx-dialog> or <skdx-dialog-root>.");this.observer.observe(this.dialogAncestor,{attributeFilter:["open","modal","dismiss","dismissible"]}),this.childObserver.observe(this,{childList:!0,subtree:!0}),document.addEventListener("focusin",this.handleOutsideFocus),document.addEventListener("pointerdown",this.handleOutsidePointerDown,!0),this.syncHostAttributes()}disconnectedCallback(){this.observer.disconnect(),this.childObserver.disconnect(),document.removeEventListener("focusin",this.handleOutsideFocus),document.removeEventListener("pointerdown",this.handleOutsidePointerDown,!0),this.locked&&(p(),this.locked=!1),super.disconnectedCallback()}firstUpdated(){this.syncNativeDialog()}updated(t){(t.has("size")||t.has("status"))&&this.syncHostAttributes()}syncHostAttributes(){let t=this.dialogAncestor;if(!t)return;this.id?t.contentId=this.id:this.id=t.contentId;let e=t.open?"open":"closed";this.setAttribute("data-state",e),this.setAttribute("data-dismiss",t.effectiveDismiss);let i=this.nativeDialog;if(i){i.setAttribute("role",t.role),t.effectiveModal?i.setAttribute("aria-modal","true"):i.removeAttribute("aria-modal"),A(this,i),f(i,"aria-labelledby",this.querySelector("skdx-dialog-title"),"skdx-dialog-content","title"),f(i,"aria-describedby",this.querySelector("skdx-dialog-description"),"skdx-dialog-content","description"),i.setAttribute("data-state",e),i.setAttribute("data-dismiss",t.effectiveDismiss);for(let s of["data-size","data-status"]){let o=this.getAttribute(s);o==null?i.removeAttribute(s):i.setAttribute(s,o)}}}get nativeDialog(){return this.querySelector("dialog")}syncNativeDialog(){this.syncHostAttributes();let t=this.dialogAncestor,e=this.nativeDialog;if(!t||!e)return;t.open&&!e.open?u(()=>{t.effectiveModal?e.showModal?.():e.show?.()}):!t.open&&e.open&&u(()=>e.close?.());let i=t.open&&t.effectiveModal;i&&!this.locked?D():!i&&this.locked&&p(),this.locked=i,this.syncAutoFocus(t.open)}syncAutoFocus(t){if(t===this.wasOpen)return;if(this.wasOpen=t,t){this.previouslyFocused=document.activeElement,requestAnimationFrame(()=>u(()=>L(this.nativeDialog??this,this.initialFocus,"Dialog",v(this),this.previouslyFocused)));return}let e=this.previouslyFocused===document.body?null:this.previouslyFocused,i=!1,s=v(this);M(this.finalFocus,"Dialog",e,o=>{s(o),i=o.defaultPrevented}),i&&document.activeElement===e&&e?.blur?.()}};a([d({type:String,attribute:"initial-focus"})],n.prototype,"initialFocus",2),a([d({type:String,attribute:"final-focus"})],n.prototype,"finalFocus",2),a([d({type:String,reflect:!0,attribute:"data-size"})],n.prototype,"size",2),a([d({type:String,reflect:!0,attribute:"data-status"})],n.prototype,"status",2),n=a([k("skdx-dialog-content")],n);export{n as SkdxDialogContent};

package/dist/dialog/DialogDescription.cjs

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

package/dist/dialog/DialogDescription.d.cts

@@ -1,13 +1,20 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * The supporting text both overlay families share: a `<p>` in shadow DOM that
+ * the parent Content points its `aria-describedby` at.
+ * @internal
+ */
+export declare class OverlayDescriptionBase extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): TemplateResult;
+}
 /**
  * Renders a `<p>` in shadow DOM. Parent `<skdx-dialog-content>` points its
  * `aria-describedby` to this element's host id.
  *
  * @csspart description - The `<p>` element inside the shadow root.
  */
-export declare class SkdxDialogDescription extends LitElement {
-    static styles: import("lit").CSSResult;
-    render(): import("lit").TemplateResult<1>;
+export declare class SkdxDialogDescription extends OverlayDescriptionBase {
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/dialog/DialogDescription.d.ts

@@ -1,13 +1,20 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * The supporting text both overlay families share: a `<p>` in shadow DOM that
+ * the parent Content points its `aria-describedby` at.
+ * @internal
+ */
+export declare class OverlayDescriptionBase extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): TemplateResult;
+}
 /**
  * Renders a `<p>` in shadow DOM. Parent `<skdx-dialog-content>` points its
  * `aria-describedby` to this element's host id.
  *
  * @csspart description - The `<p>` element inside the shadow root.
  */
-export declare class SkdxDialogDescription extends LitElement {
-    static styles: import("lit").CSSResult;
-    render(): import("lit").TemplateResult<1>;
+export declare class SkdxDialogDescription extends OverlayDescriptionBase {
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/dialog/DialogDescription.js

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

package/dist/dialog/DialogOverlay.cjs

@@ -1,15 +1,11 @@
-"use strict";var l=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var b=(o,e)=>{for(var s in e)l(o,s,{get:e[s],enumerable:!0})},m=(o,e,s,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of g(e))!u.call(o,t)&&t!==s&&l(o,t,{get:()=>e[t],enumerable:!(i=c(e,t))||i.enumerable});return o};var k=o=>m(l({},"__esModule",{value:!0}),o),h=(o,e,s,i)=>{for(var t=i>1?void 0:i?c(e,s):e,d=o.length-1,n;d>=0;d--)(n=o[d])&&(t=(i?n(e,s,t):n(t))||t);return i&&t&&l(e,s,t),t};var y={};b(y,{SkdxDialogOverlay:()=>r});module.exports=k(y);var a=require("lit"),p=require("../internal/closest.cjs"),v=require("../internal/define.cjs");var r=class extends a.LitElement{constructor(){super(...arguments);this.dialogEl=null;this.observer=new MutationObserver(()=>this.syncHostState())}connectedCallback(){if(super.connectedCallback(),this.dialogEl=(0,p.closestThroughPortal)(this,"skdx-dialog, skdx-dialog-root"),!this.dialogEl)throw new Error("<skdx-dialog-overlay> must be used inside <skdx-dialog> or <skdx-dialog-root>.");this.observer.observe(this.dialogEl,{attributeFilter:["open"]}),this.syncHostState()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}syncHostState(){let s=this.dialogEl?.open??!1;this.setAttribute("data-state",s?"open":"closed"),this.hidden=!s}render(){return a.html`<slot></slot>`}};r.styles=a.css`
+"use strict";var n=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var u=(o,e)=>{for(var s in e)n(o,s,{get:e[s],enumerable:!0})},k=(o,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of m(e))!b.call(o,t)&&t!==s&&n(o,t,{get:()=>e[t],enumerable:!(r=p(e,t))||r.enumerable});return o};var f=o=>k(n({},"__esModule",{value:!0}),o),v=(o,e,s,r)=>{for(var t=r>1?void 0:r?p(e,s):e,d=o.length-1,c;d>=0;d--)(c=o[d])&&(t=(r?c(e,s,t):c(t))||t);return r&&t&&n(e,s,t),t};var E={};u(E,{OverlayScrimBase:()=>i,SkdxDialogOverlay:()=>a});module.exports=f(E);var l=require("lit"),h=require("../internal/define.cjs"),y=require("./overlay-root.cjs");var i=class extends l.LitElement{constructor(){super(...arguments);this.family="dialog";this.rootEl=null;this.observer=new MutationObserver(()=>this.syncHostState())}connectedCallback(){super.connectedCallback(),this.rootEl=(0,y.requireOverlayRoot)(this,this.family),this.observer.observe(this.rootEl,{attributeFilter:["open","modal"]}),this.syncHostState()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}syncHostState(){let s=this.rootEl?.open??!1;this.setAttribute("data-state",s?"open":"closed"),this.hidden=!s,this.style.pointerEvents=this.rootEl?.effectiveModal??!0?"":"none"}render(){return l.html`<slot></slot>`}};i.styles=l.css`
     :host {
       display: block;
-      /* Parity with React's DialogOverlay. 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 here (a modal dialog's top-layer backdrop sits above this host),
+         but survives an ancestor that sets pointer-events: none. */
       pointer-events: auto;
     }
     :host([hidden]) {
       display: none;
     }
-  `,r=h([(0,v.customElement)("skdx-dialog-overlay","dialog","overlay")],r);0&&(module.exports={SkdxDialogOverlay});
+  `;var a=class extends i{};a=v([(0,h.customElement)("skdx-dialog-overlay","dialog","overlay")],a);0&&(module.exports={OverlayScrimBase,SkdxDialogOverlay});

package/dist/dialog/DialogOverlay.d.cts

@@ -1,15 +1,23 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
+import { type SkdxOverlayFamily } from './overlay-root.cjs';
+/**
+ * The scrim both overlay families share, mirroring the root's open state and
+ * going click-through while the panel is not modal.
+ * @internal
+ */
+export declare class OverlayScrimBase extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Which family's root this scrim tracks and which skin class it wears. */
+    protected family: SkdxOverlayFamily;
+    private rootEl;
+    private readonly observer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncHostState;
+    render(): TemplateResult;
+}
 /**
  * The scrim behind `<skdx-dialog-content>`, typically styled to dim the page.
- * Content uses native `showModal()` (focus trap, top layer, inert outside),
- * but `::backdrop` cannot carry a class. This element provides the
- * `.skdx-dialog__overlay` part for CSS, matching React/Vue/Svelte/Angular anatomy.
- *
- * Paints but does not interact—dialog's top-layer backdrop sits above this
- * host; dismissal stays on Content. `data-state` and `hidden` on host so
- * consumer can position/animate without piercing shadow DOM. Never unmounts,
- * hides via `hidden`.
- *
  * @example
  * ```html
  * <skdx-dialog>
@@ -21,14 +29,7 @@ import { LitElement } from 'lit';
  * </skdx-dialog>
  * ```
  */
-export declare class SkdxDialogOverlay extends LitElement {
-    static styles: import("lit").CSSResult;
-    private dialogEl;
-    private readonly observer;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private syncHostState;
-    render(): import("lit").TemplateResult<1>;
+export declare class SkdxDialogOverlay extends OverlayScrimBase {
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/dialog/DialogOverlay.d.ts

@@ -1,15 +1,23 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
+import { type SkdxOverlayFamily } from './overlay-root.js';
+/**
+ * The scrim both overlay families share, mirroring the root's open state and
+ * going click-through while the panel is not modal.
+ * @internal
+ */
+export declare class OverlayScrimBase extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Which family's root this scrim tracks and which skin class it wears. */
+    protected family: SkdxOverlayFamily;
+    private rootEl;
+    private readonly observer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncHostState;
+    render(): TemplateResult;
+}
 /**
  * The scrim behind `<skdx-dialog-content>`, typically styled to dim the page.
- * Content uses native `showModal()` (focus trap, top layer, inert outside),
- * but `::backdrop` cannot carry a class. This element provides the
- * `.skdx-dialog__overlay` part for CSS, matching React/Vue/Svelte/Angular anatomy.
- *
- * Paints but does not interact—dialog's top-layer backdrop sits above this
- * host; dismissal stays on Content. `data-state` and `hidden` on host so
- * consumer can position/animate without piercing shadow DOM. Never unmounts,
- * hides via `hidden`.
- *
  * @example
  * ```html
  * <skdx-dialog>
@@ -21,14 +29,7 @@ import { LitElement } from 'lit';
  * </skdx-dialog>
  * ```
  */
-export declare class SkdxDialogOverlay extends LitElement {
-    static styles: import("lit").CSSResult;
-    private dialogEl;
-    private readonly observer;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private syncHostState;
-    render(): import("lit").TemplateResult<1>;
+export declare class SkdxDialogOverlay extends OverlayScrimBase {
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/dialog/DialogOverlay.js

@@ -1,15 +1,11 @@
-var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(r,o,t,i)=>{for(var e=i>1?void 0:i?c(o,t):o,a=r.length-1,l;a>=0;a--)(l=r[a])&&(e=(i?l(o,t,e):l(e))||e);return i&&e&&n(o,t,e),e};import{css as h,html as p,LitElement as v}from"lit";import{closestThroughPortal as g}from"../internal/closest.js";import{customElement as u}from"../internal/define.js";var s=class extends v{constructor(){super(...arguments);this.dialogEl=null;this.observer=new MutationObserver(()=>this.syncHostState())}connectedCallback(){if(super.connectedCallback(),this.dialogEl=g(this,"skdx-dialog, skdx-dialog-root"),!this.dialogEl)throw new Error("<skdx-dialog-overlay> must be used inside <skdx-dialog> or <skdx-dialog-root>.");this.observer.observe(this.dialogEl,{attributeFilter:["open"]}),this.syncHostState()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}syncHostState(){let t=this.dialogEl?.open??!1;this.setAttribute("data-state",t?"open":"closed"),this.hidden=!t}render(){return p`<slot></slot>`}};s.styles=h`
+var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var d=(s,o,t,r)=>{for(var e=r>1?void 0:r?p(o,t):o,i=s.length-1,n;i>=0;i--)(n=s[i])&&(e=(r?n(o,t,e):n(e))||e);return r&&e&&c(o,t,e),e};import{css as v,html as h,LitElement as y}from"lit";import{customElement as m}from"../internal/define.js";import{requireOverlayRoot as b}from"./overlay-root.js";var a=class extends y{constructor(){super(...arguments);this.family="dialog";this.rootEl=null;this.observer=new MutationObserver(()=>this.syncHostState())}connectedCallback(){super.connectedCallback(),this.rootEl=b(this,this.family),this.observer.observe(this.rootEl,{attributeFilter:["open","modal"]}),this.syncHostState()}disconnectedCallback(){this.observer.disconnect(),super.disconnectedCallback()}syncHostState(){let t=this.rootEl?.open??!1;this.setAttribute("data-state",t?"open":"closed"),this.hidden=!t,this.style.pointerEvents=this.rootEl?.effectiveModal??!0?"":"none"}render(){return h`<slot></slot>`}};a.styles=v`
     :host {
       display: block;
-      /* Parity with React's DialogOverlay. 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 here (a modal dialog's top-layer backdrop sits above this host),
+         but survives an ancestor that sets pointer-events: none. */
       pointer-events: auto;
     }
     :host([hidden]) {
       display: none;
     }
-  `,s=d([u("skdx-dialog-overlay","dialog","overlay")],s);export{s as SkdxDialogOverlay};
+  `;var l=class extends a{};l=d([m("skdx-dialog-overlay","dialog","overlay")],l);export{a as OverlayScrimBase,l as SkdxDialogOverlay};

package/dist/dialog/DialogPortal.d.cts

@@ -1,10 +1,6 @@
 import { SkdxPortal } from '../utils/portal.cjs';
 /**
- * Teleports `<skdx-dialog-content>` to `document.body` (or custom container),
- * escaping clipping/overflow ancestors. Host element stays in place; children
- * move into `<div data-skdx-portal>`. Unlike React's DialogPortal, takes no
- * `force-mount` and never unmounts—parts hide via `hidden`.
- *
+ * Teleports `<skdx-dialog-content>` to `document.body` (or a custom container), escaping clipping ancestors.
  * @example
  * ```html
  * <skdx-dialog>

package/dist/dialog/DialogPortal.d.ts

@@ -1,10 +1,6 @@
 import { SkdxPortal } from '../utils/portal.js';
 /**
- * Teleports `<skdx-dialog-content>` to `document.body` (or custom container),
- * escaping clipping/overflow ancestors. Host element stays in place; children
- * move into `<div data-skdx-portal>`. Unlike React's DialogPortal, takes no
- * `force-mount` and never unmounts—parts hide via `hidden`.
- *
+ * Teleports `<skdx-dialog-content>` to `document.body` (or a custom container), escaping clipping ancestors.
  * @example
  * ```html
  * <skdx-dialog>

package/dist/dialog/DialogRoot.cjs

@@ -1,5 +1,5 @@
-"use strict";var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var g=(s,t)=>{for(var e in t)p(s,e,{get:t[e],enumerable:!0})},y=(s,t,e,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of v(t))!C.call(s,n)&&n!==e&&p(s,n,{get:()=>t[n],enumerable:!(o=u(t,n))||o.enumerable});return s};var O=s=>y(p({},"__esModule",{value:!0}),s),r=(s,t,e,o)=>{for(var n=o>1?void 0:o?u(t,e):t,c=s.length-1,m;c>=0;c--)(m=s[c])&&(n=(o?m(t,e,n):m(n))||n);return o&&n&&p(t,e,n),n};var k={};g(k,{SkdxDialogRoot:()=>i});module.exports=O(k);var a=require("lit"),d=require("lit/decorators.js"),f=require("../internal/define.cjs"),l=require("../internal/ids.cjs"),b=require("../internal/open-change-complete.cjs"),h=require("../internal/positioning.cjs"),E=require("./DialogTrigger.cjs");var i=class extends a.LitElement{constructor(){super(...arguments);this.open=!1;this.defaultOpen=!1;this.modal=!0;this.dismiss="any";this.dismissible=!0;this.contentId=(0,l.nextId)("skdx-dialog-content");this.titleId=(0,l.nextId)("skdx-dialog-title");this.descriptionId=(0,l.nextId)("skdx-dialog-description");this.hasUpdatedOnce=!1}get effectiveDismiss(){return this.dismissible?this.dismiss:"none"}connectedCallback(){super.connectedCallback(),this.defaultOpen&&!this.hasAttribute("open")&&(this.open=!0);let e=this.querySelector("skdx-dialog-content")?.id;e&&(this.contentId=e)}disconnectedCallback(){this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}updated(e){let o=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,e.has("open")&&!o&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=(0,b.notifyOpenChangeComplete)(()=>this.querySelector("skdx-dialog-content"),this.open,n=>this.dispatchEvent(new CustomEvent("open-change-complete",{detail:n,bubbles:!0,composed:!0}))))}setOpen(e){this.open!==e&&(this.open=e,this.dispatchEvent(new CustomEvent("open-change",{detail:e,bubbles:!0,composed:!0})))}render(){return a.html`<slot></slot>`}};i.styles=a.css`
+"use strict";var d=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var O=(s,o)=>{for(var e in o)d(s,e,{get:o[e],enumerable:!0})},k=(s,o,e,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let t of b(o))!C.call(s,t)&&t!==e&&d(s,t,{get:()=>o[t],enumerable:!(r=f(o,t))||r.enumerable});return s};var w=s=>k(d({},"__esModule",{value:!0}),s),n=(s,o,e,r)=>{for(var t=r>1?void 0:r?f(o,e):o,c=s.length-1,u;c>=0;c--)(u=s[c])&&(t=(r?u(o,e,t):u(t))||t);return r&&t&&d(o,e,t),t};var x={};O(x,{SkdxDialogRoot:()=>i});module.exports=w(x);var a=require("lit"),l=require("lit/decorators.js"),g=require("../internal/controlled-value.cjs"),v=require("../internal/define.cjs"),p=require("../internal/ids.cjs"),y=require("../internal/open-change-complete.cjs"),h=require("../internal/positioning.cjs"),I=require("./DialogTrigger.cjs"),m=require("../internal/events.cjs");var i=class extends a.LitElement{constructor(){super(...arguments);this._open=new g.ControlledValue(!1);this.defaultOpen=!1;this.modal=!0;this.dismiss="any";this.dismissible=!0;this._role="dialog";this.contentId=(0,p.nextId)("skdx-dialog-content");this.triggerEl=null;this.titleId=(0,p.nextId)("skdx-dialog-title");this.descriptionId=(0,p.nextId)("skdx-dialog-description");this.hasUpdatedOnce=!1}get open(){return this._open.value??!1}set open(e){let r=this.open;this._open.fromConsumer(e)&&this.requestUpdate("open",r)}get role(){return this._role}set role(e){if(e===null)return;let r=this._role;this._role=e==="alertdialog"?"alertdialog":"dialog",this.removeAttribute("role"),this.requestUpdate("role",r)}get effectiveDismiss(){return this.dismissible?this.role!=="alertdialog"?this.dismiss:this.dismiss==="any"?"escape":this.dismiss==="outside"?"none":this.dismiss:"none"}get effectiveModal(){return this.role==="alertdialog"||this.modal}connectedCallback(){super.connectedCallback(),this.defaultOpen&&!this.hasAttribute("open")&&this.writeOpen(!0);let e=this.querySelector("skdx-dialog-content")?.id;e&&(this.contentId=e)}disconnectedCallback(){this.teardownOpenChangeComplete?.(),super.disconnectedCallback()}updated(e){let r=!this.hasUpdatedOnce;this.hasUpdatedOnce=!0,e.has("open")&&!r&&(this.teardownOpenChangeComplete?.(),this.teardownOpenChangeComplete=(0,y.notifyOpenChangeComplete)(()=>this.querySelector("skdx-dialog-content"),this.open,t=>(0,m.emit)(this,"open-change-complete",t)))}setOpen(e){this.writeOpen(e)&&(0,m.emit)(this,"open-change",e)}writeOpen(e){let r=this.open,t=this._open.propose(e);return t&&this.requestUpdate("open",r),t}render(){return a.html`<slot></slot>`}};i.styles=a.css`
     :host {
       display: contents;
     }
-  `,r([(0,d.property)({type:Boolean,reflect:!0})],i.prototype,"open",2),r([(0,d.property)({type:Boolean,attribute:"default-open"})],i.prototype,"defaultOpen",2),r([(0,d.property)({converter:h.optOutBoolean,reflect:!0})],i.prototype,"modal",2),r([(0,d.property)({type:String,reflect:!0})],i.prototype,"dismiss",2),r([(0,d.property)({converter:h.optOutBoolean,reflect:!0})],i.prototype,"dismissible",2),i=r([(0,f.customElement)("skdx-dialog-root")],i);0&&(module.exports={SkdxDialogRoot});
+  `,n([(0,l.property)({type:Boolean,reflect:!0,noAccessor:!0})],i.prototype,"open",1),n([(0,l.property)({type:Boolean,attribute:"default-open"})],i.prototype,"defaultOpen",2),n([(0,l.property)({converter:h.optOutBoolean,reflect:!0})],i.prototype,"modal",2),n([(0,l.property)({type:String,reflect:!0})],i.prototype,"dismiss",2),n([(0,l.property)({converter:h.optOutBoolean,reflect:!0})],i.prototype,"dismissible",2),n([(0,l.property)({attribute:"role",type:String,noAccessor:!0})],i.prototype,"role",1),i=n([(0,v.customElement)("skdx-dialog-root")],i);0&&(module.exports={SkdxDialogRoot});

package/dist/dialog/DialogRoot.d.cts

@@ -1,22 +1,11 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import './DialogTrigger.cjs';
-/**
- * Which dismissal channels may close a dialog: `'any'` both, `'escape'` the
- * Escape key only, `'outside'` an outside interaction only, `'none'` neither.
- * A policy over the *dismissal*, not over the events — all four dismissal
- * events fire in every mode.
- */
+/** Which dismissal channels may close a dialog: `'any'`, `'escape'` only, `'outside'` only, or `'none'`. */
 export type SkdxDialogDismiss = 'any' | 'escape' | 'outside' | 'none';
+/** The panel's role: an ordinary `'dialog'`, or the interruptive `'alertdialog'` confirmation. */
+export type SkdxDialogRole = 'dialog' | 'alertdialog';
 /**
- * Dialog's state primitive: owns `open`/`modal`/`dismiss`, renders children
- * through `<slot>` with no visible box (`display: contents`). Descendants
- * find it via `closest('skdx-dialog, skdx-dialog-root')` and listen for
- * `open-change` to re-render.
- *
- * `open`/`modal` are plain reflected properties—single source of truth like
- * native `<input>` `checked`. For manual composition, use this via
- * `@skdx/web-components/primitives/dialog`; `<skdx-dialog>` is the recipe.
- *
+ * Dialog's state primitive: owns `open`/`modal`/`dismiss`, rendering children through a `<slot>` with no visible box.
  * @example
  * ```html
  * <skdx-dialog-root>
@@ -33,11 +22,20 @@ export type SkdxDialogDismiss = 'any' | 'escape' | 'outside' | 'none';
  *
  * @fires open-change - Fired with the new open state whenever it changes, controlled or not.
  * @fires open-change-complete - Fired with the new open state once `<skdx-dialog-content>`'s enter or exit animation has finished — immediately, when it declares no animation. Not cancelable: the change has already happened.
+ * @fires confirm - Fired by `<skdx-dialog-action>` on click, carrying the click as its `detail`, before the close is requested. Cancelable: `preventDefault()` keeps the dialog open.
+ * @fires cancel - Fired by `<skdx-dialog-cancel>` on click, carrying the click as its `detail`, before the close is requested. Cancelable: `preventDefault()` keeps the dialog open.
  */
 export declare class SkdxDialogRoot extends LitElement {
     static styles: import("lit").CSSResult;
-    /** Open state. Listen for `open-change` to observe or override changes. */
-    open: boolean;
+    /**
+     * Open state. Setting it — as a property or as the `open` attribute — takes
+     * the dialog under the consumer's control: Escape, an outside press and the
+     * Close button then report `open-change` without closing it themselves.
+     * @default false
+     */
+    get open(): boolean;
+    set open(next: boolean);
+    private readonly _open;
     /**
      * Initial open state for uncontrolled usage, applied once on connect and only if `open` wasn't already set.
      * @default false
@@ -59,14 +57,31 @@ export declare class SkdxDialogRoot extends LitElement {
      * @default true
      */
     dismissible: boolean;
+    /**
+     * The panel's role. `'alertdialog'` is the interruptive confirmation: always
+     * modal, closed by no outside interaction, focused on the Cancel part before
+     * the first tabbable element, and given a derived Action/Cancel pair in place
+     * of the close button.
+     * @default 'dialog'
+     */
+    get role(): SkdxDialogRole;
+    set role(next: SkdxDialogRole | null);
+    private _role;
     /**
      * @internal The dismissal policy actually in force — {@link dismiss}, or
-     * `'none'` while {@link dismissible} is off.
+     * `'none'` while {@link dismissible} is off. An alertdialog resolves the two
+     * outside channels away, since an outside interaction never closes one.
      */
     get effectiveDismiss(): SkdxDialogDismiss;
+    /** @internal Whether the panel is modal in fact — an alertdialog always is, whatever {@link modal} says. */
+    get effectiveModal(): boolean;
     /** @internal Rewritten to a recipe host's own `id` when one is forwarded onto the derived Content — see `host-attributes.ts`. */
     contentId: string;
+    /** @internal Set by `<skdx-dialog-trigger>` once its native button mounts; kept out of the outside-interaction scope. */
+    triggerEl: HTMLElement | null;
+    /** @internal Generated title id, published as aria-labelledby on the dialog. */
     readonly titleId: string;
+    /** @internal Generated description id, published as aria-describedby on the dialog. */
     readonly descriptionId: string;
     private hasUpdatedOnce;
     private teardownOpenChangeComplete?;
@@ -77,7 +92,13 @@ export declare class SkdxDialogRoot extends LitElement {
      * Sets `open` and dispatches a bubbling, composed `open-change` event with the new value as `detail`; a no-op if `open` is already that value.
      */
     setOpen(next: boolean): void;
-    render(): import("lit").TemplateResult<1>;
+    /**
+     * The one place the dialog's own state moves: writes `open` only while
+     * uncontrolled, and reports whether `open-change` is owed — a controlled
+     * dialog still announces the change it wants, it just does not make it.
+     */
+    private writeOpen;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {