ngwr 11.2.0 → 12.0.0

package/segmented/styles/_index.scss

@@ -1,7 +1,7 @@
 @use '../../theme/styles' as theme;
 
 .wr-segmented {
-  --wr-segmented-bg: rgba(var(--wr-color-outline-rgb), 0.4);
+  --wr-segmented-bg: var(--wr-color-fill);
   --wr-segmented-color: var(--wr-color-on-surface);
   --wr-segmented-selected-bg: var(--wr-color-surface);
   --wr-segmented-selected-color: var(--wr-color-on-surface);
@@ -87,6 +87,17 @@
     border: 0;
     // Height = line-height + 2×option-py + 2×track-padding (md → 30px); all scale per size.
     padding: var(--wr-segmented-option-py) 0.75rem;
+    // The track divides into `1fr` columns, so an option's width has nothing to
+    // do with its own text: on a crowded track the label outgrows the option and
+    // paints across the inline padding — which is FINE, the padding is a gutter
+    // for a label that fits rather than a wall for one that doesn't, and giving
+    // the text that room is the only reason six labels still read at 375px. What
+    // is not fine is what happened past that: at 320px "Bottom" ran 4.2px beyond
+    // its own option and overlapped the next segment's word by 8.4px, two labels
+    // printed on top of each other. Clip at the option instead. Note the clip
+    // box is the PADDING box, so the gutter stays available; and an `outline`
+    // is not clipped by its own element, so the focus ring is untouched.
+    overflow: hidden;
     @include theme.smooth-br(var(--wr-segmented-thumb-radius));
     color: var(--wr-segmented-color);
     font: inherit;
@@ -107,7 +118,7 @@
 
     &:disabled {
       cursor: not-allowed;
-      opacity: 0.5;
+      opacity: var(--wr-disabled-opacity);
     }
   }
 
@@ -121,6 +132,6 @@
 
   &--disabled {
     pointer-events: none;
-    opacity: 0.6;
+    opacity: var(--wr-disabled-opacity);
   }
 }

package/select/styles/_index.scss

@@ -41,7 +41,7 @@
 
   &--disabled {
     --wr-select-color: var(--wr-color-on-surface-muted);
-    --wr-select-bg: rgba(var(--wr-color-outline-rgb), 0.35);
+    --wr-select-bg: var(--wr-color-fill);
   }
 
   &__trigger {
@@ -184,6 +184,18 @@
       color: var(--wr-color-text-muted);
     }
 
+    // At `maxItems` the input goes READONLY rather than disabled — it is the
+    // only tab stop in the control, and Backspace here is the way back under the
+    // cap. Nothing painted that, so the field kept the I-beam it inherits from
+    // the trigger and went on inviting text it would refuse. The cursor is the
+    // whole cue on purpose: the field still takes focus and still answers
+    // Backspace, so `not-allowed` would say something false about a control that
+    // is working. Listed before `:disabled`, which matches a readonly-OR-disabled
+    // input too and has to win the tie on source order.
+    &:read-only {
+      cursor: default;
+    }
+
     &:disabled {
       cursor: not-allowed;
     }
