npm - @vanduo-oss/framework - Versions diffs - 1.5.0 → 1.6.0 - Mend

@vanduo-oss/framework 1.5.0 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/CHANGELOG.md +27 -0
package/README.md +33 -6
package/css/components/expanding-cards.css +94 -25
package/css/components/navbar.css +11 -0
package/css/components/popover.css +97 -0
package/css/components/theme-customizer.css +53 -0
package/css/core/colors-fib-base.css +524 -0
package/css/core/colors-palette.css +786 -0
package/css/core/colors.css +54 -46
package/css/core/tokens.css +19 -19
package/css/vanduo.css +8 -1
package/dist/build-info.json +3 -3
package/dist/vanduo-core.css +1588 -86
package/dist/vanduo-core.css.map +1 -1
package/dist/vanduo-core.min.css +2 -2
package/dist/vanduo-core.min.css.map +1 -1
package/dist/vanduo.cjs.js +394 -9
package/dist/vanduo.cjs.js.map +3 -3
package/dist/vanduo.cjs.min.js +16 -10
package/dist/vanduo.cjs.min.js.map +4 -4
package/dist/vanduo.css +1588 -86
package/dist/vanduo.css.map +1 -1
package/dist/vanduo.esm.js +394 -9
package/dist/vanduo.esm.js.map +3 -3
package/dist/vanduo.esm.min.js +16 -10
package/dist/vanduo.esm.min.js.map +4 -4
package/dist/vanduo.js +394 -9
package/dist/vanduo.js.map +3 -3
package/dist/vanduo.min.css +2 -2
package/dist/vanduo.min.css.map +1 -1
package/dist/vanduo.min.js +16 -10
package/dist/vanduo.min.js.map +4 -4
package/js/components/doc-search.js +9 -4
package/js/components/expanding-cards.js +15 -3
package/js/components/popover.js +295 -0
package/js/components/search.js +108 -0
package/js/components/theme-customizer.js +54 -1
package/js/index.js +2 -0
package/js/utils/helpers.js +12 -4
package/package.json +7 -4

package/CHANGELOG.md CHANGED Viewed

@@ -8,6 +8,33 @@ 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.6.0] - 2026-06-27
+Additive release. Adds the Popover and Search primitives and an optional
+Fibonacci palette; **Open Color remains the default look.** One HTML-sanitization
+behavior change to note (see Security).
+### Added
+- **Popover component** (`window.VanduoPopover`) — a general popover primitive separate from `.vd-bubble`: click / hover / focus triggers (combinable via `data-vd-popover-trigger`), external-panel composition through `data-vd-popover-target`, `.vd-popover-sm` / `.vd-popover-lg` size variants, and auto-placement flip on viewport overflow (`data-vd-popover-flip`). New `css/components/popover.css` + `js/components/popover.js`, wired into `css/vanduo.css` and `js/index.js`. Playwright spec at `tests/components/popover.spec.ts`.
+- **Search helper** (`window.VanduoSearch`) — a registry so consumers can register their own data sources: `register(source)` / `unregister(name)` / `list()` / `query(text, options?)`. Sources return `Promise<Result[]>`; results merge across sources with an optional per-source limit. New `js/components/search.js`; spec at `tests/components/search.spec.ts`.
+- **Optional Fibonacci palette** — a golden-angle generated palette (`--vd-fib-*` + `--vd-golden-1..8` accent track), opt in at runtime via `data-palette="fibonacci"` on `<html>`. Open Color (`--vd-oc-*`) is the default and `data-primary` / `data-neutral` remaps work under either palette.
+### Changed
+- Dependencies updated to latest; pnpm config migrated to `pnpm-workspace.yaml`.
+### Security
+- **Behavior change — `sanitizeHtml` denies inline `style` by default.** Rich HTML passed to Bubble / Popover now has `style` attributes stripped unless explicitly allowed, closing an attribute-injection vector. Move inline styles to classes.
+- `escapeHtml` is now quote-safe for attribute contexts.
+## [1.5.1] - 2026-06-20
+### Enhanced
+- **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.
+### Fixed
+- **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 — mobile polish** — Resolved mobile layout overflow clipping and keyboard focus edge cases.
 ## [1.5.0] - 2026-06-18
 ### Added

package/README.md CHANGED Viewed

