aeico-components 0.1.4 → 0.1.5

package/dist/chunks/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sources":["../../src/radio-group/radio-group.ts","../../src/radio-group/radio.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html, tags } from 'aeico';\nimport type { ButtonColor, ButtonVariant, ButtonSize } from '../button';\nimport { t } from 'aeico-localize';\nimport type { RadioGroupMode, RadioGroupOption, RadioGroupOptions } from './defines';\nimport Radio from './radio';\nimport style from '../styles/components/radio-group.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\n\nclass RadioGroup extends AeicoField {\n  protected fieldElement: HTMLInputElement | null = null;\n\n  private _slotEl: HTMLSlotElement | null = null;\n  private _slotOptions: Radio[] = [];\n\n  private static _instanceCount = 0;\n  private readonly _groupName: string;\n\n  static tagName = 'radio-group';\n\n  static props: Props = {\n    options: { type: Array },\n    mode: { type: String },\n    color: { type: String },\n    variant: { type: String },\n    size: { type: String },\n    allowEmpty: { type: Boolean },\n  };\n\n  declare options?: RadioGroupOptions;\n  declare mode?: RadioGroupMode;\n  declare color?: ButtonColor;\n  declare variant?: ButtonVariant;\n  declare size?: ButtonSize;\n  declare allowEmpty?: boolean;\n\n  protected static styles = [variables, sizeCSS, colorCSS, style];\n\n  constructor() {\n    super();\n    this._groupName = `rg-${++RadioGroup._instanceCount}`;\n  }\n\n  private _optLabel(opt: RadioGroupOption): string {\n    if (opt !== null && typeof opt === 'object') {\n      return t(String(opt.label), String(opt.label));\n    }\n    return String(opt);\n  }\n\n  private _optValue(opt: RadioGroupOption): string {\n    if (opt !== null && typeof opt === 'object') return String(opt.value);\n    return String(opt);\n  }\n\n  private _allOptions(): Array<{ label: string; value: string; disabled?: boolean }> {\n    const from_props = (Array.isArray(this.options) ? this.options : []).map((o) => ({\n      label: this._optLabel(o),\n      value: this._optValue(o),\n    }));\n\n    const from_slot = this._slotOptions.map((el) => ({\n      label: el.textContent?.trim() || el.value,\n      value: el.value,\n      disabled: el.disabled,\n    }));\n\n    return [...from_props, ...from_slot];\n  }\n\n  private _onSlotChange(): void {\n    if (!this._slotEl) return;\n\n    this._slotOptions = (this._slotEl.assignedElements({ flatten: true }) as HTMLElement[]).filter(\n      (el) => el.tagName.toLowerCase() === 'ae-radio',\n    ) as Radio[];\n    this.update();\n  }\n\n  // Single handler for radio inputs — handles both select and deselect.\n  // Only uses `click` (not `change`) because `change` fires before `click`;\n  // if we set value in `change`, the `click` handler would see the updated\n  // value and immediately deselect.\n  private _boundOnRadioClick = (e: Event) => {\n    const input = e.target as HTMLInputElement;\n    const current = this.value ?? '';\n    if (input.value === current) {\n      if (this.allowEmpty) {\n        input.checked = false;\n        this.setValue('', { silent: false, action: 'change' });\n      }\n      // !allowEmpty: do nothing\n    } else {\n      this.setValue(input.value, { silent: false, action: 'change' });\n    }\n  };\n\n  private _boundOnButtonClick = (e: Event) => {\n    const btn = e.currentTarget as HTMLElement;\n    const val = btn.dataset.value ?? '';\n    const current = this.value ?? '';\n    // Toggle off if clicking already-selected option\n    if (val === current) {\n      if (this.allowEmpty) {\n        this.setValue('', { silent: false, action: 'change' });\n      }\n      // !allowEmpty: already selected, do nothing\n    } else {\n      this.setValue(val, { silent: false, action: 'change' });\n    }\n  };\n\n  protected getValue(): string {\n    return this.value ?? '';\n  }\n\n  protected writeValue(_value: any): void {\n    // All visual state is driven by builder diff on next render;\n    // for native radio inputs we need to sync checked immediately.\n    // The render() reads this.value, so update handles the rest.\n  }\n\n  protected onReset(): void {\n    this.setValue(this.defaultValue ?? '', { silent: false, action: 'reset' });\n  }\n\n  protected onClear(): void {\n    this.setValue('', { silent: false, action: 'clear' });\n  }\n\n  render() {\n    const mode = (this.mode as RadioGroupMode) || 'default';\n    const opts = this._allOptions();\n    const current = this.value ?? '';\n\n    return html(({ div, slot }) => {\n      div({ className: 'rg-container' }, () => {\n        if (mode === 'default') {\n          this._renderRadio(opts, current);\n        } else {\n          this._renderButtons(opts, current, mode);\n        }\n      });\n\n      if (this.allowEmpty) this.renderClearButton();\n      this.renderResetButton();\n\n      // Hidden slot — captures <option> light DOM children\n      this._slotEl = slot({\n        style: { display: 'none' },\n        '@slotchange': () => this._onSlotChange(),\n      });\n    });\n  }\n\n  private _renderRadio(\n    opts: Array<{ label: string; value: string; disabled?: boolean }>,\n    current: string,\n  ): void {\n    const { label, input, span } = tags;\n    for (const opt of opts) {\n      const isChecked = opt.value === current;\n\n      label({ key: `opt-${opt.value}`, className: 'rg-radio-option' }, () => {\n        const el = input({\n          type: 'radio',\n          className: 'rg-radio-input',\n          name: this._groupName,\n          value: opt.value,\n          disabled: Boolean(this.disabled) || Boolean(opt.disabled),\n          '@click': this._boundOnRadioClick,\n        });\n        // Sync DOM property directly — setAttribute('checked') doesn't work\n        // after user interaction; only the .checked property controls state.\n        el.checked = isChecked;\n        // Keep fieldElement pointing to first radio for base-class compat\n        if (!this.fieldElement) this.fieldElement = el;\n        span({ className: 'rg-radio-label', textContent: opt.label });\n      });\n    }\n  }\n\n  private _renderButtons(\n    opts: Array<{ label: string; value: string; disabled?: boolean }>,\n    current: string,\n    mode: RadioGroupMode,\n  ): void {\n    const { button } = tags;\n    const count = opts.length;\n    for (let i = 0; i < count; i++) {\n      const opt = opts[i];\n      const isSelected = opt.value === current;\n\n      // Position class for button-group border-radius (CSS handles all styling)\n      let posClass = '';\n      if (mode === 'button-group') {\n        if (count === 1) posClass = ' only';\n        else if (i === 0) posClass = ' first';\n        else if (i === count - 1) posClass = ' last';\n        else posClass = ' inner';\n      }\n\n      button({\n        key: `opt-${opt.value}`,\n        className: `rg-btn${isSelected ? ' selected' : ''}${posClass}`,\n        textContent: opt.label,\n        disabled: Boolean(this.disabled) || Boolean(opt.disabled),\n        'data-value': opt.value,\n        '@click': this._boundOnButtonClick,\n      });\n    }\n  }\n}\n\nRadioGroup.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-radio-group': RadioGroup;\n  }\n}\n\nexport default RadioGroup;\nexport type RadioGroupProps = InferProps<typeof RadioGroup>;\n","import AeicoComponent from '../aeico-component';\nimport type { InferProps, Props } from 'aeico';\n\n/**\n * AeRadio — structured option element for ae-radio-group.\n *\n * Replaces the native `<option>` approach with a custom element that is\n * fully extensible.  Current surface:\n *   - `value`    — option value submitted / matched against radio-group value\n *   - `disabled` — disables this individual option (independent of the group)\n *   - Light DOM  — label content; can be plain text or rich HTML (icons, etc.)\n *\n * This element has **no shadow DOM** — it is a pure data / content carrier.\n * ae-radio-group reads its properties and light-DOM content, then renders\n * the appropriate UI (radio input, button, segmented pill, …).\n *\n * @example Plain text options\n * ```html\n * <ae-radio-group mode=\"button\" color=\"primary\" value=\"a\">\n *   <ae-radio value=\"a\">Option A</ae-radio>\n *   <ae-radio value=\"b\">Option B</ae-radio>\n *   <ae-radio value=\"c\" disabled>Option C</ae-radio>\n * </ae-radio-group>\n * ```\n *\n * @example Rich content options (icons)\n * ```html\n * <ae-radio-group mode=\"button\" color=\"primary\" value=\"list\">\n *   <ae-radio value=\"list\"><ae-icon name=\"list\"></ae-icon> List</ae-radio>\n *   <ae-radio value=\"grid\"><ae-icon name=\"grid\"></ae-icon> Grid</ae-radio>\n * </ae-radio-group>\n * ```\n */\nclass Radio extends AeicoComponent {\n  static tagName = 'radio';\n\n  /** No shadow DOM — this element is a transparent data/content carrier. */\n  static override useShadowDOM = false;\n\n  static override props: Props = {\n    value: { type: String },\n    disabled: { type: Boolean },\n  };\n\n  declare value: string;\n  declare disabled?: boolean;\n}\n\nRadio.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-radio': Radio;\n  }\n}\n\nexport default Radio;\nexport type RadioProps = InferProps<typeof Radio>;\n"],"names":["variables"],"mappings":"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"}
+{"version":3,"file":"radio.js","sources":["../../src/radio-group/radio-group.ts","../../src/radio-group/radio.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html, tags } from 'aeico';\nimport type { ButtonColor, ButtonVariant, ButtonSize } from '../button';\nimport { t } from 'aeico-localize';\nimport type { RadioGroupMode, RadioGroupOption, RadioGroupOptions } from './defines';\nimport Radio from './radio';\nimport style from '../styles/components/radio-group.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\n\nclass RadioGroup extends AeicoField {\n  protected fieldElement: HTMLInputElement | null = null;\n\n  private _slotEl: HTMLSlotElement | null = null;\n  private _slotOptions: Radio[] = [];\n\n  private static _instanceCount = 0;\n  private readonly _groupName: string;\n\n  static tagName = 'radio-group';\n\n  static props: Props = {\n    options: { type: Array },\n    mode: { type: String },\n    color: { type: String },\n    variant: { type: String },\n    size: { type: String },\n    allowEmpty: { type: Boolean },\n  };\n\n  declare options?: RadioGroupOptions;\n  declare mode?: RadioGroupMode;\n  declare color?: ButtonColor;\n  declare variant?: ButtonVariant;\n  declare size?: ButtonSize;\n  declare allowEmpty?: boolean;\n\n  protected static styles = [variables, sizeCSS, colorCSS, style];\n\n  constructor() {\n    super();\n    this._groupName = `rg-${++RadioGroup._instanceCount}`;\n  }\n\n  private _optLabel(opt: RadioGroupOption): string {\n    if (opt !== null && typeof opt === 'object') {\n      return t(String(opt.label), String(opt.label));\n    }\n    return String(opt);\n  }\n\n  private _optValue(opt: RadioGroupOption): string {\n    if (opt !== null && typeof opt === 'object') return String(opt.value);\n    return String(opt);\n  }\n\n  private _allOptions(): Array<{ label: string; value: string; disabled?: boolean }> {\n    const from_props = (Array.isArray(this.options) ? this.options : []).map((o) => ({\n      label: this._optLabel(o),\n      value: this._optValue(o),\n    }));\n\n    const from_slot = this._slotOptions.map((el) => ({\n      label: el.textContent?.trim() || el.value,\n      value: el.value,\n      disabled: el.disabled,\n    }));\n\n    return [...from_props, ...from_slot];\n  }\n\n  private _onSlotChange(): void {\n    if (!this._slotEl) return;\n\n    this._slotOptions = (this._slotEl.assignedElements({ flatten: true }) as HTMLElement[]).filter(\n      (el) => el.tagName.toLowerCase() === 'ae-radio',\n    ) as Radio[];\n    this.update();\n  }\n\n  // Single handler for radio inputs — handles both select and deselect.\n  // Only uses `click` (not `change`) because `change` fires before `click`;\n  // if we set value in `change`, the `click` handler would see the updated\n  // value and immediately deselect.\n  private _boundOnRadioClick = (e: Event) => {\n    const input = e.target as HTMLInputElement;\n    const current = this.value ?? '';\n    if (input.value === current) {\n      if (this.allowEmpty) {\n        input.checked = false;\n        this.setValue('', { silent: false, action: 'change' });\n      }\n      // !allowEmpty: do nothing\n    } else {\n      this.setValue(input.value, { silent: false, action: 'change' });\n    }\n  };\n\n  private _boundOnButtonClick = (e: Event) => {\n    const btn = e.currentTarget as HTMLElement;\n    const val = btn.dataset.value ?? '';\n    const current = this.value ?? '';\n    // Toggle off if clicking already-selected option\n    if (val === current) {\n      if (this.allowEmpty) {\n        this.setValue('', { silent: false, action: 'change' });\n      }\n      // !allowEmpty: already selected, do nothing\n    } else {\n      this.setValue(val, { silent: false, action: 'change' });\n    }\n  };\n\n  protected getValue(): string {\n    return this.value ?? '';\n  }\n\n  protected writeValue(_value: string): void {\n    // All visual state is driven by builder diff on next render;\n    // for native radio inputs we need to sync checked immediately.\n    // The render() reads this.value, so update handles the rest.\n  }\n\n  protected onReset(): void {\n    this.setValue(this.defaultValue ?? '', { silent: false, action: 'reset' });\n  }\n\n  protected onClear(): void {\n    this.setValue('', { silent: false, action: 'clear' });\n  }\n\n  render() {\n    const mode = (this.mode as RadioGroupMode) || 'default';\n    const opts = this._allOptions();\n    const current = this.value ?? '';\n\n    return html(({ div, slot }) => {\n      div({ className: 'rg-container' }, () => {\n        if (mode === 'default') {\n          this._renderRadio(opts, current);\n        } else {\n          this._renderButtons(opts, current, mode);\n        }\n      });\n\n      if (this.allowEmpty) this.renderClearButton();\n      this.renderResetButton();\n\n      // Hidden slot — captures <option> light DOM children\n      this._slotEl = slot({\n        style: { display: 'none' },\n        '@slotchange': () => this._onSlotChange(),\n      });\n    });\n  }\n\n  private _renderRadio(\n    opts: Array<{ label: string; value: string; disabled?: boolean }>,\n    current: string,\n  ): void {\n    const { label, input, span } = tags;\n    for (const opt of opts) {\n      const isChecked = opt.value === current;\n\n      label({ key: `opt-${opt.value}`, className: 'rg-radio-option' }, () => {\n        const el = input({\n          type: 'radio',\n          className: 'rg-radio-input',\n          name: this._groupName,\n          value: opt.value,\n          disabled: Boolean(this.disabled) || Boolean(opt.disabled),\n          '@click': this._boundOnRadioClick,\n        });\n        // Sync DOM property directly — setAttribute('checked') doesn't work\n        // after user interaction; only the .checked property controls state.\n        el.checked = isChecked;\n        // Keep fieldElement pointing to first radio for base-class compat\n        if (!this.fieldElement) this.fieldElement = el;\n        span({ className: 'rg-radio-label', textContent: opt.label });\n      });\n    }\n  }\n\n  private _renderButtons(\n    opts: Array<{ label: string; value: string; disabled?: boolean }>,\n    current: string,\n    mode: RadioGroupMode,\n  ): void {\n    const { button } = tags;\n    const count = opts.length;\n    for (let i = 0; i < count; i++) {\n      const opt = opts[i];\n      const isSelected = opt.value === current;\n\n      // Position class for button-group border-radius (CSS handles all styling)\n      let posClass = '';\n      if (mode === 'button-group') {\n        if (count === 1) posClass = ' only';\n        else if (i === 0) posClass = ' first';\n        else if (i === count - 1) posClass = ' last';\n        else posClass = ' inner';\n      }\n\n      button({\n        key: `opt-${opt.value}`,\n        className: `rg-btn${isSelected ? ' selected' : ''}${posClass}`,\n        textContent: opt.label,\n        disabled: Boolean(this.disabled) || Boolean(opt.disabled),\n        'data-value': opt.value,\n        '@click': this._boundOnButtonClick,\n      });\n    }\n  }\n}\n\nRadioGroup.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-radio-group': RadioGroup;\n  }\n}\n\nexport default RadioGroup;\nexport type RadioGroupProps = InferProps<typeof RadioGroup>;\n","import AeicoComponent from '../aeico-component';\nimport type { InferProps, Props } from 'aeico';\n\n/**\n * AeRadio — structured option element for ae-radio-group.\n *\n * Replaces the native `<option>` approach with a custom element that is\n * fully extensible.  Current surface:\n *   - `value`    — option value submitted / matched against radio-group value\n *   - `disabled` — disables this individual option (independent of the group)\n *   - Light DOM  — label content; can be plain text or rich HTML (icons, etc.)\n *\n * This element has **no shadow DOM** — it is a pure data / content carrier.\n * ae-radio-group reads its properties and light-DOM content, then renders\n * the appropriate UI (radio input, button, segmented pill, …).\n *\n * @example Plain text options\n * ```html\n * <ae-radio-group mode=\"button\" color=\"primary\" value=\"a\">\n *   <ae-radio value=\"a\">Option A</ae-radio>\n *   <ae-radio value=\"b\">Option B</ae-radio>\n *   <ae-radio value=\"c\" disabled>Option C</ae-radio>\n * </ae-radio-group>\n * ```\n *\n * @example Rich content options (icons)\n * ```html\n * <ae-radio-group mode=\"button\" color=\"primary\" value=\"list\">\n *   <ae-radio value=\"list\"><ae-icon name=\"list\"></ae-icon> List</ae-radio>\n *   <ae-radio value=\"grid\"><ae-icon name=\"grid\"></ae-icon> Grid</ae-radio>\n * </ae-radio-group>\n * ```\n */\nclass Radio extends AeicoComponent {\n  static tagName = 'radio';\n\n  /** No shadow DOM — this element is a transparent data/content carrier. */\n  static override useShadowDOM = false;\n\n  static override props: Props = {\n    value: { type: String },\n    disabled: { type: Boolean },\n  };\n\n  declare value: string;\n  declare disabled?: boolean;\n}\n\nRadio.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-radio': Radio;\n  }\n}\n\nexport default Radio;\nexport type RadioProps = InferProps<typeof Radio>;\n"],"names":["variables"],"mappings":"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"}

