ngwr 9.1.0 → 10.1.0

package/README.md

@@ -1,4 +1,4 @@
-# <img src="https://ngwr.dev/assets/images/logo.svg" alt="ngwr logo" height="32px">
+# <img src="https://ngwr.dev/images/logo.svg" alt="ngwr logo" height="32px">
 
 [![ngwr website](https://img.shields.io/badge/ngwr.dev-3969e2)](https://ngwr.dev)
 [![ngwr version](https://img.shields.io/github/package-json/v/thekhegay/ngwr?filename=projects%2Flib%2Fpackage.json&color=%23f51c6a)](https://www.npmjs.com/package/ngwr)
@@ -10,7 +10,7 @@
 zoneless-ready, responsive, modular SCSS, fully tree-shakable. Built on top of
 `@angular/cdk` for overlay, portal, and a11y primitives.
 
-> **Status:** active development. v9 is the current major line (Angular 22 peer).
+> **Status:** active development. v10 is the current major line (Angular 22 peer).
 > Public API is stable across patch releases and still evolving between majors.
 > [Open an issue](https://github.com/thekhegay/ngwr/issues/new)
 > if something breaks or feels wrong.
@@ -53,6 +53,15 @@ npm install ngwr @angular/cdk
 yarn add ngwr @angular/cdk
 ```
 
+`@angular/cdk` is the only required peer. Add an icon set and a date library
+only if you use them — `lucide` (or `feather`) for the icon adapters, and
+`date-fns` or `luxon` for the calendar / date-picker adapters. The Quick start
+below registers a lucide icon, so it needs `lucide`:
+
+```shell
+pnpm add lucide
+```
+
 ## Styles
 
 The fastest way — pull in everything (theme tokens + all component styles):
@@ -62,6 +71,11 @@ The fastest way — pull in everything (theme tokens + all component styles):
 @use 'ngwr';
 ```
 
+Good for a spike, but it is every entry point at once — about **247 kB** of CSS
+(~30 kB over the wire), which on its own exceeds the 500 kB initial budget a
+fresh `ng new` ships with. For anything you intend to keep, opt in per component
+below and the sheet stays proportional to what you actually render.
+
 Prefer to opt in per-component? Each component has its own SCSS entry that pulls
 in the theme automatically:
 
@@ -161,11 +175,11 @@ export class ProfileForm {
 
 ### Components
 
-**Form** — [calendar](https://ngwr.dev/reference/components/calendar), [cascader](https://ngwr.dev/reference/components/cascader), [checkbox](https://ngwr.dev/reference/components/checkbox), [color-picker](https://ngwr.dev/reference/components/color-picker), [date-picker](https://ngwr.dev/reference/components/date-picker), [file-upload](https://ngwr.dev/reference/components/file-upload), [form](https://ngwr.dev/reference/components/form), [form-field](https://ngwr.dev/reference/components/form-field), [input](https://ngwr.dev/reference/components/input), [input-number](https://ngwr.dev/reference/components/input-number), [input-otp](https://ngwr.dev/reference/components/input-otp), [knob](https://ngwr.dev/reference/components/knob), [mention](https://ngwr.dev/reference/components/mention), [radio](https://ngwr.dev/reference/components/radio), [rating](https://ngwr.dev/reference/components/rating), [segmented](https://ngwr.dev/reference/components/segmented), [select](https://ngwr.dev/reference/components/select), [slider](https://ngwr.dev/reference/components/slider), [switch](https://ngwr.dev/reference/components/switch), [textarea](https://ngwr.dev/reference/components/textarea).
+**Form** — [calendar](https://ngwr.dev/reference/components/calendar), [cascader](https://ngwr.dev/reference/components/cascader), [checkbox](https://ngwr.dev/reference/components/checkbox), [color-picker](https://ngwr.dev/reference/components/color-picker), [date-picker](https://ngwr.dev/reference/components/date-picker), [file-upload](https://ngwr.dev/reference/components/file-upload), [form](https://ngwr.dev/reference/components/form), [form-field](https://ngwr.dev/reference/components/form-field), [input](https://ngwr.dev/reference/components/input), [input-number](https://ngwr.dev/reference/components/input-number), [input-otp](https://ngwr.dev/reference/components/input-otp), [knob](https://ngwr.dev/reference/components/knob), [mention](https://ngwr.dev/reference/components/mention), [radio](https://ngwr.dev/reference/components/radio), [rating](https://ngwr.dev/reference/components/rating), [segmented](https://ngwr.dev/reference/components/segmented), [select](https://ngwr.dev/reference/components/select), [slider](https://ngwr.dev/reference/components/slider), [switch](https://ngwr.dev/reference/components/switch), [textarea](https://ngwr.dev/reference/components/textarea), [transfer](https://ngwr.dev/reference/components/transfer).
 
 **Buttons** — [button](https://ngwr.dev/reference/components/button), [button-group](https://ngwr.dev/reference/components/button-group), [speed-dial](https://ngwr.dev/reference/components/speed-dial).
 
-**Data** — [drag-drop](https://ngwr.dev/reference/components/drag-drop), [pagination](https://ngwr.dev/reference/components/pagination), [pull-to-refresh](https://ngwr.dev/reference/components/pull-to-refresh), [table](https://ngwr.dev/reference/components/table), [tree](https://ngwr.dev/reference/components/tree), [virtual-scroll](https://ngwr.dev/reference/components/virtual-scroll).
+**Data** — [drag-drop](https://ngwr.dev/reference/components/drag-drop), [event-calendar](https://ngwr.dev/reference/components/event-calendar), [pagination](https://ngwr.dev/reference/components/pagination), [pull-to-refresh](https://ngwr.dev/reference/components/pull-to-refresh), [table](https://ngwr.dev/reference/components/table), [tree](https://ngwr.dev/reference/components/tree), [virtual-scroll](https://ngwr.dev/reference/components/virtual-scroll).
 
 **Feedback** — [alert](https://ngwr.dev/reference/components/alert), [empty](https://ngwr.dev/reference/components/empty), [progress](https://ngwr.dev/reference/components/progress), [result](https://ngwr.dev/reference/components/result), [skeleton](https://ngwr.dev/reference/components/skeleton), [spinner](https://ngwr.dev/reference/components/spinner).
 
@@ -199,11 +213,11 @@ Card packages bundle their related directives: `ngwr/spotlight-card` exports `Wr
 
 ### Services
 
-[clipboard](https://ngwr.dev/reference/services/clipboard), [cookie](https://ngwr.dev/reference/services/cookie), [density](https://ngwr.dev/reference/services/density), [hotkey](https://ngwr.dev/reference/services/hotkey), [loading-bar](https://ngwr.dev/reference/services/loading-bar), [media](https://ngwr.dev/reference/services/media), [meta](https://ngwr.dev/reference/services/meta), [platform](https://ngwr.dev/reference/services/platform), [scroll](https://ngwr.dev/reference/services/scroll), [storage](https://ngwr.dev/reference/services/storage), [theme](https://ngwr.dev/reference/services/theme), [i18n](https://ngwr.dev/reference/services/i18n).
+[clipboard](https://ngwr.dev/reference/services/clipboard), [cookie](https://ngwr.dev/reference/services/cookie), [density](https://ngwr.dev/reference/services/density), [hotkey](https://ngwr.dev/reference/services/hotkey), [loading-bar](https://ngwr.dev/reference/services/loading-bar), [media](https://ngwr.dev/reference/services/media), [meta](https://ngwr.dev/reference/services/meta), [platform](https://ngwr.dev/reference/services/platform), [scroll](https://ngwr.dev/reference/services/scroll), [storage](https://ngwr.dev/reference/services/storage), [theme](https://ngwr.dev/reference/services/theme), [tour](https://ngwr.dev/reference/services/tour), [i18n](https://ngwr.dev/reference/services/i18n).
 
 ### Validators — `ngwr/validators`
 
-Bundled `ValidatorFn`s composing cleanly with Angular's built-in `Validators`: `cardNumber` (Luhn), `cvc`, `hexColor`, `iban` (mod-97), `match` (sibling control), `maxDate`, `minDate`, `noWhitespace`, `oneOf`, `url`. See [docs](https://ngwr.dev/reference/validators).
+Bundled `ValidatorFn`s composing cleanly with Angular's built-in `Validators`: `cardNumber` (Luhn), `cvc`, `hexColor`, `iban` (mod-97), `match` (sibling control), `matchFields` (group-level), `maxDate`, `minDate`, `noWhitespace`, `oneOf`, `url`. See [docs](https://ngwr.dev/reference/validators).
 
 ### Utils — `ngwr/utils`
 
@@ -225,12 +239,13 @@ Math (`clamp`, `round`), coercion (`numAttr`), css helpers (`resolveCssSize`, `g
 - **Signal Forms native.** Every value control implements `FormValueControl` / `FormCheckboxControl`, so `[formField]` binds straight through — there is no `ControlValueAccessor` in the library at all. `[(ngModel)]` and reactive forms keep working through Angular's bridge, and every control also works standalone via `[(value)]` / `[(checked)]`.
 - **CDK-powered.** Overlays, portals, and a11y come from `@angular/cdk`. We add `provideWrOverlay()` so NGWR overlays never collide with other CDK consumers (Material, NG-ZORRO, etc.).
 - **Mobile & responsive.** Overlays collapse to bottom-sheets on small screens (`provideWrResponsiveOverlays()`), touch targets grow to ≥44px on coarse pointers, a `touch` density preset enlarges every control, and drawer / lightbox / toast / carousel respond to swipe gestures. Fixed surfaces respect `env(safe-area-inset-*)`, and layout components (`descriptions`, `stepper`, `page-header`, `toolbar`, `pagination`, `table`) reflow to their container via container queries. [Guide](https://ngwr.dev/guides/mobile).
-- **Table, batteries included.** `wr-table` covers column pinning / resizing / drag-reorder, row selection, expandable rows, grouping, summary rows, CSV export (`exportCsv()`, dependency-free RFC 4180) and a virtualized body — all opt-in inputs on the one component. Excel (`.xlsx`) export is deliberately not shipped: it would mean a third-party dependency.
-- **Tree-shakable.** 127 separate ng-packagr entry points — import only what you use. Per-component FESM bundles are small: a median of ~3 KB gzipped, the heaviest (`ngwr/table`) ~18 KB. The whole catalog gzips to ~490 KB — but real apps pull a handful of entries. The only runtime dependency is `tslib`.
+- **Table, batteries included.** `wr-table` covers column pinning / resizing / drag-reorder, row selection, expandable rows, grouping, tree rows (`childrenKey` — the forest flattens into the same `<tbody>`, so pinning and cell templates keep working at every depth, and the table announces a `treegrid`), summary rows, CSV export (`exportCsv()`, dependency-free RFC 4180) and a virtualized body — all opt-in inputs on the one component. Excel (`.xlsx`) export is deliberately not shipped: it would mean a third-party dependency.
+- **Tree-shakable.** 130 separate ng-packagr entry points — import only what you use. Per-component FESM bundles are small: a median of ~3 KB gzipped, the heaviest (`ngwr/select`) ~20 KB. The whole catalog gzips to ~516 KB — but real apps pull a handful of entries. The only runtime dependency is `tslib`.
 - **Modular SCSS.** Component styles are scoped through CSS custom properties. Theme tokens live in `ngwr/theme`; utilities (`grid`, `reset`) and the breakpoints SCSS API are opt-in.
 - **Tree-shaken icons.** `provideWrIcons(lucideIcons({ plus: Plus }))` registers only the icons you actually import. Dev-mode validation warns about unregistered icons.
 - **Reactbits ports, dependency-free.** All animation ports are reimplemented with vanilla DOM + Web Animations API / `IntersectionObserver` / `requestAnimationFrame` / raw WebGL — no GSAP, no `motion/react`, no `matter-js`, no `ogl`.
 - **Motion respects the OS.** Every animation component short-circuits to its final state under `prefers-reduced-motion`.
+- **Legible to agents.** Every docs page also serves as markdown at the same URL plus `.md` — [reference/components/select.md](https://ngwr.dev/reference/components/select.md) is that page's prose, code samples and API tables without the site chrome. The whole catalog is at [llms-full.txt](https://ngwr.dev/llms-full.txt), a quick-ref at [llms.txt](https://ngwr.dev/llms.txt).
 
 ## Contributing
 

package/action-sheet/styles/_index.scss

@@ -1,3 +1,8 @@
+// Pull the whole theme so a standalone `@use 'ngwr/<name>'` brings in every
+// design token this stylesheet references. Sass deduplicates `@use` per
+// compilation, so the umbrella sheet still emits the theme only once.
+@use '../../theme/styles' as theme;
+
 .wr-action-sheet {
   display: flex;
   flex-direction: column;
@@ -65,7 +70,7 @@
     }
 
     &--destructive {
-      color: var(--wr-color-danger);
+      color: var(--wr-color-danger-ink);
     }
 
     &--cancel {

package/badge/styles/_index.scss

@@ -14,10 +14,14 @@
   border-radius: var(--wr-badge-radius);
   font-size: var(--wr-badge-font-size);
   font-weight: var(--wr-badge-font-weight);
-  // line-height 1 + min-height: flex centres the tight glyph box vertically,
-  // instead of line-height baking in asymmetric leading (which left small
-  // sizes looking top-heavy).
-  line-height: 1;
+  // The flex line is centred exactly (`align-items` above), but the glyphs inside
+  // it were not: Blink floors the half-leading, so any odd
+  // `line-height − (ascent + descent)` paints the text box half a pixel high —
+  // measured 4px above / 5px below at md, 6/7 at lg. `normal` leaves no leading
+  // to round, and the min-heights below still fix the box, so the badge keeps its
+  // 18 / 24 / 30px sizes.
+  //
+  line-height: normal;
   white-space: nowrap;
 
   // Defaults — sized modifiers override these
@@ -37,11 +41,17 @@
     --wr-badge-min-height: 1.125rem;
   }
 
+  // `lg` used to jump two steps on the axes that decide its footprint while the
+  // type only moved one — padding-x 6 → 8 → 12 and min-height 18 → 24 → 32,
+  // against a font of 10 → 12 → 14. Result: a third more badge for a sixth more
+  // text, which is why it read as oversized next to `md`. One step each:
+  // 6 → 8 → 10 and 18 → 24 → 30, holding min-height a constant 4px above the
+  // intrinsic `font-size + 2 × padding-y` at every size.
   &--lg {
     --wr-badge-padding-y: 0.375rem;
-    --wr-badge-padding-x: 0.75rem;
+    --wr-badge-padding-x: 0.625rem;
     --wr-badge-font-size: var(--wr-text-sm);
-    --wr-badge-min-height: 2rem;
+    --wr-badge-min-height: 1.875rem;
   }
 
   // Shape — default `rounded` keeps the small radius from the defaults
@@ -77,7 +87,7 @@
 
     @each $name in theme.$colors {
       &.wr-badge--#{$name} {
-        color: var(--wr-color-#{$name});
+        color: var(--wr-color-#{$name}-ink);
       }
     }
   }

package/badge/styles/_tag.scss

@@ -19,12 +19,21 @@
   --wr-tag-padding-x: 0.5rem;
   --wr-tag-font-size: var(--wr-text-xs);
   --wr-tag-font-weight: 500;
-  --wr-tag-line-height: 1rem;
+  // `normal`, not a fixed `1rem`: a 16px line box against the font's own 15px
+  // content area leaves half a pixel of leading per side, Blink floors it, and
+  // the label paints 1px high — 3px above / 4px below, while an adornment icon
+  // sits dead centre at 4/4. That 0.5px split between icon and text centres is
+  // what reads as "the tag's alignment has drifted".
+  --wr-tag-line-height: normal;
+  // Zero leading would otherwise shrink the tag 22px -> 21px, so the box is
+  // floored explicitly instead of being an accident of the line height.
+  --wr-tag-min-height: 1.375rem;
 
   color: var(--wr-tag-color);
   background: var(--wr-tag-bg);
   border: 1px solid var(--wr-tag-border);
   border-radius: var(--wr-tag-radius);
+  min-height: var(--wr-tag-min-height);
   padding: calc(var(--wr-tag-padding-y) * var(--wr-density-y, 1)) calc(var(--wr-tag-padding-x) * var(--wr-density-x, 1));
   font-family: var(--wr-font-family-base);
   font-size: var(--wr-tag-font-size);
@@ -66,13 +75,13 @@
       --wr-tag-border: var(--wr-color-#{$name});
 
       &.wr-tag--outlined {
-        --wr-tag-color: var(--wr-color-#{$name});
+        --wr-tag-color: var(--wr-color-#{$name}-ink);
         --wr-tag-bg: rgba(var(--wr-color-#{$name}-rgb), 0.06);
         --wr-tag-border: rgba(var(--wr-color-#{$name}-rgb), 0.25);
       }
 
       &.wr-tag--transparent {
-        --wr-tag-color: var(--wr-color-#{$name});
+        --wr-tag-color: var(--wr-color-#{$name}-ink);
         --wr-tag-bg: rgba(var(--wr-color-#{$name}-rgb), 0.1);
         --wr-tag-border: transparent;
       }

package/border-glow/styles/_index.scss

@@ -1,3 +1,8 @@
+// Pull the whole theme so a standalone `@use 'ngwr/<name>'` brings in every
+// design token this stylesheet references. Sass deduplicates `@use` per
+// compilation, so the umbrella sheet still emits the theme only once.
+@use '../../theme/styles' as theme;
+
 // Cursor-tracked border glow — ports the reactbits.dev BorderGlow effect.
 // All visual state is driven by two custom properties the component writes:
 //   --wr-border-glow-edge-proximity   0..100, scales with pointer-to-edge distance

package/button/styles/_index.scss

@@ -59,6 +59,15 @@
     --wr-icon-size: var(--wr-btn-icon-size);
     color: inherit;
     flex: 0 0 auto;
+
+    // Lucide and feather draw on a 24-unit grid with a 2-unit safe area, so a
+    // twelfth of the icon box is transparent on each side. `padding-x` sits
+    // outside that slack and `gap` inside it, so the declared numbers and the
+    // optical ones diverge — measured at md: 14.6px from the button edge to the
+    // first ink against 11.9px on the label side, and 8.7px to the label against
+    // a declared 6px gap. Reclaiming the slack makes the spacing look like what
+    // the tokens say.
+    margin-inline: calc(var(--wr-btn-icon-size) / -12);
   }
 
   &__spin {
@@ -72,6 +81,39 @@
   &__label {
     flex: 0 1 auto;
     min-width: 0;
+
+    // Icon-only buttons project no content, but the label span is still in the
+    // template — as a zero-width flex item it kept claiming its share of `gap`
+    // and pushed the glyph off-centre by exactly gap/2. Taking it out of the
+    // flow removes the gap with it.
+    &:empty {
+      display: none;
+    }
+  }
+
+  // Icon-only — square, at any density and any size.
+  //
+  // The height is intrinsic (`line-height + 2·padding-y + 2·border`), so nothing
+  // can be hardcoded and `aspect-ratio` has no definite axis to work from. Both
+  // axes reduce to the same expression instead: mirror the block padding on the
+  // inline axis, and give the icon box the line-height as its square. The glyph
+  // keeps its own `--wr-btn-icon-size` and centres inside that box.
+  //
+  // `block` is excluded — it is width:100% by contract, and squaring it would
+  // turn a full-width button into a giant tile.
+  &:has(> &__label:empty):not(&--block) {
+    padding-inline: calc(var(--wr-btn-padding-y) * var(--wr-density-y, 1));
+
+    .wr-btn__icon {
+      width: var(--wr-btn-line-height);
+      height: var(--wr-btn-line-height);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      // No label to sit next to, so there is no optical gap to correct — and a
+      // negative margin here would pull the glyph off the square's centre.
+      margin-inline: 0;
+    }
   }
 
   // Sizes — share the `--wr-control-*` contract (22 / 30 / 36 px) so button,
@@ -155,7 +197,12 @@
       }
 
       &.wr-btn--outlined {
-        --wr-btn-color: var(--wr-color-#{$name});
+        // `-ink` is the intent darkened (light) / lightened (dark) until it
+        // clears 4.5:1 as its own label — the base hue does not: in light,
+        // warning as a label is 1.71:1. `--wr-color-light-ink` resolves to the
+        // page's own ink, which is why the `light` special case is gone; the
+        // border still carries the intent.
+        --wr-btn-color: var(--wr-color-#{$name}-ink);
         --wr-btn-bg: transparent;
         --wr-btn-border: rgba(var(--wr-color-#{$name}-rgb), 0.4);
 

package/calendar/styles/_index.scss

@@ -115,7 +115,15 @@
     letter-spacing: 0.04em;
   }
 
-  // Day grid
+  // Day grid. `__body` exists so the weekday row and the week rows share a
+  // `role="grid"` parent; it repeats the host's column gap so the two-sibling
+  // layout it replaced renders identically.
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
   &__grid {
     display: flex;
     flex-direction: column;

package/circular-text/styles/_index.scss

@@ -1,3 +1,8 @@
+// Pull the whole theme so a standalone `@use 'ngwr/<name>'` brings in every
+// design token this stylesheet references. Sass deduplicates `@use` per
+// compilation, so the umbrella sheet still emits the theme only once.
+@use '../../theme/styles' as theme;
+
 // Circular text (reactbits port). Each char is absolutely positioned at
 // the spinner's centre, then transformed `rotate() translateY(-radius)`
 // so it lands on the perimeter of a circle of constant radius. The host
@@ -17,7 +22,7 @@
   font-weight: 700;
   text-align: center;
   user-select: none;
-  transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4);
+  transition: transform 0.6s var(--wr-ease-spring);
 
   &__spin {
     position: absolute;

package/density/styles/_index.scss

@@ -1,7 +1,7 @@
 // Density multipliers. Components multiply their paddings (and the
 // occasional height / line-height) by these scalars via `calc()`.
 //
-// `default` resolves to `1` everywhere — touching `data-wr-density` is
+// `md` resolves to `1` everywhere — touching `data-wr-density` is
 // pure opt-in. Components without density-aware paddings just keep
 // their static values.
 //
@@ -11,6 +11,8 @@
 :root {
   --wr-density-y: 1;
   --wr-density-x: 1;
+  // `-text` and `-gap` are declared for consumers to read; no shipped
+  // component multiplies by either yet. `-y` / `-x` are the live ones.
   --wr-density-text: 1;
   --wr-density-gap: 1;
 }

package/dialog/styles/_index.scss

@@ -39,7 +39,7 @@
   z-index: 1000;
   pointer-events: auto;
   opacity: 0;
-  transition: opacity 200ms cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition: opacity 200ms var(--wr-ease-out);
 }
 
 .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
@@ -61,6 +61,19 @@
 
   display: flex;
   flex-direction: column;
+  // Containing block for the corner dismiss button — see `.wr-dialog__close`.
+  //
+  // `!important` is load-bearing, not laziness. Service-opened overlays use CDK's
+  // `GlobalPositionStrategy`, which positions `.cdk-global-overlay-wrapper` and
+  // writes `position: static` INLINE onto the pane — and here the pane IS the
+  // panel. Inline beats any ordinary rule, and setting it imperatively does not
+  // survive either: CDK re-applies the strategy after the overlay is attached.
+  //
+  // Layout-neutral: the pane stays a flex item of the wrapper and is centred
+  // exactly as before; `relative` with no offsets only establishes the containing
+  // block (and activates the `z-index` that `.cdk-overlay-pane` already declares,
+  // identically for every pane, so relative stacking is unchanged).
+  position: relative !important;
   min-width: var(--wr-dialog-min-width);
   max-width: calc(100vw - 2rem);
   max-height: calc(100vh - 2rem);
@@ -87,6 +100,58 @@
     border-bottom: 1px solid var(--wr-color-outline);
   }
 
+  // Built-in dismiss (×), parked in the panel's top-right corner. The service
+  // adds it — and `--closable` alongside it — unless `closable: false`.
+  &__close {
+    position: absolute;
+    // Centre on the title's first line: its text box starts one padding-y down
+    // and is 1.5rem tall.
+    inset-block-start: calc(var(--wr-dialog-padding-y) + 0.75rem);
+    inset-inline-end: var(--wr-dialog-padding-x);
+    transform: translateY(-50%);
+    z-index: 1;
+
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0.25rem;
+    color: var(--wr-color-on-surface-muted);
+    cursor: pointer;
+    border-radius: var(--wr-border-radius-sm);
+    transition:
+      color var(--wr-transition-base),
+      background var(--wr-transition-base);
+
+    // The glyph is a bare `.wr-icon__svg`, sized in `em` — so pin the font-size
+    // rather than `--wr-icon-size` (which only drives `<wr-icon>` hosts). Gives a
+    // deterministic 16px ✕ in a 24px box instead of inheriting whatever the
+    // surrounding text happens to be.
+    font-size: 1rem;
+    line-height: 0;
+
+    // `$positioned: true` — the default would set `position: relative` under
+    // `(pointer: coarse)` and drop the button out of the corner on touch.
+    @include theme.touch-target($positioned: true); // 16px glyph -> 44px tap area
+
+    &:hover {
+      color: var(--wr-color-on-surface);
+      background: var(--wr-color-hover);
+    }
+
+    &:focus-visible {
+      @include theme.focus-ring;
+    }
+  }
+
+  // Reserve the gutter so a long heading wraps instead of running under the ×.
+  // The modifier belongs to the panel block (`wr-dialog-panel`), which is the
+  // element the service tags; `wr-dialog__*` are the parts inside it.
+  .wr-dialog-panel--closable & {
+    &__title {
+      padding-inline-end: calc(var(--wr-dialog-padding-x) + 1.75rem);
+    }
+  }
+
   &__content {
     padding: var(--wr-dialog-padding-y) var(--wr-dialog-padding-x);
     overflow: auto;
@@ -124,4 +189,3 @@
     transform: scale(1);
   }
 }
-

package/drag-drop/styles/_index.scss

@@ -7,8 +7,10 @@
 //   .cdk-drag-preview     — floating preview that follows the cursor
 //   .cdk-drag-placeholder — empty slot left at the source position
 //   .cdk-drag-animating   — in the post-drop settle animation
-// We theme them so the default look matches the rest of the lib; apps
-// can override `.cdk-drag-preview` etc. per drop list.
+// Every one of them is qualified with a `.wr-sortable-list*` class. Bare
+// `.cdk-drag-*` rules are global, and a UI library has no business restyling
+// a consumer's own CDK drop lists — nor `wr-table`'s column drag, which was
+// picking up this component's dashed placeholder and lift shadow.
 
 .wr-sortable-list {
   display: block;
@@ -71,7 +73,11 @@
 
 // CDK overlays applied by drag-drop
 
-.cdk-drag-preview {
+// The preview is a CLONE of the dragged row that CDK moves to `document.body`,
+// so an ancestor selector cannot reach it — but the clone keeps the row's own
+// class, which can. Verified on a real drag: the preview lands in `<body>`
+// carrying `cdk-drag wr-sortable-list__item cdk-drag-preview`.
+.cdk-drag-preview.wr-sortable-list__item {
   box-sizing: border-box;
   color: var(--wr-color-on-surface);
   font-family: var(--wr-font-family-base);
@@ -86,7 +92,8 @@
   // CDK sets pointer-events to none on the preview; we keep visuals only.
 }
 
-.cdk-drag-placeholder {
+// The placeholder stays in the list, so scoping by ancestor is enough here.
+.wr-sortable-list .cdk-drag-placeholder {
   opacity: 0.35;
   // Subtle dashed outline so users see where the item came from.
   background: rgba(var(--wr-color-outline-rgb), 0.6);
@@ -95,10 +102,16 @@
   outline-offset: -1px;
 }
 
-.cdk-drag-animating {
-  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.1);
+// Also the preview, not a row in the list: CDK keeps `cdk-drag-preview` on the
+// clone and adds `cdk-drag-animating` while it flies back to the drop slot.
+// Verified on a real drop — the element carries
+// `cdk-drag wr-sortable-list__item cdk-drag-preview cdk-drag-animating` and sits
+// in `<body>`. It has to come after the preview rule, which sets
+// `transition: none` at the same specificity.
+.cdk-drag-animating.wr-sortable-list__item {
+  transition: transform 0.18s var(--wr-ease-spring);
 }
 
 .wr-sortable-list__list.cdk-drop-list-dragging .wr-sortable-list__item:not(.cdk-drag-placeholder) {
-  transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.1);
+  transition: transform 0.18s var(--wr-ease-spring);
 }

package/drawer/styles/_index.scss

@@ -31,7 +31,10 @@
 // between the panel and the title / content / footer slots, so the panel's
 // column layout stops one level short: the footer wouldn't pin to the bottom
 // and the body wouldn't scroll. Pass the layout through the interposed host.
-.wr-drawer-overlay.wr-drawer__panel > * {
+// `:not(.wr-drawer__close)` — the dismiss button is a direct child too, and it
+// is corner-positioned chrome, not the content column. Left in, `width: 100%`
+// stretched it across the whole panel.
+.wr-drawer-overlay.wr-drawer__panel > *:not(.wr-drawer__close) {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
@@ -47,6 +50,18 @@
 
   display: flex;
   flex-direction: column;
+  // Anchor for the corner dismiss button. The panel is the overlay pane itself
+  // for service drawers but a nested div for `<wr-drawer>`.
+  //
+  // `!important` for the service case: CDK's `GlobalPositionStrategy` writes
+  // `position: static` inline onto the pane and re-applies it after attach, so
+  // neither a plain rule nor an imperative assignment survives. Harmless for the
+  // component case, where the panel is an ordinary div we own.
+  //
+  // A right-edge drawer hid this bug for a while — its top-right corner coincides
+  // with the viewport's, so the misplaced button looked correct. Any other side
+  // exposes it immediately.
+  position: relative !important;
   width: 100%;
   height: 100%;
   background: var(--wr-drawer-bg);
@@ -134,6 +149,51 @@
     border-bottom: 1px solid var(--wr-color-outline);
   }
 
+  // Built-in dismiss (×) in the panel's top-right corner — rendered by the
+  // component template, appended by `WrDrawerManager` for service drawers.
+  &__close {
+    position: absolute;
+    // Centre on the title's first line: 1rem of padding, then a 1.5rem text box.
+    inset-block-start: 1.75rem;
+    inset-inline-end: 1.25rem;
+    transform: translateY(-50%);
+    z-index: 1;
+
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0.25rem;
+    color: var(--wr-color-on-surface-muted);
+    cursor: pointer;
+    border-radius: var(--wr-border-radius-sm);
+    transition:
+      color var(--wr-transition-base),
+      background var(--wr-transition-base);
+
+    // Sized via font-size, not `--wr-icon-size`: the glyph is a bare
+    // `.wr-icon__svg`, which measures itself in `em`.
+    font-size: 1rem;
+    line-height: 0;
+
+    // `$positioned: true` — the default sets `position: relative` under
+    // `(pointer: coarse)`, which would drop the button out of the corner.
+    @include theme.touch-target($positioned: true);
+
+    &:hover {
+      color: var(--wr-color-on-surface);
+      background: var(--wr-color-hover);
+    }
+
+    &:focus-visible {
+      @include theme.focus-ring;
+    }
+  }
+
+  // Reserve the gutter so a long heading wraps instead of running under the ×.
+  &__panel--closable &__title {
+    padding-inline-end: 3rem;
+  }
+
   &__content {
     flex: 1 1 auto;
     padding: 1rem 1.25rem;