le-kit 0.5.3 → 0.5.4

package/dist/collection/components/le-tab-bar/le-tab-bar.js

@@ -1,459 +0,0 @@
-import { h, Host, } from "@stencil/core";
-/**
- * A presentational tab bar component without panels.
- *
- * Use this for navigation/routing scenarios where you manage the content
- * externally based on the selection events. For tabs with built-in panels,
- * use `le-tabs` instead.
- *
- * @cssprop --le-tab-bar-border-color - Border color
- * @cssprop --le-tab-bar-gap - Gap between tabs
- * @cssprop --le-tab-bar-indicator-color - Active indicator color
- * @cssprop --le-tab-bar-padding-x - Horizontal padding for tabs
- * @cssprop --le-tab-bar-padding-y - Vertical padding for tabs
- *
- * @csspart tablist - The tab button container
- * @csspart tab - Individual tab buttons
- * @csspart tab-active - The currently active tab
- *
- * @cmsEditable true
- * @cmsCategory Navigation
- */
-export class LeTabBar {
-    constructor() {
-        /**
-         * Array of tab options defining the tabs to display.
-         */
-        this.tabs = [];
-        /**
-         * Whether tabs should stretch to fill available width.
-         */
-        this.fullWidth = true;
-        /**
-         * Whether to show labels in icon-only mode.
-         */
-        this.showLabels = false;
-        /**
-         * Position of the tab bar.
-         * @allowedValues top | bottom
-         */
-        this.position = 'top';
-        /**
-         * Size of the tabs.
-         * @allowedValues small | medium | large
-         */
-        this.size = 'medium';
-        /**
-         * Whether to show a border below the tab bar.
-         */
-        this.bordered = true;
-        /**
-         * Internal tab configurations (built from children or tabs prop)
-         */
-        this.tabConfigs = [];
-        /**
-         * Whether we're using declarative mode (le-tab-panel children)
-         */
-        this.isDeclarativeMode = false;
-        /**
-         * Internal state for focused tab index (for keyboard navigation)
-         */
-        this.focusedIndex = 0;
-        this.handleTabClick = (tab) => {
-            this.selectTab(tab);
-        };
-        this.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]);
-                }
-            }
-        };
-    }
-    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 });
-    }
-    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 (h(Host, { key: 'f652526506b36c22ce349d7a35177ded9d7bdfdb', class: classes }, h("le-component", { key: 'f08e832354f7175492c29aa0761a617f2440b032', component: "le-tab-bar" }, h("div", { key: '6bb6f659626795d8dfd2df0eccfd817a6f561223', class: "tablist", role: "tablist", "aria-orientation": "horizontal", part: "tablist", onKeyDown: this.handleKeyDown }, h("le-slot", { key: 'c6b64eaf7777645bb1eb760ed25c42a0d657a152', name: "", type: "slot", allowedComponents: "le-tab" }, tabConfigs.map(tab => {
-            const value = this.getTabValue(tab);
-            const isSelected = value === selected;
-            return (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) }, h("span", { class: "tab-label" }, tab.label)));
-        }))))));
-    }
-    static get is() { return "le-tab-bar"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["le-tab-bar.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["le-tab-bar.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "tabs": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "LeOption[]",
-                    "resolved": "LeOption[]",
-                    "references": {
-                        "LeOption": {
-                            "location": "import",
-                            "path": "../../types/options",
-                            "id": "src/types/options.ts::LeOption"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Array of tab options defining the tabs to display."
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            },
-            "selected": {
-                "type": "any",
-                "mutable": true,
-                "complexType": {
-                    "original": "LeOptionValue",
-                    "resolved": "number | string",
-                    "references": {
-                        "LeOptionValue": {
-                            "location": "import",
-                            "path": "../../types/options",
-                            "id": "src/types/options.ts::LeOptionValue"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The value of the currently selected tab."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "selected"
-            },
-            "fullWidth": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether tabs should stretch to fill available width."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "full-width",
-                "defaultValue": "true"
-            },
-            "showLabels": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether to show labels in icon-only mode."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-labels",
-                "defaultValue": "false"
-            },
-            "position": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'top' | 'bottom'",
-                    "resolved": "\"bottom\" | \"top\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "allowedValues",
-                            "text": "top | bottom"
-                        }],
-                    "text": "Position of the tab bar."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "position",
-                "defaultValue": "'top'"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'small' | 'medium' | 'large'",
-                    "resolved": "\"large\" | \"medium\" | \"small\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "allowedValues",
-                            "text": "small | medium | large"
-                        }],
-                    "text": "Size of the tabs."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "size",
-                "defaultValue": "'medium'"
-            },
-            "bordered": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether to show a border below the tab bar."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "bordered",
-                "defaultValue": "true"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "tabConfigs": {},
-            "isDeclarativeMode": {},
-            "focusedIndex": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "leTabChange",
-                "name": "leTabChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the selected tab changes."
-                },
-                "complexType": {
-                    "original": "LeOptionSelectDetail",
-                    "resolved": "LeOptionSelectDetail",
-                    "references": {
-                        "LeOptionSelectDetail": {
-                            "location": "import",
-                            "path": "../../types/options",
-                            "id": "src/types/options.ts::LeOptionSelectDetail"
-                        }
-                    }
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "selected",
-                "methodName": "selectedChanged"
-            }, {
-                "propName": "tabs",
-                "methodName": "tabsChanged"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "slotchange",
-                "method": "handleSlotChange",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
-}
-//# sourceMappingURL=le-tab-bar.js.map

