@cdevhub/ngx-tw 0.2.0

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

@@ -0,0 +1,136 @@
+import * as _angular_core from '@angular/core';
+import { OnInit, AfterViewInit, OnDestroy } from '@angular/core';
+import { TwColor, TwSize } from '@cdevhub/ngx-tw/core';
+
+/** Sort direction. `null` represents the cleared (unsorted) state. */
+type SortDirection = 'asc' | 'desc' | null;
+/** Shape that `SortHeaderComponent` implements when registering with a parent `SortDirective`. */
+interface TwSortable {
+    /** Unique id identifying the column or field this header sorts. */
+    readonly id: string;
+    /** Header-level starting direction. `undefined` falls back to the parent directive's `start`. */
+    readonly start: 'asc' | 'desc' | undefined;
+    /** Header-level override for disabling the cleared state in the cycle. `undefined` falls back to the parent directive's `disableClear`. */
+    readonly disableClear: boolean | undefined;
+    /** Whether this header is disabled. */
+    readonly disabled: boolean;
+}
+/** Payload emitted by `SortDirective.sortChange` whenever a user interaction changes the sort state. */
+interface TwSortEvent {
+    /** The new active header id, or `null` when the sort was cleared. */
+    active: string | null;
+    /** The new sort direction. */
+    direction: SortDirection;
+    /** Snapshot of the previous state, before this change. */
+    previous: {
+        /** Previous active header id. */
+        active: string | null;
+        /** Previous sort direction. */
+        direction: SortDirection;
+    };
+}
+/**
+ * Container directive that holds the current sort state (`active` id + `direction`) and
+ * coordinates with child `SortHeaderComponent` instances. Compose with any rendering layer —
+ * tables, lists, custom grids — by placing child headers inside an element marked `[twSort]`.
+ *
+ * @remarks
+ * **`tw*` input/output aliases.** Every `input()` / `output()` / `model()` on this directive
+ * carries a `tw*` alias (e.g. `'twSortActive'`, `'twSortDirection'`, `'twSortChange'`). The
+ * aliases namespace bindings under the directive selector so they cannot collide with
+ * attributes the host element already owns (a `<table>` consumer binding `[active]` would
+ * otherwise be ambiguous). This mirrors Angular Material's `mat*` aliasing precedent on
+ * `MatSort`. Compodoc surfaces both the field name and the alias; consumer templates MUST
+ * bind via the aliased name (`[twSortActive]`, `(twSortChange)`, …). Removing an alias is a
+ * breaking API change requiring a major version bump.
+ */
+declare class SortDirective {
+    /** The id of the currently sorted header, or `null` when nothing is sorted. Two-way bindable via `[(twSortActive)]`. Defaults to `null`. */
+    readonly active: _angular_core.ModelSignal<string | null>;
+    /** Current sort direction. `null` represents the cleared state. Two-way bindable via `[(twSortDirection)]`. Defaults to `null`. */
+    readonly direction: _angular_core.ModelSignal<SortDirection>;
+    /** Starting direction used when a header becomes active for the first time. Per-header `start` overrides this. Defaults to `'asc'`. */
+    readonly start: _angular_core.InputSignal<"asc" | "desc">;
+    /** When true, the direction cycle skips the cleared (`null`) state — headers toggle between `'asc'` and `'desc'` only. Per-header `disableClear` overrides this. Defaults to `false`. */
+    readonly disableClear: _angular_core.InputSignal<boolean>;
+    /** When true, all child sort headers are disabled. Defaults to `false`. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Fires whenever the user changes `active` or `direction` by interacting with a header. Programmatic writes to `[(twSortActive)]` / `[(twSortDirection)]` do NOT emit. */
+    readonly sortChange: _angular_core.OutputEmitterRef<TwSortEvent>;
+    private readonly sortableIds;
+    /** Registers a header id so duplicates can be detected. Called by `SortHeaderComponent` on init. Throws in dev mode if another header with the same id is already registered. */
+    register(id: string): void;
+    /** Deregisters a header id. Called on destroy. */
+    deregister(id: string): void;
+    /** Cycles the direction for the given header and emits `sortChange`. No-op when the directive or the header is disabled. */
+    sort(sortable: TwSortable): void;
+    /** Returns the next direction in the cycle for the given header, based on the current state and header/parent overrides. */
+    getNextSortDirection(sortable: TwSortable): SortDirection;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SortDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SortDirective, "[twSort]", ["twSort"], { "active": { "alias": "twSortActive"; "required": false; "isSignal": true; }; "direction": { "alias": "twSortDirection"; "required": false; "isSignal": true; }; "start": { "alias": "twSortStart"; "required": false; "isSignal": true; }; "disableClear": { "alias": "twSortDisableClear"; "required": false; "isSignal": true; }; "disabled": { "alias": "twSortDisabled"; "required": false; "isSignal": true; }; }, { "active": "twSortActiveChange"; "direction": "twSortDirectionChange"; "sortChange": "twSortChange"; }, never, never, true, never>;
+}
+
+/** Position of the sort arrow relative to the header label. */
+type TwSortArrowPosition = 'before' | 'after';
+/**
+ * Turns any element (e.g., `<th>`, `<div>`, `<button>`) into a sortable header under a parent
+ * `SortDirective`. Renders the projected label plus an arrow that reflects the current direction.
+ * Triggers a sort cycle on click or Enter/Space.
+ */
+declare class SortHeaderComponent implements OnInit, AfterViewInit, OnDestroy {
+    /** Unique id for this header. Required — identifies the field/column this header sorts. */
+    readonly id: _angular_core.InputSignal<string>;
+    /** Overrides the parent directive's `start` for this header only. `undefined` inherits from the parent. */
+    readonly start: _angular_core.InputSignal<"asc" | "desc" | undefined>;
+    /** Overrides the parent directive's `disableClear` for this header only. `undefined` inherits from the parent. */
+    readonly disableClear: _angular_core.InputSignal<boolean | undefined>;
+    /** When true, this header is disabled — clicks and keyboard activation are ignored. Defaults to `false`. */
+    readonly headerDisabled: _angular_core.InputSignal<boolean>;
+    /** Whether the sort arrow renders `'before'` or `'after'` the projected label. Defaults to `'after'`. */
+    readonly arrowPosition: _angular_core.InputSignal<TwSortArrowPosition>;
+    /** Semantic color used to tint the arrow when this header is active. Defaults to `'primary'`. */
+    readonly color: _angular_core.InputSignal<TwColor>;
+    /** Controls padding and font size. Uses the shared `TwSize` scale. Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<TwSize>;
+    /** Accessible description applied via `AriaDescriber` so screen readers announce the sort action alongside the header text. Defaults to `'Sort'`. */
+    readonly sortActionDescription: _angular_core.InputSignal<string>;
+    private readonly parent;
+    private readonly focusMonitor;
+    private readonly ariaDescriber;
+    private readonly containerRef;
+    private _describedBy;
+    constructor();
+    /** Whether this header is currently the active (sorted) header. */
+    readonly isActive: _angular_core.Signal<boolean>;
+    /** Whether this header is disabled via its own input or the parent directive's `disabled`. */
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    /** Active direction for *this* header (null when not active). */
+    readonly effectiveDirection: _angular_core.Signal<SortDirection>;
+    /** `aria-sort` value: `'ascending' | 'descending' | 'none'`. */
+    readonly ariaSort: _angular_core.Signal<"none" | "ascending" | "descending">;
+    /** Whether the arrow element should render. Active headers always render; inactive render when not disabled so hover reveals the affordance. */
+    readonly renderArrow: _angular_core.Signal<boolean>;
+    private readonly variantResult;
+    /** @internal */
+    readonly hostClasses: _angular_core.Signal<string>;
+    /** @internal */
+    readonly containerClasses: _angular_core.Signal<string>;
+    /** @internal */
+    readonly labelClasses: _angular_core.Signal<string>;
+    /** @internal */
+    readonly arrowClasses: _angular_core.Signal<string>;
+    /** @internal */
+    readonly arrowIconClasses: _angular_core.Signal<string>;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /** @internal */
+    handleClick(): void;
+    /** @internal */
+    handleKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SortHeaderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SortHeaderComponent, "[tw-sort-header]", ["twSortHeader"], { "id": { "alias": "id"; "required": true; "isSignal": true; }; "start": { "alias": "start"; "required": false; "isSignal": true; }; "disableClear": { "alias": "disableClear"; "required": false; "isSignal": true; }; "headerDisabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "arrowPosition": { "alias": "arrowPosition"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "sortActionDescription": { "alias": "sortActionDescription"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[twSortHeaderIcon]"], true, never>;
+}
+
+export { SortDirective, SortHeaderComponent };
+export type { SortDirection, TwSortArrowPosition, TwSortEvent, TwSortable };

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