package/dist/chunks/select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"select.cjs","sources":["../../src/select/select.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps } from 'aeico';\nimport { html, tags } from 'aeico';\nimport { t } from 'aeico-localize';\nimport type {\n  SelectOptionValue,\n  SelectOption,\n  SelectOptions,\n  SelectPosition,\n  SelectMultiValue,\n} from './defines';\nimport style from '../styles/components/select.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport SelectOptionElement from './select-option';\nimport '../tag/tag';\nimport { prop } from 'aeico';\n\n/**\n * Select component supporting single and multi-select modes, with options provided via both props and slots.\n * - `options` prop accepts an array of strings or objects with `value` and `label` for programmatic options.\n * - Slot content allows for declarative options using `<ae-select-option>` elements.\n * @example\n * <ae-select placeholder=\"Choose an option\" position=\"bottom\">\n *   <ae-select-option value=\"1\" label=\"Option 1\">Option 1</ae-select-option>\n *   <ae-select-option value=\"2\" label=\"Option 2\">Option 2</ae-select-option>\n * </ae-select>\n *\n */\nclass Select extends AeicoField<SelectOptionValue | SelectMultiValue> {\n  protected fieldElement = null;\n  private _isOpen = false;\n  private _triggerEl: HTMLElement | null = null;\n  private _dropdownEl: HTMLElement | null = null;\n  private _slotEl: HTMLSlotElement | null = null;\n  private _slotOptionData: Array<{ value: string; label: string }> = [];\n  private _selectedListEl: HTMLElement | null = null;\n\n  static tagName = 'select';\n\n  @prop({ type: Boolean, observe: false, reflect: false })\n  accessor _expanded: boolean = false;\n\n  @prop({ type: Array })\n  accessor options: SelectOptions | undefined;\n\n  @prop({ type: String })\n  accessor position: SelectPosition | undefined;\n\n  @prop({ type: String })\n  accessor placeholder: string | undefined;\n\n  @prop({ type: Boolean })\n  accessor multiple: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor expandable: boolean = false;\n\n  // Override base class value prop to support both string and array (multi-select).\n  // Uses field decorator (not accessor) because TypeScript TS2611 disallows overriding\n  // a parent class data property (declare value?) with an accessor in a subclass.\n  @prop({\n    type: String,\n    parser: (v) => {\n      if (v === null || v === undefined) return undefined;\n      try {\n        return JSON.parse(v);\n      } catch {\n        return v;\n      }\n    },\n    formatter: (v) => {\n      if (v === null || v === undefined) return '';\n      if (Array.isArray(v)) return JSON.stringify(v);\n      // eslint-disable-next-line @typescript-eslint/no-base-to-string\n      return String(v);\n    },\n  })\n  override value: SelectOptionValue | SelectMultiValue | undefined = undefined;\n\n  // Override base class defaultValue so arrays are JSON-serialized to the attribute,\n  // matching the value prop's parser/formatter. Without this override, setting\n  // defaultValue = ['a', 'b'] would be serialized as String(['a','b']) = \"a,b\",\n  // and reset() would restore a single string \"a,b\" instead of the array.\n  @prop({\n    type: String,\n    parser: (v) => {\n      if (v === null || v === undefined) return undefined;\n      try {\n        return JSON.parse(v);\n      } catch {\n        return v;\n      }\n    },\n    formatter: (v) => {\n      if (v === null || v === undefined) return '';\n      if (Array.isArray(v)) return JSON.stringify(v);\n      // eslint-disable-next-line @typescript-eslint/no-base-to-string\n      return String(v);\n    },\n  })\n  override defaultValue: SelectOptionValue | SelectMultiValue | undefined = undefined;\n\n  protected static styles = [variables, sizeCSS, style];\n\n  protected writeValue(_value: SelectOptionValue | SelectMultiValue): void {\n    // Reactive re-render via this.value prop change handles the display update\n  }\n\n  protected getValue(): any {\n    if (this.multiple) return this._getMultiValues();\n\n    return this.value || '';\n  }\n\n  private _getMultiValues(): SelectMultiValue {\n    if (Array.isArray(this.value)) return this.value;\n    if (this.value != null && this.value !== '') return [this.value];\n\n    return [];\n  }\n\n  protected onDisabledChanged(_newValue: boolean): void {\n    // disabled is a reactive prop — render() already picks it up automatically\n  }\n\n  protected onUpdated(_changedProps: Map<string, unknown>): void {\n    if (!this.multiple || this.expandable) {\n      if (this._expanded) this._expanded = false;\n      return;\n    }\n    const list = this._selectedListEl;\n    if (!list) return;\n    const overflowing = list.scrollWidth > list.clientWidth + 1;\n    if (overflowing !== this._expanded) this._expanded = overflowing;\n  }\n\n  private _findLabel(value: SelectOptionValue): string {\n    const strVal = String(value);\n    if (Array.isArray(this.options)) {\n      for (const opt of this.options) {\n        if (this._isSelectOption(opt)) {\n          if (String(opt.value) === strVal) return t(opt.label, opt.label);\n        } else {\n          if (String(opt) === strVal) return strVal;\n        }\n      }\n    }\n\n    for (const opt of this._slotOptionData) {\n      if (opt.value === strVal) return opt.label;\n    }\n\n    return strVal;\n  }\n\n  private _onSlotChange(): void {\n    if (!this._slotEl) return;\n    const data: Array<{ value: string; label: string }> = [];\n    for (const el of this._slotEl.assignedElements({ flatten: true })) {\n      if (el.tagName.toLowerCase() !== 'ae-select-option') continue;\n      const optEl = el as SelectOptionElement;\n      data.push({\n        value: optEl.value ?? el.getAttribute('value') ?? '',\n        label: optEl.label || el.textContent?.trim() || '',\n      });\n    }\n    this._slotOptionData = data;\n    this.update();\n  }\n\n  private _toggleDropdown(): void {\n    if (this._isOpen) {\n      this._closeDropdown();\n    } else {\n      this._openDropdown();\n    }\n  }\n\n  private _openDropdown(): void {\n    this._isOpen = true;\n    this._syncOpenState();\n  }\n\n  private _closeDropdown(): void {\n    this._isOpen = false;\n    this._syncOpenState();\n  }\n\n  private _syncOpenState(): void {\n    this._triggerEl?.classList.toggle('open', this._isOpen);\n    this._dropdownEl?.classList.toggle('open', this._isOpen);\n  }\n\n  private readonly _handleOutsideClick = (e: Event): void => {\n    if (!e.composedPath().includes(this)) {\n      this._closeDropdown();\n    }\n  };\n\n  private readonly _handleOptionSelect = (e: Event): void => {\n    const { value, label } = (e as CustomEvent<{ value: string; label: string }>).detail;\n    if (!this._slotOptionData.find((o) => o.value === value)) {\n      this._slotOptionData = [\n        ...this._slotOptionData.filter((o) => o.value !== value),\n        { value, label },\n      ];\n    }\n    if (this.multiple) {\n      const current = this._getMultiValues();\n      const idx = current.findIndex((v) => String(v) === value);\n      const next: SelectMultiValue =\n        idx >= 0 ? current.filter((_, i) => i !== idx) : [...current, value];\n\n      this.setValue(next, { silent: false, action: 'change' });\n    } else {\n      this.setValue(value, { silent: false, action: 'change' });\n      this._closeDropdown();\n    }\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this._handleOutsideClick);\n    this.addEventListener('selectoption', this._handleOptionSelect);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._handleOutsideClick);\n    this.removeEventListener('selectoption', this._handleOptionSelect);\n  }\n\n  private _syncSlotOptionsSelected(): void {\n    if (!this._slotEl) return;\n    const multiValues = this._getMultiValues();\n    for (const el of this._slotEl.assignedElements({ flatten: true })) {\n      if (el.tagName.toLowerCase() !== 'ae-select-option') continue;\n      const optEl = el as SelectOptionElement;\n      const optVal = optEl.value ?? el.getAttribute('value') ?? '';\n      const isSelected = this.multiple\n        ? multiValues.some((v) => String(v) === optVal)\n        : this.value != null && this.value !== '' && String(this.value) === optVal;\n      // undefined triggers removeAttribute via reactive setter\n      // (null would work too but undefined is type-safe for boolean | undefined)\n      optEl.selected = isSelected ? true : undefined;\n    }\n  }\n\n  render() {\n    const position = this.position || 'bottom';\n    const multiValues = this.multiple ? this._getMultiValues() : [];\n    const hasMultiSelection = this.multiple && multiValues.length > 0;\n    const selectedLabel =\n      !this.multiple && this.value != null && this.value !== ''\n        ? this._findLabel(this.value as SelectOptionValue)\n        : '';\n    const isDisabled = Boolean(this.disabled);\n    this._selectedListEl = null;\n\n    this._syncSlotOptionsSelected();\n\n    return html(({ div, span, slot }) => {\n      div({ className: 'container' }, () => {\n        this._triggerEl = div(\n          {\n            className: `trigger${this._isOpen ? ' open' : ''}${isDisabled ? ' disabled' : ''}`,\n            '@click': () => {\n              if (isDisabled) return;\n\n              this._toggleDropdown();\n            },\n          },\n          () => {\n            if (this.multiple) {\n              if (hasMultiSelection) {\n                this._selectedListEl = div(\n                  {\n                    className: `selected-list${!this.expandable ? ' selected-list--clipped' : ''}`,\n                  },\n                  () => {\n                    for (const v of multiValues) {\n                      const lbl = this._findLabel(v);\n                      tags.aeTag({\n                        key: `sel-${v}`,\n                        color: 'default',\n                        variant: 'faint',\n                        dismissible: true,\n                        disabled: isDisabled,\n                        textContent: lbl,\n                        '@dismiss': (e: Event) => {\n                          e.stopPropagation();\n                          if (isDisabled) return;\n\n                          const next = multiValues.filter((item) => String(item) !== String(v));\n                          this.setValue(next, { silent: false, action: 'change' });\n                        },\n                      });\n                    }\n                  },\n                );\n                if (!this.expandable && this._expanded) {\n                  span({ className: 'overflow-indicator', textContent: '…' });\n                }\n              } else {\n                span({ className: 'value placeholder', textContent: this.placeholder || '' });\n              }\n            } else {\n              if (selectedLabel) {\n                span({ className: 'value', textContent: selectedLabel });\n              } else {\n                span({ className: 'value placeholder', textContent: this.placeholder || '' });\n              }\n            }\n            span({ className: 'arrow', textContent: '▾' });\n          },\n        );\n\n        this._dropdownEl = div(\n          {\n            className: `dropdown position-${position}${this._isOpen ? ' open' : ''}`,\n          },\n          () => {\n            this._renderProgrammaticOptions();\n            this._slotEl = slot({\n              '@slotchange': () => this._onSlotChange(),\n            });\n          },\n        );\n\n        this.renderActionButtons();\n      });\n    });\n  }\n\n  private _renderProgrammaticOptions(): void {\n    if (!Array.isArray(this.options)) return;\n\n    const { aeSelectOption } = tags;\n    const multiValues = this.multiple ? this._getMultiValues() : [];\n    for (const opt of this.options) {\n      if (this._isSelectOption(opt)) {\n        const isSelected = this.multiple\n          ? multiValues.some((v) => String(v) === String(opt.value))\n          : this.value != null && String(opt.value) === String(this.value);\n        aeSelectOption({\n          key: `opt-${opt.value}`,\n          value: String(opt.value),\n          label: opt.label,\n          textContent: t(opt.label, opt.label),\n          selected: isSelected ? true : undefined,\n        });\n      } else {\n        const isSelected = this.multiple\n          ? multiValues.some((v) => String(v) === String(opt))\n          : this.value != null && String(opt) === String(this.value);\n        aeSelectOption({\n          key: `opt-${opt}`,\n          value: String(opt),\n          textContent: String(opt),\n          selected: isSelected ? true : undefined,\n        });\n      }\n    }\n  }\n\n  private _isSelectOption(option: unknown): option is SelectOption {\n    return (\n      option !== null &&\n      typeof option === 'object' &&\n      typeof (option as SelectOption).label === 'string' &&\n      (typeof (option as SelectOption).value === 'string' ||\n        typeof (option as SelectOption).value === 'number')\n    );\n  }\n}\n\nSelect.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-select': Select;\n  }\n}\n\nexport default Select;\nexport type SelectProps = InferProps<typeof Select>;\n"],"names":["prop","t","_a","html","tags","variables","sizeCSS"],"mappings":"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"}
+{"version":3,"file":"select.cjs","sources":["../../src/select/select.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps } from 'aeico';\nimport { html, tags } from 'aeico';\nimport { t } from 'aeico-localize';\nimport type {\n  SelectOptionValue,\n  SelectOption,\n  SelectOptions,\n  SelectPosition,\n  SelectMultiValue,\n} from './defines';\nimport style from '../styles/components/select.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport SelectOptionElement from './select-option';\nimport '../tag/tag';\nimport { prop } from 'aeico';\n\n/**\n * Select component supporting single and multi-select modes, with options provided via both props and slots.\n * - `options` prop accepts an array of strings or objects with `value` and `label` for programmatic options.\n * - Slot content allows for declarative options using `<ae-select-option>` elements.\n * @example\n * <ae-select placeholder=\"Choose an option\" position=\"bottom\">\n *   <ae-select-option value=\"1\" label=\"Option 1\">Option 1</ae-select-option>\n *   <ae-select-option value=\"2\" label=\"Option 2\">Option 2</ae-select-option>\n * </ae-select>\n *\n */\nclass Select extends AeicoField<SelectOptionValue | SelectMultiValue> {\n  protected fieldElement = null;\n  private _isOpen = false;\n  private _triggerEl: HTMLElement | null = null;\n  private _dropdownEl: HTMLElement | null = null;\n  private _slotEl: HTMLSlotElement | null = null;\n  private _slotOptionData: Array<{ value: string; label: string }> = [];\n  private _selectedListEl: HTMLElement | null = null;\n\n  static tagName = 'select';\n\n  @prop({ type: Boolean, observe: false, reflect: false })\n  accessor _expanded: boolean = false;\n\n  @prop({ type: Array })\n  accessor options: SelectOptions | undefined;\n\n  @prop({ type: String })\n  accessor position: SelectPosition | undefined;\n\n  @prop({ type: String })\n  accessor placeholder: string | undefined;\n\n  @prop({ type: Boolean })\n  accessor multiple: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor expandable: boolean = false;\n\n  // Override base class value prop to support both string and array (multi-select).\n  // Uses field decorator (not accessor) because TypeScript TS2611 disallows overriding\n  // a parent class data property (declare value?) with an accessor in a subclass.\n  @prop({\n    type: String,\n    parser: (v) => {\n      if (v === null || v === undefined) return undefined;\n      try {\n        return JSON.parse(v);\n      } catch {\n        return v;\n      }\n    },\n    formatter: (v) => {\n      if (v === null || v === undefined) return '';\n      if (Array.isArray(v)) return JSON.stringify(v);\n      // eslint-disable-next-line @typescript-eslint/no-base-to-string\n      return String(v);\n    },\n  })\n  override value: SelectOptionValue | SelectMultiValue | undefined = undefined;\n\n  // Override base class defaultValue so arrays are JSON-serialized to the attribute,\n  // matching the value prop's parser/formatter. Without this override, setting\n  // defaultValue = ['a', 'b'] would be serialized as String(['a','b']) = \"a,b\",\n  // and reset() would restore a single string \"a,b\" instead of the array.\n  @prop({\n    type: String,\n    parser: (v) => {\n      if (v === null || v === undefined) return undefined;\n      try {\n        return JSON.parse(v);\n      } catch {\n        return v;\n      }\n    },\n    formatter: (v) => {\n      if (v === null || v === undefined) return '';\n      if (Array.isArray(v)) return JSON.stringify(v);\n      // eslint-disable-next-line @typescript-eslint/no-base-to-string\n      return String(v);\n    },\n  })\n  override defaultValue: SelectOptionValue | SelectMultiValue | undefined = undefined;\n\n  protected static styles = [variables, sizeCSS, style];\n\n  protected writeValue(_value: SelectOptionValue | SelectMultiValue): void {\n    // Reactive re-render via this.value prop change handles the display update\n  }\n\n  protected getValue(): SelectOptionValue | SelectMultiValue {\n    if (this.multiple) return this._getMultiValues();\n\n    return this.value || '';\n  }\n\n  private _getMultiValues(): SelectMultiValue {\n    if (Array.isArray(this.value)) return this.value;\n    if (this.value != null && this.value !== '') return [this.value];\n\n    return [];\n  }\n\n  protected onDisabledChanged(_newValue: boolean): void {\n    // disabled is a reactive prop — render() already picks it up automatically\n  }\n\n  protected onUpdated(_changedProps: Map<string, unknown>): void {\n    if (!this.multiple || this.expandable) {\n      if (this._expanded) this._expanded = false;\n      return;\n    }\n    const list = this._selectedListEl;\n    if (!list) return;\n    const overflowing = list.scrollWidth > list.clientWidth + 1;\n    if (overflowing !== this._expanded) this._expanded = overflowing;\n  }\n\n  private _findLabel(value: SelectOptionValue): string {\n    const strVal = String(value);\n    if (Array.isArray(this.options)) {\n      for (const opt of this.options) {\n        if (this._isSelectOption(opt)) {\n          if (String(opt.value) === strVal) return t(opt.label, opt.label);\n        } else {\n          if (String(opt) === strVal) return strVal;\n        }\n      }\n    }\n\n    for (const opt of this._slotOptionData) {\n      if (opt.value === strVal) return opt.label;\n    }\n\n    return strVal;\n  }\n\n  private _onSlotChange(): void {\n    if (!this._slotEl) return;\n    const data: Array<{ value: string; label: string }> = [];\n    for (const el of this._slotEl.assignedElements({ flatten: true })) {\n      if (el.tagName.toLowerCase() !== 'ae-select-option') continue;\n      const optEl = el as SelectOptionElement;\n      data.push({\n        value: optEl.value ?? el.getAttribute('value') ?? '',\n        label: optEl.label || el.textContent?.trim() || '',\n      });\n    }\n    this._slotOptionData = data;\n    this.update();\n  }\n\n  private _toggleDropdown(): void {\n    if (this._isOpen) {\n      this._closeDropdown();\n    } else {\n      this._openDropdown();\n    }\n  }\n\n  private _openDropdown(): void {\n    this._isOpen = true;\n    this._syncOpenState();\n  }\n\n  private _closeDropdown(): void {\n    this._isOpen = false;\n    this._syncOpenState();\n  }\n\n  private _syncOpenState(): void {\n    this._triggerEl?.classList.toggle('open', this._isOpen);\n    this._dropdownEl?.classList.toggle('open', this._isOpen);\n  }\n\n  private readonly _handleOutsideClick = (e: Event): void => {\n    if (!e.composedPath().includes(this)) {\n      this._closeDropdown();\n    }\n  };\n\n  private readonly _handleOptionSelect = (e: Event): void => {\n    const { value, label } = (e as CustomEvent<{ value: string; label: string }>).detail;\n    if (!this._slotOptionData.find((o) => o.value === value)) {\n      this._slotOptionData = [\n        ...this._slotOptionData.filter((o) => o.value !== value),\n        { value, label },\n      ];\n    }\n    if (this.multiple) {\n      const current = this._getMultiValues();\n      const idx = current.findIndex((v) => String(v) === value);\n      const next: SelectMultiValue =\n        idx >= 0 ? current.filter((_, i) => i !== idx) : [...current, value];\n\n      this.setValue(next, { silent: false, action: 'change' });\n    } else {\n      this.setValue(value, { silent: false, action: 'change' });\n      this._closeDropdown();\n    }\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this._handleOutsideClick);\n    this.addEventListener('selectoption', this._handleOptionSelect);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._handleOutsideClick);\n    this.removeEventListener('selectoption', this._handleOptionSelect);\n  }\n\n  private _syncSlotOptionsSelected(): void {\n    if (!this._slotEl) return;\n    const multiValues = this._getMultiValues();\n    for (const el of this._slotEl.assignedElements({ flatten: true })) {\n      if (el.tagName.toLowerCase() !== 'ae-select-option') continue;\n      const optEl = el as SelectOptionElement;\n      const optVal = optEl.value ?? el.getAttribute('value') ?? '';\n      const isSelected = this.multiple\n        ? multiValues.some((v) => String(v) === optVal)\n        : this.value != null && this.value !== '' && String(this.value) === optVal;\n      // undefined triggers removeAttribute via reactive setter\n      // (null would work too but undefined is type-safe for boolean | undefined)\n      optEl.selected = isSelected ? true : undefined;\n    }\n  }\n\n  render() {\n    const position = this.position || 'bottom';\n    const multiValues = this.multiple ? this._getMultiValues() : [];\n    const hasMultiSelection = this.multiple && multiValues.length > 0;\n    const selectedLabel =\n      !this.multiple && this.value != null && this.value !== ''\n        ? this._findLabel(this.value as SelectOptionValue)\n        : '';\n    const isDisabled = Boolean(this.disabled);\n    this._selectedListEl = null;\n\n    this._syncSlotOptionsSelected();\n\n    return html(({ div, span, slot }) => {\n      div({ className: 'container' }, () => {\n        this._triggerEl = div(\n          {\n            className: `trigger${this._isOpen ? ' open' : ''}${isDisabled ? ' disabled' : ''}`,\n            '@click': () => {\n              if (isDisabled) return;\n\n              this._toggleDropdown();\n            },\n          },\n          () => {\n            if (this.multiple) {\n              if (hasMultiSelection) {\n                this._selectedListEl = div(\n                  {\n                    className: `selected-list${!this.expandable ? ' selected-list--clipped' : ''}`,\n                  },\n                  () => {\n                    for (const v of multiValues) {\n                      const lbl = this._findLabel(v);\n                      tags.aeTag({\n                        key: `sel-${v}`,\n                        color: 'default',\n                        variant: 'faint',\n                        dismissible: true,\n                        disabled: isDisabled,\n                        textContent: lbl,\n                        '@dismiss': (e: Event) => {\n                          e.stopPropagation();\n                          if (isDisabled) return;\n\n                          const next = multiValues.filter((item) => String(item) !== String(v));\n                          this.setValue(next, { silent: false, action: 'change' });\n                        },\n                      });\n                    }\n                  },\n                );\n                if (!this.expandable && this._expanded) {\n                  span({ className: 'overflow-indicator', textContent: '…' });\n                }\n              } else {\n                span({ className: 'value placeholder', textContent: this.placeholder || '' });\n              }\n            } else {\n              if (selectedLabel) {\n                span({ className: 'value', textContent: selectedLabel });\n              } else {\n                span({ className: 'value placeholder', textContent: this.placeholder || '' });\n              }\n            }\n            span({ className: 'arrow', textContent: '▾' });\n          },\n        );\n\n        this._dropdownEl = div(\n          {\n            className: `dropdown position-${position}${this._isOpen ? ' open' : ''}`,\n          },\n          () => {\n            this._renderProgrammaticOptions();\n            this._slotEl = slot({\n              '@slotchange': () => this._onSlotChange(),\n            });\n          },\n        );\n\n        this.renderActionButtons();\n      });\n    });\n  }\n\n  private _renderProgrammaticOptions(): void {\n    if (!Array.isArray(this.options)) return;\n\n    const { aeSelectOption } = tags;\n    const multiValues = this.multiple ? this._getMultiValues() : [];\n    for (const opt of this.options) {\n      if (this._isSelectOption(opt)) {\n        const isSelected = this.multiple\n          ? multiValues.some((v) => String(v) === String(opt.value))\n          : this.value != null && String(opt.value) === String(this.value);\n        aeSelectOption({\n          key: `opt-${opt.value}`,\n          value: String(opt.value),\n          label: opt.label,\n          textContent: t(opt.label, opt.label),\n          selected: isSelected ? true : undefined,\n        });\n      } else {\n        const isSelected = this.multiple\n          ? multiValues.some((v) => String(v) === String(opt))\n          : this.value != null && String(opt) === String(this.value);\n        aeSelectOption({\n          key: `opt-${opt}`,\n          value: String(opt),\n          textContent: String(opt),\n          selected: isSelected ? true : undefined,\n        });\n      }\n    }\n  }\n\n  private _isSelectOption(option: unknown): option is SelectOption {\n    return (\n      option !== null &&\n      typeof option === 'object' &&\n      typeof (option as SelectOption).label === 'string' &&\n      (typeof (option as SelectOption).value === 'string' ||\n        typeof (option as SelectOption).value === 'number')\n    );\n  }\n}\n\nSelect.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-select': Select;\n  }\n}\n\nexport default Select;\nexport type SelectProps = InferProps<typeof Select>;\n"],"names":["prop","t","_a","html","tags","variables","sizeCSS"],"mappings":"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"}

