le-kit 0.0.3 → 0.1.0

package/dist/components/le-box.js

@@ -0,0 +1,256 @@
+import { p as proxyCustomElement, H, h, c as Host } from './p-IPZGv1ea.js';
+import { e as defineCustomElement$2, f as defineCustomElement$3, h as defineCustomElement$5, i as defineCustomElement$6, j as defineCustomElement$7, k as classnames } from './p-DxxFRStS.js';
+import { d as defineCustomElement$4 } from './p-CXeWQG7d.js';
+
+const leBoxDefaultCss = ":host{display:block;box-sizing:border-box}:host([hidden]){display:none}.box{width:100%;height:100%;box-sizing:border-box}.content{width:100%;height:100%;box-sizing:border-box;background:var(--le-box-bg, transparent);border-radius:var(--le-box-border-radius, 0);padding:var(--le-box-padding, 0)}:host(.display-flex) .content{min-height:100%}";
+
+const LeBox$1 = /*@__PURE__*/ proxyCustomElement(class LeBox extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    get el() { return this; }
+    /**
+     * Flex grow factor - how much the item should grow relative to siblings
+     * @min 0
+     */
+    grow = 0;
+    /**
+     * Flex shrink factor - how much the item should shrink relative to siblings
+     * @min 0
+     */
+    shrink = 1;
+    /**
+     * Flex basis - initial size before growing/shrinking (e.g., '200px', '25%', 'auto')
+     */
+    basis = 'auto';
+    /**
+     * Width of the box (CSS value like '100px', '50%', 'auto')
+     */
+    width;
+    /**
+     * Height of the box (CSS value)
+     */
+    height;
+    /**
+     * Minimum width constraint
+     */
+    minWidth;
+    /**
+     * Maximum width constraint
+     */
+    maxWidth;
+    /**
+     * Minimum height constraint
+     */
+    minHeight;
+    /**
+     * Maximum height constraint
+     */
+    maxHeight;
+    /**
+     * Background color or CSS value (e.g., '#f0f0f0', 'var(--le-color-primary-light)')
+     */
+    background;
+    /**
+     * Border radius (e.g., '8px', 'var(--le-radius-md)')
+     */
+    borderRadius;
+    /**
+     * Border style (e.g., '1px solid #ccc', '2px dashed var(--le-color-border)')
+     */
+    border;
+    /**
+     * Self-alignment override for this item on the cross axis
+     * @allowedValues auto | start | center | end | stretch | baseline
+     */
+    alignSelf = 'auto';
+    /**
+     * Internal horizontal alignment of content
+     * @allowedValues start | center | end | stretch
+     */
+    alignContent = 'stretch';
+    /**
+     * Internal vertical alignment of content
+     * @allowedValues start | center | end | stretch
+     */
+    justifyContent = 'start';
+    /**
+     * Padding inside the box (CSS value like '8px', '1rem')
+     */
+    padding;
+    /**
+     * Order in the flex container (lower values come first)
+     */
+    order;
+    /**
+     * Whether to display box content as flex (for internal alignment)
+     */
+    displayFlex = false;
+    /**
+     * Direction of internal flex layout when displayFlex is true
+     * @allowedValues horizontal | vertical
+     */
+    innerDirection = 'vertical';
+    /**
+     * Gap between internal flex items when displayFlex is true
+     */
+    innerGap;
+    getAlignSelf() {
+        const alignMap = {
+            auto: 'auto',
+            start: 'flex-start',
+            center: 'center',
+            end: 'flex-end',
+            stretch: 'stretch',
+            baseline: 'baseline',
+        };
+        return alignMap[this.alignSelf] || 'auto';
+    }
+    getContentAlign() {
+        const alignMap = {
+            start: 'flex-start',
+            center: 'center',
+            end: 'flex-end',
+            stretch: 'stretch',
+        };
+        return alignMap[this.alignContent] || 'stretch';
+    }
+    getContentJustify() {
+        const justifyMap = {
+            start: 'flex-start',
+            center: 'center',
+            end: 'flex-end',
+            stretch: 'stretch',
+        };
+        return justifyMap[this.justifyContent] || 'flex-start';
+    }
+    render() {
+        // Host styles for flex item behavior
+        const hostStyle = {
+            flexGrow: String(this.grow),
+            flexShrink: String(this.shrink),
+            flexBasis: this.basis,
+            alignSelf: this.getAlignSelf(),
+        };
+        if (this.width)
+            hostStyle.width = this.width;
+        if (this.height)
+            hostStyle.height = this.height;
+        if (this.minWidth)
+            hostStyle.minWidth = this.minWidth;
+        if (this.maxWidth)
+            hostStyle.maxWidth = this.maxWidth;
+        if (this.minHeight)
+            hostStyle.minHeight = this.minHeight;
+        if (this.maxHeight)
+            hostStyle.maxHeight = this.maxHeight;
+        if (this.order !== undefined)
+            hostStyle.order = String(this.order);
+        // Inner content styles
+        const contentStyle = {};
+        if (this.padding) {
+            contentStyle.padding = this.padding;
+        }
+        if (this.background) {
+            contentStyle.background = this.background;
+        }
+        if (this.borderRadius) {
+            contentStyle.borderRadius = this.borderRadius;
+        }
+        if (this.border) {
+            contentStyle.border = this.border;
+        }
+        if (this.displayFlex) {
+            contentStyle.display = 'flex';
+            contentStyle.flexDirection = this.innerDirection === 'vertical' ? 'column' : 'row';
+            contentStyle.alignItems = this.getContentAlign();
+            contentStyle.justifyContent = this.getContentJustify();
+            if (this.innerGap) {
+                contentStyle.gap = this.innerGap;
+            }
+        }
+        const hostClass = classnames({
+            'has-grow': this.grow > 0,
+            'display-flex': this.displayFlex,
+            [`inner-${this.innerDirection}`]: this.displayFlex,
+        });
+        return (h(Host, { key: '8d71daaa3a1f34cf1b5fa3afe4f788d974d14dde', style: hostStyle, class: hostClass }, h("le-component", { key: '350393fef2159c40de43792502545ba93e0ec84c', component: "le-box" }, h("div", { key: '425be85bce62b600a383e164a847a2f0622496bd', class: "box", part: "box" }, h("div", { key: '104275e435d64a76428b5934aa0ece7ae3284cd8', class: "content", part: "content", style: contentStyle }, h("le-slot", { key: '7655d6bd5140ffcac514b266b4ca2f790a44e8ae', name: "", description: "Content inside this flex item", type: "slot", "allowed-components": "le-text,le-card,le-button,le-stack,le-box" }, h("slot", { key: '47efcfcc9b9efe5283fa8f558026b3b13ea5b959' })))))));
+    }
+    static get style() { return leBoxDefaultCss; }
+}, [769, "le-box", {
+        "grow": [2],
+        "shrink": [2],
+        "basis": [1],
+        "width": [1],
+        "height": [1],
+        "minWidth": [1, "min-width"],
+        "maxWidth": [1, "max-width"],
+        "minHeight": [1, "min-height"],
+        "maxHeight": [1, "max-height"],
+        "background": [1],
+        "borderRadius": [1, "border-radius"],
+        "border": [1],
+        "alignSelf": [1, "align-self"],
+        "alignContent": [1, "align-content"],
+        "justifyContent": [1, "justify-content"],
+        "padding": [1],
+        "order": [2],
+        "displayFlex": [4, "display-flex"],
+        "innerDirection": [1, "inner-direction"],
+        "innerGap": [1, "inner-gap"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["le-box", "le-button", "le-checkbox", "le-component", "le-popover", "le-slot", "le-string-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "le-box":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LeBox$1);
+            }
+            break;
+        case "le-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "le-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "le-component":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "le-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "le-slot":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "le-string-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const LeBox = LeBox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LeBox, defineCustomElement };
+//# sourceMappingURL=le-box.js.map
+
+//# sourceMappingURL=le-box.js.map

package/dist/components/le-box.js.map

@@ -0,0 +1 @@
+{"file":"le-box.js","mappings":"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","names":["LeBox","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/le-box/le-box.default.css?tag=le-box&encapsulation=shadow","src/components/le-box/le-box.tsx"],"sourcesContent":["/**\n * le-box default styles\n *\n * Flex item properties are applied inline via hostStyle.\n * This CSS handles visual styling and theming.\n */\n\n:host {\n  display: block;\n  box-sizing: border-box;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* Box container - full size by default */\n.box {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n/* Content wrapper */\n.content {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  background: var(--le-box-bg, transparent);\n  border-radius: var(--le-box-border-radius, 0);\n  padding: var(--le-box-padding, 0);\n}\n\n/* When displayFlex is enabled, ensure content stretches */\n:host(.display-flex) .content {\n  min-height: 100%;\n}\n","import { Component, Prop, h, Element, Host } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible box component for use as a flex item within le-stack.\n *\n * `le-box` wraps content and provides flex item properties like grow, shrink,\n * basis, and self-alignment. It can also control its internal content alignment.\n *\n * @slot - Default slot for box content\n *\n * @cssprop --le-box-bg - Background color\n * @cssprop --le-box-padding - Padding inside the box\n * @cssprop --le-box-border-radius - Border radius\n *\n * @csspart box - The main box container\n * @csspart content - The inner content wrapper\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-box',\n  styleUrl: 'le-box.default.css',\n  shadow: true,\n})\nexport class LeBox {\n  @Element() el: HTMLElement;\n\n  /**\n   * Flex grow factor - how much the item should grow relative to siblings\n   * @min 0\n   */\n  @Prop() grow: number = 0;\n\n  /**\n   * Flex shrink factor - how much the item should shrink relative to siblings\n   * @min 0\n   */\n  @Prop() shrink: number = 1;\n\n  /**\n   * Flex basis - initial size before growing/shrinking (e.g., '200px', '25%', 'auto')\n   */\n  @Prop() basis: string = 'auto';\n\n  /**\n   * Width of the box (CSS value like '100px', '50%', 'auto')\n   */\n  @Prop() width?: string;\n\n  /**\n   * Height of the box (CSS value)\n   */\n  @Prop() height?: string;\n\n  /**\n   * Minimum width constraint\n   */\n  @Prop() minWidth?: string;\n\n  /**\n   * Maximum width constraint\n   */\n  @Prop() maxWidth?: string;\n\n  /**\n   * Minimum height constraint\n   */\n  @Prop() minHeight?: string;\n\n  /**\n   * Maximum height constraint\n   */\n  @Prop() maxHeight?: string;\n\n  /**\n   * Background color or CSS value (e.g., '#f0f0f0', 'var(--le-color-primary-light)')\n   */\n  @Prop() background?: string;\n\n  /**\n   * Border radius (e.g., '8px', 'var(--le-radius-md)')\n   */\n  @Prop() borderRadius?: string;\n\n  /**\n   * Border style (e.g., '1px solid #ccc', '2px dashed var(--le-color-border)')\n   */\n  @Prop() border?: string;\n\n  /**\n   * Self-alignment override for this item on the cross axis\n   * @allowedValues auto | start | center | end | stretch | baseline\n   */\n  @Prop() alignSelf: 'auto' | 'start' | 'center' | 'end' | 'stretch' | 'baseline' = 'auto';\n\n  /**\n   * Internal horizontal alignment of content\n   * @allowedValues start | center | end | stretch\n   */\n  @Prop() alignContent: 'start' | 'center' | 'end' | 'stretch' = 'stretch';\n\n  /**\n   * Internal vertical alignment of content\n   * @allowedValues start | center | end | stretch\n   */\n  @Prop() justifyContent: 'start' | 'center' | 'end' | 'stretch' = 'start';\n\n  /**\n   * Padding inside the box (CSS value like '8px', '1rem')\n   */\n  @Prop() padding?: string;\n\n  /**\n   * Order in the flex container (lower values come first)\n   */\n  @Prop() order?: number;\n\n  /**\n   * Whether to display box content as flex (for internal alignment)\n   */\n  @Prop() displayFlex: boolean = false;\n\n  /**\n   * Direction of internal flex layout when displayFlex is true\n   * @allowedValues horizontal | vertical\n   */\n  @Prop() innerDirection: 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Gap between internal flex items when displayFlex is true\n   */\n  @Prop() innerGap?: string;\n\n  private getAlignSelf(): string {\n    const alignMap: Record<string, string> = {\n      auto: 'auto',\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n      baseline: 'baseline',\n    };\n    return alignMap[this.alignSelf] || 'auto';\n  }\n\n  private getContentAlign(): string {\n    const alignMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n    };\n    return alignMap[this.alignContent] || 'stretch';\n  }\n\n  private getContentJustify(): string {\n    const justifyMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n    };\n    return justifyMap[this.justifyContent] || 'flex-start';\n  }\n\n  render() {\n    // Host styles for flex item behavior\n    const hostStyle: { [key: string]: string } = {\n      flexGrow: String(this.grow),\n      flexShrink: String(this.shrink),\n      flexBasis: this.basis,\n      alignSelf: this.getAlignSelf(),\n    };\n\n    if (this.width) hostStyle.width = this.width;\n    if (this.height) hostStyle.height = this.height;\n    if (this.minWidth) hostStyle.minWidth = this.minWidth;\n    if (this.maxWidth) hostStyle.maxWidth = this.maxWidth;\n    if (this.minHeight) hostStyle.minHeight = this.minHeight;\n    if (this.maxHeight) hostStyle.maxHeight = this.maxHeight;\n    if (this.order !== undefined) hostStyle.order = String(this.order);\n\n    // Inner content styles\n    const contentStyle: { [key: string]: string } = {};\n\n    if (this.padding) {\n      contentStyle.padding = this.padding;\n    }\n    if (this.background) {\n      contentStyle.background = this.background;\n    }\n    if (this.borderRadius) {\n      contentStyle.borderRadius = this.borderRadius;\n    }\n    if (this.border) {\n      contentStyle.border = this.border;\n    }\n\n    if (this.displayFlex) {\n      contentStyle.display = 'flex';\n      contentStyle.flexDirection = this.innerDirection === 'vertical' ? 'column' : 'row';\n      contentStyle.alignItems = this.getContentAlign();\n      contentStyle.justifyContent = this.getContentJustify();\n      if (this.innerGap) {\n        contentStyle.gap = this.innerGap;\n      }\n    }\n\n    const hostClass = classnames({\n      'has-grow': this.grow > 0,\n      'display-flex': this.displayFlex,\n      [`inner-${this.innerDirection}`]: this.displayFlex,\n    });\n\n    return (\n      <Host style={hostStyle} class={hostClass}>\n        <le-component component=\"le-box\">\n          <div class=\"box\" part=\"box\">\n            <div class=\"content\" part=\"content\" style={contentStyle}>\n              <le-slot\n                name=\"\"\n                description=\"Content inside this flex item\"\n                type=\"slot\"\n                allowed-components=\"le-text,le-card,le-button,le-stack,le-box\"\n              >\n                <slot></slot>\n              </le-slot>\n            </div>\n          </div>\n        </le-component>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/le-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LeButton extends Components.LeButton, HTMLElement {}
+export const LeButton: {
+    prototype: LeButton;
+    new (): LeButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/le-button.js

@@ -0,0 +1,9 @@
+import { L as LeButton$1, j as defineCustomElement$1 } from './p-DxxFRStS.js';
+
+const LeButton = LeButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LeButton, defineCustomElement };
+//# sourceMappingURL=le-button.js.map
+
+//# sourceMappingURL=le-button.js.map

package/dist/components/le-button.js.map

@@ -0,0 +1 @@
+{"file":"le-button.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/le-card.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LeCard extends Components.LeCard, HTMLElement {}
+export const LeCard: {
+    prototype: LeCard;
+    new (): LeCard;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/le-card.js

@@ -0,0 +1,83 @@
+import { p as proxyCustomElement, H, h } from './p-IPZGv1ea.js';
+import { k as classnames, e as defineCustomElement$2, f as defineCustomElement$3, h as defineCustomElement$5, i as defineCustomElement$6, j as defineCustomElement$7 } from './p-DxxFRStS.js';
+import { d as defineCustomElement$4 } from './p-CXeWQG7d.js';
+
+const leCardDefaultCss = ":host{display:block;--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)}: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)}: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}.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}";
+
+const LeCard$1 = /*@__PURE__*/ proxyCustomElement(class LeCard extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    get el() { return this; }
+    /**
+     * 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 style() { return leCardDefaultCss; }
+}, [769, "le-card", {
+        "variant": [1],
+        "interactive": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["le-card", "le-button", "le-checkbox", "le-component", "le-popover", "le-slot", "le-string-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "le-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LeCard$1);
+            }
+            break;
+        case "le-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "le-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "le-component":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "le-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "le-slot":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "le-string-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const LeCard = LeCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LeCard, defineCustomElement };
+//# sourceMappingURL=le-card.js.map
+
+//# sourceMappingURL=le-card.js.map

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

@@ -0,0 +1 @@
+{"file":"le-card.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,6wCAA6wC;;MCgCzxCA,QAAM,iBAAAC,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAGjB;;;AAGG;IACK,OAAO,GAAwC,SAAS;AAEhE;;AAEG;IACK,WAAW,GAAY,KAAK;IAEpC,MAAM,GAAA;QACJ,QACE,qEAAc,SAAS,EAAC,SAAS,EAAC,SAAS,EAAE,UAAU,CAAC,CAAA,QAAA,EAAW,IAAI,CAAC,OAAO,CAAA,CAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,EAAA,EACrH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAA,EACpC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,WAAW,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,EAAC,IAAI,EAAA,EACjF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACnB,CACN,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,SAAS,EAAA,EACtC,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAC,WAAW,EAAC,cAAc,EAAC,IAAI,EAAC,UAAU,EAAC,GAAG,EAAC,GAAG,EAAC,QAAQ,EAAA,IAAA,EAAA,EAC1F,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACL,CACN,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAA,EACpC,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,WAAW,EAAC,0BAA0B,EAAA,oBAAA,EAAoB,mBAAmB,EAAA,EACjH,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACnB,CACN,CACF,CACO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["LeCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/le-card/le-card.default.css?tag=le-card&encapsulation=shadow","src/components/le-card/le-card.tsx"],"sourcesContent":["/**\n * Default mode styles for le-card\n * Uses global design tokens with component-specific overrides\n */\n:host {\n  display: block;\n  \n  /* Component-specific tokens that map to global tokens */\n  --le-card-bg: var(--le-color-surface);\n  --le-card-border-radius: var(--le-radius-lg);\n  --le-card-shadow: var(--le-shadow-md);\n  --le-card-shadow-elevated: var(--le-shadow-lg);\n  --le-card-shadow-hover: var(--le-shadow-xl);\n  --le-card-padding: var(--le-space-md);\n  --le-card-border-color: var(--le-color-border);\n  --le-card-transition: var(--le-transition-normal);\n}\n\n.card {\n  background: var(--le-card-bg);\n  border-radius: var(--le-card-border-radius);\n  overflow: hidden;\n  color: var(--le-color-text);\n  box-shadow: var(--le-card-shadow);\n}\n\n/* Variants - le-component gets the hostClass, so we use :host > le-component */\n:host > le-component.variant-outlined .card {\n  border: 1px solid var(--le-card-border-color);\n  box-shadow: none;\n}\n\n:host > le-component.variant-elevated .card {\n  box-shadow: var(--le-card-shadow-elevated);\n}\n\n/* Interactive state */\n:host > le-component.interactive .card {\n  cursor: pointer;\n  transition: transform var(--le-card-transition), box-shadow var(--le-card-transition);\n}\n\n:host > le-component.interactive .card:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--le-card-shadow-hover);\n}\n\n:host > le-component.interactive .card:focus-visible {\n  outline: 2px solid var(--le-color-border-focus);\n  outline-offset: 2px;\n}\n\n/* Sections */\n.card-header {\n  padding: var(--le-card-padding);\n  padding-bottom: 0;\n}\n\n.card-header:empty {\n  display: none;\n}\n\n.card-content {\n  padding: var(--le-card-padding);\n}\n\n.card-footer {\n  padding: var(--le-card-padding);\n  padding-top: 0;\n}\n\n.card-footer:empty {\n  display: none;\n}\n","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"],"version":3}

package/dist/components/le-checkbox.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LeCheckbox extends Components.LeCheckbox, HTMLElement {}
+export const LeCheckbox: {
+    prototype: LeCheckbox;
+    new (): LeCheckbox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/le-checkbox.js

@@ -0,0 +1,9 @@
+import { l as LeCheckbox$1, i as defineCustomElement$1 } from './p-DxxFRStS.js';
+
+const LeCheckbox = LeCheckbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LeCheckbox, defineCustomElement };
+//# sourceMappingURL=le-checkbox.js.map
+
+//# sourceMappingURL=le-checkbox.js.map

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

@@ -0,0 +1 @@
+{"file":"le-checkbox.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/le-component.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LeComponent extends Components.LeComponent, HTMLElement {}
+export const LeComponent: {
+    prototype: LeComponent;
+    new (): LeComponent;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/le-component.js

@@ -0,0 +1,9 @@
+import { m as LeComponent$1, h as defineCustomElement$1 } from './p-DxxFRStS.js';
+
+const LeComponent = LeComponent$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LeComponent, defineCustomElement };
+//# sourceMappingURL=le-component.js.map
+
+//# sourceMappingURL=le-component.js.map

package/dist/components/le-component.js.map

@@ -0,0 +1 @@
+{"file":"le-component.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/le-number-input.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LeNumberInput extends Components.LeNumberInput, HTMLElement {}
+export const LeNumberInput: {
+    prototype: LeNumberInput;
+    new (): LeNumberInput;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;