ngwr 12.1.0 → 13.0.0

package/cascader/styles/_rules.scss

@@ -0,0 +1,261 @@
+// Cascader. The trigger reuses the wr-select look-and-feel; the panel
+// is a horizontal row of columns where each column lists the children
+// of the previously-active node. Picking a leaf commits the path.
+
+// `focus` is the one theme partial these rules still load that emits CSS of its
+// own — the shared ring mixin lives in the same file as the baseline
+// `.wr-*:focus-visible` rules, and there is no mixin-only module to take it from.
+// That is ~4 KB of rules identical to the global sheet's, against the ~24 KB token
+// layer the split removes, and it is the honest trade: hand-rolling the three
+// declarations here is what the shared mixin exists to prevent.
+@use '../../theme/styles/focus';
+
+.wr-cascader {
+  --wr-cascader-color: var(--wr-color-on-surface);
+  --wr-cascader-bg: var(--wr-color-surface);
+  --wr-cascader-border: var(--wr-color-outline);
+  --wr-cascader-radius: var(--wr-control-radius-md);
+  --wr-cascader-padding-y: var(--wr-control-padding-y-md);
+  --wr-cascader-padding-x: var(--wr-control-padding-x-md);
+  --wr-cascader-font-size: var(--wr-control-font-size-md);
+  --wr-cascader-line-height: var(--wr-control-line-height-md);
+  --wr-cascader-col-width: 12rem;
+  --wr-cascader-max-height: 16rem;
+  // Trigger width floor — hooked for the same reason as `--wr-select-min-width`:
+  // in a narrow grid column the literal wins over `minmax(0, 1fr)` and the
+  // trigger overhangs its cell, and the only escape was overriding
+  // `.wr-cascader__trigger` from outside. Set it to 0 to defer to the layout.
+  --wr-cascader-min-width: 12rem;
+
+  display: inline-flex;
+  vertical-align: middle;
+
+  &--disabled {
+    --wr-cascader-color: var(--wr-color-on-surface-muted);
+    --wr-cascader-bg: var(--wr-color-fill);
+  }
+
+  // Sizes — trigger on the control contract (sm 22 / md 30 / lg 36).
+  &--sm {
+    --wr-cascader-radius: var(--wr-control-radius-sm);
+    --wr-cascader-padding-y: var(--wr-control-padding-y-sm);
+    --wr-cascader-padding-x: var(--wr-control-padding-x-sm);
+    --wr-cascader-font-size: var(--wr-control-font-size-sm);
+    --wr-cascader-line-height: var(--wr-control-line-height-sm);
+  }
+
+  &--lg {
+    --wr-cascader-radius: var(--wr-control-radius-lg);
+    --wr-cascader-padding-y: var(--wr-control-padding-y-lg);
+    --wr-cascader-padding-x: var(--wr-control-padding-x-lg);
+    --wr-cascader-font-size: var(--wr-control-font-size-lg);
+    --wr-cascader-line-height: var(--wr-control-line-height-lg);
+  }
+
+  &__trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    min-width: var(--wr-cascader-min-width);
+    appearance: none;
+    background: var(--wr-cascader-bg);
+    color: var(--wr-cascader-color);
+    border: 1px solid var(--wr-cascader-border);
+    border-radius: var(--wr-cascader-radius);
+    // Density-multiplied like select / input / textarea / button: the trigger
+    // sources the same `--wr-control-padding-*` contract they do, so without
+    // the multiplier it held its md height (30px) while its neighbours grew —
+    // measured at 35.59px for input / select under `touch`.
+    padding: calc(var(--wr-cascader-padding-y) * var(--wr-density-y, 1))
+      calc(var(--wr-cascader-padding-x) * var(--wr-density-x, 1));
+    font-family: var(--wr-font-family-base);
+    font-size: var(--wr-cascader-font-size);
+    line-height: var(--wr-cascader-line-height);
+    cursor: pointer;
+    text-align: start;
+    transition:
+      border-color var(--wr-transition-base),
+      box-shadow var(--wr-transition-base);
+
+    &:focus-visible {
+      border-color: var(--wr-color-primary);
+      @include focus.focus-ring;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  // A read-only trigger still takes focus and still shows its path, so it keeps
+  // the visual and only stops inviting the click that would open the panel.
+  &--readonly &__trigger {
+    cursor: default;
+  }
+
+  &--open &__trigger {
+    border-color: var(--wr-color-primary);
+    box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.15);
+  }
+
+  &__value,
+  &__placeholder {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__placeholder {
+    color: var(--wr-color-text-muted);
+  }
+
+  &__chevron {
+    --wr-icon-size: 1rem;
+    flex: 0 0 auto;
+    color: var(--wr-color-on-surface-muted);
+    transition: transform var(--wr-transition-base);
+  }
+
+  &--open &__chevron {
+    transform: rotate(180deg);
+  }
+
+  &__clear {
+    --wr-icon-size: 0.875rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.125rem;
+    height: 1.125rem;
+    border-radius: 999px;
+    color: var(--wr-color-on-surface-muted);
+    cursor: pointer;
+    transition:
+      background 0.12s ease,
+      color 0.12s ease;
+
+    &:hover {
+      background: rgba(var(--wr-color-on-surface-rgb), 0.06);
+      color: var(--wr-color-on-surface);
+    }
+  }
+}
+
+.wr-cascader-overlay {
+  padding-top: 0.25rem;
+}
+
+.wr-cascader-panel {
+  // Option sizing — mirrored from the trigger size (panel is portaled, so it
+  // can't inherit the host size class). Default md.
+  --wr-cascader-opt-font: var(--wr-control-font-size-md);
+  --wr-cascader-opt-py: 0.5rem;
+
+  display: flex;
+  background: var(--wr-color-surface);
+  border: 1px solid var(--wr-color-outline);
+  border-radius: var(--wr-border-radius-base);
+  box-shadow: var(--wr-shadow-overlay);
+  font-family: var(--wr-font-family-base);
+  font-size: var(--wr-cascader-opt-font);
+  overflow: hidden;
+
+  &--sm {
+    --wr-cascader-opt-font: var(--wr-control-font-size-sm);
+    --wr-cascader-opt-py: 0.375rem;
+  }
+
+  &--lg {
+    --wr-cascader-opt-font: var(--wr-control-font-size-lg);
+    --wr-cascader-opt-py: 0.625rem;
+  }
+
+  .wr-cascader__col {
+    list-style: none;
+    margin: 0;
+    // Inset padding so options read as rounded pills, matching the select panel.
+    padding: 0.25rem;
+    width: var(--wr-cascader-col-width, 12rem);
+    max-height: var(--wr-cascader-max-height, 16rem);
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+
+    + .wr-cascader__col {
+      border-inline-start: 1px solid var(--wr-color-outline);
+    }
+  }
+
+  // Options mirror .wr-option (rounded pill, soft primary tint when active).
+  .wr-cascader__opt {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: var(--wr-cascader-opt-py) 0.625rem;
+    border-radius: var(--wr-border-radius-sm);
+    color: var(--wr-color-on-surface);
+    cursor: pointer;
+    transition: background var(--wr-transition-short);
+
+    &:hover {
+      background: var(--wr-color-hover);
+    }
+
+    &--active {
+      background: var(--wr-color-primary-soft);
+      // Text on the intent's own `-soft` tint, which is exactly what `-ink` is
+      // calibrated against. Bare measured 4.17:1 light / 3.65:1 dark.
+      color: var(--wr-color-primary-ink);
+      font-weight: 500;
+    }
+
+    &--disabled {
+      color: var(--wr-color-on-surface-muted);
+      cursor: not-allowed;
+      opacity: var(--wr-disabled-opacity);
+
+      &:hover {
+        background: transparent;
+      }
+    }
+  }
+
+  .wr-cascader__opt-label {
+    flex: 1 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .wr-cascader__opt-arrow {
+    --wr-icon-size: 0.875rem;
+    flex: 0 0 auto;
+    color: var(--wr-color-on-surface-muted);
+  }
+
+  // The panel is a flex row, so its columns cascade toward the inline end —
+  // leftward under `dir="rtl"`. The branch arrow is drawn pointing physically
+  // right, so turn it around with them, the way the carousel's arrows do.
+  [dir='rtl'] & .wr-cascader__opt-arrow {
+    transform: scaleX(-1);
+  }
+}
+
+// Touch pointers: grow the clear button and make the column option rows ~44px
+// tall so each is a comfortable tap target. Fine pointers keep the compact
+// desktop sizing above.
+@media (pointer: coarse) {
+  .wr-cascader__clear {
+    --wr-icon-size: 1.125rem;
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .wr-cascader-panel .wr-cascader__opt {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+}

package/checkbox/styles/_index.scss

@@ -120,6 +120,13 @@
     }
   }
 
+  // A read-only box still takes focus and still submits its value, so it keeps
+  // the full visual and only stops inviting the click — dimming it would say
+  // "disabled", which is the other state. Matches `wr-rating--readonly`.
+  &--readonly &__label {
+    cursor: default;
+  }
+
   &--disabled {
     --wr-checkbox-color: var(--wr-color-on-surface-muted);
     pointer-events: none;

package/circular-text/circular-text.scss

@@ -1 +1 @@
-@forward './styles';
+@forward './styles/rules';

package/circular-text/styles/_index.scss

@@ -1,63 +1,15 @@
-// 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
-// itself is static; the inner `__spin` element drives the rotation via
-// the Web Animations API (see component for the why). Hover-mode `scale`
-// lives on the host so it never fights the rotation.
-
-.wr-circular-text {
-  --wr-circular-text-size: 12rem;
-  --wr-circular-text-radius: calc(var(--wr-circular-text-size) / 2);
-
-  position: relative;
-  display: inline-block;
-  width: var(--wr-circular-text-size);
-  height: var(--wr-circular-text-size);
-  border-radius: 50%;
-  font-weight: 700;
-  text-align: center;
-  user-select: none;
-  transition: transform 0.6s var(--wr-ease-spring);
-
-  // The accessible copy of the string — the ring itself is `aria-hidden`.
-  &__sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    white-space: nowrap;
-  }
-
-  &__spin {
-    position: absolute;
-    inset: 0;
-    will-change: transform;
-  }
-
-  &__char {
-    position: absolute;
-    top: 50%;
-    // rtl-ok: centred on the spinner's midpoint by a physical margin-left/-top pair plus a per-char translateY()
-    left: 50%;
-    display: inline-block;
-    // Pre-shift by -50% so the char's centre sits at the spinner centre
-    // before the per-char `rotate translateY(-radius)` runs.
-    // rtl-ok: the negative half of the `left: 50%` centring pair, symmetric with `margin-top`
-    margin-left: -0.5em;
-    margin-top: -0.5em;
-    line-height: 1;
-  }
-
-  // Bonkers — scale the whole host on hover (rotation lives on inner,
-  // so the transforms never fight each other).
-  &--bonkers:hover {
-    transform: scale(0.8);
-  }
-}
+// Public Sass entry for `@use 'ngwr/circular-text'`.
+//
+// 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.
+// `circular-text.scss` is the component's `styleUrl`, and a component stylesheet is
+// its OWN Sass compilation — `@use` only deduplicates within one. So while the
+// umbrella sheet emits the theme once, forwarding it from here would inline a
+// second, byte-identical copy of `:root`, `[data-theme='dark']` and the
+// box-sizing reset into the compiled component styles, which ng-packagr then
+// embeds in the FESM bundle as a string. `circular-text.scss` forwards `_rules`
+// instead, so it carries this component's own CSS and nothing else.
+@use '../../theme/styles';
+@forward 'rules';

package/circular-text/styles/_rules.scss

@@ -0,0 +1,58 @@
+// 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
+// itself is static; the inner `__spin` element drives the rotation via
+// the Web Animations API (see component for the why). Hover-mode `scale`
+// lives on the host so it never fights the rotation.
+
+.wr-circular-text {
+  --wr-circular-text-size: 12rem;
+  --wr-circular-text-radius: calc(var(--wr-circular-text-size) / 2);
+
+  position: relative;
+  display: inline-block;
+  width: var(--wr-circular-text-size);
+  height: var(--wr-circular-text-size);
+  border-radius: 50%;
+  font-weight: 700;
+  text-align: center;
+  user-select: none;
+  transition: transform 0.6s var(--wr-ease-spring);
+
+  // The accessible copy of the string — the ring itself is `aria-hidden`.
+  &__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  &__spin {
+    position: absolute;
+    inset: 0;
+    will-change: transform;
+  }
+
+  &__char {
+    position: absolute;
+    top: 50%;
+    // rtl-ok: centred on the spinner's midpoint by a physical margin-left/-top pair plus a per-char translateY()
+    left: 50%;
+    display: inline-block;
+    // Pre-shift by -50% so the char's centre sits at the spinner centre
+    // before the per-char `rotate translateY(-radius)` runs.
+    // rtl-ok: the negative half of the `left: 50%` centring pair, symmetric with `margin-top`
+    margin-left: -0.5em;
+    margin-top: -0.5em;
+    line-height: 1;
+  }
+
+  // Bonkers — scale the whole host on hover (rotation lives on inner,
+  // so the transforms never fight each other).
+  &--bonkers:hover {
+    transform: scale(0.8);
+  }
+}

package/color-picker/styles/_index.scss

@@ -251,6 +251,14 @@
     }
   }
 
