aeico-components 0.1.8 → 0.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (233) hide show
  1. package/README.md +0 -0
  2. package/dist/alert.cjs +20 -29
  3. package/dist/alert.cjs.map +3 -3
  4. package/dist/alert.js +20 -29
  5. package/dist/alert.js.map +3 -3
  6. package/dist/badge.cjs +19 -28
  7. package/dist/badge.cjs.map +3 -3
  8. package/dist/badge.js +19 -28
  9. package/dist/badge.js.map +3 -3
  10. package/dist/breadcrumb.cjs +22 -33
  11. package/dist/breadcrumb.cjs.map +3 -3
  12. package/dist/breadcrumb.js +22 -33
  13. package/dist/breadcrumb.js.map +3 -3
  14. package/dist/button-group.cjs +19 -28
  15. package/dist/button-group.cjs.map +3 -3
  16. package/dist/button-group.js +19 -28
  17. package/dist/button-group.js.map +3 -3
  18. package/dist/button.cjs +19 -29
  19. package/dist/button.cjs.map +3 -3
  20. package/dist/button.js +19 -29
  21. package/dist/button.js.map +3 -3
  22. package/dist/card.cjs +19 -29
  23. package/dist/card.cjs.map +3 -3
  24. package/dist/card.js +19 -29
  25. package/dist/card.js.map +3 -3
  26. package/dist/checkbox.cjs +21 -31
  27. package/dist/checkbox.cjs.map +3 -3
  28. package/dist/checkbox.js +21 -31
  29. package/dist/checkbox.js.map +3 -3
  30. package/dist/copy-button.cjs +25 -33
  31. package/dist/copy-button.cjs.map +2 -2
  32. package/dist/copy-button.js +25 -33
  33. package/dist/copy-button.js.map +3 -3
  34. package/dist/detail-group.cjs +19 -29
  35. package/dist/detail-group.cjs.map +3 -3
  36. package/dist/detail-group.js +19 -29
  37. package/dist/detail-group.js.map +3 -3
  38. package/dist/detail.cjs +19 -29
  39. package/dist/detail.cjs.map +3 -3
  40. package/dist/detail.js +19 -29
  41. package/dist/detail.js.map +3 -3
  42. package/dist/dialog.cjs +24 -32
  43. package/dist/dialog.cjs.map +2 -2
  44. package/dist/dialog.js +24 -32
  45. package/dist/dialog.js.map +3 -3
  46. package/dist/divider.cjs +20 -30
  47. package/dist/divider.cjs.map +3 -3
  48. package/dist/divider.js +20 -30
  49. package/dist/divider.js.map +3 -3
  50. package/dist/drawer.cjs +24 -32
  51. package/dist/drawer.cjs.map +2 -2
  52. package/dist/drawer.js +24 -32
  53. package/dist/drawer.js.map +3 -3
  54. package/dist/dropdown.cjs +31 -43
  55. package/dist/dropdown.cjs.map +3 -3
  56. package/dist/dropdown.js +31 -43
  57. package/dist/dropdown.js.map +3 -3
  58. package/dist/icon-button.cjs +25 -35
  59. package/dist/icon-button.cjs.map +3 -3
  60. package/dist/icon-button.js +25 -35
  61. package/dist/icon-button.js.map +3 -3
  62. package/dist/icon.cjs +20 -26
  63. package/dist/icon.cjs.map +2 -2
  64. package/dist/icon.js +20 -26
  65. package/dist/icon.js.map +2 -2
  66. package/dist/index.cjs +75 -113
  67. package/dist/index.cjs.map +3 -3
  68. package/dist/index.js +75 -113
  69. package/dist/index.js.map +3 -3
  70. package/dist/menu.cjs +20 -31
  71. package/dist/menu.cjs.map +3 -3
  72. package/dist/menu.js +20 -31
  73. package/dist/menu.js.map +3 -3
  74. package/dist/navbar.cjs +19 -29
  75. package/dist/navbar.cjs.map +3 -3
  76. package/dist/navbar.js +19 -29
  77. package/dist/navbar.js.map +3 -3
  78. package/dist/number-input.cjs +21 -31
  79. package/dist/number-input.cjs.map +3 -3
  80. package/dist/number-input.js +21 -31
  81. package/dist/number-input.js.map +3 -3
  82. package/dist/pagination.cjs +24 -33
  83. package/dist/pagination.cjs.map +2 -2
  84. package/dist/pagination.js +24 -33
  85. package/dist/pagination.js.map +3 -3
  86. package/dist/progress-bar.cjs +19 -29
  87. package/dist/progress-bar.cjs.map +3 -3
  88. package/dist/progress-bar.js +19 -29
  89. package/dist/progress-bar.js.map +3 -3
  90. package/dist/radio-group.cjs +24 -35
  91. package/dist/radio-group.cjs.map +3 -3
  92. package/dist/radio-group.js +24 -35
  93. package/dist/radio-group.js.map +3 -3
  94. package/dist/select.cjs +23 -34
  95. package/dist/select.cjs.map +3 -3
  96. package/dist/select.js +23 -34
  97. package/dist/select.js.map +3 -3
  98. package/dist/slider.cjs +21 -32
  99. package/dist/slider.cjs.map +3 -3
  100. package/dist/slider.js +21 -32
  101. package/dist/slider.js.map +3 -3
  102. package/dist/spinner.cjs +19 -29
  103. package/dist/spinner.cjs.map +3 -3
  104. package/dist/spinner.js +19 -29
  105. package/dist/spinner.js.map +3 -3
  106. package/dist/styles/layout.cjs +1 -1
  107. package/dist/styles/layout.js +1 -1
  108. package/dist/styles/radius.cjs +1 -1
  109. package/dist/styles/radius.js +1 -1
  110. package/dist/styles/variables.cjs +1 -1
  111. package/dist/styles/variables.js +1 -1
  112. package/dist/switch.cjs +26 -35
  113. package/dist/switch.cjs.map +3 -3
  114. package/dist/switch.js +26 -35
  115. package/dist/switch.js.map +3 -3
  116. package/dist/tabs.cjs +21 -30
  117. package/dist/tabs.cjs.map +3 -3
  118. package/dist/tabs.js +21 -30
  119. package/dist/tabs.js.map +3 -3
  120. package/dist/tag.cjs +19 -28
  121. package/dist/tag.cjs.map +3 -3
  122. package/dist/tag.js +19 -28
  123. package/dist/tag.js.map +3 -3
  124. package/dist/text-input.cjs +21 -31
  125. package/dist/text-input.cjs.map +3 -3
  126. package/dist/text-input.js +21 -31
  127. package/dist/text-input.js.map +3 -3
  128. package/dist/textarea.cjs +21 -31
  129. package/dist/textarea.cjs.map +3 -3
  130. package/dist/textarea.js +21 -31
  131. package/dist/textarea.js.map +3 -3
  132. package/dist/tooltip.cjs +19 -28
  133. package/dist/tooltip.cjs.map +3 -3
  134. package/dist/tooltip.js +19 -28
  135. package/dist/tooltip.js.map +3 -3
  136. package/dist/tree.cjs +25 -35
  137. package/dist/tree.cjs.map +3 -3
  138. package/dist/tree.js +25 -35
  139. package/dist/tree.js.map +3 -3
  140. package/dist/types/aeico-component.d.ts +1 -1
  141. package/dist/types/aeico-field.d.ts +1 -1
  142. package/dist/types/breadcrumb/breadcrumb-item.d.ts +0 -1
  143. package/dist/types/breadcrumb/breadcrumb.d.ts +2 -3
  144. package/dist/types/button-group/button-group.d.ts +1 -1
  145. package/dist/types/card/card.d.ts +0 -1
  146. package/dist/types/checkbox/checkbox.d.ts +0 -1
  147. package/dist/types/detail/detail.d.ts +0 -1
  148. package/dist/types/detail-group/detail-group.d.ts +1 -2
  149. package/dist/types/divider/divider.d.ts +0 -1
  150. package/dist/types/dropdown/dropdown-button.d.ts +4 -5
  151. package/dist/types/dropdown/dropdown-item.d.ts +3 -4
  152. package/dist/types/dropdown/dropdown.d.ts +4 -5
  153. package/dist/types/icon/icon.d.ts +0 -1
  154. package/dist/types/icon/registry.d.ts +1 -1
  155. package/dist/types/icon-button/icon-button.d.ts +0 -1
  156. package/dist/types/index.d.ts +4 -4
  157. package/dist/types/menu/menu-item.d.ts +3 -4
  158. package/dist/types/menu/menu.d.ts +3 -4
  159. package/dist/types/navbar/navbar.d.ts +5 -6
  160. package/dist/types/number-input/number-input.d.ts +0 -1
  161. package/dist/types/pagination/pagination.d.ts +0 -1
  162. package/dist/types/progress-bar/progress-bar.d.ts +0 -1
  163. package/dist/types/radio-group/radio-group.d.ts +0 -1
  164. package/dist/types/radio-group/radio.d.ts +6 -7
  165. package/dist/types/select/select-option.d.ts +0 -1
  166. package/dist/types/select/select.d.ts +0 -1
  167. package/dist/types/slider/defines.d.ts +5 -5
  168. package/dist/types/slider/slider.d.ts +0 -1
  169. package/dist/types/spinner/spinner.d.ts +1 -2
  170. package/dist/types/switch/switch.d.ts +0 -1
  171. package/dist/types/text-input/text-input.d.ts +0 -1
  172. package/dist/types/textarea/textarea.d.ts +0 -1
  173. package/dist/types/tree/tree-item.d.ts +1 -2
  174. package/dist/types/tree/tree.d.ts +0 -1
  175. package/package.json +5 -3
  176. package/src/aeico-component.ts +6 -5
  177. package/src/aeico-field.ts +2 -2
  178. package/src/alert/alert.ts +2 -2
  179. package/src/badge/badge.ts +2 -2
  180. package/src/breadcrumb/breadcrumb-item.ts +2 -4
  181. package/src/breadcrumb/breadcrumb.ts +4 -6
  182. package/src/button/button.ts +2 -2
  183. package/src/button-group/button-group.ts +3 -3
  184. package/src/card/card.ts +2 -4
  185. package/src/card/defines.ts +1 -1
  186. package/src/card/index.ts +1 -1
  187. package/src/checkbox/checkbox.ts +2 -4
  188. package/src/copy-button/copy-button.ts +1 -1
  189. package/src/detail/detail.ts +2 -4
  190. package/src/detail-group/detail-group.ts +2 -4
  191. package/src/dialog/dialog.ts +2 -2
  192. package/src/divider/divider.ts +2 -4
  193. package/src/drawer/drawer.ts +2 -2
  194. package/src/dropdown/dropdown-button.ts +6 -8
  195. package/src/dropdown/dropdown-item.ts +5 -7
  196. package/src/dropdown/dropdown.ts +7 -9
  197. package/src/icon/icon.ts +2 -4
  198. package/src/icon/registry.ts +1 -1
  199. package/src/icon-button/icon-button.ts +2 -4
  200. package/src/index.ts +4 -4
  201. package/src/menu/menu-item.ts +5 -7
  202. package/src/menu/menu.ts +4 -6
  203. package/src/navbar/navbar.ts +7 -9
  204. package/src/number-input/number-input.ts +1 -3
  205. package/src/pagination/pagination.ts +1 -3
  206. package/src/progress-bar/progress-bar.ts +1 -2
  207. package/src/radio-group/radio-group.ts +5 -7
  208. package/src/radio-group/radio.ts +8 -10
  209. package/src/select/select-option.ts +2 -4
  210. package/src/select/select.ts +4 -6
  211. package/src/slider/defines.ts +5 -5
  212. package/src/slider/slider.ts +5 -8
  213. package/src/spinner/spinner.ts +2 -4
  214. package/src/styles/components/action-button.css +1 -1
  215. package/src/styles/components/alert.css +1 -1
  216. package/src/styles/components/breadcrumb-item.css +2 -2
  217. package/src/styles/components/button.css +0 -1
  218. package/src/styles/components/divider.css +1 -1
  219. package/src/styles/components/dropdown-item.css +2 -2
  220. package/src/styles/components/dropdown.css +1 -1
  221. package/src/styles/layout.css +14 -14
  222. package/src/styles/radius.css +1 -1
  223. package/src/styles/variables.css +14 -16
  224. package/src/switch/switch.ts +2 -4
  225. package/src/tabs/tab-panel.ts +2 -2
  226. package/src/tabs/tab.ts +2 -2
  227. package/src/tabs/tabs.ts +2 -2
  228. package/src/tag/tag.ts +2 -2
  229. package/src/text-input/text-input.ts +2 -4
  230. package/src/textarea/textarea.ts +1 -3
  231. package/src/tooltip/tooltip.ts +1 -1
  232. package/src/tree/tree-item.ts +3 -5
  233. package/src/tree/tree.ts +2 -4
