le-kit 0.5.2 → 0.5.4

package/dist/cjs/le-tab-bar.cjs.entry.js

@@ -1,242 +0,0 @@
-'use strict';
-
-var index = require('./index-BzadfLTc.js');
-
-const leTabBarCss = () => `:host{display:block;--le-tab-bar-background:var(--le-color-surface);--le-tab-bar-border-color:var(--le-color-border);--le-tab-bar-gap:var(--le-spacing-2);--le-tab-bar-padding-y:var(--le-spacing-2);--le-tab-bar-padding-x:var(--le-spacing-1);background:var(--le-tab-bar-background);padding:var(--le-tab-bar-padding-y) var(--le-tab-bar-padding-x)}:host([full-width]){width:100%}:host(.bordered.position-top){border-bottom:1px solid var(--le-tab-bar-border-color)}:host(.bordered.position-bottom){border-top:1px solid var(--le-tab-bar-border-color)}.tablist{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-around;gap:var(--le-tab-bar-gap, var(--le-spacing-1));width:100%}.tab{display:inline-flex;align-items:flex-start;justify-content:space-around;gap:var(--le-spacing-2);position:relative;background:transparent;border:none;cursor:pointer}.tab-disabled{opacity:0.5;cursor:not-allowed}.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}.tab-description{font-size:var(--le-font-size-xs);font-weight:var(--le-font-weight-normal);color:var(--le-text-tertiary);margin-left:var(--le-spacing-1)}`;
-
-const LeTabBar = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.leTabChange = index.createEvent(this, "leTabChange");
-    }
-    get el() { return index.getElement(this); }
-    /**
-     * Array of tab options defining the tabs to display.
-     */
-    tabs = [];
-    /**
-     * The value of the currently selected tab.
-     */
-    selected;
-    /**
-     * Whether tabs should stretch to fill available width.
-     */
-    fullWidth = true;
-    /**
-     * Whether to show labels in icon-only mode.
-     */
-    showLabels = false;
-    /**
-     * Position of the tab bar.
-     * @allowedValues top | bottom
-     */
-    position = 'top';
-    /**
-     * Size of the tabs.
-     * @allowedValues small | medium | large
-     */
-    size = 'medium';
-    /**
-     * Whether to show a border below the tab bar.
-     */
-    bordered = true;
-    /**
-     * Internal tab configurations (built from children or tabs prop)
-     */
-    tabConfigs = [];
-    /**
-     * Whether we're using declarative mode (le-tab-panel children)
-     */
-    isDeclarativeMode = false;
-    /**
-     * Internal state for focused tab index (for keyboard navigation)
-     */
-    focusedIndex = 0;
-    /**
-     * 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;
-        }
-    }
-    tabsChanged() {
-        if (!this.isDeclarativeMode) {
-            this.buildTabConfigs();
-        }
-    }
-    handleSlotChange() {
-        this.buildTabConfigs();
-    }
-    componentWillLoad() {
-        this.buildTabConfigs();
-        if (this.selected === undefined && this.tabs.length > 0) {
-            const firstEnabled = this.tabs.find(tab => !tab.disabled);
-            if (firstEnabled) {
-                this.selected = this.getTabValue(firstEnabled);
-            }
-        }
-        if (this.selected !== undefined) {
-            const index = this.getTabIndex(this.selected);
-            if (index >= 0) {
-                this.focusedIndex = index;
-            }
-        }
-    }
-    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 tabs = Array.from(this.el.querySelectorAll(':scope > le-tab'));
-        if (tabs.length > 0) {
-            // Declarative mode - build from children
-            this.isDeclarativeMode = true;
-            const configs = [];
-            for (const tab of tabs) {
-                const config = await tab.getTabConfig();
-                configs.push({ ...config });
-            }
-            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;
-            }
-        }
-    }
-    getTabValue(tab) {
-        return tab.value !== undefined ? tab.value : tab.label;
-    }
-    getTabIndex(value) {
-        return this.tabs.findIndex(tab => this.getTabValue(tab) === value);
-    }
-    selectTab(tab) {
-        if (tab.disabled)
-            return;
-        const value = this.getTabValue(tab);
-        this.selected = value;
-        this.leTabChange.emit({ value, option: tab });
-    }
-    handleTabClick = (tab) => {
-        this.selectTab(tab);
-    };
-    handleKeyDown = (event) => {
-        const { tabConfigs } = this;
-        let newIndex = this.focusedIndex;
-        switch (event.key) {
-            case 'ArrowLeft':
-                event.preventDefault();
-                newIndex = this.findNextEnabledTab(-1);
-                break;
-            case 'ArrowRight':
-                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;
-            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(tab => !tab.disabled);
-    }
-    findLastEnabledTab() {
-        for (let i = this.tabConfigs.length - 1; i >= 0; i--) {
-            if (!this.tabConfigs[i].disabled)
-                return i;
-        }
-        return 0;
-    }
-    render() {
-        const { tabConfigs, selected, size, bordered } = this;
-        const classes = {
-            'le-tab-bar': true,
-            'bordered': bordered,
-            'position-top': this.position === 'top',
-            'position-bottom': this.position === 'bottom',
-        };
-        return (index.h(index.Host, { key: '71b1a2d80884dc9a494edf55b28bfa178b44f284', class: classes }, index.h("le-component", { key: 'a09f1adff893b3b1f7c2f2ea0115133df906153f', component: "le-tab-bar" }, index.h("div", { key: 'f9b3046469fcaf0a3164fc5bb2038d54916dcb83', class: "tablist", role: "tablist", "aria-orientation": "horizontal", part: "tablist", onKeyDown: this.handleKeyDown }, index.h("le-slot", { key: '2a4ef6c858a7a0c8d9d2942d68183887153101c3', name: "", type: "slot", allowedComponents: "le-tab" }, tabConfigs.map(tab => {
-            const value = this.getTabValue(tab);
-            const isSelected = value === selected;
-            return (index.h("le-tab", { key: value, class: "tab", role: "tab", variant: "icon-only", label: tab.label, value: tab.value, icon: tab.icon, href: tab.href, selected: isSelected, disabled: tab.disabled, showLabel: this.showLabels, size: size, part: isSelected ? 'tab tab-active' : 'tab', "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : undefined, tabIndex: -1, onClick: () => this.handleTabClick(tab) }, index.h("span", { class: "tab-label" }, tab.label)));
-        }))))));
-    }
-    static get watchers() { return {
-        "selected": ["selectedChanged"],
-        "tabs": ["tabsChanged"]
-    }; }
-};
-LeTabBar.style = leTabBarCss();
-
-exports.le_tab_bar = LeTabBar;
-//# sourceMappingURL=le-tab-bar.entry.cjs.js.map

package/dist/cjs/le-tab-panel.cjs.entry.js

@@ -1,100 +0,0 @@
-'use strict';
-
-var index = require('./index-BzadfLTc.js');
-
-const leTabPanelCss = () => `:host{display:contents;--le-tab-panel-radius:var(--le-radius-md);--le-tab-panel-padding:var(--le-spacing-4)}.tab-panel{margin-top:4px;display:none;border-radius:var(--le-tab-panel-radius);padding:var(--le-tab-panel-padding)}.tab-panel.active{display:block}.tab-panel:focus-visible{outline:2px solid var(--le-color-focus);outline-offset:2px}.tab-panel.lazy-hidden{display:none}`;
-
-const LeTabPanel = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    get el() { return index.getElement(this); }
-    /**
-     * The label displayed in the tab button.
-     */
-    label;
-    /**
-     * The value used to identify this tab.
-     * Defaults to the label if not provided.
-     */
-    value;
-    /**
-     * Icon displayed at the start of the tab button.
-     * Can be an emoji, URL, or icon class.
-     */
-    iconStart;
-    /**
-     * Icon displayed at the end of the tab button.
-     */
-    iconEnd;
-    /**
-     * Whether this tab is disabled.
-     */
-    disabled = false;
-    /**
-     * Whether to render the panel content only when active (lazy loading).
-     * When true, content is not rendered until the tab is first selected.
-     * When false (default), content is always in DOM but hidden when inactive.
-     */
-    lazy = false;
-    /**
-     * Internal: Whether this panel is currently active (set by parent le-tabs)
-     */
-    active = false;
-    /**
-     * Internal: Track if panel has ever been activated (for lazy rendering)
-     */
-    hasBeenActive = false;
-    activeChanged(isActive) {
-        if (isActive && !this.hasBeenActive) {
-            this.hasBeenActive = true;
-        }
-    }
-    /**
-     * Get the effective value (value or label as fallback)
-     */
-    async getValue() {
-        return this.value ?? this.label;
-    }
-    /**
-     * Get tab configuration for parent component
-     */
-    async getTabConfig() {
-        return {
-            label: this.label,
-            value: this.value ?? this.label,
-            iconStart: this.iconStart,
-            iconEnd: this.iconEnd,
-            disabled: this.disabled,
-        };
-    }
-    /**
-     * Set the active state (called by parent le-tabs)
-     */
-    async setActive(isActive) {
-        this.active = isActive;
-    }
-    /**
-     * Check if panel should render content
-     */
-    shouldRenderContent() {
-        if (!this.lazy)
-            return true;
-        return this.hasBeenActive;
-    }
-    render() {
-        const shouldRender = this.shouldRenderContent();
-        return (index.h("le-component", { key: '1315534f32fe8cc7f2ff1c0ec0457d30514064d4', component: "le-tab-panel" }, index.h("div", { key: '7544225e28b3be3e09269a669676515dc4ad097c', class: {
-                'tab-panel': true,
-                'active': this.active,
-                'lazy-hidden': this.lazy && !this.active,
-            }, role: "tabpanel", "aria-hidden": !this.active ? 'true' : undefined, tabIndex: this.active ? 0 : -1 }, index.h("le-slot", { key: 'a686c87a4e5a62a6befb425141bd96b59273ec6b', name: "", description: "Tab panel content", type: "slot" }, shouldRender && index.h("slot", { key: '76bd67392762a5ddbf8124c5596c6cb37ecf44fa' })))));
-    }
-    static get watchers() { return {
-        "active": ["activeChanged"]
-    }; }
-};
-LeTabPanel.style = leTabPanelCss();
-
-exports.le_tab_panel = LeTabPanel;
-//# sourceMappingURL=le-tab-panel.entry.cjs.js.map

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

