aeico-components 0.1.8 → 0.1.10

package/dist/menu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/aeico-component.ts", "../src/utils.ts", "../src/menu/menu.ts", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/menu.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/variables.css", "../src/menu/menu-item.ts", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/menu-item.css"],
-  "sourcesContent": ["\uFEFFimport { AeicoElement } from 'aeico';\nimport { toKebab } from './utils';\n\nconst TAG_NAME_PREFIX = 'ae';\n\n/**\n * AeicoComponent is the base class for all built-in Aeico components.\n */\nclass AeicoComponent extends AeicoElement {\n  static register(name?: string) {\n    const tagName = name || `${TAG_NAME_PREFIX}-${this.tagName || toKebab(this.name)}`;\n\n    super.register(tagName);\n  }\n}\n\nexport default AeicoComponent;\n", "export const SVG_NS = 'http://www.w3.org/2000/svg';\n\nexport function toKebab(str: string): string {\n  const cleaned = str.replace(/^[_\\d]+/, '');\n\n  return cleaned.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n}\n", "import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport { html, prop } from 'aeico';\nimport style from '../styles/components/menu.css';\nimport variables from '../styles/variables.css';\nimport type { MenuMode, MenuOrientation, MenuSelectDetail, MenuTrigger } from './defines';\n// Ensure ae-menu-item is registered when this module is used\nimport './menu-item';\n\n/**\n * Menu navigation component. Renders a horizontal or vertical menu with\n * optional two-level flyout or inline (accordion) submenus.\n *\n * Two modes:\n * - `flyout` (default) \u2014 submenus open as floating panels (like a nav bar or\n *   context menu).\n * - `inline` \u2014 submenus expand in-place (accordion-style sidebar).\n *\n * Emits:\n * - `select` \u2014 `{ detail: { key, label, keyPath } }` when a leaf item is clicked.\n */\nclass Menu extends AeicoComponent {\n  static tagName = 'menu';\n\n  protected static styles = [variables, style];\n\n  @prop({ type: String })\n  accessor mode: MenuMode = 'flyout';\n\n  @prop({ type: String })\n  accessor orientation: MenuOrientation = 'horizontal';\n\n  @prop({ type: String })\n  accessor trigger: MenuTrigger = 'click';\n\n  @prop({ type: String })\n  accessor selectedKey: string | undefined;\n\n  @prop({ type: Boolean })\n  accessor wrapText: boolean = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.listen('_menu-item-select', this._handleItemSelect as EventListener);\n  }\n\n  private _handleItemSelect = (e: CustomEvent<MenuSelectDetail>): void => {\n    const { key, label, keyPath } = e.detail;\n    // Update visual selection on all leaf items\n    this.querySelectorAll('ae-menu-item').forEach((el) => {\n      const item = el;\n      item.selected = item.key === key && !item.label; // only leaf items\n    });\n    this.selectedKey = key;\n    this.emit('select', { detail: { key, label, keyPath } });\n  };\n\n  protected render() {\n    const isHorizontal = this.orientation === 'horizontal';\n    return html(({ div, slot }) => {\n      div(\n        {\n          className: { 'menu-list': true, 'menu-list--horizontal': isHorizontal },\n          role: isHorizontal ? 'menubar' : 'menu',\n          'aria-orientation': this.orientation,\n        },\n        () => {\n          slot();\n        },\n      );\n    });\n  }\n}\n\nMenu.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-menu': Menu;\n  }\n}\n\nexport default Menu;\nexport type MenuProps = InferProps<typeof Menu>;\n", "export default \":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\"", "export default \":root,\\n:host {\\n  --ae-font-sans-serif: system-ui, -apple-system, \\\"Segoe UI\\\", Roboto, \\\"Helvetica Neue\\\",\\n    \\\"Noto Sans\\\", \\\"Liberation Sans\\\", Arial, sans-serif,\\n    \\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\", \\\"Noto Color Emoji\\\";\\n  --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,\\n    \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace;\\n  font-family: var(--ae-font-sans-serif);\\n  --ae-blue:   #0e639c;\\n  --ae-green:  #28a745;\\n  --ae-red:    #dc3545;\\n  --ae-yellow: #ffc107;\\n  --ae-cyan:   #17a2b8;\\n  --ae-gray:   #6e6e6e;\\n  --ae-slate:  #64748b;\\n  --ae-dark:   #343a40;\\n  --ae-light:  #f8f9fa;\\n}\\n\\n:root,\\n:host {\\n  /* Blue */\\n  --ae-blue-100: color-mix(in srgb, var(--ae-blue) 20%, white);\\n  --ae-blue-200: color-mix(in srgb, var(--ae-blue) 40%, white);\\n  --ae-blue-300: color-mix(in srgb, var(--ae-blue) 60%, white);\\n  --ae-blue-400: color-mix(in srgb, var(--ae-blue) 80%, white);\\n  --ae-blue-500: var(--ae-blue);\\n  --ae-blue-600: color-mix(in srgb, var(--ae-blue) 80%, black);\\n  --ae-blue-700: color-mix(in srgb, var(--ae-blue) 60%, black);\\n  --ae-blue-800: color-mix(in srgb, var(--ae-blue) 40%, black);\\n  --ae-blue-900: color-mix(in srgb, var(--ae-blue) 20%, black);\\n\\n  /* Green */\\n  --ae-green-100: color-mix(in srgb, var(--ae-green) 20%, white);\\n  --ae-green-200: color-mix(in srgb, var(--ae-green) 40%, white);\\n  --ae-green-300: color-mix(in srgb, var(--ae-green) 60%, white);\\n  --ae-green-400: color-mix(in srgb, var(--ae-green) 80%, white);\\n  --ae-green-500: var(--ae-green);\\n  --ae-green-600: color-mix(in srgb, var(--ae-green) 80%, black);\\n  --ae-green-700: color-mix(in srgb, var(--ae-green) 60%, black);\\n  --ae-green-800: color-mix(in srgb, var(--ae-green) 40%, black);\\n  --ae-green-900: color-mix(in srgb, var(--ae-green) 20%, black);\\n\\n  /* Red */\\n  --ae-red-100: color-mix(in srgb, var(--ae-red) 20%, white);\\n  --ae-red-200: color-mix(in srgb, var(--ae-red) 40%, white);\\n  --ae-red-300: color-mix(in srgb, var(--ae-red) 60%, white);\\n  --ae-red-400: color-mix(in srgb, var(--ae-red) 80%, white);\\n  --ae-red-500: var(--ae-red);\\n  --ae-red-600: color-mix(in srgb, var(--ae-red) 80%, black);\\n  --ae-red-700: color-mix(in srgb, var(--ae-red) 60%, black);\\n  --ae-red-800: color-mix(in srgb, var(--ae-red) 40%, black);\\n  --ae-red-900: color-mix(in srgb, var(--ae-red) 20%, black);\\n\\n  /* Yellow */\\n  --ae-yellow-100: color-mix(in srgb, var(--ae-yellow) 20%, white);\\n  --ae-yellow-200: color-mix(in srgb, var(--ae-yellow) 40%, white);\\n  --ae-yellow-300: color-mix(in srgb, var(--ae-yellow) 60%, white);\\n  --ae-yellow-400: color-mix(in srgb, var(--ae-yellow) 80%, white);\\n  --ae-yellow-500: var(--ae-yellow);\\n  --ae-yellow-600: color-mix(in srgb, var(--ae-yellow) 80%, black);\\n  --ae-yellow-700: color-mix(in srgb, var(--ae-yellow) 60%, black);\\n  --ae-yellow-800: color-mix(in srgb, var(--ae-yellow) 40%, black);\\n  --ae-yellow-900: color-mix(in srgb, var(--ae-yellow) 20%, black);\\n\\n  /* Cyan */\\n  --ae-cyan-100: color-mix(in srgb, var(--ae-cyan) 20%, white);\\n  --ae-cyan-200: color-mix(in srgb, var(--ae-cyan) 40%, white);\\n  --ae-cyan-300: color-mix(in srgb, var(--ae-cyan) 60%, white);\\n  --ae-cyan-400: color-mix(in srgb, var(--ae-cyan) 80%, white);\\n  --ae-cyan-500: var(--ae-cyan);\\n  --ae-cyan-600: color-mix(in srgb, var(--ae-cyan) 80%, black);\\n  --ae-cyan-700: color-mix(in srgb, var(--ae-cyan) 60%, black);\\n  --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);\\n  --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);\\n\\n  /* Gray  (neutral \u2014 base #6e6e6e) */\\n  --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);\\n  --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);\\n  --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);\\n  --ae-gray-400: color-mix(in srgb, var(--ae-gray) 80%, white);\\n  --ae-gray-500: var(--ae-gray);\\n  --ae-gray-600: color-mix(in srgb, var(--ae-gray) 80%, black);\\n  --ae-gray-700: color-mix(in srgb, var(--ae-gray) 60%, black);\\n  --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);\\n  --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);\\n\\n  /* Slate  (blue-gray \u2014 base #64748b, used for 'secondary') */\\n  --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);\\n  --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);\\n  --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);\\n  --ae-slate-400: color-mix(in srgb, var(--ae-slate) 80%, white);\\n  --ae-slate-500: var(--ae-slate);\\n  --ae-slate-600: color-mix(in srgb, var(--ae-slate) 80%, black);\\n  --ae-slate-700: color-mix(in srgb, var(--ae-slate) 60%, black);\\n  --ae-slate-800: color-mix(in srgb, var(--ae-slate) 40%, black);\\n  --ae-slate-900: color-mix(in srgb, var(--ae-slate) 20%, black);\\n\\n  /* Dark  (base #343a40) */\\n  --ae-dark-100: color-mix(in srgb, var(--ae-dark) 20%, white);\\n  --ae-dark-200: color-mix(in srgb, var(--ae-dark) 40%, white);\\n  --ae-dark-300: color-mix(in srgb, var(--ae-dark) 60%, white);\\n  --ae-dark-400: color-mix(in srgb, var(--ae-dark) 80%, white);\\n  --ae-dark-500: var(--ae-dark);\\n  --ae-dark-600: color-mix(in srgb, var(--ae-dark) 80%, black);\\n  --ae-dark-700: color-mix(in srgb, var(--ae-dark) 60%, black);\\n  --ae-dark-800: color-mix(in srgb, var(--ae-dark) 40%, black);\\n  --ae-dark-900: color-mix(in srgb, var(--ae-dark) 20%, black);\\n\\n  /* Light  (base #f8f9fa) */\\n  --ae-light-100: color-mix(in srgb, var(--ae-light) 20%, white);\\n  --ae-light-200: color-mix(in srgb, var(--ae-light) 40%, white);\\n  --ae-light-300: color-mix(in srgb, var(--ae-light) 60%, white);\\n  --ae-light-400: color-mix(in srgb, var(--ae-light) 80%, white);\\n  --ae-light-500: var(--ae-light);\\n  --ae-light-600: color-mix(in srgb, var(--ae-light) 80%, black);\\n  --ae-light-700: color-mix(in srgb, var(--ae-light) 60%, black);\\n  --ae-light-800: color-mix(in srgb, var(--ae-light) 40%, black);\\n  --ae-light-900: color-mix(in srgb, var(--ae-light) 20%, black);\\n}\\n\\n:root,\\n:host {\\n  /* Hover / active mix (light default \u2014 overridden in \u00A7 6 dark) */\\n  --ae-color-mix-hover:  black 10%;\\n  --ae-color-mix-active: black 20%;\\n\\n  /* Primary (Blue) */\\n  --ae-color-primary:          var(--ae-blue-500);\\n  --ae-color-primary-hover:    color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-hover));\\n  --ae-color-primary-active:   color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-active));\\n  --ae-color-primary-disabled: color-mix(in srgb, var(--ae-blue) 50%, var(--ae-gray-500));\\n\\n  /* Success (Green) */\\n  --ae-color-success:          var(--ae-green-500);\\n  --ae-color-success-hover:    color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-hover));\\n  --ae-color-success-active:   color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-active));\\n  --ae-color-success-disabled: color-mix(in srgb, var(--ae-green) 50%, var(--ae-gray-500));\\n\\n  /* Danger (Red) */\\n  --ae-color-danger:           var(--ae-red-500);\\n  --ae-color-danger-hover:     color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-hover));\\n  --ae-color-danger-active:    color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-active));\\n  --ae-color-danger-disabled:  color-mix(in srgb, var(--ae-red) 50%, var(--ae-gray-500));\\n\\n  /* Warning (Yellow) */\\n  --ae-color-warning:          var(--ae-yellow-500);\\n  --ae-color-warning-hover:    color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-hover));\\n  --ae-color-warning-active:   color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-active));\\n  --ae-color-warning-disabled: color-mix(in srgb, var(--ae-yellow) 50%, var(--ae-gray-500));\\n\\n  /* Info (Cyan) */\\n  --ae-color-info:             var(--ae-cyan-500);\\n  --ae-color-info-hover:       color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-hover));\\n  --ae-color-info-active:      color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));\\n  --ae-color-info-disabled:    color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));\\n\\n  /* Secondary (Slate) \u2014 base differs per theme, overridden in \u00A7 6 dark */\\n  --ae-color-secondary:        var(--ae-slate-500);\\n  --ae-color-secondary-hover:  color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));\\n  --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));\\n  --ae-color-secondary-text:   var(--ae-slate-700);\\n}\\n\\n\\n.theme-light,\\n:root[theme=\\\"light\\\"],\\n:host([theme=\\\"light\\\"]),\\n:host-context([theme=\\\"light\\\"]),\\n:where(:root),\\n:host {\\n  color-scheme: light;\\n\\n  /* Gray UI aliases \u2014 lighter palette steps for elements on white background */\\n  --ae-color-gray-dark:     var(--ae-gray-400);\\n  --ae-color-gray:          var(--ae-gray-300);\\n  --ae-color-gray-light:    var(--ae-gray-200);\\n  --ae-color-gray-lighter:  var(--ae-gray-100);\\n  --ae-color-gray-lightest: color-mix(in srgb, var(--ae-gray) 10%, white);\\n\\n  /* Text */\\n  --ae-color-text-main:       var(--ae-dark-700);\\n  --ae-color-text-muted:      var(--ae-gray-600);\\n  --ae-color-text-disabled:   var(--ae-gray-300);\\n  --ae-color-text-link:       var(--ae-blue-500);\\n  --ae-color-text-link-hover: var(--ae-blue-700);\\n\\n  /* Surfaces */\\n  --ae-surface-sunken:  var(--ae-light-500);\\n  --ae-surface-base:    white;\\n  --ae-surface-raised:  var(--ae-light-500);\\n  --ae-surface-overlay: white;\\n  --ae-color-overlay:   rgba(0, 0, 0, 0.4);\\n\\n  /* Borders */\\n  --ae-border-subtle:   rgba(0, 0, 0, 0.08);\\n  --ae-border-default:  rgba(0, 0, 0, 0.15);\\n  --ae-border-hover:    rgba(0, 0, 0, 0.25);\\n  --ae-border-focus:    var(--ae-color-primary);\\n  --ae-border-disabled: rgba(0, 0, 0, 0.06);\\n\\n  /* Focus ring */\\n  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.30);\\n  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);\\n\\n  /* Subtle intent tokens \u2014 light context */\\n  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.08);\\n  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.40);\\n  --ae-color-primary-text-emphasis:   var(--ae-blue-700);\\n\\n  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.08);\\n  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.40);\\n  --ae-color-success-text-emphasis:   var(--ae-green-700);\\n\\n  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.08);\\n  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.40);\\n  --ae-color-danger-text-emphasis:    var(--ae-red-700);\\n\\n  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.08);\\n  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.40);\\n  --ae-color-warning-text-emphasis:   var(--ae-yellow-700);\\n\\n  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.08);\\n  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.40);\\n  --ae-color-info-text-emphasis:      var(--ae-cyan-700);\\n\\n  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.08);\\n  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.40);\\n  --ae-color-secondary-text-emphasis: var(--ae-slate-700);\\n\\n  --ae-color-light-bg-subtle:         var(--ae-gray-100);   /* opaque on white: ~#e2e2e2 */\\n  --ae-color-light-border-subtle:     var(--ae-gray-200);   /* opaque on white: ~#c4c4c4 */\\n\\n  --ae-color-dark-bg-subtle:          var(--ae-dark-100);   /* opaque on white: ~#d6d8d9 */\\n  --ae-color-dark-border-subtle:      var(--ae-dark-300);   /* opaque on white: ~#85898c */\\n\\n  /* Component tokens \u2014 light defaults */\\n  --ae-action-btn-bg:          var(--ae-gray-200);\\n  --ae-action-btn-bg-hover:    var(--ae-color-primary);\\n  --ae-action-btn-color:       var(--ae-gray-600);\\n  --ae-action-btn-color-hover: white;\\n\\n  --ae-clear-btn-bg-hover:     var(--ae-color-danger);\\n  --ae-clear-btn-color-hover:  white;\\n\\n  --ae-reset-btn-border-radius: var(--ae-radius-xs);\\n  --ae-reset-btn-bg:            var(--ae-action-btn-bg);\\n  --ae-reset-btn-bg-hover:      var(--ae-action-btn-bg-hover);\\n  --ae-reset-btn-color:         var(--ae-action-btn-color);\\n  --ae-reset-btn-color-hover:   var(--ae-action-btn-color-hover);\\n  --ae-reset-btn-transition:    all 0.12s;\\n\\n  --ae-clear-btn-border-radius: var(--ae-radius-xs);\\n  --ae-clear-btn-bg:            var(--ae-action-btn-bg);\\n  --ae-clear-btn-color:         var(--ae-action-btn-color);\\n  --ae-clear-btn-transition:    all 0.12s;\\n}\\n\\n:root,\\n:host {\\n  --ae-size-scale: 1;\\n  --ae-size-base:  calc(1rem * var(--ae-size-scale));                    /* 16px */\\n  --ae-size-xl:    round(calc(var(--ae-size-l) * 1.125), 1px);           /* 23px */\\n  --ae-size-l:     round(calc(var(--ae-size-m) * 1.125 * 1.125), 1px);   /* 20px */\\n  --ae-size-m:     var(--ae-size-base);                                  /* 16px */\\n  --ae-size-s:     round(calc(var(--ae-size-m) / 1.125), 1px);           /* 14px */\\n  --ae-size-xs:    round(calc(var(--ae-size-s) / 1.125), 1px);           /* 12px */\\n  --ae-size-2xs:   round(calc(var(--ae-size-xs) / 1.125), 1px);          /* 11px */\\n  --ae-size-3xs:   round(calc(var(--ae-size-2xs) / 1.125), 1px);         /* 10px */\\n}\\n\\n/* Border-radius tokens \u2014 shared across all components */\\n:root,\\n:host {\\n  /**\\n   * Unified border-radius hook for all components.\\n   *\\n   * Not set by default \u2014 each component falls back to its own --ae-radius-*\\n   * token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).\\n   *\\n   * Usage:\\n   *   :root { --ae-border-radius: 0; }       // global: all components square\\n   *   :root { --ae-border-radius: 999px; }   // global: all components pill\\n   *   ae-button { --ae-border-radius: 50%; } // scoped: only buttons circular\\n   *   .sidebar { --ae-border-radius: 8px; }  // scoped: everything inside .sidebar\\n   *\\n   * To restore a component to its own default:\\n   *   ae-card { --ae-border-radius: initial; }\\n   */\\n\\n  --ae-radius-square:  0;\\n  --ae-radius-xs:      2px;\\n  --ae-radius-sm:      4px;\\n  --ae-radius-md:      6px;\\n  --ae-radius-lg:      8px;\\n  --ae-radius-xl:      12px;\\n  --ae-radius-pill:    999px;\\n  --ae-radius-circle:  50%;\\n}\\n\\n/* Layout tokens \u2014 defined on :root so all light DOM elements can use them */\\n:root,\\n:host {\\n  --container-max-width: 1280px;\\n  --container-padding-x: 1.5rem;\\n}\\n\\n.theme-dark,\\n:root[theme=\\\"dark\\\"],\\n:host([theme=\\\"dark\\\"]),\\n:host-context([theme=\\\"dark\\\"]) {\\n  color-scheme: dark;\\n\\n  /* Hover / active \u2014 slightly gentler on dark backgrounds */\\n  --ae-color-mix-hover:  black 8%;\\n  --ae-color-mix-active: black 16%;\\n\\n  /* Gray UI aliases \u2014 darker palette steps for elements on dark background */\\n  --ae-color-gray-dark:     var(--ae-gray-800);\\n  --ae-color-gray:          var(--ae-gray-700);\\n  --ae-color-gray-light:    var(--ae-gray-600);\\n  --ae-color-gray-lighter:  var(--ae-gray-500);\\n  --ae-color-gray-lightest: var(--ae-gray-400);\\n\\n  /* Secondary \u2014 deeper base on dark background */\\n  --ae-color-secondary:      var(--ae-slate-700);\\n  --ae-color-secondary-text: var(--ae-slate-300);\\n\\n  /* Text */\\n  --ae-color-text-main:       white;\\n  --ae-color-text-muted:      var(--ae-gray-200);\\n  --ae-color-text-disabled:   var(--ae-gray-500);\\n  --ae-color-text-link:       var(--ae-blue-300);\\n  --ae-color-text-link-hover: var(--ae-blue-200);\\n\\n  /* Surfaces */\\n  --ae-surface-sunken:  var(--ae-gray-900);\\n  --ae-surface-base:    color-mix(in srgb, var(--ae-gray) 27%, black);\\n  --ae-surface-raised:  color-mix(in srgb, var(--ae-gray) 34%, black);\\n  --ae-surface-overlay: color-mix(in srgb, var(--ae-gray) 38%, black);\\n  --ae-color-overlay:   rgba(0, 0, 0, 0.6);\\n\\n  /* Borders */\\n  --ae-border-subtle:   rgba(255, 255, 255, 0.08);\\n  --ae-border-default:  rgba(255, 255, 255, 0.12);\\n  --ae-border-hover:    rgba(255, 255, 255, 0.20);\\n  --ae-border-focus:    var(--ae-color-primary);\\n  --ae-border-disabled: rgba(255, 255, 255, 0.06);\\n\\n  /* Focus ring */\\n  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.25);\\n  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);\\n\\n  /* Subtle intent tokens \u2014 dark context (more alpha, lighter text-emphasis) */\\n  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.10);\\n  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.30);\\n  --ae-color-primary-text-emphasis:   var(--ae-blue-300);\\n\\n  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.10);\\n  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.30);\\n  --ae-color-success-text-emphasis:   var(--ae-green-300);\\n\\n  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.10);\\n  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.30);\\n  --ae-color-danger-text-emphasis:    var(--ae-red-300);\\n\\n  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.10);\\n  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.30);\\n  --ae-color-warning-text-emphasis:   var(--ae-yellow-300);\\n\\n  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.10);\\n  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.30);\\n  --ae-color-info-text-emphasis:      var(--ae-cyan-300);\\n\\n  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.10);\\n  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.30);\\n  --ae-color-secondary-text-emphasis: var(--ae-slate-300);\\n\\n  --ae-color-light-bg-subtle:         rgb(from var(--ae-light) r g b / 0.20);\\n  --ae-color-light-border-subtle:     rgb(from var(--ae-light) r g b / 0.25);\\n\\n  --ae-color-dark-bg-subtle:          rgb(from var(--ae-dark) r g b / 0.30);\\n  --ae-color-dark-border-subtle:      rgb(from var(--ae-dark) r g b / 0.50);\\n\\n  /* Component tokens \u2014 dark overrides */\\n  --ae-action-btn-bg:          var(--ae-color-gray);\\n  --ae-action-btn-bg-hover:    color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));\\n  --ae-action-btn-color:       var(--ae-gray-400);\\n  --ae-action-btn-color-hover: var(--ae-cyan-300);\\n  --ae-clear-btn-bg-hover:     color-mix(in srgb, var(--ae-red) 25%, var(--ae-gray-800));\\n  --ae-clear-btn-color-hover:  var(--ae-red-300);\\n}\\n\"", "import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport { html, prop } from 'aeico';\nimport style from '../styles/components/menu-item.css';\nimport variables from '../styles/variables.css';\nimport type {\n  MenuMode,\n  MenuOrientation,\n  MenuTrigger,\n  ParentMenuLike,\n  MenuIconPlacement,\n} from './defines';\n\n/**\n * Menu item \u2014 used as a direct child of `<ae-menu>` or nested inside another\n * `<ae-menu-item>` to create a two-level submenu.\n *\n * - **Leaf item**: omit `label`; slot contains the item text.\n * - **Parent item**: set `label` to the trigger text; slot children are\n *   `<ae-menu-item>` elements that appear in the submenu panel/section.\n *\n * **Slots (parent items only)**\n * - `expand`  \u2014 icon shown when the submenu is closed (default: CSS triangle).\n * - `collapse` \u2014 icon shown when the submenu is open (default: rotated CSS triangle).\n *\n * @example\n * ```html\n * <ae-menu-item label=\"Settings\" icon-placement=\"start\">\n *   <ae-icon name=\"chevron-right\" slot=\"expand\"></ae-icon>\n *   <ae-icon name=\"chevron-down\" slot=\"collapse\"></ae-icon>\n *   <ae-menu-item key=\"profile\">Profile</ae-menu-item>\n * </ae-menu-item>\n * ```\n */\nclass MenuItem extends AeicoComponent {\n  static tagName = 'menu-item';\n\n  protected static styles = [variables, style];\n\n  @prop({ type: String })\n  accessor key: string | undefined;\n\n  @prop({ type: String })\n  accessor label: string | undefined;\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  @prop({ type: String })\n  accessor href: string | undefined;\n\n  @prop({ type: Boolean })\n  accessor selected: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor open: boolean = false;\n\n  @prop({ type: String })\n  accessor iconPlacement: MenuIconPlacement = 'end';\n\n  private _outsideClickHandler: ((e: MouseEvent) => void) | null = null;\n  private _closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // data-depth lets CSS apply depth-specific styles without JS\n    const depth = this.parentElement?.closest('ae-menu-item') ? 1 : 0;\n    this.dataset.depth = String(depth);\n\n    // Hover listeners \u2014 check mode/trigger at runtime\n    this.listen('mouseenter', this._handleMouseEnter);\n    this.listen('mouseleave', this._handleMouseLeave);\n\n    // Outside-click to close flyout panel (not applicable in inline mode)\n    this._outsideClickHandler = (e: MouseEvent) => {\n      if (!this.open) return;\n      if (this._mode === 'inline') return;\n      if (!e.composedPath().includes(this)) this.open = false;\n    };\n\n    document.addEventListener('click', this._outsideClickHandler);\n\n    // Close own submenu when a leaf inside it is selected (flyout)\n    this.listen('_menu-item-select', this._handleChildSelect as EventListener);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._outsideClickHandler) {\n      document.removeEventListener('click', this._outsideClickHandler);\n      this._outsideClickHandler = null;\n    }\n    if (this._closeTimer !== null) {\n      clearTimeout(this._closeTimer);\n      this._closeTimer = null;\n    }\n  }\n\n  private get _parentMenu(): ParentMenuLike | null {\n    return this.closest<ParentMenuLike>('ae-menu');\n  }\n\n  private get _mode(): MenuMode {\n    return this._parentMenu?.mode ?? 'flyout';\n  }\n\n  private get _orientation(): MenuOrientation {\n    return this._parentMenu?.orientation ?? 'horizontal';\n  }\n\n  private get _trigger(): MenuTrigger {\n    return this._parentMenu?.trigger ?? 'click';\n  }\n\n  private get _wrapText(): boolean {\n    return this._parentMenu?.wrapText ?? false;\n  }\n\n  private get _isParent(): boolean {\n    return this.label != null && this.label !== '';\n  }\n\n  /** Compute flyout panel placement based on depth and parent orientation. */\n  private get _panelPlacement(): 'bottom' | 'right' {\n    const isNested = !!this.parentElement?.closest('ae-menu-item');\n    if (!isNested && this._orientation === 'horizontal') return 'bottom';\n    return 'right';\n  }\n\n  private _isHoverTrigger(): boolean {\n    return this._isParent && this._mode === 'flyout' && this._trigger === 'hover';\n  }\n\n  private _handleMouseEnter = (): void => {\n    if (!this._isHoverTrigger()) return;\n    if (this._closeTimer !== null) {\n      clearTimeout(this._closeTimer);\n      this._closeTimer = null;\n    }\n    this.open = true;\n  };\n\n  private _handleMouseLeave = (): void => {\n    if (!this._isHoverTrigger()) return;\n    this._closeTimer = setTimeout(() => {\n      this.open = false;\n      this._closeTimer = null;\n    }, 150);\n  };\n\n  private _handleParentClick = (): void => {\n    if (this.disabled) return;\n    const mode = this._mode;\n    const trigger = this._trigger;\n    // In hover mode, click should still toggle (accessibility)\n    if (mode === 'flyout' && trigger === 'hover') {\n      this.open = !this.open;\n      return;\n    }\n    this.open = !this.open;\n  };\n\n  private _handleLeafClick = (e: Event): void => {\n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n    const path = this._buildKeyPath();\n    const label = this.textContent?.trim() ?? '';\n    this.dispatchEvent(\n      new CustomEvent('_menu-item-select', {\n        bubbles: true,\n        composed: true,\n        detail: { key: this.key ?? '', label, keyPath: path },\n      }),\n    );\n  };\n\n  private _handleChildSelect = (): void => {\n    // Close flyout panel after a child leaf is selected\n    if (this._mode === 'flyout') {\n      this.open = false;\n    }\n  };\n\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape' && this.open) {\n      e.stopPropagation();\n      this.open = false;\n    }\n  };\n\n  private _buildKeyPath(): string[] {\n    const path: string[] = [];\n    if (this.key) path.unshift(this.key);\n    let el: Element | null = this.parentElement;\n    while (el) {\n      const tag = el.tagName.toLowerCase();\n      if (tag === 'ae-menu-item') {\n        const k = (el as MenuItem).key;\n        if (k) path.unshift(k);\n      } else if (tag === 'ae-menu') {\n        break;\n      }\n      el = el.parentElement;\n    }\n    return path;\n  }\n\n  protected render() {\n    const mode = this._mode;\n    const panelPlacement = this._panelPlacement;\n    const isParent = this._isParent;\n    const isInline = mode === 'inline';\n    // Arrow direction: inline always shows \u25BA (rotates to \u25BC on open)\n    // flyout-bottom shows \u25BC; flyout-right shows \u25BA\n    const arrowDir = !isInline && panelPlacement === 'bottom' ? 'bottom' : 'right';\n    const wrapText = this._wrapText;\n    // Leaf items inside a submenu panel (depth > 0) need different padding\n    const isNested = !!this.parentElement?.closest('ae-menu-item');\n\n    return html(({ div, button, a, span, slot }) => {\n      if (isParent) {\n        div({ className: 'item-wrapper' }, () => {\n          button(\n            {\n              type: 'button',\n              className: {\n                item: true,\n                'item--parent': true,\n                'item--open': this.open,\n                'item--wrap': wrapText,\n              },\n              disabled: this.disabled,\n              'aria-haspopup': 'menu',\n              'aria-expanded': String(this.open),\n              '@click': this._handleParentClick,\n              '@keydown': this._handleKeydown,\n            },\n            () => {\n              span({ text: this.label });\n              slot({ name: 'expand' }, () => {\n                span({ className: `item-arrow item-arrow--${arrowDir}`, 'aria-hidden': 'true' });\n              });\n              slot({ name: 'collapse' }, () => {\n                span({ className: `item-arrow item-arrow--${arrowDir}`, 'aria-hidden': 'true' });\n              });\n            },\n          );\n\n          if (isInline) {\n            div(\n              {\n                className: { 'submenu-inline': true, open: this.open },\n                role: 'menu',\n              },\n              () => {\n                slot();\n              },\n            );\n          } else {\n            div(\n              {\n                className: {\n                  'submenu-panel': true,\n                  [`placement-${panelPlacement}`]: true,\n                  open: this.open,\n                },\n                role: 'menu',\n              },\n              () => {\n                slot();\n              },\n            );\n          }\n        });\n      } else {\n        // Leaf item\n        const sharedProps = {\n          className: { item: true, 'item--leaf-in-panel': isNested, 'item--wrap': wrapText },\n          role: 'menuitem',\n          '@click': this._handleLeafClick,\n          '@keydown': this._handleKeydown,\n        };\n\n        if (this.href) {\n          a(\n            {\n              ...sharedProps,\n              href: this.disabled ? undefined : this.href,\n              'aria-disabled': this.disabled ? 'true' : undefined,\n            },\n            () => {\n              slot();\n            },\n          );\n        } else {\n          button(\n            {\n              ...sharedProps,\n              type: 'button',\n              disabled: this.disabled,\n            },\n            () => {\n              slot();\n            },\n          );\n        }\n      }\n    });\n  }\n}\n\nMenuItem.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-menu-item': MenuItem;\n  }\n}\n\nexport default MenuItem;\nexport type MenuItemProps = InferProps<typeof MenuItem>;\nexport type { MenuIconPlacement };\n", "export default \":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--wrap {\\n  white-space: normal;\\n  height: auto;\\n  min-height: var(--menu-item-height);\\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\""],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAC,SAAS,oBAAoB;;;ACEvB,SAAS,QAAQ,KAAqB;AAC3C,QAAM,UAAU,IAAI,QAAQ,WAAW,EAAE;AAEzC,SAAO,QAAQ,QAAQ,mBAAmB,OAAO,EAAE,YAAY;AACjE;;;ADHA,IAAM,kBAAkB;AAKxB,IAAM,iBAAN,cAA6B,aAAa;AAAA,EACxC,OAAO,SAAS,MAAe;AAC7B,UAAM,UAAU,QAAQ,GAAG,eAAe,IAAI,KAAK,WAAW,QAAQ,KAAK,IAAI,CAAC;AAEhF,UAAM,SAAS,OAAO;AAAA,EACxB;AACF;AAEA,IAAO,0BAAQ;;;AEdf,SAAS,QAAAA,OAAM,QAAAC,aAAY;;;ACF3B,IAAO,eAAQ;;;ACAf,IAAO,oBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEf,SAAS,MAAM,YAAY;;;ACF3B,IAAO,oBAAQ;;;ADAf;AAkCA,IAAM,WAAN,eAAuB,8BAKrB,YAAC,KAAK,EAAE,MAAM,OAAO,CAAC,IAGtB,cAAC,KAAK,EAAE,MAAM,OAAO,CAAC,IAGtB,iBAAC,KAAK,EAAE,MAAM,QAAQ,CAAC,IAGvB,aAAC,KAAK,EAAE,MAAM,OAAO,CAAC,IAGtB,iBAAC,KAAK,EAAE,MAAM,QAAQ,CAAC,IAGvB,aAAC,KAAK,EAAE,MAAM,QAAQ,CAAC,IAGvB,sBAAC,KAAK,EAAE,MAAM,OAAO,CAAC,IAvBD,IAAe;AAAA,EAAtC;AAAA;AAME,uBAAS,MAAT;AAGA,uBAAS,QAAT;AAGA,uBAAS,WAAoB,kBAA7B,iBAA6B,SAA7B;AAGA,uBAAS,OAAT;AAGA,uBAAS,WAAoB,kBAA7B,iBAA6B,SAA7B;AAGA,uBAAS,OAAgB,kBAAzB,iBAAyB,SAAzB;AAGA,uBAAS,gBAAmC,kBAA5C,iBAA4C,SAA5C;AAEA,wBAAQ,wBAAyD;AACjE,wBAAQ,eAAoD;AAyE5D,wBAAQ,qBAAoB,MAAY;AACtC,UAAI,CAAC,KAAK,gBAAgB,EAAG;AAC7B,UAAI,KAAK,gBAAgB,MAAM;AAC7B,qBAAa,KAAK,WAAW;AAC7B,aAAK,cAAc;AAAA,MACrB;AACA,WAAK,OAAO;AAAA,IACd;AAEA,wBAAQ,qBAAoB,MAAY;AACtC,UAAI,CAAC,KAAK,gBAAgB,EAAG;AAC7B,WAAK,cAAc,WAAW,MAAM;AAClC,aAAK,OAAO;AACZ,aAAK,cAAc;AAAA,MACrB,GAAG,GAAG;AAAA,IACR;AAEA,wBAAQ,sBAAqB,MAAY;AACvC,UAAI,KAAK,SAAU;AACnB,YAAM,OAAO,KAAK;AAClB,YAAM,UAAU,KAAK;AAErB,UAAI,SAAS,YAAY,YAAY,SAAS;AAC5C,aAAK,OAAO,CAAC,KAAK;AAClB;AAAA,MACF;AACA,WAAK,OAAO,CAAC,KAAK;AAAA,IACpB;AAEA,wBAAQ,oBAAmB,CAAC,MAAmB;AAC7C,UAAI,KAAK,UAAU;AACjB,UAAE,eAAe;AACjB;AAAA,MACF;AACA,YAAM,OAAO,KAAK,cAAc;AAChC,YAAM,QAAQ,KAAK,aAAa,KAAK,KAAK;AAC1C,WAAK;AAAA,QACH,IAAI,YAAY,qBAAqB;AAAA,UACnC,SAAS;AAAA,UACT,UAAU;AAAA,UACV,QAAQ,EAAE,KAAK,KAAK,OAAO,IAAI,OAAO,SAAS,KAAK;AAAA,QACtD,CAAC;AAAA,MACH;AAAA,IACF;AAEA,wBAAQ,sBAAqB,MAAY;AAEvC,UAAI,KAAK,UAAU,UAAU;AAC3B,aAAK,OAAO;AAAA,MACd;AAAA,IACF;AAEA,wBAAQ,kBAAiB,CAAC,MAA2B;AACnD,UAAI,EAAE,QAAQ,YAAY,KAAK,MAAM;AACnC,UAAE,gBAAgB;AAClB,aAAK,OAAO;AAAA,MACd;AAAA,IACF;AAAA;AAAA,EAhIA,oBAAoB;AAClB,UAAM,kBAAkB;AAGxB,UAAM,QAAQ,KAAK,eAAe,QAAQ,cAAc,IAAI,IAAI;AAChE,SAAK,QAAQ,QAAQ,OAAO,KAAK;AAGjC,SAAK,OAAO,cAAc,KAAK,iBAAiB;AAChD,SAAK,OAAO,cAAc,KAAK,iBAAiB;AAGhD,SAAK,uBAAuB,CAAC,MAAkB;AAC7C,UAAI,CAAC,KAAK,KAAM;AAChB,UAAI,KAAK,UAAU,SAAU;AAC7B,UAAI,CAAC,EAAE,aAAa,EAAE,SAAS,IAAI,EAAG,MAAK,OAAO;AAAA,IACpD;AAEA,aAAS,iBAAiB,SAAS,KAAK,oBAAoB;AAG5D,SAAK,OAAO,qBAAqB,KAAK,kBAAmC;AAAA,EAC3E;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAqB;AAC3B,QAAI,KAAK,sBAAsB;AAC7B,eAAS,oBAAoB,SAAS,KAAK,oBAAoB;AAC/D,WAAK,uBAAuB;AAAA,IAC9B;AACA,QAAI,KAAK,gBAAgB,MAAM;AAC7B,mBAAa,KAAK,WAAW;AAC7B,WAAK,cAAc;AAAA,IACrB;AAAA,EACF;AAAA,EAEA,IAAY,cAAqC;AAC/C,WAAO,KAAK,QAAwB,SAAS;AAAA,EAC/C;AAAA,EAEA,IAAY,QAAkB;AAC5B,WAAO,KAAK,aAAa,QAAQ;AAAA,EACnC;AAAA,EAEA,IAAY,eAAgC;AAC1C,WAAO,KAAK,aAAa,eAAe;AAAA,EAC1C;AAAA,EAEA,IAAY,WAAwB;AAClC,WAAO,KAAK,aAAa,WAAW;AAAA,EACtC;AAAA,EAEA,IAAY,YAAqB;AAC/B,WAAO,KAAK,aAAa,YAAY;AAAA,EACvC;AAAA,EAEA,IAAY,YAAqB;AAC/B,WAAO,KAAK,SAAS,QAAQ,KAAK,UAAU;AAAA,EAC9C;AAAA;AAAA,EAGA,IAAY,kBAAsC;AAChD,UAAM,WAAW,CAAC,CAAC,KAAK,eAAe,QAAQ,cAAc;AAC7D,QAAI,CAAC,YAAY,KAAK,iBAAiB,aAAc,QAAO;AAC5D,WAAO;AAAA,EACT;AAAA,EAEQ,kBAA2B;AACjC,WAAO,KAAK,aAAa,KAAK,UAAU,YAAY,KAAK,aAAa;AAAA,EACxE;AAAA,EA6DQ,gBAA0B;AAChC,UAAM,OAAiB,CAAC;AACxB,QAAI,KAAK,IAAK,MAAK,QAAQ,KAAK,GAAG;AACnC,QAAI,KAAqB,KAAK;AAC9B,WAAO,IAAI;AACT,YAAM,MAAM,GAAG,QAAQ,YAAY;AACnC,UAAI,QAAQ,gBAAgB;AAC1B,cAAM,IAAK,GAAgB;AAC3B,YAAI,EAAG,MAAK,QAAQ,CAAC;AAAA,MACvB,WAAW,QAAQ,WAAW;AAC5B;AAAA,MACF;AACA,WAAK,GAAG;AAAA,IACV;AACA,WAAO;AAAA,EACT;AAAA,EAEU,SAAS;AACjB,UAAM,OAAO,KAAK;AAClB,UAAM,iBAAiB,KAAK;AAC5B,UAAM,WAAW,KAAK;AACtB,UAAM,WAAW,SAAS;AAG1B,UAAM,WAAW,CAAC,YAAY,mBAAmB,WAAW,WAAW;AACvE,UAAM,WAAW,KAAK;AAEtB,UAAM,WAAW,CAAC,CAAC,KAAK,eAAe,QAAQ,cAAc;AAE7D,WAAO,KAAK,CAAC,EAAE,KAAK,QAAQ,GAAG,MAAM,KAAK,MAAM;AAC9C,UAAI,UAAU;AACZ,YAAI,EAAE,WAAW,eAAe,GAAG,MAAM;AACvC;AAAA,YACE;AAAA,cACE,MAAM;AAAA,cACN,WAAW;AAAA,gBACT,MAAM;AAAA,gBACN,gBAAgB;AAAA,gBAChB,cAAc,KAAK;AAAA,gBACnB,cAAc;AAAA,cAChB;AAAA,cACA,UAAU,KAAK;AAAA,cACf,iBAAiB;AAAA,cACjB,iBAAiB,OAAO,KAAK,IAAI;AAAA,cACjC,UAAU,KAAK;AAAA,cACf,YAAY,KAAK;AAAA,YACnB;AAAA,YACA,MAAM;AACJ,mBAAK,EAAE,MAAM,KAAK,MAAM,CAAC;AACzB,mBAAK,EAAE,MAAM,SAAS,GAAG,MAAM;AAC7B,qBAAK,EAAE,WAAW,0BAA0B,QAAQ,IAAI,eAAe,OAAO,CAAC;AAAA,cACjF,CAAC;AACD,mBAAK,EAAE,MAAM,WAAW,GAAG,MAAM;AAC/B,qBAAK,EAAE,WAAW,0BAA0B,QAAQ,IAAI,eAAe,OAAO,CAAC;AAAA,cACjF,CAAC;AAAA,YACH;AAAA,UACF;AAEA,cAAI,UAAU;AACZ;AAAA,cACE;AAAA,gBACE,WAAW,EAAE,kBAAkB,MAAM,MAAM,KAAK,KAAK;AAAA,gBACrD,MAAM;AAAA,cACR;AAAA,cACA,MAAM;AACJ,qBAAK;AAAA,cACP;AAAA,YACF;AAAA,UACF,OAAO;AACL;AAAA,cACE;AAAA,gBACE,WAAW;AAAA,kBACT,iBAAiB;AAAA,kBACjB,CAAC,aAAa,cAAc,EAAE,GAAG;AAAA,kBACjC,MAAM,KAAK;AAAA,gBACb;AAAA,gBACA,MAAM;AAAA,cACR;AAAA,cACA,MAAM;AACJ,qBAAK;AAAA,cACP;AAAA,YACF;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH,OAAO;AAEL,cAAM,cAAc;AAAA,UAClB,WAAW,EAAE,MAAM,MAAM,uBAAuB,UAAU,cAAc,SAAS;AAAA,UACjF,MAAM;AAAA,UACN,UAAU,KAAK;AAAA,UACf,YAAY,KAAK;AAAA,QACnB;AAEA,YAAI,KAAK,MAAM;AACb;AAAA,YACE;AAAA,cACE,GAAG;AAAA,cACH,MAAM,KAAK,WAAW,SAAY,KAAK;AAAA,cACvC,iBAAiB,KAAK,WAAW,SAAS;AAAA,YAC5C;AAAA,YACA,MAAM;AACJ,mBAAK;AAAA,YACP;AAAA,UACF;AAAA,QACF,OAAO;AACL;AAAA,YACE;AAAA,cACE,GAAG;AAAA,cACH,MAAM;AAAA,cACN,UAAU,KAAK;AAAA,YACjB;AAAA,YACA,MAAM;AACJ,mBAAK;AAAA,YACP;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAtRA;AAMW;AAGA;AAGA;AAGA;AAGA;AAGA;AAGA;AAlBT,4BAAS,OADT,UALI,UAMK;AAGT,4BAAS,SADT,YARI,UASK;AAGT,4BAAS,YADT,eAXI,UAYK;AAGT,4BAAS,QADT,WAdI,UAeK;AAGT,4BAAS,YADT,eAjBI,UAkBK;AAGT,4BAAS,QADT,WApBI,UAqBK;AAGT,4BAAS,iBADT,oBAvBI,UAwBK;AAxBX,2BAAM;AACJ,cADI,UACG,WAAU;AAEjB,cAHI,UAGa,UAAS,CAAC,mBAAW,iBAAK;AAqR7C,SAAS,SAAS;AAQlB,IAAOC,qBAAQ;;;AHlUf,gFAAAC,KAAAC,QAAA;AAqBA,IAAM,OAAN,eAAmBD,MAAA,yBAKjB,aAACE,MAAK,EAAE,MAAM,OAAO,CAAC,IAGtB,oBAACA,MAAK,EAAE,MAAM,OAAO,CAAC,IAGtB,gBAACA,MAAK,EAAE,MAAM,OAAO,CAAC,IAGtB,oBAACA,MAAK,EAAE,MAAM,OAAO,CAAC,IAGtB,iBAACA,MAAK,EAAE,MAAM,QAAQ,CAAC,IAjBNF,KAAe;AAAA,EAAlC;AAAA;AAME,uBAAS,OAAiB,kBAA1BC,QAAA,SAA0B,YAA1B,kBAAAA,QAAA;AAGA,uBAAS,cAA+B,kBAAxCA,QAAA,UAAwC,gBAAxC,kBAAAA,QAAA;AAGA,uBAAS,UAAuB,kBAAhCA,QAAA,UAAgC,WAAhC,kBAAAA,QAAA;AAGA,uBAAS,cAAT,kBAAAA,QAAA,8BAAAA,QAAA;AAGA,uBAAS,WAAoB,kBAA7BA,QAAA,UAA6B,SAA7B,kBAAAA,QAAA;AAOA,wBAAQ,qBAAoB,CAAC,MAA2C;AACtE,YAAM,EAAE,KAAK,OAAO,QAAQ,IAAI,EAAE;AAElC,WAAK,iBAAiB,cAAc,EAAE,QAAQ,CAAC,OAAO;AACpD,cAAM,OAAO;AACb,aAAK,WAAW,KAAK,QAAQ,OAAO,CAAC,KAAK;AAAA,MAC5C,CAAC;AACD,WAAK,cAAc;AACnB,WAAK,KAAK,UAAU,EAAE,QAAQ,EAAE,KAAK,OAAO,QAAQ,EAAE,CAAC;AAAA,IACzD;AAAA;AAAA,EAdA,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,OAAO,qBAAqB,KAAK,iBAAkC;AAAA,EAC1E;AAAA,EAaU,SAAS;AACjB,UAAM,eAAe,KAAK,gBAAgB;AAC1C,WAAOE,MAAK,CAAC,EAAE,KAAK,KAAK,MAAM;AAC7B;AAAA,QACE;AAAA,UACE,WAAW,EAAE,aAAa,MAAM,yBAAyB,aAAa;AAAA,UACtE,MAAM,eAAe,YAAY;AAAA,UACjC,oBAAoB,KAAK;AAAA,QAC3B;AAAA,QACA,MAAM;AACJ,eAAK;AAAA,QACP;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAnDAF,SAAA,iBAAAD;AAMW;AAGA;AAGA;AAGA;AAGA;AAZT,kBAAAC,QAAA,GAAS,QADT,WALI,MAMK;AAGT,kBAAAA,QAAA,GAAS,eADT,kBARI,MASK;AAGT,kBAAAA,QAAA,GAAS,WADT,cAXI,MAYK;AAGT,kBAAAA,QAAA,GAAS,eADT,kBAdI,MAeK;AAGT,kBAAAA,QAAA,GAAS,YADT,eAjBI,MAkBK;AAlBX,oBAAAA,QAAM;AACJ,cADI,MACG,WAAU;AAEjB,cAHI,MAGa,UAAS,CAAC,mBAAW,YAAK;AAkD7C,KAAK,SAAS;AAQd,IAAOG,gBAAQ;",
+  "sources": ["../src/aeico-component.ts", "../src/menu/menu.ts", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/menu.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/variables.css", "../src/menu/menu-item.ts", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/menu-item.css"],
+  "sourcesContent": ["import { AeicoElement } from 'aeico';\n\nconst TAG_NAME_PREFIX = 'ae';\n\n/**\n * AeicoComponent is the base class for all built-in Aeico components.\n */\nclass AeicoComponent extends AeicoElement {\n  static define(name: string) {\n    const prefix = `${TAG_NAME_PREFIX}-`;\n\n    const tagName = name.startsWith(prefix) ? name : `${prefix}${name}`;\n\n    super.define(tagName);\n  }\n}\n\nexport default AeicoComponent;\n", "import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport { html, prop } from 'aeico';\nimport style from '../styles/components/menu.css';\nimport variables from '../styles/variables.css';\nimport type { MenuMode, MenuOrientation, MenuSelectDetail, MenuTrigger } from './defines';\n// Ensure ae-menu-item is registered when this module is used\nimport './menu-item';\n\n/**\n * Menu navigation component. Renders a horizontal or vertical menu with\n * optional two-level flyout or inline (accordion) submenus.\n *\n * Two modes:\n * - `flyout` (default) - submenus open as floating panels (like a nav bar or\n *   context menu).\n * - `inline` - submenus expand in-place (accordion-style sidebar).\n *\n * Emits:\n * - `select` - `{ detail: { key, label, keyPath } }` when a leaf item is clicked.\n */\nclass Menu extends AeicoComponent {\n  protected static styles = [variables, style];\n\n  @prop({ type: String })\n  accessor mode: MenuMode = 'flyout';\n\n  @prop({ type: String })\n  accessor orientation: MenuOrientation = 'horizontal';\n\n  @prop({ type: String })\n  accessor trigger: MenuTrigger = 'click';\n\n  @prop({ type: String })\n  accessor selectedKey: string | undefined;\n\n  @prop({ type: Boolean })\n  accessor wrapText: boolean = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.listen('_menu-item-select', this._handleItemSelect as EventListener);\n  }\n\n  private _handleItemSelect = (e: CustomEvent<MenuSelectDetail>): void => {\n    const { key, label, keyPath } = e.detail;\n    // Update visual selection on all leaf items\n    this.querySelectorAll('ae-menu-item').forEach((el) => {\n      const item = el;\n      item.selected = item.key === key && !item.label; // only leaf items\n    });\n    this.selectedKey = key;\n    this.emit('select', { detail: { key, label, keyPath } });\n  };\n\n  protected render() {\n    const isHorizontal = this.orientation === 'horizontal';\n    return html(({ div, slot }) => {\n      div(\n        {\n          className: { 'menu-list': true, 'menu-list--horizontal': isHorizontal },\n          role: isHorizontal ? 'menubar' : 'menu',\n          'aria-orientation': this.orientation,\n        },\n        () => {\n          slot();\n        },\n      );\n    });\n  }\n}\n\nMenu.define('menu');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-menu': Menu;\n  }\n}\n\nexport default Menu;\nexport type MenuProps = InferProps<typeof Menu>;\n", "export default \":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\"", "export default \":root,\\n:host {\\n  --ae-font-sans-serif: system-ui, -apple-system, \\\"Segoe UI\\\", Roboto, \\\"Helvetica Neue\\\",\\n    \\\"Noto Sans\\\", \\\"Liberation Sans\\\", Arial, sans-serif,\\n    \\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\", \\\"Noto Color Emoji\\\";\\n  --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,\\n    \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace;\\n  font-family: var(--ae-font-sans-serif);\\n  --ae-blue:   #0e639c;\\n  --ae-green:  #28a745;\\n  --ae-red:    #dc3545;\\n  --ae-yellow: #ffc107;\\n  --ae-cyan:   #17a2b8;\\n  --ae-gray:   #6e6e6e;\\n  --ae-slate:  #64748b;\\n  --ae-dark:   #343a40;\\n  --ae-light:  #f8f9fa;\\n}\\n\\n:root,\\n:host {\\n  /* Blue */\\n  --ae-blue-100: color-mix(in srgb, var(--ae-blue) 20%, white);\\n  --ae-blue-200: color-mix(in srgb, var(--ae-blue) 40%, white);\\n  --ae-blue-300: color-mix(in srgb, var(--ae-blue) 60%, white);\\n  --ae-blue-400: color-mix(in srgb, var(--ae-blue) 80%, white);\\n  --ae-blue-500: var(--ae-blue);\\n  --ae-blue-600: color-mix(in srgb, var(--ae-blue) 80%, black);\\n  --ae-blue-700: color-mix(in srgb, var(--ae-blue) 60%, black);\\n  --ae-blue-800: color-mix(in srgb, var(--ae-blue) 40%, black);\\n  --ae-blue-900: color-mix(in srgb, var(--ae-blue) 20%, black);\\n\\n  /* Green */\\n  --ae-green-100: color-mix(in srgb, var(--ae-green) 20%, white);\\n  --ae-green-200: color-mix(in srgb, var(--ae-green) 40%, white);\\n  --ae-green-300: color-mix(in srgb, var(--ae-green) 60%, white);\\n  --ae-green-400: color-mix(in srgb, var(--ae-green) 80%, white);\\n  --ae-green-500: var(--ae-green);\\n  --ae-green-600: color-mix(in srgb, var(--ae-green) 80%, black);\\n  --ae-green-700: color-mix(in srgb, var(--ae-green) 60%, black);\\n  --ae-green-800: color-mix(in srgb, var(--ae-green) 40%, black);\\n  --ae-green-900: color-mix(in srgb, var(--ae-green) 20%, black);\\n\\n  /* Red */\\n  --ae-red-100: color-mix(in srgb, var(--ae-red) 20%, white);\\n  --ae-red-200: color-mix(in srgb, var(--ae-red) 40%, white);\\n  --ae-red-300: color-mix(in srgb, var(--ae-red) 60%, white);\\n  --ae-red-400: color-mix(in srgb, var(--ae-red) 80%, white);\\n  --ae-red-500: var(--ae-red);\\n  --ae-red-600: color-mix(in srgb, var(--ae-red) 80%, black);\\n  --ae-red-700: color-mix(in srgb, var(--ae-red) 60%, black);\\n  --ae-red-800: color-mix(in srgb, var(--ae-red) 40%, black);\\n  --ae-red-900: color-mix(in srgb, var(--ae-red) 20%, black);\\n\\n  /* Yellow */\\n  --ae-yellow-100: color-mix(in srgb, var(--ae-yellow) 20%, white);\\n  --ae-yellow-200: color-mix(in srgb, var(--ae-yellow) 40%, white);\\n  --ae-yellow-300: color-mix(in srgb, var(--ae-yellow) 60%, white);\\n  --ae-yellow-400: color-mix(in srgb, var(--ae-yellow) 80%, white);\\n  --ae-yellow-500: var(--ae-yellow);\\n  --ae-yellow-600: color-mix(in srgb, var(--ae-yellow) 80%, black);\\n  --ae-yellow-700: color-mix(in srgb, var(--ae-yellow) 60%, black);\\n  --ae-yellow-800: color-mix(in srgb, var(--ae-yellow) 40%, black);\\n  --ae-yellow-900: color-mix(in srgb, var(--ae-yellow) 20%, black);\\n\\n  /* Cyan */\\n  --ae-cyan-100: color-mix(in srgb, var(--ae-cyan) 20%, white);\\n  --ae-cyan-200: color-mix(in srgb, var(--ae-cyan) 40%, white);\\n  --ae-cyan-300: color-mix(in srgb, var(--ae-cyan) 60%, white);\\n  --ae-cyan-400: color-mix(in srgb, var(--ae-cyan) 80%, white);\\n  --ae-cyan-500: var(--ae-cyan);\\n  --ae-cyan-600: color-mix(in srgb, var(--ae-cyan) 80%, black);\\n  --ae-cyan-700: color-mix(in srgb, var(--ae-cyan) 60%, black);\\n  --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);\\n  --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);\\n\\n  /* Gray  (neutral - base #6e6e6e) */\\n  --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);\\n  --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);\\n  --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);\\n  --ae-gray-400: color-mix(in srgb, var(--ae-gray) 80%, white);\\n  --ae-gray-500: var(--ae-gray);\\n  --ae-gray-600: color-mix(in srgb, var(--ae-gray) 80%, black);\\n  --ae-gray-700: color-mix(in srgb, var(--ae-gray) 60%, black);\\n  --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);\\n  --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);\\n\\n  /* Slate  (blue-gray - base #64748b, used for 'secondary') */\\n  --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);\\n  --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);\\n  --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);\\n  --ae-slate-400: color-mix(in srgb, var(--ae-slate) 80%, white);\\n  --ae-slate-500: var(--ae-slate);\\n  --ae-slate-600: color-mix(in srgb, var(--ae-slate) 80%, black);\\n  --ae-slate-700: color-mix(in srgb, var(--ae-slate) 60%, black);\\n  --ae-slate-800: color-mix(in srgb, var(--ae-slate) 40%, black);\\n  --ae-slate-900: color-mix(in srgb, var(--ae-slate) 20%, black);\\n\\n  /* Dark  (base #343a40) */\\n  --ae-dark-100: color-mix(in srgb, var(--ae-dark) 20%, white);\\n  --ae-dark-200: color-mix(in srgb, var(--ae-dark) 40%, white);\\n  --ae-dark-300: color-mix(in srgb, var(--ae-dark) 60%, white);\\n  --ae-dark-400: color-mix(in srgb, var(--ae-dark) 80%, white);\\n  --ae-dark-500: var(--ae-dark);\\n  --ae-dark-600: color-mix(in srgb, var(--ae-dark) 80%, black);\\n  --ae-dark-700: color-mix(in srgb, var(--ae-dark) 60%, black);\\n  --ae-dark-800: color-mix(in srgb, var(--ae-dark) 40%, black);\\n  --ae-dark-900: color-mix(in srgb, var(--ae-dark) 20%, black);\\n\\n  /* Light  (base #f8f9fa) */\\n  --ae-light-100: color-mix(in srgb, var(--ae-light) 20%, white);\\n  --ae-light-200: color-mix(in srgb, var(--ae-light) 40%, white);\\n  --ae-light-300: color-mix(in srgb, var(--ae-light) 60%, white);\\n  --ae-light-400: color-mix(in srgb, var(--ae-light) 80%, white);\\n  --ae-light-500: var(--ae-light);\\n  --ae-light-600: color-mix(in srgb, var(--ae-light) 80%, black);\\n  --ae-light-700: color-mix(in srgb, var(--ae-light) 60%, black);\\n  --ae-light-800: color-mix(in srgb, var(--ae-light) 40%, black);\\n  --ae-light-900: color-mix(in srgb, var(--ae-light) 20%, black);\\n}\\n\\n:root,\\n:host {\\n  /* Hover / active mix (light default - overridden in \u00A7 6 dark) */\\n  --ae-color-mix-hover:  black 10%;\\n  --ae-color-mix-active: black 20%;\\n\\n  /* Primary (Blue) */\\n  --ae-color-primary:          var(--ae-blue-500);\\n  --ae-color-primary-hover:    color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-hover));\\n  --ae-color-primary-active:   color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-active));\\n  --ae-color-primary-disabled: color-mix(in srgb, var(--ae-blue) 50%, var(--ae-gray-500));\\n\\n  /* Success (Green) */\\n  --ae-color-success:          var(--ae-green-500);\\n  --ae-color-success-hover:    color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-hover));\\n  --ae-color-success-active:   color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-active));\\n  --ae-color-success-disabled: color-mix(in srgb, var(--ae-green) 50%, var(--ae-gray-500));\\n\\n  /* Danger (Red) */\\n  --ae-color-danger:           var(--ae-red-500);\\n  --ae-color-danger-hover:     color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-hover));\\n  --ae-color-danger-active:    color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-active));\\n  --ae-color-danger-disabled:  color-mix(in srgb, var(--ae-red) 50%, var(--ae-gray-500));\\n\\n  /* Warning (Yellow) */\\n  --ae-color-warning:          var(--ae-yellow-500);\\n  --ae-color-warning-hover:    color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-hover));\\n  --ae-color-warning-active:   color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-active));\\n  --ae-color-warning-disabled: color-mix(in srgb, var(--ae-yellow) 50%, var(--ae-gray-500));\\n\\n  /* Info (Cyan) */\\n  --ae-color-info:             var(--ae-cyan-500);\\n  --ae-color-info-hover:       color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-hover));\\n  --ae-color-info-active:      color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));\\n  --ae-color-info-disabled:    color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));\\n\\n  /* Secondary (Slate) - base differs per theme, overridden in \u00A7 6 dark */\\n  --ae-color-secondary:        var(--ae-slate-500);\\n  --ae-color-secondary-hover:  color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));\\n  --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));\\n  --ae-color-secondary-text:   var(--ae-slate-700);\\n}\\n\\n\\n.theme-light,\\n:root[theme=\\\"light\\\"],\\n:host([theme=\\\"light\\\"]),\\n:host-context([theme=\\\"light\\\"]),\\n:where(:root),\\n:host {\\n  color-scheme: light;\\n\\n  /* Gray UI aliases - lighter palette steps for elements on white background */\\n  --ae-color-gray-dark:     var(--ae-gray-400);\\n  --ae-color-gray:          var(--ae-gray-300);\\n  --ae-color-gray-light:    var(--ae-gray-200);\\n  --ae-color-gray-lighter:  var(--ae-gray-100);\\n  --ae-color-gray-lightest: color-mix(in srgb, var(--ae-gray) 10%, white);\\n\\n  /* Text */\\n  --ae-color-text-main:       var(--ae-dark-700);\\n  --ae-color-text-muted:      var(--ae-gray-600);\\n  --ae-color-text-disabled:   var(--ae-gray-300);\\n  --ae-color-text-link:       var(--ae-blue-500);\\n  --ae-color-text-link-hover: var(--ae-blue-700);\\n\\n  /* Surfaces */\\n  --ae-surface-sunken:  var(--ae-light-500);\\n  --ae-surface-base:    white;\\n  --ae-surface-raised:  var(--ae-light-500);\\n  --ae-surface-overlay: white;\\n  --ae-color-overlay:   rgba(0, 0, 0, 0.4);\\n\\n  /* Borders */\\n  --ae-border-subtle:   rgba(0, 0, 0, 0.08);\\n  --ae-border-default:  rgba(0, 0, 0, 0.15);\\n  --ae-border-hover:    rgba(0, 0, 0, 0.25);\\n  --ae-border-focus:    var(--ae-color-primary);\\n  --ae-border-disabled: rgba(0, 0, 0, 0.06);\\n\\n  /* Focus ring */\\n  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.30);\\n  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);\\n\\n  /* Subtle intent tokens - light context */\\n  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.08);\\n  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.40);\\n  --ae-color-primary-text-emphasis:   var(--ae-blue-700);\\n\\n  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.08);\\n  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.40);\\n  --ae-color-success-text-emphasis:   var(--ae-green-700);\\n\\n  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.08);\\n  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.40);\\n  --ae-color-danger-text-emphasis:    var(--ae-red-700);\\n\\n  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.08);\\n  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.40);\\n  --ae-color-warning-text-emphasis:   var(--ae-yellow-700);\\n\\n  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.08);\\n  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.40);\\n  --ae-color-info-text-emphasis:      var(--ae-cyan-700);\\n\\n  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.08);\\n  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.40);\\n  --ae-color-secondary-text-emphasis: var(--ae-slate-700);\\n\\n  --ae-color-light-bg-subtle:         var(--ae-gray-100);   /* opaque on white: ~#e2e2e2 */\\n  --ae-color-light-border-subtle:     var(--ae-gray-200);   /* opaque on white: ~#c4c4c4 */\\n\\n  --ae-color-dark-bg-subtle:          var(--ae-dark-100);   /* opaque on white: ~#d6d8d9 */\\n  --ae-color-dark-border-subtle:      var(--ae-dark-300);   /* opaque on white: ~#85898c */\\n\\n  /* Component tokens - light defaults */\\n  --ae-action-btn-bg:          var(--ae-gray-200);\\n  --ae-action-btn-bg-hover:    var(--ae-color-primary);\\n  --ae-action-btn-color:       var(--ae-gray-600);\\n  --ae-action-btn-color-hover: white;\\n\\n  --ae-clear-btn-bg-hover:     var(--ae-color-danger);\\n  --ae-clear-btn-color-hover:  white;\\n\\n  --ae-reset-btn-border-radius: var(--ae-radius-xs);\\n  --ae-reset-btn-bg:            var(--ae-action-btn-bg);\\n  --ae-reset-btn-bg-hover:      var(--ae-action-btn-bg-hover);\\n  --ae-reset-btn-color:         var(--ae-action-btn-color);\\n  --ae-reset-btn-color-hover:   var(--ae-action-btn-color-hover);\\n  --ae-reset-btn-transition:    all 0.12s;\\n\\n  --ae-clear-btn-border-radius: var(--ae-radius-xs);\\n  --ae-clear-btn-bg:            var(--ae-action-btn-bg);\\n  --ae-clear-btn-color:         var(--ae-action-btn-color);\\n  --ae-clear-btn-transition:    all 0.12s;\\n}\\n\\n:root,\\n:host {\\n  --ae-size-scale: 1;\\n  --ae-size-base:  calc(1rem * var(--ae-size-scale));                    /* 16px */\\n  --ae-size-xl:    round(calc(var(--ae-size-l) * 1.125), 1px);           /* 23px */\\n  --ae-size-l:     round(calc(var(--ae-size-m) * 1.125 * 1.125), 1px);   /* 20px */\\n  --ae-size-m:     var(--ae-size-base);                                  /* 16px */\\n  --ae-size-s:     round(calc(var(--ae-size-m) / 1.125), 1px);           /* 14px */\\n  --ae-size-xs:    round(calc(var(--ae-size-s) / 1.125), 1px);           /* 12px */\\n  --ae-size-2xs:   round(calc(var(--ae-size-xs) / 1.125), 1px);          /* 11px */\\n  --ae-size-3xs:   round(calc(var(--ae-size-2xs) / 1.125), 1px);         /* 10px */\\n}\\n\\n/* Border-radius tokens - shared across all components */\\n:root,\\n:host {\\n  /**\\n   * Unified border-radius hook for all components.\\n   *\\n   *\\n   * Usage:\\n   *   :root { --ae-border-radius: 0; }       // global: all components square\\n   *   :root { --ae-border-radius: 999px; }   // global: all components pill\\n   *   ae-button { --ae-border-radius: 50%; } // scoped: only buttons circular\\n   *   .sidebar { --ae-border-radius: 8px; }  // scoped: everything inside .sidebar\\n   *\\n   * To restore a component to its own default:\\n   *   ae-card { --ae-border-radius: initial; }\\n   */\\n\\n  --ae-radius-square:  0;\\n  --ae-radius-xs:      2px;\\n  --ae-radius-sm:      4px;\\n  --ae-radius-md:      6px;\\n  --ae-radius-lg:      8px;\\n  --ae-radius-xl:      12px;\\n  --ae-radius-pill:    999px;\\n  --ae-radius-circle:  50%;\\n}\\n\\n/* Layout tokens - defined on :root so all light DOM elements can use them */\\n:root,\\n:host {\\n  --container-max-width: 1280px;\\n  --container-padding-x: 1.5rem;\\n}\\n\\n.theme-dark,\\n:root[theme=\\\"dark\\\"],\\n:host([theme=\\\"dark\\\"]),\\n:host-context([theme=\\\"dark\\\"]) {\\n  color-scheme: dark;\\n\\n  /* Hover / active - slightly gentler on dark backgrounds */\\n  --ae-color-mix-hover:  black 8%;\\n  --ae-color-mix-active: black 16%;\\n\\n  /* Gray UI aliases - darker palette steps for elements on dark background */\\n  --ae-color-gray-dark:     var(--ae-gray-800);\\n  --ae-color-gray:          var(--ae-gray-700);\\n  --ae-color-gray-light:    var(--ae-gray-600);\\n  --ae-color-gray-lighter:  var(--ae-gray-500);\\n  --ae-color-gray-lightest: var(--ae-gray-400);\\n\\n  /* Secondary - deeper base on dark background */\\n  --ae-color-secondary:      var(--ae-slate-700);\\n  --ae-color-secondary-text: var(--ae-slate-300);\\n\\n  /* Text */\\n  --ae-color-text-main:       white;\\n  --ae-color-text-muted:      var(--ae-gray-200);\\n  --ae-color-text-disabled:   var(--ae-gray-500);\\n  --ae-color-text-link:       var(--ae-blue-300);\\n  --ae-color-text-link-hover: var(--ae-blue-200);\\n\\n  /* Surfaces */\\n  --ae-surface-sunken:  var(--ae-gray-900);\\n  --ae-surface-base:    color-mix(in srgb, var(--ae-gray) 27%, black);\\n  --ae-surface-raised:  color-mix(in srgb, var(--ae-gray) 34%, black);\\n  --ae-surface-overlay: color-mix(in srgb, var(--ae-gray) 38%, black);\\n  --ae-color-overlay:   rgba(0, 0, 0, 0.6);\\n\\n  /* Borders */\\n  --ae-border-subtle:   rgba(255, 255, 255, 0.08);\\n  --ae-border-default:  rgba(255, 255, 255, 0.12);\\n  --ae-border-hover:    rgba(255, 255, 255, 0.20);\\n  --ae-border-focus:    var(--ae-color-primary);\\n  --ae-border-disabled: rgba(255, 255, 255, 0.06);\\n\\n  /* Focus ring */\\n  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.25);\\n  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);\\n\\n  /* Subtle intent tokens - dark context (more alpha, lighter text-emphasis) */\\n  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.10);\\n  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.30);\\n  --ae-color-primary-text-emphasis:   var(--ae-blue-300);\\n\\n  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.10);\\n  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.30);\\n  --ae-color-success-text-emphasis:   var(--ae-green-300);\\n\\n  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.10);\\n  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.30);\\n  --ae-color-danger-text-emphasis:    var(--ae-red-300);\\n\\n  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.10);\\n  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.30);\\n  --ae-color-warning-text-emphasis:   var(--ae-yellow-300);\\n\\n  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.10);\\n  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.30);\\n  --ae-color-info-text-emphasis:      var(--ae-cyan-300);\\n\\n  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.10);\\n  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.30);\\n  --ae-color-secondary-text-emphasis: var(--ae-slate-300);\\n\\n  --ae-color-light-bg-subtle:         rgb(from var(--ae-light) r g b / 0.20);\\n  --ae-color-light-border-subtle:     rgb(from var(--ae-light) r g b / 0.25);\\n\\n  --ae-color-dark-bg-subtle:          rgb(from var(--ae-dark) r g b / 0.30);\\n  --ae-color-dark-border-subtle:      rgb(from var(--ae-dark) r g b / 0.50);\\n\\n  /* Component tokens - dark overrides */\\n  --ae-action-btn-bg:          var(--ae-color-gray);\\n  --ae-action-btn-bg-hover:    color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));\\n  --ae-action-btn-color:       var(--ae-gray-400);\\n  --ae-action-btn-color-hover: var(--ae-cyan-300);\\n  --ae-clear-btn-bg-hover:     color-mix(in srgb, var(--ae-red) 25%, var(--ae-gray-800));\\n  --ae-clear-btn-color-hover:  var(--ae-red-300);\\n}\\n\"", "import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport { html, prop } from 'aeico';\nimport style from '../styles/components/menu-item.css';\nimport variables from '../styles/variables.css';\nimport type {\n  MenuMode,\n  MenuOrientation,\n  MenuTrigger,\n  ParentMenuLike,\n  MenuIconPlacement,\n} from './defines';\n\n/**\n * Menu item - used as a direct child of `<ae-menu>` or nested inside another\n * `<ae-menu-item>` to create a two-level submenu.\n *\n * - **Leaf item**: omit `label`; slot contains the item text.\n * - **Parent item**: set `label` to the trigger text; slot children are\n *   `<ae-menu-item>` elements that appear in the submenu panel/section.\n *\n * **Slots (parent items only)**\n * - `expand`  - icon shown when the submenu is closed (default: CSS triangle).\n * - `collapse` - icon shown when the submenu is open (default: rotated CSS triangle).\n *\n * @example\n * ```html\n * <ae-menu-item label=\"Settings\" icon-placement=\"start\">\n *   <ae-icon name=\"chevron-right\" slot=\"expand\"></ae-icon>\n *   <ae-icon name=\"chevron-down\" slot=\"collapse\"></ae-icon>\n *   <ae-menu-item key=\"profile\">Profile</ae-menu-item>\n * </ae-menu-item>\n * ```\n */\nclass MenuItem extends AeicoComponent {\n  protected static styles = [variables, style];\n\n  @prop({ type: String })\n  accessor key: string | undefined;\n\n  @prop({ type: String })\n  accessor label: string | undefined;\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  @prop({ type: String })\n  accessor href: string | undefined;\n\n  @prop({ type: Boolean })\n  accessor selected: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor open: boolean = false;\n\n  @prop({ type: String })\n  accessor iconPlacement: MenuIconPlacement = 'end';\n\n  private _outsideClickHandler: ((e: MouseEvent) => void) | null = null;\n  private _closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // data-depth lets CSS apply depth-specific styles without JS\n    const depth = this.parentElement?.closest('ae-menu-item') ? 1 : 0;\n    this.dataset.depth = String(depth);\n\n    // Hover listeners - check mode/trigger at runtime\n    this.listen('mouseenter', this._handleMouseEnter);\n    this.listen('mouseleave', this._handleMouseLeave);\n\n    // Outside-click to close flyout panel (not applicable in inline mode)\n    this._outsideClickHandler = (e: MouseEvent) => {\n      if (!this.open) return;\n      if (this._mode === 'inline') return;\n      if (!e.composedPath().includes(this)) this.open = false;\n    };\n\n    document.addEventListener('click', this._outsideClickHandler);\n\n    // Close own submenu when a leaf inside it is selected (flyout)\n    this.listen('_menu-item-select', this._handleChildSelect as EventListener);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._outsideClickHandler) {\n      document.removeEventListener('click', this._outsideClickHandler);\n      this._outsideClickHandler = null;\n    }\n    if (this._closeTimer !== null) {\n      clearTimeout(this._closeTimer);\n      this._closeTimer = null;\n    }\n  }\n\n  private get _parentMenu(): ParentMenuLike | null {\n    return this.closest<ParentMenuLike>('ae-menu');\n  }\n\n  private get _mode(): MenuMode {\n    return this._parentMenu?.mode ?? 'flyout';\n  }\n\n  private get _orientation(): MenuOrientation {\n    return this._parentMenu?.orientation ?? 'horizontal';\n  }\n\n  private get _trigger(): MenuTrigger {\n    return this._parentMenu?.trigger ?? 'click';\n  }\n\n  private get _wrapText(): boolean {\n    return this._parentMenu?.wrapText ?? false;\n  }\n\n  private get _isParent(): boolean {\n    return this.label != null && this.label !== '';\n  }\n\n  /** Compute flyout panel placement based on depth and parent orientation. */\n  private get _panelPlacement(): 'bottom' | 'right' {\n    const isNested = !!this.parentElement?.closest('ae-menu-item');\n    if (!isNested && this._orientation === 'horizontal') return 'bottom';\n    return 'right';\n  }\n\n  private _isHoverTrigger(): boolean {\n    return this._isParent && this._mode === 'flyout' && this._trigger === 'hover';\n  }\n\n  private _handleMouseEnter = (): void => {\n    if (!this._isHoverTrigger()) return;\n    if (this._closeTimer !== null) {\n      clearTimeout(this._closeTimer);\n      this._closeTimer = null;\n    }\n    this.open = true;\n  };\n\n  private _handleMouseLeave = (): void => {\n    if (!this._isHoverTrigger()) return;\n    this._closeTimer = setTimeout(() => {\n      this.open = false;\n      this._closeTimer = null;\n    }, 150);\n  };\n\n  private _handleParentClick = (): void => {\n    if (this.disabled) return;\n    const mode = this._mode;\n    const trigger = this._trigger;\n    // In hover mode, click should still toggle (accessibility)\n    if (mode === 'flyout' && trigger === 'hover') {\n      this.open = !this.open;\n      return;\n    }\n    this.open = !this.open;\n  };\n\n  private _handleLeafClick = (e: Event): void => {\n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n    const path = this._buildKeyPath();\n    const label = this.textContent?.trim() ?? '';\n    this.dispatchEvent(\n      new CustomEvent('_menu-item-select', {\n        bubbles: true,\n        composed: true,\n        detail: { key: this.key ?? '', label, keyPath: path },\n      }),\n    );\n  };\n\n  private _handleChildSelect = (): void => {\n    // Close flyout panel after a child leaf is selected\n    if (this._mode === 'flyout') {\n      this.open = false;\n    }\n  };\n\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape' && this.open) {\n      e.stopPropagation();\n      this.open = false;\n    }\n  };\n\n  private _buildKeyPath(): string[] {\n    const path: string[] = [];\n    if (this.key) path.unshift(this.key);\n    let el: Element | null = this.parentElement;\n    while (el) {\n      const tag = el.tagName.toLowerCase();\n      if (tag === 'ae-menu-item') {\n        const k = (el as MenuItem).key;\n        if (k) path.unshift(k);\n      } else if (tag === 'ae-menu') {\n        break;\n      }\n      el = el.parentElement;\n    }\n    return path;\n  }\n\n  protected render() {\n    const mode = this._mode;\n    const panelPlacement = this._panelPlacement;\n    const isParent = this._isParent;\n    const isInline = mode === 'inline';\n    // Arrow direction: inline always shows \u25BA (rotates to \u25BC on open)\n    // flyout-bottom shows \u25BC; flyout-right shows \u25BA\n    const arrowDir = !isInline && panelPlacement === 'bottom' ? 'bottom' : 'right';\n    const wrapText = this._wrapText;\n    // Leaf items inside a submenu panel (depth > 0) need different padding\n    const isNested = !!this.parentElement?.closest('ae-menu-item');\n\n    return html(({ div, button, a, span, slot }) => {\n      if (isParent) {\n        div({ className: 'item-wrapper' }, () => {\n          button(\n            {\n              type: 'button',\n              className: {\n                item: true,\n                'item--parent': true,\n                'item--open': this.open,\n                'item--wrap': wrapText,\n              },\n              disabled: this.disabled,\n              'aria-haspopup': 'menu',\n              'aria-expanded': String(this.open),\n              '@click': this._handleParentClick,\n              '@keydown': this._handleKeydown,\n            },\n            () => {\n              span({ text: this.label });\n              slot({ name: 'expand' }, () => {\n                span({ className: `item-arrow item-arrow--${arrowDir}`, 'aria-hidden': 'true' });\n              });\n              slot({ name: 'collapse' }, () => {\n                span({ className: `item-arrow item-arrow--${arrowDir}`, 'aria-hidden': 'true' });\n              });\n            },\n          );\n\n          if (isInline) {\n            div(\n              {\n                className: { 'submenu-inline': true, open: this.open },\n                role: 'menu',\n              },\n              () => {\n                slot();\n              },\n            );\n          } else {\n            div(\n              {\n                className: {\n                  'submenu-panel': true,\n                  [`placement-${panelPlacement}`]: true,\n                  open: this.open,\n                },\n                role: 'menu',\n              },\n              () => {\n                slot();\n              },\n            );\n          }\n        });\n      } else {\n        // Leaf item\n        const sharedProps = {\n          className: { item: true, 'item--leaf-in-panel': isNested, 'item--wrap': wrapText },\n          role: 'menuitem',\n          '@click': this._handleLeafClick,\n          '@keydown': this._handleKeydown,\n        };\n\n        if (this.href) {\n          a(\n            {\n              ...sharedProps,\n              href: this.disabled ? undefined : this.href,\n              'aria-disabled': this.disabled ? 'true' : undefined,\n            },\n            () => {\n              slot();\n            },\n          );\n        } else {\n          button(\n            {\n              ...sharedProps,\n              type: 'button',\n              disabled: this.disabled,\n            },\n            () => {\n              slot();\n            },\n          );\n        }\n      }\n    });\n  }\n}\n\nMenuItem.define('menu-item');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-menu-item': MenuItem;\n  }\n}\n\nexport default MenuItem;\nexport type MenuItemProps = InferProps<typeof MenuItem>;\nexport type { MenuIconPlacement };\n", "export default \":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--wrap {\\n  white-space: normal;\\n  height: auto;\\n  min-height: var(--menu-item-height);\\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\""],
+  "mappings": "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",
   "names": ["html", "prop", "menu_item_default", "_a", "_init", "prop", "html", "menu_default"]
 }

