ngwr 12.2.0 → 13.0.0

package/glitch-text/styles/_index.scss

@@ -1,165 +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;
-
-// Glitch text (reactbits port). Two pseudo-element clones of the text
-// are offset by ±5px and tinted with `text-shadow` (red / cyan).
-// A clip-path keyframe slices random horizontal bands of each clone.
+// Public Sass entry for `@use 'ngwr/glitch-text'`.
 //
-// The clones hang off `__clones`, never off the host. `content: attr(data-text)`
-// is exposed to the accessibility tree, so pseudos on the host made the string
-// announce three times; `__clones` carries `aria-hidden` and takes both of them
-// out of the tree at once.
-
-.wr-glitch-text {
-  --wr-glitch-text-before-duration: 2s;
-  --wr-glitch-text-after-duration: 3s;
-  --wr-glitch-text-before-shadow: 5px 0 var(--wr-color-info);
-  --wr-glitch-text-after-shadow: -5px 0 var(--wr-color-danger);
-
-  position: relative;
-  display: inline-block;
-  white-space: nowrap;
-  user-select: none;
-  font-weight: 900;
-  color: var(--wr-color-on-surface, #0f172a);
-
-  // The decorative layer. Stretched over the label so the clones land exactly
-  // where they did when they hung off the host. No `pointer-events: none`: the
-  // clones overhang the host by 10px on each side, and the hover-only variant
-  // is gated on `:hover`, so a layer the pointer passes through would leave the
-  // effect flickering off along those two strips.
-  &__clones {
-    position: absolute;
-    inset: 0;
-  }
-
-  &__clones::before,
-  &__clones::after {
-    content: attr(data-text);
-    position: absolute;
-    top: 0;
-    color: inherit;
-    background-color: var(--wr-glitch-text-bg, transparent);
-    overflow: hidden;
-    clip-path: inset(0 0 0 0);
-  }
-
-  // Always-on variant — clones animate continuously.
-  &:not(&--hover-only) &__clones::before {
-    // rtl-ok: aberration offset paired with the physical x-offset in `--wr-glitch-text-before-shadow` (`5px 0`)
-    left: -10px;
-    text-shadow: var(--wr-glitch-text-before-shadow);
-    animation: wr-glitch-text-tear var(--wr-glitch-text-before-duration) infinite linear alternate-reverse;
-  }
-  &:not(&--hover-only) &__clones::after {
-    // rtl-ok: aberration offset paired with the physical x-offset in `--wr-glitch-text-after-shadow` (`-5px 0`)
-    left: 10px;
-    text-shadow: var(--wr-glitch-text-after-shadow);
-    animation: wr-glitch-text-tear var(--wr-glitch-text-after-duration) infinite linear alternate-reverse;
-  }
-
-  // Hover-only variant — clones hidden by default, animate on :hover.
-  &--hover-only &__clones::before,
-  &--hover-only &__clones::after {
-    content: '';
-    opacity: 0;
-    animation: none;
-  }
-
-  &--hover-only:hover &__clones::before {
-    content: attr(data-text);
-    opacity: 1;
-    // rtl-ok: same decorative offset as the always-on variant, paired with a physical `text-shadow` x-offset
-    left: -10px;
-    text-shadow: var(--wr-glitch-text-before-shadow);
-    animation: wr-glitch-text-tear var(--wr-glitch-text-before-duration) infinite linear alternate-reverse;
-  }
-  &--hover-only:hover &__clones::after {
-    content: attr(data-text);
-    opacity: 1;
-    // rtl-ok: same decorative offset as the always-on variant, paired with a physical `text-shadow` x-offset
-    left: 10px;
-    text-shadow: var(--wr-glitch-text-after-shadow);
-    animation: wr-glitch-text-tear var(--wr-glitch-text-after-duration) infinite linear alternate-reverse;
-  }
-}
-
-// Reduced motion: drop the glitch clones entirely — a frozen glitch frame
-// reads as broken double-vision text, so plain text is the right fallback.
-// `!important` outweighs the higher-specificity `:hover` re-enable rules.
-@media (prefers-reduced-motion: reduce) {
-  .wr-glitch-text__clones::before,
-  .wr-glitch-text__clones::after {
-    content: '' !important;
-    opacity: 0 !important;
-    animation: none !important;
-  }
-}
-
-@keyframes wr-glitch-text-tear {
-  0% {
-    clip-path: inset(20% 0 50% 0);
-  }
-  5% {
-    clip-path: inset(10% 0 60% 0);
-  }
-  10% {
-    clip-path: inset(15% 0 55% 0);
-  }
-  15% {
-    clip-path: inset(25% 0 35% 0);
-  }
-  20% {
-    clip-path: inset(30% 0 40% 0);
-  }
-  25% {
-    clip-path: inset(40% 0 20% 0);
-  }
-  30% {
-    clip-path: inset(10% 0 60% 0);
-  }
-  35% {
-    clip-path: inset(15% 0 55% 0);
-  }
-  40% {
-    clip-path: inset(25% 0 35% 0);
-  }
-  45% {
-    clip-path: inset(30% 0 40% 0);
-  }
-  50% {
-    clip-path: inset(20% 0 50% 0);
-  }
-  55% {
-    clip-path: inset(10% 0 60% 0);
-  }
-  60% {
-    clip-path: inset(15% 0 55% 0);
-  }
-  65% {
-    clip-path: inset(25% 0 35% 0);
-  }
-  70% {
-    clip-path: inset(30% 0 40% 0);
-  }
-  75% {
-    clip-path: inset(40% 0 20% 0);
-  }
-  80% {
-    clip-path: inset(20% 0 50% 0);
-  }
-  85% {
-    clip-path: inset(10% 0 60% 0);
-  }
-  90% {
-    clip-path: inset(15% 0 55% 0);
-  }
-  95% {
-    clip-path: inset(25% 0 35% 0);
-  }
-  100% {
-    clip-path: inset(30% 0 40% 0);
-  }
-}
+// 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.
+// `glitch-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. `glitch-text.scss` forwards `_rules`
+// instead, so it carries this component's own CSS and nothing else.
+@use '../../theme/styles';
+@forward 'rules';

package/glitch-text/styles/_rules.scss

@@ -0,0 +1,160 @@
+// Glitch text (reactbits port). Two pseudo-element clones of the text
+// are offset by ±5px and tinted with `text-shadow` (red / cyan).
+// A clip-path keyframe slices random horizontal bands of each clone.
+//
+// The clones hang off `__clones`, never off the host. `content: attr(data-text)`
+// is exposed to the accessibility tree, so pseudos on the host made the string
+// announce three times; `__clones` carries `aria-hidden` and takes both of them
+// out of the tree at once.
+
+.wr-glitch-text {
+  --wr-glitch-text-before-duration: 2s;
+  --wr-glitch-text-after-duration: 3s;
+  --wr-glitch-text-before-shadow: 5px 0 var(--wr-color-info);
+  --wr-glitch-text-after-shadow: -5px 0 var(--wr-color-danger);
+
+  position: relative;
+  display: inline-block;
+  white-space: nowrap;
+  user-select: none;
+  font-weight: 900;
+  color: var(--wr-color-on-surface, #0f172a);
+
+  // The decorative layer. Stretched over the label so the clones land exactly
+  // where they did when they hung off the host. No `pointer-events: none`: the
+  // clones overhang the host by 10px on each side, and the hover-only variant
+  // is gated on `:hover`, so a layer the pointer passes through would leave the
+  // effect flickering off along those two strips.
+  &__clones {
+    position: absolute;
+    inset: 0;
+  }
+
+  &__clones::before,
+  &__clones::after {
+    content: attr(data-text);
+    position: absolute;
+    top: 0;
+    color: inherit;
+    background-color: var(--wr-glitch-text-bg, transparent);
+    overflow: hidden;
+    clip-path: inset(0 0 0 0);
+  }
+
+  // Always-on variant — clones animate continuously.
+  &:not(&--hover-only) &__clones::before {
+    // rtl-ok: aberration offset paired with the physical x-offset in `--wr-glitch-text-before-shadow` (`5px 0`)
+    left: -10px;
+    text-shadow: var(--wr-glitch-text-before-shadow);
+    animation: wr-glitch-text-tear var(--wr-glitch-text-before-duration) infinite linear alternate-reverse;
+  }
+  &:not(&--hover-only) &__clones::after {
+    // rtl-ok: aberration offset paired with the physical x-offset in `--wr-glitch-text-after-shadow` (`-5px 0`)
+    left: 10px;
+    text-shadow: var(--wr-glitch-text-after-shadow);
+    animation: wr-glitch-text-tear var(--wr-glitch-text-after-duration) infinite linear alternate-reverse;
+  }
+
+  // Hover-only variant — clones hidden by default, animate on :hover.
+  &--hover-only &__clones::before,
+  &--hover-only &__clones::after {
+    content: '';
+    opacity: 0;
+    animation: none;
+  }
+
+  &--hover-only:hover &__clones::before {
+    content: attr(data-text);
+    opacity: 1;
+    // rtl-ok: same decorative offset as the always-on variant, paired with a physical `text-shadow` x-offset
+    left: -10px;
+    text-shadow: var(--wr-glitch-text-before-shadow);
+    animation: wr-glitch-text-tear var(--wr-glitch-text-before-duration) infinite linear alternate-reverse;
+  }
+  &--hover-only:hover &__clones::after {
+    content: attr(data-text);
+    opacity: 1;
+    // rtl-ok: same decorative offset as the always-on variant, paired with a physical `text-shadow` x-offset
+    left: 10px;
+    text-shadow: var(--wr-glitch-text-after-shadow);
+    animation: wr-glitch-text-tear var(--wr-glitch-text-after-duration) infinite linear alternate-reverse;
+  }
+}
+
+// Reduced motion: drop the glitch clones entirely — a frozen glitch frame
+// reads as broken double-vision text, so plain text is the right fallback.
+// `!important` outweighs the higher-specificity `:hover` re-enable rules.
+@media (prefers-reduced-motion: reduce) {
+  .wr-glitch-text__clones::before,
+  .wr-glitch-text__clones::after {
+    content: '' !important;
+    opacity: 0 !important;
+    animation: none !important;
+  }
+}
+
+@keyframes wr-glitch-text-tear {
+  0% {
+    clip-path: inset(20% 0 50% 0);
+  }
+  5% {
+    clip-path: inset(10% 0 60% 0);
+  }
+  10% {
+    clip-path: inset(15% 0 55% 0);
+  }
+  15% {
+    clip-path: inset(25% 0 35% 0);
+  }
+  20% {
+    clip-path: inset(30% 0 40% 0);
+  }
+  25% {
+    clip-path: inset(40% 0 20% 0);
+  }
+  30% {
+    clip-path: inset(10% 0 60% 0);
+  }
+  35% {
+    clip-path: inset(15% 0 55% 0);
+  }
+  40% {
+    clip-path: inset(25% 0 35% 0);
+  }
+  45% {
+    clip-path: inset(30% 0 40% 0);
+  }
+  50% {
+    clip-path: inset(20% 0 50% 0);
+  }
+  55% {
+    clip-path: inset(10% 0 60% 0);
+  }
+  60% {
+    clip-path: inset(15% 0 55% 0);
+  }
+  65% {
+    clip-path: inset(25% 0 35% 0);
+  }
+  70% {
+    clip-path: inset(30% 0 40% 0);
+  }
+  75% {
+    clip-path: inset(40% 0 20% 0);
+  }
+  80% {
+    clip-path: inset(20% 0 50% 0);
+  }
+  85% {
+    clip-path: inset(10% 0 60% 0);
+  }
+  90% {
+    clip-path: inset(15% 0 55% 0);
+  }
+  95% {
+    clip-path: inset(25% 0 35% 0);
+  }
+  100% {
+    clip-path: inset(30% 0 40% 0);
+  }
+}

package/gradient-text/gradient-text.scss

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

package/gradient-text/styles/_index.scss

@@ -1,118 +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;
-
-// Animated gradient text (reactbits port). The gradient is shared between
-// the text fill (via `background-clip: text`) and an optional outer ring.
-// Both layers use the same animation, so the ring + text stay in sync.
-
-.wr-gradient-text {
-  --wr-gradient-text-image: linear-gradient(to right, #5227ff, #ff9ffc, #b497cf, #5227ff);
-  --wr-gradient-text-size: 300% 100%;
-  --wr-gradient-text-duration: 8s;
-
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0;
-  font-weight: 500;
-  line-height: 1.25;
-  overflow: hidden;
-
-  &--border {
-    padding: 0.35rem 0.75rem;
-    border-radius: 1.25rem;
-  }
-
-  &__text {
-    position: relative;
-    z-index: 2;
-    display: inline-block;
-    background-image: var(--wr-gradient-text-image);
-    background-size: var(--wr-gradient-text-size);
-    background-position: 0% 50%;
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-    animation: wr-gradient-text-horizontal var(--wr-gradient-text-duration) linear infinite;
-  }
-
-  // Border variant — animated gradient ring + dark inner pill behind the
-  // text. The inner uses a `::before` so the gradient is only visible at
-  // the perimeter.
-  &__border {
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    background-image: var(--wr-gradient-text-image);
-    background-size: var(--wr-gradient-text-size);
-    background-position: 0% 50%;
-    animation: wr-gradient-text-horizontal var(--wr-gradient-text-duration) linear infinite;
-    z-index: 0;
-    pointer-events: none;
-
-    &::before {
-      content: '';
-      position: absolute;
-      inset: 1px;
-      border-radius: inherit;
-      // Surface token — flips with the theme so the ring reads on both.
-      background-color: var(--wr-color-surface, #fff);
-      z-index: 1;
-    }
-  }
-
-  // Direction variants change which axis the gradient slides on.
-  &--vertical &__text,
-  &--vertical &__border {
-    background-position: 50% 0%;
-    animation-name: wr-gradient-text-vertical;
-  }
-
-  // Diagonal: same as horizontal motion but a diagonal angle on the
-  // gradient itself.
-  &--diagonal &__text,
-  &--diagonal &__border {
-    background-position: 0% 50%;
-    animation-name: wr-gradient-text-horizontal;
-  }
-
-  &--yoyo &__text,
-  &--yoyo &__border {
-    animation-direction: alternate;
-  }
-
-  &--pause-on-hover:hover &__text,
-  &--pause-on-hover:hover &__border {
-    animation-play-state: paused;
-  }
-}
-
-@keyframes wr-gradient-text-horizontal {
-  from {
-    background-position: 0% 50%;
-  }
-  to {
-    background-position: 100% 50%;
-  }
-}
-
-@keyframes wr-gradient-text-vertical {
-  from {
-    background-position: 50% 0%;
-  }
-  to {
-    background-position: 50% 100%;
-  }
-}
-
-// Reduced motion: hold the gradient still — text keeps its gradient fill
-// (and the border variant its ring), only the slide stops.
-@media (prefers-reduced-motion: reduce) {
-  .wr-gradient-text__text,
-  .wr-gradient-text__border {
-    animation: none !important;
-  }
-}
+// Public Sass entry for `@use 'ngwr/gradient-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.
+// `gradient-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. `gradient-text.scss` forwards `_rules`
+// instead, so it carries this component's own CSS and nothing else.
+@use '../../theme/styles';
+@forward 'rules';

package/gradient-text/styles/_rules.scss

@@ -0,0 +1,113 @@
+// Animated gradient text (reactbits port). The gradient is shared between
+// the text fill (via `background-clip: text`) and an optional outer ring.
+// Both layers use the same animation, so the ring + text stay in sync.
+
+.wr-gradient-text {
+  --wr-gradient-text-image: linear-gradient(to right, #5227ff, #ff9ffc, #b497cf, #5227ff);
+  --wr-gradient-text-size: 300% 100%;
+  --wr-gradient-text-duration: 8s;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  font-weight: 500;
+  line-height: 1.25;
+  overflow: hidden;
+
+  &--border {
+    padding: 0.35rem 0.75rem;
+    border-radius: 1.25rem;
+  }
+
+  &__text {
+    position: relative;
+    z-index: 2;
+    display: inline-block;
+    background-image: var(--wr-gradient-text-image);
+    background-size: var(--wr-gradient-text-size);
+    background-position: 0% 50%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    animation: wr-gradient-text-horizontal var(--wr-gradient-text-duration) linear infinite;
+  }
+
+  // Border variant — animated gradient ring + dark inner pill behind the
+  // text. The inner uses a `::before` so the gradient is only visible at
+  // the perimeter.
+  &__border {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background-image: var(--wr-gradient-text-image);
+    background-size: var(--wr-gradient-text-size);
+    background-position: 0% 50%;
+    animation: wr-gradient-text-horizontal var(--wr-gradient-text-duration) linear infinite;
+    z-index: 0;
+    pointer-events: none;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 1px;
+      border-radius: inherit;
+      // Surface token — flips with the theme so the ring reads on both.
+      background-color: var(--wr-color-surface, #fff);
+      z-index: 1;
+    }
+  }
+
+  // Direction variants change which axis the gradient slides on.
+  &--vertical &__text,
+  &--vertical &__border {
+    background-position: 50% 0%;
+    animation-name: wr-gradient-text-vertical;
+  }
+
+  // Diagonal: same as horizontal motion but a diagonal angle on the
+  // gradient itself.
+  &--diagonal &__text,
+  &--diagonal &__border {
+    background-position: 0% 50%;
+    animation-name: wr-gradient-text-horizontal;
+  }
+
+  &--yoyo &__text,
+  &--yoyo &__border {
+    animation-direction: alternate;
+  }
+
+  &--pause-on-hover:hover &__text,
+  &--pause-on-hover:hover &__border {
+    animation-play-state: paused;
+  }
+}
+
+@keyframes wr-gradient-text-horizontal {
+  from {
+    background-position: 0% 50%;
+  }
+  to {
+    background-position: 100% 50%;
+  }
+}
+
+@keyframes wr-gradient-text-vertical {
+  from {
+    background-position: 50% 0%;
+  }
+  to {
+    background-position: 50% 100%;
+  }
+}
+
+// Reduced motion: hold the gradient still — text keeps its gradient fill
+// (and the border variant its ring), only the slide stops.
+@media (prefers-reduced-motion: reduce) {
+  .wr-gradient-text__text,
+  .wr-gradient-text__border {
+    animation: none !important;
+  }
+}

package/input/styles/_index.scss

@@ -131,6 +131,19 @@
     }
   }
 
+  // ...which is why the group has to carry the disabled fill on the input's
+  // behalf. `.wr-input:disabled` sets `--wr-input-bg: var(--wr-color-fill)`,
+  // but the `background: transparent` above outranks it and the group keeps
+  // painting `--wr-color-surface` — so in a disabled form `<wr-date-picker>`
+  // and `<wr-input-number>` were the only fields still reading as editable
+  // beside a greyed `[wrInput]`, `<wr-textarea>` and `<wr-select>`.
+  // Readonly is deliberately NOT matched: `--disabled` is the only state
+  // `wr-textarea` / `wr-select` / `wr-cascader` fill for, and the bare
+  // `.wr-input[readonly]` fill is the outlier, not the contract.
+  &:has(> .wr-input:disabled) {
+    --wr-input-group-bg: var(--wr-color-fill);
+  }
+
   &__affix {
     display: inline-flex;
     align-items: center;

package/input-otp/styles/_index.scss

@@ -50,6 +50,14 @@
       box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.15);
     }
 
+    // A read-only box still takes focus, still answers the arrow keys and still
+    // submits, so `not-allowed` would say something false about a control that
+    // is working — the cursor is the whole cue. Listed before `:disabled`, which
+    // matches a readonly-OR-disabled box too and has to win on source order.
+    &:read-only {
+      cursor: default;
+    }
+
     &:disabled {
       background: var(--wr-color-fill-strong);
       color: var(--wr-color-on-surface-muted);

package/lightbox/lightbox.scss

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