package/dist/chunks/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sources":["../../src/select/select.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps } from 'aeico';\nimport { html, tags } from 'aeico';\nimport { t } from 'aeico-localize';\nimport type {\n  SelectOptionValue,\n  SelectOption,\n  SelectOptions,\n  SelectPosition,\n  SelectMultiValue,\n} from './defines';\nimport style from '../styles/components/select.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport SelectOptionElement from './select-option';\nimport '../tag/tag';\nimport { prop } from 'aeico';\n\n/**\n * Select component supporting single and multi-select modes, with options provided via both props and slots.\n * - `options` prop accepts an array of strings or objects with `value` and `label` for programmatic options.\n * - Slot content allows for declarative options using `<ae-select-option>` elements.\n * @example\n * <ae-select placeholder=\"Choose an option\" position=\"bottom\">\n *   <ae-select-option value=\"1\" label=\"Option 1\">Option 1</ae-select-option>\n *   <ae-select-option value=\"2\" label=\"Option 2\">Option 2</ae-select-option>\n * </ae-select>\n *\n */\nclass Select extends AeicoField<SelectOptionValue | SelectMultiValue> {\n  protected fieldElement = null;\n  private _isOpen = false;\n  private _triggerEl: HTMLElement | null = null;\n  private _dropdownEl: HTMLElement | null = null;\n  private _slotEl: HTMLSlotElement | null = null;\n  private _slotOptionData: Array<{ value: string; label: string }> = [];\n  private _selectedListEl: HTMLElement | null = null;\n\n  static tagName = 'select';\n\n  @prop({ type: Boolean, observe: false, reflect: false })\n  accessor _expanded: boolean = false;\n\n  @prop({ type: Array })\n  accessor options: SelectOptions | undefined;\n\n  @prop({ type: String })\n  accessor position: SelectPosition | undefined;\n\n  @prop({ type: String })\n  accessor placeholder: string | undefined;\n\n  @prop({ type: Boolean })\n  accessor multiple: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor expandable: boolean = false;\n\n  // Override base class value prop to support both string and array (multi-select).\n  // Uses field decorator (not accessor) because TypeScript TS2611 disallows overriding\n  // a parent class data property (declare value?) with an accessor in a subclass.\n  @prop({\n    type: String,\n    parser: (v) => {\n      if (v === null || v === undefined) return undefined;\n      try {\n        return JSON.parse(v);\n      } catch {\n        return v;\n      }\n    },\n    formatter: (v) => {\n      if (v === null || v === undefined) return '';\n      if (Array.isArray(v)) return JSON.stringify(v);\n      // eslint-disable-next-line @typescript-eslint/no-base-to-string\n      return String(v);\n    },\n  })\n  override value: SelectOptionValue | SelectMultiValue | undefined = undefined;\n\n  // Override base class defaultValue so arrays are JSON-serialized to the attribute,\n  // matching the value prop's parser/formatter. Without this override, setting\n  // defaultValue = ['a', 'b'] would be serialized as String(['a','b']) = \"a,b\",\n  // and reset() would restore a single string \"a,b\" instead of the array.\n  @prop({\n    type: String,\n    parser: (v) => {\n      if (v === null || v === undefined) return undefined;\n      try {\n        return JSON.parse(v);\n      } catch {\n        return v;\n      }\n    },\n    formatter: (v) => {\n      if (v === null || v === undefined) return '';\n      if (Array.isArray(v)) return JSON.stringify(v);\n      // eslint-disable-next-line @typescript-eslint/no-base-to-string\n      return String(v);\n    },\n  })\n  override defaultValue: SelectOptionValue | SelectMultiValue | undefined = undefined;\n\n  protected static styles = [variables, sizeCSS, style];\n\n  protected writeValue(_value: SelectOptionValue | SelectMultiValue): void {\n    // Reactive re-render via this.value prop change handles the display update\n  }\n\n  protected getValue(): any {\n    if (this.multiple) return this._getMultiValues();\n\n    return this.value || '';\n  }\n\n  private _getMultiValues(): SelectMultiValue {\n    if (Array.isArray(this.value)) return this.value;\n    if (this.value != null && this.value !== '') return [this.value];\n\n    return [];\n  }\n\n  protected onDisabledChanged(_newValue: boolean): void {\n    // disabled is a reactive prop — render() already picks it up automatically\n  }\n\n  protected onUpdated(_changedProps: Map<string, unknown>): void {\n    if (!this.multiple || this.expandable) {\n      if (this._expanded) this._expanded = false;\n      return;\n    }\n    const list = this._selectedListEl;\n    if (!list) return;\n    const overflowing = list.scrollWidth > list.clientWidth + 1;\n    if (overflowing !== this._expanded) this._expanded = overflowing;\n  }\n\n  private _findLabel(value: SelectOptionValue): string {\n    const strVal = String(value);\n    if (Array.isArray(this.options)) {\n      for (const opt of this.options) {\n        if (this._isSelectOption(opt)) {\n          if (String(opt.value) === strVal) return t(opt.label, opt.label);\n        } else {\n          if (String(opt) === strVal) return strVal;\n        }\n      }\n    }\n\n    for (const opt of this._slotOptionData) {\n      if (opt.value === strVal) return opt.label;\n    }\n\n    return strVal;\n  }\n\n  private _onSlotChange(): void {\n    if (!this._slotEl) return;\n    const data: Array<{ value: string; label: string }> = [];\n    for (const el of this._slotEl.assignedElements({ flatten: true })) {\n      if (el.tagName.toLowerCase() !== 'ae-select-option') continue;\n      const optEl = el as SelectOptionElement;\n      data.push({\n        value: optEl.value ?? el.getAttribute('value') ?? '',\n        label: optEl.label || el.textContent?.trim() || '',\n      });\n    }\n    this._slotOptionData = data;\n    this.update();\n  }\n\n  private _toggleDropdown(): void {\n    if (this._isOpen) {\n      this._closeDropdown();\n    } else {\n      this._openDropdown();\n    }\n  }\n\n  private _openDropdown(): void {\n    this._isOpen = true;\n    this._syncOpenState();\n  }\n\n  private _closeDropdown(): void {\n    this._isOpen = false;\n    this._syncOpenState();\n  }\n\n  private _syncOpenState(): void {\n    this._triggerEl?.classList.toggle('open', this._isOpen);\n    this._dropdownEl?.classList.toggle('open', this._isOpen);\n  }\n\n  private readonly _handleOutsideClick = (e: Event): void => {\n    if (!e.composedPath().includes(this)) {\n      this._closeDropdown();\n    }\n  };\n\n  private readonly _handleOptionSelect = (e: Event): void => {\n    const { value, label } = (e as CustomEvent<{ value: string; label: string }>).detail;\n    if (!this._slotOptionData.find((o) => o.value === value)) {\n      this._slotOptionData = [\n        ...this._slotOptionData.filter((o) => o.value !== value),\n        { value, label },\n      ];\n    }\n    if (this.multiple) {\n      const current = this._getMultiValues();\n      const idx = current.findIndex((v) => String(v) === value);\n      const next: SelectMultiValue =\n        idx >= 0 ? current.filter((_, i) => i !== idx) : [...current, value];\n\n      this.setValue(next, { silent: false, action: 'change' });\n    } else {\n      this.setValue(value, { silent: false, action: 'change' });\n      this._closeDropdown();\n    }\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this._handleOutsideClick);\n    this.addEventListener('selectoption', this._handleOptionSelect);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._handleOutsideClick);\n    this.removeEventListener('selectoption', this._handleOptionSelect);\n  }\n\n  private _syncSlotOptionsSelected(): void {\n    if (!this._slotEl) return;\n    const multiValues = this._getMultiValues();\n    for (const el of this._slotEl.assignedElements({ flatten: true })) {\n      if (el.tagName.toLowerCase() !== 'ae-select-option') continue;\n      const optEl = el as SelectOptionElement;\n      const optVal = optEl.value ?? el.getAttribute('value') ?? '';\n      const isSelected = this.multiple\n        ? multiValues.some((v) => String(v) === optVal)\n        : this.value != null && this.value !== '' && String(this.value) === optVal;\n      // undefined triggers removeAttribute via reactive setter\n      // (null would work too but undefined is type-safe for boolean | undefined)\n      optEl.selected = isSelected ? true : undefined;\n    }\n  }\n\n  render() {\n    const position = this.position || 'bottom';\n    const multiValues = this.multiple ? this._getMultiValues() : [];\n    const hasMultiSelection = this.multiple && multiValues.length > 0;\n    const selectedLabel =\n      !this.multiple && this.value != null && this.value !== ''\n        ? this._findLabel(this.value as SelectOptionValue)\n        : '';\n    const isDisabled = Boolean(this.disabled);\n    this._selectedListEl = null;\n\n    this._syncSlotOptionsSelected();\n\n    return html(({ div, span, slot }) => {\n      div({ className: 'container' }, () => {\n        this._triggerEl = div(\n          {\n            className: `trigger${this._isOpen ? ' open' : ''}${isDisabled ? ' disabled' : ''}`,\n            '@click': () => {\n              if (isDisabled) return;\n\n              this._toggleDropdown();\n            },\n          },\n          () => {\n            if (this.multiple) {\n              if (hasMultiSelection) {\n                this._selectedListEl = div(\n                  {\n                    className: `selected-list${!this.expandable ? ' selected-list--clipped' : ''}`,\n                  },\n                  () => {\n                    for (const v of multiValues) {\n                      const lbl = this._findLabel(v);\n                      tags.aeTag({\n                        key: `sel-${v}`,\n                        color: 'default',\n                        variant: 'faint',\n                        dismissible: true,\n                        disabled: isDisabled,\n                        textContent: lbl,\n                        '@dismiss': (e: Event) => {\n                          e.stopPropagation();\n                          if (isDisabled) return;\n\n                          const next = multiValues.filter((item) => String(item) !== String(v));\n                          this.setValue(next, { silent: false, action: 'change' });\n                        },\n                      });\n                    }\n                  },\n                );\n                if (!this.expandable && this._expanded) {\n                  span({ className: 'overflow-indicator', textContent: '…' });\n                }\n              } else {\n                span({ className: 'value placeholder', textContent: this.placeholder || '' });\n              }\n            } else {\n              if (selectedLabel) {\n                span({ className: 'value', textContent: selectedLabel });\n              } else {\n                span({ className: 'value placeholder', textContent: this.placeholder || '' });\n              }\n            }\n            span({ className: 'arrow', textContent: '▾' });\n          },\n        );\n\n        this._dropdownEl = div(\n          {\n            className: `dropdown position-${position}${this._isOpen ? ' open' : ''}`,\n          },\n          () => {\n            this._renderProgrammaticOptions();\n            this._slotEl = slot({\n              '@slotchange': () => this._onSlotChange(),\n            });\n          },\n        );\n\n        this.renderActionButtons();\n      });\n    });\n  }\n\n  private _renderProgrammaticOptions(): void {\n    if (!Array.isArray(this.options)) return;\n\n    const { aeSelectOption } = tags;\n    const multiValues = this.multiple ? this._getMultiValues() : [];\n    for (const opt of this.options) {\n      if (this._isSelectOption(opt)) {\n        const isSelected = this.multiple\n          ? multiValues.some((v) => String(v) === String(opt.value))\n          : this.value != null && String(opt.value) === String(this.value);\n        aeSelectOption({\n          key: `opt-${opt.value}`,\n          value: String(opt.value),\n          label: opt.label,\n          textContent: t(opt.label, opt.label),\n          selected: isSelected ? true : undefined,\n        });\n      } else {\n        const isSelected = this.multiple\n          ? multiValues.some((v) => String(v) === String(opt))\n          : this.value != null && String(opt) === String(this.value);\n        aeSelectOption({\n          key: `opt-${opt}`,\n          value: String(opt),\n          textContent: String(opt),\n          selected: isSelected ? true : undefined,\n        });\n      }\n    }\n  }\n\n  private _isSelectOption(option: unknown): option is SelectOption {\n    return (\n      option !== null &&\n      typeof option === 'object' &&\n      typeof (option as SelectOption).label === 'string' &&\n      (typeof (option as SelectOption).value === 'string' ||\n        typeof (option as SelectOption).value === 'number')\n    );\n  }\n}\n\nSelect.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-select': Select;\n  }\n}\n\nexport default Select;\nexport type SelectProps = InferProps<typeof Select>;\n"],"names":["_a","variables"],"mappings":"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"}
+{"version":3,"file":"select.js","sources":["../../src/select/select.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps } from 'aeico';\nimport { html, tags } from 'aeico';\nimport { t } from 'aeico-localize';\nimport type {\n  SelectOptionValue,\n  SelectOption,\n  SelectOptions,\n  SelectPosition,\n  SelectMultiValue,\n} from './defines';\nimport style from '../styles/components/select.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport SelectOptionElement from './select-option';\nimport '../tag/tag';\nimport { prop } from 'aeico';\n\n/**\n * Select component supporting single and multi-select modes, with options provided via both props and slots.\n * - `options` prop accepts an array of strings or objects with `value` and `label` for programmatic options.\n * - Slot content allows for declarative options using `<ae-select-option>` elements.\n * @example\n * <ae-select placeholder=\"Choose an option\" position=\"bottom\">\n *   <ae-select-option value=\"1\" label=\"Option 1\">Option 1</ae-select-option>\n *   <ae-select-option value=\"2\" label=\"Option 2\">Option 2</ae-select-option>\n * </ae-select>\n *\n */\nclass Select extends AeicoField<SelectOptionValue | SelectMultiValue> {\n  protected fieldElement = null;\n  private _isOpen = false;\n  private _triggerEl: HTMLElement | null = null;\n  private _dropdownEl: HTMLElement | null = null;\n  private _slotEl: HTMLSlotElement | null = null;\n  private _slotOptionData: Array<{ value: string; label: string }> = [];\n  private _selectedListEl: HTMLElement | null = null;\n\n  static tagName = 'select';\n\n  @prop({ type: Boolean, observe: false, reflect: false })\n  accessor _expanded: boolean = false;\n\n  @prop({ type: Array })\n  accessor options: SelectOptions | undefined;\n\n  @prop({ type: String })\n  accessor position: SelectPosition | undefined;\n\n  @prop({ type: String })\n  accessor placeholder: string | undefined;\n\n  @prop({ type: Boolean })\n  accessor multiple: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor expandable: boolean = false;\n\n  // Override base class value prop to support both string and array (multi-select).\n  // Uses field decorator (not accessor) because TypeScript TS2611 disallows overriding\n  // a parent class data property (declare value?) with an accessor in a subclass.\n  @prop({\n    type: String,\n    parser: (v) => {\n      if (v === null || v === undefined) return undefined;\n      try {\n        return JSON.parse(v);\n      } catch {\n        return v;\n      }\n    },\n    formatter: (v) => {\n      if (v === null || v === undefined) return '';\n      if (Array.isArray(v)) return JSON.stringify(v);\n      // eslint-disable-next-line @typescript-eslint/no-base-to-string\n      return String(v);\n    },\n  })\n  override value: SelectOptionValue | SelectMultiValue | undefined = undefined;\n\n  // Override base class defaultValue so arrays are JSON-serialized to the attribute,\n  // matching the value prop's parser/formatter. Without this override, setting\n  // defaultValue = ['a', 'b'] would be serialized as String(['a','b']) = \"a,b\",\n  // and reset() would restore a single string \"a,b\" instead of the array.\n  @prop({\n    type: String,\n    parser: (v) => {\n      if (v === null || v === undefined) return undefined;\n      try {\n        return JSON.parse(v);\n      } catch {\n        return v;\n      }\n    },\n    formatter: (v) => {\n      if (v === null || v === undefined) return '';\n      if (Array.isArray(v)) return JSON.stringify(v);\n      // eslint-disable-next-line @typescript-eslint/no-base-to-string\n      return String(v);\n    },\n  })\n  override defaultValue: SelectOptionValue | SelectMultiValue | undefined = undefined;\n\n  protected static styles = [variables, sizeCSS, style];\n\n  protected writeValue(_value: SelectOptionValue | SelectMultiValue): void {\n    // Reactive re-render via this.value prop change handles the display update\n  }\n\n  protected getValue(): SelectOptionValue | SelectMultiValue {\n    if (this.multiple) return this._getMultiValues();\n\n    return this.value || '';\n  }\n\n  private _getMultiValues(): SelectMultiValue {\n    if (Array.isArray(this.value)) return this.value;\n    if (this.value != null && this.value !== '') return [this.value];\n\n    return [];\n  }\n\n  protected onDisabledChanged(_newValue: boolean): void {\n    // disabled is a reactive prop — render() already picks it up automatically\n  }\n\n  protected onUpdated(_changedProps: Map<string, unknown>): void {\n    if (!this.multiple || this.expandable) {\n      if (this._expanded) this._expanded = false;\n      return;\n    }\n    const list = this._selectedListEl;\n    if (!list) return;\n    const overflowing = list.scrollWidth > list.clientWidth + 1;\n    if (overflowing !== this._expanded) this._expanded = overflowing;\n  }\n\n  private _findLabel(value: SelectOptionValue): string {\n    const strVal = String(value);\n    if (Array.isArray(this.options)) {\n      for (const opt of this.options) {\n        if (this._isSelectOption(opt)) {\n          if (String(opt.value) === strVal) return t(opt.label, opt.label);\n        } else {\n          if (String(opt) === strVal) return strVal;\n        }\n      }\n    }\n\n    for (const opt of this._slotOptionData) {\n      if (opt.value === strVal) return opt.label;\n    }\n\n    return strVal;\n  }\n\n  private _onSlotChange(): void {\n    if (!this._slotEl) return;\n    const data: Array<{ value: string; label: string }> = [];\n    for (const el of this._slotEl.assignedElements({ flatten: true })) {\n      if (el.tagName.toLowerCase() !== 'ae-select-option') continue;\n      const optEl = el as SelectOptionElement;\n      data.push({\n        value: optEl.value ?? el.getAttribute('value') ?? '',\n        label: optEl.label || el.textContent?.trim() || '',\n      });\n    }\n    this._slotOptionData = data;\n    this.update();\n  }\n\n  private _toggleDropdown(): void {\n    if (this._isOpen) {\n      this._closeDropdown();\n    } else {\n      this._openDropdown();\n    }\n  }\n\n  private _openDropdown(): void {\n    this._isOpen = true;\n    this._syncOpenState();\n  }\n\n  private _closeDropdown(): void {\n    this._isOpen = false;\n    this._syncOpenState();\n  }\n\n  private _syncOpenState(): void {\n    this._triggerEl?.classList.toggle('open', this._isOpen);\n    this._dropdownEl?.classList.toggle('open', this._isOpen);\n  }\n\n  private readonly _handleOutsideClick = (e: Event): void => {\n    if (!e.composedPath().includes(this)) {\n      this._closeDropdown();\n    }\n  };\n\n  private readonly _handleOptionSelect = (e: Event): void => {\n    const { value, label } = (e as CustomEvent<{ value: string; label: string }>).detail;\n    if (!this._slotOptionData.find((o) => o.value === value)) {\n      this._slotOptionData = [\n        ...this._slotOptionData.filter((o) => o.value !== value),\n        { value, label },\n      ];\n    }\n    if (this.multiple) {\n      const current = this._getMultiValues();\n      const idx = current.findIndex((v) => String(v) === value);\n      const next: SelectMultiValue =\n        idx >= 0 ? current.filter((_, i) => i !== idx) : [...current, value];\n\n      this.setValue(next, { silent: false, action: 'change' });\n    } else {\n      this.setValue(value, { silent: false, action: 'change' });\n      this._closeDropdown();\n    }\n  };\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this._handleOutsideClick);\n    this.addEventListener('selectoption', this._handleOptionSelect);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._handleOutsideClick);\n    this.removeEventListener('selectoption', this._handleOptionSelect);\n  }\n\n  private _syncSlotOptionsSelected(): void {\n    if (!this._slotEl) return;\n    const multiValues = this._getMultiValues();\n    for (const el of this._slotEl.assignedElements({ flatten: true })) {\n      if (el.tagName.toLowerCase() !== 'ae-select-option') continue;\n      const optEl = el as SelectOptionElement;\n      const optVal = optEl.value ?? el.getAttribute('value') ?? '';\n      const isSelected = this.multiple\n        ? multiValues.some((v) => String(v) === optVal)\n        : this.value != null && this.value !== '' && String(this.value) === optVal;\n      // undefined triggers removeAttribute via reactive setter\n      // (null would work too but undefined is type-safe for boolean | undefined)\n      optEl.selected = isSelected ? true : undefined;\n    }\n  }\n\n  render() {\n    const position = this.position || 'bottom';\n    const multiValues = this.multiple ? this._getMultiValues() : [];\n    const hasMultiSelection = this.multiple && multiValues.length > 0;\n    const selectedLabel =\n      !this.multiple && this.value != null && this.value !== ''\n        ? this._findLabel(this.value as SelectOptionValue)\n        : '';\n    const isDisabled = Boolean(this.disabled);\n    this._selectedListEl = null;\n\n    this._syncSlotOptionsSelected();\n\n    return html(({ div, span, slot }) => {\n      div({ className: 'container' }, () => {\n        this._triggerEl = div(\n          {\n            className: `trigger${this._isOpen ? ' open' : ''}${isDisabled ? ' disabled' : ''}`,\n            '@click': () => {\n              if (isDisabled) return;\n\n              this._toggleDropdown();\n            },\n          },\n          () => {\n            if (this.multiple) {\n              if (hasMultiSelection) {\n                this._selectedListEl = div(\n                  {\n                    className: `selected-list${!this.expandable ? ' selected-list--clipped' : ''}`,\n                  },\n                  () => {\n                    for (const v of multiValues) {\n                      const lbl = this._findLabel(v);\n                      tags.aeTag({\n                        key: `sel-${v}`,\n                        color: 'default',\n                        variant: 'faint',\n                        dismissible: true,\n                        disabled: isDisabled,\n                        textContent: lbl,\n                        '@dismiss': (e: Event) => {\n                          e.stopPropagation();\n                          if (isDisabled) return;\n\n                          const next = multiValues.filter((item) => String(item) !== String(v));\n                          this.setValue(next, { silent: false, action: 'change' });\n                        },\n                      });\n                    }\n                  },\n                );\n                if (!this.expandable && this._expanded) {\n                  span({ className: 'overflow-indicator', textContent: '…' });\n                }\n              } else {\n                span({ className: 'value placeholder', textContent: this.placeholder || '' });\n              }\n            } else {\n              if (selectedLabel) {\n                span({ className: 'value', textContent: selectedLabel });\n              } else {\n                span({ className: 'value placeholder', textContent: this.placeholder || '' });\n              }\n            }\n            span({ className: 'arrow', textContent: '▾' });\n          },\n        );\n\n        this._dropdownEl = div(\n          {\n            className: `dropdown position-${position}${this._isOpen ? ' open' : ''}`,\n          },\n          () => {\n            this._renderProgrammaticOptions();\n            this._slotEl = slot({\n              '@slotchange': () => this._onSlotChange(),\n            });\n          },\n        );\n\n        this.renderActionButtons();\n      });\n    });\n  }\n\n  private _renderProgrammaticOptions(): void {\n    if (!Array.isArray(this.options)) return;\n\n    const { aeSelectOption } = tags;\n    const multiValues = this.multiple ? this._getMultiValues() : [];\n    for (const opt of this.options) {\n      if (this._isSelectOption(opt)) {\n        const isSelected = this.multiple\n          ? multiValues.some((v) => String(v) === String(opt.value))\n          : this.value != null && String(opt.value) === String(this.value);\n        aeSelectOption({\n          key: `opt-${opt.value}`,\n          value: String(opt.value),\n          label: opt.label,\n          textContent: t(opt.label, opt.label),\n          selected: isSelected ? true : undefined,\n        });\n      } else {\n        const isSelected = this.multiple\n          ? multiValues.some((v) => String(v) === String(opt))\n          : this.value != null && String(opt) === String(this.value);\n        aeSelectOption({\n          key: `opt-${opt}`,\n          value: String(opt),\n          textContent: String(opt),\n          selected: isSelected ? true : undefined,\n        });\n      }\n    }\n  }\n\n  private _isSelectOption(option: unknown): option is SelectOption {\n    return (\n      option !== null &&\n      typeof option === 'object' &&\n      typeof (option as SelectOption).label === 'string' &&\n      (typeof (option as SelectOption).value === 'string' ||\n        typeof (option as SelectOption).value === 'number')\n    );\n  }\n}\n\nSelect.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-select': Select;\n  }\n}\n\nexport default Select;\nexport type SelectProps = InferProps<typeof Select>;\n"],"names":["_a","variables"],"mappings":"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"}

