le-kit 0.1.13 → 0.1.15

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

@@ -1 +1 @@
-{"version":3,"file":"le-popup.js","sourceRoot":"","sources":["../../../src/components/le-popup/le-popup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Method, Event, EventEmitter, State, Element, h } from '@stencil/core';\n\n/**\n * Popup type determines the buttons shown\n */\nexport type PopupType = 'alert' | 'confirm' | 'prompt' | 'custom';\n\n/**\n * Popup position on the screen\n */\nexport type PopupPosition = 'center' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n\n/**\n * Result returned by the popup when closed\n */\nexport interface PopupResult {\n  confirmed: boolean;\n  value?: string;\n}\n\n/**\n * A flexible popup/dialog component for alerts, confirms, prompts, and custom content.\n * \n * Uses the native HTML <dialog> element for proper modal behavior, accessibility,\n * and focus management. Can be used declaratively in HTML or programmatically \n * via leAlert(), leConfirm(), lePrompt().\n *\n * @slot - Default slot for custom body content\n * @slot header - Custom header content (replaces title)\n * @slot footer - Custom footer content (replaces default buttons)\n * \n * @cmsInternal true\n * @cmsCategory System\n */\n@Component({\n  tag: 'le-popup',\n  styleUrl: 'le-popup.css',\n  shadow: true,\n})\nexport class LePopup {\n  @Element() el: HTMLElement;\n\n  /**\n   * Whether the popup is currently visible\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Type of popup: alert (OK only), confirm (OK/Cancel), prompt (input + OK/Cancel), custom\n   */\n  @Prop() type: PopupType = 'alert';\n\n  /**\n   * Optional title for the popup header\n   */\n  @Prop() popupTitle?: string;\n\n  /**\n   * Message text to display (for alert/confirm/prompt types)\n   */\n  @Prop() message?: string;\n\n  /**\n   * Whether the popup is modal (blocks interaction with page behind)\n   */\n  @Prop() modal: boolean = true;\n\n  /**\n   * Position of the popup on screen\n   */\n  @Prop() position: PopupPosition = 'center';\n\n  /**\n   * Text for the confirm/OK button\n   */\n  @Prop() confirmText: string = 'OK';\n\n  /**\n   * Text for the cancel button\n   */\n  @Prop() cancelText: string = 'Cancel';\n\n  /**\n   * Placeholder text for prompt input\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * Default value for prompt input\n   */\n  @Prop() defaultValue: string = '';\n\n  /**\n   * Whether clicking the backdrop closes the popup (modal only)\n   */\n  @Prop() closeOnBackdrop: boolean = true;\n\n  /**\n   * Internal state for prompt input value\n   */\n  @State() inputValue: string = '';\n\n  /**\n   * Emitted when the popup is confirmed (OK clicked)\n   */\n  @Event() leConfirm: EventEmitter<PopupResult>;\n\n  /**\n   * Emitted when the popup is cancelled (Cancel clicked or dismissed)\n   */\n  @Event() leCancel: EventEmitter<PopupResult>;\n\n  /**\n   * Emitted when the popup opens\n   */\n  @Event() leOpen: EventEmitter<void>;\n\n  /**\n   * Emitted when the popup closes\n   */\n  @Event() leClose: EventEmitter<PopupResult>;\n\n  private dialogEl?: HTMLDialogElement;\n  private inputEl?: HTMLInputElement;\n  private resolvePromise?: (result: PopupResult) => void;\n\n  componentWillLoad() {\n    this.inputValue = this.defaultValue;\n  }\n\n  componentDidLoad() {\n    // Native dialog handles Escape key automatically when modal\n    // We just need to listen for the cancel event\n    this.dialogEl?.addEventListener('cancel', this.handleDialogCancel);\n  }\n\n  disconnectedCallback() {\n    this.dialogEl?.removeEventListener('cancel', this.handleDialogCancel);\n  }\n\n  private handleDialogCancel = (e: Event) => {\n    e.preventDefault(); // Prevent default close to handle it ourselves\n    this.handleCancel();\n  };\n\n  /**\n   * Opens the popup and returns a promise that resolves when closed\n   */\n  @Method()\n  async show(): Promise<PopupResult> {\n    return new Promise((resolve) => {\n      this.resolvePromise = resolve;\n      this.inputValue = this.defaultValue;\n      this.open = true;\n      \n      // Use requestAnimationFrame to ensure the dialog element is rendered\n      requestAnimationFrame(() => {\n        if (this.dialogEl) {\n          if (this.modal) {\n            this.dialogEl.showModal();\n          } else {\n            this.dialogEl.show();\n          }\n          \n          this.leOpen.emit();\n          \n          // Focus input for prompt type\n          if (this.type === 'prompt' && this.inputEl) {\n            this.inputEl.focus();\n            this.inputEl.select();\n          }\n        }\n      });\n    });\n  }\n\n  /**\n   * Closes the popup with a result\n   */\n  @Method()\n  async hide(confirmed: boolean = false) {\n    const result: PopupResult = {\n      confirmed,\n      value: this.type === 'prompt' ? this.inputValue : undefined,\n    };\n    \n    this.dialogEl?.close();\n    this.open = false;\n    this.leClose.emit(result);\n    \n    if (this.resolvePromise) {\n      this.resolvePromise(result);\n      this.resolvePromise = undefined;\n    }\n  }\n\n  private handleConfirm = () => {\n    const result: PopupResult = {\n      confirmed: true,\n      value: this.type === 'prompt' ? this.inputValue : undefined,\n    };\n    this.leConfirm.emit(result);\n    this.hide(true);\n  };\n\n  private handleCancel = () => {\n    const result: PopupResult = {\n      confirmed: false,\n      value: undefined,\n    };\n    this.leCancel.emit(result);\n    this.hide(false);\n  };\n\n  private handleBackdropClick = (e: MouseEvent) => {\n    // Check if click was on the dialog backdrop (outside the dialog box)\n    if (this.closeOnBackdrop && e.target === this.dialogEl) {\n      const rect = this.dialogEl.getBoundingClientRect();\n      const clickedInDialog = (\n        e.clientX >= rect.left &&\n        e.clientX <= rect.right &&\n        e.clientY >= rect.top &&\n        e.clientY <= rect.bottom\n      );\n      if (!clickedInDialog) {\n        this.handleCancel();\n      }\n    }\n  };\n\n  private handleInputChange = (e: Event) => {\n    this.inputValue = (e.target as HTMLInputElement).value;\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' && this.type !== 'custom') {\n      e.preventDefault();\n      this.handleConfirm();\n    }\n  };\n\n  private hasSlot(name: string): boolean {\n    return !!this.el.querySelector(`[slot=\"${name}\"]`);\n  }\n\n  private renderHeader() {\n    if (this.hasSlot('header')) {\n      return (\n        <div class=\"le-popup-header\" part=\"header\">\n          <slot name=\"header\"></slot>\n        </div>\n      );\n    }\n    \n    if (this.popupTitle) {\n      return (\n        <div class=\"le-popup-header\" part=\"header\">\n          {this.popupTitle}\n        </div>\n      );\n    }\n    \n    return null;\n  }\n\n  private renderBody() {\n    return (\n      <div class=\"le-popup-body\" part=\"body\">\n        {this.message && <p class=\"le-popup-message\">{this.message}</p>}\n        \n        {this.type === 'prompt' && (\n          <input\n            type=\"text\"\n            class=\"le-popup-input\"\n            part=\"input\"\n            placeholder={this.placeholder}\n            value={this.inputValue}\n            onInput={this.handleInputChange}\n            onKeyDown={this.handleKeyDown}\n            ref={(el) => (this.inputEl = el)}\n          />\n        )}\n        \n        {/* Default slot for custom content */}\n        <le-slot name=\"\" tag=\"div\" description=\"Custom popup content\" type=\"slot\">\n          <slot></slot>\n        </le-slot>\n      </div>\n    );\n  }\n\n  private renderFooter() {\n    if (this.hasSlot('footer')) {\n      return (\n        <div class=\"le-popup-footer\" part=\"footer\">\n          <slot name=\"footer\"></slot>\n        </div>\n      );\n    }\n    \n    // For custom type without footer slot, don't render default buttons\n    if (this.type === 'custom') {\n      return null;\n    }\n    \n    return (\n      <div class=\"le-popup-footer\" part=\"footer\">\n        {(this.type === 'confirm' || this.type === 'prompt') && (\n          <le-button\n            variant=\"outlined\"\n            part=\"button-cancel\"\n            class=\"le-popup-btn\"\n            onClick={this.handleCancel}\n          >\n            {this.cancelText}\n          </le-button>\n        )}\n        <le-button\n          variant=\"solid\"\n          part=\"button-confirm\"\n          class=\"le-popup-btn\"\n          onClick={this.handleConfirm}\n        >\n          {this.confirmText}\n        </le-button>\n      </div>\n    );\n  }\n\n  render() {\n    const positionClass = `le-popup-position-${this.position}`;\n    \n    return (\n      <dialog\n        class={`le-popup-dialog ${positionClass}`}\n        part=\"dialog\"\n        ref={(el) => (this.dialogEl = el)}\n        onClick={this.handleBackdropClick}\n      >\n        <le-component component=\"le-popup\">\n          <div class=\"le-popup-container\" part=\"container\">\n            {this.renderHeader()}\n            {this.renderBody()}\n            {this.renderFooter()}\n          </div>\n        </le-component>\n      </dialog>\n    );\n  }\n}\n"]}
+{"version":3,"file":"le-popup.js","sourceRoot":"","sources":["../../../src/components/le-popup/le-popup.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Method, Event, EventEmitter, State, Element, h } from '@stencil/core';\nimport { LeKitMode } from '../../global/app';\n\n/**\n * Popup type determines the buttons shown\n */\nexport type PopupType = 'alert' | 'confirm' | 'prompt' | 'custom';\n\n/**\n * Popup position on the screen\n */\nexport type PopupPosition =\n  | 'center'\n  | 'top'\n  | 'bottom'\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-right';\n\n/**\n * Result returned by the popup when closed\n */\nexport interface PopupResult {\n  confirmed: boolean;\n  value?: string;\n}\n\n/**\n * A flexible popup/dialog component for alerts, confirms, prompts, and custom content.\n *\n * Uses the native HTML <dialog> element for proper modal behavior, accessibility,\n * and focus management. Can be used declaratively in HTML or programmatically\n * via leAlert(), leConfirm(), lePrompt().\n *\n * @slot - Default slot for custom body content\n * @slot header - Custom header content (replaces title)\n * @slot footer - Custom footer content (replaces default buttons)\n *\n * @cmsInternal true\n * @cmsCategory System\n */\n@Component({\n  tag: 'le-popup',\n  styleUrl: 'le-popup.css',\n  shadow: true,\n})\nexport class LePopup {\n  @Element() el: HTMLElement;\n\n  /**\n   * The mode of the Le Kit (e.g., 'default' or 'admin')\n   */\n  @Prop({ mutable: true, reflect: true }) mode: LeKitMode = 'default';\n\n  /**\n   * Whether the popup is currently visible\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Type of popup: alert (OK only), confirm (OK/Cancel), prompt (input + OK/Cancel), custom\n   */\n  @Prop() type: PopupType = 'alert';\n\n  /**\n   * Optional title for the popup header\n   */\n  @Prop() popupTitle?: string;\n\n  /**\n   * Message text to display (for alert/confirm/prompt types)\n   */\n  @Prop() message?: string;\n\n  /**\n   * Whether the popup is modal (blocks interaction with page behind)\n   */\n  @Prop() modal: boolean = true;\n\n  /**\n   * Position of the popup on screen\n   */\n  @Prop() position: PopupPosition = 'center';\n\n  /**\n   * Text for the confirm/OK button\n   */\n  @Prop() confirmText: string = 'OK';\n\n  /**\n   * Text for the cancel button\n   */\n  @Prop() cancelText: string = 'Cancel';\n\n  /**\n   * Placeholder text for prompt input\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * Default value for prompt input\n   */\n  @Prop() defaultValue: string = '';\n\n  /**\n   * Whether clicking the backdrop closes the popup (modal only)\n   */\n  @Prop() closeOnBackdrop: boolean = true;\n\n  /**\n   * Internal state for prompt input value\n   */\n  @State() inputValue: string = '';\n\n  /**\n   * Emitted when the popup is confirmed (OK clicked)\n   */\n  @Event() leConfirm: EventEmitter<PopupResult>;\n\n  /**\n   * Emitted when the popup is cancelled (Cancel clicked or dismissed)\n   */\n  @Event() leCancel: EventEmitter<PopupResult>;\n\n  /**\n   * Emitted when the popup opens\n   */\n  @Event() leOpen: EventEmitter<void>;\n\n  /**\n   * Emitted when the popup closes\n   */\n  @Event() leClose: EventEmitter<PopupResult>;\n\n  private dialogEl?: HTMLDialogElement;\n  private inputEl?: HTMLInputElement;\n  private resolvePromise?: (result: PopupResult) => void;\n\n  componentWillLoad() {\n    this.inputValue = this.defaultValue;\n  }\n\n  componentDidLoad() {\n    // Native dialog handles Escape key automatically when modal\n    // We just need to listen for the cancel event\n    this.dialogEl?.addEventListener('cancel', this.handleDialogCancel);\n  }\n\n  disconnectedCallback() {\n    this.dialogEl?.removeEventListener('cancel', this.handleDialogCancel);\n  }\n\n  private handleDialogCancel = (e: Event) => {\n    e.preventDefault(); // Prevent default close to handle it ourselves\n    this.handleCancel();\n  };\n\n  /**\n   * Opens the popup and returns a promise that resolves when closed\n   */\n  @Method()\n  async show(): Promise<PopupResult> {\n    return new Promise(resolve => {\n      this.resolvePromise = resolve;\n      this.inputValue = this.defaultValue;\n      this.open = true;\n\n      // Use requestAnimationFrame to ensure the dialog element is rendered\n      requestAnimationFrame(() => {\n        if (this.dialogEl) {\n          if (this.modal) {\n            this.dialogEl.showModal();\n          } else {\n            this.dialogEl.show();\n          }\n\n          this.leOpen.emit();\n\n          // Focus input for prompt type\n          if (this.type === 'prompt' && this.inputEl) {\n            this.inputEl.focus();\n            this.inputEl.select();\n          }\n        }\n      });\n    });\n  }\n\n  /**\n   * Closes the popup with a result\n   */\n  @Method()\n  async hide(confirmed: boolean = false) {\n    const result: PopupResult = {\n      confirmed,\n      value: this.type === 'prompt' ? this.inputValue : undefined,\n    };\n\n    this.dialogEl?.close();\n    this.open = false;\n    this.leClose.emit(result);\n\n    if (this.resolvePromise) {\n      this.resolvePromise(result);\n      this.resolvePromise = undefined;\n    }\n  }\n\n  private handleConfirm = () => {\n    const result: PopupResult = {\n      confirmed: true,\n      value: this.type === 'prompt' ? this.inputValue : undefined,\n    };\n    this.leConfirm.emit(result);\n    this.hide(true);\n  };\n\n  private handleCancel = () => {\n    const result: PopupResult = {\n      confirmed: false,\n      value: undefined,\n    };\n    this.leCancel.emit(result);\n    this.hide(false);\n  };\n\n  private handleBackdropClick = (e: MouseEvent) => {\n    // Check if click was on the dialog backdrop (outside the dialog box)\n    if (this.closeOnBackdrop && e.target === this.dialogEl) {\n      const rect = this.dialogEl.getBoundingClientRect();\n      const clickedInDialog =\n        e.clientX >= rect.left &&\n        e.clientX <= rect.right &&\n        e.clientY >= rect.top &&\n        e.clientY <= rect.bottom;\n      if (!clickedInDialog) {\n        this.handleCancel();\n      }\n    }\n  };\n\n  private handleInputChange = (e: Event) => {\n    this.inputValue = (e.target as HTMLInputElement).value;\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' && this.type !== 'custom') {\n      e.preventDefault();\n      this.handleConfirm();\n    }\n  };\n\n  private hasSlot(name: string): boolean {\n    return !!this.el.querySelector(`[slot=\"${name}\"]`);\n  }\n\n  private renderHeader() {\n    if (this.hasSlot('header')) {\n      return (\n        <div class=\"le-popup-header\" part=\"header\">\n          <slot name=\"header\"></slot>\n        </div>\n      );\n    }\n\n    if (this.popupTitle) {\n      return (\n        <div class=\"le-popup-header\" part=\"header\">\n          {this.popupTitle}\n        </div>\n      );\n    }\n\n    return null;\n  }\n\n  private renderBody() {\n    return (\n      <div class=\"le-popup-body\" part=\"body\">\n        {this.message && <p class=\"le-popup-message\">{this.message}</p>}\n\n        {this.type === 'prompt' && (\n          <input\n            type=\"text\"\n            class=\"le-popup-input\"\n            part=\"input\"\n            placeholder={this.placeholder}\n            value={this.inputValue}\n            onInput={this.handleInputChange}\n            onKeyDown={this.handleKeyDown}\n            ref={el => (this.inputEl = el)}\n          />\n        )}\n\n        {/* Default slot for custom content */}\n        <le-slot name=\"\" tag=\"div\" description=\"Custom popup content\" type=\"slot\">\n          <slot></slot>\n        </le-slot>\n      </div>\n    );\n  }\n\n  private renderFooter() {\n    if (this.hasSlot('footer')) {\n      return (\n        <div class=\"le-popup-footer\" part=\"footer\">\n          <slot name=\"footer\"></slot>\n        </div>\n      );\n    }\n\n    // For custom type without footer slot, don't render default buttons\n    if (this.type === 'custom') {\n      return null;\n    }\n\n    return (\n      <div class=\"le-popup-footer\" part=\"footer\">\n        {(this.type === 'confirm' || this.type === 'prompt') && (\n          <le-button\n            variant=\"outlined\"\n            part=\"button-cancel\"\n            class=\"le-popup-btn\"\n            onClick={this.handleCancel}\n          >\n            {this.cancelText}\n          </le-button>\n        )}\n        <le-button\n          variant=\"solid\"\n          part=\"button-confirm\"\n          class=\"le-popup-btn\"\n          onClick={this.handleConfirm}\n        >\n          {this.confirmText}\n        </le-button>\n      </div>\n    );\n  }\n\n  render() {\n    const positionClass = `le-popup-position-${this.position}`;\n\n    return (\n      <dialog\n        class={`le-popup-dialog ${positionClass}`}\n        part=\"dialog\"\n        ref={el => (this.dialogEl = el)}\n        onClick={this.handleBackdropClick}\n      >\n        <le-component component=\"le-popup\">\n          <div class=\"le-popup-container\" part=\"container\">\n            {this.renderHeader()}\n            {this.renderBody()}\n            {this.renderFooter()}\n          </div>\n        </le-component>\n      </dialog>\n    );\n  }\n}\n"]}

