@easemate/web-kit 0.1.0

package/build/elements/tooltip/index.js

@@ -0,0 +1,183 @@
+import "../popover/index.js";
+import { html } from 'lit-html';
+import { Component } from '~/decorators/Component';
+import { OutsideClick, requestOutsideClickUpdate } from '~/decorators/OutsideClick';
+import { Prop } from '~/decorators/Prop';
+import { Query } from '~/decorators/Query';
+@Component({
+    tag: 'ease-tooltip',
+    shadowMode: 'open',
+    styles: `
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+
+    ease-popover::part(content) {
+      inset: auto;
+    }
+
+    [data-tooltip-content] {
+      background-color: var(--ease-tooltip-background, var(--color-gray-400));
+      color: var(--ease-tooltip-color, var(--color-gray-900));
+      padding: var(--ease-tooltip-padding, 4px 8px);
+      border-radius: var(--ease-tooltip-radius, 4px);
+      font-family: var(--ease-font-family, inherit);
+      font-size: var(--ease-tooltip-font-size, 10px);
+      font-weight: var(--ease-tooltip-font-weight, 500);
+      max-width: var(--ease-tooltip-max-width, 220px);
+      box-shadow: var(--ease-tooltip-shadow, 0 2px 8px rgba(0, 0, 0, 0.2));
+      display: none;
+    }
+
+    :host([open]) [data-tooltip-content] {
+      display: block;
+    }
+  `
+})
+export class Tooltip extends HTMLElement {
+    #hoverTimer = null;
+    #trigger = null;
+    #content = null;
+    @Prop({
+        type: Boolean,
+        reflect: true,
+        onChange(next, previous) {
+            this._handleOpenChange(next, previous);
+        }
+    })
+    accessor open = false;
+    @Prop({ type: Number, reflect: true, defaultValue: 300 })
+    accessor delay = 300;
+    @Prop({ reflect: true, defaultValue: 'top-center' })
+    accessor placement = 'top-center';
+    @Query('[slot="trigger"]')
+    accessor triggerElement;
+    @Query('[data-tooltip-content]')
+    accessor contentElement;
+    disconnectedCallback() {
+        this.#clearTimer();
+        if (this.#trigger) {
+            this.#trigger.removeEventListener('mouseenter', this.#handleEnter);
+            this.#trigger.removeEventListener('mouseleave', this.#handleLeave);
+            this.#trigger.removeEventListener('focusin', this.#handleFocusIn);
+            this.#trigger.removeEventListener('focusout', this.#handleFocusOut);
+            this.#trigger = null;
+        }
+        if (this.#content) {
+            this.#content.removeEventListener('mouseenter', this.#handleEnter);
+            this.#content.removeEventListener('mouseleave', this.#handleLeave);
+            this.#content = null;
+        }
+    }
+    afterRender() {
+        this.#updateListeners();
+        const content = this.contentElement;
+        const isVisible = this.open;
+        if (content) {
+            content.setAttribute('role', 'tooltip');
+            content.setAttribute('aria-hidden', isVisible ? 'false' : 'true');
+            content.dataset.open = isVisible ? 'true' : 'false';
+            content.hidden = !isVisible;
+        }
+    }
+    render() {
+        return html `
+      <ease-popover .placement=${this.placement} ?open=${this.open}>
+        <slot name="trigger" slot="trigger"></slot>
+        <div
+          data-tooltip-content
+          role="tooltip"
+          data-open=${this.open ? 'true' : 'false'}
+          ?hidden=${!this.open}
+        >
+          <slot></slot>
+        </div>
+      </ease-popover>
+    `;
+    }
+    _handleOpenChange(next, previous) {
+        if (next === previous) {
+            return;
+        }
+        if (!next) {
+            this.#clearTimer();
+        }
+        requestOutsideClickUpdate(this);
+    }
+    @OutsideClick({
+        content: (host) => host.contentElement,
+        triggers: (host) => [host.triggerElement],
+        disabled: (host) => !host.open
+    })
+    handleOutsideDismiss() {
+        if (!this.open) {
+            return;
+        }
+        this.#clearTimer();
+        this.open = false;
+    }
+    #clearTimer() {
+        if (this.#hoverTimer !== null) {
+            window.clearTimeout(this.#hoverTimer);
+            this.#hoverTimer = null;
+        }
+    }
+    #startTimer(callback) {
+        this.#clearTimer();
+        const wait = this.delay ?? 0;
+        if (wait > 0) {
+            this.#hoverTimer = window.setTimeout(callback, wait);
+        }
+        else {
+            callback();
+        }
+    }
+    #handleEnter = () => {
+        this.#startTimer(() => {
+            this.open = true;
+        });
+    };
+    #handleLeave = () => {
+        this.#clearTimer();
+        this.open = false;
+    };
+    #handleFocusIn = () => {
+        this.#clearTimer();
+        this.open = true;
+    };
+    #handleFocusOut = () => {
+        this.#clearTimer();
+        this.open = false;
+    };
+    #updateListeners() {
+        const trigger = this.triggerElement;
+        const content = this.contentElement ?? null;
+        if (trigger !== this.#trigger) {
+            if (this.#trigger) {
+                this.#trigger.removeEventListener('mouseenter', this.#handleEnter);
+                this.#trigger.removeEventListener('mouseleave', this.#handleLeave);
+                this.#trigger.removeEventListener('focusin', this.#handleFocusIn);
+                this.#trigger.removeEventListener('focusout', this.#handleFocusOut);
+            }
+            if (trigger) {
+                trigger.addEventListener('mouseenter', this.#handleEnter);
+                trigger.addEventListener('mouseleave', this.#handleLeave);
+                trigger.addEventListener('focusin', this.#handleFocusIn);
+                trigger.addEventListener('focusout', this.#handleFocusOut);
+            }
+            this.#trigger = trigger;
+        }
+        if (content !== this.#content) {
+            if (this.#content) {
+                this.#content.removeEventListener('mouseenter', this.#handleEnter);
+                this.#content.removeEventListener('mouseleave', this.#handleLeave);
+            }
+            if (content) {
+                content.addEventListener('mouseenter', this.#handleEnter);
+                content.addEventListener('mouseleave', this.#handleLeave);
+            }
+            this.#content = content ?? null;
+        }
+    }
+}

package/build/index.cjs

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.when = exports.unsafeHTML = exports.styleObject = exports.styleMap = exports.repeat = exports.renderList = exports.renderIf = exports.optionalAttribute = exports.ifDefined = exports.classMap = exports.initWebKit = void 0;
+// Components
+__exportStar(require("./components/index.cjs"), exports);
+// Decorators
+__exportStar(require("./decorators/index.cjs"), exports);
+// Elements (components)
+__exportStar(require("./elements/index.cjs"), exports);
+// Init API
+var init_1 = require("./init.cjs");
+Object.defineProperty(exports, "initWebKit", { enumerable: true, get: function () { return init_1.initWebKit; } });
+// Theming
+__exportStar(require("./theme/index.cjs"), exports);
+// Utilities
+var template_helpers_1 = require("./utils/template-helpers.cjs");
+Object.defineProperty(exports, "classMap", { enumerable: true, get: function () { return template_helpers_1.classMap; } });
+Object.defineProperty(exports, "ifDefined", { enumerable: true, get: function () { return template_helpers_1.ifDefined; } });
+Object.defineProperty(exports, "optionalAttribute", { enumerable: true, get: function () { return template_helpers_1.optionalAttribute; } });
+Object.defineProperty(exports, "renderIf", { enumerable: true, get: function () { return template_helpers_1.renderIf; } });
+Object.defineProperty(exports, "renderList", { enumerable: true, get: function () { return template_helpers_1.renderList; } });
+Object.defineProperty(exports, "repeat", { enumerable: true, get: function () { return template_helpers_1.repeat; } });
+Object.defineProperty(exports, "styleMap", { enumerable: true, get: function () { return template_helpers_1.styleMap; } });
+Object.defineProperty(exports, "styleObject", { enumerable: true, get: function () { return template_helpers_1.styleObject; } });
+Object.defineProperty(exports, "unsafeHTML", { enumerable: true, get: function () { return template_helpers_1.unsafeHTML; } });
+Object.defineProperty(exports, "when", { enumerable: true, get: function () { return template_helpers_1.when; } });

package/build/index.d.cts

@@ -0,0 +1,6 @@
+export * from "./components/index.cjs";
+export * from "./decorators/index.cjs";
+export * from "./elements/index.cjs";
+export { type FontConfig, type FontSource, type InitWebKitOptions, initWebKit, type LazyLoadConfig, type LazyLoader, type ReplaceConfig, type StylePreset, type StylesConfig, type ThemeModeConfig, type WebKitComponentTag, type WebKitController, type WebKitElementTag, type WebKitTag } from "./init.cjs";
+export * from "./theme/index.cjs";
+export { classMap, ifDefined, optionalAttribute, renderIf, renderList, repeat, styleMap, styleObject, unsafeHTML, when } from "./utils/template-helpers.cjs";

package/build/index.d.ts

@@ -0,0 +1,6 @@
+export * from "./components/index.js";
+export * from "./decorators/index.js";
+export * from "./elements/index.js";
+export { type FontConfig, type FontSource, type InitWebKitOptions, initWebKit, type LazyLoadConfig, type LazyLoader, type ReplaceConfig, type StylePreset, type StylesConfig, type ThemeModeConfig, type WebKitComponentTag, type WebKitController, type WebKitElementTag, type WebKitTag } from "./init.js";
+export * from "./theme/index.js";
+export { classMap, ifDefined, optionalAttribute, renderIf, renderList, repeat, styleMap, styleObject, unsafeHTML, when } from "./utils/template-helpers.js";

package/build/index.js

@@ -0,0 +1,12 @@
+// Components
+export * from "./components/index.js";
+// Decorators
+export * from "./decorators/index.js";
+// Elements (components)
+export * from "./elements/index.js";
+// Init API
+export { initWebKit } from "./init.js";
+// Theming
+export * from "./theme/index.js";
+// Utilities
+export { classMap, ifDefined, optionalAttribute, renderIf, renderList, repeat, styleMap, styleObject, unsafeHTML, when } from "./utils/template-helpers.js";

package/build/init.cjs

@@ -0,0 +1,325 @@
+"use strict";
+/**
+ * Main initialization API for @easemate/web-kit
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initWebKit = initWebKit;
+const theme_1 = require("./theme/index.cjs");
+const registry_1 = require("./theme/registry.cjs");
+// --------------------------
+// Helpers
+// --------------------------
+const isBrowser = () => typeof document !== 'undefined' && typeof window !== 'undefined';
+const isThemeModeConfig = (value) => {
+    if (typeof value !== 'object' || value === null) {
+        return false;
+    }
+    const obj = value;
+    return obj.mode !== undefined && (obj.light !== undefined || obj.dark !== undefined);
+};
+/**
+ * Register replacement components before loading built-in ones.
+ */
+function registerReplacements(replace) {
+    if (!isBrowser()) {
+        return;
+    }
+    for (const [tag, replacement] of Object.entries(replace)) {
+        // Skip if already defined
+        if (customElements.get(tag)) {
+            continue;
+        }
+        if (typeof replacement === 'function') {
+            // Register custom constructor
+            customElements.define(tag, replacement);
+        }
+        else if (typeof replacement === 'string') {
+            // Create a bridge element that renders the aliased tag
+            const aliasTag = replacement;
+            class BridgeElement extends HTMLElement {
+                _inner = null;
+                connectedCallback() {
+                    // Create the aliased element
+                    this._inner = document.createElement(aliasTag);
+                    // Copy attributes
+                    for (const attr of this.attributes) {
+                        this._inner.setAttribute(attr.name, attr.value);
+                    }
+                    // Move children
+                    while (this.firstChild) {
+                        this._inner.appendChild(this.firstChild);
+                    }
+                    // Use shadow DOM to contain the aliased element
+                    const shadow = this.attachShadow({ mode: 'open' });
+                    shadow.appendChild(this._inner);
+                }
+                disconnectedCallback() {
+                    this._inner = null;
+                }
+            }
+            customElements.define(tag, BridgeElement);
+        }
+    }
+}
+/**
+ * Resolve and apply styles configuration.
+ */
+async function applyStyles(styles, nonce) {
+    if (styles === false) {
+        return { dispose: () => { } };
+    }
+    const { injectPreset, removePreset } = await Promise.resolve().then(() => __importStar(require("./internal/style-inject.cjs")));
+    const injected = [];
+    if (typeof styles === 'string') {
+        injectPreset(styles, nonce);
+        injected.push(styles);
+    }
+    else if (typeof styles === 'object') {
+        if (styles.reset) {
+            injectPreset('reset', nonce);
+            injected.push('reset');
+        }
+        if (styles.base) {
+            injectPreset('base', nonce);
+            injected.push('base');
+        }
+    }
+    return {
+        dispose: () => {
+            for (const preset of injected) {
+                removePreset(preset);
+            }
+        }
+    };
+}
+/**
+ * Resolve and apply theme configuration.
+ */
+function applyThemeConfig(theme, target) {
+    if (isThemeModeConfig(theme)) {
+        // Light/dark mode configuration
+        const lightConfig = (0, registry_1.getTheme)(theme.light);
+        const darkConfig = (0, registry_1.getTheme)(theme.dark);
+        if (theme.mode === 'system') {
+            const cleanup = (0, theme_1.followSystemTheme)({ light: lightConfig, dark: darkConfig }, { element: target });
+            return {
+                dispose: cleanup,
+                controller: {
+                    set: (t) => {
+                        const config = (0, registry_1.getTheme)(t);
+                        (0, theme_1.applyTheme)(config, { element: target });
+                    },
+                    mode: (m) => {
+                        if (m === 'system') {
+                            // Re-apply system theme
+                            const systemMode = window.matchMedia('(prefers-color-scheme: light)').matches
+                                ? 'light'
+                                : 'dark';
+                            const config = systemMode === 'light' ? lightConfig : darkConfig;
+                            (0, theme_1.applyTheme)(config, {
+                                element: target,
+                                name: systemMode,
+                                colorScheme: systemMode
+                            });
+                        }
+                        else {
+                            const config = m === 'light' ? lightConfig : darkConfig;
+                            (0, theme_1.applyTheme)(config, {
+                                element: target,
+                                name: m,
+                                colorScheme: m
+                            });
+                        }
+                    }
+                }
+            };
+        }
+        // Fixed mode
+        const config = theme.mode === 'light' ? lightConfig : darkConfig;
+        (0, theme_1.applyTheme)(config, {
+            element: target,
+            name: theme.mode,
+            colorScheme: theme.mode
+        });
+        return {
+            dispose: () => { },
+            controller: {
+                set: (t) => {
+                    const resolvedConfig = (0, registry_1.getTheme)(t);
+                    (0, theme_1.applyTheme)(resolvedConfig, { element: target });
+                }
+            }
+        };
+    }
+    // Simple theme (name, ref, or config)
+    const config = (0, registry_1.getTheme)(theme);
+    const name = (0, registry_1.isThemeRef)(theme) ? theme.name : typeof theme === 'string' ? theme : undefined;
+    (0, theme_1.applyTheme)(config, {
+        element: target,
+        name,
+        colorScheme: 'dark'
+    });
+    return {
+        dispose: () => { },
+        controller: {
+            set: (t) => {
+                const resolvedConfig = (0, registry_1.getTheme)(t);
+                const themeName = (0, registry_1.isThemeRef)(t) ? t.name : typeof t === 'string' ? t : undefined;
+                (0, theme_1.applyTheme)(resolvedConfig, { element: target, name: themeName });
+            }
+        }
+    };
+}
+// --------------------------
+// Main API
+// --------------------------
+/**
+ * Initialize the web-kit.
+ *
+ * @example
+ * ```ts
+ * // Basic usage - register all components with default theme
+ * initWebKit({ theme: 'default' });
+ *
+ * // Selective loading
+ * initWebKit({
+ *   include: ['ease-button', 'ease-slider'],
+ *   theme: 'default'
+ * });
+ *
+ * // With styles
+ * initWebKit({
+ *   theme: 'default',
+ *   styles: 'main',
+ *   fonts: 'default'
+ * });
+ *
+ * // Light/dark mode
+ * initWebKit({
+ *   theme: {
+ *     mode: 'system',
+ *     light: myLightTheme,
+ *     dark: 'default'
+ *   }
+ * });
+ * ```
+ */
+function initWebKit(options = {}) {
+    // SSR safety - no-op on server
+    if (!isBrowser()) {
+        return {
+            dispose: () => { },
+            ready: Promise.resolve()
+        };
+    }
+    const { include, exclude, replace, theme, target, styles = false, fonts = false, lazyLoad = false, cspNonce, dev } = options;
+    const disposers = [];
+    // Controller object that will be populated
+    const controller = {
+        dispose: () => {
+            for (const dispose of disposers) {
+                dispose();
+            }
+        },
+        theme: undefined,
+        ready: Promise.resolve()
+    };
+    // Build the ready promise
+    const readyPromise = (async () => {
+        // 1. Register replacements first (before loading any components)
+        if (replace) {
+            registerReplacements(replace);
+        }
+        // 2. Apply styles
+        const stylesResult = await applyStyles(styles, cspNonce);
+        disposers.push(stylesResult.dispose);
+        // 3. Apply theme
+        if (theme) {
+            const themeResult = applyThemeConfig(theme, target);
+            disposers.push(themeResult.dispose);
+            controller.theme = themeResult.controller;
+        }
+        // 4. Load fonts
+        if (fonts !== false) {
+            const { injectFonts, removeFonts } = await Promise.resolve().then(() => __importStar(require("./internal/fonts.cjs")));
+            injectFonts(fonts);
+            const fontsToRemove = fonts;
+            disposers.push(() => removeFonts(fontsToRemove));
+        }
+        // 5. Load components
+        if (lazyLoad) {
+            // Lazy loading mode
+            const { createLazyLoader } = await Promise.resolve().then(() => __importStar(require("./internal/lazy-load.cjs")));
+            const lazyConfig = typeof lazyLoad === 'object' ? lazyLoad : {};
+            // Apply include/exclude to lazy loader
+            if (include) {
+                lazyConfig.include = include;
+            }
+            else if (exclude) {
+                lazyConfig.exclude = exclude;
+            }
+            const loader = createLazyLoader(lazyConfig);
+            disposers.push(loader.dispose);
+        }
+        else {
+            // Eager loading mode
+            const { loadAllComponents, loadComponents, resolveTags } = await Promise.resolve().then(() => __importStar(require("./internal/component-loaders.cjs")));
+            if (include || exclude) {
+                const tags = resolveTags({ include, exclude });
+                if (dev?.warnUnknownTags) {
+                    const { WEB_KIT_ALL_TAGS } = await Promise.resolve().then(() => __importStar(require("./internal/component-loaders.cjs")));
+                    const allTags = new Set(WEB_KIT_ALL_TAGS);
+                    const unknown = (include ?? exclude ?? []).filter((t) => !allTags.has(t));
+                    if (unknown.length > 0) {
+                        console.warn('[web-kit] Unknown tags:', unknown);
+                    }
+                }
+                if (dev?.logLoads) {
+                    console.log('[web-kit] Loading components:', tags);
+                }
+                await loadComponents(tags);
+            }
+            else {
+                if (dev?.logLoads) {
+                    console.log('[web-kit] Loading all components');
+                }
+                await loadAllComponents();
+            }
+        }
+    })();
+    controller.ready = readyPromise;
+    return controller;
+}