package/dist/navbar.js CHANGED
@@ -125,7 +125,7 @@ var variables_default = `:root,
125
125
  --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);
126
126
  --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);
127
127
 
128
- /* Gray (neutral \u2014 base #6e6e6e) */
128
+ /* Gray (neutral - base #6e6e6e) */
129
129
  --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);
130
130
  --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);
131
131
  --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);
@@ -136,7 +136,7 @@ var variables_default = `:root,
136
136
  --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);
137
137
  --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);
138
138
 
139
- /* Slate (blue-gray \u2014 base #64748b, used for 'secondary') */
139
+ /* Slate (blue-gray - base #64748b, used for 'secondary') */
140
140
  --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);
141
141
  --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);
142
142
  --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);
@@ -172,7 +172,7 @@ var variables_default = `:root,
172
172
 
173
173
  :root,
174
174
  :host {
175
- /* Hover / active mix (light default \u2014 overridden in \xA7 6 dark) */
175
+ /* Hover / active mix (light default - overridden in \xA7 6 dark) */
176
176
  --ae-color-mix-hover: black 10%;
177
177
  --ae-color-mix-active: black 20%;
178
178
 
@@ -206,7 +206,7 @@ var variables_default = `:root,
206
206
  --ae-color-info-active: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));
207
207
  --ae-color-info-disabled: color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));
