ngwr 12.1.0 → 12.2.0

package/fesm2022/ngwr-version.mjs

@@ -16,7 +16,7 @@ import { InjectionToken } from '@angular/core';
  * Distinct from `Version` exported by `@angular/core`, which reports the
  * loaded Angular runtime version (e.g. `'22.0.0'`), not ngwr's.
  */
-const NGWR_VERSION = '12.1.0';
+const NGWR_VERSION = '12.2.0';
 
 /**
  * @license

package/fesm2022/ngwr-version.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngwr-version.mjs","sources":["../../../projects/lib/version/version.ts","../../../projects/lib/version/version.token.ts","../../../projects/lib/version/ngwr-version.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\n/**\n * The ngwr library version string, kept in sync with\n * `projects/lib/package.json` by `scripts/release-prepare.ts`.\n *\n * Prefer this over reading `package.json` at runtime — that requires a JSON\n * import or `require`, neither of which tree-shakes well in Angular builds.\n *\n * Distinct from `Version` exported by `@angular/core`, which reports the\n * loaded Angular runtime version (e.g. `'22.0.0'`), not ngwr's.\n */\nexport const NGWR_VERSION = '12.1.0';\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { InjectionToken } from '@angular/core';\n\nimport { NGWR_VERSION } from './version';\n\n/**\n * Injection token holding the ngwr library version string.\n *\n * Default factory returns {@link NGWR_VERSION}. Override it in tests or in\n * apps that want to surface a custom build identifier.\n *\n * @example\n * ```ts\n * @Component({...})\n * export class FooterComponent {\n *   readonly version = inject(NGWR_VERSION_TOKEN);\n * }\n * ```\n */\nexport const NGWR_VERSION_TOKEN = new InjectionToken<string>('NGWR_VERSION_TOKEN', {\n  providedIn: 'root',\n  factory: () => NGWR_VERSION,\n});\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;;;;AAKG;AAEH;;;;;;;;;AASG;AACI,MAAM,YAAY,GAAG;;ACjB5B;;;;;AAKG;AAMH;;;;;;;;;;;;;AAaG;MACU,kBAAkB,GAAG,IAAI,cAAc,CAAS,oBAAoB,EAAE;AACjF,IAAA,UAAU,EAAE,MAAM;AAClB,IAAA,OAAO,EAAE,MAAM,YAAY;AAC5B,CAAA;;AC5BD;;AAEG;;;;"}
+{"version":3,"file":"ngwr-version.mjs","sources":["../../../projects/lib/version/version.ts","../../../projects/lib/version/version.token.ts","../../../projects/lib/version/ngwr-version.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\n/**\n * The ngwr library version string, kept in sync with\n * `projects/lib/package.json` by `scripts/release-prepare.ts`.\n *\n * Prefer this over reading `package.json` at runtime — that requires a JSON\n * import or `require`, neither of which tree-shakes well in Angular builds.\n *\n * Distinct from `Version` exported by `@angular/core`, which reports the\n * loaded Angular runtime version (e.g. `'22.0.0'`), not ngwr's.\n */\nexport const NGWR_VERSION = '12.2.0';\n","/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { InjectionToken } from '@angular/core';\n\nimport { NGWR_VERSION } from './version';\n\n/**\n * Injection token holding the ngwr library version string.\n *\n * Default factory returns {@link NGWR_VERSION}. Override it in tests or in\n * apps that want to surface a custom build identifier.\n *\n * @example\n * ```ts\n * @Component({...})\n * export class FooterComponent {\n *   readonly version = inject(NGWR_VERSION_TOKEN);\n * }\n * ```\n */\nexport const NGWR_VERSION_TOKEN = new InjectionToken<string>('NGWR_VERSION_TOKEN', {\n  providedIn: 'root',\n  factory: () => NGWR_VERSION,\n});\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;;;;AAKG;AAEH;;;;;;;;;AASG;AACI,MAAM,YAAY,GAAG;;ACjB5B;;;;;AAKG;AAMH;;;;;;;;;;;;;AAaG;MACU,kBAAkB,GAAG,IAAI,cAAc,CAAS,oBAAoB,EAAE;AACjF,IAAA,UAAU,EAAE,MAAM;AAClB,IAAA,OAAO,EAAE,MAAM,YAAY;AAC5B,CAAA;;AC5BD;;AAEG;;;;"}

package/overlay/styles/_arrow.scss

@@ -0,0 +1,243 @@
+@use 'sass:list';
+@use 'sass:map';
+
+// --- Anchored-panel arrow ----------------------------------------------------
+//
+// A small square rotated 45°, half tucked under the panel so only the tip shows.
+// Shared by every overlay that points AT its trigger: `wr-popover`, its tooltip
+// mode, and `wr-popconfirm`.
+//
+// **Why this lives in `ngwr/overlay` and not in `ngwr/theme`.** `theme/styles`
+// is the token layer plus mixins any element can use — `smooth-br`,
+// `touch-target`, `focus-ring`. This is not one of those. It only means anything
+// against a CDK pane that carries a `--<placement>` modifier written by
+// `wrPopoverPositions()` / a directive's `panelClass`, and the eight-to-twelve
+// placement names it keys off are `WR_POPOVER_POSITIONS`. That is the overlay
+// layer's vocabulary, and `overlay/styles` is already where the cross-overlay
+// presentation lives (`.wr-overlay-sheet`, `.wr-overlay-backdrop`). Promoting it
+// to `ngwr/theme` would advertise it to every component in the catalog as
+// something general, which it is not.
+//
+// It is deliberately NOT `@forward`ed from `overlay/styles/_index.scss`, so
+// `@use 'ngwr/overlay'` gains no new public API and this file emits no CSS of
+// its own — a component `@use`s it by relative path and pays only for the rules
+// its own `anchored-arrow()` call generates.
+
+/// Side of the square's box. Half of it shows; the rest is under the panel.
+$size: 6px;
+$half: 3px;
+
+/// Distance from the panel corner for the `-start` / `-end` variants.
+$inset: 0.625rem;
+
+/// Every placement an anchored panel can take, mapped to
+/// (which panel edge the arrow hangs off, where along that edge it sits).
+///
+/// A `--top` pane means the panel sits ABOVE the trigger, so the arrow hangs off
+/// the panel's BOTTOM edge.
+$placements: (
+  top: (
+    bottom,
+    center,
+  ),
+  top-start: (
+    bottom,
+    start,
+  ),
+  top-end: (
+    bottom,
+    end,
+  ),
+  bottom: (
+    top,
+    center,
+  ),
+  bottom-start: (
+    top,
+    start,
+  ),
+  bottom-end: (
+    top,
+    end,
+  ),
+  left: (
+    right,
+    center,
+  ),
+  left-start: (
+    right,
+    start,
+  ),
+  left-end: (
+    right,
+    end,
+  ),
+  right: (
+    left,
+    center,
+  ),
+  right-start: (
+    left,
+    start,
+  ),
+  right-end: (
+    left,
+    end,
+  ),
+);
+
+/// 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` placement 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
+/// LTR name, and the arrow has to travel with the panel. Same for the `-start` /
+/// `-end` alignment along a horizontal edge.
+///
+/// The class names the placement the panel ACTUALLY took, not the requested one,
+/// wherever the caller feeds `withPositions()` a fallback list whose links each
+/// carry their own `panelClass` — so a flip swaps the modifier and this moves the
+/// arrow with it.
+@mixin at($edge, $align, $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 {
+      // 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: -$half;
+    } @else if $align == start {
+      inset-inline-start: $inset;
+    } @else {
+      inset-inline-end: $inset;
+    }
+  } @else {
+    @if $align == center {
+      top: 50%;
+      margin-top: -$half;
+    } @else if $align == start {
+      top: $inset;
+    } @else {
+      bottom: $inset;
+    }
+  }
+}
+
+/// 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 faces($edge, $color) {
+  @if $edge == bottom {
+    // rtl-ok: down-right face of a 45°-rotated square — fixed by the rotation
+    border-right: 1px solid $color;
+    border-bottom: 1px solid $color;
+  } @else if $edge == top {
+    // rtl-ok: up-left face of a 45°-rotated square — fixed by the rotation
+    border-left: 1px solid $color;
+    border-top: 1px solid $color;
+  } @else if $edge == right {
+    border-top: 1px solid $color;
+    // rtl-ok: down-right face of a 45°-rotated square — fixed by the rotation
+    border-right: 1px solid $color;
+  } @else {
+    border-bottom: 1px solid $color;
+    // rtl-ok: up-left face of a 45°-rotated square — fixed by the rotation
+    border-left: 1px solid $color;
+  }
+}
+
+/// Draws the arrow for an anchored overlay, at every placement it can take.
+///
+/// @param {String} $pane - the CDK pane class the directive sets, without the
+///   modifier: `.wr-popover-overlay`, `.wr-popconfirm-overlay`.
+/// @param {String} $panel - selector for the painted surface INSIDE the pane,
+///   relative to it: `> *` where the pane wraps an arbitrary child,
+///   `> .wr-popconfirm` / `.wr-tooltip` where it has a known one. The arrow is
+///   that element's `::after`, so this is also the element made `position:
+///   relative`.
+/// @param {*} $background - fill for the square; match the panel's own so the
+///   two read as one shape. A `var()` is fine and preferred.
+/// @param {*} $border - the panel's border colour, or `null` for a panel with no
+///   border. When set, the two outward faces are painted so the outline reads as
+///   continuous, and the square is pulled one extra pixel outwards so its own
+///   border lines up flush with the panel's instead of leaving the panel border
+///   showing across the arrow's base. A borderless panel has nothing to line up
+///   with, hence the smaller pull.
+/// @param {Bool} $inert - `true` drops the arrow out of hit-testing. For a
+///   tooltip, whose arrow overlaps the very control the tooltip describes, so a
+///   hittable arrow eats clicks meant for it.
+/// @param {List} $placements-used - which placements to emit, defaulting to all
+///   twelve. A component whose position input offers four should pass four
+///   rather than shipping eight rules that can never match.
+@mixin anchored-arrow($pane, $panel, $background, $border: null, $inert: false, $placements-used: map.keys($placements)) {
+  #{$pane} {
+    #{$panel} {
+      // Containing block for the arrow.
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        width: $size;
+        height: $size;
+        background: $background;
+        transform: rotate(45deg);
+
+        @if $inert {
+          pointer-events: none;
+        }
+      }
+    }
+
+    // Responsive bottom-sheet mode detaches the panel from its trigger and docks
+    // it to the bottom of the screen, so there is nothing left to point at.
+    // Emitted for every caller, not only the ones that support sheets today: the
+    // arrow is what would be wrong there, so the arrow is what should know.
+    &.wr-overlay-sheet #{$panel}::after {
+      content: none;
+    }
+  }
+
+  @each $placement in $placements-used {
+    $spec: map.get($placements, $placement);
+
+    @if $spec == null {
+      @error 'wr arrow: unknown placement `#{$placement}` — expected one of #{map.keys($placements)}.';
+    }
+
+    $edge: list.nth($spec, 1);
+    $align: list.nth($spec, 2);
+
+    // A bordered panel pulls one extra pixel, so the square's own border lines
+    // up flush with the panel's instead of leaving the panel border showing
+    // across the arrow's base. A borderless one has nothing to line up with.
+    $pull: $half;
+
+    @if $border != null {
+      $pull: $half + 1px;
+    }
+
+    #{$pane}--#{$placement} #{$panel}::after {
+      @include at($edge, $align, $pull);
+
+      @if $border != null {
+        @include faces($edge, $border);
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngwr",
-  "version": "12.1.0",
+  "version": "12.2.0",
   "bin": {
     "ngwr-mcp": "./mcp/server.js"
   },

package/popconfirm/styles/_index.scss

@@ -1,4 +1,5 @@
 @use '../../theme/styles' as theme;
+@use '../../overlay/styles/arrow';
 
 .wr-popconfirm-overlay {
   > .wr-popconfirm {
@@ -13,6 +14,7 @@
     color: var(--wr-color-on-surface);
     font-family: var(--wr-font-family-base);
     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;
   }
 }
@@ -30,3 +32,18 @@
     gap: 0.375rem;
   }
 }
