@tolle_/tolle-ui 18.3.0 → 18.3.2

package/fesm2022/tolle-ui.mjs

@@ -10059,6 +10059,140 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Radial counterpart to `tolle-progress`: a ring that fills clockwise from
+ * 12 o'clock. Project content to label the centre — a percentage, an icon,
+ * whatever the caller wants; the ring renders nothing there on its own.
+ * @new
+ */
+class ProgressCircleComponent {
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges() {
+        this.cdr.markForCheck();
+    }
+    /** Percent complete, 0-100. @default 0 */
+    value = 0;
+    /** Diameter of the ring in px. @default 120 */
+    size = 120;
+    /** Thickness of the ring in px. @default 8 */
+    strokeWidth = 8;
+    /** Extra Tailwind classes merged onto the ring via `cn()` (last-wins). */
+    class = '';
+    cdr = inject(ChangeDetectorRef);
+    get clampedValue() {
+        return Math.min(100, Math.max(0, this.value ?? 0));
+    }
+    get viewBox() {
+        return '0 0 ' + this.size + ' ' + this.size;
+    }
+    get center() {
+        return this.size / 2;
+    }
+    /** Leaves half the stroke width as margin so the ring never clips the frame. */
+    get radius() {
+        return Math.max(0, (this.size - this.strokeWidth) / 2);
+    }
+    get circumference() {
+        return 2 * Math.PI * this.radius;
+    }
+    get dashOffset() {
+        return this.circumference * (1 - this.clampedValue / 100);
+    }
+    get computedClass() {
+        return cn('relative inline-flex shrink-0 items-center justify-center', this.class);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProgressCircleComponent, isStandalone: true, selector: "tolle-progress-circle", inputs: { value: "value", size: "size", strokeWidth: "strokeWidth", class: "class" }, usesOnChanges: true, ngImport: i0, template: `
+    <div
+      [class]="computedClass"
+      [style.width.px]="size"
+      [style.height.px]="size"
+      role="progressbar"
+      [attr.aria-valuemin]="0"
+      [attr.aria-valuemax]="100"
+      [attr.aria-valuenow]="clampedValue"
+    >
+      <svg [attr.width]="size" [attr.height]="size" [attr.viewBox]="viewBox" class="block">
+        <svg:circle
+          [attr.cx]="center"
+          [attr.cy]="center"
+          [attr.r]="radius"
+          fill="none"
+          [attr.stroke-width]="strokeWidth"
+          class="stroke-primary/20"
+        ></svg:circle>
+        <svg:circle
+          [attr.cx]="center"
+          [attr.cy]="center"
+          [attr.r]="radius"
+          fill="none"
+          [attr.stroke-width]="strokeWidth"
+          stroke-linecap="round"
+          [attr.stroke-dasharray]="circumference"
+          [attr.stroke-dashoffset]="dashOffset"
+          [attr.transform]="'rotate(-90 ' + center + ' ' + center + ')'"
+          class="stroke-primary transition-[stroke-dashoffset] duration-300 ease-in-out"
+        ></svg:circle>
+      </svg>
+      <div class="absolute inset-0 flex items-center justify-center text-sm font-medium tabular-nums text-foreground">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressCircleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tolle-progress-circle', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      [class]="computedClass"
+      [style.width.px]="size"
+      [style.height.px]="size"
+      role="progressbar"
+      [attr.aria-valuemin]="0"
+      [attr.aria-valuemax]="100"
+      [attr.aria-valuenow]="clampedValue"
+    >
+      <svg [attr.width]="size" [attr.height]="size" [attr.viewBox]="viewBox" class="block">
+        <svg:circle
+          [attr.cx]="center"
+          [attr.cy]="center"
+          [attr.r]="radius"
+          fill="none"
+          [attr.stroke-width]="strokeWidth"
+          class="stroke-primary/20"
+        ></svg:circle>
+        <svg:circle
+          [attr.cx]="center"
+          [attr.cy]="center"
+          [attr.r]="radius"
+          fill="none"
+          [attr.stroke-width]="strokeWidth"
+          stroke-linecap="round"
+          [attr.stroke-dasharray]="circumference"
+          [attr.stroke-dashoffset]="dashOffset"
+          [attr.transform]="'rotate(-90 ' + center + ' ' + center + ')'"
+          class="stroke-primary transition-[stroke-dashoffset] duration-300 ease-in-out"
+        ></svg:circle>
+      </svg>
+      <div class="absolute inset-0 flex items-center justify-center text-sm font-medium tabular-nums text-foreground">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `, styles: [":host{display:inline-flex}\n"] }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], strokeWidth: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }] } });
+
 class SliderComponent {
     min = 0;
     max = 100;
@@ -11538,7 +11672,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class AlertDialogRef {
     _afterClosed = new Subject();
     afterClosed$ = this._afterClosed.asObservable();
+    /** Guards against the dialog's several close paths racing to emit twice. */
+    closed = false;
     close(result = false) {
+        if (this.closed)
+            return;
+        this.closed = true;
         this._afterClosed.next(result);
         this._afterClosed.complete();
     }
@@ -11552,14 +11691,18 @@ class AlertDialogDynamicComponent {
      * content panel plays its exit animation before the overlay is torn down.
      */
     closing = false;
+    /**
+     * Result recorded by the action/cancel buttons' `confirmed`/`cancelled`
+     * outputs, which fire *before* the button drives the dialog closed. The
+     * single close path (`onOpenChange`) then reads it, so a confirm reports
+     * `true` instead of racing with the button's own `false` close signal.
+     */
+    result = false;
     onOpenChange(open) {
         if (!open) {
-            this.close(false);
+            this.dialogRef.close(this.result);
         }
     }
-    close(result) {
-        this.dialogRef.close(result);
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlertDialogDynamicComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AlertDialogDynamicComponent, isStandalone: true, selector: "tolle-alert-dialog-dynamic", ngImport: i0, template: `
     <tolle-alert-dialog [open]="!closing" (openChange)="onOpenChange($event)">
@@ -11571,10 +11714,10 @@ class AlertDialogDynamicComponent {
             </tolle-alert-dialog-description>
           </tolle-alert-dialog-header>
           <tolle-alert-dialog-footer>
-            <tolle-alert-dialog-cancel (click)="close(false)">
+            <tolle-alert-dialog-cancel (cancelled)="result = false">
               <tolle-button variant="outline">{{ config.cancelText || 'Cancel' }}</tolle-button>
             </tolle-alert-dialog-cancel>
-            <tolle-alert-dialog-action (click)="close(true)">
+            <tolle-alert-dialog-action (confirmed)="result = true">
               <tolle-button [variant]="config.variant === 'destructive' ? 'destructive' : 'default'">
                 {{ config.actionText || 'Continue' }}
               </tolle-button>
@@ -11607,10 +11750,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             </tolle-alert-dialog-description>
           </tolle-alert-dialog-header>
           <tolle-alert-dialog-footer>
-            <tolle-alert-dialog-cancel (click)="close(false)">
+            <tolle-alert-dialog-cancel (cancelled)="result = false">
               <tolle-button variant="outline">{{ config.cancelText || 'Cancel' }}</tolle-button>
             </tolle-alert-dialog-cancel>
-            <tolle-alert-dialog-action (click)="close(true)">
+            <tolle-alert-dialog-action (confirmed)="result = true">
               <tolle-button [variant]="config.variant === 'destructive' ? 'destructive' : 'default'">
                 {{ config.actionText || 'Continue' }}
               </tolle-button>
@@ -28285,6 +28428,12 @@ class ChartService {
     margin = { top: 8, right: 8, bottom: 24, left: 40 };
     /** Fraction of a band's step spent on padding, split either side. */
     bandPadding = 0.2;
+    /**
+     * Which physical axis is the category axis. Bars flip this via `configure()`;
+     * every other geometry getter branches on it internally, defaulting to the
+     * exact vertical formula when unset, so existing vertical charts are unaffected.
+     */
+    orientation = 'vertical';
     scaleMode = 'point';
     zeroRequired = false;
     domainMin = 0;
@@ -28417,21 +28566,36 @@ class ChartService {
         return total;
     }
     /**
-     * Maps a data value to an svg y. SVG y grows downward, so the domain maximum
-     * lands on `plotTop` and the minimum on `plotBottom`.
+     * Maps a data value to a position along the *value* axis — svg y when
+     * vertical (svg y grows downward, so the domain maximum lands on `plotTop`),
+     * svg x when horizontal (the domain maximum lands on `plotRight`).
      */
     yFor(value) {
         const span = this.domainMax - this.domainMin;
+        if (this.orientation === 'horizontal') {
+            if (span <= 0)
+                return this.plotLeft;
+            const ratio = (value - this.domainMin) / span;
+            return this.plotLeft + ratio * this.plotWidth;
+        }
         if (span <= 0)
             return this.plotBottom;
         const ratio = (value - this.domainMin) / span;
         return this.plotBottom - ratio * this.plotHeight;
     }
-    /** The svg y of the zero line, clamped into the plot. */
+    /** The value-axis position of the zero line, clamped into the plot. */
     get baselineY() {
         const zero = Math.min(Math.max(0, this.domainMin), this.domainMax);
         return this.yFor(zero);
     }
+    /** Length of the plot along the category axis: `plotHeight` when horizontal, else `plotWidth`. */
+    get categoryAxisLength() {
+        return this.orientation === 'horizontal' ? this.plotHeight : this.plotWidth;
+    }
+    /** Origin of the plot along the category axis: `plotTop` when horizontal, else `plotLeft`. */
+    get categoryAxisOrigin() {
+        return this.orientation === 'horizontal' ? this.plotTop : this.plotLeft;
+    }
     /** Width of one band, excluding its padding. Meaningful in band mode. */
     get bandWidth() {
         if (this.count === 0)
@@ -28442,13 +28606,16 @@ class ChartService {
     get bandStep() {
         if (this.count === 0)
             return 0;
-        return this.plotWidth / this.count;
+        return this.categoryAxisLength / this.count;
     }
-    /** Geometry of the band at `index`. */
+    /**
+     * Geometry of the band at `index`, along the category axis — x when
+     * vertical (today's meaning), y when horizontal.
+     */
     bandFor(index) {
         const step = this.bandStep;
         const width = this.bandWidth;
-        const start = this.plotLeft + index * step + (step - width) / 2;
+        const start = this.categoryAxisOrigin + index * step + (step - width) / 2;
         return { start, centre: start + width / 2, width };
     }
     /** x of the data point at `index` on the point scale. */
@@ -28471,7 +28638,7 @@ class ChartService {
     hitBandFor(index) {
         if (this.scaleMode === 'band') {
             const step = this.bandStep;
-            const start = this.plotLeft + index * step;
+            const start = this.categoryAxisOrigin + index * step;
             return { start, centre: start + step / 2, width: step };
         }
         const x = this.pointX(index);
@@ -28545,6 +28712,7 @@ class ChartService {
             this.height,
             this.bandPadding,
             this.scaleMode,
+            this.orientation,
             this.zeroRequired,
             this.margin.top, this.margin.right, this.margin.bottom, this.margin.left,
             this.domainMin, this.domainMax, this.tickStep,
@@ -29191,6 +29359,11 @@ class ChartComponent {
     description = '';
     /** Stacks marks on a shared baseline instead of grouping them. @default false */
     stacked = false;
+    /**
+     * Which physical axis carries the category vs the value. Only bars support
+     * 'horizontal' — line/area marks stay vertical regardless. @default 'vertical'
+     */
+    orientation = 'vertical';
     /** Renders the crosshair, hit layer and shared tooltip. @default true */
     hover = true;
     /** Shows the data table instead of leaving it visually hidden. @default false */
@@ -29263,6 +29436,7 @@ class ChartComponent {
             series: this.series ?? [],
             xKey: this.xKey,
             stacked: this.stacked,
+            orientation: this.orientation,
             height: this.height,
             margin: this.margin,
             width: this.chart.width || ChartComponent.fallbackWidth,
@@ -29274,11 +29448,19 @@ class ChartComponent {
     /**
      * One catchment rect per x position, deliberately wider than the marks it
      * covers — readers aim at a category, never at a 2px line or an 8px dot.
+     * Spans the full plot in the cross direction: full height in a vertical
+     * chart, full width in a horizontal one.
      */
-    get hitBands() {
+    get hitRects() {
         if (!this.hover)
             return [];
-        return this.data.map((_, i) => this.chart.hitBandFor(i));
+        const horizontal = this.chart.orientation === 'horizontal';
+        return this.data.map((_, i) => {
+            const band = this.chart.hitBandFor(i);
+            return horizontal
+                ? { x: this.chart.plotLeft, y: band.start, width: this.chart.plotWidth, height: band.width }
+                : { x: band.start, y: this.chart.plotTop, width: band.width, height: this.chart.plotHeight };
+        });
     }
     onEnterBand(index) {
         this.chart.setActiveIndex(index);
@@ -29290,7 +29472,7 @@ class ChartComponent {
         return cn(chartVariants({ variant: this.variant, density: this.density }), this.class);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ChartComponent, isStandalone: true, selector: "tolle-chart", inputs: { data: "data", series: "series", xKey: "xKey", height: "height", margin: "margin", ariaLabel: "ariaLabel", description: "description", stacked: "stacked", hover: "hover", showTable: "showTable", xHeader: "xHeader", variant: "variant", density: "density", class: "class" }, outputs: { activeIndexChange: "activeIndexChange" }, providers: [ChartService], viewQueries: [{ propertyName: "plotRef", first: true, predicate: ["plot"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ChartComponent, isStandalone: true, selector: "tolle-chart", inputs: { data: "data", series: "series", xKey: "xKey", height: "height", margin: "margin", ariaLabel: "ariaLabel", description: "description", stacked: "stacked", orientation: "orientation", hover: "hover", showTable: "showTable", xHeader: "xHeader", variant: "variant", density: "density", class: "class" }, outputs: { activeIndexChange: "activeIndexChange" }, providers: [ChartService], viewQueries: [{ propertyName: "plotRef", first: true, predicate: ["plot"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div [class]="computedClass">
       <div class="relative w-full" #plot>
         <svg
@@ -29321,11 +29503,11 @@ class ChartComponent {
           ></svg:line>
 
           <svg:rect
-            *ngFor="let band of hitBands; let i = index; trackBy: trackByIndex"
-            [attr.x]="band.start"
-            [attr.y]="chart.plotTop"
-            [attr.width]="band.width"
-            [attr.height]="chart.plotHeight"
+            *ngFor="let rect of hitRects; let i = index; trackBy: trackByIndex"
+            [attr.x]="rect.x"
+            [attr.y]="rect.y"
+            [attr.width]="rect.width"
+            [attr.height]="rect.height"
             fill="transparent"
             (pointerenter)="onEnterBand(i)"
           ></svg:rect>
@@ -29373,11 +29555,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           ></svg:line>
 
           <svg:rect
-            *ngFor="let band of hitBands; let i = index; trackBy: trackByIndex"
-            [attr.x]="band.start"
-            [attr.y]="chart.plotTop"
-            [attr.width]="band.width"
-            [attr.height]="chart.plotHeight"
+            *ngFor="let rect of hitRects; let i = index; trackBy: trackByIndex"
+            [attr.x]="rect.x"
+            [attr.y]="rect.y"
+            [attr.width]="rect.width"
+            [attr.height]="rect.height"
             fill="transparent"
             (pointerenter)="onEnterBand(i)"
           ></svg:rect>
@@ -29407,6 +29589,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], stacked: [{
                 type: Input
+            }], orientation: [{
+                type: Input
             }], hover: [{
                 type: Input
             }], showTable: [{
@@ -29425,16 +29609,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: ViewChild,
                 args: ['plot']
             }] } });
-/** Horizontal rules at the y ticks, with optional vertical rules at the x positions. */
+/**
+ * Rules at the value ticks, with optional rules at the category positions.
+ * Orientation-aware: in a horizontal chart the value rules run vertically and
+ * the (optional) category rules run horizontally — the transpose of a
+ * vertical chart's grid.
+ */
 class ChartGridComponent extends ChartChild {
-    /** Also draws a rule at every x position. @default false */
+    /** Also draws a rule at every category position. @default false */
     vertical = false;
     /** Extra Tailwind classes merged onto each rule via `cn()` (last-wins). */
     class = '';
-    get verticalXs() {
+    /** Rules at each value tick, spanning the plot in the cross direction. */
+    get valueLines() {
+        const horizontal = this.chart.orientation === 'horizontal';
+        return this.chart.ticks.map((tick) => horizontal
+            ? { x1: tick.y, x2: tick.y, y1: this.chart.plotTop, y2: this.chart.plotBottom }
+            : { x1: this.chart.plotLeft, x2: this.chart.plotRight, y1: tick.y, y2: tick.y });
+    }
+    /** Rules at each category position, only when `vertical` is set. */
+    get categoryLines() {
         if (!this.vertical)
             return [];
-        return this.chart.xLabels.map((_, i) => this.chart.xFor(i));
+        const horizontal = this.chart.orientation === 'horizontal';
+        return this.chart.xLabels.map((_, i) => {
+            const pos = this.chart.xFor(i);
+            return horizontal
+                ? { x1: this.chart.plotLeft, x2: this.chart.plotRight, y1: pos, y2: pos }
+                : { x1: pos, x2: pos, y1: this.chart.plotTop, y2: this.chart.plotBottom };
+        });
     }
     get lineClass() {
         // Recessive by design: a grid is a reading aid, never a mark.
@@ -29443,20 +29646,20 @@ class ChartGridComponent extends ChartChild {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChartGridComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ChartGridComponent, isStandalone: true, selector: "svg:g[tolle-chart-grid]", inputs: { vertical: "vertical", class: "class" }, usesInheritance: true, ngImport: i0, template: `
     <svg:line
-      *ngFor="let tick of chart.ticks; trackBy: trackByIndex"
-      [attr.x1]="chart.plotLeft"
-      [attr.x2]="chart.plotRight"
-      [attr.y1]="tick.y"
-      [attr.y2]="tick.y"
+      *ngFor="let line of valueLines; trackBy: trackByIndex"
+      [attr.x1]="line.x1"
+      [attr.x2]="line.x2"
+      [attr.y1]="line.y1"
+      [attr.y2]="line.y2"
       [class]="lineClass"
       stroke-width="1"
     ></svg:line>
     <svg:line
-      *ngFor="let x of verticalXs; trackBy: trackByIndex"
-      [attr.x1]="x"
-      [attr.x2]="x"
-      [attr.y1]="chart.plotTop"
-      [attr.y2]="chart.plotBottom"
+      *ngFor="let line of categoryLines; trackBy: trackByIndex"
+      [attr.x1]="line.x1"
+      [attr.x2]="line.x2"
+      [attr.y1]="line.y1"
+      [attr.y2]="line.y2"
       [class]="lineClass"
       stroke-width="1"
     ></svg:line>
@@ -29471,20 +29674,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     <svg:line
-      *ngFor="let tick of chart.ticks; trackBy: trackByIndex"
-      [attr.x1]="chart.plotLeft"
-      [attr.x2]="chart.plotRight"
-      [attr.y1]="tick.y"
-      [attr.y2]="tick.y"
+      *ngFor="let line of valueLines; trackBy: trackByIndex"
+      [attr.x1]="line.x1"
+      [attr.x2]="line.x2"
+      [attr.y1]="line.y1"
+      [attr.y2]="line.y2"
       [class]="lineClass"
       stroke-width="1"
     ></svg:line>
     <svg:line
-      *ngFor="let x of verticalXs; trackBy: trackByIndex"
-      [attr.x1]="x"
-      [attr.x2]="x"
-      [attr.y1]="chart.plotTop"
-      [attr.y2]="chart.plotBottom"
+      *ngFor="let line of categoryLines; trackBy: trackByIndex"
+      [attr.x1]="line.x1"
+      [attr.x2]="line.x2"
+      [attr.y1]="line.y1"
+      [attr.y2]="line.y2"
       [class]="lineClass"
       stroke-width="1"
     ></svg:line>
@@ -29497,7 +29700,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }] } });
 /** X-axis tick labels, thinned so they never collide. */
 class ChartXAxisComponent extends ChartChild {
-    /** Approximate px per character, used to decide when labels would collide. @default 7 */
+    /**
+     * Approximate px per character, used to decide when category labels would
+     * collide. Only consulted in the vertical orientation. @default 7
+     */
     charWidth = 7;
     /** Extra Tailwind classes merged onto each label via `cn()` (last-wins). */
     class = '';
@@ -29516,7 +29722,15 @@ class ChartXAxisComponent extends ChartChild {
             return 1;
         return Math.max(1, Math.ceil(needed / perLabel));
     }
+    /**
+     * Vertical orientation: category labels, thinned so they never collide
+     * (today's behaviour). Horizontal orientation: this is the bottom axis'
+     * physical position, which a horizontal chart uses for its value ticks.
+     */
     get visibleTicks() {
+        if (this.chart.orientation === 'horizontal') {
+            return this.chart.ticks.map((tick) => ({ x: tick.y, label: tick.label }));
+        }
         const stride = this.stride;
         return this.chart.xLabels
             .map((label, i) => ({ label, x: this.chart.xFor(i), i }))
@@ -29573,13 +29787,24 @@ class ChartYAxisComponent extends ChartChild {
     get labelX() {
         return this.chart.plotLeft - this.offset;
     }
+    /**
+     * Vertical orientation: value ticks (today's behaviour). Horizontal
+     * orientation: this is the left axis' physical position, which a
+     * horizontal chart uses for its category labels.
+     */
+    get visibleTicks() {
+        if (this.chart.orientation === 'horizontal') {
+            return this.chart.xLabels.map((label, i) => ({ label, y: this.chart.xFor(i) }));
+        }
+        return this.chart.ticks;
+    }
     get labelClass() {
         return cn('fill-muted-foreground text-xs tabular-nums', this.class);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChartYAxisComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ChartYAxisComponent, isStandalone: true, selector: "svg:g[tolle-chart-y-axis]", inputs: { offset: "offset", class: "class" }, usesInheritance: true, ngImport: i0, template: `
     <svg:text
-      *ngFor="let tick of chart.ticks; trackBy: trackByIndex"
+      *ngFor="let tick of visibleTicks; trackBy: trackByIndex"
       [attr.x]="labelX"
       [attr.y]="tick.y"
       text-anchor="end"
@@ -29597,7 +29822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     <svg:text
-      *ngFor="let tick of chart.ticks; trackBy: trackByIndex"
+      *ngFor="let tick of visibleTicks; trackBy: trackByIndex"
       [attr.x]="labelX"
       [attr.y]="tick.y"
       text-anchor="end"
@@ -29791,6 +30016,24 @@ function barPath(x, width, yBase, yValue, radius) {
         ' Q ' + right + ' ' + yValue + ' ' + right + ' ' + corner +
         ' L ' + right + ' ' + yBase + ' Z');
 }
+/**
+ * `barPath()` transposed for horizontal bars: fixed vertical extent
+ * `[y, y+height]`, variable horizontal extent `[xBase, xValue]`, rounded at
+ * the `xValue` (data) end.
+ */
+function barPathHorizontal(y, height, xBase, xValue, radius) {
+    const width = Math.abs(xBase - xValue);
+    const r = Math.max(0, Math.min(radius, height / 2, width));
+    const bottom = y + height;
+    const sign = xValue >= xBase ? 1 : -1;
+    const corner = xValue - sign * r;
+    return ('M ' + xBase + ' ' + y +
+        ' L ' + corner + ' ' + y +
+        ' Q ' + xValue + ' ' + y + ' ' + xValue + ' ' + (y + r) +
+        ' L ' + xValue + ' ' + (bottom - r) +
+        ' Q ' + xValue + ' ' + bottom + ' ' + corner + ' ' + bottom +
+        ' L ' + xBase + ' ' + bottom + ' Z');
+}
 /**
  * A bar mark for one series. Grouped beside its siblings by default, stacked
  * when the container's `stacked` is set. The data end carries a 4px radius, the
@@ -29823,12 +30066,19 @@ class ChartBarComponent extends ChartChild {
     get color() {
         return this.chart.colorFor(this.seriesKey);
     }
-    /** Geometry for every bar this series contributes. */
+    /**
+     * Geometry for every bar this series contributes. `x`/`width` are the bar's
+     * footprint on the category axis and `yBase`/`yValue` its extent on the
+     * value axis — physical x/y when vertical (the original meaning), but
+     * transposed (x holds a vertical footprint, yBase/yValue hold horizontal
+     * positions) when the chart is horizontal, same as `ChartService.yFor()`.
+     */
     get bars() {
         const out = [];
         const seriesCount = Math.max(1, this.chart.series.length);
         const found = this.chart.series.findIndex((item) => item.key === this.seriesKey);
         const slotIndex = found < 0 ? 0 : found;
+        const horizontal = this.chart.orientation === 'horizontal';
         for (let i = 0; i < this.chart.count; i++) {
             const value = this.chart.valueAt(this.seriesKey, i);
             if (value == null)
@@ -29849,12 +30099,16 @@ class ChartBarComponent extends ChartChild {
             const yBase = this.chart.yFor(base);
             let yValue = this.chart.yFor(base + value);
             // The gap between stacked segments comes off the data end, so what
-            // separates them is surface showing through rather than a stroke.
+            // separates them is surface showing through rather than a stroke. Signed
+            // from the resolved positions (not the raw value) so it holds under
+            // both orientations, whose value axis runs in opposite directions.
             if (this.chart.stacked && Math.abs(yBase - yValue) > this.gap) {
-                yValue += value >= 0 ? this.gap : -this.gap;
+                yValue += Math.sign(yBase - yValue) * this.gap;
             }
             out.push({
-                d: barPath(x, width, yBase, yValue, this.radius),
+                d: horizontal
+                    ? barPathHorizontal(x, width, yBase, yValue, this.radius)
+                    : barPath(x, width, yBase, yValue, this.radius),
                 active: this.activeIndex === i,
                 x,
                 width,
@@ -30280,6 +30534,414 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
+/**
+ * A minimal inline chart: one series, no grid, no axes, no legend — sized to
+ * sit next to a number in a table cell or a stat card. A thin composition
+ * over `tolle-chart`; it draws nothing of its own and inherits `--chart-1`
+ * the same way any other single-series chart in this library does.
+ * @new
+ */
+class ChartSparkComponent {
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges() {
+        this.cdr.markForCheck();
+    }
+    /** Rows to plot, in x order. @default [] */
+    data = [];
+    /** Row key holding each row's numeric value. @default 'value' */
+    valueKey = 'value';
+    /** Row key holding each row's x position. Only matters once `hover` is on. @default '' */
+    xKey = '';
+    /** Which mark to draw. @default 'line' */
+    type = 'line';
+    /** Interpolation for line/area. @default 'linear' */
+    curve = 'linear';
+    /** Largest bar thickness in px, used when `type` is 'bar'. @default 6 */
+    maxBarWidth = 6;
+    /** Height in px. @default 32 */
+    height = 32;
+    /** Renders the crosshair, hit layer and tooltip. @default false */
+    hover = false;
+    /** Shows the data table instead of leaving it visually hidden. @default false */
+    showTable = false;
+    /** Accessible name, used as the svg <title>. @default '' */
+    ariaLabel = '';
+    /** Longer summary used as the svg <desc>. Falls back to `ariaLabel`. @default '' */
+    description = '';
+    /** Space reserved around the plot — a sparkline has no axis labels to fit. @default { top: 2, right: 2, bottom: 2, left: 2 } */
+    margin = { top: 2, right: 2, bottom: 2, left: 2 };
+    /** Extra Tailwind classes merged onto the chart via `cn()` (last-wins). */
+    class = '';
+    cdr = inject(ChangeDetectorRef);
+    /** Always exactly one series, reading `valueKey` off each row. */
+    get series() {
+        return [{ key: this.valueKey, label: this.ariaLabel || this.valueKey }];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChartSparkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ChartSparkComponent, isStandalone: true, selector: "tolle-chart-spark", inputs: { data: "data", valueKey: "valueKey", xKey: "xKey", type: "type", curve: "curve", maxBarWidth: "maxBarWidth", height: "height", hover: "hover", showTable: "showTable", ariaLabel: "ariaLabel", description: "description", margin: "margin", class: "class" }, usesOnChanges: true, ngImport: i0, template: `
+    <tolle-chart
+      [class]="class"
+      [data]="data"
+      [series]="series"
+      [xKey]="xKey"
+      [height]="height"
+      [margin]="margin"
+      [hover]="hover"
+      [showTable]="showTable"
+      [ariaLabel]="ariaLabel"
+      [description]="description"
+    >
+      <svg:g *ngIf="type === 'line'" tolle-chart-line [seriesKey]="valueKey" [curve]="curve"></svg:g>
+      <svg:g *ngIf="type === 'area'" tolle-chart-area [seriesKey]="valueKey" [curve]="curve"></svg:g>
+      <svg:g *ngIf="type === 'bar'" tolle-chart-bar [seriesKey]="valueKey" [maxWidth]="maxBarWidth"></svg:g>
+    </tolle-chart>
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChartComponent, selector: "tolle-chart", inputs: ["data", "series", "xKey", "height", "margin", "ariaLabel", "description", "stacked", "orientation", "hover", "showTable", "xHeader", "variant", "density", "class"], outputs: ["activeIndexChange"] }, { kind: "component", type: ChartLineComponent, selector: "svg:g[tolle-chart-line]", inputs: ["seriesKey", "curve", "showDots", "dotRadius", "class"] }, { kind: "component", type: ChartAreaComponent, selector: "svg:g[tolle-chart-area]", inputs: ["seriesKey", "curve", "fillOpacity", "class"] }, { kind: "component", type: ChartBarComponent, selector: "svg:g[tolle-chart-bar]", inputs: ["seriesKey", "radius", "maxWidth", "gap", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChartSparkComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tolle-chart-spark', standalone: true, imports: [CommonModule, ChartComponent, ChartLineComponent, ChartAreaComponent, ChartBarComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <tolle-chart
+      [class]="class"
+      [data]="data"
+      [series]="series"
+      [xKey]="xKey"
+      [height]="height"
+      [margin]="margin"
+      [hover]="hover"
+      [showTable]="showTable"
+      [ariaLabel]="ariaLabel"
+      [description]="description"
+    >
+      <svg:g *ngIf="type === 'line'" tolle-chart-line [seriesKey]="valueKey" [curve]="curve"></svg:g>
+      <svg:g *ngIf="type === 'area'" tolle-chart-area [seriesKey]="valueKey" [curve]="curve"></svg:g>
+      <svg:g *ngIf="type === 'bar'" tolle-chart-bar [seriesKey]="valueKey" [maxWidth]="maxBarWidth"></svg:g>
+    </tolle-chart>
+  `, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], valueKey: [{
+                type: Input
+            }], xKey: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], curve: [{
+                type: Input
+            }], maxBarWidth: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], hover: [{
+                type: Input
+            }], showTable: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], margin: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }] } });
+
+/**
+ * A single bar split into proportional, labelled ranges — for showing where
+ * one value falls against a scale made of categories (a credit score inside
+ * "Poor / Fair / Good / Excellent", latency inside "Fast / OK / Slow").
+ *
+ * Segments take the chart palette by position, since a category bar has no
+ * stable per-render identity to key colour off the way a chart series does —
+ * pass `colors` to override.
+ * @new
+ */
+class CategoryBarComponent {
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges() {
+        this.cdr.markForCheck();
+    }
+    /** Identity for `*ngFor`, so a redraw patches nodes instead of replacing them. */
+    trackByIndex = (index) => index;
+    /** Width of each segment. Values that are not finite and greater than zero are dropped. @default [] */
+    values = [];
+    /** Name for each segment, used in the accessible summary and as a title tooltip. @default [] */
+    labels = [];
+    /** Paint for each segment, by index. Falls back to the chart palette --chart-1 through --chart-5. @default [] */
+    colors = [];
+    /** Position of the pointer, 0-100 on the same scale the segments sum to. Omit to draw no pointer. @default null */
+    markerValue = null;
+    /** Accessible name, prefixed onto the sr-only summary of segments and marker. @default '' */
+    ariaLabel = '';
+    /** Extra Tailwind classes merged onto the bar via `cn()` (last-wins). */
+    class = '';
+    cdr = inject(ChangeDetectorRef);
+    get total() {
+        return this.values.reduce((sum, v) => (Number.isFinite(v) && v > 0 ? sum + v : sum), 0);
+    }
+    get segments() {
+        const total = this.total;
+        if (total <= 0)
+            return [];
+        return this.values
+            .map((value, i) => ({ value, i }))
+            .filter(({ value }) => Number.isFinite(value) && value > 0)
+            .map(({ value, i }) => ({
+            label: this.labels[i] ?? '',
+            value,
+            percent: (value / total) * 100,
+            color: this.colors[i] || 'rgb(var(--chart-' + ((i % 5) + 1) + '))',
+        }));
+    }
+    get clampedMarker() {
+        if (this.markerValue == null || !Number.isFinite(this.markerValue))
+            return null;
+        return Math.min(100, Math.max(0, this.markerValue));
+    }
+    get summary() {
+        const parts = this.segments.map((s) => (s.label ? s.label + ': ' : '') + s.percent.toFixed(0) + '%');
+        const marker = this.clampedMarker !== null ? ', current position ' + this.clampedMarker.toFixed(0) + '%' : '';
+        const prefix = this.ariaLabel ? this.ariaLabel + '. ' : '';
+        return prefix + parts.join(', ') + marker;
+    }
+    get computedClass() {
+        return cn('w-full', this.class);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CategoryBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CategoryBarComponent, isStandalone: true, selector: "tolle-category-bar", inputs: { values: "values", labels: "labels", colors: "colors", markerValue: "markerValue", ariaLabel: "ariaLabel", class: "class" }, usesOnChanges: true, ngImport: i0, template: `
+    <div [class]="computedClass">
+      <div class="relative flex w-full gap-0.5">
+        <div
+          *ngFor="let segment of segments; let i = index; trackBy: trackByIndex"
+          class="h-2 first:rounded-l-full last:rounded-r-full"
+          [style.width.%]="segment.percent"
+          [style.background]="segment.color"
+          [attr.title]="segment.label || null"
+        ></div>
+
+        <span
+          *ngIf="clampedMarker !== null"
+          class="absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-background bg-foreground shadow"
+          [style.left.%]="clampedMarker"
+        ></span>
+      </div>
+
+      <p class="sr-only">{{ summary }}</p>
+    </div>
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CategoryBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tolle-category-bar', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div [class]="computedClass">
+      <div class="relative flex w-full gap-0.5">
+        <div
+          *ngFor="let segment of segments; let i = index; trackBy: trackByIndex"
+          class="h-2 first:rounded-l-full last:rounded-r-full"
+          [style.width.%]="segment.percent"
+          [style.background]="segment.color"
+          [attr.title]="segment.label || null"
+        ></div>
+
+        <span
+          *ngIf="clampedMarker !== null"
+          class="absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-background bg-foreground shadow"
+          [style.left.%]="clampedMarker"
+        ></span>
+      </div>
+
+      <p class="sr-only">{{ summary }}</p>
+    </div>
+  `, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { values: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], colors: [{
+                type: Input
+            }], markerValue: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }] } });
+
+const STATUS_COLOR = {
+    success: 'rgb(var(--success))',
+    warning: 'rgb(var(--warning))',
+    error: 'rgb(var(--destructive))',
+    neutral: 'rgb(var(--muted))',
+};
+/**
+ * A row of equal-width blocks, one per period — an uptime or activity strip.
+ * Each block is a real `<button>` so its tooltip is reachable by keyboard and
+ * has a screen-reader name of its own, not just a hover affordance.
+ * @new
+ */
+class TrackerComponent {
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges() {
+        this.cdr.markForCheck();
+    }
+    /** Identity for `*ngFor`, so a redraw patches nodes instead of replacing them. */
+    trackByIndex = (index) => index;
+    /** One block per period, in chronological order. @default [] */
+    data = [];
+    /** Height of each block in px. @default 32 */
+    blockHeight = 32;
+    /** Accessible name for the whole strip. @default '' */
+    ariaLabel = '';
+    /** Extra Tailwind classes merged onto the strip via `cn()` (last-wins). */
+    class = '';
+    cdr = inject(ChangeDetectorRef);
+    colorFor(block) {
+        return block.color || STATUS_COLOR[block.status ?? 'neutral'];
+    }
+    get computedClass() {
+        return cn('flex w-full items-stretch gap-0.5', this.class);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TrackerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TrackerComponent, isStandalone: true, selector: "tolle-tracker", inputs: { data: "data", blockHeight: "blockHeight", ariaLabel: "ariaLabel", class: "class" }, usesOnChanges: true, ngImport: i0, template: `
+    <div [class]="computedClass" role="group" [attr.aria-label]="ariaLabel || null">
+      <button
+        *ngFor="let block of data; let i = index; trackBy: trackByIndex"
+        type="button"
+        class="flex-1 rounded-[2px] transition-opacity hover:opacity-80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        [style.height.px]="blockHeight"
+        [style.background]="colorFor(block)"
+        [tolleTooltip]="block.tooltip || ''"
+        [attr.aria-label]="block.tooltip || 'Period ' + (i + 1)"
+      ></button>
+    </div>
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: TooltipDirective, selector: "[tolleTooltip]", inputs: ["tolleTooltip", "placement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TrackerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tolle-tracker', standalone: true, imports: [CommonModule, TooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div [class]="computedClass" role="group" [attr.aria-label]="ariaLabel || null">
+      <button
+        *ngFor="let block of data; let i = index; trackBy: trackByIndex"
+        type="button"
+        class="flex-1 rounded-[2px] transition-opacity hover:opacity-80 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        [style.height.px]="blockHeight"
+        [style.background]="colorFor(block)"
+        [tolleTooltip]="block.tooltip || ''"
+        [attr.aria-label]="block.tooltip || 'Period ' + (i + 1)"
+      ></button>
+    </div>
+  `, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], blockHeight: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }] } });
+
+/**
+ * A ranked list of horizontal bars — label left, value right, bar width
+ * scaled to each row's share of the list's largest value. Unlike a chart
+ * series or a category bar's segments, every bar is the same accent: rank is
+ * carried by length, not by a categorical palette.
+ * @new
+ */
+class BarListComponent {
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook the component keeps
+     * rendering the class it was born with.
+     */
+    ngOnChanges() {
+        this.cdr.markForCheck();
+    }
+    /** Identity for `*ngFor`, so a redraw patches nodes instead of replacing them. */
+    trackByIndex = (index) => index;
+    /** Rows to rank, in the order they should be drawn. @default [] */
+    data = [];
+    /** Row key holding each row's label. @default 'label' */
+    labelKey = 'label';
+    /** Row key holding each row's numeric value. @default 'value' */
+    valueKey = 'value';
+    /** Extra Tailwind classes merged onto the list via `cn()` (last-wins). */
+    class = '';
+    cdr = inject(ChangeDetectorRef);
+    get rows() {
+        const rows = this.data ?? [];
+        const values = rows.map((row) => {
+            const num = Number(row?.[this.valueKey]);
+            return Number.isFinite(num) ? num : 0;
+        });
+        const max = values.reduce((m, v) => Math.max(m, v), 0);
+        return rows.map((row, i) => {
+            const raw = row?.[this.labelKey];
+            const value = values[i];
+            return {
+                label: raw == null ? '' : String(raw),
+                value,
+                percent: max > 0 ? Math.max(0, Math.min(100, (value / max) * 100)) : 0,
+                formattedValue: value.toLocaleString('en-US'),
+            };
+        });
+    }
+    get computedClass() {
+        return cn('flex w-full flex-col gap-1', this.class);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BarListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: BarListComponent, isStandalone: true, selector: "tolle-bar-list", inputs: { data: "data", labelKey: "labelKey", valueKey: "valueKey", class: "class" }, usesOnChanges: true, ngImport: i0, template: `
+    <div [class]="computedClass">
+      <div
+        *ngFor="let row of rows; trackBy: trackByIndex"
+        class="relative flex items-center overflow-hidden rounded-sm"
+      >
+        <div class="absolute inset-y-0 left-0 rounded-sm bg-primary/15" [style.width.%]="row.percent"></div>
+        <span class="relative z-10 truncate px-2 py-1.5 text-sm text-foreground">{{ row.label }}</span>
+        <span class="relative z-10 ml-auto shrink-0 px-2 py-1.5 text-sm font-medium tabular-nums text-foreground">
+          {{ row.formattedValue }}
+        </span>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BarListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tolle-bar-list', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div [class]="computedClass">
+      <div
+        *ngFor="let row of rows; trackBy: trackByIndex"
+        class="relative flex items-center overflow-hidden rounded-sm"
+      >
+        <div class="absolute inset-y-0 left-0 rounded-sm bg-primary/15" [style.width.%]="row.percent"></div>
+        <span class="relative z-10 truncate px-2 py-1.5 text-sm text-foreground">{{ row.label }}</span>
+        <span class="relative z-10 ml-auto shrink-0 px-2 py-1.5 text-sm font-medium tabular-nums text-foreground">
+          {{ row.formattedValue }}
+        </span>
+      </div>
+    </div>
+  `, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], labelKey: [{
+                type: Input
+            }], valueKey: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }] } });
+
 /**
  * Publishes the application's current writing direction so components can adapt
  * without reading the DOM.
@@ -31773,5 +32435,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionItemComponent, AlertComponent, AlertDialogActionComponent, AlertDialogCancelComponent, AlertDialogComponent, AlertDialogContentComponent, AlertDialogDescriptionComponent, AlertDialogDynamicComponent, AlertDialogFooterComponent, AlertDialogHeaderComponent, AlertDialogPortalComponent, AlertDialogRef, AlertDialogService, AlertDialogTitleComponent, AlertDialogTriggerComponent, AspectRatioComponent, AttachmentActionsComponent, AttachmentComponent, AttachmentGroupComponent, AvatarComponent, AvatarFallbackComponent, BASE_PALETTES, BadgeComponent, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbLinkComponent, BreadcrumbSeparatorComponent, BubbleActionsComponent, BubbleComponent, BubbleReactionsComponent, ButtonComponent, ButtonGroupComponent, CHART_COLOR_LIMIT, CHART_OVERFLOW_COLOR, CLOSE_FALLBACK_MS, CalendarComponent, CardComponent, CardContentComponent, CardDescriptionComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CarouselComponent, CarouselContainerDirective, CarouselContentDirective, CarouselContext, CarouselItemDirective, CarouselNextDirective, CarouselPreviousDirective, ChainOfThoughtComponent, ChainOfThoughtContentComponent, ChainOfThoughtHeaderComponent, ChainOfThoughtSearchResultComponent, ChainOfThoughtSearchResultsComponent, ChainOfThoughtService, ChainOfThoughtStepComponent, ChartAreaComponent, ChartBarComponent, ChartChild, ChartColorScale, ChartComponent, ChartGridComponent, ChartLegendComponent, ChartLineComponent, ChartPieComponent, ChartService, ChartTableComponent, ChartTooltipComponent, ChartXAxisComponent, ChartYAxisComponent, CheckboxComponent, CheckpointComponent, CollapsibleComponent, CollapsibleContentComponent, CollapsibleTriggerComponent, ComboboxComponent, CommandComponent, CommandDialogComponent, CommandEmptyComponent, CommandGroupComponent, CommandInputComponent, CommandItemComponent, CommandListComponent, CommandSeparatorComponent, CommandService, CommandShortcutComponent, ConfirmationComponent, ContextComponent, ContextContentComponent, ContextMenuComponent, ContextMenuService, ContextMenuTriggerDirective, ContextService, ContextTriggerComponent, ConversationComponent, ConversationContentComponent, ConversationEmptyStateComponent, ConversationScrollButtonComponent, ConversationService, CountryCodesService, CountrySelectorComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, DateTimePickerComponent, DirectionDirective, DirectionService, DropdownItemComponent, DropdownLabelComponent, DropdownMenuComponent, DropdownSeparatorComponent, DropdownTriggerDirective, EmptyStateComponent, FieldComponent, FieldContentComponent, FieldDescriptionComponent, FieldErrorComponent, FieldGroupComponent, FieldLabelComponent, FieldLegendComponent, FieldSeparatorComponent, FieldSetComponent, FieldTitleComponent, HoverCardComponent, HoverCardContentComponent, HoverCardTriggerComponent, InlineCitationCardComponent, InlineCitationComponent, InlineCitationQuoteComponent, InputComponent, InputGroupAddonComponent, InputGroupButtonComponent, InputGroupComponent, InputGroupInputComponent, InputGroupTextComponent, InputGroupTextareaComponent, ItemActionsComponent, ItemComponent, ItemContentComponent, ItemDescriptionComponent, ItemFooterComponent, ItemGroupComponent, ItemHeaderComponent, ItemMediaComponent, ItemTitleComponent, KbdComponent, KbdGroupComponent, LabelComponent, MarkerComponent, MarkerGroupComponent, MaskedInputComponent, MenubarComponent, MenubarContentComponent, MenubarItemComponent, MenubarLabelComponent, MenubarMenuComponent, MenubarSeparatorComponent, MenubarService, MenubarTriggerComponent, MessageAlignService, MessageAvatarComponent, MessageComponent, MessageContentComponent, MessageFooterComponent, MessageGroupComponent, MessageHeaderComponent, MessageScrollerButtonComponent, MessageScrollerComponent, MessageScrollerContentComponent, MessageScrollerItemDirective, MessageScrollerService, MessageScrollerViewportComponent, ModalComponent, ModalRef, ModalService, ModalStackService, ModelSelectorComponent, MultiSelectComponent, NativeSelectComponent, NavigationMenuComponent, NavigationMenuContentComponent, NavigationMenuItemComponent, NavigationMenuLinkComponent, NavigationMenuListComponent, NavigationMenuService, NavigationMenuTriggerComponent, OtpComponent, OtpGroupComponent, OtpSlotComponent, PaginationComponent, PhoneNumberInputComponent, PhoneNumberService, PlanComponent, PlanService, PlanStepComponent, PopoverComponent, PopoverContentComponent, ProgressComponent, PromptInputComponent, PromptInputService, PromptInputSubmitComponent, PromptInputToolbarComponent, PromptInputToolsComponent, QueueComponent, QueueItemComponent, QueueService, RadioGroupComponent, RadioItemComponent, RadioService, RangeCalendarComponent, ReasoningComponent, ReasoningContentComponent, ReasoningService, ReasoningTriggerComponent, ResizableComponent, ResizablePanelComponent, ResizablePanelItemComponent, ScrollAreaComponent, SegmentComponent, SegmentComponent as SegmentedComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SelectService, SeparatorComponent, SheetComponent, SheetContentComponent, SheetDescriptionComponent, SheetFooterComponent, SheetHeaderComponent, SheetRef, SheetService, SheetTitleComponent, SheetTriggerComponent, SheetWrapperComponent, ShimmerComponent, SidebarComponent, SkeletonComponent, SliderComponent, SourceComponent, SourcesComponent, SourcesContentComponent, SourcesService, SourcesTriggerComponent, SpinnerComponent, SuggestionComponent, SuggestionsComponent, SuggestionsService, SwitchComponent, TOLLE_CONFIG, TableBodyDirective, TableCaptionDirective, TableCellDirective, TableComponent, TableFooterDirective, TableHeadDirective, TableHeaderDirective, TableRowDirective, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TagInputComponent, TaskComponent, TaskContentComponent, TaskItemComponent, TaskItemFileComponent, TaskService, TaskTriggerComponent, TextareaComponent, ThemeService, TimeColumnsComponent, TimePickerComponent, ToastContainerComponent, ToastService, ToggleComponent, ToggleGroupComponent, ToggleGroupItemComponent, TolleCellDirective, ToolComponent, ToolHeaderComponent, ToolInputComponent, ToolOutputComponent, ToolPayloadBase, ToolService, TooltipDirective, TypographyComponent, arcPath, barPath, buildPath, cn, contrastTriplet, darkenColor, decimalsFor, formatTimeString, formatTokens, from12Hour, generateBaseCss, generateChartCss, generateChartRamp, generateThemeCss, getContrastColor, hexToHsl, hexToRgb, hslToHex, lightenColor, monotoneTangents, niceScale, niceStep, parseTimeString, polarPoint, provideTolleConfig, radiusScale, rgbTriplet, timePartsToSeconds, to12Hour };
+export { AccordionComponent, AccordionItemComponent, AlertComponent, AlertDialogActionComponent, AlertDialogCancelComponent, AlertDialogComponent, AlertDialogContentComponent, AlertDialogDescriptionComponent, AlertDialogDynamicComponent, AlertDialogFooterComponent, AlertDialogHeaderComponent, AlertDialogPortalComponent, AlertDialogRef, AlertDialogService, AlertDialogTitleComponent, AlertDialogTriggerComponent, AspectRatioComponent, AttachmentActionsComponent, AttachmentComponent, AttachmentGroupComponent, AvatarComponent, AvatarFallbackComponent, BASE_PALETTES, BadgeComponent, BarListComponent, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbLinkComponent, BreadcrumbSeparatorComponent, BubbleActionsComponent, BubbleComponent, BubbleReactionsComponent, ButtonComponent, ButtonGroupComponent, CHART_COLOR_LIMIT, CHART_OVERFLOW_COLOR, CLOSE_FALLBACK_MS, CalendarComponent, CardComponent, CardContentComponent, CardDescriptionComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CarouselComponent, CarouselContainerDirective, CarouselContentDirective, CarouselContext, CarouselItemDirective, CarouselNextDirective, CarouselPreviousDirective, CategoryBarComponent, ChainOfThoughtComponent, ChainOfThoughtContentComponent, ChainOfThoughtHeaderComponent, ChainOfThoughtSearchResultComponent, ChainOfThoughtSearchResultsComponent, ChainOfThoughtService, ChainOfThoughtStepComponent, ChartAreaComponent, ChartBarComponent, ChartChild, ChartColorScale, ChartComponent, ChartGridComponent, ChartLegendComponent, ChartLineComponent, ChartPieComponent, ChartService, ChartSparkComponent, ChartTableComponent, ChartTooltipComponent, ChartXAxisComponent, ChartYAxisComponent, CheckboxComponent, CheckpointComponent, CollapsibleComponent, CollapsibleContentComponent, CollapsibleTriggerComponent, ComboboxComponent, CommandComponent, CommandDialogComponent, CommandEmptyComponent, CommandGroupComponent, CommandInputComponent, CommandItemComponent, CommandListComponent, CommandSeparatorComponent, CommandService, CommandShortcutComponent, ConfirmationComponent, ContextComponent, ContextContentComponent, ContextMenuComponent, ContextMenuService, ContextMenuTriggerDirective, ContextService, ContextTriggerComponent, ConversationComponent, ConversationContentComponent, ConversationEmptyStateComponent, ConversationScrollButtonComponent, ConversationService, CountryCodesService, CountrySelectorComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, DateTimePickerComponent, DirectionDirective, DirectionService, DropdownItemComponent, DropdownLabelComponent, DropdownMenuComponent, DropdownSeparatorComponent, DropdownTriggerDirective, EmptyStateComponent, FieldComponent, FieldContentComponent, FieldDescriptionComponent, FieldErrorComponent, FieldGroupComponent, FieldLabelComponent, FieldLegendComponent, FieldSeparatorComponent, FieldSetComponent, FieldTitleComponent, HoverCardComponent, HoverCardContentComponent, HoverCardTriggerComponent, InlineCitationCardComponent, InlineCitationComponent, InlineCitationQuoteComponent, InputComponent, InputGroupAddonComponent, InputGroupButtonComponent, InputGroupComponent, InputGroupInputComponent, InputGroupTextComponent, InputGroupTextareaComponent, ItemActionsComponent, ItemComponent, ItemContentComponent, ItemDescriptionComponent, ItemFooterComponent, ItemGroupComponent, ItemHeaderComponent, ItemMediaComponent, ItemTitleComponent, KbdComponent, KbdGroupComponent, LabelComponent, MarkerComponent, MarkerGroupComponent, MaskedInputComponent, MenubarComponent, MenubarContentComponent, MenubarItemComponent, MenubarLabelComponent, MenubarMenuComponent, MenubarSeparatorComponent, MenubarService, MenubarTriggerComponent, MessageAlignService, MessageAvatarComponent, MessageComponent, MessageContentComponent, MessageFooterComponent, MessageGroupComponent, MessageHeaderComponent, MessageScrollerButtonComponent, MessageScrollerComponent, MessageScrollerContentComponent, MessageScrollerItemDirective, MessageScrollerService, MessageScrollerViewportComponent, ModalComponent, ModalRef, ModalService, ModalStackService, ModelSelectorComponent, MultiSelectComponent, NativeSelectComponent, NavigationMenuComponent, NavigationMenuContentComponent, NavigationMenuItemComponent, NavigationMenuLinkComponent, NavigationMenuListComponent, NavigationMenuService, NavigationMenuTriggerComponent, OtpComponent, OtpGroupComponent, OtpSlotComponent, PaginationComponent, PhoneNumberInputComponent, PhoneNumberService, PlanComponent, PlanService, PlanStepComponent, PopoverComponent, PopoverContentComponent, ProgressCircleComponent, ProgressComponent, PromptInputComponent, PromptInputService, PromptInputSubmitComponent, PromptInputToolbarComponent, PromptInputToolsComponent, QueueComponent, QueueItemComponent, QueueService, RadioGroupComponent, RadioItemComponent, RadioService, RangeCalendarComponent, ReasoningComponent, ReasoningContentComponent, ReasoningService, ReasoningTriggerComponent, ResizableComponent, ResizablePanelComponent, ResizablePanelItemComponent, ScrollAreaComponent, SegmentComponent, SegmentComponent as SegmentedComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SelectService, SeparatorComponent, SheetComponent, SheetContentComponent, SheetDescriptionComponent, SheetFooterComponent, SheetHeaderComponent, SheetRef, SheetService, SheetTitleComponent, SheetTriggerComponent, SheetWrapperComponent, ShimmerComponent, SidebarComponent, SkeletonComponent, SliderComponent, SourceComponent, SourcesComponent, SourcesContentComponent, SourcesService, SourcesTriggerComponent, SpinnerComponent, SuggestionComponent, SuggestionsComponent, SuggestionsService, SwitchComponent, TOLLE_CONFIG, TableBodyDirective, TableCaptionDirective, TableCellDirective, TableComponent, TableFooterDirective, TableHeadDirective, TableHeaderDirective, TableRowDirective, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TagInputComponent, TaskComponent, TaskContentComponent, TaskItemComponent, TaskItemFileComponent, TaskService, TaskTriggerComponent, TextareaComponent, ThemeService, TimeColumnsComponent, TimePickerComponent, ToastContainerComponent, ToastService, ToggleComponent, ToggleGroupComponent, ToggleGroupItemComponent, TolleCellDirective, ToolComponent, ToolHeaderComponent, ToolInputComponent, ToolOutputComponent, ToolPayloadBase, ToolService, TooltipDirective, TrackerComponent, TypographyComponent, arcPath, barPath, barPathHorizontal, buildPath, cn, contrastTriplet, darkenColor, decimalsFor, formatTimeString, formatTokens, from12Hour, generateBaseCss, generateChartCss, generateChartRamp, generateThemeCss, getContrastColor, hexToHsl, hexToRgb, hslToHex, lightenColor, monotoneTangents, niceScale, niceStep, parseTimeString, polarPoint, provideTolleConfig, radiusScale, rgbTriplet, timePartsToSeconds, to12Hour };
 //# sourceMappingURL=tolle-ui.mjs.map