@tolle_/tolle-ui 18.2.30 → 18.3.1

package/registry/manifest.json

@@ -1,6 +1,6 @@
 {
   "package": "@tolle_/tolle-ui",
-  "version": "18.2.30",
+  "version": "18.3.1",
   "registry": "r/{name}.json",
   "components": [
     {
@@ -860,6 +860,62 @@
         }
       ]
     },
+    {
+      "name": "bar-list",
+      "title": "Bar List",
+      "description": "Bar List component.",
+      "category": "components",
+      "selector": "tolle-bar-list",
+      "isNew": true,
+      "import": "import { BarListComponent } from '@tolle_/tolle-ui';",
+      "install": "npx @tolle_/cli add bar-list",
+      "registryDependencies": [],
+      "dependencies": [],
+      "files": [
+        "bar-list.component.ts",
+        "utils/cn.ts"
+      ],
+      "components": [
+        {
+          "className": "BarListComponent",
+          "selector": "tolle-bar-list",
+          "kind": "component",
+          "inputs": [
+            {
+              "name": "data",
+              "type": "Record<string, any>[]",
+              "default": "[]",
+              "description": "Rows to rank, in the order they should be drawn.",
+              "required": false
+            },
+            {
+              "name": "labelKey",
+              "type": "string",
+              "default": "'label'",
+              "description": "Row key holding each row's label.",
+              "required": false
+            },
+            {
+              "name": "valueKey",
+              "type": "string",
+              "default": "'value'",
+              "description": "Row key holding each row's numeric value.",
+              "required": false
+            },
+            {
+              "name": "class",
+              "type": "string",
+              "default": "''",
+              "description": "Extra Tailwind classes merged onto the list via `cn()` (last-wins).",
+              "required": false
+            }
+          ],
+          "outputs": [],
+          "slots": [],
+          "variants": []
+        }
+      ]
+    },
     {
       "name": "breadcrumb",
       "title": "Breadcrumb",
@@ -1671,6 +1727,76 @@
         }
       ]
     },
+    {
+      "name": "category-bar",
+      "title": "Category Bar",
+      "description": "Category Bar component.",
+      "category": "components",
+      "selector": "tolle-category-bar",
+      "isNew": true,
+      "import": "import { CategoryBarComponent } from '@tolle_/tolle-ui';",
+      "install": "npx @tolle_/cli add category-bar",
+      "registryDependencies": [],
+      "dependencies": [],
+      "files": [
+        "category-bar.component.ts",
+        "utils/cn.ts"
+      ],
+      "components": [
+        {
+          "className": "CategoryBarComponent",
+          "selector": "tolle-category-bar",
+          "kind": "component",
+          "inputs": [
+            {
+              "name": "values",
+              "type": "number[]",
+              "default": "[]",
+              "description": "Width of each segment. Values that are not finite and greater than zero are dropped.",
+              "required": false
+            },
+            {
+              "name": "labels",
+              "type": "string[]",
+              "default": "[]",
+              "description": "Name for each segment, used in the accessible summary and as a title tooltip.",
+              "required": false
+            },
+            {
+              "name": "colors",
+              "type": "string[]",
+              "default": "[]",
+              "description": "Paint for each segment, by index. Falls back to the chart palette --chart-1 through --chart-5.",
+              "required": false
+            },
+            {
+              "name": "markerValue",
+              "type": "number | null",
+              "default": "null",
+              "description": "Position of the pointer, 0-100 on the same scale the segments sum to. Omit to draw no pointer.",
+              "required": false
+            },
+            {
+              "name": "ariaLabel",
+              "type": "string",
+              "default": "''",
+              "description": "Accessible name, prefixed onto the sr-only summary of segments and marker.",
+              "required": false
+            },
+            {
+              "name": "class",
+              "type": "string",
+              "default": "''",
+              "description": "Extra Tailwind classes merged onto the bar via `cn()` (last-wins).",
+              "required": false
+            }
+          ],
+          "outputs": [],
+          "slots": [],
+          "variants": []
+        }
+      ]
+    },
     {
       "name": "chain-of-thought",
       "title": "Chain Of Thought",
@@ -2094,6 +2220,13 @@
               "description": "Stacks marks on a shared baseline instead of grouping them.",
               "required": false
             },
+            {
+              "name": "orientation",
+              "type": "ChartOrientation",
+              "default": "'vertical'",
+              "description": "Which physical axis carries the category vs the value. Only bars support\n'horizontal' — line/area marks stay vertical regardless.",
+              "required": false
+            },
             {
               "name": "hover",
               "type": "boolean",
@@ -2177,7 +2310,7 @@
               "name": "vertical",
               "type": "boolean",
               "default": "false",
-              "description": "Also draws a rule at every x position.",
+              "description": "Also draws a rule at every category position.",
               "required": false
             },
             {
@@ -2201,7 +2334,7 @@
               "name": "charWidth",
               "type": "number",
               "default": "7",
-              "description": "Approximate px per character, used to decide when labels would collide.",
+              "description": "Approximate px per character, used to decide when category labels would\ncollide. Only consulted in the vertical orientation.",
               "required": false
             },
             {
@@ -2516,6 +2649,130 @@
         }
       ]
     },
