@vanduo-oss/framework 1.5.0 → 1.6.0

package/js/components/doc-search.js

@@ -717,12 +717,17 @@
     }
 
     /**
-     * Escape HTML entities
+     * Escape HTML entities. Escapes quotes too, so output is safe in the
+     * attribute contexts this module uses it in (data-category="…", class="…").
      */
     function escapeHtml(text) {
-      const div = document.createElement('div');
-      div.textContent = text;
-      return div.innerHTML;
+      if (text === null || text === undefined) return '';
+      return String(text)
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
     }
 
     /**

package/js/components/expanding-cards.js

@@ -45,7 +45,14 @@
       };
 
       const onKeydown = function (e) {
-        if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight' && e.key !== 'Home' && e.key !== 'End') {
+        if (
+          e.key !== 'ArrowLeft' &&
+          e.key !== 'ArrowRight' &&
+          e.key !== 'ArrowUp' &&
+          e.key !== 'ArrowDown' &&
+          e.key !== 'Home' &&
+          e.key !== 'End'
+        ) {
           return;
         }
         const cards = getCards().filter(function (c) {
@@ -61,10 +68,15 @@
         }
         if (idx < 0) idx = 0;
 
-        if (e.key === 'ArrowLeft') {
+        const isVertical = window.getComputedStyle(container).flexDirection === 'column';
+        if (!isVertical && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+          return;
+        }
+
+        if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
           e.preventDefault();
           setActive(cards[Math.max(0, idx - 1)]);
-        } else if (e.key === 'ArrowRight') {
+        } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
           e.preventDefault();
           setActive(cards[Math.min(cards.length - 1, idx + 1)]);
         } else if (e.key === 'Home') {

package/js/components/popover.js

@@ -0,0 +1,295 @@
+/**
+ * Vanduo Framework - Popover Component
+ *
+ * Multi-trigger popover (click | hover | focus) with auto-placement flip.
+ * Distinct from .vd-bubble (which is click-only rich HTML); popover is the
+ * general-purpose primitive documented in `sections/components/popover.html`.
+ *
+ * Markup:
+ *   <button class="vd-popover-trigger"
+ *           data-vd-popover-target="#my-panel"
+ *           data-vd-popover-placement="top|bottom|left|right"
+ *           data-vd-popover-trigger="click|hover|focus"
+ *           aria-haspopup="dialog">…</button>
+ *   <div id="my-panel" class="vd-popover-panel" role="dialog" hidden>…</div>
+ *
+ * Public API (window.VanduoPopover):
+ *   init(root)        Scan root for triggers, wire instances. Idempotent.
+ *   destroy(trigger)  Tear down one instance.
+ *   destroyAll(root)  Tear down every instance inside root.
+ *   show(trigger)     Open one trigger's panel.
+ *   hide(trigger)     Close one trigger's panel.
+ *   flipPlacement(trigger) Recompute placement; flips when overflow detected.
+ */
+
+(function () {
+  'use strict';
+
+  const PLACEMENTS = ['top', 'bottom', 'left', 'right'];
+  const TRIGGERS = ['click', 'hover', 'focus'];
+  const DEFAULT_GAP = 8;
+
+  function resolvePlacement(preferred) {
+    return PLACEMENTS.indexOf(preferred) !== -1 ? preferred : 'bottom';
+  }
+
+  function resolveTrigger(value) {
+    if (!value) return ['click', 'focus'];
+    return value
+      .split(/\s+/)
+      .filter(function (t) { return TRIGGERS.indexOf(t) !== -1; });
+  }
+
+  function findPanel(trigger) {
+    const targetSelector = trigger.getAttribute('data-vd-popover-target');
+    if (!targetSelector) return null;
+    const doc = trigger.ownerDocument || document;
+    const panel = doc.querySelector(targetSelector);
+    if (!panel) return null;
+    if (!panel.classList.contains('vd-popover-panel')) {
+      panel.classList.add('vd-popover-panel');
+    }
+    return panel;
+  }
+
+  const Popover = {
+    instances: new Map(),
+    _globalCleanups: [],
+
+    init: function (root) {
+      const scope = root || document;
+      const triggers = (scope.querySelectorAll
+        ? scope.querySelectorAll('.vd-popover-trigger')
+        : document.querySelectorAll('.vd-popover-trigger'));
+
+      Array.prototype.forEach.call(triggers, function (trigger) {
+        if (Popover.instances.has(trigger)) return;
+        Popover.initInstance(trigger);
+      });
+
+      if (Popover._globalCleanups.length === 0) {
+        const outsideClick = function (event) {
+          Popover.instances.forEach(function (inst, trigger) {
+            if (inst.trigger !== 'click') return;
+            if (inst.panel.contains(event.target) || trigger.contains(event.target)) return;
+            Popover.hide(trigger);
+          });
+        };
+        const escHandler = function (event) {
+          if (event.key !== 'Escape') return;
+          let lastOpen = null;
+          Popover.instances.forEach(function (inst, trigger) {
+            if (inst.panel.hasAttribute('hidden') === false) lastOpen = trigger;
+          });
+          if (lastOpen) Popover.hide(lastOpen);
+        };
+        document.addEventListener('click', outsideClick, true);
+        document.addEventListener('keydown', escHandler);
+        Popover._globalCleanups.push(function () {
+          document.removeEventListener('click', outsideClick, true);
+        });
+        Popover._globalCleanups.push(function () {
+          document.removeEventListener('keydown', escHandler);
+        });
+      }
+    },
+
+    initInstance: function (trigger) {
+      const panel = findPanel(trigger);
+      if (!panel) return;
+      const cleanup = [];
+      const placement = resolvePlacement(trigger.getAttribute('data-vd-popover-placement'));
+      const triggers = resolveTrigger(trigger.getAttribute('data-vd-popover-trigger'));
+      const allowFlip = trigger.getAttribute('data-vd-popover-flip') !== 'false';
+
+      if (!panel.id) {
+        panel.id = 'vd-popover-' + Math.random().toString(36).slice(2, 9);
+      }
+      if (!panel.hasAttribute('role')) panel.setAttribute('role', 'dialog');
+      if (!panel.hasAttribute('aria-modal')) panel.setAttribute('aria-modal', 'false');
+
+      trigger.setAttribute('aria-haspopup', 'dialog');
+      trigger.setAttribute('aria-expanded', 'false');
+      trigger.setAttribute('aria-controls', panel.id);
+
+      if (triggers.indexOf('click') !== -1) {
+        const clickHandler = function (event) {
+          event.stopPropagation();
+          const expanded = trigger.getAttribute('aria-expanded') === 'true';
+          if (expanded) Popover.hide(trigger);
+          else {
+            Popover._closeOthers(trigger);
+            Popover.show(trigger);
+          }
+        };
+        trigger.addEventListener('click', clickHandler);
+        cleanup.push(function () { trigger.removeEventListener('click', clickHandler); });
+      }
+
+      if (triggers.indexOf('hover') !== -1) {
+        const enterHandler = function () { Popover.show(trigger); };
+        const leaveHandler = function () {
+          setTimeout(function () {
+            if (!panel.matches(':hover') && !trigger.matches(':hover')) Popover.hide(trigger);
+          }, 80);
+        };
+        trigger.addEventListener('mouseenter', enterHandler);
+        trigger.addEventListener('mouseleave', leaveHandler);
+        panel.addEventListener('mouseenter', enterHandler);
+        panel.addEventListener('mouseleave', leaveHandler);
+        cleanup.push(function () { trigger.removeEventListener('mouseenter', enterHandler); });
+        cleanup.push(function () { trigger.removeEventListener('mouseleave', leaveHandler); });
+        cleanup.push(function () { panel.removeEventListener('mouseenter', enterHandler); });
+        cleanup.push(function () { panel.removeEventListener('mouseleave', leaveHandler); });
+      }
+
+      if (triggers.indexOf('focus') !== -1) {
+        const focusHandler = function () { Popover.show(trigger); };
+        const blurHandler = function (event) {
+          if (panel.contains(event.relatedTarget)) return;
+          Popover.hide(trigger);
+        };
+        trigger.addEventListener('focus', focusHandler);
+        trigger.addEventListener('blur', blurHandler);
+        cleanup.push(function () { trigger.removeEventListener('focus', focusHandler); });
+        cleanup.push(function () { trigger.removeEventListener('blur', blurHandler); });
+      }
+
+      const resizeHandler = function () { Popover.flipPlacement(trigger); };
+      window.addEventListener('resize', resizeHandler);
+      window.addEventListener('scroll', resizeHandler, true);
+      cleanup.push(function () { window.removeEventListener('resize', resizeHandler); });
+      cleanup.push(function () { window.removeEventListener('scroll', resizeHandler, true); });
+
+      Popover.instances.set(trigger, {
+        panel: panel,
+        cleanup: cleanup,
+        placement: placement,
+        trigger: triggers.join(' '),
+        allowFlip: allowFlip
+      });
+    },
+
+    show: function (trigger) {
+      const inst = Popover.instances.get(trigger);
+      if (!inst) return;
+      inst.panel.hidden = false;
+      // Two rAFs: first lets layout settle, second positions after styles applied.
+      requestAnimationFrame(function () {
+        Popover.position(trigger, inst.panel, inst.placement);
+        trigger.setAttribute('aria-expanded', 'true');
+        inst.panel.setAttribute('data-placement', inst.placement);
+        trigger.dispatchEvent(new CustomEvent('popover:show', {
+          bubbles: true,
+          detail: { trigger: trigger, placement: inst.placement }
+        }));
+      });
+    },
+
+    hide: function (trigger) {
+      const inst = Popover.instances.get(trigger);
+      if (!inst) return;
+      inst.panel.hidden = true;
+      trigger.setAttribute('aria-expanded', 'false');
+      trigger.dispatchEvent(new CustomEvent('popover:hide', {
+        bubbles: true,
+        detail: { trigger: trigger }
+      }));
+    },
+
+    _closeOthers: function (currentTrigger) {
+      Popover.instances.forEach(function (_inst, trigger) {
+        if (trigger !== currentTrigger) Popover.hide(trigger);
+      });
+    },
+
+    position: function (trigger, panel, placement) {
+      const rect = trigger.getBoundingClientRect();
+      const popRect = panel.getBoundingClientRect();
+      const gap = DEFAULT_GAP;
+      let top;
+      let left;
+      const win = panel.ownerDocument.defaultView || window;
+      const scrollX = win.pageXOffset || 0;
+      const scrollY = win.pageYOffset || 0;
+
+      switch (placement) {
+        case 'top':
+          top = rect.top - popRect.height - gap + scrollY;
+          left = rect.left + (rect.width - popRect.width) / 2 + scrollX;
+          break;
+        case 'left':
+          top = rect.top + (rect.height - popRect.height) / 2 + scrollY;
+          left = rect.left - popRect.width - gap + scrollX;
+          break;
+        case 'right':
+          top = rect.top + (rect.height - popRect.height) / 2 + scrollY;
+          left = rect.right + gap + scrollX;
+          break;
+        default: // bottom
+          top = rect.bottom + gap + scrollY;
+          left = rect.left + (rect.width - popRect.width) / 2 + scrollX;
+      }
+
+      left = Math.max(8, Math.min(left, win.innerWidth - popRect.width - 8));
+      top = Math.max(8, top);
+
+      panel.style.position = 'absolute';
+      panel.style.top = top + 'px';
+      panel.style.left = left + 'px';
+    },
+
+    flipPlacement: function (trigger) {
+      const inst = Popover.instances.get(trigger);
+      if (!inst || !inst.allowFlip) return;
+      if (inst.panel.hidden) return;
+      const win = inst.panel.ownerDocument.defaultView || window;
+      const rect = trigger.getBoundingClientRect();
+      const popRect = inst.panel.getBoundingClientRect();
+      const gap = DEFAULT_GAP;
+      let flipped = null;
+      const current = inst.placement;
+
+      if (current === 'top' && rect.top - popRect.height - gap < 0) flipped = 'bottom';
+      else if (current === 'bottom' && rect.bottom + popRect.height + gap > win.innerHeight) flipped = 'top';
+      else if (current === 'left' && rect.left - popRect.width - gap < 0) flipped = 'right';
+      else if (current === 'right' && rect.right + popRect.width + gap > win.innerWidth) flipped = 'left';
+
+      if (flipped) {
+        inst.placement = flipped;
+        Popover.position(trigger, inst.panel, flipped);
+        inst.panel.setAttribute('data-placement', flipped);
+      }
+    },
+
+    destroy: function (trigger) {
+      const inst = Popover.instances.get(trigger);
+      if (!inst) return;
+      inst.cleanup.forEach(function (fn) { fn(); });
+      Popover.hide(trigger);
+      trigger.removeAttribute('aria-haspopup');
+      trigger.removeAttribute('aria-expanded');
+      trigger.removeAttribute('aria-controls');
+      Popover.instances.delete(trigger);
+    },
+
+    destroyAll: function (root) {
+      const triggers = [];
+      Popover.instances.forEach(function (_inst, trigger) {
+        if (!root || (trigger.closest && trigger.closest(root))) triggers.push(trigger);
+      });
+      triggers.forEach(function (trigger) { Popover.destroy(trigger); });
+      if (Popover.instances.size === 0) {
+        Popover._globalCleanups.forEach(function (fn) { fn(); });
+        Popover._globalCleanups = [];
+      }
+    }
+  };
+
+  if (typeof window !== 'undefined') {
+    if (typeof window.Vanduo !== 'undefined' && typeof window.Vanduo.register === 'function') {
+      window.Vanduo.register('popover', Popover);
+    }
+    window.VanduoPopover = Popover;
+  }
+})();

