ngwr 6.1.1 → 7.1.0

package/badge/styles/_index.scss

@@ -0,0 +1,80 @@
+// Pull the whole theme so a standalone `@use 'ngwr/badge'` brings in
+// every design token the badge + tag use (border-radius, colors, etc.).
+// Sass deduplicates `@use` per compilation, so multiple components
+// importing theme only emit it once.
+@use '../../theme/styles' as theme;
+@forward 'tag';
+
+.wr-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--wr-badge-padding-y) var(--wr-badge-padding-x);
+  border-radius: var(--wr-badge-radius);
+  font-size: var(--wr-badge-font-size);
+  font-weight: var(--wr-badge-font-weight);
+  line-height: var(--wr-badge-line-height);
+  white-space: nowrap;
+
+  // Defaults — sized modifiers override these
+  --wr-badge-padding-y: 0.25rem;
+  --wr-badge-padding-x: 0.5rem;
+  --wr-badge-radius: var(--wr-border-radius-sm);
+  --wr-badge-font-size: 0.75rem;
+  --wr-badge-line-height: 1rem;
+  --wr-badge-font-weight: 600;
+
+  // Sizes
+
+  &--sm {
+    --wr-badge-padding-y: 0.125rem;
+    --wr-badge-padding-x: 0.375rem;
+    --wr-badge-font-size: 0.625rem;
+    --wr-badge-line-height: 0.875rem;
+  }
+
+  &--lg {
+    --wr-badge-padding-y: 0.375rem;
+    --wr-badge-padding-x: 0.75rem;
+    --wr-badge-font-size: 0.875rem;
+    --wr-badge-line-height: 1.25rem;
+  }
+
+  // Shape — default `rounded` keeps the small radius from the defaults
+  // above; `pill` rounds the ends fully and adds horizontal breathing
+  // room so counts/labels don't kiss the edges.
+
+  &--pill {
+    --wr-badge-radius: var(--wr-border-radius-pill);
+    --wr-badge-padding-x: 0.75rem;
+  }
+
+  // Squircle — overrides the plain `border-radius` with the
+  // `corner-shape: squircle` mixin so supporting browsers (Chrome 145+)
+  // render iOS-style continuous-curvature corners.
+  &--squircle {
+    @include theme.smooth-br(var(--wr-badge-radius));
+  }
+
+  // Colors
+
+  @each $name in theme.$colors {
+    &--#{$name} {
+      background-color: var(--wr-color-#{$name});
+      color: var(--wr-color-#{$name}-contrast);
+    }
+  }
+
+  // Outlined — transparent fill, colored border + text. The inset ring
+  // replaces the solid background, so padding stays identical.
+  &--outlined {
+    background-color: transparent;
+    box-shadow: inset 0 0 0 1px currentcolor;
+
+    @each $name in theme.$colors {
+      &.wr-badge--#{$name} {
+        color: var(--wr-color-#{$name});
+      }
+    }
+  }
+}

package/badge/styles/_tag.scss

