le-kit 0.1.14 → 0.1.15

package/dist/collection/components/le-stack/le-stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"le-stack.js","sourceRoot":"","sources":["../../../src/components/le-stack/le-stack.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible stack layout component using CSS flexbox.\n *\n * `le-stack` arranges its children in a row (horizontal) or column (vertical)\n * with configurable spacing, alignment, and wrapping behavior. Perfect for\n * creating responsive layouts.\n *\n * @slot - Default slot for stack items (le-box components recommended)\n *\n * @cssprop --le-stack-gap - Gap between items (defaults to var(--le-space-md))\n *\n * @csspart stack - The main stack container\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-stack',\n  styleUrl: 'le-stack.default.css',\n  shadow: true,\n})\nexport class LeStack {\n  @Element() el: HTMLElement;\n\n  /**\n   * Direction of the stack layout\n   * @allowedValues horizontal | vertical\n   */\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Gap between items (CSS value like '8px', '1rem', 'var(--le-space-md)')\n   */\n  @Prop() gap?: string;\n\n  /**\n   * Alignment of items on the cross axis\n   * @allowedValues start | center | end | stretch | baseline\n   */\n  @Prop() align: 'start' | 'center' | 'end' | 'stretch' | 'baseline' = 'stretch';\n\n  /**\n   * Distribution of items on the main axis\n   * @allowedValues start | center | end | space-between | space-around | space-evenly\n   */\n  @Prop() justify: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly' = 'start';\n\n  /**\n   * Whether items should wrap to multiple lines\n   */\n  @Prop() wrap: boolean = false;\n\n  /**\n   * Alignment of wrapped lines (only applies when wrap is true)\n   * @allowedValues start | center | end | stretch | space-between | space-around\n   */\n  @Prop() alignContent: 'start' | 'center' | 'end' | 'stretch' | 'space-between' | 'space-around' = 'stretch';\n\n  /**\n   * Whether to reverse the order of items\n   */\n  @Prop() reverse: boolean = false;\n\n  /**\n   * Maximum number of items allowed in the stack (for CMS validation)\n   * @min 1\n   */\n  @Prop() maxItems?: number;\n\n  /**\n   * Whether the stack should take full width of its container\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * Whether the stack should take full height of its container\n   */\n  @Prop() fullHeight: boolean = false;\n\n  /**\n   * Padding inside the stack container (CSS value)\n   */\n  @Prop() padding?: string;\n\n  private getFlexDirection(): string {\n    const base = this.direction === 'vertical' ? 'column' : 'row';\n    return this.reverse ? `${base}-reverse` : base;\n  }\n\n  private getAlignItems(): string {\n    const alignMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n      baseline: 'baseline',\n    };\n    return alignMap[this.align] || 'stretch';\n  }\n\n  private getJustifyContent(): string {\n    const justifyMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      'space-between': 'space-between',\n      'space-around': 'space-around',\n      'space-evenly': 'space-evenly',\n    };\n    return justifyMap[this.justify] || 'flex-start';\n  }\n\n  private getAlignContent(): string {\n    const alignContentMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n      'space-between': 'space-between',\n      'space-around': 'space-around',\n    };\n    return alignContentMap[this.alignContent] || 'stretch';\n  }\n\n  render() {\n    const style: { [key: string]: string } = {\n      display: 'flex',\n      flexDirection: this.getFlexDirection(),\n      alignItems: this.getAlignItems(),\n      justifyContent: this.getJustifyContent(),\n      flexWrap: this.wrap ? 'wrap' : 'nowrap',\n    };\n\n    if (this.wrap) {\n      style.alignContent = this.getAlignContent();\n    }\n\n    if (this.gap) {\n      style.gap = this.gap;\n    }\n\n    if (this.padding) {\n      style.padding = this.padding;\n    }\n\n    // if (this.fullWidth) {\n    //   style.width = '100%';\n    // }\n\n    // if (this.fullHeight) {\n    //   style.height = '100%';\n    // }\n\n    const hostClass = classnames(\n      `direction-${this.direction}`,\n      {\n        'wrap': this.wrap,\n        'reverse': this.reverse,\n        'full-width': this.fullWidth,\n        'full-height': this.fullHeight,\n      }\n    );\n\n    // Slot style for admin mode - make items display in the same direction\n    const slotStyle = `display: flex; flex-direction: ${this.getFlexDirection()}; gap: ${this.gap || 'var(--le-space-md)'}; flex-wrap: ${this.wrap ? 'wrap' : 'nowrap'}; justify-content: ${this.getJustifyContent()}; align-items: ${this.getAlignItems()};`;\n\n    return (\n      <le-component component=\"le-stack\" hostClass={hostClass}>\n        <div class=\"stack\" part=\"stack\" style={style}>\n          <le-slot\n            name=\"\"\n            description={`Items arranged ${this.direction}ly${this.maxItems ? ` (max ${this.maxItems})` : ''}`}\n            type=\"slot\"\n            allowed-components=\"le-text,le-box,le-card,le-button,le-stack\"\n            slotStyle={slotStyle}\n          >\n            <slot></slot>\n          </le-slot>\n        </div>\n      </le-component>\n    );\n  }\n}\n"]}

