ngwr 10.2.1 → 11.0.0

package/slider/styles/_index.scss

@@ -38,6 +38,11 @@
     top: 50%;
     width: var(--wr-slider-thumb-size);
     height: var(--wr-slider-thumb-size);
+    // The inline half of the centring pair follows the inset it centres:
+    // `slider.html` positions the thumb with `inset-inline-start`, which is the
+    // RIGHT edge under `dir="rtl"`, so a fixed `-50%` would drag the thumb — and
+    // the 44px tap area pinned to it — a whole thumb-width past its own value.
+    // The block half is symmetric and stays put.
     transform: translate(-50%, -50%);
     appearance: none;
     background: var(--wr-slider-thumb);
@@ -60,6 +65,16 @@
       cursor: grabbing;
       transform: translate(-50%, -50%) scale(1.1);
     }
+
+    // Mirrored last, and with the `:active` pair spelled out, so the RTL rules
+    // outrank the LTR ones they replace at every state.
+    [dir='rtl'] & {
+      transform: translate(50%, -50%);
+
+      &:active {
+        transform: translate(50%, -50%) scale(1.1);
+      }
+    }
   }
 
   &__label {

package/speed-dial/styles/_index.scss

@@ -19,9 +19,14 @@
     padding-top: env(safe-area-inset-top);
   }
   &--safe-area.wr-speed-dial--left {
+    // Pads toward the physical fan direction below, and
+    // `env(safe-area-inset-right)` names the device's own edge — it does not
+    // flip with direction, so it has to stay on the side it describes.
+    // rtl-ok: physical fan direction, physical `env()` inset
     padding-right: env(safe-area-inset-right);
   }
   &--safe-area.wr-speed-dial--right {
+    // rtl-ok: same pair as above — physical fan direction, physical inset.
     padding-left: env(safe-area-inset-left);
   }
 