+    {
+      "name": "chart-spark",
+      "title": "Chart Spark",
+      "description": "Chart Spark component.",
+      "category": "data",
+      "selector": "tolle-chart-spark",
+      "isNew": true,
+      "import": "import { ChartSparkComponent } from '@tolle_/tolle-ui';",
+      "install": "npx @tolle_/cli add chart-spark",
+      "registryDependencies": [
+        "chart"
+      ],
+      "dependencies": [
+        "class-variance-authority"
+      ],
+      "files": [
+        "chart-spark.component.ts",
+        "chart.service.ts",
+        "utils/cn.ts"
+      ],
+      "components": [
+        {
+          "className": "ChartSparkComponent",
+          "selector": "tolle-chart-spark",
+          "kind": "component",
+          "inputs": [
+            {
+              "name": "data",
+              "type": "Record<string, any>[]",
+              "default": "[]",
+              "description": "Rows to plot, in x order.",
+              "required": false
+            },
+            {
+              "name": "valueKey",
+              "type": "string",
+              "default": "'value'",
+              "description": "Row key holding each row's numeric value.",
+              "required": false
+            },
+            {
+              "name": "xKey",
+              "type": "string",
+              "default": "''",
+              "description": "Row key holding each row's x position. Only matters once `hover` is on.",
+              "required": false
+            },
+            {
+              "name": "type",
+              "type": "'line' | 'area' | 'bar'",
+              "default": "'line'",
+              "description": "Which mark to draw.",
+              "required": false
+            },
+            {
+              "name": "curve",
+              "type": "'linear' | 'smooth'",
+              "default": "'linear'",
+              "description": "Interpolation for line/area.",
+              "required": false
+            },
+            {
+              "name": "maxBarWidth",
+              "type": "number",
+              "default": "6",
+              "description": "Largest bar thickness in px, used when `type` is 'bar'.",
+              "required": false
+            },
+            {
+              "name": "height",
+              "type": "number",
+              "default": "32",
+              "description": "Height in px.",
+              "required": false
+            },
+            {
+              "name": "hover",
+              "type": "boolean",
+              "default": "false",
+              "description": "Renders the crosshair, hit layer and tooltip.",
+              "required": false
+            },
+            {
+              "name": "showTable",
+              "type": "boolean",
+              "default": "false",
+              "description": "Shows the data table instead of leaving it visually hidden.",
+              "required": false
+            },
+            {
+              "name": "ariaLabel",
+              "type": "string",
+              "default": "''",
+              "description": "Accessible name, used as the svg <title>.",
+              "required": false
+            },
+            {
+              "name": "description",
+              "type": "string",
+              "default": "''",
+              "description": "Longer summary used as the svg <desc>. Falls back to `ariaLabel`.",
+              "required": false
+            },
+            {
+              "name": "margin",
+              "type": "ChartMargin",
+              "default": "{ top: 2, right: 2, bottom: 2, left: 2 }",
+              "description": "Space reserved around the plot — a sparkline has no axis labels to fit.",
+              "required": false
+            },
+            {
+              "name": "class",
+              "type": "string",
+              "default": "''",
+              "description": "Extra Tailwind classes merged onto the chart via `cn()` (last-wins).",
+              "required": false
+            }
+          ],
+          "outputs": [],
+          "slots": [],
+          "variants": []
+        }
+      ]
+    },
     {
       "name": "checkbox",
       "title": "Checkbox",
@@ -8501,6 +8758,66 @@
         }
       ]
     },
+    {
+      "name": "progress-circle",
+      "title": "Progress Circle",
+      "description": "Progress Circle component.",
+      "category": "feedback",
+      "selector": "tolle-progress-circle",
+      "isNew": true,
+      "import": "import { ProgressCircleComponent } from '@tolle_/tolle-ui';",
+      "install": "npx @tolle_/cli add progress-circle",
+      "registryDependencies": [],
+      "dependencies": [],
+      "files": [
+        "progress-circle.component.ts",
+        "utils/cn.ts"
+      ],
+      "components": [
+        {
+          "className": "ProgressCircleComponent",
+          "selector": "tolle-progress-circle",
+          "kind": "component",
+          "inputs": [
+            {
+              "name": "value",
+              "type": "number | null",
+              "default": "0",
+              "description": "Percent complete, 0-100.",
+              "required": false
+            },
+            {
+              "name": "size",
+              "type": "number",
+              "default": "120",
+              "description": "Diameter of the ring in px.",
+              "required": false
+            },
+            {
+              "name": "strokeWidth",
+              "type": "number",
+              "default": "8",
+              "description": "Thickness of the ring in px.",
+              "required": false
+            },
+            {
+              "name": "class",
+              "type": "string",
+              "default": "''",
+              "description": "Extra Tailwind classes merged onto the ring via `cn()` (last-wins).",
+              "required": false
+            }
+          ],
+          "outputs": [],
+          "slots": [
+            {
+              "name": ""
+            }
+          ],
+          "variants": []
+        }
+      ]
+    },
     {
       "name": "prompt-input",
       "title": "Prompt Input",
@@ -12209,6 +12526,66 @@
         }
       ]
     },
