@praxisui/table 10.0.0-rc.19 → 10.0.0-rc.21

package/fesm2022/{praxisui-table-praxisui-table-B263nnvm.mjs → praxisui-table-praxisui-table-BGbn6DFa.mjs}

@@ -9025,6 +9025,48 @@ const PRAXIS_TABLE_EDITOR_I18N_CONFIG = {
                 'columns.renderer.microVisualization.guidance.horizontalSpace': 'Condicional: visualizações de tendência precisam de largura horizontal para manter a legibilidade; confira a largura configurada da coluna.',
                 'columns.renderer.microVisualization.guidance.rowDensity': 'Condicional: comparison aumenta a altura da linha. Use apenas quando densidade não for um requisito principal.',
                 'columns.renderer.microVisualization.guidance.stepLabels': 'Condicional: processFlow exige etapas reconhecíveis. Prefira o detalhe quando os rótulos forem essenciais.',
+                'columns.renderer.microVisualization.kind': 'Visualização',
+                'columns.renderer.microVisualization.kind.delta': 'Delta',
+                'columns.renderer.microVisualization.kind.bullet': 'Bullet (meta)',
+                'columns.renderer.microVisualization.kind.radial': 'Radial',
+                'columns.renderer.microVisualization.kind.harveyBall': 'Harvey ball',
+                'columns.renderer.microVisualization.kind.line': 'Linha',
+                'columns.renderer.microVisualization.kind.area': 'Área',
+                'columns.renderer.microVisualization.kind.column': 'Colunas',
+                'columns.renderer.microVisualization.kind.comparison': 'Comparação',
+                'columns.renderer.microVisualization.kind.stackedBar': 'Barra empilhada',
+                'columns.renderer.microVisualization.kind.processFlow': 'Fluxo de processo',
+                'columns.renderer.microVisualization.valueExpression': 'Expressão de valor',
+                'columns.renderer.microVisualization.pointsExpression': 'Expressão de pontos',
+                'columns.renderer.microVisualization.segmentsExpression': 'Expressão de segmentos',
+                'columns.renderer.microVisualization.itemsExpression': 'Expressão de itens',
+                'columns.renderer.microVisualization.totalExpression': 'Expressão de total',
+                'columns.renderer.microVisualization.targetExpression': 'Expressão de meta',
+                'columns.renderer.microVisualization.tone': 'Tom (cor)',
+                'columns.renderer.microVisualization.tone.auto': 'Automático (por faixas / semântico)',
+                'columns.renderer.microVisualization.tone.neutral': 'Neutro',
+                'columns.renderer.microVisualization.tone.info': 'Informativo',
+                'columns.renderer.microVisualization.tone.success': 'Sucesso',
+                'columns.renderer.microVisualization.tone.warning': 'Alerta',
+                'columns.renderer.microVisualization.tone.danger': 'Perigo',
+                'columns.renderer.microVisualization.tone.critical': 'Crítico',
+                'columns.renderer.microVisualization.tone.precedenceHint': 'No modo Automático, a cor vem das faixas de cor (thresholds) ou do sinal do valor. Um tom fixo substitui as faixas condicionais.',
+                'columns.renderer.microVisualization.fallbackText': 'Texto alternativo acessível',
+                'columns.renderer.microVisualization.hint': 'Use valor para indicadores, pontos para tendências, segmentos para barras empilhadas e itens para fluxos de processo. A tabela mantém o visual compacto e expõe o texto alternativo para tecnologias assistivas.',
+                'columns.renderer.microVisualization.thresholds.title': 'Faixas de cor (thresholds)',
+                'columns.renderer.microVisualization.thresholds.description': 'Avalia de cima para baixo (a primeira faixa compatível vence). Limites min e max são inclusivos (min <= valor <= max).',
+                'columns.renderer.microVisualization.thresholds.add': 'Adicionar faixa',
+                'columns.renderer.microVisualization.thresholds.preset': 'Preset semáforo (70+ / 40–69 / ≤39)',
+                'columns.renderer.microVisualization.thresholds.min': 'Mínimo (inclusivo)',
+                'columns.renderer.microVisualization.thresholds.max': 'Máximo (inclusivo)',
+                'columns.renderer.microVisualization.thresholds.tone': 'Tom da faixa',
+                'columns.renderer.microVisualization.thresholds.moveUp': 'Mover faixa para cima',
+                'columns.renderer.microVisualization.thresholds.moveDown': 'Mover faixa para baixo',
+                'columns.renderer.microVisualization.thresholds.remove': 'Remover faixa',
+                'columns.renderer.microVisualization.thresholds.empty': 'Nenhuma faixa configurada. Adicione faixas ou aplique o preset semáforo para colorir automaticamente por valor.',
+                'columns.renderer.microVisualization.thresholds.sampleValues': 'Valores de teste da prévia (separados por vírgula)',
+                'columns.renderer.microVisualization.validation.thresholdEmptyBounds': 'Microvisualização: a faixa {index} precisa definir uma condição (min, max, value ou equals).',
+                'columns.renderer.microVisualization.validation.thresholdMinGreaterThanMax': 'Microvisualização: na faixa {index}, o mínimo ({min}) não pode ser maior que o máximo ({max}).',
             },
             'en-US': {
                 'filter.presentation.tab': 'Presentation',
@@ -10357,6 +10399,48 @@ const PRAXIS_TABLE_EDITOR_I18N_CONFIG = {
                 'columns.renderer.microVisualization.guidance.horizontalSpace': 'Conditional: trend visualizations need horizontal space to remain legible; check the configured column width.',
                 'columns.renderer.microVisualization.guidance.rowDensity': 'Conditional: comparison increases row height. Use it only when density is not a primary requirement.',
                 'columns.renderer.microVisualization.guidance.stepLabels': 'Conditional: processFlow needs recognizable steps. Prefer the detail view when labels are essential.',
+                'columns.renderer.microVisualization.kind': 'Visualization',
+                'columns.renderer.microVisualization.kind.delta': 'Delta',
+                'columns.renderer.microVisualization.kind.bullet': 'Bullet',
+                'columns.renderer.microVisualization.kind.radial': 'Radial',
+                'columns.renderer.microVisualization.kind.harveyBall': 'Harvey ball',
+                'columns.renderer.microVisualization.kind.line': 'Line',
+                'columns.renderer.microVisualization.kind.area': 'Area',
+                'columns.renderer.microVisualization.kind.column': 'Column',
+                'columns.renderer.microVisualization.kind.comparison': 'Comparison',
+                'columns.renderer.microVisualization.kind.stackedBar': 'Stacked bar',
+                'columns.renderer.microVisualization.kind.processFlow': 'Process flow',
+                'columns.renderer.microVisualization.valueExpression': 'Value expression',
+                'columns.renderer.microVisualization.pointsExpression': 'Points expression',
+                'columns.renderer.microVisualization.segmentsExpression': 'Segments expression',
+                'columns.renderer.microVisualization.itemsExpression': 'Items expression',
+                'columns.renderer.microVisualization.totalExpression': 'Total expression',
+                'columns.renderer.microVisualization.targetExpression': 'Target expression',
+                'columns.renderer.microVisualization.tone': 'Tone',
+                'columns.renderer.microVisualization.tone.auto': 'Automatic (by thresholds / semantic)',
+                'columns.renderer.microVisualization.tone.neutral': 'Neutral',
+                'columns.renderer.microVisualization.tone.info': 'Info',
+                'columns.renderer.microVisualization.tone.success': 'Success',
+                'columns.renderer.microVisualization.tone.warning': 'Warning',
+                'columns.renderer.microVisualization.tone.danger': 'Danger',
+                'columns.renderer.microVisualization.tone.critical': 'Critical',
+                'columns.renderer.microVisualization.tone.precedenceHint': 'In Automatic mode, color is resolved from threshold bands or value sign. A fixed tone overrides conditional bands.',
+                'columns.renderer.microVisualization.fallbackText': 'Accessible fallback text',
+                'columns.renderer.microVisualization.hint': 'Use a value for indicators, points for trends, segments for stacked bars, and items for process flows. The table keeps the visual compact and exposes fallback text to assistive technology.',
+                'columns.renderer.microVisualization.thresholds.title': 'Color bands (thresholds)',
+                'columns.renderer.microVisualization.thresholds.description': 'Evaluates top-to-bottom (first matching band wins). Both min and max bounds are inclusive (min <= value <= max).',
+                'columns.renderer.microVisualization.thresholds.add': 'Add threshold',
+                'columns.renderer.microVisualization.thresholds.preset': 'Traffic-light preset (70+ / 40–69 / ≤39)',
+                'columns.renderer.microVisualization.thresholds.min': 'Min (inclusive)',
+                'columns.renderer.microVisualization.thresholds.max': 'Max (inclusive)',
+                'columns.renderer.microVisualization.thresholds.tone': 'Band tone',
+                'columns.renderer.microVisualization.thresholds.moveUp': 'Move threshold up',
+                'columns.renderer.microVisualization.thresholds.moveDown': 'Move threshold down',
+                'columns.renderer.microVisualization.thresholds.remove': 'Remove threshold',
+                'columns.renderer.microVisualization.thresholds.empty': 'No threshold bands configured. Add bands or apply the traffic-light preset to color values automatically.',
+                'columns.renderer.microVisualization.thresholds.sampleValues': 'Preview sample values (comma-separated)',
+                'columns.renderer.microVisualization.validation.thresholdEmptyBounds': 'Micro visualization: threshold {index} must define a condition (min, max, value or equals).',
+                'columns.renderer.microVisualization.validation.thresholdMinGreaterThanMax': 'Micro visualization: in threshold {index}, min ({min}) cannot be greater than max ({max}).',
             },
         },
     },
