ngwr 10.0.0 → 10.1.0

package/styles.scss

@@ -51,6 +51,7 @@
 @forward './divider/styles';
 @forward './donut-chart/styles';
 @forward './drag-drop/styles';
+@forward './event-calendar/styles';
 @forward './drawer/styles';
 @forward './dropdown/styles';
 @forward './empty/styles';
@@ -112,6 +113,8 @@
 @forward './timeline/styles';
 @forward './toast/styles';
 @forward './toolbar/styles';
+@forward './tour/styles';
+@forward './transfer/styles';
 @forward './tree/styles';
 @forward './typewriter/styles';
 @forward './typography/styles';

package/table/styles/_index.scss

@@ -126,8 +126,67 @@
     opacity: 0.35;
   }
 
-  .cdk-drag-animating {
-    transition: transform 0.18s cubic-bezier(0, 0, 0.2, 1);
+  // NOTE: `.cdk-drag-animating` is NOT here. CDK puts it on the preview clone,
+  // which lives in `<body>` — see the rule at the end of this file.
+
+
+  // --- Tree rows ------------------------------------------------------------
+  // Depth lives on the `<tr>` as `--wr-table-depth` and is spent inside the tree
+  // column's cell, not as a lead column: a new column would break `columnOrder`
+  // indexes and the pin measurements, and a child would stop being an ordinary
+  // `<tr>` going through the same cell loop.
+  &__tree-lead {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+    margin-inline-end: 0.25rem;
+    padding-inline-start: calc(var(--wr-table-depth, 0) * var(--wr-table-indent, 1.25rem));
+  }
+
+  &__tree-toggle {
+    appearance: none;
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-radius: var(--wr-border-radius-sm);
+    color: var(--wr-color-on-surface-muted);
+    cursor: pointer;
+
+    &:hover {
+      background: var(--wr-color-hover);
+      color: var(--wr-color-on-surface);
+    }
+
+    // A leaf keeps the slot so labels line up down a column, but is not a
+    // button and is hidden from assistive tech.
+    &--leaf {
+      cursor: default;
+      visibility: hidden;
+    }
+  }
+
+  &__tree-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+    transition: transform var(--wr-transition-base);
+  }
+
+  &__tree-toggle--open &__tree-icon,
+  &__tree-toggle--open .wr-table__tree-icon {
+    transform: rotate(90deg);
+  }
+
+  // Card mode stacks label / value with `justify-content: space-between`, so an
+  // extra inline child would strand the chevron mid-row. Fold the lead into the
+  // value side instead.
+  &--responsive &__tree-lead {
+    margin-inline-end: 0.375rem;
   }
 
   // --- Row selection --------------------------------------------------------
@@ -206,6 +265,9 @@
   }
 
   // --- Summary / footer row -------------------------------------------------
+  // `&__foot-cell--lead` is emitted on the selection / expand footer cells and
+  // carries no styles of its own — it exists as a public hook so consumers can
+  // target those two cells without matching on position.
   &__foot-cell {
     padding: calc(0.625rem * var(--wr-density-y, 1)) calc(0.875rem * var(--wr-density-x, 1));
     background: var(--wr-table-head-bg);
@@ -762,3 +824,39 @@
     }
   }
 }
