ngwr 10.2.1 → 11.0.0

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "ngwr",
-  "version": "10.2.1",
+  "version": "11.0.0",
+  "bin": {
+    "ngwr-mcp": "./mcp/server.js"
+  },
   "license": "MIT",
   "description": "Signals-first Angular UI library: 100+ standalone, zoneless-ready components with native Signal Forms, SSR-safe rendering and CSS-variable theming.",
   "author": "Roman Khegay <rk@garuna.dev> (https://garuna.dev)",
@@ -75,31 +78,6 @@
       "types": "./types/ngwr.d.ts",
       "default": "./fesm2022/ngwr.mjs"
     },
-    "./theme": {
-      "sass": "./theme/styles/_index.scss",
-      "types": "./types/ngwr-theme.d.ts",
-      "default": "./fesm2022/ngwr-theme.mjs"
-    },
-    "./breakpoints": {
-      "sass": "./styles/_breakpoints.scss"
-    },
-    "./grid": {
-      "sass": "./styles/_grid.scss"
-    },
-    "./reset": {
-      "sass": "./styles/_reset.scss"
-    },
-    "./animations": {
-      "sass": "./styles/_animations.scss"
-    },
-    "./typography": {
-      "sass": "./typography/styles/_index.scss",
-      "types": "./types/ngwr-typography.d.ts",
-      "default": "./fesm2022/ngwr-typography.mjs"
-    },
-    "./typography-utilities": {
-      "sass": "./styles/_typography.scss"
-    },
     "./action-sheet": {
       "sass": "./action-sheet/styles/_index.scss",
       "types": "./types/ngwr-action-sheet.d.ts",
@@ -120,6 +98,9 @@
       "types": "./types/ngwr-anchor.d.ts",
       "default": "./fesm2022/ngwr-anchor.mjs"
     },
+    "./animations": {
+      "sass": "./styles/_animations.scss"
+    },
     "./aurora": {
       "sass": "./aurora/styles/_index.scss",
       "types": "./types/ngwr-aurora.d.ts",
@@ -160,6 +141,9 @@
       "types": "./types/ngwr-breadcrumbs.d.ts",
       "default": "./fesm2022/ngwr-breadcrumbs.mjs"
     },
+    "./breakpoints": {
+      "sass": "./styles/_breakpoints.scss"
+    },
     "./burger": {
       "sass": "./burger/styles/_index.scss",
       "types": "./types/ngwr-burger.d.ts",
@@ -295,6 +279,11 @@
       "types": "./types/ngwr-empty.d.ts",
       "default": "./fesm2022/ngwr-empty.mjs"
     },
+    "./event-calendar": {
+      "sass": "./event-calendar/styles/_index.scss",
+      "types": "./types/ngwr-event-calendar.d.ts",
+      "default": "./fesm2022/ngwr-event-calendar.mjs"
+    },
     "./falling-text": {
       "sass": "./falling-text/styles/_index.scss",
       "types": "./types/ngwr-falling-text.d.ts",
@@ -325,6 +314,9 @@
       "types": "./types/ngwr-gradient-text.d.ts",
       "default": "./fesm2022/ngwr-gradient-text.mjs"
     },
+    "./grid": {
+      "sass": "./styles/_grid.scss"
+    },
     "./icon": {
       "sass": "./icon/styles/_index.scss",
       "types": "./types/ngwr-icon.d.ts",
@@ -385,6 +377,11 @@
       "types": "./types/ngwr-loading-bar.d.ts",
       "default": "./fesm2022/ngwr-loading-bar.mjs"
     },
+    "./markdown": {
+      "sass": "./markdown/styles/_index.scss",
+      "types": "./types/ngwr-markdown.d.ts",
+      "default": "./fesm2022/ngwr-markdown.mjs"
+    },
     "./marquee": {
       "sass": "./marquee/styles/_index.scss",
       "types": "./types/ngwr-marquee.d.ts",
@@ -450,6 +447,9 @@
       "types": "./types/ngwr-rating.d.ts",
       "default": "./fesm2022/ngwr-rating.mjs"
     },
