ngwr 6.1.1 → 7.0.0

package/splitter/styles/_index.scss

@@ -0,0 +1,85 @@
+@use '../../theme/styles' as theme;
+
+.wr-splitter {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  user-select: none;
+  font-family: var(--wr-font-family-base);
+
+  &--horizontal {
+    flex-direction: row;
+  }
+
+  &--vertical {
+    flex-direction: column;
+  }
+
+  &__pane {
+    flex-grow: 0;
+    flex-shrink: 0;
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  &__divider {
+    flex: 0 0 auto;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--wr-color-light);
+    outline: 0;
+    transition: background var(--wr-transition-base);
+
+    &:hover,
+    &:focus-visible {
+      background: var(--wr-color-primary);
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 2px rgba(var(--wr-color-primary-rgb), 0.2);
+    }
+  }
+
+  &--horizontal &__divider {
+    width: 4px;
+    cursor: ew-resize;
+  }
+
+  &--vertical &__divider {
+    height: 4px;
+    cursor: ns-resize;
+  }
+
+  &__handle {
+    background: var(--wr-color-white);
+    border: 1px solid var(--wr-color-light);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+    display: inline-block;
+    flex: 0 0 auto;
+  }
+
+  &--horizontal &__handle {
+    width: 0.875rem;
+    height: 2rem;
+    @include theme.smooth-br(4px);
+  }
+
+  &--vertical &__handle {
+    width: 2rem;
+    height: 0.875rem;
+    @include theme.smooth-br(4px);
+  }
+
+  &--disabled &__divider {
+    cursor: not-allowed;
+
+    &:hover {
+      background: var(--wr-color-light);
+    }
+  }
+}

package/spotlight-card/spotlight-card.scss

@@ -0,0 +1 @@
+@forward './styles';

package/spotlight-card/styles/_index.scss

@@ -0,0 +1,43 @@
+// Cursor-tracked spotlight card (reactbits port). The `--wr-spotlight-x/y`
+// vars come from the host's mousemove handler; `--wr-spotlight-color` is
+// set inline from the `[spotlightColor]` input when provided — otherwise
+// the theme picks a default: a soft dark tint on light surfaces, the
+// classic white-alpha beam on dark.
+
+.wr-spotlight-card {
+  --wr-spotlight-x: 50%;
+  --wr-spotlight-y: 50%;
+  --wr-spotlight-color: rgba(var(--wr-color-dark-rgb), 0.08);
+
+  position: relative;
+  display: block;
+  border-radius: 1.5rem;
+  border: 1px solid var(--wr-color-light);
+  background-color: var(--wr-color-white);
+  padding: 2rem;
+  overflow: hidden;
+  color: var(--wr-color-dark);
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(
+      circle at var(--wr-spotlight-x) var(--wr-spotlight-y),
+      var(--wr-spotlight-color),
+      transparent var(--wr-spotlight-radius, 80%)
+    );
+    opacity: 0;
+    transition: opacity 0.5s ease;
+    pointer-events: none;
+  }
+
+  &:hover::before,
+  &:focus-within::before {
+    opacity: 0.6;
+  }
+}
+
+[data-theme='dark'] .wr-spotlight-card {
+  --wr-spotlight-color: rgb(255 255 255 / 25%);
+}

package/squircle/styles/_index.scss

@@ -0,0 +1,34 @@
+.wr-squircle {
+  display: block;
+}
+
+// When a [wrSquircle] host has a non-zero borderWidth, the directive sets
+// --wr-squircle-inner-path / --wr-squircle-border-color and adds this
+// modifier class. A ::before pseudo paints the inner squircle in the
+// content background, leaving the outer ring of the host visible as the
+// "border".
+//
+// The directive sets the host's `background-color` to the border colour;
+// consumers override the *content* background via `--wr-squircle-content-bg`
+// (defaults to the host's `background-color` cascaded through `inherit`).
+.wr-squircle--bordered {
+  position: relative;
+  background-color: var(--wr-squircle-border-color, currentColor);
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: var(--wr-squircle-border-width, 0);
+    background-color: var(--wr-squircle-content-bg, transparent);
+    clip-path: var(--wr-squircle-inner-path, none);
+    -webkit-clip-path: var(--wr-squircle-inner-path, none);
+    z-index: 0;
+    pointer-events: none;
+  }
+
+  // Lift real content above the bordered pseudo.
+  > * {
+    position: relative;
+    z-index: 1;
+  }
+}

