ngwr 8.0.0 → 9.0.0

package/timeline/styles/_index.scss

@@ -7,7 +7,7 @@
   width: 100%;
   min-width: 0;
   font-family: var(--wr-font-family-base);
-  color: var(--wr-color-dark);
+  color: var(--wr-color-on-surface);
 
   &--vertical {
     flex-direction: column;
@@ -36,7 +36,7 @@
     margin-top: 0.125rem;
     border-radius: 50%;
     background: var(--wr-color-primary);
-    box-shadow: 0 0 0 2px var(--wr-color-white);
+    box-shadow: 0 0 0 2px var(--wr-color-surface);
     z-index: 1;
   }
 
@@ -53,6 +53,7 @@
   }
 
   &--medium &__dot {
+    // The `color="medium"` INTENT, not the muted-text role — keep the literal.
     background: var(--wr-color-medium);
   }
 
@@ -64,7 +65,7 @@
   &__time {
     font-size: var(--wr-text-xs);
     line-height: 1rem;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     font-weight: var(--wr-font-weight-medium);
     margin-bottom: 0.125rem;
   }
@@ -79,7 +80,7 @@
     margin-top: 0.25rem;
     font-size: var(--wr-text-sm);
     line-height: var(--wr-leading-relaxed);
-    color: var(--wr-color-dark);
+    color: var(--wr-color-on-surface);
   }
 
   // Vertical: connector line between dots.
@@ -91,7 +92,7 @@
       top: 1rem;
       bottom: -1.25rem;
       width: 1.5px;
-      background: var(--wr-color-light);
+      background: var(--wr-color-outline);
     }
 
     &:last-child::before {
@@ -121,7 +122,7 @@
       left: 50%;
       width: calc(100% + 2rem);
       height: 1.5px;
-      background: var(--wr-color-light);
+      background: var(--wr-color-outline);
       z-index: 0;
     }
 

package/toast/styles/_index.scss

@@ -125,11 +125,11 @@ $toast-colors: (
 }
 
 .wr-toast {
-  --wr-toast-bg: var(--wr-color-white);
-  --wr-toast-border: var(--wr-color-light);
+  --wr-toast-bg: var(--wr-color-surface);
+  --wr-toast-border: var(--wr-color-outline);
   --wr-toast-accent: var(--wr-color-primary);
-  --wr-toast-title: var(--wr-color-dark);
-  --wr-toast-message: var(--wr-color-medium);
+  --wr-toast-title: var(--wr-color-on-surface);
+  --wr-toast-message: var(--wr-color-on-surface-muted);
 
   position: relative;
   display: flex;
@@ -180,7 +180,7 @@ $toast-colors: (
     background: transparent;
     border: 0;
     padding: 0.125rem;
-    color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface-muted);
     cursor: pointer;
     border-radius: var(--wr-border-radius-sm);
     transition:
@@ -190,7 +190,7 @@ $toast-colors: (
     --wr-icon-size: 0.875rem;
 
     &:hover {
-      color: var(--wr-color-dark);
+      color: var(--wr-color-on-surface);
       background: var(--wr-color-hover);
     }
   }
@@ -245,11 +245,11 @@ $toast-colors: (
   align-self: stretch;
   pointer-events: auto;
   appearance: none;
-  background: var(--wr-color-white);
-  border: 1px solid var(--wr-color-light);
+  background: var(--wr-color-surface);
+  border: 1px solid var(--wr-color-outline);
   @include theme.smooth-br(var(--wr-border-radius-base));
   padding: 0.375rem 0.75rem;
-  color: var(--wr-color-medium);
+  color: var(--wr-color-on-surface-muted);
   font-family: var(--wr-font-family-base);
   font-size: var(--wr-text-xs);
   font-weight: 500;
@@ -263,8 +263,8 @@ $toast-colors: (
     border-color var(--wr-transition-base);
 
   &:hover {
-    color: var(--wr-color-dark);
-    border-color: var(--wr-color-medium);
+    color: var(--wr-color-on-surface);
+    border-color: var(--wr-color-on-surface-muted);
   }
 }
 

package/toolbar/styles/_index.scss

@@ -13,12 +13,12 @@
   min-width: 0;
   min-height: 3rem;
   padding: 0.5rem 0.875rem;
-  background: var(--wr-color-white);
-  border: 1px solid var(--wr-color-light);
+  background: var(--wr-color-surface);
+  border: 1px solid var(--wr-color-outline);
   @include theme.smooth-br(var(--wr-border-radius-base));
   box-shadow: var(--wr-shadow-xs);
   font-family: var(--wr-font-family-base);
-  color: var(--wr-color-dark);
+  color: var(--wr-color-on-surface);
 
   // Opt-in (`responsive`): query the toolbar's own width so the zones stack
   // when it's too narrow for a row. Already full-width, so containment is safe.
@@ -69,7 +69,7 @@
       transform: translateY(-50%);
       height: 1.25rem;
       width: 1px;
-      background: var(--wr-color-light);
+      background: var(--wr-color-outline);
     }
   }
 }

package/tree/styles/_index.scss

@@ -6,7 +6,7 @@
   display: block;
   font-family: var(--wr-font-family-base);
   font-size: var(--wr-text-sm);
-  color: var(--wr-color-dark);
+  color: var(--wr-color-on-surface);
 
   &__list {
     list-style: none;
@@ -47,6 +47,29 @@
       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 {
@@ -59,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);
@@ -96,9 +119,9 @@
   //
 
   &--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-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);
@@ -112,8 +135,8 @@
     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);
     }
   }
 
@@ -168,7 +191,7 @@
   &__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);
     }
   }
 
@@ -252,8 +275,8 @@
   }
 
   &__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);
   }
 }
 
@@ -262,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

@@ -20,7 +20,7 @@ type WrAlertType = 'info' | 'success' | 'warning' | 'danger' | 'neutral' | 'offl
  * <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 {
     /**

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,20 @@ interface WrCascaderOption<T = string> {
  * ];
  * ```
  *
- * @see https://ngwr.dev/components/cascader
+ * @see https://ngwr.dev/reference/components/cascader
  */
 type WrCascaderSize = 'sm' | 'md' | 'lg';
-declare class WrCascader<T = string> implements ControlValueAccessor {
+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>;
@@ -62,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 */
@@ -69,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
@@ -89,21 +105,16 @@ 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; }; "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; }; }, {}, 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 };