ngwr 14.12.1 → 15.0.0-rc.0

package/README.md

@@ -37,14 +37,16 @@ export class SignupCard {
   private readonly model = signal({ email: '', agree: false });
 
   readonly signup = form(this.model, path => {
-    required(path.email);
-    email(path.email);
+    required(path.email, { message: 'Enter your work email.' });
+    email(path.email, { message: 'That is not an email address.' });
   });
 }
 ```
 
-`<wr-form-field>` shows the validation messages itself, so there is no error
-markup to write. Template-driven and reactive forms bind too, with limits the
+`<wr-form-field>` shows each rule's `message`, so there is no error markup to
+write. ngwr ships no validation copy of its own: for a rule without a message,
+the field reads `validation.<key>` from your i18n catalog. Template-driven and
+reactive forms bind too, with limits the
 [forms guide](https://ngwr.dev/guides/forms) lists.
 
 ## Features
@@ -54,7 +56,7 @@ markup to write. Template-driven and reactive forms bind too, with limits the
 - One import path per component (`ngwr/button`, `ngwr/select`). The only
   runtime dependency is `tslib`.
 - [Theming](https://ngwr.dev/guides/theming) through `--wr-*` CSS custom
-  properties, with light and dark modes.
+  properties, with light and dark modes that follow `color-scheme`.
 - Keyboard and screen reader support based on the WAI-ARIA patterns.
 - Translatable built-in labels and right-to-left layouts.
 - Angular CDK [test harnesses](https://ngwr.dev/guides/testing) for the form
@@ -70,8 +72,8 @@ services and validators are in the [reference](https://ngwr.dev/reference).
 ng add ngwr
 ```
 
-The schematic asks a few questions, adds `@use 'ngwr';` to your global Sass
-stylesheet and prints the providers to add to your app.
+The schematic asks a few questions, adds `@use 'ngwr/theme';` to your global
+Sass stylesheet and prints the providers to add to your app.
 
 Or install the packages yourself:
 
@@ -83,26 +85,25 @@ npm install ngwr @angular/cdk
 yarn add ngwr @angular/cdk
 ```
 
-The optional packages (a date library, an icon set, ProseMirror for the editor)
-are listed in the [installation guide](https://ngwr.dev/start/installation).
+The optional packages (an icon set, ProseMirror for the editor) are listed in
+the [installation guide](https://ngwr.dev/start/installation).
 
 ## Styles
 
-```scss
-// styles.scss
-@use 'ngwr';
-```
-
-This loads the theme and the styles of every component. To keep the stylesheet
-small, load only the components you use. Each entry brings the theme with it:
+One `@use` per thing you render, with the token layer on the first line. There
+is no umbrella stylesheet: each component brings the theme with it and Sass
+emits it once, but only a module's first load can take `with ()`, which is
+where `$base-colors` goes.
 
 ```scss
+// styles.scss
+@use 'ngwr/theme';
 @use 'ngwr/form';
 @use 'ngwr/input';
 @use 'ngwr/checkbox';
 ```
 
-Utilities are opt-in and are not part of `@use 'ngwr'`:
+Utilities are opt-in and come with nothing:
 
 ```scss
 @use 'ngwr/reset'; // box-sizing, body margin, sane defaults
@@ -112,6 +113,28 @@ Utilities are opt-in and are not part of `@use 'ngwr'`:
 @use 'ngwr/breakpoints' as bp; // Sass mixins only, no CSS output
 ```
 
+## Configuration
+
+Nothing has to be configured. When you want app-wide settings, they go through
+one `provideWr()` call, with a feature for each thing you set, imported from
+its own entry point:
+
+```ts
+import { provideWr } from 'ngwr';
+import { withDensity } from 'ngwr/density';
+import { withTheme } from 'ngwr/theme';
+
+providers: [
+  provideWr(
+    withDensity({ defaultDensity: 'sm' }),
+    withTheme({ defaultMode: 'dark' }),
+  ),
+],
+```
+
+Icons and translations have calls of their own. The
+[configuration guide](https://ngwr.dev/docs/configuration) lists every feature.
+
 ## Upgrading
 
 ```sh

package/affix/styles/_index.scss