package/star-border/star-border.scss

@@ -0,0 +1 @@
+@forward './styles';

package/star-border/styles/_index.scss

@@ -0,0 +1,118 @@
+// Star border (reactbits port). Two oversized radial-gradient "comets"
+// sweep along the top and bottom edges of the rounded container; the
+// projected content sits on a token-themed inner panel above them.
+
+.wr-star-border {
+  // Light surfaces get a primary comet; dark theme flips to the classic
+  // white (see block below). `[color]` overrides both inline. The light
+  // comet gets a wider core + full opacity — a thin 10% tail washes out
+  // to gray on white surfaces.
+  --wr-star-border-color: var(--wr-color-primary);
+  --wr-star-border-speed: 6s;
+  --wr-star-border-radius: 20px;
+  --wr-star-border-stop: 16%;
+  --wr-star-border-opacity: 1;
+
+  display: inline-block;
+  position: relative;
+  border: 0;
+  background: transparent;
+  border-radius: var(--wr-star-border-radius);
+  overflow: hidden;
+  cursor: inherit;
+
+  &__ray {
+    position: absolute;
+    display: block;
+    width: 300%;
+    height: 50%;
+    opacity: var(--wr-star-border-opacity);
+    border-radius: 50%;
+    background: radial-gradient(circle, var(--wr-star-border-color), transparent var(--wr-star-border-stop));
+    animation: wr-star-border-bottom var(--wr-star-border-speed) linear infinite alternate;
+    z-index: 0;
+
+    &--bottom {
+      bottom: -12px;
+      right: -250%;
+    }
+
+    &--top {
+      top: -12px;
+      left: -250%;
+      animation-name: wr-star-border-top;
+    }
+  }
+
+  // Single-ray variant — drop the top comet.
+  &--single &__ray--top {
+    display: none;
+  }
+
+  // Hover-only variant — rays sit hidden until the pointer is in. The
+  // idle state must drop the animation entirely (not pause it): a paused
+  // animation pins `opacity` at its 0% keyframe value, which beats the
+  // cascade and leaves a frozen comet visible.
+  &--hover &__ray {
+    opacity: 0;
+    animation: none;
+  }
+
+  &--hover:hover &__ray {
+    animation: wr-star-border-bottom var(--wr-star-border-speed) linear infinite alternate;
+  }
+
+  &--hover:hover &__ray--top {
+    animation-name: wr-star-border-top;
+  }
+
+  &__inner {
+    position: relative;
+    display: block;
+    border: 1px solid var(--wr-color-light);
+    background: var(--wr-color-white);
+    color: var(--wr-color-dark);
+    font-size: 1rem;
+    text-align: center;
+    padding: 1rem 1.625rem;
+    border-radius: var(--wr-star-border-radius);
+    z-index: 1;
+  }
+}
+
+[data-theme='dark'] .wr-star-border {
+  --wr-star-border-color: #ffffff;
+  --wr-star-border-stop: 10%;
+  --wr-star-border-opacity: 0.7;
+}
+
+@keyframes wr-star-border-bottom {
+  0% {
+    transform: translate(0%, 0%);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(-100%, 0%);
+    opacity: 0;
+  }
+}
+
+@keyframes wr-star-border-top {
+  0% {
+    transform: translate(0%, 0%);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(100%, 0%);
+    opacity: 0;
+  }
+}
+
+// Reduced motion: no sweeping comets — a frozen ray reads as a smudge,
+// so hide them and keep the panel border as the resting look.
+@media (prefers-reduced-motion: reduce) {
+  .wr-star-border__ray {
+    animation: none !important;
+    opacity: 0 !important;
+  }
+}

package/statistic/styles/_index.scss

