lightview 2.0.8 → 2.1.0

package/components/actions/modal.js

@@ -15,8 +15,8 @@ import '../daisyui.js';
  * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
  */
 const Modal = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
-    const LVX = window.LightviewX || {};
+    const { tags } = globalThis.Lightview || {};
+    const LVX = globalThis.LightviewX || {};
 
     if (!tags) return null;
 
@@ -86,7 +86,7 @@ const Modal = (props = {}, ...children) => {
  * Modal Box - the content container
  */
 Modal.Box = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     const { class: className = '', ...rest } = props;
@@ -101,7 +101,7 @@ Modal.Box = (props = {}, ...children) => {
  * Modal Action - container for action buttons  
  */
 Modal.Action = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     const { class: className = '', ...rest } = props;
@@ -116,7 +116,7 @@ Modal.Action = (props = {}, ...children) => {
  * Modal Backdrop - click to close
  */
 Modal.Backdrop = (props = {}) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     return tags.form({ method: 'dialog', class: 'modal-backdrop' },
@@ -138,9 +138,9 @@ Modal.close = (id) => {
     document.getElementById(id)?.close?.();
 };
 
-window.Lightview.tags.Modal = Modal;
-window.Lightview.tags['Modal.Box'] = Modal.Box;
-window.Lightview.tags['Modal.Action'] = Modal.Action;
-window.Lightview.tags['Modal.Backdrop'] = Modal.Backdrop;
+globalThis.Lightview.tags.Modal = Modal;
+globalThis.Lightview.tags['Modal.Box'] = Modal.Box;
+globalThis.Lightview.tags['Modal.Action'] = Modal.Action;
+globalThis.Lightview.tags['Modal.Backdrop'] = Modal.Backdrop;
 
 export default Modal;

package/components/actions/swap.js

@@ -13,8 +13,8 @@ import '../daisyui.js';
  * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
  */
 const Swap = (props = {}, ...children) => {
-    const { tags, signal } = window.Lightview || {};
-    const LVX = window.LightviewX || {};
+    const { tags, signal } = globalThis.Lightview || {};
+    const LVX = globalThis.LightviewX || {};
 
     if (!tags) return null;
 
@@ -34,8 +34,9 @@ const Swap = (props = {}, ...children) => {
     else if (effect === 'flip') classes.push('swap-flip');
     if (className) classes.push(className);
 
-    // Handle reactive active state
-    const isActive = typeof active === 'function' ? active : () => active;
+    // Handle internal state for non-reactive/uncontrolled usage
+    const internalActive = signal(active);
+    const isActive = typeof active === 'function' ? active : () => internalActive.value;
 
     const swapEl = label({
         class: () => {
@@ -49,7 +50,11 @@ const Swap = (props = {}, ...children) => {
             type: 'checkbox',
             checked: isActive,
             onchange: (e) => {
-                if (onChange) onChange(e.target.checked);
+                const checked = e.target.checked;
+                if (typeof active !== 'function') {
+                    internalActive.value = checked;
+                }
+                if (onChange) onChange(checked);
             }
         }),
         ...children
@@ -84,7 +89,7 @@ const Swap = (props = {}, ...children) => {
  * Swap On - visible when active
  */
 Swap.On = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     const { class: className = '', ...rest } = props;
@@ -99,7 +104,7 @@ Swap.On = (props = {}, ...children) => {
  * Swap Off - visible when inactive
  */
 Swap.Off = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     const { class: className = '', ...rest } = props;
@@ -110,9 +115,27 @@ Swap.Off = (props = {}, ...children) => {
     }, ...children);
 };
 
-const tags = window.Lightview.tags;
+const tags = globalThis.Lightview.tags;
 tags.Swap = Swap;
 tags['Swap.On'] = Swap.On;
 tags['Swap.Off'] = Swap.Off;
 
+// Register as Custom Element using customElementWrapper
+if (globalThis.LightviewX && typeof customElements !== 'undefined') {
+    const SwapElement = globalThis.LightviewX.customElementWrapper(Swap, {
+        attributeMap: {
+            active: Boolean,
+            effect: String
+        },
+        childElements: {
+            'on': Swap.On,
+            'off': Swap.Off
+        }
+    });
+
+    if (!customElements.get('lv-swap')) {
+        customElements.define('lv-swap', SwapElement);
+    }
+}
+
 export default Swap;

package/components/daisyui.js

@@ -3,7 +3,7 @@
  * This module ensures DaisyUI CSS is loaded and provides utilities for components
  */
 
-const DAISYUI_CDN = 'https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css';
+const DAISYUI_CDN = 'https://cdn.jsdelivr.net/npm/daisyui@5.5.14/daisyui.min.css';
 const TAILWIND_CDN = 'https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4';
 
 let daisyLoaded = false;

package/components/data-display/accordion.js

@@ -13,8 +13,8 @@ import '../daisyui.js';
  * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
  */
 const Accordion = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
-    const LVX = window.LightviewX || {};
+    const { tags } = globalThis.Lightview || {};
+    const LVX = globalThis.LightviewX || {};
 
     if (!tags) return null;
 
@@ -61,7 +61,7 @@ const Accordion = (props = {}, ...children) => {
  * Accordion Item
  */
 Accordion.Item = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     const { div, input } = tags;
@@ -93,7 +93,7 @@ Accordion.Item = (props = {}, ...children) => {
  * Accordion Title
  */
 Accordion.Title = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     const { class: className = '', ...rest } = props;
@@ -108,7 +108,7 @@ Accordion.Title = (props = {}, ...children) => {
  * Accordion Content
  */
 Accordion.Content = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     const { class: className = '', ...rest } = props;
@@ -119,7 +119,7 @@ Accordion.Content = (props = {}, ...children) => {
     }, ...children);
 };
 
-const tags = window.Lightview.tags;
+const tags = globalThis.Lightview.tags;
 tags.Accordion = Accordion;
 tags['Accordion.Item'] = Accordion.Item;
 tags['Accordion.Title'] = Accordion.Title;

package/components/data-display/alert.js

@@ -15,8 +15,8 @@ import '../daisyui.js';
  * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
  */
 const Alert = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
-    const LVX = window.LightviewX || {};
+    const { tags } = globalThis.Lightview || {};
+    const LVX = globalThis.LightviewX || {};
 
     if (!tags) return null;
 
@@ -78,7 +78,7 @@ const Alert = (props = {}, ...children) => {
 };
 
 function getAlertIcon(type) {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     const icons = {
@@ -99,11 +99,21 @@ function getAlertIcon(type) {
     });
 }
 
-window.Lightview.tags.Alert = Alert;
+globalThis.Lightview.tags.Alert = Alert;
+
+// Register as Custom Element using customElementWrapper
+if (globalThis.LightviewX && typeof customElements !== 'undefined') {
+    const AlertElement = globalThis.LightviewX.customElementWrapper(Alert, {
+        attributeMap: {
+            color: String,
+            soft: Boolean,
+            dash: Boolean,
+            outline: Boolean,
+            icon: String
+        },
+        childElements: {} // No child components for Alert
+    });
 
-// Register as Custom Element
-if (window.LightviewX?.createCustomElement) {
-    const AlertElement = window.LightviewX.createCustomElement(Alert);
     if (!customElements.get('lv-alert')) {
         customElements.define('lv-alert', AlertElement);
     }

package/components/data-display/avatar.js

@@ -20,8 +20,8 @@ import '../daisyui.js';
  * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
  */
 const Avatar = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
-    const LVX = window.LightviewX || {};
+    const { tags } = globalThis.Lightview || {};
+    const LVX = globalThis.LightviewX || {};
 
     if (!tags) return null;
 
@@ -142,7 +142,7 @@ const Avatar = (props = {}, ...children) => {
  * Avatar Group
  */
 Avatar.Group = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     const { class: className = '', ...rest } = props;
@@ -153,17 +153,17 @@ Avatar.Group = (props = {}, ...children) => {
     }, ...children);
 };
 
-const tags = window.Lightview.tags;
+const tags = globalThis.Lightview.tags;
 tags.Avatar = Avatar;
 tags['Avatar.Group'] = Avatar.Group;
 
 // Register as Custom Elements
-if (window.LightviewX?.createCustomElement) {
+if (globalThis.LightviewX?.createCustomElement) {
     if (!customElements.get('lv-avatar')) {
-        customElements.define('lv-avatar', window.LightviewX.createCustomElement(Avatar));
+        customElements.define('lv-avatar', globalThis.LightviewX.createCustomElement(Avatar));
     }
     if (!customElements.get('lv-avatar-group')) {
-        customElements.define('lv-avatar-group', window.LightviewX.createCustomElement(Avatar.Group));
+        customElements.define('lv-avatar-group', globalThis.LightviewX.createCustomElement(Avatar.Group));
     }
 }
 

package/components/data-display/badge.js

@@ -14,8 +14,8 @@ import '../daisyui.js';
  * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
  */
 const Badge = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
-    const LVX = window.LightviewX || {};
+    const { tags } = globalThis.Lightview || {};
+    const LVX = globalThis.LightviewX || {};
 
     if (!tags) return null;
 
@@ -69,11 +69,19 @@ const Badge = (props = {}, ...children) => {
     return badgeEl;
 };
 
-window.Lightview.tags.Badge = Badge;
+globalThis.Lightview.tags.Badge = Badge;
+
+// Register as Custom Element using customElementWrapper
+if (globalThis.LightviewX && typeof customElements !== 'undefined') {
+    const BadgeElement = globalThis.LightviewX.customElementWrapper(Badge, {
+        attributeMap: {
+            color: String,
+            size: String,
+            variant: String
+        },
+        childElements: {} // No child components for Badge, uses slot
+    });
 
-// Register as Custom Element
-if (window.LightviewX?.createCustomElement) {
-    const BadgeElement = window.LightviewX.createCustomElement(Badge);
     if (!customElements.get('lv-badge')) {
         customElements.define('lv-badge', BadgeElement);
     }

package/components/data-display/card.js

@@ -15,8 +15,8 @@ import '../daisyui.js';
  * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
  */
 const Card = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
-    const LVX = window.LightviewX || {};
+    const { tags } = globalThis.Lightview || {};
+    const LVX = globalThis.LightviewX || {};
 
     if (!tags) return null;
 
@@ -78,7 +78,7 @@ const Card = (props = {}, ...children) => {
  * Card Body
  */
 Card.Body = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     const { class: className = '', ...rest } = props;
@@ -93,7 +93,7 @@ Card.Body = (props = {}, ...children) => {
  * Card Title
  */
 Card.Title = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     const { class: className = '', ...rest } = props;
@@ -108,7 +108,7 @@ Card.Title = (props = {}, ...children) => {
  * Card Actions
  */
 Card.Actions = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     const {
@@ -127,7 +127,7 @@ Card.Actions = (props = {}, ...children) => {
  * Card Figure (for images)
  */
 Card.Figure = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     const { src, alt = '', class: className = '', ...rest } = props;
@@ -141,7 +141,7 @@ Card.Figure = (props = {}, ...children) => {
     return tags.figure({ class: className, ...rest }, ...children);
 };
 
-const tags = window.Lightview.tags;
+const tags = globalThis.Lightview.tags;
 tags.Card = Card;
 tags['Card.Body'] = Card.Body;
 tags['Card.Title'] = Card.Title;

package/components/data-display/carousel.js

@@ -14,8 +14,8 @@ import '../daisyui.js';
  * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
  */
 const Carousel = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
-    const LVX = window.LightviewX || {};
+    const { tags } = globalThis.Lightview || {};
+    const LVX = globalThis.LightviewX || {};
 
     if (!tags) return null;
 
@@ -70,7 +70,7 @@ const Carousel = (props = {}, ...children) => {
  * Carousel Item
  */
 Carousel.Item = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     const { id, src, alt = '', class: className = '', ...rest } = props;
@@ -87,7 +87,7 @@ Carousel.Item = (props = {}, ...children) => {
     return tags.div({ id, class: classes.join(' '), ...rest }, ...children);
 };
 
-const tags = window.Lightview.tags;
+const tags = globalThis.Lightview.tags;
 tags.Carousel = Carousel;
 tags['Carousel.Item'] = Carousel.Item;
 

package/components/data-display/chart.js

@@ -35,8 +35,8 @@ if (typeof document !== 'undefined') {
 }
 
 const Chart = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
-    const LVX = window.LightviewX || {};
+    const { tags } = globalThis.Lightview || {};
+    const LVX = globalThis.LightviewX || {};
 
     if (!tags) return null;
 
@@ -115,7 +115,7 @@ const Chart = (props = {}, ...children) => {
  * Chart Head (thead)
  */
 Chart.Head = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
     return tags.thead(props, ...children);
 };
@@ -124,7 +124,7 @@ Chart.Head = (props = {}, ...children) => {
  * Chart Body (tbody)
  */
 Chart.Body = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
     return tags.tbody(props, ...children);
 };
@@ -133,7 +133,7 @@ Chart.Body = (props = {}, ...children) => {
  * Chart Row (tr)
  */
 Chart.Row = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
     return tags.tr(props, ...children);
 };
@@ -142,7 +142,7 @@ Chart.Row = (props = {}, ...children) => {
  * Chart Label (th scope="row")
  */
 Chart.Label = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     const { scope = 'row', ...rest } = props;
@@ -159,7 +159,7 @@ Chart.Label = (props = {}, ...children) => {
  * @param {string} props.tooltip - Tooltip text
  */
 Chart.Data = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     const {
@@ -208,7 +208,7 @@ Chart.Data = (props = {}, ...children) => {
     }, ...content);
 };
 
-const tags = window.Lightview.tags;
+const tags = globalThis.Lightview.tags;
 
 tags.Chart = Chart;
 tags['Chart.Head'] = Chart.Head;

package/components/data-display/chat.js

@@ -12,8 +12,8 @@ import '../daisyui.js';
  * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
  */
 const Chat = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
-    const LVX = window.LightviewX || {};
+    const { tags } = globalThis.Lightview || {};
+    const LVX = globalThis.LightviewX || {};
 
     if (!tags) return null;
 
@@ -60,7 +60,7 @@ const Chat = (props = {}, ...children) => {
  * Chat Image
  */
 Chat.Image = (props = {}) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     const { src, alt = 'Avatar', class: className = '', ...rest } = props;
@@ -76,7 +76,7 @@ Chat.Image = (props = {}) => {
  * Chat Header
  */
 Chat.Header = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     const { class: className = '', ...rest } = props;
@@ -91,7 +91,7 @@ Chat.Header = (props = {}, ...children) => {
  * Chat Bubble
  */
 Chat.Bubble = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     const { color, class: className = '', ...rest } = props;
@@ -107,7 +107,7 @@ Chat.Bubble = (props = {}, ...children) => {
  * Chat Footer
  */
 Chat.Footer = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     const { class: className = '', ...rest } = props;
@@ -118,7 +118,7 @@ Chat.Footer = (props = {}, ...children) => {
     }, ...children);
 };
 
-const tags = window.Lightview.tags;
+const tags = globalThis.Lightview.tags;
 tags.Chat = Chat;
 tags['Chat.Image'] = Chat.Image;
 tags['Chat.Header'] = Chat.Header;

package/components/data-display/collapse.js

@@ -14,8 +14,8 @@ import '../daisyui.js';
  * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
  */
 const Collapse = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
-    const LVX = window.LightviewX || {};
+    const { tags } = globalThis.Lightview || {};
+    const LVX = globalThis.LightviewX || {};
 
     if (!tags) return null;
 
@@ -69,7 +69,7 @@ const Collapse = (props = {}, ...children) => {
  * Collapse Title
  */
 Collapse.Title = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     const { class: className = '', ...rest } = props;
@@ -84,7 +84,7 @@ Collapse.Title = (props = {}, ...children) => {
  * Collapse Content
  */
 Collapse.Content = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     const { class: className = '', ...rest } = props;
@@ -95,7 +95,7 @@ Collapse.Content = (props = {}, ...children) => {
     }, ...children);
 };
 
-const tags = window.Lightview.tags;
+const tags = globalThis.Lightview.tags;
 tags.Collapse = Collapse;
 tags['Collapse.Title'] = Collapse.Title;
 tags['Collapse.Content'] = Collapse.Content;

package/components/data-display/countdown.js

@@ -12,8 +12,8 @@ import '../daisyui.js';
  * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
  */
 const Countdown = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
-    const LVX = window.LightviewX || {};
+    const { tags } = globalThis.Lightview || {};
+    const LVX = globalThis.LightviewX || {};
 
     if (!tags) return null;
 
@@ -64,6 +64,6 @@ const Countdown = (props = {}, ...children) => {
     return countdownEl;
 };
 
-window.Lightview.tags.Countdown = Countdown;
+globalThis.Lightview.tags.Countdown = Countdown;
 
 export default Countdown;

package/components/data-display/diff.js

@@ -12,8 +12,8 @@ import '../daisyui.js';
  * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
  */
 const Diff = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
-    const LVX = window.LightviewX || {};
+    const { tags } = globalThis.Lightview || {};
+    const LVX = globalThis.LightviewX || {};
 
     if (!tags) return null;
 
@@ -60,7 +60,7 @@ const Diff = (props = {}, ...children) => {
  * Diff Item 1
  */
 Diff.Item1 = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     const { src, alt = '', class: className = '', ...rest } = props;
@@ -78,7 +78,7 @@ Diff.Item1 = (props = {}, ...children) => {
  * Diff Item 2
  */
 Diff.Item2 = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     const { src, alt = '', class: className = '', ...rest } = props;
@@ -96,13 +96,13 @@ Diff.Item2 = (props = {}, ...children) => {
  * Diff Resizer
  */
 Diff.Resizer = (props = {}) => {
-    const { tags } = window.Lightview || {};
+    const { tags } = globalThis.Lightview || {};
     if (!tags) return null;
 
     return tags.div({ class: 'diff-resizer', ...props });
 };
 
-const tags = window.Lightview.tags;
+const tags = globalThis.Lightview.tags;
 tags.Diff = Diff;
 tags['Diff.Item1'] = Diff.Item1;
 tags['Diff.Item2'] = Diff.Item2;

package/components/data-display/kbd.js

@@ -12,8 +12,8 @@ import '../daisyui.js';
  * @param {boolean} props.useShadow - Render in Shadow DOM with isolated DaisyUI styles
  */
 const Kbd = (props = {}, ...children) => {
-    const { tags } = window.Lightview || {};
-    const LVX = window.LightviewX || {};
+    const { tags } = globalThis.Lightview || {};
+    const LVX = globalThis.LightviewX || {};
 
     if (!tags) return null;
 
@@ -52,11 +52,17 @@ const Kbd = (props = {}, ...children) => {
     return kbdEl;
 };
 
-window.Lightview.tags.Kbd = Kbd;
+globalThis.Lightview.tags.Kbd = Kbd;
+
+// Register as Custom Element using customElementWrapper
+if (globalThis.LightviewX && typeof customElements !== 'undefined') {
+    const KbdElement = globalThis.LightviewX.customElementWrapper(Kbd, {
+        attributeMap: {
+            size: String
+        },
+        childElements: {} // No child components, uses slot for key text
+    });
 
-// Register as Custom Element
-if (window.LightviewX?.createCustomElement) {
-    const KbdElement = window.LightviewX.createCustomElement(Kbd);
     if (!customElements.get('lv-kbd')) {
         customElements.define('lv-kbd', KbdElement);
     }