le-kit 0.1.8 → 0.1.10

package/dist/core/cjs/le-button.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-D7B9TPh8.js');
 var utils = require('./utils-DrsoID-a.js');
 
-const leButtonDefaultCss = ":host{display:inline-block;--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;--_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),\n    border-color var(--le-button-transition) var(--le-transition-easing),\n    box-shadow var(--le-button-transition) var(--le-transition-easing),\n    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}: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)}: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)}: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)}: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)}: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)}: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)}: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)}: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)}: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}:host>le-component.variant-system .button{background:transparent;color:var(--_btn-bg-system);border-color:transparent}: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)}:host>le-component.full-width{display:block;width:100%}: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)}: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}:host>le-component.icon-only .content{display:none}.content{display:inline}.content:empty{display:none}.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}";
+const leButtonDefaultCss = ":host{display:inline-block;--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;--_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),\n    border-color var(--le-button-transition) var(--le-transition-easing),\n    box-shadow var(--le-button-transition) var(--le-transition-easing),\n    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}:host(.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)}:host(.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)}:host(.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)}:host(.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)}:host(.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)}:host(.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)}:host(.variant-solid) .button{box-shadow:var(--le-shadow-sm)}:host(.variant-solid) .button:hover:not(:disabled){box-shadow:var(--le-shadow-md)}:host(.variant-outlined) .button{background:transparent;color:var(--_btn-bg);border-color:var(--_btn-border-color)}:host(.variant-outlined) .button:hover:not(:disabled){background:var(--_btn-bg);color:var(--_btn-color)}:host(.variant-clear) .button{background:transparent;color:var(--_btn-bg);border-color:transparent}:host(.variant-clear) .button:hover:not(:disabled){background:var(--le-color-gray-100);border-color:transparent}:host(.variant-system) .button{background:transparent;color:var(--_btn-bg-system);border-color:transparent}:host(.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(.size-large) .button{--le-button-padding-x:0.9rem;--le-button-padding-y:0.6rem;--le-button-font-size:var(--le-font-size-xl)}:host(.full-width){display:block;width:100%}:host(.selected) .button{box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.2)}:host(.variant-outlined.selected) .button,:host(.variant-clear.selected) .button{background:var(--_btn-bg);color:var(--_btn-color)}:host(.icon-only) .button{padding:0.5rem;padding-bottom:0.6rem;aspect-ratio:var(--le-button-icon-aspect-ratio, 1)}:host(.icon-only.size-small) .button{padding:var(--le-button-small-padding, 0.25rem)}:host(.icon-only.size-large) .button{padding:0.75rem}:host(.icon-only) .content{display:none}.content{display:inline}.content:empty{display:none}.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}";
 
 const LeButton = class {
     constructor(hostRef) {

package/dist/core/cjs/le-button.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"le-button.entry.cjs.js","sources":["src-core/components/le-button/le-button.default.css?tag=le-button&encapsulation=shadow","src-core/components/le-button/le-button.tsx"],"sourcesContent":["/**\n * Default mode styles for le-button\n * Uses global design tokens with component-specific overrides\n */\n:host {\n  display: inline-block;\n  \n  /* Component-specific tokens */\n  --le-button-border-radius: var(--le-radius-md);\n  --le-button-padding-x: 0.4rem;\n  --le-button-padding-y: 0.4rem;\n  --le-button-small-padding: 0.25rem;\n  --le-button-font-size: var(--le-font-size-md);\n  --le-button-font-weight: var(--le-font-weight-medium);\n  --le-button-transition: var(--le-transition-fast);\n  --le-button-icon-aspect-ratio: 1;\n  \n  /* Internal state variables - set by color classes */\n  --_btn-bg: var(--le-color-primary);\n  --_btn-bg-hover: var(--le-color-primary-dark);\n  --_btn-bg-system: var(--le-color-black);\n  --_btn-color: var(--le-color-primary-contrast);\n  --_btn-border-color: var(--le-color-primary);\n}\n\n:host([full-width]) {\n  display: block;\n  width: 100%;\n}\n\n.button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--le-spacing-3);\n  width: 100%;\n  padding: var(--le-button-padding-y) var(--le-button-padding-x);\n  border: 1px solid var(--_btn-border-color);\n  border-radius: var(--le-button-border-radius);\n  background: var(--_btn-bg);\n  color: var(--_btn-color);\n  font-family: var(--le-font-family-base);\n  font-size: var(--le-button-font-size);\n  font-weight: var(--le-button-font-weight);\n  line-height: var(--le-line-height-tight);\n  text-decoration: none;\n  cursor: pointer;\n  transition: \n    background-color var(--le-button-transition) var(--le-transition-easing),\n    border-color var(--le-button-transition) var(--le-transition-easing),\n    box-shadow var(--le-button-transition) var(--le-transition-easing),\n    transform var(--le-button-transition) var(--le-transition-easing);\n}\n\n.button:hover:not(:disabled) {\n  background: var(--_btn-bg-hover);\n  border-color: var(--_btn-bg-hover);\n}\n\n.button:active:not(:disabled) {\n  transform: translateY(1px);\n}\n\n.button:focus-visible {\n  outline: 2px solid var(--le-color-focus);\n  outline-offset: 2px;\n}\n\n.button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* ===========================================\n * COLOR VARIANTS - Use theme semantic colors\n * =========================================== */\n\n/* Primary (default) */\n:host > le-component.color-primary {\n  --_btn-bg: var(--le-color-primary);\n  --_btn-bg-hover: var(--le-color-primary-dark);\n  --_btn-color: var(--le-color-primary-contrast);\n  --_btn-border-color: var(--le-color-primary);\n}\n\n/* Secondary */\n:host > le-component.color-secondary {\n  --_btn-bg: var(--le-color-secondary);\n  --_btn-bg-hover: var(--le-color-secondary-dark);\n  --_btn-color: var(--le-color-secondary-contrast);\n  --_btn-border-color: var(--le-color-secondary);\n}\n\n/* Success */\n:host > le-component.color-success {\n  --_btn-bg: var(--le-color-success);\n  --_btn-bg-hover: var(--le-color-success-dark);\n  --_btn-color: var(--le-color-success-contrast);\n  --_btn-border-color: var(--le-color-success);\n}\n\n/* Warning */\n:host > le-component.color-warning {\n  --_btn-bg: var(--le-color-warning);\n  --_btn-bg-hover: var(--le-color-warning-dark);\n  --_btn-color: var(--le-color-warning-contrast);\n  --_btn-border-color: var(--le-color-warning);\n}\n\n/* Danger */\n:host > le-component.color-danger {\n  --_btn-bg: var(--le-color-danger);\n  --_btn-bg-hover: var(--le-color-danger-dark);\n  --_btn-color: var(--le-color-danger-contrast);\n  --_btn-border-color: var(--le-color-danger);\n}\n\n/* Info */\n:host > le-component.color-info {\n  --_btn-bg: var(--le-color-info);\n  --_btn-bg-hover: var(--le-color-info-dark);\n  --_btn-color: var(--le-color-info-contrast);\n  --_btn-border-color: var(--le-color-info);\n}\n\n/* ===========================================\n * STYLE VARIANTS\n * =========================================== */\n\n/* Solid (default) - already styled by color classes */\n:host > le-component.variant-solid .button {\n  box-shadow: var(--le-shadow-sm);\n}\n\n:host > le-component.variant-solid .button:hover:not(:disabled) {\n  box-shadow: var(--le-shadow-md);\n}\n\n/* Outlined */\n:host > le-component.variant-outlined .button {\n  background: transparent;\n  color: var(--_btn-bg);\n  border-color: var(--_btn-border-color);\n}\n\n:host > le-component.variant-outlined .button:hover:not(:disabled) {\n  background: var(--_btn-bg);\n  color: var(--_btn-color);\n}\n\n/* Clear (ghost) */\n:host > le-component.variant-clear .button {\n  background: transparent;\n  color: var(--_btn-bg);\n  border-color: transparent;\n}\n\n:host > le-component.variant-clear .button:hover:not(:disabled) {\n  background: var(--le-color-gray-100);\n  border-color: transparent;\n}\n\n/* System (controls without access) */\n:host > le-component.variant-system .button {\n  background: transparent;\n  color: var(--_btn-bg-system);\n  border-color: transparent;\n}\n\n/* ===========================================\n * SIZES\n * =========================================== */\n:host > le-component.size-small .button {\n  --le-button-padding-x: 0.4rem;\n  --le-button-padding-y: 0.3rem;\n  --le-button-padding-top: 0.35rem;\n  --le-button-font-size: var(--le-button-small-font-size, var(--le-font-size-xs));\n}\n\n:host > le-component.size-large .button {\n  --le-button-padding-x: 0.9rem;\n  --le-button-padding-y: 0.6rem;\n  --le-button-font-size: var(--le-font-size-xl);\n}\n\n/* ===========================================\n * STATES & MODIFIERS\n * =========================================== */\n\n/* Full width */\n:host > le-component.full-width {\n  display: block;\n  width: 100%;\n}\n\n/* Selected state */\n:host > le-component.selected .button {\n  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n:host > le-component.variant-outlined.selected .button,\n:host > le-component.variant-clear.selected .button {\n  background: var(--_btn-bg);\n  color: var(--_btn-color);\n}\n\n/* Icon only */\n:host > le-component.icon-only .button {\n  padding: 0.5rem;\n  padding-bottom: 0.6rem;\n  aspect-ratio: var(--le-button-icon-aspect-ratio, 1);\n}\n\n:host > le-component.icon-only.size-small .button {\n  padding: var(--le-button-small-padding, 0.25rem);\n}\n\n:host > le-component.icon-only.size-large .button {\n  padding: 0.75rem;\n}\n\n/* Hide content in icon-only mode */\n:host > le-component.icon-only .content {\n  display: none;\n}\n\n/* ===========================================\n * CONTENT (le-slot wrapper)\n * =========================================== */\n.content {\n  display: inline;\n}\n\n.content:empty {\n  display: none;\n}\n\n/* ===========================================\n * ICON WRAPPERS & SLOTS\n * =========================================== */\n.icon-start,\n.icon-only,\n.icon-end {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.icon-start:empty,\n.icon-only:empty,\n.icon-end:empty {\n  display: none;\n}\n\n::slotted([slot=\"icon-start\"]),\n::slotted([slot=\"icon-only\"]),\n::slotted([slot=\"icon-end\"]) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.125em;\n  height: 1.125em;\n}\n","import { Component, Prop, h, Element, Fragment, Event, EventEmitter , Host } 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      <Host  class={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              \n                <slot></slot>\n              \n              <span class=\"icon-end\">\n                <slot name=\"icon-end\"></slot>\n              </span>\n            </Fragment>\n          )}\n        </TagType>\n      </Host>\n    );\n  }\n}\n"],"names":["classnames","h","Host","Fragment"],"mappings":";;;;;AAAA,MAAM,kBAAkB,GAAG,q4JAAq4J;;MC2Bn5J,QAAQ,GAAA,MAAA;;;;;;AAGnB;;AAEG;AACqC,IAAA,IAAI;AAE5C;;;AAGG;IACK,OAAO,GAA8C,OAAO;AAEpE;;;AAGG;IACK,KAAK,GAAwE,SAAS;AAE9F;;;AAGG;IACK,IAAI,GAAiC,QAAQ;AAErD;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACsB,SAAS,GAAY,KAAK;AAEnD;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;;AAGG;IACK,IAAI,GAAkC,QAAQ;AAEtD;;AAEG;AACK,IAAA,IAAI;AAEZ;;AAEG;AACK,IAAA,MAAM;AAEd;;;AAGG;AAC4B,IAAA,OAAO;AAE9B,IAAA,WAAW,GAAG,CAAC,KAAmB,KAAI;;QAE5C,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,cAAc,EAAE;YACtB;;;AAIF,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;AAC1B,KAAC;IAED,MAAM,GAAA;QACJ,MAAM,OAAO,GAAGA,gBAAU,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,EAAE,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,EAAE,QAAQ,IAAI,CAAC,IAAI,CAAA,CAAE,EAAE;YAChG,UAAU,EAAE,IAAI,CAAC,QAAQ;YACzB,YAAY,EAAE,IAAI,CAAC,SAAS;YAC5B,WAAW,EAAE,IAAI,CAAC,QAAQ;YAC1B,UAAU,EAAE,IAAI,CAAC,QAAQ;AAC1B,SAAA,CAAC;AAEF,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ;AAC1C,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;AAEjI,QAAA,QACEC,OAAC,CAAAC,UAAI,EAAE,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACnBD,OAAA,CAAC,OAAO,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,GAAK,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EACvE,IAAI,CAAC,QAAQ,IACZA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,YAAY,EAAA,EACtBA,OAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAQ,CAAA,CACzB,KAEPA,OAAA,CAACE,cAAQ,EAAA,IAAA,EACPF,OAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACtBA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,YAAY,EAAA,CAAQ,CAC1B,EAELA,OAAa,CAAA,MAAA,EAAA,IAAA,CAAA,EAEfA,OAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,UAAU,EAAA,EACpBA,OAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,UAAU,EAAQ,CAAA,CACxB,CACE,CACZ,CACO,CACL;;;;;;;"}
+{"version":3,"file":"le-button.entry.cjs.js","sources":["src-core/components/le-button/le-button.default.css?tag=le-button&encapsulation=shadow","src-core/components/le-button/le-button.tsx"],"sourcesContent":["/**\n * Default mode styles for le-button\n * Uses global design tokens with component-specific overrides\n */\n:host {\n  display: inline-block;\n  \n  /* Component-specific tokens */\n  --le-button-border-radius: var(--le-radius-md);\n  --le-button-padding-x: 0.4rem;\n  --le-button-padding-y: 0.4rem;\n  --le-button-small-padding: 0.25rem;\n  --le-button-font-size: var(--le-font-size-md);\n  --le-button-font-weight: var(--le-font-weight-medium);\n  --le-button-transition: var(--le-transition-fast);\n  --le-button-icon-aspect-ratio: 1;\n  \n  /* Internal state variables - set by color classes */\n  --_btn-bg: var(--le-color-primary);\n  --_btn-bg-hover: var(--le-color-primary-dark);\n  --_btn-bg-system: var(--le-color-black);\n  --_btn-color: var(--le-color-primary-contrast);\n  --_btn-border-color: var(--le-color-primary);\n}\n\n:host([full-width]) {\n  display: block;\n  width: 100%;\n}\n\n.button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--le-spacing-3);\n  width: 100%;\n  padding: var(--le-button-padding-y) var(--le-button-padding-x);\n  border: 1px solid var(--_btn-border-color);\n  border-radius: var(--le-button-border-radius);\n  background: var(--_btn-bg);\n  color: var(--_btn-color);\n  font-family: var(--le-font-family-base);\n  font-size: var(--le-button-font-size);\n  font-weight: var(--le-button-font-weight);\n  line-height: var(--le-line-height-tight);\n  text-decoration: none;\n  cursor: pointer;\n  transition: \n    background-color var(--le-button-transition) var(--le-transition-easing),\n    border-color var(--le-button-transition) var(--le-transition-easing),\n    box-shadow var(--le-button-transition) var(--le-transition-easing),\n    transform var(--le-button-transition) var(--le-transition-easing);\n}\n\n.button:hover:not(:disabled) {\n  background: var(--_btn-bg-hover);\n  border-color: var(--_btn-bg-hover);\n}\n\n.button:active:not(:disabled) {\n  transform: translateY(1px);\n}\n\n.button:focus-visible {\n  outline: 2px solid var(--le-color-focus);\n  outline-offset: 2px;\n}\n\n.button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* ===========================================\n * COLOR VARIANTS - Use theme semantic colors\n * =========================================== */\n\n/* Primary (default) */\n:host(.color-primary) {\n  --_btn-bg: var(--le-color-primary);\n  --_btn-bg-hover: var(--le-color-primary-dark);\n  --_btn-color: var(--le-color-primary-contrast);\n  --_btn-border-color: var(--le-color-primary);\n}\n\n/* Secondary */\n:host(.color-secondary) {\n  --_btn-bg: var(--le-color-secondary);\n  --_btn-bg-hover: var(--le-color-secondary-dark);\n  --_btn-color: var(--le-color-secondary-contrast);\n  --_btn-border-color: var(--le-color-secondary);\n}\n\n/* Success */\n:host(.color-success) {\n  --_btn-bg: var(--le-color-success);\n  --_btn-bg-hover: var(--le-color-success-dark);\n  --_btn-color: var(--le-color-success-contrast);\n  --_btn-border-color: var(--le-color-success);\n}\n\n/* Warning */\n:host(.color-warning) {\n  --_btn-bg: var(--le-color-warning);\n  --_btn-bg-hover: var(--le-color-warning-dark);\n  --_btn-color: var(--le-color-warning-contrast);\n  --_btn-border-color: var(--le-color-warning);\n}\n\n/* Danger */\n:host(.color-danger) {\n  --_btn-bg: var(--le-color-danger);\n  --_btn-bg-hover: var(--le-color-danger-dark);\n  --_btn-color: var(--le-color-danger-contrast);\n  --_btn-border-color: var(--le-color-danger);\n}\n\n/* Info */\n:host(.color-info) {\n  --_btn-bg: var(--le-color-info);\n  --_btn-bg-hover: var(--le-color-info-dark);\n  --_btn-color: var(--le-color-info-contrast);\n  --_btn-border-color: var(--le-color-info);\n}\n\n/* ===========================================\n * STYLE VARIANTS\n * =========================================== */\n\n/* Solid (default) - already styled by color classes */\n:host(.variant-solid) .button {\n  box-shadow: var(--le-shadow-sm);\n}\n\n:host(.variant-solid) .button:hover:not(:disabled) {\n  box-shadow: var(--le-shadow-md);\n}\n\n/* Outlined */\n:host(.variant-outlined) .button {\n  background: transparent;\n  color: var(--_btn-bg);\n  border-color: var(--_btn-border-color);\n}\n\n:host(.variant-outlined) .button:hover:not(:disabled) {\n  background: var(--_btn-bg);\n  color: var(--_btn-color);\n}\n\n/* Clear (ghost) */\n:host(.variant-clear) .button {\n  background: transparent;\n  color: var(--_btn-bg);\n  border-color: transparent;\n}\n\n:host(.variant-clear) .button:hover:not(:disabled) {\n  background: var(--le-color-gray-100);\n  border-color: transparent;\n}\n\n/* System (controls without access) */\n:host(.variant-system) .button {\n  background: transparent;\n  color: var(--_btn-bg-system);\n  border-color: transparent;\n}\n\n/* ===========================================\n * SIZES\n * =========================================== */\n:host(.size-small) .button {\n  --le-button-padding-x: 0.4rem;\n  --le-button-padding-y: 0.3rem;\n  --le-button-padding-top: 0.35rem;\n  --le-button-font-size: var(--le-button-small-font-size, var(--le-font-size-xs));\n}\n\n:host(.size-large) .button {\n  --le-button-padding-x: 0.9rem;\n  --le-button-padding-y: 0.6rem;\n  --le-button-font-size: var(--le-font-size-xl);\n}\n\n/* ===========================================\n * STATES & MODIFIERS\n * =========================================== */\n\n/* Full width */\n:host(.full-width) {\n  display: block;\n  width: 100%;\n}\n\n/* Selected state */\n:host(.selected) .button {\n  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n:host(.variant-outlined.selected) .button,\n:host(.variant-clear.selected) .button {\n  background: var(--_btn-bg);\n  color: var(--_btn-color);\n}\n\n/* Icon only */\n:host(.icon-only) .button {\n  padding: 0.5rem;\n  padding-bottom: 0.6rem;\n  aspect-ratio: var(--le-button-icon-aspect-ratio, 1);\n}\n\n:host(.icon-only.size-small) .button {\n  padding: var(--le-button-small-padding, 0.25rem);\n}\n\n:host(.icon-only.size-large) .button {\n  padding: 0.75rem;\n}\n\n/* Hide content in icon-only mode */\n:host(.icon-only) .content {\n  display: none;\n}\n\n/* ===========================================\n * CONTENT (le-slot wrapper)\n * =========================================== */\n.content {\n  display: inline;\n}\n\n.content:empty {\n  display: none;\n}\n\n/* ===========================================\n * ICON WRAPPERS & SLOTS\n * =========================================== */\n.icon-start,\n.icon-only,\n.icon-end {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.icon-start:empty,\n.icon-only:empty,\n.icon-end:empty {\n  display: none;\n}\n\n::slotted([slot=\"icon-start\"]),\n::slotted([slot=\"icon-only\"]),\n::slotted([slot=\"icon-end\"]) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.125em;\n  height: 1.125em;\n}\n","import { Component, Prop, h, Element, Fragment, Event, EventEmitter , Host } 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      <Host  class={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              \n                <slot></slot>\n              \n              <span class=\"icon-end\">\n                <slot name=\"icon-end\"></slot>\n              </span>\n            </Fragment>\n          )}\n        </TagType>\n      </Host>\n    );\n  }\n}\n"],"names":["classnames","h","Host","Fragment"],"mappings":";;;;;AAAA,MAAM,kBAAkB,GAAG,woJAAwoJ;;MC2BtpJ,QAAQ,GAAA,MAAA;;;;;;AAGnB;;AAEG;AACqC,IAAA,IAAI;AAE5C;;;AAGG;IACK,OAAO,GAA8C,OAAO;AAEpE;;;AAGG;IACK,KAAK,GAAwE,SAAS;AAE9F;;;AAGG;IACK,IAAI,GAAiC,QAAQ;AAErD;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACsB,SAAS,GAAY,KAAK;AAEnD;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;;AAGG;IACK,IAAI,GAAkC,QAAQ;AAEtD;;AAEG;AACK,IAAA,IAAI;AAEZ;;AAEG;AACK,IAAA,MAAM;AAEd;;;AAGG;AAC4B,IAAA,OAAO;AAE9B,IAAA,WAAW,GAAG,CAAC,KAAmB,KAAI;;QAE5C,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,cAAc,EAAE;YACtB;;;AAIF,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;AAC1B,KAAC;IAED,MAAM,GAAA;QACJ,MAAM,OAAO,GAAGA,gBAAU,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,EAAE,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,EAAE,QAAQ,IAAI,CAAC,IAAI,CAAA,CAAE,EAAE;YAChG,UAAU,EAAE,IAAI,CAAC,QAAQ;YACzB,YAAY,EAAE,IAAI,CAAC,SAAS;YAC5B,WAAW,EAAE,IAAI,CAAC,QAAQ;YAC1B,UAAU,EAAE,IAAI,CAAC,QAAQ;AAC1B,SAAA,CAAC;AAEF,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ;AAC1C,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;AAEjI,QAAA,QACEC,OAAC,CAAAC,UAAI,EAAE,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACnBD,OAAA,CAAC,OAAO,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,GAAK,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EACvE,IAAI,CAAC,QAAQ,IACZA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,YAAY,EAAA,EACtBA,OAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAQ,CAAA,CACzB,KAEPA,OAAA,CAACE,cAAQ,EAAA,IAAA,EACPF,OAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACtBA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,YAAY,EAAA,CAAQ,CAC1B,EAELA,OAAa,CAAA,MAAA,EAAA,IAAA,CAAA,EAEfA,OAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,UAAU,EAAA,EACpBA,OAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,UAAU,EAAQ,CAAA,CACxB,CACE,CACZ,CACO,CACL;;;;;;;"}

package/dist/core/cjs/le-card.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-D7B9TPh8.js');
 var utils = require('./utils-DrsoID-a.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 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(.variant-outlined) .card{border:1px solid var(--le-card-border-color);box-shadow:none}:host(.variant-elevated) .card{box-shadow:var(--le-card-shadow-elevated)}:host(.interactive) .card{cursor:pointer;transition:transform var(--le-card-transition), box-shadow var(--le-card-transition)}:host(.interactive) .card:hover{transform:translateY(-2px);box-shadow:var(--le-card-shadow-hover)}:host(.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 = class {
     constructor(hostRef) {

package/dist/core/cjs/le-card.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"le-card.entry.cjs.js","sources":["src-core/components/le-card/le-card.default.css?tag=le-card&encapsulation=shadow","src-core/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 , Host } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible card component with header, content, and footer slots.\n *\n * The card uses le-slot wrappers for each slot area. In admin mode,\n * le-slot shows placeholders for CMS editing. In default mode,\n * le-slot acts as a transparent passthrough.\n *\n * @slot header - Card header content (title, actions)\n * @slot - Default slot for main card content\n * @slot footer - Card footer content (buttons, links)\n *\n * @cssprop --le-card-bg - Card background color\n * @cssprop --le-card-border-radius - Card border radius\n * @cssprop --le-card-shadow - Card box shadow\n * @cssprop --le-card-padding - Card content padding\n *\n * @csspart card - The main card container\n * @csspart header - The card header section\n * @csspart content - The card content section\n * @csspart footer - The card footer section\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-card',\n  styleUrl: 'le-card.default.css',\n  shadow: true,\n})\nexport class LeCard {\n  @Element() el: HTMLElement;\n\n  /**\n   * Card variant style\n   * @allowedValues default | outlined | elevated\n   */\n  @Prop() variant: 'default' | 'outlined' | 'elevated' = 'default';\n\n  /**\n   * Whether the card is interactive (clickable)\n   */\n  @Prop() interactive: boolean = false;\n\n  render() {\n    return (\n      <Host  class={classnames(`variant-${this.variant}`, { 'interactive': this.interactive })}>\n        <div class=\"card\" part=\"card\">\n          <div class=\"card-header\" part=\"header\">\n            \n              <slot name=\"header\"></slot>\n            \n          </div>\n\n          <div class=\"card-content\" part=\"content\">\n            \n              <slot></slot>\n            \n          </div>\n\n          <div class=\"card-footer\" part=\"footer\">\n            \n              <slot name=\"footer\"></slot>\n            \n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host","classnames"],"mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,6wCAA6wC;;MCgCzxC,MAAM,GAAA,MAAA;;;;;AAGjB;;;AAGG;IACK,OAAO,GAAwC,SAAS;AAEhE;;AAEG;IACK,WAAW,GAAY,KAAK;IAEpC,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAE,KAAK,EAAEC,gBAAU,CAAC,WAAW,IAAI,CAAC,OAAO,CAAA,CAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,EAAA,EACtFF,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC3BA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAA,EAElCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CAEzB,EAENA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,SAAS,EAAA,EAEpCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CAEX,EAENA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAA,EAElCA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAQ,CAEzB,CACF,CACD;;;;;;;"}
+{"version":3,"file":"le-card.entry.cjs.js","sources":["src-core/components/le-card/le-card.default.css?tag=le-card&encapsulation=shadow","src-core/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 */\n:host(.variant-outlined) .card {\n  border: 1px solid var(--le-card-border-color);\n  box-shadow: none;\n}\n\n:host(.variant-elevated) .card {\n  box-shadow: var(--le-card-shadow-elevated);\n}\n\n/* Interactive state */\n:host(.interactive) .card {\n  cursor: pointer;\n  transition: transform var(--le-card-transition), box-shadow var(--le-card-transition);\n}\n\n:host(.interactive) .card:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--le-card-shadow-hover);\n}\n\n:host(.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 , Host } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible card component with header, content, and footer slots.\n *\n * The card uses le-slot wrappers for each slot area. In admin mode,\n * le-slot shows placeholders for CMS editing. In default mode,\n * le-slot acts as a transparent passthrough.\n *\n * @slot header - Card header content (title, actions)\n * @slot - Default slot for main card content\n * @slot footer - Card footer content (buttons, links)\n *\n * @cssprop --le-card-bg - Card background color\n * @cssprop --le-card-border-radius - Card border radius\n * @cssprop --le-card-shadow - Card box shadow\n * @cssprop --le-card-padding - Card content padding\n *\n * @csspart card - The main card container\n * @csspart header - The card header section\n * @csspart content - The card content section\n * @csspart footer - The card footer section\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-card',\n  styleUrl: 'le-card.default.css',\n  shadow: true,\n})\nexport class LeCard {\n  @Element() el: HTMLElement;\n\n  /**\n   * Card variant style\n   * @allowedValues default | outlined | elevated\n   */\n  @Prop() variant: 'default' | 'outlined' | 'elevated' = 'default';\n\n  /**\n   * Whether the card is interactive (clickable)\n   */\n  @Prop() interactive: boolean = false;\n\n  render() {\n    return (\n      <Host  class={classnames(`variant-${this.variant}`, { 'interactive': this.interactive })}>\n        <div class=\"card\" part=\"card\">\n          <div class=\"card-header\" part=\"header\">\n            \n              <slot name=\"header\"></slot>\n            \n          </div>\n\n          <div class=\"card-content\" part=\"content\">\n            \n              <slot></slot>\n            \n          </div>\n\n          <div class=\"card-footer\" part=\"footer\">\n            \n              <slot name=\"footer\"></slot>\n            \n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host","classnames"],"mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,stCAAstC;;MCgCluC,MAAM,GAAA,MAAA;;;;;AAGjB;;;AAGG;IACK,OAAO,GAAwC,SAAS;AAEhE;;AAEG;IACK,WAAW,GAAY,KAAK;IAEpC,MAAM,GAAA;AACJ,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAE,KAAK,EAAEC,gBAAU,CAAC,WAAW,IAAI,CAAC,OAAO,CAAA,CAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,EAAA,EACtFF,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC3BA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAA,EAElCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CAEzB,EAENA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,SAAS,EAAA,EAEpCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CAEX,EAENA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAA,EAElCA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAQ,CAEzB,CACF,CACD;;;;;;;"}

package/dist/core/cjs/le-string-input.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-D7B9TPh8.js');
 var utils = require('./utils-DrsoID-a.js');
 
-const leStringInputCss = ":host{display:block;--le-input-bg:var(--le-color-surface, #ffffff);--le-input-color:var(--le-color-text-primary, #333333);--le-input-border:var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);--le-input-radius:var(--le-radius-sm, 4px);--le-input-padding:2px 6px;--le-input-height:1.5rem;--le-input-label-color:var(--le-color-text-primary, #333333);--le-input-desc-color:var(--le-color-text-secondary, #666666);--le-input-placeholder-color:#999999}.le-input-wrapper{display:flex;flex-direction:column;gap:2px}.le-input-label{display:block;font-size:0.9em;font-weight:500;color:var(--le-input-label-color);margin-bottom:2px}.le-input-container{position:relative;display:flex;align-items:center;background:var(--le-input-bg);border:var(--le-input-border);border-radius:var(--le-input-radius);transition:border-color 0.2s}.le-input-container:focus-within{outline:2px solid var(--le-color-focus);outline-offset:2px}:host([disabled]) .le-input-container{opacity:0.6;background-color:rgba(0,0,0,0.05);cursor:not-allowed}input{flex:1;min-height:var(--le-input-height);padding:var(--le-input-padding);border:none;background:transparent;color:var(--le-input-color);font-family:inherit;font-size:inherit;outline:none;width:100%}input::placeholder{color:var(--le-input-placeholder-color)}.icon-start,.icon-end{display:flex;align-items:center;justify-content:center;padding:0 8px;color:var(--le-input-desc-color)}.le-input-description{font-size:0.85em;color:var(--le-input-desc-color);margin-top:2px}.le-input-description::has(le-slot>slot[name=description]:empty){display:none}";
+const leStringInputCss = ":host{display:block;--le-input-bg:var(--le-color-surface, #ffffff);--le-input-color:var(--le-color-text-primary, #333333);--le-input-border:var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);--le-input-radius:var(--le-radius-sm, 4px);--le-input-padding:2px 6px;--le-input-height:1.5rem;--le-input-label-color:var(--le-color-text-primary, #333333);--le-input-desc-color:var(--le-color-text-secondary, #666666);--le-input-placeholder-color:#999999}.le-input-wrapper{display:flex;flex-direction:column;gap:2px}.le-input-label{display:block;font-size:0.9em;font-weight:500;color:var(--le-input-label-color);margin-bottom:2px}.le-input-container{position:relative;display:flex;align-items:center;background:var(--le-input-bg);border:var(--le-input-border);border-radius:var(--le-input-radius);transition:border-color 0.2s}.le-input-container:focus-within{outline:2px solid var(--le-color-focus);outline-offset:2px}:host([disabled]) .le-input-container{opacity:0.6;background-color:rgba(0,0,0,0.05);cursor:not-allowed}input{flex:1;min-height:var(--le-input-height);padding:var(--le-input-padding);border:none;background:transparent;color:var(--le-input-color);font-family:inherit;font-size:inherit;outline:none;width:100%}input::placeholder{color:var(--le-input-placeholder-color)}.icon-start,.icon-end{display:flex;align-items:center;justify-content:center;padding:0 8px;color:var(--le-input-desc-color)}.le-input-description{font-size:0.85em;color:var(--le-input-desc-color);margin-top:2px}.le-input-description::has(slot[name=description]:empty){display:none}";
 
 const LeStringInput = class {
     constructor(hostRef) {

package/dist/core/cjs/le-string-input.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"le-string-input.entry.cjs.js","sources":["src-core/components/le-string-input/le-string-input.css?tag=le-string-input&encapsulation=shadow","src-core/components/le-string-input/le-string-input.tsx"],"sourcesContent":[":host {\n  display: block;\n  --le-input-bg: var(--le-color-surface, #ffffff);\n  --le-input-color: var(--le-color-text-primary, #333333);\n  --le-input-border: var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);\n  --le-input-radius: var(--le-radius-sm, 4px);\n  --le-input-padding: 2px 6px;\n  --le-input-height: 1.5rem;\n  --le-input-label-color: var(--le-color-text-primary, #333333);\n  --le-input-desc-color: var(--le-color-text-secondary, #666666);\n  --le-input-placeholder-color: #999999;\n}\n\n.le-input-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.le-input-label {\n  display: block;\n  font-size: 0.9em;\n  font-weight: 500;\n  color: var(--le-input-label-color);\n  margin-bottom: 2px;\n}\n\n.le-input-container {\n  position: relative;\n  display: flex;\n  align-items: center;\n  background: var(--le-input-bg);\n  border: var(--le-input-border);\n  border-radius: var(--le-input-radius);\n  transition: border-color 0.2s;\n}\n\n.le-input-container:focus-within {\n  outline: 2px solid var(--le-color-focus);\n  outline-offset: 2px;\n}\n\n\n:host([disabled]) .le-input-container {\n  opacity: 0.6;\n  background-color: rgba(0,0,0,0.05);\n  cursor: not-allowed;\n}\n\ninput {\n  flex: 1;\n  min-height: var(--le-input-height);\n  padding: var(--le-input-padding);\n  border: none;\n  background: transparent;\n  color: var(--le-input-color);\n  font-family: inherit;\n  font-size: inherit;\n  outline: none;\n  width: 100%;\n}\n\ninput::placeholder {\n  color: var(--le-input-placeholder-color);\n}\n\n.icon-start, .icon-end {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 8px;\n  color: var(--le-input-desc-color);\n}\n\n.le-input-description {\n  font-size: 0.85em;\n  color: var(--le-input-desc-color);\n  margin-top: 2px;\n}\n\n.le-input-description::has(le-slot > slot[name=description]:empty) {\n  display: none;\n}\n","import { Component, Prop, Event, EventEmitter, h, Element , Host } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A text input component with support for labels, descriptions, icons, and external IDs.\n *\n * @slot - The label text for the input\n * @slot description - Additional description text displayed below the input\n * @slot icon-start - Icon to display at the start of the input\n * @slot icon-end - Icon to display at the end of the input\n *\n * @cssprop --le-input-bg - Input background color\n * @cssprop --le-input-color - Input text color\n * @cssprop --le-input-border - Input border style\n * @cssprop --le-input-border-focus - Input border style when focused\n * @cssprop --le-input-radius - Input border radius\n * @cssprop --le-input-padding - Input padding\n */\n@Component({\n  tag: 'le-string-input',\n  styleUrl: 'le-string-input.css',\n  shadow: true,\n})\nexport class LeStringInput {\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   * The value of the input\n   */\n  @Prop({ mutable: true, reflect: true }) value: string;\n\n  /**\n   * The name of the input\n   */\n  @Prop() name: string;\n\n  /**\n   * The type of the input (text, email, password, etc.)\n   */\n  @Prop() type: 'text' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n  /**\n   * Label for the input\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon for the start icon\n   */\n  @Prop() iconStart: string;\n\n  /**\n   * Icon for the end icon\n   */\n  @Prop() iconEnd: string;\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the input is read-only\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * External ID for linking with external systems\n   */\n  @Prop() externalId: string;\n\n  /**\n   * Emitted when the value changes (on blur or Enter)\n   */\n  @Event({ eventName: 'change' }) leChange: EventEmitter<{ value: string; name: string; externalId: string }>;\n\n  /**\n   * Emitted when the input value changes (on keystroke)\n   */\n  @Event({ eventName: 'input' }) leInput: EventEmitter<{ value: string; name: string; externalId: string }>;\n\n  private handleInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement;\n    this.value = input.value;\n    this.leInput.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId\n    });\n  };\n\n  private handleChange = (ev: Event) => {\n    const input = ev.target as HTMLInputElement;\n    this.value = input.value;\n    this.leChange.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId\n    });\n  };\n\n  private handleClick = (ev: Event) => {\n    ev.stopPropagation();\n  };\n\n  render() {\n    return (\n      <Host  class={classnames({ 'disabled': this.disabled })}>\n        <div class=\"le-input-wrapper\">\n          {this.label && (\n            <label class=\"le-input-label\" htmlFor={this.name}>{this.label}</label>\n          )}\n          \n          <div class=\"le-input-container\">\n            {this.iconStart && (\n              <span class=\"icon-start\">{this.iconStart}</span>\n            )}\n            <input\n              id={this.name}\n              type={this.type}\n              name={this.name}\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              onInput={this.handleInput}\n              onChange={this.handleChange}\n              onClick={this.handleClick}\n            />\n            {this.iconEnd && (\n              <span class=\"icon-end\">{this.iconEnd}</span>\n            )}\n          </div>\n\n          <div class=\"le-input-description\">\n            \n              <slot name=\"description\"></slot>\n            \n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host","classnames"],"mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,mjDAAmjD;;MCuB/jD,aAAa,GAAA,MAAA;;;;;;;AAGxB;;AAEG;AACqC,IAAA,IAAI;AAE5C;;AAEG;AACqC,IAAA,KAAK;AAE7C;;AAEG;AACK,IAAA,IAAI;AAEZ;;AAEG;IACK,IAAI,GAAkD,MAAM;AAEpE;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;AACK,IAAA,SAAS;AAEjB;;AAEG;AACK,IAAA,OAAO;AAEf;;AAEG;AACK,IAAA,WAAW;AAEnB;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,UAAU;AAElB;;AAEG;AAC6B,IAAA,QAAQ;AAExC;;AAEG;AAC4B,IAAA,OAAO;AAE9B,IAAA,WAAW,GAAG,CAAC,EAAS,KAAI;AAClC,QAAA,MAAM,KAAK,GAAG,EAAE,CAAC,MAA0B;AAC3C,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK;AACxB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;YAChB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,UAAU,EAAE,IAAI,CAAC;AAClB,SAAA,CAAC;AACJ,KAAC;AAEO,IAAA,YAAY,GAAG,CAAC,EAAS,KAAI;AACnC,QAAA,MAAM,KAAK,GAAG,EAAE,CAAC,MAA0B;AAC3C,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK;AACxB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YACjB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,UAAU,EAAE,IAAI,CAAC;AAClB,SAAA,CAAC;AACJ,KAAC;AAEO,IAAA,WAAW,GAAG,CAAC,EAAS,KAAI;QAClC,EAAE,CAAC,eAAe,EAAE;AACtB,KAAC;IAED,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAE,KAAK,EAAEC,gBAAU,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAA,EACrDF,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC1B,IAAI,CAAC,KAAK,KACTA,OAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAA,EAAG,IAAI,CAAC,KAAK,CAAS,CACvE,EAEDA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC5B,IAAI,CAAC,SAAS,KACbA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAE,EAAA,IAAI,CAAC,SAAS,CAAQ,CACjD,EACDA,OACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAE,IAAI,CAAC,IAAI,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,CAAA,EACD,IAAI,CAAC,OAAO,KACXA,mEAAM,KAAK,EAAC,UAAU,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,CAC7C,CACG,EAENA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAE7BA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,CAAQ,CAE9B,CACF,CACD;;;;;;;"}
+{"version":3,"file":"le-string-input.entry.cjs.js","sources":["src-core/components/le-string-input/le-string-input.css?tag=le-string-input&encapsulation=shadow","src-core/components/le-string-input/le-string-input.tsx"],"sourcesContent":[":host {\n  display: block;\n  --le-input-bg: var(--le-color-surface, #ffffff);\n  --le-input-color: var(--le-color-text-primary, #333333);\n  --le-input-border: var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);\n  --le-input-radius: var(--le-radius-sm, 4px);\n  --le-input-padding: 2px 6px;\n  --le-input-height: 1.5rem;\n  --le-input-label-color: var(--le-color-text-primary, #333333);\n  --le-input-desc-color: var(--le-color-text-secondary, #666666);\n  --le-input-placeholder-color: #999999;\n}\n\n.le-input-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.le-input-label {\n  display: block;\n  font-size: 0.9em;\n  font-weight: 500;\n  color: var(--le-input-label-color);\n  margin-bottom: 2px;\n}\n\n.le-input-container {\n  position: relative;\n  display: flex;\n  align-items: center;\n  background: var(--le-input-bg);\n  border: var(--le-input-border);\n  border-radius: var(--le-input-radius);\n  transition: border-color 0.2s;\n}\n\n.le-input-container:focus-within {\n  outline: 2px solid var(--le-color-focus);\n  outline-offset: 2px;\n}\n\n\n:host([disabled]) .le-input-container {\n  opacity: 0.6;\n  background-color: rgba(0,0,0,0.05);\n  cursor: not-allowed;\n}\n\ninput {\n  flex: 1;\n  min-height: var(--le-input-height);\n  padding: var(--le-input-padding);\n  border: none;\n  background: transparent;\n  color: var(--le-input-color);\n  font-family: inherit;\n  font-size: inherit;\n  outline: none;\n  width: 100%;\n}\n\ninput::placeholder {\n  color: var(--le-input-placeholder-color);\n}\n\n.icon-start, .icon-end {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 8px;\n  color: var(--le-input-desc-color);\n}\n\n.le-input-description {\n  font-size: 0.85em;\n  color: var(--le-input-desc-color);\n  margin-top: 2px;\n}\n\n.le-input-description::has(slot[name=description]:empty) {\n  display: none;\n}\n","import { Component, Prop, Event, EventEmitter, h, Element , Host } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A text input component with support for labels, descriptions, icons, and external IDs.\n *\n * @slot - The label text for the input\n * @slot description - Additional description text displayed below the input\n * @slot icon-start - Icon to display at the start of the input\n * @slot icon-end - Icon to display at the end of the input\n *\n * @cssprop --le-input-bg - Input background color\n * @cssprop --le-input-color - Input text color\n * @cssprop --le-input-border - Input border style\n * @cssprop --le-input-border-focus - Input border style when focused\n * @cssprop --le-input-radius - Input border radius\n * @cssprop --le-input-padding - Input padding\n */\n@Component({\n  tag: 'le-string-input',\n  styleUrl: 'le-string-input.css',\n  shadow: true,\n})\nexport class LeStringInput {\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   * The value of the input\n   */\n  @Prop({ mutable: true, reflect: true }) value: string;\n\n  /**\n   * The name of the input\n   */\n  @Prop() name: string;\n\n  /**\n   * The type of the input (text, email, password, etc.)\n   */\n  @Prop() type: 'text' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n  /**\n   * Label for the input\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon for the start icon\n   */\n  @Prop() iconStart: string;\n\n  /**\n   * Icon for the end icon\n   */\n  @Prop() iconEnd: string;\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the input is read-only\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * External ID for linking with external systems\n   */\n  @Prop() externalId: string;\n\n  /**\n   * Emitted when the value changes (on blur or Enter)\n   */\n  @Event({ eventName: 'change' }) leChange: EventEmitter<{ value: string; name: string; externalId: string }>;\n\n  /**\n   * Emitted when the input value changes (on keystroke)\n   */\n  @Event({ eventName: 'input' }) leInput: EventEmitter<{ value: string; name: string; externalId: string }>;\n\n  private handleInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement;\n    this.value = input.value;\n    this.leInput.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId\n    });\n  };\n\n  private handleChange = (ev: Event) => {\n    const input = ev.target as HTMLInputElement;\n    this.value = input.value;\n    this.leChange.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId\n    });\n  };\n\n  private handleClick = (ev: Event) => {\n    ev.stopPropagation();\n  };\n\n  render() {\n    return (\n      <Host  class={classnames({ 'disabled': this.disabled })}>\n        <div class=\"le-input-wrapper\">\n          {this.label && (\n            <label class=\"le-input-label\" htmlFor={this.name}>{this.label}</label>\n          )}\n          \n          <div class=\"le-input-container\">\n            {this.iconStart && (\n              <span class=\"icon-start\">{this.iconStart}</span>\n            )}\n            <input\n              id={this.name}\n              type={this.type}\n              name={this.name}\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              onInput={this.handleInput}\n              onChange={this.handleChange}\n              onClick={this.handleClick}\n            />\n            {this.iconEnd && (\n              <span class=\"icon-end\">{this.iconEnd}</span>\n            )}\n          </div>\n\n          <div class=\"le-input-description\">\n            \n              <slot name=\"description\"></slot>\n            \n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host","classnames"],"mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,2iDAA2iD;;MCuBvjD,aAAa,GAAA,MAAA;;;;;;;AAGxB;;AAEG;AACqC,IAAA,IAAI;AAE5C;;AAEG;AACqC,IAAA,KAAK;AAE7C;;AAEG;AACK,IAAA,IAAI;AAEZ;;AAEG;IACK,IAAI,GAAkD,MAAM;AAEpE;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;AACK,IAAA,SAAS;AAEjB;;AAEG;AACK,IAAA,OAAO;AAEf;;AAEG;AACK,IAAA,WAAW;AAEnB;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACK,IAAA,UAAU;AAElB;;AAEG;AAC6B,IAAA,QAAQ;AAExC;;AAEG;AAC4B,IAAA,OAAO;AAE9B,IAAA,WAAW,GAAG,CAAC,EAAS,KAAI;AAClC,QAAA,MAAM,KAAK,GAAG,EAAE,CAAC,MAA0B;AAC3C,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK;AACxB,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;YAChB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,UAAU,EAAE,IAAI,CAAC;AAClB,SAAA,CAAC;AACJ,KAAC;AAEO,IAAA,YAAY,GAAG,CAAC,EAAS,KAAI;AACnC,QAAA,MAAM,KAAK,GAAG,EAAE,CAAC,MAA0B;AAC3C,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK;AACxB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YACjB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,UAAU,EAAE,IAAI,CAAC;AAClB,SAAA,CAAC;AACJ,KAAC;AAEO,IAAA,WAAW,GAAG,CAAC,EAAS,KAAI;QAClC,EAAE,CAAC,eAAe,EAAE;AACtB,KAAC;IAED,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAE,KAAK,EAAEC,gBAAU,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAA,EACrDF,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC1B,IAAI,CAAC,KAAK,KACTA,OAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,IAAI,CAAC,IAAI,EAAA,EAAG,IAAI,CAAC,KAAK,CAAS,CACvE,EAEDA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC5B,IAAI,CAAC,SAAS,KACbA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAE,EAAA,IAAI,CAAC,SAAS,CAAQ,CACjD,EACDA,OACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAE,IAAI,CAAC,IAAI,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,CAAA,EACD,IAAI,CAAC,OAAO,KACXA,mEAAM,KAAK,EAAC,UAAU,EAAA,EAAE,IAAI,CAAC,OAAO,CAAQ,CAC7C,CACG,EAENA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAE7BA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,aAAa,EAAA,CAAQ,CAE9B,CACF,CACD;;;;;;;"}

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

@@ -76,7 +76,7 @@
  * =========================================== */
 
 /* Primary (default) */
-:host > le-component.color-primary {
+:host(.color-primary) {
   --_btn-bg: var(--le-color-primary);
   --_btn-bg-hover: var(--le-color-primary-dark);
   --_btn-color: var(--le-color-primary-contrast);
@@ -84,7 +84,7 @@
 }
 
 /* Secondary */
-:host > le-component.color-secondary {
+:host(.color-secondary) {
   --_btn-bg: var(--le-color-secondary);
   --_btn-bg-hover: var(--le-color-secondary-dark);
   --_btn-color: var(--le-color-secondary-contrast);
@@ -92,7 +92,7 @@
 }
 
 /* Success */
-:host > le-component.color-success {
+:host(.color-success) {
   --_btn-bg: var(--le-color-success);
   --_btn-bg-hover: var(--le-color-success-dark);
   --_btn-color: var(--le-color-success-contrast);
@@ -100,7 +100,7 @@
 }
 
 /* Warning */
-:host > le-component.color-warning {
+:host(.color-warning) {
   --_btn-bg: var(--le-color-warning);
   --_btn-bg-hover: var(--le-color-warning-dark);
   --_btn-color: var(--le-color-warning-contrast);
@@ -108,7 +108,7 @@
 }
 
 /* Danger */
-:host > le-component.color-danger {
+:host(.color-danger) {
   --_btn-bg: var(--le-color-danger);
   --_btn-bg-hover: var(--le-color-danger-dark);
   --_btn-color: var(--le-color-danger-contrast);
@@ -116,7 +116,7 @@
 }
 
 /* Info */
-:host > le-component.color-info {
+:host(.color-info) {
   --_btn-bg: var(--le-color-info);
   --_btn-bg-hover: var(--le-color-info-dark);
   --_btn-color: var(--le-color-info-contrast);
@@ -128,40 +128,40 @@
  * =========================================== */
 
 /* Solid (default) - already styled by color classes */
-:host > le-component.variant-solid .button {
+:host(.variant-solid) .button {
   box-shadow: var(--le-shadow-sm);
 }
 
-:host > le-component.variant-solid .button:hover:not(:disabled) {
+:host(.variant-solid) .button:hover:not(:disabled) {
   box-shadow: var(--le-shadow-md);
 }
 
 /* Outlined */
-:host > le-component.variant-outlined .button {
+:host(.variant-outlined) .button {
   background: transparent;
   color: var(--_btn-bg);
   border-color: var(--_btn-border-color);
 }
 
-:host > le-component.variant-outlined .button:hover:not(:disabled) {
+:host(.variant-outlined) .button:hover:not(:disabled) {
   background: var(--_btn-bg);
   color: var(--_btn-color);
 }
 
 /* Clear (ghost) */
-:host > le-component.variant-clear .button {
+:host(.variant-clear) .button {
   background: transparent;
   color: var(--_btn-bg);
   border-color: transparent;
 }
 
-:host > le-component.variant-clear .button:hover:not(:disabled) {
+:host(.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 {
+:host(.variant-system) .button {
   background: transparent;
   color: var(--_btn-bg-system);
   border-color: transparent;
@@ -170,14 +170,14 @@
 /* ===========================================
  * SIZES
  * =========================================== */
-:host > le-component.size-small .button {
+:host(.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 {
+:host(.size-large) .button {
   --le-button-padding-x: 0.9rem;
   --le-button-padding-y: 0.6rem;
   --le-button-font-size: var(--le-font-size-xl);
@@ -188,39 +188,39 @@
  * =========================================== */
 
 /* Full width */
-:host > le-component.full-width {
+:host(.full-width) {
   display: block;
   width: 100%;
 }
 
 /* Selected state */
-:host > le-component.selected .button {
+:host(.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 {
+:host(.variant-outlined.selected) .button,
+:host(.variant-clear.selected) .button {
   background: var(--_btn-bg);
   color: var(--_btn-color);
 }
 
 /* Icon only */
-:host > le-component.icon-only .button {
+:host(.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 {
+:host(.icon-only.size-small) .button {
   padding: var(--le-button-small-padding, 0.25rem);
 }
 
-:host > le-component.icon-only.size-large .button {
+:host(.icon-only.size-large) .button {
   padding: 0.75rem;
 }
 
 /* Hide content in icon-only mode */
-:host > le-component.icon-only .content {
+:host(.icon-only) .content {
   display: none;
 }
 

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

@@ -24,28 +24,28 @@
   box-shadow: var(--le-card-shadow);
 }
 
-/* Variants - le-component gets the hostClass, so we use :host > le-component */
-:host > le-component.variant-outlined .card {
+/* Variants - le-component gets the hostClass, so we use :host */
+:host(.variant-outlined) .card {
   border: 1px solid var(--le-card-border-color);
   box-shadow: none;
 }
 
-:host > le-component.variant-elevated .card {
+:host(.variant-elevated) .card {
   box-shadow: var(--le-card-shadow-elevated);
 }
 
 /* Interactive state */
-:host > le-component.interactive .card {
+:host(.interactive) .card {
   cursor: pointer;
   transition: transform var(--le-card-transition), box-shadow var(--le-card-transition);
 }
 
-:host > le-component.interactive .card:hover {
+:host(.interactive) .card:hover {
   transform: translateY(-2px);
   box-shadow: var(--le-card-shadow-hover);
 }
 
-:host > le-component.interactive .card:focus-visible {
+:host(.interactive) .card:focus-visible {
   outline: 2px solid var(--le-color-border-focus);
   outline-offset: 2px;
 }

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

@@ -78,6 +78,6 @@ input::placeholder {
   margin-top: 2px;
 }
 
-.le-input-description::has(le-slot > slot[name=description]:empty) {
+.le-input-description::has(slot[name=description]:empty) {
   display: none;
 }

package/dist/core/esm/le-button.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, i as createEvent, j as getElement, k as h, F as Fragment, H as Host } from './index-PS-3Rz-c.js';
 import { c as classnames } from './utils-lgjSfQP0.js';
 
-const leButtonDefaultCss = ":host{display:inline-block;--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;--_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),\n    border-color var(--le-button-transition) var(--le-transition-easing),\n    box-shadow var(--le-button-transition) var(--le-transition-easing),\n    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}: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)}: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)}: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)}: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)}: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)}: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)}: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)}: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)}: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}:host>le-component.variant-system .button{background:transparent;color:var(--_btn-bg-system);border-color:transparent}: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)}:host>le-component.full-width{display:block;width:100%}: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)}: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}:host>le-component.icon-only .content{display:none}.content{display:inline}.content:empty{display:none}.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}";
+const leButtonDefaultCss = ":host{display:inline-block;--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;--_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),\n    border-color var(--le-button-transition) var(--le-transition-easing),\n    box-shadow var(--le-button-transition) var(--le-transition-easing),\n    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}:host(.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)}:host(.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)}:host(.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)}:host(.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)}:host(.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)}:host(.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)}:host(.variant-solid) .button{box-shadow:var(--le-shadow-sm)}:host(.variant-solid) .button:hover:not(:disabled){box-shadow:var(--le-shadow-md)}:host(.variant-outlined) .button{background:transparent;color:var(--_btn-bg);border-color:var(--_btn-border-color)}:host(.variant-outlined) .button:hover:not(:disabled){background:var(--_btn-bg);color:var(--_btn-color)}:host(.variant-clear) .button{background:transparent;color:var(--_btn-bg);border-color:transparent}:host(.variant-clear) .button:hover:not(:disabled){background:var(--le-color-gray-100);border-color:transparent}:host(.variant-system) .button{background:transparent;color:var(--_btn-bg-system);border-color:transparent}:host(.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(.size-large) .button{--le-button-padding-x:0.9rem;--le-button-padding-y:0.6rem;--le-button-font-size:var(--le-font-size-xl)}:host(.full-width){display:block;width:100%}:host(.selected) .button{box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.2)}:host(.variant-outlined.selected) .button,:host(.variant-clear.selected) .button{background:var(--_btn-bg);color:var(--_btn-color)}:host(.icon-only) .button{padding:0.5rem;padding-bottom:0.6rem;aspect-ratio:var(--le-button-icon-aspect-ratio, 1)}:host(.icon-only.size-small) .button{padding:var(--le-button-small-padding, 0.25rem)}:host(.icon-only.size-large) .button{padding:0.75rem}:host(.icon-only) .content{display:none}.content{display:inline}.content:empty{display:none}.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}";
 
 const LeButton = class {
     constructor(hostRef) {

package/dist/core/esm/le-button.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"le-button.entry.js","sources":["src-core/components/le-button/le-button.default.css?tag=le-button&encapsulation=shadow","src-core/components/le-button/le-button.tsx"],"sourcesContent":["/**\n * Default mode styles for le-button\n * Uses global design tokens with component-specific overrides\n */\n:host {\n  display: inline-block;\n  \n  /* Component-specific tokens */\n  --le-button-border-radius: var(--le-radius-md);\n  --le-button-padding-x: 0.4rem;\n  --le-button-padding-y: 0.4rem;\n  --le-button-small-padding: 0.25rem;\n  --le-button-font-size: var(--le-font-size-md);\n  --le-button-font-weight: var(--le-font-weight-medium);\n  --le-button-transition: var(--le-transition-fast);\n  --le-button-icon-aspect-ratio: 1;\n  \n  /* Internal state variables - set by color classes */\n  --_btn-bg: var(--le-color-primary);\n  --_btn-bg-hover: var(--le-color-primary-dark);\n  --_btn-bg-system: var(--le-color-black);\n  --_btn-color: var(--le-color-primary-contrast);\n  --_btn-border-color: var(--le-color-primary);\n}\n\n:host([full-width]) {\n  display: block;\n  width: 100%;\n}\n\n.button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--le-spacing-3);\n  width: 100%;\n  padding: var(--le-button-padding-y) var(--le-button-padding-x);\n  border: 1px solid var(--_btn-border-color);\n  border-radius: var(--le-button-border-radius);\n  background: var(--_btn-bg);\n  color: var(--_btn-color);\n  font-family: var(--le-font-family-base);\n  font-size: var(--le-button-font-size);\n  font-weight: var(--le-button-font-weight);\n  line-height: var(--le-line-height-tight);\n  text-decoration: none;\n  cursor: pointer;\n  transition: \n    background-color var(--le-button-transition) var(--le-transition-easing),\n    border-color var(--le-button-transition) var(--le-transition-easing),\n    box-shadow var(--le-button-transition) var(--le-transition-easing),\n    transform var(--le-button-transition) var(--le-transition-easing);\n}\n\n.button:hover:not(:disabled) {\n  background: var(--_btn-bg-hover);\n  border-color: var(--_btn-bg-hover);\n}\n\n.button:active:not(:disabled) {\n  transform: translateY(1px);\n}\n\n.button:focus-visible {\n  outline: 2px solid var(--le-color-focus);\n  outline-offset: 2px;\n}\n\n.button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* ===========================================\n * COLOR VARIANTS - Use theme semantic colors\n * =========================================== */\n\n/* Primary (default) */\n:host > le-component.color-primary {\n  --_btn-bg: var(--le-color-primary);\n  --_btn-bg-hover: var(--le-color-primary-dark);\n  --_btn-color: var(--le-color-primary-contrast);\n  --_btn-border-color: var(--le-color-primary);\n}\n\n/* Secondary */\n:host > le-component.color-secondary {\n  --_btn-bg: var(--le-color-secondary);\n  --_btn-bg-hover: var(--le-color-secondary-dark);\n  --_btn-color: var(--le-color-secondary-contrast);\n  --_btn-border-color: var(--le-color-secondary);\n}\n\n/* Success */\n:host > le-component.color-success {\n  --_btn-bg: var(--le-color-success);\n  --_btn-bg-hover: var(--le-color-success-dark);\n  --_btn-color: var(--le-color-success-contrast);\n  --_btn-border-color: var(--le-color-success);\n}\n\n/* Warning */\n:host > le-component.color-warning {\n  --_btn-bg: var(--le-color-warning);\n  --_btn-bg-hover: var(--le-color-warning-dark);\n  --_btn-color: var(--le-color-warning-contrast);\n  --_btn-border-color: var(--le-color-warning);\n}\n\n/* Danger */\n:host > le-component.color-danger {\n  --_btn-bg: var(--le-color-danger);\n  --_btn-bg-hover: var(--le-color-danger-dark);\n  --_btn-color: var(--le-color-danger-contrast);\n  --_btn-border-color: var(--le-color-danger);\n}\n\n/* Info */\n:host > le-component.color-info {\n  --_btn-bg: var(--le-color-info);\n  --_btn-bg-hover: var(--le-color-info-dark);\n  --_btn-color: var(--le-color-info-contrast);\n  --_btn-border-color: var(--le-color-info);\n}\n\n/* ===========================================\n * STYLE VARIANTS\n * =========================================== */\n\n/* Solid (default) - already styled by color classes */\n:host > le-component.variant-solid .button {\n  box-shadow: var(--le-shadow-sm);\n}\n\n:host > le-component.variant-solid .button:hover:not(:disabled) {\n  box-shadow: var(--le-shadow-md);\n}\n\n/* Outlined */\n:host > le-component.variant-outlined .button {\n  background: transparent;\n  color: var(--_btn-bg);\n  border-color: var(--_btn-border-color);\n}\n\n:host > le-component.variant-outlined .button:hover:not(:disabled) {\n  background: var(--_btn-bg);\n  color: var(--_btn-color);\n}\n\n/* Clear (ghost) */\n:host > le-component.variant-clear .button {\n  background: transparent;\n  color: var(--_btn-bg);\n  border-color: transparent;\n}\n\n:host > le-component.variant-clear .button:hover:not(:disabled) {\n  background: var(--le-color-gray-100);\n  border-color: transparent;\n}\n\n/* System (controls without access) */\n:host > le-component.variant-system .button {\n  background: transparent;\n  color: var(--_btn-bg-system);\n  border-color: transparent;\n}\n\n/* ===========================================\n * SIZES\n * =========================================== */\n:host > le-component.size-small .button {\n  --le-button-padding-x: 0.4rem;\n  --le-button-padding-y: 0.3rem;\n  --le-button-padding-top: 0.35rem;\n  --le-button-font-size: var(--le-button-small-font-size, var(--le-font-size-xs));\n}\n\n:host > le-component.size-large .button {\n  --le-button-padding-x: 0.9rem;\n  --le-button-padding-y: 0.6rem;\n  --le-button-font-size: var(--le-font-size-xl);\n}\n\n/* ===========================================\n * STATES & MODIFIERS\n * =========================================== */\n\n/* Full width */\n:host > le-component.full-width {\n  display: block;\n  width: 100%;\n}\n\n/* Selected state */\n:host > le-component.selected .button {\n  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n:host > le-component.variant-outlined.selected .button,\n:host > le-component.variant-clear.selected .button {\n  background: var(--_btn-bg);\n  color: var(--_btn-color);\n}\n\n/* Icon only */\n:host > le-component.icon-only .button {\n  padding: 0.5rem;\n  padding-bottom: 0.6rem;\n  aspect-ratio: var(--le-button-icon-aspect-ratio, 1);\n}\n\n:host > le-component.icon-only.size-small .button {\n  padding: var(--le-button-small-padding, 0.25rem);\n}\n\n:host > le-component.icon-only.size-large .button {\n  padding: 0.75rem;\n}\n\n/* Hide content in icon-only mode */\n:host > le-component.icon-only .content {\n  display: none;\n}\n\n/* ===========================================\n * CONTENT (le-slot wrapper)\n * =========================================== */\n.content {\n  display: inline;\n}\n\n.content:empty {\n  display: none;\n}\n\n/* ===========================================\n * ICON WRAPPERS & SLOTS\n * =========================================== */\n.icon-start,\n.icon-only,\n.icon-end {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.icon-start:empty,\n.icon-only:empty,\n.icon-end:empty {\n  display: none;\n}\n\n::slotted([slot=\"icon-start\"]),\n::slotted([slot=\"icon-only\"]),\n::slotted([slot=\"icon-end\"]) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.125em;\n  height: 1.125em;\n}\n","import { Component, Prop, h, Element, Fragment, Event, EventEmitter , Host } 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      <Host  class={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              \n                <slot></slot>\n              \n              <span class=\"icon-end\">\n                <slot name=\"icon-end\"></slot>\n              </span>\n            </Fragment>\n          )}\n        </TagType>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,kBAAkB,GAAG,q4JAAq4J;;MC2Bn5J,QAAQ,GAAA,MAAA;;;;;;AAGnB;;AAEG;AACqC,IAAA,IAAI;AAE5C;;;AAGG;IACK,OAAO,GAA8C,OAAO;AAEpE;;;AAGG;IACK,KAAK,GAAwE,SAAS;AAE9F;;;AAGG;IACK,IAAI,GAAiC,QAAQ;AAErD;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACsB,SAAS,GAAY,KAAK;AAEnD;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;;AAGG;IACK,IAAI,GAAkC,QAAQ;AAEtD;;AAEG;AACK,IAAA,IAAI;AAEZ;;AAEG;AACK,IAAA,MAAM;AAEd;;;AAGG;AAC4B,IAAA,OAAO;AAE9B,IAAA,WAAW,GAAG,CAAC,KAAmB,KAAI;;QAE5C,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,cAAc,EAAE;YACtB;;;AAIF,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;AAC1B,KAAC;IAED,MAAM,GAAA;QACJ,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,EAAE,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,EAAE,QAAQ,IAAI,CAAC,IAAI,CAAA,CAAE,EAAE;YAChG,UAAU,EAAE,IAAI,CAAC,QAAQ;YACzB,YAAY,EAAE,IAAI,CAAC,SAAS;YAC5B,WAAW,EAAE,IAAI,CAAC,QAAQ;YAC1B,UAAU,EAAE,IAAI,CAAC,QAAQ;AAC1B,SAAA,CAAC;AAEF,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ;AAC1C,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;AAEjI,QAAA,QACE,CAAC,CAAA,IAAI,EAAE,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACnB,CAAA,CAAC,OAAO,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,GAAK,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EACvE,IAAI,CAAC,QAAQ,IACZ,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,YAAY,EAAA,EACtB,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAQ,CAAA,CACzB,KAEP,CAAA,CAAC,QAAQ,EAAA,IAAA,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,YAAY,EAAA,CAAQ,CAC1B,EAEL,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,EAEf,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,UAAU,EAAA,EACpB,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,UAAU,EAAQ,CAAA,CACxB,CACE,CACZ,CACO,CACL;;;;;;;"}
+{"version":3,"file":"le-button.entry.js","sources":["src-core/components/le-button/le-button.default.css?tag=le-button&encapsulation=shadow","src-core/components/le-button/le-button.tsx"],"sourcesContent":["/**\n * Default mode styles for le-button\n * Uses global design tokens with component-specific overrides\n */\n:host {\n  display: inline-block;\n  \n  /* Component-specific tokens */\n  --le-button-border-radius: var(--le-radius-md);\n  --le-button-padding-x: 0.4rem;\n  --le-button-padding-y: 0.4rem;\n  --le-button-small-padding: 0.25rem;\n  --le-button-font-size: var(--le-font-size-md);\n  --le-button-font-weight: var(--le-font-weight-medium);\n  --le-button-transition: var(--le-transition-fast);\n  --le-button-icon-aspect-ratio: 1;\n  \n  /* Internal state variables - set by color classes */\n  --_btn-bg: var(--le-color-primary);\n  --_btn-bg-hover: var(--le-color-primary-dark);\n  --_btn-bg-system: var(--le-color-black);\n  --_btn-color: var(--le-color-primary-contrast);\n  --_btn-border-color: var(--le-color-primary);\n}\n\n:host([full-width]) {\n  display: block;\n  width: 100%;\n}\n\n.button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--le-spacing-3);\n  width: 100%;\n  padding: var(--le-button-padding-y) var(--le-button-padding-x);\n  border: 1px solid var(--_btn-border-color);\n  border-radius: var(--le-button-border-radius);\n  background: var(--_btn-bg);\n  color: var(--_btn-color);\n  font-family: var(--le-font-family-base);\n  font-size: var(--le-button-font-size);\n  font-weight: var(--le-button-font-weight);\n  line-height: var(--le-line-height-tight);\n  text-decoration: none;\n  cursor: pointer;\n  transition: \n    background-color var(--le-button-transition) var(--le-transition-easing),\n    border-color var(--le-button-transition) var(--le-transition-easing),\n    box-shadow var(--le-button-transition) var(--le-transition-easing),\n    transform var(--le-button-transition) var(--le-transition-easing);\n}\n\n.button:hover:not(:disabled) {\n  background: var(--_btn-bg-hover);\n  border-color: var(--_btn-bg-hover);\n}\n\n.button:active:not(:disabled) {\n  transform: translateY(1px);\n}\n\n.button:focus-visible {\n  outline: 2px solid var(--le-color-focus);\n  outline-offset: 2px;\n}\n\n.button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* ===========================================\n * COLOR VARIANTS - Use theme semantic colors\n * =========================================== */\n\n/* Primary (default) */\n:host(.color-primary) {\n  --_btn-bg: var(--le-color-primary);\n  --_btn-bg-hover: var(--le-color-primary-dark);\n  --_btn-color: var(--le-color-primary-contrast);\n  --_btn-border-color: var(--le-color-primary);\n}\n\n/* Secondary */\n:host(.color-secondary) {\n  --_btn-bg: var(--le-color-secondary);\n  --_btn-bg-hover: var(--le-color-secondary-dark);\n  --_btn-color: var(--le-color-secondary-contrast);\n  --_btn-border-color: var(--le-color-secondary);\n}\n\n/* Success */\n:host(.color-success) {\n  --_btn-bg: var(--le-color-success);\n  --_btn-bg-hover: var(--le-color-success-dark);\n  --_btn-color: var(--le-color-success-contrast);\n  --_btn-border-color: var(--le-color-success);\n}\n\n/* Warning */\n:host(.color-warning) {\n  --_btn-bg: var(--le-color-warning);\n  --_btn-bg-hover: var(--le-color-warning-dark);\n  --_btn-color: var(--le-color-warning-contrast);\n  --_btn-border-color: var(--le-color-warning);\n}\n\n/* Danger */\n:host(.color-danger) {\n  --_btn-bg: var(--le-color-danger);\n  --_btn-bg-hover: var(--le-color-danger-dark);\n  --_btn-color: var(--le-color-danger-contrast);\n  --_btn-border-color: var(--le-color-danger);\n}\n\n/* Info */\n:host(.color-info) {\n  --_btn-bg: var(--le-color-info);\n  --_btn-bg-hover: var(--le-color-info-dark);\n  --_btn-color: var(--le-color-info-contrast);\n  --_btn-border-color: var(--le-color-info);\n}\n\n/* ===========================================\n * STYLE VARIANTS\n * =========================================== */\n\n/* Solid (default) - already styled by color classes */\n:host(.variant-solid) .button {\n  box-shadow: var(--le-shadow-sm);\n}\n\n:host(.variant-solid) .button:hover:not(:disabled) {\n  box-shadow: var(--le-shadow-md);\n}\n\n/* Outlined */\n:host(.variant-outlined) .button {\n  background: transparent;\n  color: var(--_btn-bg);\n  border-color: var(--_btn-border-color);\n}\n\n:host(.variant-outlined) .button:hover:not(:disabled) {\n  background: var(--_btn-bg);\n  color: var(--_btn-color);\n}\n\n/* Clear (ghost) */\n:host(.variant-clear) .button {\n  background: transparent;\n  color: var(--_btn-bg);\n  border-color: transparent;\n}\n\n:host(.variant-clear) .button:hover:not(:disabled) {\n  background: var(--le-color-gray-100);\n  border-color: transparent;\n}\n\n/* System (controls without access) */\n:host(.variant-system) .button {\n  background: transparent;\n  color: var(--_btn-bg-system);\n  border-color: transparent;\n}\n\n/* ===========================================\n * SIZES\n * =========================================== */\n:host(.size-small) .button {\n  --le-button-padding-x: 0.4rem;\n  --le-button-padding-y: 0.3rem;\n  --le-button-padding-top: 0.35rem;\n  --le-button-font-size: var(--le-button-small-font-size, var(--le-font-size-xs));\n}\n\n:host(.size-large) .button {\n  --le-button-padding-x: 0.9rem;\n  --le-button-padding-y: 0.6rem;\n  --le-button-font-size: var(--le-font-size-xl);\n}\n\n/* ===========================================\n * STATES & MODIFIERS\n * =========================================== */\n\n/* Full width */\n:host(.full-width) {\n  display: block;\n  width: 100%;\n}\n\n/* Selected state */\n:host(.selected) .button {\n  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n:host(.variant-outlined.selected) .button,\n:host(.variant-clear.selected) .button {\n  background: var(--_btn-bg);\n  color: var(--_btn-color);\n}\n\n/* Icon only */\n:host(.icon-only) .button {\n  padding: 0.5rem;\n  padding-bottom: 0.6rem;\n  aspect-ratio: var(--le-button-icon-aspect-ratio, 1);\n}\n\n:host(.icon-only.size-small) .button {\n  padding: var(--le-button-small-padding, 0.25rem);\n}\n\n:host(.icon-only.size-large) .button {\n  padding: 0.75rem;\n}\n\n/* Hide content in icon-only mode */\n:host(.icon-only) .content {\n  display: none;\n}\n\n/* ===========================================\n * CONTENT (le-slot wrapper)\n * =========================================== */\n.content {\n  display: inline;\n}\n\n.content:empty {\n  display: none;\n}\n\n/* ===========================================\n * ICON WRAPPERS & SLOTS\n * =========================================== */\n.icon-start,\n.icon-only,\n.icon-end {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.icon-start:empty,\n.icon-only:empty,\n.icon-end:empty {\n  display: none;\n}\n\n::slotted([slot=\"icon-start\"]),\n::slotted([slot=\"icon-only\"]),\n::slotted([slot=\"icon-end\"]) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.125em;\n  height: 1.125em;\n}\n","import { Component, Prop, h, Element, Fragment, Event, EventEmitter , Host } 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      <Host  class={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              \n                <slot></slot>\n              \n              <span class=\"icon-end\">\n                <slot name=\"icon-end\"></slot>\n              </span>\n            </Fragment>\n          )}\n        </TagType>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,kBAAkB,GAAG,woJAAwoJ;;MC2BtpJ,QAAQ,GAAA,MAAA;;;;;;AAGnB;;AAEG;AACqC,IAAA,IAAI;AAE5C;;;AAGG;IACK,OAAO,GAA8C,OAAO;AAEpE;;;AAGG;IACK,KAAK,GAAwE,SAAS;AAE9F;;;AAGG;IACK,IAAI,GAAiC,QAAQ;AAErD;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACsB,SAAS,GAAY,KAAK;AAEnD;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;;AAGG;IACK,IAAI,GAAkC,QAAQ;AAEtD;;AAEG;AACK,IAAA,IAAI;AAEZ;;AAEG;AACK,IAAA,MAAM;AAEd;;;AAGG;AAC4B,IAAA,OAAO;AAE9B,IAAA,WAAW,GAAG,CAAC,KAAmB,KAAI;;QAE5C,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,KAAK,CAAC,cAAc,EAAE;YACtB;;;AAIF,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;AAC1B,KAAC;IAED,MAAM,GAAA;QACJ,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,IAAI,CAAC,OAAO,CAAE,CAAA,EAAE,SAAS,IAAI,CAAC,KAAK,CAAE,CAAA,EAAE,QAAQ,IAAI,CAAC,IAAI,CAAA,CAAE,EAAE;YAChG,UAAU,EAAE,IAAI,CAAC,QAAQ;YACzB,YAAY,EAAE,IAAI,CAAC,SAAS;YAC5B,WAAW,EAAE,IAAI,CAAC,QAAQ;YAC1B,UAAU,EAAE,IAAI,CAAC,QAAQ;AAC1B,SAAA,CAAC;AAEF,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ;AAC1C,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE;AAEjI,QAAA,QACE,CAAC,CAAA,IAAI,EAAE,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACnB,CAAA,CAAC,OAAO,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,GAAK,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EACvE,IAAI,CAAC,QAAQ,IACZ,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,YAAY,EAAA,EACtB,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,WAAW,EAAQ,CAAA,CACzB,KAEP,CAAA,CAAC,QAAQ,EAAA,IAAA,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,YAAY,EAAA,CAAQ,CAC1B,EAEL,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,EAEf,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,UAAU,EAAA,EACpB,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,UAAU,EAAQ,CAAA,CACxB,CACE,CACZ,CACO,CACL;;;;;;;"}

package/dist/core/esm/le-card.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, j as getElement, k as h, H as Host } from './index-PS-3Rz-c.js';
 import { c as classnames } from './utils-lgjSfQP0.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 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(.variant-outlined) .card{border:1px solid var(--le-card-border-color);box-shadow:none}:host(.variant-elevated) .card{box-shadow:var(--le-card-shadow-elevated)}:host(.interactive) .card{cursor:pointer;transition:transform var(--le-card-transition), box-shadow var(--le-card-transition)}:host(.interactive) .card:hover{transform:translateY(-2px);box-shadow:var(--le-card-shadow-hover)}:host(.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 = class {
     constructor(hostRef) {

package/dist/core/esm/le-card.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"le-card.entry.js","sources":["src-core/components/le-card/le-card.default.css?tag=le-card&encapsulation=shadow","src-core/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 , Host } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible card component with header, content, and footer slots.\n *\n * The card uses le-slot wrappers for each slot area. In admin mode,\n * le-slot shows placeholders for CMS editing. In default mode,\n * le-slot acts as a transparent passthrough.\n *\n * @slot header - Card header content (title, actions)\n * @slot - Default slot for main card content\n * @slot footer - Card footer content (buttons, links)\n *\n * @cssprop --le-card-bg - Card background color\n * @cssprop --le-card-border-radius - Card border radius\n * @cssprop --le-card-shadow - Card box shadow\n * @cssprop --le-card-padding - Card content padding\n *\n * @csspart card - The main card container\n * @csspart header - The card header section\n * @csspart content - The card content section\n * @csspart footer - The card footer section\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-card',\n  styleUrl: 'le-card.default.css',\n  shadow: true,\n})\nexport class LeCard {\n  @Element() el: HTMLElement;\n\n  /**\n   * Card variant style\n   * @allowedValues default | outlined | elevated\n   */\n  @Prop() variant: 'default' | 'outlined' | 'elevated' = 'default';\n\n  /**\n   * Whether the card is interactive (clickable)\n   */\n  @Prop() interactive: boolean = false;\n\n  render() {\n    return (\n      <Host  class={classnames(`variant-${this.variant}`, { 'interactive': this.interactive })}>\n        <div class=\"card\" part=\"card\">\n          <div class=\"card-header\" part=\"header\">\n            \n              <slot name=\"header\"></slot>\n            \n          </div>\n\n          <div class=\"card-content\" part=\"content\">\n            \n              <slot></slot>\n            \n          </div>\n\n          <div class=\"card-footer\" part=\"footer\">\n            \n              <slot name=\"footer\"></slot>\n            \n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,gBAAgB,GAAG,6wCAA6wC;;MCgCzxC,MAAM,GAAA,MAAA;;;;;AAGjB;;;AAGG;IACK,OAAO,GAAwC,SAAS;AAEhE;;AAEG;IACK,WAAW,GAAY,KAAK;IAEpC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAE,KAAK,EAAE,UAAU,CAAC,WAAW,IAAI,CAAC,OAAO,CAAA,CAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,EAAA,EACtF,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,EAElC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CAEzB,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,SAAS,EAAA,EAEpC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CAEX,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAA,EAElC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAQ,CAEzB,CACF,CACD;;;;;;;"}
+{"version":3,"file":"le-card.entry.js","sources":["src-core/components/le-card/le-card.default.css?tag=le-card&encapsulation=shadow","src-core/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 */\n:host(.variant-outlined) .card {\n  border: 1px solid var(--le-card-border-color);\n  box-shadow: none;\n}\n\n:host(.variant-elevated) .card {\n  box-shadow: var(--le-card-shadow-elevated);\n}\n\n/* Interactive state */\n:host(.interactive) .card {\n  cursor: pointer;\n  transition: transform var(--le-card-transition), box-shadow var(--le-card-transition);\n}\n\n:host(.interactive) .card:hover {\n  transform: translateY(-2px);\n  box-shadow: var(--le-card-shadow-hover);\n}\n\n:host(.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 , Host } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible card component with header, content, and footer slots.\n *\n * The card uses le-slot wrappers for each slot area. In admin mode,\n * le-slot shows placeholders for CMS editing. In default mode,\n * le-slot acts as a transparent passthrough.\n *\n * @slot header - Card header content (title, actions)\n * @slot - Default slot for main card content\n * @slot footer - Card footer content (buttons, links)\n *\n * @cssprop --le-card-bg - Card background color\n * @cssprop --le-card-border-radius - Card border radius\n * @cssprop --le-card-shadow - Card box shadow\n * @cssprop --le-card-padding - Card content padding\n *\n * @csspart card - The main card container\n * @csspart header - The card header section\n * @csspart content - The card content section\n * @csspart footer - The card footer section\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-card',\n  styleUrl: 'le-card.default.css',\n  shadow: true,\n})\nexport class LeCard {\n  @Element() el: HTMLElement;\n\n  /**\n   * Card variant style\n   * @allowedValues default | outlined | elevated\n   */\n  @Prop() variant: 'default' | 'outlined' | 'elevated' = 'default';\n\n  /**\n   * Whether the card is interactive (clickable)\n   */\n  @Prop() interactive: boolean = false;\n\n  render() {\n    return (\n      <Host  class={classnames(`variant-${this.variant}`, { 'interactive': this.interactive })}>\n        <div class=\"card\" part=\"card\">\n          <div class=\"card-header\" part=\"header\">\n            \n              <slot name=\"header\"></slot>\n            \n          </div>\n\n          <div class=\"card-content\" part=\"content\">\n            \n              <slot></slot>\n            \n          </div>\n\n          <div class=\"card-footer\" part=\"footer\">\n            \n              <slot name=\"footer\"></slot>\n            \n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,gBAAgB,GAAG,stCAAstC;;MCgCluC,MAAM,GAAA,MAAA;;;;;AAGjB;;;AAGG;IACK,OAAO,GAAwC,SAAS;AAEhE;;AAEG;IACK,WAAW,GAAY,KAAK;IAEpC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAE,KAAK,EAAE,UAAU,CAAC,WAAW,IAAI,CAAC,OAAO,CAAA,CAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,EAAA,EACtF,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,EAElC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAQ,CAEzB,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,SAAS,EAAA,EAEpC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CAEX,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,EAAA,EAElC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAQ,CAEzB,CACF,CACD;;;;;;;"}

package/dist/core/esm/le-string-input.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, i as createEvent, j as getElement, k as h, H as Host } from './index-PS-3Rz-c.js';
 import { c as classnames } from './utils-lgjSfQP0.js';
 
-const leStringInputCss = ":host{display:block;--le-input-bg:var(--le-color-surface, #ffffff);--le-input-color:var(--le-color-text-primary, #333333);--le-input-border:var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);--le-input-radius:var(--le-radius-sm, 4px);--le-input-padding:2px 6px;--le-input-height:1.5rem;--le-input-label-color:var(--le-color-text-primary, #333333);--le-input-desc-color:var(--le-color-text-secondary, #666666);--le-input-placeholder-color:#999999}.le-input-wrapper{display:flex;flex-direction:column;gap:2px}.le-input-label{display:block;font-size:0.9em;font-weight:500;color:var(--le-input-label-color);margin-bottom:2px}.le-input-container{position:relative;display:flex;align-items:center;background:var(--le-input-bg);border:var(--le-input-border);border-radius:var(--le-input-radius);transition:border-color 0.2s}.le-input-container:focus-within{outline:2px solid var(--le-color-focus);outline-offset:2px}:host([disabled]) .le-input-container{opacity:0.6;background-color:rgba(0,0,0,0.05);cursor:not-allowed}input{flex:1;min-height:var(--le-input-height);padding:var(--le-input-padding);border:none;background:transparent;color:var(--le-input-color);font-family:inherit;font-size:inherit;outline:none;width:100%}input::placeholder{color:var(--le-input-placeholder-color)}.icon-start,.icon-end{display:flex;align-items:center;justify-content:center;padding:0 8px;color:var(--le-input-desc-color)}.le-input-description{font-size:0.85em;color:var(--le-input-desc-color);margin-top:2px}.le-input-description::has(le-slot>slot[name=description]:empty){display:none}";
+const leStringInputCss = ":host{display:block;--le-input-bg:var(--le-color-surface, #ffffff);--le-input-color:var(--le-color-text-primary, #333333);--le-input-border:var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);--le-input-radius:var(--le-radius-sm, 4px);--le-input-padding:2px 6px;--le-input-height:1.5rem;--le-input-label-color:var(--le-color-text-primary, #333333);--le-input-desc-color:var(--le-color-text-secondary, #666666);--le-input-placeholder-color:#999999}.le-input-wrapper{display:flex;flex-direction:column;gap:2px}.le-input-label{display:block;font-size:0.9em;font-weight:500;color:var(--le-input-label-color);margin-bottom:2px}.le-input-container{position:relative;display:flex;align-items:center;background:var(--le-input-bg);border:var(--le-input-border);border-radius:var(--le-input-radius);transition:border-color 0.2s}.le-input-container:focus-within{outline:2px solid var(--le-color-focus);outline-offset:2px}:host([disabled]) .le-input-container{opacity:0.6;background-color:rgba(0,0,0,0.05);cursor:not-allowed}input{flex:1;min-height:var(--le-input-height);padding:var(--le-input-padding);border:none;background:transparent;color:var(--le-input-color);font-family:inherit;font-size:inherit;outline:none;width:100%}input::placeholder{color:var(--le-input-placeholder-color)}.icon-start,.icon-end{display:flex;align-items:center;justify-content:center;padding:0 8px;color:var(--le-input-desc-color)}.le-input-description{font-size:0.85em;color:var(--le-input-desc-color);margin-top:2px}.le-input-description::has(slot[name=description]:empty){display:none}";
 
 const LeStringInput = class {
     constructor(hostRef) {