@customviews-js/customviews 1.1.0 → 1.1.2

package/dist/custom-views.js

@@ -1,5 +1,5 @@
 /*!
- * @customviews-js/customviews v1.1.0
+ * @customviews-js/customviews v1.1.2
  * (c) 2025 Chan Ger Teck
  * Released under the MIT License.
  */
@@ -9,83 +9,6 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CustomViews = {}));
 })(this, (function (exports) { 'use strict';
 
-    /** --- Basic renderers --- */
-    function renderImage(el, asset) {
-        if (!asset.src)
-            return;
-        el.innerHTML = '';
-        const img = document.createElement('img');
-        img.src = asset.src;
-        img.alt = asset.alt || '';
-        // Apply custom styling if provided
-        if (asset.className) {
-            img.className = asset.className;
-        }
-        if (asset.style) {
-            img.setAttribute('style', asset.style);
-        }
-        // Default styles (can be overridden by asset.style)
-        img.style.maxWidth = img.style.maxWidth || '100%';
-        img.style.height = img.style.height || 'auto';
-        img.style.display = img.style.display || 'block';
-        el.appendChild(img);
-    }
-    function renderText(el, asset) {
-        if (asset.content != null) {
-            el.textContent = asset.content;
-        }
-        // Apply custom styling if provided
-        if (asset.className) {
-            el.className = asset.className;
-        }
-        if (asset.style) {
-            el.setAttribute('style', asset.style);
-        }
-    }
-    function renderHtml(el, asset) {
-        if (asset.content != null) {
-            el.innerHTML = asset.content;
-        }
-        // Apply custom styling if provided
-        if (asset.className) {
-            el.className = asset.className;
-        }
-        if (asset.style) {
-            el.setAttribute('style', asset.style);
-        }
-    }
-    /** --- Unified asset renderer --- */
-    function detectAssetType(asset) {
-        // If src exists, it's an image
-        if (asset.src)
-            return 'image';
-        // If content contains HTML tags, it's HTML
-        if (asset.content && /<[^>]+>/.test(asset.content)) {
-            return 'html';
-        }
-        return 'text';
-    }
-    function renderAssetInto(el, assetId, assetsManager) {
-        const asset = assetsManager.get(assetId);
-        if (!asset)
-            return;
-        const type = asset.type || detectAssetType(asset);
-        switch (type) {
-            case 'image':
-                renderImage(el, asset);
-                break;
-            case 'text':
-                renderText(el, asset);
-                break;
-            case 'html':
-                renderHtml(el, asset);
-                break;
-            default:
-                el.innerHTML = asset.content || String(asset);
-                console.warn('[CustomViews] Unknown asset type:', type);
-        }
-    }
-
     /**
      * Manages persistence of custom views state using browser localStorage
      */
@@ -346,6 +269,98 @@
         }
     }
 
+    /** --- Icon utilities --- */
+    function ensureFontAwesomeInjected() {
+        const isFontAwesomeLoaded = Array.from(document.styleSheets).some(sheet => sheet.href && (sheet.href.includes('font-awesome') || sheet.href.includes('fontawesome')));
+        if (isFontAwesomeLoaded)
+            return;
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css';
+        link.setAttribute('data-customviews-fontawesome', 'true');
+        document.head.appendChild(link);
+    }
+    function replaceIconShortcodes(text) {
+        // Handle Font Awesome shortcodes
+        return text.replace(/:fa-([\w-]+):/g, (_, icon) => `<i class="fa fa-${icon}"></i>`);
+    }
+    /** --- Basic renderers --- */
+    function renderImage(el, asset) {
+        if (!asset.src)
+            return;
+        el.innerHTML = '';
+        const img = document.createElement('img');
+        img.src = asset.src;
+        img.alt = asset.alt || '';
+        // Apply custom styling if provided
+        if (asset.className) {
+            img.className = asset.className;
+        }
+        if (asset.style) {
+            img.setAttribute('style', asset.style);
+        }
+        // Default styles (can be overridden by asset.style)
+        img.style.maxWidth = img.style.maxWidth || '100%';
+        img.style.height = img.style.height || 'auto';
+        img.style.display = img.style.display || 'block';
+        el.appendChild(img);
+    }
+    function renderText(el, asset) {
+        if (asset.content != null) {
+            el.textContent = asset.content;
+        }
+        // Apply custom styling if provided
+        if (asset.className) {
+            el.className = asset.className;
+        }
+        if (asset.style) {
+            el.setAttribute('style', asset.style);
+        }
+    }
+    function renderHtml(el, asset) {
+        if (asset.content != null) {
+            el.innerHTML = asset.content;
+        }
+        // Apply custom styling if provided
+        if (asset.className) {
+            el.className = asset.className;
+        }
+        if (asset.style) {
+            el.setAttribute('style', asset.style);
+        }
+    }
+    /** --- Unified asset renderer --- */
+    function detectAssetType(asset) {
+        // If src exists, it's an image
+        if (asset.src)
+            return 'image';
+        // If content contains HTML tags, it's HTML
+        if (asset.content && /<[^>]+>/.test(asset.content)) {
+            return 'html';
+        }
+        return 'text';
+    }
+    function renderAssetInto(el, assetId, assetsManager) {
+        const asset = assetsManager.get(assetId);
+        if (!asset)
+            return;
+        const type = asset.type || detectAssetType(asset);
+        switch (type) {
+            case 'image':
+                renderImage(el, asset);
+                break;
+            case 'text':
+                renderText(el, asset);
+                break;
+            case 'html':
+                renderHtml(el, asset);
+                break;
+            default:
+                el.innerHTML = asset.content || String(asset);
+                console.warn('[CustomViews] Unknown asset type:', type);
+        }
+    }
+
     // Constants for selectors
     const TABGROUP_SELECTOR = 'cv-tabgroup';
     const TAB_SELECTOR = 'cv-tab';
@@ -367,8 +382,8 @@
                     return;
                 // Determine the active tab for this group
                 const activeTabId = this.resolveActiveTab(groupId, tabs, cfgGroups, groupEl);
-                // Apply visibility to child cv-tab elements
-                const tabElements = groupEl.querySelectorAll(TAB_SELECTOR);
+                // Apply visibility to direct child cv-tab elements only (not nested ones)
+                const tabElements = Array.from(groupEl.children).filter((child) => child.tagName.toLowerCase() === TAB_SELECTOR);
                 tabElements.forEach((tabEl) => {
                     const tabId = tabEl.getAttribute('id');
                     if (!tabId)
@@ -400,8 +415,8 @@
                     }
                 }
             }
-            // 3. Fallback to first cv-tab child in DOM
-            const firstTab = groupEl.querySelector(TAB_SELECTOR);
+            // 3. Fallback to first direct cv-tab child in DOM
+            const firstTab = Array.from(groupEl.children).find((child) => child.tagName.toLowerCase() === TAB_SELECTOR);
             if (firstTab) {
                 return firstTab.getAttribute('id');
             }