@@ -0,0 +1,81 @@
+@use '../../theme/styles' as theme;
+
+.wr-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  vertical-align: middle;
+
+  appearance: none;
+  text-decoration: none;
+  white-space: nowrap;
+
+  // Defaults — color and style modifiers override
+  --wr-tag-color: var(--wr-color-dark);
+  --wr-tag-bg: var(--wr-color-white);
+  --wr-tag-border: var(--wr-color-light);
+  --wr-tag-radius: var(--wr-border-radius-sm);
+  --wr-tag-padding-y: 0.125rem;
+  --wr-tag-padding-x: 0.5rem;
+  --wr-tag-font-size: 0.75rem;
+  --wr-tag-font-weight: 500;
+  --wr-tag-line-height: 1rem;
+
+  color: var(--wr-tag-color);
+  background: var(--wr-tag-bg);
+  border: 1px solid var(--wr-tag-border);
+  border-radius: var(--wr-tag-radius);
+  padding: calc(var(--wr-tag-padding-y) * var(--wr-density-y, 1)) calc(var(--wr-tag-padding-x) * var(--wr-density-x, 1));
+  font-family: var(--wr-font-family-base);
+  font-size: var(--wr-tag-font-size);
+  font-weight: var(--wr-tag-font-weight);
+  line-height: var(--wr-tag-line-height);
+  transition: var(--wr-transition-base);
+
+  // Shape
+  &--rounded {
+    --wr-tag-radius: var(--wr-border-radius-pill);
+    --wr-tag-padding-x: 0.625rem;
+  }
+
+  // Icon slot sizing
+  &__adornment {
+    --wr-icon-size: 0.875rem;
+    color: inherit;
+    flex: 0 0 auto;
+  }
+
+  // Hoverable (used when the tag is interactive)
+  &--hoverable {
+    cursor: pointer;
+    &:hover {
+      filter: brightness(0.95);
+    }
+  }
+
+  // Loading: keep size; dim text a touch
+  &--loading {
+    opacity: 0.85;
+  }
+
+  // Colored variants
+  @each $name in theme.$colors {
+    &--#{$name} {
+      --wr-tag-color: var(--wr-color-#{$name}-contrast);
+      --wr-tag-bg: var(--wr-color-#{$name});
+      --wr-tag-border: var(--wr-color-#{$name});
+
+      &.wr-tag--outlined {
+        --wr-tag-color: var(--wr-color-#{$name});
+        --wr-tag-bg: rgba(var(--wr-color-#{$name}-rgb), 0.06);
+        --wr-tag-border: rgba(var(--wr-color-#{$name}-rgb), 0.25);
+      }
+
+      &.wr-tag--transparent {
+        --wr-tag-color: var(--wr-color-#{$name});
+        --wr-tag-bg: rgba(var(--wr-color-#{$name}-rgb), 0.1);
+        --wr-tag-border: transparent;
+      }
+    }
+  }
+}

package/bar-chart/styles/_index.scss

@@ -0,0 +1,56 @@
+@use '../../theme/styles' as theme;
+
+.wr-bar-chart {
+  display: block;
+  font-family: var(--wr-font-family-base);
+  color: var(--wr-color-dark);
+
+  &__plot {
+    display: flex;
+    align-items: flex-end;
+    gap: 0.5rem;
+    padding-bottom: 0.25rem;
+    border-bottom: 1px solid var(--wr-color-light);
+  }
+
+  &__column {
+    flex: 1 1 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    height: 100%;
+    gap: 0.25rem;
+    min-width: 0;
+  }
+
+  &__value {
+    font-size: var(--wr-text-xs);
+    color: var(--wr-color-medium);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+  }
+
+  &__bar {
+    width: 100%;
+    border-radius: var(--wr-border-radius-sm) var(--wr-border-radius-sm) 0 0;
+    transition: height var(--wr-duration-slow) var(--wr-ease-out);
+    min-height: 1px;
+  }
+
+  &__labels {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+  }
+
+  &__label {
+    flex: 1 1 0;
+    text-align: center;
+    font-size: var(--wr-text-xs);
+    color: var(--wr-color-medium);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/blur-text/blur-text.scss

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

package/blur-text/styles/_index.scss

@@ -0,0 +1,14 @@
+.wr-blur-text {
+  display: inline-flex;
+  flex-wrap: wrap;
+
+  &__piece {
+    display: inline-block;
+    will-change: transform, filter, opacity;
+  }
+
+  &__space {
+    display: inline;
+    white-space: pre;
+  }
+}

package/border-glow/border-glow.scss

@@ -0,0 +1,4 @@
+// Component-scoped, but the lib uses `ViewEncapsulation.None` everywhere so
+// the selector starts with `.wr-border-glow` — the same as the umbrella
+// stylesheet entry. Importing the lib styles or just this file works.
+@forward './styles';

package/border-glow/styles/_index.scss

@@ -0,0 +1,228 @@
+// Cursor-tracked border glow — ports the reactbits.dev BorderGlow effect.
+// All visual state is driven by two custom properties the component writes:
+//   --wr-border-glow-edge-proximity   0..100, scales with pointer-to-edge distance
+//   --wr-border-glow-angle     0deg..360deg, pointer-from-centre angle
+// Plus a colour/geometry bag set once from inputs (see border-glow.ts).
+
+.wr-border-glow {
+  --wr-border-glow-edge-proximity: 0;
+  --wr-border-glow-angle: 45deg;
+  // Theme-default halo (overridden inline when `[glowColor]` is set):
+  // deep amber that reads on white. Dark theme swaps to the pale pastel.
+  --wr-border-glow-color: hsl(40deg 90% 45% / 100%);
+  --wr-border-glow-color-60: hsl(40deg 90% 45% / 60%);
+  --wr-border-glow-color-50: hsl(40deg 90% 45% / 50%);
+  --wr-border-glow-color-40: hsl(40deg 90% 45% / 40%);
+  --wr-border-glow-color-30: hsl(40deg 90% 45% / 30%);
+  --wr-border-glow-color-20: hsl(40deg 90% 45% / 20%);
+  --wr-border-glow-color-10: hsl(40deg 90% 45% / 10%);
+  // Theme-default mesh palette (overridden inline when `[colors]` is set):
+  // deep tones that read on white. Dark theme restores the pastels below.
+  --wr-border-glow-gradient-one: radial-gradient(at 80% 55%, hsl(268deg 80% 50%) 0px, transparent 50%);
+  --wr-border-glow-gradient-two: radial-gradient(at 69% 34%, hsl(349deg 85% 52%) 0px, transparent 50%);
+  --wr-border-glow-gradient-three: radial-gradient(at 8% 6%, hsl(136deg 70% 38%) 0px, transparent 50%);
+  --wr-border-glow-gradient-four: radial-gradient(at 41% 38%, hsl(192deg 90% 40%) 0px, transparent 50%);
+  --wr-border-glow-gradient-five: radial-gradient(at 86% 85%, hsl(186deg 90% 38%) 0px, transparent 50%);
+  --wr-border-glow-gradient-six: radial-gradient(at 82% 18%, hsl(40deg 95% 45%) 0px, transparent 50%);
+  --wr-border-glow-gradient-seven: radial-gradient(at 51% 4%, hsl(12deg 90% 50%) 0px, transparent 50%);
+  --wr-border-glow-gradient-base: linear-gradient(hsl(262deg 70% 50%) 0 100%);
+  --wr-border-glow-edge-sensitivity: 30;
+  --wr-border-glow-color-sensitivity: calc(var(--wr-border-glow-edge-sensitivity) + 20);
+  --wr-border-glow-radius: 28px;
+  --wr-border-glow-padding: 40px;
+  --wr-border-glow-cone-spread: 25;
+
+  position: relative;
+  display: grid;
+  border-radius: var(--wr-border-glow-radius);
+  background: var(--wr-border-glow-bg, var(--wr-color-white, #fff));
+  overflow: visible;
+  isolation: isolate;
+  transform: translate3d(0, 0, 0.01px); // create a new layer to keep blends tidy
+  // The faint static outline uses `box-shadow inset` instead of `border:` —
+  // CSS borders + `border-radius` leave 1px subpixel notches at the corners
+  // where the mask layers meet the curve, but inset shadows hug the radius
+  // pixel-perfect.
+  box-shadow: inset 0 0 0 1px var(--wr-border-glow-outline, var(--wr-color-light, rgb(255 255 255 / 15%)));
+
+  &::before,
+  &::after,
+  & > .wr-border-glow__edge {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    transition: opacity 0.25s ease-out;
+    z-index: -1;
+  }
+
+  // Hide the glow layers when the cursor isn't engaged AND the one-shot
+  // sweep isn't running.
+  &:not(:hover):not(.wr-border-glow--sweeping) {
+    &::before,
+    &::after,
+    & > .wr-border-glow__edge {
+      opacity: 0;
+      transition: opacity 0.75s ease-in-out;
+    }
+  }
+
+  // Coloured mesh-gradient slice of the border (the visible "cone" along
+  // the perimeter under the cursor).
+  &::before {
+    border: 1px solid transparent;
+    background:
+      linear-gradient(var(--wr-border-glow-bg, var(--wr-color-white, #fff)) 0 100%) padding-box,
+      linear-gradient(rgb(255 255 255 / 0%) 0 100%) border-box,
+      var(--wr-border-glow-gradient-one, radial-gradient(at 80% 55%, hsl(268deg 100% 76%) 0px, transparent 50%))
+        border-box,
+      var(--wr-border-glow-gradient-two, radial-gradient(at 69% 34%, hsl(349deg 100% 74%) 0px, transparent 50%))
+        border-box,
+      var(--wr-border-glow-gradient-three, radial-gradient(at 8% 6%, hsl(136deg 100% 78%) 0px, transparent 50%))
+        border-box,
+      var(--wr-border-glow-gradient-four, radial-gradient(at 41% 38%, hsl(192deg 100% 64%) 0px, transparent 50%))
+        border-box,
+      var(--wr-border-glow-gradient-five, radial-gradient(at 86% 85%, hsl(186deg 100% 74%) 0px, transparent 50%))
+        border-box,
+      var(--wr-border-glow-gradient-six, radial-gradient(at 82% 18%, hsl(52deg 100% 65%) 0px, transparent 50%))
+        border-box,
+      var(--wr-border-glow-gradient-seven, radial-gradient(at 51% 4%, hsl(12deg 100% 72%) 0px, transparent 50%))
+        border-box,
+      var(--wr-border-glow-gradient-base, linear-gradient(#c299ff 0 100%)) border-box;
+
+    opacity: calc(
+      (var(--wr-border-glow-edge-proximity) - var(--wr-border-glow-color-sensitivity)) /
+        (100 - var(--wr-border-glow-color-sensitivity))
+    );
+
+    mask-image: conic-gradient(
+      from var(--wr-border-glow-angle) at center,
+      black calc(var(--wr-border-glow-cone-spread) * 1%),
+      transparent calc((var(--wr-border-glow-cone-spread) + 15) * 1%),
+      transparent calc((100 - var(--wr-border-glow-cone-spread) - 15) * 1%),
+      black calc((100 - var(--wr-border-glow-cone-spread)) * 1%)
+    );
+  }
+
+  // Soft interior bloom — same mesh, blended with the card content.
+  &::after {
+    border: 1px solid transparent;
+    background:
+      var(--wr-border-glow-gradient-one, radial-gradient(at 80% 55%, hsl(268deg 100% 76%) 0px, transparent 50%))
+        padding-box,
+      var(--wr-border-glow-gradient-two, radial-gradient(at 69% 34%, hsl(349deg 100% 74%) 0px, transparent 50%))
+        padding-box,
+      var(--wr-border-glow-gradient-three, radial-gradient(at 8% 6%, hsl(136deg 100% 78%) 0px, transparent 50%))
+        padding-box,
+      var(--wr-border-glow-gradient-four, radial-gradient(at 41% 38%, hsl(192deg 100% 64%) 0px, transparent 50%))
+        padding-box,
+      var(--wr-border-glow-gradient-five, radial-gradient(at 86% 85%, hsl(186deg 100% 74%) 0px, transparent 50%))
+        padding-box,
+      var(--wr-border-glow-gradient-six, radial-gradient(at 82% 18%, hsl(52deg 100% 65%) 0px, transparent 50%))
+        padding-box,
+      var(--wr-border-glow-gradient-seven, radial-gradient(at 51% 4%, hsl(12deg 100% 72%) 0px, transparent 50%))
+        padding-box,
+      var(--wr-border-glow-gradient-base, linear-gradient(#c299ff 0 100%)) padding-box;
+
+    mask-image:
+      linear-gradient(to bottom, black, black), radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
+      radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
+      radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
+      radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
+      radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
+      conic-gradient(from var(--wr-border-glow-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
+    mask-composite: subtract, add, add, add, add, add;
+
+    // `--wr-border-glow-fill-scale` keeps the interior bloom subtle on
+    // light surfaces — at full strength the multiply wash darkens the
+    // whole card and the cone's surface wedge shows against it.
+    opacity: calc(
+      var(--wr-border-glow-fill-opacity, 0.5) * var(--wr-border-glow-fill-scale, 0.25) *
+        (var(--wr-border-glow-edge-proximity) - var(--wr-border-glow-color-sensitivity)) /
+        (100 - var(--wr-border-glow-color-sensitivity))
+    );
+    mix-blend-mode: var(--wr-border-glow-fill-blend, multiply);
+  }
+
+  // Outer halo — stacked box-shadows on a separate child so we can mask
+  // the shadows to the cone without affecting the host's content.
+  & > .wr-border-glow__edge {
+    inset: calc(var(--wr-border-glow-padding) * -1);
+    pointer-events: none;
+    z-index: 1;
+
+    mask-image: conic-gradient(
+      from var(--wr-border-glow-angle) at center,
+      black 2.5%,
+      transparent 10%,
+      transparent 90%,
+      black 97.5%
+    );
+    opacity: calc(
+      (var(--wr-border-glow-edge-proximity) - var(--wr-border-glow-edge-sensitivity)) /
+        (100 - var(--wr-border-glow-edge-sensitivity))
+    );
+    // `plus-lighter` saturates to white on a light page — light theme
+    // paints the halo as plain colored shadows instead (see block below).
+    mix-blend-mode: var(--wr-border-glow-halo-blend, normal);
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: var(--wr-border-glow-padding);
+      border-radius: inherit;
+      // Light theme keeps only the outward halo — the inset half washes
+      // amber over the card interior without additive blending. Dark
+      // restores the full reactbits stack (see block below).
+      box-shadow: var(
+        --wr-border-glow-edge-shadow,
+        inset 0 0 0 1px var(--wr-border-glow-color, hsl(40deg 80% 80% / 100%)),
+        0 0 1px 0 var(--wr-border-glow-color-60, hsl(40deg 80% 80% / 60%)),
+        0 0 3px 0 var(--wr-border-glow-color-50, hsl(40deg 80% 80% / 50%)),
+        0 0 6px 0 var(--wr-border-glow-color-40, hsl(40deg 80% 80% / 40%)),
+        0 0 15px 0 var(--wr-border-glow-color-30, hsl(40deg 80% 80% / 30%)),
+        0 0 25px 2px var(--wr-border-glow-color-20, hsl(40deg 80% 80% / 20%)),
+        0 0 50px 2px var(--wr-border-glow-color-10, hsl(40deg 80% 80% / 10%))
+      );
+    }
+  }
+
+  &__inner {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+// Dark theme: restore the reactbits look — pale halo + additive blends.
+[data-theme='dark'] .wr-border-glow {
+  --wr-border-glow-outline: rgb(255 255 255 / 15%);
+  --wr-border-glow-halo-blend: plus-lighter;
+  --wr-border-glow-fill-blend: soft-light;
+  --wr-border-glow-fill-scale: 1;
+  /* stylelint-disable-next-line */
+  --wr-border-glow-edge-shadow:
+    inset 0 0 0 1px var(--wr-border-glow-color), inset 0 0 1px 0 var(--wr-border-glow-color-60),
+    inset 0 0 3px 0 var(--wr-border-glow-color-50), inset 0 0 6px 0 var(--wr-border-glow-color-40),
+    inset 0 0 15px 0 var(--wr-border-glow-color-30), inset 0 0 25px 2px var(--wr-border-glow-color-20),
+    inset 0 0 50px 2px var(--wr-border-glow-color-10), 0 0 1px 0 var(--wr-border-glow-color-60),
+    0 0 3px 0 var(--wr-border-glow-color-50), 0 0 6px 0 var(--wr-border-glow-color-40),
+    0 0 15px 0 var(--wr-border-glow-color-30), 0 0 25px 2px var(--wr-border-glow-color-20),
+    0 0 50px 2px var(--wr-border-glow-color-10);
+  --wr-border-glow-color: hsl(40deg 80% 80% / 100%);
+  --wr-border-glow-color-60: hsl(40deg 80% 80% / 60%);
+  --wr-border-glow-color-50: hsl(40deg 80% 80% / 50%);
+  --wr-border-glow-color-40: hsl(40deg 80% 80% / 40%);
+  --wr-border-glow-color-30: hsl(40deg 80% 80% / 30%);
+  --wr-border-glow-color-20: hsl(40deg 80% 80% / 20%);
+  --wr-border-glow-color-10: hsl(40deg 80% 80% / 10%);
+  --wr-border-glow-gradient-one: radial-gradient(at 80% 55%, hsl(268deg 100% 76%) 0px, transparent 50%);
+  --wr-border-glow-gradient-two: radial-gradient(at 69% 34%, hsl(349deg 100% 74%) 0px, transparent 50%);
+  --wr-border-glow-gradient-three: radial-gradient(at 8% 6%, hsl(136deg 100% 78%) 0px, transparent 50%);
+  --wr-border-glow-gradient-four: radial-gradient(at 41% 38%, hsl(192deg 100% 64%) 0px, transparent 50%);
+  --wr-border-glow-gradient-five: radial-gradient(at 86% 85%, hsl(186deg 100% 74%) 0px, transparent 50%);
+  --wr-border-glow-gradient-six: radial-gradient(at 82% 18%, hsl(52deg 100% 65%) 0px, transparent 50%);
+  --wr-border-glow-gradient-seven: radial-gradient(at 51% 4%, hsl(12deg 100% 72%) 0px, transparent 50%);
+  --wr-border-glow-gradient-base: linear-gradient(#c299ff 0 100%);
+}

package/breadcrumbs/breadcrumbs.scss

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

package/breadcrumbs/styles/_index.scss

@@ -0,0 +1,76 @@
+// Breadcrumbs. The separator glyph comes from `--wr-breadcrumbs-separator`
+// (set by the component from the `[separator]` input). All items except
+// the first prepend the glyph via a `::before` pseudo-element.
+
+.wr-breadcrumbs {
+  --wr-breadcrumbs-separator: '/';
+  --wr-breadcrumbs-gap: 0.5rem;
+  --wr-breadcrumbs-color: rgba(var(--wr-color-dark-rgb), 0.6);
+  --wr-breadcrumbs-current-color: var(--wr-color-dark);
+  --wr-breadcrumbs-link-color: var(--wr-color-primary);
+  --wr-breadcrumbs-separator-color: rgba(var(--wr-color-dark-rgb), 0.3);
+
+  display: block;
+  font-family: var(--wr-font-family-base);
+  font-size: 0.875rem;
+  color: var(--wr-breadcrumbs-color);
+
+  &__nav {
+    display: block;
+  }
+
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--wr-breadcrumbs-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &__item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--wr-breadcrumbs-gap);
+
+    // Separator before every item except the first.
+    &:not(:first-child)::before {
+      content: var(--wr-breadcrumbs-separator);
+      color: var(--wr-breadcrumbs-separator-color);
+      user-select: none;
+    }
+  }
+
+  &__link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    color: var(--wr-breadcrumbs-link-color);
+    text-decoration: none;
+    border-radius: var(--wr-border-radius-sm);
+    transition: color 0.15s ease;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--wr-color-primary);
+      outline-offset: 2px;
+    }
+  }
+
+  &__current {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    color: var(--wr-breadcrumbs-current-color);
+    font-weight: 600;
+  }
+
+  &__icon {
+    --wr-icon-size: 1rem;
+    flex: 0 0 auto;
+  }
+}

package/burger/styles/_index.scss

@@ -0,0 +1,101 @@
+@use '../../theme/styles' as theme;
+
+.wr-burger {
+  // Resting (hamburger) dash geometry. Each line is one SVG <path>; the
+  // open state below rewrites the dasharray/offset so the strokes slide
+  // into a close mark.
+  --wr-burger-size: 2.5rem;
+  --wr-burger-color: var(--wr-color-dark);
+  --wr-burger-color-opened: var(--wr-color-primary);
+  --wr-burger-stroke-width: 6px;
+  --wr-burger-duration: 0.5s;
+  --wr-burger-ease: var(--wr-ease-in-out);
+
+  --wr-burger-stroke-1: 60 207;
+  --wr-burger-offset-1: 0;
+  --wr-burger-stroke-2: 60 60;
+  --wr-burger-offset-2: 0;
+  --wr-burger-stroke-3: 60 207;
+  --wr-burger-offset-3: 0;
+
+  display: inline-flex;
+
+  &__btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    width: var(--wr-burger-size);
+    height: var(--wr-burger-size);
+    padding: 0;
+
+    border: 0;
+    border-radius: var(--wr-border-radius-base);
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+
+    transition: background var(--wr-transition-base);
+
+    &:hover {
+      background: rgba(var(--wr-color-light-rgb), 0.4);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--wr-color-primary);
+      outline-offset: 2px;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  &__icon {
+    display: block;
+    width: 80%;
+    height: 80%;
+  }
+
+  &__line {
+    fill: none;
+    stroke: var(--wr-burger-color);
+    stroke-width: var(--wr-burger-stroke-width);
+    transition:
+      stroke-dasharray var(--wr-burger-duration) var(--wr-burger-ease),
+      stroke-dashoffset var(--wr-burger-duration) var(--wr-burger-ease),
+      stroke var(--wr-burger-duration) var(--wr-burger-ease);
+
+    &--1 {
+      stroke-dasharray: var(--wr-burger-stroke-1);
+      stroke-dashoffset: var(--wr-burger-offset-1);
+    }
+
+    &--2 {
+      stroke-dasharray: var(--wr-burger-stroke-2);
+      stroke-dashoffset: var(--wr-burger-offset-2);
+    }
+
+    &--3 {
+      stroke-dasharray: var(--wr-burger-stroke-3);
+      stroke-dashoffset: var(--wr-burger-offset-3);
+    }
+  }
+
+  &--opened {
+    --wr-burger-color: var(--wr-burger-color-opened);
+    --wr-burger-stroke-1: 90 207;
+    --wr-burger-offset-1: -134;
+    --wr-burger-stroke-2: 1 60;
+    --wr-burger-offset-2: -30;
+    --wr-burger-stroke-3: 90 207;
+    --wr-burger-offset-3: -134;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .wr-burger__line {
+      transition-duration: 1ms;
+    }
+  }
+}