le-kit 0.3.2 → 0.3.3

package/dist/collection/global/app.js

@@ -142,6 +142,23 @@ let leKitConfig = {
      * 2. Or set this to point to where the manifest is served
      */
     manifestFile: '/custom-elements.json',
+    /**
+     * Base path for loading assets (icons, etc.).
+     *
+     * Default: '' (empty - uses Stencil's getAssetPath)
+     *
+     * When set, assets will be loaded from: `${assetBasePath}/icons/${name}.json`
+     *
+     * For apps using le-kit, you should:
+     * 1. Copy the assets from node_modules/le-kit/dist/assets to your public folder
+     * 2. Set this to point to where the assets are served (e.g., '/le-kit-assets')
+     *
+     * @example
+     * ```ts
+     * configureLeKit({ assetBasePath: '/le-kit-assets' });
+     * ```
+     */
+    assetBasePath: '',
 };
 /**
  * Configure le-kit global settings.
@@ -164,4 +181,11 @@ export function configureLeKit(config) {
 export function getLeKitConfig() {
     return leKitConfig;
 }
+/**
+ * Get the configured asset base path.
+ * Used internally by components that load assets.
+ */
+export function getAssetBasePath() {
+    return leKitConfig.assetBasePath;
+}
 //# sourceMappingURL=app.js.map

package/dist/collection/global/app.js.map