+
+// The arrow that ties the panel to the control it is asking about — the same one
+// `wr-popover` draws, from the same mixin, because the two are the same kind of
+// anchored non-modal panel and a second copy of the geometry would drift.
+//
+// Four placements, not twelve: `WrPopconfirmPosition` is `top | bottom | left |
+// right`, and the eight `-start` / `-end` rules would be selectors that can
+// never match. Widen this list if the input ever grows them.
+@include arrow.anchored-arrow(
+  $pane: '.wr-popconfirm-overlay',
+  $panel: '> .wr-popconfirm',
+  $background: var(--wr-color-surface),
+  $border: var(--wr-color-outline),
+  $placements-used: (top, bottom, left, right)
+);

package/popover/styles/_index.scss

@@ -1,196 +1,27 @@
-@use 'sass:list';
-
 @use '../../theme/styles' as theme;
 @use '../../overlay/styles'; // shared .wr-overlay-sheet / .wr-overlay-backdrop for responsive mode
-
-// --- Arrow -----------------------------------------------------------------
-//
-// A small square rotated 45°, half tucked under the panel so only the tip shows.
-// Tooltip and popover share the geometry; the popover additionally carries the
-// panel's border on the two outward faces so the outline reads as continuous.
-//
-// Placement is driven by the resolved position modifier the directive puts on the
-// overlay host (`--top` means the panel sits ABOVE the trigger, so the arrow hangs
-// off the panel's BOTTOM edge). All 12 positions are covered — the hand-written
-// tooltip rules this replaces only handled 8, so `top-start` / `top-end` /
-// `bottom-start` / `bottom-end` tooltips have been shipping with no arrow at all.
-$_arrow: 6px;
-$_arrow-half: 3px;
-$_arrow-inset: 0.625rem; // distance from the panel corner for the -start / -end variants
-
-// edge = which side of the panel the arrow hangs off; align = where along that side.
-$_arrow-placement: (
-  top: (
-    bottom,
-    center,
-  ),
-  top-start: (
-    bottom,
-    start,
-  ),
-  top-end: (
-    bottom,
-    end,
-  ),
-  bottom: (
-    top,
-    center,
-  ),
-  bottom-start: (
-    top,
-    start,
-  ),
-  bottom-end: (
-    top,
-    end,
-  ),
-  left: (
-    right,
-    center,
-  ),
-  left-start: (
-    right,
-    start,
-  ),
-  left-end: (
-    right,
-    end,
-  ),
-  right: (
-    left,
-    center,
-  ),
-  right-start: (
-    left,
-    start,
-  ),
-  right-end: (
-    left,
-    end,
-  ),
-);
-
-/// 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 LTR name, and the arrow has to travel with the
-/// panel. Same for the `-start` / `-end` alignment along a horizontal edge.
-///
-/// The class names the placement the panel ACTUALLY took, not the requested one:
-/// each entry in `WR_POPOVER_FALLBACKS` carries its own `panelClass`, so a flip
-/// swaps the modifier and this loop moves the arrow with it.
-@mixin _arrow-at($edge, $align, $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 {
-      // 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 {
-      inset-inline-start: $_arrow-inset;
-    } @else {
-      inset-inline-end: $_arrow-inset;
-    }
-  } @else {
-    @if $align == center {
-      top: 50%;
-      margin-top: -$_arrow-half;
-    } @else if $align == start {
-      top: $_arrow-inset;
-    } @else {
-      bottom: $_arrow-inset;
-    }
-  }
-}
-
-/// 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);
-  }
-}
-
-.wr-popover-overlay {
-  > * {
-    // Containing block for the arrow below.
-    position: relative;
-    display: block;
-    min-width: 8rem;
-    max-width: 22rem;
-    background: var(--wr-color-surface);
-    border: 1px solid var(--wr-color-outline);
-    @include theme.smooth-br(var(--wr-border-radius-base));
-    box-shadow: var(--wr-shadow-overlay);
-    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 {
-      content: '';
-      position: absolute;
-      width: $_arrow;
-      height: $_arrow;
-      background: var(--wr-color-surface);
-      transform: rotate(45deg);
-    }
-  }
-
-  // Responsive bottom-sheet mode has no anchor to point at, so no arrow.
-  &.wr-overlay-sheet > *::after {
-    content: none;
-  }
-}
-
-@each $position, $spec in $_arrow-placement {
-  $edge: list.nth($spec, 1);
-  $align: list.nth($spec, 2);
-
-  // Pulled one extra pixel so the square's own border lines up flush with the
-  // panel's, instead of leaving the panel border showing across the arrow's base.
-  .wr-popover-overlay--#{$position} > *::after {
-    @include _arrow-at($edge, $align, $_arrow-half + 1px);
-    @include _arrow-border($edge);
-  }
-
-  .wr-tooltip-overlay--#{$position} .wr-tooltip::after {
-    @include _arrow-at($edge, $align, $_arrow-half);
-  }
+@use '../../overlay/styles/arrow';
+
+// The arrow — a rotated square tucked half under the panel — used to be written
+// out here: geometry, a twelve-placement map and two mixins. `wr-popconfirm` is
+// the same kind of anchored panel and had none of it, so rather than a second
+// copy the whole thing moved to `overlay/styles/_arrow.scss` and both components
+// call `arrow.anchored-arrow()`. The two calls at the foot of this file emit the
+// rules that were here, for the same twelve placements.
+
+.wr-popover-overlay > * {
+  display: block;
+  min-width: 8rem;
+  max-width: 22rem;
+  background: var(--wr-color-surface);
+  border: 1px solid var(--wr-color-outline);
+  @include theme.smooth-br(var(--wr-border-radius-base));
+  box-shadow: var(--wr-shadow-overlay);
+  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;
 }
 
 //
