@akcelik/strct 4.4.0 → 4.4.1

package/fesm2022/akcelik-strct.mjs

@@ -1756,7 +1756,7 @@ class StrctProgress {
     >
       <div class="strct-progress__fill" [style.width.%]="clamped()"></div>
     </div>
-  `, isInline: true, styles: [".strct-progress{display:block}.strct-progress__track{height:6px;border-radius:var(--radius-sm);background:var(--bg-3);overflow:hidden}.strct-progress__fill{height:100%;border-radius:var(--radius-sm);background:var(--acc);transition:width .3s ease}.strct-progress--success .strct-progress__fill{background:var(--success)}.strct-progress--warning .strct-progress__fill{background:var(--warning)}.strct-progress--critical .strct-progress__fill{background:var(--critical)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".strct-progress{display:block}.strct-progress__track{height:6px;border-radius:var(--radius-sm);background:var(--strct-progress-track, color-mix(in srgb, var(--t1) 12%, transparent));box-shadow:inset 0 0 0 1px var(--b2);overflow:hidden}.strct-progress__fill{height:100%;border-radius:var(--radius-sm);background:var(--acc);transition:width .3s ease}.strct-progress--success .strct-progress__fill{background:var(--success)}.strct-progress--warning .strct-progress__fill{background:var(--warning)}.strct-progress--critical .strct-progress__fill{background:var(--critical)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctProgress, decorators: [{
             type: Component,
@@ -1776,7 +1776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                         '[class.strct-progress--success]': "resolvedStatus() === 'success'",
                         '[class.strct-progress--warning]': "resolvedStatus() === 'warning'",
                         '[class.strct-progress--critical]': "resolvedStatus() === 'critical'",
-                    }, styles: [".strct-progress{display:block}.strct-progress__track{height:6px;border-radius:var(--radius-sm);background:var(--bg-3);overflow:hidden}.strct-progress__fill{height:100%;border-radius:var(--radius-sm);background:var(--acc);transition:width .3s ease}.strct-progress--success .strct-progress__fill{background:var(--success)}.strct-progress--warning .strct-progress__fill{background:var(--warning)}.strct-progress--critical .strct-progress__fill{background:var(--critical)}\n"] }]
+                    }, styles: [".strct-progress{display:block}.strct-progress__track{height:6px;border-radius:var(--radius-sm);background:var(--strct-progress-track, color-mix(in srgb, var(--t1) 12%, transparent));box-shadow:inset 0 0 0 1px var(--b2);overflow:hidden}.strct-progress__fill{height:100%;border-radius:var(--radius-sm);background:var(--acc);transition:width .3s ease}.strct-progress--success .strct-progress__fill{background:var(--success)}.strct-progress--warning .strct-progress__fill{background:var(--warning)}.strct-progress--critical .strct-progress__fill{background:var(--critical)}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], thresholds: [{ type: i0.Input, args: [{ isSignal: true, alias: "thresholds", required: false }] }] } });
 
 /** Indeterminate loading ring. `<strct-spinner size="sm" />`. */
@@ -22044,27 +22044,47 @@ class StrctHeatmap {
         const maxV = this.maxVal();
         const t = this.thresholds();
         if (t) {
-            const { color, from, to } = this.bandFor(value, t, maxV);
+            const { color, from, to, floor, ceilingPct } = this.bandFor(value, t, maxV);
             const span = to - from;
             const pos = span > 0 ? Math.min(Math.max((value - from) / span, 0), 1) : 1;
-            const pct = 45 + Math.round(pos * 55);
+            const pct = floor + Math.round(pos * (ceilingPct - floor));
             return `color-mix(in srgb, ${color} ${pct}%, var(--bg-1))`;
         }
         const ratio = maxV > 0 ? Math.min(value / maxV, 1) : 0;
         const pct = 8 + Math.round(ratio * 92);
         return `color-mix(in srgb, ${this.color()} ${pct}%, var(--bg-1))`;
     }
-    /** The band a value falls in: its hue and the range intensity scales over. */
+    /**
+     * The band a value falls in: its hue, the value range intensity scales over,
+     * and the intensity range itself.
+     *
+     * FR-44-02: the bands' intensity ranges ASCEND and do not overlap, so
+     * intensity never falls as the value rises. Restarting every band at one
+     * floor (4.3.0) made a cell just past a threshold paler than the cell just
+     * below it — an 86% warning cell read quieter than an 84% accent one, which
+     * is backwards for the hours that matter most. The accent band still starts
+     * near-empty; warning and critical start where accent ends, so neither can
+     * be mistaken for no-data either.
+     */
     bandFor(value, t, maxV) {
         const ceiling = Math.max(maxV, value);
         if (t.critical != null && value >= t.critical) {
-            return { color: COLOR.critical, from: t.critical, to: ceiling };
+            return { color: COLOR.critical, from: t.critical, to: ceiling, floor: 92, ceilingPct: 100 };
         }
         if (t.warning != null && value >= t.warning) {
-            return { color: COLOR.warning, from: t.warning, to: t.critical ?? ceiling };
+            const to = t.critical ?? ceiling;
+            // With a critical bound above it the warning band stops short of it;
+            // without one it owns the top of the ramp.
+            return {
+                color: COLOR.warning,
+                from: t.warning,
+                to,
+                floor: 80,
+                ceilingPct: t.critical != null ? 92 : 100,
+            };
         }
         const upper = t.warning ?? t.critical ?? ceiling;
-        return { color: this.color(), from: 0, to: upper };
+        return { color: this.color(), from: 0, to: upper, floor: 8, ceilingPct: 80 };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctHeatmap, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctHeatmap, isStandalone: true, selector: "strct-heatmap", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, colLabelEvery: { classPropertyName: "colLabelEvery", publicName: "colLabelEvery", isSignal: true, isRequired: false, transformFunction: null }, colLabel: { classPropertyName: "colLabel", publicName: "colLabel", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, thresholds: { classPropertyName: "thresholds", publicName: "thresholds", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, summaryFormat: { classPropertyName: "summaryFormat", publicName: "summaryFormat", isSignal: true, isRequired: false, transformFunction: null }, cellHeight: { classPropertyName: "cellHeight", publicName: "cellHeight", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, rowLabelWidth: { classPropertyName: "rowLabelWidth", publicName: "rowLabelWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "strct-heatmap" }, ngImport: i0, template: `