package/dist/chunks/switch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"switch.cjs","sources":["../../src/switch/switch.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport styles from '../styles/components/switch.css?inline';\n\nclass Switch extends AeicoField {\n  protected fieldElement: HTMLInputElement | null = null;\n\n  static tagName = 'switch';\n\n  static props: Props = {\n    checked: { type: Boolean },\n    defaultChecked: { type: Boolean },\n  };\n\n  declare checked?: boolean;\n  declare defaultChecked?: boolean;\n\n  protected static styles = [styleVariables, sizeCSS, colorCSS, styles];\n\n  protected getValue(): boolean {\n    return this.fieldElement?.checked ?? false;\n  }\n\n  protected writeValue(checked: boolean): void {\n    if (this.fieldElement) {\n      this.fieldElement.checked = Boolean(checked);\n    }\n  }\n\n  protected getEventPayload(checked: boolean, oldChecked: boolean, action: any) {\n    return { checked, oldChecked, action };\n  }\n\n  protected setValue(checked: boolean, options?: { silent?: boolean; action?: any }): void {\n    const oldChecked = this.getValue();\n    this.checked = checked;\n    this.writeValue(checked);\n    if (options?.silent === false) {\n      this.emit('change', {\n        detail: this.getEventPayload(checked, oldChecked, options.action || 'change'),\n      });\n    }\n  }\n\n  public reset(checked?: boolean, options?: { silent?: boolean }): void {\n    this.setValue(checked !== undefined ? checked : (this.defaultChecked ?? false), {\n      ...options,\n      action: 'reset',\n    });\n  }\n\n  public clear(options?: { silent?: boolean }): void {\n    this.setValue(false, { ...options, action: 'clear' });\n  }\n\n  render() {\n    return html(({ div, input, span }) => {\n      div({ className: 'switch-container' }, () => {\n        div({ className: 'switch-wrapper' }, () => {\n          this.fieldElement = input({\n            type: 'checkbox',\n            className: 'field-input',\n            checked: Boolean(this.checked),\n            disabled: Boolean(this.disabled),\n            '@change': this.boundOnChange,\n          });\n          span({ className: 'toggle-slider' });\n        });\n        this.renderActionButtons();\n      });\n    });\n  }\n}\n\nSwitch.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-switch': Switch;\n  }\n}\n\nexport default Switch;\nexport type SwitchProps = InferProps<typeof Switch>;\n"],"names":["AeicoField","html","styleVariables","sizeCSS","colorCSS"],"mappings":";;;;;;;;;;AAQA,MAAM,eAAeA,WAAAA,WAAW;AAAA,EAAhC;AAAA;AACY,wCAAwC;AAAA;AAAA,EAcxC,WAAoB;;AAC5B,aAAO,UAAK,iBAAL,mBAAmB,YAAW;AAAA,EACvC;AAAA,EAEU,WAAW,SAAwB;AAC3C,QAAI,KAAK,cAAc;AACrB,WAAK,aAAa,UAAU,QAAQ,OAAO;AAAA,IAC7C;AAAA,EACF;AAAA,EAEU,gBAAgB,SAAkB,YAAqB,QAAa;AAC5E,WAAO,EAAE,SAAS,YAAY,OAAA;AAAA,EAChC;AAAA,EAEU,SAAS,SAAkB,SAAoD;AACvF,UAAM,aAAa,KAAK,SAAA;AACxB,SAAK,UAAU;AACf,SAAK,WAAW,OAAO;AACvB,SAAI,mCAAS,YAAW,OAAO;AAC7B,WAAK,KAAK,UAAU;AAAA,QAClB,QAAQ,KAAK,gBAAgB,SAAS,YAAY,QAAQ,UAAU,QAAQ;AAAA,MAAA,CAC7E;AAAA,IACH;AAAA,EACF;AAAA,EAEO,MAAM,SAAmB,SAAsC;AACpE,SAAK,SAAS,YAAY,SAAY,UAAW,KAAK,kBAAkB,OAAQ;AAAA,MAC9E,GAAG;AAAA,MACH,QAAQ;AAAA,IAAA,CACT;AAAA,EACH;AAAA,EAEO,MAAM,SAAsC;AACjD,SAAK,SAAS,OAAO,EAAE,GAAG,SAAS,QAAQ,SAAS;AAAA,EACtD;AAAA,EAEA,SAAS;AACP,WAAOC,MAAAA,KAAK,CAAC,EAAE,KAAK,OAAO,WAAW;AACpC,UAAI,EAAE,WAAW,mBAAA,GAAsB,MAAM;AAC3C,YAAI,EAAE,WAAW,iBAAA,GAAoB,MAAM;AACzC,eAAK,eAAe,MAAM;AAAA,YACxB,MAAM;AAAA,YACN,WAAW;AAAA,YACX,SAAS,QAAQ,KAAK,OAAO;AAAA,YAC7B,UAAU,QAAQ,KAAK,QAAQ;AAAA,YAC/B,WAAW,KAAK;AAAA,UAAA,CACjB;AACD,eAAK,EAAE,WAAW,iBAAiB;AAAA,QACrC,CAAC;AACD,aAAK,oBAAA;AAAA,MACP,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAjEE,cAHI,QAGG,WAAU;AAEjB,cALI,QAKG,SAAe;AAAA,EACpB,SAAS,EAAE,MAAM,QAAA;AAAA,EACjB,gBAAgB,EAAE,MAAM,QAAA;AAAQ;AAMlC,cAbI,QAaa,UAAS,CAACC,UAAAA,gBAAgBC,KAAAA,SAASC,MAAAA,UAAU,MAAM;AAyDtE,OAAO,SAAA;;"}
+{"version":3,"file":"switch.cjs","sources":["../../src/switch/switch.ts"],"sourcesContent":["import AeicoField, { type FieldAction } from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport styles from '../styles/components/switch.css?inline';\n\nclass Switch extends AeicoField<boolean> {\n  protected fieldElement: HTMLInputElement | null = null;\n\n  static tagName = 'switch';\n\n  static props: Props = {\n    checked: { type: Boolean },\n    defaultChecked: { type: Boolean },\n  };\n\n  declare checked?: boolean;\n  declare defaultChecked?: boolean;\n\n  protected static styles = [styleVariables, sizeCSS, colorCSS, styles];\n\n  protected getValue(): boolean {\n    return this.fieldElement?.checked ?? false;\n  }\n\n  protected writeValue(checked: boolean): void {\n    if (this.fieldElement) {\n      this.fieldElement.checked = Boolean(checked);\n    }\n  }\n\n  protected getEventPayload(checked: boolean, oldChecked: boolean, action: FieldAction) {\n    return { checked, oldChecked, action };\n  }\n\n  protected setValue(checked: boolean, options?: { silent?: boolean; action?: FieldAction }): void {\n    const oldChecked = this.getValue();\n    this.checked = checked;\n    this.writeValue(checked);\n    if (options?.silent === false) {\n      this.emit('change', {\n        detail: this.getEventPayload(checked, oldChecked, options.action || 'change'),\n      });\n    }\n  }\n\n  public reset(checked?: boolean, options?: { silent?: boolean }): void {\n    this.setValue(checked !== undefined ? checked : (this.defaultChecked ?? false), {\n      ...options,\n      action: 'reset',\n    });\n  }\n\n  public clear(options?: { silent?: boolean }): void {\n    this.setValue(false, { ...options, action: 'clear' });\n  }\n\n  render() {\n    return html(({ div, input, span }) => {\n      div({ className: 'switch-container' }, () => {\n        div({ className: 'switch-wrapper' }, () => {\n          this.fieldElement = input({\n            type: 'checkbox',\n            className: 'field-input',\n            checked: Boolean(this.checked),\n            disabled: Boolean(this.disabled),\n            '@change': this.boundOnChange,\n          });\n          span({ className: 'toggle-slider' });\n        });\n        this.renderActionButtons();\n      });\n    });\n  }\n}\n\nSwitch.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-switch': Switch;\n  }\n}\n\nexport default Switch;\nexport type SwitchProps = InferProps<typeof Switch>;\n"],"names":["AeicoField","html","styleVariables","sizeCSS","colorCSS"],"mappings":";;;;;;;;;;AAQA,MAAM,eAAeA,WAAAA,WAAoB;AAAA,EAAzC;AAAA;AACY,wCAAwC;AAAA;AAAA,EAcxC,WAAoB;;AAC5B,aAAO,UAAK,iBAAL,mBAAmB,YAAW;AAAA,EACvC;AAAA,EAEU,WAAW,SAAwB;AAC3C,QAAI,KAAK,cAAc;AACrB,WAAK,aAAa,UAAU,QAAQ,OAAO;AAAA,IAC7C;AAAA,EACF;AAAA,EAEU,gBAAgB,SAAkB,YAAqB,QAAqB;AACpF,WAAO,EAAE,SAAS,YAAY,OAAA;AAAA,EAChC;AAAA,EAEU,SAAS,SAAkB,SAA4D;AAC/F,UAAM,aAAa,KAAK,SAAA;AACxB,SAAK,UAAU;AACf,SAAK,WAAW,OAAO;AACvB,SAAI,mCAAS,YAAW,OAAO;AAC7B,WAAK,KAAK,UAAU;AAAA,QAClB,QAAQ,KAAK,gBAAgB,SAAS,YAAY,QAAQ,UAAU,QAAQ;AAAA,MAAA,CAC7E;AAAA,IACH;AAAA,EACF;AAAA,EAEO,MAAM,SAAmB,SAAsC;AACpE,SAAK,SAAS,YAAY,SAAY,UAAW,KAAK,kBAAkB,OAAQ;AAAA,MAC9E,GAAG;AAAA,MACH,QAAQ;AAAA,IAAA,CACT;AAAA,EACH;AAAA,EAEO,MAAM,SAAsC;AACjD,SAAK,SAAS,OAAO,EAAE,GAAG,SAAS,QAAQ,SAAS;AAAA,EACtD;AAAA,EAEA,SAAS;AACP,WAAOC,MAAAA,KAAK,CAAC,EAAE,KAAK,OAAO,WAAW;AACpC,UAAI,EAAE,WAAW,mBAAA,GAAsB,MAAM;AAC3C,YAAI,EAAE,WAAW,iBAAA,GAAoB,MAAM;AACzC,eAAK,eAAe,MAAM;AAAA,YACxB,MAAM;AAAA,YACN,WAAW;AAAA,YACX,SAAS,QAAQ,KAAK,OAAO;AAAA,YAC7B,UAAU,QAAQ,KAAK,QAAQ;AAAA,YAC/B,WAAW,KAAK;AAAA,UAAA,CACjB;AACD,eAAK,EAAE,WAAW,iBAAiB;AAAA,QACrC,CAAC;AACD,aAAK,oBAAA;AAAA,MACP,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAjEE,cAHI,QAGG,WAAU;AAEjB,cALI,QAKG,SAAe;AAAA,EACpB,SAAS,EAAE,MAAM,QAAA;AAAA,EACjB,gBAAgB,EAAE,MAAM,QAAA;AAAQ;AAMlC,cAbI,QAaa,UAAS,CAACC,UAAAA,gBAAgBC,KAAAA,SAASC,MAAAA,UAAU,MAAM;AAyDtE,OAAO,SAAA;;"}