package/js/components/search.js

@@ -0,0 +1,108 @@
+/**
+ * Vanduo Framework - Search Helper
+ *
+ * Small registry that lets consumers plug named data sources into a search
+ * overlay. The framework does not ship a UI — overlays like
+ * `GlobalSearchModal` consume the registry.
+ *
+ * Source shape:
+ *   {
+ *     name: 'sections',                        // unique key
+ *     label: 'Documentation Sections',        // display name in groups
+ *     icon: 'ph-book-open',                    // optional Phosphor class
+ *     limit: 10,                                // optional cap (default 10)
+ *     fetch: async (query, signal) => [...]   // returns Result[]
+ *   }
+ *
+ * Result shape:
+ *   { title, subtitle?, href, group?, icon? }
+ *
+ * Public API (window.VanduoSearch):
+ *   register(source)                  Add a source. Throws on duplicate name.
+ *   unregister(name)                  Remove a source. Returns boolean.
+ *   list()                            Return registered sources (frozen array).
+ *   query(text, options?)             Search every source in parallel.
+ *                                      options: { signal?, limitPerSource? }
+ *                                      Returns { sources: { name, results, error? }[] }
+ */
+
+(function () {
+  'use strict';
+
+  const DEFAULT_LIMIT = 10;
+
+  const sources = new Map();
+
+  function register(source) {
+    if (!source || typeof source.name !== 'string' || source.name.length === 0) {
+      throw new Error('VanduoSearch.register: source.name is required');
+    }
+    if (typeof source.fetch !== 'function') {
+      throw new Error('VanduoSearch.register: source.fetch must be a function');
+    }
+    if (sources.has(source.name)) {
+      throw new Error('VanduoSearch.register: source "' + source.name + '" already registered');
+    }
+    sources.set(source.name, Object.freeze({
+      name: source.name,
+      label: source.label || source.name,
+      icon: source.icon || null,
+      limit: typeof source.limit === 'number' ? source.limit : DEFAULT_LIMIT,
+      fetch: source.fetch
+    }));
+  }
+
+  function unregister(name) {
+    return sources.delete(name);
+  }
+
+  function list() {
+    return Object.freeze(Array.from(sources.values()));
+  }
+
+  function query(text, options) {
+    options = options || {};
+    const signal = options.signal;
+    const limitPerSource = typeof options.limitPerSource === 'number'
+      ? options.limitPerSource
+      : null;
+    const queryText = (text || '').trim();
+    const allSources = Array.from(sources.values());
+
+    if (queryText.length === 0) {
+      return Promise.resolve({
+        text: queryText,
+        sources: allSources.map(function (src) {
+          return { name: src.name, label: src.label, results: [] };
+        })
+      });
+    }
+
+    const promises = allSources.map(function (src) {
+      const effectiveLimit = limitPerSource != null ? limitPerSource : src.limit;
+      return Promise.resolve()
+        .then(function () { return src.fetch(queryText, { signal: signal, limit: effectiveLimit }); })
+        .then(function (results) {
+          const safe = Array.isArray(results) ? results : [];
+          return { name: src.name, label: src.label, results: safe };
+        })
+        .catch(function (error) {
+          if (error && error.name === 'AbortError') throw error;
+          return { name: src.name, label: src.label, results: [], error: error.message || 'fetch failed' };
+        });
+    });
+
+    return Promise.all(promises).then(function (perSource) {
+      return { text: queryText, sources: perSource };
+    });
+  }
+
+  const Search = { register: register, unregister: unregister, list: list, query: query };
+
+  if (typeof window !== 'undefined') {
+    if (typeof window.Vanduo !== 'undefined' && typeof window.Vanduo.register === 'function') {
+      window.Vanduo.register('search', Search);
+    }
+    window.VanduoSearch = Search;
+  }
+})();