208
208
 
209
- /* Secondary (Slate) \u2014 base differs per theme, overridden in \xA7 6 dark */
209
+ /* Secondary (Slate) - base differs per theme, overridden in \xA7 6 dark */
210
210
  --ae-color-secondary: var(--ae-slate-500);
211
211
  --ae-color-secondary-hover: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));
212
212
  --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));
@@ -222,7 +222,7 @@ var variables_default = `:root,
222
222
  :host {
223
223
  color-scheme: light;
224
224
 
225
- /* Gray UI aliases \u2014 lighter palette steps for elements on white background */
225
+ /* Gray UI aliases - lighter palette steps for elements on white background */
226
226
  --ae-color-gray-dark: var(--ae-gray-400);
227
227
  --ae-color-gray: var(--ae-gray-300);
228
228
  --ae-color-gray-light: var(--ae-gray-200);
@@ -254,7 +254,7 @@ var variables_default = `:root,
254
254
  --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.30);
255
255
  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);
256
256
 
257
- /* Subtle intent tokens \u2014 light context */
257
+ /* Subtle intent tokens - light context */
258
258
  --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.08);
259
259
  --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.40);
260
260
  --ae-color-primary-text-emphasis: var(--ae-blue-700);
@@ -285,7 +285,7 @@ var variables_default = `:root,
285
285
  --ae-color-dark-bg-subtle: var(--ae-dark-100); /* opaque on white: ~#d6d8d9 */
286
286
  --ae-color-dark-border-subtle: var(--ae-dark-300); /* opaque on white: ~#85898c */
287
287
 
288
- /* Component tokens \u2014 light defaults */
288
+ /* Component tokens - light defaults */
289
289
  --ae-action-btn-bg: var(--ae-gray-200);
290
290
  --ae-action-btn-bg-hover: var(--ae-color-primary);
291
291
  --ae-action-btn-color: var(--ae-gray-600);
@@ -320,14 +320,12 @@ var variables_default = `:root,
320
320
  --ae-size-3xs: round(calc(var(--ae-size-2xs) / 1.125), 1px); /* 10px */
