ngwr 6.1.1 → 7.1.0

package/theme/styles/_focus.scss

@@ -0,0 +1,93 @@
+// Baseline `:focus-visible` ring applied to interactive controls across the
+// library. Component-specific focus styles still win via higher specificity;
+// this is a safety net so every keyboard-reachable target has a visible
+// focus indicator out of the box.
+
+@mixin focus-ring {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.25);
+}
+
+// Tabs
+.wr-tabs__tab:focus-visible {
+  @include focus-ring;
+}
+
+// Sidebar
+.wr-sidebar__entry:focus-visible,
+.wr-sidebar__item:focus-visible,
+.wr-sidebar__group-toggle:focus-visible {
+  @include focus-ring;
+}
+
+// Anchor
+.wr-anchor__link:focus-visible {
+  @include focus-ring;
+}
+
+// Collapse / accordion header
+.wr-collapse__header:focus-visible {
+  @include focus-ring;
+}
+
+// Command palette options
+.wr-command-palette__option:focus-visible,
+.wr-command-palette__panel input:focus-visible {
+  @include focus-ring;
+}
+
+// Mention option rows
+.wr-mention__option:focus-visible {
+  @include focus-ring;
+}
+
+// Segmented buttons
+.wr-segmented__option:focus-visible {
+  @include focus-ring;
+}
+
+// Back-to-top
+.wr-back-top:focus-visible {
+  @include focus-ring;
+}
+
+// Carousel nav + dots
+.wr-carousel__nav:focus-visible,
+.wr-carousel__dot:focus-visible {
+  @include focus-ring;
+}
+
+// Speed dial
+.wr-speed-dial__trigger:focus-visible,
+.wr-speed-dial__action:focus-visible {
+  @include focus-ring;
+}
+
+// Stepper step headers
+.wr-stepper__step:focus-visible {
+  @include focus-ring;
+}
+
+// Toast close/copy
+.wr-toast__close:focus-visible,
+.wr-toast__copy:focus-visible {
+  @include focus-ring;
+}
+
+// Window chrome
+.wr-window__chrome-action:focus-visible {
+  @include focus-ring;
+}
+
+// Date / time picker chrome buttons
+.wr-date-picker__trigger:focus-visible,
+.wr-time-picker__step:focus-visible {
+  @include focus-ring;
+}
+
+// Pagination ellipsis is non-interactive; page buttons inherit wr-btn focus.
+
+// Dropdown menu items
+.wr-dropdown-item:focus-visible {
+  @include focus-ring;
+}

package/theme/styles/_index.scss

@@ -0,0 +1,5 @@
+@forward 'colors';
+@forward 'variables';
+@forward 'dark';
+@forward 'focus';
+@forward 'mixins';

package/theme/styles/_mixins.scss