package/dist/collection/components/le-round-progress/le-round-progress.js

@@ -85,7 +85,7 @@ export class LeRoundProgress {
         return (h("svg", { viewBox: this.getViewBox(), class: "round-progress" }, paths));
     }
     render() {
-        return (h("div", { key: '1ffc36704bee5d0822623ac4559ad2d4690095a4', class: "round-progress--container" }, this.getPaths(), h("svg", { key: '12e4dfe5fe2df0cb672d4c001459b8dcc8253591', viewBox: this.getViewBox(), class: "round-progress round-progress--progress" }, h("path", { key: 'd8ce69610687fb578ce2104bd3eccba24951dd96', class: "round-progress--circle", "stroke-dasharray": this.getStrokeDashArray(), d: this.getPath() })), h("slot", { key: '3976b08a7e838579d6af34a778a8756255d98e57' })));
+        return (h("div", { key: '1dfe2147b5183f45f2e95e31d55228841de541d3', class: "round-progress--container" }, this.getPaths(), h("svg", { key: 'e16d774ff030122547b453ebd69d0bd01e916a25', viewBox: this.getViewBox(), class: "round-progress round-progress--progress" }, h("path", { key: 'd3db84e88a6e879f5a06b7592cdb234de9c0fdf1', class: "round-progress--circle", "stroke-dasharray": this.getStrokeDashArray(), d: this.getPath() })), h("slot", { key: '5cbe02ff0bc27a432e55f8331cfad00f2c404ded' })));
     }
     static get is() { return "le-round-progress"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/le-segmented-control/le-segmented-control.css

@@ -0,0 +1,78 @@
+/**
+ * le-segmented-control - Default mode styles
+ */
+
+:host {
+  display: inline-block;
+  max-width: 100%;
+  --le-segmented-control-bg: var(--le-color-background-secondary);
+  --le-segmented-control-padding: var(--le-spacing-1);
+}
+:host([full-width]) {
+  width: 100%;
+}
+:host(.overflow-visible) {
+  max-width: none;
+}
+
+.le-segmented-control {
+  flex-direction: row;
+  white-space: nowrap;
+  border: none;
+  gap: 0;
+  background-color: var(--le-segmented-control-bg);
+  border-radius: calc(var(--le-radius-md) + var(--le-segmented-control-padding));
+  padding: var(--le-segmented-control-padding);
+}
+
+.le-segmented-control.overflow-auto {
+  overflow: auto;
+}
+.le-segmented-control.overflow-hidden {
+  overflow: hidden;
+}
+.le-segmented-control.overflow-visible {
+  overflow: visible;
+}
+.le-segmented-control.overflow-scroll {
+  overflow: scroll;
+}
+
+.le-segmented-control.full-width {
+  display: flex;
+  width: 100%;
+  width: calc(100% - var(--le-segmented-control-padding) * 2);
+}
+
+.le-segmented-control.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.le-segmented-control:focus {
+  outline: 2px solid var(--le-color-focus);
+  outline-offset: 2px;
+}
+
+
+/* ============================================
+ * SEGMENT BUTTON
+ * ============================================ */
+
+.full-width .segment {
+  flex: 1;
+}
+
+.segment:focus-visible {
+  outline: 2px solid var(--le-focus-ring-color, var(--le-color-primary));
+  outline-offset: 2px;
+}
+
+.segment-active {
+  color: var(--le-segmented-text-color-active, var(--le-text-primary));
+}
+
+.segment-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/dist/collection/components/le-segmented-control/le-segmented-control.js

@@ -0,0 +1,445 @@
+import { h, Host, } from "@stencil/core";
+/**
+ * A segmented control component (iOS-style toggle buttons).
+ *
+ * Perfect for toggling between a small set of related options.
+ *
+ * @cssprop --le-segmented-bg - Background color of the control
+ * @cssprop --le-segmented-padding - Padding around segments
+ * @cssprop --le-segmented-gap - Gap between segments
+ * @cssprop --le-segmented-radius - Border radius of the control
+ *
+ * @csspart container - The main container
+ * @csspart segment - Individual segment buttons
+ * @csspart segment-active - The currently active segment
+ *
+ * @cmsEditable true
+ * @cmsCategory Form
+ */
+export class LeSegmentedControl {
+    el;
+    containerRef;
+    /**
+     * Array of options for the segmented control.
+     */
+    options = [];
+    /**
+     * The value of the currently selected option.
+     */
+    value;
+    /**
+     * Size of the control.
+     * @allowedValues small | medium | large
+     */
+    size = 'medium';
+    /**
+     * Scroll behavior for overflowing tabs.
+     * @allowedValues auto | hidden | visible | scroll
+     */
+    overflow = 'auto';
+    /**
+     * Whether the control should take full width.
+     */
+    fullWidth = false;
+    /**
+     * Whether the control is disabled.
+     */
+    disabled = false;
+    /**
+     * Internal tab configurations (built from children or tabs prop)
+     */
+    segmentConfigs = [];
+    /**
+     * Internal state for focused index (keyboard navigation)
+     */
+    focusedIndex = 0;
+    /**
+     * Whether we're using declarative mode (le-tab children)
+     */
+    isDeclarativeMode = false;
+    /**
+     * Emitted when the selection changes.
+     */
+    leChange;
+    mutationObserver;
+    tabsChanged() {
+        if (!this.isDeclarativeMode) {
+            this.buildSegmentsConfigs();
+        }
+    }
+    handleSlotChange() {
+        this.buildSegmentsConfigs();
+    }
+    componentWillLoad() {
+        this.buildSegmentsConfigs();
+        if (this.value === undefined && this.options.length > 0) {
+            const firstEnabled = this.options.find(opt => !opt.disabled);
+            if (firstEnabled) {
+                this.value = this.getOptionValue(firstEnabled);
+            }
+        }
+        if (this.value !== undefined) {
+            const index = this.getOptionIndex(this.value);
+            if (index >= 0) {
+                this.focusedIndex = index;
+            }
+        }
+    }
+    connectedCallback() {
+        // Watch for dynamic changes to children
+        this.mutationObserver = new MutationObserver(() => {
+            this.buildSegmentsConfigs();
+        });
+        this.mutationObserver.observe(this.el, {
+            attributes: true,
+            childList: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        this.mutationObserver?.disconnect();
+    }
+    async buildSegmentsConfigs() {
+        // Check for le-tab children
+        const segments = Array.from(this.el.querySelectorAll(':scope > le-tab'));
+        if (segments.length > 0) {
+            // Declarative mode - build from children
+            this.isDeclarativeMode = true;
+            const configs = [];
+            for (const segment of segments) {
+                const config = await segment.getTabConfig();
+                configs.push({ ...config });
+            }
+            this.segmentConfigs = configs;
+        }
+        else if (this.options.length > 0) {
+            // Programmatic mode - use options prop
+            this.isDeclarativeMode = false;
+            this.segmentConfigs = this.options.map(option => ({
+                label: option.label,
+                value: (option.value !== undefined ? option.value : option.label),
+                iconStart: option.iconStart,
+                iconEnd: option.iconEnd,
+                disabled: option.disabled ?? false,
+            }));
+        }
+        else {
+            this.segmentConfigs = [];
+        }
+        // Set default selected
+        if (this.value === undefined && this.segmentConfigs.length > 0) {
+            const firstEnabled = this.segmentConfigs.find(t => !t.disabled);
+            if (firstEnabled) {
+                this.value = firstEnabled.value;
+            }
+        }
+        // Initialize focused index
+        if (this.value !== undefined) {
+            const index = this.segmentConfigs.findIndex(t => t.value === this.value);
+            if (index >= 0) {
+                this.focusedIndex = index;
+            }
+        }
+    }
+    getOptionValue(option) {
+        return option.value !== undefined ? option.value : option.label;
+    }
+    getOptionIndex(value) {
+        return this.options.findIndex(opt => this.getOptionValue(opt) === value);
+    }
+    selectOption(option) {
+        if (option.disabled || this.disabled)
+            return;
+        const value = this.getOptionValue(option);
+        this.value = value;
+        // update focused index
+        const index = this.segmentConfigs.findIndex(seg => seg.value === value);
+        if (index >= 0) {
+            this.focusedIndex = index;
+        }
+        this.leChange.emit({ value, option });
+    }
+    handleClick = (option) => {
+        this.selectOption(option);
+    };
+    handleKeyDown = (event) => {
+        const { segmentConfigs } = this;
+        let newIndex = this.focusedIndex;
+        switch (event.key) {
+            case 'ArrowLeft':
+                event.preventDefault();
+                newIndex = this.findNextEnabled(-1);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                newIndex = this.findNextEnabled(1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                newIndex = this.findFirstEnabled();
+                break;
+            case 'End':
+                event.preventDefault();
+                newIndex = this.findLastEnabled();
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (segmentConfigs[this.focusedIndex]) {
+                    this.selectOption(segmentConfigs[this.focusedIndex]);
+                }
+                return;
+            default:
+                return;
+        }
+        if (newIndex !== this.focusedIndex) {
+            this.focusedIndex = newIndex;
+            this.focusSegment(newIndex);
+            if (segmentConfigs[newIndex]) {
+                this.selectOption(segmentConfigs[newIndex]);
+            }
+        }
+    };
+    findNextEnabled(direction) {
+        const { segmentConfigs } = this;
+        let index = this.focusedIndex;
+        const length = segmentConfigs.length;
+        for (let i = 0; i < length; i++) {
+            index = (index + direction + length) % length;
+            if (!segmentConfigs[index].disabled) {
+                return index;
+            }
+        }
+        return this.focusedIndex;
+    }
+    findFirstEnabled() {
+        return this.segmentConfigs.findIndex(opt => !opt.disabled);
+    }
+    findLastEnabled() {
+        for (let i = this.segmentConfigs.length - 1; i >= 0; i--) {
+            if (!this.segmentConfigs[i].disabled)
+                return i;
+        }
+        return 0;
+    }
+    focusSegment(index) {
+        const container = this.containerRef;
+        const segment = container?.querySelectorAll('.segment')[index];
+        segment?.focus();
+    }
+    render() {
+        const { segmentConfigs, value, size, fullWidth, disabled } = this;
+        const classes = {
+            'le-segmented-control': true,
+            [`size-${size}`]: true,
+            [`overflow-${this.overflow}`]: true,
+            'full-width': fullWidth,
+            'disabled': disabled,
+        };
+        return (h(Host, { key: 'da654431d7a9e08c18f618930ccda8f5b81c513a', class: `overflow-${this.overflow}` }, h("le-component", { key: '9a5bcd50c1c7c8f60f23c2423fc1d8913992befa', component: "le-segmented-control" }, h("div", { key: '25f1550e3b56e23d9c06ca784e6453b651133990', class: classes, ref: el => (this.containerRef = el), role: "radiogroup", part: "container", onKeyDown: this.handleKeyDown, tabIndex: 0 }, segmentConfigs.map(option => {
+            const optValue = this.getOptionValue(option);
+            const isSelected = optValue === value;
+            const isDisabled = option.disabled || disabled;
+            return (h("le-tab", { key: optValue, class: "segment", role: "radio", variant: "enclosed", selected: isSelected, disabled: isDisabled, focusable: false, size: size, part: isSelected ? 'segment segment-active' : 'segment', "aria-checked": isSelected ? 'true' : 'false', "aria-disabled": isDisabled ? 'true' : undefined, onClick: () => this.handleClick(option), iconStart: option.iconStart, iconEnd: option.iconEnd }, h("span", { class: "segment-label" }, option.label)));
+        })))));
+    }
+    static get is() { return "le-segmented-control"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["le-segmented-control.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["le-segmented-control.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "LeOption[]",
+                    "resolved": "LeOption[]",
+                    "references": {
+                        "LeOption": {
+                            "location": "import",
+                            "path": "../../types/options",
+                            "id": "src/types/options.ts::LeOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of options for the segmented control."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "LeOptionValue",
+                    "resolved": "number | string",
+                    "references": {
+                        "LeOptionValue": {
+                            "location": "import",
+                            "path": "../../types/options",
+                            "id": "src/types/options.ts::LeOptionValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the currently selected option."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "allowedValues",
+                            "text": "small | medium | large"
+                        }],
+                    "text": "Size of the control."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            },
+            "overflow": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'auto' | 'hidden' | 'visible' | 'scroll'",
+                    "resolved": "\"auto\" | \"hidden\" | \"scroll\" | \"visible\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "allowedValues",
+                            "text": "auto | hidden | visible | scroll"
+                        }],
+                    "text": "Scroll behavior for overflowing tabs."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "overflow",
+                "defaultValue": "'auto'"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the control should take full width."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the control is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "segmentConfigs": {},
+            "focusedIndex": {},
+            "isDeclarativeMode": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "leChange",
+                "name": "leChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selection changes."
+                },
+                "complexType": {
+                    "original": "LeOptionSelectDetail",
+                    "resolved": "LeOptionSelectDetail",
+                    "references": {
+                        "LeOptionSelectDetail": {
+                            "location": "import",
+                            "path": "../../types/options",
+                            "id": "src/types/options.ts::LeOptionSelectDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "options",
+                "methodName": "tabsChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "slotchange",
+                "method": "handleSlotChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=le-segmented-control.js.map

package/dist/collection/components/le-segmented-control/le-segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"le-segmented-control.js","sourceRoot":"","sources":["../../../src/components/le-segmented-control/le-segmented-control.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  h,\n  Element,\n  Watch,\n  Listen,\n  Host,\n} from '@stencil/core';\nimport { LeOption, LeOptionValue, LeOptionSelectDetail } from '../../types/options';\n\ninterface SegmentConfig {\n  label: string;\n  value: string;\n  iconStart?: string;\n  iconEnd?: string;\n  disabled: boolean;\n}\n\ninterface TabConfig {\n  label: string;\n  value: string;\n  iconStart?: string;\n  iconEnd?: string;\n  disabled: boolean;\n  panel?: HTMLElement & { setActive: (active: boolean) => Promise<void> };\n}\n\n/**\n * A segmented control component (iOS-style toggle buttons).\n *\n * Perfect for toggling between a small set of related options.\n *\n * @cssprop --le-segmented-bg - Background color of the control\n * @cssprop --le-segmented-padding - Padding around segments\n * @cssprop --le-segmented-gap - Gap between segments\n * @cssprop --le-segmented-radius - Border radius of the control\n *\n * @csspart container - The main container\n * @csspart segment - Individual segment buttons\n * @csspart segment-active - The currently active segment\n *\n * @cmsEditable true\n * @cmsCategory Form\n */\n@Component({\n  tag: 'le-segmented-control',\n  styleUrl: 'le-segmented-control.css',\n  shadow: true,\n})\nexport class LeSegmentedControl {\n  @Element() el: HTMLElement;\n\n  private containerRef?: HTMLElement;\n\n  /**\n   * Array of options for the segmented control.\n   */\n  @Prop() options: LeOption[] = [];\n\n  /**\n   * The value of the currently selected option.\n   */\n  @Prop({ mutable: true }) value?: LeOptionValue;\n\n  /**\n   * Size of the control.\n   * @allowedValues small | medium | large\n   */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Scroll behavior for overflowing tabs.\n   * @allowedValues auto | hidden | visible | scroll\n   */\n  @Prop() overflow: 'auto' | 'hidden' | 'visible' | 'scroll' = 'auto';\n\n  /**\n   * Whether the control should take full width.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * Whether the control is disabled.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Internal tab configurations (built from children or tabs prop)\n   */\n  @State() private segmentConfigs: SegmentConfig[] = [];\n\n  /**\n   * Internal state for focused index (keyboard navigation)\n   */\n  @State() private focusedIndex: number = 0;\n\n  /**\n   * Whether we're using declarative mode (le-tab children)\n   */\n  @State() private isDeclarativeMode: boolean = false;\n\n  /**\n   * Emitted when the selection changes.\n   */\n  @Event() leChange: EventEmitter<LeOptionSelectDetail>;\n\n  private mutationObserver?: MutationObserver;\n\n  @Watch('options')\n  tabsChanged() {\n    if (!this.isDeclarativeMode) {\n      this.buildSegmentsConfigs();\n    }\n  }\n\n  @Listen('slotchange')\n  handleSlotChange() {\n    this.buildSegmentsConfigs();\n  }\n\n  componentWillLoad() {\n    this.buildSegmentsConfigs();\n    if (this.value === undefined && this.options.length > 0) {\n      const firstEnabled = this.options.find(opt => !opt.disabled);\n      if (firstEnabled) {\n        this.value = this.getOptionValue(firstEnabled);\n      }\n    }\n    if (this.value !== undefined) {\n      const index = this.getOptionIndex(this.value);\n      if (index >= 0) {\n        this.focusedIndex = index;\n      }\n    }\n  }\n\n  connectedCallback() {\n    // Watch for dynamic changes to children\n    this.mutationObserver = new MutationObserver(() => {\n      this.buildSegmentsConfigs();\n    });\n    this.mutationObserver.observe(this.el, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  private async buildSegmentsConfigs() {\n    // Check for le-tab children\n    const segments = Array.from(this.el.querySelectorAll(':scope > le-tab')) as Array<\n      HTMLElement & {\n        getTabConfig: () => Promise<TabConfig>;\n        setActive: (active: boolean) => Promise<void>;\n      }\n    >;\n\n    if (segments.length > 0) {\n      // Declarative mode - build from children\n      this.isDeclarativeMode = true;\n      const configs: TabConfig[] = [];\n\n      for (const segment of segments) {\n        const config = await segment.getTabConfig();\n        configs.push({ ...config });\n      }\n\n      this.segmentConfigs = configs;\n    } else if (this.options.length > 0) {\n      // Programmatic mode - use options prop\n      this.isDeclarativeMode = false;\n      this.segmentConfigs = this.options.map(option => ({\n        label: option.label,\n        value: (option.value !== undefined ? option.value : option.label) as string,\n        iconStart: option.iconStart,\n        iconEnd: option.iconEnd,\n        disabled: option.disabled ?? false,\n      }));\n    } else {\n      this.segmentConfigs = [];\n    }\n\n    // Set default selected\n    if (this.value === undefined && this.segmentConfigs.length > 0) {\n      const firstEnabled = this.segmentConfigs.find(t => !t.disabled);\n      if (firstEnabled) {\n        this.value = firstEnabled.value;\n      }\n    }\n\n    // Initialize focused index\n    if (this.value !== undefined) {\n      const index = this.segmentConfigs.findIndex(t => t.value === this.value);\n      if (index >= 0) {\n        this.focusedIndex = index;\n      }\n    }\n  }\n\n  private getOptionValue(option: LeOption): LeOptionValue {\n    return option.value !== undefined ? option.value : option.label;\n  }\n\n  private getOptionIndex(value: LeOptionValue): number {\n    return this.options.findIndex(opt => this.getOptionValue(opt) === value);\n  }\n\n  private selectOption(option: LeOption) {\n    if (option.disabled || this.disabled) return;\n\n    const value = this.getOptionValue(option);\n    this.value = value;\n\n    // update focused index\n    const index = this.segmentConfigs.findIndex(seg => seg.value === value);\n    if (index >= 0) {\n      this.focusedIndex = index;\n    }\n\n    this.leChange.emit({ value, option });\n  }\n\n  private handleClick = (option: LeOption) => {\n    this.selectOption(option);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const { segmentConfigs } = this;\n    let newIndex = this.focusedIndex;\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        event.preventDefault();\n        newIndex = this.findNextEnabled(-1);\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n        newIndex = this.findNextEnabled(1);\n        break;\n      case 'Home':\n        event.preventDefault();\n        newIndex = this.findFirstEnabled();\n        break;\n      case 'End':\n        event.preventDefault();\n        newIndex = this.findLastEnabled();\n        break;\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        if (segmentConfigs[this.focusedIndex]) {\n          this.selectOption(segmentConfigs[this.focusedIndex]);\n        }\n        return;\n      default:\n        return;\n    }\n\n    if (newIndex !== this.focusedIndex) {\n      this.focusedIndex = newIndex;\n      this.focusSegment(newIndex);\n      if (segmentConfigs[newIndex]) {\n        this.selectOption(segmentConfigs[newIndex]);\n      }\n    }\n  };\n\n  private findNextEnabled(direction: 1 | -1): number {\n    const { segmentConfigs } = this;\n    let index = this.focusedIndex;\n    const length = segmentConfigs.length;\n\n    for (let i = 0; i < length; i++) {\n      index = (index + direction + length) % length;\n      if (!segmentConfigs[index].disabled) {\n        return index;\n      }\n    }\n    return this.focusedIndex;\n  }\n\n  private findFirstEnabled(): number {\n    return this.segmentConfigs.findIndex(opt => !opt.disabled);\n  }\n\n  private findLastEnabled(): number {\n    for (let i = this.segmentConfigs.length - 1; i >= 0; i--) {\n      if (!this.segmentConfigs[i].disabled) return i;\n    }\n    return 0;\n  }\n\n  private focusSegment(index: number) {\n    const container = this.containerRef;\n    const segment = container?.querySelectorAll('.segment')[index] as HTMLElement;\n    segment?.focus();\n  }\n\n  render() {\n    const { segmentConfigs, value, size, fullWidth, disabled } = this;\n\n    const classes = {\n      'le-segmented-control': true,\n      [`size-${size}`]: true,\n      [`overflow-${this.overflow}`]: true,\n      'full-width': fullWidth,\n      'disabled': disabled,\n    };\n\n    return (\n      <Host class={`overflow-${this.overflow}`}>\n        <le-component component=\"le-segmented-control\">\n          <div\n            class={classes}\n            ref={el => (this.containerRef = el)}\n            role=\"radiogroup\"\n            part=\"container\"\n            onKeyDown={this.handleKeyDown}\n            tabIndex={0}\n          >\n            {segmentConfigs.map(option => {\n              const optValue = this.getOptionValue(option);\n              const isSelected = optValue === value;\n              const isDisabled = option.disabled || disabled;\n\n              return (\n                <le-tab\n                  key={optValue}\n                  class=\"segment\"\n                  role=\"radio\"\n                  variant=\"enclosed\"\n                  selected={isSelected}\n                  disabled={isDisabled}\n                  focusable={false}\n                  size={size}\n                  part={isSelected ? 'segment segment-active' : 'segment'}\n                  aria-checked={isSelected ? 'true' : 'false'}\n                  aria-disabled={isDisabled ? 'true' : undefined}\n                  onClick={() => this.handleClick(option)}\n                  iconStart={option.iconStart}\n                  iconEnd={option.iconEnd}\n                >\n                  <span class=\"segment-label\">{option.label}</span>\n                </le-tab>\n              );\n            })}\n          </div>\n        </le-component>\n      </Host>\n    );\n  }\n}\n"]}