@tolle_/tolle-ui 18.2.29 → 18.3.0

package/lib/time-picker.component.d.ts

@@ -0,0 +1,243 @@
+import { EventEmitter, ElementRef, QueryList, ChangeDetectorRef, OnDestroy, OnInit, OnChanges } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { type VariantProps } from 'class-variance-authority';
+import { cn } from './utils/cn';
+import * as i0 from "@angular/core";
+/** A wall-clock time with no date and no timezone attached. */
+export interface TimeParts {
+    hour: number;
+    minute: number;
+    second: number;
+}
+/** Seconds elapsed since midnight for a wall-clock time. */
+export declare function timePartsToSeconds(parts: TimeParts): number;
+/**
+ * Parses `HH:mm` or `HH:mm:ss` (24-hour). Returns `null` for anything that
+ * is not a well-formed, in-range time — callers treat that as "no value".
+ */
+export declare function parseTimeString(value: string | null | undefined): TimeParts | null;
+/** Renders a wall-clock time as `HH:mm`, or `HH:mm:ss` when `withSeconds`. */
+export declare function formatTimeString(parts: TimeParts, withSeconds?: boolean): string;
+/**
+ * 24-hour hour to its 12-hour clock face. Midnight is `12 AM` and noon is
+ * `12 PM` — the two values that a naive `hour % 12` gets wrong.
+ */
+export declare function to12Hour(hour24: number): {
+    hour12: number;
+    meridiem: 'AM' | 'PM';
+};
+/** 12-hour clock face back to a 24-hour hour. `12 AM` is 0, `12 PM` is 12. */
+export declare function from12Hour(hour12: number, meridiem: 'AM' | 'PM'): number;
+/** Which unit a column of the picker scrolls through. */
+export type TimeColumnKind = 'hour' | 'minute' | 'second' | 'meridiem';
+/** One entry inside a time column. */
+export interface TimeOption {
+    /** Stable identity for `trackBy` and `aria-activedescendant`. */
+    id: string;
+    /** Text shown to the user. */
+    label: string;
+    /**
+     * The 24-hour value this entry commits for its column. For a `meridiem`
+     * column this is the resulting 24-hour *hour*.
+     */
+    raw: number;
+    /** Value used for the selected comparison (clock-face value for hours). */
+    face: number;
+    disabled: boolean;
+}
+/** A scrollable column of the picker. */
+export interface TimeColumn {
+    kind: TimeColumnKind;
+    label: string;
+    options: TimeOption[];
+}
+declare const timeOptionVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | null | undefined;
+    selected?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Variant props for the option rows inside a time column. */
+export type TimeColumnsProps = VariantProps<typeof timeOptionVariants>;
+/**
+ * The bare scrollable hour / minute / second / AM-PM columns, with no trigger
+ * and no popover of its own.
+ *
+ * `tolle-time-picker` wraps this in a floating panel, and
+ * `tolle-date-time-picker` sits it beside a calendar — so the option
+ * generation, the min/max disabling and the roving keyboard model live here
+ * once instead of in both.
+ */
+export declare class TimeColumnsComponent implements OnInit, OnChanges {
+    private cdr;
+    /** Selected hour in 24-hour form, or `null` when nothing is chosen yet. @default null */
+    hour: number | null;
+    /** Selected minute, or `null` when nothing is chosen yet. @default null */
+    minute: number | null;
+    /** Selected second, or `null` when nothing is chosen yet. @default null */
+    second: number | null;
+    /** Renders a 12-hour clock face with an AM/PM column. @default false */
+    use12Hours: boolean;
+    /** Adds the seconds column. @default false */
+    showSeconds: boolean;
+    /** Interval between minute entries, in minutes. @default 1 */
+    minuteStep: number;
+    /** Interval between second entries, in seconds. @default 1 */
+    secondStep: number;
+    /** Earliest selectable time, as seconds since midnight. @default 0 */
+    minSeconds: number;
+    /** Latest selectable time, as seconds since midnight. @default 86399 */
+    maxSeconds: number;
+    /** Row height and text size of the entries. @default 'default' */
+    size: TimeColumnsProps['size'];
+    /** Extra Tailwind classes merged onto the column strip via `cn()` (last-wins). */
+    class: string;
+    /** Emitted with the full wall-clock time whenever an entry is chosen. */
+    timeChange: EventEmitter<TimeParts>;
+    listboxes?: QueryList<ElementRef<HTMLElement>>;
+    readonly columnsId: string;
+    /**
+     * Built once per input change rather than read from a getter: a getter would
+     * hand `*ngFor` a fresh array on every change-detection pass, so every row —
+     * each carrying a click handler — would be torn down and rebuilt on every
+     * pass.
+     */
+    columns: TimeColumn[];
+    /** Roving active entry per column, for `aria-activedescendant`. */
+    activeIndex: number[];
+    protected cn: typeof cn;
+    constructor(cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnChanges(): void;
+    get heightClass(): string;
+    private rebuild;
+    /**
+     * True when nothing in `[start, start + span]` falls inside the allowed
+     * window — i.e. picking this entry could not produce a legal time.
+     */
+    private rangeDisabled;
+    private syncActiveToSelection;
+    isSelected(column: TimeColumn, option: TimeOption): boolean;
+    isActive(columnIndex: number, option: TimeOption): boolean;
+    activeDescendantFor(columnIndex: number): string | null;
+    optionClass(column: TimeColumn, option: TimeOption, columnIndex: number): string;
+    /** Commits `option` in its column and emits the resulting whole time. */
+    choose(column: TimeColumn, option: TimeOption, columnIndex: number): void;
+    onColumnKeydown(event: KeyboardEvent, columnIndex: number): void;
+    private moveActive;
+    /** Lands on the first enabled entry at or past `index`, walking `direction`. */
+    private setActive;
+    private focusColumn;
+    /** Focuses the first column — used when the panel opens. */
+    focusFirstColumn(): void;
+    /**
+     * Centres each column on its selected entry. Scrolls the listbox directly
+     * rather than calling `scrollIntoView`, which would also scroll the page
+     * behind a fixed-position panel.
+     */
+    scrollSelectedIntoView(): void;
+    private scrollOptionIntoView;
+    trackColumn: (_: number, column: TimeColumn) => TimeColumnKind;
+    trackOption: (_: number, option: TimeOption) => string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TimeColumnsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TimeColumnsComponent, "tolle-time-columns", never, { "hour": { "alias": "hour"; "required": false; }; "minute": { "alias": "minute"; "required": false; }; "second": { "alias": "second"; "required": false; }; "use12Hours": { "alias": "use12Hours"; "required": false; }; "showSeconds": { "alias": "showSeconds"; "required": false; }; "minuteStep": { "alias": "minuteStep"; "required": false; }; "secondStep": { "alias": "secondStep"; "required": false; }; "minSeconds": { "alias": "minSeconds"; "required": false; }; "maxSeconds": { "alias": "maxSeconds"; "required": false; }; "size": { "alias": "size"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "timeChange": "timeChange"; }, never, never, true, never>;
+}
+declare const timePickerTriggerVariants: (props?: ({
+    size?: "default" | "xs" | "sm" | "lg" | null | undefined;
+    invalid?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Variant props for the time picker trigger. */
+export type TimePickerProps = VariantProps<typeof timePickerTriggerVariants>;
+/**
+ * A trigger that opens scrollable hour / minute / second columns in a floating
+ * panel.
+ *
+ * The value is a **24-hour `HH:mm` string** (or `HH:mm:ss` when `showSeconds`),
+ * regardless of whether the face is rendered as 12-hour — a wall-clock time has
+ * no date and no timezone, and a `Date` would invent both. Set
+ * `valueType="date"` to exchange `Date` objects instead, in which case the time
+ * is written onto today's date (or onto the date already held by the control).
+ *
+ * Implements `ControlValueAccessor`, so it works with `ngModel` and reactive
+ * forms. Use `tolle-date-time-picker` when a date is needed alongside.
+ * @new
+ */
+export declare class TimePickerComponent implements OnChanges, ControlValueAccessor, OnDestroy {
+    private cdr;
+    /**
+     * 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(): void;
+    /** Text shown on the trigger when no time is selected. @default 'Select a time' */
+    placeholder: string;
+    /** Disables the control. @default false */
+    disabled: boolean;
+    /** Renders a 12-hour face with an AM/PM column. The emitted value stays 24-hour. @default false */
+    use12Hours: boolean;
+    /** Adds a seconds column and emits `HH:mm:ss`. @default false */
+    showSeconds: boolean;
+    /** Interval between minute entries, in minutes. @default 1 */
+    minuteStep: number;
+    /** Interval between second entries, in seconds. @default 1 */
+    secondStep: number;
+    /** Earliest selectable time as a 24-hour `HH:mm` string; earlier entries are disabled. */
+    min?: string;
+    /** Latest selectable time as a 24-hour `HH:mm` string; later entries are disabled. */
+    max?: string;
+    /** Height and text size of the trigger and entries. @default 'default' */
+    size: TimePickerProps['size'];
+    /** Applies the destructive border and focus ring. @default false */
+    invalid: boolean;
+    /** Accessible name when there is no associated visible label. @default '' */
+    ariaLabel: string;
+    /** Exchange `Date` objects instead of `HH:mm` strings through the form control. @default 'string' */
+    valueType: 'string' | 'date';
+    /** Extra Tailwind classes merged onto the trigger via `cn()` (last-wins). */
+    class: string;
+    /** Emitted with the chosen time whenever it changes. */
+    valueChange: EventEmitter<string | Date | null>;
+    /** Emitted when the panel opens. */
+    opened: EventEmitter<void>;
+    /** Emitted when the panel closes. */
+    closed: EventEmitter<void>;
+    triggerEl?: ElementRef<HTMLElement>;
+    panelEl?: ElementRef<HTMLElement>;
+    columnsCmp?: TimeColumnsComponent;
+    readonly panelId: string;
+    hour: number | null;
+    minute: number | null;
+    second: number | null;
+    isOpen: boolean;
+    protected cn: typeof cn;
+    private cleanup?;
+    /** The date half of a `Date` value, kept so round-tripping does not move the day. */
+    private dateAnchor;
+    private onChange;
+    private onTouched;
+    constructor(cdr: ChangeDetectorRef);
+    private readonly outsideClickHandler;
+    private readonly escapeHandler;
+    /** The current selection as wall-clock parts, or `null` when incomplete. */
+    get parts(): TimeParts | null;
+    get displayValue(): string;
+    get minSeconds(): number;
+    get maxSeconds(): number;
+    get computedTriggerClass(): string;
+    toggle(): void;
+    open(): void;
+    close(): void;
+    onTriggerKeyDown(event: KeyboardEvent): void;
+    onTimeChange(parts: TimeParts): void;
+    private emit;
+    private currentValue;
+    private updatePosition;
+    private teardown;
+    ngOnDestroy(): void;
+    writeValue(value: string | Date | null | undefined): void;
+    registerOnChange(fn: (value: string | Date | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TimePickerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TimePickerComponent, "tolle-time-picker", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "use12Hours": { "alias": "use12Hours"; "required": false; }; "showSeconds": { "alias": "showSeconds"; "required": false; }; "minuteStep": { "alias": "minuteStep"; "required": false; }; "secondStep": { "alias": "secondStep"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "size": { "alias": "size"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "valueType": { "alias": "valueType"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "valueChange": "valueChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+}
+export {};

package/lib/toast.service.d.ts

@@ -1,9 +1,10 @@
 import * as i0 from "@angular/core";
+export type ToastVariant = 'default' | 'destructive' | 'success' | 'warning' | 'info';
 export interface Toast {
     id: number;
     title?: string;
     description: string;
-    variant?: 'default' | 'destructive' | 'success';
+    variant?: ToastVariant;
     duration?: number;
     remainingTime: number;
     isPaused: boolean;
@@ -11,6 +12,7 @@ export interface Toast {
 export type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
 export declare class ToastService {
     private toasts;
+    private nextId;
     private toastSubject;
     toasts$: import("rxjs").Observable<Toast[]>;
     constructor();

package/lib/toaster.component.d.ts

@@ -1,17 +1,34 @@
-import { ToastService, Toast, ToastPosition } from './toast.service';
+import { OnDestroy, OnInit } from '@angular/core';
+import { ToastService, Toast, ToastPosition, ToastVariant } from './toast.service';
 import { cn } from './utils/cn';
 import * as i0 from "@angular/core";
-export declare class ToastContainerComponent {
+export declare class ToastContainerComponent implements OnInit, OnDestroy {
     toastService: ToastService;
+    private elementRef;
     position: ToastPosition;
     toasts$: import("rxjs").Observable<Toast[]>;
-    icons: {
-        destructive: string;
-        success: string;
-        default: string;
-    };
-    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";
+    /**
+     * Move the host to <body> so the fixed container is never clipped or
+     * z-index-clamped by a consumer ancestor that creates a stacking context
+     * (transform / filter / backdrop-blur / opacity). Being a direct child of
+     * <body> and sitting above the CDK overlay container keeps toasts on top
+     * of modals, sheets and alert dialogs.
+     */
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    icons: Record<ToastVariant, string>;
+    /**
+     * Border + text only. The toast root always carries an opaque `bg-background`;
+     * the variant colour is applied as a separate tint layer (see `getTintClasses`)
+     * so toasts are never see-through over page content.
+     */
+    private variantClasses;
+    private tintClasses;
+    private progressClasses;
+    private resolve;
+    getVariantClasses(variant?: string): string;
+    getTintClasses(variant?: string): string;
+    getProgressClasses(variant?: string): string;
     get positionClasses(): string;
     protected cn: typeof cn;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToastContainerComponent, never>;

package/lib/tool.component.d.ts

@@ -0,0 +1,158 @@
+import { EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { type VariantProps } from 'class-variance-authority';
+import * as i0 from "@angular/core";
+declare const toolStateVariants: (props?: ({
+    state?: "error" | "success" | "pending" | "running" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ToolStateProps = VariantProps<typeof toolStateVariants>;
+/** Lifecycle of a tool call. */
+export type ToolState = NonNullable<ToolStateProps['state']>;
+/**
+ * Coordinates a `tolle-tool` with its header, input and output.
+ *
+ * Header/input/output are OnPush siblings projected into the tool, so the
+ * shared open + state they render from is published here.
+ *
+ * Provided on `ToolComponent`, so each tool call gets its own instance.
+ */
+export declare class ToolService {
+    private readonly openSource;
+    /** Emits whether the tool call is expanded. */
+    readonly open$: import("rxjs").Observable<boolean>;
+    private readonly stateSource;
+    /** Emits the tool call's lifecycle state. */
+    readonly state$: import("rxjs").Observable<ToolState>;
+    /** True while the tool call is expanded. */
+    get open(): boolean;
+    /** The tool call's current state. */
+    get state(): ToolState;
+    setOpen(value: boolean): void;
+    toggle(): void;
+    setState(state: ToolState): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToolService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ToolService>;
+}
+declare const toolVariants: (props?: ({
+    state?: "error" | "success" | "pending" | "running" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ToolProps = VariantProps<typeof toolVariants>;
+/**
+ * A collapsible record of one tool/function call: what was invoked, the
+ * arguments it received and the result it returned.
+ *
+ * Compose it from `tolle-tool-header`, `tolle-tool-input` and
+ * `tolle-tool-output`.
+ * @new
+ */
+export declare class ToolComponent implements OnInit, OnChanges, OnDestroy {
+    /** Lifecycle of the call, driving the header chip and border. @default 'pending' */
+    state: ToolState;
+    /** Whether the call's input and output are expanded. @default false */
+    open: boolean;
+    /** Extra Tailwind classes merged onto the tool via `cn()` (last-wins). */
+    class: string;
+    /** Emitted with the new state whenever the call is expanded or collapsed. */
+    openChange: EventEmitter<boolean>;
+    private readonly service;
+    private readonly cdr;
+    private readonly subscriptions;
+    /** True while an `open` input is being pushed into the service. */
+    private applyingInput;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private applyInput;
+    ngOnDestroy(): void;
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToolComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolComponent, "tolle-tool", never, { "state": { "alias": "state"; "required": false; }; "open": { "alias": "open"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "openChange": "openChange"; }, never, ["*"], true, never>;
+}
+/** Clickable header of a `tolle-tool`: the tool's name plus its state chip. */
+export declare class ToolHeaderComponent implements OnChanges, OnInit, OnDestroy {
+    /**
+     * 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(): void;
+    /** Name of the tool that was called. @default '' */
+    name: string;
+    /** Remixicon class shown before the tool name. @default 'ri-tools-line' */
+    icon: string;
+    /** Overrides the chip text; defaults to a label derived from the state. @default '' */
+    stateLabelOverride: string;
+    /** Extra Tailwind classes merged onto the header via `cn()` (last-wins). */
+    class: string;
+    /** Extra Tailwind classes merged onto the state chip via `cn()` (last-wins). */
+    chipClassName: string;
+    private readonly service;
+    private readonly cdr;
+    private readonly subscriptions;
+    open: boolean;
+    state: ToolState;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    get stateIcon(): string;
+    get stateLabel(): string;
+    get chipClass(): string;
+    get computedClass(): string;
+    onToggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToolHeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolHeaderComponent, "tolle-tool-header", never, { "name": { "alias": "name"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "stateLabelOverride": { "alias": "stateLabelOverride"; "required": false; }; "class": { "alias": "class"; "required": false; }; "chipClassName": { "alias": "chipClassName"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * Base for the two payload panels. Owns the shared "visible only while the
+ * tool is expanded" wiring and the payload-to-text formatting.
+ *
+ * Decorated with a selector-less `@Directive()` because it uses Angular
+ * features (DI and lifecycle hooks) on behalf of its subclasses.
+ */
+export declare abstract class ToolPayloadBase implements OnChanges, OnInit, OnDestroy {
+    /**
+     * Angular writes a bound `class` input through its styling path, which does
+     * not mark an OnPush component dirty — without this hook subclasses keep
+     * rendering the class they were born with.
+     */
+    ngOnChanges(): void;
+    /** Payload to render; objects are pretty-printed as JSON, strings are shown as-is. */
+    payload: unknown;
+    protected readonly service: ToolService;
+    private readonly cdr;
+    private readonly subscriptions;
+    open: boolean;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /** True once there is a payload worth rendering. */
+    get hasPayload(): boolean;
+    /** The payload as display text. Falls back to `String()` for cyclic values. */
+    get formatted(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToolPayloadBase, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ToolPayloadBase, never, never, {}, {}, never, never, false, never>;
+}
+/** Arguments the tool was called with. Visible while the `tolle-tool` is expanded. */
+export declare class ToolInputComponent extends ToolPayloadBase {
+    /** Arguments passed to the tool; objects are pretty-printed as JSON. @default null */
+    payload: unknown;
+    /** Heading above the payload. @default 'Parameters' */
+    label: string;
+    /** Extra Tailwind classes merged onto the panel via `cn()` (last-wins). */
+    class: string;
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToolInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolInputComponent, "tolle-tool-input", never, { "payload": { "alias": "payload"; "required": false; }; "label": { "alias": "label"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+/** Result the tool returned. Visible while the `tolle-tool` is expanded. */
+export declare class ToolOutputComponent extends ToolPayloadBase {
+    /** Result returned by the tool; objects are pretty-printed as JSON. @default null */
+    payload: unknown;
+    /** Heading above the payload. @default 'Result' */
+    label: string;
+    /** Styles the payload as a failure. @default false */
+    error: boolean;
+    /** Extra Tailwind classes merged onto the panel via `cn()` (last-wins). */
+    class: string;
+    get payloadClass(): string;
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToolOutputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolOutputComponent, "tolle-tool-output", never, { "payload": { "alias": "payload"; "required": false; }; "label": { "alias": "label"; "required": false; }; "error": { "alias": "error"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+export {};

package/lib/typography.component.d.ts

@@ -0,0 +1,32 @@
+import { OnChanges } from '@angular/core';
+import { type VariantProps } from 'class-variance-authority';
+import * as i0 from "@angular/core";
+declare const typographyVariants: (props?: ({
+    variant?: "muted" | "blockquote" | "code" | "h1" | "h2" | "h3" | "h4" | "p" | "small" | "lead" | "large" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type TypographyProps = VariantProps<typeof typographyVariants>;
+/**
+ * Applies the theme's type scale to projected content. Renders the semantically
+ * correct host tag for the chosen `variant` (`h1`–`h4`, `blockquote`, `code`,
+ * otherwise `p`), so headings stay real headings for assistive tech.
+ * @new
+ */
+export declare class TypographyComponent implements OnChanges {
+    private readonly cdr;
+    /**
+     * 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(): void;
+    /** Type scale step; also selects the rendered HTML tag. @default 'p' */
+    variant: TypographyProps['variant'];
+    /** Extra Tailwind classes merged onto the element via `cn()` (last-wins). */
+    class: string;
+    /** True for the variants that have no dedicated tag and render as `<p>`. */
+    get isParagraph(): boolean;
+    get computedClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TypographyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TypographyComponent, "tolle-typography", never, { "variant": { "alias": "variant"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
+}
+export {};

package/lib/utils/color.d.ts

@@ -78,10 +78,24 @@ 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`.
+ * Derive 5 chart colors from one base hex, spreading hues widely and
+ * alternating lightness so adjacent series stay separable — including for
+ * red-green colour blindness, where hue alone carries almost no information and
+ * the lightness difference does the work.
+ *
+ * `mode` re-steps the ramp for the target surface. Dark is NOT a lightened flip
+ * of light: its usable lightness band is both narrower and lower.
+ *
+ * NOTE: a palette derived from an arbitrary brand hue cannot be *guaranteed*
+ * colour-blind-safe — five hues spread from one starting point will, for some
+ * bases, put a confusable pair next to each other. The shipped defaults in
+ * `theme.css` are a fixed, validated palette; prefer those unless brand-matched
+ * charts matter more than guaranteed separation. Whatever you use, keep the
+ * legend and direct labels on, so colour is never the only channel.
+ */
+export declare function generateChartRamp(hex: string, mode?: 'light' | 'dark'): string[];
+/**
+ * Emit the `:root` + `.dark` `--chart-1…5` block for a chart base color, with
+ * each mode re-stepped for its own surface.
  */
-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.29",
+  "version": "18.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -35,7 +35,8 @@
     "tailwind-merge": "^3.4.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "embla-carousel": "^8.5.2"
+    "embla-carousel": "^8.5.2",
+    "tailwindcss-animate": "^1.0.7"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/preset.js

@@ -86,6 +86,12 @@ module.exports = {
         md: 'calc(var(--radius) - 2px)',
         sm: 'calc(var(--radius) - 4px)',
       },
+      transitionTimingFunction: {
+        // Named so components reference `ease-tolle` instead of an inline
+        // `ease-[cubic-bezier(...)]` arbitrary value — Tailwind 3.4 flags
+        // the comma-separated arbitrary form as an ambiguous utility match.
+        tolle: 'cubic-bezier(0.2, 0.0, 0.2, 1)',
+      },
       boxShadow: {
         sm: 'var(--shadow-sm)',
         DEFAULT: 'var(--shadow)',
@@ -94,5 +100,5 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+  plugins: [require('tailwindcss-animate')],
 }

package/public-api.d.ts

@@ -83,3 +83,53 @@ export * from './lib/phone-number.service';
 export * from './lib/country-codes.service';
 export * from './lib/resizable-panel.component';
 export * from './lib/resizable-panel-item.component';
+export * from './lib/aspect-ratio.component';
+export * from './lib/resizable.component';
+export * from './lib/context-menu.component';
+export * from './lib/context-menu-trigger.directive';
+export * from './lib/context-menu.service';
+export * from './lib/select.service';
+export * from './lib/radio-service';
+export * from './lib/types/date-range';
+export * from './lib/spinner.component';
+export * from './lib/kbd.component';
+export * from './lib/item.component';
+export * from './lib/native-select.component';
+export * from './lib/typography.component';
+export * from './lib/field.component';
+export * from './lib/input-group.component';
+export * from './lib/table.component';
+export * from './lib/menubar.component';
+export * from './lib/navigation-menu.component';
+export * from './lib/command.service';
+export * from './lib/command.component';
+export * from './lib/command-dialog.component';
+export * from './lib/combobox.component';
+export * from './lib/message-scroller.service';
+export * from './lib/message-scroller.component';
+export * from './lib/message.component';
+export * from './lib/bubble.component';
+export * from './lib/marker.component';
+export * from './lib/attachment.component';
+export * from './lib/conversation.component';
+export * from './lib/prompt-input.component';
+export * from './lib/reasoning.component';
+export * from './lib/tool.component';
+export * from './lib/sources.component';
+export * from './lib/suggestion.component';
+export * from './lib/inline-citation.component';
+export * from './lib/shimmer.component';
+export * from './lib/task.component';
+export * from './lib/chain-of-thought.component';
+export * from './lib/plan.component';
+export * from './lib/queue.component';
+export * from './lib/checkpoint.component';
+export * from './lib/confirmation.component';
+export * from './lib/context.component';
+export * from './lib/model-selector.component';
+export * from './lib/chart.service';
+export * from './lib/chart.component';
+export * from './lib/chart-pie.component';
+export * from './lib/direction.component';
+export * from './lib/time-picker.component';
+export * from './lib/date-time-picker.component';