ngwr 6.1.1 → 7.1.0

package/sidebar/styles/_index.scss

@@ -0,0 +1,208 @@
+@use '../../theme/styles' as theme;
+
+.wr-sidebar {
+  display: block;
+  font-family: var(--wr-font-family-base);
+  color: var(--wr-color-dark);
+
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  &__icon {
+    flex: 0 0 auto;
+    color: var(--wr-color-medium);
+    transition: color var(--wr-transition-base);
+  }
+
+  // Direct-link entry (top level)
+  &__entry {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border-radius: var(--wr-border-radius-sm);
+    color: var(--wr-color-dark);
+    font-size: var(--wr-text-sm);
+    font-weight: var(--wr-font-weight-semibold);
+    line-height: 1.25rem;
+    text-decoration: none;
+    transition:
+      background var(--wr-transition-base),
+      color var(--wr-transition-base);
+
+    &:hover {
+      background: rgba(var(--wr-color-light-rgb), 0.5);
+
+      .wr-sidebar__icon {
+        color: var(--wr-color-primary);
+      }
+    }
+
+    &--active {
+      color: var(--wr-color-primary);
+      background: rgba(var(--wr-color-primary-rgb), 0.1);
+      pointer-events: none;
+
+      .wr-sidebar__icon {
+        color: var(--wr-color-primary);
+      }
+    }
+
+    &--disabled {
+      color: var(--wr-color-medium);
+      pointer-events: none;
+      opacity: 0.6;
+    }
+  }
+
+  // Expandable group
+  &__group {
+    display: flex;
+    flex-direction: column;
+
+    &-toggle {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      width: 100%;
+      margin: 0;
+      padding: 0.5rem 0.75rem;
+      background: transparent;
+      border: 0;
+      border-radius: var(--wr-border-radius-sm);
+      color: var(--wr-color-dark);
+      cursor: pointer;
+      text-align: left;
+      transition: background var(--wr-transition-base);
+
+      &:hover {
+        background: rgba(var(--wr-color-light-rgb), 0.5);
+
+        .wr-sidebar__icon {
+          color: var(--wr-color-primary);
+        }
+      }
+    }
+
+    &-wrap {
+      display: grid;
+      grid-template-rows: 1fr;
+      transition: grid-template-rows var(--wr-duration-slow) var(--wr-ease-out);
+    }
+
+    &-body {
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      overflow: hidden;
+    }
+
+    &--collapsed .wr-sidebar__group-wrap {
+      grid-template-rows: 0fr;
+    }
+  }
+
+  &__title {
+    flex: 1 1 auto;
+    font-size: var(--wr-text-sm);
+    font-weight: var(--wr-font-weight-semibold);
+  }
+
+  &__chevron {
+    flex: 0 0 auto;
+    color: var(--wr-color-medium);
+    transition: transform var(--wr-transition-base);
+  }
+
+  &__group--collapsed &__chevron {
+    transform: rotate(-90deg);
+  }
+
+  // Child items (inside an expanded group)
+  &__list {
+    list-style: none;
+    margin: 0.125rem 0 0.375rem 0.5rem;
+    padding: 0 0 0 0.625rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.0625rem;
+    border-left: 1px solid var(--wr-color-light);
+  }
+
+  &__item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.3125rem 0.75rem;
+    border-radius: var(--wr-border-radius-sm);
+    color: var(--wr-color-dark);
+    font-size: var(--wr-text-sm);
+    font-weight: var(--wr-font-weight-medium);
+    line-height: 1.25rem;
+    text-decoration: none;
+    transition:
+      color var(--wr-transition-base),
+      background var(--wr-transition-base);
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0.125rem;
+      bottom: 0.125rem;
+      left: -0.6875rem;
+      width: 2px;
+      border-radius: 1px;
+      background: transparent;
+      transition: background var(--wr-transition-base);
+    }
+
+    &-title {
+      flex: 1 1 auto;
+    }
+
+    &:hover {
+      color: var(--wr-color-primary);
+      background: rgba(var(--wr-color-primary-rgb), 0.06);
+
+      .wr-sidebar__icon {
+        color: var(--wr-color-primary);
+      }
+    }
+
+    &--active {
+      color: var(--wr-color-primary);
+      background: rgba(var(--wr-color-primary-rgb), 0.1);
+      pointer-events: none;
+
+      &::before {
+        background: var(--wr-color-primary);
+      }
+
+      .wr-sidebar__icon {
+        color: var(--wr-color-primary);
+      }
+    }
+
+    &--disabled {
+      color: var(--wr-color-medium);
+      pointer-events: none;
+      opacity: 0.6;
+    }
+  }
+
+  &__badge {
+    flex: 0 0 auto;
+    padding: 0.0625rem 0.375rem;
+    border-radius: var(--wr-border-radius-pill);
+    background: rgba(var(--wr-color-light-rgb), 0.6);
+    color: var(--wr-color-medium);
+    font-size: var(--wr-text-xs);
+    font-weight: var(--wr-font-weight-semibold);
+    text-transform: uppercase;
+    letter-spacing: var(--wr-tracking-wide);
+  }
+}

