@cdevhub/ngx-tw 0.4.0 → 0.6.0

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

@@ -83,8 +83,24 @@ declare class SheetConfig<D = unknown, R = unknown> extends DialogConfig<D, R> {
     restoreFocus?: SheetRestoreFocus;
 }
 /** Injection token carrying the `data` value passed via {@link SheetConfig.data}. */
-declare const SHEET_DATA: InjectionToken<unknown>;
+declare const TW_SHEET_DATA: InjectionToken<unknown>;
 /** Injection token for application-wide default sheet options. Set via `provideSheet()`. */
+declare const TW_SHEET_DEFAULT_OPTIONS: InjectionToken<Partial<SheetConfig<unknown, unknown>>>;
+/**
+ * @deprecated Renamed to {@link TW_SHEET_DATA} for consistency with every other
+ * ngx-tw injection token — and with `TW_DIALOG_DATA`, its direct counterpart.
+ * This is the *same token instance*, not a copy — providing under either name
+ * and injecting under the other resolves — so the rename is safe to adopt
+ * incrementally. Removed in the next major.
+ */
+declare const SHEET_DATA: InjectionToken<unknown>;
+/**
+ * @deprecated Renamed to {@link TW_SHEET_DEFAULT_OPTIONS} for consistency with
+ * every other ngx-tw injection token — and with `TW_DIALOG_DEFAULT_OPTIONS`,
+ * its direct counterpart. This is the *same token instance*, not a copy —
+ * providing under either name and injecting under the other resolves — so the
+ * rename is safe to adopt incrementally. Removed in the next major.
+ */
 declare const SHEET_DEFAULT_OPTIONS: InjectionToken<Partial<SheetConfig<unknown, unknown>>>;
 
 /** Lifecycle states a sheet passes through. */