@@ -1 +1 @@
-{"version":3,"file":"app.js","sourceRoot":"","sources":["../../src/global/app.ts"],"names":[],"mappings":"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","sourcesContent":["import { setMode } from '@stencil/core';\n\nexport type LeKitMode = 'default' | 'admin' | string;\nexport type LeKitTheme = 'default' | 'dark' | string;\n\n/**\n * Global mode initialization for le-kit components.\n *\n * Mode inheritance works as follows:\n * 1. Check the element's own `mode` attribute\n * 2. Traverse up the DOM to find a parent with `mode` attribute\n * 3. Check the document root element (html) for `mode` attribute\n * 4. Fall back to 'default'\n *\n * This allows setting mode at any level:\n * - `<html mode=\"admin\">` - all components in admin mode\n * - `<le-card mode=\"admin\">` - this card and its children in admin mode\n */\nfunction initializeMode() {\n  setMode((el: HTMLElement): LeKitMode => {\n    // 1. Check element's own mode attribute\n    const ownMode = el.getAttribute('mode');\n    if (ownMode) {\n      return ownMode as LeKitMode;\n    }\n\n    // 2. Traverse up the DOM tree to find inherited mode\n    let parent = el.parentElement;\n    while (parent) {\n      const parentMode = parent.getAttribute('mode');\n      if (parentMode) {\n        return parentMode as LeKitMode;\n      }\n      parent = parent.parentElement;\n    }\n\n    // 3. Check document root element\n    const rootMode = document.documentElement.getAttribute('mode');\n    if (rootMode) {\n      return rootMode as LeKitMode;\n    }\n\n    // 4. Default mode\n    return 'default';\n  });\n}\n\n// Default export for Stencil global script\nexport default initializeMode;\n\n/**\n * Helper function to get the current mode for an element.\n * Can be used programmatically in components.\n * \n * This function traverses both regular DOM and shadow DOM boundaries\n * to find the nearest mode attribute.\n */\nexport function getMode(el: HTMLElement): LeKitMode {\n  // Check element's own mode\n  const ownMode = el.getAttribute('mode');\n  if (ownMode) {\n    return ownMode as LeKitMode;\n  }\n\n  // Traverse up DOM, crossing shadow boundaries\n  let current: Node | null = el;\n  while (current) {\n    // Try parent element first\n    if (current instanceof Element && current.parentElement) {\n      current = current.parentElement;\n      const mode = (current as HTMLElement).getAttribute?.('mode');\n      if (mode) {\n        return mode as LeKitMode;\n      }\n    } else {\n      // No parent element - check if we're in a shadow root\n      const root = current.getRootNode();\n      if (root instanceof ShadowRoot) {\n        // Cross the shadow boundary to the host element\n        current = root.host;\n        const mode = (current as HTMLElement).getAttribute?.('mode');\n        if (mode) {\n          return mode as LeKitMode;\n        }\n      } else {\n        // We've reached the document root\n        break;\n      }\n    }\n  }\n\n  // Check document root\n  const rootMode = document.documentElement.getAttribute('mode');\n  if (rootMode) {\n    return rootMode as LeKitMode;\n  }\n\n  return 'default';\n}\n\n/**\n * Helper function to get the current theme for an element.\n * Theme inheritance works the same as mode - cascades through DOM.\n */\nexport function getTheme(el: HTMLElement): LeKitTheme {\n  // Check element's own theme\n  const ownTheme = el.getAttribute('theme');\n  if (ownTheme) {\n    return ownTheme as LeKitTheme;\n  }\n\n  // Traverse up DOM\n  let parent = el.parentElement;\n  while (parent) {\n    const parentTheme = parent.getAttribute('theme');\n    if (parentTheme) {\n      return parentTheme as LeKitTheme;\n    }\n    parent = parent.parentElement;\n  }\n\n  // Check root\n  const rootTheme = document.documentElement.getAttribute('theme');\n  if (rootTheme) {\n    return rootTheme as LeKitTheme;\n  }\n\n  return 'default';\n}\n\n/**\n * Helper function to set mode on the document root.\n * Useful for switching all components to admin mode.\n */\nexport function setGlobalMode(mode: LeKitMode): void {\n  document.documentElement.setAttribute('mode', mode);\n}\n\n/**\n * Helper function to set theme on the document root.\n * Useful for switching all components to a different theme.\n */\nexport function setGlobalTheme(theme: LeKitTheme): void {\n  document.documentElement.setAttribute('theme', theme);\n}\n\n/**\n * Global configuration for le-kit\n */\nlet leKitConfig = {\n  /**\n   * URL to the custom-elements.json manifest.\n   * Used by admin components (le-component, le-slot) to load component metadata.\n   * \n   * Default: '/custom-elements.json' (served from app root)\n   * \n   * For apps using le-kit, you may need to:\n   * 1. Copy the manifest from node_modules/le-kit/custom-elements.json to your public folder\n   * 2. Or set this to point to where the manifest is served\n   */\n  manifestFile: '/custom-elements.json',\n};\n\n/**\n * Configure le-kit global settings.\n * \n * @example\n * ```ts\n * import { configureLeKit } from 'le-kit';\n * \n * configureLeKit({\n *   manifestFile: 'custom-elements.json'\n * });\n * ```\n */\nexport function configureLeKit(config: Partial<typeof leKitConfig>): void {\n  leKitConfig = { ...leKitConfig, ...config };\n}\n\n/**\n * Get the current le-kit configuration.\n */\nexport function getLeKitConfig(): typeof leKitConfig {\n  return leKitConfig;\n}\n"]}
+{"version":3,"file":"app.js","sourceRoot":"","sources":["../../src/global/app.ts"],"names":[],"mappings":"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","sourcesContent":["import { setMode } from '@stencil/core';\n\nexport type LeKitMode = 'default' | 'admin' | string;\nexport type LeKitTheme = 'default' | 'dark' | string;\n\n/**\n * Global mode initialization for le-kit components.\n *\n * Mode inheritance works as follows:\n * 1. Check the element's own `mode` attribute\n * 2. Traverse up the DOM to find a parent with `mode` attribute\n * 3. Check the document root element (html) for `mode` attribute\n * 4. Fall back to 'default'\n *\n * This allows setting mode at any level:\n * - `<html mode=\"admin\">` - all components in admin mode\n * - `<le-card mode=\"admin\">` - this card and its children in admin mode\n */\nfunction initializeMode() {\n  setMode((el: HTMLElement): LeKitMode => {\n    // 1. Check element's own mode attribute\n    const ownMode = el.getAttribute('mode');\n    if (ownMode) {\n      return ownMode as LeKitMode;\n    }\n\n    // 2. Traverse up the DOM tree to find inherited mode\n    let parent = el.parentElement;\n    while (parent) {\n      const parentMode = parent.getAttribute('mode');\n      if (parentMode) {\n        return parentMode as LeKitMode;\n      }\n      parent = parent.parentElement;\n    }\n\n    // 3. Check document root element\n    const rootMode = document.documentElement.getAttribute('mode');\n    if (rootMode) {\n      return rootMode as LeKitMode;\n    }\n\n    // 4. Default mode\n    return 'default';\n  });\n}\n\n// Default export for Stencil global script\nexport default initializeMode;\n\n/**\n * Helper function to get the current mode for an element.\n * Can be used programmatically in components.\n *\n * This function traverses both regular DOM and shadow DOM boundaries\n * to find the nearest mode attribute.\n */\nexport function getMode(el: HTMLElement): LeKitMode {\n  // Check element's own mode\n  const ownMode = el.getAttribute('mode');\n  if (ownMode) {\n    return ownMode as LeKitMode;\n  }\n\n  // Traverse up DOM, crossing shadow boundaries\n  let current: Node | null = el;\n  while (current) {\n    // Try parent element first\n    if (current instanceof Element && current.parentElement) {\n      current = current.parentElement;\n      const mode = (current as HTMLElement).getAttribute?.('mode');\n      if (mode) {\n        return mode as LeKitMode;\n      }\n    } else {\n      // No parent element - check if we're in a shadow root\n      const root = current.getRootNode();\n      if (root instanceof ShadowRoot) {\n        // Cross the shadow boundary to the host element\n        current = root.host;\n        const mode = (current as HTMLElement).getAttribute?.('mode');\n        if (mode) {\n          return mode as LeKitMode;\n        }\n      } else {\n        // We've reached the document root\n        break;\n      }\n    }\n  }\n\n  // Check document root\n  const rootMode = document.documentElement.getAttribute('mode');\n  if (rootMode) {\n    return rootMode as LeKitMode;\n  }\n\n  return 'default';\n}\n\n/**\n * Helper function to get the current theme for an element.\n * Theme inheritance works the same as mode - cascades through DOM.\n */\nexport function getTheme(el: HTMLElement): LeKitTheme {\n  // Check element's own theme\n  const ownTheme = el.getAttribute('theme');\n  if (ownTheme) {\n    return ownTheme as LeKitTheme;\n  }\n\n  // Traverse up DOM\n  let parent = el.parentElement;\n  while (parent) {\n    const parentTheme = parent.getAttribute('theme');\n    if (parentTheme) {\n      return parentTheme as LeKitTheme;\n    }\n    parent = parent.parentElement;\n  }\n\n  // Check root\n  const rootTheme = document.documentElement.getAttribute('theme');\n  if (rootTheme) {\n    return rootTheme as LeKitTheme;\n  }\n\n  return 'default';\n}\n\n/**\n * Helper function to set mode on the document root.\n * Useful for switching all components to admin mode.\n */\nexport function setGlobalMode(mode: LeKitMode): void {\n  document.documentElement.setAttribute('mode', mode);\n}\n\n/**\n * Helper function to set theme on the document root.\n * Useful for switching all components to a different theme.\n */\nexport function setGlobalTheme(theme: LeKitTheme): void {\n  document.documentElement.setAttribute('theme', theme);\n}\n\n/**\n * Global configuration for le-kit\n */\nlet leKitConfig = {\n  /**\n   * URL to the custom-elements.json manifest.\n   * Used by admin components (le-component, le-slot) to load component metadata.\n   *\n   * Default: '/custom-elements.json' (served from app root)\n   *\n   * For apps using le-kit, you may need to:\n   * 1. Copy the manifest from node_modules/le-kit/custom-elements.json to your public folder\n   * 2. Or set this to point to where the manifest is served\n   */\n  manifestFile: '/custom-elements.json',\n\n  /**\n   * Base path for loading assets (icons, etc.).\n   *\n   * Default: '' (empty - uses Stencil's getAssetPath)\n   *\n   * When set, assets will be loaded from: `${assetBasePath}/icons/${name}.json`\n   *\n   * For apps using le-kit, you should:\n   * 1. Copy the assets from node_modules/le-kit/dist/assets to your public folder\n   * 2. Set this to point to where the assets are served (e.g., '/le-kit-assets')\n   *\n   * @example\n   * ```ts\n   * configureLeKit({ assetBasePath: '/le-kit-assets' });\n   * ```\n   */\n  assetBasePath: '',\n};\n\n/**\n * Configure le-kit global settings.\n *\n * @example\n * ```ts\n * import { configureLeKit } from 'le-kit';\n *\n * configureLeKit({\n *   manifestFile: 'custom-elements.json'\n * });\n * ```\n */\nexport function configureLeKit(config: Partial<typeof leKitConfig>): void {\n  leKitConfig = { ...leKitConfig, ...config };\n}\n\n/**\n * Get the current le-kit configuration.\n */\nexport function getLeKitConfig(): typeof leKitConfig {\n  return leKitConfig;\n}\n\n/**\n * Get the configured asset base path.\n * Used internally by components that load assets.\n */\nexport function getAssetBasePath(): string {\n  return leKitConfig.assetBasePath;\n}\n"]}