package/dist/navbar.cjs

@@ -159,7 +159,7 @@ var require_variables = __commonJS({
   --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);
   --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);
 
-  /* Gray  (neutral \u2014 base #6e6e6e) */
+  /* Gray  (neutral - base #6e6e6e) */
   --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);
   --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);
   --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);
@@ -170,7 +170,7 @@ var require_variables = __commonJS({
   --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);
   --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);
 
-  /* Slate  (blue-gray \u2014 base #64748b, used for 'secondary') */
+  /* Slate  (blue-gray - base #64748b, used for 'secondary') */
   --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);
   --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);
   --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);
@@ -206,7 +206,7 @@ var require_variables = __commonJS({
 
 :root,
 :host {
-  /* Hover / active mix (light default \u2014 overridden in \xA7 6 dark) */
+  /* Hover / active mix (light default - overridden in \xA7 6 dark) */
   --ae-color-mix-hover:  black 10%;
   --ae-color-mix-active: black 20%;
 
@@ -240,7 +240,7 @@ var require_variables = __commonJS({
   --ae-color-info-active:      color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));
   --ae-color-info-disabled:    color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));
 
-  /* Secondary (Slate) \u2014 base differs per theme, overridden in \xA7 6 dark */
+  /* Secondary (Slate) - base differs per theme, overridden in \xA7 6 dark */
   --ae-color-secondary:        var(--ae-slate-500);
   --ae-color-secondary-hover:  color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));
   --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));