@@ -360,7 +372,7 @@
   &--disabled {
     color: var(--wr-color-on-surface-muted);
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: var(--wr-disabled-opacity);
 
     &:hover {
       background: transparent;

package/sidebar/styles/_index.scss

@@ -63,7 +63,7 @@
     &--disabled {
       color: var(--wr-color-on-surface-muted);
       pointer-events: none;
-      opacity: 0.6;
+      opacity: var(--wr-disabled-opacity);
     }
   }
 
@@ -88,7 +88,7 @@
       transition: background var(--wr-transition-base);
 
       &:hover {
-        background: rgba(var(--wr-color-outline-rgb), 0.5);
+        background: var(--wr-color-fill-strong);
 
         .wr-sidebar__icon {
           color: var(--wr-color-primary);
@@ -128,15 +128,17 @@
 
   &__group--collapsed &__chevron {
     // Disclosure affordance, and it IS reading-order: the collapsed chevron
-    // should point at the trailing edge. `rotate` has no logical form, so under
-    // RTL the chevron-down still swings to point right — into the sidebar's
-    // content rather than away from it. Flipping it needs a `[dir]` rule (or a
-    // direction-aware sign from sidebar.ts), which is beyond a property-level
-    // rewrite; same call as the segmented thumb and the button seam.
-    // rtl-ok: transform rotation has no logical equivalent — see above
+    // should point at the trailing edge — physically right in LTR, physically
+    // left under RTL, where the group header's own label sits to its right.
+    // `rotate` has no logical form, so the RTL sign is set by the rule below.
+    // rtl-ok: transform rotation has no logical equivalent — the RTL sign is the rule below
     transform: rotate(-90deg);
   }
 
+  [dir='rtl'] &__group--collapsed &__chevron {
+    transform: rotate(90deg);
+  }
+
   // Child items (inside an expanded group)
   &__list {
     list-style: none;
@@ -215,7 +217,7 @@
     &--disabled {
       color: var(--wr-color-on-surface-muted);
       pointer-events: none;
-      opacity: 0.6;
+      opacity: var(--wr-disabled-opacity);
     }
   }
 
@@ -223,7 +225,7 @@
     flex: 0 0 auto;
     padding: 0.0625rem 0.375rem;
     border-radius: var(--wr-border-radius-pill);
-    background: rgba(var(--wr-color-outline-rgb), 0.6);
+    background: var(--wr-color-fill-strong);
     color: var(--wr-color-on-surface-muted);
     font-size: var(--wr-text-xs);
     font-weight: var(--wr-font-weight-semibold);

package/skills/ngwr/SKILL.md

@@ -5,7 +5,7 @@ description: Build Angular UIs with the ngwr component library (standalone, sign
 
 # ngwr
 
-An Angular 22 UI library: 202 tree-shakable entry points, 115 of them shipping a selector.
+An Angular 22 UI library: 202 tree-shakable entry points, 110 of them shipping a selector.
 Standalone, signals-first, zoneless, `ViewEncapsulation.None`. One runtime
 dependency (`tslib`).
 
@@ -74,7 +74,9 @@ ng g ngwr:provider overlay                           # splices a provider into b
 ```
 
 `--path` is a NAMED option on `ngwr:use`; only the symbol is positional, and
-passing the path bare fails with `Unknown argument`.
+passing the path bare fails with `Unknown argument`. It takes declarables only:
+a service such as `WrDialog` is refused, since the import line would compile and
+the `imports` entry would not — `inject()` it instead.
 
 ### Providers a component cannot work without
 
@@ -87,12 +89,12 @@ cause.
 - `provideWrIcons(lucideIcons({ … })) // from 'ngwr/icon' + 'ngwr/icon/adapters/lucide'`
   — icons resolve by name from a registry you populate
   — needed by: `WrIcon`
-- `provideWrDateAdapter(wrDateFnsAdapter) // from 'ngwr/date-adapter-fns'`
+- `provideWrDateFnsAdapter() // from 'ngwr/date/adapters/fns'`
   — every date mode goes through an adapter; there is no built-in default
   — needed by: `WrDatePicker`, `WrCalendar`, `WrEventCalendar`
-- `provideWrI18n() + provideWrI18nStaticLoader({ en: wrEn }) // from 'ngwr/i18n'`
+- `provideWrI18n() + provideWrI18nStaticLoader({ en: wrEn }) // from 'ngwr/i18n' + 'ngwr/i18n/en'`
   — the pipe and directive read from a catalog you provide
-  — needed by: `WrT`, `WrI18n`
+  — needed by: `WrTPipe`, `WrTDirective`, `WrI18n`
 
 ## Testing
 

package/skills/ngwr/references/catalog.md

@@ -42,7 +42,7 @@ root barrel for components.
 | `ngwr/collapse` | `import { WrCollapse } from 'ngwr/collapse'` | `wr-accordion` `wr-collapse-group` `wr-collapse` |
 | `ngwr/collapse/testing` | `import { WrCollapseGroupHarness } from 'ngwr/collapse/testing'` | — |
 | `ngwr/color-picker` | `import { WrColorPicker } from 'ngwr/color-picker'` | `[wrColorPickerTrigger]` `wr-color-picker` |
-| `ngwr/color-picker/testing` | `import { WrColorPickerHarness } from 'ngwr/color-picker/testing'` | `.wr-color-picker__tabs` |
+| `ngwr/color-picker/testing` | `import { WrColorPickerHarness } from 'ngwr/color-picker/testing'` | — |
 | `ngwr/command-palette` | `import { WrCommandPalette } from 'ngwr/command-palette'` | `wr-command-palette` |
 | `ngwr/command-palette/testing` | `import { WrCommandPaletteGroupHarness } from 'ngwr/command-palette/testing'` | — |
 | `ngwr/compare` | `import { WrCompare } from 'ngwr/compare'` | `wr-compare` |
@@ -52,11 +52,11 @@ root barrel for components.
 | `ngwr/context-menu/testing` | `import { WrContextMenuHarness } from 'ngwr/context-menu/testing'` | — |
 | `ngwr/cookie` | `import { WrCookie } from 'ngwr/cookie'` | — |
 | `ngwr/counter` | `import { WrCounter } from 'ngwr/counter'` | `wr-count-up` `wr-counter` |
-| `ngwr/date-adapter` | `import { WrDateAdapter } from 'ngwr/date-adapter'` | — |
-| `ngwr/date-adapter-fns` | `import { WrDateFnsAdapter } from 'ngwr/date-adapter-fns'` | — |
-| `ngwr/date-adapter-luxon` | `import { WrLuxonAdapter } from 'ngwr/date-adapter-luxon'` | — |
+| `ngwr/date` | `import { WrDateAdapter } from 'ngwr/date'` | — |
 | `ngwr/date-picker` | `import { WrDatePicker } from 'ngwr/date-picker'` | `wr-date-picker` `wr-date-range-picker` |
 | `ngwr/date-picker/testing` | `import { WrDatePickerDayHarness } from 'ngwr/date-picker/testing'` | — |
+| `ngwr/date/adapters/fns` | `import { WrDateFnsAdapter } from 'ngwr/date/adapters/fns'` | — |
+| `ngwr/date/adapters/luxon` | `import { WrLuxonAdapter } from 'ngwr/date/adapters/luxon'` | — |
 | `ngwr/decrypt-text` | `import { WrDecryptText } from 'ngwr/decrypt-text'` | `wr-decrypt-text` |
 | `ngwr/decrypt-text/testing` | `import { WrDecryptTextHarness } from 'ngwr/decrypt-text/testing'` | — |
 | `ngwr/density` | `import { WrDensity } from 'ngwr/density'` | `[wrDensity]` |
@@ -74,7 +74,7 @@ root barrel for components.
 | `ngwr/dropdown/testing` | `import { WrDropdownHarness } from 'ngwr/dropdown/testing'` | — |
 | `ngwr/empty` | `import { WrEmpty } from 'ngwr/empty'` | `wr-empty` |
 | `ngwr/event-calendar` | `import { WrEventCalendar } from 'ngwr/event-calendar'` | `ng-template[wrCalendarEvent]` `wr-event-calendar` |
-| `ngwr/event-calendar/testing` | `import { WrEventCalendarChipHarness } from 'ngwr/event-calendar/testing'` | `.wr-event-calendar__view` |
+| `ngwr/event-calendar/testing` | `import { WrEventCalendarChipHarness } from 'ngwr/event-calendar/testing'` | — |
 | `ngwr/falling-text` | `import { WrFallingText } from 'ngwr/falling-text'` | `wr-falling-text` |
 | `ngwr/falling-text/testing` | `import { WrFallingTextHarness } from 'ngwr/falling-text/testing'` | — |
 | `ngwr/file-upload` | `import { WrFileUpload } from 'ngwr/file-upload'` | `wr-file-upload` |
@@ -127,7 +127,7 @@ root barrel for components.
 | `ngwr/overlay` | `import { WrOutsideClick } from 'ngwr/overlay'` | — |
 | `ngwr/page-header` | `import { WrPageHeader } from 'ngwr/page-header'` | `wr-page-header` |
 | `ngwr/pagination` | `import { WrPagination } from 'ngwr/pagination'` | `wr-pagination` |
-| `ngwr/pagination/testing` | `import { WrPaginationHarness } from 'ngwr/pagination/testing'` | `.wr-pagination__page` `.wr-pagination__nav > wr-btn:not(.wr-pagination__page)` `.wr-pagination__size` `.wr-pagination__page[aria-current="page"]` |
+| `ngwr/pagination/testing` | `import { WrPaginationHarness } from 'ngwr/pagination/testing'` | — |
 | `ngwr/pipes` | `import { WrBytes } from 'ngwr/pipes'` | — |
 | `ngwr/platform` | `import { WrPlatform } from 'ngwr/platform'` | — |
 | `ngwr/popconfirm` | `import { WrPopconfirm } from 'ngwr/popconfirm'` | `wr-popconfirm` `[wrPopconfirm]` |
@@ -187,11 +187,11 @@ root barrel for components.
 | `ngwr/tilt-card` | `import { WrTiltCard } from 'ngwr/tilt-card'` | `wr-tilt-card` `[wrTilt]` |
 | `ngwr/tilt-card/testing` | `import { WrTiltHarness } from 'ngwr/tilt-card/testing'` | — |
 | `ngwr/timeline` | `import { WrTimeline } from 'ngwr/timeline'` | `wr-timeline-item` `wr-timeline` |
-| `ngwr/toast` | `import { WrToast } from 'ngwr/toast'` | `wr-toast-host` `wr-toast` |
+| `ngwr/toast` | `import { WrToast } from 'ngwr/toast'` | — |
 | `ngwr/toast/testing` | `import { WrToastHarness } from 'ngwr/toast/testing'` | — |
 | `ngwr/toolbar` | `import { WrToolbar } from 'ngwr/toolbar'` | `wr-toolbar` |
 | `ngwr/tour` | `import { WrTour } from 'ngwr/tour'` | `wr-tour-popup` |
-| `ngwr/tour/testing` | `import { WrTourHarness } from 'ngwr/tour/testing'` | `.wr-tour-popup__action--next` `.wr-tour-popup__action--skip` `.wr-tour-popup__action--back` |
+| `ngwr/tour/testing` | `import { WrTourHarness } from 'ngwr/tour/testing'` | — |
 | `ngwr/transfer` | `import { WrTransfer } from 'ngwr/transfer'` | `wr-transfer` |
 | `ngwr/transfer/testing` | `import { WrTransferHarness } from 'ngwr/transfer/testing'` | — |
 | `ngwr/tree` | `import { WrTree } from 'ngwr/tree'` | `wr-tree` |
@@ -205,7 +205,7 @@ root barrel for components.
 | `ngwr/virtual-scroll` | `import { WrVirtualScroll } from 'ngwr/virtual-scroll'` | `wr-virtual-scroll` |
 | `ngwr/waves` | `import { WrWaves } from 'ngwr/waves'` | `wr-waves` |
 | `ngwr/waves/testing` | `import { WrWavesHarness } from 'ngwr/waves/testing'` | — |
-| `ngwr/window` | `import { WrWindowManager } from 'ngwr/window'` | `wr-window-container` `wr-window-taskbar` `wr-window` |
+| `ngwr/window` | `import { WrWindowManager } from 'ngwr/window'` | `wr-window-taskbar` |
 | `ngwr/window/testing` | `import { WrWindowHarness } from 'ngwr/window/testing'` | — |
 
 Descriptions and every public export per entry point:

package/skills/ngwr/references/setup.md

@@ -52,20 +52,25 @@ Overlays render into an ngwr-owned container; without it they never appear. Need
 
 Icons resolve by name from a registry you populate. Needed by `WrIcon`.
 
-### `provideWrDateAdapter(wrDateFnsAdapter) // from 'ngwr/date-adapter-fns'`
+### `provideWrDateFnsAdapter() // from 'ngwr/date/adapters/fns'`
 
 Every date mode goes through an adapter; there is no built-in default. Needed by `WrDatePicker`, `WrCalendar`, `WrEventCalendar`.
 
-### `provideWrI18n() + provideWrI18nStaticLoader({ en: wrEn }) // from 'ngwr/i18n'`
+### `provideWrI18n() + provideWrI18nStaticLoader({ en: wrEn }) // from 'ngwr/i18n' + 'ngwr/i18n/en'`
 
-The pipe and directive read from a catalog you provide. Needed by `WrT`, `WrI18n`.
+The pipe and directive read from a catalog you provide. Needed by `WrTPipe`, `WrTDirective`, `WrI18n`.
 
 ## Optional, app-wide
 
 - `provideWrConfig({ button: { size: 'sm' } })` — component defaults. A bound
   value always wins, including a bound `false` over a configured `true`.
-- `provideWrDensity('sm' | 'md' | 'lg' | 'touch')` — one control size for the
-  whole app; `touch` enlarges every hit area at once.
+- `provideWrDensity({ defaultDensity: 'sm' })` — one control size for the whole
+  app; `'sm' | 'md' | 'lg' | 'touch'`. It scales the paddings of the nine
+  stylesheets that read the multipliers — button, input, textarea, select,
+  cascader, tree, list, table, badge/tag — so `touch` grows those together. A
+  control with fixed geometry (checkbox, switch, radio, slider, rating,
+  segmented) does not move; its ≥44px target comes from the `touch-target` mixin
+  under `@media (pointer: coarse)` instead.
 - `provideWrResponsiveOverlays()` — overlays present as bottom sheets under the
   breakpoint (640px by default). Per-component opt-out with `[responsive]="false"`.
 - `provideWrFormErrors({ … })` — one place for validation copy; `<wr-form-field>`

package/slider/styles/_index.scss

@@ -89,6 +89,6 @@
     --wr-slider-thumb-border: var(--wr-color-on-surface-muted);
     --wr-slider-fill: var(--wr-color-on-surface-muted);
     pointer-events: none;
-    opacity: 0.6;
+    opacity: var(--wr-disabled-opacity);
   }
 }

package/speed-dial/styles/_index.scss

@@ -48,7 +48,7 @@
 
     &:disabled {
       cursor: not-allowed;
-      opacity: 0.6;
+      opacity: var(--wr-disabled-opacity);
     }
   }
 

package/stepper/styles/_index.scss

@@ -41,7 +41,7 @@
     min-width: 0;
 
     &--disabled {
-      opacity: 0.5;
+      opacity: var(--wr-disabled-opacity);
     }
   }
 
