ngwr 6.1.1 → 7.0.0

package/LICENSE

@@ -1,8 +1,6 @@
 MIT License
 
-Copyright (c) 2022-2024 Roman Khegay
-Copyright (c) 2022-2024 Garuna, LLP
-Copyright (c) 2022-2024 Stingray Technologies, LLP
+Copyright (c) 2022-2025 Roman Khegay
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,56 +1,203 @@
 # <img src="https://ngwr.dev/assets/images/logo.svg" alt="ngwr logo" height="32px">
 
 [![ngwr website](https://img.shields.io/badge/ngwr.dev-3969e2)](https://ngwr.dev)
-[![ngwr deploy](https://img.shields.io/github/actions/workflow/status/thekhegay/ngwr/deploy.yml)](https://github.com/thekhegay/ngwr/actions/workflows/deploy.yml)
 [![ngwr version](https://img.shields.io/github/package-json/v/thekhegay/ngwr?filename=projects%2Flib%2Fpackage.json&color=%23f51c6a)](https://www.npmjs.com/package/ngwr)
-[![angular version](https://img.shields.io/npm/dependency-version/ngwr/peer/@angular/core)](https://www.npmjs.com/package/ngwr)
+[![angular peer](https://img.shields.io/npm/dependency-version/ngwr/peer/@angular/core)](https://www.npmjs.com/package/ngwr)
+[![ci](https://img.shields.io/github/actions/workflow/status/thekhegay/ngwr/ci.yml?branch=main&label=ci)](https://github.com/thekhegay/ngwr/actions/workflows/ci.yml)
 [![license](https://img.shields.io/npm/l/ngwr)](https://github.com/thekhegay/ngwr/blob/main/LICENSE)
-[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fthekhegay%2Fngwr.svg?type=shield&issueType=security)](https://app.fossa.com/projects/git%2Bgithub.com%2Fthekhegay%2Fngwr?ref=badge_shield&issueType=security)
-[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fthekhegay%2Fngwr.svg?type=shield&issueType=license)](https://app.fossa.com/projects/git%2Bgithub.com%2Fthekhegay%2Fngwr?ref=badge_shield&issueType=license)
 
-## Important information
-ngwr is currently in active development stage. Be careful when using in production. If you find an error or bug, [please open an issue](https://github.com/thekhegay/ngwr/issues/new).
+**NGWR** is a modern Angular UI library — standalone components, signals-first,
+zoneless-ready, modular SCSS, fully tree-shakable. Built on top of `@angular/cdk`
+for overlay, portal, and a11y primitives.
 
-## Installation
+> **Status:** active development. Public API is stable across patch releases but
+> the v7 line is still maturing. [Open an issue](https://github.com/thekhegay/ngwr/issues/new)
+> if something breaks or feels wrong.
+
+## Requirements
+
+| Peer                        | Range                |
+| --------------------------- | -------------------- |
+| `@angular/core`             | `>= 22.0.0`          |
+| `@angular/common`           | `>= 22.0.0`          |
+| `@angular/cdk`              | `>= 22.0.0`          |
+| `@angular/platform-browser` | `>= 22.0.0`          |
+| `rxjs`                      | `^7.0.0`             |
+| `date-fns` _(optional)_     | `^3.0.0 \|\| ^4.0.0` |
+| `luxon` _(optional)_        | `^3.0.0`             |
+
+Node ≥ 24.15.0 (or 26+). pnpm ≥ 11.5. TypeScript ≥ 6.0.
+
+## Install
 
 ```shell
-$ npm install ngwr
+pnpm add ngwr @angular/cdk
 # or
-$ pnpm add ngwr
+npm install ngwr @angular/cdk
 # or
-$ yarn add ngwr
+yarn add ngwr @angular/cdk
 ```
 
 ## Styles
 
-Don't forget to add styles:
+The fastest way — pull in everything (theme tokens + all component styles):
+
 ```scss
+// styles.scss
 @use 'ngwr';
 ```
 
-## [Components](https://ngwr.dev/docs/components)
-
-- [Alert](https://ngwr.dev/docs/components/alert)
-- [Avatar](https://ngwr.dev/docs/components/avatar)
-- [Button](https://ngwr.dev/docs/components/button)
-- [Button Group](https://ngwr.dev/docs/components/button-group)
-- [Checkbox](https://ngwr.dev/docs/components/checkbox)
-- [Dialog](https://ngwr.dev/docs/components/dialog)
-- [Divider](https://ngwr.dev/docs/components/divider)
-- [Form](https://ngwr.dev/docs/components/form)
-- [Icon](https://ngwr.dev/docs/components/icon)
-- [Input](https://ngwr.dev/docs/components/input)
-- [QR](https://ngwr.dev/docs/components/qr)
-- [Skeleton](https://ngwr.dev/docs/components/skeleton)
-- [Spinner](https://ngwr.dev/docs/components/spinner)
-- [Tag](https://ngwr.dev/docs/components/tag)
+Prefer to opt in per-component? Each component has its own SCSS entry that pulls
+in the theme automatically:
+
+```scss
+@use 'ngwr/theme'; // CSS custom properties (--wr-color-*, --wr-font-*, etc.)
+@use 'ngwr/button';
+@use 'ngwr/input';
+@use 'ngwr/checkbox';
+```
+
+Opt-in utilities (not part of `@use 'ngwr'`):
+
+```scss
+@use 'ngwr/reset'; // box-sizing, body margin, sane defaults
+@use 'ngwr/grid'; // .grid, .container, .col-*
+@use 'ngwr/breakpoints' as bp; // SCSS mixins only, no CSS output
+```
+
+## Quick start
+
+```ts
+// main.ts
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideWrOverlay } from 'ngwr/overlay';
+
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideWrOverlay(), // isolated overlay container
+  ],
+});
+```
+
+```ts
+// app.component.ts
+import { Component, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { Check } from 'lucide';
+import { WrButton } from 'ngwr/button';
+import { provideWrIcons } from 'ngwr/icon';
+import { lucideIcons } from 'ngwr/icon/adapters/lucide';
+import { WrInput } from 'ngwr/input';
+
+@Component({
+  selector: 'app-root',
+  imports: [FormsModule, WrButton, WrInput],
+  providers: [provideWrIcons(lucideIcons({ checkmark: Check }))], // tree-shaken icons
+  template: `
+    <input wrInput [(ngModel)]="name" placeholder="Your name" />
+    <button wr-btn color="primary" icon="checkmark" (click)="greet()">Hello</button>
+  `,
+})
+export class AppComponent {
+  readonly name = signal('');
+  greet(): void {
+    console.log('Hi', this.name());
+  }
+}
+```
+
+## Catalog
+
+> Browse the full catalog with live demos at [**ngwr.dev**](https://ngwr.dev).
+> Each entry below is a tree-shakable subpath — `import { … } from 'ngwr/<name>'`.
+
+### Components
+
+**Form** — [calendar](https://ngwr.dev/components/calendar), [cascader](https://ngwr.dev/components/cascader), [checkbox](https://ngwr.dev/components/checkbox), [color-picker](https://ngwr.dev/components/color-picker), [date-picker](https://ngwr.dev/components/date-picker), [file-upload](https://ngwr.dev/components/file-upload), [form](https://ngwr.dev/components/form), [form-field](https://ngwr.dev/components/form-field), [input](https://ngwr.dev/components/input), [input-number](https://ngwr.dev/components/input-number), [input-otp](https://ngwr.dev/components/input-otp), [knob](https://ngwr.dev/components/knob), [mention](https://ngwr.dev/components/mention), [radio](https://ngwr.dev/components/radio), [rating](https://ngwr.dev/components/rating), [segmented](https://ngwr.dev/components/segmented), [select](https://ngwr.dev/components/select), [slider](https://ngwr.dev/components/slider), [switch](https://ngwr.dev/components/switch), [textarea](https://ngwr.dev/components/textarea).
+
+**Buttons** — [button](https://ngwr.dev/components/button), [button-group](https://ngwr.dev/components/button-group), [speed-dial](https://ngwr.dev/components/speed-dial).
+
+**Data** — [drag-drop](https://ngwr.dev/components/drag-drop), [pagination](https://ngwr.dev/components/pagination), [table](https://ngwr.dev/components/table), [tree](https://ngwr.dev/components/tree), [virtual-scroll](https://ngwr.dev/components/virtual-scroll).
+
+**Feedback** — [alert](https://ngwr.dev/components/alert), [empty](https://ngwr.dev/components/empty), [progress](https://ngwr.dev/components/progress), [result](https://ngwr.dev/components/result), [skeleton](https://ngwr.dev/components/skeleton), [spinner](https://ngwr.dev/components/spinner).
+
+**Display** — [avatar](https://ngwr.dev/components/avatar), [badge](https://ngwr.dev/components/badge) (incl. `wr-tag`), [compare](https://ngwr.dev/components/compare), [counter](https://ngwr.dev/components/counter), [descriptions](https://ngwr.dev/components/descriptions), [divider](https://ngwr.dev/components/divider), [image-cropper](https://ngwr.dev/components/image-cropper), [keyboard](https://ngwr.dev/components/keyboard), [lightbox](https://ngwr.dev/components/lightbox), [qrcode](https://ngwr.dev/components/qrcode), [statistic](https://ngwr.dev/components/statistic), [timeline](https://ngwr.dev/components/timeline).
+
+**Layout** — [card](https://ngwr.dev/components/card), [carousel](https://ngwr.dev/components/carousel), [collapse](https://ngwr.dev/components/collapse), [layout](https://ngwr.dev/components/layout), [list](https://ngwr.dev/components/list), [page-header](https://ngwr.dev/components/page-header), [splitter](https://ngwr.dev/components/splitter), [toolbar](https://ngwr.dev/components/toolbar).
+
+**Navigation** — [anchor](https://ngwr.dev/components/anchor), [back-top](https://ngwr.dev/components/back-top), [breadcrumbs](https://ngwr.dev/components/breadcrumbs), [dropdown](https://ngwr.dev/components/dropdown), [sidebar](https://ngwr.dev/components/sidebar), [stepper](https://ngwr.dev/components/stepper), [tabs](https://ngwr.dev/components/tabs).
+
+**Overlays** — [command-palette](https://ngwr.dev/components/command-palette), [context-menu](https://ngwr.dev/components/context-menu), [dialog](https://ngwr.dev/components/dialog), [drawer](https://ngwr.dev/components/drawer), [popconfirm](https://ngwr.dev/components/popconfirm), [popover](https://ngwr.dev/components/popover), [toast](https://ngwr.dev/components/toast), [window](https://ngwr.dev/components/window).
+
+**Charts** — [bar-chart](https://ngwr.dev/components/bar-chart), [calendar-heatmap](https://ngwr.dev/components/calendar-heatmap), [donut-chart](https://ngwr.dev/components/donut-chart), [gauge](https://ngwr.dev/components/gauge), [line-chart](https://ngwr.dev/components/line-chart), [meter-group](https://ngwr.dev/components/meter-group), [sparkline](https://ngwr.dev/components/sparkline).
+
+Plus [icon](https://ngwr.dev/components/icon), the experimental [squircle](https://ngwr.dev/components/squircle), and the [typography](https://ngwr.dev/typography) directive.
+
+### Animations
+
+Animated UI effects. Mix of in-house components + ports of [reactbits.dev](https://www.reactbits.dev) — each port carries a credit chip on its docs page. Defaults are theme-aware (light + dark), and every component honors `prefers-reduced-motion`.
+
+[aurora](https://ngwr.dev/animations/aurora), [blur-text](https://ngwr.dev/animations/blur-text), [border-glow](https://ngwr.dev/animations/border-glow), [circular-text](https://ngwr.dev/animations/circular-text), [click-spark](https://ngwr.dev/animations/click-spark), [confetti](https://ngwr.dev/animations/confetti), [decrypt-text](https://ngwr.dev/animations/decrypt-text), [falling-text](https://ngwr.dev/animations/falling-text), [fuzzy-text](https://ngwr.dev/animations/fuzzy-text), [glitch-text](https://ngwr.dev/animations/glitch-text), [gradient-text](https://ngwr.dev/animations/gradient-text), [marquee](https://ngwr.dev/animations/marquee), [reveal](https://ngwr.dev/animations/reveal), [rotating-text](https://ngwr.dev/animations/rotating-text), [scramble-text](https://ngwr.dev/animations/scramble-text), [shiny-text](https://ngwr.dev/animations/shiny-text), [splash-cursor](https://ngwr.dev/animations/splash-cursor), [split-text](https://ngwr.dev/animations/split-text), [spotlight-card](https://ngwr.dev/animations/spotlight-card), [star-border](https://ngwr.dev/animations/star-border), [tilt-card](https://ngwr.dev/animations/tilt-card), [typewriter](https://ngwr.dev/animations/typewriter), [waves](https://ngwr.dev/animations/waves).
+
+Card packages bundle their related directives: `ngwr/spotlight-card` exports `WrSpotlight`; `ngwr/tilt-card` exports `WrTilt`; `ngwr/shiny-text` exports `WrShimmer`.
+
+### Directives — `ngwr/directives`
+
+[autofocus](https://ngwr.dev/directives/autofocus), [autosize](https://ngwr.dev/directives/autosize), [click-outside](https://ngwr.dev/directives/click-outside), [copy-to-clipboard](https://ngwr.dev/directives/copy-to-clipboard), [reveal](https://ngwr.dev/animations/reveal). [affix](https://ngwr.dev/directives/affix) ships as its own entry (`ngwr/affix`).
+
+### Pipes — `ngwr/pipes`
+
+[wrBytes](https://ngwr.dev/pipes/wr-bytes), [wrDate](https://ngwr.dev/pipes/wr-date), [wrMark](https://ngwr.dev/pipes/wr-mark), [wrNumber](https://ngwr.dev/pipes/wr-number), [wrPlural](https://ngwr.dev/pipes/wr-plural), [wrRange](https://ngwr.dev/pipes/range), [wrTruncate](https://ngwr.dev/pipes/wr-truncate).
+
+### Services
+
+[clipboard](https://ngwr.dev/services/clipboard), [cookie](https://ngwr.dev/services/cookie), [density](https://ngwr.dev/services/density), [hotkey](https://ngwr.dev/services/hotkey), [loading-bar](https://ngwr.dev/services/loading-bar), [media](https://ngwr.dev/services/media), [meta](https://ngwr.dev/services/meta), [platform](https://ngwr.dev/services/platform), [scroll](https://ngwr.dev/services/scroll), [storage](https://ngwr.dev/services/storage), [theme](https://ngwr.dev/services/theme), [translate](https://ngwr.dev/translate) (i18n).
+
+### Validators — `ngwr/validators`
+
+Bundled `ValidatorFn`s composing cleanly with Angular's built-in `Validators`: `cardNumber` (Luhn), `cvc`, `hexColor`, `iban` (mod-97), `match` (sibling control), `maxDate`, `minDate`, `noWhitespace`, `oneOf`, `url`. See [docs](https://ngwr.dev/validators).
+
+### Utils — `ngwr/utils`
+
+Math (`clamp`, `round`), coercion (`numAttr`), css helpers (`resolveCssSize`, `getRootFontSize`), ids (`randomId`), type guards (`isDefined`, `isNonEmptyArray`, `isObservable`), keyboard helpers (`KEYS`, `hasModifier`, `isPrintableKey`), functional primitives (`noop`, `badgeLog`, `debounce`, `throttle`), focus management (`getFocusableElements`, `trapFocus`). See [docs](https://ngwr.dev/utils) for the full list. Shared shapes (`Maybe`, `SafeAny`, `WrColor`, …) are documented under [Interfaces](https://ngwr.dev/interfaces).
+
+### Core
+
+- [Color](https://ngwr.dev/getting-started/color) — design tokens and palette.
+- [Grid](https://ngwr.dev/getting-started/grid) — opt-in 12-column layout.
+- [Overlay](https://ngwr.dev/getting-started/overlay) — isolated CDK overlay container, `provideWrOverlay()`.
+- [Typography](https://ngwr.dev/typography) — `wrTypography` directive: headings, paragraphs, lists, links, code.
+- [Icons](https://ngwr.dev/icons) — `ngwr/icon` registry + thin adapters for Lucide, Feather, Tabler, Phosphor, Heroicons, Iconoir, Radix, Bootstrap.
+- **Date adapters** — `ngwr/date-adapter-fns`, `ngwr/date-adapter-luxon`. Wire one with `provideWrDateAdapter(...)` to power calendar + every mode of date-picker.
+
+## Highlights
+
+- **Standalone & signals-first.** Every component is standalone and uses `input()` / `model()` / `output()` / `signal()` / `computed()`. Zoneless-ready.
+- **CDK-powered.** Overlays, portals, and a11y come from `@angular/cdk`. We add `provideWrOverlay()` so NGWR overlays never collide with other CDK consumers (Material, NG-ZORRO, etc.).
+- **Tree-shakable.** ~125 separate ng-packagr entry points — import only what you use. Per-component FESM bundles are typically 5–25 KB; the largest entry (`ngwr/icon`) is ~98 KB before tree-shaking and ships only the icons you actually register.
+- **Modular SCSS.** Component styles are scoped through CSS custom properties. Theme tokens live in `ngwr/theme`; utilities (`grid`, `reset`) and the breakpoints SCSS API are opt-in.
+- **Tree-shaken icons.** `provideWrIcons([plus, trash])` registers only the icons you actually import. Dev-mode validation warns about unregistered icons.
+- **Reactbits ports, dependency-free.** All animation ports are reimplemented with vanilla DOM + Web Animations API / `IntersectionObserver` / `requestAnimationFrame` / raw WebGL — no GSAP, no `motion/react`, no `matter-js`, no `ogl`.
+- **Motion respects the OS.** Every animation component short-circuits to its final state under `prefers-reduced-motion`.
+
+## Contributing
+
+Conventional commits are enforced on PR titles. Common types: `feat`, `fix`, `perf`, `refactor`, `docs`, `style`, `test`, `build`, `ci`, `chore`, `revert`. Optional scope is the component or area (`feat(checkbox): icon mode`).
+
+```shell
+pnpm install
+pnpm dev            # ng serve --o (showcase)
+pnpm build:lib      # ng build lib
+pnpm build:showcase # ng build showcase
+pnpm lint           # ng lint
+```
 
 ## Authors
-- [Roman Khegay](https://github.com/thekhegay) – code, design
 
-## Sponsors
-- [Garuna](https://garuna.dev/)
-- [Stingray Technologies](https://stingray-mobile.ru/)
+- [Roman Khegay](https://github.com/thekhegay) — code, design
 
 ## License
-Feel free to use NGWR in your commercial projects. Everything is covered by [MIT](/LICENSE) license.
+
+[MIT](./LICENSE) — free for commercial use.

package/affix/styles/_index.scss

@@ -0,0 +1,12 @@
+// Minimal styles — the directive does most of the work inline. We just
+// expose a class hook so consumers can style the "stuck" state.
+//
+// The directive sets `position: sticky; top: <offset>px` on the host and
+// toggles `wr-affix--active` via an IntersectionObserver sentinel.
+
+.wr-affix {
+  // No baseline styles intentionally — the host is the consumer's
+  // element. We only own the `position: sticky` (set inline) and the
+  // optional active modifier.
+  z-index: 10;
+}

package/alert/styles/_index.scss

@@ -1,58 +1,101 @@
-@forward './vars';
-@forward './theming';
+@use '../../theme/styles' as theme;
 
-@forward '../../icon/styles';
+$alert-colors: (
+  info: primary,
+  success: success,
+  warning: warning,
+  danger: danger,
+);
 
 .wr-alert {
+  display: flex;
+  align-items: stretch;
+  gap: 0.75rem;
+  // Claim the full row even when nested in a flex-row demo wrapper.
+  flex: 1 1 100%;
   width: 100%;
+  min-width: 0;
 
-  &__wrapper {
-    display: flex;
-    align-items: stretch;
-    gap: 1rem;
+  // Defaults — overridden per variant below.
+  --wr-alert-bg: rgba(var(--wr-color-primary-rgb), 0.08);
+  --wr-alert-border: var(--wr-color-primary);
+  --wr-alert-title: var(--wr-color-primary);
+  --wr-alert-message: var(--wr-color-dark);
+  --wr-alert-close: var(--wr-color-medium);
+
+  background: var(--wr-alert-bg);
+  border-left: 3px solid var(--wr-alert-border);
+  @include theme.smooth-br(var(--wr-border-radius-base));
+  padding: 0.75rem 1rem;
+
+  &--dismissed {
+    display: none;
+  }
 
-    background-color: var(--wr-alert-bg-color);
-    border-radius: var(--wr-alert-border-radius);
-    border-left: 0.25rem solid var(--wr-alert-border-color);
-    padding: var(--wr-alert-padding-y) var(--wr-alert-padding-x);
+  &__icon {
+    flex: 0 0 auto;
+    width: 1.125rem;
+    height: 1.125rem;
+    margin-top: 0.125rem;
+    color: var(--wr-alert-title);
   }
 
   &__body {
+    flex: 1 1 auto;
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-    flex: 1;
+    gap: 0.25rem;
+    min-width: 0;
   }
 
   &__title {
-    color: var(--wr-alert-title-color);
-    font-size: 1rem;
+    margin: 0;
+    color: var(--wr-alert-title);
+    font-family: var(--wr-font-family-base);
+    font-size: 0.875rem;
     font-weight: 600;
-    line-height: 1.5rem;
+    line-height: 1.25rem;
   }
 
   &__message {
-    color: var(--wr-alert-message-color);
-    font-size: 0.75rem;
-    font-weight: 400;
-    line-height: 1rem;
+    margin: 0;
+    color: var(--wr-alert-message);
+    font-family: var(--wr-font-family-base);
+    font-size: 0.8125rem;
+    line-height: 1.125rem;
   }
 
-  &-close {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    min-width: 2rem;
-
-    color: var(--wr-alert-close-color);
-    transition: var(--wr-transition-base);
+  &__close {
+    flex: 0 0 auto;
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0.125rem;
+    color: var(--wr-alert-close);
     cursor: pointer;
+    border-radius: var(--wr-border-radius-sm);
+    transition:
+      color var(--wr-transition-base),
+      background var(--wr-transition-base);
+
+    --wr-icon-size: 1rem;
 
     &:hover {
-      color: var(--wr-alert-close-color-hover);
+      color: var(--wr-alert-title);
+      background: rgba(var(--wr-color-light-rgb), 0.4);
+    }
+
+    &:focus-visible {
+      outline: 2px solid rgba(var(--wr-color-primary-rgb), 0.5);
+      outline-offset: 1px;
+    }
+  }
+
+  @each $variant, $color in $alert-colors {
+    &--#{$variant} {
+      --wr-alert-bg: rgba(var(--wr-color-#{$color}-rgb), 0.08);
+      --wr-alert-border: var(--wr-color-#{$color});
+      --wr-alert-title: var(--wr-color-#{$color});
     }
   }
 }

package/anchor/styles/_index.scss

@@ -0,0 +1,59 @@
+@use '../../theme/styles' as theme;
+
+.wr-anchor {
+  display: block;
+  font-family: var(--wr-font-family-base);
+  border-left: 1.5px solid var(--wr-color-light);
+  padding-left: 0.875rem;
+
+  &__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+
+    &--nested {
+      margin-top: 0.125rem;
+      padding-left: 0.875rem;
+    }
+  }
+
+  &__link {
+    position: relative;
+    display: block;
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--wr-border-radius-sm);
+    color: var(--wr-color-medium);
+    font-size: var(--wr-text-sm);
+    line-height: var(--wr-leading-snug);
+    transition:
+      color var(--wr-transition-base),
+      background var(--wr-transition-base);
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0.25rem;
+      bottom: 0.25rem;
+      left: -1rem;
+      width: 1.5px;
+      background: transparent;
+      transition: background var(--wr-transition-base);
+    }
+
+    &:hover {
+      color: var(--wr-color-dark);
+    }
+
+    &--active {
+      color: var(--wr-color-primary);
+      font-weight: var(--wr-font-weight-semibold);
+
+      &::before {
+        background: var(--wr-color-primary);
+      }
+    }
+  }
+}

package/aurora/aurora.scss

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

package/aurora/styles/_index.scss

@@ -0,0 +1,30 @@
+// Aurora background (reactbits port). A WebGL2 canvas fills the nearest
+// positioned ancestor; all the visuals live in the fragment shader.
+
+.wr-aurora {
+  // Theme-default colour stops (overridden by `[colorStops]`): vivid
+  // indigo → emerald on light surfaces; dark restores the neon
+  // reactbits palette below.
+  --wr-aurora-stop-1: #6366f1;
+  --wr-aurora-stop-2: #10b981;
+  --wr-aurora-stop-3: #6366f1;
+
+  position: absolute;
+  inset: 0;
+  display: block;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 0;
+
+  &__canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+[data-theme='dark'] .wr-aurora {
+  --wr-aurora-stop-1: #5227ff;
+  --wr-aurora-stop-2: #7cff67;
+  --wr-aurora-stop-3: #5227ff;
+}

package/avatar/styles/_index.scss

@@ -1,39 +1,55 @@
+@use '../../theme/styles' as theme;
+
 .wr-avatar {
-  --wr-avatar-border-radius: 10%;
+  // Defaults — `shape="rounded"` (the default) gets the soft rounded
+  // square look. Variant modifiers below override the radius / corner
+  // treatment.
+  --wr-avatar-radius: 10%;
   --wr-avatar-img-opacity: 0;
+  --wr-avatar-ring: rgba(var(--wr-color-light-rgb), 0.5);
 
-  display: flex;
-  flex-direction: column;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-
-  border-radius: var(--wr-avatar-border-radius);
-
   position: relative;
   overflow: hidden;
+  border-radius: var(--wr-avatar-radius);
+  box-shadow: inset 0 0 0 1px var(--wr-avatar-ring);
 
-  box-shadow: inset 0 0 0 1px rgba(var(--wr-color-light-rgb), 0.5);
+  &--square {
+    --wr-avatar-radius: 0;
+  }
+
+  &--circle {
+    --wr-avatar-radius: 50%;
+  }
 
-  &--rounded {
-    --wr-avatar-border-radius: 50%;
+  &--squircle {
+    // iOS-style smooth corners. `corner-shape: squircle` is supported
+    // in Chrome 145+; browsers without it fall back to the same 10%
+    // radius as `shape="rounded"`, which is the closest visual match.
+    @include theme.smooth-br(18%);
   }
 
   &--loaded {
     --wr-avatar-img-opacity: 1;
-    box-shadow: inset 0 0 0 1px rgba(var(--wr-color-light-rgb), 0);
+    --wr-avatar-ring: transparent;
   }
 
   &__img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
     pointer-events: none;
     user-select: none;
     opacity: var(--wr-avatar-img-opacity);
-    transition: var(--wr-transition-base);
+    transition: opacity var(--wr-transition-base);
   }
 
   &__spin {
-    color: rgba(var(--wr-color-medium-rgb), 0.5);
     position: absolute;
-    width: 40%;
-    height: 40%;
+    color: rgba(var(--wr-color-medium-rgb), 0.6);
+    --wr-spinner-size: 40%;
   }
 }

package/back-top/styles/_index.scss

@@ -0,0 +1,42 @@
+@use '../../theme/styles' as theme;
+
+.wr-back-top {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  z-index: 50;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(0.5rem);
+  transition:
+    opacity var(--wr-duration-base) var(--wr-ease-out),
+    transform var(--wr-duration-base) var(--wr-ease-out);
+
+  &--visible {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+  }
+
+  &__button {
+    width: 2.75rem;
+    height: 2.75rem;
+    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:
+      background var(--wr-transition-base),
+      transform var(--wr-transition-base);
+
+    &:hover {
+      background: var(--wr-color-primary-dark, var(--wr-color-primary));
+      transform: translateY(-2px);
+    }
+  }
+}