+  // A read-only picker still takes focus and still announces its colour, so it
+  // keeps the visual and only stops inviting the drag — `crosshair` / `ew-resize`
+  // on a surface that cannot move is the part that looks broken.
+  &--readonly &__sv,
+  &--readonly &__slider {
+    cursor: default;
+  }
+
   &--disabled {
     pointer-events: none;
     opacity: var(--wr-disabled-opacity);

package/descriptions/styles/_index.scss

@@ -80,10 +80,14 @@
 
   &--bordered &__row {
     padding: 0.625rem 0.875rem;
+  }
 
-    & + & {
-      border-top: 1px solid var(--wr-color-outline);
-    }
+  // Nesting this as `& + &` expands BOTH sides in full —
+  // `… .wr-descriptions__row + .wr-descriptions--bordered .wr-descriptions__row` —
+  // which asks for a `--bordered` HOST as a row's sibling and can never match, so
+  // the stacked bordered card shipped with no dividers at all. Name the sibling.
+  &--bordered &__row + &__row {
+    border-top: 1px solid var(--wr-color-outline);
   }
 
   &--bordered#{&}--inline &__list {
@@ -122,6 +126,12 @@
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
+    // The grid layout above aligns its two columns on `baseline`, which is
+    // correct there and wrong here: once the list is a COLUMN flex container
+    // the cross axis is the width, so `baseline` sizes each row to its own
+    // content. Rows must stretch, or a bordered row's divider paints only as
+    // wide as its longest line instead of spanning the card.
+    align-items: stretch;
   }
 
   .wr-descriptions--inline .wr-descriptions__row {

package/drag-drop/sortable-list.scss

@@ -1 +1 @@
-@forward './styles';
+@forward './styles/rules';

package/drag-drop/styles/_index.scss

@@ -1,144 +1,15 @@
-@use '../../theme/styles' as theme;
-
-// Drag-to-reorder list. Visual chrome lives here; the layout + drop
-// mechanics come from CDK's `cdkDropList` / `cdkDrag` directives.
+// Public Sass entry for `@use 'ngwr/drag-drop'`.
 //
-// CDK adds these classes during a drag:
-//   .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
-// 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;
-
-  &__list {
-    display: flex;
-    flex-direction: column;
-    // Row spacing belongs to the list, not the row templates — margins
-    // inside a row get measured into the drag preview and read as a
-    // white rim around the floating card.
-    gap: var(--wr-sortable-list-gap, 0.5rem);
-  }
-
-  &__item {
-    cursor: grab;
-    user-select: none;
-    // No transform transition here — the floating preview clones this
-    // class, and animating transform makes it chase the cursor 180ms
-    // behind. Sibling shuffle/settle transitions are scoped below.
-    transition: box-shadow 0.18s ease;
-
-    &.cdk-drag-disabled {
-      cursor: default;
-    }
-
-    &:active {
-      cursor: grabbing;
-    }
-
-    // Every row is a tab stop (the keyboard reorder path), so every row needs a
-    // ring. Included here rather than added to `theme/_focus.scss`, the same
-    // choice `wr-list` made for its own rows.
-    &:focus-visible {
-      @include theme.focus-ring;
-    }
-
-    // Picked up by the keyboard — the standing counterpart of `:active`, which
-    // only lasts while a pointer is held down.
-    &--grabbed {
-      cursor: grabbing;
-      box-shadow: 0 6px 12px rgba(var(--wr-color-backdrop-rgb), 0.22);
-    }
-  }
-
-  // The key model and the position announcements: read out, never drawn.
-  &__sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-}
-
-// Horizontal orientation — the @for stays the same; CDK swaps the
-// pointer-position math when `cdkDropListOrientation="horizontal"`.
-.wr-sortable-list[orientation='horizontal'] .wr-sortable-list__list,
-.wr-sortable-list[data-orientation='horizontal'] .wr-sortable-list__list {
-  flex-direction: row;
-}
-
-// Drag handle — restricts grab cursor to the handle (the row itself
-// stays interactive for clicks / inputs).
-.wr-drag-handle {
-  cursor: grab;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: rgba(var(--wr-color-on-surface-rgb), 0.45);
-  transition: color 0.15s ease;
-
-  // Coarse pointers: a 44px grab area around the grip glyph.
-  @include theme.touch-target;
-
-  &:hover {
-    color: var(--wr-color-on-surface);
-  }
-
-  &:active {
-    cursor: grabbing;
-  }
-}
-
-// CDK overlays applied by drag-drop
-
-// 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);
-  // The preview must track the cursor 1:1 — never animate its transform.
-  transition: none;
-  // The lift-off shadow follows the row template's rendered shape
-  // (drop-shadow, not box-shadow) so the preview box itself never shows
-  // as a white slab around the card. Backdrop token stays black in dark
-  // mode — `--wr-color-on-surface-rgb` would flip and glow instead.
-  filter: drop-shadow(0 8px 12px rgba(var(--wr-color-backdrop-rgb), 0.24))
-    drop-shadow(0 2px 3px rgba(var(--wr-color-backdrop-rgb), 0.16));
-  // CDK sets pointer-events to none on the preview; we keep visuals only.
-}
-
-// 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: var(--wr-color-fill-strong);
-  border-radius: var(--wr-border-radius-base);
-  outline: 1px dashed rgba(var(--wr-color-on-surface-rgb), 0.25);
-  outline-offset: -1px;
-}
-
-// 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 var(--wr-ease-spring);
-}
+// 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.
+// `sortable-list.scss` is the component's `styleUrl`, and a component stylesheet is
+// its OWN Sass compilation — `@use` only deduplicates within one. So while the
+// umbrella sheet emits the theme once, forwarding it from here would inline a
+// second, byte-identical copy of `:root`, `[data-theme='dark']` and the
+// box-sizing reset into the compiled component styles, which ng-packagr then
+// embeds in the FESM bundle as a string. `sortable-list.scss` forwards `_rules`
+// instead, so it carries this component's own CSS and nothing else.
+@use '../../theme/styles';
+@forward 'rules';