@@ -156,7 +156,14 @@
     min-width: 0;
     min-height: 1.25rem;
     height: auto;
-    margin: 0.25rem 0 0.25rem calc(var(--wr-stepper-indicator-size) / 2);
+    // Logical, not `margin: … 0 … calc(…)`: `width` above is definite, so the
+    // `align-self: stretch` below is inapplicable and the thread is placed at
+    // the cross START — where the INLINE-start margin alone offsets it. A
+    // physical `margin-left` is therefore the TRAILING side under `dir="rtl"`,
+    // and the line paints flush against the row's right edge, half an indicator
+    // (14px) clear of every circle it is supposed to join.
+    margin-block: 0.25rem;
+    margin-inline: calc(var(--wr-stepper-indicator-size) / 2) 0;
     align-self: stretch;
     flex: 0 0 auto;
   }
@@ -191,7 +198,9 @@
     min-width: 0;
     min-height: 1.25rem;
     height: auto;
-    margin: 0.25rem 0 0.25rem calc(var(--wr-stepper-indicator-size) / 2);
+    // Logical for the same reason as the `--vertical` rule above.
+    margin-block: 0.25rem;
+    margin-inline: calc(var(--wr-stepper-indicator-size) / 2) 0;
     align-self: stretch;
     flex: 0 0 auto;
   }

