ngwr 10.0.0 → 10.2.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.
@@ -175,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).
 
@@ -213,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`
 
@@ -239,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/alert/styles/_index.scss

@@ -19,7 +19,11 @@ $alert-colors: (
   // Defaults — overridden per variant below.
   --wr-alert-bg: var(--wr-color-info-soft);
   --wr-alert-border: var(--wr-color-info-soft-border);
-  --wr-alert-title: var(--wr-color-info);
+  // `-ink`, never the bare intent: this is the intent used AS TEXT on its own
+  // soft tint, and a bare `--wr-color-warning` there is 1.71:1 in the light
+  // theme. See the token note in AGENTS.md — `-contrast` is the other
+  // direction, a label ON a filled intent.
+  --wr-alert-title: var(--wr-color-info-ink);
   --wr-alert-message: var(--wr-color-on-surface);
   --wr-alert-close: var(--wr-color-info);
 
@@ -100,8 +104,8 @@ $alert-colors: (
     &--#{$variant} {
       --wr-alert-bg: var(--wr-color-#{$color}-soft);
       --wr-alert-border: var(--wr-color-#{$color}-soft-border);
-      --wr-alert-title: var(--wr-color-#{$color});
-      --wr-alert-close: var(--wr-color-#{$color});
+      --wr-alert-title: var(--wr-color-#{$color}-ink);
+      --wr-alert-close: var(--wr-color-#{$color}-ink);
     }
   }
 

package/badge/styles/_index.scss

@@ -87,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

@@ -75,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/breadcrumbs/styles/_index.scss

@@ -9,7 +9,7 @@
   --wr-breadcrumbs-gap: 0.5rem;
   --wr-breadcrumbs-color: rgba(var(--wr-color-on-surface-rgb), 0.6);
   --wr-breadcrumbs-current-color: var(--wr-color-on-surface);
-  --wr-breadcrumbs-link-color: var(--wr-color-primary);
+  --wr-breadcrumbs-link-color: var(--wr-color-primary-ink);
   --wr-breadcrumbs-separator-color: rgba(var(--wr-color-on-surface-rgb), 0.3);
 
   display: block;

package/button/styles/_index.scss

@@ -197,12 +197,12 @@
       }
 
       &.wr-btn--outlined {
-        // `light` is a surface tone by definition — a hair off the page
-        // background in either theme — so using it as the label color lands at
-        // 1.4:1 and the button reads as blank. Borrow the page's own ink there;
-        // the border still carries the intent. Every other intent is a real hue
-        // and clears 4.7:1 as its own label color.
-        --wr-btn-color: #{if($name == light, var(--wr-color-on-surface), 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 {
@@ -189,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/event-calendar/styles/_index.scss

@@ -0,0 +1,284 @@
+/// Event calendar — month / week / day.
+///
+/// Grid lines are `box-shadow: inset`, never borders. A border would take up
+/// layout space, and the whole chip model depends on cell boxes being exactly
+/// contiguous: a band's `calc(var(--span) * 100%)` is only the right width if
+/// one cell ends precisely where the next begins.
+.wr-event-calendar {
+  --wr-event-calendar-slot-height: 1.5rem;
+  --wr-event-calendar-band-height: 1.25rem;
+  --wr-event-calendar-gutter: 3.75rem;
+  --wr-event-calendar-line: var(--wr-color-outline);
+  // The house fill for a header strip — `wr-table` and `wr-transfer` use the
+  // same one. NOT `--wr-color-light`, which is an intent colour: it composites
+  // dark enough that `--wr-color-on-surface-muted` on top of it lands at 3.6:1.
+  --wr-event-calendar-fill: rgba(var(--wr-color-outline-rgb), 0.25);
+  --wr-event-calendar-cols: 7;
+
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  color: var(--wr-color-on-surface);
+
+  &__header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem 0.75rem;
+  }
+
+  &__nav {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  &__step .wr-icon__svg {
+    width: 1em;
+    height: 1em;
+  }
+
+  &__title {
+    flex: 1 1 auto;
+    margin: 0;
+    font-size: var(--wr-text-lg);
+    font-weight: var(--wr-font-weight-semibold);
+  }
+
+  &__grid {
+    display: grid;
+    overflow: hidden;
+    border-radius: var(--wr-border-radius-base);
+    box-shadow: 0 0 0 1px var(--wr-event-calendar-line);
+
+    &--month {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+
+    &--time {
+      grid-template-columns: var(--wr-event-calendar-gutter) repeat(var(--wr-event-calendar-cols), minmax(0, 1fr));
+    }
+  }
+
+  // The row box is dissolved so its cells land on the parent grid; the ARIA
+  // role survives — `display: contents` removes the box, not the semantics.
+  &__row {
+    display: contents;
+  }
+
+  &__weekday,
+  &__colhead {
+    padding: 0.5rem 0.375rem;
+    font-size: var(--wr-text-xs);
+    font-weight: var(--wr-font-weight-medium);
+    color: var(--wr-color-on-surface-muted);
+    text-align: center;
+    background: var(--wr-event-calendar-fill);
+    box-shadow: inset 0 -1px 0 var(--wr-event-calendar-line);
+  }
+
+  &__colhead {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+
+    &--today {
+      color: var(--wr-color-primary-ink);
+    }
+
+    &-day {
+      font-size: var(--wr-text-base);
+      font-weight: var(--wr-font-weight-semibold);
+      color: var(--wr-color-on-surface);
+    }
+  }
+
+  &__gutter {
+    padding: 0 0.5rem;
+    font-size: var(--wr-text-xs);
+    color: var(--wr-color-on-surface-muted);
+    text-align: end;
+    // Nudged up so the label reads as the line it labels, not the band below it.
+    transform: translateY(-0.5em);
+    box-shadow: inset -1px 0 0 var(--wr-event-calendar-line);
+  }
+
+  &__cell {
+    // `relative` with NO z-index: that keeps the cell out of the stacking
+    // order, so a chip's `z-index: 1` lifts it over the cells that follow it in
+    // the DOM. Give the cell a z-index and it becomes a stacking context, and
+    // every chip is trapped inside its own cell again.
+    position: relative;
+    min-width: 0;
+    cursor: pointer;
+    box-shadow: inset -1px -1px 0 var(--wr-event-calendar-line);
+
+    &:focus-visible {
+      z-index: 2;
+      outline: 2px solid var(--wr-color-primary);
+      outline-offset: -2px;
+    }
+
+    &--day {
+      min-height: 5.5rem;
+      padding: 0.25rem;
+    }
+
+    &--muted {
+      background: var(--wr-event-calendar-fill);
+
+      .wr-event-calendar__daynum {
+        color: var(--wr-color-on-surface-muted);
+      }
+    }
+
+    &--today .wr-event-calendar__daynum {
+      color: var(--wr-color-primary-contrast);
+      background: var(--wr-color-primary);
+    }
+
+    &--allday {
+      min-height: calc(var(--wr-event-calendar-band-height) + 0.5rem);
+      padding: 0.125rem 0;
+    }
+
+    &--slot {
+      height: var(--wr-event-calendar-slot-height);
+      box-shadow: inset -1px 0 0 var(--wr-event-calendar-line);
+    }
+
+    &--major {
+      box-shadow:
+        inset -1px 0 0 var(--wr-event-calendar-line),
+        inset 0 1px 0 var(--wr-event-calendar-line);
+    }
+  }
+
+  &__daynum {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.5rem;
+    height: 1.5rem;
+    font-size: var(--wr-text-sm);
+    border-radius: var(--wr-border-radius-pill);
+  }
+
+  &__chip {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    gap: 0.25rem;
+    align-items: baseline;
+    overflow: hidden;
+    font: inherit;
+    font-size: var(--wr-text-xs);
+    line-height: 1.2;
+    color: var(--wr-color-on-surface);
+    text-align: start;
+    white-space: nowrap;
+    cursor: inherit;
+    background: color-mix(in srgb, var(--wr-event-calendar-color) 18%, transparent);
+    border: 0;
+    border-inline-start: 3px solid var(--wr-event-calendar-color);
+    border-radius: var(--wr-border-radius-sm);
+    transition: filter var(--wr-transition-short);
+
+    &:hover {
+      filter: brightness(0.96);
+    }
+
+    &:focus-visible {
+      z-index: 3;
+      outline: 2px solid var(--wr-color-primary);
+      outline-offset: 1px;
+    }
+
+    &--band {
+      inset-inline-start: 0.125rem;
+      top: calc(
+        var(--wr-event-calendar-offset) + var(--wr-event-calendar-lane) *
+          (var(--wr-event-calendar-band-height) + 0.125rem)
+      );
+      // Reaching across `--span` cells: each is exactly 100% of this one,
+      // because the grid has no gaps and the lines cost no layout space.
+      width: calc(var(--wr-event-calendar-span) * 100% - 0.25rem);
+      height: var(--wr-event-calendar-band-height);
+      padding: 0 0.375rem;
+    }
+
+    &--time {
+      padding: 0.125rem 0.25rem;
+      flex-direction: column;
+      gap: 0;
+      align-items: stretch;
+      white-space: normal;
+    }
+
+    // A segment clipped by the edge of the view loses the rounding on that side,
+    // so a week boundary reads as "continues" rather than "ends here".
+    &--continues-before {
+      border-inline-start-width: 0;
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+    }
+
+    &--continues-after {
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+    &--dragging {
+      // Off the hit-testing path: the drop target is read with
+      // `elementFromPoint`, which would otherwise only ever see the chip.
+      pointer-events: none;
+      opacity: 0.6;
+    }
+
+    &-time {
+      font-weight: var(--wr-font-weight-medium);
+      color: var(--wr-color-on-surface-muted);
+    }
+
+    &-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &__resize {
+    position: absolute;
+    inset-inline: 0;
+    bottom: 0;
+    height: 0.375rem;
+    cursor: ns-resize;
+  }
+
+  &__more {
+    position: absolute;
+    inset-inline-start: 0.125rem;
+    top: calc(1.75rem + var(--wr-event-calendar-lane) * (var(--wr-event-calendar-band-height) + 0.125rem));
+    padding: 0 0.375rem;
+    font: inherit;
+    font-size: var(--wr-text-xs);
+    color: var(--wr-color-on-surface-muted);
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: var(--wr-border-radius-sm);
+
+    &:hover {
+      color: var(--wr-color-on-surface);
+      text-decoration: underline;
+    }
+  }
+
+  &--editable &__chip {
+    cursor: grab;
+  }
+
+  &--dragging {
+    cursor: grabbing;
+    user-select: none;
+  }
+}

package/falling-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;
+
 .wr-falling-text {
   position: relative;
   display: block;