@vanduo-oss/framework 1.3.8 → 1.3.9

package/README.md

@@ -1,4 +1,4 @@
-# Vanduo Framework v1.3.8
+# Vanduo Framework v1.3.9
 
 <p align="center">
   <img src="vanduo-banner.svg" alt="Vanduo Framework Banner" width="100%">
@@ -20,8 +20,9 @@ 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.8
-- Niche canvas hex-grid support is distributed as `@vanduo-oss/hex-grid`
+- 47+ components, including Expanding Cards and animated Timeline controls in v1.3.9
+- Current Theme Customizer defaults in this worktree are `charcoal` for neutral color and `ubuntu` for font family
+- Niche canvas hex-grid support is distributed as [`@vanduo-oss/hex-grid`](https://www.npmjs.com/package/@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
@@ -31,8 +32,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.8/dist/vanduo.min.css">
-<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.3.8/dist/vanduo.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.3.9/dist/vanduo.min.css">
+<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.3.9/dist/vanduo.min.js"></script>
 <script>Vanduo.init();</script>
 ```
 

package/css/components/collapsible.css

@@ -75,6 +75,8 @@
   user-select: none;
   transition: var(--transition-bg);
   border: none;
+  -webkit-appearance: none;
+  appearance: none;
   width: 100%;
   text-align: left;
   font-family: var(--font-family-sans);
@@ -88,7 +90,9 @@
   background-color: var(--collapsible-header-bg-hover);
 }
 
+.vd-collapsible-header:focus,
 .vd-collapsible-header:focus-visible,
+.accordion-header:focus,
 .accordion-header:focus-visible {
   outline: none;
 }
@@ -122,11 +126,15 @@
   text-decoration: none;
   background: none;
   border: none;
+  -webkit-appearance: none;
+  appearance: none;
   padding: 0;
   cursor: pointer;
 }
 
+.vd-collapsible-trigger:focus,
 .vd-collapsible-trigger:focus-visible,
+.accordion-trigger:focus,
 .accordion-trigger:focus-visible {
   outline: none;
 }

package/css/core/colors.css

@@ -312,6 +312,18 @@
   --slate-8: #1e293b;
   --slate-9: #0f172a;
 
+  /* --- Charcoal Scale (Deep cool charcoal) --- */
+  --charcoal-0: #f5f7f8;
+  --charcoal-1: #e7ebee;
+  --charcoal-2: #ced6dc;
+  --charcoal-3: #adb8c1;
+  --charcoal-4: #8b98a3;
+  --charcoal-5: #6d7c88;
+  --charcoal-6: #53616d;
+  --charcoal-7: #394754;
+  --charcoal-8: #202c38;
+  --charcoal-9: #0d1117;
+
   /* --- Zinc Scale (Slightly warm gray) --- */
   --zinc-0: #fafafa;
   --zinc-1: #f4f4f5;
@@ -946,7 +958,21 @@
  * These rules remap --gray-* variables based on [data-neutral] attribute
  * ═════════════════════════════════════════════════════════════════════════ */
 
-/* Gray Neutral (default - no override needed) */
+/* Charcoal Neutral (default) */
+[data-neutral="charcoal"] {
+  --gray-0: var(--charcoal-0);
+  --gray-1: var(--charcoal-1);
+  --gray-2: var(--charcoal-2);
+  --gray-3: var(--charcoal-3);
+  --gray-4: var(--charcoal-4);
+  --gray-5: var(--charcoal-5);
+  --gray-6: var(--charcoal-6);
+  --gray-7: var(--charcoal-7);
+  --gray-8: var(--charcoal-8);
+  --gray-9: var(--charcoal-9);
+}
+
+/* Gray Neutral */
 [data-neutral="gray"] {
   --gray-0: #f8f9fa;
   --gray-1: #f1f3f5;

package/css/core/tokens.css

@@ -84,7 +84,7 @@
   /* ============================================
    * TYPOGRAPHY TOKENS
    * ============================================ */
-  --vd-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --vd-font-family-base: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   --vd-font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
 
   /* Font Sizes (Fibonacci scale) */

package/css/core/typography.css

@@ -5,7 +5,7 @@
 
 :root {
   /* Font Families */
-  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-family-sans: 'Ubuntu', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --font-family-serif: Georgia, "Times New Roman", Times, serif;
   --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
 }

package/dist/build-info.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.3.8",
-  "builtAt": "2026-05-06T18:32:43.703Z",
-  "commit": "6042eac",
+  "version": "1.3.9",
+  "builtAt": "2026-05-10T18:54:59.798Z",
+  "commit": "2945a85",
   "mode": "development+production"
 }

package/dist/vanduo.cjs.js

@@ -1,4 +1,4 @@
-/*! Vanduo v1.3.8 | Built: 2026-05-06T18:32:43.703Z | git:6042eac | development */
+/*! Vanduo v1.3.9 | Built: 2026-05-10T18:54:59.798Z | git:2945a85 | development */
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -132,7 +132,7 @@ module.exports = __toCommonJS(index_exports);
 // js/vanduo.js
 (function() {
   "use strict";
-  const VANDUO_VERSION = true ? "1.3.8" : "0.0.0-dev";
+  const VANDUO_VERSION = true ? "1.3.9" : "0.0.0-dev";
   const Vanduo2 = {
     version: VANDUO_VERSION,
     components: {},
@@ -1217,7 +1217,7 @@ module.exports = __toCommonJS(index_exports);
         preference: this.getPreference()
       };
       if (!this.fonts[this.state.preference]) {
-        this.state.preference = "lato";
+        this.state.preference = "ubuntu";
         this.setStorageValue(this.STORAGE_KEY, this.state.preference);
       }
       if (this.isInitialized) {
@@ -1233,10 +1233,10 @@ module.exports = __toCommonJS(index_exports);
     },
     /**
      * Get saved font preference from localStorage
-     * @returns {string} Font key or 'lato' (default)
+     * @returns {string} Font key or 'ubuntu' (default)
      */
     getPreference: function() {
-      return this.getStorageValue(this.STORAGE_KEY, "lato");
+      return this.getStorageValue(this.STORAGE_KEY, "ubuntu");
     },
     /**
      * Set font preference and apply it
@@ -3904,9 +3904,9 @@ module.exports = __toCommonJS(index_exports);
     DEFAULTS: {
       PRIMARY_LIGHT: "black",
       PRIMARY_DARK: "amber",
-      NEUTRAL: "neutral",
+      NEUTRAL: "charcoal",
       RADIUS: "0.5",
-      FONT: "lato",
+      FONT: "ubuntu",
       THEME: "system"
     },
     // Primary color definitions (Open Color based)
@@ -3932,6 +3932,7 @@ module.exports = __toCommonJS(index_exports);
     },
     // Neutral color definitions
     NEUTRAL_COLORS: {
+      "charcoal": { name: "Charcoal", color: "#0d1117" },
       "slate": { name: "Slate", color: "#64748b" },
       "gray": { name: "Gray", color: "#6b7280" },
       "zinc": { name: "Zinc", color: "#71717a" },