package/switch/styles/_index.scss

@@ -38,7 +38,7 @@
     white-space: nowrap;
 
     &:focus-visible + .wr-switch__track {
-      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.25);
+      @include theme.focus-ring;
     }
   }
 
@@ -98,6 +98,6 @@
   &--disabled {
     --wr-switch-color: var(--wr-color-on-surface-muted);
     pointer-events: none;
-    opacity: 0.6;
+    opacity: var(--wr-disabled-opacity);
   }
 }

package/table/styles/_index.scss

@@ -3,8 +3,8 @@
 .wr-table {
   --wr-table-bg: var(--wr-color-surface);
   --wr-table-border: var(--wr-color-outline);
-  --wr-table-head-bg: rgba(var(--wr-color-outline-rgb), 0.25);
-  --wr-table-row-hover: rgba(var(--wr-color-outline-rgb), 0.15);
+  --wr-table-head-bg: var(--wr-color-fill);
+  --wr-table-row-hover: var(--wr-color-fill-subtle);
   // Head casing. The library renders column titles as the author wrote them —
   // forcing `uppercase` mutates their content, and a header written "ID" or
   // "created at" is the consumer's decision to make, not ours. Both halves stay
@@ -188,6 +188,15 @@
     transform: rotate(90deg);
   }
 
