@vectoriox/iox-ui 5.11.0 → 5.12.1

package/fesm2022/vectoriox-iox-ui.mjs

@@ -621,7 +621,7 @@ class CardComponent {
             <h2>{{ title }}</h2>
             <p>{{ description }}</p>
         </div>
-    `, isInline: true, styles: [".image-wrapper{width:100%;aspect-ratio:1/1;overflow:hidden;margin-bottom:.75rem}\n", ".card-img{width:100%;height:100%;object-fit:cover}\n", "h2{margin:0 0 .5rem;font-size:1.2rem}\n", "p{margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    `, isInline: true, styles: [".image-wrapper{width:100%;aspect-ratio:1/1;overflow:hidden;margin-bottom:var(--iox-card-media-gap, .75rem)}\n", ".card-img{width:100%;height:100%;object-fit:cover}\n", "h2{margin:0 0 var(--iox-card-title-gap, .5rem) 0;font-size:var(--iox-card-title-size, 1.2rem)}\n", "p{margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
@@ -633,7 +633,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
             <h2>{{ title }}</h2>
             <p>{{ description }}</p>
         </div>
-    `, standalone: false, styles: [".image-wrapper{width:100%;aspect-ratio:1/1;overflow:hidden;margin-bottom:.75rem}\n", ".card-img{width:100%;height:100%;object-fit:cover}\n", "h2{margin:0 0 .5rem;font-size:1.2rem}\n", "p{margin:0}\n"] }]
+    `, standalone: false, styles: [".image-wrapper{width:100%;aspect-ratio:1/1;overflow:hidden;margin-bottom:var(--iox-card-media-gap, .75rem)}\n", ".card-img{width:100%;height:100%;object-fit:cover}\n", "h2{margin:0 0 var(--iox-card-title-gap, .5rem) 0;font-size:var(--iox-card-title-size, 1.2rem)}\n", "p{margin:0}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], image: [{
@@ -748,7 +748,7 @@ class BuilderLinkComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderLinkComponent, deps: [{ token: IS_PREVIEW, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: BuilderLinkComponent, isStandalone: false, selector: "a[iox-link]", inputs: { nodeId: "nodeId", label: "label", linkType: "linkType", url: "url", pageRoute: "pageRoute", target: "target", style: "style" }, host: { listeners: { "click": "onLinkClick($event)" }, properties: { "attr.href": "isPreview ? resolvedHref : null", "attr.target": "isPreview ? target : null", "style.pointer-events": "isPreview ? null : 'none'", "class": "'builder-link iox-node-' + nodeId" } }, ngImport: i0, template: `{{ label }}`, isInline: true, styles: [":host{display:inline;cursor:pointer;color:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: BuilderLinkComponent, isStandalone: false, selector: "a[iox-link]", inputs: { nodeId: "nodeId", label: "label", linkType: "linkType", url: "url", pageRoute: "pageRoute", target: "target", style: "style" }, host: { listeners: { "click": "onLinkClick($event)" }, properties: { "attr.href": "isPreview ? resolvedHref : null", "attr.target": "isPreview ? target : null", "style.pointer-events": "isPreview ? null : 'none'", "class": "'builder-link iox-node-' + nodeId" } }, ngImport: i0, template: `{{ label }}`, isInline: true, styles: [":host{display:inline;cursor:pointer}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderLinkComponent, decorators: [{
             type: Component,
@@ -758,7 +758,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                         '[style.pointer-events]': "isPreview ? null : 'none'",
                         '[class]': "'builder-link iox-node-' + nodeId",
                         '(click)': 'onLinkClick($event)',
-                    }, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline;cursor:pointer;color:inherit}\n"] }]
+                    }, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline;cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -835,7 +835,7 @@ class BuilderButtonComponent {
         this.events.emit('elementselect', { node: this.node, componentRef: null });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderButtonComponent, deps: [{ token: IOX_BUILDER_EVENTS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: BuilderButtonComponent, isStandalone: false, selector: "a[iox-button]", inputs: { label: "label", link: "link", variant: "variant", nodeId: "nodeId", node: "node" }, host: { listeners: { "dblclick": "startEdit($event)", "blur": "commitEdit($event)", "keydown": "onKeyDown($event)" }, properties: { "attr.href": "link", "class": "'builder-btn variant-' + variant + ' iox-node-' + nodeId", "attr.contenteditable": "editing ? 'true' : null" } }, ngImport: i0, template: `{{ label }}`, isInline: true, styles: [":host{display:inline-block;padding:.6rem 1.5rem;border-radius:6px;font-size:.9rem;text-decoration:none;cursor:pointer;text-align:center;transition:opacity .15s}:host.variant-primary{background:#cb9090;color:#fff;border:1px solid #cb9090}:host.variant-outlined{background:transparent;color:#cb9090;border:1px solid #cb9090}:host.variant-text{background:transparent;color:#cb9090;border:1px solid transparent}:host[contenteditable]{outline:2px solid #cb9090;cursor:text}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: BuilderButtonComponent, isStandalone: false, selector: "a[iox-button]", inputs: { label: "label", link: "link", variant: "variant", nodeId: "nodeId", node: "node" }, host: { listeners: { "dblclick": "startEdit($event)", "blur": "commitEdit($event)", "keydown": "onKeyDown($event)" }, properties: { "attr.href": "link", "class": "'builder-btn variant-' + variant + ' iox-node-' + nodeId", "attr.contenteditable": "editing ? 'true' : null" } }, ngImport: i0, template: `{{ label }}`, isInline: true, styles: [":host{display:inline-block;padding:var(--iox-button-pad, .6rem 1.5rem);border-radius:var(--iox-button-radius, 6px);font-size:var(--iox-button-size, .9rem);text-decoration:none;cursor:pointer;text-align:center;transition:opacity var(--iox-dur-fast, .15s)}:host.variant-primary{background:var(--iox-button-primary-bg, #cb9090);color:var(--iox-button-primary-ink, #fff);border:var(--iox-button-border-width, 1px) solid var(--iox-button-primary-border, #cb9090)}:host.variant-outlined{background:var(--iox-button-secondary-bg, transparent);color:var(--iox-button-secondary-ink, #cb9090);border:var(--iox-button-border-width, 1px) solid var(--iox-button-secondary-border, #cb9090)}:host.variant-text{background:transparent;color:var(--iox-button-ghost-ink, #cb9090);border:var(--iox-button-border-width, 1px) solid transparent}:host[contenteditable]{outline:2px solid #cb9090;cursor:text}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderButtonComponent, decorators: [{
             type: Component,
@@ -846,7 +846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                         '(dblclick)': 'startEdit($event)',
                         '(blur)': 'commitEdit($event)',
                         '(keydown)': 'onKeyDown($event)',
-                    }, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;padding:.6rem 1.5rem;border-radius:6px;font-size:.9rem;text-decoration:none;cursor:pointer;text-align:center;transition:opacity .15s}:host.variant-primary{background:#cb9090;color:#fff;border:1px solid #cb9090}:host.variant-outlined{background:transparent;color:#cb9090;border:1px solid #cb9090}:host.variant-text{background:transparent;color:#cb9090;border:1px solid transparent}:host[contenteditable]{outline:2px solid #cb9090;cursor:text}\n"] }]
+                    }, standalone: false, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;padding:var(--iox-button-pad, .6rem 1.5rem);border-radius:var(--iox-button-radius, 6px);font-size:var(--iox-button-size, .9rem);text-decoration:none;cursor:pointer;text-align:center;transition:opacity var(--iox-dur-fast, .15s)}:host.variant-primary{background:var(--iox-button-primary-bg, #cb9090);color:var(--iox-button-primary-ink, #fff);border:var(--iox-button-border-width, 1px) solid var(--iox-button-primary-border, #cb9090)}:host.variant-outlined{background:var(--iox-button-secondary-bg, transparent);color:var(--iox-button-secondary-ink, #cb9090);border:var(--iox-button-border-width, 1px) solid var(--iox-button-secondary-border, #cb9090)}:host.variant-text{background:transparent;color:var(--iox-button-ghost-ink, #cb9090);border:var(--iox-button-border-width, 1px) solid transparent}:host[contenteditable]{outline:2px solid #cb9090;cursor:text}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -1089,17 +1089,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 args: ['childrenHost', { read: ViewContainerRef, static: true }]
             }] } });
 
-/** Directive-host container: the `<div>` IS the host — no wrapper, no inner/outer split. */
+/**
+ * The tags a Container may render as (its `htmlTag` trait) — the builder canvas's list. The engine's
+ * string renderer and component path both pick from THIS list, so a Navigation bar is a `<nav>` on
+ * the live site exactly as on the canvas.
+ */
+const CONTAINER_HTML_TAGS = ['div', 'section', 'article', 'header', 'footer', 'main', 'nav', 'ul', 'ol', 'li'];
+/** `htmlTag` when it is an allowed Container tag, else `div`. */
+function containerHtmlTag(htmlTag) {
+    return CONTAINER_HTML_TAGS.includes(String(htmlTag)) ? String(htmlTag) : 'div';
+}
+/** Directive-host container: the host element IS the container — no wrapper, no inner/outer split.
+ *  Variable tag: the engine creates it on an explicit `hostElement` of `containerHtmlTag(htmlTag)`. */
 class ContainerComponent {
     constructor() {
         this.nodeId = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: ContainerComponent, isStandalone: false, selector: "div[iox-container]", inputs: { nodeId: "nodeId" }, host: { properties: { "class": "'iox-node-' + nodeId" } }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-container #childrenHost></ng-container>`, isInline: true, styles: [":host{box-sizing:border-box}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: ContainerComponent, isStandalone: false, selector: "div[iox-container],section[iox-container],article[iox-container],header[iox-container],footer[iox-container],main[iox-container],nav[iox-container],ul[iox-container],ol[iox-container],li[iox-container]", inputs: { nodeId: "nodeId" }, host: { properties: { "class": "'iox-node-' + nodeId" } }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `<ng-container #childrenHost></ng-container>`, isInline: true, styles: [":host{box-sizing:border-box}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'div[iox-container]', template: `<ng-container #childrenHost></ng-container>`, host: { '[class]': "'iox-node-' + nodeId" }, standalone: false, styles: [":host{box-sizing:border-box}\n"] }]
+            args: [{ selector: 'div[iox-container],section[iox-container],article[iox-container],header[iox-container],footer[iox-container],main[iox-container],nav[iox-container],ul[iox-container],ol[iox-container],li[iox-container]', template: `<ng-container #childrenHost></ng-container>`, host: { '[class]': "'iox-node-' + nodeId" }, standalone: false, styles: [":host{box-sizing:border-box}\n"] }]
         }], propDecorators: { nodeId: [{
                 type: Input
             }], childrenHost: [{
@@ -1283,6 +1294,11 @@ const MARKER_FUNS = [
     ['markerFontSize', 'fontSize'],
 ];
 const TRANSITION_KEYS = ['transitionDuration', 'transitionTimingFunction', 'transitionDelay'];
+/** The whole-value backdrop trait (DS2). A plain key — it is copied, not stripped — but it feeds
+ *  the backdrop group's output, so a breakpoint layer that sets it must count as touching it. */
+const BACKDROP_WHOLE_KEY = 'backdropFilter';
+/** The prefixed twin emitted beside every composed `backdropFilter` (Safari). */
+const BACKDROP_TWIN_KEY = 'WebkitBackdropFilter';
 const VIRTUAL_TRAIT_GROUPS = Object.freeze([
     { output: 'filter', keys: FILTER_FUNS.map(([t]) => t), reset: 'none' },
     { output: 'backdropFilter', keys: BACKDROP_FUNS.map(([t]) => t), reset: 'none' },
@@ -1327,10 +1343,20 @@ function composeVirtualTraits(raw, base = raw) {
     const filterStr = buildFns(FILTER_FUNS, merged(FILTER_FUNS));
     if (filterStr)
         result['filter'] = filterStr;
-    // backdrop-filter
+    // backdrop-filter. The whole-value `backdropFilter` trait (DS2 — an element style writes
+    // `var(--iox-card-backdrop)`) WINS over the composed backdrop* group when it is set; its
+    // default `none` means unset, so a legacy node's composed blur still applies. The -webkit-
+    // twin rides along for Safari (design-system plan T3).
+    const whole = raw[BACKDROP_WHOLE_KEY] ?? base[BACKDROP_WHOLE_KEY];
+    const wholeSet = typeof whole === 'string' && whole.trim() !== '' && whole.trim() !== 'none';
     const backdropStr = buildFns(BACKDROP_FUNS, merged(BACKDROP_FUNS));
-    if (backdropStr)
-        result['backdropFilter'] = backdropStr;
+    if (wholeSet)
+        result[BACKDROP_WHOLE_KEY] = whole;
+    else if (backdropStr)
+        result[BACKDROP_WHOLE_KEY] = backdropStr;
+    if (result[BACKDROP_WHOLE_KEY] !== undefined && result[BACKDROP_WHOLE_KEY] !== '') {
+        result[BACKDROP_TWIN_KEY] = result[BACKDROP_WHOLE_KEY];
+    }
     // transform
     const transformStr = buildFns(TRANSFORM_FUNS, merged(TRANSFORM_FUNS));
     if (transformStr)
@@ -1697,7 +1723,8 @@ function groupsTouchedBy(map) {
     if (!map)
         return touched;
     for (const group of VIRTUAL_TRAIT_GROUPS) {
-        if (group.keys.some(k => map[k] !== undefined))
+        const wholeTouched = group.output === BACKDROP_WHOLE_KEY && map[BACKDROP_WHOLE_KEY] !== undefined;
+        if (wholeTouched || group.keys.some(k => map[k] !== undefined))
             touched.add(group);
     }
     return touched;
@@ -1726,7 +1753,7 @@ function composeOverride(own, wider, touched) {
     const groupOutputs = new Set(VIRTUAL_TRAIT_GROUPS.map(g => g.output));
     const out = {};
     for (const [k, v] of Object.entries(composed)) {
-        if (!groupOutputs.has(k) && v !== undefined)
+        if (!groupOutputs.has(k) && k !== BACKDROP_TWIN_KEY && v !== undefined)
             out[k] = v;
     }
     const merged = { ...wider, ...own };
@@ -1737,6 +1764,8 @@ function composeOverride(own, wider, touched) {
         else if (shouldReset(group, merged))
             out[group.output] = group.reset;
     }
+    if (out[BACKDROP_WHOLE_KEY] !== undefined)
+        out[BACKDROP_TWIN_KEY] = out[BACKDROP_WHOLE_KEY];
     return out;
 }
 /**
@@ -2822,7 +2851,7 @@ class ClientGalleryComponent {
                  [ngStyle]="slideStyle(i)"></div>
             <div class="iox-gallery__overlay"></div>
         </div>
-    `, isInline: true, styles: [":host{display:block}.iox-gallery{position:relative;overflow:hidden;box-sizing:border-box}.iox-gallery__img{position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none;opacity:0;filter:brightness(1.35);-webkit-mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,1) 80%,rgba(0,0,0,.1) 95%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(circle at 50% 50%,#000 80%,#0000001a 95%,#0000)}.iox-gallery__overlay{position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(to bottom,#00000080,#00000026 20% 80%,#00000080)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    `, isInline: true, styles: [":host{display:block}.iox-gallery{position:relative;overflow:hidden;box-sizing:border-box}.iox-gallery__img{position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none;opacity:0;filter:var(--iox-gallery-filter, brightness(1.35));-webkit-mask-image:var(--iox-gallery-mask, radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 80%, rgba(0,0,0,.1) 95%, rgba(0,0,0,0) 100%));mask-image:var(--iox-gallery-mask, radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 80%, rgba(0,0,0,.1) 95%, rgba(0,0,0,0) 100%))}.iox-gallery__overlay{position:absolute;inset:0;pointer-events:none;z-index:3;background:var(--iox-gallery-overlay, linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,.15) 20%, rgba(0,0,0,.15) 80%, rgba(0,0,0,.5) 100%))}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: ClientGalleryComponent, decorators: [{
             type: Component,
@@ -2834,7 +2863,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                  [ngStyle]="slideStyle(i)"></div>
             <div class="iox-gallery__overlay"></div>
         </div>
-    `, standalone: false, styles: [":host{display:block}.iox-gallery{position:relative;overflow:hidden;box-sizing:border-box}.iox-gallery__img{position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none;opacity:0;filter:brightness(1.35);-webkit-mask-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,1) 80%,rgba(0,0,0,.1) 95%,rgba(0,0,0,0) 100%);mask-image:radial-gradient(circle at 50% 50%,#000 80%,#0000001a 95%,#0000)}.iox-gallery__overlay{position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(to bottom,#00000080,#00000026 20% 80%,#00000080)}\n"] }]
+    `, standalone: false, styles: [":host{display:block}.iox-gallery{position:relative;overflow:hidden;box-sizing:border-box}.iox-gallery__img{position:absolute;inset:0;background-size:cover;background-position:center;pointer-events:none;opacity:0;filter:var(--iox-gallery-filter, brightness(1.35));-webkit-mask-image:var(--iox-gallery-mask, radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 80%, rgba(0,0,0,.1) 95%, rgba(0,0,0,0) 100%));mask-image:var(--iox-gallery-mask, radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 80%, rgba(0,0,0,.1) 95%, rgba(0,0,0,0) 100%))}.iox-gallery__overlay{position:absolute;inset:0;pointer-events:none;z-index:3;background:var(--iox-gallery-overlay, linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,.15) 20%, rgba(0,0,0,.15) 80%, rgba(0,0,0,.5) 100%))}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -4506,6 +4535,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 args: ['childrenHost', { read: ViewContainerRef, static: true }]
             }] } });
 
+const PLACEMENTS = ['top', 'bottom', 'start', 'end'];
+const isOn = (v) => v === true || v === 'true';
+const isOff = (v) => v === false || v === 'false';
+/**
+ * The Dialog's LIVE twin on the engine's component path (actions plan A1b; design-system DS2).
+ * Directive-host: the `<dialog>` IS the host, carrying exactly the markup the string renderer
+ * writes (`data-iox-dialog`, the opt-in backdrop-close / consent-role / placement attributes and
+ * the close X), so the runtime's dialog actions, the consent prompt and `styles.scss` treat both
+ * paths alike. Ships CLOSED — only the dialog actions open it. Before this existed, a page holding
+ * a Dialog fell back to the string renderer wholesale.
+ */
+class IoxDialogComponent {
+    constructor() {
+        this.nodeId = '';
+        this.placement = 'center';
+        this.closeOnBackdrop = true;
+        this.showCloseButton = true;
+        this.consentRole = false;
+    }
+    get backdropCloses() { return !isOff(this.closeOnBackdrop); }
+    get closeButtonShown() { return !isOff(this.showCloseButton); }
+    get consentRoleOn() { return isOn(this.consentRole); }
+    get placementAttr() { return PLACEMENTS.includes(String(this.placement)) ? String(this.placement) : null; }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: IoxDialogComponent, isStandalone: false, selector: "dialog[iox-dialog]", inputs: { nodeId: "nodeId", placement: "placement", closeOnBackdrop: "closeOnBackdrop", showCloseButton: "showCloseButton", consentRole: "consentRole" }, host: { attributes: { "data-iox-dialog": "" }, properties: { "class": "'iox-node-' + nodeId", "attr.data-iox-dialog-backdrop-close": "backdropCloses ? '' : null", "attr.data-iox-consent-role": "consentRoleOn ? '' : null", "attr.data-iox-dialog-placement": "placementAttr" } }, viewQueries: [{ propertyName: "childrenHost", first: true, predicate: ["childrenHost"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: `@if (closeButtonShown) {<button type="button" class="iox-dialog-close" data-iox-dialog-close aria-label="Close">×</button>}<ng-container #childrenHost></ng-container>`, isInline: true, styles: [":host{box-sizing:border-box}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dialog[iox-dialog]', template: `@if (closeButtonShown) {<button type="button" class="iox-dialog-close" data-iox-dialog-close aria-label="Close">×</button>}<ng-container #childrenHost></ng-container>`, host: {
+                        '[class]': "'iox-node-' + nodeId",
+                        'data-iox-dialog': '',
+                        '[attr.data-iox-dialog-backdrop-close]': "backdropCloses ? '' : null",
+                        '[attr.data-iox-consent-role]': "consentRoleOn ? '' : null",
+                        '[attr.data-iox-dialog-placement]': 'placementAttr',
+                    }, standalone: false, styles: [":host{box-sizing:border-box}\n"] }]
+        }], propDecorators: { nodeId: [{
+                type: Input
+            }], placement: [{
+                type: Input
+            }], closeOnBackdrop: [{
+                type: Input
+            }], showCloseButton: [{
+                type: Input
+            }], consentRole: [{
+                type: Input
+            }], childrenHost: [{
+                type: ViewChild,
+                args: ['childrenHost', { read: ViewContainerRef, static: true }]
+            }] } });
+
 const COMPONENTS = [
     BuilderImageComponent,
     BuilderSpacerComponent,
@@ -4531,6 +4610,7 @@ const COMPONENTS = [
     IoxSubmitButtonComponent,
     IoxFormSuccessComponent,
     IoxFormErrorComponent,
+    IoxDialogComponent,
 ];
 class IoxBuilderComponentsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxBuilderComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -4557,7 +4637,8 @@ class IoxBuilderComponentsModule {
             IoxFieldComponent,
             IoxSubmitButtonComponent,
             IoxFormSuccessComponent,
-            IoxFormErrorComponent], imports: [CommonModule], exports: [BuilderImageComponent,
+            IoxFormErrorComponent,
+            IoxDialogComponent], imports: [CommonModule], exports: [BuilderImageComponent,
             BuilderSpacerComponent,
             CardComponent,
             BuilderDividerComponent,
@@ -4580,7 +4661,8 @@ class IoxBuilderComponentsModule {
             IoxFieldComponent,
             IoxSubmitButtonComponent,
             IoxFormSuccessComponent,
-            IoxFormErrorComponent] }); }
+            IoxFormErrorComponent,
+            IoxDialogComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxBuilderComponentsModule, imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: IoxBuilderComponentsModule, decorators: [{
@@ -4635,6 +4717,9 @@ class IoxComponentRegistryService {
             ['SubmitButton', IoxSubmitButtonComponent],
             ['FormSuccess', IoxFormSuccessComponent],
             ['FormError', IoxFormErrorComponent],
+            // Dialog (DS2) — the live <dialog> twin, so a page holding one no longer falls back to
+            // the string renderer.
+            ['Dialog', IoxDialogComponent],
         ]);
     }
     getComponent(type) {
@@ -4714,6 +4799,12 @@ const NOOP_INITIAL_VALUES = {
     // initial, so it still emits and wins.
     'overflow': ['visible'], 'overflow-x': ['visible'], 'overflow-y': ['visible'],
     'clip-path': ['none'],
+    // DS2 traits (design-system plan T3/T4). `backdrop-filter: blur(0px)` would still create a
+    // containing block, so the whole-value trait's solid-flavor value is `none` — and `none` must
+    // never be emitted on every node. text-transform IS inherited: the cost is that `none` cannot
+    // cancel an ancestor's uppercase in a base rule — chosen over emitting it on every node.
+    'backdrop-filter': ['none'], '-webkit-backdrop-filter': ['none'],
+    'text-transform': ['none'],
 };
 /**
  * Style props a type's render-default fully REPLACES. Emitting them would produce a dead
@@ -4778,6 +4869,45 @@ function compileDeclarations(props, importantProps, context = DeclarationContext
     }
     return out;
 }
+/**
+ * The state names whose rule compiles to a DIFFERENT pseudo-class than their own name. `focus`
+ * compiles to `:focus-visible` (design-system DS2): an element style's focus ring must appear for
+ * keyboard users, not stick to a button after a mouse click. Stored states keep the name `focus` —
+ * no migration — and a text field still matches, since browsers treat a focused text input as
+ * focus-visible. Shared by the builder canvas and both engine paths.
+ */
+const STATE_PSEUDO_CLASS = { focus: 'focus-visible' };
+/** The pseudo-class a stored state compiles to (`focus` → `focus-visible`, everything else itself). */
+function statePseudoClass(state) {
+    return STATE_PSEUDO_CLASS[state] ?? state;
+}
+/** The states driven by a pointer hovering something — each earns the default hover transition. */
+const HOVER_STATES = ['hover', 'parent-hover', 'trigger-hover'];
+/** True when the node restyles on hover (its own, its parent's or a chosen trigger's). */
+function hasHoverState(stateStyles) {
+    return !!stateStyles && HOVER_STATES.some(s => Object.keys(stateStyles[s] ?? {}).length > 0);
+}
+/**
+ * The base-rule transition a hovering node gets when it declares none of its own, so a hover
+ * animates instead of snapping. Token-driven with today's literal as the fallback (T6), so an
+ * unseeded org renders `all 0.2s ease` byte-identically. ONE copy for the builder canvas, the style
+ * panel and the engine — it was hand-written in three places.
+ */
+const HOVER_DEFAULT_TRANSITION = 'all var(--iox-dur-fast, 0.2s) var(--iox-ease-standard, ease)';
+/** True when the RAW style map already yields a transition (an explicit one, or the composed
+ *  transitionDuration/TimingFunction an element style writes). */
+function hasOwnTransition(styleProps) {
+    const sp = styleProps ?? {};
+    if (sp['transition'] !== undefined && sp['transition'] !== null && sp['transition'] !== '')
+        return true;
+    return composeVirtualTraits(sp)['transition'] !== undefined;
+}
+/** `styleProps` plus the default hover transition when the node hovers and sets none itself. */
+function withDefaultHoverTransition(styleProps, stateStyles) {
+    return hasHoverState(stateStyles) && !hasOwnTransition(styleProps)
+        ? { ...styleProps, transition: HOVER_DEFAULT_TRANSITION }
+        : styleProps;
+}
 /**
  * Per-type default `width` that the builder applies from each component's config
  * (NOT persisted in styleProps — see render-parity.md "saved node is not
@@ -4832,9 +4962,11 @@ function renderDefaultDeclarations(type, styleProps, hasHoverState) {
     if (sp['borderWidth'] && sp['borderStyle'] === undefined) {
         out.push('border-style: solid');
     }
-    // Default transition so own/parent hover animates smoothly (parity with the builder).
-    if (hasHoverState && sp['transition'] === undefined) {
-        out.push('transition: all 0.2s ease');
+    // Default transition so own/parent hover animates smoothly (parity with the builder). Skipped
+    // when the node composes its own (an element style's transitionDuration) — appended after the
+    // node's declarations, it would otherwise beat them in the engine only.
+    if (hasHoverState && !hasOwnTransition(sp)) {
+        out.push(`transition: ${HOVER_DEFAULT_TRANSITION}`);
     }
     // Image defaults reapplied when unset (the config defaults aren't always persisted). height:auto
     // is only a DEFAULT — when the user sets an explicit height (e.g. 100%) it must WIN, so guard it
@@ -6859,5 +6991,5 @@ function effectiveTransitionId(anim) {
  * Generated bundle index. Do not edit.
  */
 
-export { AOSService, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CONTEXT_ACTION_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ContainerComponent, ContextStore, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_PHOSPHOR_WEIGHT, DEFAULT_WIDTH_BY_TYPE, DeclarationContext, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IOX_FORM_NAVIGATOR, IOX_FORM_TRANSPORT, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, LinkedContainerComponent, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, RESERVED_ALIAS_PREFIX, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_RESPONSIVE_TRAITS, SectionComponent, TRANSITION_FEELS, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, activeActions, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildPartSelector, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, compilePageStyle, composeVirtualTraits, computeRelative, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, defaultMessageResolver, deriveSeoFromContent, describeSeoFields, effectiveTransitionId, excludeSelf, feelFor, getByPath, getSeoValue, initialSlotValues, isActionEnabled, isContextAction, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, nearestCommonAncestorId, nodeCssId, nodeUsesContext, normalizeCollectionResult, normalizeGalleryImage, normalizeIconClass, parentBreakpoint, parseUrlList, partClassName, planDataSource, planResponsiveRules, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resetSeoField, resolveBoundValue, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSeo, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveValueChain, rewriteViewportUnits, safeSetInput, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, stateNamesIn, stripSuppressedProps, variableAliases, variableItemsFrom, withContextSlots, wrapInBreakpointQuery, wrapInMediaQuery };
+export { AOSService, BACKDROP_TWIN_KEY, BACKDROP_WHOLE_KEY, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ContainerComponent, ContextStore, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_PHOSPHOR_WEIGHT, DEFAULT_WIDTH_BY_TYPE, DeclarationContext, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION, HOVER_STATES, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IOX_FORM_NAVIGATOR, IOX_FORM_TRANSPORT, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxDialogComponent, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, LinkedContainerComponent, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, RESERVED_ALIAS_PREFIX, STATE_PSEUDO_CLASS, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_RESPONSIVE_TRAITS, SectionComponent, TRANSITION_FEELS, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, activeActions, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildPartSelector, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, compilePageStyle, composeVirtualTraits, computeRelative, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, defaultMessageResolver, deriveSeoFromContent, describeSeoFields, effectiveTransitionId, excludeSelf, feelFor, getByPath, getSeoValue, hasHoverState, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, nearestCommonAncestorId, nodeCssId, nodeUsesContext, normalizeCollectionResult, normalizeGalleryImage, normalizeIconClass, parentBreakpoint, parseUrlList, partClassName, planDataSource, planResponsiveRules, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resetSeoField, resolveBoundValue, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSeo, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveValueChain, rewriteViewportUnits, safeSetInput, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, stateNamesIn, statePseudoClass, stripSuppressedProps, variableAliases, variableItemsFrom, withContextSlots, withDefaultHoverTransition, wrapInBreakpointQuery, wrapInMediaQuery };
 //# sourceMappingURL=vectoriox-iox-ui.mjs.map