@@ -0,0 +1,50 @@
+import * as _angular_core from '@angular/core';
+import { TwColor, TwSize } from '@cdevhub/ngx-tw/core';
+
+/** Visual style of the spinner. */
+type SpinnerVariant = 'circular' | 'dots' | 'bars';
+/** Semantic color for the spinner. `'current'` inherits from parent `currentColor`. */
+type SpinnerColor = TwColor | 'current';
+/** Size of the spinner. `'inherit'` sizes the spinner to `1em` so it scales with the surrounding font. */
+type SpinnerSize = TwSize | 'inherit';
+/**
+ * Indeterminate loading indicator.
+ *
+ * Designed to compose inside other ngx-tw components:
+ * - Inside `<button twButton [loading]="true">` — inherits the button's text color via `color="current"`.
+ * - Inside `<tw-form-field>` as `twSuffix` — indicates async validation / pending load.
+ * - Inline with text using `size="inherit"` — scales with the surrounding font.
+ * - Centered inside cards or overlay wrappers for region-level loading states.
+ *
+ * @example
+ * ```html
+ * <tw-spinner />
+ * <tw-spinner color="success" size="lg" />
+ * <tw-spinner twSuffix size="sm" label="Validating email" />
+ * ```
+ */
+declare class SpinnerComponent {
+    /** Controls the visual style of the spinner. Defaults to `'circular'`. */
+    readonly variant: _angular_core.InputSignal<SpinnerVariant>;
+    /** Semantic color. `'current'` inherits the surrounding text color — required for composition inside buttons and form-field prefix/suffix slots. Defaults to `'current'`. */
+    readonly color: _angular_core.InputSignal<SpinnerColor>;
+    /** Sets the spinner dimensions. `'inherit'` sizes the spinner to `1em` so it matches the surrounding font size (useful for inline text indicators). Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<SpinnerSize>;
+    /** When true, renders a subtle ring behind the rotating stroke. Without the track ring the spinner reads as a partial arc, not a loading indicator. Only applies to the `'circular'` variant. Defaults to `true`. */
+    readonly track: _angular_core.InputSignal<boolean>;
+    /** Accessible label announced by assistive technology. Rendered in a visually hidden span. Defaults to `'Loading'`. */
+    readonly label: _angular_core.InputSignal<string>;
+    private readonly variantResult;
+    readonly rootClasses: _angular_core.Signal<string>;
+    readonly svgClasses: _angular_core.Signal<string>;
+    readonly dotsClasses: _angular_core.Signal<string>;
+    readonly dotClasses: _angular_core.Signal<string>;
+    readonly barsClasses: _angular_core.Signal<string>;
+    readonly barClasses: _angular_core.Signal<string>;
+    readonly srLabelClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SpinnerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SpinnerComponent, "tw-spinner", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "track": { "alias": "track"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { SpinnerComponent };
+export type { SpinnerColor, SpinnerSize, SpinnerVariant };

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

@@ -0,0 +1,265 @@
+import * as _angular_core from '@angular/core';
+
+/** Payload emitted on resizeStart and resizeEnd. */
+interface SplitResizeEvent {
+    /** Ordered array of current pane sizes in the container's declared unit. */
+    sizes: number[];
+    /** The unit used by the container. */
+    unit: 'percent' | 'pixel';
+    /** Index of the pane immediately before the gutter being dragged. */
+    originPaneIndex: number;
+    /** What triggered the resize. */
+    cause: 'pointer' | 'touch' | 'keyboard' | 'programmatic';
+}
+/** Payload emitted on collapseChange. */
+interface SplitCollapseEvent {
+    /** Index of the pane whose collapsed state changed. */
+    paneIndex: number;
+    /** True when the pane just collapsed, false when it just expanded. */
+    collapsed: boolean;
+    /** What triggered the collapse or expand. */
+    cause: 'snap' | 'keyboard' | 'programmatic';
+}
+/** Axis along which panes are laid out. */
+type SplitDirection = 'horizontal' | 'vertical';
+/** Unit in which pane sizes are expressed and reported. */
+type SplitUnit = 'percent' | 'pixel';
+
+/**
+ * A single resizable pane inside `<tw-split>`.
+ * Declare size constraints here; the parent container drives the actual sizing.
+ */
+declare class SplitPaneComponent {
+    /** Initial size of this pane in the container's unit. Omit to use even distribution. */
+    readonly defaultSize: _angular_core.InputSignal<number | undefined>;
+    /** Minimum size in the container's unit. The gutter will not move past this. Defaults to `0`. */
+    readonly minSize: _angular_core.InputSignal<number>;
+    /** Maximum size in the container's unit. The gutter will not move past this. Defaults to `Infinity`. */
+    readonly maxSize: _angular_core.InputSignal<number>;
+    /** When true, the pane may collapse to `collapsedSize` via snap, keyboard, or API. Defaults to `false`. */
+    readonly collapsible: _angular_core.InputSignal<boolean>;
+    /** Size to use when the pane is collapsed. May be `> 0` for rail-style collapse. Defaults to `0`. */
+    readonly collapsedSize: _angular_core.InputSignal<number>;
+    /**
+     * If `> 0`, dragging within `snapSize` units of `collapsedSize` snaps the pane closed.
+     * Dragging back out past `snapSize` re-expands it. Defaults to `0` (snap disabled).
+     */
+    readonly snapSize: _angular_core.InputSignal<number>;
+    /**
+     * Stable ordering token used by the container when content-projection order and
+     * resize math must stay consistent across change detection. Defaults to declaration order.
+     */
+    readonly order: _angular_core.InputSignal<number | undefined>;
+    /** Fires when this pane's size changes, in the container's unit. */
+    readonly sizeChange: _angular_core.OutputEmitterRef<number>;
+    /** Fires when this pane's collapsed state changes. */
+    readonly collapsedChange: _angular_core.OutputEmitterRef<boolean>;
+    /**
+     * @internal
+     * Written by the parent SplitComponent to set this pane's current flex-basis.
+     * Not part of the public API.
+     */
+    readonly _basis: _angular_core.WritableSignal<string>;
+    /**
+     * @internal
+     * Current size in the container's unit. Written by the parent SplitComponent.
+     * Not part of the public API.
+     */
+    readonly _size: _angular_core.WritableSignal<number>;
+    /**
+     * @internal
+     * Written by the parent SplitComponent to reflect collapsed state on the host.
+     * Not part of the public API.
+     */
+    readonly _collapsed: _angular_core.WritableSignal<boolean>;
+    /**
+     * @internal
+     * Size recorded immediately before this pane collapses, restored on expand.
+     * `null` whenever the pane is not collapsed or no pre-collapse size was captured.
+     */
+    readonly _preCollapseSize: _angular_core.WritableSignal<number | null>;
+    /**
+     * @internal
+     * Pane's positional index. Drives flex `order` so gutters can interleave via
+     * order = index * 2 + 1.
+     */
+    readonly _index: _angular_core.WritableSignal<number>;
+    /**
+     * @internal
+     * DOM id used by the parent gutter's `aria-controls` reference.
+     * Assigned by the parent SplitComponent on content reconciliation.
+     */
+    readonly _paneId: _angular_core.WritableSignal<string | null>;
+    /**
+     * @internal — idempotent id assignment. Re-using the existing id when the
+     * pane is re-reconciled keeps aria-controls stable across CD. The current
+     * id is read via `untracked` so callers running inside an `effect()` don't
+     * subscribe to `_paneId` and re-fire when it transitions from `null`.
+     */
+    _ensureId(componentId: string, index: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SplitPaneComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SplitPaneComponent, "tw-split-pane", never, { "defaultSize": { "alias": "defaultSize"; "required": false; "isSignal": true; }; "minSize": { "alias": "minSize"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "collapsedSize": { "alias": "collapsedSize"; "required": false; "isSignal": true; }; "snapSize": { "alias": "snapSize"; "required": false; "isSignal": true; }; "order": { "alias": "order"; "required": false; "isSignal": true; }; }, { "sizeChange": "sizeChange"; "collapsedChange": "collapsedChange"; }, never, ["*"], true, never>;
+}
+
+/**
+ * Container component that lays out two or more panes along a single axis and
+ * lets the user resize them by dragging the gutters between them.
+ *
+ * @example
+ * ```html
+ * <tw-split direction="horizontal" [gutterSize]="6">
+ *   <tw-split-pane [defaultSize]="30" [minSize]="15">…</tw-split-pane>
+ *   <tw-split-pane [defaultSize]="70">…</tw-split-pane>
+ * </tw-split>
+ * ```
+ */
+declare class SplitComponent {
+    /** Axis along which panes are laid out. `'horizontal'` = side-by-side; `'vertical'` = stacked. Defaults to `'horizontal'`. */
+    readonly direction: _angular_core.InputSignal<SplitDirection>;
+    /** How sizes are expressed and reported. A single unit governs the whole container. Defaults to `'percent'`. */
+    readonly unit: _angular_core.InputSignal<SplitUnit>;
+    /** Thickness of each gutter in pixels, perpendicular to the split axis. Defaults to `6`. */
+    readonly gutterSize: _angular_core.InputSignal<number>;
+    /** When true, all resize interactions are disabled. Gutters are not focusable and do not respond to input. Defaults to `false`. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** How much to move the gutter per arrow-key press, in the container's declared unit. Defaults to `10`. */
+    readonly keyboardStep: _angular_core.InputSignal<number>;
+    /** Step size for `PageUp` / `PageDown` key presses, in the container's declared unit. Defaults to `50`. */
+    readonly keyboardStepLarge: _angular_core.InputSignal<number>;
+    /**
+     * If non-null, pane sizes are persisted to `localStorage` under this key and restored on init.
+     * Defaults to `null` (persistence disabled).
+     */
+    readonly storageKey: _angular_core.InputSignal<string | null>;
+    /**
+     * When true, horizontal direction is visually reversed (RTL layout).
+     * Defaults to `null`, which means the value is inherited from the nearest ancestor `dir` attribute.
+     */
+    readonly rtl: _angular_core.InputSignal<boolean | null>;
+    /**
+     * Fires after any committed resize with the ordered array of current pane sizes.
+     * Does **not** fire on every pointer move during drag — only on commit (release, keyboard step, programmatic call).
+     */
+    readonly sizesChange: _angular_core.OutputEmitterRef<number[]>;
+    /** Fires on pointer/touch down or keyboard-initiated resize start. */
+    readonly resizeStart: _angular_core.OutputEmitterRef<SplitResizeEvent>;
+    /** Fires on pointer/touch up, blur, or keyboard resize commit. */
+    readonly resizeEnd: _angular_core.OutputEmitterRef<SplitResizeEvent>;
+    /** Fires when a pane collapses or expands via snap, keyboard, or programmatic API. */
+    readonly collapseChange: _angular_core.OutputEmitterRef<SplitCollapseEvent>;
+    private readonly _elRef;
+    private readonly _ngZone;
+    private readonly _destroyRef;
+    private readonly _directionality;
+    private readonly _isBrowser;
+    readonly _panes: _angular_core.Signal<readonly SplitPaneComponent[]>;
+    /** Stable id used to namespace per-pane DOM ids inside this container. */
+    private readonly _componentId;
+    /**
+     * @internal
+     * Container dimension in pixels along the split axis, updated by ResizeObserver.
+     * Starts at 0 until the first observation fires.
+     */
+    readonly _containerSizePx: _angular_core.WritableSignal<number>;
+    /**
+     * @internal
+     * Current pane sizes in the container's declared unit.
+     * Percent mode: values sum to 100 (within epsilon).
+     * Pixel mode: values are absolute pixel sizes.
+     */
+    readonly _sizes: _angular_core.WritableSignal<number[]>;
+    /** Tracks the live `dir` attribute resolved through CDK Directionality. */
+    private readonly _cdkDir;
+    /** Resolves the effective RTL state: explicit `rtl` input overrides CDK `dir`. */
+    readonly _isRtl: _angular_core.Signal<boolean>;
+    private _prevPaneRefs;
+    /** True until the first pane-list reconciliation has run; gates persistence hydration. */
+    private _initialReconciled;
+    /** Resolved class strings from tailwind-variants. */
+    private readonly _classes;
+    readonly _rootClass: _angular_core.Signal<string>;
+    readonly _gutterClass: _angular_core.Signal<string>;
+    /** Indices `0..panes.length - 2` representing the gutter between pane[i] and pane[i+1]. */
+    readonly _gutterIndices: _angular_core.Signal<number[]>;
+    /** @internal — drag state for the active pointer. */
+    private _drag;
+    constructor();
+    /**
+     * @internal — exposed for testing; do not call from application code.
+     * Called by the ResizeObserver when the container's pixel size changes.
+     */
+    _onContainerResize(newSizePx: number): void;
+    /**
+     * @internal — exposed for testing; do not call from application code.
+     * Called by the contentChildren effect when the pane list changes.
+     */
+    _onPanesChange(panes: readonly SplitPaneComponent[], containerPx: number): void;
+    private _initializeSizes;
+    private _reconcilePanes;
+    private _applyToPanes;
+    /**
+     * Programmatically set all pane sizes.
+     * The array length must equal the current pane count and sizes must be
+     * compatible with the declared unit. Throws on mismatch.
+     */
+    setSizes(sizes: number[]): void;
+    /**
+     * Collapse the pane at `paneIndex` to its `collapsedSize`.
+     * The pane must have `collapsible = true`. Throws if the index is out of range.
+     */
+    collapse(paneIndex: number): void;
+    /**
+     * Restore the pane at `paneIndex` to its pre-collapse size, or its `defaultSize` if none is recorded.
+     * Throws if the index is out of range.
+     */
+    expand(paneIndex: number): void;
+    /**
+     * Restore all panes to their declared `defaultSize` values.
+     * Clears any persisted sizes if `storageKey` is set.
+     */
+    reset(): void;
+    /** @internal — `aria-valuenow` for the gutter between pane i and i+1. Reports the LEFT pane size as a percent. */
+    _ariaValueNow(gutterIndex: number): number | null;
+    /** @internal — `aria-controls` references the two adjacent panes' DOM ids. */
+    _ariaControls(gutterIndex: number): string | null;
+    /** @internal — accessible name fallback for the separator handle. */
+    _ariaLabel(gutterIndex: number): string;
+    /** @internal */
+    _onGutterPointerDown(event: PointerEvent, gutterIndex: number): void;
+    private _onGutterPointerMove;
+    private _onGutterPointerUp;
+    /** @internal */
+    _onGutterKeydown(event: KeyboardEvent, gutterIndex: number): void;
+    private _setCollapsed;
+    private _maybeSnap;
+    private _readPersistedSizes;
+    private _writePersistedSizes;
+    private _clearPersistedSizes;
+    private _commit;
+    private _setNoSelect;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SplitComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SplitComponent, "tw-split", never, { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "gutterSize": { "alias": "gutterSize"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "keyboardStep": { "alias": "keyboardStep"; "required": false; "isSignal": true; }; "keyboardStepLarge": { "alias": "keyboardStepLarge"; "required": false; "isSignal": true; }; "storageKey": { "alias": "storageKey"; "required": false; "isSignal": true; }; "rtl": { "alias": "rtl"; "required": false; "isSignal": true; }; }, { "sizesChange": "sizesChange"; "resizeStart": "resizeStart"; "resizeEnd": "resizeEnd"; "collapseChange": "collapseChange"; }, ["_panes"], ["*"], true, never>;
+}
+
+/**
+ * Marker directive for a custom gutter projection slot.
+ * Attach to content inside `<tw-split>` to provide custom gutter visuals.
+ * The container still owns all interaction logic.
+ */
+declare class SplitGutterDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SplitGutterDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SplitGutterDirective, "[twSplitGutter]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Marker directive for an optional header region inside `<tw-split-pane>`.
+ * A parent Dock or Panel component may key off this region; the split pane
+ * itself does not apply any styling to it.
+ */
+declare class SplitPaneHeaderDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SplitPaneHeaderDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SplitPaneHeaderDirective, "[twSplitPaneHeader]", never, {}, {}, never, never, true, never>;
+}
+
+export { SplitComponent, SplitGutterDirective, SplitPaneComponent, SplitPaneHeaderDirective };
+export type { SplitCollapseEvent, SplitDirection, SplitResizeEvent, SplitUnit };

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

@@ -0,0 +1,140 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+import { TwSize } from '@cdevhub/ngx-tw/core';
+
+/** Surface treatment for the stat tile. */
+type StatVariant = 'plain' | 'outlined' | 'elevated' | 'filled';
+/** Direction of trend conveyed by the delta indicator. */
+type StatDeltaDirection = 'up' | 'down' | 'neutral';
+/** Display style of the trend delta. */
+type StatDeltaVariant = 'badge' | 'inline' | 'icon-only';
+/** Label slot — short caption ("Revenue", "Active users"). Projected into `<dt>`. */
+declare class StatLabelDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatLabelDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StatLabelDirective, "[twStatLabel]", never, {}, {}, never, never, true, never>;
+}
+/** Value slot — the dominant numeric/text element. Projected into `<dd>`. */
+declare class StatValueDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatValueDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StatValueDirective, "[twStatValue]", never, {}, {}, never, never, true, never>;
+}
+/** Description slot — optional secondary text under the value. Projected into a second `<dd>`. */
+declare class StatDescriptionDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatDescriptionDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StatDescriptionDirective, "[twStatDescription]", never, {}, {}, never, never, true, never>;
+}
+/** Icon slot — optional leading icon. Triggers the icon-leading layout. */
+declare class StatIconDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatIconDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StatIconDirective, "[twStatIcon]", never, {}, {}, never, never, true, never>;
+}
+/** Footer slot — optional auxiliary region (sparklines, tags, metadata). Always renders, even during loading. */
+declare class StatFooterDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatFooterDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StatFooterDirective, "[twStatFooter]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Compact trend indicator — direction + projected delta text + optional
+ * comparison label. Usable standalone or projected into a `<tw-stat>` tile.
+ *
+ * Sentiment is conveyed by both icon direction and color; consumers running
+ * "lower is better" metrics (bounce rate, latency, churn) set `inverted` to
+ * swap the success/error color mapping without changing the literal direction
+ * or the announced verb.
+ */
+declare class StatDeltaComponent {
+    /** Direction of change. `'up'` renders an up-chevron and (by default) the `success` color; `'down'` renders a down-chevron and the `error` color; `'neutral'` renders a horizontal-line glyph and the neutral color. Defaults to `'neutral'`. */
+    readonly direction: _angular_core.InputSignal<StatDeltaDirection>;
+    /** When true, swaps success/error semantics so `down` reads as success and `up` reads as error — use for metrics where lower is better (bounce rate, error rate, latency, churn). `neutral` direction is unaffected. Defaults to `false`. */
+    readonly inverted: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Display style. `'badge'` (default) wraps the delta in a pill chip; `'inline'` is icon + text only with no chip; `'icon-only'` shows just the chevron for ultra-dense layouts. */
+    readonly variant: _angular_core.InputSignal<StatDeltaVariant>;
+    /** Optional comparison label rendered next to the delta value (e.g. `"vs last week"`, `"since launch"`). Defaults to `undefined`. */
+    readonly comparisonLabel: _angular_core.InputSignal<string | undefined>;
+    /** Explicit accessible label. When omitted, the component composes one from `direction` + projected text + `comparisonLabel`. Override when projected content is purely symbolic or already localized. Defaults to `undefined`. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** @internal */
+    protected readonly textEl: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    /** @internal */
+    protected readonly projectedText: _angular_core.WritableSignal<string>;
+    constructor();
+    /** @internal */
+    protected readonly effectiveColor: _angular_core.Signal<"neutral" | "success" | "error">;
+    /** @internal */
+    protected readonly iconSizeClass: _angular_core.Signal<"size-4" | "size-3">;
+    /** @internal */
+    protected readonly composedAriaLabel: _angular_core.Signal<string>;
+    private readonly variantResult;
+    protected readonly rootClasses: _angular_core.Signal<string>;
+    protected readonly iconClasses: _angular_core.Signal<string>;
+    protected readonly textClasses: _angular_core.Signal<string>;
+    protected readonly comparisonClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatDeltaComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatDeltaComponent, "tw-stat-delta", never, { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "inverted": { "alias": "inverted"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "comparisonLabel": { "alias": "comparisonLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * KPI tile — a compact display tile surfacing a single key performance
+ * indicator with an optional trend delta. Composes a `<dl>` / `<dt>` / `<dd>`
+ * definition list internally so the label-to-value pairing is announced
+ * naturally by assistive technology.
+ *
+ * Slots:
+ * - `[twStatLabel]` — caption (rendered as `<dt>`).
+ * - `[twStatValue]` — dominant value (rendered as `<dd>`).
+ * - `[twStatDescription]` — optional secondary text (second `<dd>`).
+ * - `[twStatIcon]` — optional leading icon (switches to icon-leading layout).
+ * - `[twStatFooter]` — optional auxiliary region (sparklines, tags).
+ * - `<tw-stat-delta>` — projected trend indicator alongside the value.
+ *
+ * Loading state replaces label/value/delta with `<tw-skeleton>` placeholders
+ * sized to match the density. Footer always renders during loading so
+ * consumers can compose their own skeleton charts.
+ */
+declare class StatComponent {
+    /** Surface treatment. `'plain'` removes border and background; `'outlined'` (default) adds a border on the surface token; `'elevated'` adds shadow and uses the raised surface; `'filled'` uses the muted surface with no border. */
+    readonly variant: _angular_core.InputSignal<StatVariant>;
+    /** Density scale — drives padding, internal gaps, value/label typography, and the skeleton placeholder dimensions. Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<TwSize>;
+    /** When true, replaces label, value, and delta regions with `<tw-skeleton>` placeholders and toggles `aria-busy="true"` on the host. Projected footer content still renders. Defaults to `false`. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** @internal */
+    protected readonly labelSlot: _angular_core.Signal<StatLabelDirective | undefined>;
+    /** @internal */
+    protected readonly valueSlot: _angular_core.Signal<StatValueDirective | undefined>;
+    /** @internal */
+    protected readonly descriptionSlot: _angular_core.Signal<StatDescriptionDirective | undefined>;
+    /** @internal */
+    protected readonly iconSlot: _angular_core.Signal<StatIconDirective | undefined>;
+    /** @internal */
+    protected readonly footerSlot: _angular_core.Signal<StatFooterDirective | undefined>;
+    /** @internal */
+    protected readonly deltaSlot: _angular_core.Signal<StatDeltaComponent | undefined>;
+    protected readonly hasLabel: _angular_core.Signal<boolean>;
+    protected readonly hasValue: _angular_core.Signal<boolean>;
+    protected readonly hasDescription: _angular_core.Signal<boolean>;
+    protected readonly hasIcon: _angular_core.Signal<boolean>;
+    protected readonly hasFooter: _angular_core.Signal<boolean>;
+    protected readonly hasDelta: _angular_core.Signal<boolean>;
+    protected readonly iconLeading: _angular_core.Signal<boolean>;
+    /** Skeleton width during loading state — scales with the size axis. */
+    protected readonly loadingValueWidth: _angular_core.Signal<"4rem" | "5rem" | "6rem" | "8rem" | "10rem">;
+    /** Skeleton height during loading state — matches the value font size. */
+    protected readonly loadingValueHeight: _angular_core.Signal<"0.75rem" | "0.875rem" | "1rem">;
+    private readonly variantResult;
+    protected readonly rootClasses: _angular_core.Signal<string>;
+    protected readonly iconFlexClasses: _angular_core.Signal<string>;
+    protected readonly iconWrapperClasses: _angular_core.Signal<string>;
+    protected readonly contentStackClasses: _angular_core.Signal<string>;
+    protected readonly dlClasses: _angular_core.Signal<string>;
+    protected readonly labelClasses: _angular_core.Signal<string>;
+    protected readonly valueRowClasses: _angular_core.Signal<string>;
+    protected readonly valueClasses: _angular_core.Signal<string>;
+    protected readonly descriptionClasses: _angular_core.Signal<string>;
+    protected readonly deltaClasses: _angular_core.Signal<string>;
+    protected readonly footerClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatComponent, "tw-stat", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, {}, ["labelSlot", "valueSlot", "descriptionSlot", "iconSlot", "footerSlot", "deltaSlot"], ["[twStatIcon]", "[twStatFooter]", "[twStatLabel]", "[twStatValue]", "tw-stat-delta", "[twStatDescription]"], true, never>;
+}
+
+export { StatComponent, StatDeltaComponent, StatDescriptionDirective, StatFooterDirective, StatIconDirective, StatLabelDirective, StatValueDirective };
+export type { StatDeltaDirection, StatDeltaVariant, StatVariant };