@@ -235,24 +66,35 @@ $_arrow-placement: (
   // 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.
-  &::after {
-    content: '';
-    position: absolute;
-    width: $_arrow;
-    height: $_arrow;
-    background: var(--wr-tooltip-bg);
-    transform: rotate(45deg);
-    // The one piece that stays inert: the arrow points AT the trigger and
-    // overlaps it, so a hittable arrow would eat clicks meant for the control
-    // the tooltip describes.
-    pointer-events: none;
-  }
+  // The arrow itself comes from `arrow.anchored-arrow()` below. `position:
+  // relative` is restated by that call and kept here too, so the class still
+  // stands on its own for anyone styling `.wr-tooltip` directly — it is public
+  // API, and the arrow is the pane's business rather than the chip's.
 }
 
-// Arrow placement for both modes is generated from `$_arrow-placement` at the top
-// of this file — the per-position rules that used to live here are emitted there,
-// byte-identical for the 8 positions they covered plus the 4 they missed.
+// Arrow for both modes.
+//
+// Popover: the pane wraps whatever the author projected, so the panel selector
+// is `> *`, and the square carries the panel's border on its two outward faces
+// so the outline reads as continuous.
+@include arrow.anchored-arrow(
+  $pane: '.wr-popover-overlay',
+  $panel: '> *',
+  $background: var(--wr-color-surface),
+  $border: var(--wr-color-outline)
+);
+
+// Tooltip: a known child, and no border faces — the chip's own border colour is
+// overridable per instance through `--wr-tooltip-border`, so painting the faces
+// from the token here would desync the moment anyone retints one. The arrow
+// points AT the trigger and overlaps it, so it is the one inert piece: a
+// hittable arrow would eat clicks meant for the control the tooltip describes.
+@include arrow.anchored-arrow(
+  $pane: '.wr-tooltip-overlay',
+  $panel: '.wr-tooltip',
+  $background: var(--wr-tooltip-bg),
+  $inert: true
+);
 
 @media (prefers-reduced-motion: reduce) {
   .wr-tooltip {

package/select/styles/_index.scss

@@ -36,7 +36,15 @@
   &--rounded {
     --wr-select-radius: var(--wr-border-radius-pill);
     --wr-select-padding-x: 1rem;
-    corner-shape: round; // override squircle from smooth-br for pills
+
+    // The squircle reset has to land on the element `smooth-br` ran on, and
+    // that is the trigger, not the host: `corner-shape` does not inherit, so a
+    // declaration here left the trigger drawing the inset curve the mixin's own
+    // gotcha warns about instead of a stadium. `wr-btn` / `wr-input` put their
+    // modifier and their `smooth-br` on one element, which is why they paint.
+    .wr-select__trigger {
+      corner-shape: round;
+    }
   }
 
   &--disabled {
@@ -128,7 +136,15 @@
   // Search-mode trigger: inline text input + chevron + clear
   &__trigger--search {
     cursor: text;
-    padding: 0;
+    // The FIELD owns the padding here — it is the click target and has to be
+    // typable edge to edge — but the chevron and the × are siblings of it, not
+    // children, so a flat `padding: 0` left the chevron sitting on the border.
+    // Hand the TRAILING inset back to the trigger: the chevron is now inset by
+    // the same amount the placeholder is, and the field keeps the leading edge.
+    // Logical properties, so the inset moves to the left in `dir="rtl"` on its
+    // own — no physical side is named.
+    padding-block: 0;
+    padding-inline: 0 calc(var(--wr-select-padding-x) * var(--wr-density-x, 1));
 
     &:focus-within {
       border-color: var(--wr-color-primary);
@@ -218,7 +234,12 @@
     // Roomier on the label side, tighter where the remove (×) sits.
     padding-block: 0.125rem;
     padding-inline: 0.5rem 0.25rem;
-    border-radius: 999px;
+    // Not a pill: a chip is a shape nested INSIDE the trigger, so it repeats the
+    // trigger's own corner and scales with `size` along with it (5 / 6 / 7px for
+    // sm / md / lg). `--rounded` sets `--wr-select-radius` to the pill token, so
+    // a pill select still gets pill chips — the shape follows the control rather
+    // than being decided twice.
+    border-radius: var(--wr-select-radius);
     background: var(--wr-color-primary-soft);
     // `-ink`, not the raw intent: the chip paints the hue on its own soft tint,
     // where the base lands at 4.17:1.
@@ -241,7 +262,12 @@
     justify-content: center;
     width: 1rem;
     height: 1rem;
-    border-radius: 999px;
+    // Concentric with the chip: the remove is inset from the chip's edge by the
+    // chip's 2px block padding, and an inner corner only nests cleanly when it
+    // is the outer corner minus that inset. `max()` keeps the value legal for a
+    // consumer who sets `--wr-select-radius: 0` — a negative radius would
+    // invalidate the declaration outright.
+    border-radius: max(0px, calc(var(--wr-select-radius) - 2px));
     cursor: pointer;
     transition: background 0.12s ease;
 

package/sidebar/styles/_index.scss

@@ -224,7 +224,10 @@
   &__badge {
     flex: 0 0 auto;
     padding: 0.0625rem 0.375rem;
-    border-radius: var(--wr-border-radius-pill);
+    // The row's corner, not a pill: the badge sits inside `__entry` / `__item`,
+    // which both read `--wr-border-radius-sm`, and a stadium nested in a 6px row
+    // reads as a foreign shape rather than a part of it.
+    border-radius: var(--wr-border-radius-sm);
     background: var(--wr-color-fill-strong);
     color: var(--wr-color-on-surface-muted);
     font-size: var(--wr-text-xs);