@praxisui/dynamic-fields 4.0.0-beta.0 → 5.0.0-beta.0

package/README.md

@@ -119,7 +119,7 @@ Peers (instale no app host):
 - `@angular/core` `^20.1.0`, `@angular/common` `^20.1.0`, `@angular/forms` `^20.1.0`
 - `@angular/material` `^20.1.0`, `@angular/cdk` `^20.1.0`, `@angular/router` `^20.1.0`
 - `rxjs` `^7.8.0`
-- `@praxisui/core`, `@praxisui/specification-core`
+- `@praxisui/core`
 - Opcional conforme uso: `@praxisui/dialog`, `@praxisui/cron-builder`
 
 ## ✨ Características

package/fesm2022/praxisui-dynamic-fields.mjs

@@ -2625,6 +2625,12 @@ class SimpleBaseSelectComponent extends SimpleBaseInputComponent {
             ? this.options().filter((o) => o.label.toLowerCase().includes(term))
             : this.options();
     }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
+    /**
+     * Applies typed metadata to the select component.
+     */
+    setInputMetadata(metadata) {
+        this.setSelectMetadata(metadata);
+    }
     /**
      * Applies typed metadata to the select component.
      */
@@ -2726,6 +2732,12 @@ class SimpleBaseSelectComponent extends SimpleBaseInputComponent {
         });
         return st.readonly;
     }
