le-kit 0.1.13 → 0.1.14

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

@@ -1 +0,0 @@
-{"version":3,"file":"le-box.js","sourceRoot":"","sources":["../../../src/components/le-box/le-box.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

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

@@ -1,263 +0,0 @@
-/**
- * Default mode styles for le-button
- * Uses global design tokens with component-specific overrides
- */
-:host {
-  display: inline-block;
-  
-  /* Component-specific tokens */
-  --le-button-border-radius: var(--le-radius-md);
-  --le-button-padding-x: 0.4rem;
-  --le-button-padding-y: 0.4rem;
-  --le-button-small-padding: 0.25rem;
-  --le-button-font-size: var(--le-font-size-md);
-  --le-button-font-weight: var(--le-font-weight-medium);
-  --le-button-transition: var(--le-transition-fast);
-  --le-button-icon-aspect-ratio: 1;
-  
-  /* Internal state variables - set by color classes */
-  --_btn-bg: var(--le-color-primary);
-  --_btn-bg-hover: var(--le-color-primary-dark);
-  --_btn-bg-system: var(--le-color-black);
-  --_btn-color: var(--le-color-primary-contrast);
-  --_btn-border-color: var(--le-color-primary);
-}
-
-:host([full-width]) {
-  display: block;
-  width: 100%;
-}
-
-.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--le-spacing-3);
-  width: 100%;
-  padding: var(--le-button-padding-y) var(--le-button-padding-x);
-  border: 1px solid var(--_btn-border-color);
-  border-radius: var(--le-button-border-radius);
-  background: var(--_btn-bg);
-  color: var(--_btn-color);
-  font-family: var(--le-font-family-base);
-  font-size: var(--le-button-font-size);
-  font-weight: var(--le-button-font-weight);
-  line-height: var(--le-line-height-tight);
-  text-decoration: none;
-  cursor: pointer;
-  transition: 
-    background-color var(--le-button-transition) var(--le-transition-easing),
-    border-color var(--le-button-transition) var(--le-transition-easing),
-    box-shadow var(--le-button-transition) var(--le-transition-easing),
-    transform var(--le-button-transition) var(--le-transition-easing);
-}
-
-.button:hover:not(:disabled) {
-  background: var(--_btn-bg-hover);
-  border-color: var(--_btn-bg-hover);
-}
-
-.button:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-.button:focus-visible {
-  outline: 2px solid var(--le-color-focus);
-  outline-offset: 2px;
-}
-
-.button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* ===========================================
- * COLOR VARIANTS - Use theme semantic colors
- * =========================================== */
-
-/* Primary (default) */
-:host > le-component.color-primary {
-  --_btn-bg: var(--le-color-primary);
-  --_btn-bg-hover: var(--le-color-primary-dark);
-  --_btn-color: var(--le-color-primary-contrast);
-  --_btn-border-color: var(--le-color-primary);
-}
-
-/* Secondary */
-:host > le-component.color-secondary {
-  --_btn-bg: var(--le-color-secondary);
-  --_btn-bg-hover: var(--le-color-secondary-dark);
-  --_btn-color: var(--le-color-secondary-contrast);
-  --_btn-border-color: var(--le-color-secondary);
-}
-
-/* Success */
-:host > le-component.color-success {
-  --_btn-bg: var(--le-color-success);
-  --_btn-bg-hover: var(--le-color-success-dark);
-  --_btn-color: var(--le-color-success-contrast);
-  --_btn-border-color: var(--le-color-success);
-}
-
-/* Warning */
-:host > le-component.color-warning {
-  --_btn-bg: var(--le-color-warning);
-  --_btn-bg-hover: var(--le-color-warning-dark);
-  --_btn-color: var(--le-color-warning-contrast);
-  --_btn-border-color: var(--le-color-warning);
-}
-
-/* Danger */
-:host > le-component.color-danger {
-  --_btn-bg: var(--le-color-danger);
-  --_btn-bg-hover: var(--le-color-danger-dark);
-  --_btn-color: var(--le-color-danger-contrast);
-  --_btn-border-color: var(--le-color-danger);
-}
-
-/* Info */
-:host > le-component.color-info {
-  --_btn-bg: var(--le-color-info);
-  --_btn-bg-hover: var(--le-color-info-dark);
-  --_btn-color: var(--le-color-info-contrast);
-  --_btn-border-color: var(--le-color-info);
-}
-
-/* ===========================================
- * STYLE VARIANTS
- * =========================================== */
-
-/* Solid (default) - already styled by color classes */
-:host > le-component.variant-solid .button {
-  box-shadow: var(--le-shadow-sm);
-}
-
-:host > le-component.variant-solid .button:hover:not(:disabled) {
-  box-shadow: var(--le-shadow-md);
-}
-
-/* Outlined */
-:host > le-component.variant-outlined .button {
-  background: transparent;
-  color: var(--_btn-bg);
-  border-color: var(--_btn-border-color);
-}
-
-:host > le-component.variant-outlined .button:hover:not(:disabled) {
-  background: var(--_btn-bg);
-  color: var(--_btn-color);
-}
-
-/* Clear (ghost) */
-:host > le-component.variant-clear .button {
-  background: transparent;
-  color: var(--_btn-bg);
-  border-color: transparent;
-}
-
-:host > le-component.variant-clear .button:hover:not(:disabled) {
-  background: var(--le-color-gray-100);
-  border-color: transparent;
-}
-
-/* System (controls without access) */
-:host > le-component.variant-system .button {
-  background: transparent;
-  color: var(--_btn-bg-system);
-  border-color: transparent;
-}
-
-/* ===========================================
- * SIZES
- * =========================================== */
-:host > le-component.size-small .button {
-  --le-button-padding-x: 0.4rem;
-  --le-button-padding-y: 0.3rem;
-  --le-button-padding-top: 0.35rem;
-  --le-button-font-size: var(--le-button-small-font-size, var(--le-font-size-xs));
-}
-
-:host > le-component.size-large .button {
-  --le-button-padding-x: 0.9rem;
-  --le-button-padding-y: 0.6rem;
-  --le-button-font-size: var(--le-font-size-xl);
-}
-
-/* ===========================================
- * STATES & MODIFIERS
- * =========================================== */
-
-/* Full width */
-:host > le-component.full-width {
-  display: block;
-  width: 100%;
-}
-
-/* Selected state */
-:host > le-component.selected .button {
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-:host > le-component.variant-outlined.selected .button,
-:host > le-component.variant-clear.selected .button {
-  background: var(--_btn-bg);
-  color: var(--_btn-color);
-}
-
-/* Icon only */
-:host > le-component.icon-only .button {
-  padding: 0.5rem;
-  padding-bottom: 0.6rem;
-  aspect-ratio: var(--le-button-icon-aspect-ratio, 1);
-}
-
-:host > le-component.icon-only.size-small .button {
-  padding: var(--le-button-small-padding, 0.25rem);
-}
-
-:host > le-component.icon-only.size-large .button {
-  padding: 0.75rem;
-}
-
-/* Hide content in icon-only mode */
-:host > le-component.icon-only .content {
-  display: none;
-}
-
-/* ===========================================
- * CONTENT (le-slot wrapper)
- * =========================================== */
-.content {
-  display: inline;
-}
-
-.content:empty {
-  display: none;
-}
-
-/* ===========================================
- * ICON WRAPPERS & SLOTS
- * =========================================== */
-.icon-start,
-.icon-only,
-.icon-end {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.icon-start:empty,
-.icon-only:empty,
-.icon-end:empty {
-  display: none;
-}
-
-::slotted([slot="icon-start"]),
-::slotted([slot="icon-only"]),
-::slotted([slot="icon-end"]) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.125em;
-  height: 1.125em;
-}

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

@@ -1,368 +0,0 @@
-import { h, Fragment } from "@stencil/core";
-import { classnames } from "../../utils/utils";
-/**
- * A flexible button component with multiple variants and states.
- *
- * @slot - Button text content
- * @slot icon-start - Icon before the text
- * @slot icon-end - Icon after the text
- *
- * @cssprop --le-button-bg - Button background color
- * @cssprop --le-button-color - Button text color
- * @cssprop --le-button-border-radius - Button border radius
- * @cssprop --le-button-padding-x - Button horizontal padding
- * @cssprop --le-button-padding-y - Button vertical padding
- *
- * @csspart button - The native button element
- * @csspart content - The button content wrapper
- *
- * @cmsEditable true
- * @cmsCategory Actions
- */
-export class LeButton {
-    el;
-    /**
-     * Mode of the popover should be 'default' for internal use
-     */
-    mode;
-    /**
-     * Button variant style
-     * @allowedValues solid | outlined | clear
-     */
-    variant = 'solid';
-    /**
-     * Button color theme (uses theme semantic colors)
-     * @allowedValues primary | secondary | success | warning | danger | info
-     */
-    color = 'primary';
-    /**
-     * Button size
-     * @allowedValues small | medium | large
-     */
-    size = 'medium';
-    /**
-     * Whether the button is in a selected/active state
-     */
-    selected = false;
-    /**
-     * Whether the button takes full width of its container
-     */
-    fullWidth = false;
-    /**
-     * Whether the button displays only an icon (square aspect ratio)
-     */
-    iconOnly = false;
-    /**
-     * Whether the button is disabled
-     */
-    disabled = false;
-    /**
-     * The button type attribute
-     * @allowedValues button | submit | reset
-     */
-    type = 'button';
-    /**
-     * Optional href to make the button act as a link
-     */
-    href;
-    /**
-     * Link target when href is set
-     */
-    target;
-    /**
-     * Emitted when the button is clicked.
-     * This is a custom event that wraps the native click but ensures the target is the le-button.
-     */
-    leClick;
-    handleClick = (event) => {
-        // We stop the internal button click from bubbling up
-        event.stopPropagation();
-        if (this.disabled) {
-            event.preventDefault();
-            return;
-        }
-        // And emit our own click event from the host element
-        this.leClick.emit(event);
-    };
-    render() {
-        const classes = classnames(`variant-${this.variant}`, `color-${this.color}`, `size-${this.size}`, {
-            'selected': this.selected,
-            'full-width': this.fullWidth,
-            'icon-only': this.iconOnly,
-            'disabled': this.disabled,
-        });
-        const TagType = this.href ? 'a' : 'button';
-        const attrs = this.href ? { href: this.href, target: this.target, role: 'button' } : { type: this.type, disabled: this.disabled };
-        return (h("le-component", { key: '363dbfddf4a765bfd6f36ed16d0912e281153806', component: "le-button", hostClass: classes }, h(TagType, { key: 'e112acdff4278e976ad767bd1ea7c9ced5e85f43', class: "button", part: "button", ...attrs, onClick: this.handleClick }, this.iconOnly ? (h("span", { class: "icon-start" }, h("slot", { name: "icon-only" }))) : (h(Fragment, null, h("span", { class: "icon-start" }, h("slot", { name: "icon-start" })), h("le-slot", { name: "", description: "Button text", type: "text", class: "content", part: "content" }, h("slot", null)), h("span", { class: "icon-end" }, h("slot", { name: "icon-end" })))))));
-    }
-    static get is() { return "le-button"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["le-button.default.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["le-button.default.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "mode": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "'default' | 'admin'",
-                    "resolved": "\"admin\" | \"default\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Mode of the popover should be 'default' for internal use"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "mode"
-            },
-            "variant": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'solid' | 'outlined' | 'clear' | 'system'",
-                    "resolved": "\"clear\" | \"outlined\" | \"solid\" | \"system\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "allowedValues",
-                            "text": "solid | outlined | clear"
-                        }],
-                    "text": "Button variant style"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "variant",
-                "defaultValue": "'solid'"
-            },
-            "color": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'",
-                    "resolved": "\"danger\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "allowedValues",
-                            "text": "primary | secondary | success | warning | danger | info"
-                        }],
-                    "text": "Button color theme (uses theme semantic colors)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "color",
-                "defaultValue": "'primary'"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'small' | 'medium' | 'large'",
-                    "resolved": "\"large\" | \"medium\" | \"small\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "allowedValues",
-                            "text": "small | medium | large"
-                        }],
-                    "text": "Button size"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "size",
-                "defaultValue": "'medium'"
-            },
-            "selected": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the button is in a selected/active state"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "selected",
-                "defaultValue": "false"
-            },
-            "fullWidth": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the button takes full width of its container"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "full-width",
-                "defaultValue": "false"
-            },
-            "iconOnly": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the button displays only an icon (square aspect ratio)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "icon-only",
-                "defaultValue": "false"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the button is disabled"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'button' | 'submit' | 'reset'",
-                    "resolved": "\"button\" | \"reset\" | \"submit\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "allowedValues",
-                            "text": "button | submit | reset"
-                        }],
-                    "text": "The button type attribute"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "type",
-                "defaultValue": "'button'"
-            },
-            "href": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Optional href to make the button act as a link"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "href"
-            },
-            "target": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Link target when href is set"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "target"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "leClick",
-                "name": "click",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the button is clicked.\nThis is a custom event that wraps the native click but ensures the target is the le-button."
-                },
-                "complexType": {
-                    "original": "PointerEvent",
-                    "resolved": "PointerEvent",
-                    "references": {
-                        "PointerEvent": {
-                            "location": "global",
-                            "id": "global::PointerEvent"
-                        }
-                    }
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-}
-//# sourceMappingURL=le-button.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"le-button.js","sourceRoot":"","sources":["../../../src/components/le-button/le-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Fragment, Event, EventEmitter } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible button component with multiple variants and states.\n *\n * @slot - Button text content\n * @slot icon-start - Icon before the text\n * @slot icon-end - Icon after the text\n *\n * @cssprop --le-button-bg - Button background color\n * @cssprop --le-button-color - Button text color\n * @cssprop --le-button-border-radius - Button border radius\n * @cssprop --le-button-padding-x - Button horizontal padding\n * @cssprop --le-button-padding-y - Button vertical padding\n *\n * @csspart button - The native button element\n * @csspart content - The button content wrapper\n *\n * @cmsEditable true\n * @cmsCategory Actions\n */\n@Component({\n  tag: 'le-button',\n  styleUrl: 'le-button.default.css',\n  shadow: true,\n})\nexport class LeButton {\n  @Element() el: HTMLElement;\n\n  /**\n   * Mode of the popover should be 'default' for internal use\n   */\n  @Prop({ mutable: true, reflect: true }) mode: 'default' | 'admin';\n\n  /**\n   * Button variant style\n   * @allowedValues solid | outlined | clear\n   */\n  @Prop() variant: 'solid' | 'outlined' | 'clear' | 'system' = 'solid';\n\n  /**\n   * Button color theme (uses theme semantic colors)\n   * @allowedValues primary | secondary | success | warning | danger | info\n   */\n  @Prop() color: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' = 'primary';\n\n  /**\n   * Button size\n   * @allowedValues small | medium | large\n   */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Whether the button is in a selected/active state\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   * Whether the button takes full width of its container\n   */\n  @Prop({ reflect: true }) fullWidth: boolean = false;\n\n  /**\n   * Whether the button displays only an icon (square aspect ratio)\n   */\n  @Prop() iconOnly: boolean = false;\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The button type attribute\n   * @allowedValues button | submit | reset\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Optional href to make the button act as a link\n   */\n  @Prop() href?: string;\n\n  /**\n   * Link target when href is set\n   */\n  @Prop() target?: string;\n\n  /**\n   * Emitted when the button is clicked.\n   * This is a custom event that wraps the native click but ensures the target is the le-button.\n   */\n  @Event({ eventName: 'click' }) leClick: EventEmitter<PointerEvent>;\n\n  private handleClick = (event: PointerEvent) => {\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    // And emit our own click event from the host element\n    this.leClick.emit(event);\n  };\n\n  render() {\n    const classes = classnames(`variant-${this.variant}`, `color-${this.color}`, `size-${this.size}`, {\n      'selected': this.selected,\n      'full-width': this.fullWidth,\n      'icon-only': this.iconOnly,\n      'disabled': this.disabled,\n    });\n\n    const TagType = this.href ? 'a' : 'button';\n    const attrs = this.href ? { href: this.href, target: this.target, role: 'button' } : { type: this.type, disabled: this.disabled };\n\n    return (\n      <le-component component=\"le-button\" hostClass={classes}>\n        <TagType class=\"button\" part=\"button\" {...attrs} onClick={this.handleClick}>\n          {this.iconOnly ? (\n            <span class=\"icon-start\">\n              <slot name=\"icon-only\"></slot>\n            </span>\n          ) : (\n            <Fragment>\n              <span class=\"icon-start\">\n                <slot name=\"icon-start\"></slot>\n              </span>\n              <le-slot name=\"\" description=\"Button text\" type=\"text\" class=\"content\" part=\"content\">\n                <slot></slot>\n              </le-slot>\n              <span class=\"icon-end\">\n                <slot name=\"icon-end\"></slot>\n              </span>\n            </Fragment>\n          )}\n        </TagType>\n      </le-component>\n    );\n  }\n}\n"]}