aeico-components 0.1.6 → 0.1.7

package/dist/chunks/dropdown-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-button.js","sources":["../../src/dropdown/dropdown-item.ts","../../src/dropdown/dropdown.ts","../../src/dropdown/dropdown-button.ts"],"sourcesContent":["import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport { html } from 'aeico';\nimport style from '../styles/components/dropdown-item.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport { prop } from 'aeico';\n// Ensure ae-icon is registered when icons are used\nimport '../icon/icon';\n\n/**\n * Dropdown menu item — used as a direct child of `<ae-dropdown>`.\n *\n * Renders as a `<button>` by default, or as an `<a>` anchor when `href` is set.\n * Use `<ae-icon>` inside to add icons, and CSS `color` / `--dropdown-item-color`\n * to apply danger or custom colours.\n *\n * @example\n * ```html\n * <ae-dropdown-item value=\"edit\"><ae-icon name=\"edit\"></ae-icon>Edit</ae-dropdown-item>\n * <ae-dropdown-item value=\"delete\" style=\"--dropdown-item-color:var(--color-danger)\">Delete</ae-dropdown-item>\n * <ae-dropdown-item href=\"/profile\">Profile</ae-dropdown-item>\n * ```\n */\nclass DropdownItem extends AeicoComponent {\n  static tagName = 'dropdown-item';\n\n  /** Value emitted in the `select` event detail on the parent dropdown. */\n  @prop({ type: String })\n  accessor value: string | undefined;\n\n  /** Disables the item — it becomes non-interactive and visually dimmed. */\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  /**\n   * When set, the item renders as an `<a>` anchor element instead of a\n   * `<button>`. Useful for navigation items.\n   */\n  @prop({ type: String })\n  accessor href: string | undefined;\n\n  /**\n   * When `type=\"checkbox\"`, the item behaves as a toggle: each click flips\n   * `checked` and includes the new state in the `select` event detail.\n   */\n  @prop({ type: String })\n  accessor type: 'checkbox' | undefined;\n\n  /**\n   * Whether the item is checked. Only meaningful when `type=\"checkbox\"`.\n   * Reflects as the `checked` attribute.\n   */\n  @prop({ type: Boolean })\n  accessor checked: boolean = false;\n\n  /**\n   * Marks the item as the currently active/selected option (e.g. current route,\n   * current sort order). Purely visual — applies a highlighted background and\n   * accent colour.\n   */\n  @prop({ type: Boolean })\n  accessor active: boolean = false;\n\n  protected static styles = [variables, style];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.listen('click', this._handleClick);\n    this.setAttribute('role', 'menuitem');\n  }\n\n  private _handleClick = (e: Event): void => {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n\n      return;\n    }\n    if (this.type === 'checkbox') {\n      this.checked = !this.checked;\n    }\n    const label = this.textContent?.trim() ?? '';\n    this.dispatchEvent(\n      new CustomEvent('_item-select', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value ?? '', label, checked: this.checked },\n      }),\n    );\n  };\n\n  protected render() {\n    const isCheckbox = this.type === 'checkbox';\n    const sharedProps = {\n      part: 'item',\n      className: 'item',\n      'aria-checked': isCheckbox ? String(this.checked) : undefined,\n    };\n    return html(({ button, a, span, slot }) => {\n      const children = () => {\n        if (isCheckbox) span({ className: 'check-indicator', 'aria-hidden': 'true' });\n        slot();\n      };\n      if (this.href) {\n        a(\n          {\n            ...sharedProps,\n            href: this.disabled ? undefined : this.href,\n            'aria-disabled': this.disabled || undefined,\n          },\n          children,\n        );\n      } else {\n        button(\n          {\n            ...sharedProps,\n            type: 'button',\n            disabled: this.disabled,\n          },\n          children,\n        );\n      }\n    });\n  }\n}\n\nDropdownItem.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-dropdown-item': DropdownItem;\n  }\n}\n\nexport default DropdownItem;\nexport type DropdownItemProps = InferProps<typeof DropdownItem>;\n","import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\nimport style from '../styles/components/dropdown.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport type { DropdownPlacement } from './defines';\n// Ensure ae-dropdown-item is registered when this module is used\nimport './dropdown-item';\n\n/**\n * Dropdown component — renders a floating menu panel anchored to a trigger slot.\n *\n * The trigger is provided via `slot=\"trigger\"` (typically an `<ae-button>`).\n * Menu items are provided as `<ae-dropdown-item>` default-slot children.\n *\n * Emits:\n * - `open`   — when the panel opens\n * - `close`  — when the panel closes\n * - `select` — `{ detail: { value, label } }` when a menu item is clicked\n *\n * @example\n * ```html\n * <ae-dropdown>\n *   <ae-button slot=\"trigger\">Actions</ae-button>\n *   <ae-dropdown-item value=\"edit\" icon=\"edit\">Edit</ae-dropdown-item>\n *   <ae-dropdown-item value=\"delete\" danger icon=\"trash\">Delete</ae-dropdown-item>\n * </ae-dropdown>\n * ```\n *\n * @example\n * ```html\n * <!-- Inside ae-navbar -->\n * <ae-navbar>\n *   <a slot=\"brand\" href=\"/\">MyApp</a>\n *   <ae-dropdown slot=\"end\">\n *     <ae-button slot=\"trigger\" variant=\"outlined\" size=\"sm\">User</ae-button>\n *     <ae-dropdown-item href=\"/profile\" icon=\"user\">Profile</ae-dropdown-item>\n *     <ae-dropdown-item value=\"logout\" danger>Sign out</ae-dropdown-item>\n *   </ae-dropdown>\n * </ae-navbar>\n * ```\n */\nclass Dropdown extends AeicoComponent {\n  static tagName = 'dropdown';\n\n  protected static styles = [variables, style];\n\n  /**\n   * Position of the panel relative to the trigger.\n   * Defaults to `'bottom-start'` (left-aligned, below trigger).\n   */\n  @prop({ type: String })\n  accessor placement: DropdownPlacement = 'bottom-start';\n\n  /**\n   * Whether the dropdown panel is visible. Reflects as the `open` attribute.\n   * Can be used for controlled open/close state.\n   */\n  @prop({ type: Boolean })\n  accessor open: boolean = false;\n\n  /**\n   * When `true` (default), clicking a menu item automatically closes the panel.\n   */\n  @prop({ type: Boolean })\n  accessor closeOnSelect: boolean = true;\n\n  /** Disables the trigger and prevents opening. */\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  /**\n   * Optional label text. When set, `ae-dropdown` renders its own trigger button\n   * in the shadow DOM (no `slot=\"trigger\"` needed). Inherits `--ae-navbar-link-*`\n   * CSS variables so it automatically matches navbar link styles.\n   */\n  @prop({ type: String })\n  accessor label: string = '';\n\n  private _outsideClickHandler: ((e: MouseEvent) => void) | null = null;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    this.listen('_item-select', this._handleItemSelect as EventListener);\n    this.listen('keydown', this._handleKeydown as EventListener);\n\n    this._outsideClickHandler = (e: MouseEvent) => {\n      if (!this.open) return;\n      const path = e.composedPath();\n      if (!path.includes(this)) {\n        this._closePanel();\n      }\n    };\n    document.addEventListener('click', this._outsideClickHandler);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._outsideClickHandler) {\n      document.removeEventListener('click', this._outsideClickHandler);\n      this._outsideClickHandler = null;\n    }\n  }\n\n  /** Opens the dropdown panel. */\n  show(): void {\n    if (this.disabled || this.open) return;\n    this.open = true;\n    this.emit('open');\n  }\n\n  /** Closes the dropdown panel. */\n  hide(): void {\n    if (!this.open) return;\n    this.open = false;\n    this.emit('close');\n  }\n\n  /** Toggles the dropdown panel open/closed. */\n  toggle(): void {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  private _closePanel(): void {\n    if (this.open) this.hide();\n  }\n\n  // Called via declarative @click on the trigger-wrapper div inside the shadow DOM.\n  // Events from slotted trigger content bubble through the shadow DOM slot path,\n  // so this fires for trigger clicks only — not for panel item clicks.\n  private _handleTriggerClick = (): void => {\n    this.toggle();\n  };\n\n  private _handleItemSelect = (e: CustomEvent): void => {\n    this.emit('select', { detail: e.detail });\n    if (this.closeOnSelect) {\n      this._closePanel();\n    }\n  };\n\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape' && this.open) {\n      e.stopPropagation();\n      this._closePanel();\n    }\n  };\n\n  protected render() {\n    const placementClass = `placement-${this.placement}`;\n    const hasLabel = !!this.label;\n    const dir = this.placement.split('-')[0];\n    return html(({ div, slot, button, span }) => {\n      div(\n        {\n          className: 'trigger-wrapper',\n          'aria-haspopup': 'menu',\n          'aria-expanded': String(this.open),\n          '@click': this.disabled ? undefined : this._handleTriggerClick,\n        },\n        () => {\n          if (hasLabel) {\n            button(\n              {\n                className: 'trigger-label',\n                type: 'button',\n                disabled: this.disabled || undefined,\n              },\n              () => {\n                span({ text: this.label });\n                span({\n                  className: `ae-dropdown-arrow ae-dropdown-arrow--${dir}`,\n                  'aria-hidden': 'true',\n                });\n              },\n            );\n          } else {\n            slot({ name: 'trigger' });\n          }\n        },\n      );\n      div(\n        {\n          part: 'panel',\n          className: { panel: true, open: this.open, [placementClass]: true },\n          role: 'menu',\n        },\n        () => {\n          slot();\n        },\n      );\n    });\n  }\n}\n\nDropdown.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-dropdown': Dropdown;\n  }\n}\n\nexport default Dropdown;\nexport type DropdownProps = InferProps<typeof Dropdown>;\n","import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\nimport type { ButtonColor, ButtonSize, ButtonVariant } from '../button/defines';\nimport type { DropdownPlacement } from './defines';\nimport type Dropdown from './dropdown';\nimport './dropdown';\nimport '../button/button';\n\n/**\n * DropdownButton — a pre-composed trigger + dropdown panel.\n *\n * Renders an `ae-button`-styled trigger with a built-in chevron,\n * and a floating panel for `<ae-dropdown-item>` children.\n * Accepts the same `variant`, `color`, `size`, and `disabled` props\n * as `ae-button`, making it a drop-in inside `ae-button-group`.\n *\n * @example\n * ```html\n * <ae-dropdown-button variant=\"outlined\" color=\"primary\">\n *   Actions\n *   <ae-dropdown-item value=\"edit\">Edit</ae-dropdown-item>\n *   <ae-dropdown-item value=\"delete\">Delete</ae-dropdown-item>\n * </ae-dropdown-button>\n *\n * <!-- Inside ae-button-group -->\n * <ae-button-group compact color=\"primary\">\n *   <ae-button>Save</ae-button>\n *   <ae-dropdown-button placement=\"bottom-end\">\n *     <ae-dropdown-item value=\"draft\">Save as draft</ae-dropdown-item>\n *     <ae-dropdown-item value=\"template\">Save as template</ae-dropdown-item>\n *   </ae-dropdown-button>\n * </ae-button-group>\n * ```\n *\n * Emits:\n * - `open`   — when the panel opens\n * - `close`  — when the panel closes\n * - `select` — `{ detail: { value, label } }` when a menu item is selected\n */\nclass DropdownButton extends AeicoComponent {\n  static tagName = 'dropdown-button';\n\n  // ae-button and ae-dropdown each carry their own shadow DOM styles.\n  // Only the host display is set here so button-group compact layout works.\n  protected static styles = [\n    ':host { display: inline-block; }',\n    '.caret { display: inline-block; width: 0; height: 0; margin-left: 0.3em; vertical-align: 0.2em; flex-shrink: 0; }',\n    '.caret--bottom { border-top: 0.35em solid; border-right: 0.35em solid transparent; border-left: 0.35em solid transparent; }',\n    '.caret--top { border-bottom: 0.35em solid; border-right: 0.35em solid transparent; border-left: 0.35em solid transparent; }',\n    '.caret--right { border-left: 0.35em solid; border-top: 0.35em solid transparent; border-bottom: 0.35em solid transparent; }',\n    '.caret--left { border-right: 0.35em solid; border-top: 0.35em solid transparent; border-bottom: 0.35em solid transparent; }',\n  ];\n\n  @prop({ type: String })\n  accessor variant: ButtonVariant = 'filled';\n\n  @prop({ type: String })\n  accessor color: ButtonColor = 'default';\n\n  @prop({ type: String })\n  accessor size: ButtonSize = 'md';\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  @prop({ type: String })\n  accessor placement: DropdownPlacement = 'bottom-start';\n\n  @prop({ type: Boolean })\n  accessor closeOnSelect: boolean = true;\n\n  private _dropdownEl: Dropdown | null = null;\n\n  show(): void {\n    if (this.disabled) return;\n    this._dropdownEl?.show();\n  }\n  hide(): void {\n    this._dropdownEl?.hide();\n  }\n  toggle(): void {\n    if (this.disabled) return;\n    this._dropdownEl?.toggle();\n  }\n\n  get open(): boolean {\n    return this._dropdownEl?.open ?? false;\n  }\n\n  protected render() {\n    const dir = this.placement.split('-')[0];\n    return html(({ aeDropdown, aeButton, slot, span }) => {\n      this._dropdownEl = aeDropdown(\n        {\n          placement: this.placement,\n          'close-on-select': this.closeOnSelect,\n        },\n        () => {\n          aeButton(\n            {\n              slot: 'trigger',\n              variant: this.variant,\n              color: this.color,\n              size: this.size,\n              disabled: this.disabled || undefined,\n            },\n            () => {\n              slot({ name: 'label' });\n              span({ className: `caret caret--${dir}`, 'aria-hidden': 'true' });\n            },\n          );\n          slot();\n        },\n      );\n    });\n  }\n}\n\nDropdownButton.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-dropdown-button': DropdownButton;\n  }\n}\n\nexport default DropdownButton;\nexport type DropdownButtonProps = InferProps<typeof DropdownButton>;\n"],"names":["_disabled_dec","_a","_init","_disabled","__privateAdd","__runInitializers","__publicField","__decoratorStart","__decorateElement","__decoratorMetadata","_closeOnSelect_dec","_placement_dec","_placement","_closeOnSelect","style"],"mappings":"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"}
+{"version":3,"file":"dropdown-button.js","sources":["../../src/dropdown/dropdown-item.ts","../../src/dropdown/dropdown.ts","../../src/dropdown/dropdown-button.ts"],"sourcesContent":["import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport { html } from 'aeico';\nimport style from '../styles/components/dropdown-item.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport { prop } from 'aeico';\n// Ensure ae-icon is registered when icons are used\nimport '../icon/icon';\n\n/**\n * Dropdown menu item — used as a direct child of `<ae-dropdown>`.\n *\n * Renders as a `<button>` by default, or as an `<a>` anchor when `href` is set.\n * Use `<ae-icon>` inside to add icons, and CSS `color` / `--dropdown-item-color`\n * to apply danger or custom colours.\n *\n * @example\n * ```html\n * <ae-dropdown-item value=\"edit\"><ae-icon name=\"edit\"></ae-icon>Edit</ae-dropdown-item>\n * <ae-dropdown-item value=\"delete\" style=\"--dropdown-item-color:var(--color-danger)\">Delete</ae-dropdown-item>\n * <ae-dropdown-item href=\"/profile\">Profile</ae-dropdown-item>\n * ```\n */\nclass DropdownItem extends AeicoComponent {\n  static tagName = 'dropdown-item';\n\n  /** Value emitted in the `select` event detail on the parent dropdown. */\n  @prop({ type: String })\n  accessor value: string | undefined;\n\n  /** Disables the item — it becomes non-interactive and visually dimmed. */\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  /**\n   * When set, the item renders as an `<a>` anchor element instead of a\n   * `<button>`. Useful for navigation items.\n   */\n  @prop({ type: String })\n  accessor href: string | undefined;\n\n  /**\n   * When `type=\"checkbox\"`, the item behaves as a toggle: each click flips\n   * `checked` and includes the new state in the `select` event detail.\n   */\n  @prop({ type: String })\n  accessor type: 'checkbox' | undefined;\n\n  /**\n   * Whether the item is checked. Only meaningful when `type=\"checkbox\"`.\n   * Reflects as the `checked` attribute.\n   */\n  @prop({ type: Boolean })\n  accessor checked: boolean = false;\n\n  /**\n   * Marks the item as the currently active/selected option (e.g. current route,\n   * current sort order). Purely visual — applies a highlighted background and\n   * accent colour.\n   */\n  @prop({ type: Boolean })\n  accessor active: boolean = false;\n\n  protected static styles = [variables, style];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.listen('click', this._handleClick);\n    this.setAttribute('role', 'menuitem');\n  }\n\n  private _handleClick = (e: Event): void => {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n\n      return;\n    }\n    if (this.type === 'checkbox') {\n      this.checked = !this.checked;\n    }\n    const label = this.textContent?.trim() ?? '';\n    this.dispatchEvent(\n      new CustomEvent('_item-select', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value ?? '', label, checked: this.checked },\n      }),\n    );\n  };\n\n  protected render() {\n    const isCheckbox = this.type === 'checkbox';\n    const sharedProps = {\n      part: 'item',\n      className: 'item',\n      'aria-checked': isCheckbox ? String(this.checked) : undefined,\n    };\n    return html(({ button, a, span, slot }) => {\n      const children = () => {\n        if (isCheckbox) span({ className: 'check-indicator', 'aria-hidden': 'true' });\n        slot();\n      };\n      if (this.href) {\n        a(\n          {\n            ...sharedProps,\n            href: this.disabled ? undefined : this.href,\n            'aria-disabled': this.disabled || undefined,\n          },\n          children,\n        );\n      } else {\n        button(\n          {\n            ...sharedProps,\n            type: 'button',\n            disabled: this.disabled,\n          },\n          children,\n        );\n      }\n    });\n  }\n}\n\nDropdownItem.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-dropdown-item': DropdownItem;\n  }\n}\n\nexport default DropdownItem;\nexport type DropdownItemProps = InferProps<typeof DropdownItem>;\n","import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\nimport style from '../styles/components/dropdown.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport type { DropdownPlacement } from './defines';\n// Ensure ae-dropdown-item is registered when this module is used\nimport './dropdown-item';\n\n/**\n * Dropdown component — renders a floating menu panel anchored to a trigger slot.\n *\n * The trigger is provided via `slot=\"trigger\"` (typically an `<ae-button>`).\n * Menu items are provided as `<ae-dropdown-item>` default-slot children.\n *\n * Emits:\n * - `open`   — when the panel opens\n * - `close`  — when the panel closes\n * - `select` — `{ detail: { value, label } }` when a menu item is clicked\n *\n * @example\n * ```html\n * <ae-dropdown>\n *   <ae-button slot=\"trigger\">Actions</ae-button>\n *   <ae-dropdown-item value=\"edit\" icon=\"edit\">Edit</ae-dropdown-item>\n *   <ae-dropdown-item value=\"delete\" danger icon=\"trash\">Delete</ae-dropdown-item>\n * </ae-dropdown>\n * ```\n *\n * @example\n * ```html\n * <!-- Inside ae-navbar -->\n * <ae-navbar>\n *   <a slot=\"brand\" href=\"/\">MyApp</a>\n *   <ae-dropdown slot=\"end\">\n *     <ae-button slot=\"trigger\" variant=\"outlined\" size=\"sm\">User</ae-button>\n *     <ae-dropdown-item href=\"/profile\" icon=\"user\">Profile</ae-dropdown-item>\n *     <ae-dropdown-item value=\"logout\" danger>Sign out</ae-dropdown-item>\n *   </ae-dropdown>\n * </ae-navbar>\n * ```\n */\nclass Dropdown extends AeicoComponent {\n  static tagName = 'dropdown';\n\n  protected static styles = [variables, style];\n\n  /**\n   * Position of the panel relative to the trigger.\n   * Defaults to `'bottom-start'` (left-aligned, below trigger).\n   */\n  @prop({ type: String })\n  accessor placement: DropdownPlacement = 'bottom-start';\n\n  /**\n   * Whether the dropdown panel is visible. Reflects as the `open` attribute.\n   * Can be used for controlled open/close state.\n   */\n  @prop({ type: Boolean })\n  accessor open: boolean = false;\n\n  /**\n   * When `true` (default), clicking a menu item automatically closes the panel.\n   */\n  @prop({ type: Boolean })\n  accessor closeOnSelect: boolean = true;\n\n  /** Disables the trigger and prevents opening. */\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  /**\n   * Optional label text. When set, `ae-dropdown` renders its own trigger button\n   * in the shadow DOM (no `slot=\"trigger\"` needed). Inherits `--ae-navbar-link-*`\n   * CSS variables so it automatically matches navbar link styles.\n   */\n  @prop({ type: String })\n  accessor label: string = '';\n\n  private _outsideClickHandler: ((e: MouseEvent) => void) | null = null;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    this.listen('_item-select', this._handleItemSelect as EventListener);\n    this.listen('keydown', this._handleKeydown as EventListener);\n\n    this._outsideClickHandler = (e: MouseEvent) => {\n      if (!this.open) return;\n      const path = e.composedPath();\n      if (!path.includes(this)) {\n        this._closePanel();\n      }\n    };\n    document.addEventListener('click', this._outsideClickHandler);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._outsideClickHandler) {\n      document.removeEventListener('click', this._outsideClickHandler);\n      this._outsideClickHandler = null;\n    }\n  }\n\n  /** Opens the dropdown panel. */\n  show(): void {\n    if (this.disabled || this.open) return;\n    this.open = true;\n    this.emit('open');\n  }\n\n  /** Closes the dropdown panel. */\n  hide(): void {\n    if (!this.open) return;\n    this.open = false;\n    this.emit('close');\n  }\n\n  /** Toggles the dropdown panel open/closed. */\n  toggle(): void {\n    if (this.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  private _closePanel(): void {\n    if (this.open) this.hide();\n  }\n\n  // Called via declarative @click on the trigger-wrapper div inside the shadow DOM.\n  // Events from slotted trigger content bubble through the shadow DOM slot path,\n  // so this fires for trigger clicks only — not for panel item clicks.\n  private _handleTriggerClick = (): void => {\n    this.toggle();\n  };\n\n  private _handleItemSelect = (e: CustomEvent): void => {\n    this.emit('select', { detail: e.detail });\n    if (this.closeOnSelect) {\n      this._closePanel();\n    }\n  };\n\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape' && this.open) {\n      e.stopPropagation();\n      this._closePanel();\n    }\n  };\n\n  protected render() {\n    const placementClass = `placement-${this.placement}`;\n    const hasLabel = !!this.label;\n    const dir = this.placement.split('-')[0];\n    return html(({ div, slot, button, span }) => {\n      div(\n        {\n          className: 'trigger-wrapper',\n          'aria-haspopup': 'menu',\n          'aria-expanded': String(this.open),\n          '@click': this.disabled ? undefined : this._handleTriggerClick,\n        },\n        () => {\n          if (hasLabel) {\n            button(\n              {\n                className: 'trigger-label',\n                type: 'button',\n                disabled: this.disabled || undefined,\n              },\n              () => {\n                span({ text: this.label });\n                span({\n                  className: `ae-dropdown-arrow ae-dropdown-arrow--${dir}`,\n                  'aria-hidden': 'true',\n                });\n              },\n            );\n          } else {\n            slot({ name: 'trigger' });\n          }\n        },\n      );\n      div(\n        {\n          part: 'panel',\n          className: { panel: true, open: this.open, [placementClass]: true },\n          role: 'menu',\n        },\n        () => {\n          slot();\n        },\n      );\n    });\n  }\n}\n\nDropdown.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-dropdown': Dropdown;\n  }\n}\n\nexport default Dropdown;\nexport type DropdownProps = InferProps<typeof Dropdown>;\n","import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\nimport type { ButtonColor, ButtonSize, ButtonVariant } from '../button/defines';\nimport type { DropdownPlacement } from './defines';\nimport type Dropdown from './dropdown';\nimport './dropdown';\nimport '../button/button';\n\n/**\n * DropdownButton — a pre-composed trigger + dropdown panel.\n *\n * Renders an `ae-button`-styled trigger with a built-in chevron,\n * and a floating panel for `<ae-dropdown-item>` children.\n * Accepts the same `variant`, `color`, `size`, and `disabled` props\n * as `ae-button`, making it a drop-in inside `ae-button-group`.\n *\n * @example\n * ```html\n * <ae-dropdown-button variant=\"outlined\" color=\"primary\">\n *   Actions\n *   <ae-dropdown-item value=\"edit\">Edit</ae-dropdown-item>\n *   <ae-dropdown-item value=\"delete\">Delete</ae-dropdown-item>\n * </ae-dropdown-button>\n *\n * <!-- Inside ae-button-group -->\n * <ae-button-group compact color=\"primary\">\n *   <ae-button>Save</ae-button>\n *   <ae-dropdown-button placement=\"bottom-end\">\n *     <ae-dropdown-item value=\"draft\">Save as draft</ae-dropdown-item>\n *     <ae-dropdown-item value=\"template\">Save as template</ae-dropdown-item>\n *   </ae-dropdown-button>\n * </ae-button-group>\n * ```\n *\n * Emits:\n * - `open`   — when the panel opens\n * - `close`  — when the panel closes\n * - `select` — `{ detail: { value, label } }` when a menu item is selected\n */\nclass DropdownButton extends AeicoComponent {\n  static tagName = 'dropdown-button';\n\n  // ae-button and ae-dropdown each carry their own shadow DOM styles.\n  // Only the host display is set here so button-group compact layout works.\n  protected static styles = [\n    ':host { display: inline-block; }',\n    '.caret { display: inline-block; width: 0; height: 0; margin-left: 0.3em; vertical-align: 0.2em; flex-shrink: 0; }',\n    '.caret--bottom { border-top: 0.35em solid; border-right: 0.35em solid transparent; border-left: 0.35em solid transparent; }',\n    '.caret--top { border-bottom: 0.35em solid; border-right: 0.35em solid transparent; border-left: 0.35em solid transparent; }',\n    '.caret--right { border-left: 0.35em solid; border-top: 0.35em solid transparent; border-bottom: 0.35em solid transparent; }',\n    '.caret--left { border-right: 0.35em solid; border-top: 0.35em solid transparent; border-bottom: 0.35em solid transparent; }',\n  ];\n\n  @prop({ type: String })\n  accessor variant: ButtonVariant = 'filled';\n\n  @prop({ type: String })\n  accessor color: ButtonColor = 'default';\n\n  @prop({ type: String })\n  accessor size: ButtonSize = 'md';\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  @prop({ type: String })\n  accessor placement: DropdownPlacement = 'bottom-start';\n\n  @prop({ type: Boolean })\n  accessor closeOnSelect: boolean = true;\n\n  private _dropdownEl: Dropdown | null = null;\n\n  show(): void {\n    if (this.disabled) return;\n    this._dropdownEl?.show();\n  }\n  hide(): void {\n    this._dropdownEl?.hide();\n  }\n  toggle(): void {\n    if (this.disabled) return;\n    this._dropdownEl?.toggle();\n  }\n\n  get open(): boolean {\n    return this._dropdownEl?.open ?? false;\n  }\n\n  protected render() {\n    const dir = this.placement.split('-')[0];\n    return html(({ aeDropdown, aeButton, slot, span }) => {\n      this._dropdownEl = aeDropdown(\n        {\n          placement: this.placement,\n          'close-on-select': this.closeOnSelect,\n        },\n        () => {\n          aeButton(\n            {\n              slot: 'trigger',\n              variant: this.variant,\n              color: this.color,\n              size: this.size,\n              disabled: this.disabled || undefined,\n            },\n            () => {\n              slot({ name: 'label' });\n              span({ className: `caret caret--${dir}`, 'aria-hidden': 'true' });\n            },\n          );\n          slot();\n        },\n      );\n    });\n  }\n}\n\nDropdownButton.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-dropdown-button': DropdownButton;\n  }\n}\n\nexport default DropdownButton;\nexport type DropdownButtonProps = InferProps<typeof DropdownButton>;\n"],"names":["_disabled_dec","_a","_init","_disabled","__privateAdd","__runInitializers","__publicField","__decoratorStart","__decorateElement","__decoratorMetadata","_closeOnSelect_dec","_placement_dec","_placement","_closeOnSelect","style"],"mappings":"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"}