@@ -1,4 +1,4 @@
-# Vanduo Framework v1.5.0
+# Vanduo Framework v1.6.0
 <p align="center">
   <img src="vanduo-banner.svg" alt="Vanduo Framework Banner" width="100%">
@@ -17,7 +17,7 @@ Vanduo is a zero-dependency UI framework built with HTML, CSS, and vanilla JavaS
 ## Highlights
 - Zero runtime dependencies
-- 47+ components across layout, navigation, overlays, search, and effects
+- 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
@@ -25,7 +25,24 @@ Vanduo is a zero-dependency UI framework built with HTML, CSS, and vanilla JavaS
 - 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.5.0
+## 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.
@@ -52,8 +69,8 @@ Vanduo is a zero-dependency UI framework built with HTML, CSS, and vanilla JavaS
 ### CDN
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.5.0/dist/vanduo.min.css">
-<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.5.0/dist/vanduo.min.js"></script>
+<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>
@@ -104,7 +121,10 @@ Vanduo.getComponent('docSearch');
 Vanduo `1.4.1` treats `--vd-*` as the only shipped custom-property namespace:
-- Palette: `--vd-red-*`, `--vd-primary-*`, `--vd-gray-*`, and related scales
+- 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-*`
@@ -168,6 +188,13 @@ CI runs **Chromium Desktop smoke tests on pull requests** and the **full cross-b
 - QA strategy: [QA-Automation-Strategy.md](QA-Automation-Strategy.md)
 - Contributor workflow: [CONTRIBUTING.md](CONTRIBUTING.md)
+## Ecosystem
+- [`@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.
 ## License
 MIT - see [LICENSE](LICENSE).

package/css/components/expanding-cards.css CHANGED Viewed

@@ -33,7 +33,8 @@
   border-radius: 30px;
   cursor: pointer;
   background: var(--vd-expanding-card-bg, var(--vd-expanding-card-bg-default, #e6e9ed));
-  background-size: auto 120%;
+  background-repeat: no-repeat;
+  background-size: cover;
   background-position: center;
   transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
 }
@@ -68,7 +69,6 @@
   max-width: 600px;
   margin: 0;
   border-radius: 40px;
-  background-size: auto 100%;
 }
 .vd-expanding-card.is-active .vd-expanding-card-shadow {
@@ -164,44 +164,113 @@
   transition-delay: 0.1s;
 }
-/* Progressive hide: narrow viewports hide rightmost cards (matches original) */
-@media screen and (max-width: 718px) {
+/* Mobile: vertical stack, expand in place (mirrors desktop flex-grow model) */
+@media screen and (max-width: 767.98px) {
   .vd-expanding-cards {
-    min-width: 520px;
+    --vd-expanding-card-mobile-stripe: 56px;
+    --vd-expanding-card-mobile-active: clamp(200px, 55vw, 280px);
+    --vd-expanding-card-mobile-gap: 8px;
+    flex-direction: column;
+    align-items: stretch;
+    overflow: hidden;
+    min-width: 0;
+    max-width: 100%;
+    width: 100%;
+    height: min(
+      72vh,
+      calc(
+        var(--vd-expanding-card-mobile-active) +
+          5 * (var(--vd-expanding-card-mobile-stripe) + var(--vd-expanding-card-mobile-gap))
+      )
+    );
+    gap: var(--vd-expanding-card-mobile-gap);
   }
-  .vd-expanding-card:nth-child(5) {
-    display: none;
+  .vd-expanding-card {
+    min-width: 0;
+    width: 100%;
+    margin: 0;
+    flex: 1 1 var(--vd-expanding-card-mobile-stripe);
+    min-height: var(--vd-expanding-card-mobile-stripe);
+    transition:
+      flex 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95),
+      min-height 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95),
+      border-radius 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95),
+      margin 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
   }