+
+// The dragged header's preview is a clone CDK moves to `document.body`, so it
+// leaves `.wr-table` behind and no ancestor selector reaches it — the clone's
+// own `wr-table__th` class does. Declared here rather than inherited: until the
+// drag-drop entry point's rules were scoped, this preview silently wore
+// `wr-sortable-list`'s lift shadow, and scoping them without this would have
+// left the column preview with no chrome at all.
+.cdk-drag-preview.wr-table__th {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  // Every value has to resolve in `<body>`: the `--wr-table-*` tokens are
+  // declared on `.wr-table`, which the preview has left, so they are passed with
+  // the same defaults that block sets. `--wr-density-*` and `--wr-color-*` are
+  // root-level and resolve as-is.
+  padding: calc(0.625rem * var(--wr-density-y, 1)) calc(0.875rem * var(--wr-density-x, 1));
+  background: var(--wr-table-head-bg, rgba(var(--wr-color-outline-rgb), 0.25));
+  color: var(--wr-color-on-surface-muted);
+  font-family: var(--wr-font-family-base);
+  font-weight: 600;
+  font-size: var(--wr-text-xs);
+  letter-spacing: var(--wr-table-head-letter-spacing, var(--wr-tracking-normal));
+  text-transform: var(--wr-table-head-transform, none);
+  white-space: nowrap;
+  border-radius: var(--wr-border-radius-sm);
+  box-shadow: 0 8px 12px rgba(var(--wr-color-backdrop-rgb), 0.24);
+  // The preview must track the cursor 1:1 — never animate its transform.
+  transition: none;
+}
+
+// The settle animation after a drop. Same element as the rule above — CDK adds
+// `cdk-drag-animating` to the preview while it flies back to the drop slot — so
+// it must come after it to beat that `transition: none` at equal specificity.
+.cdk-drag-animating.wr-table__th {
+  transition: transform 0.18s var(--wr-ease-out);
+}

package/theme/styles/_colors.scss

@@ -141,7 +141,11 @@ $contrast-light: #ffffff !default;
   // labels / captions / placeholders read consistently. One place each.
   // Only the full-opacity token above is AA-safe for body text; these two are
   // decorative by design (0.85 reaches ~3.5:1, 0.6 ~2.3:1 on a light surface).
-  --wr-color-text-muted: rgba(var(--wr-color-muted-text-rgb), 0.85);
+  // 0.95, not 0.85: the role itself is 5.35:1 on the light surface, but wrapping
+  // it at 0.85 composited to #778291 — 3.90:1, under the AA bar. 0.95 is the
+  // most softening that still clears it (4.81), which leaves this token barely
+  // distinguishable from the flat role it wraps.
+  --wr-color-text-muted: rgba(var(--wr-color-muted-text-rgb), 0.95);
   --wr-color-text-faint: rgba(var(--wr-color-muted-text-rgb), 0.6);
 
   // Neutral gray ramp — a FIXED primitive scale (slate). Each step is a stable
@@ -214,6 +218,44 @@ $contrast-light: #ffffff !default;
     --wr-color-#{$name}-soft-contrast: color-mix(in srgb, var(--wr-color-#{$name}) 62%, var(--wr-color-dark));
     --wr-color-#{$name}-active: rgba(var(--wr-color-#{$name}-rgb), 0.2);
   }
+
+  // `-ink`: the intent used as TEXT on `--wr-color-surface`.
+  //
+  // v10 fixed the opposite direction — `-contrast`, the label ON a filled
+  // intent. The inverse was never covered, and the light theme fails WCAG AA
+  // everywhere an outlined / bordered variant paints the hue as its own label:
+  // warning lands at 1.71:1 against a 4.5 bar, medium 3.10, success 3.33,
+  // danger and info 3.68, secondary 3.99. Dark passes on all of them, because
+  // its bases were retuned lighter for a dark canvas and that happens to be the
+  // accessible direction.
+  //
+  // Same recipe as `-soft-contrast`: mixing toward `--wr-color-dark` darkens in
+  // light and lightens in dark from ONE declaration, because that token itself
+  // flips. The share is per intent rather than uniform — warning has to travel
+  // furthest (a yellow readable on white is not yellow), and forcing every
+  // intent to warning's share would drag primary to near-navy for no reason.
+  // Each is the measured minimum that clears 4.5:1 in BOTH themes on the surface
+  // and on the tag's 6% / 10% tints, with 3pp of headroom.
+  $ink-mix: (
+    primary: 93%,
+    secondary: 80%,
+    success: 72%,
+    warning: 50%,
+    danger: 77%,
+    info: 76%,
+    medium: 69%,
+  );
+
+  @each $name, $share in $ink-mix {
+    --wr-color-#{$name}-ink: color-mix(in srgb, var(--wr-color-#{$name}) #{$share}, var(--wr-color-dark));
+  }
+
+  // `light` is a surface tone by definition — a hair off the page background in
+  // either theme — so there is no darkening that keeps it recognisable AND
+  // readable. It borrows the page's own ink; the border still carries the
+  // intent. `dark` already IS the ink.
+  --wr-color-light-ink: var(--wr-color-on-surface);
+  --wr-color-dark-ink: var(--wr-color-dark);
 }
 
 // Public SCSS list