@@ -1,12 +1,15 @@
-// Minimal styles — the directive does most of the work inline. We just
-// expose a class hook so consumers can style the "stuck" state.
+// Almost nothing — the directive does the work inline. This layer owns one
+// declaration, the stacking order below, and otherwise only exposes the class
+// hook a consumer styles the "stuck" state with.
 //
 // The directive sets `position: sticky; top: <offset>px` on the host and
 // toggles `wr-affix--active` via an IntersectionObserver sentinel.
 
 .wr-affix {
-  // No baseline styles intentionally — the host is the consumer's
-  // element. We only own the `position: sticky` (set inline) and the
-  // optional active modifier.
+  // The host is the consumer's element, so the only thing this layer owns is
+  // the stacking order: a pinned element has to sit above the content that
+  // scrolls under it. There is no token for it — out-specify `.wr-affix` to
+  // restack. `position: sticky` and `top` are set inline by the directive, and
+  // the active modifier is the consumer's to style.
   z-index: 10;
 }

package/alert/styles/_index.scss

@@ -1,5 +1,19 @@
 @use '../../theme/styles' as theme;
 
+// Styles for the entry points this component's own markup renders.
+//
+// v15 removed the `@use 'ngwr'` umbrella, which is what had been covering these:
+// a consumer now writes one `@use` per component they place, and never learns
+// about the ones a component places INSIDE itself. `@use 'ngwr/date-picker'`
+// alone gave a date field with a raw browser input — grey, square, 2px inset —
+// and `@use 'ngwr/table'` a table with unstyled checkboxes and pager. Nothing
+// says so: the component renders, the markup is right, and no build, console or
+// gate has an opinion about a missing rule.
+//
+// Sass deduplicates `@use` within a compilation, so an app that also loads one of
+// these by hand still emits it once.
+@use '../../icon/styles' as icon-styles; // WrIcon
+
 $alert-colors: (
   info: info,
   success: success,
@@ -10,7 +24,7 @@ $alert-colors: (
 .wr-alert {
   display: flex;
   align-items: stretch;
-  gap: 0.75rem;
+  gap: var(--wr-alert-gap);
   // Claim the full row even when nested in a flex-row demo wrapper.
   flex: 1 1 100%;
   width: 100%;
@@ -37,10 +51,25 @@ $alert-colors: (
   --wr-alert-message: var(--wr-color-on-surface);
   --wr-alert-close: var(--wr-color-info);
 
+  --wr-alert-radius: var(--wr-border-radius-base);
+  --wr-alert-gap: var(--wr-space-md);
+  --wr-alert-padding-y: var(--wr-space-md);
+  --wr-alert-padding-x: var(--wr-space-lg);
+  --wr-alert-body-gap: var(--wr-space-xs);
+  --wr-alert-icon-margin-top: var(--wr-space-xs);
+  --wr-alert-font-family: var(--wr-font-family-base);
+  --wr-alert-title-font-size: var(--wr-text-sm);
+  --wr-alert-title-font-weight: var(--wr-font-weight-semibold);
+  --wr-alert-title-line-height: var(--wr-text-sm-leading);
+  --wr-alert-message-font-size: var(--wr-text-sm);
+  --wr-alert-message-line-height: var(--wr-text-sm-leading);
+  --wr-alert-close-padding: var(--wr-space-xs);
+  --wr-alert-close-radius: var(--wr-border-radius-sm);
+
   background: var(--wr-alert-bg);
   border: 1px solid var(--wr-alert-border);
-  @include theme.smooth-br(var(--wr-border-radius-base));
-  padding: 0.625rem 0.875rem;
+  @include theme.smooth-br(var(--wr-alert-radius));
+  padding: var(--wr-alert-padding-y) var(--wr-alert-padding-x);
 
   &--dismissed {
     display: none;
@@ -50,7 +79,7 @@ $alert-colors: (
     flex: 0 0 auto;
     width: 1.125rem;
     height: 1.125rem;
-    margin-top: 0.125rem;
+    margin-top: var(--wr-alert-icon-margin-top);
     color: var(--wr-alert-title);
     // A custom `<wr-icon>` sizes via this var, not width/height.
     --wr-icon-size: 1.125rem;
@@ -66,25 +95,25 @@ $alert-colors: (
     flex: 1 1 auto;
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
+    gap: var(--wr-alert-body-gap);
     min-width: 0;
   }
 
   &__title {
     margin: 0;
     color: var(--wr-alert-title);
-    font-family: var(--wr-font-family-base);
-    font-size: var(--wr-text-sm);
-    font-weight: 600;
-    line-height: 1.25rem;
+    font-family: var(--wr-alert-font-family);
+    font-size: var(--wr-alert-title-font-size);
+    font-weight: var(--wr-alert-title-font-weight);
+    line-height: var(--wr-alert-title-line-height);
   }
 
   &__message {
     margin: 0;
     color: var(--wr-alert-message);
-    font-family: var(--wr-font-family-base);
-    font-size: var(--wr-text-sm);
-    line-height: 1.125rem;
+    font-family: var(--wr-alert-font-family);
+    font-size: var(--wr-alert-message-font-size);
+    line-height: var(--wr-alert-message-line-height);
   }
 
   &__close {
@@ -92,10 +121,10 @@ $alert-colors: (
     appearance: none;
     background: transparent;
     border: 0;
-    padding: 0.125rem;
+    padding: var(--wr-alert-close-padding);
     color: var(--wr-alert-close);
     cursor: pointer;
-    border-radius: var(--wr-border-radius-sm);
+    border-radius: var(--wr-alert-close-radius);
     transition:
       color var(--wr-transition-base),
       background var(--wr-transition-base);
@@ -121,10 +150,6 @@ $alert-colors: (
     }
   }
 
-  // color-ok: each type draws its OWN glyph in alert.html — a check in a broken
-  // circle, a triangle, an octagon, an `i` — so these hooks only ink a
-  // silhouette that already differs. `[icon]="false"` or an `iconName` hands
-  // that channel to the author, whose title then has to name the state.
   @each $variant, $color in $alert-colors {
     &--#{$variant} {
       --wr-alert-bg: var(--wr-color-#{$color}-soft);
@@ -134,11 +159,8 @@ $alert-colors: (
   }
 
   // Neutral — muted gray chip, reusing the `medium` soft tokens.
-  // color-ok: its own glyph in alert.html, a bar in a circle, is what tells it
-  // from `danger` — the two paints sit on tints 1.036:1 apart, which is a hue
-  // difference and little else (measured in the template's comment).
   &--neutral {
-    --wr-alert-bg: var(--wr-color-medium-soft);
+    --wr-alert-bg: var(--wr-color-fill);
     --wr-alert-title: var(--wr-color-on-surface);
     --wr-alert-message: var(--wr-color-on-surface-muted);
     --wr-alert-close: var(--wr-color-on-surface-muted);
@@ -150,9 +172,6 @@ $alert-colors: (
 
   // Offline — inverse chip. Auto-flips via the theme tokens: dark bg +
   // light text in light theme; light bg + dark text in dark theme.
-  // color-ok: its own glyph in alert.html, a slashed circle — and the inverted
-  // chip is a LIGHTNESS change, an `on-surface` fill under `surface` text, the
-  // far end of the scale from every other type's pale tint.
   &--offline {
     --wr-alert-bg: var(--wr-color-on-surface);
     --wr-alert-title: var(--wr-color-surface);

package/anchor/styles/_index.scss

@@ -1,9 +1,25 @@
 @use '../../theme/styles' as theme;
 
 .wr-anchor {
+  --wr-anchor-font-family: var(--wr-font-family-base);
+  --wr-anchor-border: var(--wr-border-base);
+  --wr-anchor-list-gap: var(--wr-space-xs);
+  --wr-anchor-list-nested-margin-top: var(--wr-space-xs);
+  --wr-anchor-link-padding-y: var(--wr-space-xs);
+  --wr-anchor-link-padding-x: var(--wr-space-sm);
+  --wr-anchor-link-radius: var(--wr-border-radius-sm);
+  --wr-anchor-link-font-size: var(--wr-text-sm);
+  --wr-anchor-link-line-height: var(--wr-leading-snug);
+  --wr-anchor-link-active-font-weight: var(--wr-font-weight-semibold);
+
   display: block;
-  font-family: var(--wr-font-family-base);
-  border-inline-start: 1.5px solid var(--wr-color-outline);
+  font-family: var(--wr-anchor-font-family);
+  border-inline-start: 1.5px solid var(--wr-anchor-border);
+  // NOT on the spacing scale: the active rail at `inset-inline-start: -1rem`
+  // below is solved against this 14px indent plus the host's 1.5px border, so
+  // the 1.5px bar lands at -0.5px and overlaps the rail it replaces. The
+  // scale's nearest step is 16px, which paints the bar at 1.5px and opens a
+  // gap between the marker and the rail at every nesting level.
   padding-inline-start: 0.875rem;
 
   &__list {
@@ -12,10 +28,10 @@
     padding: 0;
     display: flex;
     flex-direction: column;
-    gap: 0.125rem;
+    gap: var(--wr-anchor-list-gap);
 
     &--nested {
-      margin-top: 0.125rem;
+      margin-top: var(--wr-anchor-list-nested-margin-top);
       padding-inline-start: 0.875rem;
     }
   }
@@ -23,11 +39,11 @@
   &__link {
     position: relative;
     display: block;
-    padding: 0.25rem 0.5rem;
-    border-radius: var(--wr-border-radius-sm);
+    padding: var(--wr-anchor-link-padding-y) var(--wr-anchor-link-padding-x);
+    border-radius: var(--wr-anchor-link-radius);
     color: var(--wr-color-on-surface-muted);
-    font-size: var(--wr-text-sm);
-    line-height: var(--wr-leading-snug);
+    font-size: var(--wr-anchor-link-font-size);
+    line-height: var(--wr-anchor-link-line-height);
     transition:
       color var(--wr-transition-base),
       background var(--wr-transition-base);
@@ -50,7 +66,7 @@
     &--active {
       // Text, on the page surface — `-ink` is the token for the intent AS text.
       color: var(--wr-color-primary-ink);
-      font-weight: var(--wr-font-weight-semibold);
+      font-weight: var(--wr-anchor-link-active-font-weight);
 
       &::before {
         background: var(--wr-color-primary);

package/avatar/styles/_index.scss

@@ -1,12 +1,26 @@
 @use '../../theme/styles' as theme;
 
+// Styles for the entry points this component's own markup renders.
+//
+// v15 removed the `@use 'ngwr'` umbrella, which is what had been covering these:
+// a consumer now writes one `@use` per component they place, and never learns
+// about the ones a component places INSIDE itself. `@use 'ngwr/date-picker'`
+// alone gave a date field with a raw browser input — grey, square, 2px inset —
+// and `@use 'ngwr/table'` a table with unstyled checkboxes and pager. Nothing
+// says so: the component renders, the markup is right, and no build, console or
+// gate has an opinion about a missing rule.
+//
+// Sass deduplicates `@use` within a compilation, so an app that also loads one of
+// these by hand still emits it once.
+@use '../../spinner/styles' as spinner-styles; // WrSpinner
+
 .wr-avatar {
   // Defaults — `shape="rounded"` (the default) gets the soft rounded
   // square look. Variant modifiers below override the radius / corner
   // treatment.
   --wr-avatar-radius: 10%;
   --wr-avatar-img-opacity: 0;
-  --wr-avatar-ring: var(--wr-color-border);
+  --wr-avatar-ring: var(--wr-border-strong);
   // The most of the box projected initials may take, as a share of the size the
   // host publishes as `--wr-avatar-size`. Measured rather than picked: at 0.375
   // the widest capital pairs (`ЖШ`, `WW`) in Inter, Geist and the system face, at
@@ -132,8 +146,8 @@
 
   // Doubled with `.wr-spinner` on purpose. A lone `.wr-avatar__spin` ties with
   // the spinner's own `.wr-spinner { color: inherit; --wr-spinner-size: 1.25em }`,
-  // and the combined `@use 'ngwr'` sheet forwards the spinner after the avatar,
-  // so the spinner won both: measured, every avatar drew a 19px spinner in the
+  // and an app that loads the spinner's sheet after this one gives the spinner
+  // both: measured, every avatar drew a 19px spinner in the
   // inherited ink (17.85:1 light, 15.73:1 dark) — 59% of a 32px box and 20% of
   // a 96px one — and the colour and size written here never painted once.
   // Specificity, not order, so it holds for an app that `@use`s the two entry

package/badge/styles/_index.scss

@@ -5,6 +5,21 @@
 @use '../../theme/styles' as theme;
 @forward 'tag';
 
+// Styles for the entry points this component's own markup renders.
+//
+// v15 removed the `@use 'ngwr'` umbrella, which is what had been covering these:
+// a consumer now writes one `@use` per component they place, and never learns
+// about the ones a component places INSIDE itself. `@use 'ngwr/date-picker'`
+// alone gave a date field with a raw browser input — grey, square, 2px inset —
+// and `@use 'ngwr/table'` a table with unstyled checkboxes and pager. Nothing
+// says so: the component renders, the markup is right, and no build, console or
+// gate has an opinion about a missing rule.
+//
+// Sass deduplicates `@use` within a compilation, so an app that also loads one of
+// these by hand still emits it once.
+@use '../../icon/styles' as icon-styles; // WrIcon
+@use '../../spinner/styles' as spinner-styles; // WrSpinner
+
 .wr-badge {
   display: inline-flex;
   align-items: center;
@@ -24,9 +39,20 @@
   line-height: normal;
   white-space: nowrap;
 
+  // The neutral default, READ. The three hooks below were declared with a
+  // comment saying they are "what a badge paints when nothing asks for an
+  // intent" and nothing read any of them, so `<wr-badge [color]="null">` — a
+  // typed, documented, public option — painted no fill and no text colour and
+  // rendered as bare inherited text. `--wr-tag-*` next door was always read
+  // this way; the badge simply never caught up. No `border` here: the filled
+  // intents carry none either, and adding one would widen every badge in the
+  // catalogue by 2px. The neutral RING is the outlined variant's job, below.
+  background-color: var(--wr-badge-bg);
+  color: var(--wr-badge-color);
+
   // Defaults — sized modifiers override these
-  --wr-badge-padding-y: 0.25rem;
-  --wr-badge-padding-x: 0.5rem;
+  --wr-badge-padding-y: var(--wr-space-xs);
+  --wr-badge-padding-x: var(--wr-space-sm);
   --wr-badge-radius: var(--wr-border-radius-sm);
   --wr-badge-font-size: var(--wr-text-xs);
   --wr-badge-min-height: 1.5rem;
@@ -60,7 +86,7 @@
 
   &--pill {
     --wr-badge-radius: var(--wr-border-radius-pill);
-    --wr-badge-padding-x: 0.75rem;
+    --wr-badge-padding-x: var(--wr-space-md);
   }
 
   // Squircle — overrides the plain `border-radius` with the
@@ -72,11 +98,13 @@
 
   // Colors
 
-  // color-ok: a badge's colour is decoration or category, never the state —
-  // the LABEL carries that. Six of the nine intents share one lightness
-  // (`success` against `danger` is 1.004:1), so a badge whose words do not name
-  // the state tells a reader without hue nothing, and no palette can fix that
-  // without giving up the white labels the intents were tuned for.
+  // Neutral, and the default: `color` is nullable and a null one carries no
+  // modifier, so this trio is what a badge paints when nothing asks for an
+  // intent. The neutral roles do the job the removed `medium` intent used to.
+  --wr-badge-bg: var(--wr-color-fill);
+  --wr-badge-color: var(--wr-color-on-surface);
+  --wr-badge-border: var(--wr-border-base);
+
   @each $name in theme.$colors {
     &--#{$name} {
       background-color: var(--wr-color-#{$name});
@@ -93,42 +121,22 @@
   // wrapped around text of exactly that strength, and the two cannot be
   // separated while they share one value. `-soft-border` is the same intent at
   // 0.3 alpha: the theme's canonical hairline, already per intent and already
-  // theme-correct through the `-rgb` channels. `wr-tag--outlined` draws the same
-  // ring from the same token; the tag keeps its 6% fill, because a tag is a
-  // chip you can click and a badge is a label you cannot.
-  //
-  // The soft trio covers the seven CHROMATIC intents, so `light` and `dark` have
-  // no `-soft-border` and the `var()` carries the token's own recipe as its
-  // fallback. That fallback is load-bearing twice over: an undefined custom
-  // property with no fallback invalidates the whole declaration, which would
-  // leave those two badges with no ring at all rather than a soft one — and
-  // 0.3 alpha is what keeps `dark` in the same family as the other eight
-  // instead of the only ring still drawn at full label strength, which is the
-  // weight this rule exists to stop drawing.
-  //
-  // `light` is the one intent the recipe cannot serve: it is a surface tone by
-  // definition, a hair off the page in either theme, so 30% of it over the page
-  // is nothing. At FULL strength it is `--wr-color-outline` — the hairline every
-  // bordered surface in the library already draws — so it is reached by that
-  // name, after the loop, rather than by an alpha that happens to land there.
+  // correct in both schemes, since it mixes the intent itself. `wr-tag--outlined`
+  // draws the same ring from the same token; the tag keeps its 6% fill, because
+  // a tag is a chip you can click and a badge is a label you cannot.
   &--outlined {
     background-color: transparent;
-    box-shadow: inset 0 0 0 1px currentcolor;
+    // `--wr-badge-border` rather than `currentcolor` for the NEUTRAL case, for
+    // the reason the note above gives about the chromatic ones: a ring drawn in
+    // the text colour is a hairline at full label strength around text of
+    // exactly that strength. An intent overrides it in the loop below.
+    box-shadow: inset 0 0 0 1px var(--wr-badge-border);
 
-    // color-ok: the decision the filled loop above records — decoration or
-    // category, with the label carrying the state.
     @each $name in theme.$colors {
       &.wr-badge--#{$name} {
         color: var(--wr-color-#{$name}-ink);
-        box-shadow: inset 0 0 0 1px var(--wr-color-#{$name}-soft-border, rgba(var(--wr-color-#{$name}-rgb), 0.3));
+        box-shadow: inset 0 0 0 1px var(--wr-color-#{$name}-soft-border);
       }
     }
-
-    // color-ok: this ADDS a hairline no other intent carries — `light` is a
-    // near-surface tone, so without it the badge has no edge at all. A border
-    // appearing is the channel; its colour is incidental.
-    &.wr-badge--light {
-      box-shadow: inset 0 0 0 1px var(--wr-color-outline);
-    }
   }
 }

package/badge/styles/_tag.scss

@@ -3,22 +3,30 @@
 .wr-tag {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--wr-tag-gap);
   vertical-align: middle;
 
   appearance: none;
   text-decoration: none;
   white-space: nowrap;
 
-  // Defaults — color and style modifiers override
+  // Defaults — color and style modifiers override. `color` is nullable and a
+  // null one carries no modifier, so this trio IS the neutral tag: the gray
+  // ramp does the job the removed `medium` intent used to stand in for.
   --wr-tag-color: var(--wr-color-on-surface);
-  --wr-tag-bg: var(--wr-color-surface);
-  --wr-tag-border: var(--wr-color-outline);
+  --wr-tag-bg: var(--wr-color-fill);
+  --wr-tag-border: var(--wr-border-base);
   --wr-tag-radius: var(--wr-border-radius-sm);
+  --wr-tag-gap: var(--wr-space-xs);
+  // NOT on the spacing scale: this is solved against the 22px box the comment
+  // below names, which is the shared `sm` control height — a tag sits beside an
+  // `sm` input. The scale's nearest step is 4px, which makes the tag 25px, stops
+  // `--wr-tag-min-height` binding, and breaks that alignment.
   --wr-tag-padding-y: 0.125rem;
-  --wr-tag-padding-x: 0.5rem;
+  --wr-tag-padding-x: var(--wr-space-sm);
+  --wr-tag-font-family: var(--wr-font-family-base);
   --wr-tag-font-size: var(--wr-text-xs);
-  --wr-tag-font-weight: 500;
+  --wr-tag-font-weight: var(--wr-font-weight-medium);
   // `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
@@ -35,7 +43,7 @@
   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-family: var(--wr-tag-font-family);
   font-size: var(--wr-tag-font-size);
   font-weight: var(--wr-tag-font-weight);
   line-height: var(--wr-tag-line-height);
@@ -44,7 +52,7 @@
   // Shape
   &--rounded {
     --wr-tag-radius: var(--wr-border-radius-pill);
-    --wr-tag-padding-x: 0.625rem;
+    --wr-tag-padding-x: var(--wr-space-md);
   }
 
   // Icon slot sizing
@@ -68,12 +76,6 @@
   }
 
   // Colored variants
-  // color-ok: a tag's colour is decoration or category — the label carries the
-  // state (`Failed`, not a red `Build`), because six of the nine intents share
-  // one lightness and `success` against `danger` is 1.004:1. When a tag has to
-  // stand for a status on its own, its `icon` input is the channel. Nothing is
-  // drawn per intent by default: tags are categories too, and a check on
-  // `Standalone` would say something false.
   @each $name in theme.$colors {
     &--#{$name} {
       --wr-tag-color: var(--wr-color-#{$name}-contrast);
@@ -85,29 +87,18 @@
       // place, which is the reason the soft trio exists. 0.25 -> 0.30 is the
       // whole visual change here. The 6% fill stays, and that is the one place
       // the two deliberately differ: a tag is a chip you can click, hover and
-      // dismiss, so it keeps a body the badge has none of. `light` and `dark`
-      // fall back exactly as the badge does — see the note there.
+      // dismiss, so it keeps a body the badge has none of.
       &.wr-tag--outlined {
         --wr-tag-color: var(--wr-color-#{$name}-ink);
-        --wr-tag-bg: rgba(var(--wr-color-#{$name}-rgb), 0.06);
-        --wr-tag-border: var(--wr-color-#{$name}-soft-border, rgba(var(--wr-color-#{$name}-rgb), 0.3));
+        --wr-tag-bg: color-mix(in srgb, var(--wr-color-#{$name}) 6%, transparent);
+        --wr-tag-border: var(--wr-color-#{$name}-soft-border);
       }
 
       &.wr-tag--transparent {
         --wr-tag-color: var(--wr-color-#{$name}-ink);
-        --wr-tag-bg: rgba(var(--wr-color-#{$name}-rgb), 0.1);
+        --wr-tag-bg: color-mix(in srgb, var(--wr-color-#{$name}) 10%, transparent);
         --wr-tag-border: transparent;
       }
     }
   }
-
-  // `light` outlined, after the loop for the same reason the badge carries the
-  // same rule: 30% of a surface tone is not a line. At full strength it IS
-  // `--wr-color-outline`, which is already this component's default border.
-  // color-ok: every outlined tag already draws a border — this only gives the
-  // one intent that cannot tint one a literal colour. Telling two INTENTS
-  // apart is the label's job, as the marker above the loop says.
-  &--light.wr-tag--outlined {
-    --wr-tag-border: var(--wr-color-outline);
-  }
 }

package/bits/aurora/styles/_index.scss

@@ -0,0 +1,8 @@
+// Public Sass entry for `@use 'ngwr/bits/aurora'`.
+//
+// `aurora.scss` — the component's `styleUrl` — forwards `_rules` and nothing
+// else, so the compiled component styles carry this component's own CSS and no
+// second copy of the theme layer.
+@use '../../../theme/styles';
+
+@forward 'rules';

package/{aurora → bits/aurora}/styles/_rules.scss

@@ -2,13 +2,13 @@
 // positioned ancestor; all the visuals live in the fragment shader.
 
 .wr-aurora {
-  // Theme-default colour stops (overridden by `[colorStops]`): vivid
-  // indigo → emerald on light surfaces; dark restores the neon
-  // reactbits palette — see `_dark.scss`, which is loaded by the public Sass
-  // entry only.
-  --wr-aurora-stop-1: #6366f1;
-  --wr-aurora-stop-2: #10b981;
-  --wr-aurora-stop-3: #6366f1;
+  // Theme-default colour stops (overridden by `[colorStops]`): vivid indigo
+  // and emerald on light surfaces, the neon reactbits palette on dark. The
+  // shader cannot read a `light-dark()`, so `aurora.ts` resolves each stop
+  // through `resolveCssColor` before it reaches a uniform.
+  --wr-aurora-stop-1: light-dark(#6366f1, #5227ff);
+  --wr-aurora-stop-2: light-dark(#10b981, #7cff67);
+  --wr-aurora-stop-3: light-dark(#6366f1, #5227ff);
 
   position: absolute;
   inset: 0;

package/bits/border-glow/styles/_index.scss

@@ -0,0 +1,15 @@
+// Public Sass entry for `@use 'ngwr/bits/border-glow'`.
+//
+// Pulls the whole theme so a standalone import still brings in every design
+// token these rules reference, then loads the rules themselves from `_rules`.
+//
+// The split is what keeps the token layer out of the JavaScript bundle.
+// `border-glow.scss` is the component's `styleUrl`, and a component stylesheet
+// is its OWN Sass compilation — `@use` only deduplicates within one. So while
+// the app's global stylesheet emits the theme once, forwarding it from here
+// would inline a second, byte-identical copy of `:root` and the box-sizing
+// reset into the compiled component styles, which the library build then embeds
+// in the FESM bundle as a string. `border-glow.scss` forwards `_rules` instead,
+// so it carries this component's own CSS and nothing else.
+@use '../../../theme/styles';
+@forward 'rules';