321
321
  }
322
322
 
323
- /* Border-radius tokens \u2014 shared across all components */
323
+ /* Border-radius tokens - shared across all components */
324
324
  :root,
325
325
  :host {
326
326
  /**
327
327
  * Unified border-radius hook for all components.
328
328
  *
329
- * Not set by default \u2014 each component falls back to its own --ae-radius-*
330
- * token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).
331
329
  *
332
330
  * Usage:
333
331
  * :root { --ae-border-radius: 0; } // global: all components square
@@ -349,7 +347,7 @@ var variables_default = `:root,
349
347
  --ae-radius-circle: 50%;
350
348
  }
351
349
 
352
- /* Layout tokens \u2014 defined on :root so all light DOM elements can use them */
350
+ /* Layout tokens - defined on :root so all light DOM elements can use them */
353
351
  :root,
354
352
  :host {
355
353
  --container-max-width: 1280px;
@@ -362,18 +360,18 @@ var variables_default = `:root,
362
360
  :host-context([theme="dark"]) {
363
361
  color-scheme: dark;
364
362
 
365
- /* Hover / active \u2014 slightly gentler on dark backgrounds */
363
+ /* Hover / active - slightly gentler on dark backgrounds */
366
364
  --ae-color-mix-hover: black 8%;
367
365
  --ae-color-mix-active: black 16%;
368
366
 
369
- /* Gray UI aliases \u2014 darker palette steps for elements on dark background */
367
+ /* Gray UI aliases - darker palette steps for elements on dark background */
370
368
  --ae-color-gray-dark: var(--ae-gray-800);
371
369
  --ae-color-gray: var(--ae-gray-700);
372
370
  --ae-color-gray-light: var(--ae-gray-600);
373
371
  --ae-color-gray-lighter: var(--ae-gray-500);
374
372
  --ae-color-gray-lightest: var(--ae-gray-400);
375
373
 
376
- /* Secondary \u2014 deeper base on dark background */
374
+ /* Secondary - deeper base on dark background */
377
375
  --ae-color-secondary: var(--ae-slate-700);
378
376
  --ae-color-secondary-text: var(--ae-slate-300);
379
377
 
@@ -402,7 +400,7 @@ var variables_default = `:root,
402
400
  --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.25);
403
401
  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);
