@praxisui/dialog 8.0.0-beta.0 → 8.0.0-beta.100

package/README.md

@@ -212,6 +212,31 @@ this.dialog.openByRegistry(PRAXIS_DIALOG_EXAMPLE_LONG_CONTENT, {
 - In `alertdialog`, focuses the primary action when present
 - Restores focus on close (service and tag)
 
+## Agentic Authoring Contract
+
+`@praxisui/dialog` publishes an executable authoring manifest for the
+`praxis-dialog` shell. The manifest governs overlay configuration such as size,
+position, backdrop, close policy, presets, accessibility fields and the child
+host envelope.
+
+Dialog authoring intentionally separates shell semantics from child component
+semantics:
+
+- shell operations edit `PraxisDialogConfig`
+- size, position and backdrop operations are visual overlay changes
+- close policy edits are explicit, confirmation-gated shell configuration
+- preset operations preserve the merge order `type -> variant -> local config`
+- child host operations resolve component/template ids through governed
+  registries
+- child component config edits must be delegated to the child component
+  manifest through `childOperation.delegate`
+
+This prevents the dialog manifest from becoming an ad hoc facade over table,
+form, page or custom component configuration.
+Each operation declares its editable target, resolver, ambiguity policy,
+preconditions, validators, effects, affected paths and typed
+`submissionImpact`.
+
 ## Theming & Styles
 
 - `themeColor: 'light' | 'dark' | 'primary'`

package/fesm2022/praxisui-dialog.mjs

@@ -9,14 +9,14 @@ import * as i3 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import { PraxisIconDirective, PraxisLayerScaleStyleService, GlobalConfigService, GLOBAL_DIALOG_SERVICE, ComponentMetadataRegistry, GLOBAL_SURFACE_SERVICE, SURFACE_DRAWER_BRIDGE, PraxisSurfaceHostComponent } from '@praxisui/core';
+import { PraxisIconDirective, PraxisLayerScaleStyleService, GlobalConfigService, GLOBAL_DIALOG_SERVICE, ComponentMetadataRegistry, GLOBAL_SURFACE_SERVICE, SurfaceOpenMaterializerService, SURFACE_DRAWER_BRIDGE, PraxisSurfaceHostComponent } from '@praxisui/core';
 import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
-import * as i2$1 from '@angular/forms';
+import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { DomSanitizer } from '@angular/platform-browser';
-import * as i3$1 from '@angular/material/form-field';
+import * as i2$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4$1 from '@angular/material/input';
+import * as i3$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 
 const PRAXIS_DIALOG_DATA = new InjectionToken('PRAXIS_DIALOG_DATA');
@@ -133,10 +133,10 @@ class PraxisDialogTitleDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisDialogTitleDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: PraxisDialogTitleDirective, isStandalone: true, selector: "ng-template[praxisDialogTitle]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisDialogTitleDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: PraxisDialogTitleDirective, isStandalone: true, selector: "ng-template[praxisDialogTitle]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisDialogTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisDialogTitleDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[praxisDialogTitle]', standalone: true }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -146,10 +146,10 @@ class PraxisDialogActionsDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisDialogActionsDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: PraxisDialogActionsDirective, isStandalone: true, selector: "ng-template[praxisDialogActions]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisDialogActionsDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: PraxisDialogActionsDirective, isStandalone: true, selector: "ng-template[praxisDialogActions]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisDialogActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisDialogActionsDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[praxisDialogActions]', standalone: true }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -159,10 +159,10 @@ class PraxisDialogContentDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisDialogContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.17", type: PraxisDialogContentDirective, isStandalone: true, selector: "ng-template[praxisDialogContent]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisDialogContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: PraxisDialogContentDirective, isStandalone: true, selector: "ng-template[praxisDialogContent]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisDialogContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisDialogContentDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[praxisDialogContent]', standalone: true }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
@@ -182,6 +182,7 @@ class PraxisDialogComponent {
     themeColor = 'light';
     disableClose = false;
     hasBackdrop = true;
+    closeOnBackdropClick = true;
     overlayMode = false; // true when opened via service/CDK overlay
     zIndex;
     panelClass;
@@ -292,6 +293,8 @@ class PraxisDialogComponent {
             return;
         if (this.disableClose)
             return;
+        if (!this.closeOnBackdropClick)
+            return;
         // Avoid closing when clicking inside the panel area
         this.close.emit();
     }
@@ -487,12 +490,12 @@ class PraxisDialogComponent {
             return false;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisDialogComponent, isStandalone: true, selector: "praxis-dialog", inputs: { title: "title", actions: "actions", actionsLayout: "actionsLayout", animation: "animation", open: "open", width: "width", height: "height", minWidth: "minWidth", maxWidth: "maxWidth", minHeight: "minHeight", maxHeight: "maxHeight", themeColor: "themeColor", disableClose: "disableClose", hasBackdrop: "hasBackdrop", overlayMode: "overlayMode", zIndex: "zIndex", panelClass: "panelClass", backdropClass: "backdropClass", position: "position", autoFocusedElement: "autoFocusedElement", autoFocus: "autoFocus", restoreFocus: "restoreFocus", id: "id", ariaRole: "ariaRole", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy", styles: "styles", titleIcon: "titleIcon" }, outputs: { action: "action", close: "close", opened: "opened", afterClosed: "afterClosed" }, host: { properties: { "class": "this.hostClass", "attr.tabindex": "this.tabindex" } }, queries: [{ propertyName: "titleTpl", first: true, predicate: PraxisDialogTitleDirective, descendants: true, read: PraxisDialogTitleDirective }, { propertyName: "actionsTpl", first: true, predicate: PraxisDialogActionsDirective, descendants: true, read: PraxisDialogActionsDirective }, { propertyName: "contentTpl", first: true, predicate: PraxisDialogContentDirective, descendants: true, read: PraxisDialogContentDirective }], viewQueries: [{ propertyName: "contentHost", first: true, predicate: CdkPortalOutlet, descendants: true }, { propertyName: "panelEl", first: true, predicate: ["panel"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@let _titleId = (id ?? 'praxis-dialog') + '-title';\n\n<ng-template #panelHeader>\n  <div class=\"pdx-dialog__title\" @if (titleTpl?.templateRef || title || titleIcon)>\n    @if (titleTpl?.templateRef) {\n      <ng-container [ngTemplateOutlet]=\"titleTpl!.templateRef\"></ng-container>\n    } @else {\n      <div class=\"pdx-dialog__title-row\">\n        <mat-icon *ngIf=\"titleIcon\" class=\"pdx-dialog__title-icon\" [praxisIcon]=\"titleIcon\" aria-hidden=\"true\"></mat-icon>\n        <h2 class=\"pdx-dialog__title-text\" [attr.id]=\"_titleId\">{{ title }}</h2>\n      </div>\n    }\n  </div>\n  </ng-template>\n\n<ng-template #panelActions>\n  <div class=\"pdx-dialog__actions\" [class.is-stretched]=\"actionsLayout==='stretched'\">\n    @if (actionsTpl?.templateRef) {\n      <ng-container [ngTemplateOutlet]=\"actionsTpl!.templateRef\"></ng-container>\n    } @else {\n      @for (a of actions; track a?.id ?? a) {\n        <button\n          type=\"button\"\n          class=\"pdx-dialog__action-btn\"\n          [attr.data-testid]=\"a.id || null\"\n          [attr.data-role]=\"a.role || null\"\n          [attr.data-theme]=\"a.themeColor || null\"\n          [attr.data-fill]=\"a.fillMode || null\"\n          [ngClass]=\"a.cssClass\"\n          (click)=\"onActionClick(a)\"\n          [attr.cdkFocusInitial]=\"a.role==='primary' && ariaRole==='alertdialog' ? '' : null\"\n        >\n          @if (a.icon) {\n            <mat-icon [praxisIcon]=\"a.icon\"></mat-icon>\n          } @else if (a.svgIcon) {\n            <mat-icon [svgIcon]=\"a.svgIcon\"></mat-icon>\n          }\n          {{ a.text }}\n        </button>\n      }\n    }\n  </div>\n</ng-template>\n\n@if (overlayMode) {\n  <div\n    #panel\n    class=\"pdx-dialog pdx-dialog--{{ themeColor }} pdx-dialog--layout-{{ actionsLayout }}\"\n    [attr.role]=\"ariaRole\"\n    [attr.id]=\"id || null\"\n    [attr.aria-modal]=\"true\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"(ariaLabelledBy || (title ? _titleId : null))\"\n    [attr.aria-describedby]=\"ariaDescribedBy || null\"\n    (keydown)=\"onKeydown($event)\"\n    cdkTrapFocus\n    [ngClass]=\"panelNgClass\"\n    [style.width]=\"width\"\n    [style.height]=\"height\"\n    [style.min-width]=\"minWidth\"\n    [style.max-width]=\"maxWidth\"\n    [style.min-height]=\"minHeight\"\n    [style.max-height]=\"maxHeight\"\n    [class.has-actions]=\"(actions.length||0)>0 || !!actionsTpl?.templateRef\"\n  >\n    <ng-container [ngTemplateOutlet]=\"panelHeader\"></ng-container>\n    <div class=\"pdx-dialog__content\">\n      @if (contentTpl?.templateRef) {\n        <ng-container [ngTemplateOutlet]=\"contentTpl!.templateRef\"></ng-container>\n      } @else {\n        <ng-template cdkPortalOutlet></ng-template>\n      }\n    </div>\n    <ng-container [ngTemplateOutlet]=\"panelActions\"></ng-container>\n  </div>\n} @else {\n  <div class=\"pdx-dialog-overlay\" [class.has-backdrop]=\"hasBackdrop\" [hidden]=\"!isDisplayed\" (click)=\"onBackdrop($event)\" [ngClass]=\"backdropClass\" [style.z-index]=\"zIndex\">\n    <div class=\"pdx-dialog-shell\" (click)=\"$event.stopPropagation()\">\n      <div\n        #panel\n        class=\"pdx-dialog pdx-dialog--{{ themeColor }} pdx-dialog--layout-{{ actionsLayout }}\"\n        [attr.role]=\"ariaRole\"\n        [attr.id]=\"id || null\"\n        [attr.aria-modal]=\"true\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [attr.aria-labelledby]=\"(ariaLabelledBy || (title ? _titleId : null))\"\n        [attr.aria-describedby]=\"ariaDescribedBy || null\"\n        (keydown)=\"onKeydown($event)\"\n        cdkTrapFocus\n        [ngClass]=\"panelNgClass\"\n        [style.width]=\"width\"\n        [style.height]=\"height\"\n        [style.min-width]=\"minWidth\"\n        [style.max-width]=\"maxWidth\"\n        [style.min-height]=\"minHeight\"\n        [style.max-height]=\"maxHeight\"\n        [style.top]=\"position?.top || null\"\n        [style.bottom]=\"position?.bottom || null\"\n        [style.left]=\"position?.left || null\"\n        [style.right]=\"position?.right || null\"\n        [class.pdx-has-position]=\"position\"\n        [class.has-actions]=\"(actions.length||0)>0 || !!actionsTpl?.templateRef\"\n      >\n        <ng-container [ngTemplateOutlet]=\"panelHeader\"></ng-container>\n        <div class=\"pdx-dialog__content\">\n          @if (contentTpl?.templateRef) {\n            <ng-container [ngTemplateOutlet]=\"contentTpl!.templateRef\"></ng-container>\n          } @else {\n            <ng-template cdkPortalOutlet></ng-template>\n          }\n        </div>\n        <ng-container [ngTemplateOutlet]=\"panelActions\"></ng-container>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.pdx-dialog-host{--pdx-dialog-bg: var(--md-sys-color-surface);--pdx-dialog-surface: var(--md-sys-color-surface-container-high);--pdx-dialog-border: var(--md-sys-color-outline-variant);--pdx-dialog-title-fg: var(--md-sys-color-on-surface);--pdx-dialog-elevation: var(--mat-elevation-level4)}.pdx-dialog-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--praxis-layer-dialog, 1300);background:transparent}.pdx-dialog-overlay.has-backdrop{background:var(--pdx-dialog-backdrop, rgba(0, 0, 0, .6))}.pdx-dialog-shell{display:contents}.pdx-dialog.pdx-has-position{position:absolute}.pdx-dialog{background:var(--pdx-dialog-container-color, var(--pdx-dialog-surface));color:var(--md-sys-color-on-surface, #111);border:1px solid var(--pdx-dialog-border);border-radius:var(--pdx-dialog-shape, 16px);box-shadow:var(--pdx-dialog-elevation-shadow, var(--pdx-dialog-elevation));max-width:var(--pdx-dialog-max-width, 90vw);max-height:var(--pdx-dialog-max-height, 80vh);display:flex;flex-direction:column;min-width:var(--pdx-dialog-min-width, 280px);outline:0}.pdx-dialog__title{padding:var(--pdx-dialog-headline-padding, 12px 24px 10px);border-bottom:1px solid var(--pdx-dialog-border);color:var(--pdx-dialog-subhead-color, var(--pdx-dialog-title-fg));background:var(--pdx-dialog-title-bg, transparent);flex:0 0 auto}.pdx-dialog__title-row{display:flex;gap:10px}.pdx-dialog__title-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:0 0 24px;font-size:20px;line-height:1;opacity:.87}.pdx-dialog__title-text{margin:0;font-family:var(--pdx-dialog-subhead-font, inherit);font-size:var(--pdx-dialog-subhead-size, 16px);letter-spacing:var(--pdx-dialog-subhead-tracking, normal);font-weight:var(--pdx-dialog-subhead-weight, 600);line-height:1.2}.pdx-dialog__content{padding:var(--pdx-dialog-content-padding, 16px);overflow:auto;flex:1 1 auto;min-height:0;color:var(--pdx-dialog-supporting-text-color, inherit);font-family:var(--pdx-dialog-supporting-text-font, inherit);line-height:var(--pdx-dialog-supporting-text-line-height, 1.4);font-size:var(--pdx-dialog-supporting-text-size, 14px);letter-spacing:var(--pdx-dialog-supporting-text-tracking, normal);font-weight:var(--pdx-dialog-supporting-text-weight, 400)}.pdx-dialog.has-actions .pdx-dialog__content{padding-bottom:var(--pdx-dialog-with-actions-content-padding, var(--pdx-dialog-content-padding, 16px))}.pdx-dialog__actions{display:flex;gap:8px;padding:var(--pdx-dialog-actions-padding, 12px 24px 16px);border-top:1px solid var(--pdx-dialog-border);justify-content:flex-end;align-items:center;background:var(--pdx-dialog-actions-bg, transparent);flex:0 0 auto}.pdx-dialog__actions.is-stretched{justify-content:stretch}.pdx-dialog__actions.is-stretched .pdx-dialog__action-btn{flex:1 1 0;justify-content:center}.pdx-dialog__action-btn{appearance:none;border:1px solid var(--pdx-dialog-border);background:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-on-surface);border-radius:var(--pdx-dialog-action-radius, 8px);padding:var(--pdx-dialog-action-padding, 0 14px);min-height:var(--pdx-dialog-action-min-height, 36px);cursor:pointer;display:inline-flex;align-items:center;gap:8px;line-height:1;transition:background-color .18s ease,border-color .18s ease,color .18s ease}.pdx-dialog__action-btn:hover{background:var(--md-sys-color-surface-container)}.pdx-dialog__action-btn:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.pdx-dialog__action-btn:disabled{opacity:.6;cursor:not-allowed}.pdx-dialog__action-btn[data-role=primary]:not([data-fill]),.pdx-dialog__action-btn[data-fill=solid]{background:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.pdx-dialog__action-btn[data-role=primary]:not([data-fill]):hover,.pdx-dialog__action-btn[data-fill=solid]:hover{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);border-color:var(--md-sys-color-primary-container)}.pdx-dialog__action-btn[data-role=danger]:not([data-fill]),.pdx-dialog__action-btn[data-fill=solid][data-theme=warn],.pdx-dialog__action-btn[data-theme=warn][data-fill=solid]{background:var(--md-sys-color-error);border-color:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}.pdx-dialog__action-btn[data-role=danger]:not([data-fill]):hover,.pdx-dialog__action-btn[data-fill=solid][data-theme=warn]:hover,.pdx-dialog__action-btn[data-theme=warn][data-fill=solid]:hover{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);border-color:var(--md-sys-color-error-container)}.pdx-dialog__action-btn[data-fill=solid][data-theme=accent],.pdx-dialog__action-btn[data-theme=accent][data-fill=solid]{background:var(--md-sys-color-secondary);border-color:var(--md-sys-color-secondary);color:var(--md-sys-color-on-secondary)}.pdx-dialog__action-btn[data-fill=solid][data-theme=accent]:hover,.pdx-dialog__action-btn[data-theme=accent][data-fill=solid]:hover{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);border-color:var(--md-sys-color-secondary-container)}.pdx-dialog__action-btn[data-fill=outline]{background:transparent;color:var(--md-sys-color-on-surface)}.pdx-dialog__action-btn[data-fill=outline][data-theme=primary],.pdx-dialog__action-btn[data-fill=flat][data-theme=primary]{color:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary)}.pdx-dialog__action-btn[data-fill=outline][data-theme=accent],.pdx-dialog__action-btn[data-fill=flat][data-theme=accent]{color:var(--md-sys-color-secondary);border-color:var(--md-sys-color-secondary)}.pdx-dialog__action-btn[data-fill=outline][data-theme=warn],.pdx-dialog__action-btn[data-fill=flat][data-theme=warn]{color:var(--md-sys-color-error);border-color:var(--md-sys-color-error)}.pdx-dialog__action-btn[data-fill=flat]{background:transparent;border-color:transparent;color:var(--md-sys-color-primary)}.pdx-dialog__action-btn .mat-icon{font-size:20px;width:20px;height:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.pdx-dialog--primary .pdx-dialog__title{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);border-bottom-color:var(--md-sys-color-outline-variant)}.pdx-dialog--dark{background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface)}.pdx-dialog{transform-origin:center;transition-property:transform,opacity;transition-duration:var(--pdx-dialog-anim-duration, .3s);transition-timing-function:var(--pdx-dialog-anim-ease, cubic-bezier(.2, 0, 0, 1))}.pdx-dialog.pdx-anim-fade{opacity:1}.pdx-dialog.pdx-anim-zoom{transform:scale(1)}.pdx-dialog.pdx-anim-translate-up,.pdx-dialog.pdx-anim-translate-down{transform:translateY(0)}.pdx-dialog.pdx-anim-translate-left,.pdx-dialog.pdx-anim-translate-right{transform:translate(0)}.pdx-dialog.pdx-state-opening.pdx-anim-fade{opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-zoom{transform:scale(.96);opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-translate-up{transform:translateY(-16px);opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-translate-down{transform:translateY(16px);opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-translate-left{transform:translate(-16px);opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-translate-right{transform:translate(16px);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-fade{opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-zoom{transform:scale(.96);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-translate-up{transform:translateY(-16px);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-translate-down{transform:translateY(16px);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-translate-left{transform:translate(-16px);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-translate-right{transform:translate(16px);opacity:0}@media(prefers-reduced-motion:reduce){.pdx-dialog{transition:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisDialogComponent, isStandalone: true, selector: "praxis-dialog", inputs: { title: "title", actions: "actions", actionsLayout: "actionsLayout", animation: "animation", open: "open", width: "width", height: "height", minWidth: "minWidth", maxWidth: "maxWidth", minHeight: "minHeight", maxHeight: "maxHeight", themeColor: "themeColor", disableClose: "disableClose", hasBackdrop: "hasBackdrop", closeOnBackdropClick: "closeOnBackdropClick", overlayMode: "overlayMode", zIndex: "zIndex", panelClass: "panelClass", backdropClass: "backdropClass", position: "position", autoFocusedElement: "autoFocusedElement", autoFocus: "autoFocus", restoreFocus: "restoreFocus", id: "id", ariaRole: "ariaRole", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy", styles: "styles", titleIcon: "titleIcon" }, outputs: { action: "action", close: "close", opened: "opened", afterClosed: "afterClosed" }, host: { properties: { "class": "this.hostClass", "attr.tabindex": "this.tabindex" } }, queries: [{ propertyName: "titleTpl", first: true, predicate: PraxisDialogTitleDirective, descendants: true, read: PraxisDialogTitleDirective }, { propertyName: "actionsTpl", first: true, predicate: PraxisDialogActionsDirective, descendants: true, read: PraxisDialogActionsDirective }, { propertyName: "contentTpl", first: true, predicate: PraxisDialogContentDirective, descendants: true, read: PraxisDialogContentDirective }], viewQueries: [{ propertyName: "contentHost", first: true, predicate: CdkPortalOutlet, descendants: true }, { propertyName: "panelEl", first: true, predicate: ["panel"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@let _titleId = (id ?? 'praxis-dialog') + '-title';\n\n<ng-template #panelHeader>\n  @if (titleTpl?.templateRef || title || titleIcon) {\n    <div class=\"pdx-dialog__title\">\n      @if (titleTpl?.templateRef) {\n        <ng-container [ngTemplateOutlet]=\"titleTpl!.templateRef\"></ng-container>\n      } @else {\n        <div class=\"pdx-dialog__title-row\">\n          @if (titleIcon) {\n            <mat-icon class=\"pdx-dialog__title-icon\" [praxisIcon]=\"titleIcon\" aria-hidden=\"true\"></mat-icon>\n          }\n          <h2 class=\"pdx-dialog__title-text\" [attr.id]=\"_titleId\">{{ title }}</h2>\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #panelActions>\n  <div class=\"pdx-dialog__actions\" [class.is-stretched]=\"actionsLayout==='stretched'\">\n    @if (actionsTpl?.templateRef) {\n      <ng-container [ngTemplateOutlet]=\"actionsTpl!.templateRef\"></ng-container>\n    } @else {\n      @for (a of actions; track a?.id ?? a) {\n        <button\n          type=\"button\"\n          class=\"pdx-dialog__action-btn\"\n          [attr.data-testid]=\"a.id || null\"\n          [attr.data-role]=\"a.role || null\"\n          [attr.data-theme]=\"a.themeColor || null\"\n          [attr.data-fill]=\"a.fillMode || null\"\n          [ngClass]=\"a.cssClass\"\n          (click)=\"onActionClick(a)\"\n          [attr.cdkFocusInitial]=\"a.role==='primary' && ariaRole==='alertdialog' ? '' : null\"\n          >\n          @if (a.icon) {\n            <mat-icon [praxisIcon]=\"a.icon\"></mat-icon>\n          } @else if (a.svgIcon) {\n            <mat-icon [svgIcon]=\"a.svgIcon\"></mat-icon>\n          }\n          {{ a.text }}\n        </button>\n      }\n    }\n  </div>\n</ng-template>\n\n@if (overlayMode) {\n  <div\n    #panel\n    class=\"pdx-dialog pdx-dialog--{{ themeColor }} pdx-dialog--layout-{{ actionsLayout }}\"\n    [attr.role]=\"ariaRole\"\n    [attr.id]=\"id || null\"\n    [attr.aria-modal]=\"true\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"(ariaLabelledBy || (title ? _titleId : null))\"\n    [attr.aria-describedby]=\"ariaDescribedBy || null\"\n    (keydown)=\"onKeydown($event)\"\n    cdkTrapFocus\n    [ngClass]=\"panelNgClass\"\n    [style.width]=\"width\"\n    [style.height]=\"height\"\n    [style.min-width]=\"minWidth\"\n    [style.max-width]=\"maxWidth\"\n    [style.min-height]=\"minHeight\"\n    [style.max-height]=\"maxHeight\"\n    [class.has-actions]=\"(actions.length||0)>0 || !!actionsTpl?.templateRef\"\n    >\n    <ng-container [ngTemplateOutlet]=\"panelHeader\"></ng-container>\n    <div class=\"pdx-dialog__content\">\n      @if (contentTpl?.templateRef) {\n        <ng-container [ngTemplateOutlet]=\"contentTpl!.templateRef\"></ng-container>\n      } @else {\n        <ng-template cdkPortalOutlet></ng-template>\n      }\n    </div>\n    <ng-container [ngTemplateOutlet]=\"panelActions\"></ng-container>\n  </div>\n} @else {\n  <div class=\"pdx-dialog-overlay\" [class.has-backdrop]=\"hasBackdrop\" [hidden]=\"!isDisplayed\" (click)=\"onBackdrop($event)\" [ngClass]=\"backdropClass\" [style.z-index]=\"zIndex\">\n    <div class=\"pdx-dialog-shell\" (click)=\"$event.stopPropagation()\">\n      <div\n        #panel\n        class=\"pdx-dialog pdx-dialog--{{ themeColor }} pdx-dialog--layout-{{ actionsLayout }}\"\n        [attr.role]=\"ariaRole\"\n        [attr.id]=\"id || null\"\n        [attr.aria-modal]=\"true\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [attr.aria-labelledby]=\"(ariaLabelledBy || (title ? _titleId : null))\"\n        [attr.aria-describedby]=\"ariaDescribedBy || null\"\n        (keydown)=\"onKeydown($event)\"\n        cdkTrapFocus\n        [ngClass]=\"panelNgClass\"\n        [style.width]=\"width\"\n        [style.height]=\"height\"\n        [style.min-width]=\"minWidth\"\n        [style.max-width]=\"maxWidth\"\n        [style.min-height]=\"minHeight\"\n        [style.max-height]=\"maxHeight\"\n        [style.top]=\"position?.top || null\"\n        [style.bottom]=\"position?.bottom || null\"\n        [style.left]=\"position?.left || null\"\n        [style.right]=\"position?.right || null\"\n        [class.pdx-has-position]=\"position\"\n        [class.has-actions]=\"(actions.length||0)>0 || !!actionsTpl?.templateRef\"\n        >\n        <ng-container [ngTemplateOutlet]=\"panelHeader\"></ng-container>\n        <div class=\"pdx-dialog__content\">\n          @if (contentTpl?.templateRef) {\n            <ng-container [ngTemplateOutlet]=\"contentTpl!.templateRef\"></ng-container>\n          } @else {\n            <ng-template cdkPortalOutlet></ng-template>\n          }\n        </div>\n        <ng-container [ngTemplateOutlet]=\"panelActions\"></ng-container>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.pdx-dialog-host{--pdx-dialog-bg: var(--md-sys-color-surface);--pdx-dialog-surface: var(--md-sys-color-surface-container-high);--pdx-dialog-border: var(--md-sys-color-outline-variant);--pdx-dialog-title-fg: var(--md-sys-color-on-surface);--pdx-dialog-elevation: var(--mat-elevation-level4)}.pdx-dialog-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--praxis-layer-dialog, 1300);background:transparent}.pdx-dialog-overlay.has-backdrop{background:var(--pdx-dialog-backdrop, rgba(0, 0, 0, .6))}.pdx-dialog-shell{display:contents}.pdx-dialog.pdx-has-position{position:absolute}.pdx-dialog{background:var(--pdx-dialog-container-color, var(--pdx-dialog-surface));color:var(--md-sys-color-on-surface, #111);border:1px solid var(--pdx-dialog-border);border-radius:var(--pdx-dialog-shape, 16px);box-shadow:var(--pdx-dialog-elevation-shadow, var(--pdx-dialog-elevation));max-width:var(--pdx-dialog-max-width, 90vw);max-height:var(--pdx-dialog-max-height, 80vh);display:flex;flex-direction:column;min-width:var(--pdx-dialog-min-width, 280px);outline:0}.pdx-dialog__title{padding:var(--pdx-dialog-headline-padding, 12px 24px 10px);border-bottom:1px solid var(--pdx-dialog-border);color:var(--pdx-dialog-subhead-color, var(--pdx-dialog-title-fg));background:var(--pdx-dialog-title-bg, transparent);flex:0 0 auto}.pdx-dialog__title-row{display:flex;gap:10px}.pdx-dialog__title-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:0 0 24px;font-size:20px;line-height:1;opacity:.87}.pdx-dialog__title-text{margin:0;font-family:var(--pdx-dialog-subhead-font, inherit);font-size:var(--pdx-dialog-subhead-size, 16px);letter-spacing:var(--pdx-dialog-subhead-tracking, normal);font-weight:var(--pdx-dialog-subhead-weight, 600);line-height:1.2}.pdx-dialog__content{padding:var(--pdx-dialog-content-padding, 16px);overflow:auto;flex:1 1 auto;min-height:0;color:var(--pdx-dialog-supporting-text-color, inherit);font-family:var(--pdx-dialog-supporting-text-font, inherit);line-height:var(--pdx-dialog-supporting-text-line-height, 1.4);font-size:var(--pdx-dialog-supporting-text-size, 14px);letter-spacing:var(--pdx-dialog-supporting-text-tracking, normal);font-weight:var(--pdx-dialog-supporting-text-weight, 400)}.pdx-dialog.has-actions .pdx-dialog__content{padding-bottom:var(--pdx-dialog-with-actions-content-padding, var(--pdx-dialog-content-padding, 16px))}.pdx-dialog__actions{display:flex;gap:8px;padding:var(--pdx-dialog-actions-padding, 12px 24px 16px);border-top:1px solid var(--pdx-dialog-border);justify-content:flex-end;align-items:center;background:var(--pdx-dialog-actions-bg, transparent);flex:0 0 auto}.pdx-dialog__actions.is-stretched{justify-content:stretch}.pdx-dialog__actions.is-stretched .pdx-dialog__action-btn{flex:1 1 0;justify-content:center}.pdx-dialog__action-btn{appearance:none;border:1px solid var(--pdx-dialog-border);background:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-on-surface);border-radius:var(--pdx-dialog-action-radius, 8px);padding:var(--pdx-dialog-action-padding, 0 14px);min-height:var(--pdx-dialog-action-min-height, 36px);cursor:pointer;display:inline-flex;align-items:center;gap:8px;line-height:1;transition:background-color .18s ease,border-color .18s ease,color .18s ease}.pdx-dialog__action-btn:hover{background:var(--md-sys-color-surface-container)}.pdx-dialog__action-btn:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.pdx-dialog__action-btn:disabled{opacity:.6;cursor:not-allowed}.pdx-dialog__action-btn[data-role=primary]:not([data-fill]),.pdx-dialog__action-btn[data-fill=solid]{background:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.pdx-dialog__action-btn[data-role=primary]:not([data-fill]):hover,.pdx-dialog__action-btn[data-fill=solid]:hover{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);border-color:var(--md-sys-color-primary-container)}.pdx-dialog__action-btn[data-role=danger]:not([data-fill]),.pdx-dialog__action-btn[data-fill=solid][data-theme=warn],.pdx-dialog__action-btn[data-theme=warn][data-fill=solid]{background:var(--md-sys-color-error);border-color:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}.pdx-dialog__action-btn[data-role=danger]:not([data-fill]):hover,.pdx-dialog__action-btn[data-fill=solid][data-theme=warn]:hover,.pdx-dialog__action-btn[data-theme=warn][data-fill=solid]:hover{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);border-color:var(--md-sys-color-error-container)}.pdx-dialog__action-btn[data-fill=solid][data-theme=accent],.pdx-dialog__action-btn[data-theme=accent][data-fill=solid]{background:var(--md-sys-color-secondary);border-color:var(--md-sys-color-secondary);color:var(--md-sys-color-on-secondary)}.pdx-dialog__action-btn[data-fill=solid][data-theme=accent]:hover,.pdx-dialog__action-btn[data-theme=accent][data-fill=solid]:hover{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);border-color:var(--md-sys-color-secondary-container)}.pdx-dialog__action-btn[data-fill=outline]{background:transparent;color:var(--md-sys-color-on-surface)}.pdx-dialog__action-btn[data-fill=outline][data-theme=primary],.pdx-dialog__action-btn[data-fill=flat][data-theme=primary]{color:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary)}.pdx-dialog__action-btn[data-fill=outline][data-theme=accent],.pdx-dialog__action-btn[data-fill=flat][data-theme=accent]{color:var(--md-sys-color-secondary);border-color:var(--md-sys-color-secondary)}.pdx-dialog__action-btn[data-fill=outline][data-theme=warn],.pdx-dialog__action-btn[data-fill=flat][data-theme=warn]{color:var(--md-sys-color-error);border-color:var(--md-sys-color-error)}.pdx-dialog__action-btn[data-fill=flat]{background:transparent;border-color:transparent;color:var(--md-sys-color-primary)}.pdx-dialog__action-btn .mat-icon{font-size:20px;width:20px;height:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.pdx-dialog--primary .pdx-dialog__title{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);border-bottom-color:var(--md-sys-color-outline-variant)}.pdx-dialog--dark{background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface)}.pdx-dialog{transform-origin:center;transition-property:transform,opacity;transition-duration:var(--pdx-dialog-anim-duration, .3s);transition-timing-function:var(--pdx-dialog-anim-ease, cubic-bezier(.2, 0, 0, 1))}.pdx-dialog.pdx-anim-fade{opacity:1}.pdx-dialog.pdx-anim-zoom{transform:scale(1)}.pdx-dialog.pdx-anim-translate-up,.pdx-dialog.pdx-anim-translate-down{transform:translateY(0)}.pdx-dialog.pdx-anim-translate-left,.pdx-dialog.pdx-anim-translate-right{transform:translate(0)}.pdx-dialog.pdx-state-opening.pdx-anim-fade{opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-zoom{transform:scale(.96);opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-translate-up{transform:translateY(-16px);opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-translate-down{transform:translateY(16px);opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-translate-left{transform:translate(-16px);opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-translate-right{transform:translate(16px);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-fade{opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-zoom{transform:scale(.96);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-translate-up{transform:translateY(-16px);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-translate-down{transform:translateY(16px);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-translate-left{transform:translate(-16px);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-translate-right{transform:translate(16px);opacity:0}@media(prefers-reduced-motion:reduce){.pdx-dialog{transition:none!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-dialog', standalone: true, imports: [CommonModule, PortalModule, A11yModule, MatIconModule, PraxisIconDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@let _titleId = (id ?? 'praxis-dialog') + '-title';\n\n<ng-template #panelHeader>\n  <div class=\"pdx-dialog__title\" @if (titleTpl?.templateRef || title || titleIcon)>\n    @if (titleTpl?.templateRef) {\n      <ng-container [ngTemplateOutlet]=\"titleTpl!.templateRef\"></ng-container>\n    } @else {\n      <div class=\"pdx-dialog__title-row\">\n        <mat-icon *ngIf=\"titleIcon\" class=\"pdx-dialog__title-icon\" [praxisIcon]=\"titleIcon\" aria-hidden=\"true\"></mat-icon>\n        <h2 class=\"pdx-dialog__title-text\" [attr.id]=\"_titleId\">{{ title }}</h2>\n      </div>\n    }\n  </div>\n  </ng-template>\n\n<ng-template #panelActions>\n  <div class=\"pdx-dialog__actions\" [class.is-stretched]=\"actionsLayout==='stretched'\">\n    @if (actionsTpl?.templateRef) {\n      <ng-container [ngTemplateOutlet]=\"actionsTpl!.templateRef\"></ng-container>\n    } @else {\n      @for (a of actions; track a?.id ?? a) {\n        <button\n          type=\"button\"\n          class=\"pdx-dialog__action-btn\"\n          [attr.data-testid]=\"a.id || null\"\n          [attr.data-role]=\"a.role || null\"\n          [attr.data-theme]=\"a.themeColor || null\"\n          [attr.data-fill]=\"a.fillMode || null\"\n          [ngClass]=\"a.cssClass\"\n          (click)=\"onActionClick(a)\"\n          [attr.cdkFocusInitial]=\"a.role==='primary' && ariaRole==='alertdialog' ? '' : null\"\n        >\n          @if (a.icon) {\n            <mat-icon [praxisIcon]=\"a.icon\"></mat-icon>\n          } @else if (a.svgIcon) {\n            <mat-icon [svgIcon]=\"a.svgIcon\"></mat-icon>\n          }\n          {{ a.text }}\n        </button>\n      }\n    }\n  </div>\n</ng-template>\n\n@if (overlayMode) {\n  <div\n    #panel\n    class=\"pdx-dialog pdx-dialog--{{ themeColor }} pdx-dialog--layout-{{ actionsLayout }}\"\n    [attr.role]=\"ariaRole\"\n    [attr.id]=\"id || null\"\n    [attr.aria-modal]=\"true\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"(ariaLabelledBy || (title ? _titleId : null))\"\n    [attr.aria-describedby]=\"ariaDescribedBy || null\"\n    (keydown)=\"onKeydown($event)\"\n    cdkTrapFocus\n    [ngClass]=\"panelNgClass\"\n    [style.width]=\"width\"\n    [style.height]=\"height\"\n    [style.min-width]=\"minWidth\"\n    [style.max-width]=\"maxWidth\"\n    [style.min-height]=\"minHeight\"\n    [style.max-height]=\"maxHeight\"\n    [class.has-actions]=\"(actions.length||0)>0 || !!actionsTpl?.templateRef\"\n  >\n    <ng-container [ngTemplateOutlet]=\"panelHeader\"></ng-container>\n    <div class=\"pdx-dialog__content\">\n      @if (contentTpl?.templateRef) {\n        <ng-container [ngTemplateOutlet]=\"contentTpl!.templateRef\"></ng-container>\n      } @else {\n        <ng-template cdkPortalOutlet></ng-template>\n      }\n    </div>\n    <ng-container [ngTemplateOutlet]=\"panelActions\"></ng-container>\n  </div>\n} @else {\n  <div class=\"pdx-dialog-overlay\" [class.has-backdrop]=\"hasBackdrop\" [hidden]=\"!isDisplayed\" (click)=\"onBackdrop($event)\" [ngClass]=\"backdropClass\" [style.z-index]=\"zIndex\">\n    <div class=\"pdx-dialog-shell\" (click)=\"$event.stopPropagation()\">\n      <div\n        #panel\n        class=\"pdx-dialog pdx-dialog--{{ themeColor }} pdx-dialog--layout-{{ actionsLayout }}\"\n        [attr.role]=\"ariaRole\"\n        [attr.id]=\"id || null\"\n        [attr.aria-modal]=\"true\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [attr.aria-labelledby]=\"(ariaLabelledBy || (title ? _titleId : null))\"\n        [attr.aria-describedby]=\"ariaDescribedBy || null\"\n        (keydown)=\"onKeydown($event)\"\n        cdkTrapFocus\n        [ngClass]=\"panelNgClass\"\n        [style.width]=\"width\"\n        [style.height]=\"height\"\n        [style.min-width]=\"minWidth\"\n        [style.max-width]=\"maxWidth\"\n        [style.min-height]=\"minHeight\"\n        [style.max-height]=\"maxHeight\"\n        [style.top]=\"position?.top || null\"\n        [style.bottom]=\"position?.bottom || null\"\n        [style.left]=\"position?.left || null\"\n        [style.right]=\"position?.right || null\"\n        [class.pdx-has-position]=\"position\"\n        [class.has-actions]=\"(actions.length||0)>0 || !!actionsTpl?.templateRef\"\n      >\n        <ng-container [ngTemplateOutlet]=\"panelHeader\"></ng-container>\n        <div class=\"pdx-dialog__content\">\n          @if (contentTpl?.templateRef) {\n            <ng-container [ngTemplateOutlet]=\"contentTpl!.templateRef\"></ng-container>\n          } @else {\n            <ng-template cdkPortalOutlet></ng-template>\n          }\n        </div>\n        <ng-container [ngTemplateOutlet]=\"panelActions\"></ng-container>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.pdx-dialog-host{--pdx-dialog-bg: var(--md-sys-color-surface);--pdx-dialog-surface: var(--md-sys-color-surface-container-high);--pdx-dialog-border: var(--md-sys-color-outline-variant);--pdx-dialog-title-fg: var(--md-sys-color-on-surface);--pdx-dialog-elevation: var(--mat-elevation-level4)}.pdx-dialog-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--praxis-layer-dialog, 1300);background:transparent}.pdx-dialog-overlay.has-backdrop{background:var(--pdx-dialog-backdrop, rgba(0, 0, 0, .6))}.pdx-dialog-shell{display:contents}.pdx-dialog.pdx-has-position{position:absolute}.pdx-dialog{background:var(--pdx-dialog-container-color, var(--pdx-dialog-surface));color:var(--md-sys-color-on-surface, #111);border:1px solid var(--pdx-dialog-border);border-radius:var(--pdx-dialog-shape, 16px);box-shadow:var(--pdx-dialog-elevation-shadow, var(--pdx-dialog-elevation));max-width:var(--pdx-dialog-max-width, 90vw);max-height:var(--pdx-dialog-max-height, 80vh);display:flex;flex-direction:column;min-width:var(--pdx-dialog-min-width, 280px);outline:0}.pdx-dialog__title{padding:var(--pdx-dialog-headline-padding, 12px 24px 10px);border-bottom:1px solid var(--pdx-dialog-border);color:var(--pdx-dialog-subhead-color, var(--pdx-dialog-title-fg));background:var(--pdx-dialog-title-bg, transparent);flex:0 0 auto}.pdx-dialog__title-row{display:flex;gap:10px}.pdx-dialog__title-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:0 0 24px;font-size:20px;line-height:1;opacity:.87}.pdx-dialog__title-text{margin:0;font-family:var(--pdx-dialog-subhead-font, inherit);font-size:var(--pdx-dialog-subhead-size, 16px);letter-spacing:var(--pdx-dialog-subhead-tracking, normal);font-weight:var(--pdx-dialog-subhead-weight, 600);line-height:1.2}.pdx-dialog__content{padding:var(--pdx-dialog-content-padding, 16px);overflow:auto;flex:1 1 auto;min-height:0;color:var(--pdx-dialog-supporting-text-color, inherit);font-family:var(--pdx-dialog-supporting-text-font, inherit);line-height:var(--pdx-dialog-supporting-text-line-height, 1.4);font-size:var(--pdx-dialog-supporting-text-size, 14px);letter-spacing:var(--pdx-dialog-supporting-text-tracking, normal);font-weight:var(--pdx-dialog-supporting-text-weight, 400)}.pdx-dialog.has-actions .pdx-dialog__content{padding-bottom:var(--pdx-dialog-with-actions-content-padding, var(--pdx-dialog-content-padding, 16px))}.pdx-dialog__actions{display:flex;gap:8px;padding:var(--pdx-dialog-actions-padding, 12px 24px 16px);border-top:1px solid var(--pdx-dialog-border);justify-content:flex-end;align-items:center;background:var(--pdx-dialog-actions-bg, transparent);flex:0 0 auto}.pdx-dialog__actions.is-stretched{justify-content:stretch}.pdx-dialog__actions.is-stretched .pdx-dialog__action-btn{flex:1 1 0;justify-content:center}.pdx-dialog__action-btn{appearance:none;border:1px solid var(--pdx-dialog-border);background:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-on-surface);border-radius:var(--pdx-dialog-action-radius, 8px);padding:var(--pdx-dialog-action-padding, 0 14px);min-height:var(--pdx-dialog-action-min-height, 36px);cursor:pointer;display:inline-flex;align-items:center;gap:8px;line-height:1;transition:background-color .18s ease,border-color .18s ease,color .18s ease}.pdx-dialog__action-btn:hover{background:var(--md-sys-color-surface-container)}.pdx-dialog__action-btn:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.pdx-dialog__action-btn:disabled{opacity:.6;cursor:not-allowed}.pdx-dialog__action-btn[data-role=primary]:not([data-fill]),.pdx-dialog__action-btn[data-fill=solid]{background:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.pdx-dialog__action-btn[data-role=primary]:not([data-fill]):hover,.pdx-dialog__action-btn[data-fill=solid]:hover{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);border-color:var(--md-sys-color-primary-container)}.pdx-dialog__action-btn[data-role=danger]:not([data-fill]),.pdx-dialog__action-btn[data-fill=solid][data-theme=warn],.pdx-dialog__action-btn[data-theme=warn][data-fill=solid]{background:var(--md-sys-color-error);border-color:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}.pdx-dialog__action-btn[data-role=danger]:not([data-fill]):hover,.pdx-dialog__action-btn[data-fill=solid][data-theme=warn]:hover,.pdx-dialog__action-btn[data-theme=warn][data-fill=solid]:hover{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);border-color:var(--md-sys-color-error-container)}.pdx-dialog__action-btn[data-fill=solid][data-theme=accent],.pdx-dialog__action-btn[data-theme=accent][data-fill=solid]{background:var(--md-sys-color-secondary);border-color:var(--md-sys-color-secondary);color:var(--md-sys-color-on-secondary)}.pdx-dialog__action-btn[data-fill=solid][data-theme=accent]:hover,.pdx-dialog__action-btn[data-theme=accent][data-fill=solid]:hover{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);border-color:var(--md-sys-color-secondary-container)}.pdx-dialog__action-btn[data-fill=outline]{background:transparent;color:var(--md-sys-color-on-surface)}.pdx-dialog__action-btn[data-fill=outline][data-theme=primary],.pdx-dialog__action-btn[data-fill=flat][data-theme=primary]{color:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary)}.pdx-dialog__action-btn[data-fill=outline][data-theme=accent],.pdx-dialog__action-btn[data-fill=flat][data-theme=accent]{color:var(--md-sys-color-secondary);border-color:var(--md-sys-color-secondary)}.pdx-dialog__action-btn[data-fill=outline][data-theme=warn],.pdx-dialog__action-btn[data-fill=flat][data-theme=warn]{color:var(--md-sys-color-error);border-color:var(--md-sys-color-error)}.pdx-dialog__action-btn[data-fill=flat]{background:transparent;border-color:transparent;color:var(--md-sys-color-primary)}.pdx-dialog__action-btn .mat-icon{font-size:20px;width:20px;height:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.pdx-dialog--primary .pdx-dialog__title{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);border-bottom-color:var(--md-sys-color-outline-variant)}.pdx-dialog--dark{background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface)}.pdx-dialog{transform-origin:center;transition-property:transform,opacity;transition-duration:var(--pdx-dialog-anim-duration, .3s);transition-timing-function:var(--pdx-dialog-anim-ease, cubic-bezier(.2, 0, 0, 1))}.pdx-dialog.pdx-anim-fade{opacity:1}.pdx-dialog.pdx-anim-zoom{transform:scale(1)}.pdx-dialog.pdx-anim-translate-up,.pdx-dialog.pdx-anim-translate-down{transform:translateY(0)}.pdx-dialog.pdx-anim-translate-left,.pdx-dialog.pdx-anim-translate-right{transform:translate(0)}.pdx-dialog.pdx-state-opening.pdx-anim-fade{opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-zoom{transform:scale(.96);opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-translate-up{transform:translateY(-16px);opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-translate-down{transform:translateY(16px);opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-translate-left{transform:translate(-16px);opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-translate-right{transform:translate(16px);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-fade{opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-zoom{transform:scale(.96);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-translate-up{transform:translateY(-16px);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-translate-down{transform:translateY(16px);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-translate-left{transform:translate(-16px);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-translate-right{transform:translate(16px);opacity:0}@media(prefers-reduced-motion:reduce){.pdx-dialog{transition:none!important}}\n"] }]
+            args: [{ selector: 'praxis-dialog', standalone: true, imports: [CommonModule, PortalModule, A11yModule, MatIconModule, PraxisIconDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@let _titleId = (id ?? 'praxis-dialog') + '-title';\n\n<ng-template #panelHeader>\n  @if (titleTpl?.templateRef || title || titleIcon) {\n    <div class=\"pdx-dialog__title\">\n      @if (titleTpl?.templateRef) {\n        <ng-container [ngTemplateOutlet]=\"titleTpl!.templateRef\"></ng-container>\n      } @else {\n        <div class=\"pdx-dialog__title-row\">\n          @if (titleIcon) {\n            <mat-icon class=\"pdx-dialog__title-icon\" [praxisIcon]=\"titleIcon\" aria-hidden=\"true\"></mat-icon>\n          }\n          <h2 class=\"pdx-dialog__title-text\" [attr.id]=\"_titleId\">{{ title }}</h2>\n        </div>\n      }\n    </div>\n  }\n</ng-template>\n\n<ng-template #panelActions>\n  <div class=\"pdx-dialog__actions\" [class.is-stretched]=\"actionsLayout==='stretched'\">\n    @if (actionsTpl?.templateRef) {\n      <ng-container [ngTemplateOutlet]=\"actionsTpl!.templateRef\"></ng-container>\n    } @else {\n      @for (a of actions; track a?.id ?? a) {\n        <button\n          type=\"button\"\n          class=\"pdx-dialog__action-btn\"\n          [attr.data-testid]=\"a.id || null\"\n          [attr.data-role]=\"a.role || null\"\n          [attr.data-theme]=\"a.themeColor || null\"\n          [attr.data-fill]=\"a.fillMode || null\"\n          [ngClass]=\"a.cssClass\"\n          (click)=\"onActionClick(a)\"\n          [attr.cdkFocusInitial]=\"a.role==='primary' && ariaRole==='alertdialog' ? '' : null\"\n          >\n          @if (a.icon) {\n            <mat-icon [praxisIcon]=\"a.icon\"></mat-icon>\n          } @else if (a.svgIcon) {\n            <mat-icon [svgIcon]=\"a.svgIcon\"></mat-icon>\n          }\n          {{ a.text }}\n        </button>\n      }\n    }\n  </div>\n</ng-template>\n\n@if (overlayMode) {\n  <div\n    #panel\n    class=\"pdx-dialog pdx-dialog--{{ themeColor }} pdx-dialog--layout-{{ actionsLayout }}\"\n    [attr.role]=\"ariaRole\"\n    [attr.id]=\"id || null\"\n    [attr.aria-modal]=\"true\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"(ariaLabelledBy || (title ? _titleId : null))\"\n    [attr.aria-describedby]=\"ariaDescribedBy || null\"\n    (keydown)=\"onKeydown($event)\"\n    cdkTrapFocus\n    [ngClass]=\"panelNgClass\"\n    [style.width]=\"width\"\n    [style.height]=\"height\"\n    [style.min-width]=\"minWidth\"\n    [style.max-width]=\"maxWidth\"\n    [style.min-height]=\"minHeight\"\n    [style.max-height]=\"maxHeight\"\n    [class.has-actions]=\"(actions.length||0)>0 || !!actionsTpl?.templateRef\"\n    >\n    <ng-container [ngTemplateOutlet]=\"panelHeader\"></ng-container>\n    <div class=\"pdx-dialog__content\">\n      @if (contentTpl?.templateRef) {\n        <ng-container [ngTemplateOutlet]=\"contentTpl!.templateRef\"></ng-container>\n      } @else {\n        <ng-template cdkPortalOutlet></ng-template>\n      }\n    </div>\n    <ng-container [ngTemplateOutlet]=\"panelActions\"></ng-container>\n  </div>\n} @else {\n  <div class=\"pdx-dialog-overlay\" [class.has-backdrop]=\"hasBackdrop\" [hidden]=\"!isDisplayed\" (click)=\"onBackdrop($event)\" [ngClass]=\"backdropClass\" [style.z-index]=\"zIndex\">\n    <div class=\"pdx-dialog-shell\" (click)=\"$event.stopPropagation()\">\n      <div\n        #panel\n        class=\"pdx-dialog pdx-dialog--{{ themeColor }} pdx-dialog--layout-{{ actionsLayout }}\"\n        [attr.role]=\"ariaRole\"\n        [attr.id]=\"id || null\"\n        [attr.aria-modal]=\"true\"\n        [attr.aria-label]=\"ariaLabel || null\"\n        [attr.aria-labelledby]=\"(ariaLabelledBy || (title ? _titleId : null))\"\n        [attr.aria-describedby]=\"ariaDescribedBy || null\"\n        (keydown)=\"onKeydown($event)\"\n        cdkTrapFocus\n        [ngClass]=\"panelNgClass\"\n        [style.width]=\"width\"\n        [style.height]=\"height\"\n        [style.min-width]=\"minWidth\"\n        [style.max-width]=\"maxWidth\"\n        [style.min-height]=\"minHeight\"\n        [style.max-height]=\"maxHeight\"\n        [style.top]=\"position?.top || null\"\n        [style.bottom]=\"position?.bottom || null\"\n        [style.left]=\"position?.left || null\"\n        [style.right]=\"position?.right || null\"\n        [class.pdx-has-position]=\"position\"\n        [class.has-actions]=\"(actions.length||0)>0 || !!actionsTpl?.templateRef\"\n        >\n        <ng-container [ngTemplateOutlet]=\"panelHeader\"></ng-container>\n        <div class=\"pdx-dialog__content\">\n          @if (contentTpl?.templateRef) {\n            <ng-container [ngTemplateOutlet]=\"contentTpl!.templateRef\"></ng-container>\n          } @else {\n            <ng-template cdkPortalOutlet></ng-template>\n          }\n        </div>\n        <ng-container [ngTemplateOutlet]=\"panelActions\"></ng-container>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";.pdx-dialog-host{--pdx-dialog-bg: var(--md-sys-color-surface);--pdx-dialog-surface: var(--md-sys-color-surface-container-high);--pdx-dialog-border: var(--md-sys-color-outline-variant);--pdx-dialog-title-fg: var(--md-sys-color-on-surface);--pdx-dialog-elevation: var(--mat-elevation-level4)}.pdx-dialog-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--praxis-layer-dialog, 1300);background:transparent}.pdx-dialog-overlay.has-backdrop{background:var(--pdx-dialog-backdrop, rgba(0, 0, 0, .6))}.pdx-dialog-shell{display:contents}.pdx-dialog.pdx-has-position{position:absolute}.pdx-dialog{background:var(--pdx-dialog-container-color, var(--pdx-dialog-surface));color:var(--md-sys-color-on-surface, #111);border:1px solid var(--pdx-dialog-border);border-radius:var(--pdx-dialog-shape, 16px);box-shadow:var(--pdx-dialog-elevation-shadow, var(--pdx-dialog-elevation));max-width:var(--pdx-dialog-max-width, 90vw);max-height:var(--pdx-dialog-max-height, 80vh);display:flex;flex-direction:column;min-width:var(--pdx-dialog-min-width, 280px);outline:0}.pdx-dialog__title{padding:var(--pdx-dialog-headline-padding, 12px 24px 10px);border-bottom:1px solid var(--pdx-dialog-border);color:var(--pdx-dialog-subhead-color, var(--pdx-dialog-title-fg));background:var(--pdx-dialog-title-bg, transparent);flex:0 0 auto}.pdx-dialog__title-row{display:flex;gap:10px}.pdx-dialog__title-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:0 0 24px;font-size:20px;line-height:1;opacity:.87}.pdx-dialog__title-text{margin:0;font-family:var(--pdx-dialog-subhead-font, inherit);font-size:var(--pdx-dialog-subhead-size, 16px);letter-spacing:var(--pdx-dialog-subhead-tracking, normal);font-weight:var(--pdx-dialog-subhead-weight, 600);line-height:1.2}.pdx-dialog__content{padding:var(--pdx-dialog-content-padding, 16px);overflow:auto;flex:1 1 auto;min-height:0;color:var(--pdx-dialog-supporting-text-color, inherit);font-family:var(--pdx-dialog-supporting-text-font, inherit);line-height:var(--pdx-dialog-supporting-text-line-height, 1.4);font-size:var(--pdx-dialog-supporting-text-size, 14px);letter-spacing:var(--pdx-dialog-supporting-text-tracking, normal);font-weight:var(--pdx-dialog-supporting-text-weight, 400)}.pdx-dialog.has-actions .pdx-dialog__content{padding-bottom:var(--pdx-dialog-with-actions-content-padding, var(--pdx-dialog-content-padding, 16px))}.pdx-dialog__actions{display:flex;gap:8px;padding:var(--pdx-dialog-actions-padding, 12px 24px 16px);border-top:1px solid var(--pdx-dialog-border);justify-content:flex-end;align-items:center;background:var(--pdx-dialog-actions-bg, transparent);flex:0 0 auto}.pdx-dialog__actions.is-stretched{justify-content:stretch}.pdx-dialog__actions.is-stretched .pdx-dialog__action-btn{flex:1 1 0;justify-content:center}.pdx-dialog__action-btn{appearance:none;border:1px solid var(--pdx-dialog-border);background:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-on-surface);border-radius:var(--pdx-dialog-action-radius, 8px);padding:var(--pdx-dialog-action-padding, 0 14px);min-height:var(--pdx-dialog-action-min-height, 36px);cursor:pointer;display:inline-flex;align-items:center;gap:8px;line-height:1;transition:background-color .18s ease,border-color .18s ease,color .18s ease}.pdx-dialog__action-btn:hover{background:var(--md-sys-color-surface-container)}.pdx-dialog__action-btn:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.pdx-dialog__action-btn:disabled{opacity:.6;cursor:not-allowed}.pdx-dialog__action-btn[data-role=primary]:not([data-fill]),.pdx-dialog__action-btn[data-fill=solid]{background:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.pdx-dialog__action-btn[data-role=primary]:not([data-fill]):hover,.pdx-dialog__action-btn[data-fill=solid]:hover{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);border-color:var(--md-sys-color-primary-container)}.pdx-dialog__action-btn[data-role=danger]:not([data-fill]),.pdx-dialog__action-btn[data-fill=solid][data-theme=warn],.pdx-dialog__action-btn[data-theme=warn][data-fill=solid]{background:var(--md-sys-color-error);border-color:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}.pdx-dialog__action-btn[data-role=danger]:not([data-fill]):hover,.pdx-dialog__action-btn[data-fill=solid][data-theme=warn]:hover,.pdx-dialog__action-btn[data-theme=warn][data-fill=solid]:hover{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);border-color:var(--md-sys-color-error-container)}.pdx-dialog__action-btn[data-fill=solid][data-theme=accent],.pdx-dialog__action-btn[data-theme=accent][data-fill=solid]{background:var(--md-sys-color-secondary);border-color:var(--md-sys-color-secondary);color:var(--md-sys-color-on-secondary)}.pdx-dialog__action-btn[data-fill=solid][data-theme=accent]:hover,.pdx-dialog__action-btn[data-theme=accent][data-fill=solid]:hover{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);border-color:var(--md-sys-color-secondary-container)}.pdx-dialog__action-btn[data-fill=outline]{background:transparent;color:var(--md-sys-color-on-surface)}.pdx-dialog__action-btn[data-fill=outline][data-theme=primary],.pdx-dialog__action-btn[data-fill=flat][data-theme=primary]{color:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary)}.pdx-dialog__action-btn[data-fill=outline][data-theme=accent],.pdx-dialog__action-btn[data-fill=flat][data-theme=accent]{color:var(--md-sys-color-secondary);border-color:var(--md-sys-color-secondary)}.pdx-dialog__action-btn[data-fill=outline][data-theme=warn],.pdx-dialog__action-btn[data-fill=flat][data-theme=warn]{color:var(--md-sys-color-error);border-color:var(--md-sys-color-error)}.pdx-dialog__action-btn[data-fill=flat]{background:transparent;border-color:transparent;color:var(--md-sys-color-primary)}.pdx-dialog__action-btn .mat-icon{font-size:20px;width:20px;height:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.pdx-dialog--primary .pdx-dialog__title{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);border-bottom-color:var(--md-sys-color-outline-variant)}.pdx-dialog--dark{background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface)}.pdx-dialog{transform-origin:center;transition-property:transform,opacity;transition-duration:var(--pdx-dialog-anim-duration, .3s);transition-timing-function:var(--pdx-dialog-anim-ease, cubic-bezier(.2, 0, 0, 1))}.pdx-dialog.pdx-anim-fade{opacity:1}.pdx-dialog.pdx-anim-zoom{transform:scale(1)}.pdx-dialog.pdx-anim-translate-up,.pdx-dialog.pdx-anim-translate-down{transform:translateY(0)}.pdx-dialog.pdx-anim-translate-left,.pdx-dialog.pdx-anim-translate-right{transform:translate(0)}.pdx-dialog.pdx-state-opening.pdx-anim-fade{opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-zoom{transform:scale(.96);opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-translate-up{transform:translateY(-16px);opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-translate-down{transform:translateY(16px);opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-translate-left{transform:translate(-16px);opacity:0}.pdx-dialog.pdx-state-opening.pdx-anim-translate-right{transform:translate(16px);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-fade{opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-zoom{transform:scale(.96);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-translate-up{transform:translateY(-16px);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-translate-down{transform:translateY(16px);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-translate-left{transform:translate(-16px);opacity:0}.pdx-dialog.pdx-state-closing.pdx-anim-translate-right{transform:translate(16px);opacity:0}@media(prefers-reduced-motion:reduce){.pdx-dialog{transition:none!important}}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], actions: [{
@@ -521,6 +524,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 type: Input
             }], hasBackdrop: [{
                 type: Input
+            }], closeOnBackdropClick: [{
+                type: Input
             }], overlayMode: [{
                 type: Input
             }], zIndex: [{
@@ -637,10 +642,10 @@ class DialogOverlayService {
         }
         return overlayConfig;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DialogOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DialogOverlayService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DialogOverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DialogOverlayService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: DialogOverlayService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DialogOverlayService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -681,6 +686,8 @@ class PraxisDialog {
         ref.id = assignedId;
         const compRef = this.overlay.attachContainer(overlayRef, injector);
         const container = compRef.instance;
+        ref.containerInstance = container;
+        ref.containerRef = compRef;
         // Set inputs before detectChanges so the correct branch/materialization occurs
         container.overlayMode = true;
         container.title = config?.title;
@@ -698,6 +705,7 @@ class PraxisDialog {
         container.styles = config?.styles;
         container.disableClose = !!config?.disableClose;
         container.hasBackdrop = config?.hasBackdrop ?? true;
+        container.closeOnBackdropClick = config?.closeOnBackdropClick ?? true;
         container.panelClass = config?.panelClass;
         container.backdropClass = config?.backdropClass;
         container.position = config?.position;
@@ -731,9 +739,16 @@ class PraxisDialog {
         });
         const keydownSub = overlayRef.keydownEvents().subscribe((ev) => {
             ref.notifyKeydown(ev);
+            if (ev.key === 'Escape' && !config?.disableClose) {
+                ref.close();
+            }
         });
         // Attach portal content now that the outlet exists
+        let contentAttached = false;
         const doAttach = () => {
+            if (contentAttached || !container.contentHost)
+                return;
+            contentAttached = true;
             if (content instanceof TemplateRef) {
                 const origin = config?.viewContainerRef ?? null;
                 const portal = new TemplatePortal(content, origin, { $implicit: config?.data });
@@ -755,7 +770,7 @@ class PraxisDialog {
             }
             catch { }
             queueMicrotask(() => {
-                if (container.contentHost)
+                if (overlayRef.hasAttached())
                     doAttach();
             });
         }
@@ -849,10 +864,10 @@ class PraxisDialog {
     getDialogById(id) {
         return this._openDialogs.find((r) => r.id === id);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisDialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisDialog, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisDialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisDialog, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisDialog, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisDialog, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -873,35 +888,43 @@ class SimpleDialogContentComponent {
         }
         catch { }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SimpleDialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: SimpleDialogContentComponent, isStandalone: true, selector: "praxis-simple-dialog-content", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SimpleDialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: SimpleDialogContentComponent, isStandalone: true, selector: "praxis-simple-dialog-content", ngImport: i0, template: `
     <div class="pdx-simple-dialog">
-      <p *ngIf="message" class="pdx-simple-dialog__message">{{ message }}</p>
-      <mat-form-field *ngIf="mode === 'prompt'" appearance="outline" class="pdx-simple-dialog__field">
-        <mat-label>{{ placeholder || 'Digite um valor' }}</mat-label>
-        <input matInput [(ngModel)]="value" />
-      </mat-form-field>
+      @if (message) {
+        <p class="pdx-simple-dialog__message">{{ message }}</p>
+      }
+      @if (mode === 'prompt') {
+        <mat-form-field appearance="outline" class="pdx-simple-dialog__field">
+          <mat-label>{{ placeholder || 'Digite um valor' }}</mat-label>
+          <input matInput [(ngModel)]="value" />
+        </mat-form-field>
+      }
     </div>
-  `, isInline: true, styles: [".pdx-simple-dialog{display:grid;gap:12px}.pdx-simple-dialog__message{margin:0}.pdx-simple-dialog__field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] });
+    `, isInline: true, styles: [".pdx-simple-dialog{display:grid;gap:12px}.pdx-simple-dialog__message{margin:0}.pdx-simple-dialog__field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SimpleDialogContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SimpleDialogContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-simple-dialog-content', standalone: true, imports: [CommonModule, FormsModule, MatFormFieldModule, MatInputModule], template: `
+            args: [{ selector: 'praxis-simple-dialog-content', standalone: true, imports: [FormsModule, MatFormFieldModule, MatInputModule], template: `
     <div class="pdx-simple-dialog">
-      <p *ngIf="message" class="pdx-simple-dialog__message">{{ message }}</p>
-      <mat-form-field *ngIf="mode === 'prompt'" appearance="outline" class="pdx-simple-dialog__field">
-        <mat-label>{{ placeholder || 'Digite um valor' }}</mat-label>
-        <input matInput [(ngModel)]="value" />
-      </mat-form-field>
+      @if (message) {
+        <p class="pdx-simple-dialog__message">{{ message }}</p>
+      }
+      @if (mode === 'prompt') {
+        <mat-form-field appearance="outline" class="pdx-simple-dialog__field">
+          <mat-label>{{ placeholder || 'Digite um valor' }}</mat-label>
+          <input matInput [(ngModel)]="value" />
+        </mat-form-field>
+      }
     </div>
-  `, styles: [".pdx-simple-dialog{display:grid;gap:12px}.pdx-simple-dialog__message{margin:0}.pdx-simple-dialog__field{width:100%}\n"] }]
+    `, styles: [".pdx-simple-dialog{display:grid;gap:12px}.pdx-simple-dialog__message{margin:0}.pdx-simple-dialog__field{width:100%}\n"] }]
         }], ctorParameters: () => [] });
 class SimpleHtmlDialogContentComponent {
     safeHtml;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SimpleHtmlDialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: SimpleHtmlDialogContentComponent, isStandalone: true, selector: "praxis-simple-html-dialog-content", ngImport: i0, template: `<div class="pdx-simple-dialog" [innerHTML]="safeHtml"></div>`, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SimpleHtmlDialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: SimpleHtmlDialogContentComponent, isStandalone: true, selector: "praxis-simple-html-dialog-content", ngImport: i0, template: `<div class="pdx-simple-dialog" [innerHTML]="safeHtml"></div>`, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: SimpleHtmlDialogContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SimpleHtmlDialogContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'praxis-simple-html-dialog-content',
@@ -985,6 +1008,9 @@ function buildConfig(payload) {
     return {
         title: payload.title,
         message: payload.message,
+        confirmLabel: payload.confirmLabel,
+        cancelLabel: payload.cancelLabel,
+        okLabel: payload.okLabel,
         data: payload.data,
         width: payload.size?.width ?? payload.width,
         height: payload.size?.height ?? payload.height,
@@ -1093,48 +1119,68 @@ function buildHostInputs(payload, context, options) {
         },
     };
 }
+function applySurfaceHostInputs(ref, hostInputs) {
+    const apply = () => {
+        if (!ref.componentInstance)
+            return false;
+        if (typeof ref.componentRef?.setInput === 'function') {
+            for (const [key, value] of Object.entries(hostInputs)) {
+                ref.componentRef.setInput(key, value);
+            }
+        }
+        else {
+            Object.assign(ref.componentInstance, hostInputs);
+        }
+        try {
+            ref.componentRef?.changeDetectorRef?.detectChanges();
+        }
+        catch { }
+        return true;
+    };
+    if (apply())
+        return;
+    queueMicrotask(apply);
+}
 function providePraxisSurfaceGlobalActions() {
     return {
         provide: GLOBAL_SURFACE_SERVICE,
         useFactory: () => {
             const dialog = inject(PraxisDialog);
+            const materializer = inject(SurfaceOpenMaterializerService);
             const surfaceDrawer = inject(SURFACE_DRAWER_BRIDGE, {
                 optional: true,
             });
             return {
                 open: async (payload, context) => {
-                    const hostInputs = buildHostInputs(payload, context);
-                    if (payload.presentation === 'drawer') {
+                    const materializedPayload = await materializer.materialize(payload, context);
+                    const hostInputs = buildHostInputs(materializedPayload, context);
+                    if (materializedPayload.presentation === 'drawer') {
                         if (!surfaceDrawer) {
                             throw new Error('Drawer surface service not available');
                         }
                         const ref = surfaceDrawer.open({
-                            id: `surface:${payload.widget.id}`,
-                            title: payload.title || payload.widget.id,
-                            titleIcon: payload.icon,
-                            subtitle: payload.subtitle,
-                            width: payload.size?.width,
-                            minWidth: payload.size?.minWidth,
-                            maxWidth: payload.size?.maxWidth,
-                            height: payload.size?.height,
-                            minHeight: payload.size?.minHeight,
-                            maxHeight: payload.size?.maxHeight,
+                            id: `surface:${materializedPayload.widget.id}`,
+                            title: materializedPayload.title || materializedPayload.widget.id,
+                            titleIcon: materializedPayload.icon,
+                            subtitle: materializedPayload.subtitle,
+                            width: materializedPayload.size?.width,
+                            minWidth: materializedPayload.size?.minWidth,
+                            maxWidth: materializedPayload.size?.maxWidth,
+                            height: materializedPayload.size?.height,
+                            minHeight: materializedPayload.size?.minHeight,
+                            maxHeight: materializedPayload.size?.maxHeight,
                             content: {
                                 component: PraxisSurfaceHostComponent,
-                                inputs: buildHostInputs(payload, context, {
+                                inputs: buildHostInputs(materializedPayload, context, {
                                     includeSubtitle: false,
                                 }),
                             },
                         });
-                        return firstValueFrom(ref.closed$);
-                    }
-                    const ref = dialog.open(PraxisSurfaceHostComponent, buildDialogConfig(payload));
-                    Object.assign(ref.componentInstance || {}, hostInputs);
-                    try {
-                        ref.componentRef?.changeDetectorRef?.detectChanges();
+                        return ref;
                     }
-                    catch { }
-                    return firstValueFrom(ref.afterClosed());
+                    const ref = dialog.open(PraxisSurfaceHostComponent, buildDialogConfig(materializedPayload));
+                    applySurfaceHostInputs(ref, hostInputs);
+                    return ref;
                 },
             };
         },
@@ -1143,8 +1189,8 @@ function providePraxisSurfaceGlobalActions() {
 
 class LongContentDialogExampleComponent {
     items = Array.from({ length: 40 }, (_, idx) => `Example line ${idx + 1}`);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: LongContentDialogExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: LongContentDialogExampleComponent, isStandalone: true, selector: "praxis-long-content-dialog-example", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LongContentDialogExampleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: LongContentDialogExampleComponent, isStandalone: true, selector: "praxis-long-content-dialog-example", ngImport: i0, template: `
     <div class="pdx-long-content">
       <p>
         This is a long content example to validate scroll behavior inside PraxisDialog.
@@ -1154,17 +1200,19 @@ class LongContentDialogExampleComponent {
         and actions remain visible.
       </p>
       <ul>
-        <li *ngFor="let item of items">{{ item }}</li>
+        @for (item of items; track item) {
+          <li>{{ item }}</li>
+        }
       </ul>
       <p>
         End of the long content example.
       </p>
     </div>
-  `, isInline: true, styles: [".pdx-long-content{display:grid;gap:12px;color:var(--md-sys-color-on-surface, #111)}.pdx-long-content p{margin:0}.pdx-long-content ul{margin:0;padding-left:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    `, isInline: true, styles: [".pdx-long-content{display:grid;gap:12px;color:var(--md-sys-color-on-surface, #111)}.pdx-long-content p{margin:0}.pdx-long-content ul{margin:0;padding-left:20px}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: LongContentDialogExampleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LongContentDialogExampleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-long-content-dialog-example', standalone: true, imports: [CommonModule], template: `
+            args: [{ selector: 'praxis-long-content-dialog-example', standalone: true, imports: [], template: `
     <div class="pdx-long-content">
       <p>
         This is a long content example to validate scroll behavior inside PraxisDialog.
@@ -1174,13 +1222,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         and actions remain visible.
       </p>
       <ul>
-        <li *ngFor="let item of items">{{ item }}</li>
+        @for (item of items; track item) {
+          <li>{{ item }}</li>
+        }
       </ul>
       <p>
         End of the long content example.
       </p>
     </div>
-  `, styles: [".pdx-long-content{display:grid;gap:12px;color:var(--md-sys-color-on-surface, #111)}.pdx-long-content p{margin:0}.pdx-long-content ul{margin:0;padding-left:20px}\n"] }]
+    `, styles: [".pdx-long-content{display:grid;gap:12px;color:var(--md-sys-color-on-surface, #111)}.pdx-long-content p{margin:0}.pdx-long-content ul{margin:0;padding-left:20px}\n"] }]
         }] });
 
 const PRAXIS_DIALOG_EXAMPLE_LONG_CONTENT = 'praxis.long-content-example';
@@ -1196,8 +1246,411 @@ function providePraxisDialogExamples() {
     };
 }
 
+const PRAXIS_DIALOG_PORTS = [
+    {
+        id: 'config',
+        label: 'Dialog config',
+        direction: 'input',
+        semanticKind: 'config-fragment',
+        schema: {
+            id: 'PraxisDialogConfig',
+            kind: 'ts-type',
+            ref: 'PraxisDialogConfig',
+        },
+        description: 'Dialog shell configuration for title, actions, dimensions, backdrop, close policy and accessibility.',
+        exposure: { public: true, group: 'config' },
+    },
+    {
+        id: 'close',
+        label: 'Close',
+        direction: 'output',
+        semanticKind: 'event',
+        schema: {
+            id: 'unknown',
+            kind: 'ts-type',
+            ref: 'unknown',
+        },
+        cardinality: 'stream',
+        description: 'Emitted when the dialog shell requests close with an optional result payload.',
+        exposure: { public: true, group: 'events' },
+    },
+    {
+        id: 'action',
+        label: 'Action',
+        direction: 'output',
+        semanticKind: 'event',
+        schema: {
+            id: 'DialogAction',
+            kind: 'ts-type',
+            ref: 'DialogAction',
+        },
+        cardinality: 'stream',
+        description: 'Emitted when a configured dialog action is triggered.',
+        exposure: { public: true, group: 'events' },
+    },
+];
+const PRAXIS_DIALOG_COMPONENT_METADATA = {
+    id: 'praxis-dialog',
+    selector: 'praxis-dialog',
+    component: PraxisDialogComponent,
+    friendlyName: 'Praxis Dialog',
+    description: 'Dialog shell for overlay and embedded authoring, with governed size, position, backdrop, close policy, presets and child host delegation.',
+    icon: 'dialogs',
+    tags: ['dialog', 'overlay', 'shell', 'authoring'],
+    lib: '@praxisui/dialog',
+    inputs: [
+        { name: 'title', type: 'string', label: 'Title', description: 'Dialog title text.' },
+        { name: 'actions', type: 'DialogAction[]', label: 'Actions', description: 'Dialog footer actions and payloads.' },
+        { name: 'actionsLayout', type: 'ActionsLayout', label: 'Actions layout', description: 'Footer action alignment.' },
+        { name: 'width', type: 'string | number', label: 'Width', description: 'Dialog width.' },
+        { name: 'height', type: 'string | number', label: 'Height', description: 'Dialog height.' },
+        { name: 'minWidth', type: 'string | number', label: 'Minimum width', description: 'Minimum dialog width.' },
+        { name: 'maxWidth', type: 'string | number', label: 'Maximum width', description: 'Maximum dialog width.' },
+        { name: 'minHeight', type: 'string | number', label: 'Minimum height', description: 'Minimum dialog height.' },
+        { name: 'maxHeight', type: 'string | number', label: 'Maximum height', description: 'Maximum dialog height.' },
+        { name: 'themeColor', type: 'DialogThemeColor', label: 'Theme color', description: 'Dialog visual theme.' },
+        { name: 'disableClose', type: 'boolean', label: 'Disable close', description: 'Blocks backdrop and Escape close behavior.' },
+        { name: 'hasBackdrop', type: 'boolean', label: 'Backdrop', description: 'Controls whether the dialog renders a backdrop.' },
+        { name: 'closeOnBackdropClick', type: 'boolean', label: 'Close on backdrop click', description: 'Controls backdrop click close policy.' },
+        { name: 'panelClass', type: 'string | string[] | Record<string, boolean>', label: 'Panel class', description: 'Additional CSS class for the dialog panel.' },
+        { name: 'backdropClass', type: 'string | string[] | Record<string, boolean>', label: 'Backdrop class', description: 'Additional CSS class for the backdrop.' },
+        { name: 'position', type: 'PraxisDialogPosition', label: 'Position', description: 'Dialog position offsets.' },
+        { name: 'ariaRole', type: "'dialog' | 'alertdialog'", label: 'ARIA role', description: 'Accessible dialog role.' },
+        { name: 'ariaLabel', type: 'string', label: 'ARIA label', description: 'Accessible label when no visible title is present.' },
+        { name: 'ariaLabelledBy', type: 'string', label: 'ARIA labelled by', description: 'External accessible label id.' },
+        { name: 'ariaDescribedBy', type: 'string', label: 'ARIA described by', description: 'External accessible description id.' },
+    ],
+    outputs: [
+        { name: 'action', type: 'DialogAction', label: 'Action' },
+        { name: 'close', type: 'unknown', label: 'Close' },
+        { name: 'opened', type: 'void', label: 'Opened' },
+        { name: 'afterClosed', type: 'void', label: 'After closed' },
+    ],
+    actions: [
+        {
+            id: 'dialog-open',
+            label: 'Open dialog',
+            icon: 'open_in_new',
+            description: 'Opens a dialog shell with governed config.',
+            scope: 'any',
+        },
+        {
+            id: 'dialog-close',
+            label: 'Close dialog',
+            icon: 'close',
+            description: 'Closes the dialog with an optional payload.',
+            emit: 'close',
+            scope: 'any',
+        },
+    ],
+    ports: PRAXIS_DIALOG_PORTS,
+};
+function providePraxisDialogMetadata() {
+    return {
+        provide: ENVIRONMENT_INITIALIZER,
+        multi: true,
+        useFactory: (registry) => () => {
+            registry.register(PRAXIS_DIALOG_COMPONENT_METADATA);
+        },
+        deps: [ComponentMetadataRegistry],
+    };
+}
+
+const sizeFieldSchema = {
+    type: 'object',
+    minProperties: 1,
+    properties: {
+        width: { oneOf: [{ type: 'string' }, { type: 'number' }] },
+        height: { oneOf: [{ type: 'string' }, { type: 'number' }] },
+        minWidth: { oneOf: [{ type: 'string' }, { type: 'number' }] },
+        maxWidth: { oneOf: [{ type: 'string' }, { type: 'number' }] },
+        minHeight: { oneOf: [{ type: 'string' }, { type: 'number' }] },
+        maxHeight: { oneOf: [{ type: 'string' }, { type: 'number' }] },
+    },
+};
+const positionSchema = {
+    type: 'object',
+    minProperties: 1,
+    properties: {
+        top: { type: 'string' },
+        bottom: { type: 'string' },
+        left: { type: 'string' },
+        right: { type: 'string' },
+    },
+};
+const closePolicySchema = {
+    type: 'object',
+    minProperties: 1,
+    properties: {
+        disableClose: { type: 'boolean' },
+        closeOnBackdropClick: { type: 'boolean' },
+        closeOnNavigation: { type: 'boolean' },
+        restoreFocus: { type: 'boolean' },
+        autoFocus: { type: 'boolean' },
+        autoFocusedElement: { type: 'string' },
+    },
+};
+const childHostSchema = {
+    type: 'object',
+    required: ['contentType'],
+    properties: {
+        contentType: { enum: ['component', 'template'] },
+        componentId: { type: 'string' },
+        templateId: { type: 'string' },
+        inputs: { type: 'object' },
+        data: {},
+        childManifestComponentId: { type: 'string' },
+    },
+};
+const PRAXIS_DIALOG_AUTHORING_MANIFEST = {
+    schemaVersion: '1.0.0',
+    componentId: 'praxis-dialog',
+    ownerPackage: '@praxisui/dialog',
+    configSchemaId: 'PraxisDialogConfig',
+    manifestVersion: '1.0.0',
+    runtimeInputs: [
+        { name: 'config', type: 'PraxisDialogConfig', description: 'Canonical shell configuration consumed by PraxisDialog.open and tag mode.' },
+        { name: 'content', type: 'ComponentType | TemplateRef | DialogContentDescriptor', description: 'Dialog child host content. Child semantics remain owned by the child component manifest.' },
+        { name: 'variant', type: 'string', description: 'Optional global preset variant merged after dialog type presets and before local config.' },
+        { name: 'componentId', type: 'string', description: 'Component metadata or dialog registry id used by global dialog open actions.' },
+        { name: 'inputs', type: 'Record<string, unknown>', description: 'Inputs applied to the child component after opening the dialog.' },
+    ],
+    editableTargets: [
+        { kind: 'dialogShell', resolver: 'praxis-dialog-config-root', description: 'Top-level PraxisDialogConfig shell fields such as title, role, actions and theme.' },
+        { kind: 'size', resolver: 'praxis-dialog-size-fields', description: 'Width, height, min/max size fields on PraxisDialogConfig.' },
+        { kind: 'position', resolver: 'praxis-dialog-position-fields', description: 'Overlay position fields top, bottom, left and right.' },
+        { kind: 'backdrop', resolver: 'praxis-dialog-backdrop-fields', description: 'Backdrop enablement and backdrop class semantics.' },
+        { kind: 'closePolicy', resolver: 'praxis-dialog-close-policy-fields', description: 'disableClose, closeOnBackdropClick, closeOnNavigation, restoreFocus and autofocus behavior.' },
+        { kind: 'preset', resolver: 'praxis-dialog-global-preset-by-type-variant', description: 'Type and variant presets merged through PRAXIS_DIALOG_GLOBAL_PRESETS.' },
+        { kind: 'childHost', resolver: 'praxis-dialog-child-component-or-template-host', description: 'Component/template registry child host and input/data envelope.' },
+    ],
+    operations: [
+        {
+            operationId: 'dialog.shell.set',
+            title: 'Set dialog shell fields',
+            scope: 'global',
+            targetKind: 'dialogShell',
+            target: { kind: 'dialogShell', resolver: 'praxis-dialog-config-root', ambiguityPolicy: 'fail', required: false },
+            inputSchema: {
+                type: 'object',
+                minProperties: 1,
+                properties: {
+                    title: { type: 'string' },
+                    titleIcon: { type: 'string' },
+                    ariaRole: { enum: ['dialog', 'alertdialog'] },
+                    ariaLabel: { type: 'string' },
+                    ariaLabelledBy: { type: 'string' },
+                    ariaDescribedBy: { type: 'string' },
+                    themeColor: { enum: ['primary', 'light', 'dark'] },
+                    actionsLayout: { enum: ['start', 'center', 'end', 'stretched'] },
+                },
+            },
+            effects: [{ kind: 'merge-object', path: 'config' }],
+            destructive: false,
+            requiresConfirmation: false,
+            validators: ['accessibility-label-preserved', 'aria-role-valid', 'shell-fields-supported', 'dialog-round-trip'],
+            affectedPaths: ['config.title', 'config.titleIcon', 'config.ariaRole', 'config.ariaLabel', 'config.ariaLabelledBy', 'config.ariaDescribedBy', 'config.themeColor', 'config.actionsLayout'],
+            submissionImpact: 'config-only',
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'dialog.size.set',
+            title: 'Set dialog size',
+            scope: 'layout',
+            targetKind: 'size',
+            target: { kind: 'size', resolver: 'praxis-dialog-size-fields', ambiguityPolicy: 'fail', required: false },
+            inputSchema: sizeFieldSchema,
+            effects: [{ kind: 'merge-object', path: 'config' }],
+            destructive: false,
+            requiresConfirmation: false,
+            validators: ['size-values-safe', 'size-min-max-consistent', 'dialog-round-trip'],
+            affectedPaths: ['config.width', 'config.height', 'config.minWidth', 'config.maxWidth', 'config.minHeight', 'config.maxHeight'],
+            submissionImpact: 'visual-only',
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'dialog.position.set',
+            title: 'Set dialog position',
+            scope: 'layout',
+            targetKind: 'position',
+            target: { kind: 'position', resolver: 'praxis-dialog-position-fields', ambiguityPolicy: 'fail', required: false },
+            inputSchema: positionSchema,
+            effects: [{ kind: 'set-value', path: 'config.position' }],
+            destructive: false,
+            requiresConfirmation: false,
+            validators: ['position-values-safe', 'position-not-conflicting', 'dialog-round-trip'],
+            affectedPaths: ['config.position'],
+            submissionImpact: 'visual-only',
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'dialog.backdrop.set',
+            title: 'Set dialog backdrop',
+            scope: 'skin',
+            targetKind: 'backdrop',
+            target: { kind: 'backdrop', resolver: 'praxis-dialog-backdrop-fields', ambiguityPolicy: 'fail', required: false },
+            inputSchema: {
+                type: 'object',
+                minProperties: 1,
+                properties: {
+                    hasBackdrop: { type: 'boolean' },
+                    backdropClass: { oneOf: [{ type: 'string' }, { type: 'array' }, { type: 'object' }] },
+                },
+            },
+            effects: [{ kind: 'merge-object', path: 'config' }],
+            destructive: false,
+            requiresConfirmation: false,
+            validators: ['backdrop-policy-explicit', 'backdrop-class-safe', 'dialog-round-trip'],
+            affectedPaths: ['config.hasBackdrop', 'config.backdropClass'],
+            submissionImpact: 'visual-only',
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'dialog.closePolicy.set',
+            title: 'Set dialog close policy',
+            scope: 'accessibility',
+            targetKind: 'closePolicy',
+            target: { kind: 'closePolicy', resolver: 'praxis-dialog-close-policy-fields', ambiguityPolicy: 'fail', required: false },
+            inputSchema: closePolicySchema,
+            effects: [{ kind: 'merge-object', path: 'config' }],
+            destructive: true,
+            requiresConfirmation: true,
+            validators: ['close-policy-explicit', 'unsafe-close-confirmed-when-needed', 'restore-focus-preserved', 'alertdialog-focus-preserved', 'dialog-round-trip'],
+            affectedPaths: ['config.disableClose', 'config.closeOnBackdropClick', 'config.closeOnNavigation', 'config.restoreFocus', 'config.autoFocus', 'config.autoFocusedElement'],
+            submissionImpact: 'config-only',
+            preconditions: ['config-initialized', 'confirmation-collected'],
+        },
+        {
+            operationId: 'dialog.preset.apply',
+            title: 'Apply dialog preset',
+            scope: 'global',
+            targetKind: 'preset',
+            target: { kind: 'preset', resolver: 'praxis-dialog-global-preset-by-type-variant', ambiguityPolicy: 'fail', required: false },
+            inputSchema: {
+                type: 'object',
+                required: ['dialogType'],
+                properties: {
+                    dialogType: { enum: ['confirm', 'alert', 'prompt', 'custom'] },
+                    variant: { type: 'string' },
+                    localConfig: { type: 'object' },
+                },
+            },
+            effects: [{ kind: 'compile-domain-patch', handler: 'dialog-preset-apply', handlerContract: {
+                        reads: ['PRAXIS_DIALOG_GLOBAL_PRESETS', 'config', 'variant'],
+                        writes: ['config', 'variant'],
+                        identityKeys: ['dialogType', 'variant'],
+                        inputSchema: { type: 'object', required: ['dialogType'], properties: { dialogType: { enum: ['confirm', 'alert', 'prompt', 'custom'] }, variant: { type: 'string' }, localConfig: { type: 'object' } } },
+                        failureModes: ['preset-not-found', 'variant-not-found', 'preset-merge-order-invalid', 'accessibility-regression'],
+                        description: 'Applies the canonical merge order type preset -> variant -> local config without mutating child component semantics.',
+                    } }],
+            destructive: false,
+            requiresConfirmation: false,
+            validators: ['preset-exists', 'preset-merge-order-preserved', 'accessibility-label-preserved', 'dialog-round-trip'],
+            affectedPaths: ['config', 'variant'],
+            submissionImpact: 'config-only',
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'childHost.configure',
+            title: 'Configure dialog child host',
+            scope: 'templating',
+            targetKind: 'childHost',
+            target: { kind: 'childHost', resolver: 'praxis-dialog-child-component-or-template-host', ambiguityPolicy: 'fail', required: false },
+            inputSchema: childHostSchema,
+            effects: [{ kind: 'compile-domain-patch', handler: 'dialog-child-host-configure', handlerContract: {
+                        reads: ['ComponentMetadataRegistry', 'PRAXIS_DIALOG_CONTENT_REGISTRY', 'PRAXIS_DIALOG_TEMPLATE_REGISTRY', 'content', 'componentId', 'inputs', 'data'],
+                        writes: ['content', 'componentId', 'inputs', 'data'],
+                        identityKeys: ['componentId', 'templateId'],
+                        inputSchema: childHostSchema,
+                        failureModes: ['component-not-registered', 'template-not-registered', 'child-inputs-not-serializable', 'child-manifest-required'],
+                        description: 'Configures which component/template is hosted in the dialog and serializable host inputs; child config fields remain delegated to the child manifest.',
+                    } }],
+            destructive: false,
+            requiresConfirmation: false,
+            validators: ['child-host-registered', 'child-config-delegates-to-child-manifest', 'child-inputs-serializable', 'dialog-round-trip'],
+            affectedPaths: ['content', 'componentId', 'inputs', 'data'],
+            submissionImpact: 'config-only',
+            preconditions: ['config-initialized'],
+        },
+        {
+            operationId: 'childOperation.delegate',
+            title: 'Delegate operation to child manifest',
+            scope: 'templating',
+            targetKind: 'childHost',
+            target: { kind: 'childHost', resolver: 'praxis-dialog-child-component-or-template-host', ambiguityPolicy: 'fail', required: true },
+            inputSchema: {
+                type: 'object',
+                required: ['childManifestComponentId', 'operationId', 'params'],
+                properties: {
+                    childManifestComponentId: { type: 'string' },
+                    operationId: { type: 'string' },
+                    target: { type: 'string' },
+                    params: { type: 'object' },
+                },
+            },
+            effects: [{ kind: 'compile-domain-patch', handler: 'dialog-child-operation-delegate', handlerContract: {
+                        reads: ['childManifestComponentId', 'operationId', 'params', 'componentRegistry.authoringManifest'],
+                        writes: ['inputs', 'data'],
+                        identityKeys: ['childManifestComponentId', 'operationId'],
+                        inputSchema: { type: 'object', required: ['childManifestComponentId', 'operationId', 'params'], properties: { childManifestComponentId: { type: 'string' }, operationId: { type: 'string' }, target: { type: 'string' }, params: { type: 'object' } } },
+                        failureModes: ['child-manifest-not-found', 'child-operation-not-authorized', 'child-operation-validation-failed', 'dialog-shell-child-boundary-violation'],
+                        description: 'Delegates child component configuration edits to the child authoring manifest before projecting the validated patch into the dialog child host inputs/data envelope.',
+                    } }],
+            destructive: false,
+            requiresConfirmation: false,
+            validators: ['child-manifest-resolvable', 'child-operation-authorized', 'child-config-delegates-to-child-manifest', 'dialog-shell-boundary-preserved'],
+            affectedPaths: ['inputs', 'data'],
+            submissionImpact: 'config-only',
+            preconditions: ['child-host-configured', 'child-manifest-resolved'],
+        },
+    ],
+    validators: [
+        { validatorId: 'accessibility-label-preserved', level: 'error', code: 'DIALOG_ACCESSIBILITY_LABEL_PRESERVED', description: 'Dialog or alertdialog must keep an accessible title or aria label.' },
+        { validatorId: 'aria-role-valid', level: 'error', code: 'DIALOG_ARIA_ROLE_VALID', description: 'ariaRole must be dialog or alertdialog.' },
+        { validatorId: 'shell-fields-supported', level: 'error', code: 'DIALOG_SHELL_FIELDS_SUPPORTED', description: 'Shell edits must target supported PraxisDialogConfig fields.' },
+        { validatorId: 'size-values-safe', level: 'error', code: 'DIALOG_SIZE_VALUES_SAFE', description: 'Size values must be finite numbers or safe CSS size strings.' },
+        { validatorId: 'size-min-max-consistent', level: 'error', code: 'DIALOG_SIZE_MIN_MAX_CONSISTENT', description: 'Minimum sizes must not exceed maximum sizes.' },
+        { validatorId: 'position-values-safe', level: 'error', code: 'DIALOG_POSITION_VALUES_SAFE', description: 'Position values must be safe CSS size strings.' },
+        { validatorId: 'position-not-conflicting', level: 'warning', code: 'DIALOG_POSITION_NOT_CONFLICTING', description: 'Conflicting position pairs should be explicit and intentional.' },
+        { validatorId: 'backdrop-policy-explicit', level: 'error', code: 'DIALOG_BACKDROP_POLICY_EXPLICIT', description: 'Backdrop and backdrop-click behavior must be explicit when edited.' },
+        { validatorId: 'backdrop-class-safe', level: 'error', code: 'DIALOG_BACKDROP_CLASS_SAFE', description: 'Backdrop classes must be serializable safe class values.' },
+        { validatorId: 'close-policy-explicit', level: 'error', code: 'DIALOG_CLOSE_POLICY_EXPLICIT', description: 'Close behavior must explicitly describe ESC, backdrop and navigation semantics.' },
+        { validatorId: 'unsafe-close-confirmed-when-needed', level: 'error', code: 'DIALOG_UNSAFE_CLOSE_CONFIRMED', description: 'Disabling safe close affordances or enabling unsafe dismissal requires confirmation.' },
+        { validatorId: 'restore-focus-preserved', level: 'error', code: 'DIALOG_RESTORE_FOCUS_PRESERVED', description: 'restoreFocus must stay enabled unless intentionally changed with confirmation.' },
+        { validatorId: 'alertdialog-focus-preserved', level: 'error', code: 'DIALOG_ALERTDIALOG_FOCUS_PRESERVED', description: 'alertdialog focus behavior must keep primary action or configured focus target reachable.' },
+        { validatorId: 'preset-exists', level: 'error', code: 'DIALOG_PRESET_EXISTS', description: 'Preset type and variant must exist in PRAXIS_DIALOG_GLOBAL_PRESETS or be host-provided.' },
+        { validatorId: 'preset-merge-order-preserved', level: 'error', code: 'DIALOG_PRESET_MERGE_ORDER_PRESERVED', description: 'Preset merge order must remain type -> variant -> local config.' },
+        { validatorId: 'child-host-registered', level: 'error', code: 'DIALOG_CHILD_HOST_REGISTERED', description: 'Child component/template must resolve through ComponentMetadataRegistry or dialog registries.' },
+        { validatorId: 'child-config-delegates-to-child-manifest', level: 'error', code: 'DIALOG_CHILD_CONFIG_DELEGATES', description: 'Child component config edits must be delegated to the child authoring manifest.' },
+        { validatorId: 'child-inputs-serializable', level: 'error', code: 'DIALOG_CHILD_INPUTS_SERIALIZABLE', description: 'Child inputs/data persisted by authoring must be serializable safe values.' },
+        { validatorId: 'child-manifest-resolvable', level: 'error', code: 'DIALOG_CHILD_MANIFEST_RESOLVABLE', description: 'Delegated child operation must resolve a child component authoring manifest.' },
+        { validatorId: 'child-operation-authorized', level: 'error', code: 'DIALOG_CHILD_OPERATION_AUTHORIZED', description: 'Delegated child operation must be declared by the child manifest.' },
+        { validatorId: 'dialog-shell-boundary-preserved', level: 'error', code: 'DIALOG_SHELL_BOUNDARY_PRESERVED', description: 'Dialog shell operations must not rewrite child component semantics directly.' },
+        { validatorId: 'dialog-round-trip', level: 'error', code: 'DIALOG_ROUND_TRIP', description: 'Service/tag mode must preserve shell config through open, close, afterClosed and host persistence.' },
+    ],
+    roundTripRequirements: [
+        'PraxisDialogConfig is the canonical shell config; child component config remains owned by the child manifest.',
+        'Preset application must preserve merge order: type preset, then variant, then local config.',
+        'Close policy edits must keep accessibility, focus trap, ESC/backdrop behavior and restoreFocus explicit.',
+        'Dialog host operations must resolve component/template ids through governed registries instead of ad hoc overlays.',
+    ],
+    examples: [
+        { id: 'set-size', request: 'Open this dialog at 860 by 640 pixels.', operationId: 'dialog.size.set', params: { width: '860px', height: '640px' }, isPositive: true },
+        { id: 'set-position', request: 'Anchor the dialog to the right side.', operationId: 'dialog.position.set', params: { right: '24px', top: '64px' }, isPositive: true },
+        { id: 'set-backdrop', request: 'Use a backdrop with the default governed backdrop class.', operationId: 'dialog.backdrop.set', params: { hasBackdrop: true, backdropClass: 'pdx-dialog-backdrop' }, isPositive: true },
+        { id: 'set-close-policy', request: 'Make this destructive confirm require explicit button close.', operationId: 'dialog.closePolicy.set', params: { disableClose: true, closeOnBackdropClick: false, restoreFocus: true }, isPositive: true },
+        { id: 'apply-danger-preset', request: 'Apply the danger confirm preset.', operationId: 'dialog.preset.apply', params: { dialogType: 'confirm', variant: 'danger' }, isPositive: true },
+        { id: 'configure-child-host', request: 'Host the dynamic page component with customization enabled.', operationId: 'childHost.configure', params: { contentType: 'component', componentId: 'praxis-dynamic-page', inputs: { enableCustomization: true } }, isPositive: true },
+        { id: 'delegate-child-config', request: 'Change the table column inside the dialog.', operationId: 'childOperation.delegate', params: { childManifestComponentId: 'praxis-table', operationId: 'column.label.set', params: { field: 'name', label: 'Name' } }, isPositive: true },
+        { id: 'set-shell-label', request: 'Set the dialog title and alertdialog role.', operationId: 'dialog.shell.set', params: { title: 'Delete record', ariaRole: 'alertdialog' }, isPositive: true },
+        { id: 'reject-child-shell-mix', request: 'Directly patch the child table config from the dialog shell manifest.', operationId: 'childOperation.delegate', params: { childManifestComponentId: '', operationId: 'patch-raw-child-config', params: {} }, isPositive: false },
+        { id: 'reject-inaccessible-alert', request: 'Make an alertdialog with no title or aria label.', operationId: 'dialog.shell.set', params: { ariaRole: 'alertdialog', title: '' }, isPositive: false },
+        { id: 'reject-unsafe-close', request: 'Let a destructive dialog close on accidental backdrop click with no confirmation.', operationId: 'dialog.closePolicy.set', params: { closeOnBackdropClick: true, disableClose: false, restoreFocus: false }, isPositive: false },
+    ],
+};
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { LongContentDialogExampleComponent, PRAXIS_DIALOG_CONTENT_REGISTRY, PRAXIS_DIALOG_DATA, PRAXIS_DIALOG_DEFAULTS, PRAXIS_DIALOG_EXAMPLE_LONG_CONTENT, PRAXIS_DIALOG_GLOBAL_PRESETS, PRAXIS_DIALOG_I18N, PRAXIS_DIALOG_TEMPLATE_REGISTRY, PraxisDialog, PraxisDialogActionsDirective, PraxisDialogComponent, PraxisDialogContentDirective, PraxisDialogDirectives, PraxisDialogRef, PraxisDialogTitleDirective, provideDialogGlobalPresetsFromGlobalConfig, providePraxisDialogExamples, providePraxisDialogGlobalActions, providePraxisSurfaceGlobalActions };
+export { LongContentDialogExampleComponent, PRAXIS_DIALOG_AUTHORING_MANIFEST, PRAXIS_DIALOG_COMPONENT_METADATA, PRAXIS_DIALOG_CONTENT_REGISTRY, PRAXIS_DIALOG_DATA, PRAXIS_DIALOG_DEFAULTS, PRAXIS_DIALOG_EXAMPLE_LONG_CONTENT, PRAXIS_DIALOG_GLOBAL_PRESETS, PRAXIS_DIALOG_I18N, PRAXIS_DIALOG_TEMPLATE_REGISTRY, PraxisDialog, PraxisDialogActionsDirective, PraxisDialogComponent, PraxisDialogContentDirective, PraxisDialogDirectives, PraxisDialogRef, PraxisDialogTitleDirective, provideDialogGlobalPresetsFromGlobalConfig, providePraxisDialogExamples, providePraxisDialogGlobalActions, providePraxisDialogMetadata, providePraxisSurfaceGlobalActions };

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@praxisui/dialog",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.100",
   "description": "Dialog helpers and components for Praxis UI with Angular Material integration.",
   "peerDependencies": {
-    "@angular/common": "^20.0.0",
-    "@angular/core": "^20.0.0",
-    "@angular/cdk": "^20.0.0",
-    "@angular/forms": "^20.0.0",
-    "@praxisui/core": "^8.0.0-beta.0"
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/cdk": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@praxisui/core": "^8.0.0-beta.100",
+    "@angular/material": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
+    "rxjs": "~7.8.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"
@@ -34,14 +37,15 @@
   ],
   "sideEffects": false,
   "module": "fesm2022/praxisui-dialog.mjs",
-  "typings": "index.d.ts",
+  "typings": "types/praxisui-dialog.d.ts",
   "exports": {
     "./package.json": {
       "default": "./package.json"
     },
     ".": {
-      "types": "./index.d.ts",
+      "types": "./types/praxisui-dialog.d.ts",
       "default": "./fesm2022/praxisui-dialog.mjs"
     }
-  }
+  },
+  "type": "module"
 }

package/{index.d.ts → types/praxisui-dialog.d.ts}

@@ -3,6 +3,8 @@ import { InjectionToken, TemplateRef, ComponentRef, OnInit, OnChanges, OnDestroy
 import { OverlayRef } from '@angular/cdk/overlay';
 import { Observable, Subject } from 'rxjs';
 import { CdkPortalOutlet } from '@angular/cdk/portal';
+import * as _praxisui_dialog from '@praxisui/dialog';
+import { ComponentDocMeta, ComponentAuthoringManifest } from '@praxisui/core';
 
 type ActionsLayout = 'start' | 'center' | 'end' | 'stretched';
 type DialogThemeColor = 'primary' | 'light' | 'dark';
@@ -213,6 +215,7 @@ declare class PraxisDialogComponent implements OnInit, OnChanges, OnDestroy {
     themeColor: DialogThemeColor;
     disableClose: boolean;
     hasBackdrop: boolean;
+    closeOnBackdropClick: boolean;
     overlayMode: boolean;
     zIndex?: number;
     panelClass?: string | string[] | Record<string, boolean>;
@@ -264,7 +267,7 @@ declare class PraxisDialogComponent implements OnInit, OnChanges, OnDestroy {
     beginCloseAnimation(): Promise<void>;
     private focusPrimaryAction;
     static ɵfac: i0.ɵɵFactoryDeclaration<PraxisDialogComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PraxisDialogComponent, "praxis-dialog", never, { "title": { "alias": "title"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; "actionsLayout": { "alias": "actionsLayout"; "required": false; }; "animation": { "alias": "animation"; "required": false; }; "open": { "alias": "open"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "minHeight": { "alias": "minHeight"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "disableClose": { "alias": "disableClose"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "overlayMode": { "alias": "overlayMode"; "required": false; }; "zIndex": { "alias": "zIndex"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "position": { "alias": "position"; "required": false; }; "autoFocusedElement": { "alias": "autoFocusedElement"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "restoreFocus": { "alias": "restoreFocus"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaRole": { "alias": "ariaRole"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; "styles": { "alias": "styles"; "required": false; }; "titleIcon": { "alias": "titleIcon"; "required": false; }; }, { "action": "action"; "close": "close"; "opened": "opened"; "afterClosed": "afterClosed"; }, ["titleTpl", "actionsTpl", "contentTpl"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PraxisDialogComponent, "praxis-dialog", never, { "title": { "alias": "title"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; "actionsLayout": { "alias": "actionsLayout"; "required": false; }; "animation": { "alias": "animation"; "required": false; }; "open": { "alias": "open"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "minHeight": { "alias": "minHeight"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "disableClose": { "alias": "disableClose"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; }; "overlayMode": { "alias": "overlayMode"; "required": false; }; "zIndex": { "alias": "zIndex"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "position": { "alias": "position"; "required": false; }; "autoFocusedElement": { "alias": "autoFocusedElement"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "restoreFocus": { "alias": "restoreFocus"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaRole": { "alias": "ariaRole"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; "styles": { "alias": "styles"; "required": false; }; "titleIcon": { "alias": "titleIcon"; "required": false; }; }, { "action": "action"; "close": "close"; "opened": "opened"; "afterClosed": "afterClosed"; }, ["titleTpl", "actionsTpl", "contentTpl"], never, true, never>;
 }
 declare const PraxisDialogDirectives: readonly [];
 
@@ -329,8 +332,13 @@ declare function providePraxisDialogExamples(): {
     provide: i0.InjectionToken<readonly (() => void)[]>;
     multi: boolean;
     useFactory: (registry: Record<string, any>) => () => void;
-    deps: i0.InjectionToken<Record<string, ComponentType<any>>>[];
+    deps: i0.InjectionToken<Record<string, _praxisui_dialog.ComponentType<any>>>[];
 };
 
-export { LongContentDialogExampleComponent, PRAXIS_DIALOG_CONTENT_REGISTRY, PRAXIS_DIALOG_DATA, PRAXIS_DIALOG_DEFAULTS, PRAXIS_DIALOG_EXAMPLE_LONG_CONTENT, PRAXIS_DIALOG_GLOBAL_PRESETS, PRAXIS_DIALOG_I18N, PRAXIS_DIALOG_TEMPLATE_REGISTRY, PraxisDialog, PraxisDialogActionsDirective, PraxisDialogComponent, PraxisDialogContentDirective, PraxisDialogDirectives, PraxisDialogRef, PraxisDialogTitleDirective, provideDialogGlobalPresetsFromGlobalConfig, providePraxisDialogExamples, providePraxisDialogGlobalActions, providePraxisSurfaceGlobalActions };
+declare const PRAXIS_DIALOG_COMPONENT_METADATA: ComponentDocMeta;
+declare function providePraxisDialogMetadata(): Provider;
+
+declare const PRAXIS_DIALOG_AUTHORING_MANIFEST: ComponentAuthoringManifest;
+
+export { LongContentDialogExampleComponent, PRAXIS_DIALOG_AUTHORING_MANIFEST, PRAXIS_DIALOG_COMPONENT_METADATA, PRAXIS_DIALOG_CONTENT_REGISTRY, PRAXIS_DIALOG_DATA, PRAXIS_DIALOG_DEFAULTS, PRAXIS_DIALOG_EXAMPLE_LONG_CONTENT, PRAXIS_DIALOG_GLOBAL_PRESETS, PRAXIS_DIALOG_I18N, PRAXIS_DIALOG_TEMPLATE_REGISTRY, PraxisDialog, PraxisDialogActionsDirective, PraxisDialogComponent, PraxisDialogContentDirective, PraxisDialogDirectives, PraxisDialogRef, PraxisDialogTitleDirective, provideDialogGlobalPresetsFromGlobalConfig, providePraxisDialogExamples, providePraxisDialogGlobalActions, providePraxisDialogMetadata, providePraxisSurfaceGlobalActions };
 export type { ActionsLayout, AnimationDirection, ComponentType, DialogAction, DialogAnimation, DialogAnimationType, DialogContentDescriptor, DialogThemeColor, PraxisAlertConfig, PraxisConfirmConfig, PraxisDialogConfig, PraxisDialogGlobalPresets, PraxisDialogPosition, PraxisDialogStyleConfig, PraxisPromptConfig };