ngwr 12.2.0 → 13.0.0

package/loading-bar/styles/_index.scss

@@ -1,33 +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;
-
-.wr-loading-bar {
-  position: fixed;
-  top: 0;
-  inset-inline: 0;
-  z-index: var(--wr-z-top, 9999);
-  pointer-events: none;
-
-  &__track {
-    width: 100%;
-    overflow: hidden;
-    opacity: 0;
-    transition: opacity 0.2s ease;
-  }
-
-  &--active {
-    opacity: 1;
-  }
-
-  &__fill {
-    width: 0;
-    height: 2px;
-    background: var(--wr-color-primary);
-    box-shadow: 0 0 8px rgb(var(--wr-color-primary-rgb) / 60%);
-    transition:
-      width 0.15s ease-out,
-      opacity 0.2s ease;
-  }
-}
+// Public Sass entry for `@use 'ngwr/loading-bar'`.
+//
+// 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.
+// `loading-bar.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. `loading-bar.scss` forwards `_rules`
+// instead, so it carries this component's own CSS and nothing else.
+@use '../../theme/styles';
+@forward 'rules';

package/loading-bar/styles/_rules.scss

@@ -0,0 +1,28 @@
+.wr-loading-bar {
+  position: fixed;
+  top: 0;
+  inset-inline: 0;
+  z-index: var(--wr-z-top, 9999);
+  pointer-events: none;
+
+  &__track {
+    width: 100%;
+    overflow: hidden;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+
+  &--active {
+    opacity: 1;
+  }
+
+  &__fill {
+    width: 0;
+    height: 2px;
+    background: var(--wr-color-primary);
+    box-shadow: 0 0 8px rgb(var(--wr-color-primary-rgb) / 60%);
+    transition:
+      width 0.15s ease-out,
+      opacity 0.2s ease;
+  }
+}

package/marquee/marquee.scss

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

package/marquee/styles/_index.scss

@@ -1,155 +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;
-
-// Endless marquee (reactbits LogoLoop port).
-// Vars driven from component inputs:
-//   --wr-marquee-gap         gap between items (px)
-//   --wr-marquee-height      item height (px)
-//   --wr-marquee-fade-color  edge fade colour (falls back to page bg)
-
-.wr-marquee {
-  --wr-marquee-gap: 32px;
-  --wr-marquee-height: 28px;
-  // Default to the lib's surface colour; consumers can override via
-  // `[fadeOutColor]` or by setting `--wr-marquee-fade-color` directly.
-  --wr-marquee-fade-color-auto: var(--wr-color-surface, #ffffff);
-
-  position: relative;
-  display: block;
-  width: 100%;
-  overflow: hidden;
-
-  &--scale-hover {
-    padding-top: calc(var(--wr-marquee-height) * 0.1);
-    padding-bottom: calc(var(--wr-marquee-height) * 0.1);
-  }
-
-  &__track {
-    display: flex;
-    width: max-content;
-    will-change: transform;
-    user-select: none;
-    position: relative;
-    z-index: 0;
-  }
-
-  &__list {
-    display: flex;
-    align-items: center;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  &__item {
-    flex: 0 0 auto;
-    // The whole strip is physical, not textual: `[direction]` is literally
-    // `'left' | 'right'`, the track is driven by `translate3d(-offset px, 0, 0)`
-    // against a `getBoundingClientRect().width` measurement of one sequence, and
-    // the edge fades are `left`/`right` gradients. The item gap is the seam of
-    // that physical loop — it has to match the offset the track wraps at, so it
-    // stays on the same axis the animation runs on.
-    // rtl-ok: seam gap of a physically-animated track (see the note above)
-    margin-right: var(--wr-marquee-gap);
-    font-size: var(--wr-marquee-height);
-    line-height: 1;
-  }
-
-  &__item:last-child {
-    // Restates the interior gap on the last item so the join between two copies
-    // of the sequence is spaced like the gaps inside it.
-    // rtl-ok: same physical loop axis as the interior gap above
-    margin-right: var(--wr-marquee-gap);
-  }
-
-  &__node {
-    display: inline-flex;
-    align-items: center;
-  }
-
-  &__item img {
-    height: var(--wr-marquee-height);
-    width: auto;
-    display: block;
-    object-fit: contain;
-    image-rendering: -webkit-optimize-contrast;
-    -webkit-user-drag: none;
-    pointer-events: none;
-    transition: transform var(--wr-duration-slow) var(--wr-ease-out);
-  }
-
-  &--scale-hover &__item {
-    overflow: visible;
-  }
-
-  &--scale-hover &__item:hover img,
-  &--scale-hover &__item:hover &__node {
-    transform: scale(1.2);
-    transform-origin: center center;
-  }
-
-  &--scale-hover &__node {
-    transition: transform var(--wr-duration-slow) var(--wr-ease-out);
-  }
-
-  &__link {
-    display: inline-flex;
-    align-items: center;
-    text-decoration: none;
-    border-radius: 4px;
-    transition: opacity 0.2s ease;
-
-    &:hover {
-      opacity: 0.8;
-    }
-
-    &:focus-visible {
-      outline: 2px solid currentColor;
-      outline-offset: 2px;
-    }
-  }
-
-  &--fade::before,
-  &--fade::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: clamp(24px, 8%, 120px);
-    pointer-events: none;
-    z-index: 10;
-  }
-
-  &--fade::before {
-    // rtl-ok: paired with the physical `linear-gradient(to right, …)` below, which has no logical form
-    left: 0;
-    background: linear-gradient(
-      to right,
-      var(--wr-marquee-fade-color, var(--wr-marquee-fade-color-auto)) 0%,
-      rgba(0, 0, 0, 0) 100%
-    );
-  }
-
-  &--fade::after {
-    // rtl-ok: paired with the physical `linear-gradient(to left, …)` below, which has no logical form
-    right: 0;
-    background: linear-gradient(
-      to left,
-      var(--wr-marquee-fade-color, var(--wr-marquee-fade-color-auto)) 0%,
-      rgba(0, 0, 0, 0) 100%
-    );
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .wr-marquee__track {
-      transform: translate3d(0, 0, 0) !important;
-    }
-
-    .wr-marquee__item img,
-    .wr-marquee__node {
-      transition: none !important;
-    }
-  }
-}
+// Public Sass entry for `@use 'ngwr/marquee'`.
+//
+// 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.
+// `marquee.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. `marquee.scss` forwards `_rules`
+// instead, so it carries this component's own CSS and nothing else.
+@use '../../theme/styles';
+@forward 'rules';

package/marquee/styles/_rules.scss

@@ -0,0 +1,150 @@
+// Endless marquee (reactbits LogoLoop port).
+// Vars driven from component inputs:
+//   --wr-marquee-gap         gap between items (px)
+//   --wr-marquee-height      item height (px)
+//   --wr-marquee-fade-color  edge fade colour (falls back to page bg)
+
+.wr-marquee {
+  --wr-marquee-gap: 32px;
+  --wr-marquee-height: 28px;
+  // Default to the lib's surface colour; consumers can override via
+  // `[fadeOutColor]` or by setting `--wr-marquee-fade-color` directly.
+  --wr-marquee-fade-color-auto: var(--wr-color-surface, #ffffff);
+
+  position: relative;
+  display: block;
+  width: 100%;
+  overflow: hidden;
+
+  &--scale-hover {
+    padding-top: calc(var(--wr-marquee-height) * 0.1);
+    padding-bottom: calc(var(--wr-marquee-height) * 0.1);
+  }
+
+  &__track {
+    display: flex;
+    width: max-content;
+    will-change: transform;
+    user-select: none;
+    position: relative;
+    z-index: 0;
+  }
+
+  &__list {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &__item {
+    flex: 0 0 auto;
+    // The whole strip is physical, not textual: `[direction]` is literally
+    // `'left' | 'right'`, the track is driven by `translate3d(-offset px, 0, 0)`
+    // against a `getBoundingClientRect().width` measurement of one sequence, and
+    // the edge fades are `left`/`right` gradients. The item gap is the seam of
+    // that physical loop — it has to match the offset the track wraps at, so it
+    // stays on the same axis the animation runs on.
+    // rtl-ok: seam gap of a physically-animated track (see the note above)
+    margin-right: var(--wr-marquee-gap);
+    font-size: var(--wr-marquee-height);
+    line-height: 1;
+  }
+
+  &__item:last-child {
+    // Restates the interior gap on the last item so the join between two copies
+    // of the sequence is spaced like the gaps inside it.
+    // rtl-ok: same physical loop axis as the interior gap above
+    margin-right: var(--wr-marquee-gap);
+  }
+
+  &__node {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &__item img {
+    height: var(--wr-marquee-height);
+    width: auto;
+    display: block;
+    object-fit: contain;
+    image-rendering: -webkit-optimize-contrast;
+    -webkit-user-drag: none;
+    pointer-events: none;
+    transition: transform var(--wr-duration-slow) var(--wr-ease-out);
+  }
+
+  &--scale-hover &__item {
+    overflow: visible;
+  }
+
+  &--scale-hover &__item:hover img,
+  &--scale-hover &__item:hover &__node {
+    transform: scale(1.2);
+    transform-origin: center center;
+  }
+
+  &--scale-hover &__node {
+    transition: transform var(--wr-duration-slow) var(--wr-ease-out);
+  }
+
+  &__link {
+    display: inline-flex;
+    align-items: center;
+    text-decoration: none;
+    border-radius: 4px;
+    transition: opacity 0.2s ease;
+
+    &:hover {
+      opacity: 0.8;
+    }
+
+    &:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+  }
+
+  &--fade::before,
+  &--fade::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: clamp(24px, 8%, 120px);
+    pointer-events: none;
+    z-index: 10;
+  }
+
+  &--fade::before {
+    // rtl-ok: paired with the physical `linear-gradient(to right, …)` below, which has no logical form
+    left: 0;
+    background: linear-gradient(
+      to right,
+      var(--wr-marquee-fade-color, var(--wr-marquee-fade-color-auto)) 0%,
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
+
+  &--fade::after {
+    // rtl-ok: paired with the physical `linear-gradient(to left, …)` below, which has no logical form
+    right: 0;
+    background: linear-gradient(
+      to left,
+      var(--wr-marquee-fade-color, var(--wr-marquee-fade-color-auto)) 0%,
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .wr-marquee__track {
+      transform: translate3d(0, 0, 0) !important;
+    }
+
+    .wr-marquee__item img,
+    .wr-marquee__node {
+      transition: none !important;
+    }
+  }
+}

package/package.json

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

package/segmented/styles/_index.scss

@@ -130,6 +130,14 @@
     line-height: var(--wr-segmented-line-height);
   }
 
+  // A read-only strip still takes focus and still shows which segment is
+  // pressed, so it keeps the visual and only stops inviting the click. This
+  // cursor is the only cue there is — see the `readonly` input for why nothing
+  // is mirrored into ARIA.
+  &--readonly &__option {
+    cursor: default;
+  }
+
   &--disabled {
     pointer-events: none;
     opacity: var(--wr-disabled-opacity);

package/select/styles/_index.scss

@@ -10,6 +10,14 @@
   --wr-select-padding-x: var(--wr-control-padding-x-md);
   --wr-select-font-size: var(--wr-control-font-size-md);
   --wr-select-line-height: var(--wr-control-line-height-md);
+  // The floor that keeps a bare `<wr-select>` from collapsing to its
+  // placeholder. A hook rather than a literal because the floor is wrong as
+  // often as it is right: dropped into a `minmax(0, 1fr)` grid column the
+  // trigger holds 160px and overhangs its cell, and overriding
+  // `.wr-select__trigger` is reaching past the public contract for something
+  // the rest of the component already exposes. Set it to 0 to hand the width
+  // back to the layout.
+  --wr-select-min-width: 10rem;
 
   display: inline-flex;
   vertical-align: middle;
@@ -52,12 +60,20 @@
     --wr-select-bg: var(--wr-color-fill);
   }
 
+  // A read-only select still takes focus and still shows what is selected, so it
+  // keeps the visual and only stops inviting the click that would open the
+  // panel. `not-allowed` would say something false about a control that works —
+  // the same call `.wr-select__tag-input:read-only` already makes.
+  &--readonly &__trigger {
+    cursor: default;
+  }
+
   &__trigger {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     width: 100%;
-    min-width: 10rem;
+    min-width: var(--wr-select-min-width);
     appearance: none;
     background: var(--wr-select-bg);
     color: var(--wr-select-color);

package/shiny-text/shiny-text.scss

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

package/shiny-text/styles/_index.scss

@@ -1,106 +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;
-
-// Shimmering text (reactbits port). Clips an animated linear gradient to
-// the text via `background-clip: text`.
+// Public Sass entry for `@use 'ngwr/shiny-text'`.
 //
-// The keyframes are 0% → 50%, then hold at the end position. Inputs set
-// `animation-duration` to (speed + delay); the keyframe hits the end at
-// the 50%/totalDuration mark and rests for the rest, which collapses to
-// `speed` of motion + `delay` of pause — without needing two animations.
-
-.wr-shiny-text {
-  // Theme-default sweep (overridden by `[color]` / `[shineColor]`):
-  // gray base with a dark shine on light surfaces; dark theme restores
-  // the reactbits gray-with-white-flash below.
-  --wr-shiny-text-base: var(--wr-color-on-surface-muted, #8594a4);
-  --wr-shiny-text-shine: var(--wr-color-on-surface, #0f172a);
-
-  display: inline-block;
-  background-size: 200% auto;
-  background-position: 150% center;
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation-name: wr-shiny-text-sweep;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-  animation-direction: normal;
-  animation-fill-mode: both;
-  animation-play-state: running;
-
-  &--reverse {
-    animation-direction: reverse;
-  }
-
-  &--yoyo {
-    animation-direction: alternate;
-
-    &.wr-shiny-text--reverse {
-      animation-direction: alternate-reverse;
-    }
-  }
-
-  &--paused {
-    animation-play-state: paused;
-  }
-
-  &--pause-on-hover:hover {
-    animation-play-state: paused;
-  }
-}
-
-@keyframes wr-shiny-text-sweep {
-  0% {
-    background-position: 150% center;
-  }
-  50% {
-    background-position: -50% center;
-  }
-  100% {
-    background-position: -50% center;
-  }
-}
-
-// Reduced motion: freeze the sweep at its rest position — the gradient's
-// base color fills the text, so it stays readable with zero movement.
-@media (prefers-reduced-motion: reduce) {
-  .wr-shiny-text {
-    animation: none !important;
-  }
-}
-
-// [wrShimmer] directive
-// Same package as <wr-shiny-text>. Lightweight host-class directive —
-// gradient sweep across text via `background-clip: text`.
-@keyframes wr-shimmer {
-  100% {
-    background-position-x: -200%;
-  }
-}
-
-.wr-shimmer {
-  background: linear-gradient(
-    110deg,
-    var(--wr-color-on-surface) 30%,
-    rgba(var(--wr-color-primary-rgb), 0.9) 50%,
-    var(--wr-color-on-surface) 70%
-  );
-  background-size: 200% 100%;
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  color: transparent;
-  animation: wr-shimmer 2.5s linear infinite;
-
-  @media (prefers-reduced-motion: reduce) {
-    animation: none;
-  }
-}
-
-[data-theme='dark'] .wr-shiny-text {
-  --wr-shiny-text-base: #b5b5b5;
-  --wr-shiny-text-shine: #ffffff;
-}
+// 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.
+// `shiny-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. `shiny-text.scss` forwards `_rules`
+// instead, so it carries this component's own CSS and nothing else.
+@use '../../theme/styles';
+@forward 'rules';

package/shiny-text/styles/_rules.scss

@@ -0,0 +1,101 @@
+// Shimmering text (reactbits port). Clips an animated linear gradient to
+// the text via `background-clip: text`.
+//
+// The keyframes are 0% → 50%, then hold at the end position. Inputs set
+// `animation-duration` to (speed + delay); the keyframe hits the end at
+// the 50%/totalDuration mark and rests for the rest, which collapses to
+// `speed` of motion + `delay` of pause — without needing two animations.
+
+.wr-shiny-text {
+  // Theme-default sweep (overridden by `[color]` / `[shineColor]`):
+  // gray base with a dark shine on light surfaces; dark theme restores
+  // the reactbits gray-with-white-flash below.
+  --wr-shiny-text-base: var(--wr-color-on-surface-muted, #8594a4);
+  --wr-shiny-text-shine: var(--wr-color-on-surface, #0f172a);
+
+  display: inline-block;
+  background-size: 200% auto;
+  background-position: 150% center;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation-name: wr-shiny-text-sweep;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-direction: normal;
+  animation-fill-mode: both;
+  animation-play-state: running;
+
+  &--reverse {
+    animation-direction: reverse;
+  }
+
+  &--yoyo {
+    animation-direction: alternate;
+
+    &.wr-shiny-text--reverse {
+      animation-direction: alternate-reverse;
+    }
+  }
+
+  &--paused {
+    animation-play-state: paused;
+  }
+
+  &--pause-on-hover:hover {
+    animation-play-state: paused;
+  }
+}
+
+@keyframes wr-shiny-text-sweep {
+  0% {
+    background-position: 150% center;
+  }
+  50% {
+    background-position: -50% center;
+  }
+  100% {
+    background-position: -50% center;
+  }
+}
+
+// Reduced motion: freeze the sweep at its rest position — the gradient's
+// base color fills the text, so it stays readable with zero movement.
+@media (prefers-reduced-motion: reduce) {
+  .wr-shiny-text {
+    animation: none !important;
+  }
+}
+
+// [wrShimmer] directive
+// Same package as <wr-shiny-text>. Lightweight host-class directive —
+// gradient sweep across text via `background-clip: text`.
+@keyframes wr-shimmer {
+  100% {
+    background-position-x: -200%;
+  }
+}
+
+.wr-shimmer {
+  background: linear-gradient(
+    110deg,
+    var(--wr-color-on-surface) 30%,
+    rgba(var(--wr-color-primary-rgb), 0.9) 50%,
+    var(--wr-color-on-surface) 70%
+  );
+  background-size: 200% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  animation: wr-shimmer 2.5s linear infinite;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+
+[data-theme='dark'] .wr-shiny-text {
+  --wr-shiny-text-base: #b5b5b5;
+  --wr-shiny-text-shine: #ffffff;
+}