package/js/components/theme-customizer.js

@@ -10,6 +10,7 @@
   const ThemeCustomizer = {
     // Storage keys
     STORAGE_KEYS: {
+      PALETTE: 'vanduo-palette',
       PRIMARY: 'vanduo-primary-color',
       NEUTRAL: 'vanduo-neutral-color',
       RADIUS: 'vanduo-radius',
@@ -19,6 +20,7 @@
 
     // Default values
     DEFAULTS: {
+      PALETTE: 'open-color',
       PRIMARY_LIGHT: 'black',
       PRIMARY_DARK: 'amber',
       NEUTRAL: 'charcoal',
@@ -27,7 +29,13 @@
       THEME: 'system'
     },
 
-    // Primary color definitions (Open Color based)
+    // Palette options (the Open Color default + the optional Fibonacci palette)
+    PALETTE_OPTIONS: {
+      'open-color': { name: 'Open Color', description: 'The Open Color palette (MIT) — the Vanduo default.' },
+      'fibonacci': { name: 'Fibonacci', description: 'Golden-angle generated palette — optional, opt in via data-palette="fibonacci".' }
+    },
+
+    // Primary color definitions (palette-aware: shown over the active palette)
     PRIMARY_COLORS: {
       'black': { name: 'Black', color: '#000000' },
       'red': { name: 'Red', color: '#fa5252' },
@@ -76,6 +84,7 @@
 
     // State
     state: {
+      palette: null,
       primary: null,
       neutral: null,
       radius: null,
@@ -194,6 +203,7 @@
      * Load preferences from localStorage
      */
     loadPreferences: function () {
+      this.state.palette = this.getStorageValue(this.STORAGE_KEYS.PALETTE, this.DEFAULTS.PALETTE);
       this.state.theme = this.getStorageValue(this.STORAGE_KEYS.THEME, this.DEFAULTS.THEME);
       this.state.primary = this.getStorageValue(this.STORAGE_KEYS.PRIMARY, this.getDefaultPrimary(this.state.theme));
       this._normalizeDefaultPrimaryIfStaleWithStoredTheme();
@@ -213,6 +223,7 @@
      * Apply all preferences
      */
     applyAllPreferences: function () {
+      this.applyPalette(this.state.palette);
       this.applyPrimary(this.state.primary);
       this.applyNeutral(this.state.neutral);
       this.applyRadius(this.state.radius);
@@ -220,6 +231,21 @@
       this.applyTheme(this.state.theme);
     },
 
+    /**
+     * Apply color palette (Fibonacci default / Open Color optional)
+     */
+    applyPalette: function (paletteKey) {
+      if (!this.PALETTE_OPTIONS[paletteKey]) {
+        paletteKey = this.DEFAULTS.PALETTE;
+      }
+
+      this.state.palette = paletteKey;
+      document.documentElement.setAttribute('data-palette', paletteKey);
+      this.savePreference(this.STORAGE_KEYS.PALETTE, paletteKey);
+
+      this.dispatchEvent('palette-change', { palette: paletteKey });
+    },
+
     /**
      * Apply primary color
      */
@@ -492,6 +518,14 @@
 
       this.elements.panel.setAttribute('data-customizer-initialized', 'true');
 
+      // Palette buttons
+      this.elements.panel.querySelectorAll('[data-palette]').forEach(btn => {
+        this.addListener(btn, 'click', () => {
+          this.applyPalette(btn.dataset.palette);
+          this.updateUI();
+        });
+      });
+
       // Primary color swatches
       this.elements.panel.querySelectorAll('[data-color]').forEach(swatch => {
         this.addListener(swatch, 'click', () => {
@@ -569,6 +603,12 @@
         return '#000000';
       };
 
+      // Generate palette options
+      let paletteOptions = '';
+      for (const [key, value] of Object.entries(this.PALETTE_OPTIONS)) {
+        paletteOptions += `<button class="tc-palette-btn${key === this.state.palette ? ' is-active' : ''}" data-palette="${esc(key)}" title="${esc(value.description)}">${esc(value.name)}</button>`;
+      }
+
       // Generate primary color swatches
       let primarySwatches = '';
       for (const [key, value] of Object.entries(this.PRIMARY_COLORS)) {
@@ -602,6 +642,12 @@
         </div>
         <div class="tc-body">
 
+          <div class="tc-section">
+            <label class="tc-label">Palette</label>
+            <div class="tc-palette-group">
+              ${paletteOptions}
+            </div>
+          </div>
           <div class="tc-section">
             <label class="tc-label">Primary Color</label>
             <div class="tc-color-grid">
@@ -798,6 +844,11 @@
     updateUI: function () {
       if (!this.elements.panel) return;
 
+      // Update palette buttons
+      this.elements.panel.querySelectorAll('[data-palette]').forEach(btn => {
+        btn.classList.toggle('is-active', btn.dataset.palette === this.state.palette);
+      });
+
       // Update primary color swatches
       this.elements.panel.querySelectorAll('[data-color]').forEach(swatch => {
         swatch.classList.toggle('is-active', swatch.dataset.color === this.state.primary);
@@ -825,6 +876,7 @@
      * Reset all preferences to defaults
      */
     reset: function () {
+      this.applyPalette(this.DEFAULTS.PALETTE);
       this.applyTheme(this.DEFAULTS.THEME);
       this.applyPrimary(this.getDefaultPrimary(this.DEFAULTS.THEME));
       this.applyNeutral(this.DEFAULTS.NEUTRAL);
@@ -846,6 +898,7 @@
      * Programmatically set preferences
      */
     setPreferences: function (prefs) {
+      if (prefs.palette) this.applyPalette(prefs.palette);
       if (prefs.primary) this.applyPrimary(prefs.primary);
       if (prefs.neutral) this.applyNeutral(prefs.neutral);
       if (prefs.radius) this.applyRadius(prefs.radius);

package/js/index.js

@@ -68,6 +68,8 @@ import './components/rating.js';
 import './components/transfer.js';
 import './components/tree.js';
 import './components/spotlight.js';
+import './components/popover.js';
+import './components/search.js';
 
 // Re-export for ESM / CJS consumers
 const Vanduo = window.Vanduo;

package/js/utils/helpers.js

@@ -248,9 +248,14 @@ function getPosition(element) {
  */
 function escapeHtml(str) {
   if (!str) return '';
-  const div = document.createElement('div');
-  div.appendChild(document.createTextNode(str));
-  return div.innerHTML;
+  // Escape quotes too, so output is safe in attribute context (e.g.
+  // title="${escapeHtml(x)}"), not just element-text context.
+  return String(str)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
 }
 
 /**
@@ -271,7 +276,10 @@ function sanitizeHtml(input, options = {}) {
     return escapeHtml(input);
   }
   const allowSvg = options && options.allowSvg === true;
-  const allowStyle = !options || options.allowStyle !== false;
+  // Secure default: deny inline `style` unless explicitly opted in. (Inline
+  // style can't run JS but enables CSS exfiltration/clickjacking on untrusted
+  // HTML.) Callers that need rich styling pass { allowStyle: true }.
+  const allowStyle = options && options.allowStyle === true;
   const baseAllowed = ['B', 'STRONG', 'I', 'EM', 'BR', 'A', 'SPAN', 'U', 'DIV', 'P', 'KBD', 'CODE', 'SMALL', 'MARK'];
   const svgAllowed = ['SVG', 'PATH', 'LINE', 'CIRCLE', 'POLYLINE', 'RECT', 'G'];
   const allowed = allowSvg ? baseAllowed.concat(svgAllowed) : baseAllowed;

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@vanduo-oss/framework",
-  "version": "1.5.0",
+  "version": "1.6.0",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "Zero-dependency CSS/JS framework built on Fibonacci/Golden Ratio design system with Open Color integration",
   "keywords": [
     "css",
@@ -44,12 +47,12 @@
   ],
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@playwright/test": "^1.60.0",
+    "@playwright/test": "^1.61.1",
     "esbuild": "^0.28.1",
-    "eslint": "^10.4.1",
+    "eslint": "^10.5.0",
     "husky": "^9.1.7",
     "lightningcss": "^1.32.0",
-    "stylelint": "^17.12.0",
+    "stylelint": "^17.13.0",
     "stylelint-config-standard": "^40.0.0"
   },
   "engines": {