le-kit 0.1.14 → 0.1.15

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var index = require('./index-C3iQZ-Ja.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await index.globalScripts();
+  return index.bootstrapLazy([["le-button_7.cjs",[[769,"le-button",{"mode":[1537],"variant":[1],"color":[1],"size":[1],"selected":[4],"fullWidth":[516,"full-width"],"iconOnly":[1,"icon-only"],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"disabled":[4],"type":[1],"href":[1],"target":[1],"align":[1]}],[769,"le-checkbox",{"checked":[1540],"disabled":[4],"name":[1],"value":[1],"externalId":[1,"external-id"]}],[769,"le-component",{"component":[1],"displayName":[1,"display-name"],"hostClass":[1,"host-class"],"hostStyle":[16],"adminMode":[32],"componentMeta":[32],"propertyValues":[32]}],[769,"le-popup",{"mode":[1537],"open":[1540],"type":[1],"popupTitle":[1,"popup-title"],"message":[1],"modal":[4],"position":[1],"confirmText":[1,"confirm-text"],"cancelText":[1,"cancel-text"],"placeholder":[1],"defaultValue":[1,"default-value"],"closeOnBackdrop":[4,"close-on-backdrop"],"inputValue":[32],"show":[64],"hide":[64]}],[769,"le-slot",{"type":[1],"name":[1],"label":[1],"description":[1],"allowedComponents":[1,"allowed-components"],"multiple":[4],"required":[4],"placeholder":[1],"tag":[1],"slotStyle":[1,"slot-style"],"adminMode":[32],"textValue":[32],"isValidHtml":[32],"availableComponents":[32],"pickerOpen":[32]}],[769,"le-string-input",{"inputRef":[16],"mode":[1537],"value":[1537],"name":[1],"type":[1],"label":[1],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"placeholder":[1],"hideDescription":[4,"hide-description"],"disabled":[4],"readonly":[4],"externalId":[1,"external-id"]}],[769,"le-popover",{"mode":[1537],"open":[1540],"position":[1],"align":[1],"popoverTitle":[1,"popover-title"],"showClose":[4,"show-close"],"closeOnClickOutside":[4,"close-on-click-outside"],"closeOnEscape":[4,"close-on-escape"],"offset":[2],"width":[1],"minWidth":[1,"min-width"],"maxWidth":[1,"max-width"],"triggerFullWidth":[4,"trigger-full-width"],"isPositioned":[32],"updatePosition":[64],"show":[64],"hide":[64],"toggle":[64]}]]],["le-multiselect.cjs",[[769,"le-multiselect",{"options":[1],"value":[1040],"placeholder":[1],"disabled":[516],"required":[4],"name":[1],"fullWidth":[516,"full-width"],"size":[513],"maxSelections":[2,"max-selections"],"showSelectAll":[1032,"show-select-all"],"searchable":[4],"emptyText":[1,"empty-text"],"open":[1540],"selectAllLabel":[32],"deselectAllLabel":[32],"selectedOptions":[32],"searchQuery":[32],"showDropdown":[64],"hideDropdown":[64],"clearSelection":[64]},null,{"value":["handleValueChange"],"options":["handleOptionsChange"],"showSelectAll":["handleShowSelectAllChange"]}]]],["le-combobox.cjs",[[769,"le-combobox",{"options":[1],"value":[1032],"placeholder":[1],"disabled":[516],"required":[4],"name":[1],"fullWidth":[516,"full-width"],"size":[513],"allowCustom":[4,"allow-custom"],"minSearchLength":[2,"min-search-length"],"emptyText":[1,"empty-text"],"open":[1540],"inputValue":[32],"selectedOption":[32],"showDropdown":[64],"hideDropdown":[64],"focusInput":[64]},[[8,"click","handleWindowClick"]],{"value":["handleValueChange"],"options":["handleOptionsChange"]}]]],["le-segmented-control.cjs",[[769,"le-segmented-control",{"options":[16],"value":[1032],"size":[1],"overflow":[1],"fullWidth":[4,"full-width"],"disabled":[4],"segmentConfigs":[32],"focusedIndex":[32],"isDeclarativeMode":[32]},[[0,"slotchange","handleSlotChange"]],{"options":["tabsChanged"]}]]],["le-select.cjs",[[769,"le-select",{"options":[1],"value":[1032],"placeholder":[1],"disabled":[516],"required":[4],"name":[1],"fullWidth":[4,"full-width"],"size":[513],"variant":[513],"searchable":[4],"emptyText":[1,"empty-text"],"open":[1540],"selectedOption":[32],"searchQuery":[32],"showDropdown":[64],"hideDropdown":[64]},null,{"value":["handleValueChange"],"options":["handleOptionsChange"]}]]],["le-tab-bar.cjs",[[769,"le-tab-bar",{"tabs":[16],"selected":[1032],"fullWidth":[4,"full-width"],"showLabels":[4,"show-labels"],"position":[1],"size":[1],"bordered":[4],"tabConfigs":[32],"isDeclarativeMode":[32],"focusedIndex":[32]},[[0,"slotchange","handleSlotChange"]],{"selected":["selectedChanged"],"tabs":["tabsChanged"]}]]],["le-tabs.cjs",[[769,"le-tabs",{"tabs":[16],"selected":[1032],"orientation":[1],"position":[1],"variant":[1],"fullWidth":[4,"full-width"],"size":[1],"wrap":[4],"overflow":[1],"tabConfigs":[32],"focusedIndex":[32],"isDeclarativeMode":[32]},[[0,"slotchange","handleSlotChange"]],{"selected":["selectedChanged"],"tabs":["tabsChanged"]}]]],["le-box.cjs",[[769,"le-box",{"grow":[2],"shrink":[2],"basis":[1],"width":[1],"height":[1],"minWidth":[1,"min-width"],"maxWidth":[1,"max-width"],"minHeight":[1,"min-height"],"maxHeight":[1,"max-height"],"background":[1],"borderRadius":[1,"border-radius"],"border":[1],"alignSelf":[1,"align-self"],"alignContent":[1,"align-content"],"justifyContent":[1,"justify-content"],"padding":[1],"order":[2],"displayFlex":[4,"display-flex"],"innerDirection":[1,"inner-direction"],"innerGap":[1,"inner-gap"]}]]],["le-card.cjs",[[769,"le-card",{"variant":[1],"interactive":[4]}]]],["le-number-input.cjs",[[769,"le-number-input",{"value":[1538],"name":[1],"label":[1],"placeholder":[1],"min":[2],"max":[2],"step":[2],"required":[4],"disabled":[4],"readonly":[4],"iconStart":[1,"icon-start"],"showSpinners":[4,"show-spinners"],"externalId":[1,"external-id"],"isValid":[32],"validationMessage":[32]},null,{"value":["valueChanged"]}]]],["le-stack.cjs",[[769,"le-stack",{"direction":[1],"gap":[1],"align":[1],"justify":[1],"wrap":[4],"alignContent":[1,"align-content"],"reverse":[4],"maxItems":[2,"max-items"],"fullWidth":[4,"full-width"],"fullHeight":[4,"full-height"],"padding":[1]}]]],["le-tab-panel.cjs",[[769,"le-tab-panel",{"label":[1],"value":[1],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"disabled":[4],"lazy":[4],"active":[32],"hasBeenActive":[32],"getValue":[64],"getTabConfig":[64],"setActive":[64]},null,{"active":["activeChanged"]}]]],["le-text.cjs",[[769,"le-text",{"variant":[1537],"align":[513],"color":[1],"truncate":[4],"maxLines":[2,"max-lines"],"adminMode":[32],"content":[32],"isFocused":[32],"selectionState":[32]},null,{"variant":["onVariantChange"]}]]],["le-round-progress.cjs",[[769,"le-round-progress",{"value":[2],"padding":[2],"paths":[1],"params":[32]},null,{"value":["updateValue"],"padding":["updatePadding"],"paths":["updateProgressBackgrounds"]}]]],["le-turntable.cjs",[[769,"le-turntable",{"center":[1],"value":[2]},[[9,"mousemove","handleMouseMove"],[9,"mouseup","handleMouseUp"],[9,"resize","handleWindowResize"]],{"value":["updateValue"]}]]],["le-tag.cjs",[[769,"le-tag",{"label":[1],"mode":[1537],"icon":[1],"dismissible":[4],"disabled":[516],"size":[513],"variant":[513]}]]],["le-tab.cjs",[[769,"le-tab",{"mode":[1537],"label":[1],"value":[1],"variant":[1],"position":[1],"size":[1],"focusable":[4],"selected":[4],"fullWidth":[516,"full-width"],"icon":[1],"showLabel":[4,"show-label"],"iconStart":[1,"icon-start"],"iconEnd":[1,"icon-end"],"disabled":[4],"href":[1],"target":[1],"align":[1],"getTabConfig":[64]}]]],["le-dropdown-base.cjs",[[769,"le-dropdown-base",{"options":[16],"value":[8],"multiple":[4],"open":[1540],"disabled":[516],"filterFn":[16],"filterQuery":[1,"filter-query"],"emptyText":[1,"empty-text"],"showCheckboxes":[4,"show-checkboxes"],"maxHeight":[1,"max-height"],"width":[1],"fullWidth":[4,"full-width"],"closeOnClickOutside":[4,"close-on-click-outside"],"focusedIndex":[32],"filteredOptions":[32],"show":[64],"hide":[64],"toggle":[64]},null,{"options":["handleOptionsChange"],"filterQuery":["handleOptionsChange"]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;
+//# sourceMappingURL=loader.cjs.js.map

package/dist/{core/cjs/utils-jdqP71LP.js → cjs/utils-DjPcLPN9.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B0mg71He.js');
+var index = require('./index-C3iQZ-Ja.js');
 
 /**
  * Utility functions for le-kit components
@@ -147,6 +147,6 @@ exports.generateId = generateId;
 exports.observeModeChanges = observeModeChanges;
 exports.parseCommaSeparated = parseCommaSeparated;
 exports.slotHasContent = slotHasContent;
-//# sourceMappingURL=utils-jdqP71LP.js.map
+//# sourceMappingURL=utils-DjPcLPN9.js.map
 
-//# sourceMappingURL=utils-jdqP71LP.js.map
+//# sourceMappingURL=utils-DjPcLPN9.js.map

package/dist/cjs/utils-DjPcLPN9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils-DjPcLPN9.js","sources":["src/utils/utils.ts"],"sourcesContent":["/**\n * Utility functions for le-kit components\n */\n\nimport { getMode } from '../global/app';\n\n/**\n * Generates a unique ID for component instances\n */\nexport function generateId(prefix: string = 'le'): string {\n  return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n}\n\n/**\n * Parses a comma-separated string into an array\n */\nexport function parseCommaSeparated(value: string | undefined): string[] {\n  if (!value) return [];\n  return value\n    .split(',')\n    .map(s => s.trim())\n    .filter(Boolean);\n}\n\n/**\n * Checks if a slot has content\n */\nexport function slotHasContent(el: HTMLElement, slotName: string = ''): boolean {\n  const selector = slotName ? `[slot=\"${slotName}\"]` : ':not([slot])';\n  return el.querySelector(selector) !== null;\n}\n\n/**\n * Sets up a MutationObserver to track mode changes on ancestor elements.\n * Returns a cleanup function to disconnect the observer.\n * \n * If the element or any ancestor has an explicit `mode` attribute, that creates\n * a \"mode boundary\" - the mode is determined from that point, not from further up.\n * This allows components like le-popover to force default mode for their children.\n * \n * @param el - The component's host element\n * @param callback - Function to call when mode changes, receives the new mode\n * @returns Cleanup function to disconnect the observer\n * \n * @example\n * ```tsx\n * export class MyComponent {\n *   @Element() el: HTMLElement;\n *   @State() adminMode: boolean = false;\n *   private disconnectModeObserver?: () => void;\n * \n *   connectedCallback() {\n *     this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {\n *       this.adminMode = mode === 'admin';\n *     });\n *   }\n * \n *   disconnectedCallback() {\n *     this.disconnectModeObserver?.();\n *   }\n * }\n * ```\n */\nexport function observeModeChanges(\n  el: HTMLElement,\n  callback: (mode: string) => void\n): () => void {\n  // Call immediately with current mode\n  callback(getMode(el));\n\n  // Set up observer for mode attribute changes\n  const observer = new MutationObserver(() => {\n    callback(getMode(el));\n  });\n\n  // Observe the element itself (for mode boundary changes)\n  observer.observe(el, {\n    attributes: true,\n    attributeFilter: ['mode'],\n  });\n\n  // Observe document root\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: ['mode'],\n  });\n\n  // Traverse up, crossing shadow boundaries, and observe each element\n  let current: Node | null = el;\n  while (current) {\n    if (current instanceof Element && current.parentElement) {\n      current = current.parentElement;\n      observer.observe(current, {\n        attributes: true,\n        attributeFilter: ['mode'],\n      });\n      // If this element has an explicit mode, it's a boundary\n      if ((current as Element).hasAttribute('mode')) {\n        break;\n      }\n    } else {\n      // Check if we're in a shadow root\n      const root = current.getRootNode();\n      if (root instanceof ShadowRoot) {\n        // Cross the shadow boundary and observe the host\n        current = root.host;\n        observer.observe(current, {\n          attributes: true,\n          attributeFilter: ['mode'],\n        });\n        // If the host has an explicit mode, it's a boundary\n        if ((current as Element).hasAttribute('mode')) {\n          break;\n        }\n      } else {\n        break;\n      }\n    }\n  }\n\n  // Return cleanup function\n  return () => observer.disconnect();\n}\n\n/**\n * Combines multiple class names into a single string, filtering out falsy values.\n * \n * @param classes - arguments of class names, undefined, arrays, objects with boolean values and nested combinations of these\n * @returns Combined class names string\n */\nexport function classnames(...classes: any[]): string {\n  const result: string[] = [];\n\n  classes.forEach(cls => {\n    if (!cls) return;\n\n    if (typeof cls === 'string') {\n      result.push(cls);\n    } else if (Array.isArray(cls)) {\n      result.push(classnames(...cls));\n    } else if (typeof cls === 'object') {\n      Object.entries(cls).forEach(([key, value]) => {\n        if (value) {\n          result.push(key);\n        }\n      });\n    }\n  });\n\n  return result.join(' ');\n}\n"],"names":["getMode"],"mappings":";;;;AAAA;;AAEG;AAIH;;AAEG;AACa,SAAA,UAAU,CAAC,MAAA,GAAiB,IAAI,EAAA;IAC9C,OAAO,CAAA,EAAG,MAAM,CAAI,CAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE;AAClE;AAEA;;AAEG;AACG,SAAU,mBAAmB,CAAC,KAAyB,EAAA;AAC3D,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,EAAE;AACrB,IAAA,OAAO;SACJ,KAAK,CAAC,GAAG;SACT,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE;SACjB,MAAM,CAAC,OAAO,CAAC;AACpB;AAEA;;AAEG;SACa,cAAc,CAAC,EAAe,EAAE,WAAmB,EAAE,EAAA;AACnE,IAAA,MAAM,QAAQ,GAAG,QAAQ,GAAG,CAAU,OAAA,EAAA,QAAQ,CAAI,EAAA,CAAA,GAAG,cAAc;IACnE,OAAO,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,IAAI;AAC5C;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BG;AACa,SAAA,kBAAkB,CAChC,EAAe,EACf,QAAgC,EAAA;;AAGhC,IAAA,QAAQ,CAACA,aAAO,CAAC,EAAE,CAAC,CAAC;;AAGrB,IAAA,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,MAAK;AACzC,QAAA,QAAQ,CAACA,aAAO,CAAC,EAAE,CAAC,CAAC;AACvB,KAAC,CAAC;;AAGF,IAAA,QAAQ,CAAC,OAAO,CAAC,EAAE,EAAE;AACnB,QAAA,UAAU,EAAE,IAAI;QAChB,eAAe,EAAE,CAAC,MAAM,CAAC;AAC1B,KAAA,CAAC;;AAGF,IAAA,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,EAAE;AACzC,QAAA,UAAU,EAAE,IAAI;QAChB,eAAe,EAAE,CAAC,MAAM,CAAC;AAC1B,KAAA,CAAC;;IAGF,IAAI,OAAO,GAAgB,EAAE;IAC7B,OAAO,OAAO,EAAE;QACd,IAAI,OAAO,YAAY,OAAO,IAAI,OAAO,CAAC,aAAa,EAAE;AACvD,YAAA,OAAO,GAAG,OAAO,CAAC,aAAa;AAC/B,YAAA,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE;AACxB,gBAAA,UAAU,EAAE,IAAI;gBAChB,eAAe,EAAE,CAAC,MAAM,CAAC;AAC1B,aAAA,CAAC;;AAEF,YAAA,IAAK,OAAmB,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;gBAC7C;;;aAEG;;AAEL,YAAA,MAAM,IAAI,GAAG,OAAO,CAAC,WAAW,EAAE;AAClC,YAAA,IAAI,IAAI,YAAY,UAAU,EAAE;;AAE9B,gBAAA,OAAO,GAAG,IAAI,CAAC,IAAI;AACnB,gBAAA,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE;AACxB,oBAAA,UAAU,EAAE,IAAI;oBAChB,eAAe,EAAE,CAAC,MAAM,CAAC;AAC1B,iBAAA,CAAC;;AAEF,gBAAA,IAAK,OAAmB,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;oBAC7C;;;iBAEG;gBACL;;;;;AAMN,IAAA,OAAO,MAAM,QAAQ,CAAC,UAAU,EAAE;AACpC;AAEA;;;;;AAKG;AACa,SAAA,UAAU,CAAC,GAAG,OAAc,EAAA;IAC1C,MAAM,MAAM,GAAa,EAAE;AAE3B,IAAA,OAAO,CAAC,OAAO,CAAC,GAAG,IAAG;AACpB,QAAA,IAAI,CAAC,GAAG;YAAE;AAEV,QAAA,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;AAC3B,YAAA,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;;AACX,aAAA,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC7B,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,GAAG,CAAC,CAAC;;AAC1B,aAAA,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;AAClC,YAAA,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,KAAI;gBAC3C,IAAI,KAAK,EAAE;AACT,oBAAA,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;;AAEpB,aAAC,CAAC;;AAEN,KAAC,CAAC;AAEF,IAAA,OAAO,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;AACzB;;;;;;;;"}

package/dist/{core/collection → collection}/collection-manifest.json

@@ -5,11 +5,23 @@
     "components/le-button/le-button.js",
     "components/le-card/le-card.js",
     "components/le-checkbox/le-checkbox.js",
+    "components/le-combobox/le-combobox.js",
+    "components/le-component/le-component.js",
+    "components/le-dropdown-base/le-dropdown-base.js",
+    "components/le-multiselect/le-multiselect.js",
     "components/le-number-input/le-number-input.js",
     "components/le-popover/le-popover.js",
     "components/le-round-progress/le-round-progress.js",
+    "components/le-segmented-control/le-segmented-control.js",
+    "components/le-select/le-select.js",
+    "components/le-slot/le-slot.js",
     "components/le-stack/le-stack.js",
     "components/le-string-input/le-string-input.js",
+    "components/le-tab/le-tab.js",
+    "components/le-tab-bar/le-tab-bar.js",
+    "components/le-tab-panel/le-tab-panel.js",
+    "components/le-tabs/le-tabs.js",
+    "components/le-tag/le-tag.js",
     "components/le-text/le-text.js",
     "components/le-turntable/le-turntable.js"
   ],

package/dist/{core/collection → collection}/components/le-box/le-box.js

@@ -185,7 +185,7 @@ export class LeBox {
             'display-flex': this.displayFlex,
             [`inner-${this.innerDirection}`]: this.displayFlex,
         });
-        return (h(Host, { key: '8a8db08fe79a0d6e135ea788a7447060b746bdc2', style: hostStyle, class: hostClass }, h("div", { key: 'c3b5aa4e4135d957c3a55bf4f76cadb395c6bb5b', class: "box", part: "box" }, h("div", { key: 'eebba217d0026a00d71541a898200445d5966393', class: "content", part: "content", style: contentStyle }, h("slot", { key: '7ebf91579244542495d5e7a01540ba61fb7aa080' })))));
+        return (h(Host, { key: '8d71daaa3a1f34cf1b5fa3afe4f788d974d14dde', style: hostStyle, class: hostClass }, h("le-component", { key: '350393fef2159c40de43792502545ba93e0ec84c', component: "le-box" }, h("div", { key: '425be85bce62b600a383e164a847a2f0622496bd', class: "box", part: "box" }, h("div", { key: '104275e435d64a76428b5934aa0ece7ae3284cd8', class: "content", part: "content", style: contentStyle }, h("le-slot", { key: '7655d6bd5140ffcac514b266b4ca2f790a44e8ae', name: "", description: "Content inside this flex item", type: "slot", "allowed-components": "le-text,le-card,le-button,le-stack,le-box" }, h("slot", { key: '47efcfcc9b9efe5283fa8f558026b3b13ea5b959' })))))));
     }
     static get is() { return "le-box"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -7,19 +7,22 @@
   
   /* Component-specific tokens */
   --le-button-border-radius: var(--le-radius-md);
-  --le-button-padding-x: 0.4rem;
-  --le-button-padding-y: 0.4rem;
+  --le-button-padding-x: var(--le-spacing-3);
+  --le-button-padding-y: var(--le-spacing-1);
+  --le-button-padding: var(--le-button-padding-y) var(--le-button-padding-x);
   --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-transition-easing: ease-in-out;
   --le-button-icon-aspect-ratio: 1;
+  --le-button-color: var(--le-color-primary-contrast);
   
   /* Internal state variables - set by color classes */
   --_btn-bg: var(--le-color-primary);
   --_btn-bg-hover: var(--le-color-primary-dark);
   --_btn-bg-system: var(--le-color-black);
-  --_btn-color: var(--le-color-primary-contrast);
+  --_btn-color: var(--le-button-color);
   --_btn-border-color: var(--le-color-primary);
 }
 
@@ -28,13 +31,14 @@
   width: 100%;
 }
 
-.button {
+.le-button-container {
   display: inline-flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
   gap: var(--le-spacing-3);
   width: 100%;
-  padding: var(--le-button-padding-y) var(--le-button-padding-x);
+  padding: var(--le-button-padding);
   border: 1px solid var(--_btn-border-color);
   border-radius: var(--le-button-border-radius);
   background: var(--_btn-bg);
@@ -52,39 +56,47 @@
     transform var(--le-button-transition) var(--le-transition-easing);
 }
 
-.button:hover:not(:disabled) {
+.le-button-container:hover:not(:disabled) {
   background: var(--_btn-bg-hover);
   border-color: var(--_btn-bg-hover);
 }
 
-.button:active:not(:disabled) {
-  transform: translateY(1px);
+.le-button-container:active:not(:disabled) {
+  box-shadow: inset 0 0 6px var(--le-color-shadow);
 }
 
-.button:focus-visible {
+.le-button-container:focus-visible {
   outline: 2px solid var(--le-color-focus);
   outline-offset: 2px;
 }
 
-.button:disabled {
+.le-button-container:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
+.le-button-label {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--le-spacing-2);
+}
+
 /* ===========================================
  * COLOR VARIANTS - Use theme semantic colors
  * =========================================== */
 
 /* Primary (default) */
-:host(.color-primary) {
+: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-color: var(--le-button-color);
   --_btn-border-color: var(--le-color-primary);
 }
 
 /* Secondary */
-:host(.color-secondary) {
+:host > le-component.color-secondary {
   --_btn-bg: var(--le-color-secondary);
   --_btn-bg-hover: var(--le-color-secondary-dark);
   --_btn-color: var(--le-color-secondary-contrast);
@@ -92,7 +104,7 @@
 }
 
 /* Success */
-:host(.color-success) {
+:host > le-component.color-success {
   --_btn-bg: var(--le-color-success);
   --_btn-bg-hover: var(--le-color-success-dark);
   --_btn-color: var(--le-color-success-contrast);
@@ -100,7 +112,7 @@
 }
 
 /* Warning */
-:host(.color-warning) {
+:host > le-component.color-warning {
   --_btn-bg: var(--le-color-warning);
   --_btn-bg-hover: var(--le-color-warning-dark);
   --_btn-color: var(--le-color-warning-contrast);
@@ -108,7 +120,7 @@
 }
 
 /* Danger */
-:host(.color-danger) {
+:host > le-component.color-danger {
   --_btn-bg: var(--le-color-danger);
   --_btn-bg-hover: var(--le-color-danger-dark);
   --_btn-color: var(--le-color-danger-contrast);
@@ -116,7 +128,7 @@
 }
 
 /* Info */
-:host(.color-info) {
+:host > le-component.color-info {
   --_btn-bg: var(--le-color-info);
   --_btn-bg-hover: var(--le-color-info-dark);
   --_btn-color: var(--le-color-info-contrast);
@@ -128,40 +140,39 @@
  * =========================================== */
 
 /* Solid (default) - already styled by color classes */
-:host(.variant-solid) .button {
+:host > le-component.variant-solid .le-button-container {
   box-shadow: var(--le-shadow-sm);
 }
 
-:host(.variant-solid) .button:hover:not(:disabled) {
+:host > le-component.variant-solid .le-button-container:hover:not(:disabled) {
   box-shadow: var(--le-shadow-md);
 }
 
 /* Outlined */
-:host(.variant-outlined) .button {
+:host > le-component.variant-outlined .le-button-container {
   background: transparent;
   color: var(--_btn-bg);
-  border-color: var(--_btn-border-color);
+  border-color: color-mix(in srgb, var(--_btn-border-color) 33%, transparent);
 }
 
-:host(.variant-outlined) .button:hover:not(:disabled) {
-  background: var(--_btn-bg);
-  color: var(--_btn-color);
+:host > le-component.variant-outlined .le-button-container:hover:not(:disabled) {
+  border-color: var(--_btn-border-color);
 }
 
 /* Clear (ghost) */
-:host(.variant-clear) .button {
+:host > le-component.variant-clear .le-button-container {
   background: transparent;
   color: var(--_btn-bg);
   border-color: transparent;
 }
 
-:host(.variant-clear) .button:hover:not(:disabled) {
+:host > le-component.variant-clear .le-button-container:hover:not(:disabled) {
   background: var(--le-color-gray-100);
   border-color: transparent;
 }
 
 /* System (controls without access) */
-:host(.variant-system) .button {
+:host > le-component.variant-system .le-button-container {
   background: transparent;
   color: var(--_btn-bg-system);
   border-color: transparent;
@@ -170,14 +181,14 @@
 /* ===========================================
  * SIZES
  * =========================================== */
-:host(.size-small) .button {
+:host > le-component.size-small .le-button-container {
   --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 {
+:host > le-component.size-large .le-button-container {
   --le-button-padding-x: 0.9rem;
   --le-button-padding-y: 0.6rem;
   --le-button-font-size: var(--le-font-size-xl);
@@ -188,39 +199,39 @@
  * =========================================== */
 
 /* Full width */
-:host(.full-width) {
+:host > le-component.full-width {
   display: block;
   width: 100%;
 }
 
 /* Selected state */
-:host(.selected) .button {
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
+:host > le-component.selected .le-button-container {
+  box-shadow: inset 0 0 4px var(--le-color-shadow);
 }
 
-:host(.variant-outlined.selected) .button,
-:host(.variant-clear.selected) .button {
+:host > le-component.variant-outlined.selected .le-button-container,
+:host > le-component.variant-clear.selected .le-button-container {
   background: var(--_btn-bg);
   color: var(--_btn-color);
 }
 
 /* Icon only */
-:host(.icon-only) .button {
+:host > le-component.icon-only .le-button-container {
   padding: 0.5rem;
   padding-bottom: 0.6rem;
   aspect-ratio: var(--le-button-icon-aspect-ratio, 1);
 }
 
-:host(.icon-only.size-small) .button {
+:host > le-component.icon-only.size-small .le-button-container {
   padding: var(--le-button-small-padding, 0.25rem);
 }
 
-:host(.icon-only.size-large) .button {
+:host > le-component.icon-only.size-large .le-button-container {
   padding: 0.75rem;
 }
 
 /* Hide content in icon-only mode */
-:host(.icon-only) .content {
+:host > le-component.icon-only .content {
   display: none;
 }
 
@@ -261,3 +272,19 @@
   width: 1.125em;
   height: 1.125em;
 }
+
+/* ===========================================
+ * ALIGNMENT MODIFIERS
+ * =========================================== */
+.le-button-align-start {
+  justify-content: flex-start;
+}
+.le-button-align-center {
+  justify-content: center;
+}
+.le-button-align-space-between {
+  justify-content: space-between;
+}
+.le-button-align-end {
+  justify-content: flex-end;
+}

package/dist/{core/collection → collection}/components/le-button/le-button.js

@@ -1,11 +1,10 @@
-import { h, Fragment, Host } from "@stencil/core";
+import { h, Fragment } from "@stencil/core";
 import { classnames } from "../../utils/utils";
 /**
  * A flexible button component with multiple variants and states.
  *
  * @slot - Button text content
- * @slot icon-start - Icon before the text
- * @slot icon-end - Icon after the text
+ * @slot icon-only - Icon for icon-only buttons
  *
  * @cssprop --le-button-bg - Button background color
  * @cssprop --le-button-color - Button text color
@@ -15,6 +14,8 @@ import { classnames } from "../../utils/utils";
  *
  * @csspart button - The native button element
  * @csspart content - The button content wrapper
+ * @csspart icon-start - The start icon slot
+ * @csspart icon-end - The end icon slot
  *
  * @cmsEditable true
  * @cmsCategory Actions
@@ -49,9 +50,18 @@ export class LeButton {
      */
     fullWidth = false;
     /**
-     * Whether the button displays only an icon (square aspect ratio)
+     * Icon only button image or emoji
+     * if this prop is set, the button will render only the icon slot
      */
-    iconOnly = false;
+    iconOnly;
+    /**
+     * Start icon image or emoji
+     */
+    iconStart;
+    /**
+     * End icon image or emoji
+     */
+    iconEnd;
     /**
      * Whether the button is disabled
      */
@@ -69,6 +79,11 @@ export class LeButton {
      * Link target when href is set
      */
     target;
+    /**
+     * Alignment of the button label without the end icon
+     * @allowedValues start | center | space-between | end
+     */
+    align = 'center';
     /**
      * Emitted when the button is clicked.
      * This is a custom event that wraps the native click but ensures the target is the le-button.
@@ -93,18 +108,18 @@ export class LeButton {
         });
         const TagType = this.href ? 'a' : 'button';
         const attrs = this.href ? { href: this.href, target: this.target, role: 'button' } : { type: this.type, disabled: this.disabled };
-        return (h(Host, { key: 'b33f47d87026e4b76837f8ae9f7d51d22d1f86d9', class: classes }, h(TagType, { key: 'ad711cfb6c04e258761db1f724fdef2a67d91933', class: "button", part: "button", ...attrs, onClick: this.handleClick }, this.iconOnly ? (h("span", { class: "icon-start" }, h("slot", { name: "icon-only" }))) : (h(Fragment, null, h("span", { class: "icon-start" }, h("slot", { name: "icon-start" })), h("slot", null), h("span", { class: "icon-end" }, h("slot", { name: "icon-end" })))))));
+        return (h("le-component", { key: 'bf247365c4ceeaccdb05cbbb17604265f1608fa4', component: "le-button", hostClass: classes }, h(TagType, { key: 'a01540b86ace35d55b5635e2e5ce1049f480a788', class: classnames('le-button-container', `le-button-align-${this.align}`), part: "button", ...attrs, onClick: this.handleClick }, this.iconOnly !== undefined ? (h("slot", { name: "icon-only" }, typeof this.iconOnly === 'string' ? this.iconOnly : null)) : (h(Fragment, null, h("span", { class: "le-button-label" }, this.iconStart && (h("span", { class: "icon-start", part: "icon-start" }, this.iconStart)), h("le-slot", { name: "", description: "Button text", type: "text", class: "content", part: "content" }, h("slot", null))), this.iconEnd && (h("span", { class: "icon-end", part: "icon-end" }, this.iconEnd)))))));
     }
     static get is() { return "le-button"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["le-button.default.css"]
+            "$": ["le-button.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["le-button.default.css"]
+            "$": ["le-button.css"]
         };
     }
     static get properties() {
@@ -238,24 +253,76 @@ export class LeButton {
                 "defaultValue": "false"
             },
             "iconOnly": {
-                "type": "boolean",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "string | Node",
+                    "resolved": "Node | string",
+                    "references": {
+                        "Node": {
+                            "location": "global",
+                            "id": "global::Node"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the button displays only an icon (square aspect ratio)"
+                    "text": "Icon only button image or emoji\nif this prop is set, the button will render only the icon slot"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "icon-only",
-                "defaultValue": "false"
+                "attribute": "icon-only"
+            },
+            "iconStart": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Node",
+                    "resolved": "Node | string",
+                    "references": {
+                        "Node": {
+                            "location": "global",
+                            "id": "global::Node"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Start icon image or emoji"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-start"
+            },
+            "iconEnd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | Node",
+                    "resolved": "Node | string",
+                    "references": {
+                        "Node": {
+                            "location": "global",
+                            "id": "global::Node"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "End icon image or emoji"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-end"
             },
             "disabled": {
                 "type": "boolean",
@@ -337,6 +404,29 @@ export class LeButton {
                 "setter": false,
                 "reflect": false,
                 "attribute": "target"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'center' | 'space-between' | 'end'",
+                    "resolved": "\"center\" | \"end\" | \"space-between\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "allowedValues",
+                            "text": "start | center | space-between | end"
+                        }],
+                    "text": "Alignment of the button label without the end icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align",
+                "defaultValue": "'center'"
             }
         };
     }

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

@@ -0,0 +1 @@
+{"version":3,"file":"le-button.js","sourceRoot":"","sources":["../../../src/components/le-button/le-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Fragment, Event, EventEmitter } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible button component with multiple variants and states.\n *\n * @slot - Button text content\n * @slot icon-only - Icon for icon-only buttons\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 * @csspart icon-start - The start icon slot\n * @csspart icon-end - The end icon slot\n *\n * @cmsEditable true\n * @cmsCategory Actions\n */\n@Component({\n  tag: 'le-button',\n  styleUrl: 'le-button.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   * Icon only button image or emoji\n   * if this prop is set, the button will render only the icon slot\n   */\n  @Prop() iconOnly?: string | Node;\n\n  /**\n   * Start icon image or emoji\n   */\n  @Prop() iconStart?: string | Node;\n\n  /**\n   * End icon image or emoji\n   */\n  @Prop() iconEnd?: string | Node;\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   * Alignment of the button label without the end icon\n   * @allowedValues start | center | space-between | end\n   */\n  @Prop() align: 'start' | 'center' | 'space-between' | 'end' = 'center';\n\n  /**\n   * Emitted when the button is clicked.\n   * This is a custom event that wraps the native click but ensures the target is the le-button.\n   */\n  @Event({ eventName: 'click' }) leClick: EventEmitter<PointerEvent>;\n\n  private handleClick = (event: PointerEvent) => {\n    // We stop the internal button click from bubbling up\n    event.stopPropagation();\n\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    // And emit our own click event from the host element\n    this.leClick.emit(event);\n  };\n\n  render() {\n    const classes = classnames(`variant-${this.variant}`, `color-${this.color}`, `size-${this.size}`, {\n      'selected': this.selected,\n      'full-width': this.fullWidth,\n      'icon-only': this.iconOnly,\n      'disabled': this.disabled,\n    });\n\n    const TagType = this.href ? 'a' : 'button';\n    const attrs = this.href ? { href: this.href, target: this.target, role: 'button' } : { type: this.type, disabled: this.disabled };\n\n    return (\n      <le-component component=\"le-button\" hostClass={classes}>\n        <TagType class={classnames('le-button-container', `le-button-align-${this.align}`)} part=\"button\" {...attrs} onClick={this.handleClick}>\n          {this.iconOnly !== undefined ? (\n            <slot name=\"icon-only\">{typeof this.iconOnly === 'string' ? this.iconOnly : null}</slot>\n          ) : (\n            <Fragment>\n              <span class=\"le-button-label\">\n                {this.iconStart && (\n                  <span class=\"icon-start\" part=\"icon-start\">\n                    {this.iconStart}\n                  </span>\n                )}\n                <le-slot name=\"\" description=\"Button text\" type=\"text\" class=\"content\" part=\"content\">\n                  <slot></slot>\n                </le-slot>\n              </span>\n              {this.iconEnd && (\n                <span class=\"icon-end\" part=\"icon-end\">\n                  {this.iconEnd}\n                </span>\n              )}\n            </Fragment>\n          )}\n        </TagType>\n      </le-component>\n    );\n  }\n}\n"]}