@vanduo-oss/framework 1.6.0 → 1.7.1

package/CHANGELOG.md

@@ -8,6 +8,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 Full release notes — covering the framework, the documentation site, and
 ecosystem packages side by side — live at <https://vanduo.dev/#changelog>.
 
+## [1.7.1] - 2026-07-05
+
+### Fixed
+- **Button danger alias** — `.vd-btn-danger`, `.vd-btn-outline-danger`, and
+  `.vd-btn-ghost-danger` now share the same rules as the existing `-error`
+  variants, matching badges, alerts, and chips after the unified status vocabulary
+  migration.
+
+## [1.7.0] - 2026-06-29
+
+Additive minor backing the `@vanduo-oss/vue` 0.3.0 release. Adds CSS for new
+components plus alias classes the Vue components render, so the framework
+stylesheet (which `@vanduo-oss/vue` ships as its CSS) styles every class. No
+vanilla class names changed; every rule is additive and container-level rules
+that could collide with legacy base styles are gated with `:has()`.
+
+### Added
+- **Separator + Slider components** — new `css/components/separator.css` (`.vd-separator`, `-vertical`, `-labeled`, `-label`) and `css/components/slider.css` (`.vd-slider` range input, `.vd-slider-field`/`-row`/`-value`), wired into `css/vanduo.css`. (`VdSwitch` reuses `.vd-form-switch`; `VdMenu` reuses `.vd-dropdown`.)
+- **Unified status-palette aliases** — `.vd-input-danger` + `.vd-badge-danger` (aliases of the `-error` validation/variant), `.vd-alert-secondary` (new), plus `.vd-form-label` and `.vd-form-radio-icon` form helpers — backing the unified `primary/secondary/success/warning/danger/info` vocabulary in `@vanduo-oss/vue`.
+- **Accordion component** — new `css/components/accordion.css` (`.vd-accordion`, `-item`, `-header`, `-icon`, `-panel`), wired into `css/vanduo.css`. Previously no accordion CSS existed.
+- **Panel-based modal aliases** (`css/components/modals.css`) — `.vd-modal.vd-modal-open` (container open state), `.vd-modal-open .vd-modal-backdrop` (backdrop visibility), `.vd-modal-panel` (merges the legacy `.vd-modal-dialog` + `.vd-modal-content` box), and `.vd-modal-panel-{sm,md,lg}` sizes. Fixes invisible `VdModal` dialogs.
+- **Component sub-element aliases** — `.vd-alert-body` / `.vd-alert-dismiss` (alerts), `.vd-btn-spinner` (a real loading spinner element; legacy `::after` suppressed when present), `.vd-card-interactive` (cards), `.vd-progress-track` / `-fill` / `-label` + `.vd-progress.is-indeterminate` (progress), `.vd-avatar-img` (alias for `.vd-avatar img`), `.vd-tab` / `.vd-tab-panels` (tabs), `.vd-code-snippet-pre` (code snippet), `.vd-collection-list` / `-text-secondary` (collections), `.vd-flow-controls` / `-position` (flow), `.vd-skeleton-lines` / `-text-short` / `-card-header` / `-card-body` / `-card-{sm,md,lg,xl}` (skeleton), `.vd-preloader-spinner` (preloader), and `.vd-table-caption` (tables).
+- **Utilities** — `.vd-muted` and `.vd-visually-hidden` (`css/core/helpers.css`).
+
 ## [1.6.0] - 2026-06-27
 
 Additive release. Adds the Popover and Search primitives and an optional

package/README.md

@@ -1,201 +1,49 @@
-# Vanduo Framework v1.6.0
+<div align="center">
+  <img src="vanduo-oss-animated.svg" alt="vanduo-oss/framework" width="220"/>
+</div>
 
-<p align="center">
-  <img src="vanduo-banner.svg" alt="Vanduo Framework Banner" width="100%">
-</p>
+# @vanduo-oss/framework
 
