@cdevhub/ngx-tw 0.2.0

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

@@ -0,0 +1,335 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Signal, EventEmitter, ComponentRef, OnDestroy, TemplateRef, EnvironmentProviders, OnInit } from '@angular/core';
+import { ComponentType } from '@angular/cdk/portal';
+import { Observable } from 'rxjs';
+import { DialogConfig, AutoFocusTarget, RestoreFocusValue, DialogRole, CdkDialogContainer, DialogRef } from '@angular/cdk/dialog';
+import * as _cdevhub_ngx_tw_sheet from '@cdevhub/ngx-tw/sheet';
+import { OverlayContainerState, OverlayContainerAnimationEvent, TwColor } from '@cdevhub/ngx-tw/core';
+import * as i1 from '@angular/cdk/scrolling';
+
+/** Edge the sheet anchors against. */
+type SheetSide = 'top' | 'right' | 'bottom' | 'left';
+/**
+ * Preset size for the sheet panel.
+ *
+ * Sizing is axis-dependent:
+ *  - `'left' | 'right'` — controls panel width (height is always `100vh`).
+ *  - `'top'  | 'bottom'` — controls panel height (width is always `100vw`).
+ */
+type SheetSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/** ARIA role of the sheet element. Use `'alertdialog'` for destructive confirmation surfaces. */
+type SheetRole = DialogRole;
+/** Where to move focus when the sheet opens. */
+type SheetAutoFocus = AutoFocusTarget | string | boolean;
+/** How to restore focus on close. `true` restores to the previously focused element; a selector or element targets a specific node. */
+type SheetRestoreFocus = RestoreFocusValue;
+/** Scroll behavior for content underneath the sheet. */
+type SheetScrollStrategy = 'block' | 'close' | 'reposition' | 'noop';
+/**
+ * Configuration for opening a sheet with {@link Sheet.open}.
+ *
+ * Extends `@angular/cdk/dialog`'s `DialogConfig` with sheet-specific options
+ * (`side`, `size`, animation durations, split close flags).
+ */
+declare class SheetConfig<D = unknown, R = unknown> extends DialogConfig<D, R> {
+    /** Edge the sheet anchors against. Defaults to `'right'`. */
+    side?: SheetSide;
+    /** Preset size for the sheet panel. Axis-dependent (width for left/right, height for top/bottom). Defaults to `'md'`. */
+    size?: SheetSize;
+    /** Duration of the open slide animation in ms. Defaults to `200`. Use `0` to disable. */
+    enterAnimationDuration?: number;
+    /**
+     * Duration of the close slide animation in ms. Defaults to `160`. Use `0` to disable.
+     * Asymmetric with `enterAnimationDuration` by design — the close transition is slightly
+     * faster so the sheet feels dismissive rather than reluctant.
+     */
+    exitAnimationDuration?: number;
+    /** Scroll strategy preset applied when `scrollStrategy` isn't set. Defaults to `'block'`. */
+    scrollBehavior?: SheetScrollStrategy;
+    /**
+     * Whether the sheet is modal — sets `aria-modal` on the container. Defaults to `true`:
+     * a sheet opened over the page is modal by default and the rest of the document is
+     * inert while it is open. Set to `false` only for non-modal surfaces.
+     */
+    ariaModal?: boolean;
+    /** Whether the sheet renders a backdrop. Defaults to `true`. */
+    hasBackdrop?: boolean;
+    /**
+     * Whether pressing `Escape` closes the sheet.
+     *
+     * Defaults to `true` — Escape is the universal dismiss key for modal surfaces; the
+     * "swallow Escape" variant is the special case. `disableClose` overrides this when
+     * `true`.
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Whether clicking the backdrop closes the sheet.
+     *
+     * Defaults to `true` — clicking outside a modal sheet is the expected dismiss
+     * gesture; enforcing an explicit dismiss button is the special case. `disableClose`
+     * overrides this when `true`.
+     */
+    closeOnBackdropClick?: boolean;
+    /**
+     * Whether Escape AND backdrop clicks are blocked. Defaults to `false`.
+     * When `true`, this overrides both `closeOnEscape` and `closeOnBackdropClick`.
+     */
+    disableClose?: boolean;
+    /** Whether navigation (e.g. router) closes the sheet. Defaults to `true`. */
+    closeOnNavigation?: boolean;
+    /** Where to move focus when the sheet opens. Defaults to `'first-tabbable'`. */
+    autoFocus?: SheetAutoFocus;
+    /** Whether to restore focus to the previously focused element after close. Defaults to `true`. */
+    restoreFocus?: SheetRestoreFocus;
+}
+/** Injection token carrying the `data` value passed via {@link SheetConfig.data}. */
+declare const SHEET_DATA: InjectionToken<unknown>;
+/** Injection token for application-wide default sheet options. Set via `provideSheet()`. */
+declare const SHEET_DEFAULT_OPTIONS: InjectionToken<Partial<SheetConfig<unknown, unknown>>>;
+
+/** Lifecycle states a sheet passes through. */
+type SheetState = OverlayContainerState;
+/** Event emitted when the sheet's animation state transitions. */
+type SheetAnimationEvent = OverlayContainerAnimationEvent;
+/**
+ * Sheet container rendered inside the CDK overlay. Wraps the user-provided
+ * content in a Tailwind-styled, edge-anchored surface and coordinates slide
+ * enter/exit transitions with {@link SheetRef}.
+ *
+ * The animation state machine, `aria-describedby` queue, and panel-class
+ * merge are shared with `DialogContainer` via {@link OverlayContainerCoordinator}
+ * (component-scoped — see `providers: [OverlayContainerCoordinator]`).
+ *
+ * @docs-private
+ */
+declare class SheetContainer extends CdkDialogContainer<SheetConfig> {
+    private readonly coordinator;
+    /** Lifecycle state of the sheet's enter/exit animation. */
+    readonly state: Signal<SheetState>;
+    /** Emits whenever the animation state transitions. */
+    readonly animationStateChanged: EventEmitter<SheetAnimationEvent>;
+    /** Resolved enter-animation duration in ms. */
+    readonly enterAnimationDuration: number;
+    /** Resolved exit-animation duration in ms. */
+    readonly exitAnimationDuration: number;
+    protected readonly sideAttr: Signal<_cdevhub_ngx_tw_sheet.SheetSide>;
+    private readonly variants;
+    protected readonly hostClasses: Signal<string>;
+    protected readonly ariaDescribedByAttr: Signal<string | null>;
+    protected readonly transitionDuration: Signal<number>;
+    constructor();
+    protected _contentAttached(): void;
+    /** Triggered by the sheet ref to play the exit transition before disposing the overlay. */
+    _startExitAnimation(): void;
+    /** Registers a description id for the container's `aria-describedby`. */
+    _addAriaDescribedBy(id: string): void;
+    /** Removes a previously registered description id. */
+    _removeAriaDescribedBy(id: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SheetContainer, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SheetContainer, "tw-sheet-container", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Reference to a sheet opened via {@link Sheet.open}. Drives the sheet
+ * lifecycle (close, state, observables) and forwards useful overlay streams.
+ */
+declare class SheetRef<R = unknown, C = unknown> {
+    private readonly cdkRef;
+    readonly config: SheetConfig<unknown, R>;
+    readonly containerInstance: SheetContainer;
+    /** Unique ID of the sheet. */
+    readonly id: string;
+    /** Instance of the component rendered inside the sheet, or `null` for template sheets. */
+    componentInstance: C | null;
+    /** `ComponentRef` of the content component, or `null` for template sheets. */
+    readonly componentRef: ComponentRef<C> | null;
+    /** Current lifecycle state. Reactively readable. */
+    readonly state: Signal<SheetState>;
+    /** When `true`, close-via-escape AND close-via-backdrop are both disabled. */
+    disableClose: boolean | undefined;
+    /** When `false`, pressing Escape does not close the sheet. */
+    closeOnEscape: boolean | undefined;
+    /** When `false`, clicking the backdrop does not close the sheet. */
+    closeOnBackdropClick: boolean | undefined;
+    private readonly stateSignal;
+    private readonly afterOpenedSubject;
+    private readonly beforeClosedSubject;
+    private readonly afterClosedSubject;
+    private pendingResult;
+    private closeFocusOrigin;
+    constructor(cdkRef: DialogRef<R, C>, config: SheetConfig<unknown, R>, containerInstance: SheetContainer);
+    /**
+     * Closes the sheet. The exit slide animation runs before the overlay is disposed.
+     * @param result Value forwarded to `afterClosed()` subscribers.
+     */
+    close(result?: R): void;
+    /** Observable that emits once after the enter animation finishes. */
+    afterOpened(): Observable<void>;
+    /** Observable that emits once when the close animation starts. */
+    beforeClosed(): Observable<R | undefined>;
+    /** Observable that emits once after the sheet has fully closed and the overlay is disposed. */
+    afterClosed(): Observable<R | undefined>;
+    /** Backdrop click stream (emits even when `closeOnBackdropClick` / `disableClose` is set). */
+    backdropClick(): Observable<MouseEvent>;
+    /** Keydown event stream for the overlay. */
+    keydownEvents(): Observable<KeyboardEvent>;
+    /** Adds CSS classes to the overlay panel. */
+    addPanelClass(classes: string | string[]): this;
+    /** Removes CSS classes from the overlay panel. */
+    removePanelClass(classes: string | string[]): this;
+    private closeWithOrigin;
+    private finishClose;
+}
+
+/**
+ * Opens edge-anchored sheet (drawer) overlays. Composes `@angular/cdk/dialog`
+ * for focus trapping, portals, and overlay plumbing — adds a `GlobalPositionStrategy`
+ * pinned to the requested viewport edge, a Tailwind container with axis-aware
+ * sizing, slide enter/exit animations, and split close-behavior flags.
+ *
+ * Not `providedIn: 'root'` — register it via {@link provideSheet}.
+ */
+declare class Sheet implements OnDestroy {
+    private readonly cdkDialog;
+    private readonly injector;
+    private readonly defaultOptions;
+    private readonly parentSheet;
+    private readonly openSheetsAtThisLevel;
+    private readonly afterOpenedSubject;
+    private readonly afterAllClosedSubject;
+    /** Reactively-readable list of currently-open sheets across the full sheet tree. */
+    readonly openSheets: Signal<readonly SheetRef<unknown, unknown>[]>;
+    /** Emits every time a sheet is opened. */
+    readonly afterOpened: Observable<SheetRef<unknown, unknown>>;
+    /**
+     * Emits when every open sheet has closed. Emits immediately on subscribe if
+     * there are none open.
+     */
+    readonly afterAllClosed: Observable<void>;
+    /**
+     * Opens a sheet using the given component or template.
+     * @param content Component class or `TemplateRef`.
+     * @param config Options merged over the application defaults.
+     * @returns Reference controlling the opened sheet.
+     */
+    open<R = unknown, D = unknown, C = unknown>(content: ComponentType<C> | TemplateRef<C>, config?: SheetConfig<D, R>): SheetRef<R, C>;
+    /** Closes every open sheet managed by this service (and child services). */
+    closeAll(): void;
+    /** Looks up an open sheet by its id. */
+    getSheetById<R = unknown, C = unknown>(id: string): SheetRef<R, C> | undefined;
+    ngOnDestroy(): void;
+    private registerOpen;
+    private unregister;
+    private getAfterAllClosedSource;
+    private resolveConfig;
+    private resolveScrollStrategy;
+    private resolvePositionStrategy;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Sheet, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<Sheet>;
+}
+/**
+ * Registers the {@link Sheet} service for dependency injection.
+ *
+ * @param defaultOptions Optional defaults merged into every `open()` call.
+ * @example
+ * ```ts
+ * provideSheet({ side: 'left', size: 'lg' })
+ * ```
+ */
+declare function provideSheet(defaultOptions?: Partial<SheetConfig>): EnvironmentProviders;
+
+/**
+ * Header wrapper for a sheet. Provides consistent padding and spacing for
+ * title + subtitle + leading icon, and separates the header from scrollable
+ * content below.
+ */
+declare class SheetHeaderDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SheetHeaderDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SheetHeaderDirective, "[twSheetHeader], tw-sheet-header", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Decorative leading icon for a sheet header. Use with a semantic `color` to
+ * match destructive / informational / success sheets.
+ */
+declare class SheetIconDirective {
+    /** Semantic color for the icon container. Defaults to a neutral surface. */
+    readonly color: i0.InputSignal<TwColor | undefined>;
+    protected readonly classes: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SheetIconDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SheetIconDirective, "[twSheetIcon]", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Sheet title. Registers its ID with the container's `aria-labelledby` queue
+ * so screen readers announce it automatically.
+ */
+declare class SheetTitleDirective implements OnInit, OnDestroy {
+    private readonly generatedId;
+    private readonly sheetRef;
+    private readonly container;
+    /** Custom id for the title element. Defaults to a generated unique id. */
+    readonly id: i0.InputSignal<string>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SheetTitleDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SheetTitleDirective, "[twSheetTitle], tw-sheet-title", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/** Secondary line beneath the sheet title — intended for a short description. */
+declare class SheetSubtitleDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SheetSubtitleDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SheetSubtitleDirective, "[twSheetSubtitle], tw-sheet-subtitle", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Sheet description. Registers its ID with the container's `aria-describedby`
+ * queue so screen readers announce the descriptive paragraph after the title.
+ * Mirrors {@link SheetTitleDirective} but for `aria-describedby`.
+ */
+declare class SheetDescriptionDirective implements OnInit, OnDestroy {
+    private readonly generatedId;
+    private readonly sheetRef;
+    private readonly container;
+    /** Custom id for the description element. Defaults to a generated unique id. */
+    readonly id: i0.InputSignal<string>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SheetDescriptionDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SheetDescriptionDirective, "[twSheetDescription], tw-sheet-description", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Scrollable content region of the sheet. Apply between the header and the
+ * actions bar. Inherits CDK's `CdkScrollable` to play nicely with scroll
+ * strategies and nested scrollables.
+ */
+declare class SheetContentDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<SheetContentDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SheetContentDirective, "[twSheetContent], tw-sheet-content", never, {}, {}, never, never, true, [{ directive: typeof i1.CdkScrollable; inputs: {}; outputs: {}; }]>;
+}
+/** Horizontal alignment for sheet action buttons. */
+type SheetActionsAlign = 'start' | 'center' | 'end';
+/**
+ * Bottom action bar of a sheet. Use inside the sheet content or template to
+ * host Cancel/Confirm buttons. Stays pinned below scrollable content.
+ */
+declare class SheetActionsDirective {
+    /** Horizontal alignment of the action buttons. Defaults to `'end'`. */
+    readonly align: i0.InputSignal<SheetActionsAlign>;
+    protected readonly classes: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SheetActionsDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SheetActionsDirective, "[twSheetActions], tw-sheet-actions", never, { "align": { "alias": "align"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Closes the enclosing sheet when the host button is clicked. Provide a
+ * `[twSheetClose]` value to pass a result to `afterClosed()` subscribers.
+ */
+declare class SheetCloseDirective {
+    /** Value passed to `afterClosed()` when the button is clicked. */
+    readonly twSheetClose: i0.InputSignal<unknown>;
+    /** Native button `type`. Defaults to `'button'` to avoid accidental form submission. */
+    readonly type: i0.InputSignal<"button" | "submit" | "reset">;
+    private readonly sheetRef;
+    protected onClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SheetCloseDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SheetCloseDirective, "[twSheetClose]", never, { "twSheetClose": { "alias": "twSheetClose"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { SHEET_DATA, SHEET_DEFAULT_OPTIONS, Sheet, SheetActionsDirective, SheetCloseDirective, SheetConfig, SheetContainer, SheetContentDirective, SheetDescriptionDirective, SheetHeaderDirective, SheetIconDirective, SheetRef, SheetSubtitleDirective, SheetTitleDirective, provideSheet };
+export type { SheetActionsAlign, SheetAnimationEvent, SheetAutoFocus, SheetRestoreFocus, SheetRole, SheetScrollStrategy, SheetSide, SheetSize, SheetState };

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

@@ -0,0 +1,52 @@
+import * as _angular_core from '@angular/core';
+
+/** Geometric shape of the skeleton placeholder. */
+type SkeletonShape = 'text' | 'rectangle' | 'circle';
+/** Animation style applied to the skeleton. */
+type SkeletonAnimation = 'pulse' | 'wave' | 'none';
+/**
+ * Placeholder loading shape (the standard "shimmer" / "pulse") shown where real
+ * content will appear. Use inside lists, cards, tables, and detail views to
+ * communicate "this region is loading" without layout jump when content arrives.
+ *
+ * Three shapes (`text`, `rectangle`, `circle`), three animations (`pulse`,
+ * `wave`, `none`), arbitrary `width` / `height`, and an optional multi-line
+ * text mode. By default the skeleton is hidden from assistive technology
+ * (parent owns the announcement); set `announce` to expose `role="status"`.
+ *
+ * @example
+ * ```html
+ * <tw-skeleton />
+ * <tw-skeleton [lines]="3" />
+ * <tw-skeleton shape="circle" [width]="40" [height]="40" />
+ * <tw-skeleton shape="rectangle" animation="wave" height="12rem" />
+ * ```
+ */
+declare class SkeletonComponent {
+    /** Geometric shape of the placeholder. `'text'` renders a short rectangle with text-line proportions; `'rectangle'` a free-form block sized by `width`/`height`; `'circle'` a perfect circle (avatar / icon placeholder). Defaults to `'text'`. */
+    readonly shape: _angular_core.InputSignal<SkeletonShape>;
+    /** Animation style. `'pulse'` fades opacity in and out; `'wave'` sweeps a shimmer across; `'none'` renders a static block. All animations are halted under `prefers-reduced-motion`. Defaults to `'pulse'`. */
+    readonly animation: _angular_core.InputSignal<SkeletonAnimation>;
+    /** Optional explicit width. Numbers are treated as pixels; strings pass through (e.g. `'50%'`, `'12rem'`, `'auto'`). When undefined, the skeleton fills its container's width (or its shape default for circle). */
+    readonly width: _angular_core.InputSignal<string | number | undefined>;
+    /** Optional explicit height. Numbers are treated as pixels; strings pass through. When undefined, the skeleton uses its shape default (text-line height for text, `1rem` for rectangle, equal-to-width for circle). */
+    readonly height: _angular_core.InputSignal<string | number | undefined>;
+    /** Number of stacked text rows to render. Only applies when `shape` is `'text'`. Values greater than 1 render N rows in a vertical stack with a `0.5rem` gap; the last row is rendered at 60% width to mimic a paragraph's final line. Ignored for `'rectangle'` and `'circle'`. Defaults to `1`. */
+    readonly lines: _angular_core.InputSignal<number>;
+    /** When true, the skeleton announces itself as a busy live region via `role="status"`, `aria-busy="true"`, `aria-live="polite"`, and a visually-hidden label. When false, the skeleton is fully hidden from assistive technology with `aria-hidden="true"` — appropriate when a parent already owns the loading announcement. Defaults to `false`. */
+    readonly announce: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly mode: _angular_core.Signal<"single" | "multi">;
+    private readonly variantResult;
+    protected readonly rootClasses: _angular_core.Signal<string>;
+    protected readonly srClasses: _angular_core.Signal<string>;
+    protected readonly rowsArray: _angular_core.Signal<any[]>;
+    protected readonly rootStyle: _angular_core.Signal<string>;
+    protected rowClass(index: number): string;
+    protected rowStyle(index: number): string;
+    private styleString;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonComponent, "tw-skeleton", never, { "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "animation": { "alias": "animation"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "lines": { "alias": "lines"; "required": false; "isSignal": true; }; "announce": { "alias": "announce"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { SkeletonComponent };
+export type { SkeletonAnimation, SkeletonShape };

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

@@ -0,0 +1,258 @@
+import * as _angular_core from '@angular/core';
+import { OnInit, Signal } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { TwColor, TwSize, ErrorStateMatcher } from '@cdevhub/ngx-tw/core';
+
+/** Visual style of the slider fill. */
+type SliderVariant = 'solid' | 'soft' | 'outline';
+/** Value emitted by the slider. A plain number for single mode, or `[start, end]` for range mode. */
+type SliderValue = number | readonly [number, number];
+/** A tick mark on the slider scale. Optionally carries a display label. */
+interface SliderMark {
+    /** Numeric position of the mark on the slider scale. Must be within `[min, max]`. */
+    value: number;
+    /** Optional label rendered beneath the mark when `showMarkLabels` is true. */
+    label?: string;
+}
+/** Format function for the value displayed in the value bubble, min/max labels, and `aria-valuetext`. */
+type SliderValueFormatter = (value: number) => string;
+/** Identifies which thumb is the interaction target in range mode. */
+type ThumbId = 'single' | 'start' | 'end';
+/**
+ * Select a single value or a numeric range from a scale.
+ *
+ * @example
+ * ```html
+ * <tw-slider [(value)]="volume" [min]="0" [max]="100" [step]="5" />
+ * <tw-slider range [(value)]="priceRange" [min]="0" [max]="1000" [step]="10" showMinMax />
+ * <tw-slider [marks]="true" [step]="25" showMarkLabels label="Brightness" />
+ * ```
+ */
+declare class SliderComponent implements ControlValueAccessor, OnInit {
+    /** Lower bound of the slider scale. Defaults to `0`. */
+    readonly min: _angular_core.InputSignal<number>;
+    /** Upper bound of the slider scale. Defaults to `100`. */
+    readonly max: _angular_core.InputSignal<number>;
+    /** Step increment used for snapping, keyboard nav, and auto-generated marks. Pass `null` for continuous values. Defaults to `1`. */
+    readonly step: _angular_core.InputSignal<number | null>;
+    /** Semantic color for the filled portion and thumb border. Defaults to `'primary'`. */
+    readonly color: _angular_core.InputSignal<TwColor>;
+    /** Overall scale of the rail, thumb, and typography. Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<TwSize>;
+    /** Visual style of the fill: `'solid'` (vivid), `'soft'` (muted), or `'outline'` (rail bordered, fill color-500). Defaults to `'solid'`. */
+    readonly variant: _angular_core.InputSignal<SliderVariant>;
+    /** When true, prevents interaction and applies muted styling. Defaults to `false`. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** When true, sets `aria-required="true"` on the thumb for assistive tech. Defaults to `false`. */
+    readonly required: _angular_core.InputSignal<boolean>;
+    /** When true, the slider selects a `[start, end]` range and renders two thumbs. Defaults to `false`. */
+    readonly range: _angular_core.InputSignal<boolean>;
+    /** Tick marks: `true` auto-generates one mark per step, an array supplies custom marks, `false` renders no marks. Defaults to `false`. */
+    readonly marks: _angular_core.InputSignal<boolean | SliderMark[]>;
+    /** When true, renders the mark labels beneath the rail. Requires `marks` to resolve to a list. Defaults to `false`. */
+    readonly showMarkLabels: _angular_core.InputSignal<boolean>;
+    /** When true, renders the min and max values at the ends of the scale. Defaults to `false`. */
+    readonly showMinMax: _angular_core.InputSignal<boolean>;
+    /** When true, renders a value bubble above the active thumb (on hover/focus/drag) and the current value in the header. Defaults to `false`. */
+    readonly showValue: _angular_core.InputSignal<boolean>;
+    /** Optional visible label rendered above the rail. When set, the slider is wired to the label via `aria-labelledby`. */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Optional secondary description rendered under the label. Mirrored to `aria-describedby`. */
+    readonly description: _angular_core.InputSignal<string | undefined>;
+    /** Custom formatter for the value bubble, min/max labels, and `aria-valuetext`. Defaults to an integer or 2-decimal string. */
+    readonly valueFormatter: _angular_core.InputSignal<SliderValueFormatter | undefined>;
+    /** Optional form name attribute. Purely informational — the component does not render a native input. */
+    readonly name: _angular_core.InputSignal<string | undefined>;
+    /** Accessible name for the single-value thumb when no visible label is provided. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** ID of an external element labelling the single-value thumb. */
+    readonly ariaLabelledby: _angular_core.InputSignal<string | undefined>;
+    /** ID of an external element describing the slider. */
+    readonly ariaDescribedby: _angular_core.InputSignal<string | undefined>;
+    /** Accessible name for the start (lower) thumb in range mode. Defaults to `"Minimum"`. */
+    readonly ariaLabelStart: _angular_core.InputSignal<string>;
+    /** Accessible name for the end (upper) thumb in range mode. Defaults to `"Maximum"`. */
+    readonly ariaLabelEnd: _angular_core.InputSignal<string>;
+    /** Two-way bound slider value. A `number` for single mode, or `[start, end]` for range mode. Updates on every interaction. */
+    readonly value: _angular_core.ModelSignal<SliderValue>;
+    /** Fires continuously while the user drags or holds a key. Payload matches the current `value`. Template event name is `input` — the TS-side identifier is `valueInput` to avoid shadowing the imported `input` factory. */
+    readonly valueInput: _angular_core.OutputEmitterRef<SliderValue>;
+    /** Fires when the user commits a change (pointer release, key release, or blur after keyboard change). Payload matches the current `value`. */
+    readonly change: _angular_core.OutputEmitterRef<SliderValue>;
+    /** Per-instance override of the {@link ErrorStateMatcher}. When omitted, the component uses the `TW_ERROR_STATE_MATCHER` token's value. */
+    readonly errorStateMatcher: _angular_core.InputSignal<ErrorStateMatcher | undefined>;
+    private readonly focusMonitor;
+    private readonly elementRef;
+    private readonly destroyRef;
+    private readonly directionality;
+    private readonly ngControl;
+    private readonly parentForm;
+    private readonly parentFormGroup;
+    private readonly defaultMatcher;
+    private readonly _ngControlRev;
+    private readonly _formSubmitRev;
+    /** Whether the form control is in an error state per the configured `ErrorStateMatcher`. */
+    readonly errorState: Signal<boolean>;
+    private readonly region;
+    private readonly startThumb;
+    private readonly endThumb;
+    private readonly singleThumb;
+    private onChange;
+    private onTouched;
+    private readonly cvaDisabled;
+    /** @internal ID of the host element. */
+    private readonly uid;
+    /** @internal */
+    readonly labelId: string;
+    /** @internal */
+    readonly descriptionId: string;
+    /** @internal */
+    readonly singleThumbId: string;
+    /** @internal */
+    readonly startThumbId: string;
+    /** @internal */
+    readonly endThumbId: string;
+    /** @internal Internal values during drag / interaction, independent of external model. */
+    private readonly internalStart;
+    private readonly internalEnd;
+    private readonly internalSingle;
+    /** @internal Which thumb currently has an active pointer gesture (or null). Bound in the template to drive the pressed-thumb styling. */
+    readonly activeThumb: _angular_core.WritableSignal<ThumbId | null>;
+    /** @internal Which thumb is focused (for bubble visibility). */
+    private readonly focusedThumb;
+    /** @internal Set of pointer IDs currently captured per-thumb for release tracking. */
+    private readonly capturedPointers;
+    /** @internal Tracks whether a keyboard interaction has mutated the value since last blur. */
+    private keyboardDirty;
+    constructor();
+    /** @internal Effective disabled state (input OR set via CVA). */
+    readonly isDisabled: Signal<boolean>;
+    /** @internal Whether a label/value header row should render. */
+    readonly hasHeader: Signal<boolean>;
+    /** @internal Effective step: min 0 (continuous). */
+    private readonly effectiveStep;
+    /** @internal Current scale range. */
+    private readonly scaleRange;
+    /** @internal Whether marks are resolved as a visible list. */
+    private readonly marksResolved;
+    /** @internal */
+    readonly resolvedMarks: Signal<SliderMark[]>;
+    /** @internal */
+    readonly hasVisibleMarks: Signal<boolean>;
+    /** @internal */
+    readonly hasMarkLabels: Signal<boolean>;
+    /** @internal Clamped current values. */
+    readonly startValue: Signal<number>;
+    /** @internal */
+    readonly endValue: Signal<number>;
+    /** @internal */
+    readonly singleValue: Signal<number>;
+    /** @internal aria-valuemax for the start thumb (cannot cross end thumb). */
+    readonly effectiveStartMax: Signal<number>;
+    /** @internal aria-valuemin for the end thumb (cannot go below start thumb). */
+    readonly effectiveEndMin: Signal<number>;
+    /** @internal Percentage position of the single thumb on the rail. */
+    readonly singlePct: Signal<number>;
+    /** @internal */
+    readonly startPct: Signal<number>;
+    /** @internal */
+    readonly endPct: Signal<number>;
+    /** @internal Fill segment position. */
+    readonly fillLeftPct: Signal<number>;
+    /** @internal */
+    readonly fillWidthPct: Signal<number>;
+    /** @internal Formatted display of the current value for the header. */
+    readonly headerValueText: Signal<string>;
+    private readonly variantResult;
+    /** @internal */
+    readonly rootClasses: Signal<string>;
+    /** @internal */
+    readonly headerClasses: Signal<string>;
+    /** @internal */
+    readonly labelClasses: Signal<string>;
+    /** @internal */
+    readonly valueTextClasses: Signal<string>;
+    /** @internal */
+    readonly descriptionClasses: Signal<string>;
+    /** @internal */
+    readonly regionClasses: Signal<string>;
+    /** @internal */
+    readonly railClasses: Signal<string>;
+    /** @internal */
+    readonly fillClasses: Signal<string>;
+    /** @internal */
+    readonly marksRowClasses: Signal<string>;
+    /** @internal */
+    readonly markLabelsRowClasses: Signal<string>;
+    /** @internal */
+    readonly markLabelClasses: Signal<string>;
+    /** @internal */
+    readonly minMaxRowClasses: Signal<string>;
+    /** @internal */
+    readonly thumbClasses: Signal<string>;
+    /**
+     * @internal Memoized class map for mark dots — keyed by mark value. Recomputed
+     * only when the variant slots, fill range, or marks list changes; lookups
+     * from the template (`markClassFor(markValue)`) are O(1) Map reads.
+     */
+    private readonly markClassMap;
+    /** @internal Mark dot color depends on whether it falls inside the filled segment. */
+    markClassFor(markValue: number): string;
+    /**
+     * @internal Memoized bubble classes per thumb — enumerated once per
+     * dependency change so each `bubbleClassFor(thumb)` is a single object
+     * property read.
+     */
+    private readonly bubbleClassMap;
+    /** @internal Bubble visibility depends on drag / focus / hover state. */
+    bubbleClassFor(thumb: ThumbId): string;
+    /** @internal */
+    readonly resolvedAriaDescribedby: Signal<string | null>;
+    /** @internal */
+    readonly resolvedSingleAriaLabel: Signal<string | null>;
+    /** @internal */
+    readonly resolvedSingleAriaLabelledby: Signal<string | null>;
+    /** @internal */
+    readonly resolvedStartAriaLabel: Signal<string | null>;
+    /** @internal */
+    readonly resolvedStartAriaLabelledby: Signal<string | null>;
+    /** @internal */
+    readonly resolvedEndAriaLabel: Signal<string | null>;
+    /** @internal */
+    readonly resolvedEndAriaLabelledby: Signal<string | null>;
+    /** Track click: move the nearest thumb to the clicked position and begin a drag. */
+    onTrackPointerDown(event: PointerEvent): void;
+    /** Thumb press: capture pointer and begin a drag gesture. */
+    onThumbPointerDown(event: PointerEvent, thumb: ThumbId): void;
+    private beginDrag;
+    private readonly onPointerMove;
+    private readonly onPointerUp;
+    /** Keyboard navigation: arrows for step, PageUp/Down for 10% jumps, Home/End for extremes. */
+    onThumbKeyDown(event: KeyboardEvent, thumb: ThumbId): void;
+    /** @internal */
+    onThumbBlur(): void;
+    /** @internal Clamp to min/max and snap to step. Returns a finite number. */
+    private clampAndSnap;
+    /** @internal Percent of value along the scale, in [0, 100]. */
+    valuePct(value: number): number;
+    /** @internal Format a single number using the configured formatter. */
+    format(value: number): string;
+    private getThumbValue;
+    private setThumbValue;
+    private updateValueFromClientX;
+    private thumbElementFor;
+    private nearestThumbFor;
+    private currentValue;
+    private commitValue;
+    private hasAccessibleName;
+    writeValue(value: SliderValue | null | undefined): void;
+    registerOnChange(fn: (value: SliderValue) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    ngOnInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SliderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SliderComponent, "tw-slider", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "range": { "alias": "range"; "required": false; "isSignal": true; }; "marks": { "alias": "marks"; "required": false; "isSignal": true; }; "showMarkLabels": { "alias": "showMarkLabels"; "required": false; "isSignal": true; }; "showMinMax": { "alias": "showMinMax"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "valueFormatter": { "alias": "valueFormatter"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "ariaLabelStart": { "alias": "ariaLabelStart"; "required": false; "isSignal": true; }; "ariaLabelEnd": { "alias": "ariaLabelEnd"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "valueInput": "input"; "change": "change"; }, never, never, true, never>;
+}
+
+export { SliderComponent };
+export type { SliderMark, SliderValue, SliderValueFormatter, SliderVariant };