+    "./reset": {
+      "sass": "./styles/_reset.scss"
+    },
     "./result": {
       "sass": "./result/styles/_index.scss",
       "types": "./types/ngwr-result.d.ts",
@@ -565,6 +565,11 @@
       "types": "./types/ngwr-textarea.d.ts",
       "default": "./fesm2022/ngwr-textarea.mjs"
     },
+    "./theme": {
+      "sass": "./theme/styles/_index.scss",
+      "types": "./types/ngwr-theme.d.ts",
+      "default": "./fesm2022/ngwr-theme.mjs"
+    },
     "./tilt-card": {
       "sass": "./tilt-card/styles/_index.scss",
       "types": "./types/ngwr-tilt-card.d.ts",
@@ -585,6 +590,16 @@
       "types": "./types/ngwr-toolbar.d.ts",
       "default": "./fesm2022/ngwr-toolbar.mjs"
     },
+    "./tour": {
+      "sass": "./tour/styles/_index.scss",
+      "types": "./types/ngwr-tour.d.ts",
+      "default": "./fesm2022/ngwr-tour.mjs"
+    },
+    "./transfer": {
+      "sass": "./transfer/styles/_index.scss",
+      "types": "./types/ngwr-transfer.d.ts",
+      "default": "./fesm2022/ngwr-transfer.mjs"
+    },
     "./tree": {
       "sass": "./tree/styles/_index.scss",
       "types": "./types/ngwr-tree.d.ts",
@@ -595,6 +610,14 @@
       "types": "./types/ngwr-typewriter.d.ts",
       "default": "./fesm2022/ngwr-typewriter.mjs"
     },