+  // The glyph is a chevron-RIGHT, so a closed row points into its own content
+  // under `dir="rtl"` instead of at the direction the children will indent.
+  // Turn it around with the tree, the way the cascader's branch arrow does.
+  // Scoped to the CLOSED state deliberately: `scaleX(-1)` composed over the open
+  // state's `rotate(90deg)` resolves to "up", not "down".
+  [dir='rtl'] &__tree-toggle:not(.wr-table__tree-toggle--open) &__tree-icon {
+    transform: scaleX(-1);
+  }
+
   // 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.
@@ -255,9 +264,14 @@
     transform: rotate(90deg);
   }
 
+  // Same chevron-right, same mirror — closed state only. See `__tree-icon` above.
+  [dir='rtl'] &__expand-btn:not(.wr-table__expand-btn--open) &__expand-icon {
+    transform: scaleX(-1);
+  }
+
   &__detail-row > &__detail {
     padding: 0.875rem 1rem;
-    background: rgba(var(--wr-color-outline-rgb), 0.08);
+    background: var(--wr-color-fill-subtle);
     border-bottom: 1px solid var(--wr-table-border);
   }
 
@@ -322,21 +336,36 @@
   }
 
   // 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.
+  // no logical form — its offset is always physical — while the cell it belongs
+  // to is anchored by `[style.inset-inline-start.px]` / `[style.inset-inline-end.px]`
+  // in table.html, written from `leftPin()` / `rightPin()`. The shadow leans the
+  // way the offset pins, so the sign has to be set per direction by hand.
   &__th--pin-edge-left,
   &__td--pin-edge-left {
-    // rtl-ok: physical offset matching the physical `left` pin set by the component
+    // rtl-ok: `box-shadow` has no logical form; the RTL sign is set explicitly below
     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
+    // rtl-ok: `box-shadow` has no logical form; the RTL sign is set explicitly below
+    box-shadow: -0.375rem 0 0.375rem -0.25rem rgba(0, 0, 0, 0.18);
+  }
+
+  // Under `dir="rtl"` the start-pinned group sits at the physical right and the
+  // end-pinned group at the physical left, so both shadows point the other way.
+  [dir='rtl'] &__th--pin-edge-left,
+  [dir='rtl'] &__td--pin-edge-left {
+    // rtl-ok: this IS the RTL sign for the rule above
     box-shadow: -0.375rem 0 0.375rem -0.25rem rgba(0, 0, 0, 0.18);
   }
 
