ngwr 7.3.0 → 9.0.0

package/tree/styles/_index.scss

@@ -5,8 +5,8 @@
 
   display: block;
   font-family: var(--wr-font-family-base);
-  font-size: 0.875rem;
-  color: var(--wr-color-dark);
+  font-size: var(--wr-text-sm);
+  color: var(--wr-color-on-surface);
 
   &__list {
     list-style: none;
@@ -29,25 +29,47 @@
       color var(--wr-transition-base);
 
     &:hover:not(.wr-tree__row--disabled) {
-      background: rgba(var(--wr-color-light-rgb), 0.5);
+      background: var(--wr-color-hover);
     }
 
     &--selected {
-      background: rgba(var(--wr-color-primary-rgb), 0.1);
+      background: var(--wr-color-primary-soft);
       color: var(--wr-color-primary);
     }
 
     // Visible ring only when the row truly has keyboard focus — not
     // just because it's the roving-tabindex cursor row.
     &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 2px rgba(var(--wr-color-primary-rgb), 0.25);
+      @include theme.focus-ring;
     }
 
     &--disabled {
       cursor: not-allowed;
       opacity: 0.55;
     }
+
+    // Active-descendant cursor when virtualized — focus lives on the list
+    // container, so the "current" row is shown by tint rather than a focus ring.
+    &--active {
+      background: var(--wr-color-hover);
+    }
+  }
+
+  // Virtualized list: the container owns scrolling + keyboard focus.
+  &__list--virtual {
+    overflow-y: auto;
+    outline: 0;
+
+    &:focus-visible {
+      @include theme.focus-ring;
+    }
+  }
+
+  // Height-only reserved rows contribute nothing but scroll extent.
+  &__spacer {
+    list-style: none;
+    margin: 0;
+    padding: 0;
   }
 
   &__toggle {
@@ -60,7 +82,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     cursor: pointer;
     border-radius: var(--wr-border-radius-sm);
     transition: transform var(--wr-transition-base);
@@ -97,22 +119,24 @@
   //
 
   &--combobox {
-    --wr-tree-trigger-color: var(--wr-color-dark);
-    --wr-tree-trigger-bg: var(--wr-color-white);
-    --wr-tree-trigger-border: var(--wr-color-light);
-    --wr-tree-trigger-radius: var(--wr-border-radius-base);
-    --wr-tree-trigger-padding-y: 0.4375rem;
-    --wr-tree-trigger-padding-x: 0.75rem;
-    --wr-tree-trigger-font-size: 0.875rem;
-    --wr-tree-trigger-line-height: 1.25rem;
+    --wr-tree-trigger-color: var(--wr-color-on-surface);
+    --wr-tree-trigger-bg: var(--wr-color-surface);
+    --wr-tree-trigger-border: var(--wr-color-outline);
+    // Combobox trigger on the md control contract (30px, radius 6) so it lines
+    // up with select / input / button when used as a tree-select.
+    --wr-tree-trigger-radius: var(--wr-control-radius-md);
+    --wr-tree-trigger-padding-y: var(--wr-control-padding-y-md);
+    --wr-tree-trigger-padding-x: var(--wr-control-padding-x-md);
+    --wr-tree-trigger-font-size: var(--wr-control-font-size-md);
+    --wr-tree-trigger-line-height: var(--wr-control-line-height-md);
     --wr-tree-panel-max-height: 18rem;
 
     display: inline-flex;
     vertical-align: middle;
 
     &.wr-tree--disabled {
-      --wr-tree-trigger-color: var(--wr-color-medium);
-      --wr-tree-trigger-bg: rgba(var(--wr-color-light-rgb), 0.35);
+      --wr-tree-trigger-color: var(--wr-color-on-surface-muted);
+      --wr-tree-trigger-bg: rgba(var(--wr-color-outline-rgb), 0.35);
     }
   }
 
@@ -138,9 +162,8 @@
       box-shadow var(--wr-transition-base);
 
     &:focus-visible {
-      outline: none;
       border-color: var(--wr-color-primary);
-      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.15);
+      @include theme.focus-ring;
     }
 
     &:disabled {
@@ -162,13 +185,13 @@
   }
 
   &__placeholder {
-    color: rgba(var(--wr-color-medium-rgb), 0.85);
+    color: var(--wr-color-text-muted);
   }
 
   &__chevron {
     --wr-icon-size: 1rem;
     flex: 0 0 auto;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     transition: transform var(--wr-transition-base);
   }
 
