@cdevhub/ngx-tw 0.2.0

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

@@ -0,0 +1,48 @@
+import * as _angular_core from '@angular/core';
+import { TwColor, TwSize } from '@cdevhub/ngx-tw/core';
+
+/** Visual style of the card container. */
+type CardVariant = 'elevated' | 'outlined' | 'ghost';
+declare class CardComponent {
+    /** Controls the visual elevation style. Defaults to `'elevated'`. */
+    readonly variant: _angular_core.InputSignal<CardVariant>;
+    /** Sets the semantic color for bordered regions. Only applies to `outlined` variant borders. Defaults to `'neutral'`. */
+    readonly color: _angular_core.InputSignal<TwColor>;
+    /** Controls padding of header, body, and footer sections. Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<TwSize>;
+    private readonly variantResult;
+    readonly rootClasses: _angular_core.Signal<string>;
+    readonly headerClasses: _angular_core.Signal<string>;
+    readonly bodyClasses: _angular_core.Signal<string>;
+    readonly footerClasses: _angular_core.Signal<string>;
+    readonly mediaClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "tw-card", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class CardHeaderDirective {
+    private readonly card;
+    readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardHeaderDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CardHeaderDirective, "[twCardHeader]", never, {}, {}, never, never, true, never>;
+}
+declare class CardBodyDirective {
+    private readonly card;
+    readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardBodyDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CardBodyDirective, "[twCardBody]", never, {}, {}, never, never, true, never>;
+}
+declare class CardFooterDirective {
+    private readonly card;
+    readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardFooterDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CardFooterDirective, "[twCardFooter]", never, {}, {}, never, never, true, never>;
+}
+declare class CardMediaDirective {
+    private readonly card;
+    readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardMediaDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CardMediaDirective, "[twCardMedia]", never, {}, {}, never, never, true, never>;
+}
+
+export { CardBodyDirective, CardComponent, CardFooterDirective, CardHeaderDirective, CardMediaDirective };
+export type { CardVariant };

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

@@ -0,0 +1,406 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as tailwind_merge from 'tailwind-merge';
+import * as _angular_core from '@angular/core';
+import { Signal, ElementRef } from '@angular/core';
+import { TwOrientation, TwSize, TwColor } from '@cdevhub/ngx-tw/core';
+
+/** Visual style of the indicators row rendered by `<tw-carousel-indicators>`. */
+type TwCarouselIndicatorVariant = 'dots' | 'lines' | 'numbers';
+/** Where the indicators sit relative to the carousel viewport. */
+type TwCarouselIndicatorPosition = 'overlay' | 'below';
+/** What triggered an `activeIndex` change. */
+type TwCarouselSlideChangeTrigger = 'pointer' | 'keyboard' | 'autoplay' | 'indicator' | 'button' | 'programmatic';
+/** Payload emitted by `CarouselComponent.slideChange`. */
+interface TwCarouselSlideChangeEvent {
+    /** Previous active slide index (0-based). */
+    from: number;
+    /** New active slide index (0-based). */
+    to: number;
+    /** What triggered the change. */
+    trigger: TwCarouselSlideChangeTrigger;
+}
+/** Reason emitted when autoplay transitions running → paused. */
+type TwCarouselAutoplayReason = 'hover' | 'focus' | 'interaction' | 'visibility' | 'manual';
+/** Localizable strings for the carousel. */
+interface TwCarouselLabels {
+    /** Accessible label for the Previous-slide directive host. Default: `'Previous slide'`. */
+    previous: string;
+    /** Accessible label for the Next-slide directive host. Default: `'Next slide'`. */
+    next: string;
+    /** Accessible label for the autoplay pause control. Default: `'Pause autoplay'`. */
+    pauseAutoplay: string;
+    /** Accessible label for the autoplay resume control. Default: `'Resume autoplay'`. */
+    resumeAutoplay: string;
+    /** Template for indicator-button accessible names. Variable: `{page}` (1-based). Default: `'Go to slide {page}'`. */
+    indicator: string;
+    /** Template for per-slide accessible names with a custom label. Variables: `{index}` (1-based), `{total}`, `{label}`. Default: `'{index} of {total}: {label}'`. */
+    slideOfWithLabel: string;
+    /** Template for per-slide accessible names without a custom label. Variables: `{index}` (1-based), `{total}`. Default: `'{index} of {total}'`. */
+    slideOf: string;
+}
+/** Default English labels used when consumers do not override via the `labels` input. */
+declare const DEFAULT_CAROUSEL_LABELS: Readonly<TwCarouselLabels>;
+/**
+ * A single slide inside a `<tw-carousel>`. Projects arbitrary content via its
+ * default slot. Reports its visibility back to the carousel container via a
+ * shared `IntersectionObserver`; hidden slides receive `aria-hidden="true"` and
+ * the `inert` attribute so their focusable descendants are removed from the tab
+ * order.
+ */
+declare class CarouselSlideComponent {
+    /** Optional human-readable label for the slide. When provided, used in the slide's `aria-label` as `"{index + 1} of {total}: {label}"`. When `null`, uses `"{index + 1} of {total}"` only. Defaults to `null`. */
+    readonly label: _angular_core.InputSignal<string | null>;
+    /** When `true`, the slide is rendered but skipped by Prev/Next, Indicators, keyboard nav, and autoplay. Programmatic `scrollTo` still lands on it. Visually muted (`opacity-50`, `cursor-not-allowed`). Defaults to `false`. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** @internal Direct parent carousel. A `tw-carousel-slide` outside a `tw-carousel` is a programmer error — the DI failure throws naturally. */
+    readonly carousel: CarouselComponent;
+    /** @internal Host element reference used by the carousel's `IntersectionObserver`. */
+    readonly _hostEl: any;
+    /** @internal Visibility flag set by the carousel's IntersectionObserver. Initial value is `true` so the first paint does not flash `inert` on every slide. */
+    readonly _isVisible: _angular_core.WritableSignal<boolean>;
+    readonly _isHidden: Signal<boolean>;
+    /** @internal 0-based index in the parent carousel's slide content. -1 until contentChildren materialises. */
+    readonly index: Signal<number>;
+    /** @internal Resolved `aria-label` per the `slideOf` / `slideOfWithLabel` template. */
+    readonly accessibleName: Signal<string>;
+    readonly slideClasses: Signal<string>;
+    /** @internal Per-slide `flex-basis`. Reads from the carousel so each slide sizes along the viewport's main axis (width for horizontal, height for vertical via `flex-direction`). */
+    readonly _basis: Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CarouselSlideComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CarouselSlideComponent, "tw-carousel-slide", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+/**
+ * Slide / swipe gallery primitive. Renders projected `<tw-carousel-slide>`
+ * children in a horizontally (or vertically) scrolling viewport with native
+ * CSS scroll-snap, optional autoplay, mouse-pointer drag, keyboard navigation,
+ * prev/next directive hosts, and an `<tw-carousel-indicators>` companion.
+ * Implements the W3C APG carousel pattern: `role="region"` +
+ * `aria-roledescription="carousel"` on the host; the inner viewport carries
+ * `tabindex="0"` and a polite `aria-live` region when autoplay is off.
+ */
+declare class CarouselComponent {
+    /** Axis along which slides flow. `'horizontal'` is the canonical case; `'vertical'` is supported for tickers and feature lists. Defaults to `'horizontal'`. */
+    readonly orientation: _angular_core.InputSignal<TwOrientation>;
+    /** Number of slides visible in the viewport. May be fractional (e.g. `1.2` for a "peek" of the next slide). Values below `0.5` are clamped to `0.5`; values above the slide count are clamped to the slide count. Defaults to `1`. */
+    readonly slidesPerView: _angular_core.InputSignal<number>;
+    /** Number of slides advanced per navigation action (button click, keyboard, indicator). Non-integer values are floored. Defaults to `1`. */
+    readonly slidesToScroll: _angular_core.InputSignal<number>;
+    /** Inter-slide gap on the scroll axis. Mapped via the canonical spacing scale. Defaults to `'md'`. */
+    readonly gap: _angular_core.InputSignal<TwSize>;
+    /** When `true`, navigation wraps around at the boundaries. Prev at slide 0 jumps to the last page; Next at the last page jumps to slide 0. Implementation is jumpless via a brief opacity mask. Defaults to `false`. */
+    readonly loop: _angular_core.InputSignal<boolean>;
+    /** When `true`, the carousel auto-advances by `slidesToScroll` every `autoplayInterval` ms. Pauses on hover, focus-in, drag, document hidden, or user interaction. Defaults to `false`. */
+    readonly autoplay: _angular_core.InputSignal<boolean>;
+    /** Milliseconds between autoplay advances. Values below `1000` are clamped to `1000` per WCAG 2.2.2. Defaults to `5000`. */
+    readonly autoplayInterval: _angular_core.InputSignal<number>;
+    /** Pauses autoplay while the pointer is over the container. Defaults to `true` because losing autoplay on hover is the expected gallery behavior — opt-out is the special case. */
+    readonly pauseOnHover: _angular_core.InputSignal<boolean>;
+    /** Pauses autoplay while keyboard focus is anywhere inside the container. Defaults to `true` for WCAG 2.2.2 compliance — opt-out is the special case. */
+    readonly pauseOnFocusIn: _angular_core.InputSignal<boolean>;
+    /** When `true`, the user may pan the slides via mouse pointer drag; touch is left to native scroll. Pointer events are intercepted only when the drag exceeds a 6-pixel threshold so clicks inside slides still work. Defaults to `true` because galleries are draggable by user expectation — opt-out is the special case. */
+    readonly draggable: _angular_core.InputSignal<boolean>;
+    /** When `true`, the viewport responds to Arrow / Home / End / PageUp / PageDown when focus is inside it. Defaults to `true` for keyboard accessibility — opt-out is the special case. */
+    readonly keyboard: _angular_core.InputSignal<boolean>;
+    /** CSS `scroll-snap-align` value applied to each slide. `'start'` is the standard gallery behavior; `'center'` is used for peek/preview layouts. Defaults to `'start'`. */
+    readonly snapAlign: _angular_core.InputSignal<"start" | "center" | "end">;
+    /** Two-way bound 0-based index of the first visible slide in the current page. Setting from the parent scrolls the viewport smoothly to align that slide; reading reflects user-driven scroll position after `scrollend`. Defaults to `0`. */
+    readonly activeIndex: _angular_core.ModelSignal<number>;
+    /** Accessible name for the carousel region. If both this and `ariaLabelledBy` are `null`, a one-time dev-mode `console.warn` is logged (production builds never log). Defaults to `null`. */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    /** ID of an element labeling the carousel. Either `ariaLabel` or `ariaLabelledBy` SHOULD be provided. Defaults to `null`. */
+    readonly ariaLabelledBy: _angular_core.InputSignal<string | null>;
+    /** Localizable strings for prev/next/pause/resume/indicator/slide-of templates. Unset keys fall back to the English defaults in `DEFAULT_CAROUSEL_LABELS`. Defaults to `{}`. */
+    readonly labels: _angular_core.InputSignal<Partial<TwCarouselLabels>>;
+    /** Fires when the active index changes. Payload identifies the previous and new index plus the trigger source. */
+    readonly slideChange: _angular_core.OutputEmitterRef<TwCarouselSlideChangeEvent>;
+    /** Fires when autoplay transitions from running to paused. Payload is the pause reason. */
+    readonly autoplayPaused: _angular_core.OutputEmitterRef<TwCarouselAutoplayReason>;
+    /** Fires when autoplay transitions from paused to running. */
+    readonly autoplayResumed: _angular_core.OutputEmitterRef<void>;
+    private readonly _destroyRef;
+    /** @internal The scrollable viewport element. */
+    readonly _viewportRef: Signal<ElementRef<HTMLDivElement>>;
+    /** @internal Projected slides in DOM order. */
+    readonly slides: Signal<readonly CarouselSlideComponent[]>;
+    /** @internal Resolved label record with English defaults filled in. */
+    readonly resolvedLabels: Signal<TwCarouselLabels>;
+    /** @internal Effective `slidesPerView` clamped to `[0.5, slideCount]`. */
+    readonly _effectiveSlidesPerView: Signal<number>;
+    /** @internal Effective `slidesToScroll` floored to a positive integer. Read by child indicators directive (`CarouselIndicatorsComponent._onClick`) as a signal. */
+    readonly _effectiveSlidesToScroll: Signal<number>;
+    /** @internal Autoplay interval clamped to ≥ 1000 ms per WCAG 2.2.2. */
+    readonly _effectiveAutoplayInterval: Signal<number>;
+    /** Number of distinct pages (groups of `slidesToScroll` slides) the carousel can land on. Reactive. */
+    readonly pageCount: Signal<number>;
+    /** 0-based page index that contains `activeIndex`. Reactive. */
+    readonly activePage: Signal<number>;
+    /** The highest slide index the carousel can land on given the current `slidesPerView`. Equals `max(0, slideCount - ceil(effectiveSlidesPerView))`. Reactive. Every site that asks "where is the last legal landing position?" goes through this signal. */
+    readonly lastReachableIndex: Signal<number>;
+    /** @internal `true` when the carousel is at slide 0 (drives prev directive `disabled`). */
+    readonly isAtStart: Signal<boolean>;
+    /** @internal `true` when the carousel is at the last reachable slide (drives next directive `disabled`). */
+    readonly isAtEnd: Signal<boolean>;
+    /** @internal Per-slide `flex-basis`. Read by each `CarouselSlideComponent` host style binding to size slides along the viewport's main axis. Reactive. */
+    readonly slideBasis: Signal<string>;
+    private readonly _variantResult;
+    /** @internal Slot-class accessor used by child slides and indicators. */
+    readonly _slotClasses: Signal<{
+        root: (slotProps?: ({
+            variant?: "dots" | "lines" | "numbers" | undefined;
+            size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+            orientation?: "horizontal" | "vertical" | undefined;
+            position?: "overlay" | "below" | undefined;
+            gap?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+            snapAlign?: "start" | "center" | "end" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+        viewport: (slotProps?: ({
+            variant?: "dots" | "lines" | "numbers" | undefined;
+            size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+            orientation?: "horizontal" | "vertical" | undefined;
+            position?: "overlay" | "below" | undefined;
+            gap?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+            snapAlign?: "start" | "center" | "end" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+        slide: (slotProps?: ({
+            variant?: "dots" | "lines" | "numbers" | undefined;
+            size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+            orientation?: "horizontal" | "vertical" | undefined;
+            position?: "overlay" | "below" | undefined;
+            gap?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+            snapAlign?: "start" | "center" | "end" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+        pauseControl: (slotProps?: ({
+            variant?: "dots" | "lines" | "numbers" | undefined;
+            size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+            orientation?: "horizontal" | "vertical" | undefined;
+            position?: "overlay" | "below" | undefined;
+            gap?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+            snapAlign?: "start" | "center" | "end" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+        indicators: (slotProps?: ({
+            variant?: "dots" | "lines" | "numbers" | undefined;
+            size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+            orientation?: "horizontal" | "vertical" | undefined;
+            position?: "overlay" | "below" | undefined;
+            gap?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+            snapAlign?: "start" | "center" | "end" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+        indicator: (slotProps?: ({
+            variant?: "dots" | "lines" | "numbers" | undefined;
+            size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+            orientation?: "horizontal" | "vertical" | undefined;
+            position?: "overlay" | "below" | undefined;
+            gap?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+            snapAlign?: "start" | "center" | "end" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+    } & {
+        root: (slotProps?: ({
+            variant?: "dots" | "lines" | "numbers" | undefined;
+            size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+            orientation?: "horizontal" | "vertical" | undefined;
+            position?: "overlay" | "below" | undefined;
+            gap?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+            snapAlign?: "start" | "center" | "end" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+        viewport: (slotProps?: ({
+            variant?: "dots" | "lines" | "numbers" | undefined;
+            size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+            orientation?: "horizontal" | "vertical" | undefined;
+            position?: "overlay" | "below" | undefined;
+            gap?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+            snapAlign?: "start" | "center" | "end" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+        slide: (slotProps?: ({
+            variant?: "dots" | "lines" | "numbers" | undefined;
+            size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+            orientation?: "horizontal" | "vertical" | undefined;
+            position?: "overlay" | "below" | undefined;
+            gap?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+            snapAlign?: "start" | "center" | "end" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+        pauseControl: (slotProps?: ({
+            variant?: "dots" | "lines" | "numbers" | undefined;
+            size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+            orientation?: "horizontal" | "vertical" | undefined;
+            position?: "overlay" | "below" | undefined;
+            gap?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+            snapAlign?: "start" | "center" | "end" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+        indicators: (slotProps?: ({
+            variant?: "dots" | "lines" | "numbers" | undefined;
+            size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+            orientation?: "horizontal" | "vertical" | undefined;
+            position?: "overlay" | "below" | undefined;
+            gap?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+            snapAlign?: "start" | "center" | "end" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+        indicator: (slotProps?: ({
+            variant?: "dots" | "lines" | "numbers" | undefined;
+            size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+            orientation?: "horizontal" | "vertical" | undefined;
+            position?: "overlay" | "below" | undefined;
+            gap?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+            snapAlign?: "start" | "center" | "end" | undefined;
+        } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+    } & {}>;
+    readonly rootClasses: Signal<string>;
+    readonly viewportClasses: Signal<string>;
+    readonly pauseControlClasses: Signal<string>;
+    /** @internal Last interaction source — written before any navigation triggers scroll, read by the settle handler. */
+    private readonly _lastInteractionSource;
+    /** @internal Suppresses the scroll-end recompute during a loop-jump. */
+    private readonly _isLoopJumping;
+    private readonly _isHovered;
+    private readonly _hasFocusInside;
+    private readonly _isTabVisible;
+    private readonly _isDragging;
+    private readonly _isManuallyPaused;
+    private readonly _postInteractionPauseUntil;
+    /** @internal RTL sign factor applied to scroll-position math. `+1` LTR, `-1` RTL. */
+    private readonly _rtlSign;
+    readonly _pauseControlAriaLabel: Signal<string>;
+    /** @internal Public accessor for the template. */
+    readonly _isManuallyPausedView: Signal<boolean>;
+    /**
+     * @internal Sets the "last interaction source" signal so the upcoming
+     * navigation call emits `slideChange` with the correct trigger. Called by
+     * `[twCarouselPrev]`, `[twCarouselNext]`, and the indicators before they
+     * invoke `next()` / `prev()` / `scrollTo()`.
+     */
+    _setLastInteractionSource(source: TwCarouselSlideChangeTrigger): void;
+    constructor();
+    private readonly _isPaused;
+    private _currentPauseReason;
+    private _intersectionObserver;
+    private _resizeObserver;
+    private _onScrollEndBound;
+    private _onScrollDebouncedBound;
+    private _scrollDebounceTimer;
+    private _onVisibilityChangeBound;
+    private _setupViewport;
+    private _teardownViewport;
+    private _reobserveSlides;
+    private _logicalOffset;
+    private _currentLogicalScroll;
+    private _findClosestSlideIndex;
+    private _handleScrollSettled;
+    private _emitSlideChange;
+    /** Advance by `slidesToScroll`. Wraps if `loop` is `true`; no-op at the last page when `loop` is `false`. Emits `slideChange` with trigger `'programmatic'` when called externally. */
+    next(): void;
+    /** Retreat by `slidesToScroll`. Wraps if `loop` is `true`; no-op at slide 0 when `loop` is `false`. Emits `slideChange` with trigger `'programmatic'` when called externally. */
+    prev(): void;
+    /** Jump to a specific 0-based slide index. `opts.behavior` is `'smooth' | 'instant'`; default is `'smooth'` unless `prefers-reduced-motion: reduce` is set, in which case the default is `'instant'`. */
+    scrollTo(index: number, opts?: {
+        behavior?: 'smooth' | 'instant';
+    }): void;
+    /** Pause autoplay. `reason` defaults to `'manual'`. */
+    pause(_reason?: TwCarouselAutoplayReason): void;
+    /** Resume autoplay if `autoplay` input is `true`. */
+    resume(): void;
+    private _findNextEnabled;
+    private _scrollToIndex;
+    /**
+     * @internal Resolves the effective scroll behavior. Explicit caller-supplied
+     * values are honoured verbatim; otherwise checks
+     * `matchMedia('(prefers-reduced-motion: reduce)')` and returns `'instant'`
+     * when the user has reduced-motion enabled, `'smooth'` otherwise. See B(d).
+     */
+    private _resolveBehavior;
+    private _loopJumpHandle;
+    private _loopJumpSafetyHandle;
+    private _loopJumpTo;
+    _onPointerEnter(): void;
+    _onPointerLeave(): void;
+    _onFocusIn(): void;
+    _onFocusOut(event: FocusEvent): void;
+    private _dragStart;
+    private _dragCleanup;
+    _onPointerDown(event: PointerEvent): void;
+    private _onPointerMove;
+    private _onPointerUp;
+    _onKeydown(event: KeyboardEvent): void;
+    _togglePauseControl(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CarouselComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CarouselComponent, "tw-carousel", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "slidesPerView": { "alias": "slidesPerView"; "required": false; "isSignal": true; }; "slidesToScroll": { "alias": "slidesToScroll"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "loop": { "alias": "loop"; "required": false; "isSignal": true; }; "autoplay": { "alias": "autoplay"; "required": false; "isSignal": true; }; "autoplayInterval": { "alias": "autoplayInterval"; "required": false; "isSignal": true; }; "pauseOnHover": { "alias": "pauseOnHover"; "required": false; "isSignal": true; }; "pauseOnFocusIn": { "alias": "pauseOnFocusIn"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "keyboard": { "alias": "keyboard"; "required": false; "isSignal": true; }; "snapAlign": { "alias": "snapAlign"; "required": false; "isSignal": true; }; "activeIndex": { "alias": "activeIndex"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; }, { "activeIndex": "activeIndexChange"; "slideChange": "slideChange"; "autoplayPaused": "autoplayPaused"; "autoplayResumed": "autoplayResumed"; }, ["slides"], ["tw-carousel-slide", "[twCarouselPrev], [twCarouselNext], tw-carousel-indicators", "*"], true, never>;
+}
+/**
+ * Renders one button per **page** (not per slide) inside a `<tw-carousel>`.
+ * The active button is marked with `aria-current="true"` and a distinguishing
+ * scale / width / fill so it is identifiable beyond color alone (WCAG 1.4.1).
+ */
+declare class CarouselIndicatorsComponent {
+    /** Visual style. `'dots'` = small filled circles; `'lines'` = short horizontal/vertical bars; `'numbers'` = text 1, 2, 3 inside small pills. Defaults to `'dots'`. */
+    readonly variant: _angular_core.InputSignal<TwCarouselIndicatorVariant>;
+    /** Color of the active indicator. Inactive indicators use neutral `fg-muted` tokens. Defaults to `'primary'`. */
+    readonly color: _angular_core.InputSignal<TwColor>;
+    /** Indicator size (diameter/length and gap between indicators). Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<TwSize>;
+    /** When `'overlay'`, the indicators float absolutely-positioned over the carousel with a `bg-overlay-control` translucent capsule backdrop for contrast. When `'below'`, they sit below the carousel as a normal block. Defaults to `'below'`. */
+    readonly position: _angular_core.InputSignal<TwCarouselIndicatorPosition>;
+    /** @internal Direct parent carousel. */
+    readonly carousel: CarouselComponent;
+    private readonly _variantResult;
+    readonly rootClasses: Signal<string>;
+    /**
+     * @internal Sequence of page indices to render. Returns `[]` when the
+     * parent carousel's `slidesPerView` is not `1` — a single dot can never
+     * match a viewport that shows two or more slides, so the indicator UX is
+     * unambiguously broken at multi-item display (issue A1). The host element
+     * stays mounted so layout doesn't reflow if the consumer toggles
+     * `slidesPerView` back to `1` — the buttons reappear at that point without
+     * a remount.
+     */
+    readonly _pages: Signal<number[]>;
+    constructor();
+    _buttonClasses(page: number): string;
+    _buttonLabel(page: number): string;
+    _onClick(page: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CarouselIndicatorsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CarouselIndicatorsComponent, "tw-carousel-indicators", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Apply to any focusable element (typically `<button>`) inside a `<tw-carousel>`
+ * to navigate to the previous page. Auto-disables at the first slide when the
+ * carousel is not looping. Sets `aria-label` to `labels.previous` unless the
+ * host already carries `aria-label` or `aria-labelledby`.
+ */
+declare class CarouselPrevDirective {
+    /** @internal Parent carousel. */
+    readonly carousel: CarouselComponent;
+    private readonly _hostEl;
+    private readonly _consumerLabel;
+    private readonly _hasLabelledBy;
+    private readonly _isButton;
+    /** @internal True when prev is unavailable (at start and !loop). */
+    readonly _isDisabled: Signal<boolean>;
+    _ariaLabel(): string | null;
+    _isButtonDisabled(): string | null;
+    _isTabindex(): string | null;
+    _onClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CarouselPrevDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CarouselPrevDirective, "[twCarouselPrev]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Apply to any focusable element (typically `<button>`) inside a `<tw-carousel>`
+ * to navigate to the next page. Auto-disables at the last page when the
+ * carousel is not looping. Sets `aria-label` to `labels.next` unless the host
+ * already carries `aria-label` or `aria-labelledby`.
+ */
+declare class CarouselNextDirective {
+    /** @internal Parent carousel. */
+    readonly carousel: CarouselComponent;
+    private readonly _hostEl;
+    private readonly _consumerLabel;
+    private readonly _hasLabelledBy;
+    private readonly _isButton;
+    readonly _isDisabled: Signal<boolean>;
+    _ariaLabel(): string | null;
+    _isButtonDisabled(): string | null;
+    _isTabindex(): string | null;
+    _onClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CarouselNextDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<CarouselNextDirective, "[twCarouselNext]", never, {}, {}, never, never, true, never>;
+}
+
+export { CarouselComponent, CarouselIndicatorsComponent, CarouselNextDirective, CarouselPrevDirective, CarouselSlideComponent, DEFAULT_CAROUSEL_LABELS };
+export type { TwCarouselAutoplayReason, TwCarouselIndicatorPosition, TwCarouselIndicatorVariant, TwCarouselLabels, TwCarouselSlideChangeEvent, TwCarouselSlideChangeTrigger };

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

@@ -0,0 +1,136 @@
+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';
+import { FormFieldControl } from '@cdevhub/ngx-tw/form-field';
+
+/** Visual style of the checkbox when checked or indeterminate. */
+type CheckboxVariant = 'solid' | 'outline';
+/** Position of the label relative to the checkbox control. */
+type CheckboxLabelPosition = 'before' | 'after';
+declare class CheckboxComponent extends FormFieldControl<boolean> implements ControlValueAccessor, OnInit {
+    /** Sets the semantic color for the checked and indeterminate box fill/border. Defaults to `'primary'`. */
+    readonly color: _angular_core.InputSignal<TwColor>;
+    /** Controls the overall scale of the box, check icon, and label typography. Defaults to `'md'`. */
+    readonly size: _angular_core.InputSignal<TwSize>;
+    /** Visual style when checked or indeterminate. `'solid'` fills the box with the color; `'outline'` keeps a transparent fill with a colored border and check. Defaults to `'solid'`. */
+    readonly variant: _angular_core.InputSignal<CheckboxVariant>;
+    /** When true, prevents interaction and applies muted styling. Defaults to `false`. */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** When true, sets `aria-required="true"` so assistive tech announces the control as required. Defaults to `false`. */
+    readonly requiredInput: _angular_core.InputSignal<boolean>;
+    /** Optional inline label rendered next to the checkbox. Use default content projection for rich label content instead. Projection takes precedence. */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Optional secondary description rendered under the label. Use `[slot="description"]` content projection for rich content instead. Projection takes precedence. */
+    readonly description: _angular_core.InputSignal<string | undefined>;
+    /** Position of the label/description relative to the checkbox. Defaults to `'after'`. */
+    readonly labelPosition: _angular_core.InputSignal<CheckboxLabelPosition>;
+    /** Optional name attribute, applied to the hidden native `<input type="checkbox">` so native form submission includes the control. */
+    readonly name: _angular_core.InputSignal<string | undefined>;
+    /** Id on the host element. Auto-generated as `tw-checkbox-N` when not provided. Used by the form-field's `<label for>` attribute. */
+    readonly idInput: _angular_core.InputSignal<string | undefined>;
+    /** Accessible name when no visible label is provided. Mirrored to `aria-label`. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** ID of an external element that labels the checkbox. Mirrored to `aria-labelledby`. */
+    readonly ariaLabelledby: _angular_core.InputSignal<string | undefined>;
+    /** ID of an external element that describes the checkbox. Mirrored to `aria-describedby`. Form-field merges its hint/error ids alongside. */
+    readonly ariaDescribedby: _angular_core.InputSignal<string | undefined>;
+    /** Per-instance override of the {@link ErrorStateMatcher}. When omitted, the directive uses the `TW_ERROR_STATE_MATCHER` token's value. */
+    readonly errorStateMatcher: _angular_core.InputSignal<ErrorStateMatcher | undefined>;
+    /** Two-way bound checked state. Updates when the user toggles via click or Space. */
+    readonly checked: _angular_core.ModelSignal<boolean>;
+    /** Two-way bound indeterminate state. When true, the box shows a dash and the host exposes `aria-checked="mixed"`. Any user toggle clears indeterminate and sets `checked` to `true`. */
+    readonly indeterminate: _angular_core.ModelSignal<boolean>;
+    /** Fires after the checked state changes from a user interaction. Does not fire when the value is updated programmatically via `writeValue`. */
+    readonly change: _angular_core.OutputEmitterRef<boolean>;
+    private readonly focusMonitor;
+    private readonly elementRef;
+    private readonly destroyRef;
+    private readonly ngControl;
+    private readonly parentForm;
+    private readonly parentFormGroup;
+    private readonly defaultMatcher;
+    private onChange;
+    private onTouched;
+    private readonly cvaDisabled;
+    private readonly _focused;
+    private readonly _ngControlRev;
+    private readonly _formSubmitRev;
+    private readonly describedByIdsSignal;
+    private readonly uid;
+    /** @internal Fallback id used when the consumer does not set `[id]`. */
+    readonly hostId: string;
+    /** @internal Resolved id on the host element. */
+    readonly id: Signal<string>;
+    /** @internal Id of the internal label `<span>`, derived from the resolved host id. */
+    readonly labelElementId: Signal<string>;
+    /** @internal Id of the internal description `<span>`, derived from the resolved host id. */
+    readonly descriptionElementId: Signal<string>;
+    constructor();
+    /** @internal */
+    readonly isDisabled: Signal<boolean>;
+    /**
+     * @internal Visible-state mirror of the `checked` model. `linkedSignal` keeps it
+     * synced with parent updates (including `writeValue` from reactive forms), while
+     * also accepting explicit `set()` calls from `toggle()` / `writeValue()` so the
+     * DOM reflects the new state synchronously — before `checkedChange` propagates
+     * through the host binding round-trip. Reading this signal in host bindings
+     * (`aria-checked`, `data-checked`, box classes) decouples render from the
+     * model's notification cadence.
+     */
+    readonly internalChecked: _angular_core.WritableSignal<boolean>;
+    /**
+     * @internal Visible-state mirror of the `indeterminate` model. Same rationale as
+     * `internalChecked` — `toggle()` and `writeValue()` clear it synchronously so
+     * `aria-checked="mixed"` flips off in the same microtask as `aria-checked="true"`.
+     */
+    readonly internalIndeterminate: _angular_core.WritableSignal<boolean>;
+    readonly ariaCheckedValue: Signal<"true" | "false" | "mixed">;
+    readonly effectiveAriaLabelledby: Signal<string | undefined>;
+    readonly effectiveAriaDescribedby: Signal<string | undefined>;
+    private readonly isActive;
+    /** @internal */
+    readonly value: Signal<boolean | null>;
+    /** @internal */
+    readonly focused: Signal<boolean>;
+    /** @internal Checkboxes are never empty in the form-field sense — they always have a boolean value. */
+    readonly empty: Signal<boolean>;
+    /** @internal */
+    readonly required: Signal<boolean>;
+    /** @internal */
+    readonly errorState: Signal<boolean>;
+    /** @internal */
+    readonly controlType = "checkbox";
+    /** @internal */
+    readonly userAriaDescribedBy: Signal<string | undefined>;
+    private readonly variantResult;
+    readonly rootClasses: Signal<string>;
+    readonly boxWrapClasses: Signal<string>;
+    readonly iconClasses: Signal<string>;
+    readonly labelWrapClasses: Signal<string>;
+    readonly labelClasses: Signal<string>;
+    readonly descriptionClasses: Signal<string>;
+    readonly boxClasses: Signal<string>;
+    readonly iconColorClasses: Signal<string>;
+    /** Toggles the checked state. Clears indeterminate if set. No-op when disabled. */
+    toggle(): void;
+    /** Handles keyboard activation. Only Space toggles — matches native checkbox semantics. */
+    onKeydown(event: KeyboardEvent): void;
+    /** @internal Called on host blur to notify forms the control has been touched and recompute errorState. */
+    onBlur(): void;
+    writeValue(value: boolean | null | undefined): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /** @internal Called by the form-field once it has computed the merged describedby ids. */
+    setDescribedByIds(ids: string[]): void;
+    /** @internal Called when the form-field container is clicked — focus the host without toggling. */
+    onContainerClick(event: MouseEvent): void;
+    ngOnInit(): void;
+    private hasAccessibleNameHint;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CheckboxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CheckboxComponent, "tw-checkbox", never, { "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; }; "requiredInput": { "alias": "required"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "idInput": { "alias": "id"; "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; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "indeterminate": "indeterminateChange"; "change": "change"; }, never, ["[slot='indeterminate-icon']", "[slot='check-icon']", "*", "[slot='description']"], true, never>;
+}
+
+export { CheckboxComponent };
+export type { CheckboxLabelPosition, CheckboxVariant };