@@ -1,136 +0,0 @@
-'use strict';
-
-var index = require('./index-BzadfLTc.js');
-var utils = require('./utils-Dxx9WhWK.js');
-
-const leTabCss = () => `:host{display:inline-block;--le-tab-border-radius:var(--le-radius-md);--le-tab-padding-x:var(--le-spacing-4);--le-tab-padding-y:var(--le-spacing-2);--le-tab-padding:var(--le-tab-padding-y) var(--le-tab-padding-x);--le-tab-small-padding:0.25rem;--le-tab-font-size:var(--le-font-size-md);--le-tab-font-weight:var(--le-font-weight-medium);--le-tab-transition:var(--le-transition-fast);--le-transition-easing:ease-in-out;--le-tab-icon-aspect-ratio:1;--le-tab-icon-only-aspect-ratio:2.5;--le-tab-color:var(--le-color-text-primary);--le-selected-tab-color:var(--le-color-primary);--le-selected-icon-only-tab-background:color-mix(in srgb, var(--_tab-bg) 10%, transparent);--_tab-bg:var(--le-color-primary);--_tab-bg-hover:var(--le-color-primary-dark);--_tab-bg-system:var(--le-color-black);--_tab-color:var(--le-tab-color);--_tab-border-color:var(--le-color-primary)}:host([full-width]){display:block;width:100%}.le-tab-container{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--le-spacing-3);width:100%;padding:var(--le-tab-padding);color:var(--_tab-color);font-family:var(--le-font-family-base);font-size:var(--le-tab-font-size);font-weight:var(--le-tab-font-weight);line-height:var(--le-line-height-tight);text-decoration:none;cursor:pointer;transition:background-color var(--le-tab-transition) var(--le-transition-easing),
-    border-color var(--le-tab-transition) var(--le-transition-easing),
-    box-shadow var(--le-tab-transition) var(--le-transition-easing),
-    transform var(--le-tab-transition) var(--le-transition-easing)}.le-tab-container:hover:not(:disabled){color:var(--le-selected-tab-color)}.le-tab-container:focus-visible{outline:none}.le-tab-container:disabled{opacity:0.5;cursor:not-allowed}.le-tab-label{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--le-spacing-2)}.le-tab-container.variant-underlined{background:transparent;border:2px solid transparent;border-radius:0}.le-tab-container.variant-underlined.position-start,.le-tab-container.variant-underlined.position-end{border-block-width:0}.le-tab-container.variant-underlined.position-start{padding-inline-start:0}.le-tab-container.variant-underlined.position-top,.le-tab-container.variant-underlined.position-bottom{border-inline-width:0}.le-tab-container.variant-underlined.position-start.selected{border-inline-end-color:var(--_tab-border-color)}.le-tab-container.variant-underlined.position-end.selected{border-inline-start-color:var(--_tab-border-color)}.le-tab-container.variant-underlined.position-top.selected{border-bottom-color:var(--_tab-border-color)}.le-tab-container.variant-underlined.position-bottom.selected{border-top-color:var(--_tab-border-color)}.le-tab-container.variant-solid{background:transparent;border-radius:var(--le-tab-border-radius);border:none}.le-tab-container.variant-solid.selected{background:var(--_tab-bg);color:var(--le-color-on-primary)}.le-tab-container.variant-pills{background:transparent;border-radius:var(--le-radius-full);border:none}.le-tab-container.variant-pills.selected{background:var(--_tab-bg);color:var(--le-color-on-primary)}.le-tab-container.variant-enclosed{padding-block:var(--le-spacing-1);background:transparent;border-radius:var(--le-tab-border-radius);border:none}.le-tab-container.variant-enclosed.selected{background:var(--_tab-bg);color:var(--le-color-on-primary)}.le-tab-container.variant-icon-only{border:none;padding:0;background:transparent;color:var(--_tab-color)}.le-tab-container.variant-icon-only .icon-only{flex-direction:column}.le-tab-container.variant-icon-only .icon{display:flex;align-items:center;justify-content:center;min-height:var(--le-font-size-3xl);aspect-ratio:var(--le-tab-icon-only-aspect-ratio);font-size:var(--le-font-size-2xl);border-radius:var(--le-radius-full)}.le-tab-container.variant-icon-only .icon-label{margin-top:var(--le-spacing-1);font-size:var(--le-font-size-2xs)}.le-tab-container.variant-icon-only.selected{color:var(--le-selected-tab-color)}.le-tab-container.variant-icon-only.selected .icon{background:var(--le-selected-icon-only-tab-background)}.le-tab-container.variant-icon-only.size-small{padding:var(--le-tab-small-padding, 0.25rem)}.le-tab-container.variant-icon-only .content{display:none}.le-tab-container.size-small{--le-tab-padding-x:0.4rem;--le-tab-padding-y:0.3rem;--le-tab-padding-top:0.35rem;--le-tab-font-size:var(--le-tab-small-font-size, var(--le-font-size-xs))}.le-tab-container.size-large{--le-tab-padding-x:0.9rem;--le-tab-padding-y:0.6rem;--le-tab-font-size:var(--le-font-size-xl)}.le-tab-container.full-width{display:block;width:100%}.le-tab-container.variant-underlined.selected,.le-tab-container.variant-clear.selected{color:var(--le-selected-tab-color)}:host>le-component.icon-only .le-tab-container{padding:0.5rem;padding-bottom:0.6rem;aspect-ratio:var(--le-tab-icon-aspect-ratio, 1)}.le-tab-container.icon-only.size-small{padding:var(--le-tab-small-padding, 0.25rem)}.le-tab-container.icon-only.size-large{padding:0.75rem}.le-tab-container.icon-only .content{display:none}.content{display:inline}.content:empty{display:none}.icon-start,.icon-only,.icon-end{display:flex;align-items:center;justify-content:center}.icon-start:empty,.icon-only:empty,.icon-end:empty{display:none}::slotted([slot="icon-start"]),::slotted([slot="icon-only"]),::slotted([slot="icon-end"]){display:flex;align-items:center;justify-content:center;width:1.125em;height:1.125em}.le-tab-align-start{justify-content:flex-start}.le-tab-align-center{justify-content:center}.le-tab-align-space-between{justify-content:space-between}.le-tab-align-end{justify-content:flex-end}`;
-
-const LeTab = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.leClick = index.createEvent(this, "click");
-    }
-    get el() { return index.getElement(this); }
-    /**
-     * Mode of the popover should be 'default' for internal use
-     */
-    mode;
-    /**
-     * Label if it is not provided via slot
-     */
-    label;
-    /**
-     * Value of the tab, defaults to label if not provided
-     */
-    value;
-    /**
-     * Tab variant style
-     * @allowedValues solid | underlined | clear | enclosed | icon-only
-     */
-    variant = 'underlined';
-    /**
-     * Position of the tabs when used within a le-tabs component
-     * @allowedValues top | bottom | start | end
-     */
-    position = 'top';
-    /**
-     * Tab size
-     * @allowedValues small | medium | large
-     */
-    size = 'medium';
-    /**
-     * Whether the tab can get focus
-     * needed for accessibility when used in custom tab implementations
-     */
-    focusable = true;
-    /**
-     * Whether the tab is in a selected/active state
-     */
-    selected = false;
-    /**
-     * Whether the tab takes full width of its container
-     */
-    fullWidth = false;
-    /**
-     * Icon only tab image or emoji
-     * if this prop is set, the tab will render only the icon slot
-     */
-    icon;
-    /**
-     * Whether to show the label when in icon-only mode
-     */
-    showLabel = false;
-    /**
-     * Start icon image or emoji
-     */
-    iconStart;
-    /**
-     * End icon image or emoji
-     */
-    iconEnd;
-    /**
-     * Whether the tab is disabled
-     */
-    disabled = false;
-    /**
-     * Optional href to make the tab act as a link
-     */
-    href;
-    /**
-     * Link target when href is set
-     */
-    target;
-    /**
-     * Alignment of the tab label without the end icon
-     * @allowedValues start | center | space-between | end
-     */
-    align = 'center';
-    /**
-     * Get tab configuration for parent component
-     */
-    async getTabConfig() {
-        return {
-            label: this.label,
-            value: this.value ?? this.label,
-            icon: this.icon,
-            iconStart: this.iconStart,
-            iconEnd: this.iconEnd,
-            disabled: this.disabled,
-        };
-    }
-    /**
-     * Emitted when the tab is clicked.
-     * This is a custom event that wraps the native click but ensures the target is the le-tab.
-     */
-    leClick;
-    handleClick = (event) => {
-        // We stop the internal button click from bubbling up
-        event.stopPropagation();
-        if (this.disabled) {
-            event.preventDefault();
-            return;
-        }
-        // And emit our own click event from the host element
-        this.leClick.emit(event);
-    };
-    render() {
-        const classes = utils.classnames(`variant-${this.variant}`, `size-${this.size}`, `position-${this.position}`, {
-            'selected': this.selected,
-            'full-width': this.fullWidth,
-            'icon-only': this.icon !== undefined,
-            'disabled': this.disabled,
-        });
-        const TagType = this.href ? 'a' : 'button';
-        const attrs = this.href
-            ? { href: this.href, target: this.target, role: 'button' }
-            : { disabled: this.disabled };
-        return (index.h(index.Host, { key: 'a539044017f98ddaa7636df1457b669f56c19d94' }, index.h("le-component", { key: 'b6df3e0738be09d00f3cd802b3cd06af4402e746', component: "le-tab" }, index.h(TagType, { key: 'a37f2d404da74b5b0d99bbb0b9ff57121903ee2d', class: utils.classnames('le-tab-container', `le-tab-align-${this.align}`, classes), part: "button", ...attrs, onClick: this.handleClick, tabIndex: this.focusable ? 0 : -1 }, this.icon !== undefined ? (index.h("div", { class: "icon-only" }, index.h("div", { class: "icon" }, this.icon), this.showLabel && index.h("span", { class: "icon-label" }, this.label))) : (index.h(index.Fragment, null, index.h("span", { class: "le-tab-label" }, this.iconStart && (index.h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), index.h("le-slot", { name: "", description: "Tab text", type: "text", class: "content", part: "content" }, index.h("slot", null, this.label))), this.iconEnd && (index.h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd))))))));
-    }
-};
-LeTab.style = leTabCss();
-
-exports.le_tab = LeTab;
-//# sourceMappingURL=le-tab.entry.cjs.js.map