@vanduo-oss/framework 1.3.4 → 1.3.5

package/LICENSE

@@ -19,17 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-
----
-
-Third-Party Licenses:
-
-Open Color
-Copyright (c) 2016 Heeyeun Jeong
-MIT License
-https://yeun.github.io/open-color/
-
-Phosphor Icons
-Copyright (c) 2020 Phosphor Icons
-MIT License
-https://phosphoricons.com/

package/README.md

@@ -1,4 +1,4 @@
-# Vanduo Framework v1.3.4
+# Vanduo Framework v1.3.5
 
 <p align="center">
   <img src="vanduo-banner.svg" alt="Vanduo Framework Banner" width="100%">
@@ -7,115 +7,34 @@
 <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/dist/vanduo.min.css"><img src="https://img.shields.io/badge/minified_size-~110kb-8b5cf6?style=flat-square" alt="Minified Size"></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>
 
-**Essential just like water is.** 
+**Essential just like water is.**
 
-- **Pure HTML, CSS, JS** 
-- **No third party dependencies**
-- **Free and open source.**
+Vanduo is a lightweight, zero-dependency UI framework built with pure HTML, CSS, and JavaScript. It ships 46+ components, responsive utilities, dark mode support, and a flexible theming system.
 
-## Overview
+[Browse Docs](https://vanduo.dev/#docs)
 
-A lightweight, pure HTML/CSS/JS framework with **46+ components** for designing beautiful interfaces. Zero runtime dependencies, no mandatory build tools, just clean and simple code.
+## Highlights
 
-[**Browse Full Documentation →**](https://vanduo.dev/#docs)
-
-## Features
-
-- 🎨 **Pure CSS/JS** - No libraries, no dependencies
-- 🚀 **Lightweight** - Minimal file size, maximum performance
-- 📱 **Responsive** - Mobile-first design approach
-- 🎯 **Utility-First** - Flexible utility classes for rapid development
-- 🧩 **Modular** - Import only what you need
-- ♿ **Accessible** - Built with accessibility in mind (WCAG 2.1 AA)
-- 🌙 **Dark Mode** - Automatic OS preference detection + manual toggle
-- 🌗 **Theme Switcher** - Lightweight light/dark/system toggle with shared preference storage
-- 🎛️ **Theme Customizer** - Real-time color, radius, font, and mode customization
-- 🔍 **SEO-Ready** - Comprehensive meta tags, structured data, and sitemap
-
----
-
-## What's New in v1.3.4
-
-v1.3.4 introduces the Glass Effects system — no breaking changes:
-
-- **New `effects/glass.css` module.** Core `.vd-glass` class with `backdrop-filter` blur, translucent background, specular highlight, and noise texture. Size variants (`vd-glass-sm / md / lg / xl`), modifiers (`vd-glass-tinted`, `vd-glass-floating`, `vd-glass-contrast`), and full `prefers-reduced-transparency` / `@supports not (backdrop-filter)` fallbacks.
-- **Glass design tokens.** `--vd-glass-blur`, `--vd-glass-saturate`, `--vd-glass-bg-opacity`, `--vd-glass-bg-light/dark`, `--vd-glass-border-light/dark`, `--vd-glass-shadow`, `--vd-glass-highlight-alpha`, `--vd-glass-noise-opacity` — all with automatic dark-mode overrides and `--vd-glass-*` aliases.
-- **Component glass variants.** Opt-in `.vd-*-glass` modifier added to Navbar, Modal, Dropdown, Tooltip, Toast, Card, and FAB.
-- **Scroll-activated glass.** `initScrollWatcher()` in `navbar.js` activates `.vd-navbar-glass` transparently at rest and frosted on scroll (configurable via `data-scroll-threshold`). Generic `data-glass-scroll` + `data-glass-sentinel` attribute API (new `glass.js`, `IntersectionObserver`) brings the same pattern to any element via `.is-glass-active`.
-- **vd-hex selection fix.** `VdHexGrid` re-syncs `selectedHex` references after grid regeneration, preventing stale coordinates during rotation.
-
-## What's New in v1.3.3
-
-v1.3.3 is a maintenance release with no breaking changes:
-
-- **Theme default primary alignment.** `ThemeCustomizer` and `ThemeSwitcher` normalize stale `black`/`amber` primary pairs against `localStorage` and `prefers-color-scheme`, so light, dark, and system modes stay consistent with `data-primary` after reloads and OS theme changes.
-- **Documentation site.** Theme customizer demo storage keys align with framework (`vanduo-radius`, `vanduo-font-preference`); changelog and CDN pins updated to v1.3.3.
-
----
-
-## What's New in v1.3.2
-
-v1.3.2 is a component release centered on audio playback, with no breaking changes:
-
-- **New Music Player component.** Ships a zero-dependency HTML5 audio player with play/pause, previous/next, volume, track title, and optional progress, shuffle, and playlist controls.
-- **Framework-friendly API.** Accepts a plain JavaScript tracks array (`[{ name, url }]`), exposes custom events, and supports programmatic control through `window.VanduoMusicPlayer`.
-- **Responsive player layout.** Control wrapping and volume sizing were tuned so the component stays usable across compact, inline, and mobile layouts.
-- **Release coverage and artifacts updated.** Package metadata, generated bundles, `llms.txt`, and release-facing README examples now point at v1.3.2.
-
-The framework now ships **46+ components**, including the new Music Player and the additions below.
-
-| Component | Vanduo Name | Type |
-|---|---|---|
-| Carousel | Flow | CSS + JS |
-| Music Player | Music Player | CSS + JS |
-| Popover | Bubble | CSS + JS |
-| Scrollspy | Waypoint | CSS + JS |
-| Offcanvas | — (enhanced Sidenav) | CSS + JS |
-| Ripple / Waves | Ripple | CSS + JS |
-| Floating Action Button | FAB | CSS-only |
-| Sticky | Affix | CSS + JS |
-| Autocomplete | Suggest | CSS + JS |
-| Form Validation | Validate | JS |
-| Date Picker | Datepicker | CSS + JS |
-| Time Picker | Timepicker | CSS + JS |
-| Stepper | Stepper | CSS + JS |
-| Timeline | Timeline | CSS-only |
-| Rating | Rating | CSS + JS |
-| Transfer / Multi-select | Transfer | CSS + JS |
-| Tree View | Tree | CSS + JS |
-| Spotlight / Feature Discovery | Spotlight | CSS + JS |
-
----
+- Pure CSS/JS with no runtime dependencies
+- Modular architecture with optional per-component imports
+- Built-in dark/light/system theme switching
+- Runtime Theme Customizer for color, font, and radius tokens
+- Accessibility-focused components and utilities
 
 ## Quick Start
 
-### Option 1: CDN (Recommended)
-
-The quickest way to get started — no install, no build step. Add two lines to any HTML file:
+### CDN (recommended)
 
 ```html
-<!-- Vanduo CSS -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@main/dist/vanduo.min.css">
-
-<!-- Vanduo JS -->
-<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@main/dist/vanduo.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.3.5/dist/vanduo.min.css">
+<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.3.5/dist/vanduo.min.js"></script>
 <script>Vanduo.init();</script>
 ```
 
-**Pin to a specific version** for production:
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.3.4/dist/vanduo.min.css">
-<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.3.4/dist/vanduo.min.js"></script>
-<script>Vanduo.init();</script>
-```
-
-### Option 2: Download
-
-[**Download the dist/ folder**](https://github.com/vanduo-oss/framework/tree/main/dist) and include locally — no internet connection required at runtime:
+### Local dist files
 
 ```html
 <link rel="stylesheet" href="dist/vanduo.min.css">
@@ -123,97 +42,37 @@ The quickest way to get started — no install, no build step. Add two lines to
 <script>Vanduo.init();</script>
 ```
 
-The `dist/` folder is **self-contained** (CSS, JS, Fonts, Icons).
-
-### Option 3: Source Files
-
-For development or when you need more control, use the unminified source:
-
-```html
-<link rel="stylesheet" href="css/vanduo.css">
-<script src="js/vanduo.js"></script>
-<script>Vanduo.init();</script>
-```
-
-### Option 4: With a Bundler (Vite)
-
-> **Requires a build tool.** The imports below use bare module specifiers (`@vanduo-oss/framework`) which browsers cannot resolve on their own. For static HTML files, use the CDN or Download options above.
-
-Scaffold a Vite project and install Vanduo:
+### Package install (bundlers)
 
 ```bash
-pnpm create vite my-app --template vanilla
-cd my-app
 pnpm add @vanduo-oss/framework
 ```
 
-Import in your entry file (e.g. `main.js`):
-
 ```js
 import '@vanduo-oss/framework/css';
 import { Vanduo } from '@vanduo-oss/framework';
-Vanduo.init();
-```
-
-**Why pnpm?** pnpm enforces a strict lockfile and creates an isolated `node_modules` structure. Vanduo's `.npmrc` security policies work best with pnpm out of the box.
-
-*(Note: `npm install @vanduo-oss/framework` and `yarn add @vanduo-oss/framework` will also work, but they do not enforce the same strict lockfile and isolated `node_modules` security guarantees.)*
-
----
-
-## LLM Access
-
-This project includes an [`llms.txt`](llms.txt) file — a structured markdown summary designed for AI assistants and LLM-powered code editors. It provides quick access to framework documentation, component references, and usage patterns.
 
----
-
-## Release Assets (Maintainers)
-
-Use the hardened upload script to attach only approved bundle artifacts from `dist/`:
-
-```bash
-pnpm run release:assets -- v1.3.4
+Vanduo.init();
 ```
 
-Notes:
-- If tag is omitted, it defaults to `v` + version from `package.json`.
-- Use `--dry-run` to preview files without uploading.
-
----
-
-## Documentation
+## Docs and Resources
 
-Comprehensive documentation for all components, utilities, and customization options is available at vanduo.dev.
-
-[**View Documentation**](https://vanduo.dev/#docs)
-
-### Key Capabilities
-
-*   **Dark Mode**: Works automatically with system preferences. Can be forced via `data-theme="dark"` on `<html>`.
-*   **Theme Switcher**: Lightweight light/dark/system toggle that can coexist with Theme Customizer.
-*   **Theme Customizer**: Built-in runtime tool to change colors, fonts, and radius.
-*   **Modular Imports**: Import only specific components (e.g., `css/components/buttons.css`) to keep your site lean.
-*   **Icons**: Includes [Phosphor Icons](https://phosphoricons.com) (Regular + Fill weights bundled).
-
----
+- Website: [vanduo.dev](https://vanduo.dev)
+- Docs: [vanduo.dev/#docs](https://vanduo.dev/#docs)
+- npm: [@vanduo-oss/framework](https://www.npmjs.com/package/@vanduo-oss/framework)
+- Releases: [GitHub Releases](https://github.com/vanduo-oss/framework/releases)
+- LLM reference: [`llms.txt`](llms.txt)
 
 ## Project Structure
 
-```
+```text
 vanduo-framework/
-├── dist/                  # Production ready files (minified)
-├── css/
-│   ├── vanduo.css         # Main framework file (imports all)
-│   ├── core/              # Foundation (colors, typography, grid)
-│   ├── components/        # UI components (buttons, cards, etc)
-│   ├── utilities/         # Utility classes
-│   └── effects/           # Visual effects
-├── js/
-│   ├── vanduo.js          # Main entry point
-│   └── components/        # Component logic
-├── icons/                 # Phosphor Icons
-├── fonts/                 # Web fonts
-└── tests/                 # Framework test suite
+├── dist/          # Production bundles
+├── css/           # Core, components, utilities, effects
+├── js/            # Framework runtime and components
+├── fonts/         # Bundled web fonts
+├── icons/         # Phosphor icons bundle
+└── tests/         # Playwright + linting
 ```
 
 ## Browser Support
@@ -225,12 +84,10 @@ vanduo-framework/
 
 ## License
 
-MIT License - see [LICENSE](LICENSE) file for details.
+MIT - see [LICENSE](LICENSE).  
+Third-party notices are listed in [THIRD-PARTY-LICENSES](THIRD-PARTY-LICENSES).
 
 ## Credits
 
-- **Color System**: [Open Color](https://yeun.github.io/open-color/) by Heeyeun Jeong (MIT License)
-- **Icons**: [Phosphor Icons](https://phosphoricons.com) (MIT License)
-
----
-Vanduo Framework - Built with ❤️ for the web.
+- [Open Color](https://yeun.github.io/open-color/) (MIT)
+- [Phosphor Icons](https://phosphoricons.com/) (MIT)

package/css/components/tooltips.css

@@ -5,11 +5,11 @@
 
 :root {
   /* Tooltip Colors */
-  --tooltip-bg: var(--color-gray-900);
-  --tooltip-bg-light: var(--color-white);
+  --tooltip-bg: var(--color-white);
+  --tooltip-bg-light: var(--color-gray-100);
   --tooltip-bg-dark: var(--color-gray-900);
-  --tooltip-text-color: var(--color-white);
-  --tooltip-text-color-light: var(--color-gray-900);
+  --tooltip-text-color: var(--color-gray-900);
+  --tooltip-text-color-light: var(--color-gray-800);
   --tooltip-text-color-dark: var(--color-white);
   
   /* Tooltip Spacing (Fibonacci pairs: x/y ratio ~ phi) */
@@ -39,16 +39,16 @@
 
 /* Dark Theme Overrides */
 [data-theme="dark"] {
-  --tooltip-bg: var(--color-gray-100);
-  --tooltip-text-color: var(--color-gray-900);
+  --tooltip-bg: var(--color-gray-900);
+  --tooltip-text-color: var(--color-white);
   --tooltip-bg-light: var(--color-gray-800);
   --tooltip-text-color-light: var(--color-gray-100);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --tooltip-bg: var(--color-gray-100);
-    --tooltip-text-color: var(--color-gray-900);
+    --tooltip-bg: var(--color-gray-900);
+    --tooltip-text-color: var(--color-white);
     --tooltip-bg-light: var(--color-gray-800);
     --tooltip-text-color-light: var(--color-gray-100);
   }

package/css/effects/morph.css

@@ -0,0 +1,259 @@
+/**
+ * Vanduo Framework - Water Morph Effect
+ * Liquid wave content-swap animation on click
+ *
+ * Usage:
+ *   Add `.vd-morph` (or `data-vd-morph`) to any element.
+ *   Inside it, place:
+ *     .vd-morph-wave     — radial wave layer (auto-created by JS if missing)
+ *     .vd-morph-shine    — light-sweep layer (auto-created by JS if missing)
+ *     .vd-morph-content.vd-morph-current — visible state
+ *     .vd-morph-content.vd-morph-next    — hidden next state
+ */
+
+:root {
+  --morph-duration: 0.75s;
+  --morph-easing: cubic-bezier(0.2, 0.8, 0.35, 1);
+  --morph-blur-peak: 11px;
+  --morph-wave-color: var(--color-primary, #3b82f6);
+}
+
+/* ========== Base ========== */
+
+.vd-morph,
+[data-vd-morph] {
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* ========== Wave Layer ========== */
+
+.vd-morph-wave {
+  position: absolute;
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at 32% 28%,
+      color-mix(in srgb, #fff 55%, transparent) 0%,
+      color-mix(in srgb, #fff 18%, transparent) 18%,
+      transparent 38%),
+    radial-gradient(circle at 68% 70%,
+      color-mix(in srgb, #fff 30%, transparent) 0%,
+      transparent 30%),
+    radial-gradient(circle at 50% 50%,
+      color-mix(in srgb, var(--morph-wave-color) 96%, #a8d8ff) 0%,
+      color-mix(in srgb, var(--morph-wave-color) 82%, #7ec8ff) 35%,
+      color-mix(in srgb, var(--morph-wave-color) 70%, #5ba4f5) 65%,
+      color-mix(in srgb, var(--morph-wave-color) 90%, #4478f0) 100%);
+  pointer-events: none;
+  opacity: 0;
+  transform: translate(-50%, -50%);
+  will-change: width, height, opacity, filter;
+}
+
+.vd-morph.is-morphing .vd-morph-wave {
+  animation: vd-morph-expand var(--morph-duration) var(--morph-easing) forwards;
+}
+
+.vd-morph.is-morphing .vd-morph-wave::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at 50% 50%,
+      color-mix(in srgb, var(--morph-wave-color) 70%, #b0e0ff) 0%,
+      color-mix(in srgb, var(--morph-wave-color) 50%, #88c0ff) 45%,
+      transparent 80%);
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  animation: vd-morph-expand2 var(--morph-duration) var(--morph-easing) 0.08s forwards;
+}
+
+@keyframes vd-morph-expand {
+  0% {
+    width: 0;
+    height: 0;
+    opacity: 0;
+    filter: blur(0px) saturate(2);
+  }
+  6% {
+    opacity: 1;
+    filter: blur(1px) saturate(2.2);
+  }
+  35% {
+    opacity: 0.92;
+    filter: blur(6px) saturate(1.7);
+  }
+  68% {
+    width: 360%;
+    height: 360%;
+    opacity: 0.6;
+    filter: blur(var(--morph-blur-peak)) saturate(1.3);
+  }
+  100% {
+    width: 360%;
+    height: 360%;
+    opacity: 0;
+    filter: blur(7px) saturate(1);
+  }
+}
+
+@keyframes vd-morph-expand2 {
+  0% {
+    width: 0;
+    height: 0;
+    opacity: 0;
+    filter: blur(0px);
+  }
+  10% {
+    opacity: 0.7;
+    filter: blur(3px);
+  }
+  60% {
+    width: 280%;
+    height: 280%;
+    opacity: 0.38;
+    filter: blur(14px);
+  }
+  100% {
+    width: 280%;
+    height: 280%;
+    opacity: 0;
+    filter: blur(10px);
+  }
+}
+
+/* ========== Shine Sweep ========== */
+
+.vd-morph-shine {
+  position: absolute;
+  top: 0;
+  left: -110%;
+  width: 80%;
+  height: 100%;
+  background: linear-gradient(
+    105deg,
+    transparent 0%,
+    color-mix(in srgb, #fff 10%, transparent) 35%,
+    color-mix(in srgb, #fff 52%, transparent) 50%,
+    color-mix(in srgb, #fff 10%, transparent) 65%,
+    transparent 100%
+  );
+  pointer-events: none;
+  opacity: 0;
+  transform: skewX(-12deg);
+  will-change: left, opacity;
+}
+
+.vd-morph.is-morphing .vd-morph-shine {
+  animation: vd-morph-shine 0.72s cubic-bezier(0.3, 0.65, 0.5, 1) 0.04s forwards;
+}
+
+@keyframes vd-morph-shine {
+  0% {
+    left: -110%;
+    opacity: 0;
+  }
+  15% {
+    opacity: 0.9;
+  }
+  72% {
+    opacity: 0.4;
+  }
+  100% {
+    left: 130%;
+    opacity: 0;
+  }
+}
+
+/* ========== Completion Bounce ========== */
+
+.vd-morph.morph-done {
+  animation: vd-morph-bounce 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+@keyframes vd-morph-bounce {
+  0%   { transform: scale(0.97); }
+  60%  { transform: scale(1.025); }
+  100% { transform: scale(1); }
+}
+
+/* ========== Content Layers ========== */
+
+.vd-morph-content {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  pointer-events: none;
+  will-change: opacity, transform, filter;
+}
+
+.vd-morph-current {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  filter: blur(0px);
+  z-index: 2;
+  transition:
+    opacity 0.28s cubic-bezier(0.4, 0, 0.6, 1),
+    transform 0.28s cubic-bezier(0.4, 0, 0.6, 1),
+    filter 0.28s ease;
+}
+
+.vd-morph-next {
+  opacity: 0;
+  transform: scale(0.86) translateY(4px);
+  filter: blur(3px);
+  z-index: 1;
+  transition:
+    opacity 0.3s cubic-bezier(0, 0, 0.2, 1),
+    transform 0.3s cubic-bezier(0, 0, 0.2, 1),
+    filter 0.3s ease;
+}
+
+.vd-morph.is-morphing .vd-morph-current {
+  opacity: 0;
+  transform: scale(0.82) translateY(-4px);
+  filter: blur(4px);
+  transition-duration: 0.2s;
+  transition-delay: 0s;
+}
+
+.vd-morph.is-morphing .vd-morph-next {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  filter: blur(0px);
+  transition-duration: 0.3s;
+  transition-delay: 0.25s;
+}
+
+/* ========== Size Variants ========== */
+
+.vd-morph-sm {
+  --morph-duration: 0.5s;
+  --morph-blur-peak: 7px;
+}
+
+.vd-morph-lg {
+  --morph-duration: 1s;
+  --morph-blur-peak: 16px;
+}
+
+/* ========== Accessibility ========== */
+
+@media (prefers-reduced-motion: reduce) {
+  .vd-morph,
+  .vd-morph-content,
+  .vd-morph-wave,
+  .vd-morph-shine {
+    transition: none !important;
+    animation: none !important;
+  }
+}

package/css/vanduo.css

@@ -76,6 +76,7 @@
 /* Effects - Phase 7 */
 @import url('effects/parallax.css');
 @import url('effects/glass.css');
+@import url('effects/morph.css');
 
 /* Components - Phase 9 (New) */
 @import url('components/draggable.css');

package/dist/build-info.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.3.4",
-  "builtAt": "2026-04-14T21:21:55.517Z",
-  "commit": "73e3db5",
+  "version": "1.3.5",
+  "builtAt": "2026-04-15T18:39:53.955Z",
+  "commit": "3ca4f62",
   "mode": "development+production"
 }