+    isInteractionDisabled() {
+        return (!!this.disabledMode ||
+            this.control().disabled ||
+            this.isReadonlyEffective() ||
+            !!this.presentationMode);
+    }
     /** Whether to show the clear button (if enabled in metadata) */
     showClear() {
         const cfg = this.metadata()?.clearButton;
@@ -6444,7 +6456,7 @@ class MaterialSelectComponent extends SimpleBaseSelectComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MaterialSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: MaterialSelectComponent, isStandalone: true, selector: "pdx-material-select", inputs: { readonlyMode: "readonlyMode", disabledMode: "disabledMode", visible: "visible", presentationMode: "presentationMode" }, host: { properties: { "class": "componentCssClasses()", "class.praxis-disabled": "disabledMode", "style.display": "visible ? \"block\" : \"none\"", "attr.aria-hidden": "visible ? null : \"true\"", "style.width": "\"100%\"", "attr.data-field-type": "\"select\"", "attr.data-field-name": "metadata()?.name", "attr.data-component-id": "componentId()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: MaterialSelectComponent, isStandalone: true, selector: "pdx-material-select", inputs: { readonlyMode: "readonlyMode", disabledMode: "disabledMode", visible: "visible", presentationMode: "presentationMode" }, host: { properties: { "class": "componentCssClasses()", "class.praxis-disabled": "isInteractionDisabled()", "style.display": "visible ? \"block\" : \"none\"", "attr.aria-hidden": "visible ? null : \"true\"", "style.width": "\"100%\"", "attr.data-field-type": "\"select\"", "attr.data-field-name": "metadata()?.name", "attr.data-component-id": "componentId()" } }, providers: [
             GenericCrudService,
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -6473,6 +6485,7 @@ class MaterialSelectComponent extends SimpleBaseSelectComponent {
       <mat-select
         [errorStateMatcher]="errorStateMatcher()"
         [formControl]="control()"
+        [disabled]="isInteractionDisabled()"
         [required]="metadata()?.required || false"
         [matTooltip]="tooltipEnabled() ? errorMessage() : null"
         [matTooltipDisabled]="!(tooltipEnabled() && !!errorMessage())"
@@ -6519,7 +6532,7 @@ class MaterialSelectComponent extends SimpleBaseSelectComponent {
           matSuffix
           type="button"
           (click)="onClearClick()"
-          [disabled]="disabledMode || isReadonlyEffective() || presentationMode"
+          [disabled]="isInteractionDisabled()"
           [matTooltip]="clearActionTooltip()"
           [attr.aria-label]="clearActionAriaLabel()"
         >
@@ -6577,6 +6590,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
       <mat-select
         [errorStateMatcher]="errorStateMatcher()"
         [formControl]="control()"
+        [disabled]="isInteractionDisabled()"
         [required]="metadata()?.required || false"
         [matTooltip]="tooltipEnabled() ? errorMessage() : null"
         [matTooltipDisabled]="!(tooltipEnabled() && !!errorMessage())"
@@ -6623,7 +6637,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           matSuffix
           type="button"
           (click)="onClearClick()"
-          [disabled]="disabledMode || isReadonlyEffective() || presentationMode"
+          [disabled]="isInteractionDisabled()"
           [matTooltip]="clearActionTooltip()"
           [attr.aria-label]="clearActionAriaLabel()"
         >
@@ -6652,7 +6666,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                     ],
                     host: {
                         '[class]': 'componentCssClasses()',
-                        '[class.praxis-disabled]': 'disabledMode',
+                        '[class.praxis-disabled]': 'isInteractionDisabled()',
                         '[style.display]': 'visible ? "block" : "none"',
                         '[attr.aria-hidden]': 'visible ? null : "true"',
                         '[style.width]': '"100%"',
@@ -10536,6 +10550,7 @@ class DynamicFieldLoaderDirective {
         if (!metadataAssigned) {
             logger.warn(`[DynamicFieldLoader] Component for field '${field.name}' does not support metadata assignment`);
         }
+        this.applyShellEffectiveStatesToComponent(instance, shellRef.instance);
         // Associar FormControl
         const control = this.formGroup?.get(field.name) ?? null;
         if (control) {
@@ -10587,6 +10602,7 @@ class DynamicFieldLoaderDirective {
                     instance.metadata.set(fieldWithId);
                 }
                 this.dbg('[DFL] step: reapply metadata done', { name: field.name });
+                this.applyShellEffectiveStatesToComponent(instance, shellRef.instance);
             }
             catch (e) {
                 logger.warn(`[DynamicFieldLoader] Failed to reapply metadata after control binding for '${field.name}':`, e);
@@ -10646,8 +10662,33 @@ class DynamicFieldLoaderDirective {
                 shellRef.instance.visible = this.visible !== false ? true : false;
             }
             shellRef.changeDetectorRef.detectChanges();
+            const compRef = this.componentRefs.get(shellRef.instance.field?.name);
+            if (compRef) {
+                this.applyShellEffectiveStatesToComponent(compRef.instance, shellRef.instance);
+                try {
+                    compRef.changeDetectorRef.detectChanges();
+                }
+                catch { }
+            }
         });
     }
+    applyShellEffectiveStatesToComponent(instance, shell) {
+        if (!instance || !shell) {
+            return;
+        }
+        if ('readonlyMode' in instance) {
+            instance.readonlyMode = shell.effectiveReadonlyMode;
+        }
+        if ('disabledMode' in instance) {
+            instance.disabledMode = shell.effectiveDisabledMode;
+        }
+        if ('presentationMode' in instance) {
+            instance.presentationMode = shell.effectivePresentationMode;
+        }
+        if ('visible' in instance) {
+            instance.visible = shell.effectiveVisible;
+        }
+    }
     // =============================================================================
     // PRIVATE METHODS - FIELD INFERENCE (fallback mínimo)
     // =============================================================================
@@ -17380,7 +17421,7 @@ class MaterialSearchableSelectComponent extends SimpleBaseSelectComponent {
             this.reload(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MaterialSearchableSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: MaterialSearchableSelectComponent, isStandalone: true, selector: "pdx-material-searchable-select", inputs: { readonlyMode: "readonlyMode", disabledMode: "disabledMode", visible: "visible", presentationMode: "presentationMode" }, host: { properties: { "class": "componentCssClasses()", "class.praxis-disabled": "disabledMode", "style.display": "visible ? null : \"none\"", "attr.aria-hidden": "visible ? null : \"true\"", "attr.data-field-type": "\"searchable-select\"", "attr.data-field-name": "metadata()?.name", "attr.data-component-id": "componentId()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: MaterialSearchableSelectComponent, isStandalone: true, selector: "pdx-material-searchable-select", inputs: { readonlyMode: "readonlyMode", disabledMode: "disabledMode", visible: "visible", presentationMode: "presentationMode" }, host: { properties: { "class": "componentCssClasses()", "class.praxis-disabled": "isInteractionDisabled()", "style.display": "visible ? null : \"none\"", "attr.aria-hidden": "visible ? null : \"true\"", "attr.data-field-type": "\"searchable-select\"", "attr.data-field-name": "metadata()?.name", "attr.data-component-id": "componentId()" } }, providers: [
             GenericCrudService,
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -17401,6 +17442,7 @@ class MaterialSearchableSelectComponent extends SimpleBaseSelectComponent {
         <mat-select
           multiple
           [formControl]="control()"
+          [disabled]="isInteractionDisabled()"
           [required]="metadata()?.required || false"
           (openedChange)="onOpened($event)"
           [matTooltip]="tooltipEnabled() ? errorMessage() : null"
@@ -17441,6 +17483,7 @@ class MaterialSearchableSelectComponent extends SimpleBaseSelectComponent {
       } @else {
         <mat-select
           [formControl]="control()"
+          [disabled]="isInteractionDisabled()"
           [required]="metadata()?.required || false"
           (openedChange)="onOpened($event)"
           [matTooltip]="tooltipEnabled() ? errorMessage() : null"
@@ -17503,7 +17546,7 @@ class MaterialSearchableSelectComponent extends SimpleBaseSelectComponent {
           matSuffix
           type="button"
           (click)="onClearClick()"
-          [disabled]="disabledMode || isReadonlyEffective() || presentationMode"
+          [disabled]="isInteractionDisabled()"
           [matTooltip]="clearActionTooltip()"
           [attr.aria-label]="clearActionAriaLabel()"
         >
@@ -17555,6 +17598,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         <mat-select
           multiple
           [formControl]="control()"
+          [disabled]="isInteractionDisabled()"
           [required]="metadata()?.required || false"
           (openedChange)="onOpened($event)"
           [matTooltip]="tooltipEnabled() ? errorMessage() : null"
@@ -17595,6 +17639,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
       } @else {
         <mat-select
           [formControl]="control()"
+          [disabled]="isInteractionDisabled()"
           [required]="metadata()?.required || false"
           (openedChange)="onOpened($event)"
           [matTooltip]="tooltipEnabled() ? errorMessage() : null"
@@ -17657,7 +17702,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           matSuffix
           type="button"
           (click)="onClearClick()"
-          [disabled]="disabledMode || isReadonlyEffective() || presentationMode"
+          [disabled]="isInteractionDisabled()"
           [matTooltip]="clearActionTooltip()"
           [attr.aria-label]="clearActionAriaLabel()"
         >
@@ -17687,7 +17732,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                     ],
                     host: {
                         '[class]': 'componentCssClasses()',
-                        '[class.praxis-disabled]': 'disabledMode',
+                        '[class.praxis-disabled]': 'isInteractionDisabled()',
                         '[style.display]': 'visible ? null : "none"',
                         '[attr.aria-hidden]': 'visible ? null : "true"',
                         '[attr.data-field-type]': '"searchable-select"',
@@ -18541,7 +18586,7 @@ class MaterialAsyncSelectComponent extends SimpleBaseSelectComponent {
         return this.tDynamicFields('select.loadOptionsError', '');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MaterialAsyncSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: MaterialAsyncSelectComponent, isStandalone: true, selector: "pdx-material-async-select", inputs: { readonlyMode: "readonlyMode", disabledMode: "disabledMode", visible: "visible", presentationMode: "presentationMode" }, host: { properties: { "class": "componentCssClasses()", "class.praxis-disabled": "disabledMode", "style.display": "visible ? null : \"none\"", "attr.aria-hidden": "visible ? null : \"true\"", "attr.data-field-type": "\"async-select\"", "attr.data-field-name": "metadata()?.name", "attr.data-component-id": "componentId()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: MaterialAsyncSelectComponent, isStandalone: true, selector: "pdx-material-async-select", inputs: { readonlyMode: "readonlyMode", disabledMode: "disabledMode", visible: "visible", presentationMode: "presentationMode" }, host: { properties: { "class": "componentCssClasses()", "class.praxis-disabled": "isInteractionDisabled()", "style.display": "visible ? null : \"none\"", "attr.aria-hidden": "visible ? null : \"true\"", "attr.data-field-type": "\"async-select\"", "attr.data-field-name": "metadata()?.name", "attr.data-component-id": "componentId()" } }, providers: [
             GenericCrudService,
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -18561,6 +18606,7 @@ class MaterialAsyncSelectComponent extends SimpleBaseSelectComponent {
       <mat-select
         [errorStateMatcher]="errorStateMatcher()"
         [formControl]="control()"
+        [disabled]="isInteractionDisabled()"
         [multiple]="multiple()"
         [required]="metadata()?.required || false"
         (openedChange)="onOpened($event)"
@@ -18624,7 +18670,7 @@ class MaterialAsyncSelectComponent extends SimpleBaseSelectComponent {
           matSuffix
           type="button"
           (click)="onClearClick()"
-          [disabled]="disabledMode || isReadonlyEffective() || presentationMode"
+          [disabled]="isInteractionDisabled()"
           [matTooltip]="clearActionTooltip()"
           [attr.aria-label]="clearActionAriaLabel()"
         >
@@ -18675,6 +18721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
       <mat-select
         [errorStateMatcher]="errorStateMatcher()"
         [formControl]="control()"
+        [disabled]="isInteractionDisabled()"
         [multiple]="multiple()"
         [required]="metadata()?.required || false"
         (openedChange)="onOpened($event)"
@@ -18738,7 +18785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           matSuffix
           type="button"
           (click)="onClearClick()"
-          [disabled]="disabledMode || isReadonlyEffective() || presentationMode"
+          [disabled]="isInteractionDisabled()"
           [matTooltip]="clearActionTooltip()"
           [attr.aria-label]="clearActionAriaLabel()"
         >
@@ -18768,7 +18815,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                     ],
                     host: {
                         '[class]': 'componentCssClasses()',
-                        '[class.praxis-disabled]': 'disabledMode',
+                        '[class.praxis-disabled]': 'isInteractionDisabled()',
                         '[style.display]': 'visible ? null : "none"',
                         '[attr.aria-hidden]': 'visible ? null : "true"',
                         '[attr.data-field-type]': '"async-select"',
@@ -24802,6 +24849,12 @@ class InlineToggleComponent extends SimpleBaseInputComponent {
         const fromMeta = this.resolveFieldLabelFromMetadata(this.metadata() || {});
         return fromMeta || this.fieldLabelText || 'Filtro';
     }
+    toggleLabelText() {
+        const label = this.placeholderText();
+        if (!this.hasSelection())
+            return label;
+        return `${label}: ${this.isTrue() ? 'On' : 'Off'}`;
+    }
     ariaLabel() {
         const label = this.placeholderText();
         if (!this.hasSelection())
@@ -24880,7 +24933,7 @@ class InlineToggleComponent extends SimpleBaseInputComponent {
       </mat-slide-toggle>
 
       @if (showTextLabel()) {
-        <span class="pdx-inline-toggle-label">{{ placeholderText() }}</span>
+        <span class="pdx-inline-toggle-label">{{ toggleLabelText() }}</span>
       }
 
       @if (showQuickClear()) {
@@ -24931,7 +24984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
       </mat-slide-toggle>
 
       @if (showTextLabel()) {
-        <span class="pdx-inline-toggle-label">{{ placeholderText() }}</span>
+        <span class="pdx-inline-toggle-label">{{ toggleLabelText() }}</span>
       }
 
       @if (showQuickClear()) {
@@ -32658,6 +32711,10 @@ class InlineTreeSelectComponent extends SimpleBaseSelectComponent {
         });
         this.recalculateInlineSizeBounds();
     }
+    writeValue(value) {
+        super.writeValue(value);
+        this.syncSelectedState(value);
+    }
     setInputMetadata(metadata) {
         this.setTreeMetadata(metadata);
     }
@@ -32838,21 +32895,22 @@ class InlineTreeSelectComponent extends SimpleBaseSelectComponent {
         return this.tDynamicFields('inlineTreeSelect.emptyDefault', '');
     }
     displayText() {
-        if (!this.hasSelection()) {
+        const lookup = this.currentSelectionLookup();
+        if (!lookup) {
             return this.placeholderText();
         }
-        const pathLabels = this.selectedPathLabels();
+        const pathLabels = lookup.path.map((item) => item.label);
         if (this.returnPath() && pathLabels.length > 0) {
             return pathLabels.join(' / ');
         }
-        const node = this.selectedNode();
+        const node = lookup.node;
         if (node?.label) {
             return node.label;
         }
         return this.placeholderText();
     }
     hasSelection() {
-        return !!this.selectedNode();
+        return !!this.currentSelectionLookup();
     }
     placeholderText() {
         const fromMeta = this.resolveFieldLabelFromMetadata(this.currentMetadata());
@@ -32973,6 +33031,9 @@ class InlineTreeSelectComponent extends SimpleBaseSelectComponent {
         this.selectedNode.set(lookup?.node ?? null);
         this.selectedPathLabels.set(lookup?.path?.map((item) => item.label) ?? []);
     }
+    currentSelectionLookup() {
+        return this.findNodeByCurrentValue(this.control().value, this.allNodes, []);
+    }
     findNodeByCurrentValue(currentValue, nodes, path) {
         for (const node of nodes) {
             const nextPath = [...path, node];
@@ -34401,6 +34462,21 @@ class InlineDistanceRadiusComponent extends InlineRangeSliderComponent {
         if (mode === 'single') {
             return false;
         }
+        const rawValue = this.currentRawDistanceValue();
+        if (rawValue && typeof rawValue === 'object' && !Array.isArray(rawValue)) {
+            const valueRecord = rawValue;
+            const hasRangeShape = 'start' in valueRecord ||
+                'end' in valueRecord ||
+                'from' in valueRecord ||
+                'to' in valueRecord ||
+                'min' in valueRecord ||
+                'max' in valueRecord ||
+                'minPrice' in valueRecord ||
+                'maxPrice' in valueRecord;
+            if (hasRangeShape) {
+                return true;
+            }
+        }
         return super.isRangeMode();
     }
     chipLeadingIcon() {
@@ -34437,6 +34513,15 @@ class InlineDistanceRadiusComponent extends InlineRangeSliderComponent {
         }
         return this.distanceSingleLabel(value);
     }
+    displayText() {
+        return this.currentSelectionText();
+    }
+    hasSelection() {
+        if (this.isRangeMode()) {
+            return !!this.currentRangeBaseValue();
+        }
+        return this.currentBaseValue() !== null;
+    }
     ariaLabel() {
         if (!this.hasSelection())
             return this.placeholderText();
@@ -34743,7 +34828,7 @@ class InlineDistanceRadiusComponent extends InlineRangeSliderComponent {
         return Math.max(0, Math.min(1, Number(candidate.toFixed(3))));
     }
     currentBaseValue() {
-        const raw = this.control().value;
+        const raw = this.currentRawDistanceValue();
         if (raw === null || raw === undefined || raw === '')
             return null;
         const parsed = Number(raw);
@@ -34753,7 +34838,7 @@ class InlineDistanceRadiusComponent extends InlineRangeSliderComponent {
     }
     currentRangeBaseValue() {
         const md = this.currentDistanceMetadata();
-        const raw = this.control().value;
+        const raw = this.currentRawDistanceValue();
         if (!raw || typeof raw !== 'object')
             return null;
         const rawValue = raw;
@@ -34764,6 +34849,17 @@ class InlineDistanceRadiusComponent extends InlineRangeSliderComponent {
             end: this.toDistanceNumberOrNull(endRaw),
         });
     }
+    currentRawDistanceValue() {
+        const controlValue = this.control().value;
+        if (controlValue !== null && controlValue !== undefined && controlValue !== '') {
+            return controlValue;
+        }
+        const fieldValue = this.fieldState().value;
+        if (fieldValue !== null && fieldValue !== undefined && fieldValue !== '') {
+            return fieldValue;
+        }
+        return controlValue;
+    }
     currentRadialBaseValue() {
         if (this.isRangeMode()) {
             const range = this.currentRangeBaseValue();
@@ -39001,7 +39097,7 @@ class InlineSentimentComponent extends SimpleBaseSelectComponent {
         return this.displayText();
     }
     hasSelection() {
-        const value = this.control().value;
+        const value = this.currentRawSelectionValue();
         if (this.multipleMode()) {
             return Array.isArray(value) && value.length > 0;
         }
@@ -39011,7 +39107,7 @@ class InlineSentimentComponent extends SimpleBaseSelectComponent {
         if (!this.hasSelection()) {
             return this.placeholderText();
         }
-        const selected = this.selectedOptions();
+        const selected = this.currentSelectionVisuals();
         if (!selected.length) {
             return this.placeholderText();
         }
@@ -39124,7 +39220,7 @@ class InlineSentimentComponent extends SimpleBaseSelectComponent {
         return optionPool.map((option, index) => this.toVisualOption(option, index, optionPool.length));
     }
     selectedOptions() {
-        return this.sentimentOptions().filter((option) => option.selected);
+        return this.currentSelectionVisuals();
     }
     showSelectionPills() {
         const md = this.currentMetadata();
@@ -39299,7 +39395,7 @@ class InlineSentimentComponent extends SimpleBaseSelectComponent {
             .filter((entry) => entry.length > 0);
     }
     selectedValues() {
-        const value = this.control().value;
+        const value = this.currentRawSelectionValue();
         if (this.multipleMode()) {
             return Array.isArray(value) ? value : [];
         }
@@ -39308,6 +39404,58 @@ class InlineSentimentComponent extends SimpleBaseSelectComponent {
         }
         return [value];
     }
+    currentRawSelectionValue() {
+        const controlValue = this.control().value;
+        if (controlValue !== null && controlValue !== undefined && controlValue !== '') {
+            return controlValue;
+        }
+        const fieldValue = this.fieldState().value;
+        if (fieldValue !== null && fieldValue !== undefined && fieldValue !== '') {
+            return fieldValue;
+        }
+        return controlValue;
+    }
+    currentSelectionVisuals() {
+        const selectedValues = this.selectedValues();
+        if (!selectedValues.length) {
+            return [];
+        }
+        const optionPool = this.sentimentOptions();
+        const visuals = [];
+        for (const selectedValue of selectedValues) {
+            const matched = optionPool.find((option) => this.equalsOptionValue(option.value, selectedValue));
+            if (matched) {
+                visuals.push(matched);
+                continue;
+            }
+            visuals.push(this.fallbackVisualFromValue(selectedValue, optionPool.length + visuals.length));
+        }
+        return visuals;
+    }
+    fallbackVisualFromValue(value, index) {
+        const rawOptions = this.parseOptionsSource(this.currentMetadata().sentimentOptions) ??
+            this.parseOptionsSource(this.currentMetadata().options) ??
+            DEFAULT_SENTIMENT_OPTIONS;
+        const optionRecord = rawOptions
+            .map((entry) => this.asRecord(entry))
+            .find((entry) => entry && this.equalsOptionValue(entry.value ?? entry.id ?? entry.key ?? entry.code, value));
+        const label = String(optionRecord?.label ??
+            optionRecord?.text ??
+            optionRecord?.name ??
+            optionRecord?.title ??
+            value ??
+            '').trim();
+        return {
+            id: String(optionRecord?.id ?? optionRecord?.key ?? `sentiment-selected-${index}`),
+            label: label || String(value ?? this.placeholderText()).trim() || this.placeholderText(),
+            subtitle: String(optionRecord?.subtitle ?? optionRecord?.description ?? '').trim(),
+            emoji: this.resolveOptionEmoji(optionRecord ?? {}),
+            color: this.resolveOptionColor(optionRecord ?? {}, index, Math.max(rawOptions.length, index + 1)),
+            value,
+            disabled: false,
+            selected: true,
+        };
+    }
     resolveCloseOnSelect() {
         const md = this.currentMetadata();
         if (typeof md.sentimentCloseOnSelect === 'boolean') {
@@ -40915,7 +41063,7 @@ class MaterialMultiSelectComponent extends SimpleBaseSelectComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: MaterialMultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: MaterialMultiSelectComponent, isStandalone: true, selector: "pdx-material-multi-select", inputs: { readonlyMode: "readonlyMode", disabledMode: "disabledMode", visible: "visible", presentationMode: "presentationMode" }, host: { properties: { "class": "componentCssClasses()", "class.praxis-disabled": "disabledMode", "style.display": "visible ? null : \"none\"", "attr.aria-hidden": "visible ? null : \"true\"", "attr.data-field-type": "\"multi-select\"", "attr.data-field-name": "metadata()?.name", "attr.data-component-id": "componentId()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: MaterialMultiSelectComponent, isStandalone: true, selector: "pdx-material-multi-select", inputs: { readonlyMode: "readonlyMode", disabledMode: "disabledMode", visible: "visible", presentationMode: "presentationMode" }, host: { properties: { "class": "componentCssClasses()", "class.praxis-disabled": "isInteractionDisabled()", "style.display": "visible ? null : \"none\"", "attr.aria-hidden": "visible ? null : \"true\"", "attr.data-field-type": "\"multi-select\"", "attr.data-field-name": "metadata()?.name", "attr.data-component-id": "componentId()" } }, providers: [
             GenericCrudService,
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -40944,6 +41092,7 @@ class MaterialMultiSelectComponent extends SimpleBaseSelectComponent {
         [errorStateMatcher]="errorStateMatcher()"
         multiple
         [formControl]="control()"
+        [disabled]="isInteractionDisabled()"
         [required]="metadata()?.required || false"
         [matTooltip]="tooltipEnabled() ? errorMessage() : null"
         [matTooltipDisabled]="!(tooltipEnabled() && !!errorMessage())"
@@ -40991,7 +41140,7 @@ class MaterialMultiSelectComponent extends SimpleBaseSelectComponent {
           matSuffix
           type="button"
           (click)="onClearClick()"
-          [disabled]="disabledMode || isReadonlyEffective() || presentationMode"
+          [disabled]="isInteractionDisabled()"
           [matTooltip]="clearActionTooltip()"
           [attr.aria-label]="clearActionAriaLabel()"
         >
@@ -41049,6 +41198,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         [errorStateMatcher]="errorStateMatcher()"
         multiple
         [formControl]="control()"
+        [disabled]="isInteractionDisabled()"
         [required]="metadata()?.required || false"
         [matTooltip]="tooltipEnabled() ? errorMessage() : null"
         [matTooltipDisabled]="!(tooltipEnabled() && !!errorMessage())"
@@ -41096,7 +41246,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           matSuffix
           type="button"
           (click)="onClearClick()"
-          [disabled]="disabledMode || isReadonlyEffective() || presentationMode"
+          [disabled]="isInteractionDisabled()"
           [matTooltip]="clearActionTooltip()"
           [attr.aria-label]="clearActionAriaLabel()"
         >
@@ -41125,7 +41275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                     ],
                     host: {
                         '[class]': 'componentCssClasses()',
-                        '[class.praxis-disabled]': 'disabledMode',
+                        '[class.praxis-disabled]': 'isInteractionDisabled()',
                         '[style.display]': 'visible ? null : "none"',
                         '[attr.aria-hidden]': 'visible ? null : "true"',
                         '[attr.data-field-type]': '"multi-select"',
@@ -49346,6 +49496,108 @@ function createDefaultSeedRecipe(initialValue, note) {
         note,
     };
 }
+function createFilledSeedRecipe(initialValue, note, metadataPatch) {
+    return {
+        state: 'filled',
+        label: 'Filled',
+        supported: true,
+        initialValue,
+        note,
+        metadataPatch,
+    };
+}
+const INLINE_ASYNC_SELECT_PREVIEW_METADATA = {
+    searchable: true,
+    options: [
+        { label: 'Tony Stark', value: 'TONY', subtitle: 'Stark Industries' },
+        { label: 'Carol Danvers', value: 'CAROL', subtitle: 'Deep-space response' },
+        { label: 'Natasha Romanoff', value: 'NATASHA', subtitle: 'Intelligence desk' },
+    ],
+};
+const INLINE_TREE_SELECT_PREVIEW_METADATA = {
+    searchable: true,
+    nodes: [
+        {
+            label: 'Command center',
+            value: 'command-center',
+            children: [
+                { label: 'Operations board', value: 'operations-board' },
+                { label: 'Audit trail', value: 'audit-trail' },
+            ],
+        },
+        {
+            label: 'Field squads',
+            value: 'field-squads',
+            children: [
+                { label: 'Rapid response', value: 'rapid-response' },
+                { label: 'Evidence team', value: 'evidence-team' },
+            ],
+        },
+    ],
+};
+const INLINE_PIPELINE_STATUS_PREVIEW_METADATA = {
+    multiple: true,
+    options: [
+        { label: 'Qualified', value: 'QUALIFIED', subtitle: 'Ready for analyst review', color: '#38bdf8', weight: 2 },
+        { label: 'Investigating', value: 'INVESTIGATING', subtitle: 'Evidence collection active', color: '#a855f7', weight: 3 },
+        { label: 'Approved', value: 'APPROVED', subtitle: 'Cleared for execution', color: '#22c55e', weight: 2 },
+        { label: 'Escalated', value: 'ESCALATED', subtitle: 'Needs leadership action', color: '#f97316', weight: 1 },
+    ],
+};
+const INLINE_RELATIVE_PERIOD_PREVIEW_METADATA = {
+    relativePeriodShowProgress: true,
+    relativePeriodColumns: 2,
+};
+const INLINE_COLOR_LABEL_PREVIEW_METADATA = {
+    multiple: true,
+    options: [
+        { id: 'critical', label: 'Critical', value: 'critical', color: '#ef4444', subtitle: 'Immediate escalation' },
+        { id: 'watch', label: 'Watchlist', value: 'watch', color: '#f59e0b', subtitle: 'Track closely this week' },
+        { id: 'stable', label: 'Stable', value: 'stable', color: '#22c55e', subtitle: 'Healthy operating state' },
+        { id: 'info', label: 'Informational', value: 'info', color: '#3b82f6', subtitle: 'Low urgency context' },
+    ],
+};
+const INLINE_SCORE_PRIORITY_PREVIEW_METADATA = {
+    min: 0,
+    max: 100,
+    unit: 'pts',
+    bands: [
+        { id: 'low', label: 'Low', start: 0, end: 34, color: '#22c55e' },
+        { id: 'medium', label: 'Medium', start: 35, end: 69, color: '#f59e0b' },
+        { id: 'high', label: 'High', start: 70, end: 100, color: '#ef4444' },
+    ],
+};
+const INLINE_RATING_PREVIEW_METADATA = {
+    min: 1,
+    max: 5,
+    step: 1,
+    discrete: true,
+};
+const INLINE_RANGE_PREVIEW_METADATA = {
+    mode: 'range',
+    min: 0,
+    max: 100,
+    quickPresetsAuto: true,
+    distribution: [6, 12, 18, 24, 34, 48, 42, 30, 18, 10],
+};
+const INLINE_DISTANCE_RADIUS_PREVIEW_METADATA = {
+    mode: 'range',
+    min: 1,
+    max: 150,
+    step: 1,
+    distanceUnit: 'km',
+    distanceBaseUnit: 'km',
+    distanceAllowUnitToggle: true,
+    distanceSubtitle: 'Visualizacao radial com controle de raio e unidade',
+    distanceRadialRings: 5,
+    distanceAccentColor: '#3f5be6',
+    inlineAutoSize: {
+        minWidth: 188,
+        maxWidth: 360,
+        panelMinWidth: 340,
+        panelMaxWidth: 560,
+    },
+};
 const DYNAMIC_FIELDS_PLAYGROUND_CATALOG = [
     createWave1Entry({
         id: 'text-input',
@@ -50225,6 +50477,7 @@ const DYNAMIC_FIELDS_PLAYGROUND_CATALOG = [
         apiPath: jsonApiPath('inline-select/pdx-inline-select.json-api.md'),
         stateRecipes: [
             createDefaultSeedRecipe('ALPHA', 'Seeded default preview to expose compact selected-pill rendering.'),
+            createFilledSeedRecipe('GAMMA', 'Filled preview switches to a second local option so the compact pill demonstrates state transition clearly.'),
         ],
     }),
     createEntry({
@@ -50240,6 +50493,9 @@ const DYNAMIC_FIELDS_PLAYGROUND_CATALOG = [
         avoidWhen: ['a simple select is enough'],
         dataSourceKind: 'mixed',
         apiPath: jsonApiPath('inline-searchable-select/pdx-inline-searchable-select.json-api.md'),
+        stateRecipes: [
+            createDefaultSeedRecipe('BETA', 'Seeded default preview to expose compact search-backed inline selection.'),
+        ],
     }),
     createEntry({
         id: 'inline-async-select',
@@ -50254,6 +50510,11 @@ const DYNAMIC_FIELDS_PLAYGROUND_CATALOG = [
         avoidWhen: ['small local list'],
         dataSourceKind: 'remote',
         apiPath: jsonApiPath('inline-async-select/pdx-inline-async-select.json-api.md'),
+        metadata: INLINE_ASYNC_SELECT_PREVIEW_METADATA,
+        stateRecipes: [
+            createDefaultSeedRecipe('TONY', 'Seeded default preview to expose remote-label resolution instead of an empty toolbar shell.'),
+            createFilledSeedRecipe('CAROL', 'Filled preview uses a representative async label so the chip demonstrates selected-value rendering.'),
+        ],
     }),
     createEntry({
         id: 'inline-entity-lookup',
@@ -50268,6 +50529,10 @@ const DYNAMIC_FIELDS_PLAYGROUND_CATALOG = [
         avoidWhen: ['simple local select'],
         dataSourceKind: 'remote',
         apiPath: jsonApiPath('inline-entity-lookup/pdx-inline-entity-lookup.json-api.md'),
+        stateRecipes: [
+            createDefaultSeedRecipe('BETA', 'Seeded default preview to expose entity label hydration instead of an empty lookup shell.'),
+            createFilledSeedRecipe('GAMMA', 'Filled preview resolves a second entity so remote identity rendering stays explicit in the toolbar.'),
+        ],
     }),
     createEntry({
         id: 'inline-autocomplete',
@@ -50282,6 +50547,10 @@ const DYNAMIC_FIELDS_PLAYGROUND_CATALOG = [
         avoidWhen: ['a simple select is enough'],
         dataSourceKind: 'mixed',
         apiPath: jsonApiPath('inline-autocomplete/pdx-inline-autocomplete.json-api.md'),
+        stateRecipes: [
+            createDefaultSeedRecipe('ALPHA', 'Seeded default preview to expose compact autocomplete selection immediately.'),
+            createFilledSeedRecipe('GAMMA', 'Filled preview switches to another suggestion-backed option so the inline chip does not appear frozen.'),
+        ],
     }),
     createEntry({
         id: 'inline-multi-select',
@@ -50296,6 +50565,10 @@ const DYNAMIC_FIELDS_PLAYGROUND_CATALOG = [
         avoidWhen: ['need to read every selected item in full'],
         dataSourceKind: 'mixed',
         apiPath: jsonApiPath('inline-multi-select/pdx-inline-multi-select.json-api.md'),
+        stateRecipes: [
+            createDefaultSeedRecipe(['ALPHA', 'BETA'], 'Seeded default preview to expose the multi-selection summary chip.'),
+            createFilledSeedRecipe(['BETA', 'GAMMA'], 'Filled preview rotates the selected set so the compact multi-summary reflects a real state change.'),
+        ],
     }),
     createEntry({
         id: 'inline-number',
@@ -50310,6 +50583,10 @@ const DYNAMIC_FIELDS_PLAYGROUND_CATALOG = [
         avoidWhen: ['range'],
         dataSourceKind: 'local',
         apiPath: jsonApiPath('inline-number/pdx-inline-number.json-api.md'),
+        stateRecipes: [
+            createDefaultSeedRecipe(42, 'Seeded default preview to expose numeric value rendering from first paint.'),
+            createFilledSeedRecipe(84, 'Filled preview doubles the seeded value so the toolbar example communicates a concrete numeric change.'),
+        ],
     }),
     createEntry({
         id: 'inline-currency',
@@ -50324,6 +50601,10 @@ const DYNAMIC_FIELDS_PLAYGROUND_CATALOG = [
         avoidWhen: ['currency range'],
         dataSourceKind: 'local',
         apiPath: jsonApiPath('inline-currency/pdx-inline-currency.json-api.md'),
+        stateRecipes: [
+            createDefaultSeedRecipe(18450.75, 'Seeded default preview to expose compact currency formatting instead of an empty monetary shell.'),
+            createFilledSeedRecipe(98240.5, 'Filled preview uses a second monetary value so the formatted chip clearly changes between states.'),
+        ],
     }),
     createEntry({
         id: 'inline-currency-range',
@@ -50338,6 +50619,10 @@ const DYNAMIC_FIELDS_PLAYGROUND_CATALOG = [
         avoidWhen: ['single value'],
         dataSourceKind: 'specialized',
         apiPath: jsonApiPath('inline-currency-range/pdx-inline-currency-range.json-api.md'),
+        stateRecipes: [
+            createDefaultSeedRecipe({ minPrice: 1200, maxPrice: 5800, currency: 'BRL' }, 'Seeded default preview to expose the compact monetary band immediately.'),
+            createFilledSeedRecipe({ minPrice: 2400, maxPrice: 9800, currency: 'BRL' }, 'Filled preview broadens the monetary band so the inline summary changes with a realistic price window.'),
+        ],
     }),
     createEntry({
         id: 'inline-range',
@@ -50353,6 +50638,11 @@ const DYNAMIC_FIELDS_PLAYGROUND_CATALOG = [
         dataSourceKind: 'specialized',
         apiPath: jsonApiPath('inline-currency-range/pdx-inline-currency-range.json-api.md'),
         detailFragment: 'inline-range',
+        metadata: INLINE_RANGE_PREVIEW_METADATA,
+        stateRecipes: [
+            createDefaultSeedRecipe({ start: 18, end: 42 }, 'Seeded default preview to show a compact numeric band instead of an empty range trigger.'),
+            createFilledSeedRecipe({ start: 24, end: 68 }, 'Filled preview uses a broader resolved band so the inline chip communicates the selected range clearly.'),
+        ],
     }),
     createEntry({
         id: 'inline-rating',
@@ -50367,6 +50657,11 @@ const DYNAMIC_FIELDS_PLAYGROUND_CATALOG = [
         avoidWhen: ['when a raw number is enough'],
         dataSourceKind: 'specialized',
         apiPath: jsonApiPath('inline-rating/pdx-inline-rating.json-api.md'),
+        metadata: INLINE_RATING_PREVIEW_METADATA,
+        stateRecipes: [
+            createDefaultSeedRecipe({ start: 3, end: 5 }, 'Seeded default preview to make the rating band visible from the first render.'),
+            createFilledSeedRecipe({ start: 4, end: 5 }, 'Filled preview demonstrates a higher rating band so the chip and stars remain communicative.'),
+        ],
     }),
     createEntry({
         id: 'inline-distance-radius',
@@ -50382,6 +50677,11 @@ const DYNAMIC_FIELDS_PLAYGROUND_CATALOG = [
         dataSourceKind: 'specialized',
         interactionPattern: 'range',
         apiPath: jsonApiPath('inline-distance-radius/pdx-inline-distance-radius.json-api.md'),
+        metadata: INLINE_DISTANCE_RADIUS_PREVIEW_METADATA,
+        stateRecipes: [
+            createDefaultSeedRecipe({ start: 5, end: 25 }, 'Seeded default preview to expose a representative proximity band instead of an empty radial shell.'),
+            createFilledSeedRecipe({ start: 15, end: 60 }, 'Filled preview expands the distance window so the semantic radius visibly evolves between states.'),
+        ],
     }),
     createEntry({
         id: 'inline-score-priority',
@@ -50398,6 +50698,11 @@ const DYNAMIC_FIELDS_PLAYGROUND_CATALOG = [
         icon: { key: 'visual', tone: 'amber' },
         interactionPattern: 'visual',
         apiPath: jsonApiPath('inline-score-priority/pdx-inline-score-priority.json-api.md'),
+        metadata: INLINE_SCORE_PRIORITY_PREVIEW_METADATA,
+        stateRecipes: [
+            createDefaultSeedRecipe({ start: 55, end: 78 }, 'Seeded default preview to expose semantic score bands instead of a neutral shell.'),
+            createFilledSeedRecipe({ start: 70, end: 92 }, 'Filled preview demonstrates a high-priority band with explicit score semantics.'),
+        ],
     }),
     createEntry({
         id: 'inline-date',
@@ -50412,6 +50717,10 @@ const DYNAMIC_FIELDS_PLAYGROUND_CATALOG = [
         avoidWhen: ['full period'],
         dataSourceKind: 'specialized',
         apiPath: jsonApiPath('inline-date/pdx-inline-date.json-api.md'),
+        stateRecipes: [
+            createDefaultSeedRecipe('2026-03-18', 'Seeded default preview to expose compact date rendering from the first frame.'),
+            createFilledSeedRecipe('2026-03-23', 'Filled preview advances the selected date so the inline field reflects a clear temporal change.'),
+        ],
     }),
     createEntry({
         id: 'inline-date-range',
@@ -50428,6 +50737,7 @@ const DYNAMIC_FIELDS_PLAYGROUND_CATALOG = [
         apiPath: jsonApiPath('inline-date-range/pdx-inline-date-range.json-api.md'),
         stateRecipes: [
             createDefaultSeedRecipe({ startDate: '2026-03-01', endDate: '2026-03-23' }, 'Seeded default preview to show a resolved inline range immediately.'),
+            createFilledSeedRecipe({ startDate: '2026-03-08', endDate: '2026-03-28' }, 'Filled preview moves the selected period forward so the inline date window changes in a visible way.'),
         ],
     }),
     createEntry({
@@ -50443,6 +50753,10 @@ const DYNAMIC_FIELDS_PLAYGROUND_CATALOG = [
         avoidWhen: ['relative period or range'],
         dataSourceKind: 'specialized',
         apiPath: jsonApiPath('inline-time/pdx-inline-time.json-api.md'),
+        stateRecipes: [
+            createDefaultSeedRecipe('08:30', 'Seeded default preview to expose compact time rendering instead of an empty trigger.'),
+            createFilledSeedRecipe('14:45', 'Filled preview switches to an afternoon slot so the time example reflects a real state change.'),
+        ],
     }),
     createEntry({
         id: 'inline-time-range',
@@ -50457,6 +50771,10 @@ const DYNAMIC_FIELDS_PLAYGROUND_CATALOG = [
         avoidWhen: ['single time'],
         dataSourceKind: 'specialized',
         apiPath: jsonApiPath('inline-time-range/pdx-inline-time-range.json-api.md'),
+        stateRecipes: [
+            createDefaultSeedRecipe({ start: '08:30', end: '17:30' }, 'Seeded default preview to show an operational window immediately.'),
+            createFilledSeedRecipe({ start: '13:15', end: '21:45' }, 'Filled preview shifts the operational window so the range state does not remain visually static.'),
+        ],
     }),
     createEntry({
         id: 'inline-tree-select',
@@ -50471,6 +50789,11 @@ const DYNAMIC_FIELDS_PLAYGROUND_CATALOG = [
         avoidWhen: ['tree that is too deep'],
         dataSourceKind: 'mixed',
         apiPath: jsonApiPath('inline-tree-select/pdx-inline-tree-select.json-api.md'),
+        metadata: INLINE_TREE_SELECT_PREVIEW_METADATA,
+        stateRecipes: [
+            createDefaultSeedRecipe('audit-trail', 'Seeded default preview to expose resolved tree-label rendering in the inline trigger.'),
+            createFilledSeedRecipe('rapid-response', 'Filled preview resolves a second branch so the tree example communicates hierarchical selection clearly.'),
+        ],
     }),
     createEntry({
         id: 'inline-pipeline-status',
@@ -50487,6 +50810,11 @@ const DYNAMIC_FIELDS_PLAYGROUND_CATALOG = [
         icon: { key: 'visual', tone: 'violet' },
         interactionPattern: 'visual',
         apiPath: jsonApiPath('inline-pipeline-status/pdx-inline-pipeline-status.json-api.md'),
+        metadata: INLINE_PIPELINE_STATUS_PREVIEW_METADATA,
+        stateRecipes: [
+            createDefaultSeedRecipe(['QUALIFIED', 'INVESTIGATING'], 'Seeded default preview to expose semantic pipeline pills and segmented status rendering.'),
+            createFilledSeedRecipe(['APPROVED', 'ESCALATED'], 'Filled preview demonstrates a more operational combination so the chip summary stays meaningful.'),
+        ],
     }),
     createEntry({
         id: 'inline-relative-period',
@@ -50501,6 +50829,11 @@ const DYNAMIC_FIELDS_PLAYGROUND_CATALOG = [
         avoidWhen: ['API outside the canonical track that does not normalize presets'],
         dataSourceKind: 'specialized',
         apiPath: jsonApiPath('inline-relative-period/pdx-inline-relative-period.json-api.md'),
+        metadata: INLINE_RELATIVE_PERIOD_PREVIEW_METADATA,
+        stateRecipes: [
+            createDefaultSeedRecipe('last7', 'Seeded default preview to expose a normalized relative-period preset in the inline trigger.'),
+            createFilledSeedRecipe('thisMonth', 'Filled preview uses a second preset so the example communicates semantic period switching.'),
+        ],
     }),
     createEntry({
         id: 'inline-sentiment',
@@ -50517,6 +50850,10 @@ const DYNAMIC_FIELDS_PLAYGROUND_CATALOG = [
         icon: { key: 'visual', tone: 'rose' },
         interactionPattern: 'visual',
         apiPath: jsonApiPath('inline-sentiment/pdx-inline-sentiment.json-api.md'),
+        stateRecipes: [
+            createDefaultSeedRecipe('neutral', 'Seeded default preview to expose a sentiment selection immediately instead of an empty semantic shell.'),
+            createFilledSeedRecipe('great', 'Filled preview moves the sentiment to a stronger positive state so the semantic filter clearly changes.'),
+        ],
     }),
     createEntry({
         id: 'inline-color-label',
@@ -50533,6 +50870,11 @@ const DYNAMIC_FIELDS_PLAYGROUND_CATALOG = [
         icon: { key: 'visual', tone: 'teal' },
         interactionPattern: 'visual',
         apiPath: jsonApiPath('inline-color-label/pdx-inline-color-label.json-api.md'),
+        metadata: INLINE_COLOR_LABEL_PREVIEW_METADATA,
+        stateRecipes: [
+            createDefaultSeedRecipe(['critical', 'watch'], 'Seeded default preview to expose semantic color-label chips instead of a neutral pill.'),
+            createFilledSeedRecipe(['stable', 'info'], 'Filled preview demonstrates a lower-urgency combination while preserving textual meaning beyond color.'),
+        ],
         a11yNotes: [
             'Nunca dependa apenas de cor para comunicar estado ou significado.',
             'Garanta contraste AA e rotulagem textual no resumo da pill e no painel.',
@@ -50553,6 +50895,7 @@ const DYNAMIC_FIELDS_PLAYGROUND_CATALOG = [
         apiPath: jsonApiPath('inline-toggle/pdx-inline-toggle.json-api.md'),
         stateRecipes: [
             createDefaultSeedRecipe(true, 'Seeded default preview to show the compact boolean state in toolbar scenarios.'),
+            createFilledSeedRecipe(false, 'Filled preview toggles to the explicit false state so the toolbar example demonstrates both boolean outcomes.'),
         ],
     }),
 ];

package/index.d.ts

@@ -977,6 +977,10 @@ declare abstract class SimpleBaseSelectComponent<T = any> extends SimpleBaseInpu
     private hasLoadedOnce;
     /** Options filtered according to the current `searchTerm` */
     readonly filteredOptions: _angular_core.Signal<SelectOption<T>[]>;
+    /**
+     * Applies typed metadata to the select component.
+     */
+    setInputMetadata(metadata: ComponentMetadata): void;
     /**
      * Applies typed metadata to the select component.
      */
@@ -985,6 +989,7 @@ declare abstract class SimpleBaseSelectComponent<T = any> extends SimpleBaseInpu
     protected registerMatSelect(select: MatSelect): void;
     protected applySelectAttributes(): void;
     protected isReadonlyEffective(): boolean;
+    protected isInteractionDisabled(): boolean;
     /** Whether to show the clear button (if enabled in metadata) */
     showClear(): boolean;
     /** Clears the selection according to single/multiple mode */
@@ -1528,6 +1533,7 @@ declare class DynamicFieldLoaderDirective implements OnInit, OnDestroy, OnChange
      * Aplica os estados globais aos shells já criados, sem re-render completo.
      */
     private applyGlobalStates;
+    private applyShellEffectiveStatesToComponent;
     /**
      * Tenta inferir o controlType a partir do próprio field.
      * Retorna null quando não é possível inferir, mantendo a validação original.
@@ -3041,6 +3047,7 @@ declare class InlineToggleComponent extends SimpleBaseInputComponent {
     onTriggerIconMouseDown(event: MouseEvent): void;
     onQuickClear(event: MouseEvent): void;
     placeholderText(): string;
+    toggleLabelText(): string;
     ariaLabel(): string;
     isReadonlyEffective(): boolean;
     showTextLabel(): boolean;
@@ -3765,7 +3772,8 @@ declare class InlineTreeSelectComponent extends SimpleBaseSelectComponent {
     private asRecord;
     hasChild: (_: number, node: MaterialTreeNode) => boolean;
     onComponentInit(): void;
-    setInputMetadata(metadata: MaterialTreeSelectMetadata): void;
+    writeValue(value: unknown): void;
+    setInputMetadata(metadata: ComponentMetadata): void;
     setTreeMetadata(metadata: MaterialTreeSelectMetadata): void;
     onViewportResize(): void;
     protected getSpecificCssClasses(): string[];
@@ -3799,6 +3807,7 @@ declare class InlineTreeSelectComponent extends SimpleBaseSelectComponent {
     private filterNodes;
     private countNodes;
     private syncSelectedState;
+    private currentSelectionLookup;
     private findNodeByCurrentValue;
     private matchesCurrentValue;
     private normalizeNodes;
@@ -3892,6 +3901,8 @@ declare class InlineDistanceRadiusComponent extends InlineRangeSliderComponent {
     chipLeadingIcon(): string;
     placeholderText(): string;
     currentSelectionText(): string;
+    displayText(): string;
+    hasSelection(): boolean;
     ariaLabel(): string;
     protected getSpecificCssClasses(): string[];
     protected resolveInlineContextTooltipValue(): string;
@@ -3939,6 +3950,7 @@ declare class InlineDistanceRadiusComponent extends InlineRangeSliderComponent {
     private distanceRangeBandOpacityOverride;
     private currentBaseValue;
     private currentRangeBaseValue;
+    private currentRawDistanceValue;
     private currentRadialBaseValue;
     private currentNormalizedRangeRatios;
     private clampBaseValue;
@@ -4347,6 +4359,9 @@ declare class InlineSentimentComponent extends SimpleBaseSelectComponent {
     private sentimentGradientColorByRatio;
     private parseColorList;
     private selectedValues;
+    private currentRawSelectionValue;
+    private currentSelectionVisuals;
+    private fallbackVisualFromValue;
     private resolveCloseOnSelect;
     private resolveMultipleMode;
     private equalsOptionValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisui/dynamic-fields",
-  "version": "4.0.0-beta.0",
+  "version": "5.0.0-beta.0",
   "description": "Angular Material-based dynamic form fields for Praxis UI with lazy loading and metadata-driven rendering.",
   "peerDependencies": {
     "@angular/common": "^20.1.0",
@@ -10,10 +10,9 @@
     "@angular/cdk": "^20.1.0",
     "@angular/router": "^20.1.0",
     "rxjs": "^7.8.0",
-    "@praxisui/specification-core": "^4.0.0-beta.0",
-    "@praxisui/core": "^4.0.0-beta.0",
-    "@praxisui/cron-builder": "^4.0.0-beta.0",
-    "@praxisui/dialog": "^4.0.0-beta.0"
+    "@praxisui/core": "^5.0.0-beta.0",
+    "@praxisui/cron-builder": "^5.0.0-beta.0",
+    "@praxisui/dialog": "^5.0.0-beta.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"