package/theme/styles/_dark.scss

@@ -38,7 +38,8 @@ $_dark: #e6ebf3;
   // Text
   // Softer than pure-white — easier on the eyes for long reading.
   --wr-color-dark: #{$_dark};
-  --wr-color-dark-rgb: #{color.channel($_dark, 'red')}, #{color.channel($_dark, 'green')}, #{color.channel($_dark, 'blue')};
+  --wr-color-dark-rgb:
+    #{color.channel($_dark, 'red')}, #{color.channel($_dark, 'green')}, #{color.channel($_dark, 'blue')};
   // `*-contrast` values are baked at SCSS compile time from the light
   // palette, so they don't auto-flip when `--wr-color-dark` /
   // `--wr-color-white` are reassigned for dark mode. Tooltip-style
@@ -50,8 +51,16 @@ $_dark: #e6ebf3;
   // palette's near-black ink, so `.wr-btn--dark:hover` painted itself almost
   // black while keeping the near-black `-contrast` text. `dark` is an INK token,
   // so unlike `light` below its shades mean exactly what they say.
-  --wr-color-dark-light: #{color.adjust($_dark, $lightness: 5%)};
-  --wr-color-dark-lighter: #{color.adjust($_dark, $lightness: 10%)};
+  // `color.scale`, not `color.adjust`, for the two lighter steps. In dark mode
+  // `dark` IS the near-white ink (#e6ebf3, L 92.7%), so `adjust(+10%)` asks for
+  // L 102.7% — out of gamut. Sass then cannot emit rgb and falls back to legacy
+  // comma-hsl with an out-of-range lightness, which browsers clamp: the token
+  // silently became pure white instead of a controlled step. `scale` moves a
+  // percentage of the REMAINING headroom, so it approaches white without ever
+  // leaving the gamut. 70% reproduces the previous `-light` to within a rounding
+  // step; 85% is the distinct step beyond it.
+  --wr-color-dark-light: #{color.scale($_dark, $lightness: 70%)};
+  --wr-color-dark-lighter: #{color.scale($_dark, $lightness: 85%)};
   --wr-color-dark-dark: #{color.adjust($_dark, $lightness: -5%)};
   --wr-color-dark-darker: #{color.adjust($_dark, $lightness: -10%)};
 
@@ -63,7 +72,8 @@ $_dark: #e6ebf3;
   // divider on cards / inputs without shouting — matches what Vercel
   // and shadcn ship for the same job.
   --wr-color-light: #{$_light};
-  --wr-color-light-rgb: #{color.channel($_light, 'red')}, #{color.channel($_light, 'green')}, #{color.channel($_light, 'blue')};
+  --wr-color-light-rgb:
+    #{color.channel($_light, 'red')}, #{color.channel($_light, 'green')}, #{color.channel($_light, 'blue')};
   // The baked contrast pairs with the LIGHT value (#cbd5e1 → dark text);
   // the dark surface above needs light text instead.
   --wr-color-light-contrast: #e6ebf3;
@@ -89,7 +99,8 @@ $_dark: #e6ebf3;
   // Lifted from slate-400 → slate-300-ish for better legibility on
   // the deeper canvas.
   --wr-color-medium: #{$_medium};
