@vanduo-oss/framework 1.4.3 → 1.4.4

package/js/components/code-snippet.js

@@ -69,9 +69,10 @@
       const snippets = this.queryWithin(root, '.vd-code-snippet');
 
       snippets.forEach(snippet => {
-        if (!snippet.dataset.initialized) {
-          this.initSnippet(snippet);
+        if (snippet.dataset.initialized === 'true') {
+          return;
         }
+        this.initSnippet(snippet);
       });
     },
 
@@ -80,7 +81,9 @@
      * @param {HTMLElement} snippet - Code snippet container element
      */
     initSnippet: function (snippet) {
-      snippet.dataset.initialized = 'true';
+      if (snippet.dataset.initialized === 'true') {
+        return;
+      }
       snippet._codeSnippetCleanup = [];
 
       // Handle collapsible toggle
@@ -121,6 +124,8 @@
       lineNumberPanes.forEach(pane => {
         this.addLineNumbers(pane);
       });
+
+      snippet.dataset.initialized = 'true';
     },
 
     /**
@@ -132,14 +137,15 @@
     initCollapsible: function (snippet, toggle, content) {
       // Set initial state
       const isExpanded = snippet.dataset.expanded === 'true';
-      toggle.setAttribute('aria-expanded', isExpanded);
-      content.dataset.visible = isExpanded;
+      toggle.setAttribute('aria-expanded', isExpanded ? 'true' : 'false');
+      content.dataset.visible = isExpanded ? 'true' : 'false';
 
       this.addListener(snippet, toggle, 'click', () => {
         const expanded = snippet.dataset.expanded === 'true';
-        snippet.dataset.expanded = !expanded;
-        toggle.setAttribute('aria-expanded', !expanded);
-        content.dataset.visible = !expanded;
+        const nextExpanded = !expanded;
+        snippet.dataset.expanded = nextExpanded ? 'true' : 'false';
+        toggle.setAttribute('aria-expanded', nextExpanded ? 'true' : 'false');
+        content.dataset.visible = nextExpanded ? 'true' : 'false';
 
         // Extract HTML on first expand if needed
         if (!expanded) {

package/js/components/theme-switcher.js

@@ -6,23 +6,56 @@
 (function () {
   'use strict';
 
+  const THEME_MODES = ['system', 'light', 'dark'];
+
+  const THEME_ICON_CLASSES = {
+    system: 'ph ph-desktop',
+    light: 'ph ph-sun',
+    dark: 'ph ph-moon'
+  };
+
+  const THEME_LABELS = {
+    system: 'Theme: System',
+    light: 'Theme: Light',
+    dark: 'Theme: Dark'
+  };
+
+  const THEME_OPTION_TOOLTIPS = {
+    system: 'Use system preference',
+    light: 'Light theme',
+    dark: 'Dark theme'
+  };
+
   const ThemeSwitcher = {
     isInitialized: false,
     _mediaQuery: null,
     _onMediaChange: null,
+    menuInstances: new Map(),
 
     getToggles: function (root) {
+      const scope = root || document;
+      const toggles = window.Vanduo && typeof window.Vanduo.queryAll === 'function'
+        ? window.Vanduo.queryAll(scope, '[data-toggle="theme"]')
+        : Array.from(scope.querySelectorAll('[data-toggle="theme"]'));
+
+      return toggles.filter(function (toggle) {
+        return !toggle.closest('.vd-theme-switcher[data-theme-ui="menu"]');
+      });
+    },
+
+    getMenuSwitchers: function (root) {
+      const scope = root || document;
       if (window.Vanduo && typeof window.Vanduo.queryAll === 'function') {
-        return window.Vanduo.queryAll(root, '[data-toggle="theme"]');
+        return window.Vanduo.queryAll(scope, '.vd-theme-switcher[data-theme-ui="menu"]');
       }
 
-      return Array.from(document.querySelectorAll('[data-toggle="theme"]'));
+      return Array.from(scope.querySelectorAll('.vd-theme-switcher[data-theme-ui="menu"]'));
     },
 
     init: function (root) {
       this.STORAGE_KEY = 'vanduo-theme-preference';
       this.state = {
-        preference: this.getPreference() // 'light', 'dark', or 'system'
+        preference: this.getPreference()
       };
 
       if (this.isInitialized) {
@@ -44,16 +77,18 @@
     },
 
     setPreference: function (pref) {
+      if (!THEME_MODES.includes(pref)) {
+        return;
+      }
+
       this.state.preference = pref;
       this.setStorageValue(this.STORAGE_KEY, pref);
       this.applyTheme();
-      
-      // Coordinate with ThemeCustomizer for primary color swap if available
-      // Check _isApplying flag to prevent circular updates
+
       if (window.ThemeCustomizer && window.ThemeCustomizer.applyTheme && !window.ThemeCustomizer._isApplying) {
         window.ThemeCustomizer.applyTheme(pref);
       }
-      
+
       this.updateUI();
     },
 
@@ -85,14 +120,6 @@
       const pref = this.state.preference;
 
       if (pref === 'system') {
-        // When in system mode, we remove the data attribute to let the media query take over
-        // or we can explicitly set it. Explicitly setting it ensures consistency if we rely on [data-theme]
-        // But if we rely on @media in CSS, we might want to remove attributes.
-        // However, our CSS strategy uses :root:not([data-theme="light"]) inside media query for system dark fallback
-        // which is a bit complex.
-
-        // Simpler approach: 
-        // If preference is system, REMOVE data-theme attribute. Let CSS media queries handle it.
         document.documentElement.removeAttribute('data-theme');
       } else {
         document.documentElement.setAttribute('data-theme', pref);
@@ -107,9 +134,7 @@
       this._mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
       this._onMediaChange = _e => {
         if (this.state.preference === 'system') {
-          // Re-apply (effectively just to ensure consistency, though removing attribute usually suffices)
           this.applyTheme();
-          // Keep default primary (black/amber) aligned when OS scheme changes while in system mode
           if (window.ThemeCustomizer && typeof window.ThemeCustomizer.applyTheme === 'function' && !window.ThemeCustomizer._isApplying) {
             window.ThemeCustomizer.applyTheme('system');
           }
@@ -118,9 +143,9 @@
       this._mediaQuery.addEventListener('change', this._onMediaChange);
     },
 
-    // Helper to facilitate UI creation if needed, though often UI is in HTML
     renderUI: function (root) {
-      // Look for any uninitialized theme toggles
+      this.renderMenuSwitchers(root);
+
       const toggles = this.getToggles(root);
       toggles.forEach(toggle => {
         if (toggle.getAttribute('data-theme-initialized') === 'true') {
@@ -130,7 +155,6 @@
           return;
         }
 
-        // Simplified UI Binding - assumes a select or a button cycle
         if (toggle.tagName === 'SELECT') {
           toggle.value = this.state.preference;
           const onChange = (e) => {
@@ -139,18 +163,242 @@
           toggle.addEventListener('change', onChange);
           toggle._themeToggleHandler = onChange;
         } else {
-          // Button implementation (cycle)
           const onClick = () => {
-            const modes = ['system', 'light', 'dark'];
+            const modes = THEME_MODES;
             const nextIndex = (modes.indexOf(this.state.preference) + 1) % modes.length;
             this.setPreference(modes[nextIndex]);
           };
           toggle.addEventListener('click', onClick);
           toggle._themeToggleHandler = onClick;
         }
-        // Mark as initialized
+
         toggle.setAttribute('data-theme-initialized', 'true');
       });
+
+      this.updateUI(root);
+    },
+
+    renderMenuSwitchers: function (root) {
+      const switchers = this.getMenuSwitchers(root);
+
+      switchers.forEach(switcher => {
+        if (switcher.getAttribute('data-theme-menu-initialized') === 'true') {
+          return;
+        }
+
+        const toggle = switcher.querySelector('.vd-theme-switcher-toggle');
+        const menu = switcher.querySelector('.vd-theme-switcher-menu');
+
+        if (!toggle || !menu) {
+          return;
+        }
+
+        const options = menu.querySelectorAll('[data-theme-value]');
+        const cleanupFunctions = [];
+
+        toggle.setAttribute('aria-haspopup', 'true');
+        toggle.setAttribute('aria-expanded', 'false');
+        menu.setAttribute('aria-hidden', 'true');
+
+        const toggleClickHandler = (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          this.toggleMenu(switcher, toggle, menu);
+        };
+        toggle.addEventListener('click', toggleClickHandler);
+        cleanupFunctions.push(() => toggle.removeEventListener('click', toggleClickHandler));
+
+        options.forEach(option => {
+          const optionClickHandler = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const value = option.getAttribute('data-theme-value');
+            if (value) {
+              this.setPreference(value);
+            }
+            this.closeMenu(switcher, toggle, menu);
+          };
+          option.addEventListener('click', optionClickHandler);
+          cleanupFunctions.push(() => option.removeEventListener('click', optionClickHandler));
+
+          const optionKeydownHandler = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              optionClickHandler(e);
+            }
+          };
+          option.addEventListener('keydown', optionKeydownHandler);
+          cleanupFunctions.push(() => option.removeEventListener('keydown', optionKeydownHandler));
+        });
+
+        const toggleKeydownHandler = (e) => {
+          if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            if (!menu.classList.contains('is-open')) {
+              this.openMenu(switcher, toggle, menu);
+            }
+          } else if (e.key === 'Escape' && menu.classList.contains('is-open')) {
+            e.preventDefault();
+            this.closeMenu(switcher, toggle, menu);
+          }
+        };
+        toggle.addEventListener('keydown', toggleKeydownHandler);
+        cleanupFunctions.push(() => toggle.removeEventListener('keydown', toggleKeydownHandler));
+
+        const menuKeydownHandler = (e) => {
+          this.handleMenuKeydown(e, switcher, toggle, menu, options);
+        };
+        menu.addEventListener('keydown', menuKeydownHandler);
+        cleanupFunctions.push(() => menu.removeEventListener('keydown', menuKeydownHandler));
+
+        const documentClickHandler = (e) => {
+          if (!switcher.contains(e.target) && menu.classList.contains('is-open')) {
+            this.closeMenu(switcher, toggle, menu);
+          }
+        };
+        document.addEventListener('click', documentClickHandler);
+        cleanupFunctions.push(() => document.removeEventListener('click', documentClickHandler));
+
+        this.menuInstances.set(switcher, { toggle, menu, cleanup: cleanupFunctions });
+        switcher.setAttribute('data-theme-menu-initialized', 'true');
+
+        this.initMenuTooltips(switcher);
+      });
+    },
+
+    initMenuTooltips: function (switcher) {
+      const tooltips = window.Vanduo && typeof window.Vanduo.getComponent === 'function'
+        ? window.Vanduo.getComponent('tooltips')
+        : null;
+
+      if (tooltips && typeof tooltips.init === 'function') {
+        tooltips.init(switcher);
+      }
+    },
+
+    closeOtherMenus: function (exceptMenu) {
+      this.menuInstances.forEach((instance, switcher) => {
+        if (instance.menu !== exceptMenu && instance.menu.classList.contains('is-open')) {
+          this.closeMenu(switcher, instance.toggle, instance.menu);
+        }
+      });
+    },
+
+    toggleMenu: function (switcher, toggle, menu) {
+      if (menu.classList.contains('is-open')) {
+        this.closeMenu(switcher, toggle, menu);
+      } else {
+        this.openMenu(switcher, toggle, menu);
+      }
+    },
+
+    openMenu: function (switcher, toggle, menu) {
+      this.closeOtherMenus(menu);
+      switcher.classList.add('is-open');
+      menu.classList.add('is-open');
+      toggle.setAttribute('aria-expanded', 'true');
+      menu.setAttribute('aria-hidden', 'false');
+
+      const activeOption = menu.querySelector('[data-theme-value].is-active')
+        || menu.querySelector('[data-theme-value]');
+      if (activeOption) {
+        setTimeout(() => activeOption.focus(), 0);
+      }
+    },
+
+    closeMenu: function (switcher, toggle, menu) {
+      switcher.classList.remove('is-open');
+      menu.classList.remove('is-open');
+      toggle.setAttribute('aria-expanded', 'false');
+      menu.setAttribute('aria-hidden', 'true');
+    },
+
+    handleMenuKeydown: function (e, switcher, toggle, menu, options) {
+      const items = Array.from(options);
+      const currentIndex = items.indexOf(document.activeElement);
+
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        this.closeMenu(switcher, toggle, menu);
+        toggle.focus();
+        return;
+      }
+
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+        items[nextIndex].focus();
+        return;
+      }
+
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+        items[prevIndex].focus();
+      }
+    },
+
+    updateMenuSwitcher: function (switcher) {
+      const toggle = switcher.querySelector('.vd-theme-switcher-toggle');
+      const menu = switcher.querySelector('.vd-theme-switcher-menu');
+      if (!toggle || !menu) {
+        return;
+      }
+
+      const pref = this.state.preference;
+      const icon = toggle.querySelector('[data-theme-icon]');
+      const label = THEME_LABELS[pref] || THEME_LABELS.system;
+
+      if (icon) {
+        icon.className = THEME_ICON_CLASSES[pref] || THEME_ICON_CLASSES.system;
+      }
+
+      toggle.setAttribute('aria-label', label);
+      if (toggle.hasAttribute('data-tooltip')) {
+        toggle.setAttribute('data-tooltip', label);
+        this.refreshTooltipContent(toggle, label);
+      }
+
+      menu.querySelectorAll('[data-theme-value]').forEach(option => {
+        const value = option.getAttribute('data-theme-value');
+        const isActive = value === pref;
+        option.classList.toggle('is-active', isActive);
+        option.setAttribute('aria-checked', isActive ? 'true' : 'false');
+
+        const tooltipText = THEME_OPTION_TOOLTIPS[value];
+        if (tooltipText && option.hasAttribute('data-tooltip')) {
+          option.setAttribute('data-tooltip', tooltipText);
+          this.refreshTooltipContent(option, tooltipText);
+        }
+      });
+    },
+
+    refreshTooltipContent: function (element, text) {
+      const tooltips = window.Vanduo && typeof window.Vanduo.getComponent === 'function'
+        ? window.Vanduo.getComponent('tooltips')
+        : null;
+
+      if (!tooltips || typeof tooltips.update !== 'function') {
+        return;
+      }
+
+      tooltips.update(element, text);
+    },
+
+    updateCycleToggle: function (toggle) {
+      const pref = this.state.preference;
+      const icon = toggle.querySelector('[data-theme-icon]');
+      const label = THEME_LABELS[pref] || THEME_LABELS.system;
+
+      if (icon) {
+        icon.className = THEME_ICON_CLASSES[pref] || THEME_ICON_CLASSES.system;
+      }
+
+      toggle.setAttribute('aria-label', label);
+      if (toggle.hasAttribute('data-tooltip')) {
+        toggle.setAttribute('data-tooltip', label);
+        this.refreshTooltipContent(toggle, label);
+      }
     },
 
     updateUI: function (root) {
@@ -159,21 +407,35 @@
         if (toggle.tagName === 'SELECT') {
           toggle.value = this.state.preference;
         } else {
-          // Update button text/icon if needed
-          // e.g. toggle.textContent = this.state.preference;
-          // For now, assume the user handles visual state or generic text
-
-          // If there is an icon or text span inside, update it
           const span = toggle.querySelector('.theme-current-label');
           if (span) {
             span.textContent = this.state.preference.charAt(0).toUpperCase() + this.state.preference.slice(1);
           }
+
+          if (toggle.querySelector('[data-theme-icon]')) {
+            this.updateCycleToggle(toggle);
+          }
         }
       });
+
+      this.getMenuSwitchers(root).forEach(switcher => {
+        this.updateMenuSwitcher(switcher);
+      });
     },
 
     destroyAll: function (root) {
       const scope = root || document;
+
+      this.getMenuSwitchers(scope).forEach(switcher => {
+        const instance = this.menuInstances.get(switcher);
+        if (instance) {
+          instance.cleanup.forEach(fn => fn());
+          this.closeMenu(switcher, instance.toggle, instance.menu);
+          this.menuInstances.delete(switcher);
+        }
+        switcher.removeAttribute('data-theme-menu-initialized');
+      });
+
       const toggles = this.getToggles(scope).filter(function (toggle) {
         return toggle.getAttribute('data-theme-initialized') === 'true';
       });
@@ -198,7 +460,6 @@
     }
   };
 
-  // Register component
   if (window.Vanduo) {
     window.Vanduo.register('themeSwitcher', ThemeSwitcher);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanduo-oss/framework",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "description": "Zero-dependency CSS/JS framework built on Fibonacci/Golden Ratio design system with Open Color integration",
   "keywords": [
     "css",
@@ -40,12 +40,12 @@
   ],
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@playwright/test": "^1.59.1",
-    "esbuild": "^0.27.7",
-    "eslint": "^10.3.0",
+    "@playwright/test": "^1.60.0",
+    "esbuild": "^0.28.0",
+    "eslint": "^10.4.1",
     "husky": "^9.1.7",
     "lightningcss": "^1.32.0",
-    "stylelint": "^17.11.0",
+    "stylelint": "^17.12.0",
     "stylelint-config-standard": "^40.0.0"
   },
   "engines": {