@@ -23293,7 +23377,7 @@ class PraxisTable {
         if (this.aiAdapter || this.aiAdapterLoadStarted)
             return;
         this.aiAdapterLoadStarted = true;
-        import('./praxisui-table-table-ai.adapter-ndYth7DX.mjs')
+        import('./praxisui-table-table-ai.adapter-Dwq3cX1k.mjs')
             .then(({ TableAiAdapter }) => {
             if (!this.isAiAssistantEnabled()) {
                 this.aiAssistantOpenAfterAdapterLoad = false;
@@ -24065,7 +24149,7 @@ class PraxisTable {
     initializeAiAssistantController() {
         if (!this.aiAdapter || this.aiAssistantController)
             return;
-        import('./praxisui-table-table-agentic-authoring-turn-flow-BQjoJKN_.mjs')
+        import('./praxisui-table-table-agentic-authoring-turn-flow-DPJpzgFT.mjs')
             .then(({ TableAgenticAuthoringTurnFlow }) => {
             if (this.aiAssistantController || !this.aiAdapter)
                 return;
@@ -45381,11 +45465,10 @@ class ColumnsConfigEditorComponent {
         ov.renderer.type = val;
         if (val === 'microVisualization') {
             ov.renderer.microVisualization = ov.renderer.microVisualization || {};
-            ov.renderer.microVisualization.visualization = {
-                ...this.createDefaultMicroVisualization(),
-                ...(ov.renderer.microVisualization.visualization || {}),
-                surface: 'table-cell',
-            };
+            const existing = ov.renderer.microVisualization.visualization;
+            ov.renderer.microVisualization.visualization = existing && typeof existing === 'object'
+                ? { ...existing, surface: 'table-cell' }
+                : { ...this.createDefaultMicroVisualization(), surface: 'table-cell' };
         }
         this.onColumnPropertyChange();
     }
@@ -45399,20 +45482,32 @@ class ColumnsConfigEditorComponent {
             return undefined;
         }
     }
-    setOverrideMicroVisualizationProp(path, value) {
+    ensureOverrideMicroVisualizationObject() {
         const override = this.getConditionalOverrides()[this.condOverridesSelectedIndex];
         if (!override)
-            return;
+            return null;
         override.renderer = override.renderer || {};
         override.renderer.type = 'microVisualization';
         override.renderer.microVisualization = override.renderer.microVisualization || {};
-        override.renderer.microVisualization.visualization = {
-            ...this.createDefaultMicroVisualization(),
-            ...(override.renderer.microVisualization.visualization || {}),
-            surface: 'table-cell',
-        };
-        override.renderer.microVisualization.visualization[path] = value;
+        const existing = override.renderer.microVisualization.visualization;
+        override.renderer.microVisualization.visualization =
+            existing && typeof existing === 'object'
+                ? { ...existing, surface: 'table-cell' }
+                : { ...this.createDefaultMicroVisualization(), surface: 'table-cell' };
+        return override.renderer.microVisualization.visualization;
+    }
+    setOverrideMicroVisualizationProp(path, value) {
+        const visualization = this.ensureOverrideMicroVisualizationObject();
+        if (!visualization)
+            return;
+        if (value === undefined || value === null || (path === 'tone' && value === '')) {
+            delete visualization[path];
+        }
+        else {
+            visualization[path] = value;
+        }
         this.onColumnPropertyChange();
+        this.validateRenderer();
     }
     getOverrideMicroVisualizationKind() {
         const kind = this.getOverrideMicroVisualizationProp('kind');
@@ -45442,6 +45537,105 @@ class ColumnsConfigEditorComponent {
     isOverrideMicroVisualizationTotalKind() {
         return ['bullet', 'radial', 'harveyBall'].includes(this.getOverrideMicroVisualizationKind());
     }
+    isOverrideMicroVisualizationThresholdsSupported() {
+        return ['delta', 'bullet', 'radial', 'harveyBall', 'line', 'area', 'column', 'comparison'].includes(this.getOverrideMicroVisualizationKind());
+    }
+    getOverrideMicroVisualizationThresholds() {
+        const thresholds = this.getOverrideMicroVisualizationProp('thresholds');
+        return Array.isArray(thresholds) ? thresholds : [];
+    }
+    addOverrideMicroVisualizationThreshold() {
+        const visualization = this.ensureOverrideMicroVisualizationObject();
+        if (!visualization)
+            return;
+        const current = Array.isArray(visualization['thresholds']) ? [...visualization['thresholds']] : [];
+        const lastMax = current.length ? current[current.length - 1]?.max : undefined;
+        const nextMin = typeof lastMax === 'number' && Number.isFinite(lastMax) ? lastMax + 1 : 0;
+        current.push({
+            min: nextMin,
+            max: nextMin + 30,
+            tone: 'warning',
+        });
+        visualization['thresholds'] = current;
+        if (visualization['tone'] === 'info') {
+            delete visualization['tone'];
+        }
+        this.onColumnPropertyChange();
+        this.validateRenderer();
+    }
+    applyDefaultOverrideMicroVisualizationThresholds() {
+        const visualization = this.ensureOverrideMicroVisualizationObject();
+        if (!visualization)
+            return;
+        visualization['thresholds'] = [
+            { min: 0, max: 39, tone: 'danger' },
+            { min: 40, max: 69, tone: 'warning' },
+            { min: 70, max: 100, tone: 'success' },
+        ];
+        delete visualization['tone'];
+        this.onColumnPropertyChange();
+        this.validateRenderer();
+    }
+    setOverrideMicroVisualizationThresholdNumber(index, bound, raw) {
+        const visualization = this.ensureOverrideMicroVisualizationObject();
+        if (!visualization || !Array.isArray(visualization['thresholds']) || !visualization['thresholds'][index])
+            return;
+        const list = visualization['thresholds'].map((item) => ({ ...item }));
+        const trimmed = String(raw ?? '').trim();
+        if (!trimmed) {
+            delete list[index][bound];
+        }
+        else {
+            const parsed = Number(trimmed);
+            if (Number.isFinite(parsed)) {
+                list[index][bound] = parsed;
+            }
+        }
+        visualization['thresholds'] = list;
+        this.onColumnPropertyChange();
+        this.validateRenderer();
+    }
+    setOverrideMicroVisualizationThresholdTone(index, tone) {
+        const visualization = this.ensureOverrideMicroVisualizationObject();
+        if (!visualization || !Array.isArray(visualization['thresholds']) || !visualization['thresholds'][index])
+            return;
+        const list = visualization['thresholds'].map((item) => ({ ...item }));
+        list[index].tone = tone;
+        visualization['thresholds'] = list;
+        this.onColumnPropertyChange();
+        this.validateRenderer();
+    }
+    moveOverrideMicroVisualizationThreshold(index, delta) {
+        const visualization = this.ensureOverrideMicroVisualizationObject();
+        if (!visualization || !Array.isArray(visualization['thresholds']))
+            return;
+        const target = index + delta;
+        const list = [...visualization['thresholds']];
+        if (index < 0 || index >= list.length || target < 0 || target >= list.length)
+            return;
+        const [moved] = list.splice(index, 1);
+        list.splice(target, 0, moved);
+        visualization['thresholds'] = list;
+        this.onColumnPropertyChange();
+        this.validateRenderer();
+    }
+    removeOverrideMicroVisualizationThreshold(index) {
+        const visualization = this.ensureOverrideMicroVisualizationObject();
+        if (!visualization || !Array.isArray(visualization['thresholds']))
+            return;
+        const list = [...visualization['thresholds']];
+        if (index < 0 || index >= list.length)
+            return;
+        list.splice(index, 1);
+        if (list.length > 0) {
+            visualization['thresholds'] = list;
+        }
+        else {
+            delete visualization['thresholds'];
+        }
+        this.onColumnPropertyChange();
+        this.validateRenderer();
+    }
     getOverrideMicroVisualizationGuidanceText() {
         const constraint = this.getOverrideMicroVisualizationConstraint();
         if (this.getOverrideMicroVisualizationGuidance() === 'recommended') {
@@ -45489,11 +45683,15 @@ class ColumnsConfigEditorComponent {
     }
     // Renderer apply/preview state
     rendererValidationErrors = [];
+    get validationErrors() {
+        return this.rendererValidationErrors;
+    }
     rendererImportWarnings = [];
     rendererIsValid = true;
     rendererPreviewEnabled = true;
     rendererAppliedSnapshot = null;
     previewRows = [];
+    microVisualizationSampleValuesText = '15, 40, 69, 70, 98';
     refreshRendererFieldOptions() {
         const options = this.buildRendererFieldOptions();
         const filtered = this.onlyVisibleRendererFields ? options.filter((o) => o.isVisible) : options;
@@ -46336,22 +46534,175 @@ class ColumnsConfigEditorComponent {
             fallbackText: this.selectedColumn?.header || field,
         };
     }
-    setMicroVisualizationProp(path, value) {
+    ensureMicroVisualizationObject() {
         if (!this.selectedColumn)
-            return;
+            return null;
         const column = this.selectedColumn;
         column.renderer = column.renderer || { type: 'microVisualization' };
         column.renderer.type = 'microVisualization';
         column.renderer.microVisualization = column.renderer.microVisualization || {};
-        column.renderer.microVisualization.visualization = {
-            ...this.createDefaultMicroVisualization(),
-            ...(column.renderer.microVisualization.visualization || {}),
-            surface: 'table-cell',
-        };
-        column.renderer.microVisualization.visualization[path] = value;
+        const existing = column.renderer.microVisualization.visualization;
+        column.renderer.microVisualization.visualization =
+            existing && typeof existing === 'object'
+                ? { ...existing, surface: 'table-cell' }
+                : { ...this.createDefaultMicroVisualization(), surface: 'table-cell' };
+        return column.renderer.microVisualization.visualization;
+    }
+    setMicroVisualizationProp(path, value) {
+        const visualization = this.ensureMicroVisualizationObject();
+        if (!visualization)
+            return;
+        if (value === undefined || value === null || (path === 'tone' && value === '')) {
+            delete visualization[path];
+        }
+        else {
+            visualization[path] = value;
+        }
+        this.onColumnPropertyChange();
+        this.validateRenderer();
+    }
+    isMicroVisualizationThresholdsSupported() {
+        return ['delta', 'bullet', 'radial', 'harveyBall', 'line', 'area', 'column', 'comparison'].includes(this.getMicroVisualizationKind());
+    }
+    getMicroVisualizationThresholds() {
+        const thresholds = this.getRendererProp('microVisualization', 'visualization.thresholds');
+        return Array.isArray(thresholds) ? thresholds : [];
+    }
+    addMicroVisualizationThreshold() {
+        const visualization = this.ensureMicroVisualizationObject();
+        if (!visualization)
+            return;
+        const current = Array.isArray(visualization['thresholds']) ? [...visualization['thresholds']] : [];
+        const lastMax = current.length ? current[current.length - 1]?.max : undefined;
+        const nextMin = typeof lastMax === 'number' && Number.isFinite(lastMax) ? lastMax + 1 : 0;
+        current.push({
+            min: nextMin,
+            max: nextMin + 30,
+            tone: 'warning',
+        });
+        visualization['thresholds'] = current;
+        if (visualization['tone'] === 'info') {
+            delete visualization['tone'];
+        }
         this.onColumnPropertyChange();
         this.validateRenderer();
     }
+    applyDefaultMicroVisualizationThresholds() {
+        const visualization = this.ensureMicroVisualizationObject();
+        if (!visualization)
+            return;
+        visualization['thresholds'] = [
+            { min: 0, max: 39, tone: 'danger' },
+            { min: 40, max: 69, tone: 'warning' },
+            { min: 70, max: 100, tone: 'success' },
+        ];
+        delete visualization['tone'];
+        this.onColumnPropertyChange();
+        this.validateRenderer();
+    }
+    setMicroVisualizationThresholdNumber(index, bound, raw) {
+        const visualization = this.ensureMicroVisualizationObject();
+        if (!visualization || !Array.isArray(visualization['thresholds']) || !visualization['thresholds'][index])
+            return;
+        const list = visualization['thresholds'].map((item) => ({ ...item }));
+        const trimmed = String(raw ?? '').trim();
+        if (!trimmed) {
+            delete list[index][bound];
+        }
+        else {
+            const parsed = Number(trimmed);
+            if (Number.isFinite(parsed)) {
+                list[index][bound] = parsed;
+            }
+        }
+        visualization['thresholds'] = list;
+        this.onColumnPropertyChange();
+        this.validateRenderer();
+    }
+    setMicroVisualizationThresholdTone(index, tone) {
+        const visualization = this.ensureMicroVisualizationObject();
+        if (!visualization || !Array.isArray(visualization['thresholds']) || !visualization['thresholds'][index])
+            return;
+        const list = visualization['thresholds'].map((item) => ({ ...item }));
+        list[index].tone = tone;
+        visualization['thresholds'] = list;
+        this.onColumnPropertyChange();
+        this.validateRenderer();
+    }
+    moveMicroVisualizationThreshold(index, delta) {
+        const visualization = this.ensureMicroVisualizationObject();
+        if (!visualization || !Array.isArray(visualization['thresholds']))
+            return;
+        const target = index + delta;
+        const list = [...visualization['thresholds']];
+        if (index < 0 || index >= list.length || target < 0 || target >= list.length)
+            return;
+        const [moved] = list.splice(index, 1);
+        list.splice(target, 0, moved);
+        visualization['thresholds'] = list;
+        this.onColumnPropertyChange();
+        this.validateRenderer();
+    }
+    removeMicroVisualizationThreshold(index) {
+        const visualization = this.ensureMicroVisualizationObject();
+        if (!visualization || !Array.isArray(visualization['thresholds']))
+            return;
+        const list = [...visualization['thresholds']];
+        if (index < 0 || index >= list.length)
+            return;
+        list.splice(index, 1);
+        if (list.length > 0) {
+            visualization['thresholds'] = list;
+        }
+        else {
+            delete visualization['thresholds'];
+        }
+        this.onColumnPropertyChange();
+        this.validateRenderer();
+    }
+    setMicroVisualizationSampleValuesText(raw) {
+        this.microVisualizationSampleValuesText = raw;
+        this.cdr.markForCheck();
+    }
+    getMicroVisualizationSampleValues() {
+        const parsed = String(this.microVisualizationSampleValuesText || '')
+            .split(',')
+            .map((part) => Number(part.trim()))
+            .filter((num) => Number.isFinite(num));
+        return parsed.length > 0 ? parsed.slice(0, 8) : [15, 40, 69, 70, 98];
+    }
+    getPreviewMicroVisualizationHtmlForValue(sampleValue) {
+        const field = this.selectedColumn?.field || 'value';
+        const baseRow = this.previewRows?.[0] || {};
+        const sampleRow = {
+            ...baseRow,
+            [field]: sampleValue,
+            value: sampleValue,
+            total: typeof baseRow?.total === 'number' ? baseRow.total : 100,
+            target: typeof baseRow?.target === 'number' ? baseRow.target : 80,
+            baseline: typeof baseRow?.baseline === 'number' ? baseRow.baseline : 50,
+        };
+        const visualization = this.selectedColumn?.renderer?.microVisualization?.visualization;
+        if (!visualization)
+            return '';
+        const resolved = { ...visualization };
+        const expressions = [
+            ['value', 'valueExpr'], ['valueSuffix', 'valueSuffixExpr'], ['total', 'totalExpr'], ['target', 'targetExpr'], ['baseline', 'baselineExpr'],
+            ['points', 'pointsExpr'], ['segments', 'segmentsExpr'], ['thresholds', 'thresholdsExpr'], ['items', 'itemsExpr'],
+            ['tone', 'toneExpr'], ['ariaLabel', 'ariaLabelExpr'], ['fallbackText', 'fallbackTextExpr'],
+        ];
+        for (const [property, expression] of expressions) {
+            if (!resolved[expression])
+                continue;
+            const evaluated = this.evalMicroVisualizationExpression(resolved[expression], sampleRow);
+            if (evaluated !== undefined)
+                resolved[property] = evaluated;
+        }
+        if (typeof resolved['value'] !== 'number' || !Number.isFinite(resolved['value'])) {
+            resolved['value'] = sampleValue;
+        }
+        return renderPraxisPresentationVisualizationHtml(resolved);
+    }
     // =============================
     // Renderer: validation/apply/import/export/preview
     // =============================
@@ -46952,6 +47303,18 @@ class ColumnsConfigEditorComponent {
             if (evaluated !== undefined)
                 resolved[property] = evaluated;
         }
+        if (['delta', 'bullet', 'radial', 'harveyBall'].includes(resolved['kind']) &&
+            (typeof resolved['value'] !== 'number' || !Number.isFinite(resolved['value']))) {
+            const parsedValue = Number(resolved['value']);
+            if (Number.isFinite(parsedValue) && String(resolved['value'] ?? '').trim() !== '') {
+                resolved['value'] = parsedValue;
+            }
+            else {
+                const sampleValues = this.getMicroVisualizationSampleValues();
+                const rowIdx = Math.max(0, this.previewRows.indexOf(row));
+                resolved['value'] = sampleValues[rowIdx % sampleValues.length] ?? 70;
+            }
+        }
         return renderPraxisPresentationVisualizationHtml(resolved);
     }
     getMicroVisualizationGuidance() {
@@ -47098,14 +47461,39 @@ class ColumnsConfigEditorComponent {
     getPreviewHtml(row) { const ht = this.selectedColumn?.renderer?.html; if (!ht?.template)
         return String(ht?.emptyFallback || ''); return String(ht.template).replace(/\[\[([A-Za-z0-9_\.]+)\]\]/g, (_m, g1) => { const v = this.getNested(row, g1); return String(v ?? ''); }); }
     trackByIdx = (_, item) => this.previewRows.indexOf(item);
+    validateMicroVisualizationThresholds(thresholds, errs) {
+        if (!Array.isArray(thresholds))
+            return;
+        thresholds.forEach((entry, idx) => {
+            const hasMin = typeof entry?.min === 'number' && Number.isFinite(entry.min);
+            const hasMax = typeof entry?.max === 'number' && Number.isFinite(entry.max);
+            const hasValue = typeof entry?.value === 'number' && Number.isFinite(entry.value);
+            const hasEquals = entry?.equals !== undefined;
+            if (!hasMin && !hasMax && !hasValue && !hasEquals) {
+                errs.push(this.tx('columns.renderer.microVisualization.validation.thresholdEmptyBounds', 'Micro visualization: threshold {index} must define a condition (min, max, value or equals).').replace('{index}', String(idx + 1)));
+            }
+            else if (hasMin && hasMax && entry.min > entry.max) {
+                errs.push(this.tx('columns.renderer.microVisualization.validation.thresholdMinGreaterThanMax', 'Micro visualization: in threshold {index}, min ({min}) cannot be greater than max ({max}).')
+                    .replace('{index}', String(idx + 1))
+                    .replace('{min}', String(entry.min))
+                    .replace('{max}', String(entry.max)));
+            }
+        });
+    }
     validateRenderer() {
         const errs = [];
         const col = this.selectedColumn;
+        const overrides = Array.isArray(col?.conditionalRenderers) ? col.conditionalRenderers : [];
+        for (const ov of overrides) {
+            if (ov?.renderer?.type === 'microVisualization') {
+                this.validateMicroVisualizationThresholds(ov.renderer.microVisualization?.visualization?.thresholds, errs);
+            }
+        }
         const r = col?.renderer || null;
         if (!r || !r.type) {
-            // no renderer -> valid
-            this.rendererValidationErrors = [];
-            this.rendererIsValid = true;
+            // no renderer -> valid unless conditional override has threshold errors
+            this.rendererValidationErrors = errs;
+            this.rendererIsValid = errs.length === 0;
             this.cdr.markForCheck();
             return;
         }
@@ -47211,6 +47599,7 @@ class ColumnsConfigEditorComponent {
                 if (visualization.kind === 'processFlow' && !hasItems) {
                     errs.push('Microvisualização: process flow exige items ou itemsExpr.');
                 }
+                this.validateMicroVisualizationThresholds(visualization.thresholds, errs);
             }
         }
         if (r.type === 'avatar') {
@@ -49089,18 +49478,162 @@ class ColumnsConfigEditorComponent {
                                 }
                                 <mat-form-field appearance="outline">
                                   <mat-label>{{ tx('columns.renderer.microVisualization.tone', 'Tone') }}</mat-label>
-                                  <mat-select [ngModel]="getRendererProp('microVisualization','visualization.tone') || 'info'" [ngModelOptions]="{standalone: true}" (ngModelChange)="setMicroVisualizationProp('tone', $event)">
+                                  <mat-select [ngModel]="getRendererProp('microVisualization','visualization.tone') ?? ''" [ngModelOptions]="{standalone: true}" (ngModelChange)="setMicroVisualizationProp('tone', $event)">
+                                    <mat-option [value]="''">{{ tx('columns.renderer.microVisualization.tone.auto', 'Automatic (by thresholds / semantic)') }}</mat-option>
                                     <mat-option value="neutral">{{ tx('columns.renderer.microVisualization.tone.neutral', 'Neutral') }}</mat-option>
                                     <mat-option value="info">{{ tx('columns.renderer.microVisualization.tone.info', 'Info') }}</mat-option>
                                     <mat-option value="success">{{ tx('columns.renderer.microVisualization.tone.success', 'Success') }}</mat-option>
                                     <mat-option value="warning">{{ tx('columns.renderer.microVisualization.tone.warning', 'Warning') }}</mat-option>
                                     <mat-option value="danger">{{ tx('columns.renderer.microVisualization.tone.danger', 'Danger') }}</mat-option>
+                                    <mat-option value="critical">{{ tx('columns.renderer.microVisualization.tone.critical', 'Critical') }}</mat-option>
                                   </mat-select>
                                 </mat-form-field>
                                 <mat-form-field appearance="outline">
                                   <mat-label>{{ tx('columns.renderer.microVisualization.fallbackText', 'Accessible fallback text') }}</mat-label>
                                   <input matInput [value]="getRendererProp('microVisualization','visualization.fallbackText') || ''" (input)="setMicroVisualizationProp('fallbackText', $any($event.target).value)" />
                                 </mat-form-field>
+                                <div class="renderer-hint" style="grid-column: 1/-1; opacity:.78;">
+                                  {{ tx('columns.renderer.microVisualization.tone.precedenceHint', 'In Automatic mode, color is resolved from threshold bands or value sign. A fixed tone overrides conditional bands.') }}
+                                </div>
+                                @if (isMicroVisualizationThresholdsSupported()) {
+                                  <div
+                                    data-testid="micro-viz-thresholds-section"
+                                    style="grid-column: 1/-1; display: grid; gap: 10px; padding: 12px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: 8px;"
+                                  >
+                                    <div style="display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;">
+                                      <div>
+                                        <div style="font-weight: 600;">
+                                          {{ tx('columns.renderer.microVisualization.thresholds.title', 'Color bands (thresholds)') }}
+                                        </div>
+                                        <div class="renderer-hint" style="opacity: .78;">
+                                          {{ tx('columns.renderer.microVisualization.thresholds.description', 'Evaluates top-to-bottom (first matching band wins). Both min and max bounds are inclusive (min <= value <= max).') }}
+                                        </div>
+                                      </div>
+                                      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+                                        <button
+                                          mat-stroked-button
+                                          type="button"
+                                          data-testid="micro-viz-add-threshold"
+                                          (click)="addMicroVisualizationThreshold()"
+                                        >
+                                          <mat-icon>add</mat-icon>
+                                          {{ tx('columns.renderer.microVisualization.thresholds.add', 'Add threshold') }}
+                                        </button>
+                                        <button
+                                          mat-stroked-button
+                                          type="button"
+                                          data-testid="micro-viz-preset-thresholds"
+                                          (click)="applyDefaultMicroVisualizationThresholds()"
+                                        >
+                                          <mat-icon>traffic</mat-icon>
+                                          {{ tx('columns.renderer.microVisualization.thresholds.preset', 'Traffic-light preset (70+ / 40–69 / ≤39)') }}
+                                        </button>
+                                      </div>
+                                    </div>
+                                    @if (!getMicroVisualizationThresholds().length) {
+                                      <div class="renderer-hint" style="opacity: .75;">
+                                        {{ tx('columns.renderer.microVisualization.thresholds.empty', 'No threshold bands configured. Add bands or apply the traffic-light preset to color values automatically.') }}
+                                      </div>
+                                    }
+                                    @for (threshold of getMicroVisualizationThresholds(); track $index) {
+                                      <div
+                                        data-testid="micro-viz-threshold-row"
+                                        style="display: grid; grid-template-columns: minmax(110px, 1fr) minmax(110px, 1fr) minmax(140px, 1fr) auto; gap: 8px; align-items: center;"
+                                      >
+                                        <mat-form-field appearance="outline">
+                                          <mat-label>{{ tx('columns.renderer.microVisualization.thresholds.min', 'Min (inclusive)') }}</mat-label>
+                                          <input
+                                            matInput
+                                            type="number"
+                                            data-testid="micro-viz-threshold-min"
+                                            [value]="threshold.min ?? ''"
+                                            (input)="setMicroVisualizationThresholdNumber($index, 'min', $any($event.target).value)"
+                                          />
+                                        </mat-form-field>
+                                        <mat-form-field appearance="outline">
+                                          <mat-label>{{ tx('columns.renderer.microVisualization.thresholds.max', 'Max (inclusive)') }}</mat-label>
+                                          <input
+                                            matInput
+                                            type="number"
+                                            data-testid="micro-viz-threshold-max"
+                                            [value]="threshold.max ?? ''"
+                                            (input)="setMicroVisualizationThresholdNumber($index, 'max', $any($event.target).value)"
+                                          />
+                                        </mat-form-field>
+                                        <mat-form-field appearance="outline">
+                                          <mat-label>{{ tx('columns.renderer.microVisualization.thresholds.tone', 'Band tone') }}</mat-label>
+                                          <mat-select
+                                            data-testid="micro-viz-threshold-tone"
+                                            [ngModel]="threshold.tone || 'info'"
+                                            [ngModelOptions]="{standalone: true}"
+                                            (ngModelChange)="setMicroVisualizationThresholdTone($index, $event)"
+                                          >
+                                            <mat-option value="success">{{ tx('columns.renderer.microVisualization.tone.success', 'Success') }}</mat-option>
+                                            <mat-option value="warning">{{ tx('columns.renderer.microVisualization.tone.warning', 'Warning') }}</mat-option>
+                                            <mat-option value="danger">{{ tx('columns.renderer.microVisualization.tone.danger', 'Danger') }}</mat-option>
+                                            <mat-option value="critical">{{ tx('columns.renderer.microVisualization.tone.critical', 'Critical') }}</mat-option>
+                                            <mat-option value="info">{{ tx('columns.renderer.microVisualization.tone.info', 'Info') }}</mat-option>
+                                            <mat-option value="neutral">{{ tx('columns.renderer.microVisualization.tone.neutral', 'Neutral') }}</mat-option>
+                                          </mat-select>
+                                        </mat-form-field>
+                                        <div style="display: flex; gap: 4px; align-items: center;">
+                                          <button
+                                            praxisIconButton="arrow_upward"
+                                            size="dense"
+                                            type="button"
+                                            data-testid="micro-viz-threshold-up"
+                                            [disabled]="$index === 0"
+                                            [matTooltip]="tx('columns.renderer.microVisualization.thresholds.moveUp', 'Move threshold up')"
+                                            [attr.aria-label]="tx('columns.renderer.microVisualization.thresholds.moveUp', 'Move threshold up')"
+                                            (click)="moveMicroVisualizationThreshold($index, -1)"
+                                          ></button>
+                                          <button
+                                            praxisIconButton="arrow_downward"
+                                            size="dense"
+                                            type="button"
+                                            data-testid="micro-viz-threshold-down"
+                                            [disabled]="$index === getMicroVisualizationThresholds().length - 1"
+                                            [matTooltip]="tx('columns.renderer.microVisualization.thresholds.moveDown', 'Move threshold down')"
+                                            [attr.aria-label]="tx('columns.renderer.microVisualization.thresholds.moveDown', 'Move threshold down')"
+                                            (click)="moveMicroVisualizationThreshold($index, 1)"
+                                          ></button>
+                                          <button
+                                            praxisIconButton="delete_outline"
+                                            size="dense"
+                                            type="button"
+                                            data-testid="micro-viz-threshold-remove"
+                                            [matTooltip]="tx('columns.renderer.microVisualization.thresholds.remove', 'Remove threshold')"
+                                            [attr.aria-label]="tx('columns.renderer.microVisualization.thresholds.remove', 'Remove threshold')"
+                                            (click)="removeMicroVisualizationThreshold($index)"
+                                          ></button>
+                                        </div>
+                                      </div>
+                                    }
+                                    @if (isMicroVisualizationValueKind()) {
+                                      <mat-form-field appearance="outline">
+                                        <mat-label>{{ tx('columns.renderer.microVisualization.thresholds.sampleValues', 'Preview sample values (comma-separated)') }}</mat-label>
+                                        <input
+                                          matInput
+                                          data-testid="micro-viz-sample-values-input"
+                                          [value]="microVisualizationSampleValuesText"
+                                          (input)="setMicroVisualizationSampleValuesText($any($event.target).value)"
+                                        />
+                                      </mat-form-field>
+                                      <div
+                                        data-testid="micro-viz-sample-preview"
+                                        style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;"
+                                      >
+                                        @for (sampleVal of getMicroVisualizationSampleValues(); track $index) {
+                                          <span
+                                            class="pfx-micro-viz-cell"
+                                            [attr.data-sample-value]="sampleVal"
+                                            [innerHTML]="getPreviewMicroVisualizationHtmlForValue(sampleVal)"
+                                          ></span>
+                                        }
+                                      </div>
+                                    }
+                                  </div>
+                                }
                                 <div class="renderer-hint" style="grid-column: 1/-1; opacity:.78;">
                                   {{ tx('columns.renderer.microVisualization.hint', 'Use a value for indicators, points for trends, segments for stacked bars, and items for process flows. The table keeps the visual compact and exposes fallback text to assistive technology.') }}
                                 </div>
@@ -50001,14 +50534,79 @@ class ColumnsConfigEditorComponent {
                                   }
                                   <mat-form-field appearance="outline">
                                     <mat-label>{{ tx('columns.renderer.microVisualization.tone', 'Tone') }}</mat-label>
-                                    <mat-select [ngModel]="getOverrideMicroVisualizationProp('tone') || 'info'" [ngModelOptions]="{standalone:true}" (ngModelChange)="setOverrideMicroVisualizationProp('tone', $event)">
+                                    <mat-select [ngModel]="getOverrideMicroVisualizationProp('tone') || ''" [ngModelOptions]="{standalone:true}" (ngModelChange)="setOverrideMicroVisualizationProp('tone', $event || undefined)">
+                                      <mat-option value="">{{ tx('columns.renderer.microVisualization.tone.auto', 'Automatic (thresholds / default)') }}</mat-option>
                                       <mat-option value="neutral">{{ tx('columns.renderer.microVisualization.tone.neutral', 'Neutral') }}</mat-option>
                                       <mat-option value="info">{{ tx('columns.renderer.microVisualization.tone.info', 'Info') }}</mat-option>
                                       <mat-option value="success">{{ tx('columns.renderer.microVisualization.tone.success', 'Success') }}</mat-option>
                                       <mat-option value="warning">{{ tx('columns.renderer.microVisualization.tone.warning', 'Warning') }}</mat-option>
                                       <mat-option value="danger">{{ tx('columns.renderer.microVisualization.tone.danger', 'Danger') }}</mat-option>
+                                      <mat-option value="critical">{{ tx('columns.renderer.microVisualization.tone.critical', 'Critical') }}</mat-option>
                                     </mat-select>
+                                    <mat-hint>{{ tx('columns.renderer.microVisualization.tone.precedenceHint', 'Fixed tone overrides thresholds. Choose Automatic to let color bands control the tone.') }}</mat-hint>
                                   </mat-form-field>
+                                  @if (isOverrideMicroVisualizationThresholdsSupported()) {
+                                    <div class="micro-viz-thresholds-section" data-testid="override-micro-viz-thresholds-section">
+                                      <div class="compose-header">
+                                        <div>
+                                          <div class="section-subtitle">{{ tx('columns.renderer.microVisualization.thresholds.title', 'Color bands (thresholds)') }}</div>
+                                          <div class="field-hint">{{ tx('columns.renderer.microVisualization.thresholds.hint', 'First matching band wins (min <= value <= max). Leave min or max empty for open-ended ranges.') }}</div>
+                                        </div>
+                                        <div style="display:flex; gap:8px; flex-wrap:wrap;">
+                                          <button mat-stroked-button type="button" data-testid="override-micro-viz-preset-thresholds" (click)="applyDefaultOverrideMicroVisualizationThresholds()">
+                                            <mat-icon>palette</mat-icon>
+                                            {{ tx('columns.renderer.microVisualization.thresholds.applyPreset', 'Traffic-light preset') }}
+                                          </button>
+                                          <button mat-stroked-button type="button" data-testid="override-micro-viz-add-threshold" (click)="addOverrideMicroVisualizationThreshold()">
+                                            <mat-icon>add</mat-icon>
+                                            {{ tx('columns.renderer.microVisualization.thresholds.add', 'Add band') }}
+                                          </button>
+                                        </div>
+                                      </div>
+                                      @if (getOverrideMicroVisualizationProp('tone') && getOverrideMicroVisualizationThresholds().length > 0) {
+                                        <div class="field-hint micro-viz-guidance is-conditional">
+                                          {{ tx('columns.renderer.microVisualization.thresholds.overriddenByToneWarning', 'A fixed tone is selected above and will override these color bands. Switch Tone to Automatic so thresholds take effect.') }}
+                                        </div>
+                                      }
+                                      @if (getOverrideMicroVisualizationThresholds().length === 0) {
+                                        <div class="field-hint">{{ tx('columns.renderer.microVisualization.thresholds.empty', 'No color bands configured.') }}</div>
+                                      }
+                                      @for (threshold of getOverrideMicroVisualizationThresholds(); track $index; let idx = $index) {
+                                        <div class="form-row three-columns micro-viz-threshold-row" [attr.data-testid]="'override-micro-viz-threshold-row-' + idx">
+                                          <mat-form-field appearance="outline">
+                                            <mat-label>{{ tx('columns.renderer.microVisualization.thresholds.min', 'Min') }}</mat-label>
+                                            <input matInput type="number" [value]="threshold.min ?? ''" (input)="setOverrideMicroVisualizationThresholdNumber(idx, 'min', $any($event.target).value)" />
+                                          </mat-form-field>
+                                          <mat-form-field appearance="outline">
+                                            <mat-label>{{ tx('columns.renderer.microVisualization.thresholds.max', 'Max') }}</mat-label>
+                                            <input matInput type="number" [value]="threshold.max ?? ''" (input)="setOverrideMicroVisualizationThresholdNumber(idx, 'max', $any($event.target).value)" />
+                                          </mat-form-field>
+                                          <div style="display:flex; gap:6px; align-items:flex-start;">
+                                            <mat-form-field appearance="outline" style="flex:1;">
+                                              <mat-label>{{ tx('columns.renderer.microVisualization.thresholds.tone', 'Band tone') }}</mat-label>
+                                              <mat-select [ngModel]="threshold.tone || 'neutral'" [ngModelOptions]="{standalone:true}" (ngModelChange)="setOverrideMicroVisualizationThresholdTone(idx, $event)">
+                                                <mat-option value="neutral">{{ tx('columns.renderer.microVisualization.tone.neutral', 'Neutral') }}</mat-option>
+                                                <mat-option value="info">{{ tx('columns.renderer.microVisualization.tone.info', 'Info') }}</mat-option>
+                                                <mat-option value="success">{{ tx('columns.renderer.microVisualization.tone.success', 'Success') }}</mat-option>
+                                                <mat-option value="warning">{{ tx('columns.renderer.microVisualization.tone.warning', 'Warning') }}</mat-option>
+                                                <mat-option value="danger">{{ tx('columns.renderer.microVisualization.tone.danger', 'Danger') }}</mat-option>
+                                                <mat-option value="critical">{{ tx('columns.renderer.microVisualization.tone.critical', 'Critical') }}</mat-option>
+                                              </mat-select>
+                                            </mat-form-field>
+                                            <button mat-icon-button type="button" (click)="moveOverrideMicroVisualizationThreshold(idx, -1)" [disabled]="idx === 0" [attr.aria-label]="tx('columns.renderer.microVisualization.thresholds.moveUp', 'Move band up')">
+                                              <mat-icon>arrow_upward</mat-icon>
+                                            </button>
+                                            <button mat-icon-button type="button" (click)="moveOverrideMicroVisualizationThreshold(idx, 1)" [disabled]="idx === getOverrideMicroVisualizationThresholds().length - 1" [attr.aria-label]="tx('columns.renderer.microVisualization.thresholds.moveDown', 'Move band down')">
+                                              <mat-icon>arrow_downward</mat-icon>
+                                            </button>
+                                            <button mat-icon-button type="button" color="warn" (click)="removeOverrideMicroVisualizationThreshold(idx)" [attr.aria-label]="tx('columns.renderer.microVisualization.thresholds.remove', 'Remove band')">
+                                              <mat-icon>delete</mat-icon>
+                                            </button>
+                                          </div>
+                                        </div>
+                                      }
+                                    </div>
+                                  }
                                   <mat-form-field appearance="outline">
                                     <mat-label>{{ tx('columns.renderer.microVisualization.fallbackText', 'Accessible fallback text') }}</mat-label>
                                     <input matInput [value]="getOverrideMicroVisualizationProp('fallbackText') || ''" (input)="setOverrideMicroVisualizationProp('fallbackText', $any($event.target).value)" />
@@ -50024,7 +50622,7 @@ class ColumnsConfigEditorComponent {
                 </div>
               </div>
             </div>
-    `, isInline: true, styles: [":host{display:block;min-width:0;container-type:inline-size;container-name:table-columns-editor}.columns-config-editor{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;gap:16px}.educational-card{background:var(--md-sys-color-surface-container-low);border-left:4px solid var(--md-sys-color-primary);margin-bottom:12px}.inline-icon{font-size:18px;width:18px;height:18px;color:var(--md-sys-color-primary)}.help-icon-button{vertical-align:middle}.global-config-accordion{margin-bottom:16px}.global-config-panel{background:var(--md-sys-color-surface-container);border-left:4px solid var(--md-sys-color-secondary)}.config-panel-content{padding:16px 20px 20px}.config-layout{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}.config-group{display:flex;flex-direction:column;min-width:0}.config-group:not(.features-group){flex:0 0 auto}.features-group{flex:1 1 300px;min-width:300px}.control-section{display:flex;flex-direction:column;gap:8px}.control-label{font-size:.875rem;font-weight:500;color:var(--md-sys-color-on-surface);margin:0}.control-status{font-weight:400;color:var(--md-sys-color-on-surface-variant);font-size:.75rem;margin-left:4px}.visibility-toggle-group,.alignment-toggle-group{display:flex}.visibility-toggle-group .mat-button-toggle{min-width:90px;height:40px}.alignment-toggle-group .mat-button-toggle{min-width:56px;width:auto;height:40px;padding:0 8px}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:4px}.feature-checkbox{justify-self:start}.master-detail-layout{min-width:0;display:flex;flex:1;gap:16px;min-height:0}.master-panel{flex:0 0 350px;display:flex;flex-direction:column;background:var(--md-sys-color-surface-container-low);border-radius:8px;overflow:hidden}.list-header{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--md-sys-color-surface-container);border-bottom:1px solid var(--md-sys-color-outline-variant)}.list-header h3{margin:0;font-size:1.1rem;font-weight:500}.add-column-fab{transform:scale(.7)}.columns-list-container{flex:1;overflow-y:auto}.columns-list{padding:0}.column-item{border-bottom:1px solid var(--md-sys-color-outline-variant);cursor:pointer;transition:background-color .2s}.column-item:hover{background:var(--md-sys-color-surface-container)}.column-item.selected{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.column-item-content{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 16px}.column-main-info{flex:1;display:flex;flex-direction:column;gap:4px}.column-header{display:flex;align-items:center;gap:8px;width:100%}.drag-handle{cursor:grab;color:var(--md-sys-color-on-surface-variant);font-size:18px;flex-shrink:0}.column-text-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.column-title{font-weight:600;font-size:.9rem;color:var(--md-sys-color-on-surface);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.column-field{font-size:.75rem;color:var(--md-sys-color-on-surface-variant);font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.column-indicators{display:flex;align-items:center;gap:6px;flex-shrink:0}.column-type-icon,.mapping-indicator-icon,.renderer-indicator-icon{font-size:16px;color:var(--md-sys-color-on-surface-variant)}.visibility-checkbox{transform:scale(.9)}.remove-button{color:var(--md-sys-color-error);opacity:.7;transition:opacity .2s}.remove-button:hover{opacity:1}.detail-panel{min-width:0;flex:1;display:flex;flex-direction:column;background:var(--md-sys-color-surface-container-low);border-radius:8px;overflow:hidden}.no-selection-message{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;text-align:center;padding:48px;color:var(--md-sys-color-on-surface-variant)}.no-selection-message mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:16px}.editor-header{padding:16px 24px;background:var(--md-sys-color-surface-container);border-bottom:1px solid var(--md-sys-color-outline-variant)}.editor-title{margin:0;font-size:1.1rem;font-weight:500;color:var(--md-sys-color-on-surface)}.column-form{flex:1;padding:24px;overflow:visible}.form-row{display:flex;gap:16px;margin-bottom:24px;align-items:flex-start}.field-input,.header-input,.width-input,.data-type-input{flex:1}.header-input{flex:2}.alignment-group,.sticky-group{display:flex;flex-direction:column;gap:8px}.control-label{font-size:.875rem;font-weight:500;color:var(--md-sys-color-on-surface)}.renderer-grid,.renderer-config{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px}.compose-preset-panel{grid-column:1/-1;display:grid;gap:12px;padding:12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container-low)}.compose-preset-copy,.compose-editor-heading{display:grid;gap:4px}.compose-preset-copy strong,.compose-editor-heading strong{color:var(--md-sys-color-on-surface);font-weight:600}.compose-preset-actions,.compose-item-actions{display:flex;flex-wrap:wrap;gap:8px}.compose-preset-actions button,.compose-item-actions button{min-height:36px;white-space:normal;text-align:left;line-height:1.2}.compose-preset-actions--inline{margin:0 0 12px}.compose-editor-heading{margin-bottom:12px}.renderer-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}.cond-ov-item{min-width:0;flex-wrap:wrap}.cond-ov-item>span{min-width:0;overflow-wrap:anywhere}.cond-ov-item>.spacer{margin-left:auto}.renderer-errors{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);border:1px solid var(--md-sys-color-error);padding:8px 12px;border-radius:6px;font-size:.85rem}.renderer-preview{margin-top:8px;padding:8px 12px;background:var(--md-sys-color-surface-container-low);border:1px solid var(--md-sys-color-outline-variant);border-radius:6px}.renderer-preview-list{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.renderer-preview-list .pfx-compose{display:inline-flex;gap:6px;align-items:center}.pfx-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:10px;font-size:12px;line-height:1}.pfx-badge-icon{font-size:14px;width:14px;height:14px}.pfx-badge--plain{border:1px solid transparent;color:inherit;background:transparent}.pfx-badge--outlined{border:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface);background:transparent}.pfx-badge--filled-primary{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.pfx-badge--filled-accent{background:var(--md-sys-color-secondary);color:var(--md-sys-color-on-secondary)}.pfx-badge--filled-warn,.pfx-badge--filled-danger{background:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}.pfx-badge--filled-success{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.pfx-badge--filled-info{background:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}.pfx-badge--filled-basic{background:var(--md-sys-color-surface-container-highest);color:var(--md-sys-color-on-surface);border:1px solid var(--md-sys-color-outline-variant)}.pfx-badge--soft-primary{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.pfx-badge--soft-accent{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.pfx-badge--soft-warn,.pfx-badge--soft-danger{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.pfx-badge--soft-success,.pfx-badge--soft-info{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.pfx-badge--soft-basic{background:var(--md-sys-color-surface-container-highest);color:var(--md-sys-color-on-surface);border:1px solid var(--md-sys-color-outline-variant)}.pfx-cell-image{display:inline-block;border-radius:4px;object-fit:cover}.pfx-link{color:var(--md-sys-color-primary);text-decoration:underline;cursor:pointer}.pfx-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;font-size:12px;border:1px solid transparent}.pfx-chip--plain{background:transparent;border-color:transparent;color:var(--md-sys-color-on-surface)}.pfx-chip--outlined{border-color:var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface)}.pfx-chip--filled-primary{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.pfx-chip--filled-accent{background:var(--md-sys-color-secondary);color:var(--md-sys-color-on-secondary)}.pfx-chip--filled-warn,.pfx-chip--filled-danger{background:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}.pfx-chip--filled-success{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.pfx-chip--filled-info{background:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}.pfx-chip--filled-basic{background:var(--md-sys-color-surface-container-highest);color:var(--md-sys-color-on-surface);border-color:var(--md-sys-color-outline-variant)}.pfx-chip--soft-primary{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.pfx-chip--soft-accent{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.pfx-chip--soft-warn,.pfx-chip--soft-danger{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.pfx-chip--soft-success,.pfx-chip--soft-info{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.pfx-chip--soft-basic{background:var(--md-sys-color-surface-container-highest);color:var(--md-sys-color-on-surface);border-color:var(--md-sys-color-outline-variant)}.pfx-progress{position:relative;width:120px;height:8px;background:var(--md-sys-color-surface-container-highest);border-radius:4px;overflow:hidden}.pfx-progress-bar{height:100%;background:var(--md-sys-color-primary)}.pfx-avatar{display:inline-flex;align-items:center;justify-content:center;background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface);border-radius:4px;overflow:hidden;font-weight:600;width:32px;height:32px}.pfx-avatar.shape-rounded{border-radius:8px}.pfx-avatar.shape-circle{border-radius:999px}.pfx-avatar--initials{text-transform:uppercase;font-size:12px}@container table-columns-editor (max-width: 800px){.column-form{padding:12px}.cond-ov-item{align-items:flex-start}.cond-ov-item>.spacer{display:none}.master-panel{flex:0 0 220px;min-width:0}.column-item{height:auto;min-height:96px}.column-item-content{display:grid;grid-template-columns:18px minmax(0,1fr) auto;padding:10px 0;gap:4px}.column-main-info,.column-header{display:contents}.drag-handle{grid-row:1;grid-column:1}.column-text-info{grid-row:1;grid-column:2/4}.column-title{white-space:normal;overflow-wrap:anywhere}.column-indicators{grid-row:2;grid-column:2;gap:2px}.remove-button{grid-row:2;grid-column:3}.detail-panel{min-width:0}.form-row{flex-direction:column;gap:12px}.config-layout{flex-direction:column;gap:20px}.features-group{min-width:auto}.features-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}.visibility-toggle-group .mat-button-toggle{min-width:80px;font-size:.875rem}}@container table-columns-editor (max-width: 600px){.master-detail-layout{flex-direction:column}.master-panel{flex:0 0 auto;width:100%;max-height:240px}}@container table-columns-editor (max-width: 480px){.visibility-toggle-group .mat-button-toggle{min-width:70px;font-size:.8rem}.alignment-toggle-group .mat-button-toggle{min-width:48px;padding:0 6px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i10$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i10$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i9.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i9.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i10$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i10$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i11$1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i11$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i8.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i6.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i6.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i14.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i13.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i13.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i13.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: VisualFormulaBuilderComponent, selector: "visual-formula-builder", inputs: ["availableDataSchema", "currentFormula"], outputs: ["formulaChange", "generatedExpressionChange"] }, { kind: "component", type: ValueMappingEditorComponent, selector: "value-mapping-editor", inputs: ["currentMapping", "keyInputType", "labelKey", "labelValue"], outputs: ["mappingChange"] }, { kind: "component", type: DataFormatterComponent, selector: "data-formatter", inputs: ["columnType", "currentFormat"], outputs: ["formatChange"] }, { kind: "component", type: TableRatingCellComponent, selector: "praxis-table-rating", inputs: ["itemsCount", "value", "size", "ratingColor", "outlineColor", "ariaLabel"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, styles: [":host{display:block;min-width:0;container-type:inline-size;container-name:table-columns-editor}.columns-config-editor{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;gap:16px}.educational-card{background:var(--md-sys-color-surface-container-low);border-left:4px solid var(--md-sys-color-primary);margin-bottom:12px}.inline-icon{font-size:18px;width:18px;height:18px;color:var(--md-sys-color-primary)}.help-icon-button{vertical-align:middle}.global-config-accordion{margin-bottom:16px}.global-config-panel{background:var(--md-sys-color-surface-container);border-left:4px solid var(--md-sys-color-secondary)}.config-panel-content{padding:16px 20px 20px}.config-layout{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}.config-group{display:flex;flex-direction:column;min-width:0}.config-group:not(.features-group){flex:0 0 auto}.features-group{flex:1 1 300px;min-width:300px}.control-section{display:flex;flex-direction:column;gap:8px}.control-label{font-size:.875rem;font-weight:500;color:var(--md-sys-color-on-surface);margin:0}.control-status{font-weight:400;color:var(--md-sys-color-on-surface-variant);font-size:.75rem;margin-left:4px}.visibility-toggle-group,.alignment-toggle-group{display:flex}.visibility-toggle-group .mat-button-toggle{min-width:90px;height:40px}.alignment-toggle-group .mat-button-toggle{min-width:56px;width:auto;height:40px;padding:0 8px}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:4px}.feature-checkbox{justify-self:start}.master-detail-layout{min-width:0;display:flex;flex:1;gap:16px;min-height:0}.master-panel{flex:0 0 350px;display:flex;flex-direction:column;background:var(--md-sys-color-surface-container-low);border-radius:8px;overflow:hidden}.list-header{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--md-sys-color-surface-container);border-bottom:1px solid var(--md-sys-color-outline-variant)}.list-header h3{margin:0;font-size:1.1rem;font-weight:500}.add-column-fab{transform:scale(.7)}.columns-list-container{flex:1;overflow-y:auto}.columns-list{padding:0}.column-item{border-bottom:1px solid var(--md-sys-color-outline-variant);cursor:pointer;transition:background-color .2s}.column-item:hover{background:var(--md-sys-color-surface-container)}.column-item.selected{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.column-item-content{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 16px}.column-main-info{flex:1;display:flex;flex-direction:column;gap:4px}.column-header{display:flex;align-items:center;gap:8px;width:100%}.drag-handle{cursor:grab;color:var(--md-sys-color-on-surface-variant);font-size:18px;flex-shrink:0}.column-text-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.column-title{font-weight:600;font-size:.9rem;color:var(--md-sys-color-on-surface);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.column-field{font-size:.75rem;color:var(--md-sys-color-on-surface-variant);font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.column-indicators{display:flex;align-items:center;gap:6px;flex-shrink:0}.column-type-icon,.mapping-indicator-icon,.renderer-indicator-icon{font-size:16px;color:var(--md-sys-color-on-surface-variant)}.visibility-checkbox{transform:scale(.9)}.remove-button{color:var(--md-sys-color-error);opacity:.7;transition:opacity .2s}.remove-button:hover{opacity:1}.detail-panel{min-width:0;flex:1;display:flex;flex-direction:column;background:var(--md-sys-color-surface-container-low);border-radius:8px;overflow:hidden}.no-selection-message{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;text-align:center;padding:48px;color:var(--md-sys-color-on-surface-variant)}.no-selection-message mat-icon{font-size:48px;width:48px;height:48px;margin-bottom:16px}.editor-header{padding:16px 24px;background:var(--md-sys-color-surface-container);border-bottom:1px solid var(--md-sys-color-outline-variant)}.editor-title{margin:0;font-size:1.1rem;font-weight:500;color:var(--md-sys-color-on-surface)}.column-form{flex:1;padding:24px;overflow:visible}.form-row{display:flex;gap:16px;margin-bottom:24px;align-items:flex-start}.field-input,.header-input,.width-input,.data-type-input{flex:1}.header-input{flex:2}.alignment-group,.sticky-group{display:flex;flex-direction:column;gap:8px}.control-label{font-size:.875rem;font-weight:500;color:var(--md-sys-color-on-surface)}.renderer-grid,.renderer-config{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px}.compose-preset-panel{grid-column:1/-1;display:grid;gap:12px;padding:12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container-low)}.compose-preset-copy,.compose-editor-heading{display:grid;gap:4px}.compose-preset-copy strong,.compose-editor-heading strong{color:var(--md-sys-color-on-surface);font-weight:600}.compose-preset-actions,.compose-item-actions{display:flex;flex-wrap:wrap;gap:8px}.compose-preset-actions button,.compose-item-actions button{min-height:36px;white-space:normal;text-align:left;line-height:1.2}.compose-preset-actions--inline{margin:0 0 12px}.compose-editor-heading{margin-bottom:12px}.renderer-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}.cond-ov-item{min-width:0;flex-wrap:wrap}.cond-ov-item>span{min-width:0;overflow-wrap:anywhere}.cond-ov-item>.spacer{margin-left:auto}.renderer-errors{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);border:1px solid var(--md-sys-color-error);padding:8px 12px;border-radius:6px;font-size:.85rem}.renderer-preview{margin-top:8px;padding:8px 12px;background:var(--md-sys-color-surface-container-low);border:1px solid var(--md-sys-color-outline-variant);border-radius:6px}.renderer-preview-list{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.renderer-preview-list .pfx-compose{display:inline-flex;gap:6px;align-items:center}.pfx-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:10px;font-size:12px;line-height:1}.pfx-badge-icon{font-size:14px;width:14px;height:14px}.pfx-badge--plain{border:1px solid transparent;color:inherit;background:transparent}.pfx-badge--outlined{border:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface);background:transparent}.pfx-badge--filled-primary{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.pfx-badge--filled-accent{background:var(--md-sys-color-secondary);color:var(--md-sys-color-on-secondary)}.pfx-badge--filled-warn,.pfx-badge--filled-danger{background:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}.pfx-badge--filled-success{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.pfx-badge--filled-info{background:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}.pfx-badge--filled-basic{background:var(--md-sys-color-surface-container-highest);color:var(--md-sys-color-on-surface);border:1px solid var(--md-sys-color-outline-variant)}.pfx-badge--soft-primary{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.pfx-badge--soft-accent{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.pfx-badge--soft-warn,.pfx-badge--soft-danger{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.pfx-badge--soft-success,.pfx-badge--soft-info{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.pfx-badge--soft-basic{background:var(--md-sys-color-surface-container-highest);color:var(--md-sys-color-on-surface);border:1px solid var(--md-sys-color-outline-variant)}.pfx-cell-image{display:inline-block;border-radius:4px;object-fit:cover}.pfx-link{color:var(--md-sys-color-primary);text-decoration:underline;cursor:pointer}.pfx-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;font-size:12px;border:1px solid transparent}.pfx-chip--plain{background:transparent;border-color:transparent;color:var(--md-sys-color-on-surface)}.pfx-chip--outlined{border-color:var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface)}.pfx-chip--filled-primary{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.pfx-chip--filled-accent{background:var(--md-sys-color-secondary);color:var(--md-sys-color-on-secondary)}.pfx-chip--filled-warn,.pfx-chip--filled-danger{background:var(--md-sys-color-error);color:var(--md-sys-color-on-error)}.pfx-chip--filled-success{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.pfx-chip--filled-info{background:var(--md-sys-color-tertiary);color:var(--md-sys-color-on-tertiary)}.pfx-chip--filled-basic{background:var(--md-sys-color-surface-container-highest);color:var(--md-sys-color-on-surface);border-color:var(--md-sys-color-outline-variant)}.pfx-chip--soft-primary{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.pfx-chip--soft-accent{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.pfx-chip--soft-warn,.pfx-chip--soft-danger{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.pfx-chip--soft-success,.pfx-chip--soft-info{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.pfx-chip--soft-basic{background:var(--md-sys-color-surface-container-highest);color:var(--md-sys-color-on-surface);border-color:var(--md-sys-color-outline-variant)}.pfx-progress{position:relative;width:120px;height:8px;background:var(--md-sys-color-surface-container-highest);border-radius:4px;overflow:hidden}.pfx-progress-bar{height:100%;background:var(--md-sys-color-primary)}.pfx-avatar{display:inline-flex;align-items:center;justify-content:center;background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface);border-radius:4px;overflow:hidden;font-weight:600;width:32px;height:32px}.pfx-avatar.shape-rounded{border-radius:8px}.pfx-avatar.shape-circle{border-radius:999px}.pfx-avatar--initials{text-transform:uppercase;font-size:12px}@container table-columns-editor (max-width: 800px){.column-form{padding:12px}.cond-ov-item{align-items:flex-start}.cond-ov-item>.spacer{display:none}.master-panel{flex:0 0 220px;min-width:0}.column-item{height:auto;min-height:96px}.column-item-content{display:grid;grid-template-columns:18px minmax(0,1fr) auto;padding:10px 0;gap:4px}.column-main-info,.column-header{display:contents}.drag-handle{grid-row:1;grid-column:1}.column-text-info{grid-row:1;grid-column:2/4}.column-title{white-space:normal;overflow-wrap:anywhere}.column-indicators{grid-row:2;grid-column:2;gap:2px}.remove-button{grid-row:2;grid-column:3}.detail-panel{min-width:0}.form-row{flex-direction:column;gap:12px}.config-layout{flex-direction:column;gap:20px}.features-group{min-width:auto}.features-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}.visibility-toggle-group .mat-button-toggle{min-width:80px;font-size:.875rem}}@container table-columns-editor (max-width: 600px){.master-detail-layout{flex-direction:column}.master-panel{flex:0 0 auto;width:100%;max-height:240px}}@container table-columns-editor (max-width: 480px){.visibility-toggle-group .mat-button-toggle{min-width:70px;font-size:.8rem}.alignment-toggle-group .mat-button-toggle{min-width:48px;padding:0 6px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i10$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i10$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i9.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i9.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i10$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i10$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i11$1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i11$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i8.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i6.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i6.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i14.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i5$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i13.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i13.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i13.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: VisualFormulaBuilderComponent, selector: "visual-formula-builder", inputs: ["availableDataSchema", "currentFormula"], outputs: ["formulaChange", "generatedExpressionChange"] }, { kind: "component", type: ValueMappingEditorComponent, selector: "value-mapping-editor", inputs: ["currentMapping", "keyInputType", "labelKey", "labelValue"], outputs: ["mappingChange"] }, { kind: "component", type: DataFormatterComponent, selector: "data-formatter", inputs: ["columnType", "currentFormat"], outputs: ["formatChange"] }, { kind: "component", type: TableRatingCellComponent, selector: "praxis-table-rating", inputs: ["itemsCount", "value", "size", "ratingColor", "outlineColor", "ariaLabel"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ColumnsConfigEditorComponent, decorators: [{
             type: Component,
@@ -51115,18 +51713,162 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                                 }
                                 <mat-form-field appearance="outline">
                                   <mat-label>{{ tx('columns.renderer.microVisualization.tone', 'Tone') }}</mat-label>
-                                  <mat-select [ngModel]="getRendererProp('microVisualization','visualization.tone') || 'info'" [ngModelOptions]="{standalone: true}" (ngModelChange)="setMicroVisualizationProp('tone', $event)">
+                                  <mat-select [ngModel]="getRendererProp('microVisualization','visualization.tone') ?? ''" [ngModelOptions]="{standalone: true}" (ngModelChange)="setMicroVisualizationProp('tone', $event)">
+                                    <mat-option [value]="''">{{ tx('columns.renderer.microVisualization.tone.auto', 'Automatic (by thresholds / semantic)') }}</mat-option>
                                     <mat-option value="neutral">{{ tx('columns.renderer.microVisualization.tone.neutral', 'Neutral') }}</mat-option>
                                     <mat-option value="info">{{ tx('columns.renderer.microVisualization.tone.info', 'Info') }}</mat-option>
                                     <mat-option value="success">{{ tx('columns.renderer.microVisualization.tone.success', 'Success') }}</mat-option>
                                     <mat-option value="warning">{{ tx('columns.renderer.microVisualization.tone.warning', 'Warning') }}</mat-option>
                                     <mat-option value="danger">{{ tx('columns.renderer.microVisualization.tone.danger', 'Danger') }}</mat-option>
+                                    <mat-option value="critical">{{ tx('columns.renderer.microVisualization.tone.critical', 'Critical') }}</mat-option>
                                   </mat-select>
                                 </mat-form-field>
                                 <mat-form-field appearance="outline">
                                   <mat-label>{{ tx('columns.renderer.microVisualization.fallbackText', 'Accessible fallback text') }}</mat-label>
                                   <input matInput [value]="getRendererProp('microVisualization','visualization.fallbackText') || ''" (input)="setMicroVisualizationProp('fallbackText', $any($event.target).value)" />
                                 </mat-form-field>
+                                <div class="renderer-hint" style="grid-column: 1/-1; opacity:.78;">
+                                  {{ tx('columns.renderer.microVisualization.tone.precedenceHint', 'In Automatic mode, color is resolved from threshold bands or value sign. A fixed tone overrides conditional bands.') }}
+                                </div>
+                                @if (isMicroVisualizationThresholdsSupported()) {
+                                  <div
+                                    data-testid="micro-viz-thresholds-section"
+                                    style="grid-column: 1/-1; display: grid; gap: 10px; padding: 12px; border: 1px solid var(--md-sys-color-outline-variant); border-radius: 8px;"
+                                  >
+                                    <div style="display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;">
+                                      <div>
+                                        <div style="font-weight: 600;">
+                                          {{ tx('columns.renderer.microVisualization.thresholds.title', 'Color bands (thresholds)') }}
+                                        </div>
+                                        <div class="renderer-hint" style="opacity: .78;">
+                                          {{ tx('columns.renderer.microVisualization.thresholds.description', 'Evaluates top-to-bottom (first matching band wins). Both min and max bounds are inclusive (min <= value <= max).') }}
+                                        </div>
+                                      </div>
+                                      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+                                        <button
+                                          mat-stroked-button
+                                          type="button"
+                                          data-testid="micro-viz-add-threshold"
+                                          (click)="addMicroVisualizationThreshold()"
+                                        >
+                                          <mat-icon>add</mat-icon>
+                                          {{ tx('columns.renderer.microVisualization.thresholds.add', 'Add threshold') }}
+                                        </button>
+                                        <button
+                                          mat-stroked-button
+                                          type="button"
+                                          data-testid="micro-viz-preset-thresholds"
+                                          (click)="applyDefaultMicroVisualizationThresholds()"
+                                        >
+                                          <mat-icon>traffic</mat-icon>
+                                          {{ tx('columns.renderer.microVisualization.thresholds.preset', 'Traffic-light preset (70+ / 40–69 / ≤39)') }}
+                                        </button>
+                                      </div>
+                                    </div>
+                                    @if (!getMicroVisualizationThresholds().length) {
+                                      <div class="renderer-hint" style="opacity: .75;">
+                                        {{ tx('columns.renderer.microVisualization.thresholds.empty', 'No threshold bands configured. Add bands or apply the traffic-light preset to color values automatically.') }}
+                                      </div>
+                                    }
+                                    @for (threshold of getMicroVisualizationThresholds(); track $index) {
+                                      <div
+                                        data-testid="micro-viz-threshold-row"
+                                        style="display: grid; grid-template-columns: minmax(110px, 1fr) minmax(110px, 1fr) minmax(140px, 1fr) auto; gap: 8px; align-items: center;"
+                                      >
+                                        <mat-form-field appearance="outline">
+                                          <mat-label>{{ tx('columns.renderer.microVisualization.thresholds.min', 'Min (inclusive)') }}</mat-label>
+                                          <input
+                                            matInput
+                                            type="number"
+                                            data-testid="micro-viz-threshold-min"
+                                            [value]="threshold.min ?? ''"
+                                            (input)="setMicroVisualizationThresholdNumber($index, 'min', $any($event.target).value)"
+                                          />
+                                        </mat-form-field>
+                                        <mat-form-field appearance="outline">
+                                          <mat-label>{{ tx('columns.renderer.microVisualization.thresholds.max', 'Max (inclusive)') }}</mat-label>
+                                          <input
+                                            matInput
+                                            type="number"
+                                            data-testid="micro-viz-threshold-max"
+                                            [value]="threshold.max ?? ''"
+                                            (input)="setMicroVisualizationThresholdNumber($index, 'max', $any($event.target).value)"
+                                          />
+                                        </mat-form-field>
+                                        <mat-form-field appearance="outline">
+                                          <mat-label>{{ tx('columns.renderer.microVisualization.thresholds.tone', 'Band tone') }}</mat-label>
+                                          <mat-select
+                                            data-testid="micro-viz-threshold-tone"
+                                            [ngModel]="threshold.tone || 'info'"
+                                            [ngModelOptions]="{standalone: true}"
+                                            (ngModelChange)="setMicroVisualizationThresholdTone($index, $event)"
+                                          >
+                                            <mat-option value="success">{{ tx('columns.renderer.microVisualization.tone.success', 'Success') }}</mat-option>
+                                            <mat-option value="warning">{{ tx('columns.renderer.microVisualization.tone.warning', 'Warning') }}</mat-option>
+                                            <mat-option value="danger">{{ tx('columns.renderer.microVisualization.tone.danger', 'Danger') }}</mat-option>
+                                            <mat-option value="critical">{{ tx('columns.renderer.microVisualization.tone.critical', 'Critical') }}</mat-option>
+                                            <mat-option value="info">{{ tx('columns.renderer.microVisualization.tone.info', 'Info') }}</mat-option>
+                                            <mat-option value="neutral">{{ tx('columns.renderer.microVisualization.tone.neutral', 'Neutral') }}</mat-option>
+                                          </mat-select>
+                                        </mat-form-field>
+                                        <div style="display: flex; gap: 4px; align-items: center;">
+                                          <button
+                                            praxisIconButton="arrow_upward"
+                                            size="dense"
+                                            type="button"
+                                            data-testid="micro-viz-threshold-up"
+                                            [disabled]="$index === 0"
+                                            [matTooltip]="tx('columns.renderer.microVisualization.thresholds.moveUp', 'Move threshold up')"
+                                            [attr.aria-label]="tx('columns.renderer.microVisualization.thresholds.moveUp', 'Move threshold up')"
+                                            (click)="moveMicroVisualizationThreshold($index, -1)"
+                                          ></button>
+                                          <button
+                                            praxisIconButton="arrow_downward"
+                                            size="dense"
+                                            type="button"
+                                            data-testid="micro-viz-threshold-down"
+                                            [disabled]="$index === getMicroVisualizationThresholds().length - 1"
+                                            [matTooltip]="tx('columns.renderer.microVisualization.thresholds.moveDown', 'Move threshold down')"
+                                            [attr.aria-label]="tx('columns.renderer.microVisualization.thresholds.moveDown', 'Move threshold down')"
+                                            (click)="moveMicroVisualizationThreshold($index, 1)"
+                                          ></button>
+                                          <button
+                                            praxisIconButton="delete_outline"
+                                            size="dense"
+                                            type="button"
+                                            data-testid="micro-viz-threshold-remove"
+                                            [matTooltip]="tx('columns.renderer.microVisualization.thresholds.remove', 'Remove threshold')"
+                                            [attr.aria-label]="tx('columns.renderer.microVisualization.thresholds.remove', 'Remove threshold')"
+                                            (click)="removeMicroVisualizationThreshold($index)"
+                                          ></button>
+                                        </div>
+                                      </div>
+                                    }
+                                    @if (isMicroVisualizationValueKind()) {
+                                      <mat-form-field appearance="outline">
+                                        <mat-label>{{ tx('columns.renderer.microVisualization.thresholds.sampleValues', 'Preview sample values (comma-separated)') }}</mat-label>
+                                        <input
+                                          matInput
+                                          data-testid="micro-viz-sample-values-input"
+                                          [value]="microVisualizationSampleValuesText"
+                                          (input)="setMicroVisualizationSampleValuesText($any($event.target).value)"
+                                        />
+                                      </mat-form-field>
+                                      <div
+                                        data-testid="micro-viz-sample-preview"
+                                        style="display: flex; gap: 8px; flex-wrap: wrap; align-items: center;"
+                                      >
+                                        @for (sampleVal of getMicroVisualizationSampleValues(); track $index) {
+                                          <span
+                                            class="pfx-micro-viz-cell"
+                                            [attr.data-sample-value]="sampleVal"
+                                            [innerHTML]="getPreviewMicroVisualizationHtmlForValue(sampleVal)"
+                                          ></span>
+                                        }
+                                      </div>
+                                    }
+                                  </div>
+                                }
                                 <div class="renderer-hint" style="grid-column: 1/-1; opacity:.78;">
                                   {{ tx('columns.renderer.microVisualization.hint', 'Use a value for indicators, points for trends, segments for stacked bars, and items for process flows. The table keeps the visual compact and exposes fallback text to assistive technology.') }}
                                 </div>
@@ -52027,14 +52769,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                                   }
                                   <mat-form-field appearance="outline">
                                     <mat-label>{{ tx('columns.renderer.microVisualization.tone', 'Tone') }}</mat-label>
-                                    <mat-select [ngModel]="getOverrideMicroVisualizationProp('tone') || 'info'" [ngModelOptions]="{standalone:true}" (ngModelChange)="setOverrideMicroVisualizationProp('tone', $event)">
+                                    <mat-select [ngModel]="getOverrideMicroVisualizationProp('tone') || ''" [ngModelOptions]="{standalone:true}" (ngModelChange)="setOverrideMicroVisualizationProp('tone', $event || undefined)">
+                                      <mat-option value="">{{ tx('columns.renderer.microVisualization.tone.auto', 'Automatic (thresholds / default)') }}</mat-option>
                                       <mat-option value="neutral">{{ tx('columns.renderer.microVisualization.tone.neutral', 'Neutral') }}</mat-option>
                                       <mat-option value="info">{{ tx('columns.renderer.microVisualization.tone.info', 'Info') }}</mat-option>
                                       <mat-option value="success">{{ tx('columns.renderer.microVisualization.tone.success', 'Success') }}</mat-option>
                                       <mat-option value="warning">{{ tx('columns.renderer.microVisualization.tone.warning', 'Warning') }}</mat-option>
                                       <mat-option value="danger">{{ tx('columns.renderer.microVisualization.tone.danger', 'Danger') }}</mat-option>
+                                      <mat-option value="critical">{{ tx('columns.renderer.microVisualization.tone.critical', 'Critical') }}</mat-option>
                                     </mat-select>
+                                    <mat-hint>{{ tx('columns.renderer.microVisualization.tone.precedenceHint', 'Fixed tone overrides thresholds. Choose Automatic to let color bands control the tone.') }}</mat-hint>
                                   </mat-form-field>
+                                  @if (isOverrideMicroVisualizationThresholdsSupported()) {
+                                    <div class="micro-viz-thresholds-section" data-testid="override-micro-viz-thresholds-section">
+                                      <div class="compose-header">
+                                        <div>
+                                          <div class="section-subtitle">{{ tx('columns.renderer.microVisualization.thresholds.title', 'Color bands (thresholds)') }}</div>
+                                          <div class="field-hint">{{ tx('columns.renderer.microVisualization.thresholds.hint', 'First matching band wins (min <= value <= max). Leave min or max empty for open-ended ranges.') }}</div>
+                                        </div>
+                                        <div style="display:flex; gap:8px; flex-wrap:wrap;">
+                                          <button mat-stroked-button type="button" data-testid="override-micro-viz-preset-thresholds" (click)="applyDefaultOverrideMicroVisualizationThresholds()">
+                                            <mat-icon>palette</mat-icon>
+                                            {{ tx('columns.renderer.microVisualization.thresholds.applyPreset', 'Traffic-light preset') }}
+                                          </button>
+                                          <button mat-stroked-button type="button" data-testid="override-micro-viz-add-threshold" (click)="addOverrideMicroVisualizationThreshold()">
+                                            <mat-icon>add</mat-icon>
+                                            {{ tx('columns.renderer.microVisualization.thresholds.add', 'Add band') }}
+                                          </button>
+                                        </div>
+                                      </div>
+                                      @if (getOverrideMicroVisualizationProp('tone') && getOverrideMicroVisualizationThresholds().length > 0) {
+                                        <div class="field-hint micro-viz-guidance is-conditional">
+                                          {{ tx('columns.renderer.microVisualization.thresholds.overriddenByToneWarning', 'A fixed tone is selected above and will override these color bands. Switch Tone to Automatic so thresholds take effect.') }}
+                                        </div>
+                                      }
+                                      @if (getOverrideMicroVisualizationThresholds().length === 0) {
+                                        <div class="field-hint">{{ tx('columns.renderer.microVisualization.thresholds.empty', 'No color bands configured.') }}</div>
+                                      }
+                                      @for (threshold of getOverrideMicroVisualizationThresholds(); track $index; let idx = $index) {
+                                        <div class="form-row three-columns micro-viz-threshold-row" [attr.data-testid]="'override-micro-viz-threshold-row-' + idx">
+                                          <mat-form-field appearance="outline">
+                                            <mat-label>{{ tx('columns.renderer.microVisualization.thresholds.min', 'Min') }}</mat-label>
+                                            <input matInput type="number" [value]="threshold.min ?? ''" (input)="setOverrideMicroVisualizationThresholdNumber(idx, 'min', $any($event.target).value)" />
+                                          </mat-form-field>
+                                          <mat-form-field appearance="outline">
+                                            <mat-label>{{ tx('columns.renderer.microVisualization.thresholds.max', 'Max') }}</mat-label>
+                                            <input matInput type="number" [value]="threshold.max ?? ''" (input)="setOverrideMicroVisualizationThresholdNumber(idx, 'max', $any($event.target).value)" />
+                                          </mat-form-field>
+                                          <div style="display:flex; gap:6px; align-items:flex-start;">
+                                            <mat-form-field appearance="outline" style="flex:1;">
+                                              <mat-label>{{ tx('columns.renderer.microVisualization.thresholds.tone', 'Band tone') }}</mat-label>
+                                              <mat-select [ngModel]="threshold.tone || 'neutral'" [ngModelOptions]="{standalone:true}" (ngModelChange)="setOverrideMicroVisualizationThresholdTone(idx, $event)">
+                                                <mat-option value="neutral">{{ tx('columns.renderer.microVisualization.tone.neutral', 'Neutral') }}</mat-option>
+                                                <mat-option value="info">{{ tx('columns.renderer.microVisualization.tone.info', 'Info') }}</mat-option>
+                                                <mat-option value="success">{{ tx('columns.renderer.microVisualization.tone.success', 'Success') }}</mat-option>
+                                                <mat-option value="warning">{{ tx('columns.renderer.microVisualization.tone.warning', 'Warning') }}</mat-option>
+                                                <mat-option value="danger">{{ tx('columns.renderer.microVisualization.tone.danger', 'Danger') }}</mat-option>
+                                                <mat-option value="critical">{{ tx('columns.renderer.microVisualization.tone.critical', 'Critical') }}</mat-option>
+                                              </mat-select>
+                                            </mat-form-field>
+                                            <button mat-icon-button type="button" (click)="moveOverrideMicroVisualizationThreshold(idx, -1)" [disabled]="idx === 0" [attr.aria-label]="tx('columns.renderer.microVisualization.thresholds.moveUp', 'Move band up')">
+                                              <mat-icon>arrow_upward</mat-icon>
+                                            </button>
+                                            <button mat-icon-button type="button" (click)="moveOverrideMicroVisualizationThreshold(idx, 1)" [disabled]="idx === getOverrideMicroVisualizationThresholds().length - 1" [attr.aria-label]="tx('columns.renderer.microVisualization.thresholds.moveDown', 'Move band down')">
+                                              <mat-icon>arrow_downward</mat-icon>
+                                            </button>
+                                            <button mat-icon-button type="button" color="warn" (click)="removeOverrideMicroVisualizationThreshold(idx)" [attr.aria-label]="tx('columns.renderer.microVisualization.thresholds.remove', 'Remove band')">
+                                              <mat-icon>delete</mat-icon>
+                                            </button>
+                                          </div>
+                                        </div>
+                                      }
+                                    </div>
+                                  }
                                   <mat-form-field appearance="outline">
                                     <mat-label>{{ tx('columns.renderer.microVisualization.fallbackText', 'Accessible fallback text') }}</mat-label>
                                     <input matInput [value]="getOverrideMicroVisualizationProp('fallbackText') || ''" (input)="setOverrideMicroVisualizationProp('fallbackText', $any($event.target).value)" />