package/dist/collection/components/le-tab-bar/le-tab-bar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"le-tab-bar.js","sourceRoot":"","sources":["../../../src/components/le-tab-bar/le-tab-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  h,\n  Element,\n  Watch,\n  Listen,\n  Host,\n} from '@stencil/core';\nimport { LeOption, LeOptionValue, LeOptionSelectDetail } from '../../types/options';\n\ninterface TabConfig {\n  label: string;\n  value: string;\n  icon?: string;\n  href?: string;\n  disabled: boolean;\n}\n\n/**\n * A presentational tab bar component without panels.\n *\n * Use this for navigation/routing scenarios where you manage the content\n * externally based on the selection events. For tabs with built-in panels,\n * use `le-tabs` instead.\n *\n * @cssprop --le-tab-bar-border-color - Border color\n * @cssprop --le-tab-bar-gap - Gap between tabs\n * @cssprop --le-tab-bar-indicator-color - Active indicator color\n * @cssprop --le-tab-bar-padding-x - Horizontal padding for tabs\n * @cssprop --le-tab-bar-padding-y - Vertical padding for tabs\n *\n * @csspart tablist - The tab button container\n * @csspart tab - Individual tab buttons\n * @csspart tab-active - The currently active tab\n *\n * @cmsEditable true\n * @cmsCategory Navigation\n */\n@Component({\n  tag: 'le-tab-bar',\n  styleUrl: 'le-tab-bar.css',\n  shadow: true,\n})\nexport class LeTabBar {\n  @Element() el: HTMLElement;\n\n  /**\n   * Array of tab options defining the tabs to display.\n   */\n  @Prop() tabs: LeOption[] = [];\n\n  /**\n   * The value of the currently selected tab.\n   */\n  @Prop({ mutable: true }) selected?: LeOptionValue;\n\n  /**\n   * Whether tabs should stretch to fill available width.\n   */\n  @Prop() fullWidth: boolean = true;\n\n  /**\n   * Whether to show labels in icon-only mode.\n   */\n  @Prop() showLabels: boolean = false;\n\n  /**\n   * Position of the tab bar.\n   * @allowedValues top | bottom\n   */\n  @Prop() position: 'top' | 'bottom' = 'top';\n\n  /**\n   * Size of the tabs.\n   * @allowedValues small | medium | large\n   */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Whether to show a border below the tab bar.\n   */\n  @Prop() bordered: boolean = true;\n\n  /**\n   * Internal tab configurations (built from children or tabs prop)\n   */\n  @State() private tabConfigs: TabConfig[] = [];\n\n  /**\n   * Whether we're using declarative mode (le-tab-panel children)\n   */\n  @State() private isDeclarativeMode: boolean = false;\n\n  /**\n   * Internal state for focused tab index (for keyboard navigation)\n   */\n  @State() private focusedIndex: number = 0;\n\n  /**\n   * Emitted when the selected tab changes.\n   */\n  @Event() leTabChange: EventEmitter<LeOptionSelectDetail>;\n\n  private mutationObserver?: MutationObserver;\n\n  @Watch('selected')\n  selectedChanged(newValue: LeOptionValue) {\n    const index = this.tabConfigs.findIndex(t => t.value === newValue);\n    if (index >= 0) {\n      this.focusedIndex = index;\n    }\n  }\n\n  @Watch('tabs')\n  tabsChanged() {\n    if (!this.isDeclarativeMode) {\n      this.buildTabConfigs();\n    }\n  }\n\n  @Listen('slotchange')\n  handleSlotChange() {\n    this.buildTabConfigs();\n  }\n\n  componentWillLoad() {\n    this.buildTabConfigs();\n    if (this.selected === undefined && this.tabs.length > 0) {\n      const firstEnabled = this.tabs.find(tab => !tab.disabled);\n      if (firstEnabled) {\n        this.selected = this.getTabValue(firstEnabled);\n      }\n    }\n    if (this.selected !== undefined) {\n      const index = this.getTabIndex(this.selected);\n      if (index >= 0) {\n        this.focusedIndex = index;\n      }\n    }\n  }\n\n  connectedCallback() {\n    // Watch for dynamic changes to children\n    this.mutationObserver = new MutationObserver(() => {\n      this.buildTabConfigs();\n    });\n    this.mutationObserver.observe(this.el, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  private async buildTabConfigs() {\n    // Check for le-tab-panel children\n    const tabs = Array.from(this.el.querySelectorAll(':scope > le-tab')) as Array<\n      HTMLElement & {\n        getTabConfig: () => Promise<TabConfig>;\n        setActive: (active: boolean) => Promise<void>;\n      }\n    >;\n\n    if (tabs.length > 0) {\n      // Declarative mode - build from children\n      this.isDeclarativeMode = true;\n      const configs: TabConfig[] = [];\n\n      for (const tab of tabs) {\n        const config = await tab.getTabConfig();\n        configs.push({ ...config });\n      }\n\n      this.tabConfigs = configs;\n    } else if (this.tabs.length > 0) {\n      // Programmatic mode - use tabs prop\n      this.isDeclarativeMode = false;\n      this.tabConfigs = this.tabs.map(tab => ({\n        label: tab.label,\n        value: (tab.value !== undefined ? tab.value : tab.label) as string,\n        iconStart: tab.iconStart,\n        iconEnd: tab.iconEnd,\n        disabled: tab.disabled ?? false,\n      }));\n    } else {\n      this.tabConfigs = [];\n    }\n\n    // Set default selected\n    if (this.selected === undefined && this.tabConfigs.length > 0) {\n      const firstEnabled = this.tabConfigs.find(t => !t.disabled);\n      if (firstEnabled) {\n        this.selected = firstEnabled.value;\n      }\n    }\n\n    // Initialize focused index\n    if (this.selected !== undefined) {\n      const index = this.tabConfigs.findIndex(t => t.value === this.selected);\n      if (index >= 0) {\n        this.focusedIndex = index;\n      }\n    }\n  }\n\n  private getTabValue(tab: LeOption): LeOptionValue {\n    return tab.value !== undefined ? tab.value : tab.label;\n  }\n\n  private getTabIndex(value: LeOptionValue): number {\n    return this.tabs.findIndex(tab => this.getTabValue(tab) === value);\n  }\n\n  private selectTab(tab: LeOption) {\n    if (tab.disabled) return;\n\n    const value = this.getTabValue(tab);\n    this.selected = value;\n    this.leTabChange.emit({ value, option: tab });\n  }\n\n  private handleTabClick = (tab: LeOption) => {\n    this.selectTab(tab);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const { tabConfigs } = this;\n    let newIndex = this.focusedIndex;\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        event.preventDefault();\n        newIndex = this.findNextEnabledTab(-1);\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n        newIndex = this.findNextEnabledTab(1);\n        break;\n      case 'Home':\n        event.preventDefault();\n        newIndex = this.findFirstEnabledTab();\n        break;\n      case 'End':\n        event.preventDefault();\n        newIndex = this.findLastEnabledTab();\n        break;\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        if (tabConfigs[this.focusedIndex]) {\n          this.selectTab(tabConfigs[this.focusedIndex]);\n        }\n        return;\n      default:\n        return;\n    }\n\n    if (newIndex !== this.focusedIndex) {\n      this.focusedIndex = newIndex;\n      if (tabConfigs[newIndex]) {\n        this.selectTab(tabConfigs[newIndex]);\n      }\n    }\n  };\n\n  private findNextEnabledTab(direction: 1 | -1): number {\n    const { tabConfigs } = this;\n    let index = this.focusedIndex;\n    const length = tabConfigs.length;\n\n    for (let i = 0; i < length; i++) {\n      index = (index + direction + length) % length;\n      if (!tabConfigs[index].disabled) {\n        return index;\n      }\n    }\n    return this.focusedIndex;\n  }\n\n  private findFirstEnabledTab(): number {\n    return this.tabConfigs.findIndex(tab => !tab.disabled);\n  }\n\n  private findLastEnabledTab(): number {\n    for (let i = this.tabConfigs.length - 1; i >= 0; i--) {\n      if (!this.tabConfigs[i].disabled) return i;\n    }\n    return 0;\n  }\n\n  render() {\n    const { tabConfigs, selected, size, bordered } = this;\n\n    const classes = {\n      'le-tab-bar': true,\n      'bordered': bordered,\n      'position-top': this.position === 'top',\n      'position-bottom': this.position === 'bottom',\n    };\n\n    return (\n      <Host class={classes}>\n        <le-component component=\"le-tab-bar\">\n          <div\n            class=\"tablist\"\n            role=\"tablist\"\n            aria-orientation=\"horizontal\"\n            part=\"tablist\"\n            onKeyDown={this.handleKeyDown}\n          >\n            <le-slot name=\"\" type=\"slot\" allowedComponents=\"le-tab\">\n              {tabConfigs.map(tab => {\n                const value = this.getTabValue(tab);\n                const isSelected = value === selected;\n\n                return (\n                  <le-tab\n                    key={value}\n                    class=\"tab\"\n                    role=\"tab\"\n                    variant=\"icon-only\"\n                    label={tab.label}\n                    value={tab.value}\n                    icon={tab.icon}\n                    href={tab.href}\n                    selected={isSelected}\n                    disabled={tab.disabled}\n                    showLabel={this.showLabels}\n                    size={size}\n                    part={isSelected ? 'tab tab-active' : 'tab'}\n                    aria-selected={isSelected ? 'true' : 'false'}\n                    aria-disabled={tab.disabled ? 'true' : undefined}\n                    tabIndex={-1}\n                    onClick={() => this.handleTabClick(tab)}\n                  >\n                    <span class=\"tab-label\">{tab.label}</span>\n                  </le-tab>\n                );\n              })}\n            </le-slot>\n          </div>\n        </le-component>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/le-tab-panel/le-tab-panel.css

@@ -1,30 +0,0 @@
-/**
- * le-tab-panel - Styles
- */
-
-: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;
-}
-
-/* For lazy panels that have been rendered but are now hidden */
-.tab-panel.lazy-hidden {
-  display: none;
-}