-<p align="center">
-  <a href="https://www.npmjs.com/package/@vanduo-oss/framework"><img src="https://img.shields.io/npm/v/@vanduo-oss/framework?style=flat-square&color=3b82f6" alt="NPM Version"></a>
-  <a href="https://github.com/vanduo-oss/framework/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/vanduo-oss/framework/ci.yml?branch=main&style=flat-square&color=10b981" alt="Build Status"></a>
-  <a href="https://github.com/vanduo-oss/framework/blob/main/LICENSE"><img src="https://img.shields.io/github/license/vanduo-oss/framework?style=flat-square&color=64748b" alt="License"></a>
-</p>
+[![npm](https://img.shields.io/npm/v/@vanduo-oss/framework.svg)](https://www.npmjs.com/package/@vanduo-oss/framework)
+[![CI](https://img.shields.io/github/actions/workflow/status/vanduo-oss/framework/ci.yml?branch=main)](https://github.com/vanduo-oss/framework/actions/workflows/ci.yml)
+[![license: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)
 
-Vanduo is a zero-dependency UI framework built with HTML, CSS, and vanilla JavaScript. It ships a full component bundle, scoped runtime initialization, and a strict canonical `--vd-*` token API.
+> The zero-build **Vanilla** engine of the Vanduo design system.
 
-[Browse Docs](https://vanduo.dev/#docs)
+Drop-in HTML/CSS/JS — 48+ components driven by `.vd-*` classes and `data-vd-*` attributes, an imperative `window.Vanduo` runtime, and a strict `--vd-*` token API. Zero runtime dependencies; consumes design tokens from [`@vanduo-oss/core`](https://www.npmjs.com/package/@vanduo-oss/core). Need Vue 3 instead? See [`@vanduo-oss/vue`](https://www.npmjs.com/package/@vanduo-oss/vue).
 
-## Highlights
+## Install
 
-- Zero runtime dependencies
-- 48+ components across layout, navigation, overlays, search, and effects
-- Scoped runtime APIs for dynamic DOM work
-- Strict design token API under `--vd-*`
-- Built-in dark, light, and system theming
-- Theme customizer with color, font, and radius controls
-- Theme Switcher menu variant for icon-only light/dark/system selection in navbars
-- Playwright-based browser coverage across Chromium, Firefox, and WebKit
-
-## What's New in 1.6.0
-
-Additive release — two new primitives and an optional palette, plus one HTML-sanitization behavior change to note.
-
-- **New — Popover component** (`window.VanduoPopover`) — a general popover primitive with click / hover / focus triggers, external-panel composition via `data-vd-popover-target`, size variants, and auto-placement flip on overflow — alongside the existing `.vd-bubble`.
-- **New — Search helper** (`window.VanduoSearch`) — a small registry letting consumers register their own data sources (`register` / `unregister` / `list` / `query`) behind a single search surface; results merge across sources.
-- **New — Optional Fibonacci palette** — a golden-angle generated palette, opt in at runtime via `data-palette="fibonacci"` on `<html>`. **Open Color remains the default look.**
-- **Behavior change — HTML sanitization denies inline styles by default** — `sanitizeHtml` (used by Bubble / Popover rich content) now strips `style` attributes, closing an attribute-injection vector. Move inline styles to classes; opt back in only where you fully trust the source.
-- **Hardening** — `escapeHtml` is now quote-safe for attribute contexts.
-- **Tooling** — dependencies updated to latest; pnpm config migrated to `pnpm-workspace.yaml`.
-
-## Previous: 1.5.1
-
-- **Expanding Cards — mobile** — below `768px`, panels stack vertically and expand in place using the same flex-grow redistribution as the desktop strip (replacing progressive hide and non-animatable `order` reorder). Inactive rows render as compact stripes with icon + title; labels and subtitles transition smoothly. `ArrowUp`/`ArrowDown` keyboard navigation added alongside left/right.
-- **Expanding Cards — photo backgrounds** — active panels use `background-size: cover` and `background-repeat: no-repeat` so wide expanded cards no longer show tiled repeats on the sides.
-- **Expanding Cards — polish** — mobile overflow clipping and keyboard focus edge cases resolved.
-
-## Previous: 1.5.0
-
-- **Layout primitives** — new CSS-only layout containers — `.vd-box`, `.vd-stack`, `.vd-inline`, `.vd-center`, `.vd-frame` (golden-ratio aspect box), `.vd-cover`, and `.vd-switcher` (container-query-free responsive row→column) — with a `data-*` API (`data-pad`, `data-gap`, `data-align`, `data-justify`, `data-round`, `data-ratio`…) that consumes the existing Fibonacci spacing/radius and semantic tokens. They are the composition layer between utilities and components — *utilities style an element; primitives arrange elements*. Zero JS, zero new public tokens.
-- **Hex grid is now a standalone package** — `VdHexGrid` was never part of the bundle; its source has moved out of the framework tree. Install [`@vanduo-oss/hex-grid`](https://www.npmjs.com/package/@vanduo-oss/hex-grid) directly.
-
-## Previous: 1.4.6
-
-- **Leaner default CSS** — `css/vanduo.css` now bundles the `regular` + `fill` icon weights only (~45% smaller minified CSS). Need all six weights? Import `css/icons/icons-all.css`.
-- **No-icons core build** — new `dist/vanduo-core.min.css` (`@vanduo-oss/framework/css/core`) drops the bundled icons entirely (~123 KB lighter) for consumers who ship their own icon set.
-- **Smaller package** — the build ships only the icon weights the bundle actually uses into `dist/icons/`, instead of all six.
-- **TypeScript types** — a hand-written `dist/vanduo.d.ts` for the `Vanduo` runtime, exposed via the `types` field.
-- **In-repo changelog** — a new [CHANGELOG.md](CHANGELOG.md) (Keep a Changelog), now validated by `check:versions`.
-- **Version-consistency now covers prose** — `pnpm check:versions` validates README, `SECURITY.md`, `llms.txt`, and `CHANGELOG.md`, not just the dist banners.
-- **Lint guard** — raw `innerHTML` assignment is now flagged by ESLint outside the sanitization helpers.
-- **Parallax & print fixes (now tested)** — speed/direction classes and the print stylesheet's hide-list now use the canonical `vd-` prefix, with new Playwright regression specs; removed the unused internal `doc-tabs` styles from the bundle.
-
-## Previous: 1.4.5
-
-- **Rounded-corner background fixes** — draggable surfaces and input-group addons use `background-clip: padding-box` so opaque fills no longer bleed past border arcs at large `data-radius` presets.
-- **Background-clip audit** — Playwright `@audit` harness at `tests/audit/background-clip-audit.spec.ts` for regression checks.
-- Normative API: [openspec/specs/draggable/spec.md](openspec/specs/draggable/spec.md).
-
-## Quick Start
-
-### CDN
-
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.6.0/dist/vanduo.min.css">
-<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.6.0/dist/vanduo.min.js"></script>
-<script>
-  Vanduo.init();
-</script>
-```
-
-> **Production tip:** harden CDN tags with Subresource Integrity — add `integrity="sha384-…" crossorigin="anonymous"`. Copy the hash from [jsdelivr.com](https://www.jsdelivr.com/) (per-file "SRI" button) or generate it with `openssl dgst -sha384 -binary dist/vanduo.min.js | openssl base64 -A`.
-
-### Local Dist Files
-
-```html
-<link rel="stylesheet" href="dist/vanduo.min.css">
-<script src="dist/vanduo.min.js"></script>
-<script>
-  Vanduo.init();
-</script>
-```
-
-### Package Install
-
-```bash
+```sh
 pnpm add @vanduo-oss/framework
 ```
 
 ```js
-import '@vanduo-oss/framework/css';
-import { Vanduo } from '@vanduo-oss/framework';
+import "@vanduo-oss/framework/css";
+import { Vanduo } from "@vanduo-oss/framework";
 
 Vanduo.init();
 ```
 
-## Runtime API
-
-```js
-Vanduo.init(root);
-Vanduo.initComponents(root);
-Vanduo.reinit('lazyLoad', root);
-Vanduo.destroy(root);
-Vanduo.destroyAll();
-Vanduo.getComponent('docSearch');
-```
-
-- Omit `root` to target the full document.
-- Pass an `Element` to initialize or destroy only a subtree.
-- Canonical component registry names use `lowerCamelCase`.
-- `LazyLoad` remains available as a compatibility alias for `lazyLoad` in `1.4.x`.
-
-## Token API
-
-Vanduo `1.4.1` treats `--vd-*` as the only shipped custom-property namespace:
-
-- Palette: `--vd-red-*`, `--vd-primary-*`, `--vd-gray-*`, and related scales. The
-  default palette is **Open Color** (`--vd-oc-*`); **Fibonacci** (golden-angle
-  generated, `--vd-fib-*`, with a `--vd-golden-1..8` accent track) is opt-in via
-  `data-palette="fibonacci"`. See [TOKENS.md](TOKENS.md#palette-system-open-color-default--fibonacci-optional).
-- Colors: `--vd-color-*`
-- Backgrounds: `--vd-bg-*`
-- Text: `--vd-text-*`
-- Borders: `--vd-border-*`
-- Shadows: `--vd-shadow-*`
-- Components/effects: `--vd-btn-*`, `--vd-card-*`, `--vd-morph-*`, and related internals
-
-Legacy unprefixed token aliases were removed in `1.4.1`; update custom themes and overrides to use the `--vd-*` equivalents.
-
-```css
-.cta {
-  color: var(--vd-text-inverse);
-  background: var(--vd-color-primary);
-  border-color: var(--vd-border-color);
-}
-```
-
-More detail lives in [TOKENS.md](TOKENS.md).
-
-## CSS Bundle Notes
-
-- `css/vanduo.css` remains the main framework entrypoint in `1.4.1`.
-- The main bundle still includes framework-wide form defaults for native inputs and textareas.
-- New component styling should prefer `.vd-*` hooks over new raw element selectors.
-
-## Project Structure
-
-```text
-framework/
-├── css/          # Foundation, utilities, effects, components
-├── js/           # Runtime, lifecycle, components
-├── dist/         # Built artifacts
-├── tests/        # Playwright fixtures and specs
-├── scripts/      # Build, verification, and inventory scripts
-├── openspec/     # Spec-driven change proposals and component specs
-└── docs/*.md     # Release and architecture notes
-```
-
-## Development
+## Quick start (no build)
 
-```bash
-corepack enable
-pnpm install
-pnpm run lint
-pnpm run build
-pnpm run check:versions
-pnpm test
-pnpm run stats:css
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.7.1/dist/vanduo.min.css">
+<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.7.1/dist/vanduo.min.js"></script>
+<script>
+  Vanduo.init();
+</script>
 ```
 
-CI runs **Chromium Desktop smoke tests on pull requests** and the **full cross-browser Playwright matrix on push to `main`** (see [`.github/workflows/tests.yml`](.github/workflows/tests.yml) and [QA-Automation-Strategy.md](QA-Automation-Strategy.md)).
-
-## Release Notes
-
-- Changelog: [CHANGELOG.md](CHANGELOG.md)
-- Architecture notes: [ARCHITECTURE.md](ARCHITECTURE.md)
-- Token model: [TOKENS.md](TOKENS.md)
-- Theme Switcher spec: [openspec/specs/theme-switcher/spec.md](openspec/specs/theme-switcher/spec.md)
-- Draggable spec: [openspec/specs/draggable/spec.md](openspec/specs/draggable/spec.md)
-- Changelog policy: [openspec/specs/changelog/spec.md](openspec/specs/changelog/spec.md)
-- QA strategy: [QA-Automation-Strategy.md](QA-Automation-Strategy.md)
-- Contributor workflow: [CONTRIBUTING.md](CONTRIBUTING.md)
+> **Production tip:** pin the version and add Subresource Integrity (`integrity="sha384-…" crossorigin="anonymous"`) to CDN tags. Get the hash from the per-file "SRI" button on [jsdelivr.com](https://www.jsdelivr.com/).
 
-## Ecosystem
+## Documentation
 
-- [`@vanduo-oss/vd2`](https://github.com/vanduo-oss/vd2) — the
-  Vue 3 + vite-ssg documentation site that mirrors the framework
-  surface in Vue components. Consumes `@vanduo-oss/framework` for
-  CSS tokens and class names only.
+- Docs & live demos — https://vanduo.dev
+- Agent / LLM reference — [SKILL.md](./SKILL.md)
+- Token model — [TOKENS.md](./TOKENS.md) · Architecture — [ARCHITECTURE.md](./ARCHITECTURE.md)
+- Changelog — [CHANGELOG.md](./CHANGELOG.md) · Security — [SECURITY.md](./SECURITY.md)
 
 ## License
 
-MIT - see [LICENSE](LICENSE).  
-Third-party notices are listed in [THIRD-PARTY-LICENSES](THIRD-PARTY-LICENSES).
+[MIT](./LICENSE) © Vanduo — third-party notices in [THIRD-PARTY-LICENSES](./THIRD-PARTY-LICENSES).

package/SKILL.md

@@ -0,0 +1,58 @@
+---
+name: vanduo-framework
+description: Use when building UIs with @vanduo-oss/framework — the zero-build "Vanilla" HTML/CSS/JS engine of the Vanduo design system (data-attribute components + an imperative window.Vanduo runtime). Covers install (CDN/ESM/IIFE), the runtime API, the --vd-* token model, security, and caveats.
+---
+
+# @vanduo-oss/framework
+
+The **Vanilla (zero-build) engine** of the Vanduo design system: drop-in HTML/CSS/JS — 48+ components driven by `.vd-*` classes + `data-vd-*` attributes, an imperative `window.Vanduo` runtime, and a strict `--vd-*` token API. Consumes the values from `@vanduo-oss/core`. No build step required.
+
+## Install
+
+```sh
+pnpm add @vanduo-oss/framework        # Node >=18
+```
+
+```html
+<!-- or CDN (pin a version; add SRI in production) -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.7.1/dist/vanduo.min.css">
+<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.7.1/dist/vanduo.min.js"></script>
+<script>Vanduo.init()</script>
+```
+
+Build variants in `dist/`: `vanduo.min.css` (or `vanduo-core.min.css`, no bundled icons), `vanduo.esm.js` (bundler), `vanduo.cjs.js` (CJS), `vanduo.min.js` (IIFE → global `window.Vanduo`). Subpaths: `@vanduo-oss/framework/css`, `/css/core`, `/iife`.
+
+## Architecture
+
+- **Component model** — `.vd-*` classes for styling + `data-vd-*` attributes that the runtime wires up (modal, flow, bubble, stepper, etc.).
+- **Runtime** — `Vanduo.init()` once on load auto-initializes components; `reinit`/`destroy` handle dynamic DOM.
+- **Tokens** — everything themable via `--vd-*` CSS custom properties (Open Color default; opt-in Fibonacci palette via `data-palette="fibonacci"` on `<html>`).
+- **ESM vs IIFE** — ESM bundles into an app; IIFE runs standalone and populates `window.Vanduo`.
+
+## API
+
+Runtime (`window.Vanduo`): `init(root?)`, `initComponents(root?)`, `reinit(name, root?)`, `destroy(root?)`, `destroyAll()`, `getComponent(name)`, `register(name, comp, opts?)`. Registry names are `lowerCamelCase`.
+
+Component methods via `Vanduo.components.*` — e.g. `toast.show({title,message,type,duration})`, `flow.next/prev/goTo`, `bubble.show/hide`, `stepper.setStep/next/prev`, `rating.get/setValue`, `transfer.getSelected`, `tree.getChecked`, `spotlight.start/next/prev/stop`, `validate.validateForm/addRule`, `waypoint.refresh`.
+
+Helpers (global): `sanitizeHtml(html, {allowStyle?, allowSvg?})`, `escapeHtml(str)`, `ready(cb)`, `safeStorageGet/Set`, `debounce`, `throttle`.
+
+CSS entrypoints: `/css` (full), `/css/core` (tokens + components, no icons). Token namespaces: `--vd-color/bg/text/border/shadow-*`, `--vd-btn/card/morph-*`, palette scales `--vd-oc-*` / `--vd-fib-*`.
+
+## Security
+
+- `sanitizeHtml()` — whitelist-based; **denies inline `style` by default** (attribute-injection vector), opt back in only for trusted source. Bubble/Popover restrict links to `http/https/mailto`.
+- `escapeHtml()` is quote-safe for attribute contexts.
+- ESLint flags raw `innerHTML` assignment outside the sanitize helpers (`no-restricted-syntax`).
+- No bundled-style nonce injection — apply your own CSP; harden CDN tags with Subresource Integrity.
+
+## Caveats
+
+- No-build consumers use CDN or local `/dist`; bare ESM specifiers need a bundler/import map.
+- ES2022, modern browsers (no IE11 shims).
+- Theming persists to `localStorage` (`vanduo-theme-preference`); `data-palette="fibonacci"` is runtime opt-in (Open Color is default).
+- Hex grid and music player are **separate packages** (`@vanduo-oss/hex-grid`, `@vanduo-oss/music-player`).
+
+## Docs
+
+Full documentation and live demos: https://vanduo.dev

package/css/components/accordion.css

@@ -0,0 +1,80 @@
+/**
+ * Vanduo Framework - Accordion
+ * Added in 1.6.1 to back @vanduo-oss/vue's VdAccordion.
+ *
+ * VdAccordion renders:
+ *   ul.vd-accordion
+ *     li.vd-accordion-item(.is-open)
+ *       button.vd-accordion-header > span + span.vd-accordion-icon
+ *       div.vd-accordion-panel        (toggled via v-show)
+ */
+
+:root {
+  --vd-accordion-border-color: var(--vd-border-color);
+  --vd-accordion-header-bg: transparent;
+  --vd-accordion-header-bg-hover: var(--vd-bg-secondary);
+  --vd-accordion-padding-x: 1.3125rem;   /* 21px - fib */
+  --vd-accordion-padding-y: 0.8125rem;   /* 13px - fib */
+}
+
+.vd-accordion {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  border: 1px solid var(--vd-accordion-border-color);
+  border-radius: var(--vd-btn-border-radius);
+  overflow: hidden;
+}
+
+.vd-accordion-item {
+  border-top: 1px solid var(--vd-accordion-border-color);
+}
+
+.vd-accordion-item:first-child {
+  border-top: none;
+}
+
+.vd-accordion-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  width: 100%;
+  padding: var(--vd-accordion-padding-y) var(--vd-accordion-padding-x);
+  background: var(--vd-accordion-header-bg);
+  border: none;
+  cursor: pointer;
+  font-size: var(--vd-font-size-base);
+  font-weight: var(--vd-font-weight-medium);
+  color: var(--vd-text-primary);
+  text-align: left;
+  transition: background-color 0.15s ease;
+}
+
+.vd-accordion-header:hover {
+  background: var(--vd-accordion-header-bg-hover);
+}
+
+.vd-accordion-header:focus-visible {
+  outline: 2px solid var(--vd-color-primary);
+  outline-offset: -2px;
+}
+
+.vd-accordion-icon {
+  flex-shrink: 0;
+  font-size: 1.25rem;
+  line-height: 1;
+  color: var(--vd-text-secondary);
+}
+
+.vd-accordion-panel {
+  padding: var(--vd-accordion-padding-y) var(--vd-accordion-padding-x);
+  color: var(--vd-text-primary);
+  border-top: 1px solid var(--vd-accordion-border-color);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vd-accordion-header {
+    transition: none;
+  }
+}

package/css/components/alerts.css

@@ -94,6 +94,23 @@
   color: var(--vd-alert-info-text);
 }
 
+/* Secondary variant (added 1.7.0 for the unified status palette) */
+.vd-alert-secondary {
+  background-color: var(--vd-color-secondary-alpha-10);
+  border-color: var(--vd-color-secondary);
+  color: var(--vd-color-secondary-dark);
+}
+
+[data-theme="dark"] .vd-alert-secondary {
+  color: var(--vd-color-secondary-light);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) .vd-alert-secondary {
+    color: var(--vd-color-secondary-light);
+  }
+}
+
 /* Alert with Icon */
 .vd-alert-icon {
   display: flex;
@@ -222,3 +239,51 @@
     transition: none;
   }
 }
+
+/* ==========================================================================
+   @vanduo-oss/vue VdAlert markup (additive; added in 1.6.1)
+   VdAlert renders `.vd-alert > .vd-alert-icon + .vd-alert-body + .vd-alert-dismiss`.
+   .vd-alert-body wraps the title + content; .vd-alert-dismiss replaces the legacy
+   .vd-alert-close. Scoped with :has() so legacy alert markup is untouched.
+   ========================================================================== */
+.vd-alert:has(.vd-alert-body) {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.vd-alert:has(.vd-alert-body) > .vd-alert-icon {
+  flex-shrink: 0;
+}
+
+.vd-alert-body {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.vd-alert-dismiss {
+  flex-shrink: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  opacity: 0.5;
+  color: inherit;
+  line-height: 1;
+  transition: opacity 0.15s ease;
+}
+
+.vd-alert-dismiss:hover {
+  opacity: 1;
+}
+
+.vd-alert-dismiss:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vd-alert-dismiss {
+    transition: none;
+  }
+}

package/css/components/avatar.css

@@ -58,7 +58,8 @@
 }
 
 /* Avatar Image */
-.vd-avatar img {
+.vd-avatar img,
+.vd-avatar-img {
   width: 100%;
   height: 100%;
   object-fit: cover;

package/css/components/badges.css

@@ -94,7 +94,8 @@
   color: var(--vd-color-gray-900);
 }
 
-.vd-badge-error {
+.vd-badge-error,
+.vd-badge-danger {
   background-color: var(--vd-color-error);
   color: var(--vd-color-white);
 }

package/css/components/buttons.css

@@ -165,20 +165,23 @@
   transform: translateY(1px);
 }
 
-/* Button Variants - Error */
-.vd-btn-error {
+/* Button Variants - Danger (unified) / Error (alias) */
+.vd-btn-error,
+.vd-btn-danger {
   background-color: var(--vd-color-error);
   border-color: var(--vd-color-error);
   color: var(--vd-color-white);
 }
 
-.vd-btn-error:hover:not(:disabled):not(.disabled):not(.is-disabled) {
+.vd-btn-error:hover:not(:disabled):not(.disabled):not(.is-disabled),
+.vd-btn-danger:hover:not(:disabled):not(.disabled):not(.is-disabled) {
   background-color: var(--vd-color-error-dark);
   border-color: var(--vd-color-error-dark);
   color: var(--vd-color-white);
 }
 
-.vd-btn-error:active:not(:disabled):not(.disabled):not(.is-disabled) {
+.vd-btn-error:active:not(:disabled):not(.disabled):not(.is-disabled),
+.vd-btn-danger:active:not(:disabled):not(.disabled):not(.is-disabled) {
   background-color: var(--vd-color-error-dark);
   border-color: var(--vd-color-error-dark);
   transform: translateY(1px);
@@ -264,13 +267,15 @@
   color: var(--vd-color-black);
 }
 
-.vd-btn-outline-error {
+.vd-btn-outline-error,
+.vd-btn-outline-danger {
   background-color: transparent;
   border-color: var(--vd-color-error);
   color: var(--vd-color-error);
 }
 
-.vd-btn-outline-error:hover:not(:disabled):not(.disabled):not(.is-disabled) {
+.vd-btn-outline-error:hover:not(:disabled):not(.disabled):not(.is-disabled),
+.vd-btn-outline-danger:hover:not(:disabled):not(.disabled):not(.is-disabled) {
   background-color: var(--vd-color-error);
   border-color: var(--vd-color-error);
   color: var(--vd-color-white);
@@ -370,18 +375,21 @@
   color: var(--vd-color-warning-active);
 }
 
-.vd-btn-ghost-error {
+.vd-btn-ghost-error,
+.vd-btn-ghost-danger {
   background-color: transparent;
   border-color: transparent;
   color: var(--vd-color-error);
 }
 
-.vd-btn-ghost-error:hover:not(:disabled):not(.disabled):not(.is-disabled) {
+.vd-btn-ghost-error:hover:not(:disabled):not(.disabled):not(.is-disabled),
+.vd-btn-ghost-danger:hover:not(:disabled):not(.disabled):not(.is-disabled) {
   background-color: var(--vd-color-error-alpha-10);
   color: var(--vd-color-error-dark);
 }
 
-.vd-btn-ghost-error:active:not(:disabled):not(.disabled):not(.is-disabled) {
+.vd-btn-ghost-error:active:not(:disabled):not(.disabled):not(.is-disabled),
+.vd-btn-ghost-danger:active:not(:disabled):not(.disabled):not(.is-disabled) {
   background-color: var(--vd-color-error-alpha-20);
   color: var(--vd-color-error-active);
 }
@@ -513,6 +521,7 @@ a.vd-btn:hover {
 .vd-btn-secondary.is-loading::after,
 .vd-btn-success.is-loading::after,
 .vd-btn-error.is-loading::after,
+.vd-btn-danger.is-loading::after,
 .vd-btn-info.is-loading::after {
   border-color: var(--vd-color-white);
   border-right-color: transparent;
@@ -527,4 +536,48 @@ a.vd-btn:hover {
   to {
     transform: rotate(360deg);
   }
+}
+
+/* ==========================================================================
+   @vanduo-oss/vue VdButton spinner (additive; added in 1.6.1)
+   VdButton renders a real `<span class="vd-btn-spinner">` while loading (the
+   button also gets .is-loading). Style the real element and suppress the legacy
+   ::after so only one spinner is shown.
+   ========================================================================== */
+.vd-btn.is-loading:has(.vd-btn-spinner)::after {
+  content: none;
+}
+
+.vd-btn-spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 1em;
+  height: 1em;
+  margin: -0.5em 0 0 -0.5em;
+  border: 2px solid var(--vd-color-primary);
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: btn-spinner 0.6s linear infinite;
+}
+
+.vd-btn-primary .vd-btn-spinner,
+.vd-btn-secondary .vd-btn-spinner,
+.vd-btn-success .vd-btn-spinner,
+.vd-btn-danger .vd-btn-spinner,
+.vd-btn-error .vd-btn-spinner,
+.vd-btn-info .vd-btn-spinner {
+  border-color: var(--vd-color-white);
+  border-right-color: transparent;
+}
+
+.vd-btn-warning .vd-btn-spinner {
+  border-color: var(--vd-color-black);
+  border-right-color: transparent;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vd-btn-spinner {
+    animation-duration: 1.2s;
+  }
 }

package/css/components/cards.css

@@ -323,3 +323,29 @@ a.vd-card:active {
     flex: 1 1 0%;
   }
 }
+
+/* @vanduo-oss/vue VdCard :interactive (additive; added in 1.6.1) */
+.vd-card-interactive {
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.vd-card-interactive:hover {
+  transform: translateY(-2px) translateZ(0);
+  box-shadow: var(--vd-shadow-lg);
+}
+
+.vd-card-interactive:focus-visible {
+  outline: 2px solid var(--vd-color-primary);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vd-card-interactive {
+    transition: none;
+  }
+
+  .vd-card-interactive:hover {
+    transform: none;
+  }
+}