@tolle_/tolle-ui 18.2.24 → 18.2.25

package/lib/select-item.component.d.ts

@@ -10,12 +10,15 @@ export declare class SelectItemComponent {
     selected: boolean;
     disabled: boolean;
     multiSelect: boolean;
+    id: string;
+    active: boolean;
     hidden: boolean;
     constructor(selectService: SelectService, el: ElementRef);
     getLabel(): string;
+    scrollIntoActiveView(): void;
     getItemClasses(): string;
     onClick(event: MouseEvent): void;
     protected cn: typeof cn;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectItemComponent, [{ optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectItemComponent, "tolle-select-item", never, { "value": { "alias": "value"; "required": false; }; "class": { "alias": "class"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "multiSelect": { "alias": "multiSelect"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectItemComponent, "tolle-select-item", never, { "value": { "alias": "value"; "required": false; }; "class": { "alias": "class"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "multiSelect": { "alias": "multiSelect"; "required": false; }; "id": { "alias": "id"; "required": false; }; "active": { "alias": "active"; "required": false; }; }, {}, never, ["*"], true, never>;
 }

package/lib/select.component.d.ts

@@ -16,6 +16,7 @@ export declare class SelectComponent implements ControlValueAccessor, AfterConte
     trigger: ElementRef;
     popover: ElementRef;
     container: ElementRef;
+    searchInput?: ElementRef<HTMLElement>;
     items: QueryList<SelectItemComponent>;
     private sub;
     private itemsChangeSub?;
@@ -26,6 +27,10 @@ export declare class SelectComponent implements ControlValueAccessor, AfterConte
     value: any;
     selectedLabel: string;
     cleanupAutoUpdate?: () => void;
+    activeIndex: number;
+    private typeaheadBuffer;
+    private typeaheadTime;
+    private pendingTypeaheadChar;
     onChange: any;
     onTouched: any;
     protected cn: typeof cn;
@@ -42,6 +47,21 @@ export declare class SelectComponent implements ControlValueAccessor, AfterConte
     close(): void;
     private updatePosition;
     onSearchChange(query: string): void;
+    private get navigableItems();
+    get activeDescendantId(): string | null;
+    private updateActiveStates;
+    private syncActiveDescendant;
+    private setActive;
+    private setActiveItem;
+    private moveActive;
+    private setActiveToSelectedOrFirst;
+    private initActiveAfterOpen;
+    private resetActive;
+    private isTypeaheadChar;
+    private typeahead;
+    private selectActive;
+    onTriggerKeyDown(event: KeyboardEvent): void;
+    onSearchKeyDown(event: KeyboardEvent): void;
     writeValue(value: any): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;

package/lib/separator.component.d.ts

@@ -1,6 +1,8 @@
 import * as i0 from "@angular/core";
 export declare class SeparatorComponent {
+    /** Orientation of the rule. @default 'horizontal' */
     orientation: 'horizontal' | 'vertical';
+    /** When true, the separator is purely visual (aria-hidden, role="none"). @default true */
     decorative: boolean;
     class: string;
     get computedClass(): string;

package/lib/sheet-wrapper.component.d.ts

@@ -5,6 +5,10 @@ export declare class SheetWrapperComponent implements OnInit {
     contentType: 'template' | 'string' | 'component';
     content: any;
     isOpen: boolean;
+    /** Stable, per-instance ids used to wire dialog ARIA relationships. */
+    private readonly _uid;
+    readonly titleId: string;
+    readonly descId: string;
     ref: SheetRef<any>;
     ngOnInit(): void;
     private determineContentType;

package/lib/sheet.component.d.ts

@@ -8,6 +8,8 @@ export declare class SheetComponent {
     private viewContainerRef;
     private scrollStrategy;
     private overlayRef?;
+    /** Element focused before the sheet opened, restored on close. */
+    private previouslyFocused?;
     contentComponent?: any;
     open(): void;
     close(): void;
@@ -28,11 +30,14 @@ export declare class SheetContentComponent {
     rounded: boolean;
     class: string;
     contentTemplate: TemplateRef<any>;
+    /** Projected title/description used to build the dialog's accessible name. */
+    titleCmp?: SheetTitleComponent;
+    descriptionCmp?: SheetDescriptionComponent;
     sheet: SheetComponent;
     close(): void;
     get computedClass(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<SheetContentComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SheetContentComponent, "tolle-sheet-content", never, { "side": { "alias": "side"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SheetContentComponent, "tolle-sheet-content", never, { "side": { "alias": "side"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, ["titleCmp", "descriptionCmp"], ["*"], true, never>;
 }
 export declare class SheetHeaderComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<SheetHeaderComponent, never>;
@@ -43,10 +48,14 @@ export declare class SheetFooterComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<SheetFooterComponent, "tolle-sheet-footer", never, {}, {}, never, ["*"], true, never>;
 }
 export declare class SheetTitleComponent {
+    /** Stable id referenced by the sheet's `aria-labelledby`. */
+    readonly id: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<SheetTitleComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SheetTitleComponent, "tolle-sheet-title", never, {}, {}, never, ["*"], true, never>;
 }
 export declare class SheetDescriptionComponent {
+    /** Stable id referenced by the sheet's `aria-describedby`. */
+    readonly id: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<SheetDescriptionComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SheetDescriptionComponent, "tolle-sheet-description", never, {}, {}, never, ["*"], true, never>;
 }

package/lib/sidebar.component.d.ts

@@ -9,6 +9,8 @@ export type SidebarItem = {
     items?: SidebarItem[];
     id?: string;
     expanded?: boolean;
+    /** Render as a plain anchor to an external URL / static file (opens in a new tab) instead of a router link. */
+    external?: boolean;
 };
 export type SidebarGroup = {
     title: string;

package/lib/skeleton.component.d.ts

@@ -1,10 +1,16 @@
-import { cn } from './utils/cn';
+import { type VariantProps } from 'class-variance-authority';
 import * as i0 from "@angular/core";
+declare const skeletonVariants: (props?: ({
+    variant?: "rect" | "circle" | "pill" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type SkeletonProps = VariantProps<typeof skeletonVariants>;
 export declare class SkeletonComponent {
-    variant: 'rect' | 'circle' | 'pill';
+    /** Shape of the skeleton placeholder. @default 'rect' */
+    variant: SkeletonProps['variant'];
+    /** Extra Tailwind classes merged onto the skeleton via `cn()` (last-wins). */
     class: string;
-    protected readonly cn: typeof cn;
     get computedClass(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SkeletonComponent, "tolle-skeleton", never, { "variant": { "alias": "variant"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
 }
+export {};

package/lib/switch.component.d.ts

@@ -1,34 +1,26 @@
 import { ChangeDetectorRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { cn } from './utils/cn';
+import { type VariantProps } from 'class-variance-authority';
 import * as i0 from "@angular/core";
+declare const switchTrackVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | null | undefined;
+    checked?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type SwitchProps = VariantProps<typeof switchTrackVariants>;
 export declare class SwitchComponent implements ControlValueAccessor {
     private cdr;
+    /** Extra Tailwind classes merged onto the switch track via `cn()` (last-wins). */
     class: string;
+    /** Disables the switch and blocks toggling. @default false */
     disabled: boolean;
-    size: 'xs' | 'sm' | 'default' | 'lg';
+    /** Size of the switch. @default 'default' */
+    size: SwitchProps['size'];
     checked: boolean;
     onChange: any;
     onTouched: any;
     constructor(cdr: ChangeDetectorRef);
-    get sizeClasses(): {
-        track: string;
-        thumb: string;
-        translate: string;
-    } | {
-        track: string;
-        thumb: string;
-        translate: string;
-    } | {
-        track: string;
-        thumb: string;
-        translate: string;
-    } | {
-        track: string;
-        thumb: string;
-        translate: string;
-    };
-    protected cn: typeof cn;
+    get trackClass(): string;
+    get thumbClass(): string;
     toggle(): void;
     writeValue(value: boolean): void;
     registerOnChange(fn: any): void;
@@ -37,3 +29,4 @@ export declare class SwitchComponent implements ControlValueAccessor {
     static ɵfac: i0.ɵɵFactoryDeclaration<SwitchComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SwitchComponent, "tolle-switch", never, { "class": { "alias": "class"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
 }
+export {};

package/lib/tabs.component.d.ts

@@ -1,5 +1,10 @@
 import { EventEmitter } from '@angular/core';
+import { type VariantProps } from 'class-variance-authority';
 import * as i0 from "@angular/core";
+declare const tabsListVariants: (props?: ({
+    variant?: "default" | "underline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type TabsListProps = VariantProps<typeof tabsListVariants>;
 export declare class TabsComponent {
     defaultValue?: string;
     value?: string;
@@ -12,8 +17,10 @@ export declare class TabsComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<TabsComponent, "tolle-tabs", never, { "defaultValue": { "alias": "defaultValue"; "required": false; }; "value": { "alias": "value"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "valueChange": "valueChange"; }, never, ["*"], true, never>;
 }
 export declare class TabsListComponent {
+    /** Extra Tailwind classes merged onto the tabs list via `cn()` (last-wins). */
     class: string;
-    variant: 'default' | 'underline';
+    /** Visual style of the tab list. @default 'default' */
+    variant: TabsListProps['variant'];
     get computedClass(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<TabsListComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TabsListComponent, "tolle-tabs-list", never, { "class": { "alias": "class"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, {}, never, ["*"], true, never>;
@@ -23,9 +30,11 @@ export declare class TabsTriggerComponent {
     class: string;
     private tabsService;
     private tabsList;
+    private el;
     isActive: boolean;
     constructor();
     onActivate(): void;
+    onKeydown(event: KeyboardEvent): void;
     get computedClass(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<TabsTriggerComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TabsTriggerComponent, "tolle-tabs-trigger", never, { "value": { "alias": "value"; "required": true; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
@@ -40,3 +49,4 @@ export declare class TabsContentComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<TabsContentComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TabsContentComponent, "tolle-tabs-content", never, { "value": { "alias": "value"; "required": true; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
+export {};

package/lib/theme.service.d.ts

@@ -9,18 +9,33 @@ export declare class ThemeService {
     private _isDark;
     isDark$: import("rxjs").Observable<boolean>;
     private styleId;
+    private baseStyleId;
+    private chartStyleId;
     constructor(document: Document, platformId: object, config: TolleConfig, rendererFactory: RendererFactory2);
     private initializeTheme;
+    /** Set a typography stack (`--font-sans` / `--font-serif` / `--font-mono`). */
+    setFont(kind: 'sans' | 'serif' | 'mono', stack: string, persist?: boolean): void;
+    /** Read the current stack for a font role from the live document. */
+    getFont(kind: 'sans' | 'serif' | 'mono'): string;
+    /** Set light/dark explicitly (a directional companion to `toggleTheme`). */
+    setAppearance(mode: 'light' | 'dark', persist?: boolean): void;
+    /**
+     * Set the neutral base-color family (background/foreground/card/muted/border…).
+     * Accepts a family id: `zinc` | `slate` | `gray` | `neutral` | `stone`.
+     */
+    setBaseColor(baseId: string, persist?: boolean): void;
+    /** Set the chart palette from a base hex; derives `--chart-1…5`. */
+    setChartColor(hex: string, persist?: boolean): void;
+    /** Read the current base-color family id (persisted), or null. */
+    get baseColor(): string | null;
+    /** Read the current chart base color (persisted), or null. */
+    get chartColor(): string | null;
+    /** Upsert a keyed <style> element in <head> with the given CSS text. */
+    private injectStyleById;
     setRadius(radius: string, persist?: boolean): void;
     private updateAllRadiusVariables;
     private updateRadiusInDynamicStyles;
     private generatePrimaryShades;
-    private hexToRgb;
-    private hexToRgbString;
-    private getContrastColorRgb;
-    private lightenColor;
-    private darkenColor;
-    private getContrastColor;
     private injectDynamicStyles;
     toggleTheme(): void;
     private enableDarkMode;

package/lib/toaster.component.d.ts

@@ -10,8 +10,8 @@ export declare class ToastContainerComponent {
         success: string;
         default: string;
     };
-    getVariantClasses(variant?: string): "border-destructive/50 bg-destructive/5 dark:bg-red-950 text-destructive dark:text-red-400" | "border-emerald-500/50 bg-emerald-50 dark:bg-emerald-950 text-emerald-700 dark:text-emerald-400" | "bg-background text-foreground border-border";
-    getProgressClasses(variant?: string): "bg-destructive dark:bg-red-400" | "bg-emerald-600 dark:bg-emerald-400" | "bg-primary";
+    getVariantClasses(variant?: string): "border-destructive/50 bg-destructive/10 text-destructive" | "border-success/50 bg-success/10 text-success" | "bg-background text-foreground border-border";
+    getProgressClasses(variant?: string): "bg-primary" | "bg-destructive" | "bg-success";
     get positionClasses(): string;
     protected cn: typeof cn;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToastContainerComponent, never>;

package/lib/toggle-group.component.d.ts

@@ -1,7 +1,7 @@
-import { EventEmitter, QueryList, AfterContentInit, ChangeDetectorRef } from '@angular/core';
+import { EventEmitter, QueryList, AfterContentInit, AfterViewInit, ChangeDetectorRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import * as i0 from "@angular/core";
-export declare class ToggleGroupComponent implements AfterContentInit, ControlValueAccessor {
+export declare class ToggleGroupComponent implements AfterContentInit, AfterViewInit, ControlValueAccessor {
     type: 'single' | 'multiple';
     variant: 'default' | 'outline';
     size: 'default' | 'sm' | 'lg';
@@ -11,12 +11,30 @@ export declare class ToggleGroupComponent implements AfterContentInit, ControlVa
     items: QueryList<ToggleGroupItemComponent>;
     private _value;
     private cdr;
+    private host;
+    /** Index (into the full button list) of the current roving tab stop. */
+    private activeIndex;
     onChange: any;
     onTouched: any;
     get value(): any;
     set value(v: any);
     ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
     get computedClass(): string;
+    /** All toggle button elements in DOM order. */
+    private get toggleButtons();
+    /**
+     * Roving tabindex: exactly one toggle button is tab-reachable at a time.
+     * Defaults to the current active button, falling back to the first enabled.
+     */
+    private applyRovingTabindex;
+    /**
+     * Toolbar keyboard nav: Arrow Left/Right (and Home/End) move focus between
+     * toggle buttons without activating them (toggles activate on Enter/Space/click).
+     */
+    onKeydown(event: KeyboardEvent): void;
+    /** Keep the roving tab stop in sync when a button gains focus (tab/click). */
+    onFocusIn(event: FocusEvent): void;
     writeValue(value: any): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;

package/lib/toggle.component.d.ts

@@ -4,7 +4,7 @@ import { type VariantProps } from 'class-variance-authority';
 import * as i0 from "@angular/core";
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "sm" | "default" | "lg" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ToggleProps = VariantProps<typeof toggleVariants>;
 export declare class ToggleComponent implements ControlValueAccessor {

package/lib/tolle-config.d.ts

@@ -4,6 +4,14 @@ export interface TolleConfig {
     radius?: string;
     defaultToastDuration?: number;
     darkByDefault?: boolean;
+    /** Neutral base-color family: `zinc` | `slate` | `gray` | `neutral` | `stone`. */
+    baseColor?: string;
+    /** Chart base color (hex); derives `--chart-1…5`. */
+    chartColor?: string;
+    /** Typography stacks applied to `--font-sans` / `--font-serif` / `--font-mono`. */
+    fontSans?: string;
+    fontSerif?: string;
+    fontMono?: string;
 }
 export declare const TOLLE_CONFIG: InjectionToken<TolleConfig>;
 export declare function provideTolleConfig(config: TolleConfig): Provider[];

package/lib/tooltip.directive.d.ts

@@ -6,8 +6,11 @@ export declare class TooltipDirective implements OnDestroy {
     placement: 'top' | 'bottom' | 'left' | 'right';
     private tooltipEl;
     private cleanup?;
+    private showTimeout?;
+    private readonly tooltipId;
     constructor(el: ElementRef);
     show(): void;
+    onFocus(): void;
     hide(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TooltipDirective, never>;

package/lib/utils/color.d.ts

@@ -0,0 +1,87 @@
+/**
+ * Pure color + theme-token math for Tolle UI.
+ *
+ * Framework- and DOM-free so it can back both the runtime `ThemeService` and a
+ * build-time theme generator (the shadcn-style "copy this CSS block" flow), and
+ * to centralize the math ahead of a future oklch migration. No side effects.
+ */
+export interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+/** Parse a #RGB or #RRGGBB hex string to RGB, or null if malformed. */
+export declare function hexToRgb(hex: string): Rgb | null;
+/** Space-separated RGB triplet for a hex color (Tailwind `<alpha-value>` form). */
+export declare function rgbTriplet(hex: string, fallback?: string): string;
+/** Black or white, whichever contrasts better with the given color. */
+export declare function getContrastColor(hex: string): string;
+/** Contrast color as an RGB triplet (for `--primary-foreground`). */
+export declare function contrastTriplet(hex: string): string;
+/** Lighten a hex color toward white by `percent` (0–100). */
+export declare function lightenColor(hex: string, percent: number): string;
+export interface Hsl {
+    h: number;
+    s: number;
+    l: number;
+}
+/** Convert a hex color to HSL (h 0–360, s/l 0–100), or null if malformed. */
+export declare function hexToHsl(hex: string): Hsl | null;
+/** Convert HSL (h 0–360, s/l 0–100) to a #RRGGBB hex string. */
+export declare function hslToHex(h: number, s: number, l: number): string;
+/** Darken a hex color toward black by `percent` (0–100). */
+export declare function darkenColor(hex: string, percent: number): string;
+/** Derived radius scale from a base radius (e.g. '0.5rem'), or null if malformed. */
+export declare function radiusScale(radius: string): Record<string, string> | null;
+/** Optional typography stacks for the theme generator. */
+export interface FontTokens {
+    sans?: string;
+    serif?: string;
+    mono?: string;
+}
+/**
+ * Generate the `:root` + `.dark` CSS custom-property block for a primary color
+ * (full 50–900 ramp, contrast foreground, focus ring, and radius scale). This is
+ * the theme-generator engine — identical to what `ThemeService` injects at runtime,
+ * and suitable for emitting a copy-paste block a consumer can commit.
+ *
+ * Pass `fonts` to also emit `--font-sans` / `--font-serif` / `--font-mono` (they
+ * do not vary between light and dark, so they land in `:root` only).
+ */
+export declare function generateThemeCss(primaryHex: string, radius?: string, fonts?: FontTokens): string;
+/** The neutral surface/foreground tokens a base color drives (one appearance). */
+export interface BaseTokens {
+    background: string;
+    foreground: string;
+    card: string;
+    cardForeground: string;
+    popover: string;
+    popoverForeground: string;
+    muted: string;
+    mutedForeground: string;
+    accent: string;
+    accentForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    border: string;
+    input: string;
+}
+export interface BasePalette {
+    light: BaseTokens;
+    dark: BaseTokens;
+}
+/**
+ * Neutral base-color families (RGB triplets), matching Tailwind's Zinc / Slate /
+ * Gray / Neutral / Stone ramps. `zinc` reproduces the library's shipped defaults.
+ */
+export declare const BASE_PALETTES: Record<string, BasePalette>;
+/** Emit the `:root` + `.dark` neutral-token block for a base color id. */
+export declare function generateBaseCss(baseId: string): string;
+/**
+ * Derive 5 harmonious chart colors from one base hex — the base hue plus
+ * analogous hues at ±30°/±60°, with paired lightness shifts for separation.
+ * Returns RGB triplets for `--chart-1`…`--chart-5`.
+ */
+export declare function generateChartRamp(hex: string): string[];
+/** Emit the `:root` + `.dark` `--chart-1…5` block for a chart base color. */
+export declare function generateChartCss(hex: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tolle_/tolle-ui",
-  "version": "18.2.24",
+  "version": "18.2.25",
   "publishConfig": {
     "access": "public"
   },
@@ -11,6 +11,9 @@
     "./preset": {
       "default": "./preset.js"
     },
+    "./registry/*": {
+      "default": "./registry/*"
+    },
     "./package.json": {
       "default": "./package.json"
     },

package/preset.js

@@ -36,6 +36,18 @@ module.exports = {
           DEFAULT: 'rgb(var(--destructive) / <alpha-value>)',
           foreground: 'rgb(var(--destructive-foreground) / <alpha-value>)',
         },
+        success: {
+          DEFAULT: 'rgb(var(--success) / <alpha-value>)',
+          foreground: 'rgb(var(--success-foreground) / <alpha-value>)',
+        },
+        warning: {
+          DEFAULT: 'rgb(var(--warning) / <alpha-value>)',
+          foreground: 'rgb(var(--warning-foreground) / <alpha-value>)',
+        },
+        info: {
+          DEFAULT: 'rgb(var(--info) / <alpha-value>)',
+          foreground: 'rgb(var(--info-foreground) / <alpha-value>)',
+        },
         muted: {
           DEFAULT: 'rgb(var(--muted) / <alpha-value>)',
           foreground: 'rgb(var(--muted-foreground) / <alpha-value>)',
@@ -52,6 +64,22 @@ module.exports = {
           DEFAULT: 'rgb(var(--card) / <alpha-value>)',
           foreground: 'rgb(var(--card-foreground) / <alpha-value>)',
         },
+
+        // Chart palette — driven by --chart-1..5 (theme generator / ThemeService).
+        chart: {
+          1: 'rgb(var(--chart-1) / <alpha-value>)',
+          2: 'rgb(var(--chart-2) / <alpha-value>)',
+          3: 'rgb(var(--chart-3) / <alpha-value>)',
+          4: 'rgb(var(--chart-4) / <alpha-value>)',
+          5: 'rgb(var(--chart-5) / <alpha-value>)',
+        },
+      },
+      fontFamily: {
+        // Driven by the CSS custom properties in theme.css so the theme
+        // generator / ThemeService can re-skin typography at runtime.
+        sans: ['var(--font-sans)'],
+        serif: ['var(--font-serif)'],
+        mono: ['var(--font-mono)'],
       },
       borderRadius: {
         lg: 'var(--radius)',

package/public-api.d.ts

@@ -1,4 +1,5 @@
 export * from './lib/utils/cn';
+export * from './lib/utils/color';
 export * from './lib/button.component';
 export * from './lib/input.component';
 export * from './lib/card.component';