@tolle_/tolle-ui 18.2.30 → 18.3.1

package/fesm2022/tolle-ui.mjs

@@ -6310,12 +6310,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: [AccordionItemComponent]
             }] } });
 
+/**
+ * Safety net if the exit animation's `animationend` never fires — reduced
+ * motion, no matching keyframe, or a panel that never rendered — so a modal
+ * can never get stuck open forever.
+ */
+const CLOSE_FALLBACK_MS$1 = 300;
 class ModalRef {
     overlay;
     modal;
     stack;
     _afterClosed$ = new Subject();
     afterClosed$ = this._afterClosed$.asObservable();
+    _closingSubject = new BehaviorSubject(false);
+    /** True once `close()` has been called — drives the panel's exit animation. */
+    closing$ = this._closingSubject.asObservable();
     constructor(overlay, modal, stack) {
         this.overlay = overlay;
         this.modal = modal;
@@ -6329,22 +6338,46 @@ class ModalRef {
         });
     }
     /**
-     * Closes the modal instantly.
+     * Closes the modal. Signals the panel and backdrop to play their exit
+     * animation, then tears down the overlay once it finishes (or after
+     * `CLOSE_FALLBACK_MS`, whichever comes first).
      * @param result Data to pass back to the caller
      */
     close(result) {
-        this._afterClosed$.next(result);
-        this._afterClosed$.complete();
-        this.overlay.dispose(); // Instant disposal (No animation timer)
-        this.stack.unregister(this);
+        if (this._closingSubject.value)
+            return;
+        this._closingSubject.next(true);
+        this.overlay.backdropElement?.setAttribute('data-state', 'closed');
+        let finished = false;
+        const finish = () => {
+            if (finished)
+                return;
+            finished = true;
+            this._afterClosed$.next(result);
+            this._afterClosed$.complete();
+            this.overlay.dispose();
+            this.stack.unregister(this);
+        };
+        const panel = this.overlay.overlayElement.querySelector('[data-state]');
+        if (panel) {
+            panel.addEventListener('animationend', finish, { once: true });
+            setTimeout(finish, CLOSE_FALLBACK_MS$1);
+        }
+        else {
+            finish();
+        }
     }
 }
 
 class ModalComponent {
     ref;
+    cdr = inject(ChangeDetectorRef);
+    subscription = new Subscription();
     contentType = 'string';
     content;
     modalClasses = '';
+    /** True while the exit animation plays, just before the overlay is torn down. */
+    closing = false;
     /** Stable, per-instance ids used to wire dialog ARIA relationships. */
     _uid = Math.random().toString(36).substr(2, 9);
     titleId = `tolle-modal-title-${this._uid}`;
@@ -6356,16 +6389,21 @@ class ModalComponent {
         this.content = this.ref.modal.content;
         this.modalClasses = this.getModalSizeCss();
         this.determineContentType();
+        this.subscription.add(this.ref.closing$.subscribe((closing) => {
+            this.closing = closing;
+            this.cdr.markForCheck();
+        }));
     }
-    /** Whether the auto-rendered header (title and/or close button) is shown. */
-    get hasHeader() {
-        return !!(this.ref.modal.showCloseButton || this.ref.modal.title);
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
     }
     getModalSizeCss() {
         const { size } = this.ref.modal;
         return cn(
         // Surface: overlay card that never exceeds the viewport (header stays, body scrolls).
-        'bg-background text-foreground border border-border shadow-lg relative flex flex-col w-full mx-auto', size === 'fullscreen' ? 'h-screen w-screen rounded-none' : 'rounded-lg max-h-[85vh]', 
+        'relative flex w-full mx-auto flex-col gap-4 rounded-lg border border-border bg-background p-6 text-foreground shadow-lg duration-200', 
+        // Enter/exit animation, driven by `data-state` (see `closing` above).
+        'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', size === 'fullscreen' ? 'h-screen w-screen rounded-none' : 'max-h-[85vh]', 
         // Sizing scale with explicit max-widths
         size === 'xs' && 'max-w-[320px]', size === 'sm' && 'max-w-[425px]', size === 'default' && 'max-w-[512px]', size === 'lg' && 'max-w-[1024px]', size === 'xl' && 'max-w-[1280px]');
     }
@@ -6383,6 +6421,7 @@ class ModalComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalComponent, deps: [{ token: ModalRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ModalComponent, isStandalone: true, selector: "tolle-modal", ngImport: i0, template: `
     <div [class]="modalClasses" class="pointer-events-auto"
+      [attr.data-state]="closing ? 'closed' : 'open'"
       role="dialog"
       aria-modal="true"
       [attr.aria-labelledby]="ref.modal.title ? titleId : null"
@@ -6390,25 +6429,26 @@ class ModalComponent {
       cdkTrapFocus cdkTrapFocusAutoCapture
       (mousedown)="$event.stopPropagation()">
 
+      <button
+        *ngIf="ref.modal.showCloseButton"
+        type="button"
+        (click)="ref.close()"
+        aria-label="Close"
+        class="absolute right-4 top-4 grid h-6 w-6 place-items-center rounded-sm text-muted-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+        <i class="ri-close-line text-base" aria-hidden="true"></i>
+      </button>
+
       <!-- Header -->
-      <div *ngIf="hasHeader" class="flex shrink-0 items-start justify-between gap-4 px-6 pt-6 pb-4">
-        <h2 *ngIf="ref.modal.title" [id]="titleId" class="text-lg font-semibold leading-none tracking-tight text-foreground">
+      <div *ngIf="ref.modal.title" class="flex shrink-0 flex-col gap-1.5 pr-8 text-center sm:text-left">
+        <h2 [id]="titleId" class="text-lg font-semibold leading-none tracking-tight text-foreground">
           {{ ref.modal.title }}
         </h2>
-        <button
-          *ngIf="ref.modal.showCloseButton"
-          type="button"
-          (click)="ref.close()"
-          aria-label="Close"
-          class="-mr-2 -mt-2 ml-auto grid h-8 w-8 shrink-0 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
-          <i class="ri-close-line text-xl"></i>
-        </button>
       </div>
 
       <!-- Body -->
       <div class="min-h-0 flex-1 overflow-y-auto">
         <ng-container [ngSwitch]="contentType">
-          <p *ngSwitchCase="'string'" [id]="descId" [class]="hasHeader ? 'px-6 pb-6 text-sm leading-relaxed text-muted-foreground' : 'p-6 text-sm leading-relaxed text-muted-foreground'">{{ content }}</p>
+          <p *ngSwitchCase="'string'" [id]="descId" class="text-sm leading-relaxed text-muted-foreground">{{ content }}</p>
 
           <ng-container *ngSwitchCase="'template'">
             <ng-container *ngTemplateOutlet="asTemplate; context: ref.modal.context"></ng-container>
@@ -6426,6 +6466,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             type: Component,
             args: [{ selector: 'tolle-modal', standalone: true, imports: [CommonModule, A11yModule], template: `
     <div [class]="modalClasses" class="pointer-events-auto"
+      [attr.data-state]="closing ? 'closed' : 'open'"
       role="dialog"
       aria-modal="true"
       [attr.aria-labelledby]="ref.modal.title ? titleId : null"
@@ -6433,25 +6474,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       cdkTrapFocus cdkTrapFocusAutoCapture
       (mousedown)="$event.stopPropagation()">
 
+      <button
+        *ngIf="ref.modal.showCloseButton"
+        type="button"
+        (click)="ref.close()"
+        aria-label="Close"
+        class="absolute right-4 top-4 grid h-6 w-6 place-items-center rounded-sm text-muted-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+        <i class="ri-close-line text-base" aria-hidden="true"></i>
+      </button>
+
       <!-- Header -->
-      <div *ngIf="hasHeader" class="flex shrink-0 items-start justify-between gap-4 px-6 pt-6 pb-4">
-        <h2 *ngIf="ref.modal.title" [id]="titleId" class="text-lg font-semibold leading-none tracking-tight text-foreground">
+      <div *ngIf="ref.modal.title" class="flex shrink-0 flex-col gap-1.5 pr-8 text-center sm:text-left">
+        <h2 [id]="titleId" class="text-lg font-semibold leading-none tracking-tight text-foreground">
           {{ ref.modal.title }}
         </h2>
-        <button
-          *ngIf="ref.modal.showCloseButton"
-          type="button"
-          (click)="ref.close()"
-          aria-label="Close"
-          class="-mr-2 -mt-2 ml-auto grid h-8 w-8 shrink-0 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
-          <i class="ri-close-line text-xl"></i>
-        </button>
       </div>
 
       <!-- Body -->
       <div class="min-h-0 flex-1 overflow-y-auto">
         <ng-container [ngSwitch]="contentType">
-          <p *ngSwitchCase="'string'" [id]="descId" [class]="hasHeader ? 'px-6 pb-6 text-sm leading-relaxed text-muted-foreground' : 'p-6 text-sm leading-relaxed text-muted-foreground'">{{ content }}</p>
+          <p *ngSwitchCase="'string'" [id]="descId" class="text-sm leading-relaxed text-muted-foreground">{{ content }}</p>
 
           <ng-container *ngSwitchCase="'template'">
             <ng-container *ngTemplateOutlet="asTemplate; context: ref.modal.context"></ng-container>
@@ -6490,6 +6532,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * `open()` always receives a plain object literal, never a `new Modal()`
+ * instance, so a class field initializer would never actually apply — these
+ * are the real defaults, merged in explicitly below.
+ */
+const MODAL_DEFAULTS = {
+    size: 'default',
+    backdropClose: true,
+    showCloseButton: true,
+};
 class ModalService {
     overlay;
     injector;
@@ -6500,12 +6552,13 @@ class ModalService {
         this.stack = stack;
     }
     open(config) {
+        const resolved = { ...MODAL_DEFAULTS, ...config };
         // 0. Remember what was focused so we can restore it after the modal closes.
         const previouslyFocused = document.activeElement;
         // 1. Create the Overlay (DOM placeholder)
         const overlayRef = this.createOverlay();
         // 2. Create the Controller (Ref)
-        const modalRef = new ModalRef(overlayRef, config, this.stack);
+        const modalRef = new ModalRef(overlayRef, resolved, this.stack);
         // 3. Create Injector to allow the Component to access the Ref
         const injector = Injector.create({
             parent: this.injector,
@@ -6514,7 +6567,7 @@ class ModalService {
         // Escape-to-close: mirror the backdrop close path, but only for
         // non-blocking modals (backdropClose !== false).
         overlayRef.keydownEvents().subscribe((event) => {
-            if (event.key === 'Escape' && config.backdropClose !== false) {
+            if (event.key === 'Escape' && resolved.backdropClose) {
                 event.preventDefault();
                 modalRef.close();
             }
@@ -6524,6 +6577,9 @@ class ModalService {
         // 4. Attach the UI Component to the Overlay
         const portal = new ComponentPortal(ModalComponent, null, injector);
         overlayRef.attach(portal);
+        // The backdrop element only exists once attached — setting this any
+        // earlier (e.g. in ModalRef's constructor) would silently no-op.
+        overlayRef.backdropElement?.setAttribute('data-state', 'open');
         return modalRef;
     }
     /** Global helper to close everything */
@@ -6534,7 +6590,15 @@ class ModalService {
     createOverlay() {
         const config = new OverlayConfig({
             hasBackdrop: true,
-            backdropClass: ['cdk-overlay-backdrop', 'bg-black/80', 'backdrop-blur-sm'],
+            backdropClass: [
+                'cdk-overlay-backdrop',
+                'bg-black/80',
+                'backdrop-blur-sm',
+                'data-[state=open]:animate-in',
+                'data-[state=open]:fade-in-0',
+                'data-[state=closed]:animate-out',
+                'data-[state=closed]:fade-out-0',
+            ],
             panelClass: [
                 'w-full',
                 'h-full',
@@ -6559,35 +6623,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$2.Overlay }, { type: i0.Injector }, { type: ModalStackService }] });
 
-class Modal {
-    /** The content to display (String, Component, or Template) */
-    content;
-    /** Optional title for the standard header */
-    title;
-    /** * Predefined size scale.
-     * - xs: 320px (Mobile alerts)
-     * - sm: 425px (Standard dialogs)
-     * - default: 544px (Forms)
-     * - lg: 90% / 1024px (Data tables)
-     * - xl: 1280px (Large forms, dashboards)
-     * - fullscreen: 100vw/100vh (Complex workflows)
-     */
-    size = 'default';
-    /** * If true (default), clicking the backdrop closes the modal.
-     * Set to false for "blocking" modals (e.g., Terms of Service).
-     */
-    backdropClose = true;
-    /** * Data to pass to a Component content.
-     * Accessed via @Input() in the child component.
-     */
-    data;
-    /** * Context to pass to a TemplateRef content.
-     * Accessed via `let-val` in the HTML.
-     */
-    context;
-    showCloseButton = true;
-}
-
 class ButtonGroupComponent {
     class = '';
     cn = cn;
@@ -9071,7 +9106,7 @@ class SegmentComponent {
       (keydown)="onKeydown($event)"
     >
       <div
-        class="absolute top-1 bottom-1 bg-primary shadow-sm rounded-md transition-all duration-300 ease-[cubic-bezier(0.2,0.0,0.2,1)]"
+        class="absolute top-1 bottom-1 bg-primary shadow-sm rounded-md transition-all duration-300 ease-tolle"
         [style.left.px]="gliderLeft"
         [style.width.px]="gliderWidth"
         [class.opacity-0]="!hasValue"
@@ -9128,7 +9163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       (keydown)="onKeydown($event)"
     >
       <div
-        class="absolute top-1 bottom-1 bg-primary shadow-sm rounded-md transition-all duration-300 ease-[cubic-bezier(0.2,0.0,0.2,1)]"
+        class="absolute top-1 bottom-1 bg-primary shadow-sm rounded-md transition-all duration-300 ease-tolle"
         [style.left.px]="gliderLeft"
         [style.width.px]="gliderWidth"
         [class.opacity-0]="!hasValue"
@@ -10024,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;
@@ -11177,6 +11346,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Safety net if the exit animation's `animationend` never fires — reduced
+ * motion, no matching keyframe, or a panel that never rendered — so an
+ * alert dialog can never get stuck open forever. Also used by
+ * `alert-dialog.service.ts` and `alert-dialog-dynamic.component.ts`, which
+ * animate the same content component through a different overlay wiring.
+ */
+const CLOSE_FALLBACK_MS = 300;
 class AlertDialogInternalService {
     openSubject = new BehaviorSubject(false);
     open$ = this.openSubject.asObservable();
@@ -11271,14 +11448,39 @@ class AlertDialogPortalComponent {
         });
         const portal = new TemplatePortal(this.portalContent, this.viewContainerRef);
         this.overlayRef.attach(portal);
+        // The backdrop element only exists once attached — setting this any
+        // earlier would silently no-op.
+        this.overlayRef.backdropElement?.setAttribute('data-state', 'open');
     }
+    /**
+     * Tears the overlay down once its exit animation finishes (or after
+     * `CLOSE_FALLBACK_MS`, whichever comes first) instead of instantly, so
+     * `data-[state=closed]:animate-out` actually gets a chance to play.
+     */
     hide() {
-        if (this.overlayRef) {
-            this.overlayRef.detach();
-            this.overlayRef.dispose();
-            this.overlayRef = undefined;
+        const ref = this.overlayRef;
+        if (!ref)
+            return;
+        ref.backdropElement?.setAttribute('data-state', 'closed');
+        let finished = false;
+        const finish = () => {
+            if (finished)
+                return;
+            finished = true;
+            ref.detach();
+            ref.dispose();
+            if (this.overlayRef === ref)
+                this.overlayRef = undefined;
             // Restore focus to the trigger.
             this.previouslyFocused?.focus?.();
+        };
+        const panel = ref.overlayElement.querySelector('[data-state]');
+        if (panel) {
+            panel.addEventListener('animationend', finish, { once: true });
+            setTimeout(finish, CLOSE_FALLBACK_MS);
+        }
+        else {
+            finish();
         }
     }
     ngOnDestroy() {
@@ -11316,7 +11518,7 @@ class AlertDialogContentComponent {
         });
     }
     get computedClass() {
-        return cn("fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-50 grid w-full gap-4 border border-input bg-background p-6 shadow-lg data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] rounded-lg", {
+        return cn("fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-50 grid w-full gap-4 border border-input bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] rounded-lg", {
             'max-w-xs': this.size === 'xs',
             'max-w-sm': this.size === 'sm',
             'max-w-md': this.size === 'md',
@@ -11479,6 +11681,11 @@ class AlertDialogRef {
 class AlertDialogDynamicComponent {
     config;
     dialogRef;
+    /**
+     * Set by `AlertDialogService` once the dialog's result is ready, so the
+     * content panel plays its exit animation before the overlay is torn down.
+     */
+    closing = false;
     onOpenChange(open) {
         if (!open) {
             this.close(false);
@@ -11489,7 +11696,7 @@ class AlertDialogDynamicComponent {
     }
     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]="true" (openChange)="onOpenChange($event)">
+    <tolle-alert-dialog [open]="!closing" (openChange)="onOpenChange($event)">
         <tolle-alert-dialog-content [size]="config.size || 'lg'">
           <tolle-alert-dialog-header>
             <tolle-alert-dialog-title>{{ config.title }}</tolle-alert-dialog-title>
@@ -11525,7 +11732,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         AlertDialogActionComponent,
                         ButtonComponent
                     ], template: `
-    <tolle-alert-dialog [open]="true" (openChange)="onOpenChange($event)">
+    <tolle-alert-dialog [open]="!closing" (openChange)="onOpenChange($event)">
         <tolle-alert-dialog-content [size]="config.size || 'lg'">
           <tolle-alert-dialog-header>
             <tolle-alert-dialog-title>{{ config.title }}</tolle-alert-dialog-title>
@@ -11556,7 +11763,15 @@ class AlertDialogService {
         const previouslyFocused = document.activeElement;
         const overlayConfig = new OverlayConfig({
             hasBackdrop: true,
-            backdropClass: ['cdk-overlay-backdrop', 'bg-black/80', 'backdrop-blur-sm'],
+            backdropClass: [
+                'cdk-overlay-backdrop',
+                'bg-black/80',
+                'backdrop-blur-sm',
+                'data-[state=open]:animate-in',
+                'data-[state=open]:fade-in-0',
+                'data-[state=closed]:animate-out',
+                'data-[state=closed]:fade-out-0',
+            ],
             positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
             scrollStrategy: this.overlay.scrollStrategies.block()
         });
@@ -11564,13 +11779,36 @@ class AlertDialogService {
         const dialogRef = new AlertDialogRef();
         const portal = new ComponentPortal(AlertDialogDynamicComponent, null, this.injector);
         const componentRef = overlayRef.attach(portal);
+        // The backdrop element only exists once attached — setting this any
+        // earlier would silently no-op.
+        overlayRef.backdropElement?.setAttribute('data-state', 'open');
         componentRef.instance.config = config;
         componentRef.instance.dialogRef = dialogRef;
+        // The result (`afterClosed$`) is ready immediately, but disposing the
+        // overlay waits for the content panel's exit animation to finish (or
+        // a fallback timeout), so `data-[state=closed]:animate-out` gets a
+        // chance to play instead of being torn down mid-frame.
         dialogRef.afterClosed$.subscribe(() => {
-            overlayRef.detach();
-            overlayRef.dispose();
-            // Restore focus to the trigger.
-            previouslyFocused?.focus?.();
+            overlayRef.backdropElement?.setAttribute('data-state', 'closed');
+            componentRef.instance.closing = true;
+            let finished = false;
+            const finish = () => {
+                if (finished)
+                    return;
+                finished = true;
+                overlayRef.detach();
+                overlayRef.dispose();
+                // Restore focus to the trigger.
+                previouslyFocused?.focus?.();
+            };
+            const panel = overlayRef.overlayElement.querySelector('[data-state]');
+            if (panel) {
+                panel.addEventListener('animationend', finish, { once: true });
+                setTimeout(finish, CLOSE_FALLBACK_MS);
+            }
+            else {
+                finish();
+            }
         });
         // Alert-dialog semantics: backdrop clicks must NOT dismiss.
         // Escape still closes the dialog.
@@ -16497,21 +16735,21 @@ class ResizablePanelComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ResizablePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ResizablePanelComponent, isStandalone: true, selector: "tolle-resizable-panel", inputs: { direction: "direction", class: "class" }, queries: [{ propertyName: "panels", predicate: i0.forwardRef(() => ResizablePanelItemComponent) }], ngImport: i0, template: `
     <div [class]="computedContainerClass">
-      <div class="flex" [class.flex-col]="direction === 'vertical'" [class.flex-row]="direction === 'horizontal'">
+      <div class="flex h-full w-full" [class.flex-col]="direction === 'vertical'" [class.flex-row]="direction === 'horizontal'">
         <ng-content></ng-content>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ResizablePanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'tolle-resizable-panel', standalone: true, imports: [CommonModule], template: `
     <div [class]="computedContainerClass">
-      <div class="flex" [class.flex-col]="direction === 'vertical'" [class.flex-row]="direction === 'horizontal'">
+      <div class="flex h-full w-full" [class.flex-col]="direction === 'vertical'" [class.flex-row]="direction === 'horizontal'">
         <ng-content></ng-content>
       </div>
     </div>
-  `, styles: [":host{display:block}\n"] }]
+  `, styles: [":host{display:block;width:100%;height:100%}\n"] }]
         }], propDecorators: { direction: [{
                 type: Input
             }], class: [{
@@ -16915,11 +17153,16 @@ class ContextMenuService {
                 })
             ]
         });
+        // Position via left/top, not transform: the menu's own
+        // data-[state=open]:zoom-in-95/slide-in-from-top-2 enter animation also
+        // drives `transform`, and a CSS animation overrides whatever an inline
+        // transform says for as long as it's running — so a translate() here
+        // would get clobbered by the animation and only "snap" into place once
+        // it finishes, which is exactly the top-left-then-jump flash this avoids.
         Object.assign(menuElement.style, {
             position: 'fixed',
-            left: '0',
-            top: '0',
-            transform: `translate(${Math.round(x)}px, ${Math.round(y)}px)`
+            left: `${Math.round(x)}px`,
+            top: `${Math.round(y)}px`,
         });
     }
     async positionSubmenu(triggerElement, submenuElement) {
@@ -16948,9 +17191,8 @@ class ContextMenuService {
         });
         Object.assign(submenuElement.style, {
             position: 'fixed',
-            left: '0',
-            top: '0',
-            transform: `translate(${Math.round(x)}px, ${Math.round(y)}px)`
+            left: `${Math.round(x)}px`,
+            top: `${Math.round(y)}px`,
         });
     }
     performAction(actionId) {
@@ -28177,6 +28419,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;
@@ -28309,21 +28557,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)
@@ -28334,13 +28597,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. */
@@ -28363,7 +28629,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);
@@ -28437,6 +28703,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,
@@ -29083,6 +29350,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 */
@@ -29155,6 +29427,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,
@@ -29166,11 +29439,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);
@@ -29182,7 +29463,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
@@ -29213,11 +29494,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>
@@ -29265,11 +29546,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>
@@ -29299,6 +29580,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], stacked: [{
                 type: Input
+            }], orientation: [{
+                type: Input
             }], hover: [{
                 type: Input
             }], showTable: [{
@@ -29317,16 +29600,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.
@@ -29335,20 +29637,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>
@@ -29363,20 +29665,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>
@@ -29389,7 +29691,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 = '';
@@ -29408,7 +29713,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 }))
@@ -29465,13 +29778,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"
@@ -29489,7 +29813,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"
@@ -29683,6 +30007,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
@@ -29715,12 +30057,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)
@@ -29741,12 +30090,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,
@@ -30172,6 +30525,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.
@@ -31665,5 +32426,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, 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, Modal, 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