@vanduo-oss/framework 1.5.0 → 1.5.1

package/CHANGELOG.md

@@ -8,6 +8,17 @@ 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.5.1] - 2026-06-20
+
+### Changed
+- Opened `dev-v151` development branch for the v1.5.1 patch cycle.
+
+### 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.
+
 ## [1.5.0] - 2026-06-18
 
 ### Added

package/README.md

@@ -1,4 +1,4 @@
-# Vanduo Framework v1.5.0
+# Vanduo Framework v1.5.1
 
 <p align="center">
   <img src="vanduo-banner.svg" alt="Vanduo Framework Banner" width="100%">
@@ -25,7 +25,11 @@ 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.5.1
+
+- Development branch opened for the v1.5.1 patch cycle (`dev-v151`).
+
+## 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 +56,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.5.1/dist/vanduo.min.css">
+<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.5.1/dist/vanduo.min.js"></script>
 <script>
   Vanduo.init();
 </script>

package/css/components/expanding-cards.css

@@ -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/dist/build-info.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.5.0",
-  "builtAt": "2026-06-18T19:13:58.613Z",
-  "commit": "8f0e1b5",
+  "version": "1.5.1",
+  "builtAt": "2026-06-20T15:00:18.257Z",
+  "commit": "baf8178",
   "mode": "development+production"
 }

package/dist/vanduo-core.css

@@ -1,4 +1,4 @@
-/*! Vanduo v1.5.0 | Built: 2026-06-18T19:13:58.613Z | git:8f0e1b5 | development */
+/*! Vanduo v1.5.1 | Built: 2026-06-20T15:00:18.257Z | git:baf8178 | development */
 *, :before, :after {
   box-sizing: border-box;
 }
@@ -9874,7 +9874,8 @@ a.vd-card:active {
   cursor: pointer;
   background: var(--vd-expanding-card-bg, var(--vd-expanding-card-bg-default, #e6e9ed));
   background-position: center;
-  background-size: auto 120%;
+  background-repeat: no-repeat;
+  background-size: cover;
   border-radius: 30px;
   flex-grow: 1;
   min-width: 60px;
@@ -9909,7 +9910,6 @@ a.vd-card:active {
 }
 
 .vd-expanding-card.is-active {
-  background-size: auto 100%;
   border-radius: 40px;
   flex-grow: 10000;
   max-width: 600px;
@@ -10004,43 +10004,98 @@ a.vd-card:active {
   transition-delay: .1s;
 }
 
-@media screen and (width <= 718px) {
+@media screen and (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;
+    width: 100%;
+    min-width: 0;
+    max-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))));
+    align-items: stretch;
+    gap: var(--vd-expanding-card-mobile-gap);
+    flex-direction: column;
+    overflow: hidden;
   }
 
-  .vd-expanding-card:nth-child(5) {
-    display: none;
+  .vd-expanding-card {
+    flex: 1 1 var(--vd-expanding-card-mobile-stripe);
+    width: 100%;
+    min-width: 0;
+    min-height: var(--vd-expanding-card-mobile-stripe);
+    margin: 0;
+    transition: flex .5s cubic-bezier(.05, .61, .41, .95), min-height .5s cubic-bezier(.05, .61, .41, .95), border-radius .5s cubic-bezier(.05, .61, .41, .95), margin .5s cubic-bezier(.05, .61, .41, .95);
   }
-}
 
-@media screen and (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);
+    border-radius: 32px;
+    max-width: none;
   }
 
-  .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 (width <= 558px) {
-  .vd-expanding-cards {
-    min-width: 360px;
+  .vd-expanding-card.is-active .vd-expanding-card-shadow {
+    box-shadow: inset 0 -120px 120px -120px #000, inset 0 -120px 120px -100px #000;
   }
 
-  .vd-expanding-card:nth-child(3) {
-    display: none;
+  .vd-expanding-card:not(.is-active) .vd-expanding-card-shadow {
+    height: 100%;
+    bottom: 0;
+    box-shadow: inset 0 0 80px #00000059;
   }
-}
 
-@media screen and (width <= 478px) {
-  .vd-expanding-cards {
-    min-width: 280px;
+  .vd-expanding-card.is-active .vd-expanding-card-label {
+    align-items: flex-end;
+    top: auto;
+    bottom: 20px;
+    left: 20px;
+    transform: none;
   }
 
-  .vd-expanding-card:nth-child(2) {
-    display: none;
+  .vd-expanding-card:not(.is-active) .vd-expanding-card-label {
+    align-items: center;
+    height: 40px;
+    inset: auto auto 8px 12px;
+    transform: none;
+  }
+
+  .vd-expanding-card:not(.is-active) .vd-expanding-card-info {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .vd-expanding-card:not(.is-active) .vd-expanding-card-info > div {
+    opacity: 1;
+    left: 0;
+  }
+
+  .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:not(.is-active) .vd-expanding-card-title {
+    text-overflow: ellipsis;
+    font-size: 1rem;
+    overflow: hidden;
   }
 }