-  --wr-color-medium-rgb: #{color.channel($_medium, 'red')}, #{color.channel($_medium, 'green')}, #{color.channel($_medium, 'blue')};
+  --wr-color-medium-rgb:
+    #{color.channel($_medium, 'red')}, #{color.channel($_medium, 'green')}, #{color.channel($_medium, 'blue')};
   // This block shipped base + rgb only, so contrast and all four shades still
   // came from the light palette's slate. Ink token, plain shades.
   --wr-color-medium-contrast: #{colors.contrast($_medium)};
@@ -125,7 +136,8 @@ $_dark: #e6ebf3;
     // Re-derived, not inherited: the light-palette token would pair the wrong
     // foreground with a re-tuned base.
     --wr-color-#{$name}-contrast: #{colors.contrast($base)};
-    --wr-color-#{$name}-rgb: #{color.channel($base, 'red')}, #{color.channel($base, 'green')}, #{color.channel($base, 'blue')};
+    --wr-color-#{$name}-rgb:
+      #{color.channel($base, 'red')}, #{color.channel($base, 'green')}, #{color.channel($base, 'blue')};
     --wr-color-#{$name}-light: #{color.adjust($base, $lightness: 5%)};
     --wr-color-#{$name}-lighter: #{color.adjust($base, $lightness: 10%)};
     --wr-color-#{$name}-dark: #{color.adjust($base, $lightness: -5%)};

package/theme/styles/_focus.scss

@@ -37,7 +37,7 @@
 }
 
 // Mention option rows
-.wr-mention__option:focus-visible {
+.wr-mention-panel__option:focus-visible {
   @include focus-ring;
 }
 
@@ -64,13 +64,7 @@
 }
 
 // Stepper step headers
