ngwr 6.1.1 → 7.1.0

package/types/ngwr-badge.d.ts

@@ -0,0 +1,158 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * @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
+ */
+/**
+ * Corner treatment for `<wr-badge>`.
+ *
+ * - `rounded` (default) — small radius, matches the rest of the form vocabulary.
+ * - `pill` — fully rounded ends; common for count chips and status pills.
+ * - `squircle` — iOS-style continuous-curvature corners via the
+ *   `corner-shape: squircle` CSS spec (Chrome 145+, falls back to a
+ *   plain rounded corner elsewhere).
+ */
+type WrBadgeShape = 'rounded' | 'pill' | 'squircle';
+
+/**
+ * @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
+ */
+/**
+ * Badge size variant.
+ */
+type WrBadgeSize = 'sm' | 'md' | 'lg';
+
+/**
+ * @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
+ */
+/**
+ * Where the icon (or loading spinner) sits relative to the tag content.
+ */
+type WrTagIconPosition = 'start' | 'end';
+
+/**
+ * Lean status chip — color, size, rounded/pill. Use for short labels
+ * and counts (e.g. "ONLINE", "3 unread", "v2.1"). Reach for `<wr-tag>`
+ * when you need icons, loading state, or outlined / transparent styles.
+ *
+ * @example
+ * ```html
+ * <wr-badge color="success">Active</wr-badge>
+ * <wr-badge color="danger" size="sm">3</wr-badge>
+ * <wr-badge color="primary" shape="pill">New</wr-badge>
+ * ```
+ *
+ * @see https://ngwr.dev/components/badge
+ */
+declare class WrBadge {
+    /**
+     * Color variant. Maps to `--wr-color-*` CSS variables from the theme.
+     *
+     * @default 'primary'
+     */
+    readonly color: _angular_core.InputSignal<"primary" | "secondary" | "success" | "warning" | "danger" | "light" | "medium" | "dark">;
+    /**
+     * Size variant.
+     *
+     * @default 'md'
+     */
+    readonly size: _angular_core.InputSignal<WrBadgeSize>;
+    /**
+     * Corner treatment. Mirrors `<wr-btn>` — `rounded` (default) uses the
+     * small form-radius; `pill` rounds the ends fully.
+     *
+     * @default 'rounded'
+     */
+    readonly shape: _angular_core.InputSignal<WrBadgeShape>;
+    /**
+     * Outlined style — transparent fill, colored border and text.
+     *
+     * @default false
+     */
+    readonly outlined: _angular_core.InputSignalWithTransform<boolean, any>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrBadge, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrBadge, "wr-badge", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "outlined": { "alias": "outlined"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Rich inline label — icons, loading state, three visual styles
+ * (solid / outlined / transparent). Reach for `<wr-badge>` when all
+ * you need is a colored text chip.
+ *
+ * @example
+ * ```html
+ * <wr-tag>Default</wr-tag>
+ * <wr-tag color="success" icon="checkmark">Done</wr-tag>
+ * <wr-tag color="primary" outlined rounded>Beta</wr-tag>
+ * <wr-tag color="warning" loading>Saving</wr-tag>
+ * ```
+ *
+ * @see https://ngwr.dev/components/badge
+ */
+declare class WrTag {
+    /**
+     * Color variant.
+     *
+     * @default 'primary'
+     */
+    readonly color: _angular_core.InputSignal<"primary" | "secondary" | "success" | "warning" | "danger" | "light" | "medium" | "dark">;
+    /**
+     * Icon name shown alongside the content. The icon is replaced by a
+     * spinner when `loading` is true.
+     *
+     * @default null
+     */
+    readonly icon: _angular_core.InputSignal<string | null>;
+    /**
+     * Where the icon/spinner is rendered.
+     *
+     * @default 'start'
+     */
+    readonly iconPosition: _angular_core.InputSignal<WrTagIconPosition>;
+    /**
+     * Outlined style — colored text and border on a tinted background.
+     *
+     * @default false
+     */
+    readonly outlined: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Transparent style — colored text on a low-opacity tint, no border.
+     *
+     * @default false
+     */
+    readonly transparent: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Pill-shaped corners.
+     *
+     * @default false
+     */
+    readonly rounded: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Adds a hover state — use when the tag is interactive (button/link).
+     *
+     * @default false
+     */
+    readonly hoverable: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * Show a spinner in place of the icon.
+     *
+     * @default false
+     */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, any>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrTag, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrTag, "wr-tag", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "outlined": { "alias": "outlined"; "required": false; "isSignal": true; }; "transparent": { "alias": "transparent"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { WrBadge, WrTag };
+export type { WrBadgeSize, WrTagIconPosition };

package/types/ngwr-bar-chart.d.ts

@@ -0,0 +1,47 @@
+import * as _angular_core from '@angular/core';
+
+/** One bar's worth of data. */
+interface WrBarChartDatum {
+    readonly label: string;
+    readonly value: number;
+    readonly color?: string;
+}
+
+/**
+ * Minimal vertical bar chart. Pass `[data]` — each datum becomes a bar.
+ * Axis-free; for the simple "show me a comparison" case.
+ *
+ * @example
+ * ```html
+ * <wr-bar-chart [data]="[
+ *   { label: 'Mon', value: 12 },
+ *   { label: 'Tue', value: 18, color: 'var(--wr-color-success)' },
+ *   { label: 'Wed', value: 9 }
+ * ]" />
+ * ```
+ *
+ * @see https://ngwr.dev/components/bar-chart
+ */
+declare class WrBarChart {
+    readonly data: _angular_core.InputSignal<readonly WrBarChartDatum[]>;
+    /** Default bar colour when a datum has none. @default primary */
+    readonly color: _angular_core.InputSignal<string>;
+    /** Show value labels above each bar. @default true */
+    readonly showValues: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Pixel height of the chart area. @default 200 */
+    readonly height: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Explicit max value. `0` = auto. @default 0 */
+    readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
+    protected readonly resolvedMax: _angular_core.Signal<number>;
+    protected readonly bars: _angular_core.Signal<{
+        label: string;
+        value: number;
+        color: string;
+        heightPercent: number;
+    }[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrBarChart, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrBarChart, "wr-bar-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "showValues": { "alias": "showValues"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { WrBarChart };
+export type { WrBarChartDatum };

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

@@ -0,0 +1,62 @@
+import * as _angular_core from '@angular/core';
+
+type Unit = 'chars' | 'words';
+type Direction = 'top' | 'bottom';
+type Piece = {
+    readonly kind: 'piece';
+    readonly text: string;
+} | {
+    readonly kind: 'space';
+    readonly text: string;
+};
+/**
+ * Reveals text by splitting it into chars or words and animating each
+ * piece in from a blurred / offset state through a brief mid-step into
+ * the steady state. Triggers when the host enters the viewport.
+ *
+ * @example
+ * ```html
+ * <wr-blur-text
+ *   text="Welcome to ngwr"
+ *   animateBy="words"
+ *   direction="top"
+ *   [delay]="120"
+ *   [stepDuration]="0.4"
+ * />
+ * ```
+ *
+ * @see https://www.reactbits.dev/text-animations/blur-text
+ */
+declare class WrBlurText {
+    /** Text to animate. Required. */
+    readonly text: _angular_core.InputSignal<string>;
+    /** Split granularity. @default 'words' */
+    readonly animateBy: _angular_core.InputSignal<Unit>;
+    /** Entry direction. `'top'` slides down into place; `'bottom'` slides up. @default 'top' */
+    readonly direction: _angular_core.InputSignal<Direction>;
+    /** Per-piece stagger in ms. @default 200 */
+    readonly delay: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Duration of each keyframe step in seconds (total = 2 × stepDuration). @default 0.35 */
+    readonly stepDuration: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** CSS easing function. @default 'linear' (matches reactbits' identity easing) */
+    readonly easing: _angular_core.InputSignal<string>;
+    /** `IntersectionObserver.threshold` (0..1). @default 0.1 */
+    readonly threshold: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** `IntersectionObserver.rootMargin`. @default '0px' */
+    readonly rootMargin: _angular_core.InputSignal<string>;
+    /** Emitted once all pieces finish animating. */
+    readonly animationComplete: _angular_core.OutputEmitterRef<void>;
+    protected readonly pieces: _angular_core.Signal<readonly Piece[]>;
+    private readonly host;
+    private readonly destroyRef;
+    private readonly isBrowser;
+    private readonly platform;
+    private hasAnimated;
+    constructor();
+    private startObserver;
+    private animate;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrBlurText, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrBlurText, "wr-blur-text", never, { "text": { "alias": "text"; "required": true; "isSignal": true; }; "animateBy": { "alias": "animateBy"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "delay": { "alias": "delay"; "required": false; "isSignal": true; }; "stepDuration": { "alias": "stepDuration"; "required": false; "isSignal": true; }; "easing": { "alias": "easing"; "required": false; "isSignal": true; }; "threshold": { "alias": "threshold"; "required": false; "isSignal": true; }; "rootMargin": { "alias": "rootMargin"; "required": false; "isSignal": true; }; }, { "animationComplete": "animationComplete"; }, never, never, true, never>;
+}
+
+export { WrBlurText };

package/types/ngwr-border-glow.d.ts

@@ -0,0 +1,66 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Cursor-tracked glowing border card. A cone of light follows the pointer
+ * along the card's perimeter, brightening as the cursor approaches an edge.
+ *
+ * - Outer halo via stacked `box-shadow` on an inner `.edge-light` element.
+ * - Inner "soft bloom" via `mix-blend-mode: soft-light` for content near the
+ *   edges (subtle; control via `[fillOpacity]`).
+ * - Optional `[animated]` mode performs a one-shot sweep on mount, useful
+ *   for drawing attention to a freshly-rendered card.
+ *
+ * @example
+ * ```html
+ * <wr-border-glow [animated]="true" [colors]="['#c084fc', '#f472b6', '#38bdf8']">
+ *   <h3>Hover me</h3>
+ *   <p>The border lights up where the cursor is.</p>
+ * </wr-border-glow>
+ * ```
+ *
+ * @see https://www.reactbits.dev/components/border-glow (visual reference)
+ */
+declare class WrBorderGlow {
+    /** Card background fill. When unset, uses the theme surface token. */
+    readonly backgroundColor: _angular_core.InputSignal<string | null>;
+    /** Corner radius in pixels. @default 28 */
+    readonly borderRadius: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Halo extent in pixels — how far the outer glow reaches past the card edge. @default 40 */
+    readonly glowRadius: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Halo opacity multiplier (1 = full strength). @default 1 */
+    readonly glowIntensity: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Width of the lit cone as a percentage of the perimeter. @default 25 */
+    readonly coneSpread: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** How sharply the halo fades as the cursor leaves the edge. Lower = wider falloff. @default 30 */
+    readonly edgeSensitivity: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Strength of the soft-light interior fill near edges. @default 0.5 */
+    readonly fillOpacity: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Halo colour as `'H S L'` (HSL parts, no commas). When unset, the theme
+     * decides: a deep amber on light surfaces, pale amber on dark. Note
+     * `glowIntensity` only applies alongside an explicit `glowColor`.
+     */
+    readonly glowColor: _angular_core.InputSignal<string | null>;
+    /**
+     * Mesh-gradient palette for the colored border slice. When unset, the
+     * theme decides: deep tones on light, pastels on dark.
+     */
+    readonly colors: _angular_core.InputSignal<readonly string[] | null>;
+    /** Play a one-shot perimeter sweep on mount, then fade out. @default false */
+    readonly animated: _angular_core.InputSignalWithTransform<boolean, any>;
+    private readonly el;
+    private readonly platform;
+    private readonly destroyRef;
+    private readonly isBrowser;
+    /** Inline CSS variable bag — recomputed when colour / radius / sensitivity inputs change. */
+    protected readonly cssVars: _angular_core.Signal<Record<string, string>>;
+    constructor();
+    /** Pointer-driven update of `--wr-border-glow-angle` + `--wr-border-glow-edge-proximity`. */
+    protected onPointerMove(event: PointerEvent): void;
+    /** One-shot perimeter sweep: in → around → out, mirroring the reactbits behaviour. */
+    private runAutoSweep;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrBorderGlow, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrBorderGlow, "wr-border-glow", never, { "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "borderRadius": { "alias": "borderRadius"; "required": false; "isSignal": true; }; "glowRadius": { "alias": "glowRadius"; "required": false; "isSignal": true; }; "glowIntensity": { "alias": "glowIntensity"; "required": false; "isSignal": true; }; "coneSpread": { "alias": "coneSpread"; "required": false; "isSignal": true; }; "edgeSensitivity": { "alias": "edgeSensitivity"; "required": false; "isSignal": true; }; "fillOpacity": { "alias": "fillOpacity"; "required": false; "isSignal": true; }; "glowColor": { "alias": "glowColor"; "required": false; "isSignal": true; }; "colors": { "alias": "colors"; "required": false; "isSignal": true; }; "animated": { "alias": "animated"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { WrBorderGlow };

package/types/ngwr-breadcrumbs.d.ts

@@ -0,0 +1,61 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Breadcrumb navigation. Project `<wr-breadcrumbs-item>` children — they
+ * render as `<li>` rows inside an `<ol>`, separated by the configured
+ * glyph (default `/`). The container exposes the `nav[aria-label]`
+ * landmark required by WCAG.
+ *
+ * @example
+ * ```html
+ * <wr-breadcrumbs>
+ *   <wr-breadcrumbs-item routerLink="/">Home</wr-breadcrumbs-item>
+ *   <wr-breadcrumbs-item routerLink="/docs">Docs</wr-breadcrumbs-item>
+ *   <wr-breadcrumbs-item>Current</wr-breadcrumbs-item>
+ * </wr-breadcrumbs>
+ *
+ * <!-- Custom separator -->
+ * <wr-breadcrumbs separator="›">…</wr-breadcrumbs>
+ * ```
+ *
+ * @see https://ngwr.dev/components/breadcrumbs
+ */
+declare class WrBreadcrumbs {
+    /** Separator glyph between items. Any short string. @default '/' */
+    readonly separator: _angular_core.InputSignal<string>;
+    /** Accessible label for the `nav` landmark. @default 'Breadcrumbs' */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrBreadcrumbs, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrBreadcrumbs, "wr-breadcrumbs", never, { "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * One row inside `<wr-breadcrumbs>`. Renders as a `<li>` containing
+ * either an `<a>` (when `[href]` or `[routerLink]` is set) or a plain
+ * `<span aria-current="page">` (when neither is set — typically the last
+ * crumb).
+ *
+ * @example
+ * ```html
+ * <wr-breadcrumbs-item icon="home" routerLink="/">Home</wr-breadcrumbs-item>
+ * <wr-breadcrumbs-item href="https://ngwr.dev">External</wr-breadcrumbs-item>
+ * <wr-breadcrumbs-item>Current page</wr-breadcrumbs-item>
+ * ```
+ */
+declare class WrBreadcrumbsItem {
+    /** Plain anchor href. Overridden by `routerLink` when both are set. */
+    readonly href: _angular_core.InputSignal<string | null>;
+    /** Angular router target. Anything `RouterLink` accepts (string or `any[]`). */
+    readonly routerLink: _angular_core.InputSignal<string | readonly unknown[] | null>;
+    /** Open external `href` in a new tab. Ignored when `routerLink` is set. @default false */
+    readonly external: _angular_core.InputSignal<boolean>;
+    /** Optional leading icon rendered inline before the label. @default null */
+    readonly icon: _angular_core.InputSignal<string | null>;
+    protected readonly isLink: _angular_core.Signal<boolean>;
+    protected readonly isRouter: _angular_core.Signal<boolean>;
+    protected readonly rootClass: _angular_core.Signal<"wr-breadcrumbs__link" | "wr-breadcrumbs__current">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrBreadcrumbsItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrBreadcrumbsItem, "wr-breadcrumbs-item", never, { "href": { "alias": "href"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "external": { "alias": "external"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { WrBreadcrumbs, WrBreadcrumbsItem };

package/types/ngwr-burger.d.ts

@@ -0,0 +1,36 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Animated menu toggle — three SVG strokes morph between a hamburger and a
+ * close mark on `open`. Two-way bindable, so it pairs naturally with a
+ * `<wr-drawer>` or any disclosure.
+ *
+ * The morph is pure CSS (`stroke-dasharray` / `stroke-dashoffset` tweens),
+ * so it stays smooth without JS and collapses to its end state under
+ * `prefers-reduced-motion`.
+ *
+ * @example Toggle a drawer
+ * ```html
+ * <wr-burger [(open)]="menuOpen" />
+ * <wr-drawer [(open)]="menuOpen" position="right">…</wr-drawer>
+ * ```
+ *
+ * @see https://ngwr.dev/components/burger
+ */
+declare class WrBurger {
+    /** Two-way bindable open state. Drives the hamburger ↔ close morph. @default false */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Accessible label for the toggle button. @default 'Toggle menu' */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Disable the toggle. @default false */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    protected readonly classes: _angular_core.Signal<{
+        'wr-burger': boolean;
+        'wr-burger--opened': boolean;
+    }>;
+    protected toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrBurger, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrBurger, "wr-burger", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, never, true, never>;
+}
+
+export { WrBurger };

package/types/ngwr-button.d.ts

@@ -0,0 +1,176 @@
+import * as _angular_core from '@angular/core';
+import { Signal } from '@angular/core';
+
+/**
+ * @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
+ */
+/**
+ * Button size variant.
+ */
+type WrButtonSize = 'sm' | 'md' | 'lg';
+
+/**
+ * @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
+ */
+/**
+ * Corner treatment for `<wr-btn>`.
+ *
+ * - `rounded` (default) — small radius, matches the rest of the form vocabulary.
+ * - `pill` — fully rounded ends; ideal for solitary CTAs.
+ * - `squircle` — iOS-style continuous-curvature corners via the
+ *   `corner-shape: squircle` CSS spec (Chrome 145+, falls back to a
+ *   plain rounded corner elsewhere). For a deterministic
+ *   clip-path-based squircle that works across browsers, wrap the
+ *   button in `[wrSquircle]` instead.
+ */
+type WrButtonShape = 'rounded' | 'pill' | 'squircle';
+
+/**
+ * @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
+ */
+/**
+ * Where the icon sits relative to the button label.
+ */
+type WrButtonIconPosition = 'start' | 'end';
+
+/**
+ * Trigger an action. Renders as a `<wr-btn>` element, or attach to a
+ * native `<button>` / `<a>` via the `wr-btn` attribute selector.
+ *
+ * @example
+ * ```html
+ * <button wr-btn color="primary">Save</button>
+ * <a wr-btn color="primary" outlined>Cancel</a>
+ * <wr-btn color="danger" icon="trash">Delete</wr-btn>
+ * <wr-btn color="primary" shape="pill">Pill</wr-btn>
+ * ```
+ *
+ * **Squircle?** Wrap with `[wrSquircle]` — the directive is the only
+ * way ngwr ships smooth-corner clip-paths:
+ *
+ * ```html
+ * <wr-btn wrSquircle [radius]="14">Squircle</wr-btn>
+ * ```
+ *
+ * Inside a `<wr-btn-group shape="…">`, the group's shape is enforced on
+ * every child — child `[shape]` inputs are ignored so the group reads as
+ * one coherent control.
+ *
+ * @see https://ngwr.dev/components/button
+ */
+declare class WrButton {
+    /** Color variant. Omit for the neutral default style. @default null */
+    readonly color: _angular_core.InputSignal<"primary" | "secondary" | "success" | "warning" | "danger" | "light" | "medium" | "dark" | null>;
+    /** Size variant. @default 'md' */
+    readonly size: _angular_core.InputSignal<WrButtonSize>;
+    /**
+     * Corner treatment — `rounded` or `pill`. `null` (default) falls back
+     * to `rounded`. Inside a `<wr-btn-group shape="…">`, the group's shape
+     * ALWAYS wins over this input — the group enforces a consistent corner
+     * treatment across its members.
+     *
+     * @default null
+     */
+    readonly shape: _angular_core.InputSignal<WrButtonShape | null>;
+    /**
+     * Icon name to render alongside the label. The icon is hidden while
+     * `loading` is `true` so the spinner can take its place.
+     *
+     * @default null
+     */
+    readonly icon: _angular_core.InputSignal<string | null>;
+    /** Position of the icon relative to the label. @default 'start' */
+    readonly iconPosition: _angular_core.InputSignal<WrButtonIconPosition>;
+    /** Disable the button. @default false */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Outlined variant — colored text and border on a transparent background. @default false */
+    readonly outlined: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Stretch the button to fill its parent's width. @default false */
+    readonly block: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Show a spinner overlaying the label. Layout is preserved. @default false */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, any>;
+    /**
+     * When `loading` is `true` and this is also `true`, pointer events are
+     * suppressed and the button reports as disabled to assistive tech.
+     *
+     * @default true
+     */
+    readonly isDisabledWhenLoading: _angular_core.InputSignalWithTransform<boolean, any>;
+    private readonly group;
+    /**
+     * Resolved shape. Inside a `<wr-btn-group>`, the group ALWAYS wins —
+     * child `[shape]` is ignored entirely so the group reads as one
+     * coherent control. Outside a group, the button's own `[shape]` is
+     * used, falling back to `rounded`.
+     */
+    protected readonly effectiveShape: _angular_core.Signal<WrButtonShape>;
+    protected readonly nativeDisabled: _angular_core.Signal<"" | null>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrButton, "wr-btn, button[wr-btn], a[wr-btn]", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "outlined": { "alias": "outlined"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "isDisabledWhenLoading": { "alias": "isDisabledWhenLoading"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * @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
+ */
+
+/**
+ * Contract a child `<wr-btn>` reads from its enclosing `<wr-btn-group>`.
+ *
+ * @internal
+ */
+interface WrButtonGroupContext {
+    /** Shape cascade — child buttons fall back to this when they don't set their own. */
+    readonly shape: Signal<WrButtonShape | null>;
+}
+
+/**
+ * Visually group buttons by merging their borders. Optionally enforce a
+ * single corner treatment across every child via `[shape]` — child
+ * `<wr-btn>` `[shape]` inputs are ignored when set on the group.
+ *
+ * @example
+ * ```html
+ * <wr-btn-group>
+ *   <button wr-btn>Left</button>
+ *   <button wr-btn>Middle</button>
+ *   <button wr-btn>Right</button>
+ * </wr-btn-group>
+ *
+ * <wr-btn-group shape="pill">
+ *   <button wr-btn>One</button>
+ *   <button wr-btn>Two</button>
+ *   <button wr-btn>Three</button>
+ * </wr-btn-group>
+ * ```
+ *
+ * @see https://ngwr.dev/components/button-group
+ */
+declare class WrButtonGroup implements WrButtonGroupContext {
+    /**
+     * Corner treatment enforced on every child `<wr-btn>`. Child `[shape]`
+     * inputs are ignored when this is set — the group exists to make a
+     * uniform control. `null` (default) leaves children alone.
+     *
+     * @default null
+     */
+    readonly shape: _angular_core.InputSignal<WrButtonShape | null>;
+    protected readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrButtonGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrButtonGroup, "wr-btn-group", never, { "shape": { "alias": "shape"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { WrButton, WrButtonGroup };
+export type { WrButtonIconPosition, WrButtonShape, WrButtonSize };