le-kit 0.1.3 → 0.1.5

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

@@ -1,74 +0,0 @@
-/**
- * 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/collection/components/le-card/le-card.js

@@ -1,102 +0,0 @@
-import { h } 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("le-component", { key: '3878b21dafb24349fd9c178c784028302fb95214', component: "le-card", hostClass: classnames(`variant-${this.variant}`, { 'interactive': this.interactive }) }, h("div", { key: '41470ad363928c5a5f70947a1fc859db03cf7619', class: "card", part: "card" }, h("div", { key: '9e0d85016f98ee15eba90bbd4db004f9210b1bf3', class: "card-header", part: "header" }, h("le-slot", { key: 'dcd23b7da86e4026f2cc7fb62b410d7317ab2e2b', name: "header", label: "Header", description: "Card title", type: "text", tag: "h3" }, h("slot", { key: '0f2f616c950d7548484bd8c87befa7ecff6d374f', name: "header" }))), h("div", { key: '1d77598852e8755e477a505d29c77643cea446d4', class: "card-content", part: "content" }, h("le-slot", { key: 'fd94892b8489f727a3e951f1771cab53b0667799', name: "", label: "Content", description: "Card content", type: "textarea", tag: "p", required: true }, h("slot", { key: 'dc1c2deff9405fd838aee733bc6e4394f60fefd7' }))), h("div", { key: '2944fa4515119b1868567545fa131fe178d7a3cf', class: "card-footer", part: "footer" }, h("le-slot", { key: 'bdd9b5a1baf2ebf487120afa458ae85285b05fcf', name: "footer", label: "Footer", description: "Card footer with actions", "allowed-components": "le-button,le-link" }, h("slot", { key: '8a79b1baaf6720f1397c0bacf5f71dc97dff2777', 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/collection/components/le-card/le-card.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"le-card.js","sourceRoot":"","sources":["../../../src/components/le-card/le-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC5D,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,qEAAc,SAAS,EAAC,SAAS,EAAC,SAAS,EAAE,UAAU,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC;YACrH,4DAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM;gBAC3B,4DAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ;oBACpC,gEAAS,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,WAAW,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,IAAI;wBACjF,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACnB,CACN;gBAEN,4DAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,SAAS;oBACtC,gEAAS,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAC,WAAW,EAAC,cAAc,EAAC,IAAI,EAAC,UAAU,EAAC,GAAG,EAAC,GAAG,EAAC,QAAQ;wBAC1F,8DAAa,CACL,CACN;gBAEN,4DAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ;oBACpC,gEAAS,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,WAAW,EAAC,0BAA0B,wBAAoB,mBAAmB;wBACjH,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACnB,CACN,CACF,CACO,CAChB,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Element } 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      <le-component component=\"le-card\" hostClass={classnames(`variant-${this.variant}`, { 'interactive': this.interactive })}>\n        <div class=\"card\" part=\"card\">\n          <div class=\"card-header\" part=\"header\">\n            <le-slot name=\"header\" label=\"Header\" description=\"Card title\" type=\"text\" tag=\"h3\">\n              <slot name=\"header\"></slot>\n            </le-slot>\n          </div>\n\n          <div class=\"card-content\" part=\"content\">\n            <le-slot name=\"\" label=\"Content\" description=\"Card content\" type=\"textarea\" tag=\"p\" required>\n              <slot></slot>\n            </le-slot>\n          </div>\n\n          <div class=\"card-footer\" part=\"footer\">\n            <le-slot name=\"footer\" label=\"Footer\" description=\"Card footer with actions\" allowed-components=\"le-button,le-link\">\n              <slot name=\"footer\"></slot>\n            </le-slot>\n          </div>\n        </div>\n      </le-component>\n    );\n  }\n}\n"]}

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,192 +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 {
-    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("le-component", { key: '43399929e07835e0019d509803e50a151921fa72', component: "le-checkbox", hostClass: classnames({ 'disabled': this.disabled }) }, h("div", { key: '7ddbf2ac1690bb09082adfea70b9767c972d007a', class: "le-checkbox-wrapper" }, h("label", { key: '8eec4055c713e8b3b155695751b10bff64c9f903', class: "le-checkbox-label" }, h("span", { key: '2118b1cbe7911ff1674e522d723949d81cade185', class: "le-checkbox-input" }, h("input", { key: 'd0a30af5c14497fa6fa294c07ba74ae2e032481f', type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, onChange: this.handleChange })), h("span", { key: '02cf9588431240039a53ee50e02b08ba5d63b974', class: "le-checkbox-text" }, h("le-slot", { key: 'e7d7b253deab72e627164eb72fc06109abfca6a5', name: "", type: "text", tag: "span" }, h("slot", { key: '1d8c443073e48848513a8a6d04cd7805a394e54e' })))), h("div", { key: '16c2c927dc0c0f7844a203a0628bf0e561009bd0', class: "le-checkbox-description" }, h("le-slot", { key: 'c6898ecc8992dce4786e68ab4b136bf5c3a4d3aa', name: "description", type: "text", tag: "div", label: "Description" }, h("slot", { key: '3342add8ed1400ab74681e445163eeb3dd415941', 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;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,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-component/le-component.css

@@ -1,189 +0,0 @@
-/**
- * le-component styles
- * 
- * In default mode, the component is invisible (passthrough).
- * In admin mode, it shows a wrapper with header and settings.
- */
-
-:host {
-  display: contents;
-}
-
-:host(.admin-mode) {
-  display: block;
-}
-
-/* Admin mode wrapper */
-.le-component-wrapper {
-  position: relative;
-  border: 2px dashed var(--le-admin-border-color, #90caf9);
-  border-radius: var(--le-radius-md, 8px);
-  background: var(--le-admin-bg, rgba(144, 202, 249, 0.05));
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-.le-component-wrapper:hover {
-  border-color: var(--le-admin-border-hover, #42a5f5);
-  box-shadow: 0 0 0 2px var(--le-admin-glow, rgba(66, 165, 245, 0.2));
-}
-
-/* Component header */
-.le-component-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--le-spacing-1, 4px);
-  padding: 0 0 0 var(--le-spacing-1, 4px);
-  background: var(--le-admin-header-bg, rgba(144, 202, 249, 0.15));
-  border-bottom: 1px solid var(--le-admin-border-color, #90caf9);
-  border-radius: var(--le-radius-md, 8px) var(--le-radius-md, 8px) 0 0;
-  font-size: var(--le-font-size-xs, 11px);
-}
-
-.le-component-name {
-  font-weight: var(--le-font-weight-medium, 500);
-  color: var(--le-admin-text, #1976d2);
-  text-transform: capitalize;
-  text-align: start;
-  overflow: hidden;
-  width: 0;
-  flex: 1 1 0%;
-}
-
-/* Component content area */
-.le-component-content {
-  padding: var(--le-space-xs, 4px);
-}
-
-.le-component-trigger {
-  font-size: 24px;
-  line-height: 0px;
-  width: 12px;
-  height: 12px;
-}
-.le-component-button {
-  width: 20px;
-}
-
-/* Property editor styles */
-.property-editor {
-  display: flex;
-  flex-direction: column;
-  gap: var(--le-space-sm, 8px);
-  max-width: 380px;
-}
-
-.property-field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--le-space-xs, 4px);
-}
-
-.property-field label {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  font-size: var(--le-font-size-sm, 13px);
-  font-weight: var(--le-font-weight-medium, 500);
-  color: var(--le-color-text, #333);
-}
-
-.property-hint {
-  font-size: var(--le-font-size-xs, 11px);
-  font-weight: normal;
-  color: var(--le-color-text-secondary, #666);
-  line-height: 1.3;
-}
-
-.property-field input[type="text"],
-.property-field input[type="number"],
-.property-field select {
-  padding: var(--le-space-xs, 4px) var(--le-space-sm, 8px);
-  border: 1px solid var(--le-color-border, #ddd);
-  border-radius: var(--le-radius-md, 7px);
-  font-size: var(--le-font-size-sm, 13px);
-  font-family: inherit;
-  background: var(--le-color-surface, #fff);
-  color: var(--le-color-text, #333);
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
-}
-
-.property-field input:focus,
-.property-field select:focus {
-  outline: none;
-  border-color: var(--le-color-primary, #1976d2);
-  box-shadow: 0 0 0 2px var(--le-color-primary-light, rgba(25, 118, 210, 0.2));
-}
-
-/* Checkbox field */
-.property-field--checkbox {
-  flex-direction: column;
-}
-
-.property-field--checkbox label {
-  flex-direction: row;
-  align-items: center;
-  gap: var(--le-space-sm, 8px);
-  cursor: pointer;
-}
-
-.property-field--checkbox input[type="checkbox"] {
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  cursor: pointer;
-  accent-color: var(--le-color-primary, #1976d2);
-}
-
-.property-field--checkbox .property-hint {
-  margin-left: 24px;
-}
-
-/* No properties message */
-.no-properties {
-  margin: 0;
-  padding: var(--le-space-sm, 8px);
-  font-size: var(--le-font-size-sm, 13px);
-  color: var(--le-color-text-secondary, #666);
-  text-align: center;
-}
-
-/* Property editor container */
-.property-editor-container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--le-space-md, 12px);
-}
-
-/* Actions section at bottom of editor */
-.property-editor-actions {
-  padding-top: var(--le-space-sm, 8px);
-  border-top: 1px solid var(--le-color-border, #e5e5e5);
-}
-
-/* Delete component button */
-.delete-component-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--le-space-xs, 4px);
-  width: 100%;
-  padding: var(--le-space-sm, 8px) var(--le-space-md, 12px);
-  border: 1px solid var(--le-color-danger, #e53935);
-  border-radius: var(--le-radius-md, 6px);
-  background: transparent;
-  color: var(--le-color-danger, #e53935);
-  font-size: var(--le-font-size-sm, 13px);
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 0.15s, color 0.15s;
-}
-
-.delete-component-btn:hover {
-  background: var(--le-color-danger, #e53935);
-  color: white;
-}
-
-.delete-component-btn:active {
-  opacity: 0.9;
-}