package/dist/chunks/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sources":["../../src/switch/switch.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport styles from '../styles/components/switch.css?inline';\n\nclass Switch extends AeicoField {\n  protected fieldElement: HTMLInputElement | null = null;\n\n  static tagName = 'switch';\n\n  static props: Props = {\n    checked: { type: Boolean },\n    defaultChecked: { type: Boolean },\n  };\n\n  declare checked?: boolean;\n  declare defaultChecked?: boolean;\n\n  protected static styles = [styleVariables, sizeCSS, colorCSS, styles];\n\n  protected getValue(): boolean {\n    return this.fieldElement?.checked ?? false;\n  }\n\n  protected writeValue(checked: boolean): void {\n    if (this.fieldElement) {\n      this.fieldElement.checked = Boolean(checked);\n    }\n  }\n\n  protected getEventPayload(checked: boolean, oldChecked: boolean, action: any) {\n    return { checked, oldChecked, action };\n  }\n\n  protected setValue(checked: boolean, options?: { silent?: boolean; action?: any }): void {\n    const oldChecked = this.getValue();\n    this.checked = checked;\n    this.writeValue(checked);\n    if (options?.silent === false) {\n      this.emit('change', {\n        detail: this.getEventPayload(checked, oldChecked, options.action || 'change'),\n      });\n    }\n  }\n\n  public reset(checked?: boolean, options?: { silent?: boolean }): void {\n    this.setValue(checked !== undefined ? checked : (this.defaultChecked ?? false), {\n      ...options,\n      action: 'reset',\n    });\n  }\n\n  public clear(options?: { silent?: boolean }): void {\n    this.setValue(false, { ...options, action: 'clear' });\n  }\n\n  render() {\n    return html(({ div, input, span }) => {\n      div({ className: 'switch-container' }, () => {\n        div({ className: 'switch-wrapper' }, () => {\n          this.fieldElement = input({\n            type: 'checkbox',\n            className: 'field-input',\n            checked: Boolean(this.checked),\n            disabled: Boolean(this.disabled),\n            '@change': this.boundOnChange,\n          });\n          span({ className: 'toggle-slider' });\n        });\n        this.renderActionButtons();\n      });\n    });\n  }\n}\n\nSwitch.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-switch': Switch;\n  }\n}\n\nexport default Switch;\nexport type SwitchProps = InferProps<typeof Switch>;\n"],"names":[],"mappings":";;;;;;;;;AAQA,MAAM,eAAe,WAAW;AAAA,EAAhC;AAAA;AACY,wCAAwC;AAAA;AAAA,EAcxC,WAAoB;;AAC5B,aAAO,UAAK,iBAAL,mBAAmB,YAAW;AAAA,EACvC;AAAA,EAEU,WAAW,SAAwB;AAC3C,QAAI,KAAK,cAAc;AACrB,WAAK,aAAa,UAAU,QAAQ,OAAO;AAAA,IAC7C;AAAA,EACF;AAAA,EAEU,gBAAgB,SAAkB,YAAqB,QAAa;AAC5E,WAAO,EAAE,SAAS,YAAY,OAAA;AAAA,EAChC;AAAA,EAEU,SAAS,SAAkB,SAAoD;AACvF,UAAM,aAAa,KAAK,SAAA;AACxB,SAAK,UAAU;AACf,SAAK,WAAW,OAAO;AACvB,SAAI,mCAAS,YAAW,OAAO;AAC7B,WAAK,KAAK,UAAU;AAAA,QAClB,QAAQ,KAAK,gBAAgB,SAAS,YAAY,QAAQ,UAAU,QAAQ;AAAA,MAAA,CAC7E;AAAA,IACH;AAAA,EACF;AAAA,EAEO,MAAM,SAAmB,SAAsC;AACpE,SAAK,SAAS,YAAY,SAAY,UAAW,KAAK,kBAAkB,OAAQ;AAAA,MAC9E,GAAG;AAAA,MACH,QAAQ;AAAA,IAAA,CACT;AAAA,EACH;AAAA,EAEO,MAAM,SAAsC;AACjD,SAAK,SAAS,OAAO,EAAE,GAAG,SAAS,QAAQ,SAAS;AAAA,EACtD;AAAA,EAEA,SAAS;AACP,WAAO,KAAK,CAAC,EAAE,KAAK,OAAO,WAAW;AACpC,UAAI,EAAE,WAAW,mBAAA,GAAsB,MAAM;AAC3C,YAAI,EAAE,WAAW,iBAAA,GAAoB,MAAM;AACzC,eAAK,eAAe,MAAM;AAAA,YACxB,MAAM;AAAA,YACN,WAAW;AAAA,YACX,SAAS,QAAQ,KAAK,OAAO;AAAA,YAC7B,UAAU,QAAQ,KAAK,QAAQ;AAAA,YAC/B,WAAW,KAAK;AAAA,UAAA,CACjB;AACD,eAAK,EAAE,WAAW,iBAAiB;AAAA,QACrC,CAAC;AACD,aAAK,oBAAA;AAAA,MACP,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAjEE,cAHI,QAGG,WAAU;AAEjB,cALI,QAKG,SAAe;AAAA,EACpB,SAAS,EAAE,MAAM,QAAA;AAAA,EACjB,gBAAgB,EAAE,MAAM,QAAA;AAAQ;AAMlC,cAbI,QAaa,UAAS,CAAC,gBAAgB,SAAS,UAAU,MAAM;AAyDtE,OAAO,SAAA;"}
+{"version":3,"file":"switch.js","sources":["../../src/switch/switch.ts"],"sourcesContent":["import AeicoField, { type FieldAction } from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport styles from '../styles/components/switch.css?inline';\n\nclass Switch extends AeicoField<boolean> {\n  protected fieldElement: HTMLInputElement | null = null;\n\n  static tagName = 'switch';\n\n  static props: Props = {\n    checked: { type: Boolean },\n    defaultChecked: { type: Boolean },\n  };\n\n  declare checked?: boolean;\n  declare defaultChecked?: boolean;\n\n  protected static styles = [styleVariables, sizeCSS, colorCSS, styles];\n\n  protected getValue(): boolean {\n    return this.fieldElement?.checked ?? false;\n  }\n\n  protected writeValue(checked: boolean): void {\n    if (this.fieldElement) {\n      this.fieldElement.checked = Boolean(checked);\n    }\n  }\n\n  protected getEventPayload(checked: boolean, oldChecked: boolean, action: FieldAction) {\n    return { checked, oldChecked, action };\n  }\n\n  protected setValue(checked: boolean, options?: { silent?: boolean; action?: FieldAction }): void {\n    const oldChecked = this.getValue();\n    this.checked = checked;\n    this.writeValue(checked);\n    if (options?.silent === false) {\n      this.emit('change', {\n        detail: this.getEventPayload(checked, oldChecked, options.action || 'change'),\n      });\n    }\n  }\n\n  public reset(checked?: boolean, options?: { silent?: boolean }): void {\n    this.setValue(checked !== undefined ? checked : (this.defaultChecked ?? false), {\n      ...options,\n      action: 'reset',\n    });\n  }\n\n  public clear(options?: { silent?: boolean }): void {\n    this.setValue(false, { ...options, action: 'clear' });\n  }\n\n  render() {\n    return html(({ div, input, span }) => {\n      div({ className: 'switch-container' }, () => {\n        div({ className: 'switch-wrapper' }, () => {\n          this.fieldElement = input({\n            type: 'checkbox',\n            className: 'field-input',\n            checked: Boolean(this.checked),\n            disabled: Boolean(this.disabled),\n            '@change': this.boundOnChange,\n          });\n          span({ className: 'toggle-slider' });\n        });\n        this.renderActionButtons();\n      });\n    });\n  }\n}\n\nSwitch.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-switch': Switch;\n  }\n}\n\nexport default Switch;\nexport type SwitchProps = InferProps<typeof Switch>;\n"],"names":[],"mappings":";;;;;;;;;AAQA,MAAM,eAAe,WAAoB;AAAA,EAAzC;AAAA;AACY,wCAAwC;AAAA;AAAA,EAcxC,WAAoB;;AAC5B,aAAO,UAAK,iBAAL,mBAAmB,YAAW;AAAA,EACvC;AAAA,EAEU,WAAW,SAAwB;AAC3C,QAAI,KAAK,cAAc;AACrB,WAAK,aAAa,UAAU,QAAQ,OAAO;AAAA,IAC7C;AAAA,EACF;AAAA,EAEU,gBAAgB,SAAkB,YAAqB,QAAqB;AACpF,WAAO,EAAE,SAAS,YAAY,OAAA;AAAA,EAChC;AAAA,EAEU,SAAS,SAAkB,SAA4D;AAC/F,UAAM,aAAa,KAAK,SAAA;AACxB,SAAK,UAAU;AACf,SAAK,WAAW,OAAO;AACvB,SAAI,mCAAS,YAAW,OAAO;AAC7B,WAAK,KAAK,UAAU;AAAA,QAClB,QAAQ,KAAK,gBAAgB,SAAS,YAAY,QAAQ,UAAU,QAAQ;AAAA,MAAA,CAC7E;AAAA,IACH;AAAA,EACF;AAAA,EAEO,MAAM,SAAmB,SAAsC;AACpE,SAAK,SAAS,YAAY,SAAY,UAAW,KAAK,kBAAkB,OAAQ;AAAA,MAC9E,GAAG;AAAA,MACH,QAAQ;AAAA,IAAA,CACT;AAAA,EACH;AAAA,EAEO,MAAM,SAAsC;AACjD,SAAK,SAAS,OAAO,EAAE,GAAG,SAAS,QAAQ,SAAS;AAAA,EACtD;AAAA,EAEA,SAAS;AACP,WAAO,KAAK,CAAC,EAAE,KAAK,OAAO,WAAW;AACpC,UAAI,EAAE,WAAW,mBAAA,GAAsB,MAAM;AAC3C,YAAI,EAAE,WAAW,iBAAA,GAAoB,MAAM;AACzC,eAAK,eAAe,MAAM;AAAA,YACxB,MAAM;AAAA,YACN,WAAW;AAAA,YACX,SAAS,QAAQ,KAAK,OAAO;AAAA,YAC7B,UAAU,QAAQ,KAAK,QAAQ;AAAA,YAC/B,WAAW,KAAK;AAAA,UAAA,CACjB;AACD,eAAK,EAAE,WAAW,iBAAiB;AAAA,QACrC,CAAC;AACD,aAAK,oBAAA;AAAA,MACP,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAjEE,cAHI,QAGG,WAAU;AAEjB,cALI,QAKG,SAAe;AAAA,EACpB,SAAS,EAAE,MAAM,QAAA;AAAA,EACjB,gBAAgB,EAAE,MAAM,QAAA;AAAQ;AAMlC,cAbI,QAaa,UAAS,CAAC,gBAAgB,SAAS,UAAU,MAAM;AAyDtE,OAAO,SAAA;"}