+  [dir='rtl'] &__th--pin-edge-right,
+  [dir='rtl'] &__td--pin-edge-right {
+    // rtl-ok: this IS the RTL sign for the rule above
+    box-shadow: 0.375rem 0 0.375rem -0.25rem rgba(0, 0, 0, 0.18);
+  }
+
   &__th-inner {
     display: inline-flex;
     align-items: center;
@@ -393,10 +422,15 @@
     backdrop-filter: blur(2px);
     // Above the pinned sticky cells (th z-index 2), so loading veils them too.
     z-index: 3;
+    // A positioned box over the whole table swallowed every click while leaving
+    // the keyboard untouched — sort headers, row checkboxes and the pager all
+    // stayed operable by Tab + Enter. The veil is a marker (the host carries
+    // `aria-busy`), not a shield, so it stops eating the pointer too.
+    pointer-events: none;
   }
 
   // --- Row grouping ---------------------------------------------------------
-  --wr-table-group-bg: rgba(var(--wr-color-outline-rgb), 0.18);
+  --wr-table-group-bg: var(--wr-color-fill-subtle);
 
   &__group-cell {
     // NOTE: never add `overflow` here — the inner box below is `position: sticky`
@@ -451,6 +485,14 @@
     transform: none; // collapsed — chevron points right
   }
 