@@ -0,0 +1,57 @@
+// Shared SCSS mixins.
+//
+// Available via:
+//   @use 'ngwr/theme/mixins' as wr;
+//   .thing { @include wr.smooth-br(0.625rem); }
+
+/// Smooth border-radius — opts into the native `corner-shape: squircle`
+/// CSS spec (Chrome 145+) when the browser supports it, otherwise
+/// falls back to a plain `border-radius`.
+///
+/// **Experimental.** `corner-shape` is a draft CSS specification; the
+/// property name, value space, and metrics may change before it
+/// stabilises. Components are free to swap this mixin out for plain
+/// `border-radius` at any time. For a deterministic squircle that
+/// works across browsers, prefer the `[wrSquircle]` directive — it
+/// uses a `clip-path` superellipse instead of relying on `corner-shape`.
+///
+/// `corner-shape: squircle` renders a continuous-curvature corner (iOS /
+/// macOS style) instead of a circular arc. The squircle reads as
+/// "less rounded" at the same numeric radius, so we bump the radius by
+/// 1.85× under `@supports` to keep the perceived roundness consistent
+/// across browsers — that ratio is the rough empirical match.
+///
+/// Use this anywhere a soft rounded look matters (buttons, cards,
+/// inputs, dialogs, dropdowns, tiles). Skip it for full circles
+/// (`50%`) and pills (`999px` / `--wr-border-radius-pill`) — those are
+/// already maximally curved, no smoothing to do.
+///
+/// **Gotcha — shape="pill" variants.** If a component applies
+/// `smooth-br($radius-var)` and a child rule overrides that var to a
+/// pill value, the squircle math doesn't degenerate to a pill shape —
+/// it draws a different (slightly inset) curve at huge radii. Reset
+/// the corner type explicitly on the pill rule:
+///
+/// ```scss
+/// .wr-btn {
+///   --wr-btn-radius: var(--wr-border-radius-base);
+///   @include smooth-br(var(--wr-btn-radius));
+/// }
+/// .wr-btn--pill {
+///   --wr-btn-radius: var(--wr-border-radius-pill);
+///   corner-shape: round; // browsers without the prop ignore it
+/// }
+/// ```
+///
+/// @example scss
+///   .thing {
+///     @include smooth-br(0.625rem);
+///   }
+@mixin smooth-br($br) {
+  border-radius: $br;
+
+  @supports (corner-shape: squircle) {
+    corner-shape: squircle;
+    border-radius: calc(#{$br} * 1.85);
+  }
+}

package/theme/styles/_variables.scss

@@ -0,0 +1,118 @@
+// Design tokens exposed as CSS custom properties.
+//
+// These are the canonical knobs every component reads from. Consumers
+// override them on `:root` (or any subtree) without touching SCSS.
+
+:root {
+  // Border radius
+  --wr-border-radius-sm: 0.375rem;
+  --wr-border-radius-base: 0.625rem;
+  --wr-border-radius-lg: 1rem;
+  --wr-border-radius-pill: 50rem;
+
+  // Easing curves
+  --wr-ease-linear: linear;
+  --wr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --wr-ease-in: cubic-bezier(0.7, 0, 0.84, 0);
+  --wr-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --wr-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  // Durations
+  --wr-duration-fast: 0.1s;
+  --wr-duration-base: 0.15s;
+  --wr-duration-slow: 0.3s;
+  --wr-duration-slower: 0.5s;
+
+  // Transition shorthands
+  --wr-transition-short: var(--wr-duration-fast) var(--wr-ease-out);
+  --wr-transition-base: var(--wr-duration-base) var(--wr-ease-linear);
+  --wr-transition-long: var(--wr-duration-slow) var(--wr-ease-out);
+
+  // Elevation
+  //
+  // Shared shadow recipes. Components reference these (directly, or as
+  // the default of their own `--wr-<component>-shadow` knob) so depth is
+  // consistent across the catalog and dark mode can strengthen every
+  // shadow in one place. Functional hairlines (switch knob, splitter
+  // grip, color-picker rings) stay local — they aid contrast, not depth.
+  --wr-shadow-xs: 0 1px 2px rgb(0 0 0 / 5%);
+  --wr-shadow-sm: 0 2px 8px rgb(0 0 0 / 15%);
+  --wr-shadow-overlay: 0 8px 24px rgb(0 0 0 / 12%), 0 2px 4px rgb(0 0 0 / 6%);
+  --wr-shadow-float: 0 8px 24px rgb(0 0 0 / 18%);
+  --wr-shadow-modal: 0 20px 48px rgb(0 0 0 / 25%);
+
+  // Z-index scale
+  //
+  // Overlay panels inside the CDK container inherit its stacking; these
+  // are for the lib's own fixed-position chrome.
+  --wr-z-overlay: 1000;
+  --wr-z-window: 1100;
+  --wr-z-top: 9999;
+
+  // Shared open-animation timing for every overlay panel
+  // (dropdown / context-menu / popover / popconfirm / tooltip). Components
+  // reference these so global timing tweaks land everywhere in one place.
+  --wr-overlay-duration: var(--wr-duration-base);
+  --wr-overlay-ease: var(--wr-ease-out);
+
+  // Typography
+  //
+  // The library only declares system-font fallback chains. Apps that ship
+  // their own typeface should override these on `:root` after loading the
+  // theme — e.g. `:root { --wr-font-family-base: 'Inter', ...; }`.
+  --wr-font-family-base:
+    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --wr-font-family-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+
+  // Font size scale (1rem = 16px)
+  --wr-text-xs: 0.75rem;
+  --wr-text-sm: 0.875rem;
+  --wr-text-base: 1rem;
+  --wr-text-lg: 1.125rem;
+  --wr-text-xl: 1.25rem;
+  --wr-text-2xl: 1.5rem;
+  --wr-text-3xl: 1.875rem;
+  --wr-text-4xl: 2.25rem;
+  --wr-text-5xl: 3rem;
+
+  // Font weight scale
+  --wr-font-weight-thin: 200;
+  --wr-font-weight-light: 300;
+  --wr-font-weight-regular: 400;
+  --wr-font-weight-medium: 500;
+  --wr-font-weight-semibold: 600;
+  --wr-font-weight-bold: 700;
+  --wr-font-weight-extrabold: 800;
+
+  // Line height (leading)
+  --wr-leading-none: 1;
+  --wr-leading-tight: 1.25;
+  --wr-leading-snug: 1.375;
+  --wr-leading-normal: 1.5;
+  --wr-leading-relaxed: 1.625;
+  --wr-leading-loose: 2;
+
+  // Letter spacing (tracking)
+  --wr-tracking-tighter: -0.05em;
+  --wr-tracking-tight: -0.025em;
+  --wr-tracking-normal: 0;
+  --wr-tracking-wide: 0.025em;
+  --wr-tracking-wider: 0.05em;
+  --wr-tracking-widest: 0.1em;
+}
+
+// Shared open animation for overlay panels. Every overlay component
+// references this keyframe + the `--wr-overlay-*` tokens above so the
+// open feel is consistent across dropdown / context-menu / popover /
+// popconfirm / tooltip.
+@keyframes wr-overlay-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/tilt-card/styles/_index.scss

@@ -0,0 +1,40 @@
+// 3D mouse-tilt card. The transform is set imperatively by `[wrTilt]`,
+// so this stylesheet just covers the card chrome + the optional glare
+// overlay that the directive appends when `[glare]="true"`.
+
+.wr-tilt-card {
+  display: block;
+  position: relative;
+  padding: 1.5rem;
+  border-radius: 0.75rem;
+  border: 1px solid var(--wr-color-light);
+  background: var(--wr-color-white);
+  color: var(--wr-color-dark);
+  box-shadow: 0 1px 2px rgba(var(--wr-color-backdrop-rgb), 0.06);
+  // Card itself doesn't need overflow:hidden by default — the directive
+  // toggles overflow when glare is enabled. Authors can opt in.
+  transform-style: preserve-3d;
+  transition: transform 0.15s ease-out;
+}
+
+// Glare overlay (appended by `[wrTilt]` when `[glare]="true"`)
+// Lives in this package so the visual lives with the card chrome.
+.wr-tilt-glare {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  // Light surfaces: glare reads as a soft moving shade. Dark theme flips
+  // to the classic white sheen below.
+  background: radial-gradient(
+    circle at var(--wr-tilt-glare-x, 50%) var(--wr-tilt-glare-y, 50%),
+    var(--wr-tilt-glare-color, rgba(var(--wr-color-dark-rgb), 0.12)),
+    transparent 60%
+  );
+  mix-blend-mode: multiply;
+}
+
+[data-theme='dark'] .wr-tilt-glare {
+  --wr-tilt-glare-color: rgb(255 255 255 / 25%);
+
+  mix-blend-mode: overlay;
+}

package/tilt-card/tilt-card.scss

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

package/timeline/styles/_index.scss

@@ -0,0 +1,127 @@
+@use '../../theme/styles' as theme;
+
+.wr-timeline {
+  display: flex;
+  // Claim the full row even when nested in a flex-row demo wrapper.
+  flex: 1 1 100%;
+  width: 100%;
+  min-width: 0;
+  font-family: var(--wr-font-family-base);
+  color: var(--wr-color-dark);
+
+  &--vertical {
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+
+  &--horizontal {
+    flex-direction: row;
+    gap: 2rem;
+    overflow-x: auto;
+  }
+}
+
+.wr-timeline-item {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding-bottom: 0.5rem;
+
+  &__dot {
+    flex: 0 0 auto;
+    width: 0.75rem;
+    height: 0.75rem;
+    // Centers the 12px dot on the 16px first text line (time or title).
+    margin-top: 0.125rem;
+    border-radius: 50%;
+    background: var(--wr-color-primary);
+    box-shadow: 0 0 0 2px var(--wr-color-white);
+    z-index: 1;
+  }
+
+  &--success &__dot {
+    background: var(--wr-color-success);
+  }
+
+  &--warning &__dot {
+    background: var(--wr-color-warning);
+  }
+
+  &--danger &__dot {
+    background: var(--wr-color-danger);
+  }
+
+  &--medium &__dot {
+    background: var(--wr-color-medium);
+  }
+
+  &__body {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  &__time {
+    font-size: var(--wr-text-xs);
+    line-height: 1rem;
+    color: var(--wr-color-medium);
+    font-weight: var(--wr-font-weight-medium);
+    margin-bottom: 0.125rem;
+  }
+
+  &__title {
+    font-size: var(--wr-text-sm);
+    font-weight: var(--wr-font-weight-semibold);
+    line-height: var(--wr-leading-snug);
+  }
+
+  &__content {
+    margin-top: 0.25rem;
+    font-size: var(--wr-text-sm);
+    line-height: var(--wr-leading-relaxed);
+    color: var(--wr-color-dark);
+  }
+
+  // Vertical: connector line between dots.
+  .wr-timeline--vertical & {
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0.34375rem;
+      top: 1rem;
+      bottom: -1.25rem;
+      width: 1.5px;
+      background: var(--wr-color-light);
+    }
+
+    &:last-child::before {
+      display: none;
+    }
+  }
+
+  // Horizontal: row layout with line through dots.
+  .wr-timeline--horizontal & {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    min-width: 8rem;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0.625rem;
+      left: 50%;
+      right: -2rem;
+      height: 1.5px;
+      background: var(--wr-color-light);
+    }
+
+    &:last-child::before {
+      display: none;
+    }
+
+    .wr-timeline-item__body {
+      margin-top: 0.5rem;
+    }
+  }
+}

package/toast/styles/_index.scss

@@ -0,0 +1,263 @@
+@use '../../theme/styles' as theme;
+
+$toast-colors: (
+  info: primary,
+  success: success,
+  warning: warning,
+  danger: danger,
+);
+
+// Toast pane stays zero-sized so the CDK global wrapper around it doesn't
+// swallow clicks on the rest of the page. The actual toast stack is rendered
+// by `.wr-toast-host` below, which is `position: fixed` and therefore lays
+// itself out against the viewport, not this pane.
+.wr-toast-overlay {
+  pointer-events: none;
+}
+
+.wr-toast-host {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  pointer-events: none;
+  max-width: 22rem;
+  width: 100%;
+
+  > * {
+    pointer-events: auto;
+  }
+
+  // Sonner-style stack
+  // Collapsed: every toast except the front one collapses behind it with a
+  // scale-down + tiny offset. Hovering the host expands them into the
+  // normal vertical list.
+  &--stack {
+    // Anchor for absolute children when collapsed.
+    position: fixed;
+  }
+
+  &--stack:not(.wr-toast-host--expanded) {
+    .wr-toast {
+      --wr-toast-i: var(--wr-toast-stack-index, 0);
+      position: absolute;
+      left: 1rem;
+      right: 1rem;
+      width: auto;
+      max-width: calc(100% - 2rem);
+      transition:
+        transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
+        opacity 240ms ease,
+        box-shadow 240ms ease;
+      transform-origin: center top;
+      transform: translateY(calc(var(--wr-toast-i) * 8px)) scale(calc(1 - var(--wr-toast-i) * 0.05));
+      opacity: calc(1 - var(--wr-toast-i) * 0.3);
+      z-index: calc(100 - var(--wr-toast-i));
+
+      // Hide toasts more than 3 deep.
+      &:where([style*='--wr-toast-stack-index: 3']),
+      &:where([style*='--wr-toast-stack-index: 4']),
+      &:where([style*='--wr-toast-stack-index: 5']) {
+        opacity: 0;
+        pointer-events: none;
+      }
+    }
+  }
+
+  // Bottom-anchored hosts: stack grows UPWARD (newest at the bottom).
+  &--stack:not(.wr-toast-host--expanded).wr-toast-host--bottom,
+  &--stack:not(.wr-toast-host--expanded).wr-toast-host--bottom-start,
+  &--stack:not(.wr-toast-host--expanded).wr-toast-host--bottom-end {
+    .wr-toast {
+      transform-origin: center bottom;
+      transform: translateY(calc(var(--wr-toast-i) * -8px)) scale(calc(1 - var(--wr-toast-i) * 0.05));
+    }
+  }
+
+  &--stack.wr-toast-host--expanded .wr-toast {
+    transition:
+      transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
+      opacity 240ms ease;
+  }
+
+  &--top {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  &--top-start {
+    top: 0;
+    left: 0;
+  }
+  &--top-end {
+    top: 0;
+    right: 0;
+  }
+  &--bottom {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    flex-direction: column-reverse;
+  }
+  &--bottom-start {
+    bottom: 0;
+    left: 0;
+    flex-direction: column-reverse;
+  }
+  &--bottom-end {
+    bottom: 0;
+    right: 0;
+    flex-direction: column-reverse;
+  }
+}
+
+.wr-toast {
+  --wr-toast-bg: var(--wr-color-white);
+  --wr-toast-border: var(--wr-color-light);
+  --wr-toast-accent: var(--wr-color-primary);
+  --wr-toast-title: var(--wr-color-dark);
+  --wr-toast-message: var(--wr-color-medium);
+
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem 0.875rem;
+  background: var(--wr-toast-bg);
+  border: 1px solid var(--wr-toast-border);
+  border-left: 3px solid var(--wr-toast-accent);
+  @include theme.smooth-br(var(--wr-border-radius-base));
+  box-shadow: var(--wr-shadow-overlay);
+  font-family: var(--wr-font-family-base);
+  animation: wr-toast-in 0.18s ease-out;
+  overflow: hidden;
+
+  &__body {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  &__title {
+    margin: 0 0 0.125rem;
+    color: var(--wr-toast-title);
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.25rem;
+  }
+
+  &__message {
+    margin: 0;
+    color: var(--wr-toast-message);
+    font-size: 0.8125rem;
+    line-height: 1.125rem;
+    overflow-wrap: break-word;
+  }
+
+  &__actions {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.125rem;
+  }
+
+  &__action {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0.125rem;
+    color: var(--wr-color-medium);
+    cursor: pointer;
+    border-radius: var(--wr-border-radius-sm);
+    transition:
+      color var(--wr-transition-base),
+      background var(--wr-transition-base);
+
+    --wr-icon-size: 0.875rem;
+
+    &:hover {
+      color: var(--wr-color-dark);
+      background: rgba(var(--wr-color-light-rgb), 0.5);
+    }
+  }
+
+  &__progress {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    width: 100%;
+    transform-origin: left;
+    background: var(--wr-toast-accent);
+    animation: wr-toast-progress linear forwards;
+    animation-duration: var(--wr-toast-duration, 4000ms);
+  }
+
+  &:hover &__progress {
+    animation-play-state: paused;
+  }
+
+  @each $variant, $color in $toast-colors {
+    &--#{$variant} {
+      --wr-toast-accent: var(--wr-color-#{$color});
+    }
+  }
+}
+
+@keyframes wr-toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(-0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes wr-toast-progress {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
+
+.wr-toast-host__close-all {
+  // Full bleed to match toast width so the cursor never leaves a hit
+  // region between toasts and button (was a source of expand/collapse
+  // flicker in stack mode).
+  align-self: stretch;
+  pointer-events: auto;
+  appearance: none;
+  background: var(--wr-color-white);
+  border: 1px solid var(--wr-color-light);
+  @include theme.smooth-br(var(--wr-border-radius-base));
+  padding: 0.375rem 0.75rem;
+  color: var(--wr-color-medium);
+  font-family: var(--wr-font-family-base);
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1rem;
+  text-align: center;
+  cursor: pointer;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  transition:
+    color var(--wr-transition-base),
+    background var(--wr-transition-base),
+    border-color var(--wr-transition-base);
+
+  &:hover {
+    color: var(--wr-color-dark);
+    border-color: var(--wr-color-medium);
+  }
+}
+
+// Bottom positions reverse so the close-all sits *above* the newest toast.
+.wr-toast-host--bottom .wr-toast-host__close-all,
+.wr-toast-host--bottom-start .wr-toast-host__close-all,
+.wr-toast-host--bottom-end .wr-toast-host__close-all {
+  order: 99;
+  align-self: stretch;
+}