-.wr-stepper__step:focus-visible {
-  @include focus-ring;
-}
-
-// Toast close/copy
-.wr-toast__close:focus-visible,
-.wr-toast__copy:focus-visible {
+.wr-stepper__header:focus-visible {
   @include focus-ring;
 }
 

package/tilt-card/styles/_index.scss

@@ -1,3 +1,8 @@
+// Pull the whole theme so a standalone `@use 'ngwr/<name>'` brings in every
+// design token this stylesheet references. Sass deduplicates `@use` per
+// compilation, so the umbrella sheet still emits the theme only once.
+@use '../../theme/styles' as theme;
+
 // 3D mouse-tilt card. The transform is set imperatively by `[wrTilt]`,
 // so this stylesheet just covers the card chrome + the optional glare
 // overlay that the directive appends when `[glare]="true"`.

package/toast/styles/_index.scss

@@ -1,7 +1,10 @@
 @use '../../theme/styles' as theme;
 
+// `info` mapped to `primary` before the `info` intent existed; alert has used
+// the real intent since it landed, so the same toast and alert read as two
+// different colours for the same meaning.
 $toast-colors: (
-  info: primary,
+  info: info,
   success: success,
   warning: warning,
   danger: danger,
@@ -59,7 +62,7 @@ $toast-colors: (
       width: auto;
       max-width: calc(100% - 2rem);
       transition:
-        transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
+        transform 240ms var(--wr-ease-out),
         opacity 240ms ease,
         box-shadow 240ms ease;
       transform-origin: center top;
@@ -89,7 +92,7 @@ $toast-colors: (
 
   &--stack.wr-toast-host--expanded .wr-toast {
     transition:
-      transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
+      transform 240ms var(--wr-ease-out),
       opacity 240ms ease;
   }
 

package/tour/styles/_index.scss

@@ -0,0 +1,63 @@
+@use '../../theme/styles' as theme;
+
+// The cut-out. A bare box sized to the spotlit element, dimming everything
+// around it with one enormous spread shadow — the target itself is never
+// covered, so it stays readable and clickable.
+.wr-tour__spotlight {
+  position: fixed;
+  z-index: 1000;
+  pointer-events: none;
+  border-radius: var(--wr-border-radius-base);
+  box-shadow: 0 0 0 9999px rgba(var(--wr-color-backdrop-rgb), 0.55);
+  transition:
+    top var(--wr-transition-base),
+    left var(--wr-transition-base),
+    width var(--wr-transition-base),
+    height var(--wr-transition-base);
+}
+
+.wr-tour-popup {
+  display: block;
+  max-width: 20rem;
+  padding: 1rem;
+  background: var(--wr-color-surface);
+  color: var(--wr-color-on-surface);
+  border: 1px solid var(--wr-color-outline);
+  @include theme.smooth-br(var(--wr-border-radius-base));
+  box-shadow: 0 12px 24px rgba(var(--wr-color-backdrop-rgb), 0.24);
+  font-family: var(--wr-font-family-base);
+
+  &__progress {
+    margin: 0 0 0.375rem;
+    font-size: var(--wr-text-xs);
+    color: var(--wr-color-on-surface-muted);
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__title {
+    margin: 0 0 0.375rem;
+    font-size: var(--wr-text-base);
+    font-weight: var(--wr-font-weight-semibold);
+  }
+
+  &__content {
+    margin: 0 0 0.875rem;
+    font-size: var(--wr-text-sm);
+    line-height: var(--wr-leading-normal);
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  &__spacer {
+    flex: 1 1 auto;
+  }
+}
+
+// The popup rides above the cut-out.
+.wr-tour-overlay {
+  z-index: 1001;
+}

package/transfer/styles/_index.scss

@@ -0,0 +1,105 @@
+@use '../../theme/styles' as theme;
+
+.wr-transfer {
+  --wr-transfer-pane-width: 14rem;
+  --wr-transfer-pane-height: 15rem;
+
+  display: flex;
+  align-items: stretch;
+  gap: 0.75rem;
+  font-family: var(--wr-font-family-base);
+  color: var(--wr-color-on-surface);
+
+  &--disabled {
+    opacity: 0.6;
+  }
+
+  &__pane {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 var(--wr-transfer-pane-width);
+    min-width: 0;
+    border: 1px solid var(--wr-color-outline);
+    @include theme.smooth-br(var(--wr-border-radius-base));
+    background: var(--wr-color-surface);
+    overflow: hidden;
+  }
+
+  &__head {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.625rem;
+    border-bottom: 1px solid var(--wr-color-outline);
+    background: rgba(var(--wr-color-outline-rgb), 0.25);
+  }
+
+  &__title {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--wr-text-sm);
+    font-weight: var(--wr-font-weight-medium);
+  }
+
+  &__count {
+    flex: 0 0 auto;
+    font-size: var(--wr-text-xs);
+    color: var(--wr-color-on-surface-muted);
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__search {
+    padding: 0.5rem 0.625rem;
+    border-bottom: 1px solid var(--wr-color-outline);
+  }
+
+  &__list {
+    flex: 1 1 auto;
+    margin: 0;
+    padding: 0.25rem;
+    list-style: none;
+    overflow-y: auto;
+    max-height: var(--wr-transfer-pane-height);
+  }
+
+  &__item {
+    padding: 0.25rem 0.375rem;
+    border-radius: var(--wr-border-radius-sm);
+
+    &:hover {
+      background: var(--wr-color-hover);
+    }
+
+    &--disabled:hover {
+      background: transparent;
+    }
+  }
+
+  &__empty {
+    padding: 1rem 0.375rem;
+    text-align: center;
+    font-size: var(--wr-text-sm);
+    color: var(--wr-color-on-surface-muted);
+  }
+
+  &__actions {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0.5rem;
+    flex: 0 0 auto;
+  }
+
+  &__move .wr-icon__svg {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  // No container query here on purpose: `@container` only styles DESCENDANTS, so
+  // a rule that reflows `.wr-transfer` itself could never match its own query.
+  // Doing it properly means the house `responsive` opt-in modifier (a wrapper
+  // that establishes the container) — not yet shipped for this component.
+}

package/types/ngwr-alert.d.ts

@@ -23,6 +23,9 @@ type WrAlertType = 'info' | 'success' | 'warning' | 'danger' | 'neutral' | 'offl
  * @see https://ngwr.dev/reference/components/alert
  */
 declare class WrAlert {
+    /** Accessible name. Falls back to `alert.close`, then `'Close alert'`. */
+    readonly closeLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedCloseLabel: _angular_core.Signal<string>;
     /**
      * Optional headline shown at the top of the alert.
      *
@@ -71,7 +74,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": 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>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrAlert, "wr-alert", never, { "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "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-avatar.d.ts

@@ -87,4 +87,4 @@ declare class WrAvatar {
 }
 
 export { WrAvatar };
-export type { WrAvatarSize };
+export type { WrAvatarShape, WrAvatarSize };

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

@@ -20,8 +20,9 @@ declare class WrBackTop {
     readonly visibilityThreshold: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Pixel offset subtracted from the scroll target — for sticky headers. @default 0 */
     readonly offset: _angular_core.InputSignalWithTransform<number, unknown>;
-    /** Accessible label for the button. @default 'Back to top' */
-    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Accessible label for the button. Falls back to `backTop.label`, then `'Back to top'`. */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedAriaLabel: _angular_core.Signal<string>;
     protected readonly visible: _angular_core.WritableSignal<boolean>;
     private readonly scroll;
     private readonly platform;

package/types/ngwr-badge.d.ts

@@ -155,4 +155,4 @@ declare class WrTag {
 }
 
 export { WrBadge, WrTag };
-export type { WrBadgeSize, WrTagIconPosition };
+export type { WrBadgeShape, WrBadgeSize, WrTagIconPosition };

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

@@ -50,7 +50,6 @@ declare class WrBorderGlow {
     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>>;

package/types/ngwr-carousel.d.ts

@@ -26,6 +26,15 @@ declare class WrCarouselSlide {
  */
 declare class WrCarousel {
     /** Active slide index. Two-way bindable. @default 0 */
+    /** Accessible name of the previous-slide button. Falls back to `carousel.prev`. */
+    readonly prevLabel: _angular_core.InputSignal<string | null>;
+    /** Accessible name of the next-slide button. Falls back to `carousel.next`. */
+    readonly nextLabel: _angular_core.InputSignal<string | null>;
+    /** Accessible name of the dot group. Falls back to `carousel.pagination`. */
+    readonly paginationLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedPrevLabel: _angular_core.Signal<string>;
+    protected readonly resolvedNextLabel: _angular_core.Signal<string>;
+    protected readonly resolvedPaginationLabel: _angular_core.Signal<string>;
     readonly active: _angular_core.ModelSignal<number>;
     /** Show prev / next arrow buttons. @default true */
     readonly showArrows: _angular_core.InputSignalWithTransform<boolean, any>;
@@ -58,7 +67,7 @@ declare class WrCarousel {
     protected onSwipeMove(event: TouchEvent): void;
     protected onSwipeEnd(event: TouchEvent, viewport: HTMLElement): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCarousel, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCarousel, "wr-carousel", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "showArrows": { "alias": "showArrows"; "required": false; "isSignal": true; }; "showDots": { "alias": "showDots"; "required": false; "isSignal": true; }; "autoplay": { "alias": "autoplay"; "required": false; "isSignal": true; }; "intervalMs": { "alias": "intervalMs"; "required": false; "isSignal": true; }; "loop": { "alias": "loop"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; }, ["slides"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCarousel, "wr-carousel", never, { "prevLabel": { "alias": "prevLabel"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "paginationLabel": { "alias": "paginationLabel"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "showArrows": { "alias": "showArrows"; "required": false; "isSignal": true; }; "showDots": { "alias": "showDots"; "required": false; "isSignal": true; }; "autoplay": { "alias": "autoplay"; "required": false; "isSignal": true; }; "intervalMs": { "alias": "intervalMs"; "required": false; "isSignal": true; }; "loop": { "alias": "loop"; "required": false; "isSignal": true; }; }, { "active": "activeChange"; }, ["slides"], ["*"], true, never>;
 }
 
 export { WrCarousel, WrCarouselSlide };

package/types/ngwr-cascader.d.ts

@@ -51,10 +51,21 @@ interface WrCascaderOption<T = string> {
  */
 type WrCascaderSize = 'sm' | 'md' | 'lg';
 declare class WrCascader<T = string> implements FormValueControl<unknown> {
+    /** Accessible name. Falls back to `select.clearSelection`, then `'Clear selection'`. */
+    readonly clearLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedClearLabel: _angular_core.Signal<string>;
     /** 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>;
+    /**
+     * Accessible name of the trigger. Falls back to the placeholder, then to
+     * `select.label` — a `role="combobox"` with nothing selected and no
+     * placeholder otherwise has no name at all.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    private readonly labelText;
+    protected readonly resolvedAriaLabel: _angular_core.Signal<string>;
     /**
      * Disable the cascader. Bound automatically from the field's disabled state
      * when used with `[formField]`.
@@ -115,7 +126,7 @@ declare class WrCascader<T = string> implements FormValueControl<unknown> {
     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; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touch": "touch"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCascader<any>, "wr-cascader", never, { "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "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 };

package/types/ngwr-checkbox.d.ts

@@ -47,6 +47,14 @@ declare class WrCheckbox implements FormCheckboxControl {
      * `value`.)
      */
     readonly checkboxValue: _angular_core.InputSignal<unknown>;
+    /**
+     * Accessible name for a checkbox used WITHOUT projected text — a selection
+     * cell in a table, say. The wrapping `<label>` names the control whenever
+     * content is projected; with none, the native input has no name, and an
+     * `aria-label` put on the host lands on a `<wr-checkbox>` element that no
+     * screen reader ever announces.
+     */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
     /**
      * Checked state — the form value. Bound by `[formField]`, two-way via
      * `[(checked)]`, or `[(ngModel)]`. Ignored inside a `<wr-checkbox-group>`,
@@ -87,7 +95,7 @@ declare class WrCheckbox implements FormCheckboxControl {
     protected onInputChange(event: Event): void;
     protected onInputBlur(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCheckbox, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCheckbox, "wr-checkbox", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "checkboxValue": { "alias": "checkboxValue"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "touch": "touch"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCheckbox, "wr-checkbox", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "checkboxValue": { "alias": "checkboxValue"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "touch": "touch"; }, never, ["*"], true, never>;
 }
 
 /**

package/types/ngwr-command-palette.d.ts

@@ -56,6 +56,9 @@ interface Bucket {
  * @see https://ngwr.dev/reference/components/command-palette
  */
 declare class WrCommandPalette {
+    /** Accessible name. Falls back to `commandPalette.label`, then `'Command palette'`. */
+    readonly paletteLabel: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedPaletteLabel: _angular_core.Signal<string>;
     /** Items shown in the palette. */
     readonly items: _angular_core.InputSignal<readonly WrCommandItem[]>;
     /** Controlled open state (two-way bindable). @default false */
@@ -118,7 +121,7 @@ declare class WrCommandPalette {
     close(): void;
     private commit;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCommandPalette, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCommandPalette, "wr-command-palette", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "closeOnPick": { "alias": "closeOnPick"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "picked": "picked"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCommandPalette, "wr-command-palette", never, { "paletteLabel": { "alias": "paletteLabel"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "closeOnPick": { "alias": "closeOnPick"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "picked": "picked"; }, never, never, true, never>;
 }
 
 export { WrCommandPalette };