le-kit 0.1.13 → 0.1.15

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

@@ -1 +1 @@
-{"file":"le-popup.js","mappings":"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","names":["LePopup","__stencil_proxyCustomElement"],"sources":["src/components/le-popup/le-popup.css?tag=le-popup&encapsulation=shadow","src/components/le-popup/le-popup.tsx"],"sourcesContent":["/* ============================================\n   le-popup.css\n   Popup/Dialog component using native <dialog>\n   Uses CSS variables for easy theming\n   ============================================ */\n\n:host {\n  display: contents;\n}\n\n/* ============================================\n   Native Dialog Element\n   ============================================ */\n\n.le-popup-dialog {\n  /* Reset default dialog styles */\n  position: fixed;\n  z-index: 100;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  max-width: none;\n  max-height: none;\n  overflow: visible;\n  \n  /* Sizing variables */\n  --_popup-min-width: var(--le-popup-min-width, 320px);\n  --_popup-max-width: var(--le-popup-max-width, min(500px, 90vw));\n  --_popup-min-height: var(--le-popup-min-height, auto);\n}\n\n/* Backdrop styling (native ::backdrop pseudo-element) */\n.le-popup-dialog::backdrop {\n  background: var(--le-popup-backdrop-color, rgba(0, 0, 0, 0.5));\n  animation: le-popup-backdrop-fade 0.2s ease-out;\n}\n\n@keyframes le-popup-backdrop-fade {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n/* ============================================\n   Position Variants\n   Using margin to position within viewport\n   ============================================ */\n\n/* Center (default) */\n.le-popup-position-center {\n  margin: auto;\n}\n\n/* Top positions */\n.le-popup-position-top {\n  margin: var(--le-space-2xl, 48px) auto auto auto;\n}\n\n.le-popup-position-top-left {\n  margin: var(--le-space-lg, 24px) auto auto var(--le-space-lg, 24px);\n}\n\n.le-popup-position-top-right {\n  margin: var(--le-space-lg, 24px) var(--le-space-lg, 24px) auto auto;\n}\n\n/* Bottom positions */\n.le-popup-position-bottom {\n  margin: auto auto var(--le-space-2xl, 48px) auto;\n}\n\n.le-popup-position-bottom-left {\n  margin: auto auto var(--le-space-lg, 24px) var(--le-space-lg, 24px);\n}\n\n.le-popup-position-bottom-right {\n  margin: auto var(--le-space-lg, 24px) var(--le-space-lg, 24px) auto;\n}\n\n/* ============================================\n   Container (the visible dialog box)\n   ============================================ */\n\n.le-popup-container {\n  display: flex;\n  flex-direction: column;\n  min-width: var(--_popup-min-width);\n  max-width: var(--_popup-max-width);\n  min-height: var(--_popup-min-height);\n  max-height: calc(100vh - var(--le-space-2xl, 48px) * 2);\n  background: var(--le-color-surface, #ffffff);\n  border: 1px solid var(--le-color-border, #e0e0e0);\n  border-radius: var(--le-radius-lg, 12px);\n  box-shadow: var(--le-shadow-xl, 0 8px 32px rgba(0, 0, 0, 0.15));\n  overflow: hidden;\n  font-family: var(--le-font-family, system-ui, -apple-system, sans-serif);\n  color: var(--le-color-text, #333);\n  \n  /* Animation */\n  animation: le-popup-appear 0.2s ease-out;\n}\n\n@keyframes le-popup-appear {\n  from {\n    opacity: 0;\n    transform: scale(0.95) translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* ============================================\n   Header\n   ============================================ */\n\n.le-popup-header {\n  flex-shrink: 0;\n  padding: var(--le-space-md, 16px) var(--le-space-lg, 24px);\n  border-bottom: 1px solid var(--le-color-border, #e0e0e0);\n  background: var(--le-color-surface-alt, #f9f9f9);\n  font-size: var(--le-font-size-lg, 1.125rem);\n  font-weight: var(--le-font-weight-semibold, 600);\n  color: var(--le-color-text, #333);\n}\n\n/* ============================================\n   Body\n   ============================================ */\n\n.le-popup-body {\n  flex: 1;\n  padding: var(--le-space-lg, 24px);\n  overflow-y: auto;\n}\n\n.le-popup-message {\n  margin: 0;\n  font-size: var(--le-font-size-md, 1rem);\n  line-height: var(--le-line-height-relaxed, 1.6);\n  color: var(--le-color-text, #333);\n}\n\n/* When there's both message and slot content */\n.le-popup-message + ::slotted(*) {\n  margin-top: var(--le-space-md, 16px);\n}\n\n/* ============================================\n   Input (for prompt type)\n   ============================================ */\n\n.le-popup-input {\n  display: block;\n  width: 100%;\n  margin-top: var(--le-space-md, 16px);\n  padding: var(--le-space-sm, 8px) var(--le-space-md, 16px);\n  font-family: inherit;\n  font-size: var(--le-font-size-md, 1rem);\n  color: var(--le-color-text, #333);\n  background: var(--le-color-background, #fff);\n  border: 1px solid var(--le-color-border, #e0e0e0);\n  border-radius: var(--le-radius-md, 8px);\n  outline: none;\n  transition: border-color var(--le-transition-fast, 0.15s ease),\n              box-shadow var(--le-transition-fast, 0.15s ease);\n  box-sizing: border-box;\n}\n\n.le-popup-input:focus {\n  border-color: var(--le-color-primary, #2196f3);\n  box-shadow: 0 0 0 3px var(--le-color-primary-light, rgba(33, 150, 243, 0.2));\n}\n\n.le-popup-input::placeholder {\n  color: var(--le-color-text-muted, #999);\n}\n\n/* ============================================\n   Footer (buttons)\n   ============================================ */\n\n.le-popup-footer {\n  flex-shrink: 0;\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--le-space-sm, 8px);\n  padding: var(--le-space-md, 16px) var(--le-space-lg, 24px);\n  border-top: 1px solid var(--le-color-border, #e0e0e0);\n  background: var(--le-color-surface-alt, #f9f9f9);\n}\n\n/* ============================================\n   Buttons\n   ============================================ */\n\n.le-popup-btn {\n  min-width: 80px;\n}\n\n/* ============================================\n   Responsive adjustments\n   ============================================ */\n\n@media (max-width: 480px) {\n  .le-popup-container {\n    min-width: calc(100vw - var(--le-space-md, 16px) * 2);\n    max-width: calc(100vw - var(--le-space-md, 16px) * 2);\n  }\n  \n  .le-popup-footer {\n    flex-direction: column-reverse;\n  }\n  \n  .le-popup-btn {\n    width: 100%;\n  }\n}","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","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -94,7 +94,7 @@ const LeRoundProgress$1 = /*@__PURE__*/ proxyCustomElement(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 watchers() { return {
         "value": ["updateValue"],

package/dist/components/le-segmented-control.d.ts

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

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

@@ -0,0 +1,320 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3, a as defineCustomElement$4, b as defineCustomElement$5, c as defineCustomElement$7, e as defineCustomElement$8, f as defineCustomElement$9 } from './le-button2.js';
+import { d as defineCustomElement$6 } from './le-popover2.js';
+import { d as defineCustomElement$2 } from './le-tab2.js';
+
+const leSegmentedControlCss = ":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}.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}";
+
+const LeSegmentedControl$1 = /*@__PURE__*/ proxyCustomElement(class LeSegmentedControl extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.leChange = createEvent(this, "leChange", 7);
+    }
+    get el() { return this; }
+    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 watchers() { return {
+        "options": ["tabsChanged"]
+    }; }
+    static get style() { return leSegmentedControlCss; }
+}, [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"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["le-segmented-control", "le-button", "le-checkbox", "le-component", "le-popover", "le-popup", "le-slot", "le-string-input", "le-tab"];
+    components.forEach(tagName => { switch (tagName) {
+        case "le-segmented-control":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LeSegmentedControl$1);
+            }
+            break;
+        case "le-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "le-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "le-component":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "le-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "le-popup":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "le-slot":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "le-string-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "le-tab":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const LeSegmentedControl = LeSegmentedControl$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LeSegmentedControl, defineCustomElement };
+//# sourceMappingURL=le-segmented-control.js.map
+
+//# sourceMappingURL=le-segmented-control.js.map

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

@@ -0,0 +1 @@
+{"file":"le-segmented-control.js","mappings":";;;;;AAAA,MAAM,qBAAqB,GAAG,8sCAA8sC;;MCqD/tCA,oBAAkB,iBAAAC,kBAAA,CAAA,MAAA,kBAAA,SAAA,WAAA,CAAA;;;;;;;;;;AAGrB,IAAA,YAAY;AAEpB;;AAEG;IACK,OAAO,GAAe,EAAE;AAEhC;;AAEG;AACsB,IAAA,KAAK;AAE9B;;;AAGG;IACK,IAAI,GAAiC,QAAQ;AAErD;;;AAGG;IACK,QAAQ,GAA6C,MAAM;AAEnE;;AAEG;IACK,SAAS,GAAY,KAAK;AAElC;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;IACc,cAAc,GAAoB,EAAE;AAErD;;AAEG;IACc,YAAY,GAAW,CAAC;AAEzC;;AAEG;IACc,iBAAiB,GAAY,KAAK;AAEnD;;AAEG;AACM,IAAA,QAAQ;AAET,IAAA,gBAAgB;IAGxB,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAC3B,IAAI,CAAC,oBAAoB,EAAE;;;IAK/B,gBAAgB,GAAA;QACd,IAAI,CAAC,oBAAoB,EAAE;;IAG7B,iBAAiB,GAAA;QACf,IAAI,CAAC,oBAAoB,EAAE;AAC3B,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;AACvD,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC;YAC5D,IAAI,YAAY,EAAE;gBAChB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC;;;AAGlD,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;YAC5B,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;AAC7C,YAAA,IAAI,KAAK,IAAI,CAAC,EAAE;AACd,gBAAA,IAAI,CAAC,YAAY,GAAG,KAAK;;;;IAK/B,iBAAiB,GAAA;;AAEf,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAK;YAChD,IAAI,CAAC,oBAAoB,EAAE;AAC7B,SAAC,CAAC;QACF,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;AACrC,YAAA,UAAU,EAAE,IAAI;AAChB,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACd,SAAA,CAAC;;IAGJ,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE;;AAG7B,IAAA,MAAM,oBAAoB,GAAA;;AAEhC,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAKtE;AAED,QAAA,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;;AAEvB,YAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI;YAC7B,MAAM,OAAO,GAAgB,EAAE;AAE/B,YAAA,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE;AAC9B,gBAAA,MAAM,MAAM,GAAG,MAAM,OAAO,CAAC,YAAY,EAAE;gBAC3C,OAAO,CAAC,IAAI,CAAC,EAAE,GAAG,MAAM,EAAE,CAAC;;AAG7B,YAAA,IAAI,CAAC,cAAc,GAAG,OAAO;;aACxB,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;;AAElC,YAAA,IAAI,CAAC,iBAAiB,GAAG,KAAK;AAC9B,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,KAAK;gBAChD,KAAK,EAAE,MAAM,CAAC,KAAK;AACnB,gBAAA,KAAK,GAAG,MAAM,CAAC,KAAK,KAAK,SAAS,GAAG,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAW;gBAC3E,SAAS,EAAE,MAAM,CAAC,SAAS;gBAC3B,OAAO,EAAE,MAAM,CAAC,OAAO;AACvB,gBAAA,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAAI,KAAK;AACnC,aAAA,CAAC,CAAC;;aACE;AACL,YAAA,IAAI,CAAC,cAAc,GAAG,EAAE;;;AAI1B,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE;AAC9D,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;YAC/D,IAAI,YAAY,EAAE;AAChB,gBAAA,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC,KAAK;;;;AAKnC,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;YAC5B,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;AACxE,YAAA,IAAI,KAAK,IAAI,CAAC,EAAE;AACd,gBAAA,IAAI,CAAC,YAAY,GAAG,KAAK;;;;AAKvB,IAAA,cAAc,CAAC,MAAgB,EAAA;AACrC,QAAA,OAAO,MAAM,CAAC,KAAK,KAAK,SAAS,GAAG,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;;AAGzD,IAAA,cAAc,CAAC,KAAoB,EAAA;AACzC,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC;;AAGlE,IAAA,YAAY,CAAC,MAAgB,EAAA;AACnC,QAAA,IAAI,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAAE;QAEtC,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC;AACzC,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;;AAGlB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,IAAI,GAAG,CAAC,KAAK,KAAK,KAAK,CAAC;AACvE,QAAA,IAAI,KAAK,IAAI,CAAC,EAAE;AACd,YAAA,IAAI,CAAC,YAAY,GAAG,KAAK;;QAG3B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;;AAG/B,IAAA,WAAW,GAAG,CAAC,MAAgB,KAAI;AACzC,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;AAC3B,KAAC;AAEO,IAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;AAC/C,QAAA,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI;AAC/B,QAAA,IAAI,QAAQ,GAAG,IAAI,CAAC,YAAY;AAEhC,QAAA,QAAQ,KAAK,CAAC,GAAG;AACf,YAAA,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE;gBACtB,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC;gBACnC;AACF,YAAA,KAAK,YAAY;gBACf,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;gBAClC;AACF,YAAA,KAAK,MAAM;gBACT,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,IAAI,CAAC,gBAAgB,EAAE;gBAClC;AACF,YAAA,KAAK,KAAK;gBACR,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,QAAQ,GAAG,IAAI,CAAC,eAAe,EAAE;gBACjC;AACF,YAAA,KAAK,OAAO;AACZ,YAAA,KAAK,GAAG;gBACN,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;oBACrC,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;;gBAEtD;AACF,YAAA;gBACE;;AAGJ,QAAA,IAAI,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE;AAClC,YAAA,IAAI,CAAC,YAAY,GAAG,QAAQ;AAC5B,YAAA,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;AAC3B,YAAA,IAAI,cAAc,CAAC,QAAQ,CAAC,EAAE;gBAC5B,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;;;AAGjD,KAAC;AAEO,IAAA,eAAe,CAAC,SAAiB,EAAA;AACvC,QAAA,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI;AAC/B,QAAA,IAAI,KAAK,GAAG,IAAI,CAAC,YAAY;AAC7B,QAAA,MAAM,MAAM,GAAG,cAAc,CAAC,MAAM;AAEpC,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,EAAE;YAC/B,KAAK,GAAG,CAAC,KAAK,GAAG,SAAS,GAAG,MAAM,IAAI,MAAM;YAC7C,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE;AACnC,gBAAA,OAAO,KAAK;;;QAGhB,OAAO,IAAI,CAAC,YAAY;;IAGlB,gBAAgB,GAAA;AACtB,QAAA,OAAO,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC;;IAGpD,eAAe,GAAA;AACrB,QAAA,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE;YACxD,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,QAAQ;AAAE,gBAAA,OAAO,CAAC;;AAEhD,QAAA,OAAO,CAAC;;AAGF,IAAA,YAAY,CAAC,KAAa,EAAA;AAChC,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY;QACnC,MAAM,OAAO,GAAG,SAAS,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC,KAAK,CAAgB;QAC7E,OAAO,EAAE,KAAK,EAAE;;IAGlB,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI;AAEjE,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,sBAAsB,EAAE,IAAI;AAC5B,YAAA,CAAC,CAAQ,KAAA,EAAA,IAAI,CAAE,CAAA,GAAG,IAAI;AACtB,YAAA,CAAC,YAAY,IAAI,CAAC,QAAQ,CAAE,CAAA,GAAG,IAAI;AACnC,YAAA,YAAY,EAAE,SAAS;AACvB,YAAA,UAAU,EAAE,QAAQ;SACrB;AAED,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAY,SAAA,EAAA,IAAI,CAAC,QAAQ,CAAA,CAAE,EAAA,EACtC,CAAc,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,SAAS,EAAC,sBAAsB,EAAA,EAC5C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,OAAO,EACd,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACnC,IAAI,EAAC,YAAY,EACjB,IAAI,EAAC,WAAW,EAChB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,QAAQ,EAAE,CAAC,IAEV,cAAc,CAAC,GAAG,CAAC,MAAM,IAAG;YAC3B,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC;AAC5C,YAAA,MAAM,UAAU,GAAG,QAAQ,KAAK,KAAK;AACrC,YAAA,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,IAAI,QAAQ;YAE9C,QACE,CACE,CAAA,QAAA,EAAA,EAAA,GAAG,EAAE,QAAQ,EACb,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,EAClB,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,KAAK,EAChB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,UAAU,GAAG,wBAAwB,GAAG,SAAS,EAAA,cAAA,EACzC,UAAU,GAAG,MAAM,GAAG,OAAO,mBAC5B,UAAU,GAAG,MAAM,GAAG,SAAS,EAC9C,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,EACvC,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,OAAO,EAAE,MAAM,CAAC,OAAO,EAAA,EAEvB,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,eAAe,EAAE,EAAA,MAAM,CAAC,KAAK,CAAQ,CAC1C;AAEb,SAAC,CAAC,CACE,CACO,CACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["LeSegmentedControl","__stencil_proxyCustomElement"],"sources":["src/components/le-segmented-control/le-segmented-control.css?tag=le-segmented-control&encapsulation=shadow","src/components/le-segmented-control/le-segmented-control.tsx"],"sourcesContent":["/**\n * le-segmented-control - Default mode styles\n */\n\n:host {\n  display: inline-block;\n  max-width: 100%;\n  --le-segmented-control-bg: var(--le-color-background-secondary);\n  --le-segmented-control-padding: var(--le-spacing-1);\n}\n:host([full-width]) {\n  width: 100%;\n}\n:host(.overflow-visible) {\n  max-width: none;\n}\n\n.le-segmented-control {\n  flex-direction: row;\n  white-space: nowrap;\n  border: none;\n  gap: 0;\n  background-color: var(--le-segmented-control-bg);\n  border-radius: calc(var(--le-radius-md) + var(--le-segmented-control-padding));\n  padding: var(--le-segmented-control-padding);\n}\n\n.le-segmented-control.overflow-auto {\n  overflow: auto;\n}\n.le-segmented-control.overflow-hidden {\n  overflow: hidden;\n}\n.le-segmented-control.overflow-visible {\n  overflow: visible;\n}\n.le-segmented-control.overflow-scroll {\n  overflow: scroll;\n}\n\n.le-segmented-control.full-width {\n  display: flex;\n  width: 100%;\n  width: calc(100% - var(--le-segmented-control-padding) * 2);\n}\n\n.le-segmented-control.disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.le-segmented-control:focus {\n  outline: 2px solid var(--le-color-focus);\n  outline-offset: 2px;\n}\n\n\n/* ============================================\n * SEGMENT BUTTON\n * ============================================ */\n\n.full-width .segment {\n  flex: 1;\n}\n\n.segment:focus-visible {\n  outline: 2px solid var(--le-focus-ring-color, var(--le-color-primary));\n  outline-offset: 2px;\n}\n\n.segment-active {\n  color: var(--le-segmented-text-color-active, var(--le-text-primary));\n}\n\n.segment-disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n","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"],"version":3}

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

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