package/dist/{core/collection → collection}/components/le-string-input/le-string-input.css

@@ -78,6 +78,6 @@ input::placeholder {
   margin-top: 2px;
 }
 
-.le-input-description::has(slot[name=description]:empty) {
+.le-input-description::has(le-slot > slot[name=description]:empty) {
   display: none;
 }

package/dist/{core/collection → collection}/components/le-string-input/le-string-input.js

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 import { classnames } from "../../utils/utils";
 /**
  * A text input component with support for labels, descriptions, icons, and external IDs.
@@ -17,6 +17,10 @@ import { classnames } from "../../utils/utils";
  */
 export class LeStringInput {
     el;
+    /**
+     * Pass the ref of the input element to the parent component
+     */
+    inputRef;
     /**
      * Mode of the popover should be 'default' for internal use
      */
@@ -49,6 +53,10 @@ export class LeStringInput {
      * Placeholder text
      */
     placeholder;
+    /**
+     * Hide description slot
+     */
+    hideDescription = false;
     /**
      * Whether the input is disabled
      */
@@ -75,7 +83,7 @@ export class LeStringInput {
         this.leInput.emit({
             value: this.value,
             name: this.name,
-            externalId: this.externalId
+            externalId: this.externalId,
         });
     };
     handleChange = (ev) => {
@@ -84,14 +92,18 @@ export class LeStringInput {
         this.leChange.emit({
             value: this.value,
             name: this.name,
-            externalId: this.externalId
+            externalId: this.externalId,
         });
     };
     handleClick = (ev) => {
         ev.stopPropagation();
     };
     render() {
-        return (h(Host, { key: '5c841074ac9288c448c2c09e18530c91bc62e3da', class: classnames({ 'disabled': this.disabled }) }, h("div", { key: 'b2f7bea3e6c52033153caf9f18df4a815e9de14e', class: "le-input-wrapper" }, this.label && (h("label", { key: 'ce3cb46e176ec1016c93f5742ff0856badfe7d26', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: 'ea5cbbe1e178f964631aa67ec9833a17c3362be7', class: "le-input-container" }, this.iconStart && (h("span", { key: 'df8b39dcbe87ecb232ed23f2d965c707b16b1b50', class: "icon-start" }, this.iconStart)), h("input", { key: '53aff08b71412d2676c3ff90dc9af6e45d8aa438', id: this.name, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }), this.iconEnd && (h("span", { key: 'a726a70aa97b74ecd1a69266bcbfff18b504266b', class: "icon-end" }, this.iconEnd))), h("div", { key: '950270b513255a6dd7a53b80d3827efe3b043aac', class: "le-input-description" }, h("slot", { key: 'cb083064937a07085c11d421d2f42cf700f47892', name: "description" })))));
+        return (h("le-component", { key: '51f1342de987ff5431a982f472106e1e34868b3a', component: "le-string-input", hostClass: classnames({ disabled: this.disabled }) }, h("div", { key: '2c5ad62aff36c5af5a3a5f1eab2038ba15210f89', class: "le-input-wrapper" }, this.label && (h("label", { key: 'bdcd6967df6fef291d5938c04f2fa4bd4a8f3925', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: '9bf86514adc36c1f2a112ff981befbd1d95b1d0c', class: "le-input-container", part: "container" }, this.iconStart && h("span", { key: '8d5d2221f4361f164df89e34579997f3c99bb9f8', class: "icon-start" }, this.iconStart), h("input", { key: '9cad21ae3f64608754c1f147b61bd1db42fd850c', ref: el => {
+                if (this.inputRef) {
+                    this.inputRef(el);
+                }
+            }, id: this.name, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }), this.iconEnd && h("span", { key: '39598782f14338e64567227f4df177af6092827c', class: "icon-end" }, this.iconEnd)), !this.hideDescription && (h("div", { key: '2ad752082be8c3aba9cc611eb93eeb41c3bfa994', class: "le-input-description" }, h("le-slot", { key: 'd42c8a263f3b0542b0a14860ad2f49b2ee4954a5', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: '4b689e56d07f003f38d28201b0dee597dbc2f955', name: "description" })))))));
     }
     static get is() { return "le-string-input"; }
     static get encapsulation() { return "shadow"; }
@@ -107,6 +119,28 @@ export class LeStringInput {
     }
     static get properties() {
         return {
+            "inputRef": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(el: HTMLInputElement) => void",
+                    "resolved": "(el: HTMLInputElement) => void",
+                    "references": {
+                        "HTMLInputElement": {
+                            "location": "global",
+                            "id": "global::HTMLInputElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Pass the ref of the input element to the parent component"
+                },
+                "getter": false,
+                "setter": false
+            },
             "mode": {
                 "type": "string",
                 "mutable": true,
@@ -260,6 +294,26 @@ export class LeStringInput {
                 "reflect": false,
                 "attribute": "placeholder"
             },
+            "hideDescription": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide description slot"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-description",
+                "defaultValue": "false"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -333,7 +387,7 @@ export class LeStringInput {
                     "text": "Emitted when the value changes (on blur or Enter)"
                 },
                 "complexType": {
-                    "original": "{ value: string; name: string; externalId: string }",
+                    "original": "{\n    value: string;\n    name: string;\n    externalId: string;\n  }",
                     "resolved": "{ value: string; name: string; externalId: string; }",
                     "references": {}
                 }
@@ -348,7 +402,7 @@ export class LeStringInput {
                     "text": "Emitted when the input value changes (on keystroke)"
                 },
                 "complexType": {
-                    "original": "{ value: string; name: string; externalId: string }",
+                    "original": "{\n    value: string;\n    name: string;\n    externalId: string;\n  }",
                     "resolved": "{ value: string; name: string; externalId: string; }",
                     "references": {}
                 }

package/dist/collection/components/le-string-input/le-string-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"le-string-input.js","sourceRoot":"","sources":["../../../src/components/le-string-input/le-string-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Element } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A text input component with support for labels, descriptions, icons, and external IDs.\n *\n * @slot - The label text for the input\n * @slot description - Additional description text displayed below the input\n * @slot icon-start - Icon to display at the start of the input\n * @slot icon-end - Icon to display at the end of the input\n *\n * @cssprop --le-input-bg - Input background color\n * @cssprop --le-input-color - Input text color\n * @cssprop --le-input-border - Input border style\n * @cssprop --le-input-border-focus - Input border style when focused\n * @cssprop --le-input-radius - Input border radius\n * @cssprop --le-input-padding - Input padding\n */\n@Component({\n  tag: 'le-string-input',\n  styleUrl: 'le-string-input.css',\n  shadow: true,\n})\nexport class LeStringInput {\n  @Element() el: HTMLElement;\n\n  /**\n   * Pass the ref of the input element to the parent component\n   */\n  @Prop() inputRef?: (el: HTMLInputElement) => void;\n\n  /**\n   * Mode of the popover should be 'default' for internal use\n   */\n  @Prop({ mutable: true, reflect: true }) mode: 'default' | 'admin';\n\n  /**\n   * The value of the input\n   */\n  @Prop({ mutable: true, reflect: true }) value: string;\n\n  /**\n   * The name of the input\n   */\n  @Prop() name: string;\n\n  /**\n   * The type of the input (text, email, password, etc.)\n   */\n  @Prop() type: 'text' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n  /**\n   * Label for the input\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon for the start icon\n   */\n  @Prop() iconStart: string;\n\n  /**\n   * Icon for the end icon\n   */\n  @Prop() iconEnd: string;\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Hide description slot\n   */\n  @Prop() hideDescription: boolean = false;\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the input is read-only\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * External ID for linking with external systems\n   */\n  @Prop() externalId: string;\n\n  /**\n   * Emitted when the value changes (on blur or Enter)\n   */\n  @Event({ eventName: 'change' }) leChange: EventEmitter<{\n    value: string;\n    name: string;\n    externalId: string;\n  }>;\n\n  /**\n   * Emitted when the input value changes (on keystroke)\n   */\n  @Event({ eventName: 'input' }) leInput: EventEmitter<{\n    value: string;\n    name: string;\n    externalId: string;\n  }>;\n\n  private handleInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement;\n    this.value = input.value;\n    this.leInput.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId,\n    });\n  };\n\n  private handleChange = (ev: Event) => {\n    const input = ev.target as HTMLInputElement;\n    this.value = input.value;\n    this.leChange.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId,\n    });\n  };\n\n  private handleClick = (ev: Event) => {\n    ev.stopPropagation();\n  };\n\n  render() {\n    return (\n      <le-component component=\"le-string-input\" hostClass={classnames({ disabled: this.disabled })}>\n        <div class=\"le-input-wrapper\">\n          {this.label && (\n            <label class=\"le-input-label\" htmlFor={this.name}>\n              {this.label}\n            </label>\n          )}\n\n          <div class=\"le-input-container\" part=\"container\">\n            {this.iconStart && <span class=\"icon-start\">{this.iconStart}</span>}\n            <input\n              ref={el => {\n                if (this.inputRef) {\n                  this.inputRef(el);\n                }\n              }}\n              id={this.name}\n              type={this.type}\n              name={this.name}\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              onInput={this.handleInput}\n              onChange={this.handleChange}\n              onClick={this.handleClick}\n            />\n            {this.iconEnd && <span class=\"icon-end\">{this.iconEnd}</span>}\n          </div>\n\n          {!this.hideDescription && (\n            <div class=\"le-input-description\">\n              <le-slot name=\"description\" type=\"text\" tag=\"p\" label=\"Description\">\n                <slot name=\"description\"></slot>\n              </le-slot>\n            </div>\n          )}\n        </div>\n      </le-component>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,289 @@
+/**
+ * Default mode styles for le-button
+ * Uses global design tokens with component-specific overrides
+ */
+:host {
+  display: inline-block;
+  
+  /* Component-specific tokens */
+  --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);
+  
+  /* Internal state variables - set by color classes */
+  --_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);
+}
+
+/* ===========================================
+ * STYLE VARIANTS
+ * =========================================== */
+
+/* Underlined (default for tabs), depends on the position (top, bottom, start, end) */
+.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);
+}
+
+/* Solid (default) - already styled by color classes */
+.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);
+}
+
+/* Pills */
+.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);
+}
+
+/* Enclosed */
+.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);
+}
+
+/* Icon only (used in le-tab-bar - mobile navigation) */
+.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;
+}
+
+
+/* ===========================================
+ * SIZES
+ * =========================================== */
+.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);
+}
+
+/* ===========================================
+ * STATES & MODIFIERS
+ * =========================================== */
+
+/* Full width */
+.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);
+}
+
+/* Icon only */
+: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;
+}
+
+/* Hide content in icon-only mode */
+.le-tab-container.icon-only .content {
+  display: none;
+}
+
+/* ===========================================
+ * CONTENT (le-slot wrapper)
+ * =========================================== */
+.content {
+  display: inline;
+}
+
+.content:empty {
+  display: none;
+}
+
+/* ===========================================
+ * ICON WRAPPERS & SLOTS
+ * =========================================== */
+.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;
+}
+
+/* ===========================================
+ * ALIGNMENT MODIFIERS
+ * =========================================== */
+.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;
+}