@vanduo-oss/framework 1.3.4 → 1.3.7

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.7
 
 <p align="center">
   <img src="vanduo-banner.svg" alt="Vanduo Framework Banner" width="100%">
@@ -7,115 +7,35 @@
 <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 47+ 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
+- 47+ components, including Expanding Cards and animated Timeline controls in v1.3.7
+- 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.7/dist/vanduo.min.css">
+<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.3.7/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 +43,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 +85,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/cards.css

@@ -23,7 +23,7 @@
 
   /* Card Shadow */
   --card-shadow: var(--shadow-sm);
-  --card-shadow-elevated: var(--shadow-sm);
+  --card-shadow-elevated: var(--shadow-md);
 
   /* Card Glow Effect - uses primary color scale */
   --card-glow-color: var(--primary-2);
@@ -34,6 +34,8 @@
 [data-theme="dark"] {
   --card-bg: var(--bg-secondary);
   --card-bg-filled: var(--bg-primary);
+  /* Stronger elevation on dark surfaces */
+  --card-shadow-elevated: var(--shadow-lg);
   /* Glow uses lighter primary shades for dark mode visibility */
   --card-glow-color: var(--primary-3);
   --card-glow-border-color: var(--primary-4);
@@ -43,6 +45,7 @@
   :root:not([data-theme]) {
     --card-bg: var(--bg-secondary);
     --card-bg-filled: var(--bg-primary);
+    --card-shadow-elevated: var(--shadow-lg);
     /* Glow uses lighter primary shades for dark mode visibility */
     --card-glow-color: var(--primary-3);
     --card-glow-border-color: var(--primary-4);
@@ -75,6 +78,13 @@
 .vd-card-elevated,
 .vd-card {
   box-shadow: var(--card-shadow-elevated);
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+/* Subtle lift on hover — skip links (they have their own hover) and non-elevated variants */
+.vd-card:not(a):not(.vd-card-outlined):not(.vd-card-filled):not(.vd-card-glass):not(.vd-card-glow):hover {
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-1px);
 }
 
 /* Card Variants - Outlined */

package/css/components/datepicker.css

@@ -103,6 +103,14 @@
   background: var(--dp-day-hover-bg);
 }
 
+/* ========== Calendar grid (weekday row + week rows) ========== */
+
+.vd-datepicker-grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dp-gap);
+}
+
 /* ========== Weekday Headers ========== */
 
 .vd-datepicker-weekdays {
@@ -118,7 +126,8 @@
 
 /* ========== Days Grid ========== */
 
-.vd-datepicker-days {
+.vd-datepicker-days,
+.vd-datepicker-row {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: var(--dp-gap);

package/css/components/expanding-cards.css

@@ -0,0 +1,215 @@
+/**
+ * Vanduo Framework — Expanding flex cards
+ *
+ * Adapted from MIT-licensed CodePen "Expanding flex cards" by Zed Dash:
+ * https://codepen.io/z-/pen/OBPJKK
+ *
+ * Usage:
+ *   <div class="vd-expanding-cards" data-vd-expanding-cards>
+ *     <div class="vd-expanding-card is-active" style="--vd-expanding-card-bg: url(...)">
+ *       <div class="vd-expanding-card-shadow"></div>
+ *       <div class="vd-expanding-card-label">...</div>
+ *     </div>
+ *   </div>
+ */
+
+.vd-expanding-cards {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  overflow: hidden;
+  min-width: 600px;
+  max-width: 900px;
+  width: calc(100% - 100px);
+  height: 400px;
+}
+
+.vd-expanding-card {
+  position: relative;
+  overflow: hidden;
+  min-width: 60px;
+  margin: 10px;
+  flex-grow: 1;
+  border-radius: 30px;
+  cursor: pointer;
+  background: var(--vd-expanding-card-bg, var(--vd-expanding-card-bg-default, #e6e9ed));
+  background-size: auto 120%;
+  background-position: center;
+  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
+}
+
+.vd-expanding-card:nth-child(1) {
+  --vd-expanding-card-bg-default: #ed5565;
+}
+
+.vd-expanding-card:nth-child(2) {
+  --vd-expanding-card-bg-default: #fc6e51;
+}
+
+.vd-expanding-card:nth-child(3) {
+  --vd-expanding-card-bg-default: #ffce54;
+}
+
+.vd-expanding-card:nth-child(4) {
+  --vd-expanding-card-bg-default: #2ecc71;
+}
+
+.vd-expanding-card:nth-child(5) {
+  --vd-expanding-card-bg-default: #5d9cec;
+}
+
+.vd-expanding-card:nth-child(6) {
+  --vd-expanding-card-bg-default: #ac92ec;
+}
+
+.vd-expanding-card.is-active {
+  flex-grow: 10000;
+  transform: scale(1);
+  max-width: 600px;
+  margin: 0;
+  border-radius: 40px;
+  background-size: auto 100%;
+}
+
+.vd-expanding-card.is-active .vd-expanding-card-shadow {
+  box-shadow:
+    inset 0 -120px 120px -120px black,
+    inset 0 -120px 120px -100px black;
+}
+
+.vd-expanding-card.is-active .vd-expanding-card-label {
+  bottom: 20px;
+  left: 20px;
+}
+
+.vd-expanding-card.is-active .vd-expanding-card-info > div {
+  left: 0;
+  opacity: 1;
+}
+
+.vd-expanding-card:not(.is-active) {
+  flex-grow: 1;
+  border-radius: 30px;
+}
+
+.vd-expanding-card:not(.is-active) .vd-expanding-card-shadow {
+  bottom: -40px;
+  box-shadow:
+    inset 0 -120px 0 -120px black,
+    inset 0 -120px 0 -100px black;
+}
+
+.vd-expanding-card:not(.is-active) .vd-expanding-card-label {
+  bottom: 10px;
+  left: 10px;
+}
+
+.vd-expanding-card:not(.is-active) .vd-expanding-card-info > div {
+  left: 20px;
+  opacity: 0;
+}
+
+.vd-expanding-card-shadow {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 120px;
+  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
+}
+
+.vd-expanding-card-label {
+  display: flex;
+  position: absolute;
+  right: 0;
+  height: 40px;
+  transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
+}
+
+.vd-expanding-card-icon {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  min-width: 40px;
+  max-width: 40px;
+  height: 40px;
+  border-radius: 100%;
+  background-color: #fff;
+  color: var(--vd-expanding-card-bg-default, var(--color-primary, #3b82f6));
+}
+
+.vd-expanding-card-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: 10px;
+  color: #fff;
+  white-space: pre;
+}
+
+.vd-expanding-card-info > div {
+  position: relative;
+  transition:
+    0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95),
+    opacity 0.5s ease-out;
+}
+
+.vd-expanding-card-title {
+  font-weight: bold;
+  font-size: 1.2rem;
+}
+
+.vd-expanding-card-subtitle {
+  transition-delay: 0.1s;
+}
+
+/* Progressive hide: narrow viewports hide rightmost cards (matches original) */
+@media screen and (max-width: 718px) {
+  .vd-expanding-cards {
+    min-width: 520px;
+  }
+
+  .vd-expanding-card:nth-child(5) {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 638px) {
+  .vd-expanding-cards {
+    min-width: 440px;
+  }
+
+  .vd-expanding-card:nth-child(4) {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 558px) {
+  .vd-expanding-cards {
+    min-width: 360px;
+  }
+
+  .vd-expanding-card:nth-child(3) {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 478px) {
+  .vd-expanding-cards {
+    min-width: 280px;
+  }
+
+  .vd-expanding-card:nth-child(2) {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vd-expanding-card,
+  .vd-expanding-card-shadow,
+  .vd-expanding-card-label,
+  .vd-expanding-card-info > div {
+    transition: none !important;
+  }
+}

package/css/components/spotlight.css

@@ -9,9 +9,11 @@
   --spotlight-tooltip-color: var(--text-primary, #212529);
   --spotlight-tooltip-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.15);
   --spotlight-tooltip-padding: 1.3125rem; /* 21px - fib */
-  --spotlight-tooltip-radius: var(--border-radius, 0.5rem);
+  --spotlight-tooltip-radius: var(--card-border-radius, var(--btn-border-radius-lg, 0.5rem));
   --spotlight-tooltip-max-width: 21rem; /* 336px - fib×16 */
   --spotlight-highlight-padding: 0.5rem; /* 8px - fib */
+  /* Match card/modal surfaces so the cutout reads like other rounded UI (not the smaller base button token). */
+  --spotlight-target-radius: var(--card-border-radius, var(--btn-border-radius-lg, var(--btn-border-radius, 0.25rem)));
   --spotlight-z-index: 1080;
 }
 
@@ -87,7 +89,7 @@
 .vd-spotlight-btn {
   padding: 0.3125rem 0.8125rem; /* 5px 13px - fib */
   border: 1px solid var(--border-color, #dee2e6);
-  border-radius: 0.25rem;
+  border-radius: var(--btn-border-radius-sm, 0.25rem);
   background: transparent;
   cursor: pointer;
   font-size: 0.8125rem;
@@ -113,7 +115,10 @@
 .vd-spotlight-target {
   position: relative;
   z-index: calc(var(--spotlight-z-index) + 1);
+  isolation: isolate;
+  overflow: visible;
+  /* box-shadow cutout follows border-radius; !important wins over consumer utilities (e.g. docs demos) */
+  border-radius: var(--spotlight-target-radius) !important;
   box-shadow: 0 0 0 var(--spotlight-highlight-padding) rgba(13, 110, 253, 0.25),
               0 0 0 9999px var(--spotlight-overlay-bg);
-  border-radius: 0.25rem;
 }

package/css/components/timeline.css

@@ -199,3 +199,50 @@
     right: auto;
   }
 }
+
+/* ========== Animated reveal (opt-in) ========== */
+
+.vd-timeline-animated .vd-timeline-item {
+  opacity: 0;
+  transform: translateY(12px);
+  transition:
+    opacity 0.55s ease,
+    transform 0.55s cubic-bezier(0.2, 0.8, 0.35, 1);
+  transition-delay: var(--vd-timeline-reveal-delay, 0s);
+}
+
+.vd-timeline-animated .vd-timeline-item .vd-timeline-marker {
+  transform: scale(0.4);
+  transform-origin: center center;
+  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition-delay: calc(var(--vd-timeline-reveal-delay, 0s) + 0.12s);
+}
+
+.vd-timeline-animated .vd-timeline-item.is-revealed {
+  opacity: 1;
+  transform: none;
+}
+
+.vd-timeline-animated .vd-timeline-item.is-revealed .vd-timeline-marker {
+  transform: scale(1);
+}
+
+/* Alternating + animated: entrance from each side (desktop only; narrow uses base vertical slide) */
+@media (min-width: 769px) {
+  .vd-timeline-alternating.vd-timeline-animated .vd-timeline-item:nth-child(odd):not(.is-revealed) {
+    transform: translate(-12px, 12px);
+  }
+
+  .vd-timeline-alternating.vd-timeline-animated .vd-timeline-item:nth-child(even):not(.is-revealed) {
+    transform: translate(12px, 12px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vd-timeline-animated .vd-timeline-item,
+  .vd-timeline-animated .vd-timeline-item .vd-timeline-marker {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+}

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);
   }