-}
-@media screen and (max-width: 638px) {
-  .vd-expanding-cards {
-    min-width: 440px;
+  .vd-expanding-card.is-active {
+    flex: 10000 1 var(--vd-expanding-card-mobile-active);
+    min-height: var(--vd-expanding-card-mobile-active);
+    max-width: none;
+    border-radius: 32px;
   }
-  .vd-expanding-card:nth-child(4) {
-    display: none;
+  .vd-expanding-card:not(.is-active) {
+    flex: 1 1 var(--vd-expanding-card-mobile-stripe);
+    min-height: var(--vd-expanding-card-mobile-stripe);
+    border-radius: 28px;
   }
-}
-@media screen and (max-width: 558px) {
-  .vd-expanding-cards {
-    min-width: 360px;
+  .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:nth-child(3) {
-    display: none;
+  .vd-expanding-card:not(.is-active) .vd-expanding-card-shadow {
+    bottom: 0;
+    height: 100%;
+    box-shadow: inset 0 0 80px 0 rgb(0 0 0 / 35%);
   }
-}
-@media screen and (max-width: 478px) {
-  .vd-expanding-cards {
-    min-width: 280px;
+  .vd-expanding-card.is-active .vd-expanding-card-label {
+    bottom: 20px;
+    left: 20px;
+    top: auto;
+    transform: none;
+    align-items: flex-end;
+  }
+  .vd-expanding-card:not(.is-active) .vd-expanding-card-label {
+    bottom: 8px;
+    left: 12px;
+    top: auto;
+    right: auto;
+    height: 40px;
+    transform: none;
+    align-items: center;
+  }
+  .vd-expanding-card:not(.is-active) .vd-expanding-card-info {
+    min-width: 0;
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .vd-expanding-card:not(.is-active) .vd-expanding-card-info > div {
+    left: 0;
+    opacity: 1;
+  }
+  .vd-expanding-card:not(.is-active) .vd-expanding-card-subtitle {
+    opacity: 0;
+    max-height: 0;
+    overflow: hidden;
+  }
+  .vd-expanding-card.is-active .vd-expanding-card-subtitle {
+    opacity: 1;
+    max-height: 2em;
   }
-  .vd-expanding-card:nth-child(2) {
-    display: none;
+  .vd-expanding-card:not(.is-active) .vd-expanding-card-title {
+    font-size: 1rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }

package/css/components/navbar.css CHANGED Viewed

@@ -82,6 +82,17 @@
   -webkit-backdrop-filter: none;
 }
+/* Strong frosted surface once scroll activates glass (beyond vd-glass-xl) */
+.vd-navbar-glass.vd-navbar-scrolled {
+  --vd-glass-blur: 80px;
+  --vd-glass-saturate: 2.6;
+}
+.vd-navbar-fixed.vd-navbar-glass.vd-navbar-scrolled,
+.vd-navbar-fixed-top.vd-navbar-glass.vd-navbar-scrolled {
+  box-shadow: var(--vd-glass-shadow);
+}
 /* Navbar Container - matches .vd-container-responsive breakpoints for alignment with page content */
 .vd-navbar-container {
   display: flex;

package/css/components/popover.css ADDED Viewed

@@ -0,0 +1,97 @@
+/**
+ * Vanduo Framework - Popover Component
+ * Multi-trigger (click | hover | focus) popover with auto-placement flip.
+ * Sibling to .vd-bubble (which is click-only rich HTML); this is the general
+ * primitive documented in docs/sections/components/popover.html.
+ */
+:root {
+  --vd-popover-bg: var(--vd-card-bg, #fff);
+  --vd-popover-text: var(--vd-text-primary, #212529);
+  --vd-popover-border-color: var(--vd-border-color, #dee2e6);
+  --vd-popover-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.12);
+  --vd-popover-padding: 0.8125rem;
+  --vd-popover-radius: var(--vd-border-radius, 0.5rem);
+  --vd-popover-max-width: 21rem;
+  --vd-popover-min-width: 8rem;
+  --vd-popover-z-index: 1060;
+  --vd-popover-arrow-size: 8px;
+  --vd-popover-font-size: var(--vd-font-size-sm, 0.875rem);
+}
+[data-theme="dark"] {
+  --vd-popover-bg: var(--vd-card-bg, #2d2d44);
+  --vd-popover-border-color: var(--vd-border-color, #3d3d5c);
+  --vd-popover-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.3);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --vd-popover-bg: var(--vd-card-bg, #2d2d44);
+    --vd-popover-border-color: var(--vd-border-color, #3d3d5c);
+    --vd-popover-shadow: 0 0.5rem 1.3125rem rgba(0, 0, 0, 0.3);
+  }
+}
+.vd-popover-panel {
+  position: absolute;
+  z-index: var(--vd-popover-z-index);
+  min-width: var(--vd-popover-min-width);
+  max-width: var(--vd-popover-max-width);
+  padding: var(--vd-popover-padding);
+  background: var(--vd-popover-bg);
+  color: var(--vd-popover-text);
+  border: 1px solid var(--vd-popover-border-color);
+  border-radius: var(--vd-popover-radius);
+  box-shadow: var(--vd-popover-shadow);
+  font-size: var(--vd-popover-font-size);
+  animation: vd-popover-enter 0.18s ease-out;
+}
+.vd-popover-panel[hidden] {
+  display: none !important;
+}
+.vd-popover-panel::before {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: var(--vd-popover-arrow-size) solid transparent;
+}
+.vd-popover-panel[data-placement="bottom"]::before {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom-color: var(--vd-popover-border-color);
+}
+.vd-popover-panel[data-placement="top"]::before {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: var(--vd-popover-border-color);
+}
+.vd-popover-panel[data-placement="left"]::before {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-left-color: var(--vd-popover-border-color);
+}
+.vd-popover-panel[data-placement="right"]::before {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-right-color: var(--vd-popover-border-color);
+}
+.vd-popover-sm { --vd-popover-padding: 0.5rem; --vd-popover-font-size: var(--vd-font-size-xs, 0.75rem); }
+.vd-popover-lg { --vd-popover-padding: 1.3125rem; --vd-popover-max-width: 34rem; }
+@keyframes vd-popover-enter {
+  from { opacity: 0; transform: scale(0.96); }
+  to   { opacity: 1; transform: scale(1); }
+}

package/css/components/theme-customizer.css CHANGED Viewed

@@ -223,6 +223,57 @@ body > .vd-theme-customizer-panel.is-open {
   z-index: 1;
 }
+/* Palette toggle (Fibonacci default / Open Color optional) */
+.tc-palette-group {
+  display: flex;
+  gap: 0;
+}
+.tc-palette-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 0.5rem;
+  background: transparent;
+  border: 1px solid var(--vd-border-color);
+  color: var(--vd-text-primary);
+  font-size: var(--vd-font-size-xs);
+  font-weight: var(--vd-font-weight-medium);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.tc-palette-btn:first-child {
+  border-radius: calc(var(--vd-radius-scale, 0.25) * 0.5rem) 0 0 calc(var(--vd-radius-scale, 0.25) * 0.5rem);
+}
+.tc-palette-btn:last-child {
+  border-radius: 0 calc(var(--vd-radius-scale, 0.25) * 0.5rem) calc(var(--vd-radius-scale, 0.25) * 0.5rem) 0;
+}
+.tc-palette-btn:not(:first-child) {
+  margin-left: -1px;
+}
+.tc-palette-btn:hover {
+  background-color: var(--vd-bg-secondary);
+  z-index: 1;
+}
+.tc-palette-btn:focus-visible {
+  outline: 2px solid var(--vd-color-primary);
+  outline-offset: 1px;
+  z-index: 2;
+}
+.tc-palette-btn.is-active {
+  background-color: var(--vd-bg-dark);
+  border-color: var(--vd-bg-dark);
+  color: var(--vd-text-inverse);
+  z-index: 1;
+}
 /* Font Select */
 .tc-font-select {
   width: 100%;
@@ -647,6 +698,7 @@ body > .vd-theme-customizer-panel.is-open {
 [data-theme="dark"] .customizer-radius-btn.is-active,
 [data-theme="dark"] .customizer-mode-btn.is-active,
 [data-theme="dark"] .tc-radius-btn.is-active,
+[data-theme="dark"] .tc-palette-btn.is-active,
 [data-theme="dark"] .tc-mode-btn.is-active {
   background-color: var(--vd-gray-2);
   border-color: var(--vd-gray-2);
@@ -667,6 +719,7 @@ body > .vd-theme-customizer-panel.is-open {
   :root:not([data-theme]) .customizer-radius-btn.is-active,
   :root:not([data-theme]) .customizer-mode-btn.is-active,
   :root:not([data-theme]) .tc-radius-btn.is-active,
+  :root:not([data-theme]) .tc-palette-btn.is-active,
   :root:not([data-theme]) .tc-mode-btn.is-active {
     background-color: var(--vd-gray-2);
     border-color: var(--vd-gray-2);