package/dist/collection/index.js

@@ -10,7 +10,7 @@
 export { generateId, parseCommaSeparated, slotHasContent } from './utils/utils';
 // Global mode and theme helpers
 export { setAssetPath } from '@stencil/core';
-export { getMode, setGlobalMode, getTheme, setGlobalTheme, configureLeKit, getLeKitConfig, } from './global/app';
+export { getMode, setGlobalMode, getTheme, setGlobalTheme, configureLeKit, getLeKitConfig, getAssetBasePath, } from './global/app';
 // Popup/dialog programmatic API
 export { leAlert, leConfirm, lePrompt } from './components/le-popup/le-popup.api';
 //# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,kBAAkB;AAClB,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAEhF,gCAAgC;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EACL,OAAO,EACP,aAAa,EACb,QAAQ,EACR,cAAc,EACd,cAAc,EACd,cAAc,GACf,MAAM,cAAc,CAAC;AAGtB,gCAAgC;AAChC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC","sourcesContent":["/**\n * @fileoverview Entry point for le-kit component library\n *\n * This file exports utilities, types, and helper functions.\n * Components are auto-registered and available as custom elements.\n *\n * @see README.md for usage instructions\n */\n\n// Utility exports\nexport { generateId, parseCommaSeparated, slotHasContent } from './utils/utils';\n\n// Global mode and theme helpers\nexport { setAssetPath } from '@stencil/core';\nexport {\n  getMode,\n  setGlobalMode,\n  getTheme,\n  setGlobalTheme,\n  configureLeKit,\n  getLeKitConfig,\n} from './global/app';\nexport type { LeKitMode, LeKitTheme } from './global/app';\n\n// Popup/dialog programmatic API\nexport { leAlert, leConfirm, lePrompt } from './components/le-popup/le-popup.api';\nexport type { PopupOptions } from './components/le-popup/le-popup.api';\nexport type { PopupResult, PopupType, PopupPosition } from './components/le-popup/le-popup';\n\n// Type exports\nexport type * from './components.d.ts';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,kBAAkB;AAClB,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAEhF,gCAAgC;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EACL,OAAO,EACP,aAAa,EACb,QAAQ,EACR,cAAc,EACd,cAAc,EACd,cAAc,EACd,gBAAgB,GACjB,MAAM,cAAc,CAAC;AAGtB,gCAAgC;AAChC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC","sourcesContent":["/**\n * @fileoverview Entry point for le-kit component library\n *\n * This file exports utilities, types, and helper functions.\n * Components are auto-registered and available as custom elements.\n *\n * @see README.md for usage instructions\n */\n\n// Utility exports\nexport { generateId, parseCommaSeparated, slotHasContent } from './utils/utils';\n\n// Global mode and theme helpers\nexport { setAssetPath } from '@stencil/core';\nexport {\n  getMode,\n  setGlobalMode,\n  getTheme,\n  setGlobalTheme,\n  configureLeKit,\n  getLeKitConfig,\n  getAssetBasePath,\n} from './global/app';\nexport type { LeKitMode, LeKitTheme } from './global/app';\n\n// Popup/dialog programmatic API\nexport { leAlert, leConfirm, lePrompt } from './components/le-popup/le-popup.api';\nexport type { PopupOptions } from './components/le-popup/le-popup.api';\nexport type { PopupResult, PopupType, PopupPosition } from './components/le-popup/le-popup';\n\n// Type exports\nexport type * from './components.d.ts';\n"]}

