le-kit 0.1.6 → 0.1.8

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

@@ -0,0 +1,74 @@
+/**
+ * Default mode styles for le-card
+ * Uses global design tokens with component-specific overrides
+ */
+:host {
+  display: block;
+  
+  /* Component-specific tokens that map to global tokens */
+  --le-card-bg: var(--le-color-surface);
+  --le-card-border-radius: var(--le-radius-lg);
+  --le-card-shadow: var(--le-shadow-md);
+  --le-card-shadow-elevated: var(--le-shadow-lg);
+  --le-card-shadow-hover: var(--le-shadow-xl);
+  --le-card-padding: var(--le-space-md);
+  --le-card-border-color: var(--le-color-border);
+  --le-card-transition: var(--le-transition-normal);
+}
+
+.card {
+  background: var(--le-card-bg);
+  border-radius: var(--le-card-border-radius);
+  overflow: hidden;
+  color: var(--le-color-text);
+  box-shadow: var(--le-card-shadow);
+}
+
+/* Variants - le-component gets the hostClass, so we use :host > le-component */
+:host > le-component.variant-outlined .card {
+  border: 1px solid var(--le-card-border-color);
+  box-shadow: none;
+}
+
+:host > le-component.variant-elevated .card {
+  box-shadow: var(--le-card-shadow-elevated);
+}
+
+/* Interactive state */
+:host > le-component.interactive .card {
+  cursor: pointer;
+  transition: transform var(--le-card-transition), box-shadow var(--le-card-transition);
+}
+
+:host > le-component.interactive .card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--le-card-shadow-hover);
+}
+
+:host > le-component.interactive .card:focus-visible {
+  outline: 2px solid var(--le-color-border-focus);
+  outline-offset: 2px;
+}
+
+/* Sections */
+.card-header {
+  padding: var(--le-card-padding);
+  padding-bottom: 0;
+}
+
+.card-header:empty {
+  display: none;
+}
+
+.card-content {
+  padding: var(--le-card-padding);
+}
+
+.card-footer {
+  padding: var(--le-card-padding);
+  padding-top: 0;
+}
+
+.card-footer:empty {
+  display: none;
+}

package/dist/core/collection/components/le-card/le-card.js

@@ -0,0 +1,102 @@
+import { h, Host } from "@stencil/core";
+import { classnames } from "../../utils/utils";
+/**
+ * A flexible card component with header, content, and footer slots.
+ *
+ * The card uses le-slot wrappers for each slot area. In admin mode,
+ * le-slot shows placeholders for CMS editing. In default mode,
+ * le-slot acts as a transparent passthrough.
+ *
+ * @slot header - Card header content (title, actions)
+ * @slot - Default slot for main card content
+ * @slot footer - Card footer content (buttons, links)
+ *
+ * @cssprop --le-card-bg - Card background color
+ * @cssprop --le-card-border-radius - Card border radius
+ * @cssprop --le-card-shadow - Card box shadow
+ * @cssprop --le-card-padding - Card content padding
+ *
+ * @csspart card - The main card container
+ * @csspart header - The card header section
+ * @csspart content - The card content section
+ * @csspart footer - The card footer section
+ *
+ * @cmsEditable true
+ * @cmsCategory Layout
+ */
+export class LeCard {
+    el;
+    /**
+     * Card variant style
+     * @allowedValues default | outlined | elevated
+     */
+    variant = 'default';
+    /**
+     * Whether the card is interactive (clickable)
+     */
+    interactive = false;
+    render() {
+        return (h(Host, { key: '3eea8bf2727559c412e61cb67590086445364a8d', class: classnames(`variant-${this.variant}`, { 'interactive': this.interactive }) }, h("div", { key: '13e109838a50e72dccef935f0184806368f35f20', class: "card", part: "card" }, h("div", { key: '856ed3092d89ecf0ffb402b5b0adac183fe831da', class: "card-header", part: "header" }, h("slot", { key: '85dc99684912db37f96864fb45b3498e21cb7a29', name: "header" })), h("div", { key: '96b6be225aa5e13aee9fd03ada88c57c8912d563', class: "card-content", part: "content" }, h("slot", { key: 'fea429c02941980955583a7b559cd4edcee8c5fd' })), h("div", { key: 'ce2c6d5cf0652029f82147fa648b8c8526a15849', class: "card-footer", part: "footer" }, h("slot", { key: 'b81414ec7ae1068c449e7a3f738314e8c8725a14', name: "footer" })))));
+    }
+    static get is() { return "le-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["le-card.default.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["le-card.default.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'outlined' | 'elevated'",
+                    "resolved": "\"default\" | \"elevated\" | \"outlined\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "allowedValues",
+                            "text": "default | outlined | elevated"
+                        }],
+                    "text": "Card variant style"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            },
+            "interactive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the card is interactive (clickable)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "interactive",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=le-card.js.map