@@ -184,15 +207,15 @@
     width: 1.125rem;
     height: 1.125rem;
     border-radius: 999px;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     cursor: pointer;
     transition:
       background 0.12s ease,
       color 0.12s ease;
 
     &:hover {
-      background: rgba(var(--wr-color-dark-rgb), 0.06);
-      color: var(--wr-color-dark);
+      background: rgba(var(--wr-color-on-surface-rgb), 0.06);
+      color: var(--wr-color-on-surface);
     }
   }
 
@@ -202,7 +225,8 @@
     flex-wrap: wrap;
     align-items: center;
     padding: 0.25rem 0.5rem;
-    min-height: calc(var(--wr-tree-trigger-line-height) + var(--wr-tree-trigger-padding-y) * 2);
+    // Empty / one-row floor = single-mode height (+2px for the border).
+    min-height: calc(var(--wr-tree-trigger-line-height) + var(--wr-tree-trigger-padding-y) * 2 + 2px);
   }
 
   &__chips {
@@ -221,9 +245,9 @@
     max-width: 100%;
     padding: 0.125rem 0.25rem 0.125rem 0.5rem;
     border-radius: 999px;
-    background: rgba(var(--wr-color-primary-rgb), 0.1);
+    background: var(--wr-color-primary-soft);
     color: var(--wr-color-primary);
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
     line-height: 1.4;
     user-select: none;
   }
@@ -246,13 +270,13 @@
     transition: background 0.12s ease;
 
     &:hover {
-      background: rgba(var(--wr-color-primary-rgb), 0.2);
+      background: var(--wr-color-primary-active);
     }
   }
 
   &__chip--more {
-    background: rgba(var(--wr-color-dark-rgb), 0.08);
-    color: rgba(var(--wr-color-dark-rgb), 0.7);
+    background: rgba(var(--wr-color-on-surface-rgb), 0.08);
+    color: rgba(var(--wr-color-on-surface-rgb), 0.7);
   }
 }
 
@@ -261,13 +285,20 @@
 }
 
 .wr-tree-panel {
-  background: var(--wr-color-white);
-  border: 1px solid var(--wr-color-light);
+  background: var(--wr-color-surface);
+  border: 1px solid var(--wr-color-outline);
   border-radius: var(--wr-border-radius-base);
   box-shadow: var(--wr-shadow-overlay);
   padding: 0.375rem;
   max-height: var(--wr-tree-panel-max-height, 18rem);
   overflow-y: auto;
+
+  // The virtualized list owns its own scrolling (max-height on the <ul>), so the
+  // panel must not add a second scroll container / height cap.
+  &--virtual {
+    max-height: none;
+    overflow: visible;
+  }
 }
 
 // Touch pointers: taller rows (~44px) and a larger expand/collapse toggle so

package/types/ngwr-action-sheet.d.ts

