le-kit 0.1.14 → 0.1.15

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

@@ -0,0 +1,302 @@
+import { h } from "@stencil/core";
+/**
+ * A tab panel component used as a child of le-tabs.
+ *
+ * Each le-tab-panel defines both the tab button label and the panel content.
+ * The parent le-tabs component automatically reads these panels and creates
+ * the tab interface.
+ *
+ * @slot - Default slot for panel content
+ *
+ * @cmsEditable true
+ * @cmsCategory Navigation
+ */
+export class LeTabPanel {
+    el;
+    /**
+     * 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 (h("le-component", { key: '833fff0575be50b91cebfd864020813b9a8011ab', component: "le-tab-panel" }, h("div", { key: '7315936be235a0d9cf75b56b4b30989c89a36c10', 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 }, h("le-slot", { key: 'cec03d1882e0316d31a0f217cc1ad6decdc15edc', name: "", description: "Tab panel content", type: "slot" }, shouldRender && h("slot", { key: 'cae2bc7193c4c423733c35b7a5d4a80d8a2ded95' })))));
+    }
+    static get is() { return "le-tab-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["le-tab-panel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["le-tab-panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label displayed in the tab button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value used to identify this tab.\nDefaults to the label if not provided."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "iconStart": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon displayed at the start of the tab button.\nCan be an emoji, URL, or icon class."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-start"
+            },
+            "iconEnd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon displayed at the end of the tab button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-end"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this tab is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "lazy": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to render the panel content only when active (lazy loading).\nWhen true, content is not rendered until the tab is first selected.\nWhen false (default), content is always in DOM but hidden when inactive."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "lazy",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "active": {},
+            "hasBeenActive": {}
+        };
+    }
+    static get methods() {
+        return {
+            "getValue": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Get the effective value (value or label as fallback)",
+                    "tags": []
+                }
+            },
+            "getTabConfig": {
+                "complexType": {
+                    "signature": "() => Promise<{ label: string; value: string; iconStart?: string; iconEnd?: string; disabled: boolean; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ label: string; value: string; iconStart?: string; iconEnd?: string; disabled: boolean; }>"
+                },
+                "docs": {
+                    "text": "Get tab configuration for parent component",
+                    "tags": []
+                }
+            },
+            "setActive": {
+                "complexType": {
+                    "signature": "(isActive: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "isActive",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set the active state (called by parent le-tabs)",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "active",
+                "methodName": "activeChanged"
+            }];
+    }
+}
+//# sourceMappingURL=le-tab-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"le-tab-panel.js","sourceRoot":"","sources":["../../../src/components/le-tab-panel/le-tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAElF;;;;;;;;;;;GAWG;AAMH,MAAM,OAAO,UAAU;IACV,EAAE,CAAwB;IAErC;;OAEG;IACK,KAAK,CAAU;IAEvB;;;OAGG;IACK,KAAK,CAAU;IAEvB;;;OAGG;IACK,SAAS,CAAU;IAE3B;;OAEG;IACK,OAAO,CAAU;IAEzB;;OAEG;IACK,QAAQ,GAAY,KAAK,CAAC;IAElC;;;;OAIG;IACK,IAAI,GAAY,KAAK,CAAC;IAE9B;;OAEG;IACM,MAAM,GAAY,KAAK,CAAC;IAEjC;;OAEG;IACM,aAAa,GAAY,KAAK,CAAC;IAGxC,aAAa,CAAC,QAAiB;QAC7B,IAAI,QAAQ,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;YACpC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC;IACH,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,QAAQ;QACZ,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC;IAClC,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,YAAY;QAOhB,OAAO;YACL,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK;YAC/B,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC;IACJ,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,SAAS,CAAC,QAAiB;QAC/B,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;IACzB,CAAC;IAED;;OAEG;IACK,mBAAmB;QACzB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAC;QAC5B,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;IAED,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAEhD,OAAO,CACL,qEAAc,SAAS,EAAC,cAAc;YACpC,4DACE,KAAK,EAAE;oBACL,WAAW,EAAE,IAAI;oBACjB,QAAQ,EAAE,IAAI,CAAC,MAAM;oBACrB,aAAa,EAAE,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM;iBACzC,EACD,IAAI,EAAC,UAAU,iBACF,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC9C,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBAE9B,gEAAS,IAAI,EAAC,EAAE,EAAC,WAAW,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM,IACzD,YAAY,IAAI,8DAAa,CACtB,CACN,CACO,CAChB,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Element, State, Watch, Method } from '@stencil/core';\n\n/**\n * A tab panel component used as a child of le-tabs.\n *\n * Each le-tab-panel defines both the tab button label and the panel content.\n * The parent le-tabs component automatically reads these panels and creates\n * the tab interface.\n *\n * @slot - Default slot for panel content\n *\n * @cmsEditable true\n * @cmsCategory Navigation\n */\n@Component({\n  tag: 'le-tab-panel',\n  styleUrl: 'le-tab-panel.css',\n  shadow: true,\n})\nexport class LeTabPanel {\n  @Element() el: HTMLLeTabPanelElement;\n\n  /**\n   * The label displayed in the tab button.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The value used to identify this tab.\n   * Defaults to the label if not provided.\n   */\n  @Prop() value?: string;\n\n  /**\n   * Icon displayed at the start of the tab button.\n   * Can be an emoji, URL, or icon class.\n   */\n  @Prop() iconStart?: string;\n\n  /**\n   * Icon displayed at the end of the tab button.\n   */\n  @Prop() iconEnd?: string;\n\n  /**\n   * Whether this tab is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether to render the panel content only when active (lazy loading).\n   * When true, content is not rendered until the tab is first selected.\n   * When false (default), content is always in DOM but hidden when inactive.\n   */\n  @Prop() lazy: boolean = false;\n\n  /**\n   * Internal: Whether this panel is currently active (set by parent le-tabs)\n   */\n  @State() active: boolean = false;\n\n  /**\n   * Internal: Track if panel has ever been activated (for lazy rendering)\n   */\n  @State() hasBeenActive: boolean = false;\n\n  @Watch('active')\n  activeChanged(isActive: boolean) {\n    if (isActive && !this.hasBeenActive) {\n      this.hasBeenActive = true;\n    }\n  }\n\n  /**\n   * Get the effective value (value or label as fallback)\n   */\n  @Method()\n  async getValue(): Promise<string> {\n    return this.value ?? this.label;\n  }\n\n  /**\n   * Get tab configuration for parent component\n   */\n  @Method()\n  async getTabConfig(): Promise<{\n    label: string;\n    value: string;\n    iconStart?: string;\n    iconEnd?: string;\n    disabled: boolean;\n  }> {\n    return {\n      label: this.label,\n      value: this.value ?? this.label,\n      iconStart: this.iconStart,\n      iconEnd: this.iconEnd,\n      disabled: this.disabled,\n    };\n  }\n\n  /**\n   * Set the active state (called by parent le-tabs)\n   */\n  @Method()\n  async setActive(isActive: boolean) {\n    this.active = isActive;\n  }\n\n  /**\n   * Check if panel should render content\n   */\n  private shouldRenderContent(): boolean {\n    if (!this.lazy) return true;\n    return this.hasBeenActive;\n  }\n\n  render() {\n    const shouldRender = this.shouldRenderContent();\n\n    return (\n      <le-component component=\"le-tab-panel\">\n        <div\n          class={{\n            'tab-panel': true,\n            'active': this.active,\n            'lazy-hidden': this.lazy && !this.active,\n          }}\n          role=\"tabpanel\"\n          aria-hidden={!this.active ? 'true' : undefined}\n          tabIndex={this.active ? 0 : -1}\n        >\n          <le-slot name=\"\" description=\"Tab panel content\" type=\"slot\">\n            {shouldRender && <slot></slot>}\n          </le-slot>\n        </div>\n      </le-component>\n    );\n  }\n}\n"]}

package/dist/collection/components/le-tabs/le-tabs.css

@@ -0,0 +1,146 @@
+/**
+ * le-tabs - Default mode styles
+ */
+
+: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
+ * ============================================ */
+
+.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
+ * ============================================ */
+
+.variant-underlined .tablist {
+  padding-inline: 4px;
+}
+
+/* ============================================
+ * VARIANT: PILLS
+ * ============================================ */
+
+.variant-pills .tablist {
+  border-radius: calc(1.12rem);
+}
+
+
+/* ============================================
+ * VARIANT: ENCLOSED
+ * ============================================ */
+
+.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
+ * ============================================ */
+
+.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
+ * ============================================ */
+
+.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;
+}