package/skeleton/styles/_index.scss

@@ -1,54 +1,54 @@
-@use '../../styles/maps' as maps;
-
-$skeleton-prefix: wr-skeleton;
+@use '../../theme/styles' as theme;
 
 .wr-skeleton {
   display: block;
-
-  width: 100%;
-
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-
-  height: var(--wr-font-size-base);
-  border-radius: var(--wr-border-radius-base);
-
   position: relative;
   overflow: hidden;
-
   user-select: none;
   pointer-events: none;
 
-  &:after {
+  // Defaults — override on the host element for custom shapes.
+  --wr-skeleton-height: 1lh;
+  --wr-skeleton-radius: var(--wr-border-radius-base);
+
+  width: 100%;
+  height: var(--wr-skeleton-height);
+  border-radius: var(--wr-skeleton-radius);
+
+  &::after {
     content: '';
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     transform: translateX(-100%);
     animation: none;
   }
 
-  &--animated {
-    &:after {
-      animation: shimmer 2s infinite;
-    }
+  &--animated::after {
+    animation: wr-skeleton-shimmer 2s infinite;
   }
-}
 
-@each $color, $value in maps.$theme-colors-map {
-  .wr-skeleton--#{$color} {
-    background: rgba(var(--wr-color-#{$color}-rgb), 0.125);
+  // Tint strength: 12.5% reads as "nothing" on a white card — the
+  // placeholder has to be obviously present, so the base sits at 50%
+  // with the shimmer band sweeping visibly above it.
+  @each $name in theme.$colors {
+    &--#{$name} {
+      background: rgba(var(--wr-color-#{$name}-rgb), 0.5);
 
-    &:after {
-      background-image: linear-gradient(
+      &::after {
+        background-image: linear-gradient(
           90deg,
-          rgba(var(--wr-color-#{$color}-rgb), 0) 0,
-          rgba(var(--wr-color-#{$color}-rgb), 0.125) 20%,
-          rgba(var(--wr-color-#{$color}-rgb), 0.25) 60%,
-          rgba(var(--wr-color-#{$color}-rgb), 0)
-      );
+          rgba(var(--wr-color-#{$name}-rgb), 0) 0,
+          rgba(var(--wr-color-#{$name}-rgb), 0.4) 20%,
+          rgba(var(--wr-color-#{$name}-rgb), 0.8) 60%,
+          rgba(var(--wr-color-#{$name}-rgb), 0)
+        );
+      }
     }
   }
 }
+
+@keyframes wr-skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}

package/slider/styles/_index.scss

@@ -0,0 +1,77 @@
+@use '../../theme/styles' as theme;
+
+.wr-slider {
+  --wr-slider-track: var(--wr-color-light);
+  --wr-slider-fill: var(--wr-color-primary);
+  --wr-slider-thumb: var(--wr-color-white);
+  --wr-slider-thumb-border: var(--wr-color-primary);
+  --wr-slider-thumb-size: 1rem;
+  --wr-slider-track-height: 0.25rem;
+  --wr-slider-label: var(--wr-color-medium);
+
+  display: block;
+  width: 100%;
+  min-width: 0;
+  font-family: var(--wr-font-family-base);
+  padding: calc(var(--wr-slider-thumb-size) / 2) 0;
+
+  &__track {
+    position: relative;
+    height: var(--wr-slider-track-height);
+    border-radius: var(--wr-border-radius-pill);
+    background: var(--wr-slider-track);
+    cursor: pointer;
+    touch-action: none;
+  }
+
+  &__fill {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    background: var(--wr-slider-fill);
+    border-radius: var(--wr-border-radius-pill);
+    pointer-events: none;
+  }
+
+  &__thumb {
+    position: absolute;
+    top: 50%;
+    width: var(--wr-slider-thumb-size);
+    height: var(--wr-slider-thumb-size);
+    transform: translate(-50%, -50%);
+    appearance: none;
+    background: var(--wr-slider-thumb);
+    border: 2px solid var(--wr-slider-thumb-border);
+    border-radius: 50%;
+    padding: 0;
+    cursor: grab;
+    transition:
+      transform var(--wr-transition-short),
+      box-shadow var(--wr-transition-base);
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.25);
+    }
+
+    &:active {
+      cursor: grabbing;
+      transform: translate(-50%, -50%) scale(1.1);
+    }
+  }
+
+  &__label {
+    margin-top: 0.5rem;
+    color: var(--wr-slider-label);
+    font-size: 0.8125rem;
+    line-height: 1.125rem;
+    font-variant-numeric: tabular-nums;
+  }
+
+  &--disabled {
+    --wr-slider-thumb-border: var(--wr-color-medium);
+    --wr-slider-fill: var(--wr-color-medium);
+    pointer-events: none;
+    opacity: 0.6;
+  }
+}

package/sparkline/styles/_index.scss

@@ -0,0 +1,9 @@
+.wr-sparkline {
+  display: inline-block;
+  line-height: 0;
+
+  svg {
+    display: block;
+    overflow: visible;
+  }
+}

package/speed-dial/styles/_index.scss

@@ -0,0 +1,158 @@
+@use '../../theme/styles' as theme;
+
+.wr-speed-dial {
+  --wr-speed-dial-size: 3.25rem;
+  --wr-speed-dial-action-size: 2.5rem;
+  --wr-speed-dial-gap: 0.625rem;
+
+  position: relative;
+  display: inline-block;
+  font-family: var(--wr-font-family-base);
+
+  &__trigger {
+    width: var(--wr-speed-dial-size);
+    height: var(--wr-speed-dial-size);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    border-radius: 50%;
+    background: var(--wr-color-primary);
+    color: var(--wr-color-primary-contrast, var(--wr-color-white));
+    cursor: pointer;
+    box-shadow: var(--wr-shadow-float);
+    transition: transform var(--wr-transition-base);
+
+    --wr-icon-size: 1.25rem;
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+  }
+
+  &--open &__trigger {
+    transform: rotate(45deg);
+  }
+
+  &__actions {
+    position: absolute;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    pointer-events: none;
+  }
+
+  &__action-wrap {
+    position: absolute;
+    transition:
+      transform var(--wr-duration-base) var(--wr-ease-spring),
+      opacity var(--wr-duration-base) var(--wr-ease-out);
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  &--open &__action-wrap {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  // Place the action buttons in a line in the chosen direction.
+  $offset: 'calc(var(--wr-speed-dial-i) * (var(--wr-speed-dial-action-size) + var(--wr-speed-dial-gap)))';
+
+  &--up {
+    .wr-speed-dial__actions {
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    .wr-speed-dial__action-wrap {
+      bottom: 0;
+      left: 50%;
+      transform: translate(-50%, 0.5rem);
+    }
+  }
+
+  &--up.wr-speed-dial--open .wr-speed-dial__action-wrap {
+    transform: translate(-50%, calc(-1 * #{$offset}));
+  }
+
+  &--down {
+    .wr-speed-dial__actions {
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    .wr-speed-dial__action-wrap {
+      top: 0;
+      left: 50%;
+      transform: translate(-50%, -0.5rem);
+    }
+  }
+
+  &--down.wr-speed-dial--open .wr-speed-dial__action-wrap {
+    transform: translate(-50%, #{$offset});
+  }
+
+  &--left {
+    .wr-speed-dial__actions {
+      right: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    .wr-speed-dial__action-wrap {
+      right: 0;
+      top: 50%;
+      transform: translate(0.5rem, -50%);
+    }
+  }
+
+  &--left.wr-speed-dial--open .wr-speed-dial__action-wrap {
+    transform: translate(calc(-1 * #{$offset}), -50%);
+  }
+
+  &--right {
+    .wr-speed-dial__actions {
+      left: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    .wr-speed-dial__action-wrap {
+      left: 0;
+      top: 50%;
+      transform: translate(-0.5rem, -50%);
+    }
+  }
+
+  &--right.wr-speed-dial--open .wr-speed-dial__action-wrap {
+    transform: translate(#{$offset}, -50%);
+  }
+
+  &__action {
+    width: var(--wr-speed-dial-action-size);
+    height: var(--wr-speed-dial-action-size);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    // Hairline silhouette so the button reads as a distinct surface even
+    // when its `--wr-color-white` bg matches the canvas (dark mode) or
+    // sits on a same-tone page bg (light mode).
+    border: 1px solid var(--wr-color-light);
+    border-radius: 50%;
+    background: var(--wr-color-white);
+    color: var(--wr-color-dark);
+    cursor: pointer;
+    box-shadow: 0 4px 12px rgba(var(--wr-color-backdrop-rgb), 0.18);
+    transition:
+      transform var(--wr-transition-base),
+      background var(--wr-transition-base);
+
+    --wr-icon-size: 1rem;
+
+    &:hover {
+      transform: scale(1.06);
+      background: var(--wr-color-primary);
+      color: var(--wr-color-primary-contrast, var(--wr-color-white));
+    }
+  }
+}

package/spinner/styles/_index.scss

@@ -1,41 +1,57 @@
-@forward '../../styles/animations';
+@use '../../theme/styles' as theme;
 
 .wr-spinner {
   display: inline-block;
+  box-sizing: content-box;
   color: inherit;
-  font-style: normal;
   line-height: 0;
-  text-align: center;
-  text-transform: none;
-  vertical-align: -0.1rem;
-  box-sizing: content-box !important;
-
+  vertical-align: -0.125em;
   contain: strict;
 
-  * {
-    line-height: 1;
+  // Defaults — sized modifiers override
+  --wr-spinner-size: 1.25em;
+
+  width: var(--wr-spinner-size);
+  height: var(--wr-spinner-size);
+
+  &--sm {
+    --wr-spinner-size: 1em;
+  }
+  &--lg {
+    --wr-spinner-size: 2em;
   }
 
   svg {
-    display: inline-block;
+    display: block;
     width: 100%;
     height: 100%;
+    animation: wr-spinner-rotate 2s linear infinite;
+  }
 
-    animation: rotate 2s linear infinite;
-
-    .path {
-      stroke: currentColor;
-      animation: dash 1.5s ease-in-out infinite;
-    }
+  &__path {
+    stroke: currentColor;
+    stroke-linecap: round;
+    animation: wr-spinner-dash 1.5s ease-in-out infinite;
   }
+}
 
-  &--small {
-    width: 1em;
-    height: 1em;
+@keyframes wr-spinner-rotate {
+  100% {
+    transform: rotate(360deg);
   }
+}
 
-  &--large {
-    width: 2em;
-    height: 2em;
+@keyframes wr-spinner-dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
   }
 }

package/splash-cursor/splash-cursor.scss

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

package/splash-cursor/styles/_index.scss

@@ -0,0 +1,27 @@
+// Splash cursor (reactbits port). Default: fixed full-viewport overlay
+// that never captures pointer events. `--contained` fills the nearest
+// positioned ancestor instead — the dye collides with the box walls.
+
+.wr-splash-cursor {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: block;
+  pointer-events: none;
+
+  &__canvas {
+    display: block;
+    width: 100vw;
+    height: 100vh;
+  }
+
+  &--contained {
+    position: absolute;
+    z-index: 0;
+  }
+
+  &--contained &__canvas {
+    width: 100%;
+    height: 100%;
+  }
+}

package/split-text/split-text.scss

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

package/split-text/styles/_index.scss

@@ -0,0 +1,22 @@
+.wr-split-text {
+  display: inline-block;
+  overflow: hidden;
+  // The overflow mask clips descenders (y, g, p) at tight line heights —
+  // trade a little internal padding for glyph room without moving layout.
+  padding-bottom: 0.15em;
+  margin-bottom: -0.15em;
+  white-space: normal;
+  overflow-wrap: break-word;
+  will-change: transform, opacity;
+
+  &__piece {
+    display: inline-block;
+    will-change: transform, opacity;
+  }
+
+  // Whitespace between pieces — keep flowing.
+  &__space {
+    display: inline;
+    white-space: pre;
+  }
+}