package/dist/chunks/icon.cjs

@@ -7,14 +7,14 @@ const aeico = require("aeico");
 const variables = require("./variables.cjs");
 const size = require("./size.cjs");
 const color = require("./color.cjs");
-const style = ":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 20px;\n  width:  1em;\n  height: 1em;\n  color: inherit;\n  flex-shrink: 0;\n  line-height: 0;\n  vertical-align: middle;\n}\n\n:host([color]) {\n  color: var(--color-solid);\n}\n\n.icon-svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  fill: var(--icon-fill, currentColor);\n  stroke: var(--icon-stroke, none);\n  stroke-width: var(--icon-stroke-width, 2);\n  stroke-linecap: var(--icon-stroke-linecap, round);\n  stroke-linejoin: var(--icon-stroke-linejoin, round);\n  pointer-events: none;\n  overflow: visible;\n}\n";
+const style = ":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 20px;\n  width:  1em;\n  height: 1em;\n  color: inherit;\n  flex-shrink: 0;\n  line-height: 0;\n  vertical-align: middle;\n}\n\n:host([color]) {\n  color: var(--ae-color-solid);\n}\n\n.icon-svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  fill: var(--icon-fill, currentColor);\n  stroke: var(--icon-stroke, none);\n  stroke-width: var(--icon-stroke-width, 2);\n  stroke-linecap: var(--icon-stroke-linecap, round);\n  stroke-linejoin: var(--icon-stroke-linejoin, round);\n  pointer-events: none;\n  overflow: visible;\n}\n";
 const defaultViewBox = "0 0 24 24";
 class IconRegistry {
   /** Register user icons. Always takes priority over built-in icons. */
   static add(icons) {
     for (const [name, data] of Object.entries(icons)) {
       if (typeof data === "string") {
-        this._icons.set(name, { path: data, viewBox: defaultViewBox });
+        this._icons.set(name, { paths: data, viewBox: defaultViewBox });
       } else {
         this._icons.set(name, data);
       }
@@ -29,7 +29,7 @@ class IconRegistry {
     for (const [name, data] of Object.entries(icons)) {
       if (this._icons.has(name) && !this._builtInKeys.has(name)) continue;
       if (typeof data === "string") {
-        this._icons.set(name, { path: data, viewBox: defaultViewBox });
+        this._icons.set(name, { paths: data, viewBox: defaultViewBox });
       } else {
         this._icons.set(name, data);
       }
@@ -66,18 +66,26 @@ class Icon extends aeicoComponent.AeicoComponent {
     } else {
       this.style.removeProperty("font-size");
     }
-    const useStroke = this.stroke ?? (def == null ? void 0 : def.stroke) ?? false;
-    const useStrokeWidth = this.strokeWidth ?? (def == null ? void 0 : def.strokeWidth) ?? 2;
-    if (useStroke) {
-      this.style.setProperty("--icon-fill", "none");
-      this.style.setProperty("--icon-stroke", "currentColor");
-      this.style.setProperty("--icon-stroke-width", String(useStrokeWidth));
+    if (!def) return;
+    const { paths } = def;
+    const isMultiPath = Array.isArray(paths);
+    if (!isMultiPath) {
+      const useStroke = this.stroke ?? (this.strokeWidth !== void 0 ? true : def.stroke ?? false);
+      const useStrokeWidth = this.strokeWidth ?? def.strokeWidth ?? 2;
+      if (useStroke) {
+        this.style.setProperty("--icon-fill", "none");
+        this.style.setProperty("--icon-stroke", "currentColor");
+        this.style.setProperty("--icon-stroke-width", String(useStrokeWidth));
+      } else {
+        this.style.removeProperty("--icon-fill");
+        this.style.removeProperty("--icon-stroke");
+        this.style.removeProperty("--icon-stroke-width");
+      }
     } else {
       this.style.removeProperty("--icon-fill");
       this.style.removeProperty("--icon-stroke");
       this.style.removeProperty("--icon-stroke-width");
     }
-    if (!def) return;
     return aeico.html(({ svg, path }) => {
       svg(
         {
@@ -87,7 +95,15 @@ class Icon extends aeicoComponent.AeicoComponent {
           xmlns: aeicoComponent.SVG_NS
         },
         () => {
-          path({ d: def.path });
+          if (typeof paths === "string") {
+            path({ d: paths });
+          } else {
+            for (const p of paths) {
+              const attrs = { d: p.d };
+              if (p.fill) attrs.style = { fill: p.fill };
+              path(attrs);
+            }
+          }
         }
       );
     });

package/dist/chunks/icon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"icon.cjs","sources":["../../src/icon/defines.ts","../../src/icon/registry.ts","../../src/icon/built-in-icons.ts","../../src/icon/icon.ts"],"sourcesContent":["export type IconSize = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;\n\nexport type IconColor =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'success'\n  | 'danger'\n  | 'warning'\n  | 'info';\n\nexport interface IconDefinition {\n  path: string;\n  viewBox?: string;\n  stroke?: boolean;\n  strokeWidth?: number;\n}\n\nexport const defaultViewBox = '0 0 24 24';\n\nexport type IconRegistryData = Record<string, string | IconDefinition>;\n","import { IconDefinition, IconRegistryData, defaultViewBox } from './defines';\n\nclass IconRegistry {\n  private static _icons: Map<string, IconDefinition> = new Map();\n  /** Names registered via addBuiltIn — can be overridden by user add() calls */\n  private static _builtInKeys: Set<string> = new Set();\n\n  /** Register user icons. Always takes priority over built-in icons. */\n  static add(icons: IconRegistryData) {\n    for (const [name, data] of Object.entries(icons)) {\n      if (typeof data === 'string') {\n        this._icons.set(name, { path: data, viewBox: defaultViewBox });\n      } else {\n        this._icons.set(name, data);\n      }\n      // Mark as user-defined (removes built-in status)\n      this._builtInKeys.delete(name);\n    }\n  }\n\n  /**\n   * Register built-in icons provided by the library.\n   * A built-in icon will NOT overwrite an icon already registered by the user.\n   */\n  static addBuiltIn(icons: IconRegistryData) {\n    for (const [name, data] of Object.entries(icons)) {\n      // Skip if the user has already registered this icon\n      if (this._icons.has(name) && !this._builtInKeys.has(name)) continue;\n      if (typeof data === 'string') {\n        this._icons.set(name, { path: data, viewBox: defaultViewBox });\n      } else {\n        this._icons.set(name, data);\n      }\n      this._builtInKeys.add(name);\n    }\n  }\n\n  static get(name: string): IconDefinition | undefined {\n    return this._icons.get(name);\n  }\n\n  static has(name: string): boolean {\n    return this._icons.has(name);\n  }\n}\n\nexport default IconRegistry;\n","/**\n * Built-in system icons used internally by aeico components.\n * These are pre-registered so components work out of the box.\n * Users can override any of them by calling IconRegistry.add({ 'name': '...' }).\n *\n * All paths use the Material Design 24×24 viewBox.\n */\nimport IconRegistry from './registry';\n\nIconRegistry.addBuiltIn({\n  copy: 'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z',\n  check: 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z',\n  'chevron-left': 'M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z',\n  'chevron-right': 'M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z',\n  'chevron-up': 'M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z',\n  'chevron-down': 'M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z',\n  'chevrons-left': 'M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z',\n  'chevrons-right': 'M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z',\n  close:\n    'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',\n});\n","import type { InferProps, Props } from 'aeico';\nimport { SVG_NS } from '../utils';\nimport AeicoComponent from '../aeico-component';\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 style from '../styles/components/icon.css?inline';\nimport type { IconSize, IconColor } from './defines';\nimport { defaultViewBox } from './defines';\nimport IconRegistry from './registry';\nimport './built-in-icons';\n\nclass Icon extends AeicoComponent {\n  static tagName = 'icon';\n\n  static props: Props = {\n    name: { type: String },\n    size: { type: String },\n    color: { type: String },\n    stroke: { type: Boolean },\n    strokeWidth: { type: Number },\n  };\n\n  declare name?: string;\n  declare size?: IconSize;\n  declare color?: IconColor;\n  declare stroke?: boolean;\n  declare strokeWidth?: number;\n\n  protected static styles = [styleVariables, sizeCSS, colorCSS, style];\n\n  protected render() {\n    const def = this.name ? IconRegistry.get(this.name) : undefined;\n\n    // Numeric size: set font-size directly (string sizes are handled by size.css)\n    const numericSize = Number(this.size);\n    if (this.size !== undefined && !isNaN(numericSize) && numericSize > 0) {\n      this.style.setProperty('font-size', `${numericSize}px`);\n    } else {\n      this.style.removeProperty('font-size');\n    }\n\n    // Resolve stroke: component prop takes priority over registry definition\n    const useStroke = this.stroke ?? def?.stroke ?? false;\n    const useStrokeWidth = this.strokeWidth ?? def?.strokeWidth ?? 2;\n\n    if (useStroke) {\n      this.style.setProperty('--icon-fill', 'none');\n      this.style.setProperty('--icon-stroke', 'currentColor');\n      this.style.setProperty('--icon-stroke-width', String(useStrokeWidth));\n    } else {\n      this.style.removeProperty('--icon-fill');\n      this.style.removeProperty('--icon-stroke');\n      this.style.removeProperty('--icon-stroke-width');\n    }\n\n    if (!def) return;\n\n    return html(({ svg, path }) => {\n      svg(\n        {\n          className: 'icon-svg',\n          viewBox: def.viewBox ?? defaultViewBox,\n          'aria-hidden': 'true',\n          xmlns: SVG_NS,\n        },\n        () => {\n          path({ d: def.path });\n        },\n      );\n    });\n  }\n}\n\nIcon.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-icon': Icon;\n  }\n}\n\nexport default Icon;\nexport type IconProps = InferProps<typeof Icon>;\n"],"names":["AeicoComponent","html","SVG_NS","styleVariables","sizeCSS","colorCSS"],"mappings":"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"}
+{"version":3,"file":"icon.cjs","sources":["../../src/icon/defines.ts","../../src/icon/registry.ts","../../src/icon/built-in-icons.ts","../../src/icon/icon.ts"],"sourcesContent":["export type IconSize = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;\n\nexport type IconColor =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'success'\n  | 'danger'\n  | 'warning'\n  | 'info';\n\nexport interface IconPathDef {\n  d: string;\n  fill?: string;\n}\n\nexport interface IconDefinition {\n  paths: string | IconPathDef[];\n  viewBox?: string;\n  stroke?: boolean;\n  strokeWidth?: number;\n}\n\nexport const defaultViewBox = '0 0 24 24';\n\nexport type IconRegistryData = Record<string, string | IconDefinition>;\n","import { IconDefinition, IconRegistryData, defaultViewBox } from './defines';\n\nclass IconRegistry {\n  private static _icons: Map<string, IconDefinition> = new Map();\n  /** Names registered via addBuiltIn — can be overridden by user add() calls */\n  private static _builtInKeys: Set<string> = new Set();\n\n  /** Register user icons. Always takes priority over built-in icons. */\n  static add(icons: IconRegistryData) {\n    for (const [name, data] of Object.entries(icons)) {\n      if (typeof data === 'string') {\n        this._icons.set(name, { paths: data, viewBox: defaultViewBox });\n      } else {\n        this._icons.set(name, data);\n      }\n      // Mark as user-defined (removes built-in status)\n      this._builtInKeys.delete(name);\n    }\n  }\n\n  /**\n   * Register built-in icons provided by the library.\n   * A built-in icon will NOT overwrite an icon already registered by the user.\n   */\n  static addBuiltIn(icons: IconRegistryData) {\n    for (const [name, data] of Object.entries(icons)) {\n      // Skip if the user has already registered this icon\n      if (this._icons.has(name) && !this._builtInKeys.has(name)) continue;\n      if (typeof data === 'string') {\n        this._icons.set(name, { paths: data, viewBox: defaultViewBox });\n      } else {\n        this._icons.set(name, data);\n      }\n      this._builtInKeys.add(name);\n    }\n  }\n\n  static get(name: string): IconDefinition | undefined {\n    return this._icons.get(name);\n  }\n\n  static has(name: string): boolean {\n    return this._icons.has(name);\n  }\n}\n\nexport default IconRegistry;\n","/**\n * Built-in system icons used internally by aeico components.\n * These are pre-registered so components work out of the box.\n * Users can override any of them by calling IconRegistry.add({ 'name': '...' }).\n *\n * All paths use the Material Design 24×24 viewBox.\n */\nimport IconRegistry from './registry';\n\nIconRegistry.addBuiltIn({\n  copy: 'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z',\n  check: 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z',\n  'chevron-left': 'M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z',\n  'chevron-right': 'M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z',\n  'chevron-up': 'M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z',\n  'chevron-down': 'M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z',\n  'chevrons-left': 'M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z',\n  'chevrons-right': 'M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z',\n  close:\n    'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',\n});\n","import type { InferProps, Props } from 'aeico';\nimport { SVG_NS } from '../utils';\nimport AeicoComponent from '../aeico-component';\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 style from '../styles/components/icon.css?inline';\nimport type { IconSize, IconColor } from './defines';\nimport { defaultViewBox } from './defines';\nimport IconRegistry from './registry';\nimport './built-in-icons';\n\nclass Icon extends AeicoComponent {\n  static tagName = 'icon';\n\n  static props: Props = {\n    name: { type: String },\n    size: { type: String },\n    color: { type: String },\n    stroke: { type: Boolean },\n    strokeWidth: { type: Number },\n  };\n\n  declare name?: string;\n  declare size?: IconSize;\n  declare color?: IconColor;\n  declare stroke?: boolean;\n  declare strokeWidth?: number;\n\n  protected static styles = [styleVariables, sizeCSS, colorCSS, style];\n\n  protected render() {\n    const def = this.name ? IconRegistry.get(this.name) : undefined;\n\n    // Numeric size: set font-size directly (string sizes are handled by size.css)\n    const numericSize = Number(this.size);\n    if (this.size !== undefined && !isNaN(numericSize) && numericSize > 0) {\n      this.style.setProperty('font-size', `${numericSize}px`);\n    } else {\n      this.style.removeProperty('font-size');\n    }\n\n    if (!def) return;\n\n    const { paths } = def;\n    const isMultiPath = Array.isArray(paths);\n\n    // Stroke CSS variables only apply in single-path mode (component props)\n    if (!isMultiPath) {\n      const useStroke =\n        this.stroke ?? (this.strokeWidth !== undefined ? true : (def.stroke ?? false));\n      const useStrokeWidth = this.strokeWidth ?? def.strokeWidth ?? 2;\n\n      if (useStroke) {\n        this.style.setProperty('--icon-fill', 'none');\n        this.style.setProperty('--icon-stroke', 'currentColor');\n        this.style.setProperty('--icon-stroke-width', String(useStrokeWidth));\n      } else {\n        this.style.removeProperty('--icon-fill');\n        this.style.removeProperty('--icon-stroke');\n        this.style.removeProperty('--icon-stroke-width');\n      }\n    } else {\n      this.style.removeProperty('--icon-fill');\n      this.style.removeProperty('--icon-stroke');\n      this.style.removeProperty('--icon-stroke-width');\n    }\n\n    return html(({ svg, path }) => {\n      svg(\n        {\n          className: 'icon-svg',\n          viewBox: def.viewBox ?? defaultViewBox,\n          'aria-hidden': 'true',\n          xmlns: SVG_NS,\n        },\n        () => {\n          if (typeof paths === 'string') {\n            path({ d: paths });\n          } else {\n            for (const p of paths) {\n              const attrs: Record<string, unknown> = { d: p.d };\n              if (p.fill) attrs.style = { fill: p.fill };\n              path(attrs);\n            }\n          }\n        },\n      );\n    });\n  }\n}\n\nIcon.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-icon': Icon;\n  }\n}\n\nexport default Icon;\nexport type IconProps = InferProps<typeof Icon>;\n"],"names":["AeicoComponent","html","SVG_NS","styleVariables","sizeCSS","colorCSS"],"mappings":"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"}

package/dist/chunks/icon.js

@@ -6,14 +6,14 @@ import { html } from "aeico";
 import { v as variables } from "./variables.js";
 import { s as sizeCSS } from "./size.js";
 import { c as colorCSS } from "./color.js";
-const style = ":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 20px;\n  width:  1em;\n  height: 1em;\n  color: inherit;\n  flex-shrink: 0;\n  line-height: 0;\n  vertical-align: middle;\n}\n\n:host([color]) {\n  color: var(--color-solid);\n}\n\n.icon-svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  fill: var(--icon-fill, currentColor);\n  stroke: var(--icon-stroke, none);\n  stroke-width: var(--icon-stroke-width, 2);\n  stroke-linecap: var(--icon-stroke-linecap, round);\n  stroke-linejoin: var(--icon-stroke-linejoin, round);\n  pointer-events: none;\n  overflow: visible;\n}\n";
+const style = ":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 20px;\n  width:  1em;\n  height: 1em;\n  color: inherit;\n  flex-shrink: 0;\n  line-height: 0;\n  vertical-align: middle;\n}\n\n:host([color]) {\n  color: var(--ae-color-solid);\n}\n\n.icon-svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  fill: var(--icon-fill, currentColor);\n  stroke: var(--icon-stroke, none);\n  stroke-width: var(--icon-stroke-width, 2);\n  stroke-linecap: var(--icon-stroke-linecap, round);\n  stroke-linejoin: var(--icon-stroke-linejoin, round);\n  pointer-events: none;\n  overflow: visible;\n}\n";
 const defaultViewBox = "0 0 24 24";
 class IconRegistry {
   /** Register user icons. Always takes priority over built-in icons. */
   static add(icons) {
     for (const [name, data] of Object.entries(icons)) {
       if (typeof data === "string") {
-        this._icons.set(name, { path: data, viewBox: defaultViewBox });
+        this._icons.set(name, { paths: data, viewBox: defaultViewBox });
       } else {
         this._icons.set(name, data);
       }
@@ -28,7 +28,7 @@ class IconRegistry {
     for (const [name, data] of Object.entries(icons)) {
       if (this._icons.has(name) && !this._builtInKeys.has(name)) continue;
       if (typeof data === "string") {
-        this._icons.set(name, { path: data, viewBox: defaultViewBox });
+        this._icons.set(name, { paths: data, viewBox: defaultViewBox });
       } else {
         this._icons.set(name, data);
       }
@@ -65,18 +65,26 @@ class Icon extends AeicoComponent {
     } else {
       this.style.removeProperty("font-size");
     }
-    const useStroke = this.stroke ?? (def == null ? void 0 : def.stroke) ?? false;
-    const useStrokeWidth = this.strokeWidth ?? (def == null ? void 0 : def.strokeWidth) ?? 2;
-    if (useStroke) {
-      this.style.setProperty("--icon-fill", "none");
-      this.style.setProperty("--icon-stroke", "currentColor");
-      this.style.setProperty("--icon-stroke-width", String(useStrokeWidth));
+    if (!def) return;
+    const { paths } = def;
+    const isMultiPath = Array.isArray(paths);
+    if (!isMultiPath) {
+      const useStroke = this.stroke ?? (this.strokeWidth !== void 0 ? true : def.stroke ?? false);
+      const useStrokeWidth = this.strokeWidth ?? def.strokeWidth ?? 2;
+      if (useStroke) {
+        this.style.setProperty("--icon-fill", "none");
+        this.style.setProperty("--icon-stroke", "currentColor");
+        this.style.setProperty("--icon-stroke-width", String(useStrokeWidth));
+      } else {
+        this.style.removeProperty("--icon-fill");
+        this.style.removeProperty("--icon-stroke");
+        this.style.removeProperty("--icon-stroke-width");
+      }
     } else {
       this.style.removeProperty("--icon-fill");
       this.style.removeProperty("--icon-stroke");
       this.style.removeProperty("--icon-stroke-width");
     }
-    if (!def) return;
     return html(({ svg, path }) => {
       svg(
         {
@@ -86,7 +94,15 @@ class Icon extends AeicoComponent {
           xmlns: SVG_NS
         },
         () => {
-          path({ d: def.path });
+          if (typeof paths === "string") {
+            path({ d: paths });
+          } else {
+            for (const p of paths) {
+              const attrs = { d: p.d };
+              if (p.fill) attrs.style = { fill: p.fill };
+              path(attrs);
+            }
+          }
         }
       );
     });

package/dist/chunks/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sources":["../../src/icon/defines.ts","../../src/icon/registry.ts","../../src/icon/built-in-icons.ts","../../src/icon/icon.ts"],"sourcesContent":["export type IconSize = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;\n\nexport type IconColor =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'success'\n  | 'danger'\n  | 'warning'\n  | 'info';\n\nexport interface IconDefinition {\n  path: string;\n  viewBox?: string;\n  stroke?: boolean;\n  strokeWidth?: number;\n}\n\nexport const defaultViewBox = '0 0 24 24';\n\nexport type IconRegistryData = Record<string, string | IconDefinition>;\n","import { IconDefinition, IconRegistryData, defaultViewBox } from './defines';\n\nclass IconRegistry {\n  private static _icons: Map<string, IconDefinition> = new Map();\n  /** Names registered via addBuiltIn — can be overridden by user add() calls */\n  private static _builtInKeys: Set<string> = new Set();\n\n  /** Register user icons. Always takes priority over built-in icons. */\n  static add(icons: IconRegistryData) {\n    for (const [name, data] of Object.entries(icons)) {\n      if (typeof data === 'string') {\n        this._icons.set(name, { path: data, viewBox: defaultViewBox });\n      } else {\n        this._icons.set(name, data);\n      }\n      // Mark as user-defined (removes built-in status)\n      this._builtInKeys.delete(name);\n    }\n  }\n\n  /**\n   * Register built-in icons provided by the library.\n   * A built-in icon will NOT overwrite an icon already registered by the user.\n   */\n  static addBuiltIn(icons: IconRegistryData) {\n    for (const [name, data] of Object.entries(icons)) {\n      // Skip if the user has already registered this icon\n      if (this._icons.has(name) && !this._builtInKeys.has(name)) continue;\n      if (typeof data === 'string') {\n        this._icons.set(name, { path: data, viewBox: defaultViewBox });\n      } else {\n        this._icons.set(name, data);\n      }\n      this._builtInKeys.add(name);\n    }\n  }\n\n  static get(name: string): IconDefinition | undefined {\n    return this._icons.get(name);\n  }\n\n  static has(name: string): boolean {\n    return this._icons.has(name);\n  }\n}\n\nexport default IconRegistry;\n","/**\n * Built-in system icons used internally by aeico components.\n * These are pre-registered so components work out of the box.\n * Users can override any of them by calling IconRegistry.add({ 'name': '...' }).\n *\n * All paths use the Material Design 24×24 viewBox.\n */\nimport IconRegistry from './registry';\n\nIconRegistry.addBuiltIn({\n  copy: 'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z',\n  check: 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z',\n  'chevron-left': 'M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z',\n  'chevron-right': 'M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z',\n  'chevron-up': 'M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z',\n  'chevron-down': 'M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z',\n  'chevrons-left': 'M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z',\n  'chevrons-right': 'M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z',\n  close:\n    'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',\n});\n","import type { InferProps, Props } from 'aeico';\nimport { SVG_NS } from '../utils';\nimport AeicoComponent from '../aeico-component';\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 style from '../styles/components/icon.css?inline';\nimport type { IconSize, IconColor } from './defines';\nimport { defaultViewBox } from './defines';\nimport IconRegistry from './registry';\nimport './built-in-icons';\n\nclass Icon extends AeicoComponent {\n  static tagName = 'icon';\n\n  static props: Props = {\n    name: { type: String },\n    size: { type: String },\n    color: { type: String },\n    stroke: { type: Boolean },\n    strokeWidth: { type: Number },\n  };\n\n  declare name?: string;\n  declare size?: IconSize;\n  declare color?: IconColor;\n  declare stroke?: boolean;\n  declare strokeWidth?: number;\n\n  protected static styles = [styleVariables, sizeCSS, colorCSS, style];\n\n  protected render() {\n    const def = this.name ? IconRegistry.get(this.name) : undefined;\n\n    // Numeric size: set font-size directly (string sizes are handled by size.css)\n    const numericSize = Number(this.size);\n    if (this.size !== undefined && !isNaN(numericSize) && numericSize > 0) {\n      this.style.setProperty('font-size', `${numericSize}px`);\n    } else {\n      this.style.removeProperty('font-size');\n    }\n\n    // Resolve stroke: component prop takes priority over registry definition\n    const useStroke = this.stroke ?? def?.stroke ?? false;\n    const useStrokeWidth = this.strokeWidth ?? def?.strokeWidth ?? 2;\n\n    if (useStroke) {\n      this.style.setProperty('--icon-fill', 'none');\n      this.style.setProperty('--icon-stroke', 'currentColor');\n      this.style.setProperty('--icon-stroke-width', String(useStrokeWidth));\n    } else {\n      this.style.removeProperty('--icon-fill');\n      this.style.removeProperty('--icon-stroke');\n      this.style.removeProperty('--icon-stroke-width');\n    }\n\n    if (!def) return;\n\n    return html(({ svg, path }) => {\n      svg(\n        {\n          className: 'icon-svg',\n          viewBox: def.viewBox ?? defaultViewBox,\n          'aria-hidden': 'true',\n          xmlns: SVG_NS,\n        },\n        () => {\n          path({ d: def.path });\n        },\n      );\n    });\n  }\n}\n\nIcon.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-icon': Icon;\n  }\n}\n\nexport default Icon;\nexport type IconProps = InferProps<typeof Icon>;\n"],"names":["styleVariables"],"mappings":"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"}
+{"version":3,"file":"icon.js","sources":["../../src/icon/defines.ts","../../src/icon/registry.ts","../../src/icon/built-in-icons.ts","../../src/icon/icon.ts"],"sourcesContent":["export type IconSize = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;\n\nexport type IconColor =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'success'\n  | 'danger'\n  | 'warning'\n  | 'info';\n\nexport interface IconPathDef {\n  d: string;\n  fill?: string;\n}\n\nexport interface IconDefinition {\n  paths: string | IconPathDef[];\n  viewBox?: string;\n  stroke?: boolean;\n  strokeWidth?: number;\n}\n\nexport const defaultViewBox = '0 0 24 24';\n\nexport type IconRegistryData = Record<string, string | IconDefinition>;\n","import { IconDefinition, IconRegistryData, defaultViewBox } from './defines';\n\nclass IconRegistry {\n  private static _icons: Map<string, IconDefinition> = new Map();\n  /** Names registered via addBuiltIn — can be overridden by user add() calls */\n  private static _builtInKeys: Set<string> = new Set();\n\n  /** Register user icons. Always takes priority over built-in icons. */\n  static add(icons: IconRegistryData) {\n    for (const [name, data] of Object.entries(icons)) {\n      if (typeof data === 'string') {\n        this._icons.set(name, { paths: data, viewBox: defaultViewBox });\n      } else {\n        this._icons.set(name, data);\n      }\n      // Mark as user-defined (removes built-in status)\n      this._builtInKeys.delete(name);\n    }\n  }\n\n  /**\n   * Register built-in icons provided by the library.\n   * A built-in icon will NOT overwrite an icon already registered by the user.\n   */\n  static addBuiltIn(icons: IconRegistryData) {\n    for (const [name, data] of Object.entries(icons)) {\n      // Skip if the user has already registered this icon\n      if (this._icons.has(name) && !this._builtInKeys.has(name)) continue;\n      if (typeof data === 'string') {\n        this._icons.set(name, { paths: data, viewBox: defaultViewBox });\n      } else {\n        this._icons.set(name, data);\n      }\n      this._builtInKeys.add(name);\n    }\n  }\n\n  static get(name: string): IconDefinition | undefined {\n    return this._icons.get(name);\n  }\n\n  static has(name: string): boolean {\n    return this._icons.has(name);\n  }\n}\n\nexport default IconRegistry;\n","/**\n * Built-in system icons used internally by aeico components.\n * These are pre-registered so components work out of the box.\n * Users can override any of them by calling IconRegistry.add({ 'name': '...' }).\n *\n * All paths use the Material Design 24×24 viewBox.\n */\nimport IconRegistry from './registry';\n\nIconRegistry.addBuiltIn({\n  copy: 'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z',\n  check: 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z',\n  'chevron-left': 'M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z',\n  'chevron-right': 'M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z',\n  'chevron-up': 'M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z',\n  'chevron-down': 'M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z',\n  'chevrons-left': 'M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z',\n  'chevrons-right': 'M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z',\n  close:\n    'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',\n});\n","import type { InferProps, Props } from 'aeico';\nimport { SVG_NS } from '../utils';\nimport AeicoComponent from '../aeico-component';\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 style from '../styles/components/icon.css?inline';\nimport type { IconSize, IconColor } from './defines';\nimport { defaultViewBox } from './defines';\nimport IconRegistry from './registry';\nimport './built-in-icons';\n\nclass Icon extends AeicoComponent {\n  static tagName = 'icon';\n\n  static props: Props = {\n    name: { type: String },\n    size: { type: String },\n    color: { type: String },\n    stroke: { type: Boolean },\n    strokeWidth: { type: Number },\n  };\n\n  declare name?: string;\n  declare size?: IconSize;\n  declare color?: IconColor;\n  declare stroke?: boolean;\n  declare strokeWidth?: number;\n\n  protected static styles = [styleVariables, sizeCSS, colorCSS, style];\n\n  protected render() {\n    const def = this.name ? IconRegistry.get(this.name) : undefined;\n\n    // Numeric size: set font-size directly (string sizes are handled by size.css)\n    const numericSize = Number(this.size);\n    if (this.size !== undefined && !isNaN(numericSize) && numericSize > 0) {\n      this.style.setProperty('font-size', `${numericSize}px`);\n    } else {\n      this.style.removeProperty('font-size');\n    }\n\n    if (!def) return;\n\n    const { paths } = def;\n    const isMultiPath = Array.isArray(paths);\n\n    // Stroke CSS variables only apply in single-path mode (component props)\n    if (!isMultiPath) {\n      const useStroke =\n        this.stroke ?? (this.strokeWidth !== undefined ? true : (def.stroke ?? false));\n      const useStrokeWidth = this.strokeWidth ?? def.strokeWidth ?? 2;\n\n      if (useStroke) {\n        this.style.setProperty('--icon-fill', 'none');\n        this.style.setProperty('--icon-stroke', 'currentColor');\n        this.style.setProperty('--icon-stroke-width', String(useStrokeWidth));\n      } else {\n        this.style.removeProperty('--icon-fill');\n        this.style.removeProperty('--icon-stroke');\n        this.style.removeProperty('--icon-stroke-width');\n      }\n    } else {\n      this.style.removeProperty('--icon-fill');\n      this.style.removeProperty('--icon-stroke');\n      this.style.removeProperty('--icon-stroke-width');\n    }\n\n    return html(({ svg, path }) => {\n      svg(\n        {\n          className: 'icon-svg',\n          viewBox: def.viewBox ?? defaultViewBox,\n          'aria-hidden': 'true',\n          xmlns: SVG_NS,\n        },\n        () => {\n          if (typeof paths === 'string') {\n            path({ d: paths });\n          } else {\n            for (const p of paths) {\n              const attrs: Record<string, unknown> = { d: p.d };\n              if (p.fill) attrs.style = { fill: p.fill };\n              path(attrs);\n            }\n          }\n        },\n      );\n    });\n  }\n}\n\nIcon.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-icon': Icon;\n  }\n}\n\nexport default Icon;\nexport type IconProps = InferProps<typeof Icon>;\n"],"names":["styleVariables"],"mappings":"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"}

package/dist/chunks/menu.cjs

@@ -3,7 +3,7 @@ const aeicoComponent = require("./aeico-component.cjs");
 const aeico = require("aeico");
 const variables = require("./variables.cjs");
 const style$1 = ":host {\n  display: block;\n}\n\n.menu-list {\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  gap: 0;\n}\n\n.menu-list--horizontal {\n  flex-direction: row;\n  align-items: stretch;\n}\n";
-const style = ':host {\n  display: block;\n  position: relative;\n\n  --menu-item-height: 2.5rem;\n  --menu-item-padding-x: 0.875rem;\n  --menu-item-font-size: 0.9375rem;\n  --menu-item-color: inherit;\n  --menu-item-color-disabled: var(--color-text-disabled);\n  --menu-item-bg: transparent;\n  --menu-item-bg-hover: var(--surface-raised, rgba(0, 0, 0, 0.05));\n  --menu-item-active-color: var(--color-primary, var(--blue-500));\n  --menu-item-active-border-color: var(--color-primary, var(--blue-500));\n\n  --submenu-z-index: 1001;\n  --submenu-bg: var(--surface-overlay, #fff);\n  --submenu-border: 1px solid var(--border-default);\n  --submenu-border-radius: var(--ae-radius-md, 6px);\n  --submenu-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  --submenu-min-width: 10rem;\n  --submenu-padding: 0.25rem 0;\n}\n\n.item {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  width: 100%;\n  height: var(--menu-item-height);\n  padding: 0 var(--menu-item-padding-x);\n  font-size: var(--menu-item-font-size);\n  font-family: inherit;\n  color: var(--menu-item-color);\n  background: var(--menu-item-bg);\n  border: none;\n  border-bottom: 2px solid transparent;\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n  box-sizing: border-box;\n  outline: none;\n  transition: background 0.1s, color 0.1s, border-color 0.1s;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.item--leaf-in-panel {\n  height: auto;\n  padding: 0.5rem var(--menu-item-padding-x);\n  border-bottom: none;\n}\n\n.item:hover:not(:disabled) {\n  background: var(--menu-item-bg-hover);\n}\n\n.item:focus-visible {\n  background: var(--menu-item-bg-hover);\n  outline: 2px solid var(--menu-item-active-color);\n  outline-offset: -2px;\n}\n\n:host([disabled]) .item,\n.item:disabled {\n  color: var(--menu-item-color-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n:host([selected]) .item {\n  color: var(--menu-item-active-color);\n  border-bottom-color: var(--menu-item-active-border-color);\n}\n\n.item-arrow {\n  display: inline-block;\n  width: 0;\n  height: 0;\n  flex-shrink: 0;\n}\n\n.item-arrow--right {\n  border-top: 0.3em solid transparent;\n  border-bottom: 0.3em solid transparent;\n  border-left: 0.3em solid;\n}\n\n.item-arrow--bottom {\n  border-left: 0.3em solid transparent;\n  border-right: 0.3em solid transparent;\n  border-top: 0.3em solid;\n}\n\n.item--open .item-arrow--right {\n  transform: rotate(90deg);\n}\n\nslot[name="expand"],\nslot[name="collapse"] {\n  display: inline-flex;\n  align-items: center;\n  margin-inline-start: auto;\n  flex-shrink: 0;\n}\n\nslot[name="collapse"] {\n  display: none;\n}\n\n.item--open slot[name="expand"] {\n  display: none;\n}\n\n.item--open slot[name="collapse"] {\n  display: inline-flex;\n  align-items: center;\n}\n\nslot[name="collapse"] .item-arrow--right {\n  transform: rotate(90deg);\n}\n\n:host([icon-placement="start"]) slot[name="expand"],\n:host([icon-placement="start"]) slot[name="collapse"] {\n  order: -1;\n  margin-inline-start: 0;\n}\n\n.submenu-panel {\n  display: none;\n  position: absolute;\n  z-index: var(--submenu-z-index);\n  background: var(--submenu-bg);\n  border: var(--submenu-border);\n  border-radius: var(--submenu-border-radius);\n  box-shadow: var(--submenu-shadow);\n  min-width: var(--submenu-min-width);\n  padding: var(--submenu-padding);\n  box-sizing: border-box;\n  max-width: calc(100vw - 16px);\n}\n\n.submenu-panel.open {\n  display: block;\n}\n\n.submenu-panel.placement-bottom {\n  top: 100%;\n  left: 0;\n  margin-top: 2px;\n}\n\n.submenu-panel.placement-right {\n  top: 0;\n  left: 100%;\n  margin-left: 2px;\n}\n\n.submenu-inline {\n  display: none;\n  padding-left: 1rem;\n}\n\n.submenu-inline.open {\n  display: block;\n}\n';
+const style = ':host {\n  display: block;\n  position: relative;\n\n  --menu-item-height: 2.5rem;\n  --menu-item-padding-x: 0.875rem;\n  --menu-item-font-size: 0.9375rem;\n  --menu-item-color: inherit;\n  --menu-item-color-disabled: var(--ae-color-text-disabled);\n  --menu-item-bg: transparent;\n  --menu-item-bg-hover: var(--ae-surface-raised, rgba(0, 0, 0, 0.05));\n  --menu-item-active-color: var(--ae-color-primary, var(--ae-blue-500));\n  --menu-item-active-border-color: var(--ae-color-primary, var(--ae-blue-500));\n\n  --submenu-z-index: 1001;\n  --submenu-bg: var(--ae-surface-overlay, #fff);\n  --submenu-border: 1px solid var(--ae-border-default);\n  --submenu-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  --submenu-min-width: 10rem;\n  --submenu-padding: 0.25rem 0;\n}\n\n.item {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  width: 100%;\n  height: var(--menu-item-height);\n  padding: 0 var(--menu-item-padding-x);\n  font-size: var(--menu-item-font-size);\n  font-family: inherit;\n  color: var(--menu-item-color);\n  background: var(--menu-item-bg);\n  border: none;\n  border-bottom: 2px solid transparent;\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n  box-sizing: border-box;\n  outline: none;\n  transition: background 0.1s, color 0.1s, border-color 0.1s;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.item--leaf-in-panel {\n  height: auto;\n  padding: 0.5rem var(--menu-item-padding-x);\n  border-bottom: none;\n}\n\n.item:hover:not(:disabled) {\n  background: var(--menu-item-bg-hover);\n}\n\n.item:focus-visible {\n  background: var(--menu-item-bg-hover);\n  outline: 2px solid var(--menu-item-active-color);\n  outline-offset: -2px;\n}\n\n:host([disabled]) .item,\n.item:disabled {\n  color: var(--menu-item-color-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n:host([selected]) .item {\n  color: var(--menu-item-active-color);\n  border-bottom-color: var(--menu-item-active-border-color);\n}\n\n.item-arrow {\n  display: inline-block;\n  width: 0;\n  height: 0;\n  flex-shrink: 0;\n}\n\n.item-arrow--right {\n  border-top: 0.3em solid transparent;\n  border-bottom: 0.3em solid transparent;\n  border-left: 0.3em solid;\n}\n\n.item-arrow--bottom {\n  border-left: 0.3em solid transparent;\n  border-right: 0.3em solid transparent;\n  border-top: 0.3em solid;\n}\n\n.item--open .item-arrow--right {\n  transform: rotate(90deg);\n}\n\nslot[name="expand"],\nslot[name="collapse"] {\n  display: inline-flex;\n  align-items: center;\n  margin-inline-start: auto;\n  flex-shrink: 0;\n}\n\nslot[name="collapse"] {\n  display: none;\n}\n\n.item--open slot[name="expand"] {\n  display: none;\n}\n\n.item--open slot[name="collapse"] {\n  display: inline-flex;\n  align-items: center;\n}\n\nslot[name="collapse"] .item-arrow--right {\n  transform: rotate(90deg);\n}\n\n:host([icon-placement="start"]) slot[name="expand"],\n:host([icon-placement="start"]) slot[name="collapse"] {\n  order: -1;\n  margin-inline-start: 0;\n}\n\n.submenu-panel {\n  display: none;\n  position: absolute;\n  z-index: var(--submenu-z-index);\n  background: var(--submenu-bg);\n  border: var(--submenu-border);\n  border-radius: var(--ae-border-radius, var(--ae-radius-md));\n  box-shadow: var(--submenu-shadow);\n  min-width: var(--submenu-min-width);\n  padding: var(--submenu-padding);\n  box-sizing: border-box;\n  max-width: calc(100vw - 16px);\n}\n\n.submenu-panel.open {\n  display: block;\n}\n\n.submenu-panel.placement-bottom {\n  top: 100%;\n  left: 0;\n  margin-top: 2px;\n}\n\n.submenu-panel.placement-right {\n  top: 0;\n  left: 100%;\n  margin-left: 2px;\n}\n\n.submenu-inline {\n  display: none;\n  padding-left: 1rem;\n}\n\n.submenu-inline.open {\n  display: block;\n}\n';
 var __create$1 = Object.create;
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;

package/dist/chunks/menu.js

@@ -2,7 +2,7 @@ import { A as AeicoComponent } from "./aeico-component.js";
 import { prop, html } from "aeico";
 import { v as variables } from "./variables.js";
 const style$1 = ":host {\n  display: block;\n}\n\n.menu-list {\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  gap: 0;\n}\n\n.menu-list--horizontal {\n  flex-direction: row;\n  align-items: stretch;\n}\n";
-const style = ':host {\n  display: block;\n  position: relative;\n\n  --menu-item-height: 2.5rem;\n  --menu-item-padding-x: 0.875rem;\n  --menu-item-font-size: 0.9375rem;\n  --menu-item-color: inherit;\n  --menu-item-color-disabled: var(--color-text-disabled);\n  --menu-item-bg: transparent;\n  --menu-item-bg-hover: var(--surface-raised, rgba(0, 0, 0, 0.05));\n  --menu-item-active-color: var(--color-primary, var(--blue-500));\n  --menu-item-active-border-color: var(--color-primary, var(--blue-500));\n\n  --submenu-z-index: 1001;\n  --submenu-bg: var(--surface-overlay, #fff);\n  --submenu-border: 1px solid var(--border-default);\n  --submenu-border-radius: var(--ae-radius-md, 6px);\n  --submenu-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  --submenu-min-width: 10rem;\n  --submenu-padding: 0.25rem 0;\n}\n\n.item {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  width: 100%;\n  height: var(--menu-item-height);\n  padding: 0 var(--menu-item-padding-x);\n  font-size: var(--menu-item-font-size);\n  font-family: inherit;\n  color: var(--menu-item-color);\n  background: var(--menu-item-bg);\n  border: none;\n  border-bottom: 2px solid transparent;\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n  box-sizing: border-box;\n  outline: none;\n  transition: background 0.1s, color 0.1s, border-color 0.1s;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.item--leaf-in-panel {\n  height: auto;\n  padding: 0.5rem var(--menu-item-padding-x);\n  border-bottom: none;\n}\n\n.item:hover:not(:disabled) {\n  background: var(--menu-item-bg-hover);\n}\n\n.item:focus-visible {\n  background: var(--menu-item-bg-hover);\n  outline: 2px solid var(--menu-item-active-color);\n  outline-offset: -2px;\n}\n\n:host([disabled]) .item,\n.item:disabled {\n  color: var(--menu-item-color-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n:host([selected]) .item {\n  color: var(--menu-item-active-color);\n  border-bottom-color: var(--menu-item-active-border-color);\n}\n\n.item-arrow {\n  display: inline-block;\n  width: 0;\n  height: 0;\n  flex-shrink: 0;\n}\n\n.item-arrow--right {\n  border-top: 0.3em solid transparent;\n  border-bottom: 0.3em solid transparent;\n  border-left: 0.3em solid;\n}\n\n.item-arrow--bottom {\n  border-left: 0.3em solid transparent;\n  border-right: 0.3em solid transparent;\n  border-top: 0.3em solid;\n}\n\n.item--open .item-arrow--right {\n  transform: rotate(90deg);\n}\n\nslot[name="expand"],\nslot[name="collapse"] {\n  display: inline-flex;\n  align-items: center;\n  margin-inline-start: auto;\n  flex-shrink: 0;\n}\n\nslot[name="collapse"] {\n  display: none;\n}\n\n.item--open slot[name="expand"] {\n  display: none;\n}\n\n.item--open slot[name="collapse"] {\n  display: inline-flex;\n  align-items: center;\n}\n\nslot[name="collapse"] .item-arrow--right {\n  transform: rotate(90deg);\n}\n\n:host([icon-placement="start"]) slot[name="expand"],\n:host([icon-placement="start"]) slot[name="collapse"] {\n  order: -1;\n  margin-inline-start: 0;\n}\n\n.submenu-panel {\n  display: none;\n  position: absolute;\n  z-index: var(--submenu-z-index);\n  background: var(--submenu-bg);\n  border: var(--submenu-border);\n  border-radius: var(--submenu-border-radius);\n  box-shadow: var(--submenu-shadow);\n  min-width: var(--submenu-min-width);\n  padding: var(--submenu-padding);\n  box-sizing: border-box;\n  max-width: calc(100vw - 16px);\n}\n\n.submenu-panel.open {\n  display: block;\n}\n\n.submenu-panel.placement-bottom {\n  top: 100%;\n  left: 0;\n  margin-top: 2px;\n}\n\n.submenu-panel.placement-right {\n  top: 0;\n  left: 100%;\n  margin-left: 2px;\n}\n\n.submenu-inline {\n  display: none;\n  padding-left: 1rem;\n}\n\n.submenu-inline.open {\n  display: block;\n}\n';
+const style = ':host {\n  display: block;\n  position: relative;\n\n  --menu-item-height: 2.5rem;\n  --menu-item-padding-x: 0.875rem;\n  --menu-item-font-size: 0.9375rem;\n  --menu-item-color: inherit;\n  --menu-item-color-disabled: var(--ae-color-text-disabled);\n  --menu-item-bg: transparent;\n  --menu-item-bg-hover: var(--ae-surface-raised, rgba(0, 0, 0, 0.05));\n  --menu-item-active-color: var(--ae-color-primary, var(--ae-blue-500));\n  --menu-item-active-border-color: var(--ae-color-primary, var(--ae-blue-500));\n\n  --submenu-z-index: 1001;\n  --submenu-bg: var(--ae-surface-overlay, #fff);\n  --submenu-border: 1px solid var(--ae-border-default);\n  --submenu-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  --submenu-min-width: 10rem;\n  --submenu-padding: 0.25rem 0;\n}\n\n.item {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  width: 100%;\n  height: var(--menu-item-height);\n  padding: 0 var(--menu-item-padding-x);\n  font-size: var(--menu-item-font-size);\n  font-family: inherit;\n  color: var(--menu-item-color);\n  background: var(--menu-item-bg);\n  border: none;\n  border-bottom: 2px solid transparent;\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n  box-sizing: border-box;\n  outline: none;\n  transition: background 0.1s, color 0.1s, border-color 0.1s;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.item--leaf-in-panel {\n  height: auto;\n  padding: 0.5rem var(--menu-item-padding-x);\n  border-bottom: none;\n}\n\n.item:hover:not(:disabled) {\n  background: var(--menu-item-bg-hover);\n}\n\n.item:focus-visible {\n  background: var(--menu-item-bg-hover);\n  outline: 2px solid var(--menu-item-active-color);\n  outline-offset: -2px;\n}\n\n:host([disabled]) .item,\n.item:disabled {\n  color: var(--menu-item-color-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n:host([selected]) .item {\n  color: var(--menu-item-active-color);\n  border-bottom-color: var(--menu-item-active-border-color);\n}\n\n.item-arrow {\n  display: inline-block;\n  width: 0;\n  height: 0;\n  flex-shrink: 0;\n}\n\n.item-arrow--right {\n  border-top: 0.3em solid transparent;\n  border-bottom: 0.3em solid transparent;\n  border-left: 0.3em solid;\n}\n\n.item-arrow--bottom {\n  border-left: 0.3em solid transparent;\n  border-right: 0.3em solid transparent;\n  border-top: 0.3em solid;\n}\n\n.item--open .item-arrow--right {\n  transform: rotate(90deg);\n}\n\nslot[name="expand"],\nslot[name="collapse"] {\n  display: inline-flex;\n  align-items: center;\n  margin-inline-start: auto;\n  flex-shrink: 0;\n}\n\nslot[name="collapse"] {\n  display: none;\n}\n\n.item--open slot[name="expand"] {\n  display: none;\n}\n\n.item--open slot[name="collapse"] {\n  display: inline-flex;\n  align-items: center;\n}\n\nslot[name="collapse"] .item-arrow--right {\n  transform: rotate(90deg);\n}\n\n:host([icon-placement="start"]) slot[name="expand"],\n:host([icon-placement="start"]) slot[name="collapse"] {\n  order: -1;\n  margin-inline-start: 0;\n}\n\n.submenu-panel {\n  display: none;\n  position: absolute;\n  z-index: var(--submenu-z-index);\n  background: var(--submenu-bg);\n  border: var(--submenu-border);\n  border-radius: var(--ae-border-radius, var(--ae-radius-md));\n  box-shadow: var(--submenu-shadow);\n  min-width: var(--submenu-min-width);\n  padding: var(--submenu-padding);\n  box-sizing: border-box;\n  max-width: calc(100vw - 16px);\n}\n\n.submenu-panel.open {\n  display: block;\n}\n\n.submenu-panel.placement-bottom {\n  top: 100%;\n  left: 0;\n  margin-top: 2px;\n}\n\n.submenu-panel.placement-right {\n  top: 0;\n  left: 100%;\n  margin-left: 2px;\n}\n\n.submenu-inline {\n  display: none;\n  padding-left: 1rem;\n}\n\n.submenu-inline.open {\n  display: block;\n}\n';
 var __create$1 = Object.create;
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;

package/dist/chunks/navbar.cjs

@@ -3,7 +3,7 @@ const variables = require("./variables.cjs");
 const color = require("./color.cjs");
 const aeicoComponent = require("./aeico-component.cjs");
 const aeico = require("aeico");
-const navbarStyle = ':host {\n  /* layout — padding lives in .inner so document * { padding:0 } cannot override it */\n  display: block;\n  position: static;\n  top: auto;\n  z-index: var(--ae-navbar-z-index, 100);\n  box-sizing: border-box;\n  height: var(--ae-navbar-height, 3.25rem);\n  border-radius: var(--ae-navbar-radius, 0);\n\n  /* color */\n  background: var(--ae-navbar-bg, var(--surface-base));\n  color: var(--ae-navbar-color, var(--color-text-main));\n  border-bottom: var(--ae-navbar-border-width, 1px) solid var(--ae-navbar-border-color, var(--border-default));\n  box-shadow: var(--ae-navbar-shadow, none);\n\n  /* layout tokens — declared here so they are clearly part of the public API */\n  --ae-navbar-radius: 0;\n  /* Default padding-x references the global layout token so ae-navbar content\n     automatically aligns with .container / .container-fluid in light DOM.\n     Override with --ae-navbar-padding-x to decouple if needed. */\n  --ae-navbar-padding-x: var(--container-padding-x, 1.5rem);\n  --ae-navbar-gap: 0.5rem;\n\n  /* link style tokens — text mode defaults.\n     CSS custom properties inherit into slotted content, so\n     ::slotted(a[slot="start"]) can reference --ae-navbar-height. */\n  --ae-navbar-link-color: inherit;\n  --ae-navbar-link-font-size: inherit;\n  --ae-navbar-link-padding-x: 0.75rem;  /* horizontal padding only; height fills vertically */\n  --ae-navbar-link-radius: 0;\n  --ae-navbar-link-hover-color: var(--color-text-link-hover);\n  --ae-navbar-link-hover-bg: transparent;\n  --ae-navbar-link-active-color: var(--color-text-link);\n  --ae-navbar-link-active-font-weight: 600;\n}\n\n:host([sticky]) {\n  position: sticky;\n  top: 0;\n}\n\n:host([color]) {\n  --ae-navbar-bg: var(--color-solid);\n  --ae-navbar-color: var(--color-on-solid);\n  --ae-navbar-border-color: transparent;\n  --ae-navbar-link-hover-color: var(--color-on-solid);\n  --ae-navbar-link-active-color: var(--color-on-solid);\n}\n\n/* block preset: hover shows a subtle filled block */\n:host([appearance="block"]) {\n  --ae-navbar-link-hover-bg: var(--color-bg-subtle);\n  --ae-navbar-link-hover-color: inherit;\n}\n\n/* block preset on colored navbar: use semi-transparent white */\n:host([color][appearance="block"]) {\n  --ae-navbar-link-hover-bg: rgba(255, 255, 255, 0.15);\n  --ae-navbar-link-hover-color: var(--color-on-solid);\n}\n\n.inner {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 0 var(--ae-navbar-padding-x);\n  gap: var(--ae-navbar-gap);\n  box-sizing: border-box;\n}\n\n[part="brand"] {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n}\n\n/* nav wraps start + end; takes all remaining space */\n[part="nav"] {\n  flex: 1 1 auto;\n  display: flex;\n  align-self: stretch;   /* stretch to host height so children can fill it */\n  align-items: stretch;\n  min-width: 0;\n}\n\n[part="start"],\n[part="end"] {\n  flex: 0 0 auto;\n  display: flex;\n  align-self: stretch;\n}\n\n[part="start"] {\n  align-items: stretch;  /* slotted <a> will stretch to full height */\n  gap: var(--ae-navbar-start-gap, 0);\n}\n\n[part="end"] {\n  align-items: center;   /* buttons / avatars stay vertically centred */\n  gap: var(--ae-navbar-end-gap, 0.5rem);\n  margin-left: auto;\n}\n\n/* hamburger — hidden on desktop */\n[part="hamburger"] {\n  display: none;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n  flex-shrink: 0;\n  width: var(--ae-navbar-hamburger-size, 2rem);\n  height: var(--ae-navbar-hamburger-size, 2rem);\n  margin-left: auto;\n  padding: 0;\n  background: none;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  color: var(--ae-navbar-hamburger-color, inherit);\n}\n\n[part="hamburger"]:hover {\n  background: color-mix(in srgb, currentColor 10%, transparent);\n}\n\n[part="hamburger"] span {\n  display: block;\n  width: 18px;\n  height: 2px;\n  background: currentColor;\n  border-radius: 1px;\n  transition: transform 0.2s ease, opacity 0.2s ease;\n}\n\n/* Brand link — sensible defaults, no full-height stretch */\n::slotted(a[slot="brand"]) {\n  display: inline-flex;\n  align-items: center;\n  color: inherit;\n  font-weight: 700;\n  font-size: 1.05rem;\n  text-decoration: none;\n  white-space: nowrap;\n}\n\n/* Nav links (start / end slots) — fill full navbar height for block hover effect */\n::slotted(a[slot="start"]),\n::slotted(a[slot="end"]) {\n  display: inline-flex;\n  align-items: center;\n  height: var(--ae-navbar-height, 3.25rem);  /* full-height hover area */\n  /* !important overrides document-level * { padding: 0 } reset */\n  padding: 0 var(--ae-navbar-link-padding-x) !important;\n  border-radius: var(--ae-navbar-link-radius);\n  color: var(--ae-navbar-link-color);\n  font-size: var(--ae-navbar-link-font-size);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: color 0.15s ease, background-color 0.15s ease;\n  outline-offset: 2px;\n}\n\n::slotted(a[slot="start"]:hover),\n::slotted(a[slot="end"]:hover) {\n  color: var(--ae-navbar-link-hover-color);\n  background-color: var(--ae-navbar-link-hover-bg);\n}\n\n::slotted(a[slot="start"][aria-current="page"]),\n::slotted(a[slot="end"][aria-current="page"]) {\n  color: var(--ae-navbar-link-active-color);\n  font-weight: var(--ae-navbar-link-active-font-weight);\n}\n\n/* ae-dropdown inside navbar — map navbar tokens to dropdown trigger API */\n::slotted(ae-dropdown) {\n  align-self: stretch;\n  --dropdown-trigger-height: 100%;\n  --dropdown-trigger-padding-x: var(--ae-navbar-link-padding-x);\n  --dropdown-trigger-color: var(--ae-navbar-link-color);\n  --dropdown-trigger-bg: none;\n  --dropdown-trigger-radius: var(--ae-navbar-link-radius);\n  --dropdown-trigger-font-size: var(--ae-navbar-link-font-size);\n  --dropdown-trigger-hover-color: var(--ae-navbar-link-hover-color);\n  --dropdown-trigger-hover-bg: var(--ae-navbar-link-hover-bg);\n}\n\n@media (max-width: 768px) {\n  /* collapse the nav container */\n  [part="nav"] {\n    display: none;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0;\n    padding: 0.5rem 0;\n    background: var(--ae-navbar-mobile-bg, var(--ae-navbar-bg, var(--surface-base)));\n    border-bottom: 1px solid var(--ae-navbar-border-color, var(--border-default));\n    box-shadow: var(--ae-navbar-mobile-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));\n    z-index: 1;\n  }\n\n  :host([open]) [part="nav"] {\n    display: flex;\n  }\n\n  /* stack start/end vertically inside the panel */\n  [part="start"],\n  [part="end"] {\n    flex-direction: column;\n    align-items: flex-start;\n    align-self: auto;\n    gap: 0;\n    margin-left: 0;\n    width: 100%;\n  }\n\n  /* Mobile: links revert to auto height and add vertical padding */\n  ::slotted(a[slot="start"]),\n  ::slotted(a[slot="end"]) {\n    height: auto;\n    width: 100%;\n    padding: 0.75rem var(--ae-navbar-link-padding-x);\n    border-radius: 0;\n  }\n\n  /* show hamburger */\n  [part="hamburger"] {\n    display: flex;\n  }\n\n  /* hamburger → × animation */\n  :host([open]) [part="hamburger"] span:nth-child(1) {\n    transform: translateY(7px) rotate(45deg);\n  }\n\n  :host([open]) [part="hamburger"] span:nth-child(2) {\n    opacity: 0;\n    transform: scaleX(0);\n  }\n\n  :host([open]) [part="hamburger"] span:nth-child(3) {\n    transform: translateY(-7px) rotate(-45deg);\n  }\n}\n';
+const navbarStyle = ':host {\n  /* layout — padding lives in .inner so document * { padding:0 } cannot override it */\n  display: block;\n  position: static;\n  top: auto;\n  z-index: var(--ae-navbar-z-index, 100);\n  box-sizing: border-box;\n  height: var(--ae-navbar-height, 3.25rem);\n  border-radius: var(--ae-navbar-radius, 0);\n\n  /* color */\n  background: var(--ae-navbar-bg, var(--ae-surface-base));\n  color: var(--ae-navbar-color, var(--ae-color-text-main));\n  border-bottom: var(--ae-navbar-border-width, 1px) solid var(--ae-navbar-border-color, var(--ae-border-default));\n  box-shadow: var(--ae-navbar-shadow, none);\n\n  /* layout tokens — declared here so they are clearly part of the public API */\n  --ae-navbar-radius: 0;\n  /* Default padding-x references the global layout token so ae-navbar content\n     automatically aligns with .container / .container-fluid in light DOM.\n     Override with --ae-navbar-padding-x to decouple if needed. */\n  --ae-navbar-padding-x: var(--container-padding-x, 1.5rem);\n  --ae-navbar-gap: 0.5rem;\n\n  /* link style tokens — text mode defaults.\n     CSS custom properties inherit into slotted content, so\n     ::slotted(a[slot="start"]) can reference --ae-navbar-height. */\n  --ae-navbar-link-color: inherit;\n  --ae-navbar-link-font-size: inherit;\n  --ae-navbar-link-padding-x: 0.75rem;  /* horizontal padding only; height fills vertically */\n  --ae-navbar-link-radius: var(--ae-border-radius, var(--ae-radius-sm));\n  --ae-navbar-link-hover-color: var(--ae-color-text-link-hover);\n  --ae-navbar-link-hover-bg: transparent;\n  --ae-navbar-link-active-color: var(--ae-color-text-link);\n  --ae-navbar-link-active-font-weight: 600;\n}\n\n:host([sticky]) {\n  position: sticky;\n  top: 0;\n}\n\n:host([color]) {\n  --ae-navbar-bg: var(--ae-color-solid);\n  --ae-navbar-color: var(--ae-color-on-solid);\n  --ae-navbar-border-color: transparent;\n  --ae-navbar-link-hover-color: var(--ae-color-on-solid);\n  --ae-navbar-link-active-color: var(--ae-color-on-solid);\n}\n\n/* block preset: hover shows a subtle filled block */\n:host([appearance="block"]) {\n  --ae-navbar-link-hover-bg: var(--ae-color-bg-subtle);\n  --ae-navbar-link-hover-color: inherit;\n}\n\n/* block preset on colored navbar: use semi-transparent white */\n:host([color][appearance="block"]) {\n  --ae-navbar-link-hover-bg: rgba(255, 255, 255, 0.15);\n  --ae-navbar-link-hover-color: var(--ae-color-on-solid);\n}\n\n.inner {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 0 var(--ae-navbar-padding-x);\n  gap: var(--ae-navbar-gap);\n  box-sizing: border-box;\n}\n\n[part="brand"] {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n}\n\n/* nav wraps start + end; takes all remaining space */\n[part="nav"] {\n  flex: 1 1 auto;\n  display: flex;\n  align-self: stretch;   /* stretch to host height so children can fill it */\n  align-items: stretch;\n  min-width: 0;\n}\n\n[part="start"],\n[part="end"] {\n  flex: 0 0 auto;\n  display: flex;\n  align-self: stretch;\n}\n\n[part="start"] {\n  align-items: stretch;  /* slotted <a> will stretch to full height */\n  gap: var(--ae-navbar-start-gap, 0);\n}\n\n[part="end"] {\n  align-items: center;   /* buttons / avatars stay vertically centred */\n  gap: var(--ae-navbar-end-gap, 0.5rem);\n  margin-left: auto;\n}\n\n/* hamburger — hidden on desktop */\n[part="hamburger"] {\n  display: none;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n  flex-shrink: 0;\n  width: var(--ae-navbar-hamburger-size, 2rem);\n  height: var(--ae-navbar-hamburger-size, 2rem);\n  margin-left: auto;\n  padding: 0;\n  background: none;\n  border: none;\n  border-radius: var(--ae-border-radius, var(--ae-radius-sm));\n  cursor: pointer;\n  color: var(--ae-navbar-hamburger-color, inherit);\n}\n\n[part="hamburger"]:hover {\n  background: color-mix(in srgb, currentColor 10%, transparent);\n}\n\n[part="hamburger"] span {\n  display: block;\n  width: 18px;\n  height: 2px;\n  background: currentColor;\n  border-radius: 1px;\n  transition: transform 0.2s ease, opacity 0.2s ease;\n}\n\n/* Brand link — sensible defaults, no full-height stretch */\n::slotted(a[slot="brand"]) {\n  display: inline-flex;\n  align-items: center;\n  color: inherit;\n  font-weight: 700;\n  font-size: 1.05rem;\n  text-decoration: none;\n  white-space: nowrap;\n}\n\n/* Nav links (start / end slots) — fill full navbar height for block hover effect */\n::slotted(a[slot="start"]),\n::slotted(a[slot="end"]) {\n  display: inline-flex;\n  align-items: center;\n  height: var(--ae-navbar-height, 3.25rem);  /* full-height hover area */\n  /* !important overrides document-level * { padding: 0 } reset */\n  padding: 0 var(--ae-navbar-link-padding-x) !important;\n  border-radius: var(--ae-navbar-link-radius);\n  color: var(--ae-navbar-link-color);\n  font-size: var(--ae-navbar-link-font-size);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: color 0.15s ease, background-color 0.15s ease;\n  outline-offset: 2px;\n}\n\n::slotted(a[slot="start"]:hover),\n::slotted(a[slot="end"]:hover) {\n  color: var(--ae-navbar-link-hover-color);\n  background-color: var(--ae-navbar-link-hover-bg);\n}\n\n::slotted(a[slot="start"][aria-current="page"]),\n::slotted(a[slot="end"][aria-current="page"]) {\n  color: var(--ae-navbar-link-active-color);\n  font-weight: var(--ae-navbar-link-active-font-weight);\n}\n\n/* ae-dropdown inside navbar — map navbar tokens to dropdown trigger API */\n::slotted(ae-dropdown) {\n  align-self: stretch;\n  --dropdown-trigger-height: 100%;\n  --dropdown-trigger-padding-x: var(--ae-navbar-link-padding-x);\n  --dropdown-trigger-color: var(--ae-navbar-link-color);\n  --dropdown-trigger-bg: none;\n  --dropdown-trigger-radius: var(--ae-navbar-link-radius);\n  --dropdown-trigger-font-size: var(--ae-navbar-link-font-size);\n  --dropdown-trigger-hover-color: var(--ae-navbar-link-hover-color);\n  --dropdown-trigger-hover-bg: var(--ae-navbar-link-hover-bg);\n}\n\n@media (max-width: 768px) {\n  /* collapse the nav container */\n  [part="nav"] {\n    display: none;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0;\n    padding: 0.5rem 0;\n    background: var(--ae-navbar-mobile-bg, var(--ae-navbar-bg, var(--ae-surface-base)));\n    border-bottom: 1px solid var(--ae-navbar-border-color, var(--ae-border-default));\n    box-shadow: var(--ae-navbar-mobile-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));\n    z-index: 1;\n  }\n\n  :host([open]) [part="nav"] {\n    display: flex;\n  }\n\n  /* stack start/end vertically inside the panel */\n  [part="start"],\n  [part="end"] {\n    flex-direction: column;\n    align-items: flex-start;\n    align-self: auto;\n    gap: 0;\n    margin-left: 0;\n    width: 100%;\n  }\n\n  /* Mobile: links revert to auto height and add vertical padding */\n  ::slotted(a[slot="start"]),\n  ::slotted(a[slot="end"]) {\n    height: auto;\n    width: 100%;\n    padding: 0.75rem var(--ae-navbar-link-padding-x);\n    border-radius: var(--ae-border-radius, var(--ae-radius-sm));\n  }\n\n  /* show hamburger */\n  [part="hamburger"] {\n    display: flex;\n  }\n\n  /* hamburger → × animation */\n  :host([open]) [part="hamburger"] span:nth-child(1) {\n    transform: translateY(7px) rotate(45deg);\n  }\n\n  :host([open]) [part="hamburger"] span:nth-child(2) {\n    opacity: 0;\n    transform: scaleX(0);\n  }\n\n  :host([open]) [part="hamburger"] span:nth-child(3) {\n    transform: translateY(-7px) rotate(-45deg);\n  }\n}\n';
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/chunks/navbar.js

@@ -2,7 +2,7 @@ import { v as variables } from "./variables.js";
 import { c as colorCSS } from "./color.js";
 import { A as AeicoComponent } from "./aeico-component.js";
 import { prop, html } from "aeico";
-const navbarStyle = ':host {\n  /* layout — padding lives in .inner so document * { padding:0 } cannot override it */\n  display: block;\n  position: static;\n  top: auto;\n  z-index: var(--ae-navbar-z-index, 100);\n  box-sizing: border-box;\n  height: var(--ae-navbar-height, 3.25rem);\n  border-radius: var(--ae-navbar-radius, 0);\n\n  /* color */\n  background: var(--ae-navbar-bg, var(--surface-base));\n  color: var(--ae-navbar-color, var(--color-text-main));\n  border-bottom: var(--ae-navbar-border-width, 1px) solid var(--ae-navbar-border-color, var(--border-default));\n  box-shadow: var(--ae-navbar-shadow, none);\n\n  /* layout tokens — declared here so they are clearly part of the public API */\n  --ae-navbar-radius: 0;\n  /* Default padding-x references the global layout token so ae-navbar content\n     automatically aligns with .container / .container-fluid in light DOM.\n     Override with --ae-navbar-padding-x to decouple if needed. */\n  --ae-navbar-padding-x: var(--container-padding-x, 1.5rem);\n  --ae-navbar-gap: 0.5rem;\n\n  /* link style tokens — text mode defaults.\n     CSS custom properties inherit into slotted content, so\n     ::slotted(a[slot="start"]) can reference --ae-navbar-height. */\n  --ae-navbar-link-color: inherit;\n  --ae-navbar-link-font-size: inherit;\n  --ae-navbar-link-padding-x: 0.75rem;  /* horizontal padding only; height fills vertically */\n  --ae-navbar-link-radius: 0;\n  --ae-navbar-link-hover-color: var(--color-text-link-hover);\n  --ae-navbar-link-hover-bg: transparent;\n  --ae-navbar-link-active-color: var(--color-text-link);\n  --ae-navbar-link-active-font-weight: 600;\n}\n\n:host([sticky]) {\n  position: sticky;\n  top: 0;\n}\n\n:host([color]) {\n  --ae-navbar-bg: var(--color-solid);\n  --ae-navbar-color: var(--color-on-solid);\n  --ae-navbar-border-color: transparent;\n  --ae-navbar-link-hover-color: var(--color-on-solid);\n  --ae-navbar-link-active-color: var(--color-on-solid);\n}\n\n/* block preset: hover shows a subtle filled block */\n:host([appearance="block"]) {\n  --ae-navbar-link-hover-bg: var(--color-bg-subtle);\n  --ae-navbar-link-hover-color: inherit;\n}\n\n/* block preset on colored navbar: use semi-transparent white */\n:host([color][appearance="block"]) {\n  --ae-navbar-link-hover-bg: rgba(255, 255, 255, 0.15);\n  --ae-navbar-link-hover-color: var(--color-on-solid);\n}\n\n.inner {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 0 var(--ae-navbar-padding-x);\n  gap: var(--ae-navbar-gap);\n  box-sizing: border-box;\n}\n\n[part="brand"] {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n}\n\n/* nav wraps start + end; takes all remaining space */\n[part="nav"] {\n  flex: 1 1 auto;\n  display: flex;\n  align-self: stretch;   /* stretch to host height so children can fill it */\n  align-items: stretch;\n  min-width: 0;\n}\n\n[part="start"],\n[part="end"] {\n  flex: 0 0 auto;\n  display: flex;\n  align-self: stretch;\n}\n\n[part="start"] {\n  align-items: stretch;  /* slotted <a> will stretch to full height */\n  gap: var(--ae-navbar-start-gap, 0);\n}\n\n[part="end"] {\n  align-items: center;   /* buttons / avatars stay vertically centred */\n  gap: var(--ae-navbar-end-gap, 0.5rem);\n  margin-left: auto;\n}\n\n/* hamburger — hidden on desktop */\n[part="hamburger"] {\n  display: none;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n  flex-shrink: 0;\n  width: var(--ae-navbar-hamburger-size, 2rem);\n  height: var(--ae-navbar-hamburger-size, 2rem);\n  margin-left: auto;\n  padding: 0;\n  background: none;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  color: var(--ae-navbar-hamburger-color, inherit);\n}\n\n[part="hamburger"]:hover {\n  background: color-mix(in srgb, currentColor 10%, transparent);\n}\n\n[part="hamburger"] span {\n  display: block;\n  width: 18px;\n  height: 2px;\n  background: currentColor;\n  border-radius: 1px;\n  transition: transform 0.2s ease, opacity 0.2s ease;\n}\n\n/* Brand link — sensible defaults, no full-height stretch */\n::slotted(a[slot="brand"]) {\n  display: inline-flex;\n  align-items: center;\n  color: inherit;\n  font-weight: 700;\n  font-size: 1.05rem;\n  text-decoration: none;\n  white-space: nowrap;\n}\n\n/* Nav links (start / end slots) — fill full navbar height for block hover effect */\n::slotted(a[slot="start"]),\n::slotted(a[slot="end"]) {\n  display: inline-flex;\n  align-items: center;\n  height: var(--ae-navbar-height, 3.25rem);  /* full-height hover area */\n  /* !important overrides document-level * { padding: 0 } reset */\n  padding: 0 var(--ae-navbar-link-padding-x) !important;\n  border-radius: var(--ae-navbar-link-radius);\n  color: var(--ae-navbar-link-color);\n  font-size: var(--ae-navbar-link-font-size);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: color 0.15s ease, background-color 0.15s ease;\n  outline-offset: 2px;\n}\n\n::slotted(a[slot="start"]:hover),\n::slotted(a[slot="end"]:hover) {\n  color: var(--ae-navbar-link-hover-color);\n  background-color: var(--ae-navbar-link-hover-bg);\n}\n\n::slotted(a[slot="start"][aria-current="page"]),\n::slotted(a[slot="end"][aria-current="page"]) {\n  color: var(--ae-navbar-link-active-color);\n  font-weight: var(--ae-navbar-link-active-font-weight);\n}\n\n/* ae-dropdown inside navbar — map navbar tokens to dropdown trigger API */\n::slotted(ae-dropdown) {\n  align-self: stretch;\n  --dropdown-trigger-height: 100%;\n  --dropdown-trigger-padding-x: var(--ae-navbar-link-padding-x);\n  --dropdown-trigger-color: var(--ae-navbar-link-color);\n  --dropdown-trigger-bg: none;\n  --dropdown-trigger-radius: var(--ae-navbar-link-radius);\n  --dropdown-trigger-font-size: var(--ae-navbar-link-font-size);\n  --dropdown-trigger-hover-color: var(--ae-navbar-link-hover-color);\n  --dropdown-trigger-hover-bg: var(--ae-navbar-link-hover-bg);\n}\n\n@media (max-width: 768px) {\n  /* collapse the nav container */\n  [part="nav"] {\n    display: none;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0;\n    padding: 0.5rem 0;\n    background: var(--ae-navbar-mobile-bg, var(--ae-navbar-bg, var(--surface-base)));\n    border-bottom: 1px solid var(--ae-navbar-border-color, var(--border-default));\n    box-shadow: var(--ae-navbar-mobile-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));\n    z-index: 1;\n  }\n\n  :host([open]) [part="nav"] {\n    display: flex;\n  }\n\n  /* stack start/end vertically inside the panel */\n  [part="start"],\n  [part="end"] {\n    flex-direction: column;\n    align-items: flex-start;\n    align-self: auto;\n    gap: 0;\n    margin-left: 0;\n    width: 100%;\n  }\n\n  /* Mobile: links revert to auto height and add vertical padding */\n  ::slotted(a[slot="start"]),\n  ::slotted(a[slot="end"]) {\n    height: auto;\n    width: 100%;\n    padding: 0.75rem var(--ae-navbar-link-padding-x);\n    border-radius: 0;\n  }\n\n  /* show hamburger */\n  [part="hamburger"] {\n    display: flex;\n  }\n\n  /* hamburger → × animation */\n  :host([open]) [part="hamburger"] span:nth-child(1) {\n    transform: translateY(7px) rotate(45deg);\n  }\n\n  :host([open]) [part="hamburger"] span:nth-child(2) {\n    opacity: 0;\n    transform: scaleX(0);\n  }\n\n  :host([open]) [part="hamburger"] span:nth-child(3) {\n    transform: translateY(-7px) rotate(-45deg);\n  }\n}\n';
+const navbarStyle = ':host {\n  /* layout — padding lives in .inner so document * { padding:0 } cannot override it */\n  display: block;\n  position: static;\n  top: auto;\n  z-index: var(--ae-navbar-z-index, 100);\n  box-sizing: border-box;\n  height: var(--ae-navbar-height, 3.25rem);\n  border-radius: var(--ae-navbar-radius, 0);\n\n  /* color */\n  background: var(--ae-navbar-bg, var(--ae-surface-base));\n  color: var(--ae-navbar-color, var(--ae-color-text-main));\n  border-bottom: var(--ae-navbar-border-width, 1px) solid var(--ae-navbar-border-color, var(--ae-border-default));\n  box-shadow: var(--ae-navbar-shadow, none);\n\n  /* layout tokens — declared here so they are clearly part of the public API */\n  --ae-navbar-radius: 0;\n  /* Default padding-x references the global layout token so ae-navbar content\n     automatically aligns with .container / .container-fluid in light DOM.\n     Override with --ae-navbar-padding-x to decouple if needed. */\n  --ae-navbar-padding-x: var(--container-padding-x, 1.5rem);\n  --ae-navbar-gap: 0.5rem;\n\n  /* link style tokens — text mode defaults.\n     CSS custom properties inherit into slotted content, so\n     ::slotted(a[slot="start"]) can reference --ae-navbar-height. */\n  --ae-navbar-link-color: inherit;\n  --ae-navbar-link-font-size: inherit;\n  --ae-navbar-link-padding-x: 0.75rem;  /* horizontal padding only; height fills vertically */\n  --ae-navbar-link-radius: var(--ae-border-radius, var(--ae-radius-sm));\n  --ae-navbar-link-hover-color: var(--ae-color-text-link-hover);\n  --ae-navbar-link-hover-bg: transparent;\n  --ae-navbar-link-active-color: var(--ae-color-text-link);\n  --ae-navbar-link-active-font-weight: 600;\n}\n\n:host([sticky]) {\n  position: sticky;\n  top: 0;\n}\n\n:host([color]) {\n  --ae-navbar-bg: var(--ae-color-solid);\n  --ae-navbar-color: var(--ae-color-on-solid);\n  --ae-navbar-border-color: transparent;\n  --ae-navbar-link-hover-color: var(--ae-color-on-solid);\n  --ae-navbar-link-active-color: var(--ae-color-on-solid);\n}\n\n/* block preset: hover shows a subtle filled block */\n:host([appearance="block"]) {\n  --ae-navbar-link-hover-bg: var(--ae-color-bg-subtle);\n  --ae-navbar-link-hover-color: inherit;\n}\n\n/* block preset on colored navbar: use semi-transparent white */\n:host([color][appearance="block"]) {\n  --ae-navbar-link-hover-bg: rgba(255, 255, 255, 0.15);\n  --ae-navbar-link-hover-color: var(--ae-color-on-solid);\n}\n\n.inner {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 0 var(--ae-navbar-padding-x);\n  gap: var(--ae-navbar-gap);\n  box-sizing: border-box;\n}\n\n[part="brand"] {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n}\n\n/* nav wraps start + end; takes all remaining space */\n[part="nav"] {\n  flex: 1 1 auto;\n  display: flex;\n  align-self: stretch;   /* stretch to host height so children can fill it */\n  align-items: stretch;\n  min-width: 0;\n}\n\n[part="start"],\n[part="end"] {\n  flex: 0 0 auto;\n  display: flex;\n  align-self: stretch;\n}\n\n[part="start"] {\n  align-items: stretch;  /* slotted <a> will stretch to full height */\n  gap: var(--ae-navbar-start-gap, 0);\n}\n\n[part="end"] {\n  align-items: center;   /* buttons / avatars stay vertically centred */\n  gap: var(--ae-navbar-end-gap, 0.5rem);\n  margin-left: auto;\n}\n\n/* hamburger — hidden on desktop */\n[part="hamburger"] {\n  display: none;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n  flex-shrink: 0;\n  width: var(--ae-navbar-hamburger-size, 2rem);\n  height: var(--ae-navbar-hamburger-size, 2rem);\n  margin-left: auto;\n  padding: 0;\n  background: none;\n  border: none;\n  border-radius: var(--ae-border-radius, var(--ae-radius-sm));\n  cursor: pointer;\n  color: var(--ae-navbar-hamburger-color, inherit);\n}\n\n[part="hamburger"]:hover {\n  background: color-mix(in srgb, currentColor 10%, transparent);\n}\n\n[part="hamburger"] span {\n  display: block;\n  width: 18px;\n  height: 2px;\n  background: currentColor;\n  border-radius: 1px;\n  transition: transform 0.2s ease, opacity 0.2s ease;\n}\n\n/* Brand link — sensible defaults, no full-height stretch */\n::slotted(a[slot="brand"]) {\n  display: inline-flex;\n  align-items: center;\n  color: inherit;\n  font-weight: 700;\n  font-size: 1.05rem;\n  text-decoration: none;\n  white-space: nowrap;\n}\n\n/* Nav links (start / end slots) — fill full navbar height for block hover effect */\n::slotted(a[slot="start"]),\n::slotted(a[slot="end"]) {\n  display: inline-flex;\n  align-items: center;\n  height: var(--ae-navbar-height, 3.25rem);  /* full-height hover area */\n  /* !important overrides document-level * { padding: 0 } reset */\n  padding: 0 var(--ae-navbar-link-padding-x) !important;\n  border-radius: var(--ae-navbar-link-radius);\n  color: var(--ae-navbar-link-color);\n  font-size: var(--ae-navbar-link-font-size);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: color 0.15s ease, background-color 0.15s ease;\n  outline-offset: 2px;\n}\n\n::slotted(a[slot="start"]:hover),\n::slotted(a[slot="end"]:hover) {\n  color: var(--ae-navbar-link-hover-color);\n  background-color: var(--ae-navbar-link-hover-bg);\n}\n\n::slotted(a[slot="start"][aria-current="page"]),\n::slotted(a[slot="end"][aria-current="page"]) {\n  color: var(--ae-navbar-link-active-color);\n  font-weight: var(--ae-navbar-link-active-font-weight);\n}\n\n/* ae-dropdown inside navbar — map navbar tokens to dropdown trigger API */\n::slotted(ae-dropdown) {\n  align-self: stretch;\n  --dropdown-trigger-height: 100%;\n  --dropdown-trigger-padding-x: var(--ae-navbar-link-padding-x);\n  --dropdown-trigger-color: var(--ae-navbar-link-color);\n  --dropdown-trigger-bg: none;\n  --dropdown-trigger-radius: var(--ae-navbar-link-radius);\n  --dropdown-trigger-font-size: var(--ae-navbar-link-font-size);\n  --dropdown-trigger-hover-color: var(--ae-navbar-link-hover-color);\n  --dropdown-trigger-hover-bg: var(--ae-navbar-link-hover-bg);\n}\n\n@media (max-width: 768px) {\n  /* collapse the nav container */\n  [part="nav"] {\n    display: none;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0;\n    padding: 0.5rem 0;\n    background: var(--ae-navbar-mobile-bg, var(--ae-navbar-bg, var(--ae-surface-base)));\n    border-bottom: 1px solid var(--ae-navbar-border-color, var(--ae-border-default));\n    box-shadow: var(--ae-navbar-mobile-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));\n    z-index: 1;\n  }\n\n  :host([open]) [part="nav"] {\n    display: flex;\n  }\n\n  /* stack start/end vertically inside the panel */\n  [part="start"],\n  [part="end"] {\n    flex-direction: column;\n    align-items: flex-start;\n    align-self: auto;\n    gap: 0;\n    margin-left: 0;\n    width: 100%;\n  }\n\n  /* Mobile: links revert to auto height and add vertical padding */\n  ::slotted(a[slot="start"]),\n  ::slotted(a[slot="end"]) {\n    height: auto;\n    width: 100%;\n    padding: 0.75rem var(--ae-navbar-link-padding-x);\n    border-radius: var(--ae-border-radius, var(--ae-radius-sm));\n  }\n\n  /* show hamburger */\n  [part="hamburger"] {\n    display: flex;\n  }\n\n  /* hamburger → × animation */\n  :host([open]) [part="hamburger"] span:nth-child(1) {\n    transform: translateY(7px) rotate(45deg);\n  }\n\n  :host([open]) [part="hamburger"] span:nth-child(2) {\n    opacity: 0;\n    transform: scaleX(0);\n  }\n\n  :host([open]) [part="hamburger"] span:nth-child(3) {\n    transform: translateY(-7px) rotate(-45deg);\n  }\n}\n';
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;