fix(tabs): resolve data-tab-target panes and stabilize vertical indicator

README.md

@@ -1,4 +1,4 @@
-# Vanduo Framework v1.3.7
+# Vanduo Framework v1.3.8
 
 <p align="center">
   <img src="vanduo-banner.svg" alt="Vanduo Framework Banner" width="100%">
@@ -20,7 +20,8 @@ Vanduo is a lightweight, zero-dependency UI framework built with pure HTML, CSS,
 
 - 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
+- 47+ components, including Expanding Cards and animated Timeline controls in v1.3.8
+- Niche canvas hex-grid support is distributed as `@vanduo-oss/hex-grid`
 - Built-in dark/light/system theme switching
 - Runtime Theme Customizer for color, font, and radius tokens
 - Accessibility-focused components and utilities
@@ -30,8 +31,8 @@ Vanduo is a lightweight, zero-dependency UI framework built with pure HTML, CSS,
 ### CDN (recommended)
 
 ```html
-<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>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.3.8/dist/vanduo.min.css">
+<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.3.8/dist/vanduo.min.js"></script>
 <script>Vanduo.init();</script>
 ```
 

css/components/avatar.css

@@ -7,11 +7,11 @@
   /* Avatar Sizes (Fibonacci) */
   --avatar-size-xs: 1.3125rem;  /* 21px - fib */
   --avatar-size-sm: 2.125rem;   /* 34px - fib */
-  --avatar-size-md: 2.125rem;   /* 34px - fib */
-  --avatar-size: 3.4375rem;     /* 55px - fib */
-  --avatar-size-lg: 3.4375rem;  /* 55px - fib */
-  --avatar-size-xl: 5.5625rem;  /* 89px - fib */
-  --avatar-size-2xl: 9rem;      /* 144px - fib */
+  --avatar-size-md: 3.4375rem;  /* 55px - fib */
+  --avatar-size: 3.4375rem;     /* 55px - fib (default / md) */
+  --avatar-size-lg: 5.5625rem;  /* 89px - fib */
+  --avatar-size-xl: 9rem;       /* 144px - fib */
+  --avatar-size-2xl: 14.5625rem;/* 233px - fib */
 
   /* Avatar Colors */
   --avatar-bg: var(--color-gray-300);
@@ -131,21 +131,33 @@
   background-color: var(--avatar-status-offline);
 }
 
