@praxisui/metadata-editor 9.0.65 → 9.0.67

package/fesm2022/praxisui-metadata-editor.mjs

@@ -1,21 +1,21 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, Component, forwardRef, ElementRef, Input, Optional, ViewEncapsulation, EventEmitter, DestroyRef, Output, input, computed, ChangeDetectionStrategy, signal, ENVIRONMENT_INITIALIZER } from '@angular/core';
+import { Injectable, inject, Component, forwardRef, ElementRef, Input, input, signal, effect, ChangeDetectionStrategy, Optional, ViewEncapsulation, EventEmitter, DestroyRef, Output, computed, ENVIRONMENT_INITIALIZER } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormControl, FormGroup, FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule, FormArray, FormBuilder } from '@angular/forms';
-import * as i3$1 from '@angular/common';
+import * as i3$2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { isValidCssColor, DynamicFieldLoaderDirective, normalizeCssColorToRgb, providePraxisDynamicFieldsI18n } from '@praxisui/dynamic-fields';
 import * as i2$2 from '@praxisui/core';
 import { providePraxisI18n, PraxisI18nService, PraxisIconDirective, FieldControlType, INLINE_FILTER_CONTROL_TYPES, resolveInlineFilterControlType, normalizeControlTypeToken, normalizeReactiveDeterminations, ComponentMetadataRegistry } from '@praxisui/core';
 import * as i5$1 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
-import * as i4 from '@angular/material/icon';
+import * as i2$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i2$1 from '@angular/material/button';
+import * as i1$2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i1$1 from '@angular/material/dialog';
 import { MatDialogRef, MatDialogModule } from '@angular/material/dialog';
-import * as i7 from '@angular/material/tooltip';
+import * as i3$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i2 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
@@ -407,6 +407,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         }] });
 
 const METADATA_EDITOR_EN_US = {
+    'praxis.metadataEditor.colorPicker.adaptiveMode.label': 'Dialog on narrow screens',
+    'praxis.metadataEditor.colorPicker.adaptiveMode.hint': 'Opens the picker in a dialog below 600 px. Wider screens keep the popover. Presentation is selected when opening.',
+    'praxis.metadataEditor.inlineColorLabel.colorKey.label': 'Option color field',
+    'praxis.metadataEditor.inlineColorLabel.colorKey.hint': 'Payload field containing a CSS color or, with a governed palette, the exact tokenId. Missing or unauthorized tokens have no color; option order does not change the mapping.',
     'praxis.metadataEditor.arrayFields.section': 'Collection subfields',
     'praxis.metadataEditor.arrayFields.title': 'Subfields',
     'praxis.metadataEditor.arrayFields.add': 'Add subfield',
@@ -642,9 +646,22 @@ const METADATA_EDITOR_EN_US = {
     'praxis.metadataEditor.reactiveDeterminations.reason.unknown': 'Unclassified diagnostic.',
     'praxis.metadataEditor.reactiveDeterminations.governanceTitle': 'Governance boundary',
     'praxis.metadataEditor.reactiveDeterminations.governanceDescription': 'This surface explains and diagnoses the projection. Decision changes must be handed off to governed Praxis Config authoring; the final submit remains under backend authority.',
+    'praxis.metadataEditor.colorPalette.label': 'Palette colors',
+    'praxis.metadataEditor.colorPalette.hint': 'Build an ordered palette with CSS colors or governed token references.',
+    'praxis.metadataEditor.colorPalette.add': 'Add color',
+    'praxis.metadataEditor.colorPalette.empty': 'No custom colors. The selected preset or governed palette will be used.',
+    'praxis.metadataEditor.colorPalette.value': 'Color',
+    'praxis.metadataEditor.colorPalette.moveUp': 'Move up',
+    'praxis.metadataEditor.colorPalette.moveDown': 'Move down',
+    'praxis.metadataEditor.colorPalette.remove': 'Remove',
+    'praxis.metadataEditor.colorPalette.invalid': 'Enter a valid CSS color or var(--token).',
 };
 
 const METADATA_EDITOR_PT_BR = {
+    'praxis.metadataEditor.colorPicker.adaptiveMode.label': 'Diálogo em tela estreita',
+    'praxis.metadataEditor.colorPicker.adaptiveMode.hint': 'Abre o seletor em diálogo abaixo de 600 px. Em telas maiores, mantém o popover. A apresentação é escolhida ao abrir.',
+    'praxis.metadataEditor.inlineColorLabel.colorKey.label': 'Campo de cor da opção',
+    'praxis.metadataEditor.inlineColorLabel.colorKey.hint': 'Campo do payload que contém a cor CSS ou, com paleta governada, o tokenId exato. Tokens ausentes ou não autorizados ficam sem cor; a ordem das opções não altera a associação.',
     'praxis.metadataEditor.arrayFields.section': 'Subcampos da cole\u00e7\u00e3o',
     'praxis.metadataEditor.arrayFields.title': 'Subcampos',
     'praxis.metadataEditor.arrayFields.add': 'Adicionar subcampo',
@@ -880,6 +897,15 @@ const METADATA_EDITOR_PT_BR = {
     'praxis.metadataEditor.reactiveDeterminations.reason.unknown': 'Diagn\u00f3stico n\u00e3o classificado.',
     'praxis.metadataEditor.reactiveDeterminations.governanceTitle': 'Fronteira de governan\u00e7a',
     'praxis.metadataEditor.reactiveDeterminations.governanceDescription': 'Esta tela explica e diagnostica a proje\u00e7\u00e3o. Altera\u00e7\u00f5es da decis\u00e3o devem ser encaminhadas ao fluxo governado do Praxis Config; o submit final continua sob autoridade do backend.',
+    'praxis.metadataEditor.colorPalette.label': 'Cores da paleta',
+    'praxis.metadataEditor.colorPalette.hint': 'Monte uma paleta ordenada com cores CSS ou referências a tokens governados.',
+    'praxis.metadataEditor.colorPalette.add': 'Adicionar cor',
+    'praxis.metadataEditor.colorPalette.empty': 'Sem cores locais. O preset ou a paleta governada será usado.',
+    'praxis.metadataEditor.colorPalette.value': 'Cor',
+    'praxis.metadataEditor.colorPalette.moveUp': 'Mover para cima',
+    'praxis.metadataEditor.colorPalette.moveDown': 'Mover para baixo',
+    'praxis.metadataEditor.colorPalette.remove': 'Remover',
+    'praxis.metadataEditor.colorPalette.invalid': 'Informe uma cor CSS válida ou var(--token).',
 };
 
 function createPraxisMetadataEditorI18nConfig(options = {}) {
@@ -1513,7 +1539,7 @@ class PresentationRulesBuilderComponent {
         }
       </div>
     </section>
-  `, isInline: true, styles: [":host{display:block;width:100%}.pme-rules{display:grid;gap:12px;width:100%}.pme-rules.is-disabled{opacity:.72}.pme-rules__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.pme-rules__header h3{margin:0;color:var(--md-sys-color-on-surface);font-size:.95rem;font-weight:650;line-height:1.3}.pme-rules__header p{margin:3px 0 0;color:var(--md-sys-color-on-surface-variant);font-size:.82rem;line-height:1.35}.pme-rules__empty{border:1px dashed var(--md-sys-color-outline-variant);border-radius:8px;color:var(--md-sys-color-on-surface-variant);padding:12px;font-size:.86rem;line-height:1.4}.pme-rules__list{display:grid;gap:10px}.pme-rule{border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container-low);padding:10px}.pme-rule__toolbar{display:flex;align-items:center;gap:6px;min-height:32px}.pme-rule__toolbar strong{color:var(--md-sys-color-on-surface);font-size:.88rem;font-weight:650}.pme-rule__summary{color:var(--md-sys-color-on-surface-variant);font-size:.8rem;line-height:1.3}.pme-rule__spacer{flex:1 1 auto}.pme-rule__mode{display:inline-flex;gap:2px;margin:8px 0 10px;padding:2px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container)}.pme-rule__mode button{min-height:30px;line-height:30px}.pme-rule__mode button.is-active{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.pme-rule__grid{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));gap:10px}.pme-rule__grid--effects{grid-template-columns:repeat(3,minmax(150px,1fr))}.pme-rule__advanced{width:100%}@media(max-width:720px){.pme-rules__header{display:grid}.pme-rules__header button{justify-self:start}.pme-rule__toolbar{flex-wrap:wrap}.pme-rule__summary{flex:1 1 100%}.pme-rule__grid,.pme-rule__grid--effects{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.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: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i6.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: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
+  `, isInline: true, styles: [":host{display:block;width:100%}.pme-rules{display:grid;gap:12px;width:100%}.pme-rules.is-disabled{opacity:.72}.pme-rules__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.pme-rules__header h3{margin:0;color:var(--md-sys-color-on-surface);font-size:.95rem;font-weight:650;line-height:1.3}.pme-rules__header p{margin:3px 0 0;color:var(--md-sys-color-on-surface-variant);font-size:.82rem;line-height:1.35}.pme-rules__empty{border:1px dashed var(--md-sys-color-outline-variant);border-radius:8px;color:var(--md-sys-color-on-surface-variant);padding:12px;font-size:.86rem;line-height:1.4}.pme-rules__list{display:grid;gap:10px}.pme-rule{border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container-low);padding:10px}.pme-rule__toolbar{display:flex;align-items:center;gap:6px;min-height:32px}.pme-rule__toolbar strong{color:var(--md-sys-color-on-surface);font-size:.88rem;font-weight:650}.pme-rule__summary{color:var(--md-sys-color-on-surface-variant);font-size:.8rem;line-height:1.3}.pme-rule__spacer{flex:1 1 auto}.pme-rule__mode{display:inline-flex;gap:2px;margin:8px 0 10px;padding:2px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container)}.pme-rule__mode button{min-height:30px;line-height:30px}.pme-rule__mode button.is-active{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.pme-rule__grid{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));gap:10px}.pme-rule__grid--effects{grid-template-columns:repeat(3,minmax(150px,1fr))}.pme-rule__advanced{width:100%}@media(max-width:720px){.pme-rules__header{display:grid}.pme-rules__header button{justify-self:start}.pme-rule__toolbar{flex-wrap:wrap}.pme-rule__summary{flex:1 1 100%}.pme-rule__grid,.pme-rule__grid--effects{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.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: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i6.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: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PresentationRulesBuilderComponent, decorators: [{
             type: Component,
@@ -1956,7 +1982,7 @@ class PresentationChoiceControlComponent {
         </button>
       }
     </section>
-  `, isInline: true, styles: [":host{display:block;min-width:0;width:100%}.pme-choice{display:grid;gap:8px}.pme-choice.is-disabled{opacity:.7}.pme-choice__header{display:flex;align-items:center;gap:4px;min-height:28px}.pme-choice__label{color:var(--md-sys-color-on-surface);font-size:.88rem;font-weight:650;line-height:1.25}.pme-choice__help{width:28px;height:28px;min-width:28px;padding:0;color:var(--md-sys-color-primary)}.pme-choice__options{display:flex;flex-wrap:wrap;gap:6px}.pme-choice__option{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:0 10px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface-variant);cursor:pointer;font:inherit;line-height:1.2}.pme-choice__option:hover:not(:disabled){border-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-surface)}.pme-choice__option:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.pme-choice__option.is-selected{border-color:var(--md-sys-color-primary);background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.pme-choice__option mat-icon{font-size:18px;width:18px;height:18px}.pme-choice__option.is-tone{padding-left:8px}.pme-choice__swatch{width:14px;height:14px;border-radius:999px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-highest)}.pme-choice__option[data-tone=info] .pme-choice__swatch{background:var(--md-sys-color-primary-container);border-color:var(--md-sys-color-primary)}.pme-choice__option[data-tone=success] .pme-choice__swatch{background:var(--md-sys-color-tertiary-container);border-color:var(--md-sys-color-tertiary)}.pme-choice__option[data-tone=warning] .pme-choice__swatch{background:var(--md-sys-color-secondary-container);border-color:var(--md-sys-color-secondary)}.pme-choice__option[data-tone=danger] .pme-choice__swatch{background:var(--md-sys-color-error-container);border-color:var(--md-sys-color-error)}.pme-choice__clear{justify-self:start;min-height:30px;padding:0 8px;color:var(--md-sys-color-on-surface-variant)}.pme-choice__clear mat-icon{font-size:16px;width:16px;height:16px;margin-right:4px}@media(max-width:520px){.pme-choice__options{display:grid;grid-template-columns:1fr}.pme-choice__option{justify-content:flex-start;width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.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: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
+  `, isInline: true, styles: [":host{display:block;min-width:0;width:100%}.pme-choice{display:grid;gap:8px}.pme-choice.is-disabled{opacity:.7}.pme-choice__header{display:flex;align-items:center;gap:4px;min-height:28px}.pme-choice__label{color:var(--md-sys-color-on-surface);font-size:.88rem;font-weight:650;line-height:1.25}.pme-choice__help{width:28px;height:28px;min-width:28px;padding:0;color:var(--md-sys-color-primary)}.pme-choice__options{display:flex;flex-wrap:wrap;gap:6px}.pme-choice__option{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:0 10px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface-variant);cursor:pointer;font:inherit;line-height:1.2}.pme-choice__option:hover:not(:disabled){border-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-surface)}.pme-choice__option:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.pme-choice__option.is-selected{border-color:var(--md-sys-color-primary);background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.pme-choice__option mat-icon{font-size:18px;width:18px;height:18px}.pme-choice__option.is-tone{padding-left:8px}.pme-choice__swatch{width:14px;height:14px;border-radius:999px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-highest)}.pme-choice__option[data-tone=info] .pme-choice__swatch{background:var(--md-sys-color-primary-container);border-color:var(--md-sys-color-primary)}.pme-choice__option[data-tone=success] .pme-choice__swatch{background:var(--md-sys-color-tertiary-container);border-color:var(--md-sys-color-tertiary)}.pme-choice__option[data-tone=warning] .pme-choice__swatch{background:var(--md-sys-color-secondary-container);border-color:var(--md-sys-color-secondary)}.pme-choice__option[data-tone=danger] .pme-choice__swatch{background:var(--md-sys-color-error-container);border-color:var(--md-sys-color-error)}.pme-choice__clear{justify-self:start;min-height:30px;padding:0 8px;color:var(--md-sys-color-on-surface-variant)}.pme-choice__clear mat-icon{font-size:16px;width:16px;height:16px;margin-right:4px}@media(max-width:520px){.pme-choice__options{display:grid;grid-template-columns:1fr}.pme-choice__option{justify-content:flex-start;width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.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: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PresentationChoiceControlComponent, decorators: [{
             type: Component,
@@ -2039,6 +2065,272 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 type: Input
             }] } });
 
