le-kit 0.1.6 → 0.1.8

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

@@ -0,0 +1,83 @@
+:host {
+  display: block;
+  --le-input-bg: var(--le-color-surface, #ffffff);
+  --le-input-color: var(--le-color-text-primary, #333333);
+  --le-input-border: var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);
+  --le-input-radius: var(--le-radius-sm, 4px);
+  --le-input-padding: 2px 6px;
+  --le-input-height: 1.5rem;
+  --le-input-label-color: var(--le-color-text-primary, #333333);
+  --le-input-desc-color: var(--le-color-text-secondary, #666666);
+  --le-input-placeholder-color: #999999;
+}
+
+.le-input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.le-input-label {
+  display: block;
+  font-size: 0.9em;
+  font-weight: 500;
+  color: var(--le-input-label-color);
+  margin-bottom: 2px;
+}
+
+.le-input-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: var(--le-input-bg);
+  border: var(--le-input-border);
+  border-radius: var(--le-input-radius);
+  transition: border-color 0.2s;
+}
+
+.le-input-container:focus-within {
+  outline: 2px solid var(--le-color-focus);
+  outline-offset: 2px;
+}
+
+
+:host([disabled]) .le-input-container {
+  opacity: 0.6;
+  background-color: rgba(0,0,0,0.05);
+  cursor: not-allowed;
+}
+
+input {
+  flex: 1;
+  min-height: var(--le-input-height);
+  padding: var(--le-input-padding);
+  border: none;
+  background: transparent;
+  color: var(--le-input-color);
+  font-family: inherit;
+  font-size: inherit;
+  outline: none;
+  width: 100%;
+}
+
+input::placeholder {
+  color: var(--le-input-placeholder-color);
+}
+
+.icon-start, .icon-end {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  color: var(--le-input-desc-color);
+}
+
+.le-input-description {
+  font-size: 0.85em;
+  color: var(--le-input-desc-color);
+  margin-top: 2px;
+}
+
+.le-input-description::has(le-slot > slot[name=description]:empty) {
+  display: none;
+}

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

@@ -0,0 +1,359 @@
+import { h, Host } from "@stencil/core";
+import { classnames } from "../../utils/utils";
+/**
+ * A text input component with support for labels, descriptions, icons, and external IDs.
+ *
+ * @slot - The label text for the input
+ * @slot description - Additional description text displayed below the input
+ * @slot icon-start - Icon to display at the start of the input
+ * @slot icon-end - Icon to display at the end of the input
+ *
+ * @cssprop --le-input-bg - Input background color
+ * @cssprop --le-input-color - Input text color
+ * @cssprop --le-input-border - Input border style
+ * @cssprop --le-input-border-focus - Input border style when focused
+ * @cssprop --le-input-radius - Input border radius
+ * @cssprop --le-input-padding - Input padding
+ */
+export class LeStringInput {
+    el;
+    /**
+     * Mode of the popover should be 'default' for internal use
+     */
+    mode;
+    /**
+     * The value of the input
+     */
+    value;
+    /**
+     * The name of the input
+     */
+    name;
+    /**
+     * The type of the input (text, email, password, etc.)
+     */
+    type = 'text';
+    /**
+     * Label for the input
+     */
+    label;
+    /**
+     * Icon for the start icon
+     */
+    iconStart;
+    /**
+     * Icon for the end icon
+     */
+    iconEnd;
+    /**
+     * Placeholder text
+     */
+    placeholder;
+    /**
+     * Whether the input is disabled
+     */
+    disabled = false;
+    /**
+     * Whether the input is read-only
+     */
+    readonly = false;
+    /**
+     * External ID for linking with external systems
+     */
+    externalId;
+    /**
+     * Emitted when the value changes (on blur or Enter)
+     */
+    leChange;
+    /**
+     * Emitted when the input value changes (on keystroke)
+     */
+    leInput;
+    handleInput = (ev) => {
+        const input = ev.target;
+        this.value = input.value;
+        this.leInput.emit({
+            value: this.value,
+            name: this.name,
+            externalId: this.externalId
+        });
+    };
+    handleChange = (ev) => {
+        const input = ev.target;
+        this.value = input.value;
+        this.leChange.emit({
+            value: this.value,
+            name: this.name,
+            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" })))));
+    }
+    static get is() { return "le-string-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["le-string-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["le-string-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mode": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'default' | 'admin'",
+                    "resolved": "\"admin\" | \"default\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mode of the popover should be 'default' for internal use"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "mode"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'text' | 'email' | 'password' | 'tel' | 'url'",
+                    "resolved": "\"email\" | \"password\" | \"tel\" | \"text\" | \"url\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of the input (text, email, password, etc.)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'text'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "iconStart": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon for the start icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-start"
+            },
+            "iconEnd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon for the end icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-end"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the input is read-only"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "externalId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "External ID for linking with external systems"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "external-id"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "leChange",
+                "name": "change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value changes (on blur or Enter)"
+                },
+                "complexType": {
+                    "original": "{ value: string; name: string; externalId: string }",
+                    "resolved": "{ value: string; name: string; externalId: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "leInput",
+                "name": "input",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the input value changes (on keystroke)"
+                },
+                "complexType": {
+                    "original": "{ value: string; name: string; externalId: string }",
+                    "resolved": "{ value: string; name: string; externalId: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=le-string-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"le-string-input.js","sourceRoot":"","sources":["../../../src-core/components/le-string-input/le-string-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,OAAO,EAAG,IAAI,EAAE,MAAM,eAAe,CAAC;AACxF,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,aAAa;IACb,EAAE,CAAc;IAE3B;;OAEG;IACqC,IAAI,CAAsB;IAElE;;OAEG;IACqC,KAAK,CAAS;IAEtD;;OAEG;IACK,IAAI,CAAS;IAErB;;OAEG;IACK,IAAI,GAAkD,MAAM,CAAC;IAErE;;OAEG;IACK,KAAK,CAAS;IAEtB;;OAEG;IACK,SAAS,CAAS;IAE1B;;OAEG;IACK,OAAO,CAAS;IAExB;;OAEG;IACK,WAAW,CAAS;IAE5B;;OAEG;IACK,QAAQ,GAAY,KAAK,CAAC;IAElC;;OAEG;IACK,QAAQ,GAAY,KAAK,CAAC;IAElC;;OAEG;IACK,UAAU,CAAS;IAE3B;;OAEG;IAC6B,QAAQ,CAAoE;IAE5G;;OAEG;IAC4B,OAAO,CAAoE;IAElG,WAAW,GAAG,CAAC,EAAS,EAAE,EAAE;QAClC,MAAM,KAAK,GAAG,EAAE,CAAC,MAA0B,CAAC;QAC5C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;YAChB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,UAAU,EAAE,IAAI,CAAC,UAAU;SAC5B,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,YAAY,GAAG,CAAC,EAAS,EAAE,EAAE;QACnC,MAAM,KAAK,GAAG,EAAE,CAAC,MAA0B,CAAC;QAC5C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YACjB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,UAAU,EAAE,IAAI,CAAC,UAAU;SAC5B,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,WAAW,GAAG,CAAC,EAAS,EAAE,EAAE;QAClC,EAAE,CAAC,eAAe,EAAE,CAAC;IACvB,CAAC,CAAC;IAEF,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAE,KAAK,EAAE,UAAU,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;YACrD,4DAAK,KAAK,EAAC,kBAAkB;gBAC1B,IAAI,CAAC,KAAK,IAAI,CACb,8DAAO,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,IAAI,CAAC,IAAI,IAAG,IAAI,CAAC,KAAK,CAAS,CACvE;gBAED,4DAAK,KAAK,EAAC,oBAAoB;oBAC5B,IAAI,CAAC,SAAS,IAAI,CACjB,6DAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,SAAS,CAAQ,CACjD;oBACD,8DACE,EAAE,EAAE,IAAI,CAAC,IAAI,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB;oBACD,IAAI,CAAC,OAAO,IAAI,CACf,6DAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,OAAO,CAAQ,CAC7C,CACG;gBAEN,4DAAK,KAAK,EAAC,sBAAsB;oBAE7B,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAE9B,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Element , Host } 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   * 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   * 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<{ value: string; name: string; externalId: string }>;\n\n  /**\n   * Emitted when the input value changes (on keystroke)\n   */\n  @Event({ eventName: 'input' }) leInput: EventEmitter<{ value: string; name: string; externalId: string }>;\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      <Host  class={classnames({ 'disabled': this.disabled })}>\n        <div class=\"le-input-wrapper\">\n          {this.label && (\n            <label class=\"le-input-label\" htmlFor={this.name}>{this.label}</label>\n          )}\n          \n          <div class=\"le-input-container\">\n            {this.iconStart && (\n              <span class=\"icon-start\">{this.iconStart}</span>\n            )}\n            <input\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 && (\n              <span class=\"icon-end\">{this.iconEnd}</span>\n            )}\n          </div>\n\n          <div class=\"le-input-description\">\n            \n              <slot name=\"description\"></slot>\n            \n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/core/collection/components/le-text/le-text.default.css

@@ -0,0 +1,169 @@
+/**
+ * le-text default styles
+ *
+ * Semantic text element with variant-based styling
+ */
+
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+/* Base text styles */
+.le-text {
+  margin: 0;
+  color: var(--le-text-color, var(--le-color-text));
+  font-family: var(--le-font-family);
+  line-height: var(--le-text-line-height, 1.5);
+}
+
+/* Paragraph */
+.variant-p {
+  font-size: var(--le-font-size-base, 1rem);
+  font-weight: var(--le-font-weight-normal, 400);
+  color: var(--le-color-text);
+}
+
+/* Headings */
+.variant-h1 {
+  font-size: var(--le-font-size-4xl, 2.5rem);
+  font-weight: var(--le-font-weight-bold, 700);
+  line-height: 1.2;
+  color: var(--le-color-text);
+  letter-spacing: -0.02em;
+}
+
+.variant-h2 {
+  font-size: var(--le-font-size-3xl, 2rem);
+  font-weight: var(--le-font-weight-bold, 700);
+  line-height: 1.25;
+  color: var(--le-color-text);
+  letter-spacing: -0.01em;
+}
+
+.variant-h3 {
+  font-size: var(--le-font-size-2xl, 1.5rem);
+  font-weight: var(--le-font-weight-semibold, 600);
+  line-height: 1.3;
+  color: var(--le-color-text);
+}
+
+.variant-h4 {
+  font-size: var(--le-font-size-xl, 1.25rem);
+  font-weight: var(--le-font-weight-semibold, 600);
+  line-height: 1.35;
+  color: var(--le-color-text);
+}
+
+.variant-h5 {
+  font-size: var(--le-font-size-lg, 1.125rem);
+  font-weight: var(--le-font-weight-medium, 500);
+  line-height: 1.4;
+  color: var(--le-color-text);
+}
+
+.variant-h6 {
+  font-size: var(--le-font-size-base, 1rem);
+  font-weight: var(--le-font-weight-medium, 500);
+  line-height: 1.45;
+  color: var(--le-color-text);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Code */
+.variant-code {
+  font-family: var(--le-font-family-mono, 'SF Mono', 'Fira Code', 'Consolas', monospace);
+  font-size: var(--le-font-size-sm, 0.875rem);
+  background: var(--le-color-surface-alt, #f5f5f5);
+  padding: var(--le-space-md);
+  border-radius: var(--le-radius-md);
+  overflow-x: auto;
+  white-space: pre-wrap;
+  color: var(--le-color-text);
+}
+
+/* Quote */
+.variant-quote {
+  font-size: var(--le-font-size-lg, 1.125rem);
+  font-style: italic;
+  color: var(--le-color-text-secondary);
+  border-left: 4px solid var(--le-color-primary);
+  padding-left: var(--le-space-lg);
+  margin-left: 0;
+  margin-right: 0;
+}
+
+/* Label */
+.variant-label {
+  font-size: var(--le-font-size-sm, 0.875rem);
+  font-weight: var(--le-font-weight-medium, 500);
+  color: var(--le-color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Small */
+.variant-small {
+  font-size: var(--le-font-size-sm, 0.875rem);
+  color: var(--le-color-text-secondary);
+}
+
+/* Truncation */
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.truncate.max-lines-2,
+.truncate.max-lines-3,
+.truncate.max-lines-4,
+.truncate.max-lines-5 {
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+
+.truncate.max-lines-2 { -webkit-line-clamp: 2; line-clamp: 2; }
+.truncate.max-lines-3 { -webkit-line-clamp: 3; line-clamp: 3; }
+.truncate.max-lines-4 { -webkit-line-clamp: 4; line-clamp: 4; }
+.truncate.max-lines-5 { -webkit-line-clamp: 5; line-clamp: 5; }
+
+/* Alignment */
+:host([align="center"]) .le-text { text-align: center; }
+:host([align="right"]) .le-text { text-align: right; }
+:host([align="justify"]) .le-text { text-align: justify; }
+
+/* Links inside text */
+.le-text a {
+  color: var(--le-color-primary);
+  text-decoration: underline;
+}
+
+.le-text a:hover {
+  color: var(--le-color-primary-dark);
+}
+
+/* Bold, italic, etc. */
+.le-text strong,
+.le-text b {
+  font-weight: var(--le-font-weight-bold, 700);
+}
+
+.le-text em,
+.le-text i {
+  font-style: italic;
+}
+
+.le-text u {
+  text-decoration: underline;
+}
+
+.le-text s,
+.le-text strike {
+  text-decoration: line-through;
+}