@@ -0,0 +1,54 @@
+@use '../../theme/styles' as theme;
+
+.wr-statistic {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-family: var(--wr-font-family-base);
+  color: var(--wr-color-dark);
+
+  &__label {
+    font-size: var(--wr-text-sm);
+    color: var(--wr-color-medium);
+    line-height: var(--wr-leading-normal);
+  }
+
+  &__value {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.25rem;
+    font-size: var(--wr-text-3xl);
+    font-weight: var(--wr-font-weight-semibold);
+    line-height: var(--wr-leading-tight);
+    letter-spacing: var(--wr-tracking-tight);
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__prefix,
+  &__suffix {
+    font-size: var(--wr-text-lg);
+    font-weight: var(--wr-font-weight-medium);
+    color: var(--wr-color-medium);
+  }
+
+  &__delta {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: var(--wr-text-xs);
+    font-weight: var(--wr-font-weight-semibold);
+    font-variant-numeric: tabular-nums;
+
+    &--up {
+      color: var(--wr-color-success);
+    }
+
+    &--down {
+      color: var(--wr-color-danger);
+    }
+
+    &--flat {
+      color: var(--wr-color-medium);
+    }
+  }
+}

package/stepper/styles/_index.scss

@@ -0,0 +1,162 @@
+@use '../../theme/styles' as theme;
+
+.wr-stepper {
+  --wr-stepper-indicator-size: 1.75rem;
+  --wr-stepper-connector: var(--wr-color-light);
+  --wr-stepper-muted: var(--wr-color-medium);
+
+  display: flex;
+  flex-direction: column;
+  // Claim the full row even when nested in a flex-row demo wrapper.
+  flex: 1 1 100%;
+  width: 100%;
+  min-width: 0;
+  gap: 1rem;
+  font-family: var(--wr-font-family-base);
+
+  &__headers {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    gap: 0;
+  }
+
+  &--vertical &__headers {
+    flex-direction: column;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    flex: 1 1 auto;
+    gap: 0.75rem;
+    min-width: 0;
+
+    &--disabled {
+      opacity: 0.5;
+    }
+  }
+
+  &--vertical &__header {
+    align-items: stretch;
+    flex: 0 0 auto;
+  }
+
+  &__header-button {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0.25rem 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.625rem;
+    color: var(--wr-color-dark);
+    cursor: pointer;
+    text-align: left;
+    flex: 0 0 auto;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    &:hover:not(:disabled) .wr-stepper__indicator {
+      border-color: var(--wr-color-primary);
+      color: var(--wr-color-primary);
+    }
+  }
+
+  &__indicator {
+    width: var(--wr-stepper-indicator-size);
+    height: var(--wr-stepper-indicator-size);
+    border-radius: 50%;
+    border: 1.5px solid var(--wr-color-light);
+    background: var(--wr-color-white);
+    color: var(--wr-stepper-muted);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    transition:
+      background var(--wr-transition-base),
+      border-color var(--wr-transition-base),
+      color var(--wr-transition-base);
+  }
+
+  &__header--active &__indicator {
+    border-color: var(--wr-color-primary);
+    color: var(--wr-color-primary);
+    background: rgba(var(--wr-color-primary-rgb), 0.08);
+  }
+
+  &__header--completed &__indicator {
+    background: var(--wr-color-primary);
+    border-color: var(--wr-color-primary);
+    color: var(--wr-color-white);
+  }
+
+  &__label {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 0.0625rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25rem;
+  }
+
+  &__header--active &__label {
+    color: var(--wr-color-primary);
+  }
+
+  &__optional,
+  &__description {
+    font-size: 0.6875rem;
+    font-weight: 500;
+    color: var(--wr-stepper-muted);
+    text-transform: none;
+    letter-spacing: 0.01em;
+  }
+
+  &__optional {
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+
+  &__connector {
+    flex: 1 1 auto;
+    height: 1.5px;
+    background: var(--wr-stepper-connector);
+    min-width: 1rem;
+    margin: 0 0.5rem;
+  }
+
+  &--vertical &__connector {
+    width: 1.5px;
+    min-height: 1.25rem;
+    height: auto;
+    margin: 0.25rem 0 0.25rem calc(var(--wr-stepper-indicator-size) / 2);
+    align-self: stretch;
+    flex: 0 0 auto;
+  }
+
+  &__header--completed + &__header &__connector,
+  &__header--completed &__connector {
+    background: var(--wr-color-primary);
+  }
+
+  &__body {
+    min-height: 0;
+  }
+}
+
+// `<wr-step>` itself — visibility is driven by an `--active` class
+// the stepper toggles via host binding.
+.wr-step {
+  display: none;
+}
+
+.wr-step--active {
+  display: block;
+}

package/styles/_animations.scss

@@ -0,0 +1,198 @@
+// Animation utility classes — opt-in.
+//
+// Not loaded by the umbrella `ngwr` entry. Bring in explicitly:
+//
+//   @use 'ngwr/animations';
+//
+// Duration / easing read from the `--wr-duration-*` / `--wr-ease-*`
+// tokens, so global timing tweaks land everywhere in one place.
+// Respects `prefers-reduced-motion` — all animations collapse to a
+// single frame so users who opt out don't see motion.
+
+// Keyframes
+@keyframes wr-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes wr-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes wr-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes wr-slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes wr-slide-left {
+  from {
+    opacity: 0;
+    transform: translateX(0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes wr-slide-right {
+  from {
+    opacity: 0;
+    transform: translateX(-0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes wr-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes wr-scale-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+@keyframes wr-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes wr-pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes wr-bounce {
+  0%,
+  100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+// Utility classes
+.wr-animate-fade-in {
+  animation: wr-fade-in var(--wr-duration-base) var(--wr-ease-out) both;
+}
+.wr-animate-fade-out {
+  animation: wr-fade-out var(--wr-duration-base) var(--wr-ease-in) both;
+}
+.wr-animate-slide-up {
+  animation: wr-slide-up var(--wr-duration-base) var(--wr-ease-out) both;
+}
+.wr-animate-slide-down {
+  animation: wr-slide-down var(--wr-duration-base) var(--wr-ease-out) both;
+}
+.wr-animate-slide-left {
+  animation: wr-slide-left var(--wr-duration-base) var(--wr-ease-out) both;
+}
+.wr-animate-slide-right {
+  animation: wr-slide-right var(--wr-duration-base) var(--wr-ease-out) both;
+}
+.wr-animate-scale-in {
+  animation: wr-scale-in var(--wr-duration-base) var(--wr-ease-out) both;
+}
+.wr-animate-scale-out {
+  animation: wr-scale-out var(--wr-duration-base) var(--wr-ease-in) both;
+}
+.wr-animate-spin {
+  animation: wr-spin 1s linear infinite;
+}
+.wr-animate-pulse {
+  animation: wr-pulse 2s var(--wr-ease-in-out) infinite;
+}
+.wr-animate-bounce {
+  animation: wr-bounce 1s infinite;
+}
+
+// Reveal-on-scroll integration
+// Initial state — set by `[wrReveal]` on the host element via the
+// `wr-reveal` host class. The directive flips `wr-reveal--visible`
+// once the element enters the viewport.
+.wr-reveal {
+  opacity: 0;
+  transform: translateY(0.75rem);
+  transition:
+    opacity var(--wr-duration-slow) var(--wr-ease-out),
+    transform var(--wr-duration-slow) var(--wr-ease-out);
+
+  &--visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// prefers-reduced-motion
+@media (prefers-reduced-motion: reduce) {
+  .wr-animate-fade-in,
+  .wr-animate-fade-out,
+  .wr-animate-slide-up,
+  .wr-animate-slide-down,
+  .wr-animate-slide-left,
+  .wr-animate-slide-right,
+  .wr-animate-scale-in,
+  .wr-animate-scale-out,
+  .wr-animate-spin,
+  .wr-animate-pulse,
+  .wr-animate-bounce {
+    animation: none !important;
+  }
+
+  .wr-reveal {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}
+
+// `wr-border-glow` lives in its own component now (see `ngwr/border-glow`).
+// The directive-based rotating-ring effect was replaced by a cursor-tracked
+// cone effect; the old `--wr-border-glow-*` custom properties are gone.