le-kit 0.5.2 → 0.5.4

package/dist/cjs/le-tabs.cjs.entry.js

@@ -1,307 +0,0 @@
-'use strict';
-
-var index = require('./index-BzadfLTc.js');
-var utils = require('./utils-Dxx9WhWK.js');
-
-const leTabsCss = () => `:host{display:block;--le-tabs-gap:var(--le-spacing-1);--le-tabs-border-color:var(--le-border-color);--le-tabs-padding-y:var(--le-spacing-2);--le-tabs-padding-x:var(--le-spacing-4);--le-tabs-enclosed-bg:var(--le-color-background-secondary)}.le-tabs{display:flex;flex-direction:column}.le-tabs.orientation-vertical{flex-direction:row}.tablist{display:flex;position:relative;border-radius:var(--le-radius-md);gap:var(--le-tabs-gap)}.tablist.wrap-tabs{flex-wrap:wrap}.tablist.overflow-auto{overflow:auto}.tablist.overflow-hidden{overflow:hidden}.tablist.overflow-visible{overflow:visible}.tablist.overflow-scroll{overflow:scroll}.tablist:focus{outline:2px solid var(--le-color-focus);outline-offset:2px}.orientation-horizontal .tablist{flex-direction:row;border-bottom:1px solid var(--le-tabs-border-color)}.orientation-vertical .tablist{flex-direction:column;border-right:1px solid var(--le-tabs-border-color);min-width:150px}.full-width .tablist{width:100%}.full-width.orientation-horizontal .tab{flex:1}.variant-underlined .tablist{padding-inline:4px}.variant-pills .tablist{border-radius:calc(1.12rem)}.variant-enclosed .tablist{border:none;gap:0;background-color:var(--le-tabs-enclosed-bg);border-radius:calc(var(--le-radius-md) + var(--le-spacing-1));padding:var(--le-spacing-1)}.tab-icon{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;font-size:1.1em}.tab-icon img{width:100%;height:100%;object-fit:contain}.panels{flex:1;min-height:0}.panel{padding:var(--le-tabs-panel-padding, var(--le-spacing-4))}.panel[hidden]{display:none}.orientation-vertical .panels{padding-left:var(--le-spacing-4)}.position-end .panels{order:1}.position-end .tablist{order:2}`;
-
-const LeTabs = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.leTabChange = index.createEvent(this, "leTabChange");
-    }
-    get el() { return index.getElement(this); }
-    /**
-     * Array of tab options (programmatic mode).
-     * If le-tab-panel children exist, they take precedence.
-     */
-    tabs = [];
-    /**
-     * The value of the currently selected tab.
-     * If not provided, defaults to the first tab.
-     */
-    selected;
-    /**
-     * Orientation of the tabs.
-     * @allowedValues horizontal | vertical
-     */
-    orientation = 'horizontal';
-    /**
-     * Position of the tabs relative to the panels.
-     * @allowedValues start | end
-     */
-    position = 'start';
-    /**
-     * Tab variant style.
-     * @allowedValues underlined | solid | pills | enclosed | icon-only
-     */
-    variant = 'underlined';
-    /**
-     * Whether tabs should stretch to fill available width.
-     */
-    fullWidth = false;
-    /**
-     * Size of the tabs.
-     * @allowedValues sm | md | lg
-     */
-    size = 'medium';
-    /**
-     * Wrap the tabs if they exceed container width.
-     */
-    wrap = false;
-    /**
-     * Scroll behavior for overflowing tabs.
-     * @allowedValues auto | hidden | visible | scroll
-     */
-    overflow = 'auto';
-    /**
-     * Internal tab configurations (built from children or tabs prop)
-     */
-    tabConfigs = [];
-    /**
-     * Internal state for focused tab index (for keyboard navigation)
-     */
-    focusedIndex = 0;
-    /**
-     * Whether we're using declarative mode (le-tab-panel children)
-     */
-    isDeclarativeMode = false;
-    /**
-     * Emitted when the selected tab changes.
-     */
-    leTabChange;
-    mutationObserver;
-    selectedChanged(newValue) {
-        const index = this.tabConfigs.findIndex(t => t.value === newValue);
-        if (index >= 0) {
-            this.focusedIndex = index;
-        }
-        this.updatePanelStates();
-    }
-    tabsChanged() {
-        if (!this.isDeclarativeMode) {
-            this.buildTabConfigs();
-        }
-    }
-    handleSlotChange() {
-        this.buildTabConfigs();
-    }
-    componentWillLoad() {
-        this.buildTabConfigs();
-    }
-    connectedCallback() {
-        // Watch for dynamic changes to children
-        this.mutationObserver = new MutationObserver(() => {
-            this.buildTabConfigs();
-        });
-        this.mutationObserver.observe(this.el, {
-            attributes: true,
-            childList: true,
-            subtree: true,
-        });
-    }
-    disconnectedCallback() {
-        this.mutationObserver?.disconnect();
-    }
-    async buildTabConfigs() {
-        // Check for le-tab-panel children
-        const panels = Array.from(this.el.querySelectorAll(':scope > le-tab-panel'));
-        if (panels.length > 0) {
-            // Declarative mode - build from children
-            this.isDeclarativeMode = true;
-            const configs = [];
-            for (const panel of panels) {
-                const config = await panel.getTabConfig();
-                configs.push({ ...config, panel });
-            }
-            this.tabConfigs = configs;
-        }
-        else if (this.tabs.length > 0) {
-            // Programmatic mode - use tabs prop
-            this.isDeclarativeMode = false;
-            this.tabConfigs = this.tabs.map(tab => ({
-                label: tab.label,
-                value: (tab.value !== undefined ? tab.value : tab.label),
-                iconStart: tab.iconStart,
-                iconEnd: tab.iconEnd,
-                disabled: tab.disabled ?? false,
-            }));
-        }
-        else {
-            this.tabConfigs = [];
-        }
-        // Set default selected
-        if (this.selected === undefined && this.tabConfigs.length > 0) {
-            const firstEnabled = this.tabConfigs.find(t => !t.disabled);
-            if (firstEnabled) {
-                this.selected = firstEnabled.value;
-            }
-        }
-        // Initialize focused index
-        if (this.selected !== undefined) {
-            const index = this.tabConfigs.findIndex(t => t.value === this.selected);
-            if (index >= 0) {
-                this.focusedIndex = index;
-            }
-        }
-        // Update panel active states
-        this.updatePanelStates();
-    }
-    async updatePanelStates() {
-        if (!this.isDeclarativeMode)
-            return;
-        for (const config of this.tabConfigs) {
-            if (config.panel) {
-                const isActive = config.value === this.selected;
-                await config.panel.setActive(isActive);
-            }
-        }
-    }
-    selectTab(config) {
-        if (config.disabled)
-            return;
-        this.selected = config.value;
-        this.leTabChange.emit({
-            value: config.value,
-            option: {
-                label: config.label,
-                value: config.value,
-                iconStart: config.iconStart,
-                iconEnd: config.iconEnd,
-                disabled: config.disabled,
-            },
-        });
-    }
-    handleTabClick = (config) => {
-        this.selectTab(config);
-    };
-    handleKeyDown = (event) => {
-        const { tabConfigs, orientation } = this;
-        const isHorizontal = orientation === 'horizontal';
-        let newIndex = this.focusedIndex;
-        switch (event.key) {
-            case 'ArrowLeft':
-                if (isHorizontal) {
-                    event.preventDefault();
-                    newIndex = this.findNextEnabledTab(-1);
-                }
-                break;
-            case 'ArrowRight':
-                if (isHorizontal) {
-                    event.preventDefault();
-                    newIndex = this.findNextEnabledTab(1);
-                }
-                break;
-            case 'ArrowUp':
-                if (!isHorizontal) {
-                    event.preventDefault();
-                    newIndex = this.findNextEnabledTab(-1);
-                }
-                break;
-            case 'ArrowDown':
-                if (!isHorizontal) {
-                    event.preventDefault();
-                    newIndex = this.findNextEnabledTab(1);
-                }
-                break;
-            case 'Home':
-                event.preventDefault();
-                newIndex = this.findFirstEnabledTab();
-                break;
-            case 'End':
-                event.preventDefault();
-                newIndex = this.findLastEnabledTab();
-                break;
-            case 'Enter':
-            case ' ':
-                event.preventDefault();
-                if (tabConfigs[this.focusedIndex]) {
-                    this.selectTab(tabConfigs[this.focusedIndex]);
-                }
-                return;
-            default:
-                return;
-        }
-        if (newIndex !== this.focusedIndex) {
-            this.focusedIndex = newIndex;
-            this.focusTab(newIndex);
-            // Auto-select on focus (recommended for tabs)
-            if (tabConfigs[newIndex]) {
-                this.selectTab(tabConfigs[newIndex]);
-            }
-        }
-    };
-    findNextEnabledTab(direction) {
-        const { tabConfigs } = this;
-        let index = this.focusedIndex;
-        const length = tabConfigs.length;
-        for (let i = 0; i < length; i++) {
-            index = (index + direction + length) % length;
-            if (!tabConfigs[index].disabled) {
-                return index;
-            }
-        }
-        return this.focusedIndex;
-    }
-    findFirstEnabledTab() {
-        return this.tabConfigs.findIndex(t => !t.disabled);
-    }
-    findLastEnabledTab() {
-        for (let i = this.tabConfigs.length - 1; i >= 0; i--) {
-            if (!this.tabConfigs[i].disabled)
-                return i;
-        }
-        return 0;
-    }
-    focusTab(index) {
-        const tablist = this.el.shadowRoot?.querySelector('[role="tablist"]');
-        const tab = tablist?.querySelectorAll('[role="tab"]')[index];
-        tab?.focus();
-    }
-    render() {
-        const { tabConfigs, selected, orientation, variant, fullWidth, size, isDeclarativeMode } = this;
-        const classes = {
-            'le-tabs': true,
-            [`orientation-${orientation}`]: true,
-            [`position-${this.position}`]: true,
-            [`variant-${variant}`]: true,
-            [`size-${size}`]: true,
-            'full-width': fullWidth,
-        };
-        const tabPosition = this.orientation === 'vertical'
-            ? this.position
-            : this.position === 'start'
-                ? 'top'
-                : 'bottom';
-        return (index.h("le-component", { key: '9a92363db43231088e476bca66dbbf47f26ebf34', component: "le-tabs", hostClass: utils.classnames(classes) }, index.h("div", { key: '3c14f3367e2b281090721e5521bfa8a3b53f5b97', class: classes }, index.h("div", { key: 'cd4aad46f9a8e1ec5760f9388a0c4149556bfb06', class: {
-                'tablist': true,
-                'wrap-tabs': this.wrap,
-                [`overflow-${this.overflow}`]: true,
-            }, role: "tablist", "aria-orientation": orientation, part: "tablist", onKeyDown: this.handleKeyDown, tabIndex: 0 }, tabConfigs.map(config => {
-            const isSelected = config.value === selected;
-            const tabId = `tab-${config.value}`;
-            const panelId = `panel-${config.value}`;
-            return (index.h("le-tab", { key: config.value, id: tabId, class: "tab", mode: "default", variant: this.variant, selected: isSelected, disabled: config.disabled, size: this.size, position: tabPosition, align: this.orientation === 'vertical' ? 'start' : 'center', role: "tab", part: isSelected ? 'tab tab-active' : 'tab', "aria-selected": isSelected ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": config.disabled ? 'true' : undefined, focusable: false, onClick: () => this.handleTabClick(config), iconStart: config.iconStart, iconEnd: config.iconEnd }, index.h("span", { class: "tab-label" }, config.label)));
-        })), index.h("div", { key: '0b34e9ab8ce8f0e31ad9392bc3a6a60c92a0aa00', class: "panels", part: "panels" }, isDeclarativeMode ? (
-        // Declarative mode - render slot for le-tab-panel children
-        index.h("le-slot", { name: "", description: "Tab panels", type: "slot", allowedComponents: "le-tab-panel" }, index.h("slot", null))) : (
-        // Programmatic mode - render named slots
-        tabConfigs.map(config => {
-            const isSelected = config.value === selected;
-            const tabId = `tab-${config.value}`;
-            const panelId = `panel-${config.value}`;
-            return (index.h("div", { key: config.value, id: panelId, class: {
-                    'panel': true,
-                    'panel-active': isSelected,
-                }, role: "tabpanel", part: "panel", "aria-labelledby": tabId, tabIndex: 0, hidden: !isSelected }, index.h("slot", { name: `panel-${config.value}` })));
-        }))))));
-    }
-    static get watchers() { return {
-        "selected": ["selectedChanged"],
-        "tabs": ["tabsChanged"]
-    }; }
-};
-LeTabs.style = leTabsCss();
-
-exports.le_tabs = LeTabs;
-//# sourceMappingURL=le-tabs.entry.cjs.js.map

package/dist/cjs/le-tag.cjs.entry.js

@@ -1,68 +0,0 @@
-'use strict';
-
-var index = require('./index-BzadfLTc.js');
-
-const leTagCss = () => `:host{display:inline-flex;--le-tag-font-size:var(--le-font-size-sm);--le-tag-font-weight:var(--le-font-weight-medium);--le-tag-color:var(--le-color-text);--le-tag-bg:var(--le-color-surface-alt);--le-tag-dismiss-size:1.75em}:host([disabled]){opacity:0.5;pointer-events:none}.tag{display:inline-flex;align-items:center;gap:var(--le-tag-gap, 0.375rem);padding:var(--le-tag-padding-y, 0.25rem) var(--le-tag-padding-x, 0.625rem);font-size:var(--le-tag-font-size);font-weight:var(--le-tag-font-weight);line-height:1.4;color:var(--le-tag-color, var(--le-color-text, #1f2937));background:var(--le-tag-bg, var(--le-color-surface-alt, #f3f4f6));border:1px solid var(--le-tag-border-color, transparent);border-radius:var(--le-tag-border-radius, 9999px);white-space:nowrap;user-select:none}:host([size='small']) .tag{--le-tag-font-size:0.75rem;--le-tag-padding-x:0.5rem;--le-tag-padding-y:0.125rem;--le-tag-gap:0.25rem;--le-tag-dismiss-size:1.25em}:host([size='large']) .tag{--le-tag-font-size:1rem;--le-tag-padding-x:0.875rem;--le-tag-padding-y:0.375rem;--le-tag-gap:0.5rem;--le-tag-dismiss-size:2em}:host([variant='primary']) .tag{--le-tag-bg:var(--le-color-primary, #dbeafe);--le-tag-color:var(--le-color-primary-contrast, #1e40af)}:host([variant='success']) .tag{--le-tag-bg:var(--le-color-success, #dcfce7);--le-tag-color:var(--le-color-success-contrast, #166534)}:host([variant='warning']) .tag{--le-tag-bg:var(--le-color-warning-light, #fef3c7);--le-tag-color:var(--le-color-warning-contrast, #92400e)}:host([variant='danger']) .tag{--le-tag-bg:var(--le-color-danger, #fee2e2);--le-tag-color:var(--le-color-danger-contrast, #991b1b)}.tag-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.tag-icon img{width:1em;height:1em;object-fit:contain}.tag-label{display:inline-block}.tag-dismiss{display:inline-flex;align-items:center;justify-content:center;width:var(--le-tag-dismiss-size);height:var(--le-tag-dismiss-size);padding:0;margin-block:calc(var(--le-tag-dismiss-size) * -1);margin-right:calc(var(--le-tag-dismiss-size) / 3 * -1);border:none;background:transparent;color:currentColor;opacity:0.6;cursor:pointer;border-radius:50%;transition:opacity 0.15s ease, background-color 0.15s ease}.tag-dismiss:hover{opacity:1;background:rgba(0, 0, 0, 0.1)}.tag-dismiss:focus-visible{outline:2px solid var(--le-color-primary, #3b82f6);outline-offset:1px}.tag-dismiss svg{width:0.75em;height:0.75em}.tag-dismiss:disabled{cursor:not-allowed}`;
-
-const LeTag = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.leDismiss = index.createEvent(this, "leDismiss");
-    }
-    /**
-     * The text label to display in the tag.
-     */
-    label;
-    /**
-     * Mode of the popover should be 'default' for internal use
-     */
-    mode;
-    /**
-     * Icon to display before the label.
-     * Can be an emoji, URL, or icon name.
-     */
-    icon;
-    /**
-     * Whether the tag can be dismissed (shows close button).
-     */
-    dismissible = false;
-    /**
-     * Whether the tag is disabled.
-     */
-    disabled = false;
-    /**
-     * The size of the tag.
-     */
-    size = 'medium';
-    /**
-     * The visual variant of the tag.
-     */
-    variant = 'default';
-    /**
-     * Emitted when the dismiss button is clicked.
-     */
-    leDismiss;
-    handleDismiss = (e) => {
-        e.stopPropagation();
-        if (!this.disabled) {
-            this.leDismiss.emit();
-        }
-    };
-    renderIcon() {
-        if (!this.icon)
-            return null;
-        // Check if it's a URL (starts with http, https, or /)
-        if (this.icon.startsWith('http') || this.icon.startsWith('/')) {
-            return index.h("img", { class: "tag-icon", src: this.icon, alt: "" });
-        }
-        // Otherwise render as text (emoji or icon font)
-        return index.h("span", { class: "tag-icon" }, this.icon);
-    }
-    render() {
-        return (index.h("le-component", { key: '8c76ae38877bbb3ba35588adadee0cf61b76ffed', component: "le-tag" }, index.h("span", { key: 'a2dd1709505e58baada6fb9b40312e207435e8a6', class: "tag" }, this.renderIcon(), index.h("span", { key: '99bac5f6df170af17de5550b9f0489538e9760bc', class: "tag-label" }, index.h("le-slot", { key: '41740e400b168986980e8ff93187af9828cca5f9', name: "", tag: "span", type: "text" }, index.h("slot", { key: 'd823f3dc74c1e49b89fe5fff2df9d7e244d7d591' }, this.label))), this.dismissible && (index.h("button", { key: '96a058e3cab2d7fb091e1e6ec77404f8cf80358c', type: "button", class: "tag-dismiss", onClick: this.handleDismiss, disabled: this.disabled, "aria-label": "Remove" }, index.h("svg", { key: 'bfbb3f7c73aef6f06f5c45e98d4047d2aa629f2c', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { key: '16a68b9458ccd806415d5ef8bda7fa1513cdf46d', d: "M4 4l8 8M12 4l-8 8" })))))));
-    }
-};
-LeTag.style = leTagCss();
-
-exports.le_tag = LeTag;
-//# sourceMappingURL=le-tag.entry.cjs.js.map