@@ -90,11 +95,13 @@
   &--up {
     .wr-speed-dial__actions {
       bottom: 100%;
+      // rtl-ok: centred with a physical translateX, so the pair must stay physical
       left: 50%;
       transform: translateX(-50%);
     }
     .wr-speed-dial__action-wrap {
       bottom: 0;
+      // rtl-ok: centred with a physical translate(-50%, …), so the pair must stay physical
       left: 50%;
       transform: translate(-50%, 0.5rem);
     }
@@ -107,11 +114,13 @@
   &--down {
     .wr-speed-dial__actions {
       top: 100%;
+      // rtl-ok: centred with a physical translateX, so the pair must stay physical
       left: 50%;
       transform: translateX(-50%);
     }
     .wr-speed-dial__action-wrap {
       top: 0;
+      // rtl-ok: centred with a physical translate(-50%, …), so the pair must stay physical
       left: 50%;
       transform: translate(-50%, -0.5rem);
     }
@@ -123,11 +132,18 @@
 
   &--left {
     .wr-speed-dial__actions {
+      // The anchor and the fan offset are one pair — the actions travel on a
+      // physical `translateX` (`translate(calc(-1 * $offset), -50%)` below,
+      // which no logical property can mirror). Flip only the anchor and the
+      // dial fans back over its own trigger in RTL. A direction-aware fan is a
+      // TS/`Directionality` change, out of scope for this CSS sweep.
+      // rtl-ok: anchor paired with a physical translateX fan
       right: 100%;
       top: 50%;
       transform: translateY(-50%);
     }
     .wr-speed-dial__action-wrap {
+      // rtl-ok: same anchor/transform pair as above.
       right: 0;
       top: 50%;
       transform: translate(0.5rem, -50%);
@@ -140,11 +156,15 @@
 
   &--right {
     .wr-speed-dial__actions {
+      // Anchor paired with the physical `translate($offset, -50%)` fan below —
+      // see `--left` for why converting one half breaks the other.
+      // rtl-ok: anchor paired with a physical translateX fan
       left: 100%;
       top: 50%;
       transform: translateY(-50%);
     }
     .wr-speed-dial__action-wrap {
+      // rtl-ok: same anchor/transform pair as above.
       left: 0;
       top: 50%;
       transform: translate(-0.5rem, -50%);

package/split-text/styles/_index.scss

@@ -9,6 +9,19 @@
   overflow-wrap: break-word;
   will-change: transform, opacity;
 
+  // Same shape as `wr-rotating-text`: the animated pieces are per-character
+  // spans, which a screen reader may read out one letter at a time, so the real
+  // string is carried once here and the pieces are taken out of the tree.
+  &__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
   &__piece {
     display: inline-block;
     will-change: transform, opacity;

package/star-border/styles/_index.scss

@@ -39,11 +39,13 @@
 
     &--bottom {
       bottom: -12px;
+      // rtl-ok: the comet's off-screen start mark — `wr-star-border-bottom` sweeps it by `translate(-100%, 0%)`
       right: -250%;
     }
 
     &--top {
       top: -12px;
+      // rtl-ok: the comet's off-screen start mark — `wr-star-border-top` sweeps it by `translate(100%, 0%)`
       left: -250%;
       animation-name: wr-star-border-top;
     }

package/stepper/styles/_index.scss

@@ -60,7 +60,7 @@
     gap: 0.625rem;
     color: var(--wr-color-on-surface);
     cursor: pointer;
-    text-align: left;
+    text-align: start;
     flex: 0 0 auto;
 
     &:disabled {

package/styles/_grid.scss

@@ -18,10 +18,10 @@ $gutter: var(--wr-grid-gutter);
 .container,
 .container-fluid {
   width: 100%;
-  padding-right: calc(#{$gutter} * 0.5);
-  padding-left: calc(#{$gutter} * 0.5);
-  margin-left: auto;
-  margin-right: auto;
+  padding-inline-end: calc(#{$gutter} * 0.5);
+  padding-inline-start: calc(#{$gutter} * 0.5);
+  margin-inline-start: auto;
+  margin-inline-end: auto;
 }
 
 @each $name, $max-width in bp.$container-widths {

package/styles.scss

@@ -73,6 +73,7 @@
 @forward './line-chart/styles';
 @forward './list/styles';
 @forward './loading-bar/styles';
+@forward './markdown/styles';
 @forward './marquee/styles';
 @forward './mention/styles';
 @forward './meter-group/styles';

package/switch/styles/_index.scss

@@ -55,14 +55,16 @@
   &__thumb {
     position: absolute;
     top: 50%;
-    left: calc((var(--wr-switch-track-height) - var(--wr-switch-thumb-size)) / 2);
+    inset-inline-start: calc((var(--wr-switch-track-height) - var(--wr-switch-thumb-size)) / 2);
     transform: translateY(-50%);
     width: var(--wr-switch-thumb-size);
     height: var(--wr-switch-thumb-size);
     background: var(--wr-switch-thumb);
     border-radius: 50%;
     box-shadow: var(--wr-shadow-xs);
-    transition: left var(--wr-transition-base);
+    // Follows the property above — a `transition: left` would no longer name the
+    // property that moves, and the thumb would snap instead of glide.
+    transition: inset-inline-start var(--wr-transition-base);
   }
 
   // Sizes — track, thumb, label font + line-height scale together.
@@ -86,7 +88,7 @@
     --wr-switch-bg: var(--wr-switch-bg-checked);
 
     .wr-switch__thumb {
-      left: calc(
+      inset-inline-start: calc(
         var(--wr-switch-track-width) - var(--wr-switch-thumb-size) -
           ((var(--wr-switch-track-height) - var(--wr-switch-thumb-size)) / 2)
       );

package/table/styles/_index.scss

@@ -54,7 +54,7 @@
   &__th,
   &__td {
     padding: calc(0.625rem * var(--wr-density-y, 1)) calc(0.875rem * var(--wr-density-x, 1));
-    text-align: left;
+    text-align: start;
     vertical-align: middle;
     border-bottom: 1px solid var(--wr-table-border);
   }
@@ -91,7 +91,11 @@
   &__resize-handle {
     position: absolute;
     top: 0;
-    right: 0;
+    // The grab edge is the side a growing width extends toward, and `table.ts`
+    // now signs that travel from `Directionality` (`resizeDelta()`): rightward
+    // in LTR, leftward in RTL. The two are a pair — flipping one without the
+    // other leaves the grip standing still while the column resizes.
+    inset-inline-end: 0;
     z-index: 1;
     width: 0.5rem;
     height: 100%;
@@ -103,7 +107,9 @@
       content: '';
       position: absolute;
       inset: 20% 0.1875rem;
-      left: auto;
+      // Cancels the inline-START inset so the grip bar hugs the handle's own
+      // grab edge, whichever physical side that lands on.
+      inset-inline-start: auto;
       width: 2px;
       border-radius: 1px;
       background: var(--wr-color-outline);
@@ -315,14 +321,19 @@
     background-image: linear-gradient(var(--wr-table-row-hover), var(--wr-table-row-hover));
   }
 
-  // Separating shadow on the inner edge of each pinned group.
+  // Separating shadow on the inner edge of each pinned group. `box-shadow` has
+  // no logical form — its offset is always physical — and the cell it belongs to
+  // is anchored by `[style.left.px]` / `[style.right.px]` in table.html, written
+  // from `leftPin()` / `rightPin()`. The shadow leans the way the offset pins.
   &__th--pin-edge-left,
   &__td--pin-edge-left {
+    // rtl-ok: physical offset matching the physical `left` pin set by the component
     box-shadow: 0.375rem 0 0.375rem -0.25rem rgba(0, 0, 0, 0.18);
   }
 
   &__th--pin-edge-right,
   &__td--pin-edge-right {
+    // rtl-ok: physical offset matching the physical `right` pin set by the component
     box-shadow: -0.375rem 0 0.375rem -0.25rem rgba(0, 0, 0, 0.18);
   }
 
@@ -398,10 +409,10 @@
   }
 
   // The band cell is full table width, so a sticky inline box inside it rides
-  // horizontal scroll and keeps the label at the left edge. No measurement.
+  // horizontal scroll and keeps the label at the leading edge. No measurement.
   &__group-inner {
     position: sticky;
-    left: 0;
+    inset-inline-start: 0;
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
@@ -586,7 +597,7 @@
     gap: 1rem;
     padding: 0.25rem 0.875rem;
     border-bottom: 0;
-    text-align: right;
+    text-align: end;
   }
 
   .wr-table--responsive .wr-table__td::before {
@@ -600,7 +611,7 @@
     // so a consumer who opted out still got capitals on mobile.
     letter-spacing: var(--wr-table-head-letter-spacing);
     text-transform: var(--wr-table-head-transform);
-    text-align: left;
+    text-align: start;
     white-space: nowrap;
   }
 
@@ -653,7 +664,7 @@
 
   .wr-table--responsive .wr-table__group-toggle {
     flex: 1 1 auto;
-    text-align: left;
+    text-align: start;
   }
 
   // Per-group subtotals don't translate to cards either — hide like the grand footer.
@@ -769,7 +780,7 @@
     color: var(--wr-color-on-surface);
     font: inherit;
     font-size: var(--wr-text-sm);
-    text-align: left;
+    text-align: start;
     cursor: pointer;
 
     &:hover {
@@ -817,7 +828,7 @@
     font: inherit;
     font-size: var(--wr-text-sm);
     cursor: pointer;
-    text-align: left;
+    text-align: start;
 
     &:hover {
       background: var(--wr-color-primary-soft);

package/tabs/styles/_index.scss

@@ -57,13 +57,23 @@
     --wr-tabs-fade: 1.5rem;
     --wr-tabs-fade-start: 0px;
     --wr-tabs-fade-end: 0px;
+    // A gradient has no logical direction keyword, so the axis is a variable the
+    // RTL rule below turns around. The two stops are LOGICAL — `updateFades()`
+    // measures the distance from the inline start — and the inline start is the
+    // right edge under `dir="rtl"`, so the gradient has to run the other way for
+    // the fade to land on the edge that still has tabs behind it.
+    --wr-tabs-fade-axis: to right;
     mask-image: linear-gradient(
-      to right,
+      var(--wr-tabs-fade-axis),
       transparent 0,
       #000 var(--wr-tabs-fade-start),
       #000 calc(100% - var(--wr-tabs-fade-end)),
       transparent 100%
     );
+
+    [dir='rtl'] & {
+      --wr-tabs-fade-axis: to left;
+    }
   }
 
   &--fade-start &__strip {

package/textarea/styles/_index.scss

@@ -94,6 +94,11 @@
   // cursor follow the `resize` direction.
   &__resize {
     position: absolute;
+    // `textarea.ts` starts the drag from `event.clientX` and applies
+    // `startWidth + (clientX - startX)`, so the grip has to sit on the physical
+    // side a growing width extends toward. Flip it only together with that sign,
+    // once the drag maths itself reads `Directionality`.
+    // rtl-ok: paired with the physical clientX drag maths in textarea.ts
     right: 0.25rem;
     bottom: 0.25rem;
     display: inline-flex;

package/theme/styles/_colors.scss

@@ -9,15 +9,27 @@
 //     $base-colors: (primary: #...)
 //   );
 
+// Five intents are deliberately deeper than their "brand" tone, and the reason is
+// arithmetic rather than taste. `_contrast()` picks whichever of black / white
+// scores HIGHER against the fill, and those two are equal at √21 ≈ 4.58 — so an
+// intent lighter than that gets a black label whatever anyone prefers. At the old
+// tones white measured 3.10–3.99 (below AA) and black 5.26–6.77, so black won on
+// merit and the labels read muddy on a saturated mid-tone.
+//
+// Each of the five now sits just past the flip: white 4.60–4.64, black 4.52–4.56.
+// The shift is 8–20% of the previous tone. `warning` and `light` are NOT in that
+// set and cannot be — white needs `#906900` on warning, which is brown, not a
+// warning colour; those two keep their black label, which is correct at 12.28 and
+// 14.14.
 $base-colors: (
   primary: #3969e2,
-  secondary: #f51c6a,
-  success: #00a400,
+  secondary: #e21a62,
+  success: #008800,
   warning: #ffba00,
-  danger: #fa383e,
-  info: #3b82f6,
+  danger: #dc3137,
+  info: #3472d9,
   light: #cbd5e1,
-  medium: #8594a4,
+  medium: #6a7683,
   dark: #0f172a,
 ) !default;
 
@@ -139,9 +151,10 @@ $contrast-light: #ffffff !default;
   // Muted TEXT, deliberately its own token rather than an alias of the `medium`
   // intent. The two roles pull in opposite directions and cannot share a value:
   // as text it needs >= 4.5:1 against the lightest surface (#ebeff4), while as a
-  // button fill it carries dark text and needs >= 4.5:1 the other way. The best
-  // candidate for either fails the other — the window closes around #6b7a8a
-  // (3.81 as text, 4.11 as fill). Aliasing them left secondary text at 2.69:1.
+  // fill it has to clear the bar the other way, against its own label. v11 pulled
+  // them further apart rather than closer — the `medium` fill went deeper
+  // (#6a7683, whose label is now white at 4.63) while this token stayed where a
+  // light canvas needs it. Aliasing them left secondary text at 2.69:1.
   --wr-color-muted-text: #5f6c7d;
   --wr-color-muted-text-rgb: 95, 108, 125;
 
@@ -230,11 +243,14 @@ $contrast-light: #ffffff !default;
   // `-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
+  // intent. The inverse was never covered: an outlined / bordered variant paints
+  // the hue as its own label, and on a TINTED surface the light theme still
+  // fails there. Measured on #ebeff4, the lightest surface, after v11 deepened
+  // five of them: medium 4.01, success 4.02, danger 4.01, info and secondary
+  // 3.99 — all under the 4.5 bar — and warning 1.48, which nothing rescues.
+  // (On pure white those five now clear it at 4.61–4.64; the tint is what makes
+  // `-ink` necessary rather than optional.) Dark passes on all of them, because
+  // its bases are 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

package/theme/styles/_dark.scss

@@ -13,10 +13,15 @@
 // FULL symmetric shade set — the hand blocks used to ship only base+rgb,
 // leaving -light/-dark/-lighter/-darker baked from the LIGHT palette.
 // (primary keeps its hand-tuned block; info stays its light values.)
+// `success` and `danger` are past the black/white flip point here too — see the
+// note above `$base-colors`. The dark canvas wants a LIGHTER fill, so the deepening
+// costs more here than in the light theme (33% and 21%), and that is the trade:
+// a duller green, in exchange for a label that is legible rather than muddy.
+// `warning` stays as it is — white cannot reach it at any tone worth shipping.
 $dark-intents: (
-  success: #34c759,
+  success: #23863c,
   warning: #ffcc33,
-  danger: #ff5c5c,
+  danger: #ca4949,
 );
 
 // The surface / ink bases below are re-tuned for the dark canvas too, but they
@@ -25,7 +30,10 @@ $dark-intents: (
 // the shade derivations read from the value that actually ships, instead of
 // being re-typed next to it.
 $_light: #262f44;
-$_medium: #9aa6b8;
+// The medium FILL, past the flip point. Not the muted-text role: that reads from
+// `--wr-color-muted-text` below, which stays #9aa6b8 — it is text on the canvas,
+// where lighter is what makes it legible, the opposite direction from a fill.
+$_medium: #6d7682;
 $_dark: #e6ebf3;
 
 [data-theme='dark'] {

package/theme/styles/_mixins.scss

@@ -93,6 +93,9 @@
       content: '';
       position: absolute;
       top: 50%;
+      // rtl-ok: centred with a physical `translate(-50%, -50%)` below, so the
+      // pair must stay physical — mirroring only this half would shift the
+      // hit area off the control by its own width under `dir="rtl"`.
       left: 50%;
       width: 100%;
       height: 100%;

package/timeline/styles/_index.scss

@@ -88,7 +88,7 @@
     &::before {
       content: '';
       position: absolute;
-      left: 0.34375rem;
+      inset-inline-start: 0.34375rem;
       top: 1rem;
       bottom: -1.25rem;
       width: 1.5px;
@@ -119,7 +119,7 @@
       position: absolute;
       // Dot centre: margin-top 0.125rem + half of the 0.75rem dot = 0.5rem.
       top: 0.5rem;
-      left: 50%;
+      inset-inline-start: 50%;
       width: calc(100% + 2rem);
       height: 1.5px;
       background: var(--wr-color-outline);

package/toast/styles/_index.scss

@@ -26,6 +26,10 @@ $toast-colors: (
   // Safe-area: fold each inset into the matching padding side so toasts clear
   // notches / the home indicator / rounded corners on mobile, whichever edge
   // the host is anchored to. env() is 0 without insets, so desktop stays 1rem.
+  // `env(safe-area-inset-left/right)` report the device's own edges and do NOT
+  // flip with direction, so each inset must stay on the side it describes. The
+  // 1rem base is equal on both sides, so the shorthand reads the same either way.
+  // rtl-ok: physical shorthand carrying physical `env()` insets
   padding: calc(1rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right))
     calc(1rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));
   pointer-events: none;
@@ -57,8 +61,7 @@ $toast-colors: (
     .wr-toast {
       --wr-toast-i: var(--wr-toast-stack-index, 0);
       position: absolute;
-      left: 1rem;
-      right: 1rem;
+      inset-inline: 1rem;
       width: auto;
       max-width: calc(100% - 2rem);
       transition:
@@ -98,31 +101,33 @@ $toast-colors: (
 
   &--top {
     top: 0;
+    // rtl-ok: centred with a physical translateX, so the pair must stay physical
     left: 50%;
     transform: translateX(-50%);
   }
   &--top-start {
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
   }
   &--top-end {
     top: 0;
-    right: 0;
+    inset-inline-end: 0;
   }
   &--bottom {
     bottom: 0;
+    // rtl-ok: centred with a physical translateX, so the pair must stay physical
     left: 50%;
     transform: translateX(-50%);
     flex-direction: column-reverse;
   }
   &--bottom-start {
     bottom: 0;
-    left: 0;
+    inset-inline-start: 0;
     flex-direction: column-reverse;
   }
   &--bottom-end {
     bottom: 0;
-    right: 0;
+    inset-inline-end: 0;
     flex-direction: column-reverse;
   }
 }
@@ -143,7 +148,7 @@ $toast-colors: (
   border: 1px solid var(--wr-toast-border);
   // Capture horizontal swipe-to-dismiss; let vertical scroll pass through.
   touch-action: pan-y;
-  border-left: 3px solid var(--wr-toast-accent);
+  border-inline-start: 3px solid var(--wr-toast-accent);
   @include theme.smooth-br(var(--wr-border-radius-base));
   box-shadow: var(--wr-shadow-overlay);
   font-family: var(--wr-font-family-base);
@@ -201,9 +206,13 @@ $toast-colors: (
   &__progress {
     position: absolute;
     bottom: 0;
-    left: 0;
+    inset-inline-start: 0;
     height: 2px;
     width: 100%;
+    // `transform-origin` has no logical keyword, and the drain is a physical
+    // `scaleX`. Flipping the bar to drain from the reader's start needs a
+    // direction-aware rule, not a property rename.
+    // rtl-ok: origin is one half of a physical scaleX pair
     transform-origin: left;
     background: var(--wr-toast-accent);
     animation: wr-toast-progress linear forwards;

package/toolbar/styles/_index.scss

@@ -51,7 +51,7 @@
 
     &--end {
       flex: 0 0 auto;
-      margin-left: auto;
+      margin-inline-start: auto;
     }
   }
 
@@ -64,7 +64,7 @@
     &::before {
       content: '';
       position: absolute;
-      left: -0.5rem;
+      inset-inline-start: -0.5rem;
       top: 50%;
       transform: translateY(-50%);
       height: 1.25rem;
@@ -82,7 +82,7 @@
   }
 
   .wr-toolbar--responsive .wr-toolbar__zone--end {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
 
   // The vertical hairline dividers are a horizontal-row affordance — drop them

package/tour/styles/_index.scss

@@ -5,7 +5,13 @@
 // covered, so it stays readable and clickable.
 .wr-tour__spotlight {
   position: fixed;
-  z-index: 1000;
+  // Below CDK's `.cdk-overlay-container` (1000), deliberately. Both are fixed
+  // children of `<body>`, so at equal z-index the DOM order decides — and the
+  // service appends a fresh cut-out on every step while the container stays put, so
+  // from the second step on the dimming shadow painted OVER the tour's own card.
+  // `.wr-tour-overlay { z-index: 1001 }` cannot help: it sits on the pane INSIDE the
+  // container, whose own stacking context scopes it.
+  z-index: 999;
   pointer-events: none;
   border-radius: var(--wr-border-radius-base);
   box-shadow: 0 0 0 9999px rgba(var(--wr-color-backdrop-rgb), 0.55);

package/tree/styles/_index.scss

@@ -19,7 +19,7 @@
     align-items: center;
     gap: 0.375rem;
     padding: 0.3125rem 0.5rem;
-    padding-left: calc(0.5rem + var(--wr-tree-depth, 0) * var(--wr-tree-indent));
+    padding-inline-start: calc(0.5rem + var(--wr-tree-depth, 0) * var(--wr-tree-indent));
     border-radius: var(--wr-border-radius-sm);
     cursor: pointer;
     user-select: none;
@@ -156,7 +156,7 @@
     font-size: var(--wr-tree-trigger-font-size);
     line-height: var(--wr-tree-trigger-line-height);
     cursor: pointer;
-    text-align: left;
+    text-align: start;
     transition:
       border-color var(--wr-transition-base),
       box-shadow var(--wr-transition-base);
@@ -243,7 +243,9 @@
     align-items: center;
     gap: 0.125rem;
     max-width: 100%;
-    padding: 0.125rem 0.25rem 0.125rem 0.5rem;
+    // Roomier on the label side, tighter where the remove (×) sits.
+    padding-block: 0.125rem;
+    padding-inline: 0.5rem 0.25rem;
     border-radius: 999px;
     background: var(--wr-color-primary-soft);
     color: var(--wr-color-primary);

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

@@ -60,6 +60,14 @@ declare class WrActionSheet {
     readonly actions: _angular_core.InputSignal<readonly WrActionSheetAction[]>;
     /** Optional bold heading above the rows. */
     readonly title: _angular_core.InputSignal<string>;
+    /**
+     * Name announced for the dialog when there is no visible `title`. Falls back to
+     * `actionSheet.label`, then `'Actions'` — it used to be that English string,
+     * written into the template of a component whose every other string comes from
+     * the caller.
+     */
+    readonly titleFallback: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedTitleFallback: _angular_core.Signal<string>;
     /** Optional muted sub-heading under the title. */
     readonly message: _angular_core.InputSignal<string>;
     /** Fires with the chosen row (never fires on a dismiss). */
@@ -68,7 +76,7 @@ declare class WrActionSheet {
     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>;
+    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; }; "titleFallback": { "alias": "titleFallback"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "action": "action"; }, never, never, true, never>;
 }
 
 export { WrActionSheet };