package/dist/components/app.js

@@ -0,0 +1,194 @@
+import { setMode } from '@stencil/core/internal/client';
+
+/**
+ * Global mode initialization for le-kit components.
+ *
+ * Mode inheritance works as follows:
+ * 1. Check the element's own `mode` attribute
+ * 2. Traverse up the DOM to find a parent with `mode` attribute
+ * 3. Check the document root element (html) for `mode` attribute
+ * 4. Fall back to 'default'
+ *
+ * This allows setting mode at any level:
+ * - `<html mode="admin">` - all components in admin mode
+ * - `<le-card mode="admin">` - this card and its children in admin mode
+ */
+function initializeMode() {
+    setMode((el) => {
+        // 1. Check element's own mode attribute
+        const ownMode = el.getAttribute('mode');
+        if (ownMode) {
+            return ownMode;
+        }
+        // 2. Traverse up the DOM tree to find inherited mode
+        let parent = el.parentElement;
+        while (parent) {
+            const parentMode = parent.getAttribute('mode');
+            if (parentMode) {
+                return parentMode;
+            }
+            parent = parent.parentElement;
+        }
+        // 3. Check document root element
+        const rootMode = document.documentElement.getAttribute('mode');
+        if (rootMode) {
+            return rootMode;
+        }
+        // 4. Default mode
+        return 'default';
+    });
+}
+/**
+ * Helper function to get the current mode for an element.
+ * Can be used programmatically in components.
+ *
+ * This function traverses both regular DOM and shadow DOM boundaries
+ * to find the nearest mode attribute.
+ */
+function getMode(el) {
+    // Check element's own mode
+    const ownMode = el.getAttribute('mode');
+    if (ownMode) {
+        return ownMode;
+    }
+    // Traverse up DOM, crossing shadow boundaries
+    let current = el;
+    while (current) {
+        // Try parent element first
+        if (current instanceof Element && current.parentElement) {
+            current = current.parentElement;
+            const mode = current.getAttribute?.('mode');
+            if (mode) {
+                return mode;
+            }
+        }
+        else {
+            // No parent element - check if we're in a shadow root
+            const root = current.getRootNode();
+            if (root instanceof ShadowRoot) {
+                // Cross the shadow boundary to the host element
+                current = root.host;
+                const mode = current.getAttribute?.('mode');
+                if (mode) {
+                    return mode;
+                }
+            }
+            else {
+                // We've reached the document root
+                break;
+            }
+        }
+    }
+    // Check document root
+    const rootMode = document.documentElement.getAttribute('mode');
+    if (rootMode) {
+        return rootMode;
+    }
+    return 'default';
+}
+/**
+ * Helper function to get the current theme for an element.
+ * Theme inheritance works the same as mode - cascades through DOM.
+ */
+function getTheme(el) {
+    // Check element's own theme
+    const ownTheme = el.getAttribute('theme');
+    if (ownTheme) {
+        return ownTheme;
+    }
+    // Traverse up DOM
+    let parent = el.parentElement;
+    while (parent) {
+        const parentTheme = parent.getAttribute('theme');
+        if (parentTheme) {
+            return parentTheme;
+        }
+        parent = parent.parentElement;
+    }
+    // Check root
+    const rootTheme = document.documentElement.getAttribute('theme');
+    if (rootTheme) {
+        return rootTheme;
+    }
+    return 'default';
+}
+/**
+ * Helper function to set mode on the document root.
+ * Useful for switching all components to admin mode.
+ */
+function setGlobalMode(mode) {
+    document.documentElement.setAttribute('mode', mode);
+}
+/**
+ * Helper function to set theme on the document root.
+ * Useful for switching all components to a different theme.
+ */
+function setGlobalTheme(theme) {
+    document.documentElement.setAttribute('theme', theme);
+}
+/**
+ * Global configuration for le-kit
+ */
+let leKitConfig = {
+    /**
+     * URL to the custom-elements.json manifest.
+     * Used by admin components (le-component, le-slot) to load component metadata.
+     *
+     * Default: '/custom-elements.json' (served from app root)
+     *
+     * For apps using le-kit, you may need to:
+     * 1. Copy the manifest from node_modules/le-kit/custom-elements.json to your public folder
+     * 2. Or set this to point to where the manifest is served
+     */
+    manifestFile: '/custom-elements.json',
+    /**
+     * Base path for loading assets (icons, etc.).
+     *
+     * Default: '' (empty - uses Stencil's getAssetPath)
+     *
+     * When set, assets will be loaded from: `${assetBasePath}/icons/${name}.json`
+     *
+     * For apps using le-kit, you should:
+     * 1. Copy the assets from node_modules/le-kit/dist/assets to your public folder
+     * 2. Set this to point to where the assets are served (e.g., '/le-kit-assets')
+     *
+     * @example
+     * ```ts
+     * configureLeKit({ assetBasePath: '/le-kit-assets' });
+     * ```
+     */
+    assetBasePath: '',
+};
+/**
+ * Configure le-kit global settings.
+ *
+ * @example
+ * ```ts
+ * import { configureLeKit } from 'le-kit';
+ *
+ * configureLeKit({
+ *   manifestFile: 'custom-elements.json'
+ * });
+ * ```
+ */
+function configureLeKit(config) {
+    leKitConfig = { ...leKitConfig, ...config };
+}
+/**
+ * Get the current le-kit configuration.
+ */
+function getLeKitConfig() {
+    return leKitConfig;
+}
+/**
+ * Get the configured asset base path.
+ * Used internally by components that load assets.
+ */
+function getAssetBasePath() {
+    return leKitConfig.assetBasePath;
+}
+
+export { getTheme as a, setGlobalTheme as b, configureLeKit as c, getLeKitConfig as d, getAssetBasePath as e, getMode as g, initializeMode as i, setGlobalMode as s };
+//# sourceMappingURL=app.js.map
+
+//# sourceMappingURL=app.js.map