-.vd-avatar-status-online {
-  background-color: var(--avatar-status-online);
+.vd-avatar.vd-avatar-status-online,
+.vd-avatar.vd-avatar-status-offline,
+.vd-avatar.vd-avatar-status-busy,
+.vd-avatar.vd-avatar-status-away {
+  overflow: visible;
 }
 
-.vd-avatar-status-offline {
-  background-color: var(--avatar-status-offline);
-}
-
-.vd-avatar-status-busy {
-  background-color: var(--avatar-status-busy);
+.vd-avatar.vd-avatar-status-online::after,
+.vd-avatar.vd-avatar-status-offline::after,
+.vd-avatar.vd-avatar-status-busy::after,
+.vd-avatar.vd-avatar-status-away::after {
+  content: '';
+  position: absolute;
+  bottom: 2%;
+  right: 2%;
+  width: 25%;
+  height: 25%;
+  min-width: 0.5rem;
+  min-height: 0.5rem;
+  border-radius: 50%;
+  border: 2px solid var(--avatar-border);
 }
 
-.vd-avatar-status-away {
-  background-color: var(--avatar-status-away);
-}
+.vd-avatar.vd-avatar-status-online::after  { background-color: var(--avatar-status-online); }
+.vd-avatar.vd-avatar-status-offline::after { background-color: var(--avatar-status-offline); }
+.vd-avatar.vd-avatar-status-busy::after    { background-color: var(--avatar-status-busy); }
+.vd-avatar.vd-avatar-status-away::after    { background-color: var(--avatar-status-away); }
 
 /* Avatar with Ring/Border */
 .vd-avatar-ring {

css/components/badges.css

@@ -5,17 +5,17 @@
 
 :root {
   /* Badge Padding (x/y ratio ~ phi) */
-  --badge-padding-y: 0.25em;
-  --badge-padding-x: 0.4em;      /* 0.4/0.25 = 1.6 ~ phi */
-  --badge-padding-y-sm: 0.15em;
-  --badge-padding-x-sm: 0.25em;  /* 0.25/0.15 = 1.67 ~ phi */
-  --badge-padding-y-lg: 0.35em;
-  --badge-padding-x-lg: 0.55em;  /* 0.55/0.35 = 1.57 ~ phi */
+  --badge-padding-y: 0.3em;
+  --badge-padding-x: 0.48em;     /* 0.48/0.3 = 1.6 ~ phi */
+  --badge-padding-y-sm: 0.18em;
+  --badge-padding-x-sm: 0.3em;   /* 0.3/0.18 = 1.67 ~ phi */
+  --badge-padding-y-lg: 0.42em;
+  --badge-padding-x-lg: 0.65em;    /* 0.65/0.42 = 1.55 ~ phi */
 
   /* Badge Font */
-  --badge-font-size: 0.75em;
-  --badge-font-size-sm: 0.65em;
-  --badge-font-size-lg: 0.875em;
+  --badge-font-size: 0.8125em;
+  --badge-font-size-sm: 0.7em;
+  --badge-font-size-lg: 0.9375em;
   --badge-font-weight: var(--font-weight-semibold);
   --badge-line-height: 1;
 

css/components/cards.css

@@ -78,13 +78,16 @@
 .vd-card-elevated,
 .vd-card {
   box-shadow: var(--card-shadow-elevated);
-  transition: box-shadow 0.2s ease, transform 0.2s ease;
+  transition: box-shadow 0.2s ease;
+  /* Fix Safari disappearing bug during transform transitions */
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  transform: translateZ(0);
 }
 
 /* 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 */
@@ -290,7 +293,7 @@ a.vd-card {
 
 a.vd-card:hover {
   text-decoration: none;
-  transform: translateY(-2px);
+  transform: translateY(-2px) translateZ(0);
   box-shadow: var(--shadow-xl);
 }
 
@@ -300,7 +303,7 @@ a.vd-card.vd-card-glow:hover {
 }
 
 a.vd-card:active {
-  transform: translateY(0);
+  transform: translateY(0) translateZ(0);
 }
 
 /* Card Groups (for multiple cards) */

css/components/collapsible.css

@@ -10,6 +10,7 @@
   --collapsible-header-bg: var(--bg-secondary);
   --collapsible-header-bg-hover: var(--bg-secondary);
   --collapsible-header-bg-active: var(--bg-secondary);
+  --collapsible-focus-ring: 0 0 0 2px var(--input-focus-border-color);
 
   /* Collapsible Spacing (Fibonacci) */
   --collapsible-padding-y: 0.8125rem;    /* 13px - fib */
@@ -54,6 +55,7 @@
   margin-bottom: 0.5rem;
   overflow: hidden;
   background-color: var(--collapsible-bg);
+  position: relative;
 }
 
 .vd-collapsible-item:last-child,
@@ -86,10 +88,18 @@
   background-color: var(--collapsible-header-bg-hover);
 }
 
-.vd-collapsible-header:focus,
-.accordion-header:focus {
-  outline: 2px solid var(--input-focus-border-color);
-  outline-offset: -2px;
+.vd-collapsible-header:focus-visible,
+.accordion-header:focus-visible {
+  outline: none;
+}
+
+/* Focus ring on the parent item so it follows the outer rounded border */
+.vd-collapsible-item:has(.vd-collapsible-header:focus-visible),
+.vd-collapsible-item:has(.vd-collapsible-trigger:focus-visible),
+.accordion-item:has(.accordion-header:focus-visible),
+.accordion-item:has(.accordion-trigger:focus-visible) {
+  box-shadow: var(--collapsible-focus-ring);
+  z-index: 1;
 }
 
 .vd-collapsible-item.is-open .vd-collapsible-header,
@@ -116,8 +126,8 @@
   cursor: pointer;
 }
 
-.vd-collapsible-trigger:focus,
-.accordion-trigger:focus {
+.vd-collapsible-trigger:focus-visible,
+.accordion-trigger:focus-visible {
   outline: none;
 }
 
@@ -210,13 +220,47 @@
   border: none;
   border-radius: 0;
   border-bottom: 1px solid var(--collapsible-border-color);
+  margin-bottom: 0;
+  background-color: transparent;
+  overflow: visible;
 }
 
 .vd-collapsible-flush .vd-collapsible-item:last-child,
 .accordion-flush .accordion-item:last-child {
   border-bottom: none;
 }
 
+.vd-collapsible-flush .vd-collapsible-header,
+.vd-collapsible-flush .vd-collapsible-trigger,
+.accordion-flush .accordion-header,
+.accordion-flush .accordion-trigger {
+  background-color: transparent;
+}
+
+.vd-collapsible-flush .vd-collapsible-header:hover,
+.vd-collapsible-flush .vd-collapsible-trigger:hover,
+.accordion-flush .accordion-header:hover,
+.accordion-flush .accordion-trigger:hover {
+  border-radius: var(--btn-border-radius);
+}
+
+.vd-collapsible-flush .vd-collapsible-item:has(.vd-collapsible-header:focus-visible),
+.vd-collapsible-flush .vd-collapsible-item:has(.vd-collapsible-trigger:focus-visible),
+.accordion-flush .accordion-item:has(.accordion-header:focus-visible),
+.accordion-flush .accordion-item:has(.accordion-trigger:focus-visible) {
+  box-shadow: none;
+}
+
+.vd-collapsible-flush .vd-collapsible-header:focus-visible,
+.vd-collapsible-flush .vd-collapsible-trigger:focus-visible,
+.accordion-flush .accordion-header:focus-visible,
+.accordion-flush .accordion-trigger:focus-visible {
+  border-radius: var(--btn-border-radius);
+  box-shadow: var(--collapsible-focus-ring);
+  position: relative;
+  z-index: 1;
+}
+
 /* Collapsible Sizes */
 .vd-collapsible-sm .vd-collapsible-header,
 .accordion-sm .accordion-header {

css/components/dropdown.css

@@ -110,6 +110,44 @@
   transform: translateY(0);
 }
 
+/* Directional wrappers */
+.vd-dropdown-dropup .vd-dropdown-menu {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 0.125rem;
+  transform: translateY(10px);
+}
+
+.vd-dropdown-dropup .vd-dropdown-menu.is-open {
+  transform: translateY(0);
+}
+
+.vd-dropdown-dropright .vd-dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: 0;
+  margin-left: 0.125rem;
+  transform: translateX(-10px);
+}
+
+.vd-dropdown-dropright .vd-dropdown-menu.is-open {
+  transform: translateX(0);
+}
+
+.vd-dropdown-dropleft .vd-dropdown-menu {
+  top: 0;
+  left: auto;
+  right: 100%;
+  margin-top: 0;
+  margin-right: 0.125rem;
+  transform: translateX(10px);
+}
+
+.vd-dropdown-dropleft .vd-dropdown-menu.is-open {
+  transform: translateX(0);
+}
+
 /* Dropdown Menu Positioning - Top */
 .vd-dropdown-menu-top {
   top: auto;