@@ -256,7 +256,7 @@ var require_variables = __commonJS({
 :host {
   color-scheme: light;
 
-  /* Gray UI aliases \u2014 lighter palette steps for elements on white background */
+  /* Gray UI aliases - lighter palette steps for elements on white background */
   --ae-color-gray-dark:     var(--ae-gray-400);
   --ae-color-gray:          var(--ae-gray-300);
   --ae-color-gray-light:    var(--ae-gray-200);
@@ -288,7 +288,7 @@ var require_variables = __commonJS({
   --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.30);
   --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);
 
-  /* Subtle intent tokens \u2014 light context */
+  /* Subtle intent tokens - light context */
   --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.08);
   --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.40);
   --ae-color-primary-text-emphasis:   var(--ae-blue-700);
@@ -319,7 +319,7 @@ var require_variables = __commonJS({
   --ae-color-dark-bg-subtle:          var(--ae-dark-100);   /* opaque on white: ~#d6d8d9 */
   --ae-color-dark-border-subtle:      var(--ae-dark-300);   /* opaque on white: ~#85898c */
 
-  /* Component tokens \u2014 light defaults */
+  /* Component tokens - light defaults */
   --ae-action-btn-bg:          var(--ae-gray-200);
   --ae-action-btn-bg-hover:    var(--ae-color-primary);
   --ae-action-btn-color:       var(--ae-gray-600);
@@ -354,14 +354,12 @@ var require_variables = __commonJS({
   --ae-size-3xs:   round(calc(var(--ae-size-2xs) / 1.125), 1px);         /* 10px */
 }
 
-/* Border-radius tokens \u2014 shared across all components */
+/* Border-radius tokens - shared across all components */
 :root,
 :host {
   /**
    * Unified border-radius hook for all components.
    *
-   * Not set by default \u2014 each component falls back to its own --ae-radius-*
-   * token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).
    *
    * Usage:
    *   :root { --ae-border-radius: 0; }       // global: all components square
@@ -383,7 +381,7 @@ var require_variables = __commonJS({
   --ae-radius-circle:  50%;
 }
 
-/* Layout tokens \u2014 defined on :root so all light DOM elements can use them */
+/* Layout tokens - defined on :root so all light DOM elements can use them */
 :root,
 :host {
   --container-max-width: 1280px;
@@ -396,18 +394,18 @@ var require_variables = __commonJS({
 :host-context([theme="dark"]) {
   color-scheme: dark;
 
-  /* Hover / active \u2014 slightly gentler on dark backgrounds */
+  /* Hover / active - slightly gentler on dark backgrounds */
   --ae-color-mix-hover:  black 8%;
   --ae-color-mix-active: black 16%;
 
-  /* Gray UI aliases \u2014 darker palette steps for elements on dark background */
+  /* Gray UI aliases - darker palette steps for elements on dark background */
   --ae-color-gray-dark:     var(--ae-gray-800);
   --ae-color-gray:          var(--ae-gray-700);
   --ae-color-gray-light:    var(--ae-gray-600);
   --ae-color-gray-lighter:  var(--ae-gray-500);
   --ae-color-gray-lightest: var(--ae-gray-400);
 
-  /* Secondary \u2014 deeper base on dark background */
+  /* Secondary - deeper base on dark background */
   --ae-color-secondary:      var(--ae-slate-700);
   --ae-color-secondary-text: var(--ae-slate-300);
 
@@ -436,7 +434,7 @@ var require_variables = __commonJS({
   --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.25);
   --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);
 
-  /* Subtle intent tokens \u2014 dark context (more alpha, lighter text-emphasis) */
+  /* Subtle intent tokens - dark context (more alpha, lighter text-emphasis) */
   --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.10);
   --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.30);
   --ae-color-primary-text-emphasis:   var(--ae-blue-300);
@@ -467,7 +465,7 @@ var require_variables = __commonJS({
   --ae-color-dark-bg-subtle:          rgb(from var(--ae-dark) r g b / 0.30);
   --ae-color-dark-border-subtle:      rgb(from var(--ae-dark) r g b / 0.50);
 
-  /* Component tokens \u2014 dark overrides */
+  /* Component tokens - dark overrides */
   --ae-action-btn-bg:          var(--ae-color-gray);
   --ae-action-btn-bg-hover:    color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));
   --ae-action-btn-color:       var(--ae-gray-400);
@@ -508,19 +506,12 @@ var import_navbar = __toESM(require_navbar(), 1);
 
 // src/aeico-component.ts
 var import_aeico = require("aeico");
-
-// src/utils.ts
-function toKebab(str) {
-  const cleaned = str.replace(/^[_\d]+/, "");
-  return cleaned.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-}
-
-// src/aeico-component.ts
 var TAG_NAME_PREFIX = "ae";
 var AeicoComponent = class extends import_aeico.AeicoElement {
-  static register(name) {
-    const tagName = name || `${TAG_NAME_PREFIX}-${this.tagName || toKebab(this.name)}`;
-    super.register(tagName);
+  static define(name) {
+    const prefix = `${TAG_NAME_PREFIX}-`;
+    const tagName = name.startsWith(prefix) ? name : `${prefix}${name}`;
+    super.define(tagName);
   }
 };
 var aeico_component_default = AeicoComponent;
@@ -613,9 +604,8 @@ __decorateElement(_init, 4, "sticky", _sticky_dec, Navbar, _sticky);
 __decorateElement(_init, 4, "appearance", _appearance_dec, Navbar, _appearance);
 __decorateElement(_init, 4, "open", _open_dec, Navbar, _open);
 __decoratorMetadata(_init, Navbar);
-__publicField(Navbar, "tagName", "navbar");
 __publicField(Navbar, "styles", [import_variables.default, import_color.default, import_navbar.default]);
-Navbar.register();
+Navbar.define("navbar");
 var navbar_default = Navbar;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/navbar.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/variables.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/color.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/navbar.css", "../src/navbar/index.ts", "../src/navbar/navbar.ts", "../src/aeico-component.ts", "../src/utils.ts"],
-  "sourcesContent": ["module.exports = \":root,\\n:host {\\n  --ae-font-sans-serif: system-ui, -apple-system, \\\"Segoe UI\\\", Roboto, \\\"Helvetica Neue\\\",\\n    \\\"Noto Sans\\\", \\\"Liberation Sans\\\", Arial, sans-serif,\\n    \\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\", \\\"Noto Color Emoji\\\";\\n  --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,\\n    \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace;\\n  font-family: var(--ae-font-sans-serif);\\n  --ae-blue:   #0e639c;\\n  --ae-green:  #28a745;\\n  --ae-red:    #dc3545;\\n  --ae-yellow: #ffc107;\\n  --ae-cyan:   #17a2b8;\\n  --ae-gray:   #6e6e6e;\\n  --ae-slate:  #64748b;\\n  --ae-dark:   #343a40;\\n  --ae-light:  #f8f9fa;\\n}\\n\\n:root,\\n:host {\\n  /* Blue */\\n  --ae-blue-100: color-mix(in srgb, var(--ae-blue) 20%, white);\\n  --ae-blue-200: color-mix(in srgb, var(--ae-blue) 40%, white);\\n  --ae-blue-300: color-mix(in srgb, var(--ae-blue) 60%, white);\\n  --ae-blue-400: color-mix(in srgb, var(--ae-blue) 80%, white);\\n  --ae-blue-500: var(--ae-blue);\\n  --ae-blue-600: color-mix(in srgb, var(--ae-blue) 80%, black);\\n  --ae-blue-700: color-mix(in srgb, var(--ae-blue) 60%, black);\\n  --ae-blue-800: color-mix(in srgb, var(--ae-blue) 40%, black);\\n  --ae-blue-900: color-mix(in srgb, var(--ae-blue) 20%, black);\\n\\n  /* Green */\\n  --ae-green-100: color-mix(in srgb, var(--ae-green) 20%, white);\\n  --ae-green-200: color-mix(in srgb, var(--ae-green) 40%, white);\\n  --ae-green-300: color-mix(in srgb, var(--ae-green) 60%, white);\\n  --ae-green-400: color-mix(in srgb, var(--ae-green) 80%, white);\\n  --ae-green-500: var(--ae-green);\\n  --ae-green-600: color-mix(in srgb, var(--ae-green) 80%, black);\\n  --ae-green-700: color-mix(in srgb, var(--ae-green) 60%, black);\\n  --ae-green-800: color-mix(in srgb, var(--ae-green) 40%, black);\\n  --ae-green-900: color-mix(in srgb, var(--ae-green) 20%, black);\\n\\n  /* Red */\\n  --ae-red-100: color-mix(in srgb, var(--ae-red) 20%, white);\\n  --ae-red-200: color-mix(in srgb, var(--ae-red) 40%, white);\\n  --ae-red-300: color-mix(in srgb, var(--ae-red) 60%, white);\\n  --ae-red-400: color-mix(in srgb, var(--ae-red) 80%, white);\\n  --ae-red-500: var(--ae-red);\\n  --ae-red-600: color-mix(in srgb, var(--ae-red) 80%, black);\\n  --ae-red-700: color-mix(in srgb, var(--ae-red) 60%, black);\\n  --ae-red-800: color-mix(in srgb, var(--ae-red) 40%, black);\\n  --ae-red-900: color-mix(in srgb, var(--ae-red) 20%, black);\\n\\n  /* Yellow */\\n  --ae-yellow-100: color-mix(in srgb, var(--ae-yellow) 20%, white);\\n  --ae-yellow-200: color-mix(in srgb, var(--ae-yellow) 40%, white);\\n  --ae-yellow-300: color-mix(in srgb, var(--ae-yellow) 60%, white);\\n  --ae-yellow-400: color-mix(in srgb, var(--ae-yellow) 80%, white);\\n  --ae-yellow-500: var(--ae-yellow);\\n  --ae-yellow-600: color-mix(in srgb, var(--ae-yellow) 80%, black);\\n  --ae-yellow-700: color-mix(in srgb, var(--ae-yellow) 60%, black);\\n  --ae-yellow-800: color-mix(in srgb, var(--ae-yellow) 40%, black);\\n  --ae-yellow-900: color-mix(in srgb, var(--ae-yellow) 20%, black);\\n\\n  /* Cyan */\\n  --ae-cyan-100: color-mix(in srgb, var(--ae-cyan) 20%, white);\\n  --ae-cyan-200: color-mix(in srgb, var(--ae-cyan) 40%, white);\\n  --ae-cyan-300: color-mix(in srgb, var(--ae-cyan) 60%, white);\\n  --ae-cyan-400: color-mix(in srgb, var(--ae-cyan) 80%, white);\\n  --ae-cyan-500: var(--ae-cyan);\\n  --ae-cyan-600: color-mix(in srgb, var(--ae-cyan) 80%, black);\\n  --ae-cyan-700: color-mix(in srgb, var(--ae-cyan) 60%, black);\\n  --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);\\n  --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);\\n\\n  /* Gray  (neutral \u2014 base #6e6e6e) */\\n  --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);\\n  --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);\\n  --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);\\n  --ae-gray-400: color-mix(in srgb, var(--ae-gray) 80%, white);\\n  --ae-gray-500: var(--ae-gray);\\n  --ae-gray-600: color-mix(in srgb, var(--ae-gray) 80%, black);\\n  --ae-gray-700: color-mix(in srgb, var(--ae-gray) 60%, black);\\n  --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);\\n  --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);\\n\\n  /* Slate  (blue-gray \u2014 base #64748b, used for 'secondary') */\\n  --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);\\n  --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);\\n  --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);\\n  --ae-slate-400: color-mix(in srgb, var(--ae-slate) 80%, white);\\n  --ae-slate-500: var(--ae-slate);\\n  --ae-slate-600: color-mix(in srgb, var(--ae-slate) 80%, black);\\n  --ae-slate-700: color-mix(in srgb, var(--ae-slate) 60%, black);\\n  --ae-slate-800: color-mix(in srgb, var(--ae-slate) 40%, black);\\n  --ae-slate-900: color-mix(in srgb, var(--ae-slate) 20%, black);\\n\\n  /* Dark  (base #343a40) */\\n  --ae-dark-100: color-mix(in srgb, var(--ae-dark) 20%, white);\\n  --ae-dark-200: color-mix(in srgb, var(--ae-dark) 40%, white);\\n  --ae-dark-300: color-mix(in srgb, var(--ae-dark) 60%, white);\\n  --ae-dark-400: color-mix(in srgb, var(--ae-dark) 80%, white);\\n  --ae-dark-500: var(--ae-dark);\\n  --ae-dark-600: color-mix(in srgb, var(--ae-dark) 80%, black);\\n  --ae-dark-700: color-mix(in srgb, var(--ae-dark) 60%, black);\\n  --ae-dark-800: color-mix(in srgb, var(--ae-dark) 40%, black);\\n  --ae-dark-900: color-mix(in srgb, var(--ae-dark) 20%, black);\\n\\n  /* Light  (base #f8f9fa) */\\n  --ae-light-100: color-mix(in srgb, var(--ae-light) 20%, white);\\n  --ae-light-200: color-mix(in srgb, var(--ae-light) 40%, white);\\n  --ae-light-300: color-mix(in srgb, var(--ae-light) 60%, white);\\n  --ae-light-400: color-mix(in srgb, var(--ae-light) 80%, white);\\n  --ae-light-500: var(--ae-light);\\n  --ae-light-600: color-mix(in srgb, var(--ae-light) 80%, black);\\n  --ae-light-700: color-mix(in srgb, var(--ae-light) 60%, black);\\n  --ae-light-800: color-mix(in srgb, var(--ae-light) 40%, black);\\n  --ae-light-900: color-mix(in srgb, var(--ae-light) 20%, black);\\n}\\n\\n:root,\\n:host {\\n  /* Hover / active mix (light default \u2014 overridden in \u00A7 6 dark) */\\n  --ae-color-mix-hover:  black 10%;\\n  --ae-color-mix-active: black 20%;\\n\\n  /* Primary (Blue) */\\n  --ae-color-primary:          var(--ae-blue-500);\\n  --ae-color-primary-hover:    color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-hover));\\n  --ae-color-primary-active:   color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-active));\\n  --ae-color-primary-disabled: color-mix(in srgb, var(--ae-blue) 50%, var(--ae-gray-500));\\n\\n  /* Success (Green) */\\n  --ae-color-success:          var(--ae-green-500);\\n  --ae-color-success-hover:    color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-hover));\\n  --ae-color-success-active:   color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-active));\\n  --ae-color-success-disabled: color-mix(in srgb, var(--ae-green) 50%, var(--ae-gray-500));\\n\\n  /* Danger (Red) */\\n  --ae-color-danger:           var(--ae-red-500);\\n  --ae-color-danger-hover:     color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-hover));\\n  --ae-color-danger-active:    color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-active));\\n  --ae-color-danger-disabled:  color-mix(in srgb, var(--ae-red) 50%, var(--ae-gray-500));\\n\\n  /* Warning (Yellow) */\\n  --ae-color-warning:          var(--ae-yellow-500);\\n  --ae-color-warning-hover:    color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-hover));\\n  --ae-color-warning-active:   color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-active));\\n  --ae-color-warning-disabled: color-mix(in srgb, var(--ae-yellow) 50%, var(--ae-gray-500));\\n\\n  /* Info (Cyan) */\\n  --ae-color-info:             var(--ae-cyan-500);\\n  --ae-color-info-hover:       color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-hover));\\n  --ae-color-info-active:      color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));\\n  --ae-color-info-disabled:    color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));\\n\\n  /* Secondary (Slate) \u2014 base differs per theme, overridden in \u00A7 6 dark */\\n  --ae-color-secondary:        var(--ae-slate-500);\\n  --ae-color-secondary-hover:  color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));\\n  --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));\\n  --ae-color-secondary-text:   var(--ae-slate-700);\\n}\\n\\n\\n.theme-light,\\n:root[theme=\\\"light\\\"],\\n:host([theme=\\\"light\\\"]),\\n:host-context([theme=\\\"light\\\"]),\\n:where(:root),\\n:host {\\n  color-scheme: light;\\n\\n  /* Gray UI aliases \u2014 lighter palette steps for elements on white background */\\n  --ae-color-gray-dark:     var(--ae-gray-400);\\n  --ae-color-gray:          var(--ae-gray-300);\\n  --ae-color-gray-light:    var(--ae-gray-200);\\n  --ae-color-gray-lighter:  var(--ae-gray-100);\\n  --ae-color-gray-lightest: color-mix(in srgb, var(--ae-gray) 10%, white);\\n\\n  /* Text */\\n  --ae-color-text-main:       var(--ae-dark-700);\\n  --ae-color-text-muted:      var(--ae-gray-600);\\n  --ae-color-text-disabled:   var(--ae-gray-300);\\n  --ae-color-text-link:       var(--ae-blue-500);\\n  --ae-color-text-link-hover: var(--ae-blue-700);\\n\\n  /* Surfaces */\\n  --ae-surface-sunken:  var(--ae-light-500);\\n  --ae-surface-base:    white;\\n  --ae-surface-raised:  var(--ae-light-500);\\n  --ae-surface-overlay: white;\\n  --ae-color-overlay:   rgba(0, 0, 0, 0.4);\\n\\n  /* Borders */\\n  --ae-border-subtle:   rgba(0, 0, 0, 0.08);\\n  --ae-border-default:  rgba(0, 0, 0, 0.15);\\n  --ae-border-hover:    rgba(0, 0, 0, 0.25);\\n  --ae-border-focus:    var(--ae-color-primary);\\n  --ae-border-disabled: rgba(0, 0, 0, 0.06);\\n\\n  /* Focus ring */\\n  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.30);\\n  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);\\n\\n  /* Subtle intent tokens \u2014 light context */\\n  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.08);\\n  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.40);\\n  --ae-color-primary-text-emphasis:   var(--ae-blue-700);\\n\\n  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.08);\\n  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.40);\\n  --ae-color-success-text-emphasis:   var(--ae-green-700);\\n\\n  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.08);\\n  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.40);\\n  --ae-color-danger-text-emphasis:    var(--ae-red-700);\\n\\n  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.08);\\n  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.40);\\n  --ae-color-warning-text-emphasis:   var(--ae-yellow-700);\\n\\n  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.08);\\n  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.40);\\n  --ae-color-info-text-emphasis:      var(--ae-cyan-700);\\n\\n  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.08);\\n  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.40);\\n  --ae-color-secondary-text-emphasis: var(--ae-slate-700);\\n\\n  --ae-color-light-bg-subtle:         var(--ae-gray-100);   /* opaque on white: ~#e2e2e2 */\\n  --ae-color-light-border-subtle:     var(--ae-gray-200);   /* opaque on white: ~#c4c4c4 */\\n\\n  --ae-color-dark-bg-subtle:          var(--ae-dark-100);   /* opaque on white: ~#d6d8d9 */\\n  --ae-color-dark-border-subtle:      var(--ae-dark-300);   /* opaque on white: ~#85898c */\\n\\n  /* Component tokens \u2014 light defaults */\\n  --ae-action-btn-bg:          var(--ae-gray-200);\\n  --ae-action-btn-bg-hover:    var(--ae-color-primary);\\n  --ae-action-btn-color:       var(--ae-gray-600);\\n  --ae-action-btn-color-hover: white;\\n\\n  --ae-clear-btn-bg-hover:     var(--ae-color-danger);\\n  --ae-clear-btn-color-hover:  white;\\n\\n  --ae-reset-btn-border-radius: var(--ae-radius-xs);\\n  --ae-reset-btn-bg:            var(--ae-action-btn-bg);\\n  --ae-reset-btn-bg-hover:      var(--ae-action-btn-bg-hover);\\n  --ae-reset-btn-color:         var(--ae-action-btn-color);\\n  --ae-reset-btn-color-hover:   var(--ae-action-btn-color-hover);\\n  --ae-reset-btn-transition:    all 0.12s;\\n\\n  --ae-clear-btn-border-radius: var(--ae-radius-xs);\\n  --ae-clear-btn-bg:            var(--ae-action-btn-bg);\\n  --ae-clear-btn-color:         var(--ae-action-btn-color);\\n  --ae-clear-btn-transition:    all 0.12s;\\n}\\n\\n:root,\\n:host {\\n  --ae-size-scale: 1;\\n  --ae-size-base:  calc(1rem * var(--ae-size-scale));                    /* 16px */\\n  --ae-size-xl:    round(calc(var(--ae-size-l) * 1.125), 1px);           /* 23px */\\n  --ae-size-l:     round(calc(var(--ae-size-m) * 1.125 * 1.125), 1px);   /* 20px */\\n  --ae-size-m:     var(--ae-size-base);                                  /* 16px */\\n  --ae-size-s:     round(calc(var(--ae-size-m) / 1.125), 1px);           /* 14px */\\n  --ae-size-xs:    round(calc(var(--ae-size-s) / 1.125), 1px);           /* 12px */\\n  --ae-size-2xs:   round(calc(var(--ae-size-xs) / 1.125), 1px);          /* 11px */\\n  --ae-size-3xs:   round(calc(var(--ae-size-2xs) / 1.125), 1px);         /* 10px */\\n}\\n\\n/* Border-radius tokens \u2014 shared across all components */\\n:root,\\n:host {\\n  /**\\n   * Unified border-radius hook for all components.\\n   *\\n   * Not set by default \u2014 each component falls back to its own --ae-radius-*\\n   * token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).\\n   *\\n   * Usage:\\n   *   :root { --ae-border-radius: 0; }       // global: all components square\\n   *   :root { --ae-border-radius: 999px; }   // global: all components pill\\n   *   ae-button { --ae-border-radius: 50%; } // scoped: only buttons circular\\n   *   .sidebar { --ae-border-radius: 8px; }  // scoped: everything inside .sidebar\\n   *\\n   * To restore a component to its own default:\\n   *   ae-card { --ae-border-radius: initial; }\\n   */\\n\\n  --ae-radius-square:  0;\\n  --ae-radius-xs:      2px;\\n  --ae-radius-sm:      4px;\\n  --ae-radius-md:      6px;\\n  --ae-radius-lg:      8px;\\n  --ae-radius-xl:      12px;\\n  --ae-radius-pill:    999px;\\n  --ae-radius-circle:  50%;\\n}\\n\\n/* Layout tokens \u2014 defined on :root so all light DOM elements can use them */\\n:root,\\n:host {\\n  --container-max-width: 1280px;\\n  --container-padding-x: 1.5rem;\\n}\\n\\n.theme-dark,\\n:root[theme=\\\"dark\\\"],\\n:host([theme=\\\"dark\\\"]),\\n:host-context([theme=\\\"dark\\\"]) {\\n  color-scheme: dark;\\n\\n  /* Hover / active \u2014 slightly gentler on dark backgrounds */\\n  --ae-color-mix-hover:  black 8%;\\n  --ae-color-mix-active: black 16%;\\n\\n  /* Gray UI aliases \u2014 darker palette steps for elements on dark background */\\n  --ae-color-gray-dark:     var(--ae-gray-800);\\n  --ae-color-gray:          var(--ae-gray-700);\\n  --ae-color-gray-light:    var(--ae-gray-600);\\n  --ae-color-gray-lighter:  var(--ae-gray-500);\\n  --ae-color-gray-lightest: var(--ae-gray-400);\\n\\n  /* Secondary \u2014 deeper base on dark background */\\n  --ae-color-secondary:      var(--ae-slate-700);\\n  --ae-color-secondary-text: var(--ae-slate-300);\\n\\n  /* Text */\\n  --ae-color-text-main:       white;\\n  --ae-color-text-muted:      var(--ae-gray-200);\\n  --ae-color-text-disabled:   var(--ae-gray-500);\\n  --ae-color-text-link:       var(--ae-blue-300);\\n  --ae-color-text-link-hover: var(--ae-blue-200);\\n\\n  /* Surfaces */\\n  --ae-surface-sunken:  var(--ae-gray-900);\\n  --ae-surface-base:    color-mix(in srgb, var(--ae-gray) 27%, black);\\n  --ae-surface-raised:  color-mix(in srgb, var(--ae-gray) 34%, black);\\n  --ae-surface-overlay: color-mix(in srgb, var(--ae-gray) 38%, black);\\n  --ae-color-overlay:   rgba(0, 0, 0, 0.6);\\n\\n  /* Borders */\\n  --ae-border-subtle:   rgba(255, 255, 255, 0.08);\\n  --ae-border-default:  rgba(255, 255, 255, 0.12);\\n  --ae-border-hover:    rgba(255, 255, 255, 0.20);\\n  --ae-border-focus:    var(--ae-color-primary);\\n  --ae-border-disabled: rgba(255, 255, 255, 0.06);\\n\\n  /* Focus ring */\\n  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.25);\\n  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);\\n\\n  /* Subtle intent tokens \u2014 dark context (more alpha, lighter text-emphasis) */\\n  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.10);\\n  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.30);\\n  --ae-color-primary-text-emphasis:   var(--ae-blue-300);\\n\\n  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.10);\\n  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.30);\\n  --ae-color-success-text-emphasis:   var(--ae-green-300);\\n\\n  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.10);\\n  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.30);\\n  --ae-color-danger-text-emphasis:    var(--ae-red-300);\\n\\n  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.10);\\n  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.30);\\n  --ae-color-warning-text-emphasis:   var(--ae-yellow-300);\\n\\n  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.10);\\n  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.30);\\n  --ae-color-info-text-emphasis:      var(--ae-cyan-300);\\n\\n  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.10);\\n  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.30);\\n  --ae-color-secondary-text-emphasis: var(--ae-slate-300);\\n\\n  --ae-color-light-bg-subtle:         rgb(from var(--ae-light) r g b / 0.20);\\n  --ae-color-light-border-subtle:     rgb(from var(--ae-light) r g b / 0.25);\\n\\n  --ae-color-dark-bg-subtle:          rgb(from var(--ae-dark) r g b / 0.30);\\n  --ae-color-dark-border-subtle:      rgb(from var(--ae-dark) r g b / 0.50);\\n\\n  /* Component tokens \u2014 dark overrides */\\n  --ae-action-btn-bg:          var(--ae-color-gray);\\n  --ae-action-btn-bg-hover:    color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));\\n  --ae-action-btn-color:       var(--ae-gray-400);\\n  --ae-action-btn-color-hover: var(--ae-cyan-300);\\n  --ae-clear-btn-bg-hover:     color-mix(in srgb, var(--ae-red) 25%, var(--ae-gray-800));\\n  --ae-clear-btn-color-hover:  var(--ae-red-300);\\n}\\n\"", "module.exports = \":host {\\n  --ae-color-solid:           var(--ae-color-gray);\\n  --ae-color-solid-hover:     color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-hover));\\n  --ae-color-solid-active:    color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-active));\\n  --ae-color-on-solid:        var(--ae-color-text-main);\\n  --ae-color-border:          var(--ae-color-gray);\\n  --ae-color-border-hover:    color-mix(in srgb, var(--ae-color-border), var(--ae-color-mix-hover));\\n  --ae-color-accent:          var(--ae-color-text-muted);\\n  --ae-color-accent-hover:    var(--ae-color-text-main);\\n  --ae-color-subtle:          var(--ae-border-subtle);\\n  --ae-color-subtle-hover:    var(--ae-border-default);\\n  --ae-color-bg-subtle:       var(--ae-border-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-text-muted);\\n  --ae-color-border-subtle:   var(--ae-border-default);\\n}\\n\\n:host([color=\\\"primary\\\"]) {\\n  --ae-color-solid:           var(--ae-color-primary);\\n  --ae-color-on-solid:        white;\\n  --ae-color-border:          var(--ae-color-primary);\\n  --ae-color-accent:          var(--ae-color-text-link);\\n  --ae-color-accent-hover:    var(--ae-color-text-link-hover);\\n  --ae-color-subtle:          var(--ae-color-primary-bg-subtle);\\n  --ae-color-subtle-hover:    rgb(from var(--ae-blue) r g b / 0.15);\\n  --ae-color-bg-subtle:       var(--ae-color-primary-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-primary-text-emphasis);\\n  --ae-color-border-subtle:   var(--ae-color-primary-border-subtle);\\n}\\n\\n:host([color=\\\"secondary\\\"]) {\\n  --ae-color-solid:           var(--ae-color-secondary);\\n  --ae-color-on-solid:        white;\\n  --ae-color-border:          var(--ae-color-secondary-hover);\\n  --ae-color-accent:          var(--ae-color-secondary-text-emphasis);\\n  --ae-color-accent-hover:    var(--ae-color-text-main);\\n  --ae-color-subtle:          rgb(from var(--ae-slate) r g b / 0.06);\\n  --ae-color-subtle-hover:    rgb(from var(--ae-slate) r g b / 0.12);\\n  --ae-color-bg-subtle:       var(--ae-color-secondary-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-secondary-text-emphasis);\\n  --ae-color-border-subtle:   var(--ae-color-secondary-border-subtle);\\n}\\n\\n:host([color=\\\"success\\\"]) {\\n  --ae-color-solid:           var(--ae-color-success);\\n  --ae-color-on-solid:        white;\\n  --ae-color-border:          var(--ae-color-success);\\n  --ae-color-accent:          var(--ae-color-success-text-emphasis);\\n  --ae-color-accent-hover:    var(--ae-color-success-hover);\\n  --ae-color-subtle:          var(--ae-color-success-bg-subtle);\\n  --ae-color-subtle-hover:    rgb(from var(--ae-green) r g b / 0.15);\\n  --ae-color-bg-subtle:       var(--ae-color-success-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-success-text-emphasis);\\n  --ae-color-border-subtle:   var(--ae-color-success-border-subtle);\\n}\\n\\n:host([color=\\\"danger\\\"]) {\\n  --ae-color-solid:           var(--ae-color-danger);\\n  --ae-color-on-solid:        white;\\n  --ae-color-border:          var(--ae-color-danger);\\n  --ae-color-accent:          var(--ae-color-danger-text-emphasis);\\n  --ae-color-accent-hover:    var(--ae-color-danger-hover);\\n  --ae-color-subtle:          var(--ae-color-danger-bg-subtle);\\n  --ae-color-subtle-hover:    rgb(from var(--ae-red) r g b / 0.15);\\n  --ae-color-bg-subtle:       var(--ae-color-danger-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-danger-text-emphasis);\\n  --ae-color-border-subtle:   var(--ae-color-danger-border-subtle);\\n}\\n\\n:host([color=\\\"warning\\\"]) {\\n  --ae-color-solid:           var(--ae-color-warning);\\n  --ae-color-on-solid:        var(--ae-gray-900);\\n  --ae-color-border:          var(--ae-color-warning);\\n  --ae-color-accent:          var(--ae-color-warning-text-emphasis);\\n  --ae-color-accent-hover:    var(--ae-color-warning-hover);\\n  --ae-color-subtle:          var(--ae-color-warning-bg-subtle);\\n  --ae-color-subtle-hover:    rgb(from var(--ae-yellow) r g b / 0.15);\\n  --ae-color-bg-subtle:       var(--ae-color-warning-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-warning-text-emphasis);\\n  --ae-color-border-subtle:   var(--ae-color-warning-border-subtle);\\n}\\n\\n:host([color=\\\"info\\\"]) {\\n  --ae-color-solid:           var(--ae-color-info);\\n  --ae-color-on-solid:        white;\\n  --ae-color-border:          var(--ae-color-info);\\n  --ae-color-accent:          var(--ae-color-info-text-emphasis);\\n  --ae-color-accent-hover:    var(--ae-color-info-hover);\\n  --ae-color-subtle:          var(--ae-color-info-bg-subtle);\\n  --ae-color-subtle-hover:    rgb(from var(--ae-cyan) r g b / 0.15);\\n  --ae-color-bg-subtle:       var(--ae-color-info-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-info-text-emphasis);\\n  --ae-color-border-subtle:   var(--ae-color-info-border-subtle);\\n}\\n\\n:host([color=\\\"light\\\"]) {\\n  --ae-color-solid:           var(--ae-light);\\n  --ae-color-on-solid:        var(--ae-gray-900);\\n  --ae-color-border:          var(--ae-border-hover);\\n  --ae-color-subtle:          var(--ae-color-light-bg-subtle);\\n  --ae-color-subtle-hover:    var(--ae-color-light-border-subtle);\\n  --ae-color-bg-subtle:       var(--ae-color-light-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-text-muted);\\n  --ae-color-border-subtle:   var(--ae-color-light-border-subtle);\\n}\\n\\n:host([color=\\\"dark\\\"]) {\\n  --ae-color-solid:           var(--ae-dark-500);\\n  --ae-color-on-solid:        white;\\n  --ae-color-border:          var(--ae-dark-500);\\n  --ae-color-accent:          var(--ae-color-text-main);\\n  --ae-color-accent-hover:    var(--ae-color-text-main);\\n  --ae-color-subtle:          var(--ae-color-dark-bg-subtle);\\n  --ae-color-subtle-hover:    var(--ae-color-dark-border-subtle);\\n  --ae-color-bg-subtle:       var(--ae-color-dark-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-text-main);\\n  --ae-color-border-subtle:   var(--ae-color-dark-border-subtle);\\n}\\n\"", "module.exports = \":host {\\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  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  --ae-navbar-radius: 0;\\n  --ae-navbar-padding-x: var(--container-padding-x, 1.5rem);\\n  --ae-navbar-gap: 0.5rem;\\n  --ae-navbar-link-color: inherit;\\n  --ae-navbar-link-font-size: inherit;\\n  --ae-navbar-link-padding-x: 0.75rem;\\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:host([appearance=\\\"block\\\"]) {\\n  --ae-navbar-link-hover-bg: var(--ae-color-bg-subtle);\\n  --ae-navbar-link-hover-color: inherit;\\n  --ae-navbar-link-radius: 0;\\n}\\n\\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  --ae-navbar-link-radius: 0;\\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[part=\\\"nav\\\"] {\\n  flex: 1 1 auto;\\n  display: flex;\\n  align-self: stretch;\\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;\\n  gap: var(--ae-navbar-start-gap, 0);\\n}\\n\\n[part=\\\"end\\\"] {\\n  align-items: center;\\n  gap: var(--ae-navbar-end-gap, 0.5rem);\\n  margin-left: auto;\\n}\\n\\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::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::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);\\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::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  [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  [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  ::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  [part=\\\"hamburger\\\"] {\\n    display: flex;\\n  }\\n\\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\"", "export { default, default as Navbar } from './navbar';\nexport type { NavbarProps } from './navbar';\nexport type { NavbarColor, NavbarAppearance } from './defines';\n", "\uFEFFimport type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css';\nimport colorCSS from '../styles/color.css';\nimport navbarStyle from '../styles/components/navbar.css';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\nimport type { NavbarColor, NavbarAppearance } from './defines';\n\n/**\n * Navbar Component\n *\n * A sticky top navigation bar with three slot regions and built-in\n * mobile hamburger collapse.\n *\n * Slots:\n * - `brand`  \u2014 leftmost area, typically a logo or site name link\n * - `start`  \u2014 main navigation links / dropdowns\n * - `end`    \u2014 right-side actions (login button, avatar, etc.)\n *\n * Slotted `<a>` elements receive default link styling controlled via\n * CSS custom properties. Mark the active link with `aria-current=\"page\"`.\n *\n * @example\n * ```html\n * <ae-navbar color=\"primary\" appearance=\"block\">\n *   <a slot=\"brand\" href=\"/\">MyApp</a>\n *   <a slot=\"start\" href=\"/\" aria-current=\"page\">Home</a>\n *   <a slot=\"start\" href=\"/docs\">Docs</a>\n *   <ae-button slot=\"end\" size=\"sm\" variant=\"outlined\">Sign in</ae-button>\n * </ae-navbar>\n * ```\n *\n * @example\n * ```css\n * /* Custom height and transparent background *\\/\n * ae-navbar {\n *   --ae-navbar-height: 4rem;\n *   --ae-navbar-bg: transparent;\n *   --ae-navbar-border-width: 0;\n *   --ae-navbar-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);\n * }\n * ```\n */\nclass Navbar extends AeicoComponent {\n  static tagName = 'navbar';\n\n  protected static styles = [styleVariables, colorCSS, navbarStyle];\n\n  /** Background color using the design-system color token set. */\n  @prop({ type: String })\n  accessor color: NavbarColor | undefined;\n\n  /** When true (default), the navbar sticks to the top of the viewport while scrolling. Set to false to let it scroll with the page. */\n  @prop({ type: Boolean })\n  accessor sticky: boolean = false;\n\n  /**\n   * Hover style preset for slotted `<a>` links.\n   * - `text`  \u2014 only the font color changes on hover (default)\n   * - `block` \u2014 a subtle filled background block appears on hover\n   *\n   * Fine-tune further with `--ae-navbar-link-hover-color` /\n   * `--ae-navbar-link-hover-bg` CSS variables.\n   */\n  @prop({ type: String })\n  accessor appearance: NavbarAppearance = 'text';\n\n  /** Whether the mobile menu is expanded. Reflects as the `open` attribute. */\n  @prop({ type: Boolean })\n  accessor open: boolean = false;\n\n  private _outsideClickHandler: ((e: MouseEvent) => void) | null = null;\n\n  connectedCallback() {\n    super.connectedCallback();\n    // Close menu when clicking outside the navbar\n    this._outsideClickHandler = (e: MouseEvent) => {\n      // Event retargeting in shadow DOM means e.target is the host element\n      // when the click originates inside the shadow root, so this check is safe.\n      if (!this.contains(e.target as Node) && !this.shadowRoot?.contains(e.target as Node)) {\n        this._closeMenu();\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  /** Toggle the mobile menu open/closed. */\n  toggleMenu(): void {\n    this.open = !this.open;\n  }\n\n  private _handleInnerClick = (e: Event) => {\n    if (!this.open) return;\n    // Close mobile menu when a slotted <a> link is clicked\n    const path = e.composedPath() as Element[];\n    if (path.some((el) => (el as HTMLElement).tagName === 'A')) {\n      this._closeMenu();\n    }\n  };\n\n  private _toggleMenu = () => {\n    this.open = !this.open;\n  };\n\n  private _closeMenu = () => {\n    if (this.open) this.open = false;\n  };\n\n  protected render() {\n    return html(({ div, nav, button, span, slot }) => {\n      div({ class: 'inner', '@click': this._handleInnerClick }, () => {\n        div({ part: 'brand' }, () => {\n          slot({ name: 'brand' });\n        });\n        nav({ part: 'nav', 'aria-label': 'Main navigation' }, () => {\n          div({ part: 'start' }, () => {\n            slot({ name: 'start' });\n          });\n          div({ part: 'end' }, () => {\n            slot({ name: 'end' });\n          });\n        });\n        button(\n          {\n            part: 'hamburger',\n            type: 'button',\n            'aria-expanded': String(this.open),\n            'aria-label': 'Toggle navigation',\n            '@click': this._toggleMenu,\n          },\n          () => {\n            span({ 'aria-hidden': 'true' });\n            span({ 'aria-hidden': 'true' });\n            span({ 'aria-hidden': 'true' });\n          },\n        );\n      });\n    });\n  }\n}\n\nNavbar.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-navbar': Navbar;\n  }\n}\n\nexport default Navbar;\nexport type NavbarProps = InferProps<typeof Navbar>;\n", "\uFEFFimport { AeicoElement } from 'aeico';\nimport { toKebab } from './utils';\n\nconst TAG_NAME_PREFIX = 'ae';\n\n/**\n * AeicoComponent is the base class for all built-in Aeico components.\n */\nclass AeicoComponent extends AeicoElement {\n  static register(name?: string) {\n    const tagName = name || `${TAG_NAME_PREFIX}-${this.tagName || toKebab(this.name)}`;\n\n    super.register(tagName);\n  }\n}\n\nexport default AeicoComponent;\n", "export const SVG_NS = 'http://www.w3.org/2000/svg';\n\nexport function toKebab(str: string): string {\n  const cleaned = str.replace(/^[_\\d]+/, '');\n\n  return cleaned.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,4FAAAA,UAAAC,SAAA;AAAA,IAAAA,QAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA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",
+  "sources": ["css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/variables.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/color.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/navbar.css", "../src/navbar/index.ts", "../src/navbar/navbar.ts", "../src/aeico-component.ts"],
+  "sourcesContent": ["module.exports = \":root,\\n:host {\\n  --ae-font-sans-serif: system-ui, -apple-system, \\\"Segoe UI\\\", Roboto, \\\"Helvetica Neue\\\",\\n    \\\"Noto Sans\\\", \\\"Liberation Sans\\\", Arial, sans-serif,\\n    \\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\", \\\"Noto Color Emoji\\\";\\n  --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,\\n    \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace;\\n  font-family: var(--ae-font-sans-serif);\\n  --ae-blue:   #0e639c;\\n  --ae-green:  #28a745;\\n  --ae-red:    #dc3545;\\n  --ae-yellow: #ffc107;\\n  --ae-cyan:   #17a2b8;\\n  --ae-gray:   #6e6e6e;\\n  --ae-slate:  #64748b;\\n  --ae-dark:   #343a40;\\n  --ae-light:  #f8f9fa;\\n}\\n\\n:root,\\n:host {\\n  /* Blue */\\n  --ae-blue-100: color-mix(in srgb, var(--ae-blue) 20%, white);\\n  --ae-blue-200: color-mix(in srgb, var(--ae-blue) 40%, white);\\n  --ae-blue-300: color-mix(in srgb, var(--ae-blue) 60%, white);\\n  --ae-blue-400: color-mix(in srgb, var(--ae-blue) 80%, white);\\n  --ae-blue-500: var(--ae-blue);\\n  --ae-blue-600: color-mix(in srgb, var(--ae-blue) 80%, black);\\n  --ae-blue-700: color-mix(in srgb, var(--ae-blue) 60%, black);\\n  --ae-blue-800: color-mix(in srgb, var(--ae-blue) 40%, black);\\n  --ae-blue-900: color-mix(in srgb, var(--ae-blue) 20%, black);\\n\\n  /* Green */\\n  --ae-green-100: color-mix(in srgb, var(--ae-green) 20%, white);\\n  --ae-green-200: color-mix(in srgb, var(--ae-green) 40%, white);\\n  --ae-green-300: color-mix(in srgb, var(--ae-green) 60%, white);\\n  --ae-green-400: color-mix(in srgb, var(--ae-green) 80%, white);\\n  --ae-green-500: var(--ae-green);\\n  --ae-green-600: color-mix(in srgb, var(--ae-green) 80%, black);\\n  --ae-green-700: color-mix(in srgb, var(--ae-green) 60%, black);\\n  --ae-green-800: color-mix(in srgb, var(--ae-green) 40%, black);\\n  --ae-green-900: color-mix(in srgb, var(--ae-green) 20%, black);\\n\\n  /* Red */\\n  --ae-red-100: color-mix(in srgb, var(--ae-red) 20%, white);\\n  --ae-red-200: color-mix(in srgb, var(--ae-red) 40%, white);\\n  --ae-red-300: color-mix(in srgb, var(--ae-red) 60%, white);\\n  --ae-red-400: color-mix(in srgb, var(--ae-red) 80%, white);\\n  --ae-red-500: var(--ae-red);\\n  --ae-red-600: color-mix(in srgb, var(--ae-red) 80%, black);\\n  --ae-red-700: color-mix(in srgb, var(--ae-red) 60%, black);\\n  --ae-red-800: color-mix(in srgb, var(--ae-red) 40%, black);\\n  --ae-red-900: color-mix(in srgb, var(--ae-red) 20%, black);\\n\\n  /* Yellow */\\n  --ae-yellow-100: color-mix(in srgb, var(--ae-yellow) 20%, white);\\n  --ae-yellow-200: color-mix(in srgb, var(--ae-yellow) 40%, white);\\n  --ae-yellow-300: color-mix(in srgb, var(--ae-yellow) 60%, white);\\n  --ae-yellow-400: color-mix(in srgb, var(--ae-yellow) 80%, white);\\n  --ae-yellow-500: var(--ae-yellow);\\n  --ae-yellow-600: color-mix(in srgb, var(--ae-yellow) 80%, black);\\n  --ae-yellow-700: color-mix(in srgb, var(--ae-yellow) 60%, black);\\n  --ae-yellow-800: color-mix(in srgb, var(--ae-yellow) 40%, black);\\n  --ae-yellow-900: color-mix(in srgb, var(--ae-yellow) 20%, black);\\n\\n  /* Cyan */\\n  --ae-cyan-100: color-mix(in srgb, var(--ae-cyan) 20%, white);\\n  --ae-cyan-200: color-mix(in srgb, var(--ae-cyan) 40%, white);\\n  --ae-cyan-300: color-mix(in srgb, var(--ae-cyan) 60%, white);\\n  --ae-cyan-400: color-mix(in srgb, var(--ae-cyan) 80%, white);\\n  --ae-cyan-500: var(--ae-cyan);\\n  --ae-cyan-600: color-mix(in srgb, var(--ae-cyan) 80%, black);\\n  --ae-cyan-700: color-mix(in srgb, var(--ae-cyan) 60%, black);\\n  --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);\\n  --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);\\n\\n  /* Gray  (neutral - base #6e6e6e) */\\n  --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);\\n  --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);\\n  --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);\\n  --ae-gray-400: color-mix(in srgb, var(--ae-gray) 80%, white);\\n  --ae-gray-500: var(--ae-gray);\\n  --ae-gray-600: color-mix(in srgb, var(--ae-gray) 80%, black);\\n  --ae-gray-700: color-mix(in srgb, var(--ae-gray) 60%, black);\\n  --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);\\n  --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);\\n\\n  /* Slate  (blue-gray - base #64748b, used for 'secondary') */\\n  --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);\\n  --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);\\n  --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);\\n  --ae-slate-400: color-mix(in srgb, var(--ae-slate) 80%, white);\\n  --ae-slate-500: var(--ae-slate);\\n  --ae-slate-600: color-mix(in srgb, var(--ae-slate) 80%, black);\\n  --ae-slate-700: color-mix(in srgb, var(--ae-slate) 60%, black);\\n  --ae-slate-800: color-mix(in srgb, var(--ae-slate) 40%, black);\\n  --ae-slate-900: color-mix(in srgb, var(--ae-slate) 20%, black);\\n\\n  /* Dark  (base #343a40) */\\n  --ae-dark-100: color-mix(in srgb, var(--ae-dark) 20%, white);\\n  --ae-dark-200: color-mix(in srgb, var(--ae-dark) 40%, white);\\n  --ae-dark-300: color-mix(in srgb, var(--ae-dark) 60%, white);\\n  --ae-dark-400: color-mix(in srgb, var(--ae-dark) 80%, white);\\n  --ae-dark-500: var(--ae-dark);\\n  --ae-dark-600: color-mix(in srgb, var(--ae-dark) 80%, black);\\n  --ae-dark-700: color-mix(in srgb, var(--ae-dark) 60%, black);\\n  --ae-dark-800: color-mix(in srgb, var(--ae-dark) 40%, black);\\n  --ae-dark-900: color-mix(in srgb, var(--ae-dark) 20%, black);\\n\\n  /* Light  (base #f8f9fa) */\\n  --ae-light-100: color-mix(in srgb, var(--ae-light) 20%, white);\\n  --ae-light-200: color-mix(in srgb, var(--ae-light) 40%, white);\\n  --ae-light-300: color-mix(in srgb, var(--ae-light) 60%, white);\\n  --ae-light-400: color-mix(in srgb, var(--ae-light) 80%, white);\\n  --ae-light-500: var(--ae-light);\\n  --ae-light-600: color-mix(in srgb, var(--ae-light) 80%, black);\\n  --ae-light-700: color-mix(in srgb, var(--ae-light) 60%, black);\\n  --ae-light-800: color-mix(in srgb, var(--ae-light) 40%, black);\\n  --ae-light-900: color-mix(in srgb, var(--ae-light) 20%, black);\\n}\\n\\n:root,\\n:host {\\n  /* Hover / active mix (light default - overridden in \u00A7 6 dark) */\\n  --ae-color-mix-hover:  black 10%;\\n  --ae-color-mix-active: black 20%;\\n\\n  /* Primary (Blue) */\\n  --ae-color-primary:          var(--ae-blue-500);\\n  --ae-color-primary-hover:    color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-hover));\\n  --ae-color-primary-active:   color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-active));\\n  --ae-color-primary-disabled: color-mix(in srgb, var(--ae-blue) 50%, var(--ae-gray-500));\\n\\n  /* Success (Green) */\\n  --ae-color-success:          var(--ae-green-500);\\n  --ae-color-success-hover:    color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-hover));\\n  --ae-color-success-active:   color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-active));\\n  --ae-color-success-disabled: color-mix(in srgb, var(--ae-green) 50%, var(--ae-gray-500));\\n\\n  /* Danger (Red) */\\n  --ae-color-danger:           var(--ae-red-500);\\n  --ae-color-danger-hover:     color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-hover));\\n  --ae-color-danger-active:    color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-active));\\n  --ae-color-danger-disabled:  color-mix(in srgb, var(--ae-red) 50%, var(--ae-gray-500));\\n\\n  /* Warning (Yellow) */\\n  --ae-color-warning:          var(--ae-yellow-500);\\n  --ae-color-warning-hover:    color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-hover));\\n  --ae-color-warning-active:   color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-active));\\n  --ae-color-warning-disabled: color-mix(in srgb, var(--ae-yellow) 50%, var(--ae-gray-500));\\n\\n  /* Info (Cyan) */\\n  --ae-color-info:             var(--ae-cyan-500);\\n  --ae-color-info-hover:       color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-hover));\\n  --ae-color-info-active:      color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));\\n  --ae-color-info-disabled:    color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));\\n\\n  /* Secondary (Slate) - base differs per theme, overridden in \u00A7 6 dark */\\n  --ae-color-secondary:        var(--ae-slate-500);\\n  --ae-color-secondary-hover:  color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));\\n  --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));\\n  --ae-color-secondary-text:   var(--ae-slate-700);\\n}\\n\\n\\n.theme-light,\\n:root[theme=\\\"light\\\"],\\n:host([theme=\\\"light\\\"]),\\n:host-context([theme=\\\"light\\\"]),\\n:where(:root),\\n:host {\\n  color-scheme: light;\\n\\n  /* Gray UI aliases - lighter palette steps for elements on white background */\\n  --ae-color-gray-dark:     var(--ae-gray-400);\\n  --ae-color-gray:          var(--ae-gray-300);\\n  --ae-color-gray-light:    var(--ae-gray-200);\\n  --ae-color-gray-lighter:  var(--ae-gray-100);\\n  --ae-color-gray-lightest: color-mix(in srgb, var(--ae-gray) 10%, white);\\n\\n  /* Text */\\n  --ae-color-text-main:       var(--ae-dark-700);\\n  --ae-color-text-muted:      var(--ae-gray-600);\\n  --ae-color-text-disabled:   var(--ae-gray-300);\\n  --ae-color-text-link:       var(--ae-blue-500);\\n  --ae-color-text-link-hover: var(--ae-blue-700);\\n\\n  /* Surfaces */\\n  --ae-surface-sunken:  var(--ae-light-500);\\n  --ae-surface-base:    white;\\n  --ae-surface-raised:  var(--ae-light-500);\\n  --ae-surface-overlay: white;\\n  --ae-color-overlay:   rgba(0, 0, 0, 0.4);\\n\\n  /* Borders */\\n  --ae-border-subtle:   rgba(0, 0, 0, 0.08);\\n  --ae-border-default:  rgba(0, 0, 0, 0.15);\\n  --ae-border-hover:    rgba(0, 0, 0, 0.25);\\n  --ae-border-focus:    var(--ae-color-primary);\\n  --ae-border-disabled: rgba(0, 0, 0, 0.06);\\n\\n  /* Focus ring */\\n  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.30);\\n  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);\\n\\n  /* Subtle intent tokens - light context */\\n  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.08);\\n  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.40);\\n  --ae-color-primary-text-emphasis:   var(--ae-blue-700);\\n\\n  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.08);\\n  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.40);\\n  --ae-color-success-text-emphasis:   var(--ae-green-700);\\n\\n  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.08);\\n  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.40);\\n  --ae-color-danger-text-emphasis:    var(--ae-red-700);\\n\\n  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.08);\\n  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.40);\\n  --ae-color-warning-text-emphasis:   var(--ae-yellow-700);\\n\\n  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.08);\\n  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.40);\\n  --ae-color-info-text-emphasis:      var(--ae-cyan-700);\\n\\n  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.08);\\n  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.40);\\n  --ae-color-secondary-text-emphasis: var(--ae-slate-700);\\n\\n  --ae-color-light-bg-subtle:         var(--ae-gray-100);   /* opaque on white: ~#e2e2e2 */\\n  --ae-color-light-border-subtle:     var(--ae-gray-200);   /* opaque on white: ~#c4c4c4 */\\n\\n  --ae-color-dark-bg-subtle:          var(--ae-dark-100);   /* opaque on white: ~#d6d8d9 */\\n  --ae-color-dark-border-subtle:      var(--ae-dark-300);   /* opaque on white: ~#85898c */\\n\\n  /* Component tokens - light defaults */\\n  --ae-action-btn-bg:          var(--ae-gray-200);\\n  --ae-action-btn-bg-hover:    var(--ae-color-primary);\\n  --ae-action-btn-color:       var(--ae-gray-600);\\n  --ae-action-btn-color-hover: white;\\n\\n  --ae-clear-btn-bg-hover:     var(--ae-color-danger);\\n  --ae-clear-btn-color-hover:  white;\\n\\n  --ae-reset-btn-border-radius: var(--ae-radius-xs);\\n  --ae-reset-btn-bg:            var(--ae-action-btn-bg);\\n  --ae-reset-btn-bg-hover:      var(--ae-action-btn-bg-hover);\\n  --ae-reset-btn-color:         var(--ae-action-btn-color);\\n  --ae-reset-btn-color-hover:   var(--ae-action-btn-color-hover);\\n  --ae-reset-btn-transition:    all 0.12s;\\n\\n  --ae-clear-btn-border-radius: var(--ae-radius-xs);\\n  --ae-clear-btn-bg:            var(--ae-action-btn-bg);\\n  --ae-clear-btn-color:         var(--ae-action-btn-color);\\n  --ae-clear-btn-transition:    all 0.12s;\\n}\\n\\n:root,\\n:host {\\n  --ae-size-scale: 1;\\n  --ae-size-base:  calc(1rem * var(--ae-size-scale));                    /* 16px */\\n  --ae-size-xl:    round(calc(var(--ae-size-l) * 1.125), 1px);           /* 23px */\\n  --ae-size-l:     round(calc(var(--ae-size-m) * 1.125 * 1.125), 1px);   /* 20px */\\n  --ae-size-m:     var(--ae-size-base);                                  /* 16px */\\n  --ae-size-s:     round(calc(var(--ae-size-m) / 1.125), 1px);           /* 14px */\\n  --ae-size-xs:    round(calc(var(--ae-size-s) / 1.125), 1px);           /* 12px */\\n  --ae-size-2xs:   round(calc(var(--ae-size-xs) / 1.125), 1px);          /* 11px */\\n  --ae-size-3xs:   round(calc(var(--ae-size-2xs) / 1.125), 1px);         /* 10px */\\n}\\n\\n/* Border-radius tokens - shared across all components */\\n:root,\\n:host {\\n  /**\\n   * Unified border-radius hook for all components.\\n   *\\n   *\\n   * Usage:\\n   *   :root { --ae-border-radius: 0; }       // global: all components square\\n   *   :root { --ae-border-radius: 999px; }   // global: all components pill\\n   *   ae-button { --ae-border-radius: 50%; } // scoped: only buttons circular\\n   *   .sidebar { --ae-border-radius: 8px; }  // scoped: everything inside .sidebar\\n   *\\n   * To restore a component to its own default:\\n   *   ae-card { --ae-border-radius: initial; }\\n   */\\n\\n  --ae-radius-square:  0;\\n  --ae-radius-xs:      2px;\\n  --ae-radius-sm:      4px;\\n  --ae-radius-md:      6px;\\n  --ae-radius-lg:      8px;\\n  --ae-radius-xl:      12px;\\n  --ae-radius-pill:    999px;\\n  --ae-radius-circle:  50%;\\n}\\n\\n/* Layout tokens - defined on :root so all light DOM elements can use them */\\n:root,\\n:host {\\n  --container-max-width: 1280px;\\n  --container-padding-x: 1.5rem;\\n}\\n\\n.theme-dark,\\n:root[theme=\\\"dark\\\"],\\n:host([theme=\\\"dark\\\"]),\\n:host-context([theme=\\\"dark\\\"]) {\\n  color-scheme: dark;\\n\\n  /* Hover / active - slightly gentler on dark backgrounds */\\n  --ae-color-mix-hover:  black 8%;\\n  --ae-color-mix-active: black 16%;\\n\\n  /* Gray UI aliases - darker palette steps for elements on dark background */\\n  --ae-color-gray-dark:     var(--ae-gray-800);\\n  --ae-color-gray:          var(--ae-gray-700);\\n  --ae-color-gray-light:    var(--ae-gray-600);\\n  --ae-color-gray-lighter:  var(--ae-gray-500);\\n  --ae-color-gray-lightest: var(--ae-gray-400);\\n\\n  /* Secondary - deeper base on dark background */\\n  --ae-color-secondary:      var(--ae-slate-700);\\n  --ae-color-secondary-text: var(--ae-slate-300);\\n\\n  /* Text */\\n  --ae-color-text-main:       white;\\n  --ae-color-text-muted:      var(--ae-gray-200);\\n  --ae-color-text-disabled:   var(--ae-gray-500);\\n  --ae-color-text-link:       var(--ae-blue-300);\\n  --ae-color-text-link-hover: var(--ae-blue-200);\\n\\n  /* Surfaces */\\n  --ae-surface-sunken:  var(--ae-gray-900);\\n  --ae-surface-base:    color-mix(in srgb, var(--ae-gray) 27%, black);\\n  --ae-surface-raised:  color-mix(in srgb, var(--ae-gray) 34%, black);\\n  --ae-surface-overlay: color-mix(in srgb, var(--ae-gray) 38%, black);\\n  --ae-color-overlay:   rgba(0, 0, 0, 0.6);\\n\\n  /* Borders */\\n  --ae-border-subtle:   rgba(255, 255, 255, 0.08);\\n  --ae-border-default:  rgba(255, 255, 255, 0.12);\\n  --ae-border-hover:    rgba(255, 255, 255, 0.20);\\n  --ae-border-focus:    var(--ae-color-primary);\\n  --ae-border-disabled: rgba(255, 255, 255, 0.06);\\n\\n  /* Focus ring */\\n  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.25);\\n  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);\\n\\n  /* Subtle intent tokens - dark context (more alpha, lighter text-emphasis) */\\n  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.10);\\n  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.30);\\n  --ae-color-primary-text-emphasis:   var(--ae-blue-300);\\n\\n  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.10);\\n  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.30);\\n  --ae-color-success-text-emphasis:   var(--ae-green-300);\\n\\n  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.10);\\n  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.30);\\n  --ae-color-danger-text-emphasis:    var(--ae-red-300);\\n\\n  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.10);\\n  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.30);\\n  --ae-color-warning-text-emphasis:   var(--ae-yellow-300);\\n\\n  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.10);\\n  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.30);\\n  --ae-color-info-text-emphasis:      var(--ae-cyan-300);\\n\\n  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.10);\\n  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.30);\\n  --ae-color-secondary-text-emphasis: var(--ae-slate-300);\\n\\n  --ae-color-light-bg-subtle:         rgb(from var(--ae-light) r g b / 0.20);\\n  --ae-color-light-border-subtle:     rgb(from var(--ae-light) r g b / 0.25);\\n\\n  --ae-color-dark-bg-subtle:          rgb(from var(--ae-dark) r g b / 0.30);\\n  --ae-color-dark-border-subtle:      rgb(from var(--ae-dark) r g b / 0.50);\\n\\n  /* Component tokens - dark overrides */\\n  --ae-action-btn-bg:          var(--ae-color-gray);\\n  --ae-action-btn-bg-hover:    color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));\\n  --ae-action-btn-color:       var(--ae-gray-400);\\n  --ae-action-btn-color-hover: var(--ae-cyan-300);\\n  --ae-clear-btn-bg-hover:     color-mix(in srgb, var(--ae-red) 25%, var(--ae-gray-800));\\n  --ae-clear-btn-color-hover:  var(--ae-red-300);\\n}\\n\"", "module.exports = \":host {\\n  --ae-color-solid:           var(--ae-color-gray);\\n  --ae-color-solid-hover:     color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-hover));\\n  --ae-color-solid-active:    color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-active));\\n  --ae-color-on-solid:        var(--ae-color-text-main);\\n  --ae-color-border:          var(--ae-color-gray);\\n  --ae-color-border-hover:    color-mix(in srgb, var(--ae-color-border), var(--ae-color-mix-hover));\\n  --ae-color-accent:          var(--ae-color-text-muted);\\n  --ae-color-accent-hover:    var(--ae-color-text-main);\\n  --ae-color-subtle:          var(--ae-border-subtle);\\n  --ae-color-subtle-hover:    var(--ae-border-default);\\n  --ae-color-bg-subtle:       var(--ae-border-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-text-muted);\\n  --ae-color-border-subtle:   var(--ae-border-default);\\n}\\n\\n:host([color=\\\"primary\\\"]) {\\n  --ae-color-solid:           var(--ae-color-primary);\\n  --ae-color-on-solid:        white;\\n  --ae-color-border:          var(--ae-color-primary);\\n  --ae-color-accent:          var(--ae-color-text-link);\\n  --ae-color-accent-hover:    var(--ae-color-text-link-hover);\\n  --ae-color-subtle:          var(--ae-color-primary-bg-subtle);\\n  --ae-color-subtle-hover:    rgb(from var(--ae-blue) r g b / 0.15);\\n  --ae-color-bg-subtle:       var(--ae-color-primary-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-primary-text-emphasis);\\n  --ae-color-border-subtle:   var(--ae-color-primary-border-subtle);\\n}\\n\\n:host([color=\\\"secondary\\\"]) {\\n  --ae-color-solid:           var(--ae-color-secondary);\\n  --ae-color-on-solid:        white;\\n  --ae-color-border:          var(--ae-color-secondary-hover);\\n  --ae-color-accent:          var(--ae-color-secondary-text-emphasis);\\n  --ae-color-accent-hover:    var(--ae-color-text-main);\\n  --ae-color-subtle:          rgb(from var(--ae-slate) r g b / 0.06);\\n  --ae-color-subtle-hover:    rgb(from var(--ae-slate) r g b / 0.12);\\n  --ae-color-bg-subtle:       var(--ae-color-secondary-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-secondary-text-emphasis);\\n  --ae-color-border-subtle:   var(--ae-color-secondary-border-subtle);\\n}\\n\\n:host([color=\\\"success\\\"]) {\\n  --ae-color-solid:           var(--ae-color-success);\\n  --ae-color-on-solid:        white;\\n  --ae-color-border:          var(--ae-color-success);\\n  --ae-color-accent:          var(--ae-color-success-text-emphasis);\\n  --ae-color-accent-hover:    var(--ae-color-success-hover);\\n  --ae-color-subtle:          var(--ae-color-success-bg-subtle);\\n  --ae-color-subtle-hover:    rgb(from var(--ae-green) r g b / 0.15);\\n  --ae-color-bg-subtle:       var(--ae-color-success-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-success-text-emphasis);\\n  --ae-color-border-subtle:   var(--ae-color-success-border-subtle);\\n}\\n\\n:host([color=\\\"danger\\\"]) {\\n  --ae-color-solid:           var(--ae-color-danger);\\n  --ae-color-on-solid:        white;\\n  --ae-color-border:          var(--ae-color-danger);\\n  --ae-color-accent:          var(--ae-color-danger-text-emphasis);\\n  --ae-color-accent-hover:    var(--ae-color-danger-hover);\\n  --ae-color-subtle:          var(--ae-color-danger-bg-subtle);\\n  --ae-color-subtle-hover:    rgb(from var(--ae-red) r g b / 0.15);\\n  --ae-color-bg-subtle:       var(--ae-color-danger-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-danger-text-emphasis);\\n  --ae-color-border-subtle:   var(--ae-color-danger-border-subtle);\\n}\\n\\n:host([color=\\\"warning\\\"]) {\\n  --ae-color-solid:           var(--ae-color-warning);\\n  --ae-color-on-solid:        var(--ae-gray-900);\\n  --ae-color-border:          var(--ae-color-warning);\\n  --ae-color-accent:          var(--ae-color-warning-text-emphasis);\\n  --ae-color-accent-hover:    var(--ae-color-warning-hover);\\n  --ae-color-subtle:          var(--ae-color-warning-bg-subtle);\\n  --ae-color-subtle-hover:    rgb(from var(--ae-yellow) r g b / 0.15);\\n  --ae-color-bg-subtle:       var(--ae-color-warning-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-warning-text-emphasis);\\n  --ae-color-border-subtle:   var(--ae-color-warning-border-subtle);\\n}\\n\\n:host([color=\\\"info\\\"]) {\\n  --ae-color-solid:           var(--ae-color-info);\\n  --ae-color-on-solid:        white;\\n  --ae-color-border:          var(--ae-color-info);\\n  --ae-color-accent:          var(--ae-color-info-text-emphasis);\\n  --ae-color-accent-hover:    var(--ae-color-info-hover);\\n  --ae-color-subtle:          var(--ae-color-info-bg-subtle);\\n  --ae-color-subtle-hover:    rgb(from var(--ae-cyan) r g b / 0.15);\\n  --ae-color-bg-subtle:       var(--ae-color-info-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-info-text-emphasis);\\n  --ae-color-border-subtle:   var(--ae-color-info-border-subtle);\\n}\\n\\n:host([color=\\\"light\\\"]) {\\n  --ae-color-solid:           var(--ae-light);\\n  --ae-color-on-solid:        var(--ae-gray-900);\\n  --ae-color-border:          var(--ae-border-hover);\\n  --ae-color-subtle:          var(--ae-color-light-bg-subtle);\\n  --ae-color-subtle-hover:    var(--ae-color-light-border-subtle);\\n  --ae-color-bg-subtle:       var(--ae-color-light-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-text-muted);\\n  --ae-color-border-subtle:   var(--ae-color-light-border-subtle);\\n}\\n\\n:host([color=\\\"dark\\\"]) {\\n  --ae-color-solid:           var(--ae-dark-500);\\n  --ae-color-on-solid:        white;\\n  --ae-color-border:          var(--ae-dark-500);\\n  --ae-color-accent:          var(--ae-color-text-main);\\n  --ae-color-accent-hover:    var(--ae-color-text-main);\\n  --ae-color-subtle:          var(--ae-color-dark-bg-subtle);\\n  --ae-color-subtle-hover:    var(--ae-color-dark-border-subtle);\\n  --ae-color-bg-subtle:       var(--ae-color-dark-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-text-main);\\n  --ae-color-border-subtle:   var(--ae-color-dark-border-subtle);\\n}\\n\"", "module.exports = \":host {\\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  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  --ae-navbar-radius: 0;\\n  --ae-navbar-padding-x: var(--container-padding-x, 1.5rem);\\n  --ae-navbar-gap: 0.5rem;\\n  --ae-navbar-link-color: inherit;\\n  --ae-navbar-link-font-size: inherit;\\n  --ae-navbar-link-padding-x: 0.75rem;\\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:host([appearance=\\\"block\\\"]) {\\n  --ae-navbar-link-hover-bg: var(--ae-color-bg-subtle);\\n  --ae-navbar-link-hover-color: inherit;\\n  --ae-navbar-link-radius: 0;\\n}\\n\\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  --ae-navbar-link-radius: 0;\\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[part=\\\"nav\\\"] {\\n  flex: 1 1 auto;\\n  display: flex;\\n  align-self: stretch;\\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;\\n  gap: var(--ae-navbar-start-gap, 0);\\n}\\n\\n[part=\\\"end\\\"] {\\n  align-items: center;\\n  gap: var(--ae-navbar-end-gap, 0.5rem);\\n  margin-left: auto;\\n}\\n\\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::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::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);\\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::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  [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  [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  ::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  [part=\\\"hamburger\\\"] {\\n    display: flex;\\n  }\\n\\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\"", "export { default, default as Navbar } from './navbar';\nexport type { NavbarProps } from './navbar';\nexport type { NavbarColor, NavbarAppearance } from './defines';\n", "import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css';\nimport colorCSS from '../styles/color.css';\nimport navbarStyle from '../styles/components/navbar.css';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\nimport type { NavbarColor, NavbarAppearance } from './defines';\n\n/**\n * Navbar Component\n *\n * A sticky top navigation bar with three slot regions and built-in\n * mobile hamburger collapse.\n *\n * Slots:\n * - `brand`  - leftmost area, typically a logo or site name link\n * - `start`  - main navigation links / dropdowns\n * - `end`    - right-side actions (login button, avatar, etc.)\n *\n * Slotted `<a>` elements receive default link styling controlled via\n * CSS custom properties. Mark the active link with `aria-current=\"page\"`.\n *\n * @example\n * ```html\n * <ae-navbar color=\"primary\" appearance=\"block\">\n *   <a slot=\"brand\" href=\"/\">MyApp</a>\n *   <a slot=\"start\" href=\"/\" aria-current=\"page\">Home</a>\n *   <a slot=\"start\" href=\"/docs\">Docs</a>\n *   <ae-button slot=\"end\" size=\"sm\" variant=\"outlined\">Sign in</ae-button>\n * </ae-navbar>\n * ```\n *\n * @example\n * ```css\n * /* Custom height and transparent background *\\/\n * ae-navbar {\n *   --ae-navbar-height: 4rem;\n *   --ae-navbar-bg: transparent;\n *   --ae-navbar-border-width: 0;\n *   --ae-navbar-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);\n * }\n * ```\n */\nclass Navbar extends AeicoComponent {\n  protected static styles = [styleVariables, colorCSS, navbarStyle];\n\n  /** Background color using the design-system color token set. */\n  @prop({ type: String })\n  accessor color: NavbarColor | undefined;\n\n  /** When true (default), the navbar sticks to the top of the viewport while scrolling. Set to false to let it scroll with the page. */\n  @prop({ type: Boolean })\n  accessor sticky: boolean = false;\n\n  /**\n   * Hover style preset for slotted `<a>` links.\n   * - `text`  - only the font color changes on hover (default)\n   * - `block` - a subtle filled background block appears on hover\n   *\n   * Fine-tune further with `--ae-navbar-link-hover-color` /\n   * `--ae-navbar-link-hover-bg` CSS variables.\n   */\n  @prop({ type: String })\n  accessor appearance: NavbarAppearance = 'text';\n\n  /** Whether the mobile menu is expanded. Reflects as the `open` attribute. */\n  @prop({ type: Boolean })\n  accessor open: boolean = false;\n\n  private _outsideClickHandler: ((e: MouseEvent) => void) | null = null;\n\n  connectedCallback() {\n    super.connectedCallback();\n    // Close menu when clicking outside the navbar\n    this._outsideClickHandler = (e: MouseEvent) => {\n      // Event retargeting in shadow DOM means e.target is the host element\n      // when the click originates inside the shadow root, so this check is safe.\n      if (!this.contains(e.target as Node) && !this.shadowRoot?.contains(e.target as Node)) {\n        this._closeMenu();\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  /** Toggle the mobile menu open/closed. */\n  toggleMenu(): void {\n    this.open = !this.open;\n  }\n\n  private _handleInnerClick = (e: Event) => {\n    if (!this.open) return;\n    // Close mobile menu when a slotted <a> link is clicked\n    const path = e.composedPath() as Element[];\n    if (path.some((el) => (el as HTMLElement).tagName === 'A')) {\n      this._closeMenu();\n    }\n  };\n\n  private _toggleMenu = () => {\n    this.open = !this.open;\n  };\n\n  private _closeMenu = () => {\n    if (this.open) this.open = false;\n  };\n\n  protected render() {\n    return html(({ div, nav, button, span, slot }) => {\n      div({ class: 'inner', '@click': this._handleInnerClick }, () => {\n        div({ part: 'brand' }, () => {\n          slot({ name: 'brand' });\n        });\n        nav({ part: 'nav', 'aria-label': 'Main navigation' }, () => {\n          div({ part: 'start' }, () => {\n            slot({ name: 'start' });\n          });\n          div({ part: 'end' }, () => {\n            slot({ name: 'end' });\n          });\n        });\n        button(\n          {\n            part: 'hamburger',\n            type: 'button',\n            'aria-expanded': String(this.open),\n            'aria-label': 'Toggle navigation',\n            '@click': this._toggleMenu,\n          },\n          () => {\n            span({ 'aria-hidden': 'true' });\n            span({ 'aria-hidden': 'true' });\n            span({ 'aria-hidden': 'true' });\n          },\n        );\n      });\n    });\n  }\n}\n\nNavbar.define('navbar');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-navbar': Navbar;\n  }\n}\n\nexport default Navbar;\nexport type NavbarProps = InferProps<typeof Navbar>;\n", "import { AeicoElement } from 'aeico';\n\nconst TAG_NAME_PREFIX = 'ae';\n\n/**\n * AeicoComponent is the base class for all built-in Aeico components.\n */\nclass AeicoComponent extends AeicoElement {\n  static define(name: string) {\n    const prefix = `${TAG_NAME_PREFIX}-`;\n\n    const tagName = name.startsWith(prefix) ? name : `${prefix}${name}`;\n\n    super.define(tagName);\n  }\n}\n\nexport default AeicoComponent;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,4FAAAA,UAAAC,SAAA;AAAA,IAAAA,QAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA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",
   "names": ["exports", "module", "exports", "module", "exports", "module", "import_aeico", "styleVariables", "colorCSS", "navbarStyle"]
 }