le-kit 0.5.3 → 0.6.0

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

@@ -1,93 +0,0 @@
-:host {
-  display: block;
-  --le-checkbox-size: 18px;
-  --le-checkbox-color: var(--le-color-primary, #007bff);
-  --le-checkbox-label-color: var(--le-color-text-primary, #333);
-  --le-checkbox-desc-color: var(--le-color-text-secondary, #666);
-  --le-checkbox-border-radius: var(--le-radius-sm, 2px);
-  --le-checkbox-marker-color: var(--le-color-surface, #fff);
-}
-
-.le-checkbox-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.le-checkbox-label {
-  display: inline-flex;
-  align-items: flex-start;
-  gap: 8px;
-  cursor: pointer;
-  user-select: none;
-}
-
-:host([disabled]) .le-checkbox-label {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.le-checkbox-input {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 1.4em;
-}
-
-input[type="checkbox"] {
-  appearance: none;
-  -webkit-appearance: none;
-  width: var(--le-checkbox-size);
-  height: var(--le-checkbox-size);
-  border: var(--le-border-width, 2px) solid var(--le-checkbox-color);
-  border-radius: var(--le-checkbox-border-radius);
-  margin: 0;
-  margin-top: 2px; /* Align with text */
-  position: relative;
-  cursor: inherit;
-  background-color: transparent;
-  transition: background-color 0.2s, border-color 0.2s;
-}
-
-input[type="checkbox"]:checked {
-  background-color: var(--le-checkbox-color);
-}
-
-input[type="checkbox"]:checked::after {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: calc(var(--le-checkbox-size) / 5);
-  right: 0;
-  margin: auto;
-  width: calc(var(--le-checkbox-size) / 4);
-  height: calc(var(--le-checkbox-size) / 2);
-  border: solid var(--le-checkbox-marker-color, #fff);
-  border-width: 0 calc(var(--le-checkbox-size) / 10) calc(var(--le-checkbox-size) / 10) 0;
-  transform: rotate(45deg);
-}
-
-input[type="checkbox"]:focus-visible {
-  outline: 2px solid var(--le-color-focus);
-  outline-offset: 2px;
-}
-
-.le-checkbox-text {
-  flex: 1;
-  flex-wrap: wrap;
-  color: var(--le-checkbox-label-color);
-  line-height: 1.5;
-  text-align: start;
-}
-
-.le-checkbox-description {
-  margin-left: calc(var(--le-checkbox-size) + 8px);
-  font-size: 0.875em;
-  color: var(--le-checkbox-desc-color);
-  line-height: 1.4;
-}
-
-:host [slot="description"] {
-  margin: 0;
-}

package/dist/collection/components/le-checkbox/le-checkbox.js

@@ -1,177 +0,0 @@
-import { h } from "@stencil/core";
-import { classnames } from "../../utils/utils";
-/**
- * A checkbox component with support for labels, descriptions, and external IDs.
- *
- * @slot - The label text for the checkbox
- * @slot description - Additional description text displayed below the label
- *
- * @cssprop --le-checkbox-size - Size of the checkbox input
- * @cssprop --le-checkbox-color - Color of the checkbox when checked
- * @cssprop --le-checkbox-label-color - Color of the label text
- * @cssprop --le-checkbox-desc-color - Color of the description text
- */
-export class LeCheckbox {
-    constructor() {
-        /**
-         * Whether the checkbox is checked
-         */
-        this.checked = false;
-        /**
-         * Whether the checkbox is disabled
-         */
-        this.disabled = false;
-        this.handleChange = (event) => {
-            // We stop the internal button click from bubbling up
-            event.stopPropagation();
-            if (this.disabled) {
-                event.preventDefault();
-                return;
-            }
-            const input = event.target;
-            this.checked = input.checked;
-            this.leChange.emit({
-                checked: this.checked,
-                value: this.value,
-                name: this.name,
-                externalId: this.externalId
-            });
-        };
-    }
-    render() {
-        return (h("le-component", { key: '8b4541e96816b6e69ee790779971981b9d112484', component: "le-checkbox", hostClass: classnames({ 'disabled': this.disabled }) }, h("div", { key: 'c5e3a8692e59fa59a46bc90302e80f20dc700f04', class: "le-checkbox-wrapper" }, h("label", { key: 'b72abfbd39434a2c8be951a933e57ce70e9c922c', class: "le-checkbox-label" }, h("span", { key: '624ebbd37e6ea6a0800d702cbcea5ab8fe78b59e', class: "le-checkbox-input" }, h("input", { key: '182dc9549cc3494fc61e7779242ff14c304c3d97', type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.handleChange })), h("span", { key: 'f14dc486329d8375b47ca75bedd2ac31f04273a7', class: "le-checkbox-text" }, h("le-slot", { key: '3be69ca148e121e8970bd3950fcbdee12613c775', name: "", type: "text", tag: "span" }, h("slot", { key: '2a258f7ce0331b9d08df5ac23a5ec492493974ca' })))), h("div", { key: '2deeab5d1d7c6b4046b5b4f54cd92061fc5f7383', class: "le-checkbox-description" }, h("le-slot", { key: '3ec3ca85d9f472d209084c4d95d46d2c114133e8', name: "description", type: "text", tag: "div", label: "Description" }, h("slot", { key: 'e1043ec4613df078446e7a6a5550646bbbe7d8be', name: "description" }))))));
-    }
-    static get is() { return "le-checkbox"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["le-checkbox.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["le-checkbox.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "checked": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the checkbox is checked"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "checked",
-                "defaultValue": "false"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the checkbox is disabled"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The name of the checkbox input"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "name"
-            },
-            "value": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The value of the checkbox input"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "value"
-            },
-            "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 (e.g. database ID, PDF form field ID)"
-                },
-                "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 checked state changes"
-                },
-                "complexType": {
-                    "original": "{ checked: boolean; value: string; name: string; externalId: string }",
-                    "resolved": "{ checked: boolean; value: string; name: string; externalId: string; }",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-}
-//# sourceMappingURL=le-checkbox.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"le-checkbox.js","sourceRoot":"","sources":["../../../src/components/le-checkbox/le-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,UAAU;IALvB;QAQE;;WAEG;QACqC,YAAO,GAAY,KAAK,CAAC;QAEjE;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAsB1B,iBAAY,GAAG,CAAC,KAAY,EAAE,EAAE;YACtC,qDAAqD;YACrD,KAAK,CAAC,eAAe,EAAE,CAAC;YAExB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YAED,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;YAC/C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBACjB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,UAAU,EAAE,IAAI,CAAC,UAAU;aAC5B,CAAC,CAAC;QACL,CAAC,CAAC;KAiCH;IA/BC,MAAM;QACJ,OAAO,CACL,qEAAc,SAAS,EAAC,aAAa,EAAC,SAAS,EAAE,UAAU,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;YACxF,4DAAK,KAAK,EAAC,qBAAqB;gBAC9B,8DAAO,KAAK,EAAC,mBAAmB;oBAC9B,6DAAM,KAAK,EAAC,mBAAmB;wBAC7B,8DACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,YAAY,GAC3B,CACG;oBACP,6DAAM,KAAK,EAAC,kBAAkB;wBAC5B,gEAAS,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,MAAM;4BACrC,8DAAa,CACL,CACL,CACD;gBAER,4DAAK,KAAK,EAAC,yBAAyB;oBAClC,gEAAS,IAAI,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,KAAK,EAAC,KAAK,EAAC,aAAa;wBACnE,6DAAM,IAAI,EAAC,aAAa,GAAQ,CACxB,CACN,CACF,CACO,CAChB,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Element } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A checkbox component with support for labels, descriptions, and external IDs.\n *\n * @slot - The label text for the checkbox\n * @slot description - Additional description text displayed below the label\n *\n * @cssprop --le-checkbox-size - Size of the checkbox input\n * @cssprop --le-checkbox-color - Color of the checkbox when checked\n * @cssprop --le-checkbox-label-color - Color of the label text\n * @cssprop --le-checkbox-desc-color - Color of the description text\n */\n@Component({\n  tag: 'le-checkbox',\n  styleUrl: 'le-checkbox.css',\n  shadow: true,\n})\nexport class LeCheckbox {\n  @Element() el: HTMLElement;\n\n  /**\n   * Whether the checkbox is checked\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * Whether the checkbox is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The name of the checkbox input\n   */\n  @Prop() name: string;\n\n  /**\n   * The value of the checkbox input\n   */\n  @Prop() value: string;\n\n  /**\n   * External ID for linking with external systems (e.g. database ID, PDF form field ID)\n   */\n  @Prop() externalId: string;\n\n  /**\n   * Emitted when the checked state changes\n   */\n  @Event({ eventName: 'change' }) leChange: EventEmitter<{ checked: boolean; value: string; name: string; externalId: string }>;\n\n  private handleChange = (event: Event) => {\n    // We stop the internal button click from bubbling up\n    event.stopPropagation();\n\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    const input = event.target as HTMLInputElement;\n    this.checked = input.checked;\n    this.leChange.emit({\n      checked: this.checked,\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId\n    });\n  };\n\n  render() {\n    return (\n      <le-component component=\"le-checkbox\" hostClass={classnames({ 'disabled': this.disabled })}>\n        <div class=\"le-checkbox-wrapper\">\n          <label class=\"le-checkbox-label\">\n            <span class=\"le-checkbox-input\">\n              <input\n                type=\"checkbox\"\n                name={this.name}\n                value={this.value}\n                checked={this.checked}\n                disabled={this.disabled}\n                onChange={this.handleChange}\n              />\n            </span>\n            <span class=\"le-checkbox-text\">\n              <le-slot name=\"\" type=\"text\" tag=\"span\">\n                <slot></slot>\n              </le-slot>\n            </span>\n          </label>\n          \n          <div class=\"le-checkbox-description\">\n            <le-slot name=\"description\" type=\"text\" tag=\"div\" label=\"Description\">\n              <slot name=\"description\"></slot>\n            </le-slot>\n          </div>\n        </div>\n      </le-component>\n    );\n  }\n}\n"]}

package/dist/collection/components/le-code-input/le-code-input.css

@@ -1,106 +0,0 @@
-: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-border-focus: 2px solid var(--le-color-focus);
-  --le-input-border-focus-offset: 2px;
-}
-
-.le-code-input-wrapper {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
-
-.le-input-label {
-  display: block;
-  margin-bottom: var(--le-spacing-2, 0.5rem);
-  color: var(--le-text-color, inherit);
-  font-size: var(--le-font-size-sm, 0.875rem);
-  font-weight: 500;
-}
-
-.input-group {
-  position: relative;
-  display: inline-flex;
-  width: fit-content;
-}
-
-.ghost-input {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  z-index: 10;
-  cursor: text;
-  color: transparent;
-  background: transparent;
-  caret-color: transparent;
-  border: none;
-  outline: none;
-  letter-spacing: 1em; /* Try to match boxes? */
-}
-
-.ghost-input:disabled {
-  cursor: not-allowed;
-}
-
-.visual-container {
-  display: flex;
-  gap: var(--le-spacing-2, 8px);
-  pointer-events: none; /* Let clicks pass to ghost input */
-}
-
-.code-box {
-  position: relative;
-  width: var(--le-code-box-size, 32px);
-  height: var(--le-code-box-size, 42px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--le-input-bg);
-  border: var(--le-input-border);
-  border-radius: var(--le-input-radius);
-  color: var(--le-input-color);
-  font-size: 1.2rem;
-  transition: all 0.15s ease-in-out;
-  box-sizing: border-box;
-  user-select: none;
-}
-
-.code-box.active {
-  outline: var(--le-input-border-focus);
-  outline-offset: var(--le-input-border-focus-offset);
-  z-index: 1;
-}
-
-.code-box.selected {
-  background-color: SelectedItem;
-  outline: var(--le-input-border-focus);
-  outline-offset: var(--le-input-border-focus-offset);
-}
-
-.input-group.has-error .code-box {
-  border: var(--le-input-border-error, 1px solid #ef4444);
-}
-
-.input-group.has-error .code-box.active {
-  border-width: 2px;
-}
-
-:host(.disabled) .code-box {
-  background-color: var(--le-color-disabled-bg, #f3f4f6);
-  color: var(--le-color-disabled-text, #9ca3af);
-  border-color: var(--le-color-disabled-border, #e5e7eb);
-}
-
-.le-input-description,
-:host(p) {
-  margin-top: var(--le-spacing-1, 0.25rem);
-  color: var(--le-text-muted, #6b7280);
-  font-size: var(--le-font-size-sm, 0.875rem);
-}