@@ -426,6 +441,28 @@
         static buildNavs(rootEl, cfgGroups, onTabClick) {
             // Find all cv-tabgroup elements with nav="auto" or no nav attribute
             const tabGroups = rootEl.querySelectorAll(NAV_AUTO_SELECTOR);
+            // Check if any tab headers contain Font Awesome shortcodes
+            // Inject Font Awesome CSS only if needed
+            let hasFontAwesomeShortcodes = false;
+            tabGroups.forEach((groupEl) => {
+                const groupId = groupEl.getAttribute('id');
+                if (!groupId)
+                    return;
+                const tabElements = Array.from(groupEl.children).filter((child) => child.tagName.toLowerCase() === 'cv-tab');
+                tabElements.forEach((tabEl) => {
+                    const tabId = tabEl.getAttribute('id');
+                    if (!tabId)
+                        return;
+                    const header = tabEl.getAttribute('header') || this.getTabLabel(tabId, groupId, cfgGroups) || tabId;
+                    if (/:fa-[\w-]+:/.test(header)) {
+                        hasFontAwesomeShortcodes = true;
+                    }
+                });
+            });
+            // Inject Font Awesome only if shortcodes are found
+            if (hasFontAwesomeShortcodes) {
+                ensureFontAwesomeInjected();
+            }
             tabGroups.forEach((groupEl) => {
                 const groupId = groupEl.getAttribute('id');
                 if (!groupId)
@@ -434,8 +471,8 @@
                 let navContainer = groupEl.querySelector(`.${NAV_CONTAINER_CLASS}`);
                 if (navContainer)
                     return; // Already built
-                // Get all child tabs
-                const tabElements = Array.from(groupEl.querySelectorAll(TAB_SELECTOR));
+                // Get only direct child tabs (not nested ones)
+                const tabElements = Array.from(groupEl.children).filter((child) => child.tagName.toLowerCase() === TAB_SELECTOR);
                 if (tabElements.length === 0)
                     return;
                 // Create nav container
@@ -453,7 +490,8 @@
                     listItem.className = 'nav-item';
                     const navLink = document.createElement('a');
                     navLink.className = 'nav-link';
-                    navLink.textContent = header;
+                    // Replace icon shortcodes in header
+                    navLink.innerHTML = replaceIconShortcodes(header);
                     navLink.href = '#';
                     navLink.setAttribute('data-tab-id', tabId);
                     navLink.setAttribute('data-group-id', groupId);
@@ -545,157 +583,267 @@
         }
     }
 
+    class AssetsManager {
+        assets;
+        baseURL;
+        constructor(assets, baseURL = '') {
+            this.assets = assets;
+            this.baseURL = baseURL;
+            if (!this.validate()) {
+                console.warn('Invalid assets:', this.assets);
+            }
+        }
+        // Check each asset has content or src
+        validate() {
+            return Object.values(this.assets).every(a => a.src || a.content);
+        }
+        get(assetId) {
+            const asset = this.assets[assetId];
+            if (!asset)
+                return undefined;
+            // If there's a baseURL and the asset has a src property, prepend the baseURL
+            if (this.baseURL && asset.src) {
+                // Create a shallow copy to avoid mutating the original asset
+                return {
+                    ...asset,
+                    src: this.prependBaseURL(asset.src)
+                };
+            }
+            return asset;
+        }
+        prependBaseURL(path) {
+            // Don't prepend if the path is already absolute (starts with http:// or https://)
+            if (path.startsWith('http://') || path.startsWith('https://')) {
+                return path;
+            }
+            // Ensure baseURL doesn't end with / and path starts with /
+            const cleanBaseURL = this.baseURL.endsWith('/') ? this.baseURL.slice(0, -1) : this.baseURL;
+            const cleanPath = path.startsWith('/') ? path : '/' + path;
+            return cleanBaseURL + cleanPath;
+        }
+        loadFromJSON(json) {
+            this.assets = json;
+        }
+        loadAdditionalAssets(additionalAssets) {
+            this.assets = { ...this.assets, ...additionalAssets };
+        }
+    }
+
+    // Constants for selectors
+    const TOGGLE_DATA_SELECTOR = "[data-cv-toggle], [data-customviews-toggle]";
+    const TOGGLE_ELEMENT_SELECTOR = "cv-toggle";
+    const TOGGLE_SELECTOR = `${TOGGLE_DATA_SELECTOR}, ${TOGGLE_ELEMENT_SELECTOR}`;
+    /**
+     * ToggleManager handles discovery, visibility, and asset rendering for toggle elements
+     */
+    class ToggleManager {
+        /**
+         * Apply toggle visibility to all toggle elements in the DOM
+         */
+        static applyToggles(rootEl, activeToggles) {
+            rootEl.querySelectorAll(TOGGLE_SELECTOR).forEach(el => {
+                const categories = this.getToggleCategories(el);
+                const shouldShow = categories.some(cat => activeToggles.includes(cat));
+                this.applyToggleVisibility(el, shouldShow);
+            });
+        }
+        /**
+         * Render assets into toggle elements that are currently visible
+         */
+        static renderAssets(rootEl, activeToggles, assetsManager) {
+            rootEl.querySelectorAll(TOGGLE_SELECTOR).forEach(el => {
+                const categories = this.getToggleCategories(el);
+                const toggleId = this.getToggleId(el);
+                if (toggleId && categories.some(cat => activeToggles.includes(cat))) {
+                    renderAssetInto(el, toggleId, assetsManager);
+                }
+            });
+        }
+        /**
+         * Get toggle categories from an element (supports both data attributes and cv-toggle elements)
+         */
+        static getToggleCategories(el) {
+            if (el.tagName.toLowerCase() === 'cv-toggle') {
+                const category = el.getAttribute('category');
+                return (category || '').split(/\s+/).filter(Boolean);
+            }
+            else {
+                const data = el.dataset.cvToggle || el.dataset.customviewsToggle;
+                return (data || '').split(/\s+/).filter(Boolean);
+            }
+        }
+        /**
+         * Get toggle ID from an element
+         */
+        static getToggleId(el) {
+            return el.dataset.cvId || el.dataset.customviewsId || el.getAttribute('data-cv-id') || el.getAttribute('data-customviews-id') || undefined;
+        }
+        /**
+         * Apply simple class-based visibility to a toggle element
+         */
+        static applyToggleVisibility(el, visible) {
+            if (visible) {
+                el.classList.remove('cv-hidden');
+                el.classList.add('cv-visible');
+            }
+            else {
+                el.classList.add('cv-hidden');
+                el.classList.remove('cv-visible');
+            }
+        }
+    }
+
     /**
      * Styles for toggle visibility and animations
      */
-    const TOGGLE_STYLES = `
-/* Core toggle visibility transitions */
-[data-cv-toggle], [data-customviews-toggle] {
-  transition: opacity 150ms ease,
-              transform 150ms ease,
-              max-height 200ms ease,
-              margin 150ms ease;
-  will-change: opacity, transform, max-height, margin;
-}
-
-.cv-visible {
-  opacity: 1 !important;
-  transform: translateY(0) !important;
-  max-height: var(--cv-max-height, 9999px) !important;
-}
-
-.cv-hidden {
-  opacity: 0 !important;
-  transform: translateY(-4px) !important;
-  pointer-events: none !important;
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-  border-top-width: 0 !important;
-  border-bottom-width: 0 !important;
-  max-height: 0 !important;
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  overflow: hidden !important;
-}
+    const TOGGLE_STYLES = `
+/* Core toggle visibility transitions */
+[data-cv-toggle], [data-customviews-toggle], cv-toggle {
+  transition: opacity 150ms ease,
+              transform 150ms ease,
+              max-height 200ms ease,
+              margin 150ms ease;
+  will-change: opacity, transform, max-height, margin;
+}
+
+.cv-visible {
+  opacity: 1 !important;
+  transform: translateY(0) !important;
+  max-height: var(--cv-max-height, 9999px) !important;
+}
+
+.cv-hidden {
+  opacity: 0 !important;
+  transform: translateY(-4px) !important;
+  pointer-events: none !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  border-top-width: 0 !important;
+  border-bottom-width: 0 !important;
+  max-height: 0 !important;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  overflow: hidden !important;
+}
 `;
 
     /**
      * Styles for tab groups and tab navigation
      */
-    const TAB_STYLES = `
-/* Tab navigation styles - Bootstrap-style tabs matching MarkBind */
-.cv-tabs-nav {
-  display: flex;
-  flex-wrap: wrap;
-  padding-left: 0;
-  margin-top: 0.5rem;
-  margin-bottom: 1rem;
-  list-style: none;
-  border-bottom: 1px solid #dee2e6;
-}
-
-.cv-tabs-nav .nav-item {
-  margin-bottom: -1px;
-  list-style: none;
-  display: inline-block;
-}
-
-.cv-tabs-nav .nav-link {
-  display: block;
-  padding: 0.5rem 1rem;
-  color: #495057;
-  text-decoration: none;
-  background-color: transparent;
-  border: 1px solid transparent;
-  border-top-left-radius: 0.25rem;
-  border-top-right-radius: 0.25rem;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
-  cursor: pointer;
-}
-
-.cv-tabs-nav .nav-link:hover,
-.cv-tabs-nav .nav-link:focus {
-  border-color: #e9ecef #e9ecef #dee2e6;
-  isolation: isolate;
-}
-
-.cv-tabs-nav .nav-link.active {
-  color: #495057;
-  background-color: #fff;
-  border-color: #dee2e6 #dee2e6 #fff;
-}
-
-.cv-tabs-nav .nav-link:focus {
-  outline: 0;
-  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
-}
-
-/* Legacy button-based nav (deprecated, kept for compatibility) */
-.cv-tabs-nav-item {
-  background: none;
-  border: none;
-  border-bottom: 2px solid transparent;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  font-size: 1rem;
-  color: #6c757d;
-  transition: color 150ms ease, border-color 150ms ease;
-}
-
-.cv-tabs-nav-item:hover {
-  color: #495057;
-  border-bottom-color: #dee2e6;
-}
-
-.cv-tabs-nav-item.active {
-  color: #007bff;
-  border-bottom-color: #007bff;
-  font-weight: 500;
-}
-
-.cv-tabs-nav-item:focus {
-  outline: 2px solid #007bff;
-  outline-offset: 2px;
-}
-
-/* Tab panel base styles */
-cv-tab {
-  display: block;
-}
-
-/* Override visibility for tab panels - use display instead of collapse animation */
-cv-tab.cv-hidden {
-  display: none !important;
-}
-
-cv-tab.cv-visible {
-  display: block !important;
-}
-
-cv-tabgroup {
-  display: block;
-  margin-bottom: 1.5rem;
-}
-
-/* Bottom border line for tab groups */
-.cv-tabgroup-bottom-border {
-  border-bottom: 1px solid #dee2e6;
-  margin-top: 1rem;
-}
-
-/* Tab content wrapper */
-.cv-tab-content {
-  padding: 1rem 0;
-}
+    const TAB_STYLES = `
+/* Tab navigation styles - Bootstrap-style tabs matching MarkBind */
+.cv-tabs-nav {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-top: 0.5rem;
+  margin-bottom: 1rem;
+  list-style: none;
+  border-bottom: 1px solid #dee2e6;
+}
+
+.cv-tabs-nav .nav-item {
+  margin-bottom: -1px;
+  list-style: none;
+  display: inline-block;
+}
+
+.cv-tabs-nav .nav-link {
+  display: block;
+  padding: 0.5rem 1rem;
+  color: #495057;
+  text-decoration: none;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+  cursor: pointer;
+}
+
+.cv-tabs-nav .nav-link:hover,
+.cv-tabs-nav .nav-link:focus {
+  border-color: #e9ecef #e9ecef #dee2e6;
+  isolation: isolate;
+}
+
+.cv-tabs-nav .nav-link.active {
+  color: #495057;
+  background-color: #fff;
+  border-color: #dee2e6 #dee2e6 #fff;
+}
+
+.cv-tabs-nav .nav-link:focus {
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
+/* Legacy button-based nav (deprecated, kept for compatibility) */
+.cv-tabs-nav-item {
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  font-size: 1rem;
+  color: #6c757d;
+  transition: color 150ms ease, border-color 150ms ease;
+}
+
+.cv-tabs-nav-item:hover {
+  color: #495057;
+  border-bottom-color: #dee2e6;
+}
+
+.cv-tabs-nav-item.active {
+  color: #007bff;
+  border-bottom-color: #007bff;
+  font-weight: 500;
+}
+
+.cv-tabs-nav-item:focus {
+  outline: 2px solid #007bff;
+  outline-offset: 2px;
+}
+
+/* Tab panel base styles */
+cv-tab {
+  display: block;
+}
+
+/* Override visibility for tab panels - use display instead of collapse animation */
+cv-tab.cv-hidden {
+  display: none !important;
+}
+
+cv-tab.cv-visible {
+  display: block !important;
+}
+
+cv-tabgroup {
+  display: block;
+  margin-bottom: 1.5rem;
+}
+
+/* Bottom border line for tab groups */
+.cv-tabgroup-bottom-border {
+  border-bottom: 1px solid #dee2e6;
+  margin-top: 1rem;
+}
+
+/* Tab content wrapper */
+.cv-tab-content {
+  padding: 1rem 0;
+}
 `;
 
     /**
      * Combined core styles for toggles and tabs
      */
-    const CORE_STYLES = `
-${TOGGLE_STYLES}
-
-${TAB_STYLES}
+    const CORE_STYLES = `
+${TOGGLE_STYLES}
+
+${TAB_STYLES}
 `;
     /**
      * Add styles for hiding and showing toggles animations and transitions to the document head
@@ -825,23 +973,10 @@ ${TAB_STYLES}
             this.lastAppliedState = this.cloneState(state);
             const toggles = state.toggles || [];
             const finalToggles = this.visibilityManager.filterVisibleToggles(toggles);
-            // Toggles hide or show relevant toggles
-            this.rootEl.querySelectorAll("[data-cv-toggle], [data-customviews-toggle]").forEach(el => {
-                const category = el.dataset.cvToggle || el.dataset.customviewsToggle;
-                const shouldShow = !!category && finalToggles.includes(category);
-                this.visibilityManager.applyElementVisibility(el, shouldShow);
-            });
-            // Render toggles
-            for (const category of finalToggles) {
-                this.rootEl.querySelectorAll(`[data-cv-toggle="${category}"], [data-customviews-toggle="${category}"]`).forEach(el => {
-                    // if it has an id, then we should render the asset into it
-                    // Support both (data-cv-id) and (data-customviews-id) attributes
-                    const toggleId = el.dataset.cvId || el.dataset.customviewsId;
-                    if (toggleId) {
-                        renderAssetInto(el, toggleId, this.assetsManager);
-                    }
-                });
-            }
+            // Apply toggle visibility
+            ToggleManager.applyToggles(this.rootEl, finalToggles);
+            // Render assets into toggles
+            ToggleManager.renderAssets(this.rootEl, finalToggles, this.assetsManager);
             // Apply tab selections
             TabManager.applySelections(this.rootEl, state.tabs || {}, this.config.tabGroups);
             // Update nav active states (without rebuilding)
@@ -954,52 +1089,6 @@ ${TAB_STYLES}
         }
     }
 
-    class AssetsManager {
-        assets;
-        baseURL;
-        constructor(assets, baseURL = '') {
-            this.assets = assets;
-            this.baseURL = baseURL;
-            if (!this.validate()) {
-                console.warn('Invalid assets:', this.assets);
-            }
-        }
-        // Check each asset has content or src
-        validate() {
-            return Object.values(this.assets).every(a => a.src || a.content);
-        }
-        get(assetId) {
-            const asset = this.assets[assetId];
-            if (!asset)
-                return undefined;
-            // If there's a baseURL and the asset has a src property, prepend the baseURL
-            if (this.baseURL && asset.src) {
-                // Create a shallow copy to avoid mutating the original asset
-                return {
-                    ...asset,
-                    src: this.prependBaseURL(asset.src)
-                };
-            }
-            return asset;
-        }
-        prependBaseURL(path) {
-            // Don't prepend if the path is already absolute (starts with http:// or https://)
-            if (path.startsWith('http://') || path.startsWith('https://')) {
-                return path;
-            }
-            // Ensure baseURL doesn't end with / and path starts with /
-            const cleanBaseURL = this.baseURL.endsWith('/') ? this.baseURL.slice(0, -1) : this.baseURL;
-            const cleanPath = path.startsWith('/') ? path : '/' + path;
-            return cleanBaseURL + cleanPath;
-        }
-        loadFromJSON(json) {
-            this.assets = json;
-        }
-        loadAdditionalAssets(additionalAssets) {
-            this.assets = { ...this.assets, ...additionalAssets };
-        }
-    }
-
     /**
      * Helper function to prepend baseUrl to a path
      * @param path The path to prepend the baseUrl to
@@ -1019,6 +1108,57 @@ ${TAB_STYLES}
         return cleanbaseUrl + cleanPath;
     }
 
+    /**
+     * Custom Elements for Tab Groups and Tabs
+     */
+    /**
+     * <cv-tab> element - represents a single tab panel
+     */
+    class CVTab extends HTMLElement {
+        connectedCallback() {
+            // Element is managed by TabManager
+        }
+    }
+    /**
+     * <cv-tabgroup> element - represents a group of tabs
+     */
+    class CVTabgroup extends HTMLElement {
+        connectedCallback() {
+            // Element is managed by TabManager
+            // Emit ready event after a brief delay to ensure children are parsed
+            setTimeout(() => {
+                const event = new CustomEvent('cv:tabgroup-ready', {
+                    bubbles: true,
+                    detail: { groupId: this.getAttribute('id') }
+                });
+                this.dispatchEvent(event);
+            }, 0);
+        }
+    }
+    /**
+     * <cv-toggle> element - represents a toggleable content block
+     */
+    class CVToggle extends HTMLElement {
+        connectedCallback() {
+            // Element is managed by Core
+        }
+    }
+    /**
+     * Register custom elements
+     */
+    function registerCustomElements() {
+        // Only register if not already defined
+        if (!customElements.get('cv-tab')) {
+            customElements.define('cv-tab', CVTab);
+        }
+        if (!customElements.get('cv-tabgroup')) {
+            customElements.define('cv-tabgroup', CVTabgroup);
+        }
+        if (!customElements.get('cv-toggle')) {
+            customElements.define('cv-toggle', CVToggle);
+        }
+    }
+
     /**
      * Main CustomViews class for initializing and managing custom views
      */
@@ -1029,6 +1169,8 @@ ${TAB_STYLES}
          * @returns Promise resolving to the CustomViewsCore instance or null if initialization fails
          */
         static async init(opts) {
+            // Register custom elements
+            registerCustomElements();
             // Load assets JSON if provided
             let assetsManager;
             const baseURL = opts.baseURL || '';
@@ -1071,627 +1213,644 @@ ${TAB_STYLES}
      * Note: Styles are kept as a TypeScript string for compatibility with the build system.
      * This approach ensures the styles are properly bundled and don't require separate CSS file handling.
      */
-    const WIDGET_STYLES = `
-/* Rounded rectangle widget icon styles */
-.cv-widget-icon {
-  position: fixed;
-  /* Slightly transparent by default so the widget is subtle at the page edge */
-  background: rgba(255, 255, 255, 0.92);
-  color: rgba(0, 0, 0, 0.9);
-  opacity: 0.6;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 18px;
-  font-weight: bold;
-  cursor: pointer;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  z-index: 9998;
-  transition: all 0.3s ease;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-}
-
-.cv-widget-icon:hover {
-  /* Become fully opaque on hover to improve readability */
-  background: rgba(255, 255, 255, 1);
-  color: rgba(0, 0, 0, 1);
-  opacity: 1;
-}
-
-/* Top-right: rounded end on left, sticks out leftward on hover */
-.cv-widget-top-right {
-  top: 20px;
-  right: 0;
-  border-radius: 18px 0 0 18px;
-  padding-left: 8px;
-  justify-content: flex-start;
-}
-
-/* Top-left: rounded end on right, sticks out rightward on hover */
-.cv-widget-top-left {
-  top: 20px;
-  left: 0;
-  border-radius: 0 18px 18px 0;
-  padding-right: 8px;
-  justify-content: flex-end;
-}
-
-/* Bottom-right: rounded end on left, sticks out leftward on hover */
-.cv-widget-bottom-right {
-  bottom: 20px;
-  right: 0;
-  border-radius: 18px 0 0 18px;
-  padding-left: 8px;
-  justify-content: flex-start;
-}
-
-/* Bottom-left: rounded end on right, sticks out rightward on hover */
-.cv-widget-bottom-left {
-  bottom: 20px;
-  left: 0;
-  border-radius: 0 18px 18px 0;
-  padding-right: 8px;
-  justify-content: flex-end;
-}
-
-/* Middle-left: rounded end on right, sticks out rightward on hover */
-.cv-widget-middle-left {
-  top: 50%;
-  left: 0;
-  transform: translateY(-50%);
-  border-radius: 0 18px 18px 0;
-  padding-right: 8px;
-  justify-content: flex-end;
-}
-
-/* Middle-right: rounded end on left, sticks out leftward on hover */
-.cv-widget-middle-right {
-  top: 50%;
-  right: 0;
-  transform: translateY(-50%);
-  border-radius: 18px 0 0 18px;
-  padding-left: 8px;
-  justify-content: flex-start;
-}
-
-.cv-widget-top-right,
-.cv-widget-middle-right,
-.cv-widget-bottom-right,
-.cv-widget-top-left,
-.cv-widget-middle-left,
-.cv-widget-bottom-left {
-  height: 36px;
-  width: 36px;
-}
-
-.cv-widget-middle-right:hover,
-.cv-widget-top-right:hover,
-.cv-widget-bottom-right:hover,
-.cv-widget-top-left:hover,
-.cv-widget-middle-left:hover,
-.cv-widget-bottom-left:hover {
-  width: 55px;
-}
-
-/* Modal content styles */
-.cv-widget-section {
-  margin-bottom: 16px;
-}
-
-.cv-widget-section:last-child {
-  margin-bottom: 0;
-}
-
-.cv-widget-section label {
-  display: block;
-  margin-bottom: 4px;
-  font-weight: 500;
-  color: #555;
-}
-
-.cv-widget-profile-select,
-.cv-widget-state-select {
-  width: 100%;
-  padding: 8px 12px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  background: white;
-  font-size: 14px;
-}
-
-.cv-widget-profile-select:focus,
-.cv-widget-state-select:focus {
-  outline: none;
-  border-color: #007bff;
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
-}
-
-.cv-widget-profile-select:disabled,
-.cv-widget-state-select:disabled {
-  background: #f8f9fa;
-  color: #6c757d;
-  cursor: not-allowed;
-}
-
-.cv-widget-current {
-  margin: 16px 0;
-  padding: 12px;
-  background: #f8f9fa;
-  border-radius: 4px;
-  border-left: 4px solid #007bff;
-}
-
-.cv-widget-current label {
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: #666;
-  margin-bottom: 4px;
-}
-
-.cv-widget-current-view {
-  font-weight: 500;
-  color: #333;
-}
-
-.cv-widget-reset {
-  width: 100%;
-  padding: 8px 16px;
-  background: #dc3545;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.cv-widget-reset:hover {
-  background: #c82333;
-}
-
-.cv-widget-reset:active {
-  background: #bd2130;
-}
-
-/* Responsive design for mobile */
-@media (max-width: 768px) {
-  .cv-widget-top-right,
-  .cv-widget-top-left {
-    top: 10px;
-  }
-
-  .cv-widget-bottom-right,
-  .cv-widget-bottom-left {
-    bottom: 10px;
-  }
-
-  /* All widgets stay flush with screen edges */
-  .cv-widget-top-right,
-  .cv-widget-bottom-right,
-  .cv-widget-middle-right {
-    right: 0;
-  }
-
-  .cv-widget-top-left,
-  .cv-widget-bottom-left,
-  .cv-widget-middle-left {
-    left: 0;
-  }
-
-  /* Slightly smaller on mobile */
-  .cv-widget-icon {
-    width: 60px;
-    height: 32px;
-  }
-
-  .cv-widget-icon:hover {
-    width: 75px;
-  }
-}
-
-/* Modal styles */
-.cv-widget-modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10002;
-  animation: fadeIn 0.2s ease;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-.cv-widget-modal {
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-  max-width: 400px;
-  width: 90vw;
-  max-height: 80vh;
-  overflow-y: auto;
-  animation: slideIn 0.2s ease;
-}
-
-@keyframes slideIn {
-  from { 
-    opacity: 0;
-    transform: scale(0.9) translateY(-20px);
-  }
-  to { 
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-
-.cv-widget-modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid #e9ecef;
-  background: #f8f9fa;
-  border-radius: 8px 8px 0 0;
-}
-
-.cv-widget-modal-header h3 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: #333;
-}
-
-.cv-widget-modal-close {
-  background: none;
-  border: none;
-  font-size: 24px;
-  cursor: pointer;
-  padding: 0;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  color: #666;
-}
-
-.cv-widget-modal-close:hover {
-  background: #e9ecef;
-}
-
-.cv-widget-modal-content {
-  padding: 20px;
-}
-
-.cv-widget-modal-actions {
-  margin-top: 20px;
-  padding-top: 16px;
-  border-top: 1px solid #e9ecef;
-}
-
-.cv-widget-restore {
-  width: 100%;
-  padding: 10px 16px;
-  background: #28a745;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.cv-widget-restore:hover {
-  background: #218838;
-}
-
-.cv-widget-create-state {
-  width: 100%;
-  padding: 10px 16px;
-  background: #007bff;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-  margin-bottom: 10px;
-}
-
-.cv-widget-create-state:hover {
-  background: #0056b3;
-}
-
-/* Dark theme modal styles */
-.cv-widget-theme-dark .cv-widget-modal {
-  background: #2d3748;
-  color: #e2e8f0;
-}
-
-.cv-widget-theme-dark .cv-widget-modal-header {
-  background: #1a202c;
-  border-color: #4a5568;
-}
-
-.cv-widget-theme-dark .cv-widget-modal-header h3 {
-  color: #e2e8f0;
-}
-
-.cv-widget-theme-dark .cv-widget-modal-close {
-  color: #a0aec0;
-}
-
-.cv-widget-theme-dark .cv-widget-modal-close:hover {
-  background: #4a5568;
-}
-
-.cv-widget-theme-dark .cv-widget-modal-actions {
-  border-color: #4a5568;
-}
-
-/* Custom state creator styles */
-.cv-custom-state-modal {
-  max-width: 500px;
-}
-
-.cv-custom-state-form h4 {
-  margin: 20px 0 10px 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-  border-bottom: 1px solid #e9ecef;
-  padding-bottom: 5px;
-}
-
-.cv-custom-state-section {
-  margin-bottom: 16px;
-}
-
-.cv-custom-state-section label {
-  display: block;
-  margin-bottom: 4px;
-  font-weight: 500;
-  color: #555;
-}
-
-.cv-custom-state-input {
-  width: 100%;
-  padding: 8px 12px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  background: white;
-  font-size: 14px;
-}
-
-.cv-custom-state-input:focus {
-  outline: none;
-  border-color: #007bff;
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
-}
-
-.cv-custom-toggles {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 10px;
-}
-
-.cv-custom-state-toggle {
-  display: flex;
-  align-items: center;
-}
-
-.cv-custom-state-toggle label {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  font-weight: normal;
-  margin: 0;
-}
-
-.cv-custom-toggle-checkbox {
-  margin-right: 8px;
-  width: auto;
-}
-
-.cv-tab-groups {
-  margin-top: 20px;
-}
-
-.cv-tab-group-control {
-  margin-bottom: 15px;
-}
-
-.cv-tab-group-control label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: 500;
-  font-size: 14px;
-}
-
-.cv-tab-group-select {
-  width: 100%;
-  padding: 8px 12px;
-  border: 1px solid #ced4da;
-  border-radius: 4px;
-  font-size: 14px;
-  background-color: white;
-  cursor: pointer;
-}
-
-.cv-tab-group-select:focus {
-  outline: none;
-  border-color: #007bff;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-}
-
-.cv-widget-theme-dark .cv-tab-group-select {
-  background-color: #2d3748;
-  border-color: #4a5568;
-  color: #e2e8f0;
-}
-
-.cv-custom-state-actions {
-  display: flex;
-  gap: 10px;
-  margin-top: 20px;
-  padding-top: 16px;
-  border-top: 1px solid #e9ecef;
-}
-
-.cv-custom-state-cancel,
-.cv-custom-state-copy-url {
-  flex: 1;
-  padding: 10px 16px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.cv-custom-state-reset {
-  flex: 1;
-  padding: 10px 16px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-  background: #dc3545;
-  color: white;
-}
-
-.cv-custom-state-reset:hover {
-  background: #c82333;
-}
-
-.cv-custom-state-cancel {
-  background: #6c757d;
-  color: white;
-}
-
-.cv-custom-state-cancel:hover {
-  background: #5a6268;
-}
-
-.cv-custom-state-copy-url {
-  background: #28a745;
-  color: white;
-}
-
-.cv-custom-state-copy-url:hover {
-  background: #218838;
-}
-
-/* Dark theme custom state styles */
-.cv-widget-theme-dark .cv-custom-state-form h4 {
-  color: #e2e8f0;
-  border-color: #4a5568;
-}
-
-.cv-widget-theme-dark .cv-custom-state-section label {
-  color: #a0aec0;
-}
-
-.cv-widget-theme-dark .cv-custom-state-input {
-  background: #1a202c;
-  border-color: #4a5568;
-  color: #e2e8f0;
-}
-
-.cv-widget-theme-dark .cv-custom-state-actions {
-  border-color: #4a5568;
-}
-
-/* Welcome modal styles */
-.cv-welcome-modal {
-  max-width: 500px;
-}
-
-.cv-welcome-content {
-  text-align: center;
-}
-
-.cv-welcome-content p {
-  font-size: 15px;
-  line-height: 1.6;
-  color: #555;
-  margin-bottom: 24px;
-}
-
-.cv-welcome-widget-preview {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  padding: 20px;
-  background: #f8f9fa;
-  border-radius: 8px;
-  margin-bottom: 24px;
-}
-
-.cv-welcome-widget-icon {
-  width: 36px;
-  height: 36px;
-  background: white;
-  color: black;
-  border-radius: 0 18px 18px 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 18px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-.cv-welcome-widget-label {
-  font-size: 14px;
-  color: #666;
-  margin: 0;
-  font-weight: 500;
-}
-
-.cv-welcome-got-it {
-  width: 100%;
-  padding: 12px 24px;
-  background: #007bff;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 16px;
-  font-weight: 600;
-  transition: background 0.2s ease;
-}
-
-.cv-welcome-got-it:hover {
-  background: #0056b3;
-}
-
-.cv-welcome-got-it:active {
-  background: #004494;
-}
-
-/* Dark theme welcome modal styles */
-.cv-widget-theme-dark .cv-welcome-content p {
-  color: #cbd5e0;
-}
-
-.cv-widget-theme-dark .cv-welcome-widget-preview {
-  background: #1a202c;
-}
-
-.cv-widget-theme-dark .cv-welcome-widget-label {
-  color: #a0aec0;
-}
+    const WIDGET_STYLES = `
+/* Rounded rectangle widget icon styles */
+.cv-widget-icon {
+  position: fixed;
+  /* Slightly transparent by default so the widget is subtle at the page edge */
+  background: rgba(255, 255, 255, 0.92);
+  color: rgba(0, 0, 0, 0.9);
+  opacity: 0.6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  font-weight: bold;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 9998;
+  transition: all 0.3s ease;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.cv-widget-icon:hover {
+  /* Become fully opaque on hover to improve readability */
+  background: rgba(255, 255, 255, 1);
+  color: rgba(0, 0, 0, 1);
+  opacity: 1;
+}
+
+/* Top-right: rounded end on left, sticks out leftward on hover */
+.cv-widget-top-right {
+  top: 20px;
+  right: 0;
+  border-radius: 18px 0 0 18px;
+  padding-left: 8px;
+  justify-content: flex-start;
+}
+
+/* Top-left: rounded end on right, sticks out rightward on hover */
+.cv-widget-top-left {
+  top: 20px;
+  left: 0;
+  border-radius: 0 18px 18px 0;
+  padding-right: 8px;
+  justify-content: flex-end;
+}
+
+/* Bottom-right: rounded end on left, sticks out leftward on hover */
+.cv-widget-bottom-right {
+  bottom: 20px;
+  right: 0;
+  border-radius: 18px 0 0 18px;
+  padding-left: 8px;
+  justify-content: flex-start;
+}
+
+/* Bottom-left: rounded end on right, sticks out rightward on hover */
+.cv-widget-bottom-left {
+  bottom: 20px;
+  left: 0;
+  border-radius: 0 18px 18px 0;
+  padding-right: 8px;
+  justify-content: flex-end;
+}
+
+/* Middle-left: rounded end on right, sticks out rightward on hover */
+.cv-widget-middle-left {
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  border-radius: 0 18px 18px 0;
+  padding-right: 8px;
+  justify-content: flex-end;
+}
+
+/* Middle-right: rounded end on left, sticks out leftward on hover */
+.cv-widget-middle-right {
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  border-radius: 18px 0 0 18px;
+  padding-left: 8px;
+  justify-content: flex-start;
+}
+
+.cv-widget-top-right,
+.cv-widget-middle-right,
+.cv-widget-bottom-right,
+.cv-widget-top-left,
+.cv-widget-middle-left,
+.cv-widget-bottom-left {
+  height: 36px;
+  width: 36px;
+}
+
+.cv-widget-middle-right:hover,
+.cv-widget-top-right:hover,
+.cv-widget-bottom-right:hover,
+.cv-widget-top-left:hover,
+.cv-widget-middle-left:hover,
+.cv-widget-bottom-left:hover {
+  width: 55px;
+}
+
+/* Modal content styles */
+.cv-widget-section {
+  margin-bottom: 16px;
+}
+
+.cv-widget-section:last-child {
+  margin-bottom: 0;
+}
+
+.cv-widget-section label {
+  display: block;
+  margin-bottom: 4px;
+  font-weight: 500;
+  color: #555;
+}
+
+.cv-widget-profile-select,
+.cv-widget-state-select {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: white;
+  font-size: 14px;
+}
+
+.cv-widget-profile-select:focus,
+.cv-widget-state-select:focus {
+  outline: none;
+  border-color: #007bff;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+}
+
+.cv-widget-profile-select:disabled,
+.cv-widget-state-select:disabled {
+  background: #f8f9fa;
+  color: #6c757d;
+  cursor: not-allowed;
+}
+
+.cv-widget-current {
+  margin: 16px 0;
+  padding: 12px;
+  background: #f8f9fa;
+  border-radius: 4px;
+  border-left: 4px solid #007bff;
+}
+
+.cv-widget-current label {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #666;
+  margin-bottom: 4px;
+}
+
+.cv-widget-current-view {
+  font-weight: 500;
+  color: #333;
+}
+
+.cv-widget-reset {
+  width: 100%;
+  padding: 8px 16px;
+  background: #dc3545;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.cv-widget-reset:hover {
+  background: #c82333;
+}
+
+.cv-widget-reset:active {
+  background: #bd2130;
+}
+
+/* Responsive design for mobile */
+@media (max-width: 768px) {
+  .cv-widget-top-right,
+  .cv-widget-top-left {
+    top: 10px;
+  }
+
+  .cv-widget-bottom-right,
+  .cv-widget-bottom-left {
+    bottom: 10px;
+  }
+
+  /* All widgets stay flush with screen edges */
+  .cv-widget-top-right,
+  .cv-widget-bottom-right,
+  .cv-widget-middle-right {
+    right: 0;
+  }
+
+  .cv-widget-top-left,
+  .cv-widget-bottom-left,
+  .cv-widget-middle-left {
+    left: 0;
+  }
+
+  /* Slightly smaller on mobile */
+  .cv-widget-icon {
+    width: 60px;
+    height: 32px;
+  }
+
+  .cv-widget-icon:hover {
+    width: 75px;
+  }
+}
+
+/* Modal styles */
+.cv-widget-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10002;
+  animation: fadeIn 0.2s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.cv-widget-modal {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  max-width: 400px;
+  width: 90vw;
+  max-height: 80vh;
+  overflow-y: auto;
+  animation: slideIn 0.2s ease;
+}
+
+@keyframes slideIn {
+  from { 
+    opacity: 0;
+    transform: scale(0.9) translateY(-20px);
+  }
+  to { 
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.cv-widget-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e9ecef;
+  background: #f8f9fa;
+  border-radius: 8px 8px 0 0;
+}
+
+.cv-widget-modal-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.cv-widget-modal-close {
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  color: #666;
+  line-height: 1;
+  transition: all 0.2s ease;
+}
+
+.cv-widget-modal-close:hover {
+  background: #e9ecef;
+  color: #333;
+}
+
+.cv-widget-modal-content {
+  padding: 20px;
+}
+
+.cv-widget-modal-actions {
+  margin-top: 20px;
+  padding-top: 16px;
+  border-top: 1px solid #e9ecef;
+}
+
+.cv-widget-restore {
+  width: 100%;
+  padding: 10px 16px;
+  background: #28a745;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.cv-widget-restore:hover {
+  background: #218838;
+}
+
+.cv-widget-create-state {
+  width: 100%;
+  padding: 10px 16px;
+  background: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 10px;
+}
+
+.cv-widget-create-state:hover {
+  background: #0056b3;
+}
+
+/* Dark theme modal styles */
+.cv-widget-theme-dark .cv-widget-modal {
+  background: #2d3748;
+  color: #e2e8f0;
+}
+
+.cv-widget-theme-dark .cv-widget-modal-header {
+  background: #1a202c;
+  border-color: #4a5568;
+}
+
+.cv-widget-theme-dark .cv-widget-modal-header h3 {
+  color: #e2e8f0;
+}
+
+.cv-widget-theme-dark .cv-widget-modal-close {
+  color: #a0aec0;
+}
+
+.cv-widget-theme-dark .cv-widget-modal-close:hover {
+  background: #4a5568;
+  color: #e2e8f0;
+}
+
+.cv-widget-theme-dark .cv-widget-modal-actions {
+  border-color: #4a5568;
+}
+
+/* Custom state creator styles */
+.cv-custom-state-modal {
+  max-width: 500px;
+}
+
+.cv-custom-state-form h4 {
+  margin: 20px 0 10px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  border-bottom: 1px solid #e9ecef;
+  padding-bottom: 5px;
+}
+
+.cv-custom-state-form p {
+  font-size: 15px;
+  line-height: 1.6;
+  color: #555;
+  margin-bottom: 24px;
+  text-align: justify;
+}
+
+.cv-custom-state-section {
+  margin-bottom: 16px;
+}
+
+.cv-custom-state-section label {
+  display: block;
+  margin-bottom: 4px;
+  font-weight: 500;
+  color: #555;
+}
+
+.cv-custom-state-input {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: white;
+  font-size: 14px;
+}
+
+.cv-custom-state-input:focus {
+  outline: none;
+  border-color: #007bff;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+}
+
+.cv-custom-toggles {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 10px;
+}
+
+.cv-custom-state-toggle {
+  display: flex;
+  align-items: center;
+}
+
+.cv-custom-state-toggle label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-weight: normal;
+  margin: 0;
+}
+
+.cv-custom-toggle-checkbox {
+  margin-right: 8px;
+  width: auto;
+}
+
+.cv-tab-groups {
+  margin-top: 20px;
+}
+
+.cv-tab-group-control {
+  margin-bottom: 15px;
+}
+
+.cv-tab-group-control label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.cv-tab-group-select {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+  font-size: 14px;
+  background-color: white;
+  cursor: pointer;
+}
+
+.cv-tab-group-select:focus {
+  outline: none;
+  border-color: #007bff;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+.cv-widget-theme-dark .cv-tab-group-select {
+  background-color: #2d3748;
+  border-color: #4a5568;
+  color: #e2e8f0;
+}
+
+.cv-custom-state-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 20px;
+  padding-top: 16px;
+  border-top: 1px solid #e9ecef;
+}
+
+.cv-custom-state-cancel,
+.cv-custom-state-copy-url {
+  flex: 1;
+  padding: 10px 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.cv-custom-state-reset {
+  flex: 1;
+  padding: 10px 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  background: #dc3545;
+  color: white;
+}
+
+.cv-custom-state-reset:hover {
+  background: #c82333;
+}
+
+.cv-custom-state-cancel {
+  background: #6c757d;
+  color: white;
+}
+
+.cv-custom-state-cancel:hover {
+  background: #5a6268;
+}
+
+.cv-custom-state-copy-url {
+  background: #28a745;
+  color: white;
+}
+
+.cv-custom-state-copy-url:hover {
+  background: #218838;
+}
+
+/* Dark theme custom state styles */
+.cv-widget-theme-dark .cv-custom-state-form h4 {
+  color: #e2e8f0;
+  border-color: #4a5568;
+}
+
+.cv-widget-theme-dark .cv-custom-state-form p {
+  color: #cbd5e0;
+}
+
+.cv-widget-theme-dark .cv-custom-state-section label {
+  color: #a0aec0;
+}
+
+.cv-widget-theme-dark .cv-custom-state-input {
+  background: #1a202c;
+  border-color: #4a5568;
+  color: #e2e8f0;
+}
+
+.cv-widget-theme-dark .cv-custom-state-actions {
+  border-color: #4a5568;
+}
+
+/* Welcome modal styles */
+.cv-welcome-modal {
+  max-width: 500px;
+}
+
+.cv-welcome-content {
+  text-align: center;
+}
+
+.cv-welcome-content p {
+  font-size: 15px;
+  line-height: 1.6;
+  color: #555;
+  margin-bottom: 24px;
+  text-align: justify;
+}
+
+.cv-welcome-widget-preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 20px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  margin-bottom: 24px;
+}
+
+.cv-welcome-widget-icon {
+  width: 36px;
+  height: 36px;
+  background: white;
+  color: black;
+  border-radius: 0 18px 18px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.cv-welcome-widget-label {
+  font-size: 14px;
+  color: #666;
+  margin: 0;
+  font-weight: 500;
+}
+
+.cv-welcome-got-it {
+  width: 100%;
+  padding: 12px 24px;
+  background: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 600;
+  transition: background 0.2s ease;
+}
+
+.cv-welcome-got-it:hover {
+  background: #0056b3;
+}
+
+.cv-welcome-got-it:active {
+  background: #004494;
+}
+
+/* Dark theme welcome modal styles */
+.cv-widget-theme-dark .cv-welcome-content p {
+  color: #cbd5e0;
+}
+
+.cv-widget-theme-dark .cv-welcome-widget-preview {
+  background: #1a202c;
+}
+
+.cv-widget-theme-dark .cv-welcome-widget-label {
+  color: #a0aec0;
+}
 `;
     /**
      * Inject widget styles into the document head
@@ -1726,8 +1885,8 @@ ${TAB_STYLES}
                 title: options.title || 'Custom Views',
                 description: options.description || 'Toggle different content sections to customize your view. Changes are applied instantly and the URL will be updated for sharing.',
                 showWelcome: options.showWelcome ?? false,
-                welcomeTitle: options.welcomeTitle || 'Welcome to Custom Views!',
-                welcomeMessage: options.welcomeMessage || 'This website uses Custom Views to let you personalize your experience. Use the widget on the side (⚙) to show or hide different content sections based on your preferences. Your selections will be saved and can be shared via URL.',
+                welcomeTitle: options.welcomeTitle || 'This website uses Custom Views',
+                welcomeMessage: options.welcomeMessage || 'This site uses Custom Views to let you personalize your experience. Use the widget on the side (⚙) to show or hide different content sections based on your preferences. Your selections will be saved and can be shared via URL.',
                 showTabGroups: options.showTabGroups ?? true
             };
             // No external state manager to initialize
@@ -1807,13 +1966,13 @@ ${TAB_STYLES}
             this.modal.className = 'cv-widget-modal-overlay';
             this.applyThemeToModal();
             const toggleControls = toggles.length
-                ? toggles.map(toggle => `
-        <div class="cv-custom-state-toggle">
-          <label>
-            <input type="checkbox" class="cv-custom-toggle-checkbox" data-toggle="${toggle}" />
-            ${this.formatToggleName(toggle)}
-          </label>
-        </div>
+                ? toggles.map(toggle => `
+        <div class="cv-custom-state-toggle">
+          <label>
+            <input type="checkbox" class="cv-custom-toggle-checkbox" data-toggle="${toggle}" />
+            ${this.formatToggleName(toggle)}
+          </label>
+        </div>
       `).join('')
                 : `<p class="cv-no-toggles">No configurable sections available.</p>`;
             // Get tab groups
@@ -1822,46 +1981,46 @@ ${TAB_STYLES}
             if (this.options.showTabGroups && tabGroups && tabGroups.length > 0) {
                 const tabGroupControls = tabGroups.map(group => {
                     const options = group.tabs.map(tab => `<option value="${tab.id}">${tab.label || tab.id}</option>`).join('');
-                    return `
-          <div class="cv-tab-group-control">
-            <label for="tab-group-${group.id}">${group.label || group.id}</label>
-            <select id="tab-group-${group.id}" class="cv-tab-group-select" data-group-id="${group.id}">
-              ${options}
-            </select>
-          </div>
+                    return `
+          <div class="cv-tab-group-control">
+            <label for="tab-group-${group.id}">${group.label || group.id}</label>
+            <select id="tab-group-${group.id}" class="cv-tab-group-select" data-group-id="${group.id}">
+              ${options}
+            </select>
+          </div>
         `;
                 }).join('');
-                tabGroupsHTML = `
-        <h4>Tab Groups</h4>
-        <div class="cv-tab-groups">
-          ${tabGroupControls}
-        </div>
+                tabGroupsHTML = `
+        <h4>Tab Groups</h4>
+        <div class="cv-tab-groups">
+          ${tabGroupControls}
+        </div>
       `;
             }
-            this.modal.innerHTML = `
-      <div class="cv-widget-modal cv-custom-state-modal">
-        <div class="cv-widget-modal-header">
-          <h3>Customize View</h3>
-          <button class="cv-widget-modal-close" aria-label="Close modal">X</button>
-        </div>
-        <div class="cv-widget-modal-content">
-          <div class="cv-custom-state-form">
-            <p>${this.options.description}</p>
-            
-            <h4>Content Sections</h4>
-            <div class="cv-custom-toggles">
-              ${toggleControls}
-            </div>
-            
-            ${tabGroupsHTML}
-            
-            <div class="cv-custom-state-actions">
-              ${this.options.showReset ? `<button class="cv-custom-state-reset">Reset to Default</button>` : ''}
-              <button class="cv-custom-state-copy-url">Copy Shareable URL</button>
-            </div>
-          </div>
-        </div>
-      </div>
+            this.modal.innerHTML = `
+      <div class="cv-widget-modal cv-custom-state-modal">
+        <div class="cv-widget-modal-header">
+          <h3>Customize View</h3>
+          <button class="cv-widget-modal-close" aria-label="Close modal">×</button>
+        </div>
+        <div class="cv-widget-modal-content">
+          <div class="cv-custom-state-form">
+            <p>${this.options.description}</p>
+            
+            <h4>Content Sections</h4>
+            <div class="cv-custom-toggles">
+              ${toggleControls}
+            </div>
+            
+            ${tabGroupsHTML}
+            
+            <div class="cv-custom-state-actions">
+              ${this.options.showReset ? `<button class="cv-custom-state-reset">Reset to Default</button>` : ''}
+              <button class="cv-custom-state-copy-url">Copy Shareable URL</button>
+            </div>
+          </div>
+        </div>
+      </div>
     `;
             document.body.appendChild(this.modal);
             this.attachStateModalEventListeners();
@@ -2046,25 +2205,25 @@ ${TAB_STYLES}
             this.modal = document.createElement('div');
             this.modal.className = 'cv-widget-modal-overlay cv-welcome-modal-overlay';
             this.applyThemeToModal();
-            this.modal.innerHTML = `
-      <div class="cv-widget-modal cv-welcome-modal">
-        <div class="cv-widget-modal-header">
-          <h3>${this.options.welcomeTitle}</h3>
-          <button class="cv-widget-modal-close" aria-label="Close modal">×</button>
-        </div>
-        <div class="cv-widget-modal-content">
-          <div class="cv-welcome-content">
-            <p>${this.options.welcomeMessage}</p>
-            
-            <div class="cv-welcome-widget-preview">
-              <div class="cv-welcome-widget-icon">⚙</div>
-              <p class="cv-welcome-widget-label">Look for this widget on the side of the screen</p>
-            </div>
-            
-            <button class="cv-welcome-got-it">Got it!</button>
-          </div>
-        </div>
-      </div>
+            this.modal.innerHTML = `
+      <div class="cv-widget-modal cv-welcome-modal">
+        <div class="cv-widget-modal-header">
+          <h3>${this.options.welcomeTitle}</h3>
+          <button class="cv-widget-modal-close" aria-label="Close modal">×</button>
+        </div>
+        <div class="cv-widget-modal-content">
+          <div class="cv-welcome-content">
+            <p>${this.options.welcomeMessage}</p>
+            
+            <div class="cv-welcome-widget-preview">
+              <div class="cv-welcome-widget-icon">⚙</div>
+              <p class="cv-welcome-widget-label">Look for this widget on the side of the screen</p>
+            </div>
+            
+            <button class="cv-welcome-got-it">Got it!</button>
+          </div>
+        </div>
+      </div>
     `;
             document.body.appendChild(this.modal);
             this.attachWelcomeModalEventListeners();
@@ -2106,46 +2265,6 @@ ${TAB_STYLES}
         }
     }
 
-    /**
-     * Custom Elements for Tab Groups and Tabs
-     */
-    /**
-     * <cv-tab> element - represents a single tab panel
-     */
-    class CVTab extends HTMLElement {
-        connectedCallback() {
-            // Element is managed by TabManager
-        }
-    }
-    /**
-     * <cv-tabgroup> element - represents a group of tabs
-     */
-    class CVTabgroup extends HTMLElement {
-        connectedCallback() {
-            // Element is managed by TabManager
-            // Emit ready event after a brief delay to ensure children are parsed
-            setTimeout(() => {
-                const event = new CustomEvent('cv:tabgroup-ready', {
-                    bubbles: true,
-                    detail: { groupId: this.getAttribute('id') }
-                });
-                this.dispatchEvent(event);
-            }, 0);
-        }
-    }
-    /**
-     * Register custom elements
-     */
-    function registerCustomElements() {
-        // Only register if not already defined
-        if (!customElements.get('cv-tab')) {
-            customElements.define('cv-tab', CVTab);
-        }
-        if (!customElements.get('cv-tabgroup')) {
-            customElements.define('cv-tabgroup', CVTabgroup);
-        }
-    }
-
     /**
      * Initialize CustomViews from script tag attributes and config file
      * This function handles the automatic initialization of CustomViews when included via script tag
@@ -2174,22 +2293,20 @@ ${TAB_STYLES}
                 return;
             }
             window.__customViewsInitInProgress = true;
-            // Register custom elements early
-            registerCustomElements();
             try {
                 // Find the script tag
                 let scriptTag = document.currentScript;
                 // Fallback if currentScript is not available (executed after page load)
                 if (!scriptTag) {
                     // Try to find the script tag by looking for our script
-                    const scripts = document.querySelectorAll('script[src*="custom-views"]');
+                    const scripts = document.querySelectorAll('script[src*="@customviews-js"]');
                     if (scripts.length > 0) {
                         // Find the most specific match (to avoid matching other custom-views scripts)
                         for (let i = 0; i < scripts.length; i++) {
                             const script = scripts[i];
                             const src = script.getAttribute('src') || '';
-                            // Look for .min.js or .js at the end
-                            if (src.match(/custom-views(\.min)?\.js($|\?)/)) {
+                            // Look for .min.js or .js at the end, or the package root
+                            if (src.match(/@customviews-js\/customviews(\.min)?\.js($|\?)/) || src.includes('@customviews-js/customviews')) {
                                 scriptTag = script;
                                 break;
                             }