package/dist/chunks/tab-panel.cjs

@@ -57,7 +57,6 @@ class Tabs extends aeicoComponent.AeicoComponent {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.listen("_tab-click", this._handleTabClick);
     this._observer = new MutationObserver(() => this.update());
     this._observer.observe(this, { childList: true });
   }
@@ -92,7 +91,7 @@ class Tabs extends aeicoComponent.AeicoComponent {
   }
   render() {
     return aeico.html(({ nav, div, slot }) => {
-      nav({ part: "tab-nav", role: "tablist" }, () => {
+      nav({ part: "tab-nav", role: "tablist", "@_tab-click": this._handleTabClick }, () => {
         slot({ name: "tab" });
       });
       div({ part: "panels" }, () => {
@@ -123,7 +122,6 @@ class Tab extends aeicoComponent.AeicoComponent {
   connectedCallback() {
     this.setAttribute("slot", "tab");
     super.connectedCallback();
-    this.listen("click", this._handleClick);
   }
   render() {
     return aeico.html(({ button, slot }) => {
@@ -134,7 +132,8 @@ class Tab extends aeicoComponent.AeicoComponent {
           role: "tab",
           "aria-selected": this.active,
           "aria-disabled": this.disabled,
-          disabled: this.disabled
+          disabled: this.disabled,
+          "@click": this._handleClick
         },
         () => {
           slot();

package/dist/chunks/tab-panel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.cjs","sources":["../../src/tabs/tabs.ts","../../src/tabs/tab.ts","../../src/tabs/tab-panel.ts"],"sourcesContent":["import type { Props } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport tabsStyle from '../styles/components/tabs.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type Tab from './tab';\n\nclass Tabs extends AeicoComponent {\n  static props: Props = {\n    activeIndex: { type: Number },\n  };\n\n  declare activeIndex?: number;\n\n  protected static styles = [styleVariables, tabsStyle];\n\n  private _observer: MutationObserver | null = null;\n\n  private get _tabs(): Tab[] {\n    return [...this.children].filter(\n      (el) => el.tagName.toLowerCase() === 'ae-tab',\n    ) as unknown as Tab[];\n  }\n\n  private get _panels(): HTMLElement[] {\n    return [...this.children].filter(\n      (el) => el.tagName.toLowerCase() === 'ae-tab-panel',\n    ) as HTMLElement[];\n  }\n\n  private _getPairs(): [Tab, HTMLElement | null][] {\n    const tabs = this._tabs;\n    const panels = this._panels;\n\n    const idMap = new Map<string, HTMLElement>();\n    for (const panel of panels) {\n      const id = panel.id;\n      if (id) idMap.set(id, panel);\n    }\n\n    const usedPanels = new Set<HTMLElement>();\n    const pairs: [Tab, HTMLElement | null][] = [];\n\n    // First pass: ID-matched tabs\n    for (const tab of tabs) {\n      const panelId = tab.panel;\n      if (panelId) {\n        const panel = idMap.get(panelId) ?? null;\n        if (panel) usedPanels.add(panel);\n        pairs.push([tab, panel]);\n      }\n    }\n\n    // Second pass: position-matched tabs (no panel attr)\n    const unmatchedPanels = panels.filter((p) => !usedPanels.has(p));\n    let posIndex = 0;\n    for (const tab of tabs) {\n      if (!tab.panel) {\n        pairs.push([tab, unmatchedPanels[posIndex] ?? null]);\n        posIndex++;\n      }\n    }\n\n    return pairs;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.listen('_tab-click', this._handleTabClick);\n    this._observer = new MutationObserver(() => this.update());\n    this._observer.observe(this, { childList: true });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._observer?.disconnect();\n    this._observer = null;\n  }\n\n  protected onUpdated() {\n    this._syncActive();\n  }\n\n  private _handleTabClick = (e: Event) => {\n    const pairs = this._getPairs();\n    const target = e.target as Element;\n    const index = pairs.findIndex(([tab]) => tab === target);\n    if (index !== -1) this.selectTab(index);\n  };\n\n  private _syncActive() {\n    const activeIndex = this.activeIndex ?? 0;\n    const pairs = this._getPairs();\n\n    pairs.forEach(([tab, panel], i) => {\n      const isActive = i === activeIndex;\n      if (isActive) {\n        tab.setAttribute('active', '');\n        panel?.setAttribute('active', '');\n      } else {\n        tab.removeAttribute('active');\n        panel?.removeAttribute('active');\n      }\n    });\n  }\n\n  selectTab(index: number): void {\n    const pairs = this._getPairs();\n    if (index === (this.activeIndex ?? 0) || index >= pairs.length) return;\n    this.activeIndex = index;\n    this.emit('change', { detail: { index } });\n  }\n\n  protected render() {\n    return html(({ nav, div, slot }) => {\n      nav({ part: 'tab-nav', role: 'tablist' }, () => {\n        slot({ name: 'tab' });\n      });\n      div({ part: 'panels' }, () => {\n        slot();\n      });\n    });\n  }\n}\n\nTabs.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tabs': Tabs;\n  }\n}\n\nexport default Tabs;\n","import type { Props } from 'aeico';\nimport tabStyle from '../styles/components/tab.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass Tab extends AeicoComponent {\n  static props: Props = {\n    active: { type: Boolean },\n    disabled: { type: Boolean },\n    panel: { type: String },\n  };\n\n  declare active?: boolean;\n  declare disabled?: boolean;\n  declare panel?: string;\n\n  protected static styles = [tabStyle];\n\n  connectedCallback() {\n    this.setAttribute('slot', 'tab');\n    super.connectedCallback();\n    this.listen('click', this._handleClick);\n  }\n\n  private _handleClick = () => {\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent('_tab-click', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  protected render() {\n    return html(({ button, slot }) => {\n      button(\n        {\n          part: 'tab',\n          type: 'button',\n          role: 'tab',\n          'aria-selected': this.active,\n          'aria-disabled': this.disabled,\n          disabled: this.disabled,\n        },\n        () => {\n          slot();\n        },\n      );\n    });\n  }\n}\n\nTab.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tab': Tab;\n  }\n}\n\nexport default Tab;\n","import tabPanelStyle from '../styles/components/tab-panel.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass TabPanel extends AeicoComponent {\n  protected static styles = [tabPanelStyle];\n\n  protected render() {\n    return html(({ slot }) => {\n      slot();\n    });\n  }\n}\n\nTabPanel.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tab-panel': TabPanel;\n  }\n}\n\nexport default TabPanel;\n"],"names":["AeicoComponent","html","styleVariables"],"mappings":"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"}
+{"version":3,"file":"tab-panel.cjs","sources":["../../src/tabs/tabs.ts","../../src/tabs/tab.ts","../../src/tabs/tab-panel.ts"],"sourcesContent":["import type { Props } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport tabsStyle from '../styles/components/tabs.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type Tab from './tab';\n\nclass Tabs extends AeicoComponent {\n  static props: Props = {\n    activeIndex: { type: Number },\n  };\n\n  declare activeIndex?: number;\n\n  protected static styles = [styleVariables, tabsStyle];\n\n  private _observer: MutationObserver | null = null;\n\n  private get _tabs(): Tab[] {\n    return [...this.children].filter(\n      (el) => el.tagName.toLowerCase() === 'ae-tab',\n    ) as unknown as Tab[];\n  }\n\n  private get _panels(): HTMLElement[] {\n    return [...this.children].filter(\n      (el) => el.tagName.toLowerCase() === 'ae-tab-panel',\n    ) as HTMLElement[];\n  }\n\n  private _getPairs(): [Tab, HTMLElement | null][] {\n    const tabs = this._tabs;\n    const panels = this._panels;\n\n    const idMap = new Map<string, HTMLElement>();\n    for (const panel of panels) {\n      const id = panel.id;\n      if (id) idMap.set(id, panel);\n    }\n\n    const usedPanels = new Set<HTMLElement>();\n    const pairs: [Tab, HTMLElement | null][] = [];\n\n    // First pass: ID-matched tabs\n    for (const tab of tabs) {\n      const panelId = tab.panel;\n      if (panelId) {\n        const panel = idMap.get(panelId) ?? null;\n        if (panel) usedPanels.add(panel);\n        pairs.push([tab, panel]);\n      }\n    }\n\n    // Second pass: position-matched tabs (no panel attr)\n    const unmatchedPanels = panels.filter((p) => !usedPanels.has(p));\n    let posIndex = 0;\n    for (const tab of tabs) {\n      if (!tab.panel) {\n        pairs.push([tab, unmatchedPanels[posIndex] ?? null]);\n        posIndex++;\n      }\n    }\n\n    return pairs;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._observer = new MutationObserver(() => this.update());\n    this._observer.observe(this, { childList: true });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._observer?.disconnect();\n    this._observer = null;\n  }\n\n  protected onUpdated() {\n    this._syncActive();\n  }\n\n  private _handleTabClick = (e: Event) => {\n    const pairs = this._getPairs();\n    const target = e.target as Element;\n    const index = pairs.findIndex(([tab]) => tab === target);\n    if (index !== -1) this.selectTab(index);\n  };\n\n  private _syncActive() {\n    const activeIndex = this.activeIndex ?? 0;\n    const pairs = this._getPairs();\n\n    pairs.forEach(([tab, panel], i) => {\n      const isActive = i === activeIndex;\n      if (isActive) {\n        tab.setAttribute('active', '');\n        panel?.setAttribute('active', '');\n      } else {\n        tab.removeAttribute('active');\n        panel?.removeAttribute('active');\n      }\n    });\n  }\n\n  selectTab(index: number): void {\n    const pairs = this._getPairs();\n    if (index === (this.activeIndex ?? 0) || index >= pairs.length) return;\n    this.activeIndex = index;\n    this.emit('change', { detail: { index } });\n  }\n\n  protected render() {\n    return html(({ nav, div, slot }) => {\n      nav({ part: 'tab-nav', role: 'tablist', '@_tab-click': this._handleTabClick }, () => {\n        slot({ name: 'tab' });\n      });\n      div({ part: 'panels' }, () => {\n        slot();\n      });\n    });\n  }\n}\n\nTabs.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tabs': Tabs;\n  }\n}\n\nexport default Tabs;\n","import type { Props } from 'aeico';\nimport tabStyle from '../styles/components/tab.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass Tab extends AeicoComponent {\n  static props: Props = {\n    active: { type: Boolean },\n    disabled: { type: Boolean },\n    panel: { type: String },\n  };\n\n  declare active?: boolean;\n  declare disabled?: boolean;\n  declare panel?: string;\n\n  protected static styles = [tabStyle];\n\n  connectedCallback() {\n    this.setAttribute('slot', 'tab');\n    super.connectedCallback();\n  }\n\n  private _handleClick = () => {\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent('_tab-click', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  protected render() {\n    return html(({ button, slot }) => {\n      button(\n        {\n          part: 'tab',\n          type: 'button',\n          role: 'tab',\n          'aria-selected': this.active,\n          'aria-disabled': this.disabled,\n          disabled: this.disabled,\n          '@click': this._handleClick,\n        },\n        () => {\n          slot();\n        },\n      );\n    });\n  }\n}\n\nTab.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tab': Tab;\n  }\n}\n\nexport default Tab;\n","import tabPanelStyle from '../styles/components/tab-panel.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass TabPanel extends AeicoComponent {\n  protected static styles = [tabPanelStyle];\n\n  protected render() {\n    return html(({ slot }) => {\n      slot();\n    });\n  }\n}\n\nTabPanel.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tab-panel': TabPanel;\n  }\n}\n\nexport default TabPanel;\n"],"names":["AeicoComponent","html","styleVariables"],"mappings":"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"}

package/dist/chunks/tab-panel.js

@@ -56,7 +56,6 @@ class Tabs extends AeicoComponent {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.listen("_tab-click", this._handleTabClick);
     this._observer = new MutationObserver(() => this.update());
     this._observer.observe(this, { childList: true });
   }
@@ -91,7 +90,7 @@ class Tabs extends AeicoComponent {
   }
   render() {
     return html(({ nav, div, slot }) => {
-      nav({ part: "tab-nav", role: "tablist" }, () => {
+      nav({ part: "tab-nav", role: "tablist", "@_tab-click": this._handleTabClick }, () => {
         slot({ name: "tab" });
       });
       div({ part: "panels" }, () => {
@@ -122,7 +121,6 @@ class Tab extends AeicoComponent {
   connectedCallback() {
     this.setAttribute("slot", "tab");
     super.connectedCallback();
-    this.listen("click", this._handleClick);
   }
   render() {
     return html(({ button, slot }) => {
@@ -133,7 +131,8 @@ class Tab extends AeicoComponent {
           role: "tab",
           "aria-selected": this.active,
           "aria-disabled": this.disabled,
-          disabled: this.disabled
+          disabled: this.disabled,
+          "@click": this._handleClick
         },
         () => {
           slot();

package/dist/chunks/tab-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.js","sources":["../../src/tabs/tabs.ts","../../src/tabs/tab.ts","../../src/tabs/tab-panel.ts"],"sourcesContent":["import type { Props } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport tabsStyle from '../styles/components/tabs.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type Tab from './tab';\n\nclass Tabs extends AeicoComponent {\n  static props: Props = {\n    activeIndex: { type: Number },\n  };\n\n  declare activeIndex?: number;\n\n  protected static styles = [styleVariables, tabsStyle];\n\n  private _observer: MutationObserver | null = null;\n\n  private get _tabs(): Tab[] {\n    return [...this.children].filter(\n      (el) => el.tagName.toLowerCase() === 'ae-tab',\n    ) as unknown as Tab[];\n  }\n\n  private get _panels(): HTMLElement[] {\n    return [...this.children].filter(\n      (el) => el.tagName.toLowerCase() === 'ae-tab-panel',\n    ) as HTMLElement[];\n  }\n\n  private _getPairs(): [Tab, HTMLElement | null][] {\n    const tabs = this._tabs;\n    const panels = this._panels;\n\n    const idMap = new Map<string, HTMLElement>();\n    for (const panel of panels) {\n      const id = panel.id;\n      if (id) idMap.set(id, panel);\n    }\n\n    const usedPanels = new Set<HTMLElement>();\n    const pairs: [Tab, HTMLElement | null][] = [];\n\n    // First pass: ID-matched tabs\n    for (const tab of tabs) {\n      const panelId = tab.panel;\n      if (panelId) {\n        const panel = idMap.get(panelId) ?? null;\n        if (panel) usedPanels.add(panel);\n        pairs.push([tab, panel]);\n      }\n    }\n\n    // Second pass: position-matched tabs (no panel attr)\n    const unmatchedPanels = panels.filter((p) => !usedPanels.has(p));\n    let posIndex = 0;\n    for (const tab of tabs) {\n      if (!tab.panel) {\n        pairs.push([tab, unmatchedPanels[posIndex] ?? null]);\n        posIndex++;\n      }\n    }\n\n    return pairs;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.listen('_tab-click', this._handleTabClick);\n    this._observer = new MutationObserver(() => this.update());\n    this._observer.observe(this, { childList: true });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._observer?.disconnect();\n    this._observer = null;\n  }\n\n  protected onUpdated() {\n    this._syncActive();\n  }\n\n  private _handleTabClick = (e: Event) => {\n    const pairs = this._getPairs();\n    const target = e.target as Element;\n    const index = pairs.findIndex(([tab]) => tab === target);\n    if (index !== -1) this.selectTab(index);\n  };\n\n  private _syncActive() {\n    const activeIndex = this.activeIndex ?? 0;\n    const pairs = this._getPairs();\n\n    pairs.forEach(([tab, panel], i) => {\n      const isActive = i === activeIndex;\n      if (isActive) {\n        tab.setAttribute('active', '');\n        panel?.setAttribute('active', '');\n      } else {\n        tab.removeAttribute('active');\n        panel?.removeAttribute('active');\n      }\n    });\n  }\n\n  selectTab(index: number): void {\n    const pairs = this._getPairs();\n    if (index === (this.activeIndex ?? 0) || index >= pairs.length) return;\n    this.activeIndex = index;\n    this.emit('change', { detail: { index } });\n  }\n\n  protected render() {\n    return html(({ nav, div, slot }) => {\n      nav({ part: 'tab-nav', role: 'tablist' }, () => {\n        slot({ name: 'tab' });\n      });\n      div({ part: 'panels' }, () => {\n        slot();\n      });\n    });\n  }\n}\n\nTabs.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tabs': Tabs;\n  }\n}\n\nexport default Tabs;\n","import type { Props } from 'aeico';\nimport tabStyle from '../styles/components/tab.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass Tab extends AeicoComponent {\n  static props: Props = {\n    active: { type: Boolean },\n    disabled: { type: Boolean },\n    panel: { type: String },\n  };\n\n  declare active?: boolean;\n  declare disabled?: boolean;\n  declare panel?: string;\n\n  protected static styles = [tabStyle];\n\n  connectedCallback() {\n    this.setAttribute('slot', 'tab');\n    super.connectedCallback();\n    this.listen('click', this._handleClick);\n  }\n\n  private _handleClick = () => {\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent('_tab-click', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  protected render() {\n    return html(({ button, slot }) => {\n      button(\n        {\n          part: 'tab',\n          type: 'button',\n          role: 'tab',\n          'aria-selected': this.active,\n          'aria-disabled': this.disabled,\n          disabled: this.disabled,\n        },\n        () => {\n          slot();\n        },\n      );\n    });\n  }\n}\n\nTab.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tab': Tab;\n  }\n}\n\nexport default Tab;\n","import tabPanelStyle from '../styles/components/tab-panel.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass TabPanel extends AeicoComponent {\n  protected static styles = [tabPanelStyle];\n\n  protected render() {\n    return html(({ slot }) => {\n      slot();\n    });\n  }\n}\n\nTabPanel.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tab-panel': TabPanel;\n  }\n}\n\nexport default TabPanel;\n"],"names":[],"mappings":";;;;;;;AAOA,MAAM,aAAa,eAAe;AAAA,EAAlC;AAAA;AASU,qCAAqC;AAmErC,2CAAkB,CAAC,MAAa;AACtC,YAAM,QAAQ,KAAK,UAAA;AACnB,YAAM,SAAS,EAAE;AACjB,YAAM,QAAQ,MAAM,UAAU,CAAC,CAAC,GAAG,MAAM,QAAQ,MAAM;AACvD,UAAI,UAAU,GAAI,MAAK,UAAU,KAAK;AAAA,IACxC;AAAA;AAAA,EAtEA,IAAY,QAAe;AACzB,WAAO,CAAC,GAAG,KAAK,QAAQ,EAAE;AAAA,MACxB,CAAC,OAAO,GAAG,QAAQ,kBAAkB;AAAA,IAAA;AAAA,EAEzC;AAAA,EAEA,IAAY,UAAyB;AACnC,WAAO,CAAC,GAAG,KAAK,QAAQ,EAAE;AAAA,MACxB,CAAC,OAAO,GAAG,QAAQ,kBAAkB;AAAA,IAAA;AAAA,EAEzC;AAAA,EAEQ,YAAyC;AAC/C,UAAM,OAAO,KAAK;AAClB,UAAM,SAAS,KAAK;AAEpB,UAAM,4BAAY,IAAA;AAClB,eAAW,SAAS,QAAQ;AAC1B,YAAM,KAAK,MAAM;AACjB,UAAI,GAAI,OAAM,IAAI,IAAI,KAAK;AAAA,IAC7B;AAEA,UAAM,iCAAiB,IAAA;AACvB,UAAM,QAAqC,CAAA;AAG3C,eAAW,OAAO,MAAM;AACtB,YAAM,UAAU,IAAI;AACpB,UAAI,SAAS;AACX,cAAM,QAAQ,MAAM,IAAI,OAAO,KAAK;AACpC,YAAI,MAAO,YAAW,IAAI,KAAK;AAC/B,cAAM,KAAK,CAAC,KAAK,KAAK,CAAC;AAAA,MACzB;AAAA,IACF;AAGA,UAAM,kBAAkB,OAAO,OAAO,CAAC,MAAM,CAAC,WAAW,IAAI,CAAC,CAAC;AAC/D,QAAI,WAAW;AACf,eAAW,OAAO,MAAM;AACtB,UAAI,CAAC,IAAI,OAAO;AACd,cAAM,KAAK,CAAC,KAAK,gBAAgB,QAAQ,KAAK,IAAI,CAAC;AACnD;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAA;AACN,SAAK,OAAO,cAAc,KAAK,eAAe;AAC9C,SAAK,YAAY,IAAI,iBAAiB,MAAM,KAAK,QAAQ;AACzD,SAAK,UAAU,QAAQ,MAAM,EAAE,WAAW,MAAM;AAAA,EAClD;AAAA,EAEA,uBAAuB;;AACrB,UAAM,qBAAA;AACN,eAAK,cAAL,mBAAgB;AAChB,SAAK,YAAY;AAAA,EACnB;AAAA,EAEU,YAAY;AACpB,SAAK,YAAA;AAAA,EACP;AAAA,EASQ,cAAc;AACpB,UAAM,cAAc,KAAK,eAAe;AACxC,UAAM,QAAQ,KAAK,UAAA;AAEnB,UAAM,QAAQ,CAAC,CAAC,KAAK,KAAK,GAAG,MAAM;AACjC,YAAM,WAAW,MAAM;AACvB,UAAI,UAAU;AACZ,YAAI,aAAa,UAAU,EAAE;AAC7B,uCAAO,aAAa,UAAU;AAAA,MAChC,OAAO;AACL,YAAI,gBAAgB,QAAQ;AAC5B,uCAAO,gBAAgB;AAAA,MACzB;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,UAAU,OAAqB;AAC7B,UAAM,QAAQ,KAAK,UAAA;AACnB,QAAI,WAAW,KAAK,eAAe,MAAM,SAAS,MAAM,OAAQ;AAChE,SAAK,cAAc;AACnB,SAAK,KAAK,UAAU,EAAE,QAAQ,EAAE,MAAA,GAAS;AAAA,EAC3C;AAAA,EAEU,SAAS;AACjB,WAAO,KAAK,CAAC,EAAE,KAAK,KAAK,WAAW;AAClC,UAAI,EAAE,MAAM,WAAW,MAAM,UAAA,GAAa,MAAM;AAC9C,aAAK,EAAE,MAAM,OAAO;AAAA,MACtB,CAAC;AACD,UAAI,EAAE,MAAM,SAAA,GAAY,MAAM;AAC5B,aAAA;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAnHE,cADI,MACG,SAAe;AAAA,EACpB,aAAa,EAAE,MAAM,OAAA;AAAO;AAK9B,cAPI,MAOa,UAAS,CAAC,gBAAgB,SAAS;AA+GtD,KAAK,SAAA;;ACxHL,MAAM,YAAY,eAAe;AAAA,EAAjC;AAAA;AAmBU,wCAAe,MAAM;AAC3B,UAAI,KAAK,SAAU;AACnB,WAAK;AAAA,QACH,IAAI,YAAY,cAAc;AAAA,UAC5B,SAAS;AAAA,UACT,UAAU;AAAA,QAAA,CACX;AAAA,MAAA;AAAA,IAEL;AAAA;AAAA,EAdA,oBAAoB;AAClB,SAAK,aAAa,QAAQ,KAAK;AAC/B,UAAM,kBAAA;AACN,SAAK,OAAO,SAAS,KAAK,YAAY;AAAA,EACxC;AAAA,EAYU,SAAS;AACjB,WAAO,KAAK,CAAC,EAAE,QAAQ,WAAW;AAChC;AAAA,QACE;AAAA,UACE,MAAM;AAAA,UACN,MAAM;AAAA,UACN,MAAM;AAAA,UACN,iBAAiB,KAAK;AAAA,UACtB,iBAAiB,KAAK;AAAA,UACtB,UAAU,KAAK;AAAA,QAAA;AAAA,QAEjB,MAAM;AACJ,eAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAEJ,CAAC;AAAA,EACH;AACF;AA7CE,cADI,KACG,SAAe;AAAA,EACpB,QAAQ,EAAE,MAAM,QAAA;AAAA,EAChB,UAAU,EAAE,MAAM,QAAA;AAAA,EAClB,OAAO,EAAE,MAAM,OAAA;AAAO;AAOxB,cAXI,KAWa,UAAS,CAAC,QAAQ;AAqCrC,IAAI,SAAA;;ACjDJ,MAAM,iBAAiB,eAAe;AAAA,EAG1B,SAAS;AACjB,WAAO,KAAK,CAAC,EAAE,WAAW;AACxB,WAAA;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAPE,cADI,UACa,UAAS,CAAC,aAAa;AAS1C,SAAS,SAAA;"}
+{"version":3,"file":"tab-panel.js","sources":["../../src/tabs/tabs.ts","../../src/tabs/tab.ts","../../src/tabs/tab-panel.ts"],"sourcesContent":["import type { Props } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport tabsStyle from '../styles/components/tabs.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type Tab from './tab';\n\nclass Tabs extends AeicoComponent {\n  static props: Props = {\n    activeIndex: { type: Number },\n  };\n\n  declare activeIndex?: number;\n\n  protected static styles = [styleVariables, tabsStyle];\n\n  private _observer: MutationObserver | null = null;\n\n  private get _tabs(): Tab[] {\n    return [...this.children].filter(\n      (el) => el.tagName.toLowerCase() === 'ae-tab',\n    ) as unknown as Tab[];\n  }\n\n  private get _panels(): HTMLElement[] {\n    return [...this.children].filter(\n      (el) => el.tagName.toLowerCase() === 'ae-tab-panel',\n    ) as HTMLElement[];\n  }\n\n  private _getPairs(): [Tab, HTMLElement | null][] {\n    const tabs = this._tabs;\n    const panels = this._panels;\n\n    const idMap = new Map<string, HTMLElement>();\n    for (const panel of panels) {\n      const id = panel.id;\n      if (id) idMap.set(id, panel);\n    }\n\n    const usedPanels = new Set<HTMLElement>();\n    const pairs: [Tab, HTMLElement | null][] = [];\n\n    // First pass: ID-matched tabs\n    for (const tab of tabs) {\n      const panelId = tab.panel;\n      if (panelId) {\n        const panel = idMap.get(panelId) ?? null;\n        if (panel) usedPanels.add(panel);\n        pairs.push([tab, panel]);\n      }\n    }\n\n    // Second pass: position-matched tabs (no panel attr)\n    const unmatchedPanels = panels.filter((p) => !usedPanels.has(p));\n    let posIndex = 0;\n    for (const tab of tabs) {\n      if (!tab.panel) {\n        pairs.push([tab, unmatchedPanels[posIndex] ?? null]);\n        posIndex++;\n      }\n    }\n\n    return pairs;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._observer = new MutationObserver(() => this.update());\n    this._observer.observe(this, { childList: true });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._observer?.disconnect();\n    this._observer = null;\n  }\n\n  protected onUpdated() {\n    this._syncActive();\n  }\n\n  private _handleTabClick = (e: Event) => {\n    const pairs = this._getPairs();\n    const target = e.target as Element;\n    const index = pairs.findIndex(([tab]) => tab === target);\n    if (index !== -1) this.selectTab(index);\n  };\n\n  private _syncActive() {\n    const activeIndex = this.activeIndex ?? 0;\n    const pairs = this._getPairs();\n\n    pairs.forEach(([tab, panel], i) => {\n      const isActive = i === activeIndex;\n      if (isActive) {\n        tab.setAttribute('active', '');\n        panel?.setAttribute('active', '');\n      } else {\n        tab.removeAttribute('active');\n        panel?.removeAttribute('active');\n      }\n    });\n  }\n\n  selectTab(index: number): void {\n    const pairs = this._getPairs();\n    if (index === (this.activeIndex ?? 0) || index >= pairs.length) return;\n    this.activeIndex = index;\n    this.emit('change', { detail: { index } });\n  }\n\n  protected render() {\n    return html(({ nav, div, slot }) => {\n      nav({ part: 'tab-nav', role: 'tablist', '@_tab-click': this._handleTabClick }, () => {\n        slot({ name: 'tab' });\n      });\n      div({ part: 'panels' }, () => {\n        slot();\n      });\n    });\n  }\n}\n\nTabs.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tabs': Tabs;\n  }\n}\n\nexport default Tabs;\n","import type { Props } from 'aeico';\nimport tabStyle from '../styles/components/tab.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass Tab extends AeicoComponent {\n  static props: Props = {\n    active: { type: Boolean },\n    disabled: { type: Boolean },\n    panel: { type: String },\n  };\n\n  declare active?: boolean;\n  declare disabled?: boolean;\n  declare panel?: string;\n\n  protected static styles = [tabStyle];\n\n  connectedCallback() {\n    this.setAttribute('slot', 'tab');\n    super.connectedCallback();\n  }\n\n  private _handleClick = () => {\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent('_tab-click', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  protected render() {\n    return html(({ button, slot }) => {\n      button(\n        {\n          part: 'tab',\n          type: 'button',\n          role: 'tab',\n          'aria-selected': this.active,\n          'aria-disabled': this.disabled,\n          disabled: this.disabled,\n          '@click': this._handleClick,\n        },\n        () => {\n          slot();\n        },\n      );\n    });\n  }\n}\n\nTab.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tab': Tab;\n  }\n}\n\nexport default Tab;\n","import tabPanelStyle from '../styles/components/tab-panel.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass TabPanel extends AeicoComponent {\n  protected static styles = [tabPanelStyle];\n\n  protected render() {\n    return html(({ slot }) => {\n      slot();\n    });\n  }\n}\n\nTabPanel.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tab-panel': TabPanel;\n  }\n}\n\nexport default TabPanel;\n"],"names":[],"mappings":"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"}

package/dist/dropdown.js

@@ -1,7 +1,7 @@
-import { a, b, D } from "./chunks/dropdown-button.js";
+import { D, a, b } from "./chunks/dropdown-button.js";
 export {
-  a as DropdownButton,
-  b as DropdownItem,
-  D as default
+  D as DropdownButton,
+  a as DropdownItem,
+  b as default
 };
 //# sourceMappingURL=dropdown.js.map