@praxisui/dynamic-fields 9.0.0-beta.21 → 9.0.0-beta.25

package/README.md

@@ -166,6 +166,8 @@ Presentation formatting resolves locale in this order: `field.localization.local
 
 Presentation mode can also consume `field.presentation` and `field.presentationRules` for semantic readonly display states such as status, chip, badge, icon+value, tone, icon, label, badge, tooltip, and appearance. `presentationRules` use canonical Json Logic and must only produce semantic display patches; they do not mutate the `FormControl`, submit payload, or execute arbitrary actions.
 
+For compact enterprise indicators, `field.presentation.presenter = 'microVisualization'` renders the canonical `presentation.visualization` contract in pure presentation mode. The dynamic-fields runtime owns this compact HTML renderer so forms, lists, and tables can share the same metadata without depending on chart components for virtualized or readonly cells. Use it for small comparison, stacked bar, bullet, and delta indicators; use `@praxisui/charts` when the host needs a richer chart widget outside the field presentation pipeline.
+
 Runtime support for these metadata paths is canonical. Visual editor coverage is a separate layer and should be verified before claiming authoring parity.
 
 ## Inline Filters

package/ai/component-registry.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-06-25T18:12:49.520Z",
+  "generatedAt": "2026-06-30T12:05:08.567Z",
   "packageName": "@praxisui/dynamic-fields",
-  "packageVersion": "9.0.0-beta.21",
+  "packageVersion": "9.0.0-beta.25",
   "sourceRegistry": "praxis-component-registry-ingestion",
   "sourceRegistryVersion": "1.0.0",
   "componentCount": 76,

package/docs/dynamic-fields-field-selection-guide.md

@@ -37,7 +37,7 @@ keywords:
   - "select vs autocomplete"
   - "custom host field"
   - "inline filter"
-last_updated: "2026-06-01"
+last_updated: "2026-06-25"
 ---
 
 # Dynamic Fields Field Selection Guide
@@ -187,7 +187,29 @@ Se o caso e filtro corporativo compacto, consulte:
 - [Dynamic Fields Inline Filter Catalog](./dynamic-fields-inline-filter-catalog.md)
 - [Dynamic Fields Inline Components Guide](./dynamic-fields-inline-components-guide.md)
 
-## 6. Decision table
+## 6. Presentation mode vs chart widget
+
+`presentation.presenter = 'microVisualization'` nao e um `controlType`. Use esse presenter quando o campo ja tem valor no `FormControl`, mas a surface readonly precisa mostrar um indicador compacto e escaneavel.
+
+Use `microVisualization` quando:
+
+- a surface e `form-presentation`, `table-cell`, `list-item`, `object-header` ou `card-summary`;
+- a leitura precisa caber em celula, linha, drawer ou detalhe compacto;
+- o indicador e pequeno, como `comparison`, `stackedBar`, `bullet` ou `delta`;
+- a mesma semantica deve ser dirigida por `presentationRules` e Json Logic sem mutar o valor do campo.
+
+Use `@praxisui/charts` quando:
+
+- o usuario precisa interagir com grafico, legenda, tooltip analitico ou drilldown;
+- o grafico ocupa card, dashboard, cockpit ou modal dedicado;
+- a visualizacao depende de series maiores, eixos, zoom ou agregacoes vindas de endpoint analitico.
+
+Use `rich-content` quando:
+
+- o bloco mistura timeline, record summary, property sheet, progresso, badges e textos;
+- a surface de detalhe precisa composicao editorial, nao apenas um valor de campo.
+
+## 7. Decision table
 
 | Question | Prefer |
 | --- | --- |
@@ -211,12 +233,14 @@ Se o caso e filtro corporativo compacto, consulte:
 | ha uma colecao repetivel de objetos? | `array` |
 | ha anexos? | `upload` |
 | o controle e acao, nao dado? | `button` |
+| o valor readonly precisa de indicador compacto em celula/lista/formulario? | `presentation.presenter = "microVisualization"` |
 | nada do catalogo resolve sem gambiarra? | field custom do host |
 
-## 7. Enterprise recommendations
+## 8. Enterprise recommendations
 
 - prefira nomes canonicos de `controlType`; deixe aliases apenas para compatibilidade;
 - nao use inline filter controls em formularios normais para “economizar espaco”;
+- nao crie `controlType` local para indicadores readonly; use `presentation.presenter` e `presentation.visualization` quando a semantica for de apresentacao;
 - para campos remotos, explicite origem de dados e comportamento de busca;
 - para entidades de negocio, use `entityLookup` com `optionSource.type = RESOURCE_ENTITY`, `byIds`, `dependsOn`, `dependencyFilterMap` e `selectionPolicy` quando a selecao depender de status, permissao ou contexto;
 - para colecoes repetiveis, use `array` com `array.itemSchema.fields` em vez de criar campos numerados como `item1`, `item2`, `item3`;

package/docs/dynamic-fields-inline-components-guide.md

@@ -308,15 +308,15 @@ Fonte de verdade: `projects/praxis-metadata-editor/src/lib/config/*.config.ts`.
 
 #### `select.config.ts`
 
-`label, defaultValue, placeholder, hint, prefix, suffix, prefixIcon, prefixIconColor, suffixIcon, suffixIconColor, panelSearchIcon, panelSearchIconColor, panelResetIcon, panelResetIconColor, optionSelectedIcon, optionSelectedIconColor, options, emptyOptionText, multiple, optionLabelKey, optionValueKey, lookupIdKey, lookupLabelKey, lookupSubtitleKey, resourcePath, loadOn, filterCriteria, dependencyFields, resetOnDependentChange, enableDependencyCascade, dependencyFilterMap, dependencyValuePath, dependencyMergeStrategy, dependencyDebounceMs, dependencyLoadOnChange, selectAll, searchable, searchPlaceholder, maxSelections, required, validators.requiredMessage, clearButton.enabled, clearButton.icon, clearButton.iconColor, clearButton.tooltip, clearButton.ariaLabel, clearButton.showOnlyWhenFilled, materialDesign.appearance, materialDesign.color, materialDesign.floatLabel, materialDesign.subscriptSizing, inlineAutoSize.minWidth, inlineAutoSize.maxWidth, inlineAutoSize.minWidthMobile, inlineAutoSize.maxWidthMobile, materialDesign.hideRequiredMarker, errorStateMatcher, ariaLabel, ariaDescribedby, ariaLabelledby, tabIndex, dataAttributes`
+`label, defaultValue, placeholder, hint, helpText, helpDisplay, helpInlineMaxLength, prefix, suffix, prefixIcon, prefixIconColor, suffixIcon, suffixIconColor, panelSearchIcon, panelSearchIconColor, panelResetIcon, panelResetIconColor, optionSelectedIcon, optionSelectedIconColor, options, emptyOptionText, multiple, optionLabelKey, optionValueKey, lookupIdKey, lookupLabelKey, lookupSubtitleKey, resourcePath, loadOn, filterCriteria, dependencyFields, resetOnDependentChange, enableDependencyCascade, dependencyFilterMap, dependencyValuePath, dependencyMergeStrategy, dependencyDebounceMs, dependencyLoadOnChange, selectAll, searchable, searchPlaceholder, maxSelections, required, validators.requiredMessage, clearButton.enabled, clearButton.icon, clearButton.iconColor, clearButton.tooltip, clearButton.ariaLabel, clearButton.showOnlyWhenFilled, materialDesign.appearance, materialDesign.color, materialDesign.floatLabel, materialDesign.subscriptSizing, inlineAutoSize.minWidth, inlineAutoSize.maxWidth, inlineAutoSize.minWidthMobile, inlineAutoSize.maxWidthMobile, materialDesign.hideRequiredMarker, errorStateMatcher, ariaLabel, ariaDescribedby, ariaLabelledby, tabIndex, dataAttributes`
 
 #### `input.config.ts`
 
-`label, placeholder, hint, prefixIcon, prefixIconColor, suffixIcon, suffixIconColor, prefix, suffix, showCharacterCount, required, minLength, maxLength, pattern, validators.requiredMessage, validators.minLengthMessage, validators.maxLengthMessage, validators.patternMessage, mask, textTransform, textTransformApply, autocomplete, spellcheck, disabled, readonly, inputMode, autoFocus, inputType, validators.validationTrigger, validators.validationDebounce, validators.showInlineErrors, validators.errorPosition, materialDesign.appearance, materialDesign.color, materialDesign.floatLabel, materialDesign.subscriptSizing, inlineAutoSize.minWidth, inlineAutoSize.maxWidth, inlineAutoSize.minWidthMobile, inlineAutoSize.maxWidthMobile, materialDesign.hideRequiredMarker, errorStateMatcher, disabledInteractive, clearButton.enabled, clearButton.icon, clearButton.iconColor, clearButton.tooltip, clearButton.ariaLabel, clearButton.showOnlyWhenFilled, ariaLabel, ariaDescribedby, ariaLabelledby, tabIndex, dataAttributes, defaultValue`
+`label, placeholder, hint, helpText, helpDisplay, helpInlineMaxLength, prefixIcon, prefixIconColor, suffixIcon, suffixIconColor, prefix, suffix, showCharacterCount, required, minLength, maxLength, pattern, validators.requiredMessage, validators.minLengthMessage, validators.maxLengthMessage, validators.patternMessage, mask, textTransform, textTransformApply, autocomplete, spellcheck, disabled, readonly, inputMode, autoFocus, inputType, validators.validationTrigger, validators.validationDebounce, validators.showInlineErrors, validators.errorPosition, materialDesign.appearance, materialDesign.color, materialDesign.floatLabel, materialDesign.subscriptSizing, inlineAutoSize.minWidth, inlineAutoSize.maxWidth, inlineAutoSize.minWidthMobile, inlineAutoSize.maxWidthMobile, materialDesign.hideRequiredMarker, errorStateMatcher, disabledInteractive, clearButton.enabled, clearButton.icon, clearButton.iconColor, clearButton.tooltip, clearButton.ariaLabel, clearButton.showOnlyWhenFilled, ariaLabel, ariaDescribedby, ariaLabelledby, tabIndex, dataAttributes, defaultValue`
 
 #### `number.config.ts`
 
-`label, placeholder, defaultValue, hint, prefix, suffix, prefixIcon, prefixIconColor, suffixIcon, suffixIconColor, step, numberFormat.decimalPlaces, showGrouping, inputMode, autocomplete, spellcheck, readonly, disabled, autoFocus, validators.validationTrigger, validators.validationDebounce, validators.showInlineErrors, validators.errorPosition, required, min, max, validators.requiredMessage, validators.minMessage, validators.maxMessage, clearButton.enabled, clearButton.icon, clearButton.iconColor, clearButton.tooltip, clearButton.ariaLabel, clearButton.showOnlyWhenFilled, materialDesign.appearance, materialDesign.color, materialDesign.floatLabel, materialDesign.subscriptSizing, inlineAutoSize.minWidth, inlineAutoSize.maxWidth, inlineAutoSize.minWidthMobile, inlineAutoSize.maxWidthMobile, materialDesign.hideRequiredMarker, errorStateMatcher, ariaLabel, ariaDescribedby, ariaLabelledby, tabIndex, dataAttributes`
+`label, placeholder, defaultValue, hint, helpText, helpDisplay, helpInlineMaxLength, prefix, suffix, prefixIcon, prefixIconColor, suffixIcon, suffixIconColor, step, numberFormat.decimalPlaces, showGrouping, inputMode, autocomplete, spellcheck, readonly, disabled, autoFocus, validators.validationTrigger, validators.validationDebounce, validators.showInlineErrors, validators.errorPosition, required, min, max, validators.requiredMessage, validators.minMessage, validators.maxMessage, clearButton.enabled, clearButton.icon, clearButton.iconColor, clearButton.tooltip, clearButton.ariaLabel, clearButton.showOnlyWhenFilled, materialDesign.appearance, materialDesign.color, materialDesign.floatLabel, materialDesign.subscriptSizing, inlineAutoSize.minWidth, inlineAutoSize.maxWidth, inlineAutoSize.minWidthMobile, inlineAutoSize.maxWidthMobile, materialDesign.hideRequiredMarker, errorStateMatcher, ariaLabel, ariaDescribedby, ariaLabelledby, tabIndex, dataAttributes`
 
 #### `currency.config.ts`
 
@@ -324,7 +324,7 @@ Fonte de verdade: `projects/praxis-metadata-editor/src/lib/config/*.config.ts`.
 
 #### `date.config.ts`
 
-`label, defaultValue, placeholder, hint, prefixIcon, prefixIconColor, suffixIcon, suffixIconColor, prefix, suffix, required, minDate, maxDate, validators.requiredMessage, validators.minMessage, validators.maxMessage, startView, startAt, touchUi, closeOnSelect, materialDesign.appearance, materialDesign.color, materialDesign.floatLabel, materialDesign.subscriptSizing, inlineAutoSize.minWidth, inlineAutoSize.maxWidth, inlineAutoSize.minWidthMobile, inlineAutoSize.maxWidthMobile, materialDesign.hideRequiredMarker, errorStateMatcher, ariaLabel, ariaDescribedby, ariaLabelledby, tabIndex, dataAttributes, clearButton.enabled, clearButton.icon, clearButton.iconColor, clearButton.tooltip, clearButton.ariaLabel, clearButton.showOnlyWhenFilled`
+`label, defaultValue, placeholder, hint, helpText, helpDisplay, helpInlineMaxLength, prefixIcon, prefixIconColor, suffixIcon, suffixIconColor, prefix, suffix, required, minDate, maxDate, validators.requiredMessage, validators.minMessage, validators.maxMessage, startView, startAt, touchUi, closeOnSelect, materialDesign.appearance, materialDesign.color, materialDesign.floatLabel, materialDesign.subscriptSizing, inlineAutoSize.minWidth, inlineAutoSize.maxWidth, inlineAutoSize.minWidthMobile, inlineAutoSize.maxWidthMobile, materialDesign.hideRequiredMarker, errorStateMatcher, ariaLabel, ariaDescribedby, ariaLabelledby, tabIndex, dataAttributes, clearButton.enabled, clearButton.icon, clearButton.iconColor, clearButton.tooltip, clearButton.ariaLabel, clearButton.showOnlyWhenFilled`
 
 #### `date-range.config.ts`
 
@@ -344,7 +344,7 @@ Fonte de verdade: `projects/praxis-metadata-editor/src/lib/config/*.config.ts`.
 
 #### `toggle.config.ts`
 
-`label, defaultValue, hint, labelPosition, inlineLabelVisible, hideIcon, disableRipple, readonly, disabled, autoFocus, clearButton.enabled, clearButton.icon, clearButton.iconColor, clearButton.tooltip, clearButton.ariaLabel, clearButton.showOnlyWhenFilled, requiredTrue, validators.requiredTrueMessage, color, ariaLabel, ariaDescribedby, ariaLabelledby`
+`label, defaultValue, hint, helpText, helpDisplay, helpInlineMaxLength, labelPosition, inlineLabelVisible, hideIcon, disableRipple, readonly, disabled, autoFocus, clearButton.enabled, clearButton.icon, clearButton.iconColor, clearButton.tooltip, clearButton.ariaLabel, clearButton.showOnlyWhenFilled, requiredTrue, validators.requiredTrueMessage, color, ariaLabel, ariaDescribedby, ariaLabelledby`
 
 #### `range-slider.config.ts`
 

package/fesm2022/praxisui-dynamic-fields.mjs

@@ -3,7 +3,7 @@ import { NgControl, FormControl, Validators, ReactiveFormsModule, NG_VALUE_ACCES
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, DestroyRef, ElementRef, ChangeDetectorRef, Injector, signal, output, computed, Input, Directive, viewChild, effect, EventEmitter, Output, Component, forwardRef, LOCALE_ID, Injectable, ChangeDetectionStrategy, ViewChild, ViewContainerRef, HostListener, HostBinding, ViewEncapsulation, ENVIRONMENT_INITIALIZER, Inject, ViewChildren, TemplateRef, ContentChild, APP_INITIALIZER, Optional } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { providePraxisI18n, PraxisI18nService, isCssTextTransform, getTextTransformer, GlobalActionService, GenericCrudService, GlobalConfigService, PraxisIconDirective, FieldControlType, resolveBuiltinPresets, INLINE_FILTER_CONTROL_TYPES, FieldSelectorRegistry, FIELD_SELECTOR_REGISTRY_BASE, FIELD_SELECTOR_REGISTRY_DISABLE_DEFAULTS, LoggerService, normalizeControlTypeToken, resolveInlineFilterControlType, resolveControlTypeAlias, DEFAULT_FIELD_SELECTOR_CONTROL_TYPE_MAP, resolveValuePresentation, FieldDataType, PraxisJsonLogicService, resolveFieldPresentation as resolveFieldPresentation$1, DynamicFormService, ResourceDiscoveryService, ResourceSurfaceOpenAdapterService, classifyEntityLookupResult, ComponentMetadataRegistry, createCpfCnpjValidator, NumericFormat, interpolatePraxisTranslation, FIELD_METADATA_CAPABILITIES } from '@praxisui/core';
+import { providePraxisI18n, PraxisI18nService, isCssTextTransform, getTextTransformer, GlobalActionService, GenericCrudService, GlobalConfigService, PraxisIconDirective, FieldControlType, resolveBuiltinPresets, INLINE_FILTER_CONTROL_TYPES, FieldSelectorRegistry, FIELD_SELECTOR_REGISTRY_BASE, FIELD_SELECTOR_REGISTRY_DISABLE_DEFAULTS, LoggerService, normalizeControlTypeToken, resolveInlineFilterControlType, resolveControlTypeAlias, DEFAULT_FIELD_SELECTOR_CONTROL_TYPE_MAP, resolveValuePresentation, FieldDataType, PraxisJsonLogicService, renderPraxisPresentationVisualizationHtml, resolveFieldPresentation as resolveFieldPresentation$1, DynamicFormService, ResourceDiscoveryService, ResourceSurfaceOpenAdapterService, classifyEntityLookupResult, ComponentMetadataRegistry, createCpfCnpjValidator, NumericFormat, interpolatePraxisTranslation, FIELD_METADATA_CAPABILITIES } from '@praxisui/core';
 import { Subscription, BehaviorSubject, combineLatest, of, EMPTY, firstValueFrom, fromEvent, take as take$1 } from 'rxjs';
 import { Router } from '@angular/router';
 import * as i1$3 from '@angular/material/dialog';
@@ -143,6 +143,8 @@ const PRAXIS_DYNAMIC_FIELDS_EN_US = {
     'praxis.dynamicFields.actions.clear.tooltip': 'Clear',
     'praxis.dynamicFields.actions.clear.ariaLabel': 'Clear field',
     'praxis.dynamicFields.actions.clear.ariaLabelWithLabel': 'Clear {{label}}',
+    'praxis.dynamicFields.help.ariaLabel': 'Help',
+    'praxis.dynamicFields.help.ariaLabelWithLabel': 'Help: {{label}}',
     'praxis.dynamicFields.fileUpload.emptySummary': 'No file selected',
     'praxis.dynamicFields.fileUpload.multipleSummary': '{{count}} files selected',
     'praxis.dynamicFields.fileUpload.clearSelection': 'Clear',
@@ -533,6 +535,8 @@ const PRAXIS_DYNAMIC_FIELDS_PT_BR = {
     'praxis.dynamicFields.actions.clear.tooltip': 'Limpar',
     'praxis.dynamicFields.actions.clear.ariaLabel': 'Limpar campo',
     'praxis.dynamicFields.actions.clear.ariaLabelWithLabel': 'Limpar {{label}}',
+    'praxis.dynamicFields.help.ariaLabel': 'Ajuda',
+    'praxis.dynamicFields.help.ariaLabelWithLabel': 'Ajuda: {{label}}',
     'praxis.dynamicFields.fileUpload.emptySummary': 'Nenhum arquivo selecionado',
     'praxis.dynamicFields.fileUpload.multipleSummary': '{{count}} arquivos selecionados',
     'praxis.dynamicFields.fileUpload.clearSelection': 'Limpar',
@@ -1452,6 +1456,53 @@ class SimpleBaseInputComponent {
         }
         return '';
     }
+    fieldHelpText() {
+        const meta = this.metadata();
+        const candidates = [meta?.hint, meta?.helpText];
+        for (const candidate of candidates) {
+            const text = String(candidate ?? '').trim();
+            if (text.length) {
+                return text;
+            }
+        }
+        return '';
+    }
+    fieldHelpDisplay() {
+        const meta = this.metadata();
+        const raw = String(meta?.helpDisplay || '').trim();
+        if (raw === 'inline' || raw === 'popover' || raw === 'hidden') {
+            return raw;
+        }
+        if (raw === 'auto') {
+            const text = this.fieldHelpText();
+            if (!text)
+                return 'inline';
+            const maxLength = Math.max(0, Number(meta?.helpInlineMaxLength ?? 64));
+            return text.length > maxLength ? 'popover' : 'inline';
+        }
+        return 'inline';
+    }
+    hasInlineFieldHelp() {
+        return this.fieldHelpDisplay() === 'inline' && !!this.fieldHelpText() && !this.hasValidationError();
+    }
+    fieldHelpInlineText() {
+        return this.hasInlineFieldHelp() ? this.fieldHelpText() : '';
+    }
+    fieldHelpPopoverText() {
+        return this.fieldHelpDisplay() === 'popover' && !this.hasValidationError()
+            ? this.fieldHelpText()
+            : '';
+    }
+    fieldHelpPopoverDisabled() {
+        return !this.fieldHelpPopoverText();
+    }
+    fieldHelpAriaLabel() {
+        const label = this.resolveInlineContextTooltipLabel();
+        if (label) {
+            return this.i18n.t('praxis.dynamicFields.help.ariaLabelWithLabel', { label }, `Ajuda: ${label}`);
+        }
+        return this.i18n.t('praxis.dynamicFields.help.ariaLabel', undefined, 'Ajuda');
+    }
     isInteractionBlockedByState(options) {
         const includeReadonly = options?.includeReadonly !== false;
         const includePresentation = options?.includePresentation !== false;
@@ -7949,6 +8000,19 @@ class MaterialDatepickerComponent extends SimpleBaseInputComponent {
         </button>
       }
 
+      @if (fieldHelpPopoverText()) {
+        <mat-icon
+          matSuffix
+          class="pdx-field-help-icon"
+          [matTooltip]="fieldHelpPopoverText()"
+          matTooltipPosition="above"
+          [matTooltipDisabled]="fieldHelpPopoverDisabled()"
+          [attr.aria-label]="fieldHelpAriaLabel()"
+          tabindex="0"
+          [praxisIcon]="'help_outline'"
+        ></mat-icon>
+      }
+
       <mat-datepicker
         #picker
         [startView]="metadata()?.startView || 'month'"
@@ -7962,13 +8026,13 @@ class MaterialDatepickerComponent extends SimpleBaseInputComponent {
         <mat-error>{{ errorMessage() }}</mat-error>
       }
 
-      @if (metadata()?.hint && !hasValidationError()) {
+      @if (hasInlineFieldHelp()) {
         <mat-hint [align]="metadata()?.hintAlign || 'start'">
-          {{ metadata()!.hint }}
+          {{ fieldHelpInlineText() }}
         </mat-hint>
       }
     </mat-form-field>
-  `, isInline: true, styles: ["::ng-deep .cdk-overlay-connected-position-bounding-box:has(.pdx-datepicker-panel){z-index:var(--praxis-layer-popup, 1400)!important}::ng-deep .cdk-overlay-pane:has(.pdx-datepicker-panel){z-index:var(--praxis-layer-popup, 1400)!important}@media(min-width:600px){::ng-deep .cdk-overlay-pane.mat-datepicker-dialog{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;max-width:calc(100vw - 32px)!important;max-height:calc(100vh - 96px)!important}::ng-deep .cdk-overlay-pane.mat-datepicker-dialog .mat-datepicker-content-touch,::ng-deep .pdx-datepicker-panel.mat-datepicker-content-touch{width:min(360px,calc(100vw - 32px))!important;height:auto!important;max-height:calc(100vh - 96px)!important}::ng-deep .cdk-overlay-pane.mat-datepicker-dialog .mat-datepicker-content-container,::ng-deep .cdk-overlay-pane.mat-datepicker-dialog .mat-calendar,::ng-deep .pdx-datepicker-panel.mat-datepicker-content-touch .mat-datepicker-content-container,::ng-deep .pdx-datepicker-panel.mat-datepicker-content-touch .mat-calendar{width:100%!important;height:auto!important;max-height:calc(100vh - 120px)!important}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "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: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+  `, isInline: true, styles: [".pdx-field-help-icon{border-radius:999px;color:var(--md-sys-color-on-surface-variant);cursor:help}.pdx-field-help-icon:focus{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}::ng-deep .cdk-overlay-connected-position-bounding-box:has(.pdx-datepicker-panel){z-index:var(--praxis-layer-popup, 1400)!important}::ng-deep .cdk-overlay-pane:has(.pdx-datepicker-panel){z-index:var(--praxis-layer-popup, 1400)!important}@media(min-width:600px){::ng-deep .cdk-overlay-pane.mat-datepicker-dialog{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;max-width:calc(100vw - 32px)!important;max-height:calc(100vh - 96px)!important}::ng-deep .cdk-overlay-pane.mat-datepicker-dialog .mat-datepicker-content-touch,::ng-deep .pdx-datepicker-panel.mat-datepicker-content-touch{width:min(360px,calc(100vw - 32px))!important;height:auto!important;max-height:calc(100vh - 96px)!important}::ng-deep .cdk-overlay-pane.mat-datepicker-dialog .mat-datepicker-content-container,::ng-deep .cdk-overlay-pane.mat-datepicker-dialog .mat-calendar,::ng-deep .pdx-datepicker-panel.mat-datepicker-content-touch .mat-datepicker-content-container,::ng-deep .pdx-datepicker-panel.mat-datepicker-content-touch .mat-calendar{width:100%!important;height:auto!important;max-height:calc(100vh - 120px)!important}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "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: MatDatepickerModule }, { kind: "component", type: i6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i6.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i6.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MaterialDatepickerComponent, decorators: [{
             type: Component,
@@ -8040,6 +8104,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         </button>
       }
 
+      @if (fieldHelpPopoverText()) {
+        <mat-icon
+          matSuffix
+          class="pdx-field-help-icon"
+          [matTooltip]="fieldHelpPopoverText()"
+          matTooltipPosition="above"
+          [matTooltipDisabled]="fieldHelpPopoverDisabled()"
+          [attr.aria-label]="fieldHelpAriaLabel()"
+          tabindex="0"
+          [praxisIcon]="'help_outline'"
+        ></mat-icon>
+      }
+
       <mat-datepicker
         #picker
         [startView]="metadata()?.startView || 'month'"
@@ -8053,9 +8130,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         <mat-error>{{ errorMessage() }}</mat-error>
       }
 
-      @if (metadata()?.hint && !hasValidationError()) {
+      @if (hasInlineFieldHelp()) {
         <mat-hint [align]="metadata()?.hintAlign || 'start'">
-          {{ metadata()!.hint }}
+          {{ fieldHelpInlineText() }}
         </mat-hint>
       }
     </mat-form-field>
@@ -8085,7 +8162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         '[attr.data-field-type]': '"date"',
                         '[attr.data-field-name]': 'metadata()?.name',
                         '[attr.data-component-id]': 'componentId()',
-                    }, styles: ["::ng-deep .cdk-overlay-connected-position-bounding-box:has(.pdx-datepicker-panel){z-index:var(--praxis-layer-popup, 1400)!important}::ng-deep .cdk-overlay-pane:has(.pdx-datepicker-panel){z-index:var(--praxis-layer-popup, 1400)!important}@media(min-width:600px){::ng-deep .cdk-overlay-pane.mat-datepicker-dialog{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;max-width:calc(100vw - 32px)!important;max-height:calc(100vh - 96px)!important}::ng-deep .cdk-overlay-pane.mat-datepicker-dialog .mat-datepicker-content-touch,::ng-deep .pdx-datepicker-panel.mat-datepicker-content-touch{width:min(360px,calc(100vw - 32px))!important;height:auto!important;max-height:calc(100vh - 96px)!important}::ng-deep .cdk-overlay-pane.mat-datepicker-dialog .mat-datepicker-content-container,::ng-deep .cdk-overlay-pane.mat-datepicker-dialog .mat-calendar,::ng-deep .pdx-datepicker-panel.mat-datepicker-content-touch .mat-datepicker-content-container,::ng-deep .pdx-datepicker-panel.mat-datepicker-content-touch .mat-calendar{width:100%!important;height:auto!important;max-height:calc(100vh - 120px)!important}}\n"] }]
+                    }, styles: [".pdx-field-help-icon{border-radius:999px;color:var(--md-sys-color-on-surface-variant);cursor:help}.pdx-field-help-icon:focus{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}::ng-deep .cdk-overlay-connected-position-bounding-box:has(.pdx-datepicker-panel){z-index:var(--praxis-layer-popup, 1400)!important}::ng-deep .cdk-overlay-pane:has(.pdx-datepicker-panel){z-index:var(--praxis-layer-popup, 1400)!important}@media(min-width:600px){::ng-deep .cdk-overlay-pane.mat-datepicker-dialog{position:fixed!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;max-width:calc(100vw - 32px)!important;max-height:calc(100vh - 96px)!important}::ng-deep .cdk-overlay-pane.mat-datepicker-dialog .mat-datepicker-content-touch,::ng-deep .pdx-datepicker-panel.mat-datepicker-content-touch{width:min(360px,calc(100vw - 32px))!important;height:auto!important;max-height:calc(100vh - 96px)!important}::ng-deep .cdk-overlay-pane.mat-datepicker-dialog .mat-datepicker-content-container,::ng-deep .cdk-overlay-pane.mat-datepicker-dialog .mat-calendar,::ng-deep .pdx-datepicker-panel.mat-datepicker-content-touch .mat-datepicker-content-container,::ng-deep .pdx-datepicker-panel.mat-datepicker-content-touch .mat-calendar{width:100%!important;height:auto!important;max-height:calc(100vh - 120px)!important}}\n"] }]
         }], propDecorators: { validationChange: [{ type: i0.Output, args: ["validationChange"] }], readonlyMode: [{
                 type: Input
             }], disabledMode: [{
@@ -9843,6 +9920,7 @@ class FieldShellComponent {
     cdr = inject(ChangeDetectorRef);
     jsonLogic = inject(PraxisJsonLogicService);
     optionDisplayResolver = inject(OptionDisplayResolverService);
+    sanitizer = inject(DomSanitizer);
     crudService = inject(GenericCrudService, {
         optional: true,
     });
@@ -10031,6 +10109,11 @@ class FieldShellComponent {
     }
     getPresentationHtml() {
         const resolved = this.getResolvedPresentation();
+        if (resolved.presenter === 'microVisualization' && resolved.visualization) {
+            return this.sanitizer.bypassSecurityTrustHtml(renderPraxisPresentationVisualizationHtml(resolved.visualization, {
+                locale: this.resolvePresentationAppLocale(),
+            }));
+        }
         const raw = this.control?.value;
         const displayValue = this.presentationDisplayValue;
         const field = this.getPresentationFormattingField(resolved);
@@ -10074,7 +10157,8 @@ class FieldShellComponent {
             presentation.badge ||
             presentation.tooltip ||
             presentation.appearance ||
-            presentation.valuePresentation);
+            presentation.valuePresentation ||
+            presentation.visualization);
     }
     getPresentationTone() {
         return this.getResolvedPresentation().tone ?? null;
@@ -10433,7 +10517,7 @@ class FieldShellComponent {
 
       </div>
     </div>
-  `, isInline: true, styles: [".pfx-field-shell .mat-mdc-form-field,.pfx-field-shell mat-form-field{width:var(--pfx-field-shell-field-width, 100%)}.pfx-field-shell .mat-mdc-form-field-subscript-wrapper{min-height:20px;margin-top:2px}.pfx-field-shell .mat-mdc-form-field{margin-bottom:8px}.pfx-field-shell .mat-mdc-form-field-infix{min-width:0}:host{display:block;cursor:pointer;width:var(--pfx-field-shell-width, 100%);min-width:0;max-width:100%}.pfx-field-shell-wrapper,.pfx-field-shell-host{position:relative}.praxis-interaction-overlay{position:absolute;inset:0;pointer-events:all}.praxis-readonly-overlay,.praxis-disabled-overlay{cursor:not-allowed}.pfx-field-shell-authoring-hit-target{position:absolute;inset:0;z-index:2;display:block;width:100%;min-width:0;min-height:100%;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;appearance:none;-webkit-appearance:none}.pfx-field-shell-authoring-hit-target:focus-visible{outline:2px solid var(--mat-sys-primary, #90caf9);outline-offset:2px}.praxis-presentation{white-space:pre-wrap;display:block;max-width:100%;min-width:0;padding:6px 0}.praxis-presentation__label{display:block;font-size:var(--pfx-pres-label-size, .78rem);line-height:1.2;letter-spacing:.02em;font-weight:500;opacity:.8;margin-bottom:2px}.praxis-presentation__value{display:block;flex:1 1 auto;max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:break-word;font-size:var(--pfx-pres-value-size, 1rem);line-height:1.35;font-weight:600;opacity:.95}.praxis-presentation__value a{color:var( --pfx-pres-link-color, color-mix( in srgb, var(--mat-sys-primary, #90caf9) 78%, var(--mat-sys-on-surface, #ffffff) 22% ) );text-decoration-color:var( --pfx-pres-link-decoration-color, color-mix(in srgb, currentColor 62%, transparent) );text-decoration-thickness:.08em;text-underline-offset:.18em;max-width:100%;overflow-wrap:anywhere;word-break:break-word}.praxis-presentation__value a:visited{color:var(--pfx-pres-link-visited-color, var(--pfx-pres-link-color, inherit))}.praxis-presentation__value a:hover{color:var(--pfx-pres-link-hover-color, var(--pfx-pres-link-color, currentColor));text-decoration-color:currentColor}.praxis-presentation__value a:focus-visible{outline:2px solid var(--pfx-pres-link-focus-ring-color, currentColor);outline-offset:2px;border-radius:2px}.praxis-presentation__content{display:flex;align-items:center;gap:6px;max-width:100%;min-width:0}.praxis-presentation__icon{flex:0 0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1;opacity:.85}.praxis-presentation--semantic{--pfx-pres-semantic-color: var(--mat-sys-on-surface-variant, currentColor);--pfx-pres-semantic-bg: color-mix(in srgb, currentColor 7%, transparent);--pfx-pres-semantic-border: color-mix(in srgb, currentColor 16%, transparent)}.praxis-presentation[data-presentation-tone=info]{--pfx-pres-semantic-color: var(--pfx-pres-info-color, var(--mat-sys-primary, #0b5cad))}.praxis-presentation[data-presentation-tone=success]{--pfx-pres-semantic-color: var(--pfx-pres-success-color, var(--praxis-success, #0f7b4a))}.praxis-presentation[data-presentation-tone=warning]{--pfx-pres-semantic-color: var(--pfx-pres-warning-color, var(--praxis-warning, #a16207))}.praxis-presentation[data-presentation-tone=danger]{--pfx-pres-semantic-color: var(--pfx-pres-danger-color, var(--mat-sys-error, #ba1a1a))}.praxis-presentation--semantic .praxis-presentation__icon{color:var(--pfx-pres-semantic-color);opacity:1}.praxis-presentation--semantic .praxis-presentation__content{justify-content:flex-start}.praxis-presentation--semantic .praxis-presentation__value{flex:0 1 auto}.praxis-presentation[data-presentation-presenter=status] .praxis-presentation__value,.praxis-presentation[data-presentation-presenter=badge] .praxis-presentation__value,.praxis-presentation[data-presentation-presenter=chip] .praxis-presentation__value{display:inline-flex;flex:0 1 auto;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--pfx-pres-status-min-height, 24px);padding:var(--pfx-pres-status-padding, 2px 9px);border-radius:var(--pfx-pres-status-radius, 999px);border:1px solid var(--pfx-pres-semantic-border);color:var(--pfx-pres-semantic-color);background:var(--pfx-pres-semantic-bg);font-size:var(--pfx-pres-status-font-size, .8rem);font-weight:var(--pfx-pres-status-font-weight, 700);line-height:var(--pfx-pres-status-line-height, 1.1)}.praxis-presentation[data-presentation-appearance=filled] .praxis-presentation__value{color:var(--pfx-pres-status-filled-color, var(--mat-sys-on-primary, #ffffff));background:var(--pfx-pres-semantic-color);border-color:var(--pfx-pres-semantic-color)}.praxis-presentation[data-presentation-appearance=outlined] .praxis-presentation__value{background:transparent;border-color:var(--pfx-pres-semantic-color)}.praxis-presentation[data-presentation-appearance=plain] .praxis-presentation__value{border-color:transparent;background:transparent;padding-inline:0}.praxis-presentation__badge{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;box-sizing:border-box;min-height:20px;padding:1px 7px;border-radius:999px;border:1px solid var(--pfx-pres-semantic-border, color-mix(in srgb, currentColor 16%, transparent));color:var(--pfx-pres-semantic-color, currentColor);background:var(--pfx-pres-semantic-bg, color-mix(in srgb, currentColor 7%, transparent));font-size:.72rem;line-height:1;font-weight:700;white-space:nowrap}.presentation-mode.pres-label-left .praxis-presentation{display:flex;align-items:center;gap:8px}.presentation-mode.pres-label-left .praxis-presentation__label{margin:0;min-width:var(--pfx-pres-label-width, 140px);opacity:.85;text-align:var(--pfx-pres-label-align, start)}.presentation-mode .praxis-presentation__value,.presentation-mode .praxis-presentation__content{flex:1 1 auto;min-width:0;text-align:var(--pfx-pres-value-align, start)}.presentation-mode .praxis-presentation--semantic .praxis-presentation__value{flex:0 1 auto}.presentation-mode .praxis-presentation--semantic .praxis-presentation__content{justify-content:flex-start}.presentation-mode .praxis-presentation--semantic[data-presentation-presenter=iconValue] .praxis-presentation__value{display:inline-flex;flex:0 0 auto;width:auto}@media(max-width:480px){.presentation-mode.pres-label-left .praxis-presentation{flex-direction:column;align-items:flex-start;gap:4px}.presentation-mode.pres-label-left .praxis-presentation__label{min-width:0;width:auto;text-align:start}.presentation-mode.pres-label-left .praxis-presentation__content{width:100%;flex-basis:auto}}.presentation-mode.pres-density-cozy .praxis-presentation{padding:6px 0}.presentation-mode.pres-density-compact .praxis-presentation{padding:2px 0;gap:6px}.presentation-mode.pres-compact .praxis-presentation{padding:2px 0}.presentation-mode.pres-compact .praxis-presentation__label,.presentation-mode.pres-density-compact .praxis-presentation__label{font-size:var(--pfx-pres-compact-label-size, var(--pfx-pres-label-size, .72rem));margin-bottom:var(--pfx-pres-compact-label-gap, 1px)}.presentation-mode.pres-compact .praxis-presentation__value,.presentation-mode.pres-density-compact .praxis-presentation__value{font-size:var(--pfx-pres-compact-value-size, var(--pfx-pres-value-size, .92rem));line-height:var(--pfx-pres-compact-value-line-height, 1.22)}.presentation-mode .praxis-presentation--boolean .praxis-presentation__value{display:inline-flex;flex:0 1 auto;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--pfx-pres-boolean-min-height, 22px);padding:var(--pfx-pres-boolean-padding, 0 8px);border-radius:var(--pfx-pres-boolean-radius, 999px);border:1px solid var(--pfx-pres-boolean-border-color, color-mix(in srgb, currentColor 18%, transparent));background:var(--pfx-pres-boolean-bg, color-mix(in srgb, currentColor 8%, transparent));font-size:var(--pfx-pres-boolean-font-size, .78rem);font-weight:var(--pfx-pres-boolean-font-weight, 700);line-height:var(--pfx-pres-boolean-line-height, 1);text-transform:var(--pfx-pres-boolean-text-transform, none)}.presentation-mode .praxis-presentation--boolean-true .praxis-presentation__value{color:var(--pfx-pres-boolean-true-color, var(--mat-sys-primary, currentColor));background:var(--pfx-pres-boolean-true-bg, color-mix(in srgb, var(--mat-sys-primary, currentColor) 10%, transparent));border-color:var(--pfx-pres-boolean-true-border-color, color-mix(in srgb, var(--mat-sys-primary, currentColor) 24%, transparent))}.presentation-mode .praxis-presentation--boolean-false .praxis-presentation__value{color:var(--pfx-pres-boolean-false-color, var(--mat-sys-on-surface-variant, currentColor));background:var(--pfx-pres-boolean-false-bg, color-mix(in srgb, var(--mat-sys-on-surface, currentColor) 6%, transparent));border-color:var(--pfx-pres-boolean-false-border-color, color-mix(in srgb, var(--mat-sys-on-surface, currentColor) 16%, transparent))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".pfx-field-shell .mat-mdc-form-field,.pfx-field-shell mat-form-field{width:var(--pfx-field-shell-field-width, 100%)}.pfx-field-shell .mat-mdc-form-field-subscript-wrapper{min-height:20px;margin-top:2px}.pfx-field-shell .mat-mdc-form-field{margin-bottom:8px}.pfx-field-shell .mat-mdc-form-field-infix{min-width:0}:host{display:block;cursor:pointer;width:var(--pfx-field-shell-width, 100%);min-width:0;max-width:100%}.pfx-field-shell-wrapper,.pfx-field-shell-host{position:relative}.praxis-interaction-overlay{position:absolute;inset:0;pointer-events:all}.praxis-readonly-overlay,.praxis-disabled-overlay{cursor:not-allowed}.pfx-field-shell-authoring-hit-target{position:absolute;inset:0;z-index:2;display:block;width:100%;min-width:0;min-height:100%;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;appearance:none;-webkit-appearance:none}.pfx-field-shell-authoring-hit-target:focus-visible{outline:2px solid var(--mat-sys-primary, #90caf9);outline-offset:2px}.praxis-presentation{white-space:pre-wrap;display:block;max-width:100%;min-width:0;padding:6px 0}.praxis-presentation__label{display:block;font-size:var(--pdx-presentation-label-size, var(--pfx-pres-label-size, .78rem));line-height:1.2;letter-spacing:.02em;font-weight:500;opacity:.8;margin-bottom:2px}.praxis-presentation__value{display:block;flex:1 1 auto;max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:break-word;font-size:var(--pdx-presentation-value-size, var(--pfx-pres-value-size, 1rem));line-height:1.35;font-weight:600;opacity:.95}.praxis-presentation__value a{color:var( --pfx-pres-link-color, color-mix( in srgb, var(--mat-sys-primary, #90caf9) 78%, var(--mat-sys-on-surface, #ffffff) 22% ) );text-decoration-color:var( --pfx-pres-link-decoration-color, color-mix(in srgb, currentColor 62%, transparent) );text-decoration-thickness:.08em;text-underline-offset:.18em;max-width:100%;overflow-wrap:anywhere;word-break:break-word}.praxis-presentation__value a:visited{color:var(--pfx-pres-link-visited-color, var(--pfx-pres-link-color, inherit))}.praxis-presentation__value a:hover{color:var(--pfx-pres-link-hover-color, var(--pfx-pres-link-color, currentColor));text-decoration-color:currentColor}.praxis-presentation__value a:focus-visible{outline:2px solid var(--pfx-pres-link-focus-ring-color, currentColor);outline-offset:2px;border-radius:2px}.praxis-presentation__content{display:flex;align-items:center;gap:6px;max-width:100%;min-width:0}.praxis-presentation__icon{flex:0 0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1;opacity:.85}.praxis-presentation--semantic{--pfx-pres-semantic-color: var(--mat-sys-on-surface-variant, currentColor);--pfx-pres-semantic-bg: color-mix(in srgb, currentColor 7%, transparent);--pfx-pres-semantic-border: color-mix(in srgb, currentColor 16%, transparent)}.praxis-presentation[data-presentation-tone=info]{--pfx-pres-semantic-color: var(--pfx-pres-info-color, var(--mat-sys-primary, #0b5cad))}.praxis-presentation[data-presentation-tone=success]{--pfx-pres-semantic-color: var(--pfx-pres-success-color, var(--praxis-success, #0f7b4a))}.praxis-presentation[data-presentation-tone=warning]{--pfx-pres-semantic-color: var(--pfx-pres-warning-color, var(--praxis-warning, #a16207))}.praxis-presentation[data-presentation-tone=danger]{--pfx-pres-semantic-color: var(--pfx-pres-danger-color, var(--mat-sys-error, #ba1a1a))}.praxis-presentation--semantic .praxis-presentation__icon{color:var(--pfx-pres-semantic-color);opacity:1}.praxis-presentation--semantic .praxis-presentation__content{justify-content:flex-start}.praxis-presentation--semantic .praxis-presentation__value{flex:0 1 auto}.praxis-presentation[data-presentation-presenter=status] .praxis-presentation__value,.praxis-presentation[data-presentation-presenter=badge] .praxis-presentation__value,.praxis-presentation[data-presentation-presenter=chip] .praxis-presentation__value{display:inline-flex;flex:0 1 auto;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--pdx-presentation-flag-height, var(--pfx-pres-status-min-height, 24px));padding:var(--pdx-presentation-flag-padding, var(--pfx-pres-status-padding, 2px 9px));border-radius:var(--pdx-presentation-flag-radius, var(--pfx-pres-status-radius, 999px));border:1px solid var(--pfx-pres-semantic-border);color:var(--pfx-pres-semantic-color);background:var(--pfx-pres-semantic-bg);font-size:var(--pdx-presentation-flag-font-size, var(--pfx-pres-status-font-size, .8rem));font-weight:var(--pfx-pres-status-font-weight, 700);line-height:var(--pfx-pres-status-line-height, 1.1)}.praxis-presentation[data-presentation-appearance=filled] .praxis-presentation__value{color:var(--pfx-pres-status-filled-color, var(--mat-sys-on-primary, #ffffff));background:var(--pfx-pres-semantic-color);border-color:var(--pfx-pres-semantic-color)}.praxis-presentation[data-presentation-appearance=outlined] .praxis-presentation__value{background:transparent;border-color:var(--pfx-pres-semantic-color)}.praxis-presentation[data-presentation-appearance=plain] .praxis-presentation__value{border-color:transparent;background:transparent;padding-inline:0}.praxis-presentation__badge{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;box-sizing:border-box;min-height:20px;padding:1px 7px;border-radius:999px;border:1px solid var(--pfx-pres-semantic-border, color-mix(in srgb, currentColor 16%, transparent));color:var(--pfx-pres-semantic-color, currentColor);background:var(--pfx-pres-semantic-bg, color-mix(in srgb, currentColor 7%, transparent));font-size:.72rem;line-height:1;font-weight:700;white-space:nowrap}.presentation-mode.pres-label-left .praxis-presentation{display:flex;align-items:center;gap:8px}.presentation-mode.pres-label-left .praxis-presentation__label{margin:0;min-width:var(--pdx-presentation-label-width, var(--pfx-pres-label-width, 140px));opacity:.85;text-align:var(--pfx-pres-label-align, start)}.presentation-mode .praxis-presentation__value,.presentation-mode .praxis-presentation__content{flex:1 1 auto;min-width:0;text-align:var(--pfx-pres-value-align, start)}.presentation-mode .praxis-presentation--semantic .praxis-presentation__value{flex:0 1 auto}.presentation-mode .praxis-presentation--semantic .praxis-presentation__content{justify-content:flex-start}.presentation-mode .praxis-presentation--semantic[data-presentation-presenter=iconValue] .praxis-presentation__value{display:inline-flex;flex:0 0 auto;width:auto}.praxis-presentation[data-presentation-presenter=microVisualization] .praxis-presentation__value{display:block;width:100%;max-width:var(--pfx-pres-micro-max-width, 320px);font-size:var(--pfx-pres-micro-font-size, .78rem);line-height:1.2}.pfx-micro-viz{display:grid;gap:6px;width:100%;min-width:0}.pfx-micro-viz__fallback{color:var(--mat-sys-on-surface-variant, currentColor);font-weight:600}.pfx-micro-viz__row{display:grid;grid-template-columns:minmax(48px,.65fr) minmax(92px,1fr) auto;gap:6px;align-items:center;min-width:0}.pfx-micro-viz__label,.pfx-micro-viz__value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pfx-micro-viz__label{color:var(--mat-sys-on-surface-variant, currentColor);font-weight:600;opacity:.84}.pfx-micro-viz__value{justify-self:end;font-weight:700}.pfx-micro-viz__track{position:relative;height:8px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--mat-sys-on-surface, currentColor) 12%,transparent)}.pfx-micro-viz__bar,.pfx-micro-viz__target{position:absolute;inset-block:0;border-radius:inherit;background:var(--pfx-micro-tone-color, var(--mat-sys-primary, currentColor))}.pfx-micro-viz__segments{display:flex;height:10px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--mat-sys-on-surface, currentColor) 12%,transparent)}.pfx-micro-viz__segment{min-width:2px;background:var(--pfx-micro-tone-color, var(--mat-sys-primary, currentColor))}.pfx-micro-viz__bullet{display:grid;gap:5px}.pfx-micro-viz__bullet .pfx-micro-viz__track{height:12px}.pfx-micro-viz__target{width:2px;min-width:2px;transform:translate(-1px);background:var(--mat-sys-on-surface, currentColor);opacity:.74}.pfx-micro-viz__delta{display:inline-flex;align-items:center;gap:5px;min-width:0;color:var(--pfx-micro-tone-color, var(--mat-sys-primary, currentColor));font-weight:800}.pfx-micro-viz__delta-symbol{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:999px;background:color-mix(in srgb,currentColor 14%,transparent);font-size:.72rem;line-height:1}.pfx-micro-viz__meta{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;color:var(--mat-sys-on-surface-variant, currentColor);font-weight:600;opacity:.82}.pfx-micro-viz [data-tone=success]{--pfx-micro-tone-color: var(--praxis-success, #0f7b4a)}.pfx-micro-viz [data-tone=warning],.pfx-micro-viz[data-tone=warning]{--pfx-micro-tone-color: var(--praxis-warning, #a16207)}.pfx-micro-viz [data-tone=danger],.pfx-micro-viz[data-tone=danger],.pfx-micro-viz [data-tone=critical],.pfx-micro-viz[data-tone=critical]{--pfx-micro-tone-color: var(--mat-sys-error, #ba1a1a)}.pfx-micro-viz [data-tone=info],.pfx-micro-viz[data-tone=info]{--pfx-micro-tone-color: var(--mat-sys-primary, #0b5cad)}@media(max-width:480px){.presentation-mode.pres-label-left .praxis-presentation{flex-direction:column;align-items:flex-start;gap:4px}.presentation-mode.pres-label-left .praxis-presentation__label{min-width:0;width:auto;text-align:start}.presentation-mode.pres-label-left .praxis-presentation__content{width:100%;flex-basis:auto}}.presentation-mode.pres-density-cozy .praxis-presentation{padding:6px 0}.presentation-mode.pres-density-compact .praxis-presentation{padding:2px 0;gap:6px}.presentation-mode.pres-compact .praxis-presentation{padding:2px 0}.presentation-mode.pres-compact .praxis-presentation__label,.presentation-mode.pres-density-compact .praxis-presentation__label{font-size:var(--pdx-presentation-label-size, var(--pfx-pres-compact-label-size, var(--pfx-pres-label-size, .72rem)));margin-bottom:var(--pfx-pres-compact-label-gap, 1px)}.presentation-mode.pres-compact .praxis-presentation__value,.presentation-mode.pres-density-compact .praxis-presentation__value{font-size:var(--pdx-presentation-value-size, var(--pfx-pres-compact-value-size, var(--pfx-pres-value-size, .92rem)));line-height:var(--pfx-pres-compact-value-line-height, 1.22)}.presentation-mode .praxis-presentation--boolean .praxis-presentation__value{display:inline-flex;flex:0 1 auto;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--pdx-presentation-flag-height, var(--pfx-pres-boolean-min-height, 22px));padding:var(--pdx-presentation-flag-padding, var(--pfx-pres-boolean-padding, 0 8px));border-radius:var(--pdx-presentation-flag-radius, var(--pfx-pres-boolean-radius, 999px));border:1px solid var(--pfx-pres-boolean-border-color, color-mix(in srgb, currentColor 18%, transparent));background:var(--pfx-pres-boolean-bg, color-mix(in srgb, currentColor 8%, transparent));font-size:var(--pdx-presentation-flag-font-size, var(--pfx-pres-boolean-font-size, .78rem));font-weight:var(--pfx-pres-boolean-font-weight, 700);line-height:var(--pfx-pres-boolean-line-height, 1);text-transform:var(--pfx-pres-boolean-text-transform, none)}.presentation-mode .praxis-presentation--boolean-true .praxis-presentation__value{color:var(--pfx-pres-boolean-true-color, var(--mat-sys-primary, currentColor));background:var(--pfx-pres-boolean-true-bg, color-mix(in srgb, var(--mat-sys-primary, currentColor) 10%, transparent));border-color:var(--pfx-pres-boolean-true-border-color, color-mix(in srgb, var(--mat-sys-primary, currentColor) 24%, transparent))}.presentation-mode .praxis-presentation--boolean-false .praxis-presentation__value{color:var(--pfx-pres-boolean-false-color, var(--mat-sys-on-surface-variant, currentColor));background:var(--pfx-pres-boolean-false-bg, color-mix(in srgb, var(--mat-sys-on-surface, currentColor) 6%, transparent));border-color:var(--pfx-pres-boolean-false-border-color, color-mix(in srgb, var(--mat-sys-on-surface, currentColor) 16%, transparent))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: FieldShellComponent, decorators: [{
             type: Component,
@@ -10555,7 +10639,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 
       </div>
     </div>
-  `, styles: [".pfx-field-shell .mat-mdc-form-field,.pfx-field-shell mat-form-field{width:var(--pfx-field-shell-field-width, 100%)}.pfx-field-shell .mat-mdc-form-field-subscript-wrapper{min-height:20px;margin-top:2px}.pfx-field-shell .mat-mdc-form-field{margin-bottom:8px}.pfx-field-shell .mat-mdc-form-field-infix{min-width:0}:host{display:block;cursor:pointer;width:var(--pfx-field-shell-width, 100%);min-width:0;max-width:100%}.pfx-field-shell-wrapper,.pfx-field-shell-host{position:relative}.praxis-interaction-overlay{position:absolute;inset:0;pointer-events:all}.praxis-readonly-overlay,.praxis-disabled-overlay{cursor:not-allowed}.pfx-field-shell-authoring-hit-target{position:absolute;inset:0;z-index:2;display:block;width:100%;min-width:0;min-height:100%;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;appearance:none;-webkit-appearance:none}.pfx-field-shell-authoring-hit-target:focus-visible{outline:2px solid var(--mat-sys-primary, #90caf9);outline-offset:2px}.praxis-presentation{white-space:pre-wrap;display:block;max-width:100%;min-width:0;padding:6px 0}.praxis-presentation__label{display:block;font-size:var(--pfx-pres-label-size, .78rem);line-height:1.2;letter-spacing:.02em;font-weight:500;opacity:.8;margin-bottom:2px}.praxis-presentation__value{display:block;flex:1 1 auto;max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:break-word;font-size:var(--pfx-pres-value-size, 1rem);line-height:1.35;font-weight:600;opacity:.95}.praxis-presentation__value a{color:var( --pfx-pres-link-color, color-mix( in srgb, var(--mat-sys-primary, #90caf9) 78%, var(--mat-sys-on-surface, #ffffff) 22% ) );text-decoration-color:var( --pfx-pres-link-decoration-color, color-mix(in srgb, currentColor 62%, transparent) );text-decoration-thickness:.08em;text-underline-offset:.18em;max-width:100%;overflow-wrap:anywhere;word-break:break-word}.praxis-presentation__value a:visited{color:var(--pfx-pres-link-visited-color, var(--pfx-pres-link-color, inherit))}.praxis-presentation__value a:hover{color:var(--pfx-pres-link-hover-color, var(--pfx-pres-link-color, currentColor));text-decoration-color:currentColor}.praxis-presentation__value a:focus-visible{outline:2px solid var(--pfx-pres-link-focus-ring-color, currentColor);outline-offset:2px;border-radius:2px}.praxis-presentation__content{display:flex;align-items:center;gap:6px;max-width:100%;min-width:0}.praxis-presentation__icon{flex:0 0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1;opacity:.85}.praxis-presentation--semantic{--pfx-pres-semantic-color: var(--mat-sys-on-surface-variant, currentColor);--pfx-pres-semantic-bg: color-mix(in srgb, currentColor 7%, transparent);--pfx-pres-semantic-border: color-mix(in srgb, currentColor 16%, transparent)}.praxis-presentation[data-presentation-tone=info]{--pfx-pres-semantic-color: var(--pfx-pres-info-color, var(--mat-sys-primary, #0b5cad))}.praxis-presentation[data-presentation-tone=success]{--pfx-pres-semantic-color: var(--pfx-pres-success-color, var(--praxis-success, #0f7b4a))}.praxis-presentation[data-presentation-tone=warning]{--pfx-pres-semantic-color: var(--pfx-pres-warning-color, var(--praxis-warning, #a16207))}.praxis-presentation[data-presentation-tone=danger]{--pfx-pres-semantic-color: var(--pfx-pres-danger-color, var(--mat-sys-error, #ba1a1a))}.praxis-presentation--semantic .praxis-presentation__icon{color:var(--pfx-pres-semantic-color);opacity:1}.praxis-presentation--semantic .praxis-presentation__content{justify-content:flex-start}.praxis-presentation--semantic .praxis-presentation__value{flex:0 1 auto}.praxis-presentation[data-presentation-presenter=status] .praxis-presentation__value,.praxis-presentation[data-presentation-presenter=badge] .praxis-presentation__value,.praxis-presentation[data-presentation-presenter=chip] .praxis-presentation__value{display:inline-flex;flex:0 1 auto;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--pfx-pres-status-min-height, 24px);padding:var(--pfx-pres-status-padding, 2px 9px);border-radius:var(--pfx-pres-status-radius, 999px);border:1px solid var(--pfx-pres-semantic-border);color:var(--pfx-pres-semantic-color);background:var(--pfx-pres-semantic-bg);font-size:var(--pfx-pres-status-font-size, .8rem);font-weight:var(--pfx-pres-status-font-weight, 700);line-height:var(--pfx-pres-status-line-height, 1.1)}.praxis-presentation[data-presentation-appearance=filled] .praxis-presentation__value{color:var(--pfx-pres-status-filled-color, var(--mat-sys-on-primary, #ffffff));background:var(--pfx-pres-semantic-color);border-color:var(--pfx-pres-semantic-color)}.praxis-presentation[data-presentation-appearance=outlined] .praxis-presentation__value{background:transparent;border-color:var(--pfx-pres-semantic-color)}.praxis-presentation[data-presentation-appearance=plain] .praxis-presentation__value{border-color:transparent;background:transparent;padding-inline:0}.praxis-presentation__badge{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;box-sizing:border-box;min-height:20px;padding:1px 7px;border-radius:999px;border:1px solid var(--pfx-pres-semantic-border, color-mix(in srgb, currentColor 16%, transparent));color:var(--pfx-pres-semantic-color, currentColor);background:var(--pfx-pres-semantic-bg, color-mix(in srgb, currentColor 7%, transparent));font-size:.72rem;line-height:1;font-weight:700;white-space:nowrap}.presentation-mode.pres-label-left .praxis-presentation{display:flex;align-items:center;gap:8px}.presentation-mode.pres-label-left .praxis-presentation__label{margin:0;min-width:var(--pfx-pres-label-width, 140px);opacity:.85;text-align:var(--pfx-pres-label-align, start)}.presentation-mode .praxis-presentation__value,.presentation-mode .praxis-presentation__content{flex:1 1 auto;min-width:0;text-align:var(--pfx-pres-value-align, start)}.presentation-mode .praxis-presentation--semantic .praxis-presentation__value{flex:0 1 auto}.presentation-mode .praxis-presentation--semantic .praxis-presentation__content{justify-content:flex-start}.presentation-mode .praxis-presentation--semantic[data-presentation-presenter=iconValue] .praxis-presentation__value{display:inline-flex;flex:0 0 auto;width:auto}@media(max-width:480px){.presentation-mode.pres-label-left .praxis-presentation{flex-direction:column;align-items:flex-start;gap:4px}.presentation-mode.pres-label-left .praxis-presentation__label{min-width:0;width:auto;text-align:start}.presentation-mode.pres-label-left .praxis-presentation__content{width:100%;flex-basis:auto}}.presentation-mode.pres-density-cozy .praxis-presentation{padding:6px 0}.presentation-mode.pres-density-compact .praxis-presentation{padding:2px 0;gap:6px}.presentation-mode.pres-compact .praxis-presentation{padding:2px 0}.presentation-mode.pres-compact .praxis-presentation__label,.presentation-mode.pres-density-compact .praxis-presentation__label{font-size:var(--pfx-pres-compact-label-size, var(--pfx-pres-label-size, .72rem));margin-bottom:var(--pfx-pres-compact-label-gap, 1px)}.presentation-mode.pres-compact .praxis-presentation__value,.presentation-mode.pres-density-compact .praxis-presentation__value{font-size:var(--pfx-pres-compact-value-size, var(--pfx-pres-value-size, .92rem));line-height:var(--pfx-pres-compact-value-line-height, 1.22)}.presentation-mode .praxis-presentation--boolean .praxis-presentation__value{display:inline-flex;flex:0 1 auto;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--pfx-pres-boolean-min-height, 22px);padding:var(--pfx-pres-boolean-padding, 0 8px);border-radius:var(--pfx-pres-boolean-radius, 999px);border:1px solid var(--pfx-pres-boolean-border-color, color-mix(in srgb, currentColor 18%, transparent));background:var(--pfx-pres-boolean-bg, color-mix(in srgb, currentColor 8%, transparent));font-size:var(--pfx-pres-boolean-font-size, .78rem);font-weight:var(--pfx-pres-boolean-font-weight, 700);line-height:var(--pfx-pres-boolean-line-height, 1);text-transform:var(--pfx-pres-boolean-text-transform, none)}.presentation-mode .praxis-presentation--boolean-true .praxis-presentation__value{color:var(--pfx-pres-boolean-true-color, var(--mat-sys-primary, currentColor));background:var(--pfx-pres-boolean-true-bg, color-mix(in srgb, var(--mat-sys-primary, currentColor) 10%, transparent));border-color:var(--pfx-pres-boolean-true-border-color, color-mix(in srgb, var(--mat-sys-primary, currentColor) 24%, transparent))}.presentation-mode .praxis-presentation--boolean-false .praxis-presentation__value{color:var(--pfx-pres-boolean-false-color, var(--mat-sys-on-surface-variant, currentColor));background:var(--pfx-pres-boolean-false-bg, color-mix(in srgb, var(--mat-sys-on-surface, currentColor) 6%, transparent));border-color:var(--pfx-pres-boolean-false-border-color, color-mix(in srgb, var(--mat-sys-on-surface, currentColor) 16%, transparent))}\n"] }]
+  `, styles: [".pfx-field-shell .mat-mdc-form-field,.pfx-field-shell mat-form-field{width:var(--pfx-field-shell-field-width, 100%)}.pfx-field-shell .mat-mdc-form-field-subscript-wrapper{min-height:20px;margin-top:2px}.pfx-field-shell .mat-mdc-form-field{margin-bottom:8px}.pfx-field-shell .mat-mdc-form-field-infix{min-width:0}:host{display:block;cursor:pointer;width:var(--pfx-field-shell-width, 100%);min-width:0;max-width:100%}.pfx-field-shell-wrapper,.pfx-field-shell-host{position:relative}.praxis-interaction-overlay{position:absolute;inset:0;pointer-events:all}.praxis-readonly-overlay,.praxis-disabled-overlay{cursor:not-allowed}.pfx-field-shell-authoring-hit-target{position:absolute;inset:0;z-index:2;display:block;width:100%;min-width:0;min-height:100%;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;appearance:none;-webkit-appearance:none}.pfx-field-shell-authoring-hit-target:focus-visible{outline:2px solid var(--mat-sys-primary, #90caf9);outline-offset:2px}.praxis-presentation{white-space:pre-wrap;display:block;max-width:100%;min-width:0;padding:6px 0}.praxis-presentation__label{display:block;font-size:var(--pdx-presentation-label-size, var(--pfx-pres-label-size, .78rem));line-height:1.2;letter-spacing:.02em;font-weight:500;opacity:.8;margin-bottom:2px}.praxis-presentation__value{display:block;flex:1 1 auto;max-width:100%;min-width:0;overflow-wrap:anywhere;word-break:break-word;font-size:var(--pdx-presentation-value-size, var(--pfx-pres-value-size, 1rem));line-height:1.35;font-weight:600;opacity:.95}.praxis-presentation__value a{color:var( --pfx-pres-link-color, color-mix( in srgb, var(--mat-sys-primary, #90caf9) 78%, var(--mat-sys-on-surface, #ffffff) 22% ) );text-decoration-color:var( --pfx-pres-link-decoration-color, color-mix(in srgb, currentColor 62%, transparent) );text-decoration-thickness:.08em;text-underline-offset:.18em;max-width:100%;overflow-wrap:anywhere;word-break:break-word}.praxis-presentation__value a:visited{color:var(--pfx-pres-link-visited-color, var(--pfx-pres-link-color, inherit))}.praxis-presentation__value a:hover{color:var(--pfx-pres-link-hover-color, var(--pfx-pres-link-color, currentColor));text-decoration-color:currentColor}.praxis-presentation__value a:focus-visible{outline:2px solid var(--pfx-pres-link-focus-ring-color, currentColor);outline-offset:2px;border-radius:2px}.praxis-presentation__content{display:flex;align-items:center;gap:6px;max-width:100%;min-width:0}.praxis-presentation__icon{flex:0 0 auto;font-size:1.125rem;width:1.125rem;height:1.125rem;line-height:1;opacity:.85}.praxis-presentation--semantic{--pfx-pres-semantic-color: var(--mat-sys-on-surface-variant, currentColor);--pfx-pres-semantic-bg: color-mix(in srgb, currentColor 7%, transparent);--pfx-pres-semantic-border: color-mix(in srgb, currentColor 16%, transparent)}.praxis-presentation[data-presentation-tone=info]{--pfx-pres-semantic-color: var(--pfx-pres-info-color, var(--mat-sys-primary, #0b5cad))}.praxis-presentation[data-presentation-tone=success]{--pfx-pres-semantic-color: var(--pfx-pres-success-color, var(--praxis-success, #0f7b4a))}.praxis-presentation[data-presentation-tone=warning]{--pfx-pres-semantic-color: var(--pfx-pres-warning-color, var(--praxis-warning, #a16207))}.praxis-presentation[data-presentation-tone=danger]{--pfx-pres-semantic-color: var(--pfx-pres-danger-color, var(--mat-sys-error, #ba1a1a))}.praxis-presentation--semantic .praxis-presentation__icon{color:var(--pfx-pres-semantic-color);opacity:1}.praxis-presentation--semantic .praxis-presentation__content{justify-content:flex-start}.praxis-presentation--semantic .praxis-presentation__value{flex:0 1 auto}.praxis-presentation[data-presentation-presenter=status] .praxis-presentation__value,.praxis-presentation[data-presentation-presenter=badge] .praxis-presentation__value,.praxis-presentation[data-presentation-presenter=chip] .praxis-presentation__value{display:inline-flex;flex:0 1 auto;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--pdx-presentation-flag-height, var(--pfx-pres-status-min-height, 24px));padding:var(--pdx-presentation-flag-padding, var(--pfx-pres-status-padding, 2px 9px));border-radius:var(--pdx-presentation-flag-radius, var(--pfx-pres-status-radius, 999px));border:1px solid var(--pfx-pres-semantic-border);color:var(--pfx-pres-semantic-color);background:var(--pfx-pres-semantic-bg);font-size:var(--pdx-presentation-flag-font-size, var(--pfx-pres-status-font-size, .8rem));font-weight:var(--pfx-pres-status-font-weight, 700);line-height:var(--pfx-pres-status-line-height, 1.1)}.praxis-presentation[data-presentation-appearance=filled] .praxis-presentation__value{color:var(--pfx-pres-status-filled-color, var(--mat-sys-on-primary, #ffffff));background:var(--pfx-pres-semantic-color);border-color:var(--pfx-pres-semantic-color)}.praxis-presentation[data-presentation-appearance=outlined] .praxis-presentation__value{background:transparent;border-color:var(--pfx-pres-semantic-color)}.praxis-presentation[data-presentation-appearance=plain] .praxis-presentation__value{border-color:transparent;background:transparent;padding-inline:0}.praxis-presentation__badge{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;box-sizing:border-box;min-height:20px;padding:1px 7px;border-radius:999px;border:1px solid var(--pfx-pres-semantic-border, color-mix(in srgb, currentColor 16%, transparent));color:var(--pfx-pres-semantic-color, currentColor);background:var(--pfx-pres-semantic-bg, color-mix(in srgb, currentColor 7%, transparent));font-size:.72rem;line-height:1;font-weight:700;white-space:nowrap}.presentation-mode.pres-label-left .praxis-presentation{display:flex;align-items:center;gap:8px}.presentation-mode.pres-label-left .praxis-presentation__label{margin:0;min-width:var(--pdx-presentation-label-width, var(--pfx-pres-label-width, 140px));opacity:.85;text-align:var(--pfx-pres-label-align, start)}.presentation-mode .praxis-presentation__value,.presentation-mode .praxis-presentation__content{flex:1 1 auto;min-width:0;text-align:var(--pfx-pres-value-align, start)}.presentation-mode .praxis-presentation--semantic .praxis-presentation__value{flex:0 1 auto}.presentation-mode .praxis-presentation--semantic .praxis-presentation__content{justify-content:flex-start}.presentation-mode .praxis-presentation--semantic[data-presentation-presenter=iconValue] .praxis-presentation__value{display:inline-flex;flex:0 0 auto;width:auto}.praxis-presentation[data-presentation-presenter=microVisualization] .praxis-presentation__value{display:block;width:100%;max-width:var(--pfx-pres-micro-max-width, 320px);font-size:var(--pfx-pres-micro-font-size, .78rem);line-height:1.2}.pfx-micro-viz{display:grid;gap:6px;width:100%;min-width:0}.pfx-micro-viz__fallback{color:var(--mat-sys-on-surface-variant, currentColor);font-weight:600}.pfx-micro-viz__row{display:grid;grid-template-columns:minmax(48px,.65fr) minmax(92px,1fr) auto;gap:6px;align-items:center;min-width:0}.pfx-micro-viz__label,.pfx-micro-viz__value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pfx-micro-viz__label{color:var(--mat-sys-on-surface-variant, currentColor);font-weight:600;opacity:.84}.pfx-micro-viz__value{justify-self:end;font-weight:700}.pfx-micro-viz__track{position:relative;height:8px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--mat-sys-on-surface, currentColor) 12%,transparent)}.pfx-micro-viz__bar,.pfx-micro-viz__target{position:absolute;inset-block:0;border-radius:inherit;background:var(--pfx-micro-tone-color, var(--mat-sys-primary, currentColor))}.pfx-micro-viz__segments{display:flex;height:10px;overflow:hidden;border-radius:999px;background:color-mix(in srgb,var(--mat-sys-on-surface, currentColor) 12%,transparent)}.pfx-micro-viz__segment{min-width:2px;background:var(--pfx-micro-tone-color, var(--mat-sys-primary, currentColor))}.pfx-micro-viz__bullet{display:grid;gap:5px}.pfx-micro-viz__bullet .pfx-micro-viz__track{height:12px}.pfx-micro-viz__target{width:2px;min-width:2px;transform:translate(-1px);background:var(--mat-sys-on-surface, currentColor);opacity:.74}.pfx-micro-viz__delta{display:inline-flex;align-items:center;gap:5px;min-width:0;color:var(--pfx-micro-tone-color, var(--mat-sys-primary, currentColor));font-weight:800}.pfx-micro-viz__delta-symbol{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:999px;background:color-mix(in srgb,currentColor 14%,transparent);font-size:.72rem;line-height:1}.pfx-micro-viz__meta{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;color:var(--mat-sys-on-surface-variant, currentColor);font-weight:600;opacity:.82}.pfx-micro-viz [data-tone=success]{--pfx-micro-tone-color: var(--praxis-success, #0f7b4a)}.pfx-micro-viz [data-tone=warning],.pfx-micro-viz[data-tone=warning]{--pfx-micro-tone-color: var(--praxis-warning, #a16207)}.pfx-micro-viz [data-tone=danger],.pfx-micro-viz[data-tone=danger],.pfx-micro-viz [data-tone=critical],.pfx-micro-viz[data-tone=critical]{--pfx-micro-tone-color: var(--mat-sys-error, #ba1a1a)}.pfx-micro-viz [data-tone=info],.pfx-micro-viz[data-tone=info]{--pfx-micro-tone-color: var(--mat-sys-primary, #0b5cad)}@media(max-width:480px){.presentation-mode.pres-label-left .praxis-presentation{flex-direction:column;align-items:flex-start;gap:4px}.presentation-mode.pres-label-left .praxis-presentation__label{min-width:0;width:auto;text-align:start}.presentation-mode.pres-label-left .praxis-presentation__content{width:100%;flex-basis:auto}}.presentation-mode.pres-density-cozy .praxis-presentation{padding:6px 0}.presentation-mode.pres-density-compact .praxis-presentation{padding:2px 0;gap:6px}.presentation-mode.pres-compact .praxis-presentation{padding:2px 0}.presentation-mode.pres-compact .praxis-presentation__label,.presentation-mode.pres-density-compact .praxis-presentation__label{font-size:var(--pdx-presentation-label-size, var(--pfx-pres-compact-label-size, var(--pfx-pres-label-size, .72rem)));margin-bottom:var(--pfx-pres-compact-label-gap, 1px)}.presentation-mode.pres-compact .praxis-presentation__value,.presentation-mode.pres-density-compact .praxis-presentation__value{font-size:var(--pdx-presentation-value-size, var(--pfx-pres-compact-value-size, var(--pfx-pres-value-size, .92rem)));line-height:var(--pfx-pres-compact-value-line-height, 1.22)}.presentation-mode .praxis-presentation--boolean .praxis-presentation__value{display:inline-flex;flex:0 1 auto;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--pdx-presentation-flag-height, var(--pfx-pres-boolean-min-height, 22px));padding:var(--pdx-presentation-flag-padding, var(--pfx-pres-boolean-padding, 0 8px));border-radius:var(--pdx-presentation-flag-radius, var(--pfx-pres-boolean-radius, 999px));border:1px solid var(--pfx-pres-boolean-border-color, color-mix(in srgb, currentColor 18%, transparent));background:var(--pfx-pres-boolean-bg, color-mix(in srgb, currentColor 8%, transparent));font-size:var(--pdx-presentation-flag-font-size, var(--pfx-pres-boolean-font-size, .78rem));font-weight:var(--pfx-pres-boolean-font-weight, 700);line-height:var(--pfx-pres-boolean-line-height, 1);text-transform:var(--pfx-pres-boolean-text-transform, none)}.presentation-mode .praxis-presentation--boolean-true .praxis-presentation__value{color:var(--pfx-pres-boolean-true-color, var(--mat-sys-primary, currentColor));background:var(--pfx-pres-boolean-true-bg, color-mix(in srgb, var(--mat-sys-primary, currentColor) 10%, transparent));border-color:var(--pfx-pres-boolean-true-border-color, color-mix(in srgb, var(--mat-sys-primary, currentColor) 24%, transparent))}.presentation-mode .praxis-presentation--boolean-false .praxis-presentation__value{color:var(--pfx-pres-boolean-false-color, var(--mat-sys-on-surface-variant, currentColor));background:var(--pfx-pres-boolean-false-bg, color-mix(in srgb, var(--mat-sys-on-surface, currentColor) 6%, transparent));border-color:var(--pfx-pres-boolean-false-border-color, color-mix(in srgb, var(--mat-sys-on-surface, currentColor) 16%, transparent))}\n"] }]
         }], propDecorators: { field: [{
                 type: Input
             }], index: [{
@@ -12880,15 +12964,28 @@ class MaterialAsyncSelectComponent extends SimpleBaseSelectComponent {
           ></mat-icon>
         </button>
       }
+
+      @if (fieldHelpPopoverText()) {
+        <mat-icon
+          matSuffix
+          class="pdx-field-help-icon"
+          [matTooltip]="fieldHelpPopoverText()"
+          matTooltipPosition="above"
+          [matTooltipDisabled]="fieldHelpPopoverDisabled()"
+          [attr.aria-label]="fieldHelpAriaLabel()"
+          tabindex="0"
+          [praxisIcon]="'help_outline'"
+        ></mat-icon>
+      }
     
       @if (hasValidationError()) {
         <mat-error>{{ errorMessage() }}</mat-error>
       }
-      @if (metadata()?.hint && !hasValidationError()) {
-        <mat-hint>{{ metadata()!.hint }}</mat-hint>
+      @if (hasInlineFieldHelp()) {
+        <mat-hint>{{ fieldHelpInlineText() }}</mat-hint>
       }
     </mat-form-field>
-    `, isInline: true, styles: ["::ng-deep .cdk-overlay-connected-position-bounding-box:has(.pdx-material-async-select-panel){z-index:var(--praxis-layer-popup, 1400)!important}::ng-deep .cdk-overlay-pane:has(.pdx-material-async-select-panel){z-index:var(--praxis-layer-popup, 1400)!important}::ng-deep .pdx-material-async-select-panel .pdx-select-search-option{box-sizing:border-box;display:block;padding:10px 16px}::ng-deep .pdx-material-async-select-panel .pdx-select-search-option input{width:100%}\n"], dependencies: [{ 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: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.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: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    `, isInline: true, styles: [".pdx-field-help-icon{border-radius:999px;color:var(--md-sys-color-on-surface-variant);cursor:help}.pdx-field-help-icon:focus{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}::ng-deep .cdk-overlay-connected-position-bounding-box:has(.pdx-material-async-select-panel){z-index:var(--praxis-layer-popup, 1400)!important}::ng-deep .cdk-overlay-pane:has(.pdx-material-async-select-panel){z-index:var(--praxis-layer-popup, 1400)!important}::ng-deep .pdx-material-async-select-panel .pdx-select-search-option{box-sizing:border-box;display:block;padding:10px 16px}::ng-deep .pdx-material-async-select-panel .pdx-select-search-option input{width:100%}\n"], dependencies: [{ 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: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.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: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MaterialAsyncSelectComponent, decorators: [{
             type: Component,
@@ -13002,12 +13099,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
           ></mat-icon>
         </button>
       }
+
+      @if (fieldHelpPopoverText()) {
+        <mat-icon
+          matSuffix
+          class="pdx-field-help-icon"
+          [matTooltip]="fieldHelpPopoverText()"
+          matTooltipPosition="above"
+          [matTooltipDisabled]="fieldHelpPopoverDisabled()"
+          [attr.aria-label]="fieldHelpAriaLabel()"
+          tabindex="0"
+          [praxisIcon]="'help_outline'"
+        ></mat-icon>
+      }
     
       @if (hasValidationError()) {
         <mat-error>{{ errorMessage() }}</mat-error>
       }
-      @if (metadata()?.hint && !hasValidationError()) {
-        <mat-hint>{{ metadata()!.hint }}</mat-hint>
+      @if (hasInlineFieldHelp()) {
+        <mat-hint>{{ fieldHelpInlineText() }}</mat-hint>
       }
     </mat-form-field>
     `, providers: [
@@ -13025,7 +13135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         '[attr.data-field-type]': '"async-select"',
                         '[attr.data-field-name]': 'metadata()?.name',
                         '[attr.data-component-id]': 'componentId()',
-                    }, styles: ["::ng-deep .cdk-overlay-connected-position-bounding-box:has(.pdx-material-async-select-panel){z-index:var(--praxis-layer-popup, 1400)!important}::ng-deep .cdk-overlay-pane:has(.pdx-material-async-select-panel){z-index:var(--praxis-layer-popup, 1400)!important}::ng-deep .pdx-material-async-select-panel .pdx-select-search-option{box-sizing:border-box;display:block;padding:10px 16px}::ng-deep .pdx-material-async-select-panel .pdx-select-search-option input{width:100%}\n"] }]
+                    }, styles: [".pdx-field-help-icon{border-radius:999px;color:var(--md-sys-color-on-surface-variant);cursor:help}.pdx-field-help-icon:focus{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}::ng-deep .cdk-overlay-connected-position-bounding-box:has(.pdx-material-async-select-panel){z-index:var(--praxis-layer-popup, 1400)!important}::ng-deep .cdk-overlay-pane:has(.pdx-material-async-select-panel){z-index:var(--praxis-layer-popup, 1400)!important}::ng-deep .pdx-material-async-select-panel .pdx-select-search-option{box-sizing:border-box;display:block;padding:10px 16px}::ng-deep .pdx-material-async-select-panel .pdx-select-search-option input{width:100%}\n"] }]
         }], propDecorators: { readonlyMode: [{
                 type: Input
             }], disabledMode: [{
@@ -13965,7 +14075,7 @@ class InlineEntityLookupComponent extends MaterialAsyncSelectComponent {
             .trim();
     }
     interpolateLookupText(template, values) {
-        return Object.entries(values).reduce((resolved, [key, value]) => resolved.replaceAll(`{${key}}`, value), template);
+        return Object.entries(values).reduce((resolved, [key, value]) => resolved.split(`{${key}}`).join(value), template);
     }
     lookupDependencyLabels() {
         const dependsOn = this.optionSource()?.dependsOn ?? [];
@@ -18887,6 +18997,18 @@ class MaterialSelectComponent extends SimpleBaseSelectComponent {
           [praxisIcon]="metadata()!.suffixIcon"
         ></mat-icon>
       }
+      @if (fieldHelpPopoverText()) {
+        <mat-icon
+          matSuffix
+          class="pdx-field-help-icon"
+          [matTooltip]="fieldHelpPopoverText()"
+          matTooltipPosition="above"
+          [matTooltipDisabled]="fieldHelpPopoverDisabled()"
+          [attr.aria-label]="fieldHelpAriaLabel()"
+          tabindex="0"
+          [praxisIcon]="'help_outline'"
+        ></mat-icon>
+      }
       @if (!loading() && showClear()) {
         <button
           mat-icon-button
@@ -18907,11 +19029,11 @@ class MaterialSelectComponent extends SimpleBaseSelectComponent {
       @if (hasValidationError()) {
         <mat-error>{{ errorMessage() }}</mat-error>
       }
-      @if (metadata()?.hint && !hasValidationError()) {
-        <mat-hint>{{ metadata()!.hint }}</mat-hint>
+      @if (hasInlineFieldHelp()) {
+        <mat-hint>{{ fieldHelpInlineText() }}</mat-hint>
       }
     </mat-form-field>
-    `, isInline: true, styles: ["::ng-deep .cdk-overlay-connected-position-bounding-box:has(.pdx-material-select-panel){z-index:var(--praxis-layer-popup, 1400)!important}::ng-deep .cdk-overlay-pane:has(.pdx-material-select-panel){z-index:var(--praxis-layer-popup, 1400)!important;border-radius:8px!important;overflow:hidden!important}::ng-deep .pdx-material-select-panel{--pdx-material-select-panel-surface: var( --pdx-overlay-surface, var(--md-sys-color-surface-container-highest, light-dark(#ffffff, #121c28)) );--pdx-material-select-panel-on-surface: var( --pdx-overlay-on-surface, var(--md-sys-color-on-surface, #111827) );--mat-select-panel-background-color: var(--pdx-material-select-panel-surface);--mat-option-label-text-color: var(--pdx-material-select-panel-on-surface);--mat-option-selected-state-label-text-color: var(--md-sys-color-primary, #2563eb);--mat-option-selected-state-layer-color: color-mix( in srgb, var(--md-sys-color-primary, #2563eb) 12%, var(--pdx-material-select-panel-surface) );--mat-option-hover-state-layer-color: color-mix( in srgb, var(--md-sys-color-primary, #2563eb) 8%, var(--pdx-material-select-panel-surface) );--mat-option-focus-state-layer-color: color-mix( in srgb, var(--md-sys-color-primary, #2563eb) 10%, var(--pdx-material-select-panel-surface) );background-color:var(--pdx-material-select-panel-surface)!important;background-image:none!important;border:1px solid var(--md-sys-color-outline-variant, rgba(148, 163, 184, .38))!important;box-shadow:var(--md-sys-elevation-level3, 0 18px 44px rgba(15, 23, 42, .18))!important;color:var(--pdx-material-select-panel-on-surface)!important}::ng-deep .cdk-overlay-pane:has(.pdx-material-select-panel) div.mat-mdc-select-panel.pdx-material-select-panel{background-color:var(--pdx-material-select-panel-surface)!important;background-image:none!important;border-radius:8px!important;overflow:auto!important}::ng-deep .pdx-material-select-panel .pdx-select-search-option{box-sizing:border-box;display:block;padding:10px 16px}::ng-deep .pdx-material-select-panel .pdx-select-search-option input{width:100%}::ng-deep .pdx-material-select-panel .mat-mdc-option{min-height:48px;height:auto}::ng-deep .pdx-material-select-panel .pdx-material-select-option{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.2}::ng-deep .pdx-material-select-panel .pdx-material-select-option__label,::ng-deep .pdx-material-select-panel .pdx-material-select-option__description{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .pdx-material-select-panel .pdx-material-select-option__description{color:color-mix(in srgb,var(--pdx-material-select-panel-on-surface) 68%,transparent);font-size:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: i3$1.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: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
+    `, isInline: true, styles: [".pdx-field-help-icon{border-radius:999px;color:var(--md-sys-color-on-surface-variant);cursor:help}.pdx-field-help-icon:focus{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}::ng-deep .cdk-overlay-connected-position-bounding-box:has(.pdx-material-select-panel){z-index:var(--praxis-layer-popup, 1400)!important}::ng-deep .cdk-overlay-pane:has(.pdx-material-select-panel){z-index:var(--praxis-layer-popup, 1400)!important;border-radius:8px!important;overflow:hidden!important}::ng-deep .pdx-material-select-panel{--pdx-material-select-panel-surface: var( --pdx-overlay-surface, var(--md-sys-color-surface-container-highest, light-dark(#ffffff, #121c28)) );--pdx-material-select-panel-on-surface: var( --pdx-overlay-on-surface, var(--md-sys-color-on-surface, #111827) );--mat-select-panel-background-color: var(--pdx-material-select-panel-surface);--mat-option-label-text-color: var(--pdx-material-select-panel-on-surface);--mat-option-selected-state-label-text-color: var(--md-sys-color-primary, #2563eb);--mat-option-selected-state-layer-color: color-mix( in srgb, var(--md-sys-color-primary, #2563eb) 12%, var(--pdx-material-select-panel-surface) );--mat-option-hover-state-layer-color: color-mix( in srgb, var(--md-sys-color-primary, #2563eb) 8%, var(--pdx-material-select-panel-surface) );--mat-option-focus-state-layer-color: color-mix( in srgb, var(--md-sys-color-primary, #2563eb) 10%, var(--pdx-material-select-panel-surface) );background-color:var(--pdx-material-select-panel-surface)!important;background-image:none!important;border:1px solid var(--md-sys-color-outline-variant, rgba(148, 163, 184, .38))!important;box-shadow:var(--md-sys-elevation-level3, 0 18px 44px rgba(15, 23, 42, .18))!important;color:var(--pdx-material-select-panel-on-surface)!important}::ng-deep .cdk-overlay-pane:has(.pdx-material-select-panel) div.mat-mdc-select-panel.pdx-material-select-panel{background-color:var(--pdx-material-select-panel-surface)!important;background-image:none!important;border-radius:8px!important;overflow:auto!important}::ng-deep .pdx-material-select-panel .pdx-select-search-option{box-sizing:border-box;display:block;padding:10px 16px}::ng-deep .pdx-material-select-panel .pdx-select-search-option input{width:100%}::ng-deep .pdx-material-select-panel .mat-mdc-option{min-height:48px;height:auto}::ng-deep .pdx-material-select-panel .pdx-material-select-option{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.2}::ng-deep .pdx-material-select-panel .pdx-material-select-option__label,::ng-deep .pdx-material-select-panel .pdx-material-select-option__description{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .pdx-material-select-panel .pdx-material-select-option__description{color:color-mix(in srgb,var(--pdx-material-select-panel-on-surface) 68%,transparent);font-size:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: i3$1.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: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MaterialSelectComponent, decorators: [{
             type: Component,
@@ -19026,6 +19148,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
           [praxisIcon]="metadata()!.suffixIcon"
         ></mat-icon>
       }
+      @if (fieldHelpPopoverText()) {
+        <mat-icon
+          matSuffix
+          class="pdx-field-help-icon"
+          [matTooltip]="fieldHelpPopoverText()"
+          matTooltipPosition="above"
+          [matTooltipDisabled]="fieldHelpPopoverDisabled()"
+          [attr.aria-label]="fieldHelpAriaLabel()"
+          tabindex="0"
+          [praxisIcon]="'help_outline'"
+        ></mat-icon>
+      }
       @if (!loading() && showClear()) {
         <button
           mat-icon-button
@@ -19046,8 +19180,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       @if (hasValidationError()) {
         <mat-error>{{ errorMessage() }}</mat-error>
       }
-      @if (metadata()?.hint && !hasValidationError()) {
-        <mat-hint>{{ metadata()!.hint }}</mat-hint>
+      @if (hasInlineFieldHelp()) {
+        <mat-hint>{{ fieldHelpInlineText() }}</mat-hint>
       }
     </mat-form-field>
     `, providers: [
@@ -19066,7 +19200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         '[attr.data-field-type]': '"select"',
                         '[attr.data-field-name]': 'metadata()?.name',
                         '[attr.data-component-id]': 'componentId()',
-                    }, styles: ["::ng-deep .cdk-overlay-connected-position-bounding-box:has(.pdx-material-select-panel){z-index:var(--praxis-layer-popup, 1400)!important}::ng-deep .cdk-overlay-pane:has(.pdx-material-select-panel){z-index:var(--praxis-layer-popup, 1400)!important;border-radius:8px!important;overflow:hidden!important}::ng-deep .pdx-material-select-panel{--pdx-material-select-panel-surface: var( --pdx-overlay-surface, var(--md-sys-color-surface-container-highest, light-dark(#ffffff, #121c28)) );--pdx-material-select-panel-on-surface: var( --pdx-overlay-on-surface, var(--md-sys-color-on-surface, #111827) );--mat-select-panel-background-color: var(--pdx-material-select-panel-surface);--mat-option-label-text-color: var(--pdx-material-select-panel-on-surface);--mat-option-selected-state-label-text-color: var(--md-sys-color-primary, #2563eb);--mat-option-selected-state-layer-color: color-mix( in srgb, var(--md-sys-color-primary, #2563eb) 12%, var(--pdx-material-select-panel-surface) );--mat-option-hover-state-layer-color: color-mix( in srgb, var(--md-sys-color-primary, #2563eb) 8%, var(--pdx-material-select-panel-surface) );--mat-option-focus-state-layer-color: color-mix( in srgb, var(--md-sys-color-primary, #2563eb) 10%, var(--pdx-material-select-panel-surface) );background-color:var(--pdx-material-select-panel-surface)!important;background-image:none!important;border:1px solid var(--md-sys-color-outline-variant, rgba(148, 163, 184, .38))!important;box-shadow:var(--md-sys-elevation-level3, 0 18px 44px rgba(15, 23, 42, .18))!important;color:var(--pdx-material-select-panel-on-surface)!important}::ng-deep .cdk-overlay-pane:has(.pdx-material-select-panel) div.mat-mdc-select-panel.pdx-material-select-panel{background-color:var(--pdx-material-select-panel-surface)!important;background-image:none!important;border-radius:8px!important;overflow:auto!important}::ng-deep .pdx-material-select-panel .pdx-select-search-option{box-sizing:border-box;display:block;padding:10px 16px}::ng-deep .pdx-material-select-panel .pdx-select-search-option input{width:100%}::ng-deep .pdx-material-select-panel .mat-mdc-option{min-height:48px;height:auto}::ng-deep .pdx-material-select-panel .pdx-material-select-option{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.2}::ng-deep .pdx-material-select-panel .pdx-material-select-option__label,::ng-deep .pdx-material-select-panel .pdx-material-select-option__description{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .pdx-material-select-panel .pdx-material-select-option__description{color:color-mix(in srgb,var(--pdx-material-select-panel-on-surface) 68%,transparent);font-size:.75rem}\n"] }]
+                    }, styles: [".pdx-field-help-icon{border-radius:999px;color:var(--md-sys-color-on-surface-variant);cursor:help}.pdx-field-help-icon:focus{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}::ng-deep .cdk-overlay-connected-position-bounding-box:has(.pdx-material-select-panel){z-index:var(--praxis-layer-popup, 1400)!important}::ng-deep .cdk-overlay-pane:has(.pdx-material-select-panel){z-index:var(--praxis-layer-popup, 1400)!important;border-radius:8px!important;overflow:hidden!important}::ng-deep .pdx-material-select-panel{--pdx-material-select-panel-surface: var( --pdx-overlay-surface, var(--md-sys-color-surface-container-highest, light-dark(#ffffff, #121c28)) );--pdx-material-select-panel-on-surface: var( --pdx-overlay-on-surface, var(--md-sys-color-on-surface, #111827) );--mat-select-panel-background-color: var(--pdx-material-select-panel-surface);--mat-option-label-text-color: var(--pdx-material-select-panel-on-surface);--mat-option-selected-state-label-text-color: var(--md-sys-color-primary, #2563eb);--mat-option-selected-state-layer-color: color-mix( in srgb, var(--md-sys-color-primary, #2563eb) 12%, var(--pdx-material-select-panel-surface) );--mat-option-hover-state-layer-color: color-mix( in srgb, var(--md-sys-color-primary, #2563eb) 8%, var(--pdx-material-select-panel-surface) );--mat-option-focus-state-layer-color: color-mix( in srgb, var(--md-sys-color-primary, #2563eb) 10%, var(--pdx-material-select-panel-surface) );background-color:var(--pdx-material-select-panel-surface)!important;background-image:none!important;border:1px solid var(--md-sys-color-outline-variant, rgba(148, 163, 184, .38))!important;box-shadow:var(--md-sys-elevation-level3, 0 18px 44px rgba(15, 23, 42, .18))!important;color:var(--pdx-material-select-panel-on-surface)!important}::ng-deep .cdk-overlay-pane:has(.pdx-material-select-panel) div.mat-mdc-select-panel.pdx-material-select-panel{background-color:var(--pdx-material-select-panel-surface)!important;background-image:none!important;border-radius:8px!important;overflow:auto!important}::ng-deep .pdx-material-select-panel .pdx-select-search-option{box-sizing:border-box;display:block;padding:10px 16px}::ng-deep .pdx-material-select-panel .pdx-select-search-option input{width:100%}::ng-deep .pdx-material-select-panel .mat-mdc-option{min-height:48px;height:auto}::ng-deep .pdx-material-select-panel .pdx-material-select-option{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.2}::ng-deep .pdx-material-select-panel .pdx-material-select-option__label,::ng-deep .pdx-material-select-panel .pdx-material-select-option__description{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .pdx-material-select-panel .pdx-material-select-option__description{color:color-mix(in srgb,var(--pdx-material-select-panel-on-surface) 68%,transparent);font-size:.75rem}\n"] }]
         }], propDecorators: { readonlyMode: [{
                 type: Input
             }], disabledMode: [{
@@ -19232,21 +19366,36 @@ class MaterialSlideToggleComponent extends SimpleBaseInputComponent {
         {{ label }}
       </mat-slide-toggle>
 
+      @if (fieldHelpPopoverText()) {
+        <mat-icon
+          class="pdx-field-help-icon"
+          [matTooltip]="fieldHelpPopoverText()"
+          matTooltipPosition="above"
+          [matTooltipDisabled]="fieldHelpPopoverDisabled()"
+          [attr.aria-label]="fieldHelpAriaLabel()"
+          tabindex="0"
+          [praxisIcon]="'help_outline'"
+        ></mat-icon>
+      }
+
       @if (hasValidationError()) {
         <div class="pdx-error">{{ errorMessage() }}</div>
       }
-      @if (metadata()?.hint && !hasValidationError()) {
-        <div class="pdx-hint">{{ metadata()!.hint }}</div>
+      @if (hasInlineFieldHelp()) {
+        <div class="pdx-hint">{{ fieldHelpInlineText() }}</div>
       }
     </div>
-  `, isInline: true, styles: [".pdx-slide-toggle-wrapper{display:flex;align-items:center;width:100%;min-height:56px;padding:4px 0;border-radius:var(--md-sys-shape-corner-large, 16px)}.pdx-slide-toggle-wrapper:focus-within{outline:2px solid var(--md-sys-color-primary);outline-offset:3px;box-shadow:0 0 0 4px color-mix(in srgb,var(--md-sys-color-primary) 14%,transparent)}:host{display:block;width:100%}mat-slide-toggle{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i2$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+  `, isInline: true, styles: [".pdx-slide-toggle-wrapper{display:flex;align-items:center;width:100%;min-height:56px;padding:4px 0;border-radius:var(--md-sys-shape-corner-large, 16px)}.pdx-slide-toggle-wrapper:focus-within{outline:2px solid var(--md-sys-color-primary);outline-offset:3px;box-shadow:0 0 0 4px color-mix(in srgb,var(--md-sys-color-primary) 14%,transparent)}:host{display:block;width:100%}mat-slide-toggle{flex:1 1 auto;min-width:0}.pdx-field-help-icon{border-radius:999px;flex:0 0 auto;margin-inline-start:4px;color:var(--md-sys-color-on-surface-variant);cursor:help}.pdx-field-help-icon:focus{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i2$3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MaterialSlideToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pdx-material-slide-toggle', standalone: true, imports: [
                         ReactiveFormsModule,
                         MatSlideToggleModule,
-                        MatTooltipModule
+                        MatTooltipModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        PraxisIconDirective
                     ], template: `
     <div
       class="pdx-slide-toggle-wrapper"
@@ -19275,11 +19424,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         {{ label }}
       </mat-slide-toggle>
 
+      @if (fieldHelpPopoverText()) {
+        <mat-icon
+          class="pdx-field-help-icon"
+          [matTooltip]="fieldHelpPopoverText()"
+          matTooltipPosition="above"
+          [matTooltipDisabled]="fieldHelpPopoverDisabled()"
+          [attr.aria-label]="fieldHelpAriaLabel()"
+          tabindex="0"
+          [praxisIcon]="'help_outline'"
+        ></mat-icon>
+      }
+
       @if (hasValidationError()) {
         <div class="pdx-error">{{ errorMessage() }}</div>
       }
-      @if (metadata()?.hint && !hasValidationError()) {
-        <div class="pdx-hint">{{ metadata()!.hint }}</div>
+      @if (hasInlineFieldHelp()) {
+        <div class="pdx-hint">{{ fieldHelpInlineText() }}</div>
       }
     </div>
   `, providers: [
@@ -19297,7 +19458,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         '[attr.data-field-type]': '"toggle"',
                         '[attr.data-field-name]': 'metadata()?.name',
                         '[attr.data-component-id]': 'componentId()',
-                    }, styles: [".pdx-slide-toggle-wrapper{display:flex;align-items:center;width:100%;min-height:56px;padding:4px 0;border-radius:var(--md-sys-shape-corner-large, 16px)}.pdx-slide-toggle-wrapper:focus-within{outline:2px solid var(--md-sys-color-primary);outline-offset:3px;box-shadow:0 0 0 4px color-mix(in srgb,var(--md-sys-color-primary) 14%,transparent)}:host{display:block;width:100%}mat-slide-toggle{width:100%}\n"] }]
+                    }, styles: [".pdx-slide-toggle-wrapper{display:flex;align-items:center;width:100%;min-height:56px;padding:4px 0;border-radius:var(--md-sys-shape-corner-large, 16px)}.pdx-slide-toggle-wrapper:focus-within{outline:2px solid var(--md-sys-color-primary);outline-offset:3px;box-shadow:0 0 0 4px color-mix(in srgb,var(--md-sys-color-primary) 14%,transparent)}:host{display:block;width:100%}mat-slide-toggle{flex:1 1 auto;min-width:0}.pdx-field-help-icon{border-radius:999px;flex:0 0 auto;margin-inline-start:4px;color:var(--md-sys-color-on-surface-variant);cursor:help}.pdx-field-help-icon:focus{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}\n"] }]
         }], propDecorators: { readonlyMode: [{
                 type: Input
             }], disabledMode: [{
@@ -19852,13 +20013,26 @@ class NumberInputComponent extends SimpleBaseInputComponent {
         ></mat-icon>
       }
 
+      @if (fieldHelpPopoverText()) {
+        <mat-icon
+          matSuffix
+          class="pdx-field-help-icon"
+          [matTooltip]="fieldHelpPopoverText()"
+          matTooltipPosition="above"
+          [matTooltipDisabled]="fieldHelpPopoverDisabled()"
+          [attr.aria-label]="fieldHelpAriaLabel()"
+          tabindex="0"
+          [praxisIcon]="'help_outline'"
+        ></mat-icon>
+      }
+
       @if (hasValidationError()) {
         <mat-error>{{ errorMessage() }}</mat-error>
       }
 
-      @if (metadata()?.hint && !hasValidationError()) {
+      @if (hasInlineFieldHelp()) {
         <mat-hint [align]="metadata()?.hintAlign || 'start'">{{
-          metadata()!.hint
+          fieldHelpInlineText()
         }}</mat-hint>
       }
 
@@ -19880,14 +20054,11 @@ class NumberInputComponent extends SimpleBaseInputComponent {
         </button>
       }
     </mat-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+  `, isInline: true, styles: [".pdx-field-help-icon{border-radius:999px;color:var(--md-sys-color-on-surface-variant);cursor:help}.pdx-field-help-icon:focus{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NumberInputComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'pdx-number-input',
-                    standalone: true,
-                    template: `
+            args: [{ selector: 'pdx-number-input', standalone: true, template: `
     <mat-form-field
       [appearance]="materialAppearance()"
       [color]="materialColor()"
@@ -19934,13 +20105,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         ></mat-icon>
       }
 
+      @if (fieldHelpPopoverText()) {
+        <mat-icon
+          matSuffix
+          class="pdx-field-help-icon"
+          [matTooltip]="fieldHelpPopoverText()"
+          matTooltipPosition="above"
+          [matTooltipDisabled]="fieldHelpPopoverDisabled()"
+          [attr.aria-label]="fieldHelpAriaLabel()"
+          tabindex="0"
+          [praxisIcon]="'help_outline'"
+        ></mat-icon>
+      }
+
       @if (hasValidationError()) {
         <mat-error>{{ errorMessage() }}</mat-error>
       }
 
-      @if (metadata()?.hint && !hasValidationError()) {
+      @if (hasInlineFieldHelp()) {
         <mat-hint [align]="metadata()?.hintAlign || 'start'">{{
-          metadata()!.hint
+          fieldHelpInlineText()
         }}</mat-hint>
       }
 
@@ -19962,8 +20146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         </button>
       }
     </mat-form-field>
-  `,
-                    imports: [
+  `, imports: [
                         MatFormFieldModule,
                         MatInputModule,
                         MatIconModule,
@@ -19971,15 +20154,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatButtonModule,
                         PraxisIconDirective,
                         ReactiveFormsModule
-                    ],
-                    providers: [
+                    ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => NumberInputComponent),
                             multi: true,
                         },
-                    ],
-                    host: {
+                    ], host: {
                         '[class]': 'componentCssClasses()',
                         '[class.praxis-disabled]': 'disabledMode',
                         '[style.display]': 'visible ? "block" : "none"',
@@ -19988,8 +20169,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         '[attr.data-field-type]': '"numericTextBox"',
                         '[attr.data-field-name]': 'metadata()?.name',
                         '[attr.data-component-id]': 'componentId()',
-                    },
-                }]
+                    }, styles: [".pdx-field-help-icon{border-radius:999px;color:var(--md-sys-color-on-surface-variant);cursor:help}.pdx-field-help-icon:focus{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}\n"] }]
         }], propDecorators: { validationChange: [{ type: i0.Output, args: ["validationChange"] }], readonlyMode: [{
                 type: Input
             }], disabledMode: [{
@@ -20688,6 +20868,19 @@ class TextInputComponent extends SimpleBaseInputComponent {
         ></mat-icon>
       }
 
+      @if (fieldHelpPopoverText()) {
+        <mat-icon
+          matSuffix
+          class="pdx-field-help-icon"
+          [matTooltip]="fieldHelpPopoverText()"
+          matTooltipPosition="above"
+          [matTooltipDisabled]="fieldHelpPopoverDisabled()"
+          [attr.aria-label]="fieldHelpAriaLabel()"
+          tabindex="0"
+          [praxisIcon]="'help_outline'"
+        ></mat-icon>
+      }
+
       @if (showClear()) {
         <button
           mat-icon-button
@@ -20710,9 +20903,9 @@ class TextInputComponent extends SimpleBaseInputComponent {
         <mat-error>{{ errorMessage() }}</mat-error>
       }
 
-      @if (metadata()?.hint && !hasValidationError()) {
+      @if (hasInlineFieldHelp()) {
         <mat-hint [align]="metadata()?.hintAlign || 'start'">{{
-          metadata()!.hint
+          fieldHelpInlineText()
         }}</mat-hint>
       }
 
@@ -20723,14 +20916,11 @@ class TextInputComponent extends SimpleBaseInputComponent {
         </mat-hint>
       }
     </mat-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+  `, isInline: true, styles: [".pdx-field-help-icon{border-radius:999px;color:var(--md-sys-color-on-surface-variant);cursor:help}.pdx-field-help-icon:focus{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'pdx-text-input',
-                    standalone: true,
-                    template: `
+            args: [{ selector: 'pdx-text-input', standalone: true, template: `
     <mat-form-field
       [appearance]="materialAppearance()"
       [color]="materialColor()"
@@ -20780,6 +20970,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         ></mat-icon>
       }
 
+      @if (fieldHelpPopoverText()) {
+        <mat-icon
+          matSuffix
+          class="pdx-field-help-icon"
+          [matTooltip]="fieldHelpPopoverText()"
+          matTooltipPosition="above"
+          [matTooltipDisabled]="fieldHelpPopoverDisabled()"
+          [attr.aria-label]="fieldHelpAriaLabel()"
+          tabindex="0"
+          [praxisIcon]="'help_outline'"
+        ></mat-icon>
+      }
+
       @if (showClear()) {
         <button
           mat-icon-button
@@ -20802,9 +21005,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         <mat-error>{{ errorMessage() }}</mat-error>
       }
 
-      @if (metadata()?.hint && !hasValidationError()) {
+      @if (hasInlineFieldHelp()) {
         <mat-hint [align]="metadata()?.hintAlign || 'start'">{{
-          metadata()!.hint
+          fieldHelpInlineText()
         }}</mat-hint>
       }
 
@@ -20815,8 +21018,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         </mat-hint>
       }
     </mat-form-field>
-  `,
-                    imports: [
+  `, imports: [
                         MatInputModule,
                         MatFormFieldModule,
                         MatIconModule,
@@ -20824,15 +21026,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatButtonModule,
                         PraxisIconDirective,
                         ReactiveFormsModule
-                    ],
-                    providers: [
+                    ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => TextInputComponent),
                             multi: true,
                         },
-                    ],
-                    host: {
+                    ], host: {
                         '[class]': 'componentCssClasses()',
                         '[class.praxis-disabled]': 'disabledMode',
                         '[style.display]': 'visible ? "block" : "none"',
@@ -20841,8 +21041,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         '[attr.data-field-type]': '"input"',
                         '[attr.data-field-name]': 'metadata()?.name',
                         '[attr.data-component-id]': 'componentId()',
-                    },
-                }]
+                    }, styles: [".pdx-field-help-icon{border-radius:999px;color:var(--md-sys-color-on-surface-variant);cursor:help}.pdx-field-help-icon:focus{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}\n"] }]
         }], propDecorators: { validationChange: [{ type: i0.Output, args: ["validationChange"] }], readonlyMode: [{
                 type: Input
             }], disabledMode: [{
@@ -29084,6 +29283,18 @@ class MaterialAutocompleteComponent extends SimpleBaseSelectComponent {
           [praxisIcon]="metadata()!.suffixIcon"
         ></mat-icon>
       }
+      @if (fieldHelpPopoverText()) {
+        <mat-icon
+          matSuffix
+          class="pdx-field-help-icon"
+          [matTooltip]="fieldHelpPopoverText()"
+          matTooltipPosition="above"
+          [matTooltipDisabled]="fieldHelpPopoverDisabled()"
+          [attr.aria-label]="fieldHelpAriaLabel()"
+          tabindex="0"
+          [praxisIcon]="'help_outline'"
+        ></mat-icon>
+      }
       @if (showClear()) {
         <button
           mat-icon-button
@@ -29104,11 +29315,11 @@ class MaterialAutocompleteComponent extends SimpleBaseSelectComponent {
       @if (hasValidationError()) {
         <mat-error>{{ errorMessage() }}</mat-error>
       }
-      @if (metadata()?.hint && !hasValidationError()) {
-        <mat-hint>{{ metadata()!.hint }}</mat-hint>
+      @if (hasInlineFieldHelp()) {
+        <mat-hint>{{ fieldHelpInlineText() }}</mat-hint>
       }
     </mat-form-field>
-    `, isInline: true, styles: [":host ::ng-deep .cdk-overlay-connected-position-bounding-box:has(.pdx-autocomplete-panel){z-index:var(--praxis-layer-popup, 1400)!important}:host ::ng-deep .cdk-overlay-pane:has(.pdx-autocomplete-panel){z-index:var(--praxis-layer-popup, 1400)!important}:host ::ng-deep .pdx-autocomplete-panel .pdx-autocomplete-viewport{height:256px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatAutocompleteModule }, { kind: "component", type: i4$2.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: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i8.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i8.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i8.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { 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: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
+    `, isInline: true, styles: [":host ::ng-deep .cdk-overlay-connected-position-bounding-box:has(.pdx-autocomplete-panel){z-index:var(--praxis-layer-popup, 1400)!important}:host ::ng-deep .cdk-overlay-pane:has(.pdx-autocomplete-panel){z-index:var(--praxis-layer-popup, 1400)!important}:host ::ng-deep .pdx-autocomplete-panel .pdx-autocomplete-viewport{height:256px}\n", ".pdx-field-help-icon{border-radius:999px;color:var(--md-sys-color-on-surface-variant);cursor:help}.pdx-field-help-icon:focus{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatAutocompleteModule }, { kind: "component", type: i4$2.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: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i8.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i8.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i8.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { 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: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: MaterialAutocompleteComponent, decorators: [{
             type: Component,
@@ -29197,6 +29408,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
           [praxisIcon]="metadata()!.suffixIcon"
         ></mat-icon>
       }
+      @if (fieldHelpPopoverText()) {
+        <mat-icon
+          matSuffix
+          class="pdx-field-help-icon"
+          [matTooltip]="fieldHelpPopoverText()"
+          matTooltipPosition="above"
+          [matTooltipDisabled]="fieldHelpPopoverDisabled()"
+          [attr.aria-label]="fieldHelpAriaLabel()"
+          tabindex="0"
+          [praxisIcon]="'help_outline'"
+        ></mat-icon>
+      }
       @if (showClear()) {
         <button
           mat-icon-button
@@ -29217,8 +29440,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       @if (hasValidationError()) {
         <mat-error>{{ errorMessage() }}</mat-error>
       }
-      @if (metadata()?.hint && !hasValidationError()) {
-        <mat-hint>{{ metadata()!.hint }}</mat-hint>
+      @if (hasInlineFieldHelp()) {
+        <mat-hint>{{ fieldHelpInlineText() }}</mat-hint>
       }
     </mat-form-field>
     `, providers: [
@@ -29236,7 +29459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         '[attr.data-field-type]': '"autocomplete"',
                         '[attr.data-field-name]': 'metadata()?.name',
                         '[attr.data-component-id]': 'componentId()',
-                    }, styles: [":host ::ng-deep .cdk-overlay-connected-position-bounding-box:has(.pdx-autocomplete-panel){z-index:var(--praxis-layer-popup, 1400)!important}:host ::ng-deep .cdk-overlay-pane:has(.pdx-autocomplete-panel){z-index:var(--praxis-layer-popup, 1400)!important}:host ::ng-deep .pdx-autocomplete-panel .pdx-autocomplete-viewport{height:256px}\n"] }]
+                    }, styles: [":host ::ng-deep .cdk-overlay-connected-position-bounding-box:has(.pdx-autocomplete-panel){z-index:var(--praxis-layer-popup, 1400)!important}:host ::ng-deep .cdk-overlay-pane:has(.pdx-autocomplete-panel){z-index:var(--praxis-layer-popup, 1400)!important}:host ::ng-deep .pdx-autocomplete-panel .pdx-autocomplete-viewport{height:256px}\n", ".pdx-field-help-icon{border-radius:999px;color:var(--md-sys-color-on-surface-variant);cursor:help}.pdx-field-help-icon:focus{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}\n"] }]
         }], propDecorators: { readonlyMode: [{
                 type: Input
             }], disabledMode: [{
@@ -53821,7 +54044,6 @@ class MaterialButtonToggleComponent extends SimpleBaseSelectComponent {
       <mat-button-toggle-group
         [formControl]="control()"
         [multiple]="multiple()"
-        [disabled]="toggleInteractionDisabled()"
         [appearance]="metadata()?.appearance || 'legacy'"
         [attr.aria-disabled]="toggleAriaDisabled()"
         [attr.aria-invalid]="ariaInvalidAttribute()"
@@ -53869,7 +54091,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       <mat-button-toggle-group
         [formControl]="control()"
         [multiple]="multiple()"
-        [disabled]="toggleInteractionDisabled()"
         [appearance]="metadata()?.appearance || 'legacy'"
         [attr.aria-disabled]="toggleAriaDisabled()"
         [attr.aria-invalid]="ariaInvalidAttribute()"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisui/dynamic-fields",
-  "version": "9.0.0-beta.21",
+  "version": "9.0.0-beta.25",
   "description": "Angular Material-based dynamic form fields for Praxis UI with lazy loading and metadata-driven rendering.",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
@@ -11,8 +11,8 @@
     "@angular/platform-browser": "^21.0.0",
     "@angular/router": "^21.0.0",
     "rxjs": "^7.8.0",
-    "@praxisui/core": "^9.0.0-beta.21",
-    "@praxisui/cron-builder": "^9.0.0-beta.21"
+    "@praxisui/core": "^9.0.0-beta.25",
+    "@praxisui/cron-builder": "^9.0.0-beta.25"
   },
   "dependencies": {
     "libphonenumber-js": "^1.12.41",

package/src/lib/base/pdx-base-input-runtime-contract.json-api.md

@@ -349,6 +349,9 @@ Limites:
 | `metadata.validators.showInlineErrors` | `boolean` | Active | Forca/desliga exibicao inline de erros. |
 | `metadata.errorStateMatcher` | enum | Active | Estrategia de estado de erro usada pelo matcher utilitario. |
 | `metadata.hint` | `string` | Active | Exibe dica quando nao ha erro. |
+| `metadata.helpText` | `string` | Active | Texto de ajuda semantica publicado por DTO/schema; usado como fallback quando `hint` nao foi informado. |
+| `metadata.helpDisplay` | `'auto' \| 'inline' \| 'popover' \| 'hidden'` | Active | Politica efetiva de apresentacao de `hint`/`helpText`; normalmente materializada pelo host `praxis-dynamic-form` a partir de `FormConfig.helpPresentation`. |
+| `metadata.helpInlineMaxLength` | `number` | Active | Limite local usado quando `metadata.helpDisplay` e `auto`; textos acima do limite migram para affordance de ajuda. |
 | `metadata.hintAlign` | `'start' \| 'end'` | Active | Alinhamento da dica. |
 | `metadata.materialDesign.appearance` | `'fill' \| 'outline'` | Active | Aparencia do `mat-form-field`. |
 | `metadata.materialDesign.color` | `'primary' \| 'accent' \| 'warn'` | Active | Cor do `mat-form-field`. |
@@ -373,6 +376,19 @@ Limites:
 | `metadata.ariaDescribedby` | `string` | Active | `aria-describedby` no elemento nativo. |
 | `metadata.ariaLabelledby` | `string` | Active | `aria-labelledby` no elemento nativo. |
 
+#### Ajuda contextual em migracoes corporativas
+
+`metadata.helpText` pertence ao DTO/schema quando descreve semantica de negocio, impacto operacional ou criterio de decisao do campo. Ele nao deve ser gerado a partir de label, nome tecnico ou heuristica local.
+
+Use `metadata.helpDisplay` para excecoes por campo:
+
+- `inline`: texto curto que deve permanecer visivel para evitar erro operacional;
+- `popover`: texto longo, raro ou de apoio decisorio;
+- `hidden`: ajuda publicada mas inadequada para a superficie atual;
+- `auto`: delega a politica do host e ao limite `helpInlineMaxLength`.
+
+Em formularios densos, o host deve preferir uma politica global como `FormConfig.helpPresentation.display = "auto"` e mover textos longos para a affordance de ajuda. Mensagens de validacao continuam no canal de erro do campo e nao devem ser convertidas em `helpText`.
+
 #### Politica de label com prefixos e sufixos
 
 Quando um campo usa `metadata.prefixIcon`, `metadata.suffixIcon`, `clearButton`,

package/types/praxisui-dynamic-fields.d.ts

@@ -3,7 +3,7 @@ import { WritableSignal, InjectionToken, Provider, OnInit, OnDestroy, AfterViewI
 import { AbstractControl, ControlValueAccessor, NgControl, ValidationErrors, FormControl, FormGroup, FormArray, FormGroupDirective, NgForm } from '@angular/forms';
 import { Observable, BehaviorSubject, Subscription } from 'rxjs';
 import * as _praxisui_core from '@praxisui/core';
-import { ComponentMetadata, PraxisTextValue, PraxisI18nDictionary, PraxisI18nConfig, PraxisI18nMessageDescriptor, PraxisI18nService, GlobalActionService, GlobalActionRef, OptionSourceMetadata, GenericCrudService, GlobalConfigService, OptionDTO, ComponentMetadataEditorialDescriptor, ComponentDocMeta, ComponentMetadataRegistry, FieldMetadata, MaterialButtonMetadata, FieldArrayConfig, MaterialInputMetadata, MaterialColorInputMetadata, MaterialDateInputMetadata, MaterialDatepickerMetadata, MaterialDateRangeMetadata, DateRangePreset, DateRangeValue, MaterialDatetimeLocalInputMetadata, MaterialEmailInputMetadata, MaterialTextareaMetadata, MaterialNumericMetadata, MaterialCurrencyMetadata, MaterialCpfCnpjMetadata, MaterialPriceRangeMetadata, MaterialMonthInputMetadata, MaterialPasswordMetadata, MaterialSearchInputMetadata, MaterialSelectMetadata, LookupFilterRequest, LookupFilteringMetadata, LookupSortOptionMetadata, LookupFilterDefinitionMetadata, MaterialEntityLookupMetadata, LookupStatusTone, EntityLookupResultState, EntityLookupResult, LookupDialogMetadata, LookupFilterOperator, LookupFilterFieldType, LookupResultColumnMetadata, MaterialAutocompleteMetadata, RangeSliderMark, RangeSliderSemanticTone, MaterialToggleMetadata, MaterialRangeSliderMetadata, RangeSliderValue, InlinePeriodRangeMetadata, FieldControlType, MaterialTimepickerMetadata, MaterialTimeRangeMetadata, MaterialTreeNode, MaterialTreeSelectMetadata, MaterialMultiSelectTreeMetadata, MaterialChipsMetadata, RangeSliderSemanticBand, MaterialSliderMetadata, MaterialPhoneMetadata, MaterialTimeInputMetadata, MaterialUrlInputMetadata, MaterialWeekInputMetadata, MaterialColorPickerMetadata, MaterialYearInputMetadata, CapabilityCatalog, ComponentAuthoringManifest, ManifestControlProfile } from '@praxisui/core';
+import { ComponentMetadata, PraxisTextValue, PraxisI18nDictionary, PraxisI18nConfig, PraxisI18nMessageDescriptor, PraxisI18nService, FormFieldHelpDisplay, GlobalActionService, GlobalActionRef, OptionSourceMetadata, GenericCrudService, GlobalConfigService, OptionDTO, ComponentMetadataEditorialDescriptor, ComponentDocMeta, ComponentMetadataRegistry, FieldMetadata, MaterialButtonMetadata, FieldArrayConfig, MaterialInputMetadata, MaterialColorInputMetadata, MaterialDateInputMetadata, MaterialDatepickerMetadata, MaterialDateRangeMetadata, DateRangePreset, DateRangeValue, MaterialDatetimeLocalInputMetadata, MaterialEmailInputMetadata, MaterialTextareaMetadata, MaterialNumericMetadata, MaterialCurrencyMetadata, MaterialCpfCnpjMetadata, MaterialPriceRangeMetadata, MaterialMonthInputMetadata, MaterialPasswordMetadata, MaterialSearchInputMetadata, MaterialSelectMetadata, LookupFilterRequest, LookupFilteringMetadata, LookupSortOptionMetadata, LookupFilterDefinitionMetadata, MaterialEntityLookupMetadata, LookupStatusTone, EntityLookupResultState, EntityLookupResult, LookupDialogMetadata, LookupFilterOperator, LookupFilterFieldType, LookupResultColumnMetadata, MaterialAutocompleteMetadata, RangeSliderMark, RangeSliderSemanticTone, MaterialToggleMetadata, MaterialRangeSliderMetadata, RangeSliderValue, InlinePeriodRangeMetadata, FieldControlType, MaterialTimepickerMetadata, MaterialTimeRangeMetadata, MaterialTreeNode, MaterialTreeSelectMetadata, MaterialMultiSelectTreeMetadata, MaterialChipsMetadata, RangeSliderSemanticBand, MaterialSliderMetadata, MaterialPhoneMetadata, MaterialTimeInputMetadata, MaterialUrlInputMetadata, MaterialWeekInputMetadata, MaterialColorPickerMetadata, MaterialYearInputMetadata, CapabilityCatalog, ComponentAuthoringManifest, ManifestControlProfile } from '@praxisui/core';
 import { Router } from '@angular/router';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { MatSelect } from '@angular/material/select';
@@ -660,6 +660,13 @@ declare abstract class SimpleBaseInputComponent implements ControlValueAccessor,
     protected isInlineContextTooltipEnabled(): boolean;
     protected resolveInlineContextTooltipValue(): string;
     protected resolveInlineHelpTooltipText(): string;
+    fieldHelpText(): string;
+    fieldHelpDisplay(): FormFieldHelpDisplay;
+    hasInlineFieldHelp(): boolean;
+    fieldHelpInlineText(): string;
+    fieldHelpPopoverText(): string;
+    fieldHelpPopoverDisabled(): boolean;
+    fieldHelpAriaLabel(): string;
     protected isInteractionBlockedByState(options?: {
         readonly includeReadonly?: boolean;
         readonly includePresentation?: boolean;