+class ColorPaletteEditorComponent {
+    formControl = input.required(...(ngDevMode ? [{ debugName: "formControl" }] : /* istanbul ignore next */ []));
+    colors = signal([], ...(ngDevMode ? [{ debugName: "colors" }] : /* istanbul ignore next */ []));
+    i18n = inject(PraxisI18nService, { optional: true });
+    constructor() {
+        effect((onCleanup) => {
+            const control = this.formControl();
+            this.colors.set(this.normalize(control.value));
+            const subscription = control.valueChanges.subscribe((value) => this.colors.set(this.normalize(value)));
+            onCleanup(() => subscription.unsubscribe());
+        });
+    }
+    text(key, fallback) {
+        return this.i18n
+            ? resolvePraxisMetadataEditorText(this.i18n, key, fallback)
+            : fallback;
+    }
+    isValid(color) {
+        return color.trim().length > 0 && isValidCssColor(color);
+    }
+    kind(color) {
+        return /^var\(/i.test(color.trim()) ? 'token' : 'css';
+    }
+    addColor() {
+        this.commit([...this.colors(), '#6750a4']);
+    }
+    remove(index) {
+        this.commit(this.colors().filter((_, current) => current !== index));
+    }
+    move(index, delta) {
+        const target = index + delta;
+        if (target < 0 || target >= this.colors().length)
+            return;
+        const next = [...this.colors()];
+        [next[index], next[target]] = [next[target], next[index]];
+        this.commit(next);
+    }
+    updateColor(index, event) {
+        const next = [...this.colors()];
+        next[index] = event.target.value;
+        this.commit(next);
+    }
+    commit(colors) {
+        this.colors.set(colors);
+        const control = this.formControl();
+        control.setValue(colors);
+        control.markAsDirty();
+        control.markAsTouched();
+    }
+    normalize(value) {
+        return Array.isArray(value)
+            ? value.map((entry) => String(entry ?? ''))
+            : [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ColorPaletteEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ColorPaletteEditorComponent, isStandalone: true, selector: "praxis-color-palette-editor", inputs: { formControl: { classPropertyName: "formControl", publicName: "formControl", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <section
+      class="palette-editor"
+      [attr.aria-label]="text('colorPalette.label', 'Palette colors')"
+    >
+      <div class="palette-editor__header">
+        <div>
+          <strong>{{ text('colorPalette.label', 'Palette colors') }}</strong>
+          <p>
+            {{
+              text(
+                'colorPalette.hint',
+                'Build an ordered palette with CSS colors or governed token references.'
+              )
+            }}
+          </p>
+        </div>
+        <button mat-stroked-button type="button" (click)="addColor()">
+          <mat-icon [praxisIcon]="'mi:add'" />
+          {{ text('colorPalette.add', 'Add color') }}
+        </button>
+      </div>
+
+      @if (colors().length === 0) {
+        <div class="palette-editor__empty">
+          {{
+            text(
+              'colorPalette.empty',
+              'No custom colors. The selected preset or governed palette will be used.'
+            )
+          }}
+        </div>
+      } @else {
+        <ol class="palette-editor__list">
+          @for (color of colors(); track $index; let index = $index) {
+            <li class="palette-editor__row" [class.invalid]="!isValid(color)">
+              <span
+                class="palette-editor__swatch"
+                [style.background]="isValid(color) ? color : 'transparent'"
+                aria-hidden="true"
+              ></span>
+              <label>
+                <span class="sr-only"
+                  >{{ text('colorPalette.value', 'Color') }}
+                  {{ index + 1 }}</span
+                >
+                <input
+                  [value]="color"
+                  (input)="updateColor(index, $event)"
+                  [attr.aria-invalid]="!isValid(color)"
+                />
+              </label>
+              <span class="palette-editor__kind">{{ kind(color) }}</span>
+              <div class="palette-editor__actions">
+                <button
+                  mat-icon-button
+                  type="button"
+                  (click)="move(index, -1)"
+                  [disabled]="index === 0"
+                  [matTooltip]="text('colorPalette.moveUp', 'Move up')"
+                  [attr.aria-label]="text('colorPalette.moveUp', 'Move up')"
+                >
+                  <mat-icon [praxisIcon]="'mi:arrow_upward'" />
+                </button>
+                <button
+                  mat-icon-button
+                  type="button"
+                  (click)="move(index, 1)"
+                  [disabled]="index === colors().length - 1"
+                  [matTooltip]="text('colorPalette.moveDown', 'Move down')"
+                  [attr.aria-label]="text('colorPalette.moveDown', 'Move down')"
+                >
+                  <mat-icon [praxisIcon]="'mi:arrow_downward'" />
+                </button>
+                <button
+                  mat-icon-button
+                  type="button"
+                  (click)="remove(index)"
+                  [matTooltip]="text('colorPalette.remove', 'Remove')"
+                  [attr.aria-label]="text('colorPalette.remove', 'Remove')"
+                >
+                  <mat-icon [praxisIcon]="'mi:delete'" />
+                </button>
+              </div>
+              @if (!isValid(color)) {
+                <span class="palette-editor__error">
+                  {{
+                    text(
+                      'colorPalette.invalid',
+                      'Enter a valid CSS color or var(--token).'
+                    )
+                  }}
+                </span>
+              }
+            </li>
+          }
+        </ol>
+      }
+    </section>
+  `, isInline: true, styles: [":host{display:block;width:100%}.palette-editor{display:grid;gap:12px;width:100%;padding:12px;box-sizing:border-box;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface)}.palette-editor__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.palette-editor__header p{margin:4px 0 0;color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.4}.palette-editor__empty{padding:16px;border:1px dashed var(--md-sys-color-outline);border-radius:8px;color:var(--md-sys-color-on-surface-variant);text-align:center;font-size:12px}.palette-editor__list{display:grid;gap:8px;margin:0;padding:0;list-style:none}.palette-editor__row{display:grid;grid-template-columns:28px minmax(120px,1fr) auto auto;align-items:center;gap:8px;min-height:44px;padding:6px 8px;border:1px solid var(--md-sys-color-outline-variant);border-radius:9px;background:var(--md-sys-color-surface-container-low)}.palette-editor__row.invalid{border-color:var(--md-sys-color-error)}.palette-editor__swatch{width:26px;height:26px;border:1px solid var(--md-sys-color-outline-variant);border-radius:7px;background-image:linear-gradient(45deg,var(--md-sys-color-surface-container-high) 25%,transparent 25%),linear-gradient(-45deg,var(--md-sys-color-surface-container-high) 25%,transparent 25%)}.palette-editor input{width:100%;min-height:34px;box-sizing:border-box;border:1px solid var(--md-sys-color-outline-variant);border-radius:7px;padding:0 9px;color:var(--md-sys-color-on-surface);background:var(--md-sys-color-surface);font:inherit}.palette-editor input:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:1px}.palette-editor__kind{padding:3px 7px;border-radius:999px;background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);font-size:10px;font-weight:700;text-transform:uppercase}.palette-editor__actions{display:flex}.palette-editor__actions button{width:34px;height:34px;padding:5px}.palette-editor__error{grid-column:2 / -1;color:var(--md-sys-color-error);font-size:11px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:560px){.palette-editor__header{flex-direction:column}.palette-editor__row{grid-template-columns:28px minmax(0,1fr) auto}.palette-editor__kind{grid-column:2;justify-self:start}.palette-editor__actions{grid-column:3;grid-row:1 / span 2;flex-direction:column}.palette-editor__error{grid-column:1 / -1}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.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: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ColorPaletteEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-color-palette-editor', imports: [
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                        PraxisIconDirective,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <section
+      class="palette-editor"
+      [attr.aria-label]="text('colorPalette.label', 'Palette colors')"
+    >
+      <div class="palette-editor__header">
+        <div>
+          <strong>{{ text('colorPalette.label', 'Palette colors') }}</strong>
+          <p>
+            {{
+              text(
+                'colorPalette.hint',
+                'Build an ordered palette with CSS colors or governed token references.'
+              )
+            }}
+          </p>
+        </div>
+        <button mat-stroked-button type="button" (click)="addColor()">
+          <mat-icon [praxisIcon]="'mi:add'" />
+          {{ text('colorPalette.add', 'Add color') }}
+        </button>
+      </div>
+
+      @if (colors().length === 0) {
+        <div class="palette-editor__empty">
+          {{
+            text(
+              'colorPalette.empty',
+              'No custom colors. The selected preset or governed palette will be used.'
+            )
+          }}
+        </div>
+      } @else {
+        <ol class="palette-editor__list">
+          @for (color of colors(); track $index; let index = $index) {
+            <li class="palette-editor__row" [class.invalid]="!isValid(color)">
+              <span
+                class="palette-editor__swatch"
+                [style.background]="isValid(color) ? color : 'transparent'"
+                aria-hidden="true"
+              ></span>
+              <label>
+                <span class="sr-only"
+                  >{{ text('colorPalette.value', 'Color') }}
+                  {{ index + 1 }}</span
+                >
+                <input
+                  [value]="color"
+                  (input)="updateColor(index, $event)"
+                  [attr.aria-invalid]="!isValid(color)"
+                />
+              </label>
+              <span class="palette-editor__kind">{{ kind(color) }}</span>
+              <div class="palette-editor__actions">
+                <button
+                  mat-icon-button
+                  type="button"
+                  (click)="move(index, -1)"
+                  [disabled]="index === 0"
+                  [matTooltip]="text('colorPalette.moveUp', 'Move up')"
+                  [attr.aria-label]="text('colorPalette.moveUp', 'Move up')"
+                >
+                  <mat-icon [praxisIcon]="'mi:arrow_upward'" />
+                </button>
+                <button
+                  mat-icon-button
+                  type="button"
+                  (click)="move(index, 1)"
+                  [disabled]="index === colors().length - 1"
+                  [matTooltip]="text('colorPalette.moveDown', 'Move down')"
+                  [attr.aria-label]="text('colorPalette.moveDown', 'Move down')"
+                >
+                  <mat-icon [praxisIcon]="'mi:arrow_downward'" />
+                </button>
+                <button
+                  mat-icon-button
+                  type="button"
+                  (click)="remove(index)"
+                  [matTooltip]="text('colorPalette.remove', 'Remove')"
+                  [attr.aria-label]="text('colorPalette.remove', 'Remove')"
+                >
+                  <mat-icon [praxisIcon]="'mi:delete'" />
+                </button>
+              </div>
+              @if (!isValid(color)) {
+                <span class="palette-editor__error">
+                  {{
+                    text(
+                      'colorPalette.invalid',
+                      'Enter a valid CSS color or var(--token).'
+                    )
+                  }}
+                </span>
+              }
+            </li>
+          }
+        </ol>
+      }
+    </section>
+  `, styles: [":host{display:block;width:100%}.palette-editor{display:grid;gap:12px;width:100%;padding:12px;box-sizing:border-box;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface)}.palette-editor__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.palette-editor__header p{margin:4px 0 0;color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.4}.palette-editor__empty{padding:16px;border:1px dashed var(--md-sys-color-outline);border-radius:8px;color:var(--md-sys-color-on-surface-variant);text-align:center;font-size:12px}.palette-editor__list{display:grid;gap:8px;margin:0;padding:0;list-style:none}.palette-editor__row{display:grid;grid-template-columns:28px minmax(120px,1fr) auto auto;align-items:center;gap:8px;min-height:44px;padding:6px 8px;border:1px solid var(--md-sys-color-outline-variant);border-radius:9px;background:var(--md-sys-color-surface-container-low)}.palette-editor__row.invalid{border-color:var(--md-sys-color-error)}.palette-editor__swatch{width:26px;height:26px;border:1px solid var(--md-sys-color-outline-variant);border-radius:7px;background-image:linear-gradient(45deg,var(--md-sys-color-surface-container-high) 25%,transparent 25%),linear-gradient(-45deg,var(--md-sys-color-surface-container-high) 25%,transparent 25%)}.palette-editor input{width:100%;min-height:34px;box-sizing:border-box;border:1px solid var(--md-sys-color-outline-variant);border-radius:7px;padding:0 9px;color:var(--md-sys-color-on-surface);background:var(--md-sys-color-surface);font:inherit}.palette-editor input:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:1px}.palette-editor__kind{padding:3px 7px;border-radius:999px;background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);font-size:10px;font-weight:700;text-transform:uppercase}.palette-editor__actions{display:flex}.palette-editor__actions button{width:34px;height:34px;padding:5px}.palette-editor__error{grid-column:2 / -1;color:var(--md-sys-color-error);font-size:11px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:560px){.palette-editor__header{flex-direction:column}.palette-editor__row{grid-template-columns:28px minmax(0,1fr) auto}.palette-editor__kind{grid-column:2;justify-self:start}.palette-editor__actions{grid-column:3;grid-row:1 / span 2;flex-direction:column}.palette-editor__error{grid-column:1 / -1}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { formControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControl", required: true }] }] } });
+
 class DynamicEditorRendererComponent {
     dialog;
     iconPicker;
@@ -2190,6 +2482,8 @@ class DynamicEditorRendererComponent {
     rowClass(row) {
         if (this.isPresentationRulesRow(row))
             return 'row-presentation-rules';
+        if (this.isColorPaletteRow(row))
+            return 'row-color-palette';
         if (this.isPresentationChoiceRow(row))
             return 'row-presentation-choice';
         if (this.isGradientStopsRow(row))
@@ -2213,6 +2507,13 @@ class DynamicEditorRendererComponent {
         return (row.length > 0 &&
             row.every((field) => field._editorType === 'presentation-choice'));
     }
+    isColorPaletteRow(row) {
+        return (row.length > 0 &&
+            row.every((field) => field._editorType === 'color-palette'));
+    }
+    canRenderColorPaletteRow(row) {
+        return (this.ready && this.isColorPaletteRow(row) && this.hasControlsForRow(row));
+    }
     isGradientStopsRow(row) {
         return (row.length === 3 &&
             row.every((field) => field._editorType === 'gradient-stop'));
@@ -2223,7 +2524,8 @@ class DynamicEditorRendererComponent {
     }
     gradientPreviewTitle(row = []) {
         const prefix = this.gradientPreviewI18nPrefix(row);
-        return (this.resolveEditorText(`${prefix}.preview.title`, 'Prévia ao vivo') ?? 'Prévia ao vivo');
+        return (this.resolveEditorText(`${prefix}.preview.title`, 'Prévia ao vivo') ??
+            'Prévia ao vivo');
     }
     gradientPreviewDescription(row = []) {
         const prefix = this.gradientPreviewI18nPrefix(row);
@@ -2501,6 +2803,13 @@ class DynamicEditorRendererComponent {
                     >
                     </praxis-presentation-rules-builder>
                   }
+                } @else if (canRenderColorPaletteRow(row)) {
+                  @for (field of row; track field.name) {
+                    <praxis-color-palette-editor
+                      class="color-palette-field"
+                      [formControl]="controlFor(field.name)"
+                    />
+                  }
                 } @else if (canRenderPresentationChoiceRow(row)) {
                   @for (field of row; track field.name) {
                     <praxis-presentation-choice-control
@@ -2524,7 +2833,9 @@ class DynamicEditorRendererComponent {
                       <span
                         class="gradient-stops-preview__radial"
                         aria-hidden="true"
-                        [style.background-image]="gradientPreviewBackground(row)"
+                        [style.background-image]="
+                          gradientPreviewBackground(row)
+                        "
                       >
                         <span></span>
                       </span>
@@ -2532,7 +2843,9 @@ class DynamicEditorRendererComponent {
                       <span
                         class="gradient-stops-preview__stars"
                         aria-hidden="true"
-                        [style.background-image]="gradientPreviewBackground(row)"
+                        [style.background-image]="
+                          gradientPreviewBackground(row)
+                        "
                         >★★★★★</span
                       >
                     }
@@ -2561,7 +2874,7 @@ class DynamicEditorRendererComponent {
         }
       </mat-accordion>
     </div>
-  `, isInline: true, styles: [":host{display:block}.editor-surface{padding:8px 0 2px;border-radius:12px;background:transparent}.section-accordion{display:block}.section-card{margin:6px 0 8px;border-radius:12px;border:1px solid var(--md-sys-color-outline-variant);overflow:hidden}.section-card.mat-expanded{border-color:var(--md-sys-color-primary);box-shadow:0 2px 10px #0000000d}.section-card .mat-expansion-panel-body{background:var(--md-sys-color-surface-container-low)}.section-header{background:var(--md-sys-color-surface-container-low);border-bottom:1px solid var(--md-sys-color-outline-variant, var(--sicoob-stroke-medium));padding:2px 8px;min-height:32px;display:flex;align-items:center;color:var(--md-sys-color-on-surface)}.section-header .mat-expansion-panel-header-title,.section-header .mat-expansion-panel-header-description{display:flex;align-items:center;color:var(--md-sys-color-on-surface)}.section-title{display:inline-flex;align-items:center;gap:6px;font-weight:600;letter-spacing:.2px;color:var(--md-sys-color-on-surface);font-size:.9rem;line-height:1.2}.section-icon{color:var( --md-sys-color-primary, var(--md-sys-color-primary, #3f51b5) );opacity:.9}.editor-row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px}.editor-row>praxis-field-shell{flex:1 1 100%;min-width:280px}.editor-row praxis-field-shell .mat-mdc-form-field{width:100%;margin-bottom:8px}.editor-row.row-inline>praxis-field-shell{flex:0 0 auto}.editor-row.row-2>praxis-field-shell{flex:1 1 calc(50% - 12px);min-width:260px}.editor-row.row-3>praxis-field-shell{flex:1 1 calc(33.333% - 12px);min-width:220px}.editor-row.row-gradient-stops>praxis-field-shell{flex:1 1 100%;min-width:0;width:100%}.editor-row.row-gradient-stops .editor-item>pdx-color-input{flex:1 1 auto;min-width:0}.gradient-stops-preview{display:flex;flex:1 1 100%;align-items:center;justify-content:space-between;gap:16px;min-width:0;padding:14px 16px;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface)}.gradient-stops-preview__copy{display:grid;gap:3px;min-width:0}.gradient-stops-preview__copy strong{font:var(--md-sys-typescale-label-large-font, inherit);font-weight:650}.gradient-stops-preview__copy span{color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typescale-body-small-font, inherit);line-height:1.35}.gradient-stops-preview__stars{flex:0 0 auto;color:transparent;background-clip:text;-webkit-background-clip:text;font-size:30px;line-height:1;letter-spacing:2px}.gradient-stops-preview__radial{position:relative;flex:0 0 auto;width:76px;height:76px;border-radius:50%;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent)}.gradient-stops-preview__radial:before,.gradient-stops-preview__radial:after,.gradient-stops-preview__radial>span{content:\"\";position:absolute;inset:12px;border:1px dashed color-mix(in srgb,var(--md-sys-color-on-surface) 35%,transparent);border-radius:50%}.gradient-stops-preview__radial:after{inset:25px}.gradient-stops-preview__radial>span{inset:35px;border:0;background:var(--md-sys-color-on-surface)}@media(forced-colors:active){.gradient-stops-preview{border-color:CanvasText}.gradient-stops-preview__stars,.gradient-stops-preview__radial{color:CanvasText;background:none}}.editor-row>praxis-field-shell[data-field-name=controlType],.editor-row>praxis-field-shell[data-field-name=label],.editor-row>praxis-field-shell[data-field-name=placeholder]{flex:1 1 calc(50% - 12px);min-width:300px}.editor-row>praxis-presentation-rules-builder.presentation-rules-field{flex:1 1 100%;min-width:0}.editor-row>praxis-presentation-choice-control.presentation-choice-field{flex:1 1 100%;min-width:0}praxis-field-shell[data-field-name=label] .mdc-floating-label,praxis-field-shell[data-field-name=placeholder] .mdc-floating-label{font-weight:600}.editor-row>praxis-field-shell[data-field-name=prefix],.editor-row>praxis-field-shell[data-field-name=suffix]{flex:0 0 200px;min-width:160px}.editor-row>praxis-field-shell[data-field-name=prefixIcon],.editor-row>praxis-field-shell[data-field-name=suffixIcon],.editor-row>praxis-field-shell[data-field-name=prefixIconColor],.editor-row>praxis-field-shell[data-field-name=suffixIconColor]{flex:1 1 auto;min-width:160px}.editor-item{display:flex;align-items:flex-start;gap:4px;min-width:0;width:100%}.editor-item>ng-container,.editor-item>praxis-field-shell{flex:1;min-width:0}.actions-container{display:flex;align-items:center;gap:0;margin-top:12px;flex-shrink:0}.decorator-btn{position:static;color:var(--md-sys-color-primary, #3f51b5);opacity:.6;transform:scale(.8);width:32px;height:32px;line-height:32px;padding:0}.decorator-btn:hover{opacity:1}.icon-picker-btn,.hint-btn,.hint-btn.has-icon-picker{right:auto}.editor-row .mat-mdc-form-field-subscript-wrapper mat-hint{display:none!important}.editor-row .mat-mdc-form-field-subscript-wrapper mat-error{display:block!important}praxis-field-shell[data-field-name=showCharCount] .mdc-switch{transform:scale(1.05)}praxis-field-shell[data-field-name=showCharCount] .mat-mdc-slide-toggle{font-weight:600}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field-hint{display:flex;align-items:center;gap:8px;background:var(--md-sys-color-tertiary-container);border:1px solid var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary-container);padding:8px 10px;border-radius:6px;line-height:1.3;white-space:normal}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field-hint:before{content:\"\\26a0\\fe0f\";display:inline-block}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field-subscript-wrapper{margin-top:6px;margin-bottom:10px;min-height:auto}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field{margin-bottom:16px}@media(max-width:520px){.editor-row,.editor-row.row-inline{gap:8px}.editor-item{flex-direction:column;gap:2px}.editor-row.row-inline>praxis-field-shell,.editor-row.row-2>praxis-field-shell,.editor-row.row-3>praxis-field-shell{flex:1 1 100%;min-width:0}.gradient-stops-preview{align-items:flex-start;flex-direction:column}.gradient-stops-preview__stars{font-size:27px}.actions-container{width:100%;justify-content:flex-end;margin-top:0}.editor-row.row-gradient-stops .editor-item{align-items:flex-start;flex-direction:row;gap:4px}.editor-row.row-gradient-stops .actions-container{width:auto;margin-top:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: DynamicFieldLoaderDirective, selector: "[dynamicFieldLoader]", inputs: ["fields", "formGroup", "enableExternalControlBinding", "itemTemplate", "debugTrace", "debugTraceLabel", "readonlyMode", "disabledMode", "presentationMode", "visible", "canvasMode"], outputs: ["componentsCreated", "fieldCreated", "fieldDestroyed", "renderError", "canvasMouseEnter", "canvasMouseLeave", "canvasClick", "canvasFocus"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i5$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PresentationRulesBuilderComponent, selector: "praxis-presentation-rules-builder" }, { kind: "component", type: PresentationChoiceControlComponent, selector: "praxis-presentation-choice-control", inputs: ["field"] }], encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [":host{display:block}.editor-surface{padding:8px 0 2px;border-radius:12px;background:transparent}.section-accordion{display:block}.section-card{margin:6px 0 8px;border-radius:12px;border:1px solid var(--md-sys-color-outline-variant);overflow:hidden}.section-card.mat-expanded{border-color:var(--md-sys-color-primary);box-shadow:0 2px 10px #0000000d}.section-card .mat-expansion-panel-body{background:var(--md-sys-color-surface-container-low)}.section-header{background:var(--md-sys-color-surface-container-low);border-bottom:1px solid var(--md-sys-color-outline-variant, var(--sicoob-stroke-medium));padding:2px 8px;min-height:32px;display:flex;align-items:center;color:var(--md-sys-color-on-surface)}.section-header .mat-expansion-panel-header-title,.section-header .mat-expansion-panel-header-description{display:flex;align-items:center;color:var(--md-sys-color-on-surface)}.section-title{display:inline-flex;align-items:center;gap:6px;font-weight:600;letter-spacing:.2px;color:var(--md-sys-color-on-surface);font-size:.9rem;line-height:1.2}.section-icon{color:var( --md-sys-color-primary, var(--md-sys-color-primary, #3f51b5) );opacity:.9}.editor-row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px}.editor-row>praxis-field-shell{flex:1 1 100%;min-width:280px}.editor-row praxis-field-shell .mat-mdc-form-field{width:100%;margin-bottom:8px}.editor-row.row-inline>praxis-field-shell{flex:0 0 auto}.editor-row.row-2>praxis-field-shell{flex:1 1 calc(50% - 12px);min-width:260px}.editor-row.row-3>praxis-field-shell{flex:1 1 calc(33.333% - 12px);min-width:220px}.editor-row.row-gradient-stops>praxis-field-shell{flex:1 1 100%;min-width:0;width:100%}.editor-row.row-gradient-stops .editor-item>pdx-color-input{flex:1 1 auto;min-width:0}.gradient-stops-preview{display:flex;flex:1 1 100%;align-items:center;justify-content:space-between;gap:16px;min-width:0;padding:14px 16px;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface)}.gradient-stops-preview__copy{display:grid;gap:3px;min-width:0}.gradient-stops-preview__copy strong{font:var(--md-sys-typescale-label-large-font, inherit);font-weight:650}.gradient-stops-preview__copy span{color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typescale-body-small-font, inherit);line-height:1.35}.gradient-stops-preview__stars{flex:0 0 auto;color:transparent;background-clip:text;-webkit-background-clip:text;font-size:30px;line-height:1;letter-spacing:2px}.gradient-stops-preview__radial{position:relative;flex:0 0 auto;width:76px;height:76px;border-radius:50%;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent)}.gradient-stops-preview__radial:before,.gradient-stops-preview__radial:after,.gradient-stops-preview__radial>span{content:\"\";position:absolute;inset:12px;border:1px dashed color-mix(in srgb,var(--md-sys-color-on-surface) 35%,transparent);border-radius:50%}.gradient-stops-preview__radial:after{inset:25px}.gradient-stops-preview__radial>span{inset:35px;border:0;background:var(--md-sys-color-on-surface)}@media(forced-colors:active){.gradient-stops-preview{border-color:CanvasText}.gradient-stops-preview__stars,.gradient-stops-preview__radial{color:CanvasText;background:none}}.editor-row>praxis-field-shell[data-field-name=controlType],.editor-row>praxis-field-shell[data-field-name=label],.editor-row>praxis-field-shell[data-field-name=placeholder]{flex:1 1 calc(50% - 12px);min-width:300px}.editor-row>praxis-presentation-rules-builder.presentation-rules-field{flex:1 1 100%;min-width:0}.editor-row>praxis-color-palette-editor.color-palette-field{flex:1 1 100%;min-width:0}.editor-row>praxis-presentation-choice-control.presentation-choice-field{flex:1 1 100%;min-width:0}praxis-field-shell[data-field-name=label] .mdc-floating-label,praxis-field-shell[data-field-name=placeholder] .mdc-floating-label{font-weight:600}.editor-row>praxis-field-shell[data-field-name=prefix],.editor-row>praxis-field-shell[data-field-name=suffix]{flex:0 0 200px;min-width:160px}.editor-row>praxis-field-shell[data-field-name=prefixIcon],.editor-row>praxis-field-shell[data-field-name=suffixIcon],.editor-row>praxis-field-shell[data-field-name=prefixIconColor],.editor-row>praxis-field-shell[data-field-name=suffixIconColor]{flex:1 1 auto;min-width:160px}.editor-item{display:flex;align-items:flex-start;gap:4px;min-width:0;width:100%}.editor-item>ng-container,.editor-item>praxis-field-shell{flex:1;min-width:0}.actions-container{display:flex;align-items:center;gap:0;margin-top:12px;flex-shrink:0}.decorator-btn{position:static;color:var(--md-sys-color-primary, #3f51b5);opacity:.6;transform:scale(.8);width:32px;height:32px;line-height:32px;padding:0}.decorator-btn:hover{opacity:1}.icon-picker-btn,.hint-btn,.hint-btn.has-icon-picker{right:auto}.editor-row .mat-mdc-form-field-subscript-wrapper mat-hint{display:none!important}.editor-row .mat-mdc-form-field-subscript-wrapper mat-error{display:block!important}praxis-field-shell[data-field-name=showCharCount] .mdc-switch{transform:scale(1.05)}praxis-field-shell[data-field-name=showCharCount] .mat-mdc-slide-toggle{font-weight:600}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field-hint{display:flex;align-items:center;gap:8px;background:var(--md-sys-color-tertiary-container);border:1px solid var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary-container);padding:8px 10px;border-radius:6px;line-height:1.3;white-space:normal}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field-hint:before{content:\"\\26a0\\fe0f\";display:inline-block}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field-subscript-wrapper{margin-top:6px;margin-bottom:10px;min-height:auto}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field{margin-bottom:16px}@media(max-width:520px){.editor-row,.editor-row.row-inline{gap:8px}.editor-item{flex-direction:column;gap:2px}.editor-row.row-inline>praxis-field-shell,.editor-row.row-2>praxis-field-shell,.editor-row.row-3>praxis-field-shell{flex:1 1 100%;min-width:0}.gradient-stops-preview{align-items:flex-start;flex-direction:column}.gradient-stops-preview__stars{font-size:27px}.actions-container{width:100%;justify-content:flex-end;margin-top:0}.editor-row.row-gradient-stops .editor-item{align-items:flex-start;flex-direction:row;gap:4px}.editor-row.row-gradient-stops .actions-container{width:auto;margin-top:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: DynamicFieldLoaderDirective, selector: "[dynamicFieldLoader]", inputs: ["fields", "formGroup", "enableExternalControlBinding", "itemTemplate", "debugTrace", "debugTraceLabel", "readonlyMode", "disabledMode", "presentationMode", "visible", "canvasMode"], outputs: ["componentsCreated", "fieldCreated", "fieldDestroyed", "renderError", "canvasMouseEnter", "canvasMouseLeave", "canvasClick", "canvasFocus"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i5$1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PresentationRulesBuilderComponent, selector: "praxis-presentation-rules-builder" }, { kind: "component", type: PresentationChoiceControlComponent, selector: "praxis-presentation-choice-control", inputs: ["field"] }, { kind: "component", type: ColorPaletteEditorComponent, selector: "praxis-color-palette-editor", inputs: ["formControl"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DynamicEditorRendererComponent, decorators: [{
             type: Component,
@@ -2577,6 +2890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         PraxisIconDirective,
                         PresentationRulesBuilderComponent,
                         PresentationChoiceControlComponent,
+                        ColorPaletteEditorComponent,
                     ], encapsulation: ViewEncapsulation.None, template: `
     <ng-template
       #item
@@ -2656,6 +2970,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     >
                     </praxis-presentation-rules-builder>
                   }
+                } @else if (canRenderColorPaletteRow(row)) {
+                  @for (field of row; track field.name) {
+                    <praxis-color-palette-editor
+                      class="color-palette-field"
+                      [formControl]="controlFor(field.name)"
+                    />
+                  }
                 } @else if (canRenderPresentationChoiceRow(row)) {
                   @for (field of row; track field.name) {
                     <praxis-presentation-choice-control
@@ -2679,7 +3000,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                       <span
                         class="gradient-stops-preview__radial"
                         aria-hidden="true"
-                        [style.background-image]="gradientPreviewBackground(row)"
+                        [style.background-image]="
+                          gradientPreviewBackground(row)
+                        "
                       >
                         <span></span>
                       </span>
@@ -2687,7 +3010,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                       <span
                         class="gradient-stops-preview__stars"
                         aria-hidden="true"
-                        [style.background-image]="gradientPreviewBackground(row)"
+                        [style.background-image]="
+                          gradientPreviewBackground(row)
+                        "
                         >★★★★★</span
                       >
                     }
@@ -2716,7 +3041,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         }
       </mat-accordion>
     </div>
-  `, styles: [":host{display:block}.editor-surface{padding:8px 0 2px;border-radius:12px;background:transparent}.section-accordion{display:block}.section-card{margin:6px 0 8px;border-radius:12px;border:1px solid var(--md-sys-color-outline-variant);overflow:hidden}.section-card.mat-expanded{border-color:var(--md-sys-color-primary);box-shadow:0 2px 10px #0000000d}.section-card .mat-expansion-panel-body{background:var(--md-sys-color-surface-container-low)}.section-header{background:var(--md-sys-color-surface-container-low);border-bottom:1px solid var(--md-sys-color-outline-variant, var(--sicoob-stroke-medium));padding:2px 8px;min-height:32px;display:flex;align-items:center;color:var(--md-sys-color-on-surface)}.section-header .mat-expansion-panel-header-title,.section-header .mat-expansion-panel-header-description{display:flex;align-items:center;color:var(--md-sys-color-on-surface)}.section-title{display:inline-flex;align-items:center;gap:6px;font-weight:600;letter-spacing:.2px;color:var(--md-sys-color-on-surface);font-size:.9rem;line-height:1.2}.section-icon{color:var( --md-sys-color-primary, var(--md-sys-color-primary, #3f51b5) );opacity:.9}.editor-row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px}.editor-row>praxis-field-shell{flex:1 1 100%;min-width:280px}.editor-row praxis-field-shell .mat-mdc-form-field{width:100%;margin-bottom:8px}.editor-row.row-inline>praxis-field-shell{flex:0 0 auto}.editor-row.row-2>praxis-field-shell{flex:1 1 calc(50% - 12px);min-width:260px}.editor-row.row-3>praxis-field-shell{flex:1 1 calc(33.333% - 12px);min-width:220px}.editor-row.row-gradient-stops>praxis-field-shell{flex:1 1 100%;min-width:0;width:100%}.editor-row.row-gradient-stops .editor-item>pdx-color-input{flex:1 1 auto;min-width:0}.gradient-stops-preview{display:flex;flex:1 1 100%;align-items:center;justify-content:space-between;gap:16px;min-width:0;padding:14px 16px;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface)}.gradient-stops-preview__copy{display:grid;gap:3px;min-width:0}.gradient-stops-preview__copy strong{font:var(--md-sys-typescale-label-large-font, inherit);font-weight:650}.gradient-stops-preview__copy span{color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typescale-body-small-font, inherit);line-height:1.35}.gradient-stops-preview__stars{flex:0 0 auto;color:transparent;background-clip:text;-webkit-background-clip:text;font-size:30px;line-height:1;letter-spacing:2px}.gradient-stops-preview__radial{position:relative;flex:0 0 auto;width:76px;height:76px;border-radius:50%;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent)}.gradient-stops-preview__radial:before,.gradient-stops-preview__radial:after,.gradient-stops-preview__radial>span{content:\"\";position:absolute;inset:12px;border:1px dashed color-mix(in srgb,var(--md-sys-color-on-surface) 35%,transparent);border-radius:50%}.gradient-stops-preview__radial:after{inset:25px}.gradient-stops-preview__radial>span{inset:35px;border:0;background:var(--md-sys-color-on-surface)}@media(forced-colors:active){.gradient-stops-preview{border-color:CanvasText}.gradient-stops-preview__stars,.gradient-stops-preview__radial{color:CanvasText;background:none}}.editor-row>praxis-field-shell[data-field-name=controlType],.editor-row>praxis-field-shell[data-field-name=label],.editor-row>praxis-field-shell[data-field-name=placeholder]{flex:1 1 calc(50% - 12px);min-width:300px}.editor-row>praxis-presentation-rules-builder.presentation-rules-field{flex:1 1 100%;min-width:0}.editor-row>praxis-presentation-choice-control.presentation-choice-field{flex:1 1 100%;min-width:0}praxis-field-shell[data-field-name=label] .mdc-floating-label,praxis-field-shell[data-field-name=placeholder] .mdc-floating-label{font-weight:600}.editor-row>praxis-field-shell[data-field-name=prefix],.editor-row>praxis-field-shell[data-field-name=suffix]{flex:0 0 200px;min-width:160px}.editor-row>praxis-field-shell[data-field-name=prefixIcon],.editor-row>praxis-field-shell[data-field-name=suffixIcon],.editor-row>praxis-field-shell[data-field-name=prefixIconColor],.editor-row>praxis-field-shell[data-field-name=suffixIconColor]{flex:1 1 auto;min-width:160px}.editor-item{display:flex;align-items:flex-start;gap:4px;min-width:0;width:100%}.editor-item>ng-container,.editor-item>praxis-field-shell{flex:1;min-width:0}.actions-container{display:flex;align-items:center;gap:0;margin-top:12px;flex-shrink:0}.decorator-btn{position:static;color:var(--md-sys-color-primary, #3f51b5);opacity:.6;transform:scale(.8);width:32px;height:32px;line-height:32px;padding:0}.decorator-btn:hover{opacity:1}.icon-picker-btn,.hint-btn,.hint-btn.has-icon-picker{right:auto}.editor-row .mat-mdc-form-field-subscript-wrapper mat-hint{display:none!important}.editor-row .mat-mdc-form-field-subscript-wrapper mat-error{display:block!important}praxis-field-shell[data-field-name=showCharCount] .mdc-switch{transform:scale(1.05)}praxis-field-shell[data-field-name=showCharCount] .mat-mdc-slide-toggle{font-weight:600}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field-hint{display:flex;align-items:center;gap:8px;background:var(--md-sys-color-tertiary-container);border:1px solid var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary-container);padding:8px 10px;border-radius:6px;line-height:1.3;white-space:normal}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field-hint:before{content:\"\\26a0\\fe0f\";display:inline-block}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field-subscript-wrapper{margin-top:6px;margin-bottom:10px;min-height:auto}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field{margin-bottom:16px}@media(max-width:520px){.editor-row,.editor-row.row-inline{gap:8px}.editor-item{flex-direction:column;gap:2px}.editor-row.row-inline>praxis-field-shell,.editor-row.row-2>praxis-field-shell,.editor-row.row-3>praxis-field-shell{flex:1 1 100%;min-width:0}.gradient-stops-preview{align-items:flex-start;flex-direction:column}.gradient-stops-preview__stars{font-size:27px}.actions-container{width:100%;justify-content:flex-end;margin-top:0}.editor-row.row-gradient-stops .editor-item{align-items:flex-start;flex-direction:row;gap:4px}.editor-row.row-gradient-stops .actions-container{width:auto;margin-top:12px}}\n"] }]
+  `, styles: [":host{display:block}.editor-surface{padding:8px 0 2px;border-radius:12px;background:transparent}.section-accordion{display:block}.section-card{margin:6px 0 8px;border-radius:12px;border:1px solid var(--md-sys-color-outline-variant);overflow:hidden}.section-card.mat-expanded{border-color:var(--md-sys-color-primary);box-shadow:0 2px 10px #0000000d}.section-card .mat-expansion-panel-body{background:var(--md-sys-color-surface-container-low)}.section-header{background:var(--md-sys-color-surface-container-low);border-bottom:1px solid var(--md-sys-color-outline-variant, var(--sicoob-stroke-medium));padding:2px 8px;min-height:32px;display:flex;align-items:center;color:var(--md-sys-color-on-surface)}.section-header .mat-expansion-panel-header-title,.section-header .mat-expansion-panel-header-description{display:flex;align-items:center;color:var(--md-sys-color-on-surface)}.section-title{display:inline-flex;align-items:center;gap:6px;font-weight:600;letter-spacing:.2px;color:var(--md-sys-color-on-surface);font-size:.9rem;line-height:1.2}.section-icon{color:var( --md-sys-color-primary, var(--md-sys-color-primary, #3f51b5) );opacity:.9}.editor-row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px}.editor-row>praxis-field-shell{flex:1 1 100%;min-width:280px}.editor-row praxis-field-shell .mat-mdc-form-field{width:100%;margin-bottom:8px}.editor-row.row-inline>praxis-field-shell{flex:0 0 auto}.editor-row.row-2>praxis-field-shell{flex:1 1 calc(50% - 12px);min-width:260px}.editor-row.row-3>praxis-field-shell{flex:1 1 calc(33.333% - 12px);min-width:220px}.editor-row.row-gradient-stops>praxis-field-shell{flex:1 1 100%;min-width:0;width:100%}.editor-row.row-gradient-stops .editor-item>pdx-color-input{flex:1 1 auto;min-width:0}.gradient-stops-preview{display:flex;flex:1 1 100%;align-items:center;justify-content:space-between;gap:16px;min-width:0;padding:14px 16px;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface)}.gradient-stops-preview__copy{display:grid;gap:3px;min-width:0}.gradient-stops-preview__copy strong{font:var(--md-sys-typescale-label-large-font, inherit);font-weight:650}.gradient-stops-preview__copy span{color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typescale-body-small-font, inherit);line-height:1.35}.gradient-stops-preview__stars{flex:0 0 auto;color:transparent;background-clip:text;-webkit-background-clip:text;font-size:30px;line-height:1;letter-spacing:2px}.gradient-stops-preview__radial{position:relative;flex:0 0 auto;width:76px;height:76px;border-radius:50%;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-sys-color-outline-variant) 70%,transparent)}.gradient-stops-preview__radial:before,.gradient-stops-preview__radial:after,.gradient-stops-preview__radial>span{content:\"\";position:absolute;inset:12px;border:1px dashed color-mix(in srgb,var(--md-sys-color-on-surface) 35%,transparent);border-radius:50%}.gradient-stops-preview__radial:after{inset:25px}.gradient-stops-preview__radial>span{inset:35px;border:0;background:var(--md-sys-color-on-surface)}@media(forced-colors:active){.gradient-stops-preview{border-color:CanvasText}.gradient-stops-preview__stars,.gradient-stops-preview__radial{color:CanvasText;background:none}}.editor-row>praxis-field-shell[data-field-name=controlType],.editor-row>praxis-field-shell[data-field-name=label],.editor-row>praxis-field-shell[data-field-name=placeholder]{flex:1 1 calc(50% - 12px);min-width:300px}.editor-row>praxis-presentation-rules-builder.presentation-rules-field{flex:1 1 100%;min-width:0}.editor-row>praxis-color-palette-editor.color-palette-field{flex:1 1 100%;min-width:0}.editor-row>praxis-presentation-choice-control.presentation-choice-field{flex:1 1 100%;min-width:0}praxis-field-shell[data-field-name=label] .mdc-floating-label,praxis-field-shell[data-field-name=placeholder] .mdc-floating-label{font-weight:600}.editor-row>praxis-field-shell[data-field-name=prefix],.editor-row>praxis-field-shell[data-field-name=suffix]{flex:0 0 200px;min-width:160px}.editor-row>praxis-field-shell[data-field-name=prefixIcon],.editor-row>praxis-field-shell[data-field-name=suffixIcon],.editor-row>praxis-field-shell[data-field-name=prefixIconColor],.editor-row>praxis-field-shell[data-field-name=suffixIconColor]{flex:1 1 auto;min-width:160px}.editor-item{display:flex;align-items:flex-start;gap:4px;min-width:0;width:100%}.editor-item>ng-container,.editor-item>praxis-field-shell{flex:1;min-width:0}.actions-container{display:flex;align-items:center;gap:0;margin-top:12px;flex-shrink:0}.decorator-btn{position:static;color:var(--md-sys-color-primary, #3f51b5);opacity:.6;transform:scale(.8);width:32px;height:32px;line-height:32px;padding:0}.decorator-btn:hover{opacity:1}.icon-picker-btn,.hint-btn,.hint-btn.has-icon-picker{right:auto}.editor-row .mat-mdc-form-field-subscript-wrapper mat-hint{display:none!important}.editor-row .mat-mdc-form-field-subscript-wrapper mat-error{display:block!important}praxis-field-shell[data-field-name=showCharCount] .mdc-switch{transform:scale(1.05)}praxis-field-shell[data-field-name=showCharCount] .mat-mdc-slide-toggle{font-weight:600}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field-hint{display:flex;align-items:center;gap:8px;background:var(--md-sys-color-tertiary-container);border:1px solid var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary-container);padding:8px 10px;border-radius:6px;line-height:1.3;white-space:normal}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field-hint:before{content:\"\\26a0\\fe0f\";display:inline-block}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field-subscript-wrapper{margin-top:6px;margin-bottom:10px;min-height:auto}praxis-field-shell[data-field-name=controlType] .mat-mdc-form-field{margin-bottom:16px}@media(max-width:520px){.editor-row,.editor-row.row-inline{gap:8px}.editor-item{flex-direction:column;gap:2px}.editor-row.row-inline>praxis-field-shell,.editor-row.row-2>praxis-field-shell,.editor-row.row-3>praxis-field-shell{flex:1 1 100%;min-width:0}.gradient-stops-preview{align-items:flex-start;flex-direction:column}.gradient-stops-preview__stars{font-size:27px}.actions-container{width:100%;justify-content:flex-end;margin-top:0}.editor-row.row-gradient-stops .editor-item{align-items:flex-start;flex-direction:row;gap:4px}.editor-row.row-gradient-stops .actions-container{width:auto;margin-top:12px}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i2$2.IconPickerService }, { type: i2$2.PraxisI18nService, decorators: [{
                     type: Optional
                 }] }], propDecorators: { properties: [{
@@ -6475,83 +6800,376 @@ const phoneInputProperties = [
     { name: 'clearButton.showOnlyWhenFilled', label: 'Clear: só quando preenchido', editorType: 'checkbox', group: 'Ações', hint: 'Exibe o botão apenas quando houver valor.' },
 ];
 
+const colorPaletteValidator = (control) => {
+    const values = Array.isArray(control.value) ? control.value : [];
+    const invalidIndexes = values
+        .map((value, index) => ({ value, index }))
+        .filter(({ value }) => !isValidCssColor(value))
+        .map(({ index }) => index);
+    return invalidIndexes.length ? { colorPalette: { invalidIndexes } } : null;
+};
+const PURPOSE_OPTIONS = [
+    { value: 'text', text: 'Texto' },
+    { value: 'fill', text: 'Preenchimento' },
+    { value: 'chart', text: 'Gráfico' },
+    { value: 'state', text: 'Estado' },
+    { value: 'surface', text: 'Superfície' },
+    { value: 'border', text: 'Borda' },
+    { value: 'focus', text: 'Foco' },
+];
+/** Common persisted reference; the palette body remains owned by praxis-config-starter. */
+function governedColorPaletteProperties() {
+    return [
+        {
+            name: 'governedPaletteRef.paletteKey',
+            label: 'Paleta governada',
+            editorType: 'text',
+            group: 'Governança',
+            hint: 'Chave canônica da projeção publicada no Praxis Config.',
+        },
+        {
+            name: 'governedPaletteRef.version',
+            label: 'Versão fixada',
+            editorType: 'number',
+            group: 'Governança',
+            hint: 'Opcional. Sem versão, o runtime acompanha a última publicação.',
+        },
+        {
+            name: 'governedPaletteRef.etag',
+            label: 'ETag esperado',
+            editorType: 'text',
+            group: 'Governança',
+            hint: 'Opcional. Impede materialização quando a identidade publicada divergir.',
+        },
+        {
+            name: 'governedPaletteRef.purposes',
+            label: 'Finalidades autorizadas',
+            editorType: 'multi-select',
+            group: 'Governança',
+            options: PURPOSE_OPTIONS,
+            hint: 'Filtra tokens por uso sem copiar a paleta para o metadata do componente.',
+        },
+    ];
+}
+
 const colorInputProperties = [
     // Geral
     { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
-    { name: 'defaultValue', label: 'Valor padrão', editorType: 'text', group: 'Geral', hint: 'Ex.: #rrggbb, rgb()/rgba().' },
-    { name: 'placeholder', label: 'Placeholder', editorType: 'text', group: 'Geral' },
-    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral', hint: 'Texto de ajuda exibido abaixo do campo.' },
-    { name: 'prefix', label: 'Texto (prefixo)', editorType: 'text', group: 'Geral' },
-    { name: 'suffix', label: 'Texto (sufixo)', editorType: 'text', group: 'Geral' },
+    {
+        name: 'defaultValue',
+        label: 'Valor padrão',
+        editorType: 'text',
+        group: 'Geral',
+        hint: 'Ex.: #rrggbb, rgb()/rgba().',
+    },
+    {
+        name: 'placeholder',
+        label: 'Placeholder',
+        editorType: 'text',
+        group: 'Geral',
+    },
+    {
+        name: 'hint',
+        label: 'Hint',
+        editorType: 'text',
+        group: 'Geral',
+        hint: 'Texto de ajuda exibido abaixo do campo.',
+    },
+    {
+        name: 'prefix',
+        label: 'Texto (prefixo)',
+        editorType: 'text',
+        group: 'Geral',
+    },
+    {
+        name: 'suffix',
+        label: 'Texto (sufixo)',
+        editorType: 'text',
+        group: 'Geral',
+    },
     // Ícones
-    { name: 'prefixIcon', label: 'Ícone (prefixo)', editorType: 'text', group: 'Ícones', hint: "Material Symbols (ex.: mi:palette). Use o seletor ao lado para buscar." },
-    { name: 'prefixIconColor', label: 'Cor do ícone (prefixo)', editorType: 'color', group: 'Ícones', hint: 'Tema (primary/accent/warn) ou cor CSS (#496ddb, rgb(73,109,219), red).' },
-    { name: 'suffixIcon', label: 'Ícone (sufixo)', editorType: 'text', group: 'Ícones', hint: "Material Symbols (ex.: mi:info). Use o seletor ao lado para buscar." },
-    { name: 'suffixIconColor', label: 'Cor do ícone (sufixo)', editorType: 'color', group: 'Ícones', hint: 'Tema (primary/accent/warn) ou cor CSS (#496ddb, rgb(73,109,219), red).' },
+    {
+        name: 'prefixIcon',
+        label: 'Ícone (prefixo)',
+        editorType: 'text',
+        group: 'Ícones',
+        hint: 'Material Symbols (ex.: mi:palette). Use o seletor ao lado para buscar.',
+    },
+    {
+        name: 'prefixIconColor',
+        label: 'Cor do ícone (prefixo)',
+        editorType: 'color',
+        group: 'Ícones',
+        hint: 'Tema (primary/accent/warn) ou cor CSS (#496ddb, rgb(73,109,219), red).',
+    },
+    {
+        name: 'suffixIcon',
+        label: 'Ícone (sufixo)',
+        editorType: 'text',
+        group: 'Ícones',
+        hint: 'Material Symbols (ex.: mi:info). Use o seletor ao lado para buscar.',
+    },
+    {
+        name: 'suffixIconColor',
+        label: 'Cor do ícone (sufixo)',
+        editorType: 'color',
+        group: 'Ícones',
+        hint: 'Tema (primary/accent/warn) ou cor CSS (#496ddb, rgb(73,109,219), red).',
+    },
     // Dados/Opções
-    { name: 'palettePreset', label: 'Paleta (preset)', editorType: 'select', group: 'Dados/Opções', options: [
+    {
+        name: 'palettePreset',
+        label: 'Paleta (preset)',
+        editorType: 'select',
+        group: 'Dados/Opções',
+        options: [
             { value: 'material', text: 'Material' },
             { value: 'office', text: 'Office' },
             { value: 'basic', text: 'Básico' },
-        ] },
-    { name: 'paletteColors', label: 'Paleta: cores (JSON ou linhas)', editorType: 'textarea', group: 'Dados/Opções', hint: "JSON array ou uma cor por linha (#hex ou rgba/hsl)." },
-    { name: 'columns', label: 'Paleta: colunas', editorType: 'number', group: 'Dados/Opções', defaultValue: 8, hint: 'Quantidade de colunas exibidas.' },
+        ],
+    },
+    {
+        name: 'paletteColors',
+        label: 'Cores da paleta',
+        editorType: 'color-palette',
+        group: 'Dados/Opções',
+        hint: 'Monte uma paleta ordenada com cores CSS ou referências var(--token).',
+        validators: [colorPaletteValidator],
+    },
+    {
+        name: 'columns',
+        label: 'Paleta: colunas',
+        editorType: 'number',
+        group: 'Dados/Opções',
+        defaultValue: 8,
+        hint: 'Quantidade de colunas exibidas.',
+    },
+    ...governedColorPaletteProperties(),
     // Formato/Comportamento
-    { name: 'popupWidth', label: 'Popup width (px ou CSS)', editorType: 'text', group: 'Formato/Comportamento', defaultValue: '320', hint: 'Ex.: 320 ou 20rem.' },
-    { name: 'preview', label: 'Mostrar preview', editorType: 'checkbox', group: 'Formato/Comportamento', hint: 'Exibe cor selecionada.' },
-    { name: 'showRecent', label: 'Mostrar recentes', editorType: 'checkbox', group: 'Formato/Comportamento', hint: 'Exibe cores usadas recentemente.' },
-    { name: 'maxRecent', label: 'Qtd. de recentes', editorType: 'number', group: 'Formato/Comportamento', defaultValue: 12, hint: 'Limite de cores recentes.' },
-    { name: 'showNativeOption', label: 'Mostrar seletor nativo', editorType: 'checkbox', group: 'Formato/Comportamento', hint: 'Adiciona input color nativo como opção.' },
-    { name: 'readonly', label: 'Somente leitura', editorType: 'checkbox', group: 'Formato/Comportamento' },
-    { name: 'disabled', label: 'Desabilitado', editorType: 'checkbox', group: 'Formato/Comportamento' },
-    { name: 'autoFocus', label: 'Focar automaticamente', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    {
+        name: 'popupWidth',
+        label: 'Popup width (px ou CSS)',
+        editorType: 'text',
+        group: 'Formato/Comportamento',
+        defaultValue: '320',
+        hint: 'Ex.: 320 ou 20rem.',
+    },
+    {
+        name: 'preview',
+        label: 'Mostrar preview',
+        editorType: 'checkbox',
+        group: 'Formato/Comportamento',
+        hint: 'Exibe cor selecionada.',
+    },
+    {
+        name: 'showRecent',
+        label: 'Mostrar recentes',
+        editorType: 'checkbox',
+        group: 'Formato/Comportamento',
+        hint: 'Exibe cores usadas recentemente.',
+    },
+    {
+        name: 'maxRecent',
+        label: 'Qtd. de recentes',
+        editorType: 'number',
+        group: 'Formato/Comportamento',
+        defaultValue: 12,
+        hint: 'Limite de cores recentes.',
+    },
+    {
+        name: 'showNativeOption',
+        label: 'Mostrar seletor nativo',
+        editorType: 'checkbox',
+        group: 'Formato/Comportamento',
+        hint: 'Adiciona input color nativo como opção.',
+    },
+    {
+        name: 'readonly',
+        label: 'Somente leitura',
+        editorType: 'checkbox',
+        group: 'Formato/Comportamento',
+    },
+    {
+        name: 'disabled',
+        label: 'Desabilitado',
+        editorType: 'checkbox',
+        group: 'Formato/Comportamento',
+    },
+    {
+        name: 'autoFocus',
+        label: 'Focar automaticamente',
+        editorType: 'checkbox',
+        group: 'Formato/Comportamento',
+    },
     // Validação
-    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
-    { name: 'validators.requiredMessage', label: 'Mensagem: obrigatório', editorType: 'text', group: 'Validação' },
+    {
+        name: 'required',
+        label: 'Obrigatório',
+        editorType: 'checkbox',
+        group: 'Validação',
+    },
+    {
+        name: 'validators.requiredMessage',
+        label: 'Mensagem: obrigatório',
+        editorType: 'text',
+        group: 'Validação',
+    },
     // Ações
     // (sem ações adicionais)
     // Aparência/Material
-    { name: 'materialDesign.appearance', label: 'Aparência', editorType: 'select', group: 'Aparência/Material', options: [
+    {
+        name: 'materialDesign.appearance',
+        label: 'Aparência',
+        editorType: 'select',
+        group: 'Aparência/Material',
+        options: [
             { value: 'fill', text: 'Fill' },
             { value: 'outline', text: 'Outline' },
-        ] },
-    { name: 'materialDesign.color', label: 'Cor do tema', editorType: 'select', group: 'Aparência/Material', options: [
+        ],
+    },
+    {
+        name: 'materialDesign.color',
+        label: 'Cor do tema',
+        editorType: 'select',
+        group: 'Aparência/Material',
+        options: [
             { value: 'primary', text: 'Primária' },
             { value: 'accent', text: 'Acento' },
             { value: 'warn', text: 'Alerta' },
-        ] },
-    { name: 'materialDesign.floatLabel', label: 'Comportamento do label', editorType: 'select', group: 'Aparência/Material', options: [
+        ],
+    },
+    {
+        name: 'materialDesign.floatLabel',
+        label: 'Comportamento do label',
+        editorType: 'select',
+        group: 'Aparência/Material',
+        options: [
             { value: 'auto', text: 'Auto' },
             { value: 'always', text: 'Sempre' },
-        ] },
-    { name: 'materialDesign.subscriptSizing', label: 'Subscript sizing', editorType: 'select', group: 'Aparência/Material', options: [
+        ],
+    },
+    {
+        name: 'materialDesign.subscriptSizing',
+        label: 'Subscript sizing',
+        editorType: 'select',
+        group: 'Aparência/Material',
+        options: [
             { value: 'fixed', text: 'Fixo' },
             { value: 'dynamic', text: 'Dinâmico' },
-        ] },
-    { name: 'materialDesign.hideRequiredMarker', label: 'Ocultar * obrigatório', editorType: 'checkbox', group: 'Aparência/Material' },
+        ],
+    },
+    {
+        name: 'materialDesign.hideRequiredMarker',
+        label: 'Ocultar * obrigatório',
+        editorType: 'checkbox',
+        group: 'Aparência/Material',
+    },
     // Acessibilidade
-    { name: 'ariaLabel', label: 'ARIA label', editorType: 'text', group: 'Acessibilidade', hint: 'Use quando não houver label visível.' },
-    { name: 'ariaDescribedby', label: 'ARIA describedby', editorType: 'text', group: 'Acessibilidade', hint: 'IDs de ajuda/erro.' },
-    { name: 'ariaLabelledby', label: 'ARIA labelledby', editorType: 'text', group: 'Acessibilidade', hint: 'ID de elemento que atua como label.' },
+    {
+        name: 'ariaLabel',
+        label: 'ARIA label',
+        editorType: 'text',
+        group: 'Acessibilidade',
+        hint: 'Use quando não houver label visível.',
+    },
+    {
+        name: 'ariaDescribedby',
+        label: 'ARIA describedby',
+        editorType: 'text',
+        group: 'Acessibilidade',
+        hint: 'IDs de ajuda/erro.',
+    },
+    {
+        name: 'ariaLabelledby',
+        label: 'ARIA labelledby',
+        editorType: 'text',
+        group: 'Acessibilidade',
+        hint: 'ID de elemento que atua como label.',
+    },
     // Ações
-    { name: 'clearButton.enabled', label: 'Clear: habilitar', editorType: 'checkbox', group: 'Ações', hint: 'Mostra botão para limpar valor.' },
-    { name: 'clearButton.icon', label: 'Clear: ícone', editorType: 'text', group: 'Ações', hint: "Material Symbols (ex.: mi:clear). Use o seletor ao lado para buscar." },
-    { name: 'clearButton.iconColor', label: 'Clear: cor do ícone', editorType: 'color', group: 'Ações', hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)' },
-    { name: 'clearButton.tooltip', label: 'Clear: tooltip', editorType: 'text', group: 'Ações' },
-    { name: 'clearButton.ariaLabel', label: 'Clear: aria-label', editorType: 'text', group: 'Ações', hint: 'Obrigatório quando não houver texto visível.' },
-    { name: 'clearButton.showOnlyWhenFilled', label: 'Clear: só quando preenchido', editorType: 'checkbox', group: 'Ações', hint: 'Exibe o botão apenas quando houver valor.' },
+    {
+        name: 'clearButton.enabled',
+        label: 'Clear: habilitar',
+        editorType: 'checkbox',
+        group: 'Ações',
+        hint: 'Mostra botão para limpar valor.',
+    },
+    {
+        name: 'clearButton.icon',
+        label: 'Clear: ícone',
+        editorType: 'text',
+        group: 'Ações',
+        hint: 'Material Symbols (ex.: mi:clear). Use o seletor ao lado para buscar.',
+    },
+    {
+        name: 'clearButton.iconColor',
+        label: 'Clear: cor do ícone',
+        editorType: 'color',
+        group: 'Ações',
+        hint: 'primary/accent/warn ou cor CSS (ex.: #496ddb, rgb(73,109,219), red)',
+    },
+    {
+        name: 'clearButton.tooltip',
+        label: 'Clear: tooltip',
+        editorType: 'text',
+        group: 'Ações',
+    },
+    {
+        name: 'clearButton.ariaLabel',
+        label: 'Clear: aria-label',
+        editorType: 'text',
+        group: 'Ações',
+        hint: 'Obrigatório quando não houver texto visível.',
+    },
+    {
+        name: 'clearButton.showOnlyWhenFilled',
+        label: 'Clear: só quando preenchido',
+        editorType: 'checkbox',
+        group: 'Ações',
+        hint: 'Exibe o botão apenas quando houver valor.',
+    },
 ];
 
 // ColorPicker v2 property editor (pdx-color-picker)
 const colorPickerProperties = [
     // Geral
     { name: 'label', label: 'Label', editorType: 'text', group: 'Geral' },
-    { name: 'defaultValue', label: 'Valor padrão', editorType: 'text', group: 'Geral', hint: 'Ex.: #rrggbb, rgba(255,0,0,0.5) ou hsl().' },
-    { name: 'hint', label: 'Hint', editorType: 'text', group: 'Geral', hint: 'Texto de ajuda exibido abaixo do campo.' },
+    {
+        name: 'defaultValue',
+        label: 'Valor padrão',
+        editorType: 'text',
+        group: 'Geral',
+        hint: 'Ex.: #rrggbb, rgba(255,0,0,0.5) ou hsl().',
+    },
+    {
+        name: 'hint',
+        label: 'Hint',
+        editorType: 'text',
+        group: 'Geral',
+        hint: 'Texto de ajuda exibido abaixo do campo.',
+    },
     // Ícones
-    { name: 'icon', label: 'Ícone', editorType: 'text', group: 'Ícones', hint: "Material Symbols (ex.: mi:palette). Use o seletor ao lado para buscar." },
-    { name: 'svgIcon', label: 'SVG icon', editorType: 'text', group: 'Ícones', hint: 'Nome do ícone SVG registrado.' },
-    { name: 'iconClass', label: 'Icon class (JSON/string)', editorType: 'textarea', group: 'Ícones', hint: 'string | string[] | Record<string, boolean>.' },
+    {
+        name: 'icon',
+        label: 'Ícone',
+        editorType: 'text',
+        group: 'Ícones',
+        hint: 'Material Symbols (ex.: mi:palette). Use o seletor ao lado para buscar.',
+    },
+    {
+        name: 'svgIcon',
+        label: 'SVG icon',
+        editorType: 'text',
+        group: 'Ícones',
+        hint: 'Nome do ícone SVG registrado.',
+    },
+    {
+        name: 'iconClass',
+        label: 'Icon class (JSON/string)',
+        editorType: 'textarea',
+        group: 'Ícones',
+        hint: 'string | string[] | Record<string, boolean>.',
+    },
     // Dados/Opções
     {
         name: 'paletteSettings.preset',
@@ -6567,13 +7185,31 @@ const colorPickerProperties = [
     },
     {
         name: 'paletteSettings.colors',
-        label: 'Palette: cores (JSON ou linhas)',
-        editorType: 'textarea',
+        label: 'Cores da paleta',
+        editorType: 'color-palette',
+        group: 'Dados/Opções',
+        hint: 'Monte uma paleta ordenada com cores CSS ou referências var(--token).',
+        validators: [colorPaletteValidator],
+    },
+    {
+        name: 'paletteSettings.columns',
+        label: 'Palette: colunas',
+        editorType: 'number',
         group: 'Dados/Opções',
-        hint: "JSON array ou uma cor por linha (#hex, rgb(), rgba(), hsl()).",
+        defaultValue: 8,
+        hint: 'Quantidade de colunas exibidas na paleta.',
     },
-    { name: 'paletteSettings.columns', label: 'Palette: colunas', editorType: 'number', group: 'Dados/Opções', defaultValue: 8, hint: 'Quantidade de colunas exibidas na paleta.' },
+    ...governedColorPaletteProperties(),
     // Formato/Comportamento
+    {
+        name: 'adaptiveMode',
+        label: '',
+        labelKey: 'colorPicker.adaptiveMode.label',
+        hintKey: 'colorPicker.adaptiveMode.hint',
+        editorType: 'checkbox',
+        group: 'Formato/Comportamento',
+        defaultValue: false,
+    },
     {
         name: 'format',
         label: 'Formato de saída',
@@ -6587,62 +7223,81 @@ const colorPickerProperties = [
             { value: 'hsl', text: 'HSL' },
         ],
     },
-    { name: 'adaptiveMode', label: 'Adaptive (BottomSheet/Drawer)', editorType: 'checkbox', group: 'Formato/Comportamento', hint: 'Abre em modo adaptive em telas menores.' },
-    { name: 'adaptiveTitle', label: 'Adaptive title', editorType: 'text', group: 'Formato/Comportamento' },
-    { name: 'adaptiveSubtitle', label: 'Adaptive subtitle', editorType: 'text', group: 'Formato/Comportamento' },
-    { name: 'popupSettings.width', label: 'Popup width (px ou CSS)', editorType: 'text', group: 'Formato/Comportamento', defaultValue: '340', hint: 'Ex.: 340 ou 20rem.' },
-    { name: 'readonly', label: 'Somente leitura', editorType: 'checkbox', group: 'Formato/Comportamento' },
-    { name: 'disabled', label: 'Desabilitado', editorType: 'checkbox', group: 'Formato/Comportamento' },
+    {
+        name: 'popupSettings.width',
+        label: 'Popup width (px ou CSS)',
+        editorType: 'text',
+        group: 'Formato/Comportamento',
+        defaultValue: '340',
+        hint: 'Ex.: 340 ou 20rem.',
+    },
+    {
+        name: 'readonly',
+        label: 'Somente leitura',
+        editorType: 'checkbox',
+        group: 'Formato/Comportamento',
+    },
+    {
+        name: 'disabled',
+        label: 'Desabilitado',
+        editorType: 'checkbox',
+        group: 'Formato/Comportamento',
+    },
     // Validação
-    { name: 'required', label: 'Obrigatório', editorType: 'checkbox', group: 'Validação' },
+    {
+        name: 'required',
+        label: 'Obrigatório',
+        editorType: 'checkbox',
+        group: 'Validação',
+    },
     // Ações (Clear)
-    { name: 'clearButton.enabled', label: 'Clear: habilitar', editorType: 'checkbox', group: 'Ações', hint: 'Exibe botão para limpar a cor selecionada.' },
-    { name: 'clearButton.icon', label: 'Clear: ícone', editorType: 'text', group: 'Ações', hint: "Material Symbols (ex.: mi:clear). Use o seletor ao lado para buscar." },
-    { name: 'clearButton.iconColor', label: 'Clear: cor do ícone', editorType: 'color', group: 'Ações', hint: 'Tema (primary/accent/warn) ou cor CSS (ex.: #496ddb, rgb(73,109,219)).' },
-    { name: 'clearButton.tooltip', label: 'Clear: tooltip', editorType: 'text', group: 'Ações' },
-    { name: 'clearButton.ariaLabel', label: 'Clear: aria-label', editorType: 'text', group: 'Ações', hint: 'Preencha quando o botão não tiver label visível.' },
-    { name: 'clearButton.showOnlyWhenFilled', label: 'Clear: só quando preenchido', editorType: 'checkbox', group: 'Ações' },
-    // Aparência/Material
     {
-        name: 'fillMode',
-        label: 'Fill mode',
-        editorType: 'select',
-        group: 'Aparência/Material',
-        defaultValue: 'solid',
-        options: [
-            { value: 'solid', text: 'Solid' },
-            { value: 'flat', text: 'Flat' },
-            { value: 'outline', text: 'Outline' },
-        ],
+        name: 'clearButton.enabled',
+        label: 'Clear: habilitar',
+        editorType: 'checkbox',
+        group: 'Ações',
+        hint: 'Exibe botão para limpar a cor selecionada.',
     },
     {
-        name: 'rounded',
-        label: 'Rounded',
-        editorType: 'select',
-        group: 'Aparência/Material',
-        defaultValue: 'medium',
-        options: [
-            { value: 'none', text: 'None' },
-            { value: 'small', text: 'Small' },
-            { value: 'medium', text: 'Medium' },
-            { value: 'large', text: 'Large' },
-            { value: 'full', text: 'Full' },
-        ],
+        name: 'clearButton.icon',
+        label: 'Clear: ícone',
+        editorType: 'text',
+        group: 'Ações',
+        hint: 'Material Symbols (ex.: mi:clear). Use o seletor ao lado para buscar.',
     },
     {
-        name: 'size',
-        label: 'Size',
-        editorType: 'select',
-        group: 'Aparência/Material',
-        defaultValue: 'medium',
-        options: [
-            { value: 'small', text: 'Small' },
-            { value: 'medium', text: 'Medium' },
-            { value: 'large', text: 'Large' },
-        ],
+        name: 'clearButton.iconColor',
+        label: 'Clear: cor do ícone',
+        editorType: 'color',
+        group: 'Ações',
+        hint: 'Tema (primary/accent/warn) ou cor CSS (ex.: #496ddb, rgb(73,109,219)).',
+    },
+    {
+        name: 'clearButton.tooltip',
+        label: 'Clear: tooltip',
+        editorType: 'text',
+        group: 'Ações',
+    },
+    {
+        name: 'clearButton.ariaLabel',
+        label: 'Clear: aria-label',
+        editorType: 'text',
+        group: 'Ações',
+        hint: 'Preencha quando o botão não tiver label visível.',
+    },
+    {
+        name: 'clearButton.showOnlyWhenFilled',
+        label: 'Clear: só quando preenchido',
+        editorType: 'checkbox',
+        group: 'Ações',
     },
     // Acessibilidade
-    { name: 'tabindex', label: 'TabIndex', editorType: 'number', group: 'Acessibilidade' },
+    {
+        name: 'tabindex',
+        label: 'TabIndex',
+        editorType: 'number',
+        group: 'Acessibilidade',
+    },
     // Atalhos/Preview
     {
         name: 'views',
@@ -6662,10 +7317,35 @@ const colorPickerProperties = [
             { value: 'palette', text: 'Palette' },
         ],
     },
-    { name: 'preview', label: 'Mostrar preview (pane)', editorType: 'checkbox', group: 'Atalhos/Preview', hint: 'Exibe área de preview da cor atual.' },
-    { name: 'showRecent', label: 'Mostrar recentes', editorType: 'checkbox', group: 'Atalhos/Preview', hint: 'Exibe cores usadas recentemente.' },
-    { name: 'maxRecent', label: 'Qtd. de recentes', editorType: 'number', group: 'Atalhos/Preview', defaultValue: 12, hint: 'Quantidade máxima de cores recentes.' },
-    { name: 'showNativeOption', label: 'Mostrar seletor nativo', editorType: 'checkbox', group: 'Atalhos/Preview', hint: 'Exibe input color nativo como opção.' },
+    {
+        name: 'preview',
+        label: 'Mostrar preview (pane)',
+        editorType: 'checkbox',
+        group: 'Atalhos/Preview',
+        hint: 'Exibe área de preview da cor atual.',
+    },
+    {
+        name: 'showRecent',
+        label: 'Mostrar recentes',
+        editorType: 'checkbox',
+        group: 'Atalhos/Preview',
+        hint: 'Exibe cores usadas recentemente.',
+    },
+    {
+        name: 'maxRecent',
+        label: 'Qtd. de recentes',
+        editorType: 'number',
+        group: 'Atalhos/Preview',
+        defaultValue: 12,
+        hint: 'Quantidade máxima de cores recentes.',
+    },
+    {
+        name: 'showNativeOption',
+        label: 'Mostrar seletor nativo',
+        editorType: 'checkbox',
+        group: 'Atalhos/Preview',
+        hint: 'Exibe input color nativo como opção.',
+    },
     {
         name: 'actionsLayout',
         label: 'Ações (layout)',
@@ -6678,17 +7358,12 @@ const colorPickerProperties = [
         ],
     },
     // Gradient
-    { name: 'gradientSettings.showOpacity', label: 'Gradiente: transparência (alpha)', editorType: 'checkbox', group: 'Atalhos/Preview', hint: 'Exibe controle de alpha no gradient.' },
     {
-        name: 'gradientSettings.channel',
-        label: 'Gradiente: canal',
-        editorType: 'select',
+        name: 'gradientSettings.showOpacity',
+        label: 'Gradiente: transparência (alpha)',
+        editorType: 'checkbox',
         group: 'Atalhos/Preview',
-        defaultValue: 'hsv',
-        options: [
-            { value: 'hsv', text: 'HSV' },
-            { value: 'hsl', text: 'HSL' },
-        ],
+        hint: 'Exibe controle de alpha no gradient.',
     },
 ];
 
@@ -8967,15 +9642,17 @@ const inlineColorLabelProperties = [
         name: 'colorLabelOptions',
         label: 'Opcoes de cor (JSON)',
         editorType: 'textarea',
-        group: 'Dados/Opcoes',
+        group: 'Dados/Opções',
         hint: 'Array JSON. Ex.: [{"label":"Azul","value":"blue","color":"#0ea5e9"}]',
     },
     {
         name: 'colorLabelPalette',
-        label: 'Paleta fallback (CSV/JSON)',
-        editorType: 'textarea',
-        group: 'Aparencia',
+        label: 'Paleta fallback',
+        editorType: 'color-palette',
+        group: 'Aparência',
+        validators: [colorPaletteValidator],
     },
+    ...governedColorPaletteProperties(),
     {
         name: 'colorLabelMultiple',
         label: 'Permitir multipla selecao',
@@ -9013,8 +9690,18 @@ const inlineColorLabelProperties = [
         ],
         hint: 'Define se o painel inline comita automaticamente ou mantém rascunho até Aplicar.',
     },
-    { name: 'inlineOverlay.actions.apply.label', label: 'Aplicar: label', editorType: 'text', group: 'Ações' },
-    { name: 'inlineOverlay.actions.apply.ariaLabel', label: 'Aplicar: aria-label', editorType: 'text', group: 'Ações' },
+    {
+        name: 'inlineOverlay.actions.apply.label',
+        label: 'Aplicar: label',
+        editorType: 'text',
+        group: 'Ações',
+    },
+    {
+        name: 'inlineOverlay.actions.apply.ariaLabel',
+        label: 'Aplicar: aria-label',
+        editorType: 'text',
+        group: 'Ações',
+    },
     {
         name: 'inlineOverlay.actions.apply.appearance',
         label: 'Aplicar: aparência',
@@ -9039,8 +9726,18 @@ const inlineColorLabelProperties = [
             { value: 'danger', text: 'Perigo' },
         ],
     },
-    { name: 'inlineOverlay.actions.cancel.label', label: 'Cancelar: label', editorType: 'text', group: 'Ações' },
-    { name: 'inlineOverlay.actions.cancel.ariaLabel', label: 'Cancelar: aria-label', editorType: 'text', group: 'Ações' },
+    {
+        name: 'inlineOverlay.actions.cancel.label',
+        label: 'Cancelar: label',
+        editorType: 'text',
+        group: 'Ações',
+    },
+    {
+        name: 'inlineOverlay.actions.cancel.ariaLabel',
+        label: 'Cancelar: aria-label',
+        editorType: 'text',
+        group: 'Ações',
+    },
     {
         name: 'inlineOverlay.actions.cancel.appearance',
         label: 'Cancelar: aparência',
@@ -9065,8 +9762,18 @@ const inlineColorLabelProperties = [
             { value: 'danger', text: 'Perigo' },
         ],
     },
-    { name: 'inlineOverlay.actions.clear.label', label: 'Limpar: label', editorType: 'text', group: 'Ações' },
-    { name: 'inlineOverlay.actions.clear.ariaLabel', label: 'Limpar: aria-label', editorType: 'text', group: 'Ações' },
+    {
+        name: 'inlineOverlay.actions.clear.label',
+        label: 'Limpar: label',
+        editorType: 'text',
+        group: 'Ações',
+    },
+    {
+        name: 'inlineOverlay.actions.clear.ariaLabel',
+        label: 'Limpar: aria-label',
+        editorType: 'text',
+        group: 'Ações',
+    },
     {
         name: 'inlineOverlay.actions.clear.appearance',
         label: 'Limpar: aparência',
@@ -9101,27 +9808,29 @@ const inlineColorLabelProperties = [
         name: 'colorLabelIcon',
         label: 'Icone do trigger',
         editorType: 'text',
-        group: 'Icones',
+        group: 'Ícones',
     },
     {
         name: 'colorLabelBadgeRemoveIcon',
         label: 'Icone remover badge',
         editorType: 'text',
-        group: 'Icones',
+        group: 'Ícones',
         hint: 'Icone usado para remover item selecionado nos badges (fallback: close).',
     },
     {
         name: 'colorLabelBadgeRemoveIconColor',
         label: 'Cor remover badge',
         editorType: 'color',
-        group: 'Icones',
+        group: 'Ícones',
         hint: 'primary/accent/warn ou cor CSS.',
     },
     {
         name: 'colorLabelColorKey',
         label: 'Chave color da opcao',
+        labelKey: 'inlineColorLabel.colorKey.label',
+        hintKey: 'inlineColorLabel.colorKey.hint',
         editorType: 'text',
-        group: 'Dados/Opcoes',
+        group: 'Dados/Opções',
     },
     {
         name: 'colorLabelOptionsAriaLabel',
@@ -9159,7 +9868,7 @@ const inlineColorLabelProperties = [
         name: 'inlineAutoSize.panelMinWidth',
         label: 'Painel minimo (desktop)',
         editorType: 'number',
-        group: 'Aparencia',
+        group: 'Aparência',
         row: 'inline-size.panel.desktop',
         inline: true,
     },
@@ -9167,7 +9876,7 @@ const inlineColorLabelProperties = [
         name: 'inlineAutoSize.panelMaxWidth',
         label: 'Painel maximo (desktop)',
         editorType: 'number',
-        group: 'Aparencia',
+        group: 'Aparência',
         row: 'inline-size.panel.desktop',
         inline: true,
     },
@@ -9175,7 +9884,7 @@ const inlineColorLabelProperties = [
         name: 'inlineAutoSize.panelMinWidthMobile',
         label: 'Painel minimo (mobile)',
         editorType: 'number',
-        group: 'Aparencia',
+        group: 'Aparência',
         row: 'inline-size.panel.mobile',
         inline: true,
     },
@@ -9183,7 +9892,7 @@ const inlineColorLabelProperties = [
         name: 'inlineAutoSize.panelMaxWidthMobile',
         label: 'Painel maximo (mobile)',
         editorType: 'number',
-        group: 'Aparencia',
+        group: 'Aparência',
         row: 'inline-size.panel.mobile',
         inline: true,
     },
@@ -12148,7 +12857,7 @@ class CascadeManagerTabComponent {
         </div>
       }
     </div>
-    `, isInline: true, styles: [":host{display:block}.cm-root{display:grid;grid-template-columns:320px 1fr;gap:16px;min-height:420px}.cm-left{border-right:1px solid var(--md-sys-color-outline-variant);padding-right:8px}.cm-search{width:100%;margin-bottom:8px}.cm-right{padding-left:8px}.field-item{display:flex;align-items:center;justify-content:space-between;padding:8px 6px;cursor:pointer;border-radius:10px;transition:background .12s ease,border .12s ease;border:1px solid transparent}.field-item:hover{background:var(--md-sys-color-surface-container-high)}.field-item.selected{background:var(--md-sys-color-surface-container-highest);border-color:var(--md-sys-color-outline-variant)}.rule-badges{display:inline-flex;gap:6px}.rule-badge{font-size:11px;padding:2px 8px;border-radius:999px;font-weight:600}.b-active{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.b-manual{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant)}.b-immediate{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.b-conflict{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.cm-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.rules-empty{opacity:.8;font-style:italic;padding:8px 0;color:var(--md-sys-color-on-surface-variant)}.rule-row{display:grid;grid-template-columns:1fr auto;align-items:center;padding:10px 0;border-bottom:1px dashed var(--md-sys-color-outline-variant)}.rule-actions button{margin-left:4px}.banner{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container);padding:10px 12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;margin-bottom:10px;display:flex;gap:8px;align-items:center}.import-panel{background:var(--md-sys-color-surface-container-high);border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;padding:10px;margin-bottom:10px}.full{width:100%}.form-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.form-grid{display:grid;gap:12px;padding:8px 0}.map-table{width:100%;border-collapse:collapse}.map-table th,.map-table td{padding:8px;border-bottom:1px dashed var(--md-sys-color-outline-variant)}.kbd{font-family:monospace;background:var(--md-sys-color-surface-container-highest);padding:0 6px;border-radius:4px;color:var(--md-sys-color-on-surface-variant)}.panel-surface{background:var(--md-sys-color-surface-container-high);border:1px solid var(--md-sys-color-outline-variant);border-radius:10px;box-shadow:var(--md-sys-elevation-level1, none);margin-bottom:12px}.panel-stack{display:grid;gap:12px;margin:12px 0}.stack-panel{background:var(--md-sys-color-surface-container-high);border:1px solid var(--md-sys-color-outline-variant);border-radius:10px;box-shadow:var(--md-sys-elevation-level1, none)}.stack-panel .mat-expansion-panel-content{padding:0 16px 12px}.panel-header{display:flex;align-items:center;gap:8px}.preview-box{background:var(--md-sys-color-surface-container-low);border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;padding:8px;color:var(--md-sys-color-on-surface)}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;margin-right:-4px}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.mat-mdc-form-field-icon-suffix{align-self:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.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: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.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: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i9.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i5$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i12.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i12.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i13.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i13.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i13.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
+    `, isInline: true, styles: [":host{display:block}.cm-root{display:grid;grid-template-columns:320px 1fr;gap:16px;min-height:420px}.cm-left{border-right:1px solid var(--md-sys-color-outline-variant);padding-right:8px}.cm-search{width:100%;margin-bottom:8px}.cm-right{padding-left:8px}.field-item{display:flex;align-items:center;justify-content:space-between;padding:8px 6px;cursor:pointer;border-radius:10px;transition:background .12s ease,border .12s ease;border:1px solid transparent}.field-item:hover{background:var(--md-sys-color-surface-container-high)}.field-item.selected{background:var(--md-sys-color-surface-container-highest);border-color:var(--md-sys-color-outline-variant)}.rule-badges{display:inline-flex;gap:6px}.rule-badge{font-size:11px;padding:2px 8px;border-radius:999px;font-weight:600}.b-active{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.b-manual{background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant)}.b-immediate{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.b-conflict{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.cm-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.rules-empty{opacity:.8;font-style:italic;padding:8px 0;color:var(--md-sys-color-on-surface-variant)}.rule-row{display:grid;grid-template-columns:1fr auto;align-items:center;padding:10px 0;border-bottom:1px dashed var(--md-sys-color-outline-variant)}.rule-actions button{margin-left:4px}.banner{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container);padding:10px 12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;margin-bottom:10px;display:flex;gap:8px;align-items:center}.import-panel{background:var(--md-sys-color-surface-container-high);border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;padding:10px;margin-bottom:10px}.full{width:100%}.form-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.form-grid{display:grid;gap:12px;padding:8px 0}.map-table{width:100%;border-collapse:collapse}.map-table th,.map-table td{padding:8px;border-bottom:1px dashed var(--md-sys-color-outline-variant)}.kbd{font-family:monospace;background:var(--md-sys-color-surface-container-highest);padding:0 6px;border-radius:4px;color:var(--md-sys-color-on-surface-variant)}.panel-surface{background:var(--md-sys-color-surface-container-high);border:1px solid var(--md-sys-color-outline-variant);border-radius:10px;box-shadow:var(--md-sys-elevation-level1, none);margin-bottom:12px}.panel-stack{display:grid;gap:12px;margin:12px 0}.stack-panel{background:var(--md-sys-color-surface-container-high);border:1px solid var(--md-sys-color-outline-variant);border-radius:10px;box-shadow:var(--md-sys-elevation-level1, none)}.stack-panel .mat-expansion-panel-content{padding:0 16px 12px}.panel-header{display:flex;align-items:center;gap:8px}.preview-box{background:var(--md-sys-color-surface-container-low);border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;padding:8px;color:var(--md-sys-color-on-surface)}.help-icon-button{--mdc-icon-button-state-layer-size: 28px;--mdc-icon-button-icon-size: 18px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;margin-right:-4px}.help-icon-button mat-icon{font-size:18px;width:18px;height:18px}.mat-mdc-form-field-icon-suffix{align-self:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.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: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.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: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i9.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i5$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5$1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i12.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i12.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i13.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i13.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i13.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CascadeManagerTabComponent, decorators: [{
             type: Component,