+  // …which is the wrong way round under `dir="rtl"`, where the label the arrow
+  // discloses sits to its left. Mirror the collapsed state only — the expanded
+  // one already points down, and `scaleX(-1)` over its `rotate(90deg)` would
+  // point it up. See `__tree-icon` above.
+  [dir='rtl'] &__group-row--collapsed &__group-icon {
+    transform: scaleX(-1);
+  }
+
   &__group-label {
     // Cap intrinsic width: in the default (auto) layout a colspan cell's
     // min-content is spread across columns, so an ellipsizing shrinkable label
@@ -465,7 +507,14 @@
     flex: 0 0 auto;
     padding: 0 0.375rem;
     border-radius: var(--wr-border-radius-pill);
-    background: rgba(var(--wr-color-outline-rgb), 0.5);
+    // `-subtle`, not `-strong`: this chip is the SECOND tint in the stack — it
+    // sits on the group row, which already paints `--wr-table-group-bg`
+    // (`-fill-subtle`) over the table's own surface. At `-strong` the pair
+    // composited to #dee5ed, and `--wr-color-on-surface-muted` is calibrated
+    // against the plain surface (5.35:1) and the lightest one the library
+    // paints (4.63:1) — on that composite it fell to 4.21:1, under AA. The same
+    // double-tint trap the event-calendar header comment records.
+    background: var(--wr-color-fill-subtle);
     color: var(--wr-color-on-surface-muted);
     font-size: var(--wr-text-xs);
     font-weight: 500;
@@ -784,7 +833,7 @@
     cursor: pointer;
 
     &:hover {
-      background: rgba(var(--wr-color-outline-rgb), 0.35);
+      background: var(--wr-color-fill);
     }
   }
 
@@ -853,7 +902,7 @@
   // 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));
+  background: var(--wr-table-head-bg, var(--wr-color-fill));
   color: var(--wr-color-on-surface-muted);
   font-family: var(--wr-font-family-base);
   font-weight: 600;

package/tabs/styles/_index.scss

@@ -113,7 +113,7 @@
 
     &--disabled,
     &:disabled {
-      opacity: 0.5;
+      opacity: var(--wr-disabled-opacity);
       cursor: not-allowed;
     }
   }

package/textarea/styles/_index.scss

@@ -33,7 +33,7 @@
 
   &--disabled {
     --wr-textarea-color: var(--wr-color-on-surface-muted);
-    --wr-textarea-bg: rgba(var(--wr-color-outline-rgb), 0.35);
+    --wr-textarea-bg: var(--wr-color-fill);
     cursor: not-allowed;
   }