+    "./typography": {
+      "sass": "./typography/styles/_index.scss",
+      "types": "./types/ngwr-typography.d.ts",
+      "default": "./fesm2022/ngwr-typography.mjs"
+    },
+    "./typography-utilities": {
+      "sass": "./styles/_typography.scss"
+    },
     "./virtual-scroll": {
       "sass": "./virtual-scroll/styles/_index.scss",
       "types": "./types/ngwr-virtual-scroll.d.ts",
@@ -613,14 +636,46 @@
     "./package.json": {
       "default": "./package.json"
     },
+    "./button/testing": {
+      "types": "./types/ngwr-button-testing.d.ts",
+      "default": "./fesm2022/ngwr-button-testing.mjs"
+    },
+    "./carousel/testing": {
+      "types": "./types/ngwr-carousel-testing.d.ts",
+      "default": "./fesm2022/ngwr-carousel-testing.mjs"
+    },
+    "./cascader/testing": {
+      "types": "./types/ngwr-cascader-testing.d.ts",
+      "default": "./fesm2022/ngwr-cascader-testing.mjs"
+    },
+    "./checkbox/testing": {
+      "types": "./types/ngwr-checkbox-testing.d.ts",
+      "default": "./fesm2022/ngwr-checkbox-testing.mjs"
+    },
     "./clipboard": {
       "types": "./types/ngwr-clipboard.d.ts",
       "default": "./fesm2022/ngwr-clipboard.mjs"
     },
+    "./collapse/testing": {
+      "types": "./types/ngwr-collapse-testing.d.ts",
+      "default": "./fesm2022/ngwr-collapse-testing.mjs"
+    },
+    "./command-palette/testing": {
+      "types": "./types/ngwr-command-palette-testing.d.ts",
+      "default": "./fesm2022/ngwr-command-palette-testing.mjs"
+    },
     "./confetti": {
       "types": "./types/ngwr-confetti.d.ts",
       "default": "./fesm2022/ngwr-confetti.mjs"
     },
+    "./config": {
+      "types": "./types/ngwr-config.d.ts",
+      "default": "./fesm2022/ngwr-config.mjs"
+    },
+    "./context-menu/testing": {
+      "types": "./types/ngwr-context-menu-testing.d.ts",
+      "default": "./fesm2022/ngwr-context-menu-testing.mjs"
+    },
     "./cookie": {
       "types": "./types/ngwr-cookie.d.ts",
       "default": "./fesm2022/ngwr-cookie.mjs"
@@ -637,13 +692,33 @@
       "types": "./types/ngwr-date-adapter-luxon.d.ts",
       "default": "./fesm2022/ngwr-date-adapter-luxon.mjs"
     },
+    "./date-picker/testing": {
+      "types": "./types/ngwr-date-picker-testing.d.ts",
+      "default": "./fesm2022/ngwr-date-picker-testing.mjs"
+    },
+    "./dialog/testing": {
+      "types": "./types/ngwr-dialog-testing.d.ts",
+      "default": "./fesm2022/ngwr-dialog-testing.mjs"
+    },
     "./directives": {
       "types": "./types/ngwr-directives.d.ts",
       "default": "./fesm2022/ngwr-directives.mjs"
     },
-    "./event-calendar": {
-      "types": "./types/ngwr-event-calendar.d.ts",
-      "default": "./fesm2022/ngwr-event-calendar.mjs"
+    "./drawer/testing": {
+      "types": "./types/ngwr-drawer-testing.d.ts",
+      "default": "./fesm2022/ngwr-drawer-testing.mjs"
+    },
+    "./dropdown/testing": {
+      "types": "./types/ngwr-dropdown-testing.d.ts",
+      "default": "./fesm2022/ngwr-dropdown-testing.mjs"
+    },
+    "./file-upload/testing": {
+      "types": "./types/ngwr-file-upload-testing.d.ts",
+      "default": "./fesm2022/ngwr-file-upload-testing.mjs"
+    },
+    "./form/testing": {
+      "types": "./types/ngwr-form-testing.d.ts",
+      "default": "./fesm2022/ngwr-form-testing.mjs"
     },
     "./fuzzy-text": {
       "types": "./types/ngwr-fuzzy-text.d.ts",
@@ -673,14 +748,38 @@
       "types": "./types/ngwr-icon-adapters-lucide.d.ts",
       "default": "./fesm2022/ngwr-icon-adapters-lucide.mjs"
     },
+    "./input-number/testing": {
+      "types": "./types/ngwr-input-number-testing.d.ts",
+      "default": "./fesm2022/ngwr-input-number-testing.mjs"
+    },
+    "./input-otp/testing": {
+      "types": "./types/ngwr-input-otp-testing.d.ts",
+      "default": "./fesm2022/ngwr-input-otp-testing.mjs"
+    },
+    "./input/testing": {
+      "types": "./types/ngwr-input-testing.d.ts",
+      "default": "./fesm2022/ngwr-input-testing.mjs"
+    },
+    "./markdown/testing": {
+      "types": "./types/ngwr-markdown-testing.d.ts",
+      "default": "./fesm2022/ngwr-markdown-testing.mjs"
+    },
     "./media": {
       "types": "./types/ngwr-media.d.ts",
       "default": "./fesm2022/ngwr-media.mjs"
     },
+    "./mention/testing": {
+      "types": "./types/ngwr-mention-testing.d.ts",
+      "default": "./fesm2022/ngwr-mention-testing.mjs"
+    },
     "./meta": {
       "types": "./types/ngwr-meta.d.ts",
       "default": "./fesm2022/ngwr-meta.mjs"
     },
+    "./pagination/testing": {
+      "types": "./types/ngwr-pagination-testing.d.ts",
+      "default": "./fesm2022/ngwr-pagination-testing.mjs"
+    },
     "./pipes": {
       "types": "./types/ngwr-pipes.d.ts",
       "default": "./fesm2022/ngwr-pipes.mjs"
@@ -689,21 +788,73 @@
       "types": "./types/ngwr-platform.d.ts",
       "default": "./fesm2022/ngwr-platform.mjs"
     },
+    "./popconfirm/testing": {
+      "types": "./types/ngwr-popconfirm-testing.d.ts",
+      "default": "./fesm2022/ngwr-popconfirm-testing.mjs"
+    },
+    "./popover/testing": {
+      "types": "./types/ngwr-popover-testing.d.ts",
+      "default": "./fesm2022/ngwr-popover-testing.mjs"
+    },
+    "./radio/testing": {
+      "types": "./types/ngwr-radio-testing.d.ts",
+      "default": "./fesm2022/ngwr-radio-testing.mjs"
+    },
+    "./rating/testing": {
+      "types": "./types/ngwr-rating-testing.d.ts",
+      "default": "./fesm2022/ngwr-rating-testing.mjs"
+    },
     "./scroll": {
       "types": "./types/ngwr-scroll.d.ts",
       "default": "./fesm2022/ngwr-scroll.mjs"
     },
+    "./segmented/testing": {
+      "types": "./types/ngwr-segmented-testing.d.ts",
+      "default": "./fesm2022/ngwr-segmented-testing.mjs"
+    },
+    "./select/testing": {
+      "types": "./types/ngwr-select-testing.d.ts",
+      "default": "./fesm2022/ngwr-select-testing.mjs"
+    },
+    "./slider/testing": {
+      "types": "./types/ngwr-slider-testing.d.ts",
+      "default": "./fesm2022/ngwr-slider-testing.mjs"
+    },
+    "./stepper/testing": {
+      "types": "./types/ngwr-stepper-testing.d.ts",
+      "default": "./fesm2022/ngwr-stepper-testing.mjs"
+    },
     "./storage": {
       "types": "./types/ngwr-storage.d.ts",
       "default": "./fesm2022/ngwr-storage.mjs"
     },
-    "./tour": {
-      "types": "./types/ngwr-tour.d.ts",
-      "default": "./fesm2022/ngwr-tour.mjs"
+    "./switch/testing": {
+      "types": "./types/ngwr-switch-testing.d.ts",
+      "default": "./fesm2022/ngwr-switch-testing.mjs"
     },
-    "./transfer": {
-      "types": "./types/ngwr-transfer.d.ts",
-      "default": "./fesm2022/ngwr-transfer.mjs"
+    "./table/testing": {
+      "types": "./types/ngwr-table-testing.d.ts",
+      "default": "./fesm2022/ngwr-table-testing.mjs"
+    },
+    "./tabs/testing": {
+      "types": "./types/ngwr-tabs-testing.d.ts",
+      "default": "./fesm2022/ngwr-tabs-testing.mjs"
+    },
+    "./textarea/testing": {
+      "types": "./types/ngwr-textarea-testing.d.ts",
+      "default": "./fesm2022/ngwr-textarea-testing.mjs"
+    },
+    "./toast/testing": {
+      "types": "./types/ngwr-toast-testing.d.ts",
+      "default": "./fesm2022/ngwr-toast-testing.mjs"
+    },
+    "./transfer/testing": {
+      "types": "./types/ngwr-transfer-testing.d.ts",
+      "default": "./fesm2022/ngwr-transfer-testing.mjs"
+    },
+    "./tree/testing": {
+      "types": "./types/ngwr-tree-testing.d.ts",
+      "default": "./fesm2022/ngwr-tree-testing.mjs"
     },
     "./utils": {
       "types": "./types/ngwr-utils.d.ts",

package/pagination/styles/_index.scss

@@ -57,8 +57,8 @@
       height: var(--wr-pagination-cell, 2rem);
       padding-top: 0;
       padding-bottom: 0;
-      padding-left: 0.5rem;
-      padding-right: 0.5rem;
+      padding-inline-start: 0.5rem;
+      padding-inline-end: 0.5rem;
     }
   }
 
@@ -115,12 +115,12 @@
     border-radius: 0;
   }
   &--square &__nav .wr-btn:first-child {
-    border-top-left-radius: var(--wr-border-radius-sm);
-    border-bottom-left-radius: var(--wr-border-radius-sm);
+    border-start-start-radius: var(--wr-border-radius-sm);
+    border-end-start-radius: var(--wr-border-radius-sm);
   }
   &--square &__nav .wr-btn:last-child {
-    border-top-right-radius: var(--wr-border-radius-sm);
-    border-bottom-right-radius: var(--wr-border-radius-sm);
+    border-start-end-radius: var(--wr-border-radius-sm);
+    border-end-end-radius: var(--wr-border-radius-sm);
   }
 }
 

package/popover/styles/_index.scss

@@ -71,17 +71,35 @@ $_arrow-placement: (
 );
 
 /// Positions the arrow against `$edge`, offset outwards by `$pull`.
+///
+/// `left` / `right` name the panel edge in LTR terms only. Every side-anchored
+/// and `-start` / `-end` entry in `WR_POPOVER_POSITIONS` is expressed as CDK
+/// `originX: start | end` — plain `top` / `bottom` use `center`, which mirrors
+/// to itself — and CDK resolves start / end against `Directionality`. So under
+/// `dir="rtl"` the panel lands on the mirrored side of the trigger while the
+/// modifier class keeps its requested name (it is set from the `position` input,
+/// and there are no fallback positions to change it), and the arrow has to
+/// travel with the panel. Same for the `-start` / `-end` alignment along a
+/// horizontal edge.
 @mixin _arrow-at($edge, $align, $pull) {
-  #{$edge}: -$pull;
+  @if $edge == left {
+    inset-inline-start: -$pull;
+  } @else if $edge == right {
+    inset-inline-end: -$pull;
+  } @else {
+    #{$edge}: -$pull;
+  }
 
   @if $edge == bottom or $edge == top {
     @if $align == center {
-      left: 50%;
-      margin-left: -$_arrow-half;
+      // Both halves of the centring pair go logical together, so the arrow
+      // stays on the midpoint whichever way the axis runs.
+      inset-inline-start: 50%;
+      margin-inline-start: -$_arrow-half;
     } @else if $align == start {
-      left: $_arrow-inset;
+      inset-inline-start: $_arrow-inset;
     } @else {
-      right: $_arrow-inset;
+      inset-inline-end: $_arrow-inset;
     }
   } @else {
     @if $align == center {
@@ -96,18 +114,30 @@ $_arrow-placement: (
 }
 
 /// The two faces of the rotated square that stay visible outside the panel.
+///
+/// These stay physical, and it is not an oversight. Which two borders paint is
+/// decided by `transform: rotate(45deg)`, not by reading order: the rotation
+/// turns the right border into the down-right face and the bottom one into the
+/// down-left face, so `right + bottom` is what outlines a tip pointing DOWN.
+/// Swapping only the inline half would paint two faces that are tucked under
+/// the panel. A mirrored arrow needs the rotation mirrored as well — more than
+/// a property rewrite, so it is left for the RTL pass that owns the TS side.
 @mixin _arrow-border($edge) {
   @if $edge == bottom {
+    // rtl-ok: down-right face of a 45°-rotated square — fixed by the rotation
     border-right: 1px solid var(--wr-color-outline);
     border-bottom: 1px solid var(--wr-color-outline);
   } @else if $edge == top {
+    // rtl-ok: up-left face of a 45°-rotated square — fixed by the rotation
     border-left: 1px solid var(--wr-color-outline);
     border-top: 1px solid var(--wr-color-outline);
   } @else if $edge == right {
     border-top: 1px solid var(--wr-color-outline);
+    // rtl-ok: down-right face of a 45°-rotated square — fixed by the rotation
     border-right: 1px solid var(--wr-color-outline);
   } @else {
     border-bottom: 1px solid var(--wr-color-outline);
+    // rtl-ok: up-left face of a 45°-rotated square — fixed by the rotation
     border-left: 1px solid var(--wr-color-outline);
   }
 }
@@ -126,6 +156,7 @@ $_arrow-placement: (
     font-family: var(--wr-font-family-base);
     color: var(--wr-color-on-surface);
     animation: wr-overlay-in var(--wr-overlay-duration) var(--wr-overlay-ease);
+    // rtl-ok: scale-in growth corner — `transform-origin` takes no logical keywords
     transform-origin: top left;
 
     &::after {
@@ -196,6 +227,7 @@ $_arrow-placement: (
   line-height: 1rem;
   box-shadow: var(--wr-shadow-overlay);
   animation: wr-overlay-in var(--wr-overlay-duration) var(--wr-overlay-ease);
+  // rtl-ok: scale-in growth corner — `transform-origin` takes no logical keywords
   transform-origin: top left;
 
   // Arrow — geometry from the shared placement loop at the top of this file.

package/rating/styles/_index.scss

@@ -47,6 +47,16 @@
     // `--wr-rating-fill` is set per-slot from the component (0..1).
     clip-path: inset(0 calc((1 - var(--wr-rating-fill, 0)) * 100%) 0 0);
     transition: clip-path var(--wr-transition-base);
+
+    // `inset()` names physical sides and has no logical form, so the trimmed edge
+    // has to be moved by hand. The row is `inline-flex`, so under `dir="rtl"` it
+    // is mirrored and a star fills from its INLINE-start edge — the right one.
+    // Left alone, a half star paints the half an RTL reader reaches LAST, and
+    // since the component already commits the correct value there, the picture
+    // would be the only thing still inverted.
+    [dir='rtl'] & {
+      clip-path: inset(0 0 0 calc((1 - var(--wr-rating-fill, 0)) * 100%));
+    }
   }
 
   // Sizes — scale the icon glyph + the gap between slots.

package/schematics/use/symbol-map.json

@@ -120,6 +120,8 @@
   "WrListItem": "ngwr/list",
   "WrLoadingBar": "ngwr/loading-bar",
   "WrLoadingBarComponent": "ngwr/loading-bar",
+  "WrMarkdown": "ngwr/markdown",
+  "WrMarkdownHighlight": "ngwr/markdown",
   "WrMarquee": "ngwr/marquee",
   "WrMedia": "ngwr/media",
   "WrMention": "ngwr/mention",

package/segmented/styles/_index.scss

@@ -49,6 +49,13 @@
     position: absolute;
     top: var(--wr-segmented-padding);
     bottom: var(--wr-segmented-padding);
+    // The slide is `--wr-segmented-thumb-index` driving `translateX` below, which has
+    // no logical form and would still travel rightward under RTL — so converting only
+    // this anchor would park the thumb at the right edge and then push it off the
+    // track. Both halves have to move together (a `[dir]` rule flipping the transform's
+    // sign, or a direction-aware offset from segmented.ts), which is beyond a
+    // property-level rewrite. Worth a second opinion when the TS side of G1 lands.
+    // rtl-ok: anchor half of an anchor + physical `translateX` pair — see above
     left: var(--wr-segmented-padding);
     width: calc((100% - 2 * var(--wr-segmented-padding)) / var(--wr-segmented-thumb-count));
     transform: translateX(calc(100% * var(--wr-segmented-thumb-index)));

package/select/styles/_index.scss

@@ -61,7 +61,7 @@
     font-size: var(--wr-select-font-size);
     line-height: var(--wr-select-line-height);
     cursor: pointer;
-    text-align: left;
+    text-align: start;
     transition:
       border-color var(--wr-transition-base),
       box-shadow var(--wr-transition-base);
@@ -105,12 +105,18 @@
   }
 
   // Multi-mode trigger chrome
-  // Chips fill the trigger's flex row; the trigger grows vertically as
-  // needed. A clear-all (×) button appears at the row's tail.
-
+  // Chips fill the trigger's row and the trigger grows vertically as needed. The
+  // clear-all (×) sits at the row's tail.
+  //
+  // The trigger itself must NOT wrap, and that is the whole subtlety: the wrapping
+  // belongs to `&__chips`, which is `flex: 1 1 auto` and therefore takes the full
+  // row as soon as its content needs a second line. A wrapping trigger then pushes
+  // the × onto a flex line of its own, where — as the only item on it — it lands
+  // against the inline START, under the chips, and adds a phantom row to the
+  // control's height. That is what a full multi-select looked like: a stray ×
+  // floating below the field.
   &--multi &__trigger,
   &--tag &__trigger {
-    flex-wrap: wrap;
     align-items: center;
     padding: calc(var(--wr-select-padding-y) * var(--wr-density-y, 1))
       calc(var(--wr-select-padding-x) * var(--wr-density-x, 1));
@@ -197,7 +203,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);
     // `-ink`, not the raw intent: the chip paints the hue on its own soft tint,
@@ -237,12 +245,15 @@
 
   &__clear {
     --wr-icon-size: 0.875rem;
+    // Never shrink: the chips box is allowed to grow into the whole row, so the
+    // × has to hold its own size against it.
+    flex: 0 0 auto;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 1.125rem;
     height: 1.125rem;
-    margin-right: -0.25rem;
+    margin-inline-end: -0.25rem;
     border-radius: 999px;
     color: var(--wr-color-on-surface-muted);
     cursor: pointer;
@@ -401,6 +412,14 @@
   flex-direction: column;
   gap: var(--wr-option-gap);
 
+  // A group whose every option is filtered out has nothing left but its heading.
+  // Filtering lives entirely on the option (`.wr-option--hidden`), so without
+  // this the labels of empty groups stayed on screen — with their dividers —
+  // above a "No results" row.
+  &:not(:has(.wr-option:not(.wr-option--hidden))) {
+    display: none;
+  }
+
   &__label {
     padding: 0.5rem 0.625rem 0.25rem;
     color: var(--wr-color-on-surface-muted);
@@ -434,7 +453,8 @@
 
   .wr-select__chip {
     gap: 0.375rem;
-    padding: 0.375rem 0.5rem 0.375rem 0.75rem;
+    padding-block: 0.375rem;
+    padding-inline: 0.75rem 0.5rem;
   }
 
   .wr-select__chip-remove,
@@ -445,6 +465,6 @@
   }
 
   .wr-select__clear {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 }

package/sidebar/styles/_index.scss

@@ -49,6 +49,15 @@
       .wr-sidebar__icon {
         color: var(--wr-color-primary);
       }
+
+      // The badge measured 3.97:1 on the active row. Its own outline wash over
+      // the primary tint is what broke the pairing: `-ink` is calibrated against
+      // `-soft` ITSELF, so the fix is to let the row's tint show through and
+      // inherit the colour that was calibrated for it.
+      .wr-sidebar__badge {
+        color: inherit;
+        background: transparent;
+      }
     }
 
     &--disabled {
@@ -75,7 +84,7 @@
       border-radius: var(--wr-border-radius-sm);
       color: var(--wr-color-on-surface);
       cursor: pointer;
-      text-align: left;
+      text-align: start;
       transition: background var(--wr-transition-base);
 
       &:hover {
@@ -118,18 +127,27 @@
   }
 
   &__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
     transform: rotate(-90deg);
   }
 
   // Child items (inside an expanded group)
   &__list {
     list-style: none;
-    margin: 0.125rem 0 0.375rem 0.5rem;
-    padding: 0 0 0 0.625rem;
+    margin: 0.125rem 0 0.375rem;
+    margin-inline-start: 0.5rem;
+    padding: 0;
+    padding-inline-start: 0.625rem;
     display: flex;
     flex-direction: column;
     gap: 0.0625rem;
-    border-left: 1px solid var(--wr-color-outline);
+    border-inline-start: 1px solid var(--wr-color-outline);
   }
 
   &__item {
@@ -153,7 +171,7 @@
       position: absolute;
       top: 0.125rem;
       bottom: 0.125rem;
-      left: -0.6875rem;
+      inset-inline-start: -0.6875rem;
       width: 2px;
       border-radius: 1px;
       background: transparent;
@@ -178,6 +196,13 @@
       background: var(--wr-color-primary-soft);
       pointer-events: none;
 
+      // Same reasoning as the flat entry above: `-ink` on the row's own tint is
+      // the calibrated pairing, and the badge's wash is what pushed it under.
+      .wr-sidebar__badge {
+        color: inherit;
+        background: transparent;
+      }
+
       &::before {
         background: var(--wr-color-primary);
       }