package/dist/core/collection/components/le-card/le-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"le-card.js","sourceRoot":"","sources":["../../../src-core/components/le-card/le-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAG,IAAI,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAMH,MAAM,OAAO,MAAM;IACN,EAAE,CAAc;IAE3B;;;OAGG;IACK,OAAO,GAAwC,SAAS,CAAC;IAEjE;;OAEG;IACK,WAAW,GAAY,KAAK,CAAC;IAErC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAE,KAAK,EAAE,UAAU,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC;YACtF,4DAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM;gBAC3B,4DAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ;oBAElC,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CAEzB;gBAEN,4DAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,SAAS;oBAEpC,8DAAa,CAEX;gBAEN,4DAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ;oBAElC,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CAEzB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Element , Host } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible card component with header, content, and footer slots.\n *\n * The card uses le-slot wrappers for each slot area. In admin mode,\n * le-slot shows placeholders for CMS editing. In default mode,\n * le-slot acts as a transparent passthrough.\n *\n * @slot header - Card header content (title, actions)\n * @slot - Default slot for main card content\n * @slot footer - Card footer content (buttons, links)\n *\n * @cssprop --le-card-bg - Card background color\n * @cssprop --le-card-border-radius - Card border radius\n * @cssprop --le-card-shadow - Card box shadow\n * @cssprop --le-card-padding - Card content padding\n *\n * @csspart card - The main card container\n * @csspart header - The card header section\n * @csspart content - The card content section\n * @csspart footer - The card footer section\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-card',\n  styleUrl: 'le-card.default.css',\n  shadow: true,\n})\nexport class LeCard {\n  @Element() el: HTMLElement;\n\n  /**\n   * Card variant style\n   * @allowedValues default | outlined | elevated\n   */\n  @Prop() variant: 'default' | 'outlined' | 'elevated' = 'default';\n\n  /**\n   * Whether the card is interactive (clickable)\n   */\n  @Prop() interactive: boolean = false;\n\n  render() {\n    return (\n      <Host  class={classnames(`variant-${this.variant}`, { 'interactive': this.interactive })}>\n        <div class=\"card\" part=\"card\">\n          <div class=\"card-header\" part=\"header\">\n            \n              <slot name=\"header\"></slot>\n            \n          </div>\n\n          <div class=\"card-content\" part=\"content\">\n            \n              <slot></slot>\n            \n          </div>\n\n          <div class=\"card-footer\" part=\"footer\">\n            \n              <slot name=\"footer\"></slot>\n            \n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,93 @@
+: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/core/collection/components/le-checkbox/le-checkbox.js

@@ -0,0 +1,192 @@
+import { h, Host } 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 {
+    el;
+    /**
+     * Whether the checkbox is checked
+     */
+    checked = false;
+    /**
+     * Whether the checkbox is disabled
+     */
+    disabled = false;
+    /**
+     * The name of the checkbox input
+     */
+    name;
+    /**
+     * The value of the checkbox input
+     */
+    value;
+    /**
+     * External ID for linking with external systems (e.g. database ID, PDF form field ID)
+     */
+    externalId;
+    /**
+     * Emitted when the checked state changes
+     */
+    leChange;
+    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(Host, { key: '51009836a51d0474ccb9a9f8192d2b6f02c81b68', class: classnames({ 'disabled': this.disabled }) }, h("div", { key: '2559adc5e05ca65b48d6686a016d011e85268d18', class: "le-checkbox-wrapper" }, h("label", { key: '1605a81e24c251593f779495830be1091944afcd', class: "le-checkbox-label" }, h("span", { key: 'ba8a7a115e2eba8dec24e818cfe1cdc2bea1d748', class: "le-checkbox-input" }, h("input", { key: '06f195130cee73bbd2bc9fcd508ad5d7792d00f9', type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.handleChange })), h("span", { key: '1ff6235108db9536573eac7284e0841ad6581bda', class: "le-checkbox-text" }, h("slot", { key: 'fe0a5d531d235b66e085dc61435dc48b30c4d997' }))), h("div", { key: 'e6f593f35dc260a948cabeed6d1f2f8d3f55616d', class: "le-checkbox-description" }, h("slot", { key: 'ea38acd9443d10c0da2159048964cb4c814acbaa', 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/core/collection/components/le-checkbox/le-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"le-checkbox.js","sourceRoot":"","sources":["../../../src-core/components/le-checkbox/le-checkbox.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;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,UAAU;IACV,EAAE,CAAc;IAE3B;;OAEG;IACqC,OAAO,GAAY,KAAK,CAAC;IAEjE;;OAEG;IACK,QAAQ,GAAY,KAAK,CAAC;IAElC;;OAEG;IACK,IAAI,CAAS;IAErB;;OAEG;IACK,KAAK,CAAS;IAEtB;;OAEG;IACK,UAAU,CAAS;IAE3B;;OAEG;IAC6B,QAAQ,CAAsF;IAEtH,YAAY,GAAG,CAAC,KAAY,EAAE,EAAE;QACtC,qDAAqD;QACrD,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,OAAO;QACT,CAAC;QAED,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;QAC/C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YACjB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,UAAU,EAAE,IAAI,CAAC,UAAU;SAC5B,CAAC,CAAC;IACL,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,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;wBAE1B,8DAAa,CAEV,CACD;gBAER,4DAAK,KAAK,EAAC,yBAAyB;oBAEhC,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 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      <Host  class={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              \n                <slot></slot>\n              \n            </span>\n          </label>\n          \n          <div class=\"le-checkbox-description\">\n            \n              <slot name=\"description\"></slot>\n            \n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,135 @@
+: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-border-error: 2px solid var(--le-color-danger, #dc3545);
+  --le-input-error-color: var(--le-color-danger, #dc3545);
+}
+
+.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;
+}
+
+.le-input-container.has-error {
+  border: var(--le-input-border-error);
+}
+
+:host([disabled]) .le-input-container {
+  opacity: 0.6;
+  background-color: rgba(0,0,0,0.05);
+  cursor: not-allowed;
+}
+
+input {
+  flex: 1;
+  width: 100%;
+  height: calc(var(--le-input-height) - 2px);
+  padding: var(--le-input-padding);
+  border: none;
+  background: transparent;
+  color: var(--le-input-color);
+  font-family: inherit;
+  font-size: inherit;
+  outline: none;
+  text-align: right; /* Aligned to end */
+  -moz-appearance: textfield; /* Remove default spinners in Firefox */
+}
+
+/* Remove default spinners in Chrome/Safari/Edge */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+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-controls {
+  display: flex;
+  flex-direction: column;
+  border-left: 1px solid var(--le-color-border, #cccccc);
+  height: 100%;
+}
+
+.le-input-control-btn {
+  --le-button-border-radius: 0;
+  --le-button-padding-x: 0;
+  --le-button-padding-y: 0;
+  --le-button-small-font-size: 9.5px;
+  --le-button-small-padding: 0 0.2rem;
+  --le-button-icon-aspect-ratio: 2;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50%;
+  cursor: pointer;
+  background: none;
+  border: none;
+  color: var(--le-input-desc-color);
+  font-size: 10px;
+  line-height: 1;
+}
+
+.le-input-control-btn:hover {
+  background-color: rgba(0,0,0,0.05);
+  color: var(--le-color-primary, #007bff);
+}
+
+.le-input-control-btn:active {
+  background-color: rgba(0,0,0,0.1);
+}
+
+.le-input-description {
+  font-size: 0.85em;
+  color: var(--le-input-desc-color);
+  margin-top: 2px;
+}
+
+.le-input-error {
+  font-size: 0.85em;
+  color: var(--le-input-error-color);
+  margin-top: 2px;
+}