@praxisui/stepper 10.0.0-rc.4 → 10.0.0-rc.41

package/README.md

@@ -105,6 +105,8 @@ validateStep = async ({ step, stepIndex, formGroup, formData }) => {
 
 Remote dynamic forms still require the effective host to provide the CRUD/resource services expected by `@praxisui/dynamic-form`.
 
+When a workflow includes rich-content review blocks (`stepBlocksBeforeForm` or `stepBlocksAfterForm`), `PraxisStepper` reactively merges live form values from all steps into the rich-content evaluation context (`values`, root fields, and `forms[stepId | stepIndex]`). Review steps can therefore bind `recordReference`, `keyValueList`, `propertySheet` or `recordSummary` nodes with `quickView` (`ResourceQuickViewBinding`) to foreign-key IDs or `entity-lookup` selections made in earlier steps.
+
 ## Main Inputs And Outputs
 
 - `stepperId: string`: required stable id for persisted configuration.

package/ai/component-registry.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-10-07T11:07:08.250Z",
+  "generatedAt": "2026-10-27T22:14:23.237Z",
   "packageName": "@praxisui/stepper",
-  "packageVersion": "10.0.0-rc.4",
+  "packageVersion": "10.0.0-rc.41",
   "sourceRegistry": "praxis-component-registry-ingestion",
   "sourceRegistryVersion": "1.0.0",
   "componentCount": 1,

package/fesm2022/praxisui-stepper.mjs

@@ -22,15 +22,17 @@ import * as i3$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i4$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i6 from '@angular/material/slide-toggle';
+import * as i4$2 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i7 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i7 from '@angular/cdk/drag-drop';
+import * as i8 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i8 from '@angular/material/tooltip';
+import * as i9 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i1$1 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
-import * as i9 from '@angular/material/tabs';
+import * as i10 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import { PRAXIS_LIST_COMPONENT_METADATA } from '@praxisui/list';
 import { PraxisFilesUploadConfigEditor } from '@praxisui/files-upload';
@@ -593,6 +595,8 @@ class PraxisStepper {
     _formComponents = new Map();
     _formValidity = new Map();
     _formPending = new Map();
+    _stepFormValues = signal({}, ...(ngDevMode ? [{ debugName: "_stepFormValues" }] : /* istanbul ignore next */ []));
+    _formValueSubscriptions = new Map();
     hostElement = inject((ElementRef));
     renderer = inject(Renderer2);
     appliedHeaderClasses = [];
@@ -631,8 +635,15 @@ class PraxisStepper {
         if (i != null)
             this._selectedIndex.set(i);
     }
+    _enableCustomization = signal(false, ...(ngDevMode ? [{ debugName: "_enableCustomization" }] : /* istanbul ignore next */ []));
     disableRippleInput = false;
-    enableCustomization = false;
+    set enableCustomization(value) {
+        this._enableCustomization.set(!!value);
+        this.cdr.markForCheck();
+    }
+    get enableCustomization() {
+        return this._enableCustomization();
+    }
     // Paridade com API do Material
     labelPosition;
     color;
@@ -809,6 +820,15 @@ class PraxisStepper {
         if (component)
             this._formComponents.set(stepIndex, component);
         this._formValidity.set(stepIndex, ev.formGroup.valid);
+        this.syncStepFormValues(stepIndex, ev.formGroup);
+        this._formValueSubscriptions.get(stepIndex)?.unsubscribe();
+        if (ev.formGroup?.valueChanges) {
+            this._formValueSubscriptions.set(stepIndex, ev.formGroup.valueChanges.subscribe(() => {
+                this.syncStepFormValues(stepIndex, ev.formGroup);
+                this.cdr.markForCheck();
+            }));
+        }
+        this.cdr.markForCheck();
         this.stepFormReady.emit({
             stepIndex,
             stepId: this.steps()[stepIndex]?.id,
@@ -817,12 +837,37 @@ class PraxisStepper {
     }
     onFormValueChange(stepIndex, ev) {
         this._formValidity.set(stepIndex, ev.isValid);
+        const fg = this._formGroups.get(stepIndex);
+        if (ev.formData &&
+            typeof ev.formData === 'object' &&
+            !Array.isArray(ev.formData)) {
+            this._stepFormValues.update((prev) => ({
+                ...prev,
+                [stepIndex]: { ...ev.formData },
+            }));
+        }
+        else if (fg) {
+            this.syncStepFormValues(stepIndex, fg);
+        }
+        this.cdr.markForCheck();
         this.stepFormValueChange.emit({
             stepIndex,
             stepId: this.steps()[stepIndex]?.id,
             event: ev,
         });
     }
+    syncStepFormValues(stepIndex, formGroup) {
+        const raw = typeof formGroup?.getRawValue === 'function'
+            ? formGroup.getRawValue()
+            : formGroup?.value;
+        if (!raw || typeof raw !== 'object' || Array.isArray(raw)) {
+            return;
+        }
+        this._stepFormValues.update((prev) => ({
+            ...prev,
+            [stepIndex]: { ...raw },
+        }));
+    }
     onReactiveDeterminationExecuted(stepIndex, event) {
         this.stepReactiveDeterminationExecuted.emit({
             stepIndex,
@@ -893,8 +938,37 @@ class PraxisStepper {
         return Array.isArray(document?.nodes) && document.nodes.length > 0;
     }
     getStepRichContentContext(stepIndex) {
-        const step = this.steps()[stepIndex];
+        const allSteps = this.steps();
+        const step = allSteps[stepIndex];
+        const trackedValues = this._stepFormValues();
+        const formsByStep = {};
+        const mergedFormValues = {};
+        allSteps.forEach((candidateStep, idx) => {
+            const fg = this._formGroups.get(idx);
+            const liveRaw = typeof fg?.getRawValue === 'function'
+                ? fg.getRawValue()
+                : fg?.value;
+            const stepValues = (liveRaw && typeof liveRaw === 'object' && !Array.isArray(liveRaw)
+                ? liveRaw
+                : trackedValues[idx]) ?? undefined;
+            if (!stepValues) {
+                return;
+            }
+            const snapshot = { ...stepValues };
+            formsByStep[String(idx)] = snapshot;
+            if (candidateStep?.id) {
+                formsByStep[candidateStep.id] = snapshot;
+            }
+            Object.assign(mergedFormValues, snapshot);
+        });
+        const currentStepValues = formsByStep[String(stepIndex)] ??
+            (step?.id ? formsByStep[step.id] : undefined) ??
+            {};
         return {
+            ...mergedFormValues,
+            values: mergedFormValues,
+            forms: formsByStep,
+            currentStepValues: currentStepValues,
             step: (step ?? {}),
             stepIndex,
             stepper: {
@@ -1392,6 +1466,8 @@ class PraxisStepper {
         });
     }
     ngOnDestroy() {
+        this._formValueSubscriptions.forEach((sub) => sub.unsubscribe());
+        this._formValueSubscriptions.clear();
         this.assistantSessions.removeContextSession(this.buildAiAssistantContextSnapshot().identity);
         this.aiAssistantStateSubscription?.unsubscribe();
     }
@@ -1617,11 +1693,15 @@ class PraxisStepper {
                   icon="dashboard_customize"
                   title="Sem conteúdo nesta etapa"
                   description="Adicione um formulário ou widgets a esta etapa, ou abra o editor para configurar."
-                  [primaryAction]="{
-                    label: 'Abrir editor',
-                    icon: 'tune',
-                    action: openEditor.bind(this),
-                  }"
+                  [primaryAction]="
+                    enableCustomization
+                      ? {
+                          label: 'Abrir editor',
+                          icon: 'tune',
+                          action: openEditor.bind(this),
+                        }
+                      : undefined
+                  "
                 ></praxis-empty-state-card>
               }
             </div>
@@ -1754,8 +1834,8 @@ class PraxisStepper {
         [inline]="true"
         title="Stepper sem etapas"
         description="Adicione etapas para começar. Você pode configurar formulários ou widgets em cada etapa."
-        [primaryAction]="primaryCta"
-        [secondaryActions]="secondaryCtas"
+        [primaryAction]="enableCustomization ? primaryCta : undefined"
+        [secondaryActions]="enableCustomization ? secondaryCtas : []"
       ></praxis-empty-state-card>
     }
     @if (enableCustomization) {
@@ -1768,7 +1848,7 @@ class PraxisStepper {
         <mat-icon fontIcon="edit"></mat-icon>
       </button>
     }
-    `, isInline: true, styles: [":host{display:block;position:relative}.praxis-stepper{width:100%;background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);border-radius:16px;padding:12px;box-shadow:var(--mat-elevation-level1)}.praxis-stepper.pdx-stepper-ft-light{background:transparent;border:none;border-radius:0;padding:0;box-shadow:none}:host(.density-compact) ::ng-deep .mat-step-header{min-height:36px}:host(.density-compact) .pdx-step-actions{padding-top:4px;gap:6px}:host(.density-comfortable) ::ng-deep .mat-step-header{min-height:44px}.pdx-step-content{padding:12px 4px 8px;color:var(--md-sys-color-on-surface)}.pdx-step-actions{display:flex;gap:8px;padding-top:8px}::ng-deep .praxis-stepper .mat-step-header{border-radius:999px;margin:4px 0;color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-label{color:var(--md-sys-color-on-surface);opacity:1}::ng-deep .praxis-stepper .mat-step-label.mat-step-label-active{color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-label.mat-step-label-selected{color:var(--md-sys-color-on-surface);font-weight:600}::ng-deep .praxis-stepper .mat-step-optional{color:var(--md-sys-color-on-surface);opacity:1}::ng-deep .praxis-stepper .mat-step-header.cdk-keyboard-focused,::ng-deep .praxis-stepper .mat-step-header.cdk-program-focused{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}::ng-deep .praxis-stepper .mat-step-icon{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-icon-selected{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}::ng-deep .praxis-stepper .mat-step-icon-state-done{background:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}::ng-deep .praxis-stepper .mat-step-icon-state-error{background:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}::ng-deep .praxis-stepper .mat-stepper-horizontal-line{border-top-color:var(--md-sys-color-outline-variant)}::ng-deep .praxis-stepper .mat-stepper-vertical-line:before{border-left-color:var(--md-sys-color-outline-variant)}::ng-deep .pdx-stepper-ft-light .mat-stepper-horizontal{background:transparent;--mat-stepper-header-hover-state-layer-color: color-mix( in srgb, var(--md-sys-color-on-surface) 8%, transparent );--mat-stepper-header-focus-state-layer-color: transparent;--mat-stepper-header-hover-state-layer-shape: 14px;--mat-stepper-header-focus-state-layer-shape: 14px}::ng-deep .pdx-stepper-ft-light .mat-step-header{margin:0}::ng-deep .pdx-stepper-ft-light .mat-step-header .mat-step-header-ripple{display:none}::ng-deep .ft-stepper{background:transparent}.ft-stepper-content{padding:0}.ft-stepper-content .form-section{border:none;padding:0;background:transparent}.nav-align-start{justify-content:flex-start}.nav-align-center{justify-content:center}.nav-align-end{justify-content:flex-end}.nav-align-space-between{justify-content:space-between}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.stepper-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}.stepper-ai-assistant-trigger{box-shadow:var( --md-sys-elevation-level2, 0 4px 12px rgba(0, 0, 0, .18) )}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i2.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i2.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i2.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "aria-label", "headerPrefix", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i2.MatStepperIcon, selector: "ng-template[matStepperIcon]", inputs: ["matStepperIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { 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"] }, { kind: "component", type: PraxisDynamicForm, selector: "praxis-dynamic-form", inputs: ["resourcePath", "resourceId", "initialValue", "emptyState", "editorialContext", "mode", "config", "actions", "schemaSource", "schemaUrl", "readUrl", "submitUrl", "submitMethod", "submitIdempotencyKey", "submitCorrelationId", "submitResourceVersion", "submitResourceVersionTargetResourceKey", "submitResourceVersionTargetIdField", "responseSchemaUrl", "apiEndpointKey", "apiUrlEntry", "enableCustomization", "showAiAssistant", "formId", "componentInstanceId", "configPersistenceStrategy", "layout", "generatedLayoutPreset", "layoutPolicy", "backConfig", "hooks", "removeEmptyContainersOnSave", "reactiveValidation", "reactiveValidationDebounceMs", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "readonlyModeGlobal", "disabledModeGlobal", "presentationModeGlobal", "presentation", "visibleGlobal", "fieldIconPolicy", "domainRules", "customEndpoints"], outputs: ["formSubmit", "formCancel", "formReset", "configChange", "configPatchChange", "formReady", "valueChange", "payloadPreviewChange", "syncCompleted", "initializationError", "loadingStateChange", "enableCustomizationChange", "customAction", "actionConfirmation", "schemaStatusChange", "fieldRenderError", "ruleDiagnosticsChange", "reactiveDeterminationExecuted", "reactiveDeterminationPendingChange"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "ownerWidgetKey", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent", "widgetDiagnostic"], exportAs: ["dynamicWidgetLoader"] }, { kind: "component", type: EmptyStateCardComponent, selector: "praxis-empty-state-card", inputs: ["icon", "title", "description", "primaryAction", "secondaryActions", "inline", "tone", "variant", "alignment", "density", "iconContainer"] }, { kind: "component", type: PraxisAiAssistantShellComponent, selector: "praxis-ai-assistant-shell", inputs: ["labels", "mode", "state", "contextItems", "attachments", "messages", "quickReplies", "recommendedIntents", "prompt", "statusText", "errorText", "testIdPrefix", "panelTestId", "submitTestId", "applyTestId", "primaryAction", "secondaryActions", "governanceActions", "busy", "canSubmit", "canApply", "submitOnEnter", "showAttachAction", "enablePastedAttachments", "enableFileAttachments", "attachmentAccept", "attachmentMultiple", "voiceInputMode", "voiceLanguage", "draggable", "resizable", "minWidth", "minHeight", "margin", "layout"], outputs: ["promptChange", "submitPrompt", "apply", "retryTurn", "cancelTurn", "shellAction", "close", "attach", "attachmentsPasted", "attachmentsSelected", "removeAttachment", "messageAction", "editMessage", "resendMessage", "quickReply", "recommendedIntent", "layoutChange"] }, { kind: "component", type: PraxisRichContent, selector: "praxis-rich-content", inputs: ["document", "nodes", "context", "hostCapabilities", "layout", "rootClassName"], outputs: ["nodeAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, styles: [":host{display:block;position:relative}.praxis-stepper{width:100%;background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);border-radius:16px;padding:12px;box-shadow:var(--mat-elevation-level1)}.praxis-stepper.pdx-stepper-ft-light{background:transparent;border:none;border-radius:0;padding:0;box-shadow:none}:host(.density-compact) ::ng-deep .mat-step-header{min-height:36px}:host(.density-compact) .pdx-step-actions{padding-top:4px;gap:6px}:host(.density-comfortable) ::ng-deep .mat-step-header{min-height:44px}.pdx-step-content{padding:12px 4px 8px;color:var(--md-sys-color-on-surface)}.pdx-step-actions{display:flex;gap:8px;padding-top:8px}::ng-deep .praxis-stepper .mat-step-header{border-radius:999px;margin:4px 0;color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-label{color:var(--md-sys-color-on-surface);opacity:1}::ng-deep .praxis-stepper .mat-step-label.mat-step-label-active{color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-label.mat-step-label-selected{color:var(--md-sys-color-on-surface);font-weight:600}::ng-deep .praxis-stepper .mat-step-optional{color:var(--md-sys-color-on-surface);opacity:1}::ng-deep .praxis-stepper .mat-step-header.cdk-keyboard-focused,::ng-deep .praxis-stepper .mat-step-header.cdk-program-focused{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}::ng-deep .praxis-stepper .mat-step-icon{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}::ng-deep .praxis-stepper .mat-step-icon-selected{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}::ng-deep .praxis-stepper .mat-step-icon-state-done{background:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}::ng-deep .praxis-stepper .mat-step-icon-state-error{background:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}::ng-deep .praxis-stepper .mat-stepper-horizontal-line{border-top-color:var(--md-sys-color-outline-variant)}::ng-deep .praxis-stepper .mat-stepper-vertical-line:before{border-left-color:var(--md-sys-color-outline-variant)}::ng-deep .pdx-stepper-ft-light .mat-stepper-horizontal{background:transparent;--mat-stepper-header-hover-state-layer-color: color-mix( in srgb, var(--md-sys-color-on-surface) 8%, transparent );--mat-stepper-header-focus-state-layer-color: transparent;--mat-stepper-header-hover-state-layer-shape: 14px;--mat-stepper-header-focus-state-layer-shape: 14px}::ng-deep .pdx-stepper-ft-light .mat-step-header{margin:0}::ng-deep .pdx-stepper-ft-light .mat-step-header .mat-step-header-ripple{display:none}::ng-deep .ft-stepper{background:transparent}.ft-stepper-content{padding:0}.ft-stepper-content .form-section{border:none;padding:0;background:transparent}.nav-align-start{justify-content:flex-start}.nav-align-center{justify-content:center}.nav-align-end{justify-content:flex-end}.nav-align-space-between{justify-content:space-between}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.stepper-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}.stepper-ai-assistant-trigger{box-shadow:var( --md-sys-elevation-level2, 0 4px 12px rgba(0, 0, 0, .18) )}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i2.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i2.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i2.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "aria-label", "headerPrefix", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i2.MatStepperIcon, selector: "ng-template[matStepperIcon]", inputs: ["matStepperIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { 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"] }, { kind: "component", type: PraxisDynamicForm, selector: "praxis-dynamic-form", inputs: ["resourcePath", "resourceId", "initialValue", "emptyState", "editorialContext", "mode", "config", "actions", "schemaSource", "actionId", "operationId", "schemaUrl", "readUrl", "submitUrl", "submitMethod", "submitIdempotencyKey", "submitCorrelationId", "submitResourceVersion", "submitResourceVersionTargetResourceKey", "submitResourceVersionTargetIdField", "responseSchemaUrl", "apiEndpointKey", "apiUrlEntry", "enableCustomization", "showAiAssistant", "formId", "componentInstanceId", "configPersistenceStrategy", "layout", "layoutMode", "formLayout", "generatedLayoutPreset", "layoutPolicy", "backConfig", "hooks", "removeEmptyContainersOnSave", "reactiveValidation", "reactiveValidationDebounceMs", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "readonlyModeGlobal", "disabledModeGlobal", "presentationModeGlobal", "presentation", "presentationPreset", "sectionDefaultAppearance", "sectionDivider", "visibleGlobal", "fieldIconPolicy", "domainRules", "customEndpoints"], outputs: ["formSubmit", "formCancel", "formReset", "configChange", "configPatchChange", "formReady", "valueChange", "payloadPreviewChange", "syncCompleted", "initializationError", "loadingStateChange", "enableCustomizationChange", "customAction", "actionConfirmation", "schemaStatusChange", "fieldRenderError", "ruleDiagnosticsChange", "reactiveDeterminationExecuted", "reactiveDeterminationPendingChange", "tabChange", "tabSelected"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "ownerWidgetKey", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent", "widgetDiagnostic"], exportAs: ["dynamicWidgetLoader"] }, { kind: "component", type: EmptyStateCardComponent, selector: "praxis-empty-state-card", inputs: ["icon", "title", "description", "primaryAction", "secondaryActions", "inline", "tone", "variant", "alignment", "density", "iconContainer"] }, { kind: "component", type: PraxisAiAssistantShellComponent, selector: "praxis-ai-assistant-shell", inputs: ["labels", "mode", "state", "contextItems", "attachments", "messages", "quickReplies", "recommendedIntents", "prompt", "statusText", "errorText", "testIdPrefix", "panelTestId", "submitTestId", "applyTestId", "primaryAction", "secondaryActions", "governanceActions", "busy", "canSubmit", "canApply", "submitOnEnter", "showAttachAction", "enablePastedAttachments", "enableFileAttachments", "attachmentAccept", "attachmentMultiple", "voiceInputMode", "voiceLanguage", "draggable", "resizable", "minWidth", "minHeight", "margin", "layout"], outputs: ["promptChange", "submitPrompt", "apply", "retryTurn", "cancelTurn", "shellAction", "close", "attach", "attachmentsPasted", "attachmentsSelected", "removeAttachment", "messageAction", "editMessage", "resendMessage", "quickReply", "recommendedIntent", "layoutChange"] }, { kind: "component", type: PraxisRichContent, selector: "praxis-rich-content", inputs: ["document", "nodes", "context", "hostCapabilities", "layout", "rootClassName"], outputs: ["nodeAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisStepper, decorators: [{
             type: Component,
@@ -1939,11 +2019,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                   icon="dashboard_customize"
                   title="Sem conteúdo nesta etapa"
                   description="Adicione um formulário ou widgets a esta etapa, ou abra o editor para configurar."
-                  [primaryAction]="{
-                    label: 'Abrir editor',
-                    icon: 'tune',
-                    action: openEditor.bind(this),
-                  }"
+                  [primaryAction]="
+                    enableCustomization
+                      ? {
+                          label: 'Abrir editor',
+                          icon: 'tune',
+                          action: openEditor.bind(this),
+                        }
+                      : undefined
+                  "
                 ></praxis-empty-state-card>
               }
             </div>
@@ -2076,8 +2160,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         [inline]="true"
         title="Stepper sem etapas"
         description="Adicione etapas para começar. Você pode configurar formulários ou widgets em cada etapa."
-        [primaryAction]="primaryCta"
-        [secondaryActions]="secondaryCtas"
+        [primaryAction]="enableCustomization ? primaryCta : undefined"
+        [secondaryActions]="enableCustomization ? secondaryCtas : []"
       ></praxis-empty-state-card>
     }
     @if (enableCustomization) {
@@ -3542,14 +3626,15 @@ class PraxisStepperConfigEditor {
         this.onAppearanceChange();
     }
     get headerLabelTextWeight() {
-        return this.appearance.tokens['header-label-text-weight'];
+        const raw = this.appearance.tokens['header-label-text-weight'];
+        return raw != null && String(raw).trim() !== '' ? String(raw).trim() : undefined;
     }
     setHeaderLabelTextWeight(v) {
         if (!v) {
             delete this.appearance.tokens['header-label-text-weight'];
         }
         else {
-            this.appearance.tokens['header-label-text-weight'] = v;
+            this.appearance.tokens['header-label-text-weight'] = String(v);
         }
         this.onAppearanceChange();
     }
@@ -4057,32 +4142,32 @@ class PraxisStepperConfigEditor {
               <div class="pdx-grid">
                 <mat-form-field appearance="outline">
                   <mat-label>{{ tx('editor.general.orientation', 'Orientation') }}</mat-label>
-                  <select matNativeControl [(ngModel)]="config.orientation" (ngModelChange)="markDirty()">
-                    <option value="horizontal">{{ tx('editor.general.orientation.horizontal', 'Horizontal') }}</option>
-                    <option value="vertical">{{ tx('editor.general.orientation.vertical', 'Vertical') }}</option>
-                  </select>
+                  <mat-select [(ngModel)]="config.orientation" (ngModelChange)="markDirty()">
+                    <mat-option value="horizontal">{{ tx('editor.general.orientation.horizontal', 'Horizontal') }}</mat-option>
+                    <mat-option value="vertical">{{ tx('editor.general.orientation.vertical', 'Vertical') }}</mat-option>
+                  </mat-select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
                   <mat-label>{{ tx('editor.general.headerPosition', 'Title position') }}</mat-label>
-                  <select matNativeControl [(ngModel)]="config.headerPosition" (ngModelChange)="markDirty()">
-                    <option value="top">{{ tx('editor.general.headerPosition.top', 'Above') }}</option>
-                    <option value="bottom">{{ tx('editor.general.headerPosition.bottom', 'Below') }}</option>
-                  </select>
+                  <mat-select [(ngModel)]="config.headerPosition" (ngModelChange)="markDirty()">
+                    <mat-option value="top">{{ tx('editor.general.headerPosition.top', 'Above') }}</mat-option>
+                    <mat-option value="bottom">{{ tx('editor.general.headerPosition.bottom', 'Below') }}</mat-option>
+                  </mat-select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
                   <mat-label>{{ tx('editor.general.labelPosition', 'Label position') }}</mat-label>
-                  <select matNativeControl [(ngModel)]="config.labelPosition" (ngModelChange)="markDirty()" [disabled]="config.orientation !== 'horizontal'">
-                    <option value="end">{{ tx('editor.general.labelPosition.end', 'Beside') }}</option>
-                    <option value="bottom">{{ tx('editor.general.labelPosition.bottom', 'Below') }}</option>
-                  </select>
+                  <mat-select [(ngModel)]="config.labelPosition" (ngModelChange)="markDirty()" [disabled]="config.orientation !== 'horizontal'">
+                    <mat-option value="end">{{ tx('editor.general.labelPosition.end', 'Beside') }}</mat-option>
+                    <mat-option value="bottom">{{ tx('editor.general.labelPosition.bottom', 'Below') }}</mat-option>
+                  </mat-select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
                   <mat-label>{{ tx('editor.general.density', 'Density') }}</mat-label>
-                  <select matNativeControl [(ngModel)]="config.density" (ngModelChange)="markDirty()">
-                    <option [ngValue]="undefined">{{ tx('editor.general.density.default', 'Default') }}</option>
-                    <option value="comfortable">{{ tx('editor.general.density.comfortable', 'Comfortable') }}</option>
-                    <option value="compact">{{ tx('editor.general.density.compact', 'Compact') }}</option>
-                  </select>
+                  <mat-select [(ngModel)]="config.density" (ngModelChange)="markDirty()" [placeholder]="tx('editor.general.density.default', 'Default')">
+                    <mat-option [value]="undefined">{{ tx('editor.general.density.default', 'Default') }}</mat-option>
+                    <mat-option value="comfortable">{{ tx('editor.general.density.comfortable', 'Comfortable') }}</mat-option>
+                    <mat-option value="compact">{{ tx('editor.general.density.compact', 'Compact') }}</mat-option>
+                  </mat-select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
                   <mat-label>{{ tx('editor.general.animationDuration', 'Animation duration') }}</mat-label>
@@ -4476,32 +4561,32 @@ class PraxisStepperConfigEditor {
               <div class="pdx-grid">
                 <mat-form-field appearance="outline">
                   <mat-label>{{ tx('editor.navigation.variant', 'Button style') }}</mat-label>
-                  <select matNativeControl [(ngModel)]="navigationCfg.variant" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible">
-                    <option [ngValue]="undefined">{{ tx('editor.navigation.variant.default', 'Default (raised)') }}</option>
-                    <option value="basic">{{ tx('editor.navigation.variant.basic', 'Text') }}</option>
-                    <option value="flat">{{ tx('editor.navigation.variant.flat', 'Flat') }}</option>
-                    <option value="stroked">{{ tx('editor.navigation.variant.stroked', 'Stroked') }}</option>
-                    <option value="raised">{{ tx('editor.navigation.variant.raised', 'Raised') }}</option>
-                  </select>
+                  <mat-select [(ngModel)]="navigationCfg.variant" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible" [placeholder]="tx('editor.navigation.variant.default', 'Default (raised)')">
+                    <mat-option [value]="undefined">{{ tx('editor.navigation.variant.default', 'Default (raised)') }}</mat-option>
+                    <mat-option value="basic">{{ tx('editor.navigation.variant.basic', 'Text') }}</mat-option>
+                    <mat-option value="flat">{{ tx('editor.navigation.variant.flat', 'Flat') }}</mat-option>
+                    <mat-option value="stroked">{{ tx('editor.navigation.variant.stroked', 'Stroked') }}</mat-option>
+                    <mat-option value="raised">{{ tx('editor.navigation.variant.raised', 'Raised') }}</mat-option>
+                  </mat-select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
                   <mat-label>{{ tx('editor.navigation.color', 'Color') }}</mat-label>
-                  <select matNativeControl [(ngModel)]="navigationCfg.color" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible">
-                    <option [ngValue]="undefined">{{ tx('editor.navigation.color.default', 'Default') }}</option>
-                    <option value="primary">{{ tx('editor.navigation.color.primary', 'Primary') }}</option>
-                    <option value="accent">{{ tx('editor.navigation.color.accent', 'Accent') }}</option>
-                    <option value="warn">{{ tx('editor.navigation.color.warn', 'Warn') }}</option>
-                  </select>
+                  <mat-select [(ngModel)]="navigationCfg.color" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible" [placeholder]="tx('editor.navigation.color.default', 'Default')">
+                    <mat-option [value]="undefined">{{ tx('editor.navigation.color.default', 'Default') }}</mat-option>
+                    <mat-option value="primary">{{ tx('editor.navigation.color.primary', 'Primary') }}</mat-option>
+                    <mat-option value="accent">{{ tx('editor.navigation.color.accent', 'Accent') }}</mat-option>
+                    <mat-option value="warn">{{ tx('editor.navigation.color.warn', 'Warn') }}</mat-option>
+                  </mat-select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
                   <mat-label>{{ tx('editor.navigation.align', 'Alignment') }}</mat-label>
-                  <select matNativeControl [(ngModel)]="navigationCfg.align" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible">
-                    <option [ngValue]="undefined">{{ tx('editor.navigation.align.default', 'Right') }}</option>
-                    <option value="start">{{ tx('editor.navigation.align.start', 'Left') }}</option>
-                    <option value="center">{{ tx('editor.navigation.align.center', 'Center') }}</option>
-                    <option value="space-between">{{ tx('editor.navigation.align.spaceBetween', 'Spaced') }}</option>
-                    <option value="end">{{ tx('editor.navigation.align.end', 'Right') }}</option>
-                  </select>
+                  <mat-select [(ngModel)]="navigationCfg.align" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible" [placeholder]="tx('editor.navigation.align.default', 'Right')">
+                    <mat-option [value]="undefined">{{ tx('editor.navigation.align.default', 'Right') }}</mat-option>
+                    <mat-option value="start">{{ tx('editor.navigation.align.start', 'Left') }}</mat-option>
+                    <mat-option value="center">{{ tx('editor.navigation.align.center', 'Center') }}</mat-option>
+                    <mat-option value="space-between">{{ tx('editor.navigation.align.spaceBetween', 'Spaced') }}</mat-option>
+                    <mat-option value="end">{{ tx('editor.navigation.align.end', 'Right') }}</mat-option>
+                  </mat-select>
                 </mat-form-field>
               </div>
             </div>
@@ -4573,13 +4658,13 @@ class PraxisStepperConfigEditor {
                 </mat-form-field>
                 <mat-form-field appearance="outline">
                   <mat-label>{{ tx('editor.appearance.textWeight', 'Text weight') }}</mat-label>
-                  <select matNativeControl [ngModel]="headerLabelTextWeight" (ngModelChange)="setHeaderLabelTextWeight($event)">
-                    <option [ngValue]="undefined">{{ tx('editor.appearance.textWeight.default', 'Default') }}</option>
-                    <option value="400">{{ tx('editor.appearance.textWeight.400', 'Normal') }}</option>
-                    <option value="500">{{ tx('editor.appearance.textWeight.500', 'Medium') }}</option>
-                    <option value="600">{{ tx('editor.appearance.textWeight.600', 'Semibold') }}</option>
-                    <option value="700">{{ tx('editor.appearance.textWeight.700', 'Bold') }}</option>
-                  </select>
+                  <mat-select [ngModel]="headerLabelTextWeight" (ngModelChange)="setHeaderLabelTextWeight($event)" [placeholder]="tx('editor.appearance.textWeight.default', 'Default')">
+                    <mat-option [value]="undefined">{{ tx('editor.appearance.textWeight.default', 'Default') }}</mat-option>
+                    <mat-option value="400">{{ tx('editor.appearance.textWeight.400', 'Normal') }}</mat-option>
+                    <mat-option value="500">{{ tx('editor.appearance.textWeight.500', 'Medium') }}</mat-option>
+                    <mat-option value="600">{{ tx('editor.appearance.textWeight.600', 'Semibold') }}</mat-option>
+                    <mat-option value="700">{{ tx('editor.appearance.textWeight.700', 'Bold') }}</mat-option>
+                  </mat-select>
                 </mat-form-field>
                 <mat-form-field appearance="outline" class="field-span-2">
                   <mat-label>{{ tx('editor.appearance.themeClass', 'Theme class') }}</mat-label>
@@ -4587,12 +4672,12 @@ class PraxisStepperConfigEditor {
                 </mat-form-field>
                 <mat-form-field appearance="outline">
                   <mat-label>{{ tx('editor.appearance.iconSet', 'Icon set') }}</mat-label>
-                  <select matNativeControl [(ngModel)]="appearance.iconsSet" (ngModelChange)="onAppearanceChange()">
-                    <option [ngValue]="undefined">{{ tx('editor.appearance.iconSet.default', 'Material Icons (default)') }}</option>
-                    <option value="material-symbols-outlined">Material Symbols (Outlined)</option>
-                    <option value="material-symbols-rounded">Material Symbols (Rounded)</option>
-                    <option value="material-symbols-sharp">Material Symbols (Sharp)</option>
-                  </select>
+                  <mat-select [(ngModel)]="appearance.iconsSet" (ngModelChange)="onAppearanceChange()" [placeholder]="tx('editor.appearance.iconSet.default', 'Material Icons (default)')">
+                    <mat-option [value]="undefined">{{ tx('editor.appearance.iconSet.default', 'Material Icons (default)') }}</mat-option>
+                    <mat-option value="material-symbols-outlined">Material Symbols (Outlined)</mat-option>
+                    <mat-option value="material-symbols-rounded">Material Symbols (Rounded)</mat-option>
+                    <mat-option value="material-symbols-sharp">Material Symbols (Sharp)</mat-option>
+                  </mat-select>
                 </mat-form-field>
               </div>
               <div class="inline-actions-grid icon-picker-grid">
@@ -4678,7 +4763,7 @@ class PraxisStepperConfigEditor {
         </mat-tab>
       </mat-tab-group>
     </div>
-    `, isInline: true, styles: [".pdx-editor{display:grid;gap:16px}.pdx-editor .mat-mdc-form-field{width:100%}.pdx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.pdx-toggles{display:flex;gap:12px;flex-wrap:wrap}.tab-pad{padding:16px;display:grid;gap:16px;background:var(--md-sys-color-surface);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 78%,transparent);border-radius:16px}.help{color:var(--md-sys-color-on-surface-variant);font-size:13px}.editor-intro{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:4px 2px 2px}.editor-intro-copy{display:grid;gap:6px;max-width:760px}.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant);font-weight:600}.editor-title{font-size:22px;line-height:1.15;font-weight:650;color:var(--md-sys-color-on-surface)}.editor-subtitle{max-width:72ch;color:var(--md-sys-color-on-surface-variant);line-height:1.45;font-size:14px}.editor-intro-meta{display:flex;gap:8px;align-items:flex-start}.meta-pill{display:grid;gap:2px;min-width:88px;padding:10px 12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent);background:var(--md-sys-color-surface-container-low)}.meta-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--md-sys-color-on-surface-variant)}.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:6px}.icons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:8px 0}.icon-item{display:grid;gap:6px;align-content:start}.icons-hint{margin-top:4px}.settings-group{display:grid;gap:14px;padding:2px 0 4px}.settings-group+.settings-group,.settings-group+.disclosure,.disclosure+.settings-group{padding-top:18px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 60%,transparent)}.group-head{display:grid;gap:4px;max-width:72ch}.inline-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:start}.inline-action-item{display:grid;gap:8px;align-content:start;min-width:0}.pdx-steps{display:grid;gap:12px;padding:4px 0 2px}.steps-workspace{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:24px;align-items:start}.pdx-steps-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.pdx-step-list{display:grid;gap:10px}.pdx-step-item{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:start;padding:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 68%,transparent);border-radius:14px;background:var(--md-sys-color-surface);cursor:pointer;outline:none}.pdx-step-item.active{border-color:color-mix(in srgb,var(--md-sys-color-primary) 55%,var(--md-sys-color-outline-variant));background:color-mix(in srgb,var(--md-sys-color-primary-container) 26%,var(--md-sys-color-surface));box-shadow:none}.pdx-step-item:focus-visible{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--md-sys-color-primary) 22%,transparent)}.drag-handle{display:flex;align-items:center;color:var(--md-sys-color-on-surface-variant)}.step-summary{display:grid;gap:8px;min-width:0}.step-summary-head{display:grid;gap:2px}.step-summary-index{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--md-sys-color-on-surface-variant);font-weight:600}.step-summary-title{font-size:15px;line-height:1.3;font-weight:600;color:var(--md-sys-color-on-surface)}.step-summary-sub{font-size:12px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-summary-flags{display:flex;gap:6px;flex-wrap:wrap}.summary-chip{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:600}.summary-chip-warn{background:color-mix(in srgb,var(--md-sys-color-error-container) 60%,transparent);color:var(--md-sys-color-on-error-container)}.pdx-active-step{display:grid;gap:18px;min-width:0}.pdx-active-step .hdr{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}.active-step-head{display:grid;gap:4px}.pdx-content-editor{display:grid;gap:16px}.section{display:grid;gap:12px;padding:0;border:none;border-radius:0;background:transparent}.section-body{display:grid;gap:12px}.section-title{font-weight:600;font-size:15px;color:var(--md-sys-color-on-surface)}.section-subtitle{font-size:13px;color:var(--md-sys-color-on-surface-variant);line-height:1.45}.section-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.editorial-section{padding-bottom:6px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 68%,transparent)}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field-span-2{grid-column:span 2}.toggle-group{display:flex;gap:10px;flex-wrap:wrap;padding-top:4px}.disclosure{padding:0 0 12px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 62%,transparent)}.disclosure summary{list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px;cursor:pointer;padding:0;position:relative}.disclosure summary::-webkit-details-marker{display:none}.disclosure summary:after{content:\"expand_more\";font-family:Material Icons;font-size:18px;color:var(--md-sys-color-on-surface-variant);transition:transform .16s ease}.disclosure[open] summary:after{transform:rotate(180deg)}.disclosure summary:focus-visible{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 58%,transparent);outline-offset:4px;border-radius:8px}.disclosure-body{padding-top:12px}.widget-list{display:grid;gap:8px}.widget-item{display:grid;grid-template-columns:20px 1fr auto;align-items:start;gap:12px;padding:10px 0;border:none;border-radius:0;background:transparent;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.widget-item .info{display:grid;gap:2px;min-width:0}.widget-item .info .name{font-weight:600}.widget-item .info .sub{font-size:12px;color:var(--md-sys-color-on-surface-variant);line-height:1.45}.widget-item .info .meta{margin-top:2px;font-size:11px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);opacity:.85}.widget-item .actions{display:flex;gap:2px;flex-wrap:nowrap;justify-content:flex-end;align-items:flex-start;opacity:.92}.editorial-item{align-items:start}.editorial-item .actions{justify-content:flex-end}.cta-row{display:flex;gap:8px;align-items:center}.spacer{flex:1 1 auto}.muted{color:var(--md-sys-color-on-surface-variant)}.cta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-bottom:4px}.cta-row-item{display:grid;gap:10px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.tokens-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:8px 0}.token-item{display:contents}.pdx-appearance{margin-top:8px;display:grid;gap:8px}.pdx-appearance-actions{display:flex;gap:8px;flex-wrap:wrap}.zone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.zone-column{display:grid;gap:10px;min-width:0}.zone-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.zone-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.zone-title{font-weight:600}.zone-column+.zone-column{padding-left:16px;border-left:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.zone-count{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}.advanced-list{margin-top:4px}.form-row-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.form-row-main{display:flex;align-items:center;gap:12px;min-width:0}.form-row-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.code-card{margin-top:8px}.code-head{font-weight:600;margin-bottom:4px}.code{white-space:pre;overflow:auto;background:var(--md-sys-color-surface-container-highest)}.w-full{grid-column:1 / -1}.min-180{min-width:180px}.editor-icon-action{color:var(--md-sys-color-on-surface-variant)}.editor-icon-action--danger{color:var(--md-sys-color-error)}.mat-mdc-form-field-icon-suffix{align-self:center}.cta-row-item .cta-head{display:grid;grid-template-columns:20px 1fr;align-items:start;gap:10px}.cta-row-item .cta-title{font-weight:600;color:var(--md-sys-color-on-surface)}.cta-row-item .cta-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant);line-height:1.45;margin-top:2px}.cta-row-item .cta-actions{display:flex;gap:8px;align-items:center}.widget-item:last-child,.cta-row-item:last-child,.form-row-card:last-child{border-bottom:none}@media(max-width:900px){.editor-intro{flex-direction:column}.steps-workspace{grid-template-columns:1fr;gap:20px}.pdx-step-item{grid-template-columns:20px 1fr}.pdx-actions{grid-column:1 / -1;justify-self:end}.widget-item{grid-template-columns:20px 1fr}.widget-item .actions{grid-column:1 / -1;justify-content:flex-end}.form-row-card{flex-direction:column;align-items:flex-start}.form-row-actions{justify-content:flex-start}.zone-column+.zone-column{padding-left:0;border-left:none;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}}@media(max-width:640px){.tab-pad{padding:14px}.editor-title{font-size:20px}.pdx-active-step .hdr{align-items:flex-start;flex-direction:column}.detail-grid{grid-template-columns:1fr}.field-span-2{grid-column:auto}.toggle-group{flex-direction:column;align-items:flex-start}.zone-head{align-items:flex-start;flex-direction:column}.zone-actions,.widget-item .actions{justify-content:flex-start}.disclosure summary{flex-direction:column;align-items:flex-start}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i6.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i7.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i7.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i7.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }] });
+    `, isInline: true, styles: [":host{display:block;container-type:inline-size;color:var(--pfx-settings-panel-text-primary, var(--md-sys-color-on-surface))}.pdx-editor{display:grid;gap:16px}.pdx-editor .mat-mdc-form-field{width:100%}.pdx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.pdx-toggles{display:flex;gap:12px;flex-wrap:wrap}.tab-pad{padding:16px;display:grid;gap:16px;background:var(--pfx-settings-panel-surface, var(--md-sys-color-surface));border:1px solid color-mix(in srgb,var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant)) 78%,transparent);border-radius:16px}.help{color:var(--md-sys-color-on-surface-variant);font-size:13px}.editor-intro{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:4px 2px 2px}.editor-intro-copy{display:grid;gap:6px;max-width:760px}.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant);font-weight:600}.editor-title{font-size:22px;line-height:1.15;font-weight:650;color:var(--md-sys-color-on-surface)}.editor-subtitle{max-width:72ch;color:var(--md-sys-color-on-surface-variant);line-height:1.45;font-size:14px}.editor-intro-meta{display:flex;gap:8px;align-items:flex-start}.meta-pill{display:grid;gap:2px;min-width:88px;padding:10px 12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent);background:var(--md-sys-color-surface-container-low)}.meta-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--md-sys-color-on-surface-variant)}.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:6px}.icons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:8px 0}.icon-item{display:grid;gap:6px;align-content:start}.icons-hint{margin-top:4px}.settings-group{display:grid;gap:14px;padding:2px 0 4px}.settings-group+.settings-group,.settings-group+.disclosure,.disclosure+.settings-group{padding-top:18px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 60%,transparent)}.group-head{display:grid;gap:4px;max-width:72ch}.inline-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:start}.inline-action-item{display:grid;gap:8px;align-content:start;min-width:0}.pdx-steps{display:grid;gap:12px;padding:4px 0 2px}.steps-workspace{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:24px;align-items:start}.pdx-steps-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.pdx-step-list{display:grid;gap:10px}.pdx-step-item{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:start;padding:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 68%,transparent);border-radius:14px;background:var(--md-sys-color-surface);cursor:pointer;outline:none}.pdx-step-item.active{border-color:color-mix(in srgb,var(--md-sys-color-primary) 55%,var(--md-sys-color-outline-variant));background:color-mix(in srgb,var(--md-sys-color-primary-container) 26%,var(--md-sys-color-surface));box-shadow:none}.pdx-step-item:focus-visible{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--md-sys-color-primary) 22%,transparent)}.drag-handle{display:flex;align-items:center;color:var(--md-sys-color-on-surface-variant)}.step-summary{display:grid;gap:8px;min-width:0}.step-summary-head{display:grid;gap:2px}.step-summary-index{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--md-sys-color-on-surface-variant);font-weight:600}.step-summary-title{font-size:15px;line-height:1.3;font-weight:600;color:var(--md-sys-color-on-surface)}.step-summary-sub{font-size:12px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-summary-flags{display:flex;gap:6px;flex-wrap:wrap}.summary-chip{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:600}.summary-chip-warn{background:color-mix(in srgb,var(--md-sys-color-error-container) 60%,transparent);color:var(--md-sys-color-on-error-container)}.pdx-active-step{display:grid;gap:18px;min-width:0}.pdx-active-step .hdr{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}.active-step-head{display:grid;gap:4px}.pdx-content-editor{display:grid;gap:16px}.section{display:grid;gap:12px;padding:0;border:none;border-radius:0;background:transparent}.section-body{display:grid;gap:12px}.section-title{font-weight:600;font-size:15px;color:var(--md-sys-color-on-surface)}.section-subtitle{font-size:13px;color:var(--md-sys-color-on-surface-variant);line-height:1.45}.section-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.editorial-section{padding-bottom:6px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 68%,transparent)}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field-span-2{grid-column:span 2}.toggle-group{display:flex;gap:10px;flex-wrap:wrap;padding-top:4px}.disclosure{padding:0 0 12px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 62%,transparent)}.disclosure summary{list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px;cursor:pointer;padding:0;position:relative}.disclosure summary::-webkit-details-marker{display:none}.disclosure summary:after{content:\"expand_more\";font-family:Material Icons;font-size:18px;color:var(--md-sys-color-on-surface-variant);transition:transform .16s ease}.disclosure[open] summary:after{transform:rotate(180deg)}.disclosure summary:focus-visible{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 58%,transparent);outline-offset:4px;border-radius:8px}.disclosure-body{padding-top:12px}.widget-list{display:grid;gap:8px}.widget-item{display:grid;grid-template-columns:20px 1fr auto;align-items:start;gap:12px;padding:10px 0;border:none;border-radius:0;background:transparent;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.widget-item .info{display:grid;gap:2px;min-width:0}.widget-item .info .name{font-weight:600}.widget-item .info .sub{font-size:12px;color:var(--md-sys-color-on-surface-variant);line-height:1.45}.widget-item .info .meta{margin-top:2px;font-size:11px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);opacity:.85}.widget-item .actions{display:flex;gap:2px;flex-wrap:nowrap;justify-content:flex-end;align-items:flex-start;opacity:.92}.editorial-item{align-items:start}.editorial-item .actions{justify-content:flex-end}.cta-row{display:flex;gap:8px;align-items:center}.spacer{flex:1 1 auto}.muted{color:var(--md-sys-color-on-surface-variant)}.cta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-bottom:4px}.cta-row-item{display:grid;gap:10px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.tokens-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:8px 0}.token-item{display:contents}.pdx-appearance{margin-top:8px;display:grid;gap:8px}.pdx-appearance-actions{display:flex;gap:8px;flex-wrap:wrap}.zone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.zone-column{display:grid;gap:10px;min-width:0}.zone-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.zone-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.zone-title{font-weight:600}.zone-column+.zone-column{padding-left:16px;border-left:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.zone-count{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}.advanced-list{margin-top:4px}.form-row-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.form-row-main{display:flex;align-items:center;gap:12px;min-width:0}.form-row-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.code-card{margin-top:8px}.code-head{font-weight:600;margin-bottom:4px}.code{white-space:pre;overflow:auto;background:var(--md-sys-color-surface-container-highest)}.w-full{grid-column:1 / -1}.min-180{min-width:180px}.editor-icon-action{color:var(--md-sys-color-on-surface-variant)}.editor-icon-action--danger{color:var(--md-sys-color-error)}.mat-mdc-form-field-icon-suffix{align-self:center}.cta-row-item .cta-head{display:grid;grid-template-columns:20px 1fr;align-items:start;gap:10px}.cta-row-item .cta-title{font-weight:600;color:var(--md-sys-color-on-surface)}.cta-row-item .cta-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant);line-height:1.45;margin-top:2px}.cta-row-item .cta-actions{display:flex;gap:8px;align-items:center}.widget-item:last-child,.cta-row-item:last-child,.form-row-card:last-child{border-bottom:none}@container (max-width: 900px){.editor-intro{flex-direction:column}.steps-workspace{grid-template-columns:1fr;gap:20px}.pdx-step-item{grid-template-columns:20px 1fr}.pdx-actions{grid-column:1 / -1;justify-self:end}.widget-item{grid-template-columns:20px 1fr}.widget-item .actions{grid-column:1 / -1;justify-content:flex-end}.form-row-card{flex-direction:column;align-items:flex-start}.form-row-actions{justify-content:flex-start}.zone-column+.zone-column{padding-left:0;border-left:none;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}}@container (max-width: 640px){.tab-pad{padding:14px}.editor-title{font-size:20px}.pdx-active-step .hdr{align-items:flex-start;flex-direction:column}.detail-grid{grid-template-columns:1fr}.field-span-2{grid-column:auto}.toggle-group{flex-direction:column;align-items:flex-start}.zone-head{align-items:flex-start;flex-direction:column}.zone-actions,.widget-item .actions{justify-content:flex-start}.disclosure summary{flex-direction:column;align-items:flex-start}}@media(max-width:900px){.editor-intro{flex-direction:column}.steps-workspace{grid-template-columns:1fr;gap:20px}.pdx-step-item{grid-template-columns:20px 1fr}.pdx-actions{grid-column:1 / -1;justify-self:end}.widget-item{grid-template-columns:20px 1fr}.widget-item .actions{grid-column:1 / -1;justify-content:flex-end}.form-row-card{flex-direction:column;align-items:flex-start}.form-row-actions{justify-content:flex-start}.zone-column+.zone-column{padding-left:0;border-left:none;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}}@media(max-width:640px){.tab-pad{padding:14px}.editor-title{font-size:20px}.pdx-active-step .hdr{align-items:flex-start;flex-direction:column}.detail-grid{grid-template-columns:1fr}.field-span-2{grid-column:auto}.toggle-group{flex-direction:column;align-items:flex-start}.zone-head{align-items:flex-start;flex-direction:column}.zone-actions,.widget-item .actions{justify-content:flex-start}.disclosure summary{flex-direction:column;align-items:flex-start}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i8.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i10.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i10.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisStepperConfigEditor, decorators: [{
             type: Component,
@@ -4686,6 +4771,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         FormsModule,
                         MatFormFieldModule,
                         MatInputModule,
+                        MatSelectModule,
                         MatIconModule,
                         PraxisIconButtonComponent,
                         PraxisIconDirective,
@@ -4715,32 +4801,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               <div class="pdx-grid">
                 <mat-form-field appearance="outline">
                   <mat-label>{{ tx('editor.general.orientation', 'Orientation') }}</mat-label>
-                  <select matNativeControl [(ngModel)]="config.orientation" (ngModelChange)="markDirty()">
-                    <option value="horizontal">{{ tx('editor.general.orientation.horizontal', 'Horizontal') }}</option>
-                    <option value="vertical">{{ tx('editor.general.orientation.vertical', 'Vertical') }}</option>
-                  </select>
+                  <mat-select [(ngModel)]="config.orientation" (ngModelChange)="markDirty()">
+                    <mat-option value="horizontal">{{ tx('editor.general.orientation.horizontal', 'Horizontal') }}</mat-option>
+                    <mat-option value="vertical">{{ tx('editor.general.orientation.vertical', 'Vertical') }}</mat-option>
+                  </mat-select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
                   <mat-label>{{ tx('editor.general.headerPosition', 'Title position') }}</mat-label>
-                  <select matNativeControl [(ngModel)]="config.headerPosition" (ngModelChange)="markDirty()">
-                    <option value="top">{{ tx('editor.general.headerPosition.top', 'Above') }}</option>
-                    <option value="bottom">{{ tx('editor.general.headerPosition.bottom', 'Below') }}</option>
-                  </select>
+                  <mat-select [(ngModel)]="config.headerPosition" (ngModelChange)="markDirty()">
+                    <mat-option value="top">{{ tx('editor.general.headerPosition.top', 'Above') }}</mat-option>
+                    <mat-option value="bottom">{{ tx('editor.general.headerPosition.bottom', 'Below') }}</mat-option>
+                  </mat-select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
                   <mat-label>{{ tx('editor.general.labelPosition', 'Label position') }}</mat-label>
-                  <select matNativeControl [(ngModel)]="config.labelPosition" (ngModelChange)="markDirty()" [disabled]="config.orientation !== 'horizontal'">
-                    <option value="end">{{ tx('editor.general.labelPosition.end', 'Beside') }}</option>
-                    <option value="bottom">{{ tx('editor.general.labelPosition.bottom', 'Below') }}</option>
-                  </select>
+                  <mat-select [(ngModel)]="config.labelPosition" (ngModelChange)="markDirty()" [disabled]="config.orientation !== 'horizontal'">
+                    <mat-option value="end">{{ tx('editor.general.labelPosition.end', 'Beside') }}</mat-option>
+                    <mat-option value="bottom">{{ tx('editor.general.labelPosition.bottom', 'Below') }}</mat-option>
+                  </mat-select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
                   <mat-label>{{ tx('editor.general.density', 'Density') }}</mat-label>
-                  <select matNativeControl [(ngModel)]="config.density" (ngModelChange)="markDirty()">
-                    <option [ngValue]="undefined">{{ tx('editor.general.density.default', 'Default') }}</option>
-                    <option value="comfortable">{{ tx('editor.general.density.comfortable', 'Comfortable') }}</option>
-                    <option value="compact">{{ tx('editor.general.density.compact', 'Compact') }}</option>
-                  </select>
+                  <mat-select [(ngModel)]="config.density" (ngModelChange)="markDirty()" [placeholder]="tx('editor.general.density.default', 'Default')">
+                    <mat-option [value]="undefined">{{ tx('editor.general.density.default', 'Default') }}</mat-option>
+                    <mat-option value="comfortable">{{ tx('editor.general.density.comfortable', 'Comfortable') }}</mat-option>
+                    <mat-option value="compact">{{ tx('editor.general.density.compact', 'Compact') }}</mat-option>
+                  </mat-select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
                   <mat-label>{{ tx('editor.general.animationDuration', 'Animation duration') }}</mat-label>
@@ -5134,32 +5220,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               <div class="pdx-grid">
                 <mat-form-field appearance="outline">
                   <mat-label>{{ tx('editor.navigation.variant', 'Button style') }}</mat-label>
-                  <select matNativeControl [(ngModel)]="navigationCfg.variant" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible">
-                    <option [ngValue]="undefined">{{ tx('editor.navigation.variant.default', 'Default (raised)') }}</option>
-                    <option value="basic">{{ tx('editor.navigation.variant.basic', 'Text') }}</option>
-                    <option value="flat">{{ tx('editor.navigation.variant.flat', 'Flat') }}</option>
-                    <option value="stroked">{{ tx('editor.navigation.variant.stroked', 'Stroked') }}</option>
-                    <option value="raised">{{ tx('editor.navigation.variant.raised', 'Raised') }}</option>
-                  </select>
+                  <mat-select [(ngModel)]="navigationCfg.variant" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible" [placeholder]="tx('editor.navigation.variant.default', 'Default (raised)')">
+                    <mat-option [value]="undefined">{{ tx('editor.navigation.variant.default', 'Default (raised)') }}</mat-option>
+                    <mat-option value="basic">{{ tx('editor.navigation.variant.basic', 'Text') }}</mat-option>
+                    <mat-option value="flat">{{ tx('editor.navigation.variant.flat', 'Flat') }}</mat-option>
+                    <mat-option value="stroked">{{ tx('editor.navigation.variant.stroked', 'Stroked') }}</mat-option>
+                    <mat-option value="raised">{{ tx('editor.navigation.variant.raised', 'Raised') }}</mat-option>
+                  </mat-select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
                   <mat-label>{{ tx('editor.navigation.color', 'Color') }}</mat-label>
-                  <select matNativeControl [(ngModel)]="navigationCfg.color" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible">
-                    <option [ngValue]="undefined">{{ tx('editor.navigation.color.default', 'Default') }}</option>
-                    <option value="primary">{{ tx('editor.navigation.color.primary', 'Primary') }}</option>
-                    <option value="accent">{{ tx('editor.navigation.color.accent', 'Accent') }}</option>
-                    <option value="warn">{{ tx('editor.navigation.color.warn', 'Warn') }}</option>
-                  </select>
+                  <mat-select [(ngModel)]="navigationCfg.color" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible" [placeholder]="tx('editor.navigation.color.default', 'Default')">
+                    <mat-option [value]="undefined">{{ tx('editor.navigation.color.default', 'Default') }}</mat-option>
+                    <mat-option value="primary">{{ tx('editor.navigation.color.primary', 'Primary') }}</mat-option>
+                    <mat-option value="accent">{{ tx('editor.navigation.color.accent', 'Accent') }}</mat-option>
+                    <mat-option value="warn">{{ tx('editor.navigation.color.warn', 'Warn') }}</mat-option>
+                  </mat-select>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
                   <mat-label>{{ tx('editor.navigation.align', 'Alignment') }}</mat-label>
-                  <select matNativeControl [(ngModel)]="navigationCfg.align" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible">
-                    <option [ngValue]="undefined">{{ tx('editor.navigation.align.default', 'Right') }}</option>
-                    <option value="start">{{ tx('editor.navigation.align.start', 'Left') }}</option>
-                    <option value="center">{{ tx('editor.navigation.align.center', 'Center') }}</option>
-                    <option value="space-between">{{ tx('editor.navigation.align.spaceBetween', 'Spaced') }}</option>
-                    <option value="end">{{ tx('editor.navigation.align.end', 'Right') }}</option>
-                  </select>
+                  <mat-select [(ngModel)]="navigationCfg.align" (ngModelChange)="markDirty()" [disabled]="!navigationCfg.visible" [placeholder]="tx('editor.navigation.align.default', 'Right')">
+                    <mat-option [value]="undefined">{{ tx('editor.navigation.align.default', 'Right') }}</mat-option>
+                    <mat-option value="start">{{ tx('editor.navigation.align.start', 'Left') }}</mat-option>
+                    <mat-option value="center">{{ tx('editor.navigation.align.center', 'Center') }}</mat-option>
+                    <mat-option value="space-between">{{ tx('editor.navigation.align.spaceBetween', 'Spaced') }}</mat-option>
+                    <mat-option value="end">{{ tx('editor.navigation.align.end', 'Right') }}</mat-option>
+                  </mat-select>
                 </mat-form-field>
               </div>
             </div>
@@ -5231,13 +5317,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 </mat-form-field>
                 <mat-form-field appearance="outline">
                   <mat-label>{{ tx('editor.appearance.textWeight', 'Text weight') }}</mat-label>
-                  <select matNativeControl [ngModel]="headerLabelTextWeight" (ngModelChange)="setHeaderLabelTextWeight($event)">
-                    <option [ngValue]="undefined">{{ tx('editor.appearance.textWeight.default', 'Default') }}</option>
-                    <option value="400">{{ tx('editor.appearance.textWeight.400', 'Normal') }}</option>
-                    <option value="500">{{ tx('editor.appearance.textWeight.500', 'Medium') }}</option>
-                    <option value="600">{{ tx('editor.appearance.textWeight.600', 'Semibold') }}</option>
-                    <option value="700">{{ tx('editor.appearance.textWeight.700', 'Bold') }}</option>
-                  </select>
+                  <mat-select [ngModel]="headerLabelTextWeight" (ngModelChange)="setHeaderLabelTextWeight($event)" [placeholder]="tx('editor.appearance.textWeight.default', 'Default')">
+                    <mat-option [value]="undefined">{{ tx('editor.appearance.textWeight.default', 'Default') }}</mat-option>
+                    <mat-option value="400">{{ tx('editor.appearance.textWeight.400', 'Normal') }}</mat-option>
+                    <mat-option value="500">{{ tx('editor.appearance.textWeight.500', 'Medium') }}</mat-option>
+                    <mat-option value="600">{{ tx('editor.appearance.textWeight.600', 'Semibold') }}</mat-option>
+                    <mat-option value="700">{{ tx('editor.appearance.textWeight.700', 'Bold') }}</mat-option>
+                  </mat-select>
                 </mat-form-field>
                 <mat-form-field appearance="outline" class="field-span-2">
                   <mat-label>{{ tx('editor.appearance.themeClass', 'Theme class') }}</mat-label>
@@ -5245,12 +5331,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 </mat-form-field>
                 <mat-form-field appearance="outline">
                   <mat-label>{{ tx('editor.appearance.iconSet', 'Icon set') }}</mat-label>
-                  <select matNativeControl [(ngModel)]="appearance.iconsSet" (ngModelChange)="onAppearanceChange()">
-                    <option [ngValue]="undefined">{{ tx('editor.appearance.iconSet.default', 'Material Icons (default)') }}</option>
-                    <option value="material-symbols-outlined">Material Symbols (Outlined)</option>
-                    <option value="material-symbols-rounded">Material Symbols (Rounded)</option>
-                    <option value="material-symbols-sharp">Material Symbols (Sharp)</option>
-                  </select>
+                  <mat-select [(ngModel)]="appearance.iconsSet" (ngModelChange)="onAppearanceChange()" [placeholder]="tx('editor.appearance.iconSet.default', 'Material Icons (default)')">
+                    <mat-option [value]="undefined">{{ tx('editor.appearance.iconSet.default', 'Material Icons (default)') }}</mat-option>
+                    <mat-option value="material-symbols-outlined">Material Symbols (Outlined)</mat-option>
+                    <mat-option value="material-symbols-rounded">Material Symbols (Rounded)</mat-option>
+                    <mat-option value="material-symbols-sharp">Material Symbols (Sharp)</mat-option>
+                  </mat-select>
                 </mat-form-field>
               </div>
               <div class="inline-actions-grid icon-picker-grid">
@@ -5336,7 +5422,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         </mat-tab>
       </mat-tab-group>
     </div>
-    `, styles: [".pdx-editor{display:grid;gap:16px}.pdx-editor .mat-mdc-form-field{width:100%}.pdx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.pdx-toggles{display:flex;gap:12px;flex-wrap:wrap}.tab-pad{padding:16px;display:grid;gap:16px;background:var(--md-sys-color-surface);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 78%,transparent);border-radius:16px}.help{color:var(--md-sys-color-on-surface-variant);font-size:13px}.editor-intro{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:4px 2px 2px}.editor-intro-copy{display:grid;gap:6px;max-width:760px}.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant);font-weight:600}.editor-title{font-size:22px;line-height:1.15;font-weight:650;color:var(--md-sys-color-on-surface)}.editor-subtitle{max-width:72ch;color:var(--md-sys-color-on-surface-variant);line-height:1.45;font-size:14px}.editor-intro-meta{display:flex;gap:8px;align-items:flex-start}.meta-pill{display:grid;gap:2px;min-width:88px;padding:10px 12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent);background:var(--md-sys-color-surface-container-low)}.meta-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--md-sys-color-on-surface-variant)}.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:6px}.icons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:8px 0}.icon-item{display:grid;gap:6px;align-content:start}.icons-hint{margin-top:4px}.settings-group{display:grid;gap:14px;padding:2px 0 4px}.settings-group+.settings-group,.settings-group+.disclosure,.disclosure+.settings-group{padding-top:18px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 60%,transparent)}.group-head{display:grid;gap:4px;max-width:72ch}.inline-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:start}.inline-action-item{display:grid;gap:8px;align-content:start;min-width:0}.pdx-steps{display:grid;gap:12px;padding:4px 0 2px}.steps-workspace{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:24px;align-items:start}.pdx-steps-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.pdx-step-list{display:grid;gap:10px}.pdx-step-item{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:start;padding:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 68%,transparent);border-radius:14px;background:var(--md-sys-color-surface);cursor:pointer;outline:none}.pdx-step-item.active{border-color:color-mix(in srgb,var(--md-sys-color-primary) 55%,var(--md-sys-color-outline-variant));background:color-mix(in srgb,var(--md-sys-color-primary-container) 26%,var(--md-sys-color-surface));box-shadow:none}.pdx-step-item:focus-visible{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--md-sys-color-primary) 22%,transparent)}.drag-handle{display:flex;align-items:center;color:var(--md-sys-color-on-surface-variant)}.step-summary{display:grid;gap:8px;min-width:0}.step-summary-head{display:grid;gap:2px}.step-summary-index{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--md-sys-color-on-surface-variant);font-weight:600}.step-summary-title{font-size:15px;line-height:1.3;font-weight:600;color:var(--md-sys-color-on-surface)}.step-summary-sub{font-size:12px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-summary-flags{display:flex;gap:6px;flex-wrap:wrap}.summary-chip{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:600}.summary-chip-warn{background:color-mix(in srgb,var(--md-sys-color-error-container) 60%,transparent);color:var(--md-sys-color-on-error-container)}.pdx-active-step{display:grid;gap:18px;min-width:0}.pdx-active-step .hdr{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}.active-step-head{display:grid;gap:4px}.pdx-content-editor{display:grid;gap:16px}.section{display:grid;gap:12px;padding:0;border:none;border-radius:0;background:transparent}.section-body{display:grid;gap:12px}.section-title{font-weight:600;font-size:15px;color:var(--md-sys-color-on-surface)}.section-subtitle{font-size:13px;color:var(--md-sys-color-on-surface-variant);line-height:1.45}.section-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.editorial-section{padding-bottom:6px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 68%,transparent)}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field-span-2{grid-column:span 2}.toggle-group{display:flex;gap:10px;flex-wrap:wrap;padding-top:4px}.disclosure{padding:0 0 12px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 62%,transparent)}.disclosure summary{list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px;cursor:pointer;padding:0;position:relative}.disclosure summary::-webkit-details-marker{display:none}.disclosure summary:after{content:\"expand_more\";font-family:Material Icons;font-size:18px;color:var(--md-sys-color-on-surface-variant);transition:transform .16s ease}.disclosure[open] summary:after{transform:rotate(180deg)}.disclosure summary:focus-visible{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 58%,transparent);outline-offset:4px;border-radius:8px}.disclosure-body{padding-top:12px}.widget-list{display:grid;gap:8px}.widget-item{display:grid;grid-template-columns:20px 1fr auto;align-items:start;gap:12px;padding:10px 0;border:none;border-radius:0;background:transparent;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.widget-item .info{display:grid;gap:2px;min-width:0}.widget-item .info .name{font-weight:600}.widget-item .info .sub{font-size:12px;color:var(--md-sys-color-on-surface-variant);line-height:1.45}.widget-item .info .meta{margin-top:2px;font-size:11px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);opacity:.85}.widget-item .actions{display:flex;gap:2px;flex-wrap:nowrap;justify-content:flex-end;align-items:flex-start;opacity:.92}.editorial-item{align-items:start}.editorial-item .actions{justify-content:flex-end}.cta-row{display:flex;gap:8px;align-items:center}.spacer{flex:1 1 auto}.muted{color:var(--md-sys-color-on-surface-variant)}.cta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-bottom:4px}.cta-row-item{display:grid;gap:10px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.tokens-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:8px 0}.token-item{display:contents}.pdx-appearance{margin-top:8px;display:grid;gap:8px}.pdx-appearance-actions{display:flex;gap:8px;flex-wrap:wrap}.zone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.zone-column{display:grid;gap:10px;min-width:0}.zone-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.zone-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.zone-title{font-weight:600}.zone-column+.zone-column{padding-left:16px;border-left:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.zone-count{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}.advanced-list{margin-top:4px}.form-row-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.form-row-main{display:flex;align-items:center;gap:12px;min-width:0}.form-row-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.code-card{margin-top:8px}.code-head{font-weight:600;margin-bottom:4px}.code{white-space:pre;overflow:auto;background:var(--md-sys-color-surface-container-highest)}.w-full{grid-column:1 / -1}.min-180{min-width:180px}.editor-icon-action{color:var(--md-sys-color-on-surface-variant)}.editor-icon-action--danger{color:var(--md-sys-color-error)}.mat-mdc-form-field-icon-suffix{align-self:center}.cta-row-item .cta-head{display:grid;grid-template-columns:20px 1fr;align-items:start;gap:10px}.cta-row-item .cta-title{font-weight:600;color:var(--md-sys-color-on-surface)}.cta-row-item .cta-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant);line-height:1.45;margin-top:2px}.cta-row-item .cta-actions{display:flex;gap:8px;align-items:center}.widget-item:last-child,.cta-row-item:last-child,.form-row-card:last-child{border-bottom:none}@media(max-width:900px){.editor-intro{flex-direction:column}.steps-workspace{grid-template-columns:1fr;gap:20px}.pdx-step-item{grid-template-columns:20px 1fr}.pdx-actions{grid-column:1 / -1;justify-self:end}.widget-item{grid-template-columns:20px 1fr}.widget-item .actions{grid-column:1 / -1;justify-content:flex-end}.form-row-card{flex-direction:column;align-items:flex-start}.form-row-actions{justify-content:flex-start}.zone-column+.zone-column{padding-left:0;border-left:none;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}}@media(max-width:640px){.tab-pad{padding:14px}.editor-title{font-size:20px}.pdx-active-step .hdr{align-items:flex-start;flex-direction:column}.detail-grid{grid-template-columns:1fr}.field-span-2{grid-column:auto}.toggle-group{flex-direction:column;align-items:flex-start}.zone-head{align-items:flex-start;flex-direction:column}.zone-actions,.widget-item .actions{justify-content:flex-start}.disclosure summary{flex-direction:column;align-items:flex-start}}\n"] }]
+    `, styles: [":host{display:block;container-type:inline-size;color:var(--pfx-settings-panel-text-primary, var(--md-sys-color-on-surface))}.pdx-editor{display:grid;gap:16px}.pdx-editor .mat-mdc-form-field{width:100%}.pdx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.pdx-toggles{display:flex;gap:12px;flex-wrap:wrap}.tab-pad{padding:16px;display:grid;gap:16px;background:var(--pfx-settings-panel-surface, var(--md-sys-color-surface));border:1px solid color-mix(in srgb,var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant)) 78%,transparent);border-radius:16px}.help{color:var(--md-sys-color-on-surface-variant);font-size:13px}.editor-intro{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:4px 2px 2px}.editor-intro-copy{display:grid;gap:6px;max-width:760px}.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant);font-weight:600}.editor-title{font-size:22px;line-height:1.15;font-weight:650;color:var(--md-sys-color-on-surface)}.editor-subtitle{max-width:72ch;color:var(--md-sys-color-on-surface-variant);line-height:1.45;font-size:14px}.editor-intro-meta{display:flex;gap:8px;align-items:flex-start}.meta-pill{display:grid;gap:2px;min-width:88px;padding:10px 12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent);background:var(--md-sys-color-surface-container-low)}.meta-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--md-sys-color-on-surface-variant)}.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:6px}.icons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:8px 0}.icon-item{display:grid;gap:6px;align-content:start}.icons-hint{margin-top:4px}.settings-group{display:grid;gap:14px;padding:2px 0 4px}.settings-group+.settings-group,.settings-group+.disclosure,.disclosure+.settings-group{padding-top:18px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 60%,transparent)}.group-head{display:grid;gap:4px;max-width:72ch}.inline-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:start}.inline-action-item{display:grid;gap:8px;align-content:start;min-width:0}.pdx-steps{display:grid;gap:12px;padding:4px 0 2px}.steps-workspace{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:24px;align-items:start}.pdx-steps-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.pdx-step-list{display:grid;gap:10px}.pdx-step-item{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:start;padding:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 68%,transparent);border-radius:14px;background:var(--md-sys-color-surface);cursor:pointer;outline:none}.pdx-step-item.active{border-color:color-mix(in srgb,var(--md-sys-color-primary) 55%,var(--md-sys-color-outline-variant));background:color-mix(in srgb,var(--md-sys-color-primary-container) 26%,var(--md-sys-color-surface));box-shadow:none}.pdx-step-item:focus-visible{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--md-sys-color-primary) 22%,transparent)}.drag-handle{display:flex;align-items:center;color:var(--md-sys-color-on-surface-variant)}.step-summary{display:grid;gap:8px;min-width:0}.step-summary-head{display:grid;gap:2px}.step-summary-index{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--md-sys-color-on-surface-variant);font-weight:600}.step-summary-title{font-size:15px;line-height:1.3;font-weight:600;color:var(--md-sys-color-on-surface)}.step-summary-sub{font-size:12px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-summary-flags{display:flex;gap:6px;flex-wrap:wrap}.summary-chip{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:600}.summary-chip-warn{background:color-mix(in srgb,var(--md-sys-color-error-container) 60%,transparent);color:var(--md-sys-color-on-error-container)}.pdx-active-step{display:grid;gap:18px;min-width:0}.pdx-active-step .hdr{display:flex;gap:12px;align-items:flex-start;justify-content:space-between}.active-step-head{display:grid;gap:4px}.pdx-content-editor{display:grid;gap:16px}.section{display:grid;gap:12px;padding:0;border:none;border-radius:0;background:transparent}.section-body{display:grid;gap:12px}.section-title{font-weight:600;font-size:15px;color:var(--md-sys-color-on-surface)}.section-subtitle{font-size:13px;color:var(--md-sys-color-on-surface-variant);line-height:1.45}.section-head{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.editorial-section{padding-bottom:6px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 68%,transparent)}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field-span-2{grid-column:span 2}.toggle-group{display:flex;gap:10px;flex-wrap:wrap;padding-top:4px}.disclosure{padding:0 0 12px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 62%,transparent)}.disclosure summary{list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px;cursor:pointer;padding:0;position:relative}.disclosure summary::-webkit-details-marker{display:none}.disclosure summary:after{content:\"expand_more\";font-family:Material Icons;font-size:18px;color:var(--md-sys-color-on-surface-variant);transition:transform .16s ease}.disclosure[open] summary:after{transform:rotate(180deg)}.disclosure summary:focus-visible{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 58%,transparent);outline-offset:4px;border-radius:8px}.disclosure-body{padding-top:12px}.widget-list{display:grid;gap:8px}.widget-item{display:grid;grid-template-columns:20px 1fr auto;align-items:start;gap:12px;padding:10px 0;border:none;border-radius:0;background:transparent;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.widget-item .info{display:grid;gap:2px;min-width:0}.widget-item .info .name{font-weight:600}.widget-item .info .sub{font-size:12px;color:var(--md-sys-color-on-surface-variant);line-height:1.45}.widget-item .info .meta{margin-top:2px;font-size:11px;color:var(--md-sys-color-on-surface-variant);font-family:var(--md-ref-typeface-plain, monospace);opacity:.85}.widget-item .actions{display:flex;gap:2px;flex-wrap:nowrap;justify-content:flex-end;align-items:flex-start;opacity:.92}.editorial-item{align-items:start}.editorial-item .actions{justify-content:flex-end}.cta-row{display:flex;gap:8px;align-items:center}.spacer{flex:1 1 auto}.muted{color:var(--md-sys-color-on-surface-variant)}.cta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-bottom:4px}.cta-row-item{display:grid;gap:10px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.tokens-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:8px 0}.token-item{display:contents}.pdx-appearance{margin-top:8px;display:grid;gap:8px}.pdx-appearance-actions{display:flex;gap:8px;flex-wrap:wrap}.zone-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.zone-column{display:grid;gap:10px;min-width:0}.zone-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.zone-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.zone-title{font-weight:600}.zone-column+.zone-column{padding-left:16px;border-left:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.zone-count{font-size:12px;padding:2px 8px;border-radius:999px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}.advanced-list{margin-top:4px}.form-row-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}.form-row-main{display:flex;align-items:center;gap:12px;min-width:0}.form-row-actions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.code-card{margin-top:8px}.code-head{font-weight:600;margin-bottom:4px}.code{white-space:pre;overflow:auto;background:var(--md-sys-color-surface-container-highest)}.w-full{grid-column:1 / -1}.min-180{min-width:180px}.editor-icon-action{color:var(--md-sys-color-on-surface-variant)}.editor-icon-action--danger{color:var(--md-sys-color-error)}.mat-mdc-form-field-icon-suffix{align-self:center}.cta-row-item .cta-head{display:grid;grid-template-columns:20px 1fr;align-items:start;gap:10px}.cta-row-item .cta-title{font-weight:600;color:var(--md-sys-color-on-surface)}.cta-row-item .cta-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant);line-height:1.45;margin-top:2px}.cta-row-item .cta-actions{display:flex;gap:8px;align-items:center}.widget-item:last-child,.cta-row-item:last-child,.form-row-card:last-child{border-bottom:none}@container (max-width: 900px){.editor-intro{flex-direction:column}.steps-workspace{grid-template-columns:1fr;gap:20px}.pdx-step-item{grid-template-columns:20px 1fr}.pdx-actions{grid-column:1 / -1;justify-self:end}.widget-item{grid-template-columns:20px 1fr}.widget-item .actions{grid-column:1 / -1;justify-content:flex-end}.form-row-card{flex-direction:column;align-items:flex-start}.form-row-actions{justify-content:flex-start}.zone-column+.zone-column{padding-left:0;border-left:none;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}}@container (max-width: 640px){.tab-pad{padding:14px}.editor-title{font-size:20px}.pdx-active-step .hdr{align-items:flex-start;flex-direction:column}.detail-grid{grid-template-columns:1fr}.field-span-2{grid-column:auto}.toggle-group{flex-direction:column;align-items:flex-start}.zone-head{align-items:flex-start;flex-direction:column}.zone-actions,.widget-item .actions{justify-content:flex-start}.disclosure summary{flex-direction:column;align-items:flex-start}}@media(max-width:900px){.editor-intro{flex-direction:column}.steps-workspace{grid-template-columns:1fr;gap:20px}.pdx-step-item{grid-template-columns:20px 1fr}.pdx-actions{grid-column:1 / -1;justify-self:end}.widget-item{grid-template-columns:20px 1fr}.widget-item .actions{grid-column:1 / -1;justify-content:flex-end}.form-row-card{flex-direction:column;align-items:flex-start}.form-row-actions{justify-content:flex-start}.zone-column+.zone-column{padding-left:0;border-left:none;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 56%,transparent)}}@media(max-width:640px){.tab-pad{padding:14px}.editor-title{font-size:20px}.pdx-active-step .hdr{align-items:flex-start;flex-direction:column}.detail-grid{grid-template-columns:1fr}.field-span-2{grid-column:auto}.toggle-group{flex-direction:column;align-items:flex-start}.zone-head{align-items:flex-start;flex-direction:column}.zone-actions,.widget-item .actions{justify-content:flex-start}.disclosure summary{flex-direction:column;align-items:flex-start}}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SETTINGS_PANEL_DATA]

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@praxisui/stepper",
-  "version": "10.0.0-rc.4",
+  "version": "10.0.0-rc.41",
   "description": "Stepper workflows for Praxis UI with integrated forms, lists, uploads and page builder support.",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
     "@angular/material": "^21.0.0",
     "@angular/cdk": "^21.0.0",
-    "@praxisui/core": "^10.0.0-rc.4",
-    "@praxisui/dynamic-form": "^10.0.0-rc.4",
-    "@praxisui/rich-content": "^10.0.0-rc.4",
-    "@praxisui/settings-panel": "^10.0.0-rc.4",
-    "@praxisui/list": "^10.0.0-rc.4",
-    "@praxisui/files-upload": "^10.0.0-rc.4",
-    "@praxisui/page-builder": "^10.0.0-rc.4",
+    "@praxisui/core": "^10.0.0-rc.41",
+    "@praxisui/dynamic-form": "^10.0.0-rc.41",
+    "@praxisui/rich-content": "^10.0.0-rc.41",
+    "@praxisui/settings-panel": "^10.0.0-rc.41",
+    "@praxisui/list": "^10.0.0-rc.41",
+    "@praxisui/files-upload": "^10.0.0-rc.41",
+    "@praxisui/page-builder": "^10.0.0-rc.41",
     "@angular/forms": "^21.0.0",
     "@angular/router": "^21.0.0",
-    "@praxisui/ai": "^10.0.0-rc.4",
+    "@praxisui/ai": "^10.0.0-rc.41",
     "rxjs": "~7.8.0"
   },
   "dependencies": {

package/types/praxisui-stepper.d.ts

@@ -119,6 +119,8 @@ declare class PraxisStepper implements OnInit, AfterViewInit, OnDestroy {
     private _formComponents;
     private _formValidity;
     private _formPending;
+    private _stepFormValues;
+    private _formValueSubscriptions;
     private readonly hostElement;
     private readonly renderer;
     private appliedHeaderClasses;
@@ -139,8 +141,10 @@ declare class PraxisStepper implements OnInit, AfterViewInit, OnDestroy {
     set config(c: StepperMetadata | string | null);
     set selectedIndexInput(i: number | null);
     set selectedIndex(i: number | null);
+    private _enableCustomization;
     disableRippleInput: boolean;
-    enableCustomization: boolean;
+    set enableCustomization(value: boolean);
+    get enableCustomization(): boolean;
     labelPosition?: 'bottom' | 'end';
     color?: ThemePalette;
     /**
@@ -247,6 +251,7 @@ declare class PraxisStepper implements OnInit, AfterViewInit, OnDestroy {
     previous(): void;
     onFormReady(stepIndex: number, ev: FormReadyEvent, component?: PraxisDynamicForm): void;
     onFormValueChange(stepIndex: number, ev: FormValueChangeEvent): void;
+    private syncStepFormValues;
     onReactiveDeterminationExecuted(stepIndex: number, event: ReactiveDeterminationExecutionEvent): void;
     onReactiveDeterminationPendingChange(stepIndex: number, pending: boolean): void;
     private emitReactiveDeterminationStability;