@@ -0,0 +1,75 @@
+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
+ */
+/** One row in a {@link WrActionSheet}. */
+interface WrActionSheetAction {
+    /** Row label. */
+    label: string;
+    /** Caller-defined payload, echoed back in the `action` output. */
+    value?: unknown;
+    /** Optional leading icon — a `wr-icon` name. */
+    icon?: string;
+    /**
+     * Visual role. `destructive` paints the row in the danger colour; `cancel`
+     * moves it to a separate group pinned at the bottom (iOS style).
+     * @default 'default'
+     */
+    role?: 'default' | 'destructive' | 'cancel';
+    /** Disable the row. */
+    disabled?: boolean;
+}
+
+/**
+ * iOS-style action sheet — a bottom sheet offering a short list of choices.
+ * A thin preset over {@link WrDrawer} (bottom position, rounded, grab handle,
+ * safe-area padding), driven by data rather than projected content.
+ *
+ * Pass `actions`; picking one emits `action` and closes the sheet. Rows with
+ * `role: 'destructive'` are painted in the danger colour, and `role: 'cancel'`
+ * rows drop to a separate group at the bottom. Dismissing via the backdrop,
+ * `Escape`, or a swipe-down closes without emitting. Picking fires a light
+ * {@link WrHaptics} tick.
+ *
+ * @example
+ * ```html
+ * <wr-action-sheet
+ *   [(open)]="sheetOpen"
+ *   title="Photo"
+ *   [actions]="[
+ *     { label: 'Take Photo', icon: 'camera', value: 'camera' },
+ *     { label: 'Choose from Library', icon: 'image', value: 'library' },
+ *     { label: 'Delete', role: 'destructive', value: 'delete' },
+ *     { label: 'Cancel', role: 'cancel' },
+ *   ]"
+ *   (action)="onPick($event)"
+ * />
+ * ```
+ *
+ * @see https://ngwr.dev/reference/components/action-sheet
+ */
+declare class WrActionSheet {
+    private readonly haptics;
+    /** Whether the sheet is open. Two-way. @default false */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** The rows to offer. */
+    readonly actions: _angular_core.InputSignal<readonly WrActionSheetAction[]>;
+    /** Optional bold heading above the rows. */
+    readonly title: _angular_core.InputSignal<string>;
+    /** Optional muted sub-heading under the title. */
+    readonly message: _angular_core.InputSignal<string>;
+    /** Fires with the chosen row (never fires on a dismiss). */
+    readonly action: _angular_core.OutputEmitterRef<WrActionSheetAction>;
+    protected readonly mainActions: _angular_core.Signal<WrActionSheetAction[]>;
+    protected readonly cancelActions: _angular_core.Signal<WrActionSheetAction[]>;
+    protected select(item: WrActionSheetAction): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrActionSheet, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrActionSheet, "wr-action-sheet", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "action": "action"; }, never, never, true, never>;
+}
+
+export { WrActionSheet };
+export type { WrActionSheetAction };

package/types/ngwr-alert.d.ts

@@ -9,7 +9,7 @@ import * as _angular_core from '@angular/core';
 /**
  * Visual variant of the alert.
  */
