ngwr 6.1.1 → 7.0.0

package/types/ngwr-select.d.ts

@@ -0,0 +1,413 @@
+import * as ngwr_i18n from 'ngwr/i18n';
+import * as _angular_core from '@angular/core';
+import { InjectionToken, Signal, TemplateRef, ElementRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { Observable } from 'rxjs';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+/**
+ * Behavior mode for `<wr-select>`. The component is the unified
+ * combobox primitive — every shape (single, multi, type-to-search,
+ * free-text-tags) is the same component with a different `mode`.
+ *
+ * - `'single'` — one value, no input field. The classic dropdown.
+ * - `'multi'`  — array value, chips on the trigger, options toggle on click.
+ * - `'search'` — type-ahead with sync filter or async loader (replaces
+ *   the standalone `<wr-autocomplete>`).
+ * - `'tag'`    — free-text + chips, with optional `allowCreate` /
+ *   `createValidator` for typed lists (replaces `<wr-chips-input>`).
+ */
+type WrSelectMode = 'single' | 'multi' | 'search' | 'tag';
+/**
+ * Tag-mode validator. Return `true` to accept the value, `false` to
+ * silently reject (e.g. shape check, dedupe against a custom set).
+ */
+type WrSelectTagValidator = (value: string, existing: readonly string[]) => boolean;
+/**
+ * Search-mode async loader. Receives the current query, returns matching
+ * items as an array, Observable, or Promise. Cancellation: `switchMap`
+ * inside `WrSelect` cancels in-flight calls when a new keystroke lands,
+ * so stale responses can't clobber fresh ones.
+ */
+type WrSelectSearchLoader<T> = (query: string) => Observable<readonly T[]> | Promise<readonly T[]> | readonly T[];
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+/** Per-option registration metadata. @internal */
+interface WrSelectOptionRegistration {
+    readonly id: string;
+    readonly value: unknown;
+    readonly disabled: boolean;
+    /**
+     * Lazy label reader. Options render text via `<ng-content>`, so we
+     * read it at call time once Angular has settled the projected content.
+     */
+    readonly getLabel: () => string;
+}
+/**
+ * Contract a `<wr-option>` uses to talk to its parent `<wr-select>`.
+ *
+ * @internal
+ */
+interface WrSelectContext {
+    /**
+     * Currently selected value. Single mode: `T | null`. Multi mode:
+     * `readonly T[]`. Options consult {@link isSelected} instead of
+     * reading this directly so the same option code works in both modes.
+     */
+    readonly value: Signal<unknown>;
+    /** Whether the select is in multi-selection mode. */
+    readonly multi: Signal<boolean>;
+    /** Whether the select is disabled. */
+    readonly isDisabled: Signal<boolean>;
+    /** Id of the option currently highlighted by keyboard navigation. */
+    readonly activeOptionId: Signal<string | null>;
+    /**
+     * Active search query (search mode only). Empty string when there is
+     * no filter applied — options treat that as "show me".
+     */
+    readonly searchQuery: Signal<string>;
+    /** True only when `mode="search"`. Options gate filtering on this. */
+    readonly isSearch: Signal<boolean>;
+    /** Is the given option value currently selected? Handles both single and multi. */
+    isSelected(value: unknown): boolean;
+    /**
+     * Called when a child option is clicked. The label is read lazily
+     * via {@link WrSelectOptionRegistration.getLabel}, so callers don't
+     * need to thread it through.
+     */
+    selectOption(value: unknown): void;
+    /** Register an option; returns an unregister function. */
+    registerOption(reg: WrSelectOptionRegistration): () => void;
+}
+/**
+ * Token a `<wr-option>` injects to register itself with and notify its
+ * parent `<wr-select>`.
+ *
+ * @internal
+ */
+declare const WR_SELECT: InjectionToken<WrSelectContext>;
+
+interface SelectedChip {
+    readonly value: unknown;
+    readonly label: string;
+}
+/**
+ * Combobox primitive. Renders a button that opens a CDK overlay
+ * containing the projected `<wr-option>` (and optionally
+ * `<wr-option-group>`) children. Every shape is the same component
+ * with a different `[mode]`:
+ *
+ * - `'single'` (default) — one value, no input. Classic dropdown.
+ * - `'multi'` — array value, chips on the trigger; clicking an option
+ *   toggles instead of closing, Backspace removes the last chip.
+ * - `'search'` — type-ahead with sync `[options]` filter or async
+ *   `[loader]`. Replaces the standalone `<wr-autocomplete>`.
+ * - `'tag'` — free-text + chips with `[separators]` / `[validate]` /
+ *   `[allowDuplicates]`. Replaces `<wr-chips-input>`.
+ *
+ * Implements `ControlValueAccessor` — usable with `[(ngModel)]`,
+ * `formControl`, or `formControlName`.
+ *
+ * @example
+ * ```html
+ * <!-- Single -->
+ * <wr-select placeholder="Pick a size" [(ngModel)]="size">
+ *   <wr-option value="sm">Small</wr-option>
+ *   <wr-option value="md">Medium</wr-option>
+ *   <wr-option value="lg">Large</wr-option>
+ * </wr-select>
+ *
+ * <!-- Multi -->
+ * <wr-select mode="multi" placeholder="Pick tags" [(ngModel)]="tags">
+ *   <wr-option value="ts">TypeScript</wr-option>
+ *   <wr-option value="ng">Angular</wr-option>
+ * </wr-select>
+ * ```
+ *
+ * The legacy `[multi]="true"` boolean is still accepted but is now an
+ * alias for `[mode]="'multi'"` — prefer the explicit mode.
+ *
+ * @see https://ngwr.dev/components/select
+ */
+declare class WrSelect implements ControlValueAccessor, WrSelectContext {
+    /** Placeholder shown when no option is selected. Falls back to `select.placeholder`. */
+    readonly placeholder: _angular_core.InputSignal<string | null>;
+    /** Clear-selection (×) button aria-label. Falls back to `select.clearSelection`. */
+    readonly clearLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedPlaceholder: _angular_core.Signal<string>;
+    protected readonly resolvedClear: _angular_core.Signal<string>;
+    /** Per-chip ARIA label — interpolates `{{label}}`. @internal */
+    protected readonly chipRemoveLabel: (params?: ngwr_i18n.WrI18nParams) => string;
+    /** Disable the select. Also set by Angular forms via `setDisabledState`. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Pill-shaped corners on the trigger. @default false */
+    readonly rounded: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Behavior mode. `<wr-select>` is the unified combobox primitive —
+     * pick the shape via `[mode]`:
+     *
+     * - `'single'` (default) — one value, no input. Classic dropdown.
+     * - `'multi'` — array value, chips on the trigger.
+     * - `'search'` *(planned)* — type-ahead with sync filter or async loader.
+     * - `'tag'` *(planned)* — free-text + chips with optional `allowCreate`.
+     *
+     */
+    readonly mode: _angular_core.InputSignal<WrSelectMode | null>;
+    /** Resolved mode — `'single'` unless `[mode]` says otherwise. */
+    protected readonly effectiveMode: _angular_core.Signal<WrSelectMode>;
+    /** Convenience — `effectiveMode() === 'multi'`. */
+    protected readonly isMulti: _angular_core.Signal<boolean>;
+    /** Convenience — `effectiveMode() === 'tag'`. */
+    protected readonly isTag: _angular_core.Signal<boolean>;
+    /** Convenience — `effectiveMode() === 'search'`. Exposed via context for options. */
+    readonly isSearch: _angular_core.Signal<boolean>;
+    /** WrSelectContext — resolved multi-selection flag for child options. */
+    readonly multi: _angular_core.Signal<boolean>;
+    /** Both multi and tag render chips on the trigger. */
+    protected readonly hasChips: _angular_core.Signal<boolean>;
+    /**
+     * Search-mode query. Empty string = no filter. Exposed via context so
+     * each `<wr-option>` can self-hide non-matching rows.
+     */
+    readonly searchQuery: _angular_core.WritableSignal<string>;
+    /**
+     * Search mode: dynamic option array. Each item is rendered as a
+     * `<wr-option>` whose label comes from `[displayWith]`. Works
+     * alongside projected `<wr-option>` children — both lists are
+     * filtered by the search query.
+     */
+    readonly options: _angular_core.InputSignal<readonly unknown[]>;
+    /** Search mode: map a dynamic option item to its display label. @default String */
+    readonly displayWith: _angular_core.InputSignal<(item: unknown) => string>;
+    /**
+     * Search mode: async loader. When set, the loader is called on every
+     * (debounced) keystroke and its result replaces `[options]`. Supports
+     * Observables, Promises, and plain arrays.
+     */
+    readonly loader: _angular_core.InputSignal<WrSelectSearchLoader<unknown> | null>;
+    /** Search mode: debounce (ms) applied to the loader. @default 250 */
+    readonly debounceMs: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Search mode: minimum query length before the panel opens / loader fires. @default 0 */
+    readonly minChars: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Search mode: allow values not in the options list. Enter on an
+     * unmatched query commits the raw text as the form value. @default false
+     */
+    readonly freeText: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Search mode: text shown when the filter / loader returns nothing. Falls back to `select.noResults`. */
+    readonly noResultsText: _angular_core.InputSignal<string | null>;
+    /** Search mode: text shown while the async loader is in flight. Falls back to `select.loading`. */
+    readonly loadingText: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedNoResults: _angular_core.Signal<string>;
+    protected readonly resolvedLoading: _angular_core.Signal<string>;
+    /** Search mode: results returned by the async loader. @internal */
+    protected readonly loadedOptions: _angular_core.WritableSignal<readonly unknown[]>;
+    /** Search mode: true while the loader is in flight. @internal */
+    protected readonly loading: _angular_core.WritableSignal<boolean>;
+    /**
+     * Tag mode: keys / characters that commit the current draft into a chip.
+     * `'Enter'` is the key name; everything else is a literal character watched
+     * in keypresses and pastes. @default ['Enter', ',']
+     */
+    readonly separators: _angular_core.InputSignal<readonly string[]>;
+    /** Tag mode: allow the same value to appear more than once. @default false */
+    readonly allowDuplicates: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Tag mode: custom validator — return `true` to accept the value, `false`
+     * to silently reject. Receives the trimmed draft + the existing chips.
+     */
+    readonly validate: _angular_core.InputSignal<WrSelectTagValidator | null>;
+    /** Tag-mode draft (text currently typed in the inline input). @internal */
+    protected readonly draft: _angular_core.WritableSignal<string>;
+    /**
+     * Show a clear-all (×) button at the end of the chip row when at
+     * least one option is selected (multi mode only). @default true
+     */
+    readonly clearable: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Cap on selected items (multi mode). `0` = unlimited. Once reached,
+     * additional clicks on unselected options are ignored. @default 0
+     */
+    readonly maxItems: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Maximum number of chips rendered before collapsing the rest into a
+     * `+N more` indicator. `0` = render every chip. @default 0
+     */
+    readonly maxTagCount: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Unified value signal. Single mode holds `T | null`; multi mode
+     * holds `readonly T[]`. Internal — consumers go through `[(ngModel)]`
+     * or `[formControl]` via CVA.
+     * @internal
+     */
+    readonly value: _angular_core.WritableSignal<unknown>;
+    /** Listbox id used by the trigger's `aria-controls`. */
+    protected readonly listboxId: string;
+    /** Registered options (insertion order). Internal — distinct from the public `[options]` input. */
+    private readonly registry;
+    /** Keyboard cursor index into `options`. -1 = none. */
+    private readonly activeIndex;
+    /** Id of the active option (for `aria-activedescendant`). */
+    readonly activeOptionId: _angular_core.Signal<string | null>;
+    protected readonly open: _angular_core.WritableSignal<boolean>;
+    protected readonly selectedLabel: _angular_core.WritableSignal<string | null>;
+    /**
+     * Selected chips (multi + tag modes). Multi reads labels from the
+     * registered `<wr-option>` children; tag uses each raw string as
+     * both value and label.
+     */
+    protected readonly selectedChips: _angular_core.Signal<readonly SelectedChip[]>;
+    protected readonly visibleChips: _angular_core.Signal<readonly SelectedChip[]>;
+    protected readonly hiddenChipCount: _angular_core.Signal<number>;
+    protected readonly hasSelection: _angular_core.Signal<boolean>;
+    private readonly disabledFromCva;
+    /** Effective disabled state — input wins, CVA second. */
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    protected readonly classes: _angular_core.Signal<string>;
+    /**
+     * Search-mode dynamic options. Loader results win when the loader is
+     * set; otherwise the static `[options]` array. Each item is rendered
+     * as an internal `<wr-option>` in the panel.
+     */
+    protected readonly dynamicOptions: _angular_core.Signal<readonly unknown[]>;
+    /**
+     * Count of registered options that pass the current search filter.
+     * Hides the noResults state when the panel has at least one visible row.
+     */
+    protected readonly visibleCount: _angular_core.Signal<number>;
+    /** Search mode: show "no results" when the panel has nothing to offer. */
+    protected readonly hasNoResults: _angular_core.Signal<boolean>;
+    /** Search mode: is this option hidden by the current query? @internal */
+    private isOptionHidden;
+    protected readonly panelTpl: _angular_core.Signal<TemplateRef<any>>;
+    /** Tag-mode inline input. Present only when `mode="tag"`. @internal */
+    protected readonly tagInputEl: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    /** Search-mode inline input. Present only when `mode="search"`. @internal */
+    protected readonly searchInputEl: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    protected focusTagInput(): void;
+    protected focusSearchInput(): void;
+    protected onSearchInput(event: Event): void;
+    protected onSearchFocus(): void;
+    protected onSearchKey(event: KeyboardEvent): void;
+    /**
+     * Display text for the search input. Shows the selected option's
+     * label when collapsed, or the live query while typing / panel open.
+     * @internal
+     */
+    protected readonly searchDisplay: _angular_core.Signal<string>;
+    private readonly host;
+    private readonly overlay;
+    private readonly vcr;
+    private readonly scrollStrategies;
+    private readonly destroyRef;
+    private overlayRef;
+    private onChange;
+    protected onTouched: () => void;
+    constructor();
+    isSelected(value: unknown): boolean;
+    selectOption(value: unknown): void;
+    registerOption(reg: WrSelectOptionRegistration): () => void;
+    /** Remove one selection (chip × button). Works for multi and tag modes. */
+    protected removeChip(value: unknown, event: Event): void;
+    /** Clear every selection (× button). Multi/tag → empty array; search → null. */
+    protected clearAll(event: Event): void;
+    /** Capacity check used by tag mode to refuse the next add. */
+    protected readonly atCapacity: _angular_core.Signal<boolean>;
+    protected onTagInput(event: Event): void;
+    protected onTagKeydown(event: KeyboardEvent): void;
+    protected onTagPaste(event: ClipboardEvent): void;
+    protected onTagBlur(): void;
+    private commitDraft;
+    private tryAddTag;
+    writeValue(value: unknown): void;
+    registerOnChange(fn: (value: unknown) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    protected onTriggerClick(): void;
+    protected onTriggerKey(event: KeyboardEvent): void;
+    private seedActiveIndex;
+    private moveActive;
+    private firstEnabled;
+    private lastEnabled;
+    /** Coerce the multi-mode value signal into an array (handles writeValue from non-array). */
+    private asArray;
+    private openOverlay;
+    private closeOverlay;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrSelect, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSelect, "wr-select", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "loader": { "alias": "loader"; "required": false; "isSignal": true; }; "debounceMs": { "alias": "debounceMs"; "required": false; "isSignal": true; }; "minChars": { "alias": "minChars"; "required": false; "isSignal": true; }; "freeText": { "alias": "freeText"; "required": false; "isSignal": true; }; "noResultsText": { "alias": "noResultsText"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "separators": { "alias": "separators"; "required": false; "isSignal": true; }; "allowDuplicates": { "alias": "allowDuplicates"; "required": false; "isSignal": true; }; "validate": { "alias": "validate"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "maxItems": { "alias": "maxItems"; "required": false; "isSignal": true; }; "maxTagCount": { "alias": "maxTagCount"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Single option inside a `<wr-select>`.
+ *
+ * The option's display label is taken from its projected text content;
+ * the form value is its `value` input.
+ *
+ * @example
+ * ```html
+ * <wr-option value="sm">Small</wr-option>
+ * <wr-option [value]="42">Forty-two</wr-option>
+ * ```
+ */
+declare class WrOption {
+    /** The value contributed when this option is chosen. Required. */
+    readonly value: _angular_core.InputSignal<unknown>;
+    /** Disable this option. @default false */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Stable id used for `aria-activedescendant`. */
+    readonly id: string;
+    private readonly host;
+    private readonly parent;
+    /**
+     * @internal — true when this option is currently selected. Works for
+     * both single and multi-select parents via `WrSelectContext.isSelected`.
+     */
+    protected readonly selected: _angular_core.Signal<boolean>;
+    /** @internal — true when this option is the keyboard cursor target. */
+    protected readonly active: _angular_core.Signal<boolean>;
+    /**
+     * @internal — search mode only. True when the parent has a query that
+     * the option's text content does not match (case-insensitive substring).
+     * Hidden options stay in the DOM so registration order survives but
+     * collapse via CSS.
+     */
+    protected readonly hidden: _angular_core.Signal<boolean>;
+    protected readonly classes: _angular_core.Signal<string>;
+    constructor();
+    protected onClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrOption, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrOption, "wr-option", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Visually groups options under a label inside a `<wr-select>`.
+ *
+ * @example
+ * ```html
+ * <wr-option-group label="Sizes">
+ *   <wr-option value="sm">Small</wr-option>
+ *   <wr-option value="md">Medium</wr-option>
+ * </wr-option-group>
+ * ```
+ */
+declare class WrOptionGroup {
+    /** Section heading shown above the options. */
+    readonly label: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrOptionGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrOptionGroup, "wr-option-group", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { WR_SELECT, WrOption, WrOptionGroup, WrSelect };
+export type { WrSelectContext, WrSelectMode, WrSelectSearchLoader, WrSelectTagValidator };

package/types/ngwr-shiny-text.d.ts

@@ -0,0 +1,70 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Animated shimmer-over-text effect. A bright stripe sweeps across the
+ * text using `background-clip: text` + an animated `background-position`.
+ *
+ * @example
+ * ```html
+ * <wr-shiny-text text="Premium" />
+ * <wr-shiny-text
+ *   text="Custom"
+ *   color="#444"
+ *   shineColor="#a0e0ff"
+ *   [speed]="3"
+ *   [delay]="0.5"
+ *   [yoyo]="true"
+ *   [pauseOnHover]="true"
+ * />
+ * ```
+ *
+ * @see https://www.reactbits.dev/text-animations/shiny-text
+ */
+declare class WrShinyText {
+    /** Text to render. */
+    readonly text: _angular_core.InputSignal<string>;
+    /** Pause the animation. @default false */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Time for the bright stripe to traverse the text, in seconds. @default 2 */
+    readonly speed: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Base text colour (outside the bright stripe). @default '#b5b5b5' */
+    /** Base text colour. When unset, the theme decides. */
+    readonly color: _angular_core.InputSignal<string | null>;
+    /** Bright stripe colour. @default '#ffffff' */
+    /** Sweep highlight colour. When unset, the theme decides. */
+    readonly shineColor: _angular_core.InputSignal<string | null>;
+    /** Gradient angle in degrees. @default 120 */
+    readonly spread: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Bounce the stripe back-and-forth instead of restarting. @default false */
+    readonly yoyo: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Pause the animation while hovered. @default false */
+    readonly pauseOnHover: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Sweep direction. @default 'left' */
+    readonly direction: _angular_core.InputSignal<"left" | "right">;
+    /** Pause between sweeps in seconds. @default 0 */
+    readonly delay: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Total animation cycle (speed + delay) in seconds. */
+    protected readonly totalDuration: _angular_core.Signal<number>;
+    protected readonly gradient: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrShinyText, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrShinyText, "wr-shiny-text", never, { "text": { "alias": "text"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "speed": { "alias": "speed"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "shineColor": { "alias": "shineColor"; "required": false; "isSignal": true; }; "spread": { "alias": "spread"; "required": false; "isSignal": true; }; "yoyo": { "alias": "yoyo"; "required": false; "isSignal": true; }; "pauseOnHover": { "alias": "pauseOnHover"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "delay": { "alias": "delay"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Gradient sweep over text. Applies a `background-clip: text` gradient
+ * with a moving highlight — gives any text a subtle shimmer.
+ *
+ * The directive only adds the `wr-shimmer` host class. Pair with the
+ * styles in `ngwr/animations` (which include the `wr-shimmer` keyframes).
+ *
+ * @example
+ * ```html
+ * <h1 wrShimmer>Premium</h1>
+ * ```
+ */
+declare class WrShimmer {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrShimmer, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrShimmer, "[wrShimmer]", never, {}, {}, never, never, true, never>;
+}
+
+export { WrShimmer, WrShinyText };

package/types/ngwr-sidebar.d.ts

@@ -0,0 +1,83 @@
+import * as _angular_core from '@angular/core';
+import { WrIconName } from 'ngwr/icon';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+/** A single navigable entry. */
+interface WrSidebarItem {
+    readonly title: string;
+    /** Router commands array — passed to `[routerLink]`. */
+    readonly url: readonly (string | number)[];
+    readonly icon?: WrIconName;
+    /** Optional trailing badge text (e.g. `'new'`, `'12'`). */
+    readonly badge?: string;
+    /** Render as disabled (no navigation). */
+    readonly disabled?: boolean;
+}
+/** Expandable group of items. */
+interface WrSidebarGroup {
+    readonly title: string;
+    readonly icon?: WrIconName;
+    readonly children: readonly WrSidebarItem[];
+    /** Open by default. @default false */
+    readonly defaultOpen?: boolean;
+}
+/** Either a direct-link item or an expandable group. */
+type WrSidebarEntry = WrSidebarItem | WrSidebarGroup;
+
+declare function isGroup(entry: WrSidebarEntry): entry is WrSidebarGroup;
+/**
+ * Data-driven sidebar nav. Pass `[entries]` — either flat
+ * `WrSidebarItem`s (direct links) or `WrSidebarGroup`s (expand to reveal
+ * child items). Active route auto-expands its containing group.
+ *
+ * @example
+ * ```html
+ * <wr-sidebar [entries]="[
+ *   { title: 'Dashboard', icon: 'home', url: ['/dashboard'] },
+ *   {
+ *     title: 'Settings',
+ *     icon: 'cog',
+ *     children: [
+ *       { title: 'Profile', url: ['/settings', 'profile'] },
+ *       { title: 'Billing', url: ['/settings', 'billing'] }
+ *     ]
+ *   }
+ * ]" />
+ * ```
+ *
+ * @see https://ngwr.dev/components/sidebar
+ */
+declare class WrSidebar {
+    readonly entries: _angular_core.InputSignal<readonly WrSidebarEntry[]>;
+    /** Default icon for entries without one. @default 'folder' */
+    readonly defaultGroupIcon: _angular_core.InputSignal<string>;
+    /** Default icon for items without one. @default 'caret-forward' */
+    readonly defaultItemIcon: _angular_core.InputSignal<string>;
+    /** Auto-expand the group containing the active route. @default true */
+    readonly autoExpand: _angular_core.InputSignalWithTransform<boolean, any>;
+    protected readonly isGroup: typeof isGroup;
+    private readonly opened;
+    private readonly router;
+    private readonly currentUrl;
+    /** Last URL we auto-expanded — prevents re-opening a group the user collapsed. */
+    private lastAutoUrl;
+    constructor();
+    protected isOpen(title: string): boolean;
+    /** Stable id for the group body, referenced by the toggle's `aria-controls`. */
+    protected groupBodyId(title: string): string;
+    protected toggleGroup(title: string): void;
+    protected asItem(entry: WrSidebarEntry): WrSidebarItem;
+    protected asGroup(entry: WrSidebarEntry): WrSidebarGroup;
+    private findGroupForUrl;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrSidebar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSidebar, "wr-sidebar", never, { "entries": { "alias": "entries"; "required": false; "isSignal": true; }; "defaultGroupIcon": { "alias": "defaultGroupIcon"; "required": false; "isSignal": true; }; "defaultItemIcon": { "alias": "defaultItemIcon"; "required": false; "isSignal": true; }; "autoExpand": { "alias": "autoExpand"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { WrSidebar };
+export type { WrSidebarEntry, WrSidebarGroup, WrSidebarItem };

package/types/ngwr-skeleton.d.ts

@@ -0,0 +1,41 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Placeholder block shown while content is loading.
+ *
+ * Default sizing fills the parent width and matches the surrounding
+ * text height (`1lh`). Override `--wr-skeleton-height` / `width` on the
+ * host for custom shapes.
+ *
+ * @example
+ * ```html
+ * <wr-skeleton />
+ * <wr-skeleton color="primary" [animated]="false" />
+ * ```
+ *
+ * @see https://ngwr.dev/components/skeleton
+ */
+declare class WrSkeleton {
+    /**
+     * Color tint for the placeholder.
+     *
+     * Default is `'light'` because it's theme-stable — the `light` token is
+     * slate-300 in light mode (subtle gray on white) and slate-800 in dark
+     * mode (subtle lift on near-black). The `'dark'` value flips to a near-
+     * white wash in dark mode and breaks the placeholder affordance.
+     *
+     * @default 'light'
+     */
+    readonly color: _angular_core.InputSignal<"primary" | "secondary" | "success" | "warning" | "danger" | "light" | "medium" | "dark">;
+    /**
+     * Whether the shimmer animation runs.
+     *
+     * @default true
+     */
+    readonly animated: _angular_core.InputSignalWithTransform<boolean, any>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrSkeleton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrSkeleton, "wr-skeleton", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "animated": { "alias": "animated"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { WrSkeleton };