@vanduo-oss/framework 1.4.2 → 1.4.4

package/README.md

@@ -1,4 +1,4 @@
-# Vanduo Framework v1.4.2
+# Vanduo Framework v1.4.4
 
 <p align="center">
   <img src="vanduo-banner.svg" alt="Vanduo Framework Banner" width="100%">
@@ -22,15 +22,23 @@ Vanduo is a zero-dependency UI framework built with HTML, CSS, and vanilla JavaS
 - 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.4.4
+
+- **Theme Switcher menu variant** — `.vd-theme-switcher[data-theme-ui="menu"]` opens an icon-only picker; option click applies the theme without cycling on toggle. Cycle (`button[data-toggle="theme"]`) and select variants are unchanged.
+- **New stylesheet** — `css/components/theme-switcher.css` for menu layout, active state, and navbar alignment.
+- **Optional tooltips** — add `data-tooltip` on the toggle or menu options when the Tooltips component is loaded (opt-in).
+- Normative API: [openspec/specs/theme-switcher/spec.md](openspec/specs/theme-switcher/spec.md).
+
 ## Quick Start
 
 ### CDN
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.4.2/dist/vanduo.min.css">
-<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.4.2/dist/vanduo.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.4.4/dist/vanduo.min.css">
+<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.4.4/dist/vanduo.min.js"></script>
 <script>
   Vanduo.init();
 </script>
@@ -114,6 +122,7 @@ framework/
 ├── 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
 ```
 
@@ -129,11 +138,14 @@ pnpm test
 pnpm run stats:css
 ```
 
+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
 
 - Architecture notes: [ARCHITECTURE.md](ARCHITECTURE.md)
 - Token model: [TOKENS.md](TOKENS.md)
 - `1.4.1` token migration notes: [changes-v141.md](changes-v141.md)
+- Theme Switcher spec: [openspec/specs/theme-switcher/spec.md](openspec/specs/theme-switcher/spec.md)
 - QA strategy: [QA-Automation-Strategy.md](QA-Automation-Strategy.md)
 - Contributor workflow: [CONTRIBUTING.md](CONTRIBUTING.md)
 

package/css/components/theme-switcher.css

@@ -0,0 +1,129 @@
+/**
+ * Vanduo Framework - Theme Switcher
+ * Icon-only menu variant for explicit theme selection
+ */
+
+:root {
+  --vd-theme-switcher-menu-bg: var(--vd-color-white);
+  --vd-theme-switcher-menu-border-color: var(--vd-border-color);
+  --vd-theme-switcher-option-hover-bg: var(--vd-bg-secondary);
+  --vd-theme-switcher-option-active-bg: var(--vd-color-primary-alpha-10);
+  --vd-theme-switcher-option-active-color: var(--vd-color-primary);
+  --vd-theme-switcher-z-index: 1000;
+}
+
+[data-theme="dark"] {
+  --vd-theme-switcher-menu-bg: var(--vd-bg-primary);
+  --vd-theme-switcher-option-hover-bg: var(--vd-bg-secondary);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --vd-theme-switcher-menu-bg: var(--vd-bg-primary);
+    --vd-theme-switcher-option-hover-bg: var(--vd-bg-secondary);
+  }
+}
+
+.vd-theme-switcher {
+  position: relative;
+  display: inline-block;
+}
+
+.vd-theme-switcher-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.375rem;
+  height: 2.375rem;
+  padding: 0;
+  border: 1px solid var(--vd-border-color);
+  border-radius: var(--vd-btn-border-radius, var(--vd-card-border-radius));
+  background: transparent;
+  color: var(--vd-text-secondary);
+  cursor: pointer;
+  font-size: 1.15rem;
+  line-height: 1;
+  transition: color 0.2s, border-color 0.2s, background 0.2s;
+}
+
+.vd-theme-switcher-toggle:hover,
+.vd-theme-switcher-toggle:focus-visible {
+  color: var(--vd-color-primary);
+  border-color: var(--vd-color-primary);
+  background: var(--vd-color-primary-alpha-10);
+  outline: none;
+}
+
+.vd-theme-switcher-menu {
+  position: absolute;
+  top: calc(100% + 0.375rem);
+  left: 0;
+  z-index: var(--vd-theme-switcher-z-index);
+  display: none;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: auto;
+  padding: 0.375rem;
+  margin: 0;
+  background: var(--vd-theme-switcher-menu-bg, #ffffff);
+  border: 1px solid var(--vd-theme-switcher-menu-border-color);
+  border-radius: var(--vd-btn-border-radius, var(--vd-card-border-radius));
+  box-shadow: var(--vd-shadow-lg);
+  list-style: none;
+  isolation: isolate;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(-6px);
+  transition: visibility var(--vd-transition-duration-base, 0.2s) var(--vd-transition-ease, ease),
+              transform var(--vd-transition-duration-base, 0.2s) var(--vd-transition-ease, ease);
+}
+
+.vd-theme-switcher-menu-end .vd-theme-switcher-menu,
+.vd-theme-switcher.vd-theme-switcher-menu-end .vd-theme-switcher-menu {
+  right: 0;
+  left: auto;
+}
+
+.vd-theme-switcher.is-open .vd-theme-switcher-menu,
+.vd-theme-switcher-menu.is-open {
+  display: flex;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.vd-theme-switcher-option,
+.vd-theme-switcher-menu [data-theme-value] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.375rem;
+  height: 2.375rem;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--vd-btn-border-radius-sm, var(--vd-radius-fib-3));
+  background: transparent;
+  color: var(--vd-text-secondary);
+  cursor: pointer;
+  font-size: 1.15rem;
+  line-height: 1;
+  transition: color 0.2s, background 0.2s, border-color 0.2s;
+}
+
+.vd-theme-switcher-option:hover,
+.vd-theme-switcher-option:focus-visible,
+.vd-theme-switcher-menu [data-theme-value]:hover,
+.vd-theme-switcher-menu [data-theme-value]:focus-visible {
+  color: var(--vd-text-primary);
+  background: var(--vd-theme-switcher-option-hover-bg);
+  outline: none;
+}
+
+.vd-theme-switcher-option.is-active,
+.vd-theme-switcher-menu [data-theme-value].is-active {
+  color: var(--vd-theme-switcher-option-active-color);
+  background: var(--vd-theme-switcher-option-active-bg);
+  border-color: var(--vd-color-primary-alpha-20, transparent);
+}

package/css/vanduo.css

@@ -53,6 +53,7 @@
 @import url('components/spinner.css');
 @import url('components/button-group.css');
 @import url('components/theme-customizer.css');
+@import url('components/theme-switcher.css');
 @import url('components/image-box.css');
 @import url('components/doc-tabs.css');
 @import url('components/doc-search.css');
@@ -72,7 +73,6 @@
 @import url('components/transfer.css');
 @import url('components/tree.css');
 @import url('components/spotlight.css');
-@import url('components/music-player.css');
 
 /* Layer 5: Effects */
 @import url('effects/parallax.css');

package/dist/build-info.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.4.2",
-  "builtAt": "2026-05-23T19:59:36.731Z",
-  "commit": "adbe750",
+  "version": "1.4.4",
+  "builtAt": "2026-06-07T19:14:20.877Z",
+  "commit": "781df0d",
   "mode": "development+production"
 }