package/dist/components/app.js.map

@@ -0,0 +1 @@
+{"file":"app.js","mappings":"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","names":[],"sources":["src/global/app.ts"],"sourcesContent":["import { setMode } from '@stencil/core';\n\nexport type LeKitMode = 'default' | 'admin' | string;\nexport type LeKitTheme = 'default' | 'dark' | string;\n\n/**\n * Global mode initialization for le-kit components.\n *\n * Mode inheritance works as follows:\n * 1. Check the element's own `mode` attribute\n * 2. Traverse up the DOM to find a parent with `mode` attribute\n * 3. Check the document root element (html) for `mode` attribute\n * 4. Fall back to 'default'\n *\n * This allows setting mode at any level:\n * - `<html mode=\"admin\">` - all components in admin mode\n * - `<le-card mode=\"admin\">` - this card and its children in admin mode\n */\nfunction initializeMode() {\n  setMode((el: HTMLElement): LeKitMode => {\n    // 1. Check element's own mode attribute\n    const ownMode = el.getAttribute('mode');\n    if (ownMode) {\n      return ownMode as LeKitMode;\n    }\n\n    // 2. Traverse up the DOM tree to find inherited mode\n    let parent = el.parentElement;\n    while (parent) {\n      const parentMode = parent.getAttribute('mode');\n      if (parentMode) {\n        return parentMode as LeKitMode;\n      }\n      parent = parent.parentElement;\n    }\n\n    // 3. Check document root element\n    const rootMode = document.documentElement.getAttribute('mode');\n    if (rootMode) {\n      return rootMode as LeKitMode;\n    }\n\n    // 4. Default mode\n    return 'default';\n  });\n}\n\n// Default export for Stencil global script\nexport default initializeMode;\n\n/**\n * Helper function to get the current mode for an element.\n * Can be used programmatically in components.\n *\n * This function traverses both regular DOM and shadow DOM boundaries\n * to find the nearest mode attribute.\n */\nexport function getMode(el: HTMLElement): LeKitMode {\n  // Check element's own mode\n  const ownMode = el.getAttribute('mode');\n  if (ownMode) {\n    return ownMode as LeKitMode;\n  }\n\n  // Traverse up DOM, crossing shadow boundaries\n  let current: Node | null = el;\n  while (current) {\n    // Try parent element first\n    if (current instanceof Element && current.parentElement) {\n      current = current.parentElement;\n      const mode = (current as HTMLElement).getAttribute?.('mode');\n      if (mode) {\n        return mode as LeKitMode;\n      }\n    } else {\n      // No parent element - check if we're in a shadow root\n      const root = current.getRootNode();\n      if (root instanceof ShadowRoot) {\n        // Cross the shadow boundary to the host element\n        current = root.host;\n        const mode = (current as HTMLElement).getAttribute?.('mode');\n        if (mode) {\n          return mode as LeKitMode;\n        }\n      } else {\n        // We've reached the document root\n        break;\n      }\n    }\n  }\n\n  // Check document root\n  const rootMode = document.documentElement.getAttribute('mode');\n  if (rootMode) {\n    return rootMode as LeKitMode;\n  }\n\n  return 'default';\n}\n\n/**\n * Helper function to get the current theme for an element.\n * Theme inheritance works the same as mode - cascades through DOM.\n */\nexport function getTheme(el: HTMLElement): LeKitTheme {\n  // Check element's own theme\n  const ownTheme = el.getAttribute('theme');\n  if (ownTheme) {\n    return ownTheme as LeKitTheme;\n  }\n\n  // Traverse up DOM\n  let parent = el.parentElement;\n  while (parent) {\n    const parentTheme = parent.getAttribute('theme');\n    if (parentTheme) {\n      return parentTheme as LeKitTheme;\n    }\n    parent = parent.parentElement;\n  }\n\n  // Check root\n  const rootTheme = document.documentElement.getAttribute('theme');\n  if (rootTheme) {\n    return rootTheme as LeKitTheme;\n  }\n\n  return 'default';\n}\n\n/**\n * Helper function to set mode on the document root.\n * Useful for switching all components to admin mode.\n */\nexport function setGlobalMode(mode: LeKitMode): void {\n  document.documentElement.setAttribute('mode', mode);\n}\n\n/**\n * Helper function to set theme on the document root.\n * Useful for switching all components to a different theme.\n */\nexport function setGlobalTheme(theme: LeKitTheme): void {\n  document.documentElement.setAttribute('theme', theme);\n}\n\n/**\n * Global configuration for le-kit\n */\nlet leKitConfig = {\n  /**\n   * URL to the custom-elements.json manifest.\n   * Used by admin components (le-component, le-slot) to load component metadata.\n   *\n   * Default: '/custom-elements.json' (served from app root)\n   *\n   * For apps using le-kit, you may need to:\n   * 1. Copy the manifest from node_modules/le-kit/custom-elements.json to your public folder\n   * 2. Or set this to point to where the manifest is served\n   */\n  manifestFile: '/custom-elements.json',\n\n  /**\n   * Base path for loading assets (icons, etc.).\n   *\n   * Default: '' (empty - uses Stencil's getAssetPath)\n   *\n   * When set, assets will be loaded from: `${assetBasePath}/icons/${name}.json`\n   *\n   * For apps using le-kit, you should:\n   * 1. Copy the assets from node_modules/le-kit/dist/assets to your public folder\n   * 2. Set this to point to where the assets are served (e.g., '/le-kit-assets')\n   *\n   * @example\n   * ```ts\n   * configureLeKit({ assetBasePath: '/le-kit-assets' });\n   * ```\n   */\n  assetBasePath: '',\n};\n\n/**\n * Configure le-kit global settings.\n *\n * @example\n * ```ts\n * import { configureLeKit } from 'le-kit';\n *\n * configureLeKit({\n *   manifestFile: 'custom-elements.json'\n * });\n * ```\n */\nexport function configureLeKit(config: Partial<typeof leKitConfig>): void {\n  leKitConfig = { ...leKitConfig, ...config };\n}\n\n/**\n * Get the current le-kit configuration.\n */\nexport function getLeKitConfig(): typeof leKitConfig {\n  return leKitConfig;\n}\n\n/**\n * Get the configured asset base path.\n * Used internally by components that load assets.\n */\nexport function getAssetBasePath(): string {\n  return leKitConfig.assetBasePath;\n}\n"],"version":3}