@cdevhub/ngx-tw 0.2.0

package/types/cdevhub-ngx-tw-accordion.d.ts

@@ -0,0 +1,48 @@
+import * as _angular_core from '@angular/core';
+import { CollapsibleGroupComponent } from '@cdevhub/ngx-tw/collapsible';
+
+/** Open mode of the accordion. */
+type AccordionType = 'single' | 'multiple';
+/** Visual style of the accordion container. */
+type AccordionVariant = 'default' | 'bordered' | 'ghost';
+/**
+ * Accordion — single- or multiple-open-panel group built on top of
+ * `<tw-collapsible>` children. Extends `CollapsibleGroupComponent` to inherit
+ * the keyboard navigation, value-sync, and toggle wiring; overrides the
+ * virtual `isAccordionMode()` / `canCollapseSingleMode()` hooks so the
+ * single-mode behaviour is driven from the local `type` + `collapsible`
+ * inputs instead of the parent's `accordion` input. The `hostRole` and
+ * `hostClasses` signals are also overridden so the accordion drops APG's
+ * `role="group"` and renders the variant-driven container classes.
+ *
+ * The `providers` block exposes the accordion instance to its descendant
+ * collapsibles via the `CollapsibleGroupComponent` DI token — Angular DI
+ * uses class identity rather than the prototype chain, so the explicit
+ * `useExisting` is required even though `AccordionComponent extends
+ * CollapsibleGroupComponent`.
+ */
+declare class AccordionComponent extends CollapsibleGroupComponent {
+    /** Open mode. `'single'` allows one panel open at a time; `'multiple'` allows many. Defaults to `'single'`. */
+    readonly type: _angular_core.InputSignal<AccordionType>;
+    /** Visual style of the accordion container. Defaults to `'default'`. */
+    readonly variant: _angular_core.InputSignal<AccordionVariant>;
+    /** In `'single'` mode, whether re-clicking the open panel closes it. Defaults to `true` — accordions are collapsible by definition; opt-out only. */
+    readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accessible name for the accordion. Use when surrounding context doesn't make the purpose obvious. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** ID(s) of element(s) that label the accordion. Use instead of `aria-label` when a visible heading is available. */
+    readonly ariaLabelledby: _angular_core.InputSignal<string | undefined>;
+    /** @internal APG: accordions don't carry `role="group"`. */
+    readonly hostRole: _angular_core.Signal<string | null>;
+    /** @internal Variant-driven container classes; replaces the parent's default group string. */
+    readonly hostClasses: _angular_core.Signal<string>;
+    /** @internal Drive single-open-panel behaviour from `type`, ignoring the inherited `accordion` input. */
+    protected isAccordionMode(): boolean;
+    /** @internal Honour the `collapsible` opt-out in single mode. */
+    protected canCollapseSingleMode(): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionComponent, "tw-accordion", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { AccordionComponent };
+export type { AccordionType, AccordionVariant };

package/types/cdevhub-ngx-tw-alert.d.ts

@@ -0,0 +1,67 @@
+import * as _angular_core from '@angular/core';
+import { TwColor } from '@cdevhub/ngx-tw/core';
+
+/** Visual style of the alert container. */
+type AlertVariant = 'solid' | 'outline' | 'soft';
+/** ARIA live-region politeness for the alert. Maps to the host `role`. */
+type AlertPoliteness = 'polite' | 'assertive' | 'off';
+declare class AlertIconDirective {
+    private readonly alert;
+    readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertIconDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AlertIconDirective, "[twAlertIcon]", never, {}, {}, never, never, true, never>;
+}
+declare class AlertTitleDirective {
+    private readonly alert;
+    readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertTitleDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AlertTitleDirective, "[twAlertTitle]", never, {}, {}, never, never, true, never>;
+}
+declare class AlertContentDirective {
+    private readonly alert;
+    readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertContentDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AlertContentDirective, "[twAlertContent]", never, {}, {}, never, never, true, never>;
+}
+declare class AlertActionsDirective {
+    private readonly alert;
+    readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertActionsDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AlertActionsDirective, "[twAlertActions]", never, {}, {}, never, never, true, never>;
+}
+declare class AlertComponent {
+    /** Controls the visual style of the alert. Defaults to `'soft'`. */
+    readonly variant: _angular_core.InputSignal<AlertVariant>;
+    /** Sets the semantic color palette. Defaults to `'info'`. */
+    readonly color: _angular_core.InputSignal<TwColor>;
+    /** When true, renders a dismiss button. Defaults to `false`. */
+    readonly dismissible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Sets the ARIA live-region politeness. Maps to the host `role`:
+     * `'assertive'` → `role="alert"`, `'polite'` → `role="status"`,
+     * `'off'` → no role. Use `'off'` to suppress re-announcement when the
+     * alert content updates after initial render — assistive tech treats the
+     * alert as a static region rather than a live region. Defaults to `'polite'`.
+     */
+    readonly politeness: _angular_core.InputSignal<AlertPoliteness>;
+    /** Accessible label for the dismiss button. Override for localization. Defaults to `'Dismiss'`. */
+    readonly dismissLabel: _angular_core.InputSignal<string>;
+    /** Fires when the dismiss button is clicked. */
+    readonly dismissed: _angular_core.OutputEmitterRef<void>;
+    /** @internal */
+    readonly iconDirective: _angular_core.Signal<AlertIconDirective | undefined>;
+    readonly hasIcon: _angular_core.Signal<boolean>;
+    readonly computedRole: _angular_core.Signal<"alert" | "status" | null>;
+    private readonly variantResult;
+    readonly rootClasses: _angular_core.Signal<string>;
+    readonly iconClasses: _angular_core.Signal<string>;
+    readonly titleClasses: _angular_core.Signal<string>;
+    readonly contentClasses: _angular_core.Signal<string>;
+    readonly actionsClasses: _angular_core.Signal<string>;
+    readonly dismissClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertComponent, "tw-alert", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "politeness": { "alias": "politeness"; "required": false; "isSignal": true; }; "dismissLabel": { "alias": "dismissLabel"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; }, ["iconDirective"], ["[twAlertIcon]", "[twAlertTitle]", "[twAlertContent]", "*", "[twAlertActions]"], true, never>;
+}
+
+export { AlertActionsDirective, AlertComponent, AlertContentDirective, AlertIconDirective, AlertTitleDirective };
+export type { AlertPoliteness, AlertVariant };

package/types/cdevhub-ngx-tw-avatar.d.ts

@@ -0,0 +1,79 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken, ElementRef } from '@angular/core';
+import { TwSize, TwColor } from '@cdevhub/ngx-tw/core';
+
+/** Status indicator for the avatar. */
+type AvatarStatus = 'online' | 'busy' | 'away' | 'offline';
+/** Border radius shape for the avatar. */
+type AvatarRounded = 'full' | 'lg' | 'none';
+/** Decorative axes bundled into a single avatar input. */
+interface AvatarAppearance {
+    /** Border-radius shape. Defaults to `'full'`. */
+    rounded?: AvatarRounded;
+    /** Status indicator dot. Defaults to `null` (no indicator). */
+    status?: AvatarStatus | null;
+}
+/**
+ * Injection token used by `AvatarGroupComponent` to propagate its size
+ * to child avatars. When present, overrides the individual avatar's `size` input.
+ */
+declare const AVATAR_GROUP_SIZE: InjectionToken<() => TwSize>;
+declare class AvatarComponent {
+    /** URL of the avatar image. When set, renders an `<img>`. Falls back to initials or projected content on load error. Defaults to `null`. */
+    readonly src: _angular_core.InputSignal<string | null>;
+    /** Alt text for the avatar image. Also used as `aria-label` for non-image avatars. Defaults to `''`. */
+    readonly alt: _angular_core.InputSignal<string>;
+    /** Text initials displayed when no image is available (1-2 characters). Rendered uppercase regardless of input casing. Defaults to `null`. */
+    readonly initials: _angular_core.InputSignal<string | null>;
+    /** Semantic color for the initials/icon background. Only applies when no image is shown. Defaults to `'neutral'`. */
+    readonly color: _angular_core.InputSignal<TwColor>;
+    /** Controls the avatar dimensions. Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<TwSize>;
+    /** Bundles decorative axes: `rounded` (shape) and `status` (indicator dot). Defaults to `{ rounded: 'full', status: null }`. */
+    readonly appearance: _angular_core.InputSignal<AvatarAppearance>;
+    /** Fires when the avatar image fails to load. Payload is the native `Event` from the `<img>` `error` event. */
+    readonly imageError: _angular_core.OutputEmitterRef<Event>;
+    /** @internal */
+    readonly elementRef: ElementRef<any>;
+    /**
+     * @internal
+     * Toggled by `AvatarGroupComponent` to hide overflow avatars. Drives the
+     * host `[attr.hidden]` binding so the group's effect stays declarative
+     * (no direct `style.display` mutation).
+     */
+    readonly groupHidden: _angular_core.WritableSignal<boolean>;
+    private readonly groupSize;
+    constructor();
+    readonly resolvedSize: _angular_core.Signal<TwSize>;
+    readonly resolvedRounded: _angular_core.Signal<AvatarRounded>;
+    readonly resolvedStatus: _angular_core.Signal<AvatarStatus | null>;
+    readonly imageLoaded: _angular_core.WritableSignal<boolean | null>;
+    readonly displayMode: _angular_core.Signal<"initials" | "fallback" | "image">;
+    private readonly variantResult;
+    readonly rootClasses: _angular_core.Signal<string>;
+    readonly imgClasses: _angular_core.Signal<string>;
+    readonly initialsClasses: _angular_core.Signal<string>;
+    readonly fallbackClasses: _angular_core.Signal<string>;
+    readonly statusClasses: _angular_core.Signal<string>;
+    protected onImageError(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AvatarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarComponent, "tw-avatar", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, { "imageError": "imageError"; }, never, ["*"], true, never>;
+}
+declare class AvatarGroupComponent {
+    /** Sets the size for all child avatars. Individual avatar size inputs are ignored when inside a group. Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<TwSize>;
+    /** Maximum number of avatars to display. Remaining count is shown as a "+N" overflow indicator. Defaults to `null` (show all). */
+    readonly max: _angular_core.InputSignal<number | null>;
+    /** Accessible label for the avatar group. Defaults to `'Avatar group'` (English) — override for localisation. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    private readonly avatars;
+    readonly overflowCount: _angular_core.Signal<number>;
+    readonly hostClasses: _angular_core.Signal<string>;
+    readonly overflowClasses: _angular_core.Signal<string>;
+    private readonly visibilityEffect;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AvatarGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarGroupComponent, "tw-avatar-group", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, ["avatars"], ["*"], true, never>;
+}
+
+export { AVATAR_GROUP_SIZE, AvatarComponent, AvatarGroupComponent };
+export type { AvatarAppearance, AvatarRounded, AvatarStatus };

package/types/cdevhub-ngx-tw-badge.d.ts

@@ -0,0 +1,94 @@
+import * as _angular_core from '@angular/core';
+import { TwColor, TwSize } from '@cdevhub/ngx-tw/core';
+import { AvatarComponent } from '@cdevhub/ngx-tw/avatar';
+import { IconComponent } from '@cdevhub/ngx-tw/icon';
+
+/** Visual style of the badge. */
+type BadgeVariant = 'solid' | 'outline' | 'soft';
+/**
+ * Compact status label, tag, or count attached to any host element.
+ *
+ * Uses an attribute selector (`[twBadge]`) rather than the library's canonical
+ * element selector so consumers can apply the badge styling to any inline
+ * element — `<span>`, `<a>`, `<div>` — without an extra wrapper. The trade-off
+ * is intentional: badges most often live inside an existing text flow or list
+ * item where wrapping in a `<tw-badge>` element would add structural noise.
+ *
+ * For dot-only presence indicators (no text, no padding), use the sibling
+ * `[twBadgeDot]` directive — its rendering shape (no children, no dismiss,
+ * no leading slot) is structurally distinct from the labelled badge.
+ */
+declare class BadgeComponent {
+    /** Sets the semantic color palette. Defaults to `'neutral'`. */
+    readonly color: _angular_core.InputSignal<TwColor>;
+    /** Controls the visual style. Defaults to `'soft'`. */
+    readonly variant: _angular_core.InputSignal<BadgeVariant>;
+    /** Controls badge size (padding, font, icon size). Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<TwSize>;
+    /** When true, uses fully rounded corners instead of default `rounded-md`. Defaults to `false`. */
+    readonly pill: _angular_core.InputSignal<boolean>;
+    /** When true, renders a dismiss button inside the badge. Defaults to `false`. */
+    readonly dismissible: _angular_core.InputSignal<boolean>;
+    /**
+     * When true, exposes the badge as an ARIA live region (`role="status"`)
+     * so assistive technology announces content changes. Defaults to `false`
+     * because most badges are decorative tags or labels — opt in only when
+     * the badge represents a value that actually updates in place.
+     */
+    readonly live: _angular_core.InputSignal<boolean>;
+    /** Accessible label for the dismiss button. Override for localization. Defaults to `'Dismiss'`. */
+    readonly dismissLabel: _angular_core.InputSignal<string>;
+    /** Fires when the dismiss button is clicked. */
+    readonly dismissed: _angular_core.OutputEmitterRef<void>;
+    /** @internal */
+    readonly avatarChild: _angular_core.Signal<AvatarComponent | undefined>;
+    /** @internal */
+    readonly iconChild: _angular_core.Signal<IconComponent | undefined>;
+    readonly hasLeadingAvatar: _angular_core.Signal<boolean>;
+    readonly hasLeadingIcon: _angular_core.Signal<boolean>;
+    private readonly variantResult;
+    readonly rootClasses: _angular_core.Signal<string>;
+    readonly contentClasses: _angular_core.Signal<string>;
+    readonly dismissClasses: _angular_core.Signal<string>;
+    readonly dismissIconClasses: _angular_core.Signal<string>;
+    readonly leadingAvatarClasses: _angular_core.Signal<string>;
+    readonly leadingIconClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BadgeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BadgeComponent, "[twBadge]", ["twBadge"], { "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "pill": { "alias": "pill"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "live": { "alias": "live"; "required": false; "isSignal": true; }; "dismissLabel": { "alias": "dismissLabel"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; }, ["avatarChild", "iconChild"], ["tw-avatar", "tw-icon", "*"], true, never>;
+}
+
+/**
+ * Compact colored dot used as a presence indicator, unread marker, or status
+ * pip. Applies as an attribute selector so the host element controls the
+ * structure — wrap in a `<span>`, `<div>`, list item, or any inline element.
+ *
+ * The dot has no text content; pair it with a visible label adjacent in the
+ * DOM, or set `aria-label` on the host so assistive technology can announce
+ * the state. Opt in to `live` to expose the dot as an ARIA live region when
+ * the indicator state actually changes (e.g. "new messages received").
+ *
+ * @example
+ * ```html
+ * <span twBadgeDot color="success" size="sm"></span>
+ * <span twBadgeDot color="error" [live]="true" aria-label="3 unread"></span>
+ * ```
+ */
+declare class BadgeDotDirective {
+    /** Sets the semantic color palette. Defaults to `'neutral'`. */
+    readonly color: _angular_core.InputSignal<TwColor>;
+    /** Controls dot dimensions. Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<TwSize>;
+    /**
+     * When true, exposes the dot as an ARIA live region (`role="status"`) so
+     * assistive technology announces state changes (e.g. an unread indicator
+     * appearing). Defaults to `false` because most dots are decorative pips
+     * paired with a visible label.
+     */
+    readonly live: _angular_core.InputSignal<boolean>;
+    readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BadgeDotDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BadgeDotDirective, "[twBadgeDot]", ["twBadgeDot"], { "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "live": { "alias": "live"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { BadgeComponent, BadgeDotDirective };
+export type { BadgeVariant };

package/types/cdevhub-ngx-tw-breadcrumbs.d.ts

@@ -0,0 +1,227 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as tailwind_merge from 'tailwind-merge';
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { TwSize } from '@cdevhub/ngx-tw/core';
+
+/**
+ * Describes a single hop in a breadcrumb trail. The last entry in `items` is
+ * always treated as the current page (rendered with `aria-current="page"`,
+ * never as an anchor).
+ *
+ * The generic `T` types the optional `data` payload — useful for forwarding
+ * routerLink commands or any other consumer-defined metadata to the custom
+ * item template without unsafe casts.
+ */
+interface TwBreadcrumbsItem<T = unknown> {
+    /** Visible label shown for this hop. */
+    label: string;
+    /**
+     * Optional href used to render the default anchor. Omit on the current item
+     * (the last entry). Ignored when a custom `*twBreadcrumbsItem` template is
+     * projected — the consumer owns the anchor in that case.
+     */
+    href?: string;
+    /**
+     * Opaque payload forwarded to the consumer's `*twBreadcrumbsItem` template
+     * via the template context. Use this to carry router commands or any other
+     * data your template needs.
+     */
+    data?: T;
+    /**
+     * When true, the item renders as muted text without an anchor (even if
+     * `href` is set). Receives `aria-disabled="true"`.
+     */
+    disabled?: boolean;
+}
+/**
+ * Template context passed to `*twBreadcrumbsItem` for each rendered item.
+ */
+interface TwBreadcrumbsItemContext<T = unknown> {
+    /** The item record (also exposed via `let-item="$implicit"`). */
+    $implicit: TwBreadcrumbsItem<T>;
+    /** Same as `$implicit`. Available via `let-item="item"` for readability. */
+    item: TwBreadcrumbsItem<T>;
+    /** Zero-based index of this item in the original `items` input. */
+    index: number;
+    /** `true` only for the last entry — the current page. */
+    isCurrent: boolean;
+}
+/**
+ * Structural directive applied to an `<ng-template>` projected into
+ * `tw-breadcrumbs`. Replaces the default per-item rendering so consumers can
+ * wire their own anchors (typically `routerLink`-bound). The template receives
+ * `$implicit` (the item), `item`, `index`, and `isCurrent` in its context.
+ */
+declare class BreadcrumbsItemTemplateDirective<T = unknown> {
+    /** @internal */
+    readonly templateRef: TemplateRef<TwBreadcrumbsItemContext<T>>;
+    /** Type-narrows the template context for `let-` destructuring in templates. */
+    static ngTemplateContextGuard<T>(_dir: BreadcrumbsItemTemplateDirective<T>, _ctx: unknown): _ctx is TwBreadcrumbsItemContext<T>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BreadcrumbsItemTemplateDirective<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BreadcrumbsItemTemplateDirective<any>, "[twBreadcrumbsItem]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Structural directive applied to an `<ng-template>` projected into
+ * `tw-breadcrumbs`. Replaces the default chevron separator with custom
+ * content (any element — icon, text, dot, etc.).
+ */
+declare class BreadcrumbsSeparatorTemplateDirective {
+    /** @internal */
+    readonly templateRef: TemplateRef<unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BreadcrumbsSeparatorTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BreadcrumbsSeparatorTemplateDirective, "[twBreadcrumbsSeparator]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Applies the parent `tw-breadcrumbs` link / current / disabled styling to a
+ * consumer-projected anchor (or span) inside `*twBreadcrumbsItem`. Without
+ * this directive, projected content renders unstyled — only the layout `<li>`
+ * is provided by the component.
+ *
+ * The directive sets `aria-current="page"` when `current` is true. It does
+ * NOT itself swap the element tag; the consumer should still pick `<a>` for
+ * link items and `<span>` for the current item.
+ */
+declare class BreadcrumbsLinkDirective {
+    /** When true, this element is the current page: styled bold and gets `aria-current="page"`. Defaults to `false`. */
+    readonly current: _angular_core.InputSignal<boolean>;
+    /** When true, applies disabled styling (muted, not-allowed cursor). Defaults to `false`. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    private readonly parent;
+    /** @internal Combined classes pulled from the parent component's slot tokens. */
+    readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BreadcrumbsLinkDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<BreadcrumbsLinkDirective, "[twBreadcrumbsLink]", never, { "current": { "alias": "current"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+interface RenderedItem<T> {
+    readonly kind: 'item';
+    readonly item: TwBreadcrumbsItem<T>;
+    readonly index: number;
+    readonly isCurrent: boolean;
+    readonly key: string;
+}
+interface RenderedSeparator {
+    readonly kind: 'separator';
+    readonly key: string;
+}
+interface RenderedOverflow {
+    readonly kind: 'overflow';
+    readonly key: string;
+}
+type RenderedEntry<T> = RenderedItem<T> | RenderedSeparator | RenderedOverflow;
+/**
+ * Breadcrumb trail rendered as a `<nav>` landmark with an ordered list of
+ * navigation hops. The last entry in `items` is the current page (gets
+ * `aria-current="page"`, never an anchor). Items beyond `maxItems` are
+ * collapsed behind an ellipsis trigger that opens an overflow menu.
+ *
+ * Customize per-item rendering with `*twBreadcrumbsItem` (consumer projects
+ * router-aware anchors), and the separator with `*twBreadcrumbsSeparator` or
+ * the `separator` input (Lucide icon name).
+ *
+ * @example
+ * ```html
+ * <tw-breadcrumbs [items]="trail" />
+ *
+ * <tw-breadcrumbs [items]="trail" [maxItems]="3" separator="slash">
+ *   <ng-template twBreadcrumbsItem let-item let-isCurrent="isCurrent">
+ *     @if (isCurrent) {
+ *       <span twBreadcrumbsLink [current]="true">{{ item.label }}</span>
+ *     } @else {
+ *       <a twBreadcrumbsLink [routerLink]="item.data?.routerLink">{{ item.label }}</a>
+ *     }
+ *   </ng-template>
+ * </tw-breadcrumbs>
+ * ```
+ */
+declare class BreadcrumbsComponent<T = unknown> {
+    /** The full breadcrumb trail. The last entry is treated as the current page. Defaults to `[]`. */
+    readonly items: _angular_core.InputSignal<readonly TwBreadcrumbsItem<T>[]>;
+    /** Density of the trail — drives font size, gap, icon size, and the overflow-button square. Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<TwSize>;
+    /**
+     * When greater than `0`, the trail collapses any middle items past this
+     * threshold behind an overflow menu. The first item and the current (last)
+     * item are always visible. Values `< 2` are clamped to `2`. Defaults to `0`
+     * (no collapsing).
+     */
+    readonly maxItems: _angular_core.InputSignal<number>;
+    /**
+     * Lucide icon name used for the default separator between items. Ignored
+     * when a `*twBreadcrumbsSeparator` template is projected. Defaults to
+     * `'chevron-right'`. Requires the consumer to register the icon via
+     * `provideTwLucideIcons({ ChevronRight, ... })`.
+     */
+    readonly separator: _angular_core.InputSignal<string>;
+    /** Accessible label applied to the `<nav>` landmark. Defaults to `'Breadcrumb'`. Aliased as `aria-label`. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Custom per-item template projected via `*twBreadcrumbsItem`. */
+    readonly itemTemplate: _angular_core.Signal<BreadcrumbsItemTemplateDirective<any> | undefined>;
+    /** Custom separator template projected via `*twBreadcrumbsSeparator`. */
+    readonly separatorTemplate: _angular_core.Signal<BreadcrumbsSeparatorTemplateDirective | undefined>;
+    /** @internal Materialised tv() slot result; exposed so `BreadcrumbsLinkDirective` can pull link/current/disabled classes. */
+    readonly slotResult: _angular_core.Signal<{
+        list: (slotProps?: ({
+            size?: "md" | "xs" | "sm" | "lg" | "xl" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+        item: (slotProps?: ({
+            size?: "md" | "xs" | "sm" | "lg" | "xl" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+        link: (slotProps?: ({
+            size?: "md" | "xs" | "sm" | "lg" | "xl" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+        current: (slotProps?: ({
+            size?: "md" | "xs" | "sm" | "lg" | "xl" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+        disabled: (slotProps?: ({
+            size?: "md" | "xs" | "sm" | "lg" | "xl" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+        separator: (slotProps?: ({
+            size?: "md" | "xs" | "sm" | "lg" | "xl" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+        overflowTrigger: (slotProps?: ({
+            size?: "md" | "xs" | "sm" | "lg" | "xl" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+    } & {
+        list: (slotProps?: ({
+            size?: "md" | "xs" | "sm" | "lg" | "xl" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+        item: (slotProps?: ({
+            size?: "md" | "xs" | "sm" | "lg" | "xl" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+        link: (slotProps?: ({
+            size?: "md" | "xs" | "sm" | "lg" | "xl" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+        current: (slotProps?: ({
+            size?: "md" | "xs" | "sm" | "lg" | "xl" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+        disabled: (slotProps?: ({
+            size?: "md" | "xs" | "sm" | "lg" | "xl" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+        separator: (slotProps?: ({
+            size?: "md" | "xs" | "sm" | "lg" | "xl" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+        overflowTrigger: (slotProps?: ({
+            size?: "md" | "xs" | "sm" | "lg" | "xl" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+    } & {}>;
+    /** @internal Icon size for the default chevron separator. */
+    readonly iconSize: _angular_core.Signal<TwSize>;
+    /** @internal Class strings per slot, memoised. */
+    readonly listClasses: _angular_core.Signal<string>;
+    readonly itemClasses: _angular_core.Signal<string>;
+    readonly linkClasses: _angular_core.Signal<string>;
+    readonly currentClasses: _angular_core.Signal<string>;
+    readonly disabledClasses: _angular_core.Signal<string>;
+    readonly separatorClasses: _angular_core.Signal<string>;
+    readonly overflowTriggerClasses: _angular_core.Signal<string>;
+    /** @internal Items hidden behind the overflow menu. Empty when no collapsing is active. */
+    readonly collapsedItems: _angular_core.Signal<readonly TwBreadcrumbsItem<T>[]>;
+    /** @internal Flat sequence of items + separators + overflow used by the template's @for. */
+    readonly renderedEntries: _angular_core.Signal<RenderedEntry<T>[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BreadcrumbsComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BreadcrumbsComponent<any>, "tw-breadcrumbs", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "maxItems": { "alias": "maxItems"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, {}, ["itemTemplate", "separatorTemplate"], never, true, never>;
+}
+
+export { BreadcrumbsComponent, BreadcrumbsItemTemplateDirective, BreadcrumbsLinkDirective, BreadcrumbsSeparatorTemplateDirective };
+export type { TwBreadcrumbsItem, TwBreadcrumbsItemContext };

package/types/cdevhub-ngx-tw-button.d.ts

@@ -0,0 +1,74 @@
+import * as _angular_core from '@angular/core';
+import { OnInit } from '@angular/core';
+import { TwColor, TwSize } from '@cdevhub/ngx-tw/core';
+
+/** Visual style of the button. */
+type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'soft' | 'link';
+/**
+ * Enhances a native `<button>` or `<a>` element with library styling, semantic
+ * color/size variants, and disabled/loading states. The directive does not
+ * expose a `clicked` output — bind `(click)` directly on the host element. When
+ * `disabled` or `loading` is true, the directive intercepts clicks with
+ * `preventDefault()` + `stopImmediatePropagation()` so the host handler does
+ * not run.
+ *
+ * The directive owns no template, so visual loading affordances (spinner,
+ * status text) are composed by the consumer — see the `loading` input.
+ */
+declare class ButtonDirective implements OnInit {
+    /** Controls the visual style. Defaults to `'solid'`. */
+    readonly variant: _angular_core.InputSignal<ButtonVariant>;
+    /** Sets the semantic color palette. Defaults to `'primary'`. */
+    readonly color: _angular_core.InputSignal<TwColor>;
+    /** Controls the size (padding, font size, icon size). Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<TwSize>;
+    /** When true, prevents interaction and applies muted styling. Defaults to `false`. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * When true, blocks clicks and sets `aria-busy="true"`. Defaults to `false`.
+     * The directive does not render a spinner or status text — compose them in
+     * the projected content:
+     *
+     * ```html
+     * <button twButton [loading]="saving()">
+     *   @if (saving()) {
+     *     <tw-spinner twButtonIcon size="sm" />
+     *     <span class="sr-only">Saving…</span>
+     *   }
+     *   Save
+     * </button>
+     * ```
+     *
+     * The `sr-only` text gives assistive tech an explicit status announcement
+     * to pair with the `aria-busy` attribute.
+     */
+    readonly loading: _angular_core.InputSignal<boolean>;
+    private readonly elementRef;
+    private readonly focusMonitor;
+    private readonly destroyRef;
+    readonly isNativeButton: _angular_core.Signal<boolean>;
+    readonly classes: _angular_core.Signal<string>;
+    ngOnInit(): void;
+    handleClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ButtonDirective, "[twButton]", ["twButton"], { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+declare class ButtonIconDirective {
+    /**
+     * Position of the icon relative to the button label. Defaults to `'leading'`.
+     *
+     * The empty-string member of the union is load-bearing: Angular binds `''` to
+     * the input when the selector is used as a bare attribute (`<svg twButtonIcon>`),
+     * which is the canonical "leading" usage. Templates that omit a value still
+     * have the directive attached and resolve to leading placement at runtime via
+     * the `=== 'trailing'` check below.
+     */
+    readonly twButtonIcon: _angular_core.InputSignal<"" | "leading" | "trailing">;
+    private readonly button;
+    readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonIconDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ButtonIconDirective, "[twButtonIcon]", never, { "twButtonIcon": { "alias": "twButtonIcon"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { ButtonDirective, ButtonIconDirective };
+export type { ButtonVariant };