@@ -132,17 +148,19 @@ declare class SheetContainer extends CdkDialogContainer<SheetConfig> {
 /**
  * Reference to a sheet opened via {@link Sheet.open}. Drives the sheet
  * lifecycle (close, state, observables) and forwards useful overlay streams.
+ *
+ * The ref is returned **synchronously** from `open()`, but the sheet's render
+ * layer (`@angular/cdk/dialog` + the Tailwind container) is loaded through a
+ * dynamic `import()`. The ref therefore starts *detached*: `id`, `state`,
+ * `close()`, the lifecycle observables, and panel mutations all work
+ * immediately (mutations are buffered and replayed on attach), but the rendered
+ * component instance does not exist yet — read it via {@link whenComponentReady}
+ * instead of a synchronous `componentInstance` field.
  */
 declare class SheetRef<R = unknown, C = unknown> {
-    private readonly cdkRef;
     readonly config: SheetConfig<unknown, R>;
-    readonly containerInstance: SheetContainer;
-    /** Unique ID of the sheet. */
+    /** Unique ID of the sheet. Generated eagerly by the service, so it is valid the instant `open()` returns. */
     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. */
@@ -155,9 +173,50 @@ declare class SheetRef<R = unknown, C = unknown> {
     private readonly afterOpenedSubject;
     private readonly beforeClosedSubject;
     private readonly afterClosedSubject;
+    private readonly backdropClickSubject;
+    private readonly keydownEventsSubject;
+    private cdkRef;
+    private container;
+    private componentInstanceValue;
+    private componentRefValue;
+    private resolveComponentReady;
+    private readonly componentReadyPromise;
+    private readonly pendingPanelAdds;
+    private readonly pendingPanelRemoves;
     private pendingResult;
     private closeFocusOrigin;
-    constructor(cdkRef: DialogRef<R, C>, config: SheetConfig<unknown, R>, containerInstance: SheetContainer);
+    constructor(id: string, config: SheetConfig<unknown, R>);
+    /** The Tailwind container instance, or `null` until the sheet has attached. */
+    get containerInstance(): SheetContainer | null;
+    /**
+     * @internal Wire this facade to its CDK backend. Called from the sheet
+     * renderer **inside** `cdkDialog.open()`'s `providers` callback — the same
+     * point the constructor ran before deferral — so subscriptions to
+     * `animationStateChanged` are in place before the container emits `'open'`.
+     */
+    _attach(cdkRef: DialogRef<R, C>, container: SheetContainer): void;
+    /** @internal Record the rendered component after `cdkDialog.open()` returns. */
+    _setComponent(instance: C | null, ref: ComponentRef<C> | null): void;
+    /**
+     * Resolves with the rendered content-component instance once the sheet's
+     * render chunk has loaded and attached. Resolves `null` for template sheets,
+     * and for a sheet closed before it ever opened.
+     *
+     * Replaces the former synchronous `componentInstance` field, which cannot be
+     * populated before the deferred render chunk lands.
+     *
+     * @example
+     * ```ts
+     * const ref = sheet.open(FilterSheet);
+     * const filters = await ref.whenComponentReady();
+     * filters?.reset();
+     * ```
+     */
+    whenComponentReady(): Promise<C | null>;
+    /** The rendered component instance, or `null` if not yet attached / a template sheet. Prefer {@link whenComponentReady}. */
+    get componentInstance(): C | null;
+    /** The rendered `ComponentRef`, or `null` if not yet attached / a template sheet. */
+    get componentRef(): ComponentRef<C> | null;
     /**
      * Closes the sheet. The exit slide animation runs before the overlay is disposed.
      * @param result Value forwarded to `afterClosed()` subscribers.
@@ -169,13 +228,13 @@ declare class SheetRef<R = unknown, C = unknown> {
     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). */
+    /** Backdrop click stream (emits even when `closeOnBackdropClick` / `disableClose` is set). Buffered — a subscription made before the sheet attaches receives events once it does. */
     backdropClick(): Observable<MouseEvent>;
-    /** Keydown event stream for the overlay. */
+    /** Keydown event stream for the overlay. Buffered — a subscription made before the sheet attaches receives events once it does. */
     keydownEvents(): Observable<KeyboardEvent>;
-    /** Adds CSS classes to the overlay panel. */
+    /** Adds CSS classes to the overlay panel. Buffered until attach. */
     addPanelClass(classes: string | string[]): this;
-    /** Removes CSS classes from the overlay panel. */
+    /** Removes CSS classes from the overlay panel. Buffered until attach. */
     removePanelClass(classes: string | string[]): this;
     private closeWithOrigin;
     private finishClose;
@@ -187,13 +246,21 @@ declare class SheetRef<R = unknown, C = unknown> {
  * pinned to the requested viewport edge, a Tailwind container with axis-aware
  * sizing, slide enter/exit animations, and split close-behavior flags.
  *
+ * The rendering layer (`@angular/cdk/dialog` + the Tailwind container) is loaded
+ * through a dynamic `import()` on the first `open()` call, so merely registering
+ * this service costs nothing in the initial bundle. `open()` still returns its
+ * {@link SheetRef} synchronously — the sheet is rendered once the chunk lands.
+ * Read the rendered component via {@link SheetRef.whenComponentReady}.
+ *
  * 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;
+    /** Cached renderer chunk import — kicked off on the first `open()`. */
+    private rendererPromise;
+    private destroyed;
     private readonly openSheetsAtThisLevel;
     private readonly afterOpenedSubject;
     private readonly afterAllClosedSubject;
@@ -210,7 +277,7 @@ declare class Sheet implements OnDestroy {
      * 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.
+     * @returns Reference controlling the opened sheet, returned synchronously.
      */
     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). */
@@ -218,12 +285,22 @@ declare class Sheet implements OnDestroy {
     /** Looks up an open sheet by its id. */
     getSheetById<R = unknown, C = unknown>(id: string): SheetRef<R, C> | undefined;
     ngOnDestroy(): void;
+    /**
+     * @internal Resolves once the renderer chunk has loaded. Exposed for tests,
+     * which must await the dynamic import before asserting on rendered DOM.
+     */
+    _whenRendered(): Promise<void>;
+    /**
+     * Render a sheet once the renderer chunk has loaded. The ref was already
+     * returned to the caller, so it may have been closed (or the service
+     * destroyed) while the import was in flight — both skip the actual open.
+     */
+    private renderWhenReady;
+    private loadRenderer;
     private registerOpen;
     private unregister;
     private getAfterAllClosedSource;
     private resolveConfig;
-    private resolveScrollStrategy;
-    private resolvePositionStrategy;
     static ɵfac: i0.ɵɵFactoryDeclaration<Sheet, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<Sheet>;
 }
@@ -265,7 +342,6 @@ declare class SheetIconDirective {
 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;
@@ -286,7 +362,6 @@ declare class SheetSubtitleDirective {
 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;
@@ -321,7 +396,7 @@ declare class SheetActionsDirective {
  * `[twSheetClose]` value to pass a result to `afterClosed()` subscribers.
  */
 declare class SheetCloseDirective {
-    /** Value passed to `afterClosed()` when the button is clicked. */
+    /** Value passed to `afterClosed()` when the button is clicked. Defaults to `undefined`. */
     readonly twSheetClose: i0.InputSignal<unknown>;
     /** Native button `type`. Defaults to `'button'` to avoid accidental form submission. */
     readonly type: i0.InputSignal<"button" | "submit" | "reset">;
@@ -331,5 +406,5 @@ declare class SheetCloseDirective {
     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 { SHEET_DATA, SHEET_DEFAULT_OPTIONS, Sheet, SheetActionsDirective, SheetCloseDirective, SheetConfig, SheetContainer, SheetContentDirective, SheetDescriptionDirective, SheetHeaderDirective, SheetIconDirective, SheetRef, SheetSubtitleDirective, SheetTitleDirective, TW_SHEET_DATA, TW_SHEET_DEFAULT_OPTIONS, provideSheet };
 export type { SheetActionsAlign, SheetAnimationEvent, SheetAutoFocus, SheetRestoreFocus, SheetRole, SheetScrollStrategy, SheetSide, SheetSize, SheetState };

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

@@ -16,8 +16,14 @@ interface SliderMark {
 }
 /** 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';
+/**
+ * Identifies which thumb is the interaction target. `'single'` in single-value
+ * mode; `'start'` (lower) and `'end'` (upper) in range mode. Named in the
+ * public signatures of {@link SliderComponent.onThumbPointerDown} and
+ * {@link SliderComponent.onThumbKeyDown}, so it is exported for consumers that
+ * script those handlers directly.
+ */
+type SliderThumbId = 'single' | 'start' | 'end';
 /**
  * Select a single value or a numeric range from a scale.
  *
@@ -29,10 +35,26 @@ type ThumbId = 'single' | 'start' | 'end';
  * ```
  */
 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>;
+    /**
+     * Lower bound of the slider scale. Defaults to `0`.
+     *
+     * Accepts `undefined` so `[formField]` type-checks under `strictTemplates`:
+     * signal forms writes the `min` control binding from the field's own
+     * `min()` state, which is `number | undefined`. `undefined` resolves back to
+     * the documented default through {@link min}.
+     */
+    readonly minInput: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Upper bound of the slider scale. Defaults to `100`.
+     *
+     * Accepts `undefined` for the same reason as {@link minInput}; `undefined`
+     * resolves back to the documented default through {@link max}.
+     */
+    readonly maxInput: _angular_core.InputSignal<number | undefined>;
+    /** @internal Resolved lower bound — the `min` input with its documented `0` default restored when the binding resolves to `undefined`. Every internal reader goes through this, never through the raw input. */
+    readonly min: Signal<number>;
+    /** @internal Resolved upper bound — the `max` input with its documented `100` default restored when the binding resolves to `undefined`. */
+    readonly max: Signal<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'`. */
@@ -43,8 +65,19 @@ declare class SliderComponent implements ControlValueAccessor, OnInit {
     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, sets `aria-required="true"` on the thumb for assistive tech. Also inferred from `Validators.required` on a bound control, so a reactive/template-driven form does not have to state it twice. Defaults to `false`. */
+    readonly requiredInput: _angular_core.InputSignal<boolean>;
+    /**
+     * @internal Shared `errorState` / `required` / `errors` derivation — see
+     * `wireErrorState`. Declared here, above `required`, because class field
+     * initializers run in declaration order.
+     */
+    private readonly errorWiring;
+    /**
+     * @internal Resolved required state: the `required` input OR'd with
+     * `Validators.required` on a bound `NgControl`.
+     */
+    readonly required: Signal<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`. */
@@ -63,21 +96,47 @@ declare class SliderComponent implements ControlValueAccessor, OnInit {
     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. */
+    /** Accessible name for the single-value thumb when no visible label is provided. Defaults to `undefined`. Alias: `aria-label`. */
     readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
-    /** ID of an external element labelling the single-value thumb. */
+    /** ID of an external element labelling the single-value thumb. Defaults to `undefined`. Alias: `aria-labelledby`. */
     readonly ariaLabelledby: _angular_core.InputSignal<string | undefined>;
-    /** ID of an external element describing the slider. */
+    /** ID of an external element describing the slider. Defaults to `undefined`. Alias: `aria-describedby`. */
     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. */
+    /**
+     * Two-way bound slider value. A `number` for single mode, or `[start, end]`
+     * for range mode. Updates on every interaction. Defaults to `0`.
+     *
+     * The two-way binding mints a `valueChange` output, which fires on every
+     * value mutation the user causes — each drag move and each key step, plus the
+     * commit. Note the slider differs from `tw-checkbox` / `tw-switch` /
+     * `tw-radio-group`, where the minted output is the *any-change* channel:
+     * here, a programmatic write from a bound form (`FormControl.setValue`,
+     * `ngModel`) reaches the rendered value through the CVA path without passing
+     * through this model, so it does **not** emit `valueChange`. To observe
+     * programmatic writes, use the form control's own `valueChanges`.
+     *
+     * For the two user-gesture channels, prefer `(input)` for live feedback and
+     * `(change)` for commit — see their docs below.
+     */
     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. */
+    /**
+     * Fires continuously while the user drags or holds a key — the *live* channel,
+     * for previewing a value that is not yet committed. Payload matches the
+     * current `value`. Template event name is `input` — the TS-side identifier is
+     * `valueInput` to avoid shadowing the imported `input` factory. Never fires
+     * for a programmatic write.
+     */
     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`. */
+    /**
+     * Fires when the user commits a change (pointer release, key release, or blur
+     * after keyboard change) — the *commit* channel, for saving or querying on a
+     * settled value. Payload matches the current `value`. Never fires for a
+     * programmatic write; use `(input)` if you need every intermediate 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>;
@@ -86,11 +145,6 @@ declare class SliderComponent implements ControlValueAccessor, OnInit {
     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;
@@ -117,7 +171,7 @@ declare class SliderComponent implements ControlValueAccessor, OnInit {
     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>;
+    readonly activeThumb: _angular_core.WritableSignal<SliderThumbId | null>;
     /** @internal Which thumb is focused (for bubble visibility). */
     private readonly focusedThumb;
     /** @internal Set of pointer IDs currently captured per-thumb for release tracking. */
@@ -205,7 +259,7 @@ declare class SliderComponent implements ControlValueAccessor, OnInit {
      */
     private readonly bubbleClassMap;
     /** @internal Bubble visibility depends on drag / focus / hover state. */
-    bubbleClassFor(thumb: ThumbId): string;
+    bubbleClassFor(thumb: SliderThumbId): string;
     /** @internal */
     readonly resolvedAriaDescribedby: Signal<string | null>;
     /** @internal */
@@ -223,12 +277,12 @@ declare class SliderComponent implements ControlValueAccessor, OnInit {
     /** 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;
+    onThumbPointerDown(event: PointerEvent, thumb: SliderThumbId): 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;
+    onThumbKeyDown(event: KeyboardEvent, thumb: SliderThumbId): void;
     /** @internal */
     onThumbBlur(): void;
     /** @internal Clamp to min/max and snap to step. Returns a finite number. */
@@ -251,8 +305,8 @@ declare class SliderComponent implements ControlValueAccessor, OnInit {
     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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SliderComponent, "tw-slider", never, { "minInput": { "alias": "min"; "required": false; "isSignal": true; }; "maxInput": { "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; }; "requiredInput": { "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 };
+export type { SliderMark, SliderThumbId, SliderValue, SliderValueFormatter, SliderVariant };

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

@@ -49,13 +49,13 @@ declare class SortDirective {
     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'`. */
+    /** Starting direction used when a header becomes active for the first time. Per-header `start` overrides this. Defaults to `'asc'`. Alias: `twSortStart`. */
     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`. */
+    /** 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`. Alias: `twSortDisableClear`. */
     readonly disableClear: _angular_core.InputSignal<boolean>;
-    /** When true, all child sort headers are disabled. Defaults to `false`. */
+    /** When true, all child sort headers are disabled. Defaults to `false`. Alias: `twSortDisabled`. */
     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. */
+    /** Fires whenever the user changes `active` or `direction` by interacting with a header. Programmatic writes to `[(twSortActive)]` / `[(twSortDirection)]` do NOT emit. Alias: `twSortChange`. */
     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. */
@@ -76,6 +76,24 @@ 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.
+ *
+ * @remarks
+ * **Where the control and `aria-sort` live depends on the host element.** Both are decided once,
+ * at construction, from the host's tag name and its *static* `role` attribute:
+ *
+ * | Host | `aria-sort` | Interactive element |
+ * |---|---|---|
+ * | `<th>` / `[role="columnheader"\|"rowheader"]` | on the host | inner container (`role="button"`) |
+ * | `<span>` / `<div>` (no role) | **not emitted** | inner container (`role="button"`) |
+ * | `<button>` / `<a href>` / `[role="button"\|"link"]` | **not emitted** | the host itself |
+ *
+ * `aria-sort` is only valid on a `columnheader` / `rowheader`, so emitting it on a `<span>` or
+ * `<button>` is an axe `aria-allowed-attr` failure and is silently ignored by assistive tech. When
+ * the header is composed *inside* a header cell — `<th><span tw-sort-header>…</span></th>`, the
+ * shape `tw-table` generates — the `<th>` owns `aria-sort` (see `tw-column`'s `sortState` input,
+ * which auto-resolves against the same `[twSort]` directive). Outside a table there is no
+ * `columnheader` to carry the state; the header remains a labelled button and the sort direction
+ * is conveyed by the arrow plus the consumer's own live region.
  */
 declare class SortHeaderComponent implements OnInit, AfterViewInit, OnDestroy {
     /** Unique id for this header. Required — identifies the field/column this header sorts. */
@@ -97,6 +115,15 @@ declare class SortHeaderComponent implements OnInit, AfterViewInit, OnDestroy {
     private readonly parent;
     private readonly focusMonitor;
     private readonly ariaDescriber;
+    private readonly hostEl;
+    /**
+     * Whether the host element can legally carry `aria-sort`. Resolved once, at construction — the
+     * host's tag name and static attributes are already applied by then, and a later `[attr.role]`
+     * binding would make this timing-dependent.
+     */
+    private readonly hostIsHeaderCell;
+    /** Whether the host is already a control, in which case the inner container must stay inert. */
+    private readonly hostIsControl;
     private readonly containerRef;
     private _describedBy;
     constructor();
@@ -108,8 +135,22 @@ declare class SortHeaderComponent implements OnInit, AfterViewInit, OnDestroy {
     readonly effectiveDirection: _angular_core.Signal<SortDirection>;
     /** `aria-sort` value: `'ascending' | 'descending' | 'none'`. */
     readonly ariaSort: _angular_core.Signal<"none" | "ascending" | "descending">;
+    /**
+     * @internal Value actually written to the host's `aria-sort` attribute. `null` — i.e. no
+     * attribute — unless the host is a `columnheader` / `rowheader`; see the class remarks.
+     */
+    readonly hostAriaSort: _angular_core.Signal<"none" | "ascending" | "descending" | null>;
+    /** @internal `role` for the inner container: `'button'` unless the host is already the control. */
+    readonly controlRole: _angular_core.Signal<"button" | null>;
+    /** @internal `tabindex` for the inner container. Mirrors `controlRole()`. */
+    readonly controlTabIndex: _angular_core.Signal<0 | null>;
     /** 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>;
+    /**
+     * The element that carries focus and the accessible description — the host when the consumer
+     * mounted the header on a control, the inner container otherwise.
+     */
+    private controlElement;
     private readonly variantResult;
     /** @internal */
     readonly hostClasses: _angular_core.Signal<string>;

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

@@ -118,7 +118,7 @@ declare class SplitComponent {
     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`. */
+    /** Painted thickness of each gutter in pixels, perpendicular to the split axis, and the space it takes from the panes. The pointer target is padded out to a 24px minimum independently of this value (WCAG 2.2 SC 2.5.8), so a thin gutter stays thin without becoming hard to grab. 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>;
@@ -168,7 +168,12 @@ declare class SplitComponent {
      * Pixel mode: values are absolute pixel sizes.
      */
     readonly _sizes: _angular_core.WritableSignal<number[]>;
-    /** Tracks the live `dir` attribute resolved through CDK Directionality. */
+    /**
+     * Live `dir` resolved through CDK `Directionality`. Read straight from
+     * `valueSignal` (CDK 22+) so `_isRtl` re-evaluates on a runtime `dir` flip
+     * with no manual subscription mirror. Falls back to 'ltr' when the consumer's
+     * injector cannot supply the token (`{ optional: true }`).
+     */
     private readonly _cdkDir;
     /** Resolves the effective RTL state: explicit `rtl` input overrides CDK `dir`. */
     readonly _isRtl: _angular_core.Signal<boolean>;
@@ -179,6 +184,31 @@ declare class SplitComponent {
     private readonly _classes;
     readonly _rootClass: _angular_core.Signal<string>;
     readonly _gutterClass: _angular_core.Signal<string>;
+    /**
+     * @internal
+     * Transparent padding added to each side of the gutter so its pointer target
+     * reaches the WCAG 2.2 SC 2.5.8 24x24 floor while the painted line stays
+     * `gutterSize` thick (the default gutter is 6px — a quarter of the floor).
+     *
+     * The padding is cancelled by an equal negative margin on the same side, so
+     * the gutter's *layout* footprint is still exactly `gutterSize` and the
+     * `availableSpace()` math is untouched; only its border box — which is what
+     * receives the pointer and what a target-size audit measures — grows. The
+     * overhang reaches `_gutterHitPad` px into each neighbouring pane and takes
+     * pointer events there (including over a pane's own scrollbar, if it has
+     * one); that is the accepted cost of the technique and mirrors how VS Code
+     * and every other thin-sash implementation reaches the floor.
+     *
+     * Zero once `gutterSize` is 24 or more — a gutter that already clears the
+     * floor needs no padding and no overhang.
+     */
+    readonly _gutterHitPad: _angular_core.Signal<number>;
+    /** @internal Horizontal half of `_gutterHitPad` — non-zero only for a horizontal split, where the gutter is thin across the X axis. Physical (not logical) properties: the padding is symmetric, so RTL needs no separate handling. */
+    readonly _gutterHitPadX: _angular_core.Signal<number>;
+    /** @internal Vertical half of `_gutterHitPad` — non-zero only for a vertical split. */
+    readonly _gutterHitPadY: _angular_core.Signal<number>;
+    /** @internal Gutter border-box thickness: `gutterSize` plus the SC 2.5.8 hit padding on both sides, i.e. `max(gutterSize, 24)`. The negative margins give back the padding, so the *layout* footprint stays `gutterSize`. */
+    readonly _gutterBoxPx: _angular_core.Signal<number>;
     /** 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. */

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

@@ -3,7 +3,14 @@ import { ElementRef } from '@angular/core';
 import { TwSize } from '@cdevhub/ngx-tw/core';
 
 /** Surface treatment for the stat tile. */
-type StatVariant = 'plain' | 'outlined' | 'elevated' | 'filled';
+type StatVariant = 'ghost' | 'outline' | 'elevated' | 'solid' | StatVariantLegacy;
+/**
+ * Legacy `variant` spellings, kept so existing templates keep compiling.
+ * @deprecated `'plain'` aliases `'ghost'`, `'outlined'` aliases `'outline'`
+ * and `'filled'` aliases `'solid'`. Each renders identically to its
+ * replacement and will be removed in the next major.
+ */
+type StatVariantLegacy = 'plain' | 'outlined' | 'filled';
 /** Direction of trend conveyed by the delta indicator. */
 type StatDeltaDirection = 'up' | 'down' | 'neutral';
 /** Display style of the trend delta. */
@@ -51,12 +58,13 @@ declare class StatDeltaComponent {
     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`. */
+    /** Explicit accessible label, mirrored to `aria-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>;
+    private readonly destroyRef;
     constructor();
     /** @internal */
     protected readonly effectiveColor: _angular_core.Signal<"neutral" | "success" | "error">;
@@ -70,7 +78,7 @@ declare class StatDeltaComponent {
     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>;
+    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": "aria-label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 /**
  * KPI tile — a compact display tile surfacing a single key performance
@@ -91,7 +99,7 @@ declare class StatDeltaComponent {
  * 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. */
+    /** Surface treatment. `'ghost'` removes border and background; `'outline'` (default) adds a border on the surface token; `'elevated'` adds shadow and uses the raised surface; `'solid'` uses the muted surface with no border. `'plain'`, `'outlined'` and `'filled'` are deprecated aliases for `'ghost'`, `'outline'` and `'solid'` and render identically. */
     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>;
@@ -120,6 +128,8 @@ declare class StatComponent {
     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">;
+    /** @internal Canonical variant with legacy spellings folded in. */
+    private readonly resolvedVariant;
     private readonly variantResult;
     protected readonly rootClasses: _angular_core.Signal<string>;
     protected readonly iconFlexClasses: _angular_core.Signal<string>;

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

@@ -50,9 +50,9 @@ declare class StepperComponent extends CdkStepper implements AfterViewInit {
     readonly color: _angular_core.InputSignal<TwColor>;
     /** Controls indicator size and label typography. Defaults to `'md'`. */
     readonly size: _angular_core.InputSignal<TwSize>;
-    /** When true, steps with `hasError` render error styling, icon, and `aria-invalid`. Defaults to `true`. */
+    /** When true, steps with `hasError` render error styling, icon, and `aria-invalid`. Defaults to `true` — error states must be visible by default, since silently swallowing a stepped flow's failure state is a UX regression; the special case is opting out per step. */
     readonly showError: _angular_core.InputSignal<boolean>;
-    /** When true, clicking a navigable step header selects it. Set to `false` to only allow advancement via `twStepperNext` / `twStepperPrevious`. Defaults to `true`. */
+    /** When true, clicking a navigable step header selects it. Set to `false` to only allow advancement via `twStepperNext` / `twStepperPrevious`. Defaults to `true` — free navigation is the standard stepper UX; the special case is a restricted flow such as a wizard that must complete in order. */
     readonly headerInteractive: _angular_core.InputSignal<boolean>;
     private readonly _liveAnnouncer;
     private readonly _destroyRef;
@@ -73,6 +73,19 @@ declare class StepperComponent extends CdkStepper implements AfterViewInit {
     readonly selectedIndexValue: _angular_core.Signal<number>;
     set orientation(value: StepperOrientation);
     get orientation(): StepperOrientation;
+    /** @internal Whether the header strip is exposed as a WAI-ARIA tablist. True for horizontal orientation only. */
+    readonly usesTabPattern: _angular_core.Signal<boolean>;
+    /** @internal Whether a step renders its panel inline beneath its own header (vertical orientation, selected step, step has content). */
+    hasInlinePanel(step: StepComponent, index: number): boolean;
+    /**
+     * @internal Id the step header's `aria-controls` points at, or `null`.
+     *
+     * Vertical headers only claim control of a panel that is actually in the
+     * DOM: an `aria-expanded="true"` button pointing at a missing id is an
+     * invalid reference, whereas the collapsed steps simply carry no
+     * `aria-controls` at all.
+     */
+    controlledPanelId(step: StepComponent, index: number): string | null;
     private readonly _variantResult;
     readonly rootClasses: _angular_core.Signal<string>;
     readonly headerClasses: _angular_core.Signal<string>;
@@ -134,6 +147,7 @@ declare class StepperComponent extends CdkStepper implements AfterViewInit {
     private syncFocusIndex;
     /** @internal Relays tablist keydown to CdkStepper, then republishes the tab stop. */
     onTablistKeydown(event: KeyboardEvent): void;
+    /** @internal Selects a step from a header click. Ignored when `headerInteractive` is false or the step is not navigable. */
     onHeaderClick(step: StepComponent, index: number): void;
     /** @internal Whether the stepper should render the error state for a step. */
     shouldRenderError(step: StepComponent): boolean;