404
402
 
405
- /* Subtle intent tokens \u2014 dark context (more alpha, lighter text-emphasis) */
403
+ /* Subtle intent tokens - dark context (more alpha, lighter text-emphasis) */
406
404
  --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.10);
407
405
  --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.30);
408
406
  --ae-color-primary-text-emphasis: var(--ae-blue-300);
@@ -433,7 +431,7 @@ var variables_default = `:root,
433
431
  --ae-color-dark-bg-subtle: rgb(from var(--ae-dark) r g b / 0.30);
434
432
  --ae-color-dark-border-subtle: rgb(from var(--ae-dark) r g b / 0.50);
435
433
 
436
- /* Component tokens \u2014 dark overrides */
434
+ /* Component tokens - dark overrides */
437
435
  --ae-action-btn-bg: var(--ae-color-gray);
438
436
  --ae-action-btn-bg-hover: color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));
439
437
  --ae-action-btn-color: var(--ae-gray-400);
@@ -451,19 +449,12 @@ var navbar_default = ':host {\n display: block;\n position: static;\n top: au
451
449
 
452
450
  // src/aeico-component.ts
453
451
  import { AeicoElement } from "aeico";
454
-
455
- // src/utils.ts
456
- function toKebab(str) {
457
- const cleaned = str.replace(/^[_\d]+/, "");
458
- return cleaned.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
459
- }
460
-
461
- // src/aeico-component.ts
462
452
  var TAG_NAME_PREFIX = "ae";
463
453
  var AeicoComponent = class extends AeicoElement {
464
- static register(name) {
465
- const tagName = name || `${TAG_NAME_PREFIX}-${this.tagName || toKebab(this.name)}`;
466
- super.register(tagName);
454
+ static define(name) {
455
+ const prefix = `${TAG_NAME_PREFIX}-`;
456
+ const tagName = name.startsWith(prefix) ? name : `${prefix}${name}`;
457
+ super.define(tagName);
467
458
  }
468
459
  };
469
460
  var aeico_component_default = AeicoComponent;
@@ -556,9 +547,8 @@ __decorateElement(_init, 4, "sticky", _sticky_dec, Navbar, _sticky);
556
547
  __decorateElement(_init, 4, "appearance", _appearance_dec, Navbar, _appearance);
557
548
  __decorateElement(_init, 4, "open", _open_dec, Navbar, _open);
558
549
  __decoratorMetadata(_init, Navbar);
559
- __publicField(Navbar, "tagName", "navbar");
560
550
  __publicField(Navbar, "styles", [variables_default, color_default, navbar_default]);
561
- Navbar.register();
551
+ Navbar.define("navbar");
562
552
  var navbar_default2 = Navbar;
563
553
  export {
564
554
  navbar_default2 as Navbar,
package/dist/navbar.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
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/aeico-component.ts", "../src/utils.ts", "../src/navbar/navbar.ts"],
4
- "sourcesContent": ["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\"", "export default \":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\"", "export default \":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\"", "\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", "\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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,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;AAA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",
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/aeico-component.ts", "../src/navbar/navbar.ts"],
4
+ "sourcesContent": ["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\"", "export default \":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\"", "export default \":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\"", "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 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"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,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;AAA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",
6
6
  "names": ["navbar_default"]
7
7
  }
package/dist/number-input.cjs CHANGED
@@ -113,7 +113,7 @@ var require_variables = __commonJS({
113
113
  --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);
114
114
  --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);
115
115
 
116
- /* Gray (neutral \u2014 base #6e6e6e) */
116
+ /* Gray (neutral - base #6e6e6e) */
117
117
  --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);
118
118
  --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);
119
119
  --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);
@@ -124,7 +124,7 @@ var require_variables = __commonJS({
124
124
  --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);
125
125
  --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);
126
126
 
127
- /* Slate (blue-gray \u2014 base #64748b, used for 'secondary') */
127
+ /* Slate (blue-gray - base #64748b, used for 'secondary') */
128
128
  --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);
129
129
  --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);
130
130
  --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);
@@ -160,7 +160,7 @@ var require_variables = __commonJS({
160
160
 
161
161
  :root,
162
162
  :host {
163
- /* Hover / active mix (light default \u2014 overridden in \xA7 6 dark) */
163
+ /* Hover / active mix (light default - overridden in \xA7 6 dark) */
164
164
  --ae-color-mix-hover: black 10%;
165
165
  --ae-color-mix-active: black 20%;
166
166
 
@@ -194,7 +194,7 @@ var require_variables = __commonJS({
194
194
  --ae-color-info-active: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));
195
195
  --ae-color-info-disabled: color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));
196
196
 
197
- /* Secondary (Slate) \u2014 base differs per theme, overridden in \xA7 6 dark */
197
+ /* Secondary (Slate) - base differs per theme, overridden in \xA7 6 dark */
198
198
  --ae-color-secondary: var(--ae-slate-500);
199
199
  --ae-color-secondary-hover: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));
200
200
  --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));
@@ -210,7 +210,7 @@ var require_variables = __commonJS({
210
210
  :host {
211
211
  color-scheme: light;
212
212
 
213
- /* Gray UI aliases \u2014 lighter palette steps for elements on white background */
213
+ /* Gray UI aliases - lighter palette steps for elements on white background */
214
214
  --ae-color-gray-dark: var(--ae-gray-400);
215
215
  --ae-color-gray: var(--ae-gray-300);
216
216
  --ae-color-gray-light: var(--ae-gray-200);
@@ -242,7 +242,7 @@ var require_variables = __commonJS({
242
242
  --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.30);
243
243
  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);
244
244
 
245
- /* Subtle intent tokens \u2014 light context */
245
+ /* Subtle intent tokens - light context */
246
246
  --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.08);
247
247
  --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.40);
248
248
  --ae-color-primary-text-emphasis: var(--ae-blue-700);
@@ -273,7 +273,7 @@ var require_variables = __commonJS({
273
273
  --ae-color-dark-bg-subtle: var(--ae-dark-100); /* opaque on white: ~#d6d8d9 */
274
274
  --ae-color-dark-border-subtle: var(--ae-dark-300); /* opaque on white: ~#85898c */
275
275
 
276
- /* Component tokens \u2014 light defaults */
276
+ /* Component tokens - light defaults */
277
277
  --ae-action-btn-bg: var(--ae-gray-200);
278
278
  --ae-action-btn-bg-hover: var(--ae-color-primary);
279
279
  --ae-action-btn-color: var(--ae-gray-600);
@@ -308,14 +308,12 @@ var require_variables = __commonJS({
308
308
  --ae-size-3xs: round(calc(var(--ae-size-2xs) / 1.125), 1px); /* 10px */
309
309
  }
310
310
 
311
- /* Border-radius tokens \u2014 shared across all components */
311
+ /* Border-radius tokens - shared across all components */
312
312
  :root,
313
313
  :host {
314
314
  /**
315
315
  * Unified border-radius hook for all components.
316
316
  *
317
- * Not set by default \u2014 each component falls back to its own --ae-radius-*
318
- * token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).
319
317
  *
320
318
  * Usage:
321
319
  * :root { --ae-border-radius: 0; } // global: all components square
@@ -337,7 +335,7 @@ var require_variables = __commonJS({
337
335
  --ae-radius-circle: 50%;
338
336
  }
339
337
 
340
- /* Layout tokens \u2014 defined on :root so all light DOM elements can use them */
338
+ /* Layout tokens - defined on :root so all light DOM elements can use them */
341
339
  :root,
342
340
  :host {
343
341
  --container-max-width: 1280px;
@@ -350,18 +348,18 @@ var require_variables = __commonJS({
350
348
  :host-context([theme="dark"]) {
351
349
  color-scheme: dark;
352
350
 
353
- /* Hover / active \u2014 slightly gentler on dark backgrounds */
351
+ /* Hover / active - slightly gentler on dark backgrounds */
354
352
  --ae-color-mix-hover: black 8%;
355
353
  --ae-color-mix-active: black 16%;
356
354
 
357
- /* Gray UI aliases \u2014 darker palette steps for elements on dark background */
355
+ /* Gray UI aliases - darker palette steps for elements on dark background */
358
356
  --ae-color-gray-dark: var(--ae-gray-800);
359
357
  --ae-color-gray: var(--ae-gray-700);
360
358
  --ae-color-gray-light: var(--ae-gray-600);
361
359
  --ae-color-gray-lighter: var(--ae-gray-500);
362
360
  --ae-color-gray-lightest: var(--ae-gray-400);
363
361
 
364
- /* Secondary \u2014 deeper base on dark background */
362
+ /* Secondary - deeper base on dark background */
365
363
  --ae-color-secondary: var(--ae-slate-700);
366
364
  --ae-color-secondary-text: var(--ae-slate-300);
367
365
 
@@ -390,7 +388,7 @@ var require_variables = __commonJS({
390
388
  --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.25);
391
389
  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);
392
390
 
393
- /* Subtle intent tokens \u2014 dark context (more alpha, lighter text-emphasis) */
391
+ /* Subtle intent tokens - dark context (more alpha, lighter text-emphasis) */
394
392
  --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.10);
395
393
  --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.30);
396
394
  --ae-color-primary-text-emphasis: var(--ae-blue-300);
@@ -421,7 +419,7 @@ var require_variables = __commonJS({
421
419
  --ae-color-dark-bg-subtle: rgb(from var(--ae-dark) r g b / 0.30);
422
420
  --ae-color-dark-border-subtle: rgb(from var(--ae-dark) r g b / 0.50);
423
421
 
424
- /* Component tokens \u2014 dark overrides */
422
+ /* Component tokens - dark overrides */
425
423
  --ae-action-btn-bg: var(--ae-color-gray);
426
424
  --ae-action-btn-bg-hover: color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));
427
425
  --ae-action-btn-color: var(--ae-gray-400);
@@ -450,7 +448,7 @@ var require_field_label = __commonJS({
450
448
  // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/action-button.css
451
449
  var require_action_button = __commonJS({
452
450
  "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/action-button.css"(exports2, module2) {
453
- module2.exports = "/* Action button base styles \u2014 shared by clear-btn and reset-btn (standalone mode) */\n.clear-btn:not(.action-btn),\n.reset-btn:not(.action-btn) {\n width: 1.333em;\n height: 1.333em;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n line-height: 1;\n}\n\n.clear-btn:not(.action-btn) {\n border-radius: var(--ae-clear-btn-border-radius);\n background: var(--ae-clear-btn-bg);\n color: var(--ae-clear-btn-color);\n transition: var(--ae-clear-btn-transition);\n}\n\n.reset-btn:not(.action-btn) {\n border-radius: var(--ae-reset-btn-border-radius);\n background: var(--ae-reset-btn-bg);\n color: var(--ae-reset-btn-color);\n transition: var(--ae-reset-btn-transition);\n}\n\n.clear-btn:not(.action-btn):hover {\n background: var(--ae-clear-btn-bg-hover);\n color: var(--ae-clear-btn-color-hover);\n}\n\n.reset-btn:not(.action-btn):hover {\n background: var(--ae-reset-btn-bg-hover);\n color: var(--ae-reset-btn-color-hover);\n}\n";
451
+ module2.exports = "/* Action button base styles - shared by clear-btn and reset-btn (standalone mode) */\n.clear-btn:not(.action-btn),\n.reset-btn:not(.action-btn) {\n width: 1.333em;\n height: 1.333em;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n line-height: 1;\n}\n\n.clear-btn:not(.action-btn) {\n border-radius: var(--ae-clear-btn-border-radius);\n background: var(--ae-clear-btn-bg);\n color: var(--ae-clear-btn-color);\n transition: var(--ae-clear-btn-transition);\n}\n\n.reset-btn:not(.action-btn) {\n border-radius: var(--ae-reset-btn-border-radius);\n background: var(--ae-reset-btn-bg);\n color: var(--ae-reset-btn-color);\n transition: var(--ae-reset-btn-transition);\n}\n\n.clear-btn:not(.action-btn):hover {\n background: var(--ae-clear-btn-bg-hover);\n color: var(--ae-clear-btn-color-hover);\n}\n\n.reset-btn:not(.action-btn):hover {\n background: var(--ae-reset-btn-bg-hover);\n color: var(--ae-reset-btn-color-hover);\n}\n";
454
452
  }
455
453
  });
456
454
 
@@ -474,19 +472,12 @@ var import_aeico2 = require("aeico");
474
472
 
475
473
  // src/aeico-component.ts
476
474
  var import_aeico = require("aeico");
477
-
478
- // src/utils.ts
479
- function toKebab(str) {
480
- const cleaned = str.replace(/^[_\d]+/, "");
481
- return cleaned.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
482
- }
483
-
484
- // src/aeico-component.ts
485
475
  var TAG_NAME_PREFIX = "ae";
486
476
  var AeicoComponent = class extends import_aeico.AeicoElement {
487
- static register(name) {
488
- const tagName = name || `${TAG_NAME_PREFIX}-${this.tagName || toKebab(this.name)}`;
489
- super.register(tagName);
477
+ static define(name) {
478
+ const prefix = `${TAG_NAME_PREFIX}-`;
479
+ const tagName = name.startsWith(prefix) ? name : `${prefix}${name}`;
480
+ super.define(tagName);
490
481
  }
491
482
  };
492
483
  var aeico_component_default = AeicoComponent;
@@ -641,7 +632,7 @@ var AeicoField = class _AeicoField extends aeico_component_default {
641
632
  }
642
633
  }
643
634
  /**
644
- * Watcher for error property — syncs aria-invalid on the field element
635
+ * Watcher for error property - syncs aria-invalid on the field element
645
636
  */
646
637
  onErrorChanged(newValue) {
647
638
  if (this.fieldElement) {
@@ -785,7 +776,6 @@ var import_action_button = __toESM(require_action_button(), 1);
785
776
  var import_number_input = __toESM(require_number_input(), 1);
786
777
  var NumberInput = class extends aeico_field_default {
787
778
  fieldElement = null;
788
- static tagName = "number-input";
789
779
  static props = {
790
780
  placeholder: { type: String },
791
781
  min: { type: Number },
@@ -878,7 +868,7 @@ var NumberInput = class extends aeico_field_default {
878
868
  return { value, oldValue, action };
879
869
  }
880
870
  };
881
- NumberInput.register();
871
+ NumberInput.define("number-input");
882
872
  var number_input_default = NumberInput;
883
873
  // Annotate the CommonJS export names for ESM import in node:
884
874
  0 && (module.exports = {