le-kit 0.5.1 → 0.5.3

package/dist/esm/le-segmented-control.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-DFTm5BqT.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DFTm5BqT.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}`;
 
@@ -6,52 +6,82 @@ const LeSegmentedControl = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.leChange = createEvent(this, "leChange");
+        /**
+         * Array of options for the segmented control.
+         */
+        this.options = [];
+        /**
+         * Size of the control.
+         * @allowedValues small | medium | large
+         */
+        this.size = 'medium';
+        /**
+         * Scroll behavior for overflowing tabs.
+         * @allowedValues auto | hidden | visible | scroll
+         */
+        this.overflow = 'auto';
+        /**
+         * Whether the control should take full width.
+         */
+        this.fullWidth = false;
+        /**
+         * Whether the control is disabled.
+         */
+        this.disabled = false;
+        /**
+         * Internal tab configurations (built from children or tabs prop)
+         */
+        this.segmentConfigs = [];
+        /**
+         * Internal state for focused index (keyboard navigation)
+         */
+        this.focusedIndex = 0;
+        /**
+         * Whether we're using declarative mode (le-tab children)
+         */
+        this.isDeclarativeMode = false;
+        this.handleClick = (option) => {
+            this.selectOption(option);
+        };
+        this.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]);
+                }
+            }
+        };
     }
-    get el() { return getElement(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();
@@ -149,47 +179,6 @@ const LeSegmentedControl = class {
         }
         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;
@@ -226,13 +215,14 @@ const LeSegmentedControl = class {
             'full-width': fullWidth,
             'disabled': disabled,
         };
-        return (h(Host, { key: 'dfe7d637e07af470756a57e8878e455c472a2790', class: `overflow-${this.overflow}` }, h("le-component", { key: '5ffa309951b8f509fe0b0db09a9273256ec5a1b5', component: "le-segmented-control" }, h("div", { key: 'a448e9be4011230c689a4bab5963f1588496c1ba', class: classes, ref: el => (this.containerRef = el), role: "radiogroup", part: "container", onKeyDown: this.handleKeyDown, tabIndex: 0 }, segmentConfigs.map(option => {
+        return (h(Host, { key: 'dd580b3e3f6ca9fc5d8316978f0fcd77832d562f', class: `overflow-${this.overflow}` }, h("le-component", { key: 'baf3bf0005cdb4678eac78b73f3c7140ba631159', component: "le-segmented-control" }, h("div", { key: 'bc78e64043731781fddb107321c22187314f20c0', 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)));
         })))));
     }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "options": ["tabsChanged"]
     }; }

package/dist/esm/le-segmented-control.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"le-segmented-control.entry.js","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"],"names":[],"mappings":"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"}
+{"version":3,"file":"le-segmented-control.entry.js","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"],"names":[],"mappings":"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"}

package/dist/esm/le-side-panel-toggle.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DFTm5BqT.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DFTm5BqT.js';
 
 function parseShortcut(input) {
     if (!input) {
@@ -50,35 +50,64 @@ const LeSidePanelToggle = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.leSidePanelRequestToggle = createEvent(this, "leSidePanelRequestToggle");
+        /** Action to emit. Default toggles the panel. */
+        this.action = 'toggle';
+        /** Disables the toggle. */
+        this.disabled = false;
+        this.variant = 'solid';
+        this.color = 'primary';
+        this.size = 'medium';
+        this.selected = false;
+        this.fullWidth = false;
+        this.type = 'button';
+        this.align = 'center';
+        this.onDocumentKeyDown = (ev) => {
+            if (this.disabled) {
+                return;
+            }
+            const spec = this.shortcutSpec;
+            if (!spec) {
+                return;
+            }
+            if (isEditableTarget(ev.target)) {
+                return;
+            }
+            const key = (ev.key || '').toLowerCase();
+            if (key !== spec.key) {
+                return;
+            }
+            if (!!ev.altKey !== spec.alt) {
+                return;
+            }
+            if (!!ev.ctrlKey !== spec.ctrl) {
+                return;
+            }
+            if (!!ev.metaKey !== spec.meta) {
+                return;
+            }
+            if (!!ev.shiftKey !== spec.shift) {
+                return;
+            }
+            ev.preventDefault();
+            this.emitRequest();
+        };
+        this.onPanelStateChange = (ev) => {
+            const detail = ev.detail || {};
+            const requestedId = this.getResolvedPanelId() || '';
+            const eventId = detail.panelId || '';
+            if (requestedId !== eventId) {
+                return;
+            }
+            if (typeof detail.open === 'boolean') {
+                this.expanded = detail.open;
+                this.syncAriaExpanded();
+            }
+            if (typeof detail.collapsed === 'boolean') {
+                this.expanded = !detail.collapsed;
+                this.syncAriaExpanded();
+            }
+        };
     }
-    get el() { return getElement(this); }
-    /** Optional id used to target a specific panel. */
-    panelId;
-    /** Action to emit. Default toggles the panel. */
-    action = 'toggle';
-    /** Optional keyboard shortcut like `Mod+B` or `Alt+N`. */
-    shortcut;
-    /** Disables the toggle. */
-    disabled = false;
-    // Pass-through props for le-button
-    mode;
-    variant = 'solid';
-    color = 'primary';
-    size = 'medium';
-    selected = false;
-    fullWidth = false;
-    iconOnly;
-    iconStart;
-    iconEnd;
-    type = 'button';
-    href;
-    target;
-    align = 'center';
-    leSidePanelRequestToggle;
-    shortcutSpec;
-    expanded;
-    buttonEl;
-    forwardedNodes;
     onShortcutChanged() {
         this.shortcutSpec = parseShortcut(this.shortcut);
         this.syncShortcutListener();
@@ -134,52 +163,6 @@ const LeSidePanelToggle = class {
             action: this.action,
         });
     }
-    onDocumentKeyDown = (ev) => {
-        if (this.disabled) {
-            return;
-        }
-        const spec = this.shortcutSpec;
-        if (!spec) {
-            return;
-        }
-        if (isEditableTarget(ev.target)) {
-            return;
-        }
-        const key = (ev.key || '').toLowerCase();
-        if (key !== spec.key) {
-            return;
-        }
-        if (!!ev.altKey !== spec.alt) {
-            return;
-        }
-        if (!!ev.ctrlKey !== spec.ctrl) {
-            return;
-        }
-        if (!!ev.metaKey !== spec.meta) {
-            return;
-        }
-        if (!!ev.shiftKey !== spec.shift) {
-            return;
-        }
-        ev.preventDefault();
-        this.emitRequest();
-    };
-    onPanelStateChange = (ev) => {
-        const detail = ev.detail || {};
-        const requestedId = this.getResolvedPanelId() || '';
-        const eventId = detail.panelId || '';
-        if (requestedId !== eventId) {
-            return;
-        }
-        if (typeof detail.open === 'boolean') {
-            this.expanded = detail.open;
-            this.syncAriaExpanded();
-        }
-        if (typeof detail.collapsed === 'boolean') {
-            this.expanded = !detail.collapsed;
-            this.syncAriaExpanded();
-        }
-    };
     syncForwardedNodesIntoButton() {
         const btn = this.buttonEl;
         if (!btn || !this.forwardedNodes || this.forwardedNodes.length === 0) {
@@ -216,8 +199,9 @@ const LeSidePanelToggle = class {
         }
     }
     render() {
-        return (h("le-button", { key: '382be5b4b8c301dc1d5b8c2d8709bd83cfc08409', ref: el => (this.buttonEl = el), mode: this.mode, variant: this.variant, color: this.color, size: this.size, selected: this.selected, fullWidth: this.fullWidth, iconOnly: this.iconOnly, iconStart: this.iconStart, iconEnd: this.iconEnd, disabled: this.disabled, type: this.type, href: this.href, target: this.target, align: this.align, onClick: () => this.emitRequest() }));
+        return (h("le-button", { key: '172c8abec7d24a91974626d9bd083c7227400a2a', ref: el => (this.buttonEl = el), mode: this.mode, variant: this.variant, color: this.color, size: this.size, selected: this.selected, fullWidth: this.fullWidth, iconOnly: this.iconOnly, iconStart: this.iconStart, iconEnd: this.iconEnd, disabled: this.disabled, type: this.type, href: this.href, target: this.target, align: this.align, onClick: () => this.emitRequest() }));
     }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "shortcut": ["onShortcutChanged"]
     }; }

package/dist/esm/le-side-panel-toggle.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"le-side-panel-toggle.entry.js","sources":["src/components/le-side-panel-toggle/le-side-panel-toggle.tsx"],"sourcesContent":["import { Build, Component, Element, Event, EventEmitter, Prop, Watch, h } from '@stencil/core';\n\nexport type LeSidePanelToggleAction = 'toggle' | 'open' | 'close';\n\nexport type LeSidePanelRequestToggleDetail = {\n  panelId?: string;\n  action: LeSidePanelToggleAction;\n};\n\ntype ShortcutSpec = {\n  key: string;\n  alt: boolean;\n  ctrl: boolean;\n  meta: boolean;\n  shift: boolean;\n};\n\nfunction parseShortcut(input?: string): ShortcutSpec | undefined {\n  if (!input) {\n    return undefined;\n  }\n  const trimmed = input.trim();\n  if (!trimmed) {\n    return undefined;\n  }\n\n  const parts = trimmed\n    .split('+')\n    .map(p => p.trim())\n    .filter(Boolean);\n  if (parts.length === 0) {\n    return undefined;\n  }\n\n  const key = parts[parts.length - 1];\n  const mods = parts.slice(0, -1).map(m => m.toLowerCase());\n\n  const spec: ShortcutSpec = {\n    key: key.toLowerCase(),\n    alt: mods.includes('alt') || mods.includes('option'),\n    ctrl: mods.includes('ctrl') || mods.includes('control'),\n    meta: mods.includes('meta') || mods.includes('cmd') || mods.includes('command'),\n    shift: mods.includes('shift'),\n  };\n\n  if (mods.includes('mod')) {\n    // mac: Cmd, others: Ctrl\n    const isMac = typeof navigator !== 'undefined' && /mac/i.test(navigator.platform);\n    if (isMac) {\n      spec.meta = true;\n    } else {\n      spec.ctrl = true;\n    }\n  }\n\n  return spec;\n}\n\nfunction isEditableTarget(target: EventTarget | null): boolean {\n  if (!(target instanceof HTMLElement)) {\n    return false;\n  }\n  const tag = target.tagName.toLowerCase();\n  if (tag === 'input' || tag === 'textarea' || tag === 'select') {\n    return true;\n  }\n  return target.isContentEditable;\n}\n\n@Component({\n  tag: 'le-side-panel-toggle',\n  shadow: true,\n})\nexport class LeSidePanelToggle {\n  @Element() el: HTMLElement;\n\n  /** Optional id used to target a specific panel. */\n  @Prop() panelId?: string;\n\n  /** Action to emit. Default toggles the panel. */\n  @Prop() action: LeSidePanelToggleAction = 'toggle';\n\n  /** Optional keyboard shortcut like `Mod+B` or `Alt+N`. */\n  @Prop() shortcut?: string;\n\n  /** Disables the toggle. */\n  @Prop() disabled: boolean = false;\n\n  // Pass-through props for le-button\n  @Prop({ mutable: true, reflect: true }) mode: 'default' | 'admin';\n  @Prop() variant: 'solid' | 'outlined' | 'clear' | 'system' = 'solid';\n  @Prop() color: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' = 'primary';\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n  @Prop() selected: boolean = false;\n  @Prop({ reflect: true }) fullWidth: boolean = false;\n  @Prop() iconOnly?: string | Node;\n  @Prop() iconStart?: string | Node;\n  @Prop() iconEnd?: string | Node;\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n  @Prop() href?: string;\n  @Prop() target?: string;\n  @Prop() align: 'start' | 'center' | 'space-between' | 'end' = 'center';\n\n  @Event({\n    eventName: 'leSidePanelRequestToggle',\n    bubbles: true,\n    composed: true,\n  })\n  leSidePanelRequestToggle: EventEmitter<LeSidePanelRequestToggleDetail>;\n\n  private shortcutSpec?: ShortcutSpec;\n  private expanded: boolean | undefined;\n\n  private buttonEl?: HTMLElement;\n  private forwardedNodes?: ChildNode[];\n\n  @Watch('shortcut')\n  protected onShortcutChanged() {\n    this.shortcutSpec = parseShortcut(this.shortcut);\n    this.syncShortcutListener();\n  }\n\n  connectedCallback() {\n    this.shortcutSpec = parseShortcut(this.shortcut);\n    this.forwardedNodes = Array.from(this.el.childNodes);\n\n    if (Build.isBrowser) {\n      this.syncShortcutListener();\n      document.addEventListener('leSidePanelOpenChange', this.onPanelStateChange as any);\n      document.addEventListener('leSidePanelCollapsedChange', this.onPanelStateChange as any);\n    }\n  }\n\n  componentDidLoad() {\n    this.syncForwardedNodesIntoButton();\n    this.syncAriaExpanded();\n  }\n\n  componentDidRender() {\n    this.syncForwardedNodesIntoButton();\n    this.syncAriaExpanded();\n  }\n\n  disconnectedCallback() {\n    if (Build.isBrowser) {\n      document.removeEventListener('keydown', this.onDocumentKeyDown, true);\n      document.removeEventListener('leSidePanelOpenChange', this.onPanelStateChange as any);\n      document.removeEventListener('leSidePanelCollapsedChange', this.onPanelStateChange as any);\n    }\n  }\n\n  private syncShortcutListener() {\n    if (!Build.isBrowser) {\n      return;\n    }\n    if (this.shortcutSpec) {\n      document.addEventListener('keydown', this.onDocumentKeyDown, true);\n    } else {\n      document.removeEventListener('keydown', this.onDocumentKeyDown, true);\n    }\n  }\n\n  private getResolvedPanelId(): string | undefined {\n    if (this.panelId) {\n      return this.panelId;\n    }\n    const closestPanel = this.el?.closest?.('le-side-panel') as any;\n    if (closestPanel?.panelId) {\n      return closestPanel.panelId;\n    }\n    return undefined;\n  }\n\n  private emitRequest() {\n    if (this.disabled) {\n      return;\n    }\n\n    this.leSidePanelRequestToggle.emit({\n      panelId: this.getResolvedPanelId(),\n      action: this.action,\n    });\n  }\n\n  private onDocumentKeyDown = (ev: KeyboardEvent) => {\n    if (this.disabled) {\n      return;\n    }\n    const spec = this.shortcutSpec;\n    if (!spec) {\n      return;\n    }\n\n    if (isEditableTarget(ev.target)) {\n      return;\n    }\n\n    const key = (ev.key || '').toLowerCase();\n    if (key !== spec.key) {\n      return;\n    }\n\n    if (!!ev.altKey !== spec.alt) {\n      return;\n    }\n    if (!!ev.ctrlKey !== spec.ctrl) {\n      return;\n    }\n    if (!!ev.metaKey !== spec.meta) {\n      return;\n    }\n    if (!!ev.shiftKey !== spec.shift) {\n      return;\n    }\n\n    ev.preventDefault();\n    this.emitRequest();\n  };\n\n  private onPanelStateChange = (ev: CustomEvent<any>) => {\n    const detail = ev.detail || {};\n    const requestedId = this.getResolvedPanelId() || '';\n    const eventId = detail.panelId || '';\n\n    if (requestedId !== eventId) {\n      return;\n    }\n\n    if (typeof detail.open === 'boolean') {\n      this.expanded = detail.open;\n      this.syncAriaExpanded();\n    }\n    if (typeof detail.collapsed === 'boolean') {\n      this.expanded = !detail.collapsed;\n      this.syncAriaExpanded();\n    }\n  };\n\n  private syncForwardedNodesIntoButton() {\n    const btn = this.buttonEl as any;\n    if (!btn || !this.forwardedNodes || this.forwardedNodes.length === 0) {\n      return;\n    }\n\n    for (const node of this.forwardedNodes) {\n      if (!node) {\n        continue;\n      }\n      if (node.parentNode !== btn) {\n        try {\n          btn.appendChild(node);\n        } catch {\n          // ignore\n        }\n      }\n    }\n  }\n\n  private syncAriaExpanded() {\n    const value = typeof this.expanded === 'boolean' ? String(this.expanded) : null;\n    const hostBtn = this.buttonEl as any;\n    if (!hostBtn) {\n      return;\n    }\n\n    // Best-effort: set on the actual internal <button>/<a> inside le-button.\n    const inner = (hostBtn.shadowRoot?.querySelector?.('[part=\"button\"]') as HTMLElement) || null;\n    const target = inner || hostBtn;\n    if (value) {\n      target.setAttribute('aria-expanded', value);\n    } else {\n      target.removeAttribute('aria-expanded');\n    }\n  }\n\n  render() {\n    return (\n      <le-button\n        ref={el => (this.buttonEl = el as HTMLElement)}\n        mode={this.mode}\n        variant={this.variant}\n        color={this.color}\n        size={this.size}\n        selected={this.selected}\n        fullWidth={this.fullWidth}\n        iconOnly={this.iconOnly as any}\n        iconStart={this.iconStart as any}\n        iconEnd={this.iconEnd as any}\n        disabled={this.disabled}\n        type={this.type}\n        href={this.href}\n        target={this.target}\n        align={this.align}\n        onClick={() => this.emitRequest()}\n      />\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"le-side-panel-toggle.entry.js","sources":["src/components/le-side-panel-toggle/le-side-panel-toggle.tsx"],"sourcesContent":["import { Build, Component, Element, Event, EventEmitter, Prop, Watch, h } from '@stencil/core';\n\nexport type LeSidePanelToggleAction = 'toggle' | 'open' | 'close';\n\nexport type LeSidePanelRequestToggleDetail = {\n  panelId?: string;\n  action: LeSidePanelToggleAction;\n};\n\ntype ShortcutSpec = {\n  key: string;\n  alt: boolean;\n  ctrl: boolean;\n  meta: boolean;\n  shift: boolean;\n};\n\nfunction parseShortcut(input?: string): ShortcutSpec | undefined {\n  if (!input) {\n    return undefined;\n  }\n  const trimmed = input.trim();\n  if (!trimmed) {\n    return undefined;\n  }\n\n  const parts = trimmed\n    .split('+')\n    .map(p => p.trim())\n    .filter(Boolean);\n  if (parts.length === 0) {\n    return undefined;\n  }\n\n  const key = parts[parts.length - 1];\n  const mods = parts.slice(0, -1).map(m => m.toLowerCase());\n\n  const spec: ShortcutSpec = {\n    key: key.toLowerCase(),\n    alt: mods.includes('alt') || mods.includes('option'),\n    ctrl: mods.includes('ctrl') || mods.includes('control'),\n    meta: mods.includes('meta') || mods.includes('cmd') || mods.includes('command'),\n    shift: mods.includes('shift'),\n  };\n\n  if (mods.includes('mod')) {\n    // mac: Cmd, others: Ctrl\n    const isMac = typeof navigator !== 'undefined' && /mac/i.test(navigator.platform);\n    if (isMac) {\n      spec.meta = true;\n    } else {\n      spec.ctrl = true;\n    }\n  }\n\n  return spec;\n}\n\nfunction isEditableTarget(target: EventTarget | null): boolean {\n  if (!(target instanceof HTMLElement)) {\n    return false;\n  }\n  const tag = target.tagName.toLowerCase();\n  if (tag === 'input' || tag === 'textarea' || tag === 'select') {\n    return true;\n  }\n  return target.isContentEditable;\n}\n\n@Component({\n  tag: 'le-side-panel-toggle',\n  shadow: true,\n})\nexport class LeSidePanelToggle {\n  @Element() el: HTMLElement;\n\n  /** Optional id used to target a specific panel. */\n  @Prop() panelId?: string;\n\n  /** Action to emit. Default toggles the panel. */\n  @Prop() action: LeSidePanelToggleAction = 'toggle';\n\n  /** Optional keyboard shortcut like `Mod+B` or `Alt+N`. */\n  @Prop() shortcut?: string;\n\n  /** Disables the toggle. */\n  @Prop() disabled: boolean = false;\n\n  // Pass-through props for le-button\n  @Prop({ mutable: true, reflect: true }) mode: 'default' | 'admin';\n  @Prop() variant: 'solid' | 'outlined' | 'clear' | 'system' = 'solid';\n  @Prop() color: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' = 'primary';\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n  @Prop() selected: boolean = false;\n  @Prop({ reflect: true }) fullWidth: boolean = false;\n  @Prop() iconOnly?: string | Node;\n  @Prop() iconStart?: string | Node;\n  @Prop() iconEnd?: string | Node;\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n  @Prop() href?: string;\n  @Prop() target?: string;\n  @Prop() align: 'start' | 'center' | 'space-between' | 'end' = 'center';\n\n  @Event({\n    eventName: 'leSidePanelRequestToggle',\n    bubbles: true,\n    composed: true,\n  })\n  leSidePanelRequestToggle: EventEmitter<LeSidePanelRequestToggleDetail>;\n\n  private shortcutSpec?: ShortcutSpec;\n  private expanded: boolean | undefined;\n\n  private buttonEl?: HTMLElement;\n  private forwardedNodes?: ChildNode[];\n\n  @Watch('shortcut')\n  protected onShortcutChanged() {\n    this.shortcutSpec = parseShortcut(this.shortcut);\n    this.syncShortcutListener();\n  }\n\n  connectedCallback() {\n    this.shortcutSpec = parseShortcut(this.shortcut);\n    this.forwardedNodes = Array.from(this.el.childNodes);\n\n    if (Build.isBrowser) {\n      this.syncShortcutListener();\n      document.addEventListener('leSidePanelOpenChange', this.onPanelStateChange as any);\n      document.addEventListener('leSidePanelCollapsedChange', this.onPanelStateChange as any);\n    }\n  }\n\n  componentDidLoad() {\n    this.syncForwardedNodesIntoButton();\n    this.syncAriaExpanded();\n  }\n\n  componentDidRender() {\n    this.syncForwardedNodesIntoButton();\n    this.syncAriaExpanded();\n  }\n\n  disconnectedCallback() {\n    if (Build.isBrowser) {\n      document.removeEventListener('keydown', this.onDocumentKeyDown, true);\n      document.removeEventListener('leSidePanelOpenChange', this.onPanelStateChange as any);\n      document.removeEventListener('leSidePanelCollapsedChange', this.onPanelStateChange as any);\n    }\n  }\n\n  private syncShortcutListener() {\n    if (!Build.isBrowser) {\n      return;\n    }\n    if (this.shortcutSpec) {\n      document.addEventListener('keydown', this.onDocumentKeyDown, true);\n    } else {\n      document.removeEventListener('keydown', this.onDocumentKeyDown, true);\n    }\n  }\n\n  private getResolvedPanelId(): string | undefined {\n    if (this.panelId) {\n      return this.panelId;\n    }\n    const closestPanel = this.el?.closest?.('le-side-panel') as any;\n    if (closestPanel?.panelId) {\n      return closestPanel.panelId;\n    }\n    return undefined;\n  }\n\n  private emitRequest() {\n    if (this.disabled) {\n      return;\n    }\n\n    this.leSidePanelRequestToggle.emit({\n      panelId: this.getResolvedPanelId(),\n      action: this.action,\n    });\n  }\n\n  private onDocumentKeyDown = (ev: KeyboardEvent) => {\n    if (this.disabled) {\n      return;\n    }\n    const spec = this.shortcutSpec;\n    if (!spec) {\n      return;\n    }\n\n    if (isEditableTarget(ev.target)) {\n      return;\n    }\n\n    const key = (ev.key || '').toLowerCase();\n    if (key !== spec.key) {\n      return;\n    }\n\n    if (!!ev.altKey !== spec.alt) {\n      return;\n    }\n    if (!!ev.ctrlKey !== spec.ctrl) {\n      return;\n    }\n    if (!!ev.metaKey !== spec.meta) {\n      return;\n    }\n    if (!!ev.shiftKey !== spec.shift) {\n      return;\n    }\n\n    ev.preventDefault();\n    this.emitRequest();\n  };\n\n  private onPanelStateChange = (ev: CustomEvent<any>) => {\n    const detail = ev.detail || {};\n    const requestedId = this.getResolvedPanelId() || '';\n    const eventId = detail.panelId || '';\n\n    if (requestedId !== eventId) {\n      return;\n    }\n\n    if (typeof detail.open === 'boolean') {\n      this.expanded = detail.open;\n      this.syncAriaExpanded();\n    }\n    if (typeof detail.collapsed === 'boolean') {\n      this.expanded = !detail.collapsed;\n      this.syncAriaExpanded();\n    }\n  };\n\n  private syncForwardedNodesIntoButton() {\n    const btn = this.buttonEl as any;\n    if (!btn || !this.forwardedNodes || this.forwardedNodes.length === 0) {\n      return;\n    }\n\n    for (const node of this.forwardedNodes) {\n      if (!node) {\n        continue;\n      }\n      if (node.parentNode !== btn) {\n        try {\n          btn.appendChild(node);\n        } catch {\n          // ignore\n        }\n      }\n    }\n  }\n\n  private syncAriaExpanded() {\n    const value = typeof this.expanded === 'boolean' ? String(this.expanded) : null;\n    const hostBtn = this.buttonEl as any;\n    if (!hostBtn) {\n      return;\n    }\n\n    // Best-effort: set on the actual internal <button>/<a> inside le-button.\n    const inner = (hostBtn.shadowRoot?.querySelector?.('[part=\"button\"]') as HTMLElement) || null;\n    const target = inner || hostBtn;\n    if (value) {\n      target.setAttribute('aria-expanded', value);\n    } else {\n      target.removeAttribute('aria-expanded');\n    }\n  }\n\n  render() {\n    return (\n      <le-button\n        ref={el => (this.buttonEl = el as HTMLElement)}\n        mode={this.mode}\n        variant={this.variant}\n        color={this.color}\n        size={this.size}\n        selected={this.selected}\n        fullWidth={this.fullWidth}\n        iconOnly={this.iconOnly as any}\n        iconStart={this.iconStart as any}\n        iconEnd={this.iconEnd as any}\n        disabled={this.disabled}\n        type={this.type}\n        href={this.href}\n        target={this.target}\n        align={this.align}\n        onClick={() => this.emitRequest()}\n      />\n    );\n  }\n}\n"],"names":[],"mappings":"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"}