-type WrAlertType = 'info' | 'success' | 'warning' | 'danger';
+type WrAlertType = 'info' | 'success' | 'warning' | 'danger' | 'neutral' | 'offline';
 
 /**
  * Inline status banner. Use for feedback messages — saved/failed/notice etc.
@@ -20,17 +20,27 @@ type WrAlertType = 'info' | 'success' | 'warning' | 'danger';
  * <wr-alert title="Failed" type="danger" closeable (closed)="onClose()" />
  * ```
  *
- * @see https://ngwr.dev/components/alert
+ * @see https://ngwr.dev/reference/components/alert
  */
 declare class WrAlert {
-    /** Required headline shown at the top of the alert. */
-    readonly title: _angular_core.InputSignal<string>;
+    /**
+     * Optional headline shown at the top of the alert.
+     *
+     * @default null
+     */
+    readonly title: _angular_core.InputSignal<string | null>;
     /**
      * Visual variant.
      *
      * @default 'info'
      */
     readonly type: _angular_core.InputSignal<WrAlertType>;
+    /**
+     * Override the default per-type icon with any ngwr icon name.
+     *
+     * @default null
+     */
+    readonly iconName: _angular_core.InputSignal<string | null>;
     /**
      * Optional secondary message rendered below the title.
      *
@@ -38,8 +48,8 @@ declare class WrAlert {
      */
     readonly message: _angular_core.InputSignal<string | null>;
     /**
-     * When `true`, renders a leading status icon matching the `type`
-     * (info / success / warning / danger). Pass `false` to hide.
+     * When `true`, renders a leading status icon matching the `type`.
+     * Pass `false` to hide. Ignored when `iconName` is set.
      *
      * @default true
      */
@@ -61,7 +71,7 @@ declare class WrAlert {
     protected readonly liveLevel: _angular_core.Signal<"assertive" | "polite" | null>;
     protected onClose(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrAlert, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrAlert, "wr-alert", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "closeable": { "alias": "closeable"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrAlert, "wr-alert", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "closeable": { "alias": "closeable"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, never, never, true, never>;
 }
 
 export { WrAlert };

package/types/ngwr-anchor.d.ts

@@ -28,7 +28,7 @@ interface WrAnchorLink {
  * />
  * ```
  *
- * @see https://ngwr.dev/components/anchor
+ * @see https://ngwr.dev/reference/components/anchor
  */
 declare class WrAnchor {
     readonly links: _angular_core.InputSignal<readonly WrAnchorLink[]>;

package/types/ngwr-avatar.d.ts

@@ -48,7 +48,7 @@ type WrAvatarSize = number | `${number}` | `${number}px` | `${number}rem`;
  * <wr-avatar url="/me.png" alt="Roman" [size]="48" />
  * ```
  *
- * @see https://ngwr.dev/components/avatar
+ * @see https://ngwr.dev/reference/components/avatar
  */
 declare class WrAvatar {
     /**

package/types/ngwr-back-top.d.ts

@@ -13,7 +13,7 @@ import * as _angular_core from '@angular/core';
  * </wr-back-top>
  * ```
  *
- * @see https://ngwr.dev/components/back-top
+ * @see https://ngwr.dev/reference/components/back-top
  */
 declare class WrBackTop {
     /** Show the button once `window.scrollY` exceeds this many pixels. @default 400 */

package/types/ngwr-badge.d.ts

@@ -51,7 +51,7 @@ type WrTagIconPosition = 'start' | 'end';
  * <wr-badge color="primary" shape="pill">New</wr-badge>
  * ```
  *
- * @see https://ngwr.dev/components/badge
+ * @see https://ngwr.dev/reference/components/badge
  */
 declare class WrBadge {
     /**
@@ -59,7 +59,7 @@ declare class WrBadge {
      *
      * @default 'primary'
      */
-    readonly color: _angular_core.InputSignal<"primary" | "secondary" | "success" | "warning" | "danger" | "light" | "medium" | "dark">;
+    readonly color: _angular_core.InputSignal<"primary" | "secondary" | "success" | "warning" | "danger" | "info" | "light" | "medium" | "dark">;
     /**
      * Size variant.
      *
@@ -97,7 +97,7 @@ declare class WrBadge {
  * <wr-tag color="warning" loading>Saving</wr-tag>
  * ```
  *
- * @see https://ngwr.dev/components/badge
+ * @see https://ngwr.dev/reference/components/badge
  */
 declare class WrTag {
     /**
@@ -105,7 +105,7 @@ declare class WrTag {
      *
      * @default 'primary'
      */
-    readonly color: _angular_core.InputSignal<"primary" | "secondary" | "success" | "warning" | "danger" | "light" | "medium" | "dark">;
+    readonly color: _angular_core.InputSignal<"primary" | "secondary" | "success" | "warning" | "danger" | "info" | "light" | "medium" | "dark">;
     /**
      * Icon name shown alongside the content. The icon is replaced by a
      * spinner when `loading` is true.

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

@@ -20,7 +20,7 @@ interface WrBarChartDatum {
  * ]" />
  * ```
  *
- * @see https://ngwr.dev/components/bar-chart
+ * @see https://ngwr.dev/reference/components/bar-chart
  */
 declare class WrBarChart {
     readonly data: _angular_core.InputSignal<readonly WrBarChartDatum[]>;

package/types/ngwr-breadcrumbs.d.ts

@@ -18,7 +18,7 @@ import * as _angular_core from '@angular/core';
  * <wr-breadcrumbs separator="›">…</wr-breadcrumbs>
  * ```
  *
- * @see https://ngwr.dev/components/breadcrumbs
+ * @see https://ngwr.dev/reference/components/breadcrumbs
  */
 declare class WrBreadcrumbs {
     /** Separator glyph between items. Any short string. @default '/' */

package/types/ngwr-burger.d.ts

@@ -15,7 +15,7 @@ import * as _angular_core from '@angular/core';
  * <wr-drawer [(open)]="menuOpen" position="right">…</wr-drawer>
  * ```
  *
- * @see https://ngwr.dev/components/burger
+ * @see https://ngwr.dev/reference/components/burger
  */
 declare class WrBurger {
     /** Two-way bindable open state. Drives the hamburger ↔ close morph. @default false */

package/types/ngwr-button.d.ts

@@ -65,11 +65,11 @@ type WrButtonIconPosition = 'start' | 'end';
  * every child — child `[shape]` inputs are ignored so the group reads as
  * one coherent control.
  *
- * @see https://ngwr.dev/components/button
+ * @see https://ngwr.dev/reference/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>;
+    readonly color: _angular_core.InputSignal<"primary" | "secondary" | "success" | "warning" | "danger" | "info" | "light" | "medium" | "dark" | null>;
     /** Size variant. @default 'md' */
     readonly size: _angular_core.InputSignal<WrButtonSize>;
     /**
@@ -156,7 +156,7 @@ interface WrButtonGroupContext {
  * </wr-btn-group>
  * ```
  *
- * @see https://ngwr.dev/components/button-group
+ * @see https://ngwr.dev/reference/components/button-group
  */
 declare class WrButtonGroup implements WrButtonGroupContext {
     /**

package/types/ngwr-calendar-heatmap.d.ts

@@ -23,7 +23,7 @@ interface Cell {
  * <wr-calendar-heatmap [data]="data" [endDate]="today" [weeks]="26" color="#10b981" />
  * ```
  *
- * @see https://ngwr.dev/components/calendar-heatmap
+ * @see https://ngwr.dev/reference/components/calendar-heatmap
  */
 declare class WrCalendarHeatmap {
     readonly data: _angular_core.InputSignal<readonly WrHeatmapDatum[]>;

package/types/ngwr-calendar.d.ts

@@ -41,7 +41,7 @@ type WrCalendarRange = readonly [Date | null, Date | null];
  * <wr-calendar mode="range" [(range)]="[start, end]" />
  * ```
  *
- * @see https://ngwr.dev/components/calendar
+ * @see https://ngwr.dev/reference/components/calendar
  */
 declare class WrCalendar {
     /** Selection mode. @default 'single' */

package/types/ngwr-card.d.ts

@@ -21,7 +21,7 @@ import * as i0 from '@angular/core';
  * </wr-card>
  * ```
  *
- * @see https://ngwr.dev/components/card
+ * @see https://ngwr.dev/reference/components/card
  */
 declare class WrCard {
     /** Render a 1px border around the surface. @default true */

package/types/ngwr-carousel.d.ts

@@ -22,7 +22,7 @@ declare class WrCarouselSlide {
  * </wr-carousel>
  * ```
  *
- * @see https://ngwr.dev/components/carousel
+ * @see https://ngwr.dev/reference/components/carousel
  */
 declare class WrCarousel {
     /** Active slide index. Two-way bindable. @default 0 */

package/types/ngwr-cascader.d.ts

@@ -1,6 +1,6 @@
 import * as _angular_core from '@angular/core';
 import { TemplateRef } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
+import { FormValueControl } from '@angular/forms/signals';
 
 /** One node in the cascader tree. */
 interface WrCascaderOption<T = string> {
@@ -20,12 +20,18 @@ interface WrCascaderOption<T = string> {
  * advance to the next column. Selecting a leaf (no children) commits
  * the full path.
  *
- * Implements `ControlValueAccessor` — value is the path through the
- * tree as a `readonly T[]`.
+ * A signal-forms native control: it implements `FormValueControl<unknown>`,
+ * so `[formField]` binds straight to its `value` model — no
+ * `ControlValueAccessor` in between. `[(value)]` works standalone. The value
+ * is the path through the tree (an array from root to leaf).
  *
  * @example
  * ```html
- * <wr-cascader [options]="locations" [(ngModel)]="path" placeholder="Pick a location" />
+ * <!-- signal forms -->
+ * <wr-cascader [options]="locations" [formField]="form.path" placeholder="Pick a location" />
+ *
+ * <!-- standalone two-way binding -->
+ * <wr-cascader [options]="locations" [(value)]="path" placeholder="Pick a location" />
  * ```
  *
  * ```ts
@@ -41,15 +47,23 @@ interface WrCascaderOption<T = string> {
  * ];
  * ```
  *
- * @see https://ngwr.dev/components/cascader
+ * @see https://ngwr.dev/reference/components/cascader
  */
-declare class WrCascader<T = string> implements ControlValueAccessor {
+type WrCascaderSize = 'sm' | 'md' | 'lg';
+declare class WrCascader<T = string> implements FormValueControl<unknown> {
     /** Root-level options. Each may have `children` for deeper levels. */
     readonly options: _angular_core.InputSignal<readonly WrCascaderOption<T>[]>;
     /** Placeholder shown when no path is selected. @default '' */
     readonly placeholder: _angular_core.InputSignal<string>;
-    /** Disable the cascader. */
+    /**
+     * Disable the cascader. Bound automatically from the field's disabled state
+     * when used with `[formField]`.
+     *
+     * @default false
+     */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Control size — shares the `--wr-control-*` contract. @default 'md' */
+    readonly size: _angular_core.InputSignal<WrCascaderSize>;
     /** Show a clear-all (×) button on the trigger when a path is selected. @default true */
     readonly clearable: _angular_core.InputSignalWithTransform<boolean, any>;
     /**
@@ -59,6 +73,13 @@ declare class WrCascader<T = string> implements ControlValueAccessor {
     readonly changeOnSelect: _angular_core.InputSignalWithTransform<boolean, any>;
     /** Separator between labels in the trigger display. @default '/' */
     readonly separator: _angular_core.InputSignal<string>;
+    /**
+     * Committed selection path (full array from root to leaf). Bound by
+     * `[formField]`, or two-way via `[(value)]`.
+     */
+    readonly value: _angular_core.ModelSignal<unknown>;
+    /** Emitted on blur / commit so a bound field can mark itself touched. */
+    readonly touch: _angular_core.OutputEmitterRef<void>;
     /** Committed selection path (full T[] from root to leaf). @internal */
     protected readonly path: _angular_core.WritableSignal<readonly T[]>;
     /** Currently-expanded column path — drives which columns the panel shows. @internal */
@@ -66,8 +87,6 @@ declare class WrCascader<T = string> implements ControlValueAccessor {
     protected readonly open: _angular_core.WritableSignal<boolean>;
     /** Panel id used by the trigger's `aria-controls`. */
     protected readonly panelId: string;
-    private readonly disabledFromCva;
-    protected readonly isDisabled: _angular_core.Signal<boolean>;
     /**
      * Columns visible in the panel. Each column shows the children of the
      * preceding activePath entry. Column 0 = root options. The last
@@ -86,22 +105,17 @@ declare class WrCascader<T = string> implements ControlValueAccessor {
     private readonly scrollStrategies;
     private readonly destroyRef;
     private overlayRef;
-    private onChange;
-    protected onTouched: () => void;
     constructor();
     protected onTriggerClick(): void;
     protected onOptionClick(colIndex: number, opt: WrCascaderOption<T>, event: Event): void;
     protected clearSelection(event: Event): void;
     protected isActiveAt(colIndex: number, value: T): boolean;
-    writeValue(value: unknown): void;
-    registerOnChange(fn: (value: readonly T[]) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(isDisabled: boolean): void;
+    private pathsEqual;
     private openOverlay;
     private closeOverlay;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCascader<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCascader<any>, "wr-cascader", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "changeOnSelect": { "alias": "changeOnSelect"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCascader<any>, "wr-cascader", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "changeOnSelect": { "alias": "changeOnSelect"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
 }
 
 export { WrCascader };
-export type { WrCascaderOption };
+export type { WrCascaderOption, WrCascaderSize };