+    {
+      "name": "tracker",
+      "title": "Tracker",
+      "description": "Tracker component.",
+      "category": "components",
+      "selector": "tolle-tracker",
+      "isNew": true,
+      "import": "import { TrackerComponent } from '@tolle_/tolle-ui';",
+      "install": "npx @tolle_/cli add tracker",
+      "registryDependencies": [
+        "tooltip"
+      ],
+      "dependencies": [
+        "@floating-ui/dom"
+      ],
+      "files": [
+        "tracker.component.ts",
+        "utils/cn.ts"
+      ],
+      "components": [
+        {
+          "className": "TrackerComponent",
+          "selector": "tolle-tracker",
+          "kind": "component",
+          "inputs": [
+            {
+              "name": "data",
+              "type": "TrackerBlock[]",
+              "default": "[]",
+              "description": "One block per period, in chronological order.",
+              "required": false
+            },
+            {
+              "name": "blockHeight",
+              "type": "number",
+              "default": "32",
+              "description": "Height of each block in px.",
+              "required": false
+            },
+            {
+              "name": "ariaLabel",
+              "type": "string",
+              "default": "''",
+              "description": "Accessible name for the whole strip.",
+              "required": false
+            },
+            {
+              "name": "class",
+              "type": "string",
+              "default": "''",
+              "description": "Extra Tailwind classes merged onto the strip via `cn()` (last-wins).",
+              "required": false
+            }
+          ],
+          "outputs": [],
+          "slots": [],
+          "variants": []
+        }
+      ]
+    },
     {
       "name": "typography",
       "title": "Typography",

package/registry/r/alert-dialog-dynamic.json

@@ -15,7 +15,7 @@
     {
       "path": "alert-dialog-dynamic.component.ts",
       "target": "ui/alert-dialog-dynamic.component.ts",
-      "content": "import { Component, Inject, inject, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport {\n  AlertDialogComponent,\n  AlertDialogContentComponent,\n  AlertDialogHeaderComponent,\n  AlertDialogTitleComponent,\n  AlertDialogDescriptionComponent,\n  AlertDialogFooterComponent,\n  AlertDialogCancelComponent,\n  AlertDialogActionComponent\n} from './alert-dialog.component';\nimport { ButtonComponent } from './button.component';\nimport { AlertDialogConfig, AlertDialogRef } from './alert-dialog.types';\n\n@Component({\n  selector: 'tolle-alert-dialog-dynamic',\n  styles: [':host { display: block; }'],\n  standalone: true,\n  imports: [\n    CommonModule,\n    AlertDialogComponent,\n    AlertDialogContentComponent,\n    AlertDialogHeaderComponent,\n    AlertDialogTitleComponent,\n    AlertDialogDescriptionComponent,\n    AlertDialogFooterComponent,\n    AlertDialogCancelComponent,\n    AlertDialogActionComponent,\n    ButtonComponent\n  ],\n  template: `\n    <tolle-alert-dialog [open]=\"true\" (openChange)=\"onOpenChange($event)\">\n        <tolle-alert-dialog-content [size]=\"config.size || 'lg'\">\n          <tolle-alert-dialog-header>\n            <tolle-alert-dialog-title>{{ config.title }}</tolle-alert-dialog-title>\n            <tolle-alert-dialog-description>\n              {{ config.description }}\n            </tolle-alert-dialog-description>\n          </tolle-alert-dialog-header>\n          <tolle-alert-dialog-footer>\n            <tolle-alert-dialog-cancel (click)=\"close(false)\">\n              <tolle-button variant=\"outline\">{{ config.cancelText || 'Cancel' }}</tolle-button>\n            </tolle-alert-dialog-cancel>\n            <tolle-alert-dialog-action (click)=\"close(true)\">\n              <tolle-button [variant]=\"config.variant === 'destructive' ? 'destructive' : 'default'\">\n                {{ config.actionText || 'Continue' }}\n              </tolle-button>\n            </tolle-alert-dialog-action>\n          </tolle-alert-dialog-footer>\n        </tolle-alert-dialog-content>\n    </tolle-alert-dialog>\n  `\n})\nexport class AlertDialogDynamicComponent {\n  config!: AlertDialogConfig;\n  dialogRef!: AlertDialogRef;\n\n  onOpenChange(open: boolean) {\n    if (!open) {\n      this.close(false);\n    }\n  }\n\n  close(result: boolean) {\n    this.dialogRef.close(result);\n  }\n}\n"
+      "content": "import { Component, Inject, inject, OnInit } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport {\n  AlertDialogComponent,\n  AlertDialogContentComponent,\n  AlertDialogHeaderComponent,\n  AlertDialogTitleComponent,\n  AlertDialogDescriptionComponent,\n  AlertDialogFooterComponent,\n  AlertDialogCancelComponent,\n  AlertDialogActionComponent\n} from './alert-dialog.component';\nimport { ButtonComponent } from './button.component';\nimport { AlertDialogConfig, AlertDialogRef } from './alert-dialog.types';\n\n@Component({\n  selector: 'tolle-alert-dialog-dynamic',\n  styles: [':host { display: block; }'],\n  standalone: true,\n  imports: [\n    CommonModule,\n    AlertDialogComponent,\n    AlertDialogContentComponent,\n    AlertDialogHeaderComponent,\n    AlertDialogTitleComponent,\n    AlertDialogDescriptionComponent,\n    AlertDialogFooterComponent,\n    AlertDialogCancelComponent,\n    AlertDialogActionComponent,\n    ButtonComponent\n  ],\n  template: `\n    <tolle-alert-dialog [open]=\"!closing\" (openChange)=\"onOpenChange($event)\">\n        <tolle-alert-dialog-content [size]=\"config.size || 'lg'\">\n          <tolle-alert-dialog-header>\n            <tolle-alert-dialog-title>{{ config.title }}</tolle-alert-dialog-title>\n            <tolle-alert-dialog-description>\n              {{ config.description }}\n            </tolle-alert-dialog-description>\n          </tolle-alert-dialog-header>\n          <tolle-alert-dialog-footer>\n            <tolle-alert-dialog-cancel (click)=\"close(false)\">\n              <tolle-button variant=\"outline\">{{ config.cancelText || 'Cancel' }}</tolle-button>\n            </tolle-alert-dialog-cancel>\n            <tolle-alert-dialog-action (click)=\"close(true)\">\n              <tolle-button [variant]=\"config.variant === 'destructive' ? 'destructive' : 'default'\">\n                {{ config.actionText || 'Continue' }}\n              </tolle-button>\n            </tolle-alert-dialog-action>\n          </tolle-alert-dialog-footer>\n        </tolle-alert-dialog-content>\n    </tolle-alert-dialog>\n  `\n})\nexport class AlertDialogDynamicComponent {\n  config!: AlertDialogConfig;\n  dialogRef!: AlertDialogRef;\n\n  /**\n   * Set by `AlertDialogService` once the dialog's result is ready, so the\n   * content panel plays its exit animation before the overlay is torn down.\n   */\n  closing = false;\n\n  onOpenChange(open: boolean) {\n    if (!open) {\n      this.close(false);\n    }\n  }\n\n  close(result: boolean) {\n    this.dialogRef.close(result);\n  }\n}\n"
     },
     {
       "path": "alert-dialog.types.ts",

package/registry/r/alert-dialog.json

@@ -10,7 +10,7 @@
     {
       "path": "alert-dialog.component.ts",
       "target": "ui/alert-dialog.component.ts",
-      "content": "import { Component, Input, Output, EventEmitter, HostListener, Injectable, inject, TemplateRef, ViewChild, ViewContainerRef, OnDestroy, OnInit, ContentChild, forwardRef } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { Overlay, OverlayRef, OverlayConfig } from '@angular/cdk/overlay';\nimport { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { cn } from './utils/cn';\nimport { BehaviorSubject } from 'rxjs';\nimport { AlertDialogSize } from './alert-dialog.types';\n\n@Injectable()\nclass AlertDialogInternalService {\n    private openSubject = new BehaviorSubject<boolean>(false);\n    open$ = this.openSubject.asObservable();\n\n    setOpen(value: boolean) {\n        this.openSubject.next(value);\n    }\n\n    getOpen() {\n        return this.openSubject.getValue();\n    }\n\n    toggle() {\n        this.setOpen(!this.getOpen());\n    }\n}\n\n@Component({\n    selector: 'tolle-alert-dialog',\n  styles: [':host { display: block; }'],\n    standalone: true,\n    imports: [CommonModule],\n    providers: [AlertDialogInternalService],\n    template: `<ng-content></ng-content>`\n})\nexport class AlertDialogComponent {\n    @Input() set open(val: boolean) {\n        this.alertDialogService.setOpen(val);\n    }\n    @Output() openChange = new EventEmitter<boolean>();\n\n    private alertDialogService = inject(AlertDialogInternalService);\n\n    constructor() {\n        this.alertDialogService.open$.subscribe(val => {\n            this.openChange.emit(val);\n        });\n    }\n}\n\n@Component({\n    selector: 'tolle-alert-dialog-trigger',\n  styles: [':host { display: block; }'],\n    standalone: true,\n    imports: [CommonModule],\n    template: `<ng-content></ng-content>`,\n    host: {\n        '(click)': 'onOpen()'\n    }\n})\nexport class AlertDialogTriggerComponent {\n    private alertDialogService = inject(AlertDialogInternalService);\n\n    onOpen() {\n        this.alertDialogService.setOpen(true);\n    }\n}\n\n@Component({\n    selector: 'tolle-alert-dialog-portal',\n  styles: [':host { display: block; }'],\n    standalone: true,\n    imports: [CommonModule],\n    template: `\n    <ng-template #portalContent>\n      <ng-content></ng-content>\n    </ng-template>\n  `\n})\nexport class AlertDialogPortalComponent implements OnInit, OnDestroy {\n    @ViewChild('portalContent', { static: true }) portalContent!: TemplateRef<any>;\n    private alertDialogService = inject(AlertDialogInternalService);\n    private overlay = inject(Overlay);\n    private viewContainerRef = inject(ViewContainerRef);\n    private overlayRef?: OverlayRef;\n    /** Element focused before the dialog opened, restored on close. */\n    private previouslyFocused?: HTMLElement | null;\n\n    ngOnInit() {\n        this.alertDialogService.open$.subscribe(open => {\n            if (open) {\n                this.show();\n            } else {\n                this.hide();\n            }\n        });\n    }\n\n    private show() {\n        if (this.overlayRef) return;\n\n        // Remember the trigger so focus can be restored on close.\n        this.previouslyFocused = document.activeElement as HTMLElement | null;\n\n        const config = new OverlayConfig({\n            hasBackdrop: true,\n            backdropClass: ['cdk-overlay-backdrop', 'bg-black/80', 'backdrop-blur-sm', 'data-[state=open]:animate-in', 'data-[state=closed]:animate-out', 'data-[state=closed]:fade-out-0', 'data-[state=open]:fade-in-0'],\n            positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),\n            scrollStrategy: this.overlay.scrollStrategies.block()\n        });\n\n        this.overlayRef = this.overlay.create(config);\n\n        // Alert-dialog semantics: backdrop clicks must NOT dismiss.\n        // Escape still closes the dialog.\n        this.overlayRef.keydownEvents().subscribe((event: KeyboardEvent) => {\n            if (event.key === 'Escape') {\n                event.preventDefault();\n                this.alertDialogService.setOpen(false);\n            }\n        });\n\n        const portal = new TemplatePortal(this.portalContent, this.viewContainerRef);\n        this.overlayRef.attach(portal);\n    }\n\n    private hide() {\n        if (this.overlayRef) {\n            this.overlayRef.detach();\n            this.overlayRef.dispose();\n            this.overlayRef = undefined;\n            // Restore focus to the trigger.\n            this.previouslyFocused?.focus?.();\n        }\n    }\n\n    ngOnDestroy() {\n        this.hide();\n    }\n}\n\n@Component({\n    selector: 'tolle-alert-dialog-content',\n    standalone: true,\n    imports: [CommonModule, A11yModule],\n    template: `<div [class]=\"computedClass\" [attr.data-state]=\"isOpen ? 'open' : 'closed'\"\n        role=\"alertdialog\"\n        aria-modal=\"true\"\n        [attr.aria-labelledby]=\"titleCmp?.id || null\"\n        [attr.aria-describedby]=\"descriptionCmp?.id || null\"\n        cdkTrapFocus cdkTrapFocusAutoCapture><ng-content></ng-content></div>`,\n    host: {\n        '[class]': '\"contents\"'\n    }\n})\nexport class AlertDialogContentComponent {\n    @Input() class: string = '';\n    @Input() size: AlertDialogSize = 'lg';\n\n    /** Projected title/description used to build the dialog's accessible name. */\n    @ContentChild(forwardRef(() => AlertDialogTitleComponent)) titleCmp?: AlertDialogTitleComponent;\n    @ContentChild(forwardRef(() => AlertDialogDescriptionComponent)) descriptionCmp?: AlertDialogDescriptionComponent;\n\n    private alertDialogService = inject(AlertDialogInternalService);\n    isOpen = false;\n\n    constructor() {\n        this.alertDialogService.open$.subscribe(val => {\n            this.isOpen = val;\n        });\n    }\n\n    get computedClass() {\n        return cn(\n            \"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\",\n            {\n                'max-w-xs': this.size === 'xs',\n                'max-w-sm': this.size === 'sm',\n                'max-w-md': this.size === 'md',\n                'max-w-lg': this.size === 'lg',\n                'max-w-xl': this.size === 'xl',\n                'max-w-2xl': this.size === '2xl',\n                'max-w-full': this.size === 'full',\n                'max-w-fit': this.size === 'fit',\n            },\n            this.class\n        );\n    }\n}\n\n@Component({\n    selector: 'tolle-alert-dialog-header',\n    standalone: true,\n    imports: [CommonModule],\n    template: `<ng-content></ng-content>`,\n    host: { '[class]': 'computedClass' }\n})\nexport class AlertDialogHeaderComponent {\n    @Input() class: string = '';\n    get computedClass() { return cn(\"flex flex-col space-y-2 text-center sm:text-left\", this.class); }\n}\n\n@Component({\n    selector: 'tolle-alert-dialog-footer',\n    standalone: true,\n    imports: [CommonModule],\n    template: `<ng-content></ng-content>`,\n    host: { '[class]': 'computedClass' }\n})\nexport class AlertDialogFooterComponent {\n    @Input() class: string = '';\n    get computedClass() { return cn(\"flex flex-row justify-end space-x-2\", this.class); }\n}\n\n@Component({\n    selector: 'tolle-alert-dialog-title',\n    styles: [':host { display: block; }'],\n    standalone: true,\n    imports: [CommonModule],\n    template: `<ng-content></ng-content>`,\n    host: { '[class]': 'computedClass', '[attr.id]': 'id' }\n})\nexport class AlertDialogTitleComponent {\n    @Input() class: string = '';\n    /** Stable id referenced by the dialog's `aria-labelledby`. */\n    readonly id = `tolle-alert-dialog-title-${Math.random().toString(36).substr(2, 9)}`;\n    get computedClass() { return cn(\"text-lg font-semibold text-foreground\", this.class); }\n}\n\n@Component({\n    selector: 'tolle-alert-dialog-description',\n    styles: [':host { display: block; }'],\n    standalone: true,\n    imports: [CommonModule],\n    template: `<ng-content></ng-content>`,\n    host: { '[class]': 'computedClass', '[attr.id]': 'id' }\n})\nexport class AlertDialogDescriptionComponent {\n    @Input() class: string = '';\n    /** Stable id referenced by the dialog's `aria-describedby`. */\n    readonly id = `tolle-alert-dialog-description-${Math.random().toString(36).substr(2, 9)}`;\n    get computedClass() { return cn(\"text-sm text-muted-foreground\", this.class); }\n}\n\n@Component({\n    selector: 'tolle-alert-dialog-action',\n  styles: [':host { display: block; }'],\n    standalone: true,\n    imports: [CommonModule],\n    template: `<ng-content></ng-content>`\n})\nexport class AlertDialogActionComponent {\n    private alertDialogService = inject(AlertDialogInternalService, { optional: true });\n\n    /** Fires before the dialog closes, so consumers can run the confirmed action. */\n    @Output() confirmed = new EventEmitter<MouseEvent>();\n\n    @HostListener('click', ['$event'])\n    handleClick(event: MouseEvent) {\n        this.confirmed.emit(event);\n        this.alertDialogService?.setOpen(false);\n    }\n}\n\n@Component({\n    selector: 'tolle-alert-dialog-cancel',\n  styles: [':host { display: block; }'],\n    standalone: true,\n    imports: [CommonModule],\n    template: `<ng-content></ng-content>`\n})\nexport class AlertDialogCancelComponent {\n    private alertDialogService = inject(AlertDialogInternalService, { optional: true });\n\n    /** Fires before the dialog closes, so consumers can react to a dismissal. */\n    @Output() cancelled = new EventEmitter<MouseEvent>();\n\n    @HostListener('click', ['$event'])\n    handleClick(event: MouseEvent) {\n        this.cancelled.emit(event);\n        this.alertDialogService?.setOpen(false);\n    }\n}\n"
+      "content": "import { Component, Input, Output, EventEmitter, HostListener, Injectable, inject, TemplateRef, ViewChild, ViewContainerRef, OnDestroy, OnInit, ContentChild, forwardRef } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { Overlay, OverlayRef, OverlayConfig } from '@angular/cdk/overlay';\nimport { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { cn } from './utils/cn';\nimport { BehaviorSubject } from 'rxjs';\nimport { AlertDialogSize } from './alert-dialog.types';\n\n/**\n * Safety net if the exit animation's `animationend` never fires — reduced\n * motion, no matching keyframe, or a panel that never rendered — so an\n * alert dialog can never get stuck open forever. Also used by\n * `alert-dialog.service.ts` and `alert-dialog-dynamic.component.ts`, which\n * animate the same content component through a different overlay wiring.\n */\nexport const CLOSE_FALLBACK_MS = 300;\n\n@Injectable()\nclass AlertDialogInternalService {\n    private openSubject = new BehaviorSubject<boolean>(false);\n    open$ = this.openSubject.asObservable();\n\n    setOpen(value: boolean) {\n        this.openSubject.next(value);\n    }\n\n    getOpen() {\n        return this.openSubject.getValue();\n    }\n\n    toggle() {\n        this.setOpen(!this.getOpen());\n    }\n}\n\n@Component({\n    selector: 'tolle-alert-dialog',\n  styles: [':host { display: block; }'],\n    standalone: true,\n    imports: [CommonModule],\n    providers: [AlertDialogInternalService],\n    template: `<ng-content></ng-content>`\n})\nexport class AlertDialogComponent {\n    @Input() set open(val: boolean) {\n        this.alertDialogService.setOpen(val);\n    }\n    @Output() openChange = new EventEmitter<boolean>();\n\n    private alertDialogService = inject(AlertDialogInternalService);\n\n    constructor() {\n        this.alertDialogService.open$.subscribe(val => {\n            this.openChange.emit(val);\n        });\n    }\n}\n\n@Component({\n    selector: 'tolle-alert-dialog-trigger',\n  styles: [':host { display: block; }'],\n    standalone: true,\n    imports: [CommonModule],\n    template: `<ng-content></ng-content>`,\n    host: {\n        '(click)': 'onOpen()'\n    }\n})\nexport class AlertDialogTriggerComponent {\n    private alertDialogService = inject(AlertDialogInternalService);\n\n    onOpen() {\n        this.alertDialogService.setOpen(true);\n    }\n}\n\n@Component({\n    selector: 'tolle-alert-dialog-portal',\n  styles: [':host { display: block; }'],\n    standalone: true,\n    imports: [CommonModule],\n    template: `\n    <ng-template #portalContent>\n      <ng-content></ng-content>\n    </ng-template>\n  `\n})\nexport class AlertDialogPortalComponent implements OnInit, OnDestroy {\n    @ViewChild('portalContent', { static: true }) portalContent!: TemplateRef<any>;\n    private alertDialogService = inject(AlertDialogInternalService);\n    private overlay = inject(Overlay);\n    private viewContainerRef = inject(ViewContainerRef);\n    private overlayRef?: OverlayRef;\n    /** Element focused before the dialog opened, restored on close. */\n    private previouslyFocused?: HTMLElement | null;\n\n    ngOnInit() {\n        this.alertDialogService.open$.subscribe(open => {\n            if (open) {\n                this.show();\n            } else {\n                this.hide();\n            }\n        });\n    }\n\n    private show() {\n        if (this.overlayRef) return;\n\n        // Remember the trigger so focus can be restored on close.\n        this.previouslyFocused = document.activeElement as HTMLElement | null;\n\n        const config = new OverlayConfig({\n            hasBackdrop: true,\n            backdropClass: ['cdk-overlay-backdrop', 'bg-black/80', 'backdrop-blur-sm', 'data-[state=open]:animate-in', 'data-[state=closed]:animate-out', 'data-[state=closed]:fade-out-0', 'data-[state=open]:fade-in-0'],\n            positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),\n            scrollStrategy: this.overlay.scrollStrategies.block()\n        });\n\n        this.overlayRef = this.overlay.create(config);\n\n        // Alert-dialog semantics: backdrop clicks must NOT dismiss.\n        // Escape still closes the dialog.\n        this.overlayRef.keydownEvents().subscribe((event: KeyboardEvent) => {\n            if (event.key === 'Escape') {\n                event.preventDefault();\n                this.alertDialogService.setOpen(false);\n            }\n        });\n\n        const portal = new TemplatePortal(this.portalContent, this.viewContainerRef);\n        this.overlayRef.attach(portal);\n\n        // The backdrop element only exists once attached — setting this any\n        // earlier would silently no-op.\n        this.overlayRef.backdropElement?.setAttribute('data-state', 'open');\n    }\n\n    /**\n     * Tears the overlay down once its exit animation finishes (or after\n     * `CLOSE_FALLBACK_MS`, whichever comes first) instead of instantly, so\n     * `data-[state=closed]:animate-out` actually gets a chance to play.\n     */\n    private hide() {\n        const ref = this.overlayRef;\n        if (!ref) return;\n\n        ref.backdropElement?.setAttribute('data-state', 'closed');\n\n        let finished = false;\n        const finish = () => {\n            if (finished) return;\n            finished = true;\n            ref.detach();\n            ref.dispose();\n            if (this.overlayRef === ref) this.overlayRef = undefined;\n            // Restore focus to the trigger.\n            this.previouslyFocused?.focus?.();\n        };\n\n        const panel = ref.overlayElement.querySelector<HTMLElement>('[data-state]');\n        if (panel) {\n            panel.addEventListener('animationend', finish, { once: true });\n            setTimeout(finish, CLOSE_FALLBACK_MS);\n        } else {\n            finish();\n        }\n    }\n\n    ngOnDestroy() {\n        this.hide();\n    }\n}\n\n@Component({\n    selector: 'tolle-alert-dialog-content',\n    standalone: true,\n    imports: [CommonModule, A11yModule],\n    template: `<div [class]=\"computedClass\" [attr.data-state]=\"isOpen ? 'open' : 'closed'\"\n        role=\"alertdialog\"\n        aria-modal=\"true\"\n        [attr.aria-labelledby]=\"titleCmp?.id || null\"\n        [attr.aria-describedby]=\"descriptionCmp?.id || null\"\n        cdkTrapFocus cdkTrapFocusAutoCapture><ng-content></ng-content></div>`,\n    host: {\n        '[class]': '\"contents\"'\n    }\n})\nexport class AlertDialogContentComponent {\n    @Input() class: string = '';\n    @Input() size: AlertDialogSize = 'lg';\n\n    /** Projected title/description used to build the dialog's accessible name. */\n    @ContentChild(forwardRef(() => AlertDialogTitleComponent)) titleCmp?: AlertDialogTitleComponent;\n    @ContentChild(forwardRef(() => AlertDialogDescriptionComponent)) descriptionCmp?: AlertDialogDescriptionComponent;\n\n    private alertDialogService = inject(AlertDialogInternalService);\n    isOpen = false;\n\n    constructor() {\n        this.alertDialogService.open$.subscribe(val => {\n            this.isOpen = val;\n        });\n    }\n\n    get computedClass() {\n        return cn(\n            \"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\",\n            {\n                'max-w-xs': this.size === 'xs',\n                'max-w-sm': this.size === 'sm',\n                'max-w-md': this.size === 'md',\n                'max-w-lg': this.size === 'lg',\n                'max-w-xl': this.size === 'xl',\n                'max-w-2xl': this.size === '2xl',\n                'max-w-full': this.size === 'full',\n                'max-w-fit': this.size === 'fit',\n            },\n            this.class\n        );\n    }\n}\n\n@Component({\n    selector: 'tolle-alert-dialog-header',\n    standalone: true,\n    imports: [CommonModule],\n    template: `<ng-content></ng-content>`,\n    host: { '[class]': 'computedClass' }\n})\nexport class AlertDialogHeaderComponent {\n    @Input() class: string = '';\n    get computedClass() { return cn(\"flex flex-col space-y-2 text-center sm:text-left\", this.class); }\n}\n\n@Component({\n    selector: 'tolle-alert-dialog-footer',\n    standalone: true,\n    imports: [CommonModule],\n    template: `<ng-content></ng-content>`,\n    host: { '[class]': 'computedClass' }\n})\nexport class AlertDialogFooterComponent {\n    @Input() class: string = '';\n    get computedClass() { return cn(\"flex flex-row justify-end space-x-2\", this.class); }\n}\n\n@Component({\n    selector: 'tolle-alert-dialog-title',\n    styles: [':host { display: block; }'],\n    standalone: true,\n    imports: [CommonModule],\n    template: `<ng-content></ng-content>`,\n    host: { '[class]': 'computedClass', '[attr.id]': 'id' }\n})\nexport class AlertDialogTitleComponent {\n    @Input() class: string = '';\n    /** Stable id referenced by the dialog's `aria-labelledby`. */\n    readonly id = `tolle-alert-dialog-title-${Math.random().toString(36).substr(2, 9)}`;\n    get computedClass() { return cn(\"text-lg font-semibold text-foreground\", this.class); }\n}\n\n@Component({\n    selector: 'tolle-alert-dialog-description',\n    styles: [':host { display: block; }'],\n    standalone: true,\n    imports: [CommonModule],\n    template: `<ng-content></ng-content>`,\n    host: { '[class]': 'computedClass', '[attr.id]': 'id' }\n})\nexport class AlertDialogDescriptionComponent {\n    @Input() class: string = '';\n    /** Stable id referenced by the dialog's `aria-describedby`. */\n    readonly id = `tolle-alert-dialog-description-${Math.random().toString(36).substr(2, 9)}`;\n    get computedClass() { return cn(\"text-sm text-muted-foreground\", this.class); }\n}\n\n@Component({\n    selector: 'tolle-alert-dialog-action',\n  styles: [':host { display: block; }'],\n    standalone: true,\n    imports: [CommonModule],\n    template: `<ng-content></ng-content>`\n})\nexport class AlertDialogActionComponent {\n    private alertDialogService = inject(AlertDialogInternalService, { optional: true });\n\n    /** Fires before the dialog closes, so consumers can run the confirmed action. */\n    @Output() confirmed = new EventEmitter<MouseEvent>();\n\n    @HostListener('click', ['$event'])\n    handleClick(event: MouseEvent) {\n        this.confirmed.emit(event);\n        this.alertDialogService?.setOpen(false);\n    }\n}\n\n@Component({\n    selector: 'tolle-alert-dialog-cancel',\n  styles: [':host { display: block; }'],\n    standalone: true,\n    imports: [CommonModule],\n    template: `<ng-content></ng-content>`\n})\nexport class AlertDialogCancelComponent {\n    private alertDialogService = inject(AlertDialogInternalService, { optional: true });\n\n    /** Fires before the dialog closes, so consumers can react to a dismissal. */\n    @Output() cancelled = new EventEmitter<MouseEvent>();\n\n    @HostListener('click', ['$event'])\n    handleClick(event: MouseEvent) {\n        this.cancelled.emit(event);\n        this.alertDialogService?.setOpen(false);\n    }\n}\n"
     },
     {
       "path": "alert-dialog.types.ts",

package/registry/r/bar-list.json

@@ -0,0 +1,21 @@
+{
+  "name": "bar-list",
+  "type": "registry:ui",
+  "title": "Bar List",
+  "description": "Bar List component.",
+  "category": "components",
+  "registryDependencies": [],
+  "dependencies": [],
+  "files": [
+    {
+      "path": "bar-list.component.ts",
+      "target": "ui/bar-list.component.ts",
+      "content": "import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef, OnChanges, inject } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { cn } from './utils/cn';\n\n/** One resolved row: its label, its value, and its share of the list's largest value. */\nexport interface BarListRow {\n  label: string;\n  value: number;\n  percent: number;\n  formattedValue: string;\n}\n\n/**\n * A ranked list of horizontal bars — label left, value right, bar width\n * scaled to each row's share of the list's largest value. Unlike a chart\n * series or a category bar's segments, every bar is the same accent: rank is\n * carried by length, not by a categorical palette.\n * @new\n */\n@Component({\n  selector: 'tolle-bar-list',\n  styles: [':host { display: block; }'],\n  standalone: true,\n  imports: [CommonModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div [class]=\"computedClass\">\n      <div\n        *ngFor=\"let row of rows; trackBy: trackByIndex\"\n        class=\"relative flex items-center overflow-hidden rounded-sm\"\n      >\n        <div class=\"absolute inset-y-0 left-0 rounded-sm bg-primary/15\" [style.width.%]=\"row.percent\"></div>\n        <span class=\"relative z-10 truncate px-2 py-1.5 text-sm text-foreground\">{{ row.label }}</span>\n        <span class=\"relative z-10 ml-auto shrink-0 px-2 py-1.5 text-sm font-medium tabular-nums text-foreground\">\n          {{ row.formattedValue }}\n        </span>\n      </div>\n    </div>\n  `,\n})\nexport class BarListComponent implements OnChanges {\n  /**\n   * Angular writes a bound `class` input through its styling path, which does\n   * not mark an OnPush component dirty — without this hook the component keeps\n   * rendering the class it was born with.\n   */\n  ngOnChanges(): void {\n    this.cdr.markForCheck();\n  }\n\n  /** Identity for `*ngFor`, so a redraw patches nodes instead of replacing them. */\n  trackByIndex = (index: number): number => index;\n\n  /** Rows to rank, in the order they should be drawn. @default [] */\n  @Input() data: Record<string, any>[] = [];\n  /** Row key holding each row's label. @default 'label' */\n  @Input() labelKey = 'label';\n  /** Row key holding each row's numeric value. @default 'value' */\n  @Input() valueKey = 'value';\n  /** Extra Tailwind classes merged onto the list via `cn()` (last-wins). */\n  @Input() class = '';\n\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  get rows(): BarListRow[] {\n    const rows = this.data ?? [];\n    const values = rows.map((row) => {\n      const num = Number(row?.[this.valueKey]);\n      return Number.isFinite(num) ? num : 0;\n    });\n    const max = values.reduce((m, v) => Math.max(m, v), 0);\n\n    return rows.map((row, i) => {\n      const raw = row?.[this.labelKey];\n      const value = values[i];\n      return {\n        label: raw == null ? '' : String(raw),\n        value,\n        percent: max > 0 ? Math.max(0, Math.min(100, (value / max) * 100)) : 0,\n        formattedValue: value.toLocaleString('en-US'),\n      };\n    });\n  }\n\n  get computedClass() {\n    return cn('flex w-full flex-col gap-1', this.class);\n  }\n}\n"
+    },
+    {
+      "path": "utils/cn.ts",
+      "target": "ui/utils/cn.ts",
+      "content": "import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
+    }
+  ]
+}

package/registry/r/category-bar.json

@@ -0,0 +1,21 @@
+{
+  "name": "category-bar",
+  "type": "registry:ui",
+  "title": "Category Bar",
+  "description": "Category Bar component.",
+  "category": "components",
+  "registryDependencies": [],
+  "dependencies": [],
+  "files": [
+    {
+      "path": "category-bar.component.ts",
+      "target": "ui/category-bar.component.ts",
+      "content": "import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef, OnChanges, inject } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { cn } from './utils/cn';\n\n/** One resolved segment: its share of the bar's width, its paint, and the numbers behind it. */\nexport interface CategoryBarSegment {\n  label: string;\n  value: number;\n  percent: number;\n  color: string;\n}\n\n/**\n * A single bar split into proportional, labelled ranges — for showing where\n * one value falls against a scale made of categories (a credit score inside\n * \"Poor / Fair / Good / Excellent\", latency inside \"Fast / OK / Slow\").\n *\n * Segments take the chart palette by position, since a category bar has no\n * stable per-render identity to key colour off the way a chart series does —\n * pass `colors` to override.\n * @new\n */\n@Component({\n  selector: 'tolle-category-bar',\n  styles: [':host { display: block; }'],\n  standalone: true,\n  imports: [CommonModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div [class]=\"computedClass\">\n      <div class=\"relative flex w-full gap-0.5\">\n        <div\n          *ngFor=\"let segment of segments; let i = index; trackBy: trackByIndex\"\n          class=\"h-2 first:rounded-l-full last:rounded-r-full\"\n          [style.width.%]=\"segment.percent\"\n          [style.background]=\"segment.color\"\n          [attr.title]=\"segment.label || null\"\n        ></div>\n\n        <span\n          *ngIf=\"clampedMarker !== null\"\n          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\"\n          [style.left.%]=\"clampedMarker\"\n        ></span>\n      </div>\n\n      <p class=\"sr-only\">{{ summary }}</p>\n    </div>\n  `,\n})\nexport class CategoryBarComponent implements OnChanges {\n  /**\n   * Angular writes a bound `class` input through its styling path, which does\n   * not mark an OnPush component dirty — without this hook the component keeps\n   * rendering the class it was born with.\n   */\n  ngOnChanges(): void {\n    this.cdr.markForCheck();\n  }\n\n  /** Identity for `*ngFor`, so a redraw patches nodes instead of replacing them. */\n  trackByIndex = (index: number): number => index;\n\n  /** Width of each segment. Values that are not finite and greater than zero are dropped. @default [] */\n  @Input() values: number[] = [];\n  /** Name for each segment, used in the accessible summary and as a title tooltip. @default [] */\n  @Input() labels: string[] = [];\n  /** Paint for each segment, by index. Falls back to the chart palette --chart-1 through --chart-5. @default [] */\n  @Input() colors: string[] = [];\n  /** Position of the pointer, 0-100 on the same scale the segments sum to. Omit to draw no pointer. @default null */\n  @Input() markerValue: number | null = null;\n  /** Accessible name, prefixed onto the sr-only summary of segments and marker. @default '' */\n  @Input() ariaLabel = '';\n  /** Extra Tailwind classes merged onto the bar via `cn()` (last-wins). */\n  @Input() class = '';\n\n  private readonly cdr = inject(ChangeDetectorRef);\n\n  private get total(): number {\n    return this.values.reduce((sum, v) => (Number.isFinite(v) && v > 0 ? sum + v : sum), 0);\n  }\n\n  get segments(): CategoryBarSegment[] {\n    const total = this.total;\n    if (total <= 0) return [];\n\n    return this.values\n      .map((value, i) => ({ value, i }))\n      .filter(({ value }) => Number.isFinite(value) && value > 0)\n      .map(({ value, i }) => ({\n        label: this.labels[i] ?? '',\n        value,\n        percent: (value / total) * 100,\n        color: this.colors[i] || 'rgb(var(--chart-' + ((i % 5) + 1) + '))',\n      }));\n  }\n\n  get clampedMarker(): number | null {\n    if (this.markerValue == null || !Number.isFinite(this.markerValue)) return null;\n    return Math.min(100, Math.max(0, this.markerValue));\n  }\n\n  get summary(): string {\n    const parts = this.segments.map((s) => (s.label ? s.label + ': ' : '') + s.percent.toFixed(0) + '%');\n    const marker = this.clampedMarker !== null ? ', current position ' + this.clampedMarker.toFixed(0) + '%' : '';\n    const prefix = this.ariaLabel ? this.ariaLabel + '. ' : '';\n    return prefix + parts.join(', ') + marker;\n  }\n\n  get computedClass() {\n    return cn('w-full', this.class);\n  }\n}\n"
+    },
+    {
+      "path": "utils/cn.ts",
+      "target": "ui/utils/cn.ts",
+      "content": "import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
+    }
+  ]
+}