le-kit 0.5.3 → 0.6.0

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

@@ -1,370 +0,0 @@
-import { h } 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 {
-    constructor() {
-        /**
-         * The type of the input (text, email, password, etc.)
-         */
-        this.type = 'text';
-        /**
-         * Hide description slot
-         */
-        this.hideDescription = false;
-        /**
-         * Whether the input is disabled
-         */
-        this.disabled = false;
-        /**
-         * Whether the input is read-only
-         */
-        this.readonly = false;
-        this.handleInput = (ev) => {
-            const input = ev.target;
-            this.value = input.value;
-            this.leInput.emit({
-                value: this.value,
-                name: this.name,
-                externalId: this.externalId,
-            });
-        };
-        this.handleChange = (ev) => {
-            const input = ev.target;
-            this.value = input.value;
-            this.leChange.emit({
-                value: this.value,
-                name: this.name,
-                externalId: this.externalId,
-            });
-        };
-        this.handleClick = (ev) => {
-            ev.stopPropagation();
-        };
-    }
-    render() {
-        return (h("le-component", { key: 'b7d315a0bbe587dae606fec9ee3da32c16b773cb', component: "le-string-input", hostClass: classnames({ disabled: this.disabled }) }, h("div", { key: 'cfefdea8ce0625417cef62d0f432e13df652ab44', class: "le-input-wrapper" }, this.label && (h("label", { key: 'bfc0f2c440e00f2212c1ae9b0d3dd5b484ed0c5d', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: '324d58a4e798c4cd4d44c4f23760e38a24bfa4f6', class: "le-input-container", part: "container" }, this.iconStart && h("span", { key: '7851e3d9a30a304f2472e8de3dea1d6ce703b9ea', class: "icon-start" }, this.iconStart), h("input", { key: 'e51b775e8a9f8f55279ea91f04efbb0c5fdb4d1a', 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: '7018ada874d6b1c85e88a93ba695d00c118c4a6a', class: "icon-end" }, this.iconEnd)), !this.hideDescription && (h("div", { key: '826a2853561ab428e82d879012bc7bfdad4b1dfe', class: "le-input-description" }, h("le-slot", { key: '3a6fc7a46fffacbef6e44fcaa7a80af365754d1c', name: "description", type: "text", tag: "p", label: "Description" }, h("slot", { key: 'b6bbe4efe29c88b1910a53f6704846bfd4280307', 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 {
-            "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,
-                "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"
-            },
-            "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,
-                "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": "{\n    value: string;\n    name: string;\n    externalId: string;\n  }",
-                    "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": "{\n    value: string;\n    name: string;\n    externalId: string;\n  }",
-                    "resolved": "{ value: string; name: string; externalId: string; }",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-}
-//# sourceMappingURL=le-string-input.js.map

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

@@ -1 +0,0 @@
-{"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

@@ -1,289 +0,0 @@
-/**
- * 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;
-}