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/button.cjs CHANGED
@@ -158,7 +158,7 @@ var require_variables = __commonJS({
158
158
  --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);
159
159
  --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);
160
160
 
161
- /* Gray (neutral \u2014 base #6e6e6e) */
161
+ /* Gray (neutral - base #6e6e6e) */
162
162
  --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);
163
163
  --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);
164
164
  --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);
@@ -169,7 +169,7 @@ var require_variables = __commonJS({
169
169
  --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);
170
170
  --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);
171
171
 
172
- /* Slate (blue-gray \u2014 base #64748b, used for 'secondary') */
172
+ /* Slate (blue-gray - base #64748b, used for 'secondary') */
173
173
  --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);
174
174
  --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);
175
175
  --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);
@@ -205,7 +205,7 @@ var require_variables = __commonJS({
205
205
 
206
206
  :root,
207
207
  :host {
208
- /* Hover / active mix (light default \u2014 overridden in \xA7 6 dark) */
208
+ /* Hover / active mix (light default - overridden in \xA7 6 dark) */
209
209
  --ae-color-mix-hover: black 10%;
210
210
  --ae-color-mix-active: black 20%;
211
211
 
@@ -239,7 +239,7 @@ var require_variables = __commonJS({
239
239
  --ae-color-info-active: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));
240
240
  --ae-color-info-disabled: color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));
241
241
 
242
- /* Secondary (Slate) \u2014 base differs per theme, overridden in \xA7 6 dark */
242
+ /* Secondary (Slate) - base differs per theme, overridden in \xA7 6 dark */
243
243
  --ae-color-secondary: var(--ae-slate-500);
244
244
  --ae-color-secondary-hover: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));
245
245
  --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));
@@ -255,7 +255,7 @@ var require_variables = __commonJS({
255
255
  :host {
256
256
  color-scheme: light;
257
257
 
258
- /* Gray UI aliases \u2014 lighter palette steps for elements on white background */
258
+ /* Gray UI aliases - lighter palette steps for elements on white background */
259
259
  --ae-color-gray-dark: var(--ae-gray-400);
260
260
  --ae-color-gray: var(--ae-gray-300);
261
261
  --ae-color-gray-light: var(--ae-gray-200);
@@ -287,7 +287,7 @@ var require_variables = __commonJS({
287
287
  --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.30);
288
288
  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);
289
289
 
290
- /* Subtle intent tokens \u2014 light context */
290
+ /* Subtle intent tokens - light context */
291
291
  --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.08);
292
292
  --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.40);
293
293
  --ae-color-primary-text-emphasis: var(--ae-blue-700);
@@ -318,7 +318,7 @@ var require_variables = __commonJS({
318
318
  --ae-color-dark-bg-subtle: var(--ae-dark-100); /* opaque on white: ~#d6d8d9 */
319
319
  --ae-color-dark-border-subtle: var(--ae-dark-300); /* opaque on white: ~#85898c */
320
320
 
321
- /* Component tokens \u2014 light defaults */
321
+ /* Component tokens - light defaults */
322
322
  --ae-action-btn-bg: var(--ae-gray-200);
323
323
  --ae-action-btn-bg-hover: var(--ae-color-primary);
324
324
  --ae-action-btn-color: var(--ae-gray-600);
@@ -353,14 +353,12 @@ var require_variables = __commonJS({
353
353
  --ae-size-3xs: round(calc(var(--ae-size-2xs) / 1.125), 1px); /* 10px */
354
354
  }
355
355
 
356
- /* Border-radius tokens \u2014 shared across all components */
356
+ /* Border-radius tokens - shared across all components */
357
357
  :root,
358
358
  :host {
359
359
  /**
360
360
  * Unified border-radius hook for all components.
361
361
  *
362
- * Not set by default \u2014 each component falls back to its own --ae-radius-*
363
- * token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).
364
362
  *
365
363
  * Usage:
366
364
  * :root { --ae-border-radius: 0; } // global: all components square
@@ -382,7 +380,7 @@ var require_variables = __commonJS({
382
380
  --ae-radius-circle: 50%;
383
381
  }
384
382
 
385
- /* Layout tokens \u2014 defined on :root so all light DOM elements can use them */
383
+ /* Layout tokens - defined on :root so all light DOM elements can use them */
386
384
  :root,
387
385
  :host {
388
386
  --container-max-width: 1280px;
@@ -395,18 +393,18 @@ var require_variables = __commonJS({
395
393
  :host-context([theme="dark"]) {
396
394
  color-scheme: dark;
397
395
 
398
- /* Hover / active \u2014 slightly gentler on dark backgrounds */
396
+ /* Hover / active - slightly gentler on dark backgrounds */
399
397
  --ae-color-mix-hover: black 8%;
400
398
  --ae-color-mix-active: black 16%;
401
399
 
402
- /* Gray UI aliases \u2014 darker palette steps for elements on dark background */
400
+ /* Gray UI aliases - darker palette steps for elements on dark background */
403
401
  --ae-color-gray-dark: var(--ae-gray-800);
404
402
  --ae-color-gray: var(--ae-gray-700);
405
403
  --ae-color-gray-light: var(--ae-gray-600);
406
404
  --ae-color-gray-lighter: var(--ae-gray-500);
407
405
  --ae-color-gray-lightest: var(--ae-gray-400);
408
406
 
409
- /* Secondary \u2014 deeper base on dark background */
407
+ /* Secondary - deeper base on dark background */
410
408
  --ae-color-secondary: var(--ae-slate-700);
411
409
  --ae-color-secondary-text: var(--ae-slate-300);
412
410
 
@@ -435,7 +433,7 @@ var require_variables = __commonJS({
435
433
  --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.25);
436
434
  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);
437
435
 
438
- /* Subtle intent tokens \u2014 dark context (more alpha, lighter text-emphasis) */
436
+ /* Subtle intent tokens - dark context (more alpha, lighter text-emphasis) */
439
437
  --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.10);
440
438
  --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.30);
441
439
  --ae-color-primary-text-emphasis: var(--ae-blue-300);
@@ -466,7 +464,7 @@ var require_variables = __commonJS({
466
464
  --ae-color-dark-bg-subtle: rgb(from var(--ae-dark) r g b / 0.30);
467
465
  --ae-color-dark-border-subtle: rgb(from var(--ae-dark) r g b / 0.50);
468
466
 
469
- /* Component tokens \u2014 dark overrides */
467
+ /* Component tokens - dark overrides */
470
468
  --ae-action-btn-bg: var(--ae-color-gray);
471
469
  --ae-action-btn-bg-hover: color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));
472
470
  --ae-action-btn-color: var(--ae-gray-400);
@@ -613,7 +611,6 @@ button:disabled {
613
611
  background: var(--ae-color-subtle-hover);
614
612
  }
615
613
 
616
- /* Icon-only: single ae-icon child \u2192 square compact layout */
617
614
  :host([icon-only]) {
618
615
  display: inline-flex;
619
616
  }
@@ -717,19 +714,12 @@ var import_button = __toESM(require_button(), 1);
717
714
 
718
715
  // src/aeico-component.ts
719
716
  var import_aeico = require("aeico");
720
-
721
- // src/utils.ts
722
- function toKebab(str) {
723
- const cleaned = str.replace(/^[_\d]+/, "");
724
- return cleaned.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
725
- }
726
-
727
- // src/aeico-component.ts
728
717
  var TAG_NAME_PREFIX = "ae";
729
718
  var AeicoComponent = class extends import_aeico.AeicoElement {
730
- static register(name) {
731
- const tagName = name || `${TAG_NAME_PREFIX}-${this.tagName || toKebab(this.name)}`;
732
- super.register(tagName);
719
+ static define(name) {
720
+ const prefix = `${TAG_NAME_PREFIX}-`;
721
+ const tagName = name.startsWith(prefix) ? name : `${prefix}${name}`;
722
+ super.define(tagName);
733
723
  }
734
724
  };
735
725
  var aeico_component_default = AeicoComponent;
@@ -827,7 +817,7 @@ __decorateElement(_init, 5, "active", _active_dec, Button);
827
817
  __decorateElement(_init, 5, "block", _block_dec, Button);
828
818
  __decoratorMetadata(_init, Button);
829
819
  __publicField(Button, "styles", [import_variables.default, import_size.default, import_color.default, import_button.default]);
830
- Button.register();
820
+ Button.define("button");
831
821
  var button_default = Button;
832
822
  // Annotate the CommonJS export names for ESM import in node:
833
823
  0 && (module.exports = {
package/dist/button.cjs.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/size.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/button.css", "../src/button/index.ts", "../src/button/button.ts", "../src/aeico-component.ts", "../src/utils.ts"],
4
- "sourcesContent": ["module.exports = \":root,\\n:host {\\n --ae-font-sans-serif: system-ui, -apple-system, \\\"Segoe UI\\\", Roboto, \\\"Helvetica Neue\\\",\\n \\\"Noto Sans\\\", \\\"Liberation Sans\\\", Arial, sans-serif,\\n \\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\", \\\"Noto Color Emoji\\\";\\n --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,\\n \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace;\\n font-family: var(--ae-font-sans-serif);\\n --ae-blue: #0e639c;\\n --ae-green: #28a745;\\n --ae-red: #dc3545;\\n --ae-yellow: #ffc107;\\n --ae-cyan: #17a2b8;\\n --ae-gray: #6e6e6e;\\n --ae-slate: #64748b;\\n --ae-dark: #343a40;\\n --ae-light: #f8f9fa;\\n}\\n\\n:root,\\n:host {\\n /* Blue */\\n --ae-blue-100: color-mix(in srgb, var(--ae-blue) 20%, white);\\n --ae-blue-200: color-mix(in srgb, var(--ae-blue) 40%, white);\\n --ae-blue-300: color-mix(in srgb, var(--ae-blue) 60%, white);\\n --ae-blue-400: color-mix(in srgb, var(--ae-blue) 80%, white);\\n --ae-blue-500: var(--ae-blue);\\n --ae-blue-600: color-mix(in srgb, var(--ae-blue) 80%, black);\\n --ae-blue-700: color-mix(in srgb, var(--ae-blue) 60%, black);\\n --ae-blue-800: color-mix(in srgb, var(--ae-blue) 40%, black);\\n --ae-blue-900: color-mix(in srgb, var(--ae-blue) 20%, black);\\n\\n /* Green */\\n --ae-green-100: color-mix(in srgb, var(--ae-green) 20%, white);\\n --ae-green-200: color-mix(in srgb, var(--ae-green) 40%, white);\\n --ae-green-300: color-mix(in srgb, var(--ae-green) 60%, white);\\n --ae-green-400: color-mix(in srgb, var(--ae-green) 80%, white);\\n --ae-green-500: var(--ae-green);\\n --ae-green-600: color-mix(in srgb, var(--ae-green) 80%, black);\\n --ae-green-700: color-mix(in srgb, var(--ae-green) 60%, black);\\n --ae-green-800: color-mix(in srgb, var(--ae-green) 40%, black);\\n --ae-green-900: color-mix(in srgb, var(--ae-green) 20%, black);\\n\\n /* Red */\\n --ae-red-100: color-mix(in srgb, var(--ae-red) 20%, white);\\n --ae-red-200: color-mix(in srgb, var(--ae-red) 40%, white);\\n --ae-red-300: color-mix(in srgb, var(--ae-red) 60%, white);\\n --ae-red-400: color-mix(in srgb, var(--ae-red) 80%, white);\\n --ae-red-500: var(--ae-red);\\n --ae-red-600: color-mix(in srgb, var(--ae-red) 80%, black);\\n --ae-red-700: color-mix(in srgb, var(--ae-red) 60%, black);\\n --ae-red-800: color-mix(in srgb, var(--ae-red) 40%, black);\\n --ae-red-900: color-mix(in srgb, var(--ae-red) 20%, black);\\n\\n /* Yellow */\\n --ae-yellow-100: color-mix(in srgb, var(--ae-yellow) 20%, white);\\n --ae-yellow-200: color-mix(in srgb, var(--ae-yellow) 40%, white);\\n --ae-yellow-300: color-mix(in srgb, var(--ae-yellow) 60%, white);\\n --ae-yellow-400: color-mix(in srgb, var(--ae-yellow) 80%, white);\\n --ae-yellow-500: var(--ae-yellow);\\n --ae-yellow-600: color-mix(in srgb, var(--ae-yellow) 80%, black);\\n --ae-yellow-700: color-mix(in srgb, var(--ae-yellow) 60%, black);\\n --ae-yellow-800: color-mix(in srgb, var(--ae-yellow) 40%, black);\\n --ae-yellow-900: color-mix(in srgb, var(--ae-yellow) 20%, black);\\n\\n /* Cyan */\\n --ae-cyan-100: color-mix(in srgb, var(--ae-cyan) 20%, white);\\n --ae-cyan-200: color-mix(in srgb, var(--ae-cyan) 40%, white);\\n --ae-cyan-300: color-mix(in srgb, var(--ae-cyan) 60%, white);\\n --ae-cyan-400: color-mix(in srgb, var(--ae-cyan) 80%, white);\\n --ae-cyan-500: var(--ae-cyan);\\n --ae-cyan-600: color-mix(in srgb, var(--ae-cyan) 80%, black);\\n --ae-cyan-700: color-mix(in srgb, var(--ae-cyan) 60%, black);\\n --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);\\n --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);\\n\\n /* Gray (neutral \u2014 base #6e6e6e) */\\n --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);\\n --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);\\n --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);\\n --ae-gray-400: color-mix(in srgb, var(--ae-gray) 80%, white);\\n --ae-gray-500: var(--ae-gray);\\n --ae-gray-600: color-mix(in srgb, var(--ae-gray) 80%, black);\\n --ae-gray-700: color-mix(in srgb, var(--ae-gray) 60%, black);\\n --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);\\n --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);\\n\\n /* Slate (blue-gray \u2014 base #64748b, used for 'secondary') */\\n --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);\\n --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);\\n --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);\\n --ae-slate-400: color-mix(in srgb, var(--ae-slate) 80%, white);\\n --ae-slate-500: var(--ae-slate);\\n --ae-slate-600: color-mix(in srgb, var(--ae-slate) 80%, black);\\n --ae-slate-700: color-mix(in srgb, var(--ae-slate) 60%, black);\\n --ae-slate-800: color-mix(in srgb, var(--ae-slate) 40%, black);\\n --ae-slate-900: color-mix(in srgb, var(--ae-slate) 20%, black);\\n\\n /* Dark (base #343a40) */\\n --ae-dark-100: color-mix(in srgb, var(--ae-dark) 20%, white);\\n --ae-dark-200: color-mix(in srgb, var(--ae-dark) 40%, white);\\n --ae-dark-300: color-mix(in srgb, var(--ae-dark) 60%, white);\\n --ae-dark-400: color-mix(in srgb, var(--ae-dark) 80%, white);\\n --ae-dark-500: var(--ae-dark);\\n --ae-dark-600: color-mix(in srgb, var(--ae-dark) 80%, black);\\n --ae-dark-700: color-mix(in srgb, var(--ae-dark) 60%, black);\\n --ae-dark-800: color-mix(in srgb, var(--ae-dark) 40%, black);\\n --ae-dark-900: color-mix(in srgb, var(--ae-dark) 20%, black);\\n\\n /* Light (base #f8f9fa) */\\n --ae-light-100: color-mix(in srgb, var(--ae-light) 20%, white);\\n --ae-light-200: color-mix(in srgb, var(--ae-light) 40%, white);\\n --ae-light-300: color-mix(in srgb, var(--ae-light) 60%, white);\\n --ae-light-400: color-mix(in srgb, var(--ae-light) 80%, white);\\n --ae-light-500: var(--ae-light);\\n --ae-light-600: color-mix(in srgb, var(--ae-light) 80%, black);\\n --ae-light-700: color-mix(in srgb, var(--ae-light) 60%, black);\\n --ae-light-800: color-mix(in srgb, var(--ae-light) 40%, black);\\n --ae-light-900: color-mix(in srgb, var(--ae-light) 20%, black);\\n}\\n\\n:root,\\n:host {\\n /* Hover / active mix (light default \u2014 overridden in \u00A7 6 dark) */\\n --ae-color-mix-hover: black 10%;\\n --ae-color-mix-active: black 20%;\\n\\n /* Primary (Blue) */\\n --ae-color-primary: var(--ae-blue-500);\\n --ae-color-primary-hover: color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-hover));\\n --ae-color-primary-active: color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-active));\\n --ae-color-primary-disabled: color-mix(in srgb, var(--ae-blue) 50%, var(--ae-gray-500));\\n\\n /* Success (Green) */\\n --ae-color-success: var(--ae-green-500);\\n --ae-color-success-hover: color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-hover));\\n --ae-color-success-active: color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-active));\\n --ae-color-success-disabled: color-mix(in srgb, var(--ae-green) 50%, var(--ae-gray-500));\\n\\n /* Danger (Red) */\\n --ae-color-danger: var(--ae-red-500);\\n --ae-color-danger-hover: color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-hover));\\n --ae-color-danger-active: color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-active));\\n --ae-color-danger-disabled: color-mix(in srgb, var(--ae-red) 50%, var(--ae-gray-500));\\n\\n /* Warning (Yellow) */\\n --ae-color-warning: var(--ae-yellow-500);\\n --ae-color-warning-hover: color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-hover));\\n --ae-color-warning-active: color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-active));\\n --ae-color-warning-disabled: color-mix(in srgb, var(--ae-yellow) 50%, var(--ae-gray-500));\\n\\n /* Info (Cyan) */\\n --ae-color-info: var(--ae-cyan-500);\\n --ae-color-info-hover: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-hover));\\n --ae-color-info-active: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));\\n --ae-color-info-disabled: color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));\\n\\n /* Secondary (Slate) \u2014 base differs per theme, overridden in \u00A7 6 dark */\\n --ae-color-secondary: var(--ae-slate-500);\\n --ae-color-secondary-hover: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));\\n --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));\\n --ae-color-secondary-text: var(--ae-slate-700);\\n}\\n\\n\\n.theme-light,\\n:root[theme=\\\"light\\\"],\\n:host([theme=\\\"light\\\"]),\\n:host-context([theme=\\\"light\\\"]),\\n:where(:root),\\n:host {\\n color-scheme: light;\\n\\n /* Gray UI aliases \u2014 lighter palette steps for elements on white background */\\n --ae-color-gray-dark: var(--ae-gray-400);\\n --ae-color-gray: var(--ae-gray-300);\\n --ae-color-gray-light: var(--ae-gray-200);\\n --ae-color-gray-lighter: var(--ae-gray-100);\\n --ae-color-gray-lightest: color-mix(in srgb, var(--ae-gray) 10%, white);\\n\\n /* Text */\\n --ae-color-text-main: var(--ae-dark-700);\\n --ae-color-text-muted: var(--ae-gray-600);\\n --ae-color-text-disabled: var(--ae-gray-300);\\n --ae-color-text-link: var(--ae-blue-500);\\n --ae-color-text-link-hover: var(--ae-blue-700);\\n\\n /* Surfaces */\\n --ae-surface-sunken: var(--ae-light-500);\\n --ae-surface-base: white;\\n --ae-surface-raised: var(--ae-light-500);\\n --ae-surface-overlay: white;\\n --ae-color-overlay: rgba(0, 0, 0, 0.4);\\n\\n /* Borders */\\n --ae-border-subtle: rgba(0, 0, 0, 0.08);\\n --ae-border-default: rgba(0, 0, 0, 0.15);\\n --ae-border-hover: rgba(0, 0, 0, 0.25);\\n --ae-border-focus: var(--ae-color-primary);\\n --ae-border-disabled: rgba(0, 0, 0, 0.06);\\n\\n /* Focus ring */\\n --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.30);\\n --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);\\n\\n /* Subtle intent tokens \u2014 light context */\\n --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.08);\\n --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.40);\\n --ae-color-primary-text-emphasis: var(--ae-blue-700);\\n\\n --ae-color-success-bg-subtle: rgb(from var(--ae-green) r g b / 0.08);\\n --ae-color-success-border-subtle: rgb(from var(--ae-green) r g b / 0.40);\\n --ae-color-success-text-emphasis: var(--ae-green-700);\\n\\n --ae-color-danger-bg-subtle: rgb(from var(--ae-red) r g b / 0.08);\\n --ae-color-danger-border-subtle: rgb(from var(--ae-red) r g b / 0.40);\\n --ae-color-danger-text-emphasis: var(--ae-red-700);\\n\\n --ae-color-warning-bg-subtle: rgb(from var(--ae-yellow) r g b / 0.08);\\n --ae-color-warning-border-subtle: rgb(from var(--ae-yellow) r g b / 0.40);\\n --ae-color-warning-text-emphasis: var(--ae-yellow-700);\\n\\n --ae-color-info-bg-subtle: rgb(from var(--ae-cyan) r g b / 0.08);\\n --ae-color-info-border-subtle: rgb(from var(--ae-cyan) r g b / 0.40);\\n --ae-color-info-text-emphasis: var(--ae-cyan-700);\\n\\n --ae-color-secondary-bg-subtle: rgb(from var(--ae-slate) r g b / 0.08);\\n --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.40);\\n --ae-color-secondary-text-emphasis: var(--ae-slate-700);\\n\\n --ae-color-light-bg-subtle: var(--ae-gray-100); /* opaque on white: ~#e2e2e2 */\\n --ae-color-light-border-subtle: var(--ae-gray-200); /* opaque on white: ~#c4c4c4 */\\n\\n --ae-color-dark-bg-subtle: var(--ae-dark-100); /* opaque on white: ~#d6d8d9 */\\n --ae-color-dark-border-subtle: var(--ae-dark-300); /* opaque on white: ~#85898c */\\n\\n /* Component tokens \u2014 light defaults */\\n --ae-action-btn-bg: var(--ae-gray-200);\\n --ae-action-btn-bg-hover: var(--ae-color-primary);\\n --ae-action-btn-color: var(--ae-gray-600);\\n --ae-action-btn-color-hover: white;\\n\\n --ae-clear-btn-bg-hover: var(--ae-color-danger);\\n --ae-clear-btn-color-hover: white;\\n\\n --ae-reset-btn-border-radius: var(--ae-radius-xs);\\n --ae-reset-btn-bg: var(--ae-action-btn-bg);\\n --ae-reset-btn-bg-hover: var(--ae-action-btn-bg-hover);\\n --ae-reset-btn-color: var(--ae-action-btn-color);\\n --ae-reset-btn-color-hover: var(--ae-action-btn-color-hover);\\n --ae-reset-btn-transition: all 0.12s;\\n\\n --ae-clear-btn-border-radius: var(--ae-radius-xs);\\n --ae-clear-btn-bg: var(--ae-action-btn-bg);\\n --ae-clear-btn-color: var(--ae-action-btn-color);\\n --ae-clear-btn-transition: all 0.12s;\\n}\\n\\n:root,\\n:host {\\n --ae-size-scale: 1;\\n --ae-size-base: calc(1rem * var(--ae-size-scale)); /* 16px */\\n --ae-size-xl: round(calc(var(--ae-size-l) * 1.125), 1px); /* 23px */\\n --ae-size-l: round(calc(var(--ae-size-m) * 1.125 * 1.125), 1px); /* 20px */\\n --ae-size-m: var(--ae-size-base); /* 16px */\\n --ae-size-s: round(calc(var(--ae-size-m) / 1.125), 1px); /* 14px */\\n --ae-size-xs: round(calc(var(--ae-size-s) / 1.125), 1px); /* 12px */\\n --ae-size-2xs: round(calc(var(--ae-size-xs) / 1.125), 1px); /* 11px */\\n --ae-size-3xs: round(calc(var(--ae-size-2xs) / 1.125), 1px); /* 10px */\\n}\\n\\n/* Border-radius tokens \u2014 shared across all components */\\n:root,\\n:host {\\n /**\\n * Unified border-radius hook for all components.\\n *\\n * Not set by default \u2014 each component falls back to its own --ae-radius-*\\n * token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).\\n *\\n * Usage:\\n * :root { --ae-border-radius: 0; } // global: all components square\\n * :root { --ae-border-radius: 999px; } // global: all components pill\\n * ae-button { --ae-border-radius: 50%; } // scoped: only buttons circular\\n * .sidebar { --ae-border-radius: 8px; } // scoped: everything inside .sidebar\\n *\\n * To restore a component to its own default:\\n * ae-card { --ae-border-radius: initial; }\\n */\\n\\n --ae-radius-square: 0;\\n --ae-radius-xs: 2px;\\n --ae-radius-sm: 4px;\\n --ae-radius-md: 6px;\\n --ae-radius-lg: 8px;\\n --ae-radius-xl: 12px;\\n --ae-radius-pill: 999px;\\n --ae-radius-circle: 50%;\\n}\\n\\n/* Layout tokens \u2014 defined on :root so all light DOM elements can use them */\\n:root,\\n:host {\\n --container-max-width: 1280px;\\n --container-padding-x: 1.5rem;\\n}\\n\\n.theme-dark,\\n:root[theme=\\\"dark\\\"],\\n:host([theme=\\\"dark\\\"]),\\n:host-context([theme=\\\"dark\\\"]) {\\n color-scheme: dark;\\n\\n /* Hover / active \u2014 slightly gentler on dark backgrounds */\\n --ae-color-mix-hover: black 8%;\\n --ae-color-mix-active: black 16%;\\n\\n /* Gray UI aliases \u2014 darker palette steps for elements on dark background */\\n --ae-color-gray-dark: var(--ae-gray-800);\\n --ae-color-gray: var(--ae-gray-700);\\n --ae-color-gray-light: var(--ae-gray-600);\\n --ae-color-gray-lighter: var(--ae-gray-500);\\n --ae-color-gray-lightest: var(--ae-gray-400);\\n\\n /* Secondary \u2014 deeper base on dark background */\\n --ae-color-secondary: var(--ae-slate-700);\\n --ae-color-secondary-text: var(--ae-slate-300);\\n\\n /* Text */\\n --ae-color-text-main: white;\\n --ae-color-text-muted: var(--ae-gray-200);\\n --ae-color-text-disabled: var(--ae-gray-500);\\n --ae-color-text-link: var(--ae-blue-300);\\n --ae-color-text-link-hover: var(--ae-blue-200);\\n\\n /* Surfaces */\\n --ae-surface-sunken: var(--ae-gray-900);\\n --ae-surface-base: color-mix(in srgb, var(--ae-gray) 27%, black);\\n --ae-surface-raised: color-mix(in srgb, var(--ae-gray) 34%, black);\\n --ae-surface-overlay: color-mix(in srgb, var(--ae-gray) 38%, black);\\n --ae-color-overlay: rgba(0, 0, 0, 0.6);\\n\\n /* Borders */\\n --ae-border-subtle: rgba(255, 255, 255, 0.08);\\n --ae-border-default: rgba(255, 255, 255, 0.12);\\n --ae-border-hover: rgba(255, 255, 255, 0.20);\\n --ae-border-focus: var(--ae-color-primary);\\n --ae-border-disabled: rgba(255, 255, 255, 0.06);\\n\\n /* Focus ring */\\n --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.25);\\n --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);\\n\\n /* Subtle intent tokens \u2014 dark context (more alpha, lighter text-emphasis) */\\n --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.10);\\n --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.30);\\n --ae-color-primary-text-emphasis: var(--ae-blue-300);\\n\\n --ae-color-success-bg-subtle: rgb(from var(--ae-green) r g b / 0.10);\\n --ae-color-success-border-subtle: rgb(from var(--ae-green) r g b / 0.30);\\n --ae-color-success-text-emphasis: var(--ae-green-300);\\n\\n --ae-color-danger-bg-subtle: rgb(from var(--ae-red) r g b / 0.10);\\n --ae-color-danger-border-subtle: rgb(from var(--ae-red) r g b / 0.30);\\n --ae-color-danger-text-emphasis: var(--ae-red-300);\\n\\n --ae-color-warning-bg-subtle: rgb(from var(--ae-yellow) r g b / 0.10);\\n --ae-color-warning-border-subtle: rgb(from var(--ae-yellow) r g b / 0.30);\\n --ae-color-warning-text-emphasis: var(--ae-yellow-300);\\n\\n --ae-color-info-bg-subtle: rgb(from var(--ae-cyan) r g b / 0.10);\\n --ae-color-info-border-subtle: rgb(from var(--ae-cyan) r g b / 0.30);\\n --ae-color-info-text-emphasis: var(--ae-cyan-300);\\n\\n --ae-color-secondary-bg-subtle: rgb(from var(--ae-slate) r g b / 0.10);\\n --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.30);\\n --ae-color-secondary-text-emphasis: var(--ae-slate-300);\\n\\n --ae-color-light-bg-subtle: rgb(from var(--ae-light) r g b / 0.20);\\n --ae-color-light-border-subtle: rgb(from var(--ae-light) r g b / 0.25);\\n\\n --ae-color-dark-bg-subtle: rgb(from var(--ae-dark) r g b / 0.30);\\n --ae-color-dark-border-subtle: rgb(from var(--ae-dark) r g b / 0.50);\\n\\n /* Component tokens \u2014 dark overrides */\\n --ae-action-btn-bg: var(--ae-color-gray);\\n --ae-action-btn-bg-hover: color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));\\n --ae-action-btn-color: var(--ae-gray-400);\\n --ae-action-btn-color-hover: var(--ae-cyan-300);\\n --ae-clear-btn-bg-hover: color-mix(in srgb, var(--ae-red) 25%, var(--ae-gray-800));\\n --ae-clear-btn-color-hover: var(--ae-red-300);\\n}\\n\"", "module.exports = \":host([size=\\\"xs\\\"]) { font-size: var(--ae-size-xs); }\\n:host([size=\\\"sm\\\"]) { font-size: var(--ae-size-s); }\\n:host([size=\\\"md\\\"]) { font-size: var(--ae-size-m); }\\n:host([size=\\\"lg\\\"]) { font-size: var(--ae-size-l); }\\n:host([size=\\\"xl\\\"]) { font-size: var(--ae-size-xl); }\\n:host([size=\\\"3xs\\\"]) { font-size: var(--ae-size-3xs); }\\n:host([size=\\\"2xs\\\"]) { font-size: var(--ae-size-2xs); }\\n\"", "module.exports = \":host {\\n --ae-color-solid: var(--ae-color-gray);\\n --ae-color-solid-hover: color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-hover));\\n --ae-color-solid-active: color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-active));\\n --ae-color-on-solid: var(--ae-color-text-main);\\n --ae-color-border: var(--ae-color-gray);\\n --ae-color-border-hover: color-mix(in srgb, var(--ae-color-border), var(--ae-color-mix-hover));\\n --ae-color-accent: var(--ae-color-text-muted);\\n --ae-color-accent-hover: var(--ae-color-text-main);\\n --ae-color-subtle: var(--ae-border-subtle);\\n --ae-color-subtle-hover: var(--ae-border-default);\\n --ae-color-bg-subtle: var(--ae-border-subtle);\\n --ae-color-text-subtle: var(--ae-color-text-muted);\\n --ae-color-border-subtle: var(--ae-border-default);\\n}\\n\\n:host([color=\\\"primary\\\"]) {\\n --ae-color-solid: var(--ae-color-primary);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-primary);\\n --ae-color-accent: var(--ae-color-text-link);\\n --ae-color-accent-hover: var(--ae-color-text-link-hover);\\n --ae-color-subtle: var(--ae-color-primary-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-blue) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-primary-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-primary-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-primary-border-subtle);\\n}\\n\\n:host([color=\\\"secondary\\\"]) {\\n --ae-color-solid: var(--ae-color-secondary);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-secondary-hover);\\n --ae-color-accent: var(--ae-color-secondary-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-text-main);\\n --ae-color-subtle: rgb(from var(--ae-slate) r g b / 0.06);\\n --ae-color-subtle-hover: rgb(from var(--ae-slate) r g b / 0.12);\\n --ae-color-bg-subtle: var(--ae-color-secondary-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-secondary-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-secondary-border-subtle);\\n}\\n\\n:host([color=\\\"success\\\"]) {\\n --ae-color-solid: var(--ae-color-success);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-success);\\n --ae-color-accent: var(--ae-color-success-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-success-hover);\\n --ae-color-subtle: var(--ae-color-success-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-green) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-success-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-success-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-success-border-subtle);\\n}\\n\\n:host([color=\\\"danger\\\"]) {\\n --ae-color-solid: var(--ae-color-danger);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-danger);\\n --ae-color-accent: var(--ae-color-danger-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-danger-hover);\\n --ae-color-subtle: var(--ae-color-danger-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-red) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-danger-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-danger-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-danger-border-subtle);\\n}\\n\\n:host([color=\\\"warning\\\"]) {\\n --ae-color-solid: var(--ae-color-warning);\\n --ae-color-on-solid: var(--ae-gray-900);\\n --ae-color-border: var(--ae-color-warning);\\n --ae-color-accent: var(--ae-color-warning-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-warning-hover);\\n --ae-color-subtle: var(--ae-color-warning-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-yellow) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-warning-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-warning-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-warning-border-subtle);\\n}\\n\\n:host([color=\\\"info\\\"]) {\\n --ae-color-solid: var(--ae-color-info);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-info);\\n --ae-color-accent: var(--ae-color-info-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-info-hover);\\n --ae-color-subtle: var(--ae-color-info-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-cyan) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-info-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-info-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-info-border-subtle);\\n}\\n\\n:host([color=\\\"light\\\"]) {\\n --ae-color-solid: var(--ae-light);\\n --ae-color-on-solid: var(--ae-gray-900);\\n --ae-color-border: var(--ae-border-hover);\\n --ae-color-subtle: var(--ae-color-light-bg-subtle);\\n --ae-color-subtle-hover: var(--ae-color-light-border-subtle);\\n --ae-color-bg-subtle: var(--ae-color-light-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-text-muted);\\n --ae-color-border-subtle: var(--ae-color-light-border-subtle);\\n}\\n\\n:host([color=\\\"dark\\\"]) {\\n --ae-color-solid: var(--ae-dark-500);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-dark-500);\\n --ae-color-accent: var(--ae-color-text-main);\\n --ae-color-accent-hover: var(--ae-color-text-main);\\n --ae-color-subtle: var(--ae-color-dark-bg-subtle);\\n --ae-color-subtle-hover: var(--ae-color-dark-border-subtle);\\n --ae-color-bg-subtle: var(--ae-color-dark-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-text-main);\\n --ae-color-border-subtle: var(--ae-color-dark-border-subtle);\\n}\\n\"", "module.exports = \":host {\\n display: inline-block;\\n}\\n\\nbutton {\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n gap: 6px;\\n font-family: inherit;\\n font-weight: 400;\\n text-align: center;\\n white-space: nowrap;\\n vertical-align: middle;\\n user-select: none;\\n cursor: pointer;\\n transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\\n outline: none;\\n position: relative;\\n padding: 0.429em 1.071em;\\n font-size: 1em;\\n line-height: 1.5;\\n border-radius: var(--ae-border-radius, var(--_btn-r-tl, var(--ae-radius-sm)) var(--_btn-r-tr, var(--ae-radius-sm)) var(--_btn-r-br, var(--ae-radius-sm)) var(--_btn-r-bl, var(--ae-radius-sm)));\\n min-width: 4.571em;\\n height: 2.286em;\\n width: 100%;\\n\\n background: var(--ae-color-solid);\\n border: 1px solid var(--ae-color-solid);\\n color: var(--ae-color-on-solid);\\n}\\n\\nbutton:focus { outline: none; }\\nbutton:active { transform: translateY(1px); }\\n\\nbutton:hover:not(:disabled) {\\n background: var(--ae-color-solid-hover);\\n border-color: var(--ae-color-border-hover);\\n color: var(--ae-color-on-solid-hover, var(--ae-color-on-solid));\\n}\\n\\nbutton:active:not(:disabled) { background: var(--ae-color-solid-active); }\\n\\nbutton:disabled {\\n opacity: 0.5;\\n cursor: not-allowed;\\n}\\n\\n:host([size=\\\"xs\\\"]) button { border-radius: var(--ae-border-radius, var(--_btn-r-tl, var(--ae-radius-xs)) var(--_btn-r-tr, var(--ae-radius-xs)) var(--_btn-r-br, var(--ae-radius-xs)) var(--_btn-r-bl, var(--ae-radius-xs))); }\\n:host([size=\\\"sm\\\"]) button { border-radius: var(--ae-border-radius, var(--_btn-r-tl, var(--ae-radius-xs)) var(--_btn-r-tr, var(--ae-radius-xs)) var(--_btn-r-br, var(--ae-radius-xs)) var(--_btn-r-bl, var(--ae-radius-xs))); }\\n\\n/* --- Variants --- */\\n\\n:host([variant=\\\"outlined\\\"]) button {\\n background: transparent;\\n border-color: var(--ae-color-border);\\n color: var(--ae-color-accent);\\n}\\n\\n:host([variant=\\\"outlined\\\"]) button:hover:not(:disabled) {\\n background: var(--ae-color-subtle);\\n border-color: var(--ae-color-border-hover);\\n color: var(--ae-color-accent-hover);\\n}\\n\\n:host([variant=\\\"outlined\\\"]) button:active:not(:disabled) {\\n background: var(--ae-color-subtle-hover);\\n}\\n\\n:host([variant=\\\"subtle\\\"]) button {\\n background: var(--ae-color-subtle);\\n border-color: transparent;\\n color: var(--ae-color-accent);\\n}\\n\\n:host([variant=\\\"subtle\\\"]) button:hover:not(:disabled) {\\n background: var(--ae-color-subtle-hover);\\n color: var(--ae-color-accent-hover);\\n}\\n\\n:host([variant=\\\"subtle\\\"]) button:active:not(:disabled) {\\n background: var(--ae-color-subtle-hover);\\n}\\n\\n:host([variant=\\\"faint\\\"]) button {\\n background: var(--ae-color-subtle);\\n border-color: var(--ae-color-border);\\n color: var(--ae-color-accent);\\n}\\n\\n:host([variant=\\\"faint\\\"]) button:hover:not(:disabled) {\\n background: var(--ae-color-subtle-hover);\\n border-color: var(--ae-color-border-hover);\\n color: var(--ae-color-accent-hover);\\n}\\n\\n:host([variant=\\\"faint\\\"]) button:active:not(:disabled) {\\n background: var(--ae-color-subtle-hover);\\n}\\n\\n:host([variant=\\\"text\\\"]) button {\\n background: transparent;\\n border-color: transparent;\\n color: var(--ae-color-accent);\\n min-width: auto;\\n padding-left: 4px;\\n padding-right: 4px;\\n}\\n\\n:host([variant=\\\"text\\\"]) button:hover:not(:disabled) {\\n background: var(--ae-color-subtle);\\n color: var(--ae-color-accent-hover);\\n}\\n\\n:host([variant=\\\"text\\\"]) button:active:not(:disabled) {\\n background: var(--ae-color-subtle-hover);\\n}\\n\\n/* Icon-only: single ae-icon child \u2192 square compact layout */\\n:host([icon-only]) {\\n display: inline-flex;\\n}\\n\\n:host([icon-only]:not([size])) {\\n font-size: var(--ae-size-m);\\n}\\n\\n:host([icon-only]) button {\\n padding: 0;\\n min-width: auto;\\n width: 2.286em;\\n height: 2.286em;\\n line-height: 1;\\n}\\n\\n:host([icon-only]) ::slotted(ae-icon) {\\n font-size: 1.5em;\\n}\\n\\n:host([active]) button {\\n background: var(--ae-color-solid-active);\\n border-color: var(--ae-color-border-hover);\\n color: var(--ae-color-on-solid-hover, var(--ae-color-on-solid));\\n}\\n\\n.btn-icon {\\n padding: 0;\\n min-width: auto;\\n width: 2.286em;\\n height: 2.286em;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n border-radius: var(--ae-radius-sm);\\n}\\n\\n.btn-icon.btn-lg {\\n width: 2.857em;\\n height: 2.857em;\\n}\\n\\n.btn-circle {\\n border-radius: var(--ae-radius-circle);\\n}\\n\\n:host([block]) {\\n display: block;\\n}\\n\\nbutton.btn-loading {\\n position: relative;\\n pointer-events: none;\\n color: transparent;\\n}\\n\\nbutton.btn-loading::before {\\n content: '';\\n position: absolute;\\n width: 1em;\\n height: 1em;\\n border: 2px solid currentColor;\\n border-top-color: transparent;\\n border-radius: var(--ae-radius-circle);\\n animation: btn-spin 0.6s linear infinite;\\n color: currentColor;\\n opacity: 0.8;\\n}\\n\\n@keyframes btn-spin {\\n to {\\n transform: rotate(360deg);\\n }\\n}\\n\\n.btn-icon-left {\\n margin-right: -2px;\\n}\\n\\n.btn-icon-right {\\n margin-left: -2px;\\n}\\n\\n\"", "export { default, default as Button } from './button';\nexport type { ButtonProps } from './button';\nexport type { ButtonColor, ButtonSize, ButtonVariant } from './defines';\n", "\uFEFFimport type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css';\nimport sizeCSS from '../styles/size.css';\nimport colorCSS from '../styles/color.css';\nimport buttonStyle from '../styles/components/button.css';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { ButtonColor, ButtonSize, ButtonVariant } from './defines';\nimport { prop } from 'aeico';\n\n/**\n * Button Component\n *\n * A customizable button component with multiple variants and sizes.\n * Supports theme and internationalization through mixins.\n *\n * @example\n * ```typescript\n * // Using the static create method\n * const button = Button.create({\n * variant: 'primary',\n * size: 'md'\n * })\n * ```\n *\n * @example\n * ```html\n * <!-- Using as Web Component -->\n * <ae-button variant=\"primary\" size=\"md\">Save</ae-button>\n * <ae-button variant=\"danger\" size=\"sm\">Delete</ae-button>\n * <ae-button variant=\"subtle\">Cancel</ae-button>\n * ```\n */\nclass Button extends AeicoComponent {\n protected static styles = [styleVariables, sizeCSS, colorCSS, buttonStyle];\n\n @prop({ type: String })\n color?: ButtonColor;\n\n @prop({ type: String })\n variant?: ButtonVariant;\n\n @prop({ type: String })\n size?: ButtonSize;\n\n @prop({ type: Boolean })\n disabled?: boolean;\n\n @prop({ type: String })\n type?: 'button' | 'submit' | 'reset';\n\n @prop({ type: Boolean })\n active?: boolean;\n\n @prop({ type: Boolean })\n block?: boolean;\n\n private _buttonElement: HTMLButtonElement | null = null;\n private _slotElement: HTMLSlotElement | null = null;\n private _autoAriaLabel = false;\n\n protected onMounted() {\n this._handleSlotChange();\n }\n\n private _handleSlotChange = () => {\n const nodes = this._slotElement?.assignedNodes() ?? [];\n // Icon-only: exactly one element (ae-icon) and no meaningful text nodes\n const elements = nodes.filter((n): n is Element => n.nodeType === Node.ELEMENT_NODE);\n const hasText = nodes.some(\n (n) => n.nodeType === Node.TEXT_NODE && n.textContent!.trim() !== '',\n );\n const isIconOnly =\n !hasText && elements.length === 1 && elements[0].tagName.toLowerCase() === 'ae-icon';\n\n if (isIconOnly) {\n this.setAttribute('icon-only', '');\n if (!this.hasAttribute('aria-label') || this._autoAriaLabel) {\n this.setAttribute('aria-label', elements[0].getAttribute('name') ?? '');\n this._autoAriaLabel = true;\n }\n } else {\n this.removeAttribute('icon-only');\n if (this._autoAriaLabel) {\n this.removeAttribute('aria-label');\n this._autoAriaLabel = false;\n }\n }\n };\n\n protected render() {\n return html(({ button, slot }) => {\n this._buttonElement = button(\n {\n type: this.type || 'button',\n disabled: this.disabled,\n part: 'button',\n 'aria-pressed': this.active,\n 'aria-disabled': this.disabled,\n },\n () => {\n this._slotElement = slot({ '@slotchange': this._handleSlotChange });\n },\n );\n });\n }\n\n /**\n * Programmatically click the button\n */\n click() {\n if (!this.disabled && this._buttonElement) {\n this._buttonElement.click();\n }\n }\n\n /**\n * Focus the button\n */\n focus() {\n if (this._buttonElement) {\n this._buttonElement.focus();\n }\n }\n\n /**\n * Blur the button\n */\n blur() {\n if (this._buttonElement) {\n this._buttonElement.blur();\n }\n }\n}\n\nButton.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-button': Button;\n }\n}\n\nexport default Button;\nexport type ButtonProps = InferProps<typeof Button>;\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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,4FAAAA,UAAAC,SAAA;AAAA,IAAAA,QAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAjB;AAAA,uFAAAC,UAAAC,SAAA;AAAA,IAAAA,QAAO,UAAU;AAAA;AAAA;;;ACAjB;AAAA,wFAAAC,UAAAC,SAAA;AAAA,IAAAA,QAAO,UAAU;AAAA;AAAA;;;ACAjB;AAAA,oGAAAC,UAAAC,SAAA;AAAA,IAAAA,QAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/size.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/button.css", "../src/button/index.ts", "../src/button/button.ts", "../src/aeico-component.ts"],
4
+ "sourcesContent": ["module.exports = \":root,\\n:host {\\n --ae-font-sans-serif: system-ui, -apple-system, \\\"Segoe UI\\\", Roboto, \\\"Helvetica Neue\\\",\\n \\\"Noto Sans\\\", \\\"Liberation Sans\\\", Arial, sans-serif,\\n \\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\", \\\"Noto Color Emoji\\\";\\n --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,\\n \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace;\\n font-family: var(--ae-font-sans-serif);\\n --ae-blue: #0e639c;\\n --ae-green: #28a745;\\n --ae-red: #dc3545;\\n --ae-yellow: #ffc107;\\n --ae-cyan: #17a2b8;\\n --ae-gray: #6e6e6e;\\n --ae-slate: #64748b;\\n --ae-dark: #343a40;\\n --ae-light: #f8f9fa;\\n}\\n\\n:root,\\n:host {\\n /* Blue */\\n --ae-blue-100: color-mix(in srgb, var(--ae-blue) 20%, white);\\n --ae-blue-200: color-mix(in srgb, var(--ae-blue) 40%, white);\\n --ae-blue-300: color-mix(in srgb, var(--ae-blue) 60%, white);\\n --ae-blue-400: color-mix(in srgb, var(--ae-blue) 80%, white);\\n --ae-blue-500: var(--ae-blue);\\n --ae-blue-600: color-mix(in srgb, var(--ae-blue) 80%, black);\\n --ae-blue-700: color-mix(in srgb, var(--ae-blue) 60%, black);\\n --ae-blue-800: color-mix(in srgb, var(--ae-blue) 40%, black);\\n --ae-blue-900: color-mix(in srgb, var(--ae-blue) 20%, black);\\n\\n /* Green */\\n --ae-green-100: color-mix(in srgb, var(--ae-green) 20%, white);\\n --ae-green-200: color-mix(in srgb, var(--ae-green) 40%, white);\\n --ae-green-300: color-mix(in srgb, var(--ae-green) 60%, white);\\n --ae-green-400: color-mix(in srgb, var(--ae-green) 80%, white);\\n --ae-green-500: var(--ae-green);\\n --ae-green-600: color-mix(in srgb, var(--ae-green) 80%, black);\\n --ae-green-700: color-mix(in srgb, var(--ae-green) 60%, black);\\n --ae-green-800: color-mix(in srgb, var(--ae-green) 40%, black);\\n --ae-green-900: color-mix(in srgb, var(--ae-green) 20%, black);\\n\\n /* Red */\\n --ae-red-100: color-mix(in srgb, var(--ae-red) 20%, white);\\n --ae-red-200: color-mix(in srgb, var(--ae-red) 40%, white);\\n --ae-red-300: color-mix(in srgb, var(--ae-red) 60%, white);\\n --ae-red-400: color-mix(in srgb, var(--ae-red) 80%, white);\\n --ae-red-500: var(--ae-red);\\n --ae-red-600: color-mix(in srgb, var(--ae-red) 80%, black);\\n --ae-red-700: color-mix(in srgb, var(--ae-red) 60%, black);\\n --ae-red-800: color-mix(in srgb, var(--ae-red) 40%, black);\\n --ae-red-900: color-mix(in srgb, var(--ae-red) 20%, black);\\n\\n /* Yellow */\\n --ae-yellow-100: color-mix(in srgb, var(--ae-yellow) 20%, white);\\n --ae-yellow-200: color-mix(in srgb, var(--ae-yellow) 40%, white);\\n --ae-yellow-300: color-mix(in srgb, var(--ae-yellow) 60%, white);\\n --ae-yellow-400: color-mix(in srgb, var(--ae-yellow) 80%, white);\\n --ae-yellow-500: var(--ae-yellow);\\n --ae-yellow-600: color-mix(in srgb, var(--ae-yellow) 80%, black);\\n --ae-yellow-700: color-mix(in srgb, var(--ae-yellow) 60%, black);\\n --ae-yellow-800: color-mix(in srgb, var(--ae-yellow) 40%, black);\\n --ae-yellow-900: color-mix(in srgb, var(--ae-yellow) 20%, black);\\n\\n /* Cyan */\\n --ae-cyan-100: color-mix(in srgb, var(--ae-cyan) 20%, white);\\n --ae-cyan-200: color-mix(in srgb, var(--ae-cyan) 40%, white);\\n --ae-cyan-300: color-mix(in srgb, var(--ae-cyan) 60%, white);\\n --ae-cyan-400: color-mix(in srgb, var(--ae-cyan) 80%, white);\\n --ae-cyan-500: var(--ae-cyan);\\n --ae-cyan-600: color-mix(in srgb, var(--ae-cyan) 80%, black);\\n --ae-cyan-700: color-mix(in srgb, var(--ae-cyan) 60%, black);\\n --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);\\n --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);\\n\\n /* Gray (neutral - base #6e6e6e) */\\n --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);\\n --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);\\n --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);\\n --ae-gray-400: color-mix(in srgb, var(--ae-gray) 80%, white);\\n --ae-gray-500: var(--ae-gray);\\n --ae-gray-600: color-mix(in srgb, var(--ae-gray) 80%, black);\\n --ae-gray-700: color-mix(in srgb, var(--ae-gray) 60%, black);\\n --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);\\n --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);\\n\\n /* Slate (blue-gray - base #64748b, used for 'secondary') */\\n --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);\\n --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);\\n --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);\\n --ae-slate-400: color-mix(in srgb, var(--ae-slate) 80%, white);\\n --ae-slate-500: var(--ae-slate);\\n --ae-slate-600: color-mix(in srgb, var(--ae-slate) 80%, black);\\n --ae-slate-700: color-mix(in srgb, var(--ae-slate) 60%, black);\\n --ae-slate-800: color-mix(in srgb, var(--ae-slate) 40%, black);\\n --ae-slate-900: color-mix(in srgb, var(--ae-slate) 20%, black);\\n\\n /* Dark (base #343a40) */\\n --ae-dark-100: color-mix(in srgb, var(--ae-dark) 20%, white);\\n --ae-dark-200: color-mix(in srgb, var(--ae-dark) 40%, white);\\n --ae-dark-300: color-mix(in srgb, var(--ae-dark) 60%, white);\\n --ae-dark-400: color-mix(in srgb, var(--ae-dark) 80%, white);\\n --ae-dark-500: var(--ae-dark);\\n --ae-dark-600: color-mix(in srgb, var(--ae-dark) 80%, black);\\n --ae-dark-700: color-mix(in srgb, var(--ae-dark) 60%, black);\\n --ae-dark-800: color-mix(in srgb, var(--ae-dark) 40%, black);\\n --ae-dark-900: color-mix(in srgb, var(--ae-dark) 20%, black);\\n\\n /* Light (base #f8f9fa) */\\n --ae-light-100: color-mix(in srgb, var(--ae-light) 20%, white);\\n --ae-light-200: color-mix(in srgb, var(--ae-light) 40%, white);\\n --ae-light-300: color-mix(in srgb, var(--ae-light) 60%, white);\\n --ae-light-400: color-mix(in srgb, var(--ae-light) 80%, white);\\n --ae-light-500: var(--ae-light);\\n --ae-light-600: color-mix(in srgb, var(--ae-light) 80%, black);\\n --ae-light-700: color-mix(in srgb, var(--ae-light) 60%, black);\\n --ae-light-800: color-mix(in srgb, var(--ae-light) 40%, black);\\n --ae-light-900: color-mix(in srgb, var(--ae-light) 20%, black);\\n}\\n\\n:root,\\n:host {\\n /* Hover / active mix (light default - overridden in \u00A7 6 dark) */\\n --ae-color-mix-hover: black 10%;\\n --ae-color-mix-active: black 20%;\\n\\n /* Primary (Blue) */\\n --ae-color-primary: var(--ae-blue-500);\\n --ae-color-primary-hover: color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-hover));\\n --ae-color-primary-active: color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-active));\\n --ae-color-primary-disabled: color-mix(in srgb, var(--ae-blue) 50%, var(--ae-gray-500));\\n\\n /* Success (Green) */\\n --ae-color-success: var(--ae-green-500);\\n --ae-color-success-hover: color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-hover));\\n --ae-color-success-active: color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-active));\\n --ae-color-success-disabled: color-mix(in srgb, var(--ae-green) 50%, var(--ae-gray-500));\\n\\n /* Danger (Red) */\\n --ae-color-danger: var(--ae-red-500);\\n --ae-color-danger-hover: color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-hover));\\n --ae-color-danger-active: color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-active));\\n --ae-color-danger-disabled: color-mix(in srgb, var(--ae-red) 50%, var(--ae-gray-500));\\n\\n /* Warning (Yellow) */\\n --ae-color-warning: var(--ae-yellow-500);\\n --ae-color-warning-hover: color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-hover));\\n --ae-color-warning-active: color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-active));\\n --ae-color-warning-disabled: color-mix(in srgb, var(--ae-yellow) 50%, var(--ae-gray-500));\\n\\n /* Info (Cyan) */\\n --ae-color-info: var(--ae-cyan-500);\\n --ae-color-info-hover: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-hover));\\n --ae-color-info-active: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));\\n --ae-color-info-disabled: color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));\\n\\n /* Secondary (Slate) - base differs per theme, overridden in \u00A7 6 dark */\\n --ae-color-secondary: var(--ae-slate-500);\\n --ae-color-secondary-hover: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));\\n --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));\\n --ae-color-secondary-text: var(--ae-slate-700);\\n}\\n\\n\\n.theme-light,\\n:root[theme=\\\"light\\\"],\\n:host([theme=\\\"light\\\"]),\\n:host-context([theme=\\\"light\\\"]),\\n:where(:root),\\n:host {\\n color-scheme: light;\\n\\n /* Gray UI aliases - lighter palette steps for elements on white background */\\n --ae-color-gray-dark: var(--ae-gray-400);\\n --ae-color-gray: var(--ae-gray-300);\\n --ae-color-gray-light: var(--ae-gray-200);\\n --ae-color-gray-lighter: var(--ae-gray-100);\\n --ae-color-gray-lightest: color-mix(in srgb, var(--ae-gray) 10%, white);\\n\\n /* Text */\\n --ae-color-text-main: var(--ae-dark-700);\\n --ae-color-text-muted: var(--ae-gray-600);\\n --ae-color-text-disabled: var(--ae-gray-300);\\n --ae-color-text-link: var(--ae-blue-500);\\n --ae-color-text-link-hover: var(--ae-blue-700);\\n\\n /* Surfaces */\\n --ae-surface-sunken: var(--ae-light-500);\\n --ae-surface-base: white;\\n --ae-surface-raised: var(--ae-light-500);\\n --ae-surface-overlay: white;\\n --ae-color-overlay: rgba(0, 0, 0, 0.4);\\n\\n /* Borders */\\n --ae-border-subtle: rgba(0, 0, 0, 0.08);\\n --ae-border-default: rgba(0, 0, 0, 0.15);\\n --ae-border-hover: rgba(0, 0, 0, 0.25);\\n --ae-border-focus: var(--ae-color-primary);\\n --ae-border-disabled: rgba(0, 0, 0, 0.06);\\n\\n /* Focus ring */\\n --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.30);\\n --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);\\n\\n /* Subtle intent tokens - light context */\\n --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.08);\\n --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.40);\\n --ae-color-primary-text-emphasis: var(--ae-blue-700);\\n\\n --ae-color-success-bg-subtle: rgb(from var(--ae-green) r g b / 0.08);\\n --ae-color-success-border-subtle: rgb(from var(--ae-green) r g b / 0.40);\\n --ae-color-success-text-emphasis: var(--ae-green-700);\\n\\n --ae-color-danger-bg-subtle: rgb(from var(--ae-red) r g b / 0.08);\\n --ae-color-danger-border-subtle: rgb(from var(--ae-red) r g b / 0.40);\\n --ae-color-danger-text-emphasis: var(--ae-red-700);\\n\\n --ae-color-warning-bg-subtle: rgb(from var(--ae-yellow) r g b / 0.08);\\n --ae-color-warning-border-subtle: rgb(from var(--ae-yellow) r g b / 0.40);\\n --ae-color-warning-text-emphasis: var(--ae-yellow-700);\\n\\n --ae-color-info-bg-subtle: rgb(from var(--ae-cyan) r g b / 0.08);\\n --ae-color-info-border-subtle: rgb(from var(--ae-cyan) r g b / 0.40);\\n --ae-color-info-text-emphasis: var(--ae-cyan-700);\\n\\n --ae-color-secondary-bg-subtle: rgb(from var(--ae-slate) r g b / 0.08);\\n --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.40);\\n --ae-color-secondary-text-emphasis: var(--ae-slate-700);\\n\\n --ae-color-light-bg-subtle: var(--ae-gray-100); /* opaque on white: ~#e2e2e2 */\\n --ae-color-light-border-subtle: var(--ae-gray-200); /* opaque on white: ~#c4c4c4 */\\n\\n --ae-color-dark-bg-subtle: var(--ae-dark-100); /* opaque on white: ~#d6d8d9 */\\n --ae-color-dark-border-subtle: var(--ae-dark-300); /* opaque on white: ~#85898c */\\n\\n /* Component tokens - light defaults */\\n --ae-action-btn-bg: var(--ae-gray-200);\\n --ae-action-btn-bg-hover: var(--ae-color-primary);\\n --ae-action-btn-color: var(--ae-gray-600);\\n --ae-action-btn-color-hover: white;\\n\\n --ae-clear-btn-bg-hover: var(--ae-color-danger);\\n --ae-clear-btn-color-hover: white;\\n\\n --ae-reset-btn-border-radius: var(--ae-radius-xs);\\n --ae-reset-btn-bg: var(--ae-action-btn-bg);\\n --ae-reset-btn-bg-hover: var(--ae-action-btn-bg-hover);\\n --ae-reset-btn-color: var(--ae-action-btn-color);\\n --ae-reset-btn-color-hover: var(--ae-action-btn-color-hover);\\n --ae-reset-btn-transition: all 0.12s;\\n\\n --ae-clear-btn-border-radius: var(--ae-radius-xs);\\n --ae-clear-btn-bg: var(--ae-action-btn-bg);\\n --ae-clear-btn-color: var(--ae-action-btn-color);\\n --ae-clear-btn-transition: all 0.12s;\\n}\\n\\n:root,\\n:host {\\n --ae-size-scale: 1;\\n --ae-size-base: calc(1rem * var(--ae-size-scale)); /* 16px */\\n --ae-size-xl: round(calc(var(--ae-size-l) * 1.125), 1px); /* 23px */\\n --ae-size-l: round(calc(var(--ae-size-m) * 1.125 * 1.125), 1px); /* 20px */\\n --ae-size-m: var(--ae-size-base); /* 16px */\\n --ae-size-s: round(calc(var(--ae-size-m) / 1.125), 1px); /* 14px */\\n --ae-size-xs: round(calc(var(--ae-size-s) / 1.125), 1px); /* 12px */\\n --ae-size-2xs: round(calc(var(--ae-size-xs) / 1.125), 1px); /* 11px */\\n --ae-size-3xs: round(calc(var(--ae-size-2xs) / 1.125), 1px); /* 10px */\\n}\\n\\n/* Border-radius tokens - shared across all components */\\n:root,\\n:host {\\n /**\\n * Unified border-radius hook for all components.\\n *\\n *\\n * Usage:\\n * :root { --ae-border-radius: 0; } // global: all components square\\n * :root { --ae-border-radius: 999px; } // global: all components pill\\n * ae-button { --ae-border-radius: 50%; } // scoped: only buttons circular\\n * .sidebar { --ae-border-radius: 8px; } // scoped: everything inside .sidebar\\n *\\n * To restore a component to its own default:\\n * ae-card { --ae-border-radius: initial; }\\n */\\n\\n --ae-radius-square: 0;\\n --ae-radius-xs: 2px;\\n --ae-radius-sm: 4px;\\n --ae-radius-md: 6px;\\n --ae-radius-lg: 8px;\\n --ae-radius-xl: 12px;\\n --ae-radius-pill: 999px;\\n --ae-radius-circle: 50%;\\n}\\n\\n/* Layout tokens - defined on :root so all light DOM elements can use them */\\n:root,\\n:host {\\n --container-max-width: 1280px;\\n --container-padding-x: 1.5rem;\\n}\\n\\n.theme-dark,\\n:root[theme=\\\"dark\\\"],\\n:host([theme=\\\"dark\\\"]),\\n:host-context([theme=\\\"dark\\\"]) {\\n color-scheme: dark;\\n\\n /* Hover / active - slightly gentler on dark backgrounds */\\n --ae-color-mix-hover: black 8%;\\n --ae-color-mix-active: black 16%;\\n\\n /* Gray UI aliases - darker palette steps for elements on dark background */\\n --ae-color-gray-dark: var(--ae-gray-800);\\n --ae-color-gray: var(--ae-gray-700);\\n --ae-color-gray-light: var(--ae-gray-600);\\n --ae-color-gray-lighter: var(--ae-gray-500);\\n --ae-color-gray-lightest: var(--ae-gray-400);\\n\\n /* Secondary - deeper base on dark background */\\n --ae-color-secondary: var(--ae-slate-700);\\n --ae-color-secondary-text: var(--ae-slate-300);\\n\\n /* Text */\\n --ae-color-text-main: white;\\n --ae-color-text-muted: var(--ae-gray-200);\\n --ae-color-text-disabled: var(--ae-gray-500);\\n --ae-color-text-link: var(--ae-blue-300);\\n --ae-color-text-link-hover: var(--ae-blue-200);\\n\\n /* Surfaces */\\n --ae-surface-sunken: var(--ae-gray-900);\\n --ae-surface-base: color-mix(in srgb, var(--ae-gray) 27%, black);\\n --ae-surface-raised: color-mix(in srgb, var(--ae-gray) 34%, black);\\n --ae-surface-overlay: color-mix(in srgb, var(--ae-gray) 38%, black);\\n --ae-color-overlay: rgba(0, 0, 0, 0.6);\\n\\n /* Borders */\\n --ae-border-subtle: rgba(255, 255, 255, 0.08);\\n --ae-border-default: rgba(255, 255, 255, 0.12);\\n --ae-border-hover: rgba(255, 255, 255, 0.20);\\n --ae-border-focus: var(--ae-color-primary);\\n --ae-border-disabled: rgba(255, 255, 255, 0.06);\\n\\n /* Focus ring */\\n --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.25);\\n --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);\\n\\n /* Subtle intent tokens - dark context (more alpha, lighter text-emphasis) */\\n --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.10);\\n --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.30);\\n --ae-color-primary-text-emphasis: var(--ae-blue-300);\\n\\n --ae-color-success-bg-subtle: rgb(from var(--ae-green) r g b / 0.10);\\n --ae-color-success-border-subtle: rgb(from var(--ae-green) r g b / 0.30);\\n --ae-color-success-text-emphasis: var(--ae-green-300);\\n\\n --ae-color-danger-bg-subtle: rgb(from var(--ae-red) r g b / 0.10);\\n --ae-color-danger-border-subtle: rgb(from var(--ae-red) r g b / 0.30);\\n --ae-color-danger-text-emphasis: var(--ae-red-300);\\n\\n --ae-color-warning-bg-subtle: rgb(from var(--ae-yellow) r g b / 0.10);\\n --ae-color-warning-border-subtle: rgb(from var(--ae-yellow) r g b / 0.30);\\n --ae-color-warning-text-emphasis: var(--ae-yellow-300);\\n\\n --ae-color-info-bg-subtle: rgb(from var(--ae-cyan) r g b / 0.10);\\n --ae-color-info-border-subtle: rgb(from var(--ae-cyan) r g b / 0.30);\\n --ae-color-info-text-emphasis: var(--ae-cyan-300);\\n\\n --ae-color-secondary-bg-subtle: rgb(from var(--ae-slate) r g b / 0.10);\\n --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.30);\\n --ae-color-secondary-text-emphasis: var(--ae-slate-300);\\n\\n --ae-color-light-bg-subtle: rgb(from var(--ae-light) r g b / 0.20);\\n --ae-color-light-border-subtle: rgb(from var(--ae-light) r g b / 0.25);\\n\\n --ae-color-dark-bg-subtle: rgb(from var(--ae-dark) r g b / 0.30);\\n --ae-color-dark-border-subtle: rgb(from var(--ae-dark) r g b / 0.50);\\n\\n /* Component tokens - dark overrides */\\n --ae-action-btn-bg: var(--ae-color-gray);\\n --ae-action-btn-bg-hover: color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));\\n --ae-action-btn-color: var(--ae-gray-400);\\n --ae-action-btn-color-hover: var(--ae-cyan-300);\\n --ae-clear-btn-bg-hover: color-mix(in srgb, var(--ae-red) 25%, var(--ae-gray-800));\\n --ae-clear-btn-color-hover: var(--ae-red-300);\\n}\\n\"", "module.exports = \":host([size=\\\"xs\\\"]) { font-size: var(--ae-size-xs); }\\n:host([size=\\\"sm\\\"]) { font-size: var(--ae-size-s); }\\n:host([size=\\\"md\\\"]) { font-size: var(--ae-size-m); }\\n:host([size=\\\"lg\\\"]) { font-size: var(--ae-size-l); }\\n:host([size=\\\"xl\\\"]) { font-size: var(--ae-size-xl); }\\n:host([size=\\\"3xs\\\"]) { font-size: var(--ae-size-3xs); }\\n:host([size=\\\"2xs\\\"]) { font-size: var(--ae-size-2xs); }\\n\"", "module.exports = \":host {\\n --ae-color-solid: var(--ae-color-gray);\\n --ae-color-solid-hover: color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-hover));\\n --ae-color-solid-active: color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-active));\\n --ae-color-on-solid: var(--ae-color-text-main);\\n --ae-color-border: var(--ae-color-gray);\\n --ae-color-border-hover: color-mix(in srgb, var(--ae-color-border), var(--ae-color-mix-hover));\\n --ae-color-accent: var(--ae-color-text-muted);\\n --ae-color-accent-hover: var(--ae-color-text-main);\\n --ae-color-subtle: var(--ae-border-subtle);\\n --ae-color-subtle-hover: var(--ae-border-default);\\n --ae-color-bg-subtle: var(--ae-border-subtle);\\n --ae-color-text-subtle: var(--ae-color-text-muted);\\n --ae-color-border-subtle: var(--ae-border-default);\\n}\\n\\n:host([color=\\\"primary\\\"]) {\\n --ae-color-solid: var(--ae-color-primary);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-primary);\\n --ae-color-accent: var(--ae-color-text-link);\\n --ae-color-accent-hover: var(--ae-color-text-link-hover);\\n --ae-color-subtle: var(--ae-color-primary-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-blue) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-primary-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-primary-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-primary-border-subtle);\\n}\\n\\n:host([color=\\\"secondary\\\"]) {\\n --ae-color-solid: var(--ae-color-secondary);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-secondary-hover);\\n --ae-color-accent: var(--ae-color-secondary-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-text-main);\\n --ae-color-subtle: rgb(from var(--ae-slate) r g b / 0.06);\\n --ae-color-subtle-hover: rgb(from var(--ae-slate) r g b / 0.12);\\n --ae-color-bg-subtle: var(--ae-color-secondary-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-secondary-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-secondary-border-subtle);\\n}\\n\\n:host([color=\\\"success\\\"]) {\\n --ae-color-solid: var(--ae-color-success);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-success);\\n --ae-color-accent: var(--ae-color-success-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-success-hover);\\n --ae-color-subtle: var(--ae-color-success-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-green) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-success-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-success-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-success-border-subtle);\\n}\\n\\n:host([color=\\\"danger\\\"]) {\\n --ae-color-solid: var(--ae-color-danger);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-danger);\\n --ae-color-accent: var(--ae-color-danger-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-danger-hover);\\n --ae-color-subtle: var(--ae-color-danger-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-red) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-danger-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-danger-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-danger-border-subtle);\\n}\\n\\n:host([color=\\\"warning\\\"]) {\\n --ae-color-solid: var(--ae-color-warning);\\n --ae-color-on-solid: var(--ae-gray-900);\\n --ae-color-border: var(--ae-color-warning);\\n --ae-color-accent: var(--ae-color-warning-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-warning-hover);\\n --ae-color-subtle: var(--ae-color-warning-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-yellow) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-warning-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-warning-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-warning-border-subtle);\\n}\\n\\n:host([color=\\\"info\\\"]) {\\n --ae-color-solid: var(--ae-color-info);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-info);\\n --ae-color-accent: var(--ae-color-info-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-info-hover);\\n --ae-color-subtle: var(--ae-color-info-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-cyan) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-info-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-info-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-info-border-subtle);\\n}\\n\\n:host([color=\\\"light\\\"]) {\\n --ae-color-solid: var(--ae-light);\\n --ae-color-on-solid: var(--ae-gray-900);\\n --ae-color-border: var(--ae-border-hover);\\n --ae-color-subtle: var(--ae-color-light-bg-subtle);\\n --ae-color-subtle-hover: var(--ae-color-light-border-subtle);\\n --ae-color-bg-subtle: var(--ae-color-light-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-text-muted);\\n --ae-color-border-subtle: var(--ae-color-light-border-subtle);\\n}\\n\\n:host([color=\\\"dark\\\"]) {\\n --ae-color-solid: var(--ae-dark-500);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-dark-500);\\n --ae-color-accent: var(--ae-color-text-main);\\n --ae-color-accent-hover: var(--ae-color-text-main);\\n --ae-color-subtle: var(--ae-color-dark-bg-subtle);\\n --ae-color-subtle-hover: var(--ae-color-dark-border-subtle);\\n --ae-color-bg-subtle: var(--ae-color-dark-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-text-main);\\n --ae-color-border-subtle: var(--ae-color-dark-border-subtle);\\n}\\n\"", "module.exports = \":host {\\n display: inline-block;\\n}\\n\\nbutton {\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n gap: 6px;\\n font-family: inherit;\\n font-weight: 400;\\n text-align: center;\\n white-space: nowrap;\\n vertical-align: middle;\\n user-select: none;\\n cursor: pointer;\\n transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\\n outline: none;\\n position: relative;\\n padding: 0.429em 1.071em;\\n font-size: 1em;\\n line-height: 1.5;\\n border-radius: var(--ae-border-radius, var(--_btn-r-tl, var(--ae-radius-sm)) var(--_btn-r-tr, var(--ae-radius-sm)) var(--_btn-r-br, var(--ae-radius-sm)) var(--_btn-r-bl, var(--ae-radius-sm)));\\n min-width: 4.571em;\\n height: 2.286em;\\n width: 100%;\\n\\n background: var(--ae-color-solid);\\n border: 1px solid var(--ae-color-solid);\\n color: var(--ae-color-on-solid);\\n}\\n\\nbutton:focus { outline: none; }\\nbutton:active { transform: translateY(1px); }\\n\\nbutton:hover:not(:disabled) {\\n background: var(--ae-color-solid-hover);\\n border-color: var(--ae-color-border-hover);\\n color: var(--ae-color-on-solid-hover, var(--ae-color-on-solid));\\n}\\n\\nbutton:active:not(:disabled) { background: var(--ae-color-solid-active); }\\n\\nbutton:disabled {\\n opacity: 0.5;\\n cursor: not-allowed;\\n}\\n\\n:host([size=\\\"xs\\\"]) button { border-radius: var(--ae-border-radius, var(--_btn-r-tl, var(--ae-radius-xs)) var(--_btn-r-tr, var(--ae-radius-xs)) var(--_btn-r-br, var(--ae-radius-xs)) var(--_btn-r-bl, var(--ae-radius-xs))); }\\n:host([size=\\\"sm\\\"]) button { border-radius: var(--ae-border-radius, var(--_btn-r-tl, var(--ae-radius-xs)) var(--_btn-r-tr, var(--ae-radius-xs)) var(--_btn-r-br, var(--ae-radius-xs)) var(--_btn-r-bl, var(--ae-radius-xs))); }\\n\\n/* --- Variants --- */\\n\\n:host([variant=\\\"outlined\\\"]) button {\\n background: transparent;\\n border-color: var(--ae-color-border);\\n color: var(--ae-color-accent);\\n}\\n\\n:host([variant=\\\"outlined\\\"]) button:hover:not(:disabled) {\\n background: var(--ae-color-subtle);\\n border-color: var(--ae-color-border-hover);\\n color: var(--ae-color-accent-hover);\\n}\\n\\n:host([variant=\\\"outlined\\\"]) button:active:not(:disabled) {\\n background: var(--ae-color-subtle-hover);\\n}\\n\\n:host([variant=\\\"subtle\\\"]) button {\\n background: var(--ae-color-subtle);\\n border-color: transparent;\\n color: var(--ae-color-accent);\\n}\\n\\n:host([variant=\\\"subtle\\\"]) button:hover:not(:disabled) {\\n background: var(--ae-color-subtle-hover);\\n color: var(--ae-color-accent-hover);\\n}\\n\\n:host([variant=\\\"subtle\\\"]) button:active:not(:disabled) {\\n background: var(--ae-color-subtle-hover);\\n}\\n\\n:host([variant=\\\"faint\\\"]) button {\\n background: var(--ae-color-subtle);\\n border-color: var(--ae-color-border);\\n color: var(--ae-color-accent);\\n}\\n\\n:host([variant=\\\"faint\\\"]) button:hover:not(:disabled) {\\n background: var(--ae-color-subtle-hover);\\n border-color: var(--ae-color-border-hover);\\n color: var(--ae-color-accent-hover);\\n}\\n\\n:host([variant=\\\"faint\\\"]) button:active:not(:disabled) {\\n background: var(--ae-color-subtle-hover);\\n}\\n\\n:host([variant=\\\"text\\\"]) button {\\n background: transparent;\\n border-color: transparent;\\n color: var(--ae-color-accent);\\n min-width: auto;\\n padding-left: 4px;\\n padding-right: 4px;\\n}\\n\\n:host([variant=\\\"text\\\"]) button:hover:not(:disabled) {\\n background: var(--ae-color-subtle);\\n color: var(--ae-color-accent-hover);\\n}\\n\\n:host([variant=\\\"text\\\"]) button:active:not(:disabled) {\\n background: var(--ae-color-subtle-hover);\\n}\\n\\n:host([icon-only]) {\\n display: inline-flex;\\n}\\n\\n:host([icon-only]:not([size])) {\\n font-size: var(--ae-size-m);\\n}\\n\\n:host([icon-only]) button {\\n padding: 0;\\n min-width: auto;\\n width: 2.286em;\\n height: 2.286em;\\n line-height: 1;\\n}\\n\\n:host([icon-only]) ::slotted(ae-icon) {\\n font-size: 1.5em;\\n}\\n\\n:host([active]) button {\\n background: var(--ae-color-solid-active);\\n border-color: var(--ae-color-border-hover);\\n color: var(--ae-color-on-solid-hover, var(--ae-color-on-solid));\\n}\\n\\n.btn-icon {\\n padding: 0;\\n min-width: auto;\\n width: 2.286em;\\n height: 2.286em;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n border-radius: var(--ae-radius-sm);\\n}\\n\\n.btn-icon.btn-lg {\\n width: 2.857em;\\n height: 2.857em;\\n}\\n\\n.btn-circle {\\n border-radius: var(--ae-radius-circle);\\n}\\n\\n:host([block]) {\\n display: block;\\n}\\n\\nbutton.btn-loading {\\n position: relative;\\n pointer-events: none;\\n color: transparent;\\n}\\n\\nbutton.btn-loading::before {\\n content: '';\\n position: absolute;\\n width: 1em;\\n height: 1em;\\n border: 2px solid currentColor;\\n border-top-color: transparent;\\n border-radius: var(--ae-radius-circle);\\n animation: btn-spin 0.6s linear infinite;\\n color: currentColor;\\n opacity: 0.8;\\n}\\n\\n@keyframes btn-spin {\\n to {\\n transform: rotate(360deg);\\n }\\n}\\n\\n.btn-icon-left {\\n margin-right: -2px;\\n}\\n\\n.btn-icon-right {\\n margin-left: -2px;\\n}\\n\\n\"", "export { default, default as Button } from './button';\nexport type { ButtonProps } from './button';\nexport type { ButtonColor, ButtonSize, ButtonVariant } from './defines';\n", "import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css';\nimport sizeCSS from '../styles/size.css';\nimport colorCSS from '../styles/color.css';\nimport buttonStyle from '../styles/components/button.css';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { ButtonColor, ButtonSize, ButtonVariant } from './defines';\nimport { prop } from 'aeico';\n\n/**\n * Button Component\n *\n * A customizable button component with multiple variants and sizes.\n * Supports theme and internationalization through mixins.\n *\n * @example\n * ```typescript\n * // Using the static create method\n * const button = Button.create({\n * variant: 'primary',\n * size: 'md'\n * })\n * ```\n *\n * @example\n * ```html\n * <!-- Using as Web Component -->\n * <ae-button variant=\"primary\" size=\"md\">Save</ae-button>\n * <ae-button variant=\"danger\" size=\"sm\">Delete</ae-button>\n * <ae-button variant=\"subtle\">Cancel</ae-button>\n * ```\n */\nclass Button extends AeicoComponent {\n protected static styles = [styleVariables, sizeCSS, colorCSS, buttonStyle];\n\n @prop({ type: String })\n color?: ButtonColor;\n\n @prop({ type: String })\n variant?: ButtonVariant;\n\n @prop({ type: String })\n size?: ButtonSize;\n\n @prop({ type: Boolean })\n disabled?: boolean;\n\n @prop({ type: String })\n type?: 'button' | 'submit' | 'reset';\n\n @prop({ type: Boolean })\n active?: boolean;\n\n @prop({ type: Boolean })\n block?: boolean;\n\n private _buttonElement: HTMLButtonElement | null = null;\n private _slotElement: HTMLSlotElement | null = null;\n private _autoAriaLabel = false;\n\n protected onMounted() {\n this._handleSlotChange();\n }\n\n private _handleSlotChange = () => {\n const nodes = this._slotElement?.assignedNodes() ?? [];\n // Icon-only: exactly one element (ae-icon) and no meaningful text nodes\n const elements = nodes.filter((n): n is Element => n.nodeType === Node.ELEMENT_NODE);\n const hasText = nodes.some(\n (n) => n.nodeType === Node.TEXT_NODE && n.textContent!.trim() !== '',\n );\n const isIconOnly =\n !hasText && elements.length === 1 && elements[0].tagName.toLowerCase() === 'ae-icon';\n\n if (isIconOnly) {\n this.setAttribute('icon-only', '');\n if (!this.hasAttribute('aria-label') || this._autoAriaLabel) {\n this.setAttribute('aria-label', elements[0].getAttribute('name') ?? '');\n this._autoAriaLabel = true;\n }\n } else {\n this.removeAttribute('icon-only');\n if (this._autoAriaLabel) {\n this.removeAttribute('aria-label');\n this._autoAriaLabel = false;\n }\n }\n };\n\n protected render() {\n return html(({ button, slot }) => {\n this._buttonElement = button(\n {\n type: this.type || 'button',\n disabled: this.disabled,\n part: 'button',\n 'aria-pressed': this.active,\n 'aria-disabled': this.disabled,\n },\n () => {\n this._slotElement = slot({ '@slotchange': this._handleSlotChange });\n },\n );\n });\n }\n\n /**\n * Programmatically click the button\n */\n click() {\n if (!this.disabled && this._buttonElement) {\n this._buttonElement.click();\n }\n }\n\n /**\n * Focus the button\n */\n focus() {\n if (this._buttonElement) {\n this._buttonElement.focus();\n }\n }\n\n /**\n * Blur the button\n */\n blur() {\n if (this._buttonElement) {\n this._buttonElement.blur();\n }\n }\n}\n\nButton.define('button');\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-button': Button;\n }\n}\n\nexport default Button;\nexport type ButtonProps = InferProps<typeof Button>;\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"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,4FAAAA,UAAAC,SAAA;AAAA,IAAAA,QAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAjB;AAAA,uFAAAC,UAAAC,SAAA;AAAA,IAAAA,QAAO,UAAU;AAAA;AAAA;;;ACAjB;AAAA,wFAAAC,UAAAC,SAAA;AAAA,IAAAA,QAAO,UAAU;AAAA;AAAA;;;ACAjB;AAAA,oGAAAC,UAAAC,SAAA;AAAA,IAAAA,QAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA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",
6
6
  "names": ["exports", "module", "exports", "module", "exports", "module", "exports", "module", "import_aeico", "styleVariables", "sizeCSS", "colorCSS", "buttonStyle"]
7
7
  }
package/dist/button.js CHANGED
@@ -124,7 +124,7 @@ var variables_default = `:root,
124
124
  --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);
125
125
  --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);
126
126
 
127
- /* Gray (neutral \u2014 base #6e6e6e) */
127
+ /* Gray (neutral - base #6e6e6e) */
128
128
  --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);
129
129
  --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);
130
130
  --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);
@@ -135,7 +135,7 @@ var variables_default = `:root,
135
135
  --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);
136
136
  --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);
137
137
 
138
- /* Slate (blue-gray \u2014 base #64748b, used for 'secondary') */
138
+ /* Slate (blue-gray - base #64748b, used for 'secondary') */
139
139
  --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);
140
140
  --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);
141
141
  --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);
@@ -171,7 +171,7 @@ var variables_default = `:root,
171
171
 
172
172
  :root,
173
173
  :host {
174
- /* Hover / active mix (light default \u2014 overridden in \xA7 6 dark) */
174
+ /* Hover / active mix (light default - overridden in \xA7 6 dark) */
175
175
  --ae-color-mix-hover: black 10%;
176
176
  --ae-color-mix-active: black 20%;
177
177
 
@@ -205,7 +205,7 @@ var variables_default = `:root,
205
205
  --ae-color-info-active: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));
206
206
  --ae-color-info-disabled: color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));
207
207
 
208
- /* Secondary (Slate) \u2014 base differs per theme, overridden in \xA7 6 dark */
208
+ /* Secondary (Slate) - base differs per theme, overridden in \xA7 6 dark */
209
209
  --ae-color-secondary: var(--ae-slate-500);
210
210
  --ae-color-secondary-hover: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));
211
211
  --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));
@@ -221,7 +221,7 @@ var variables_default = `:root,
221
221
  :host {
222
222
  color-scheme: light;
223
223
 
224
- /* Gray UI aliases \u2014 lighter palette steps for elements on white background */
224
+ /* Gray UI aliases - lighter palette steps for elements on white background */
225
225
  --ae-color-gray-dark: var(--ae-gray-400);
226
226
  --ae-color-gray: var(--ae-gray-300);
227
227
  --ae-color-gray-light: var(--ae-gray-200);
@@ -253,7 +253,7 @@ var variables_default = `:root,
253
253
  --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.30);
254
254
  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);
255
255
 
256
- /* Subtle intent tokens \u2014 light context */
256
+ /* Subtle intent tokens - light context */
257
257
  --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.08);
258
258
  --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.40);
259
259
  --ae-color-primary-text-emphasis: var(--ae-blue-700);
@@ -284,7 +284,7 @@ var variables_default = `:root,
284
284
  --ae-color-dark-bg-subtle: var(--ae-dark-100); /* opaque on white: ~#d6d8d9 */
285
285
  --ae-color-dark-border-subtle: var(--ae-dark-300); /* opaque on white: ~#85898c */
286
286
 
287
- /* Component tokens \u2014 light defaults */
287
+ /* Component tokens - light defaults */
288
288
  --ae-action-btn-bg: var(--ae-gray-200);
289
289
  --ae-action-btn-bg-hover: var(--ae-color-primary);
290
290
  --ae-action-btn-color: var(--ae-gray-600);
@@ -319,14 +319,12 @@ var variables_default = `:root,
319
319
  --ae-size-3xs: round(calc(var(--ae-size-2xs) / 1.125), 1px); /* 10px */
320
320
  }
321
321
 
322
- /* Border-radius tokens \u2014 shared across all components */
322
+ /* Border-radius tokens - shared across all components */
323
323
  :root,
324
324
  :host {
325
325
  /**
326
326
  * Unified border-radius hook for all components.
327
327
  *
328
- * Not set by default \u2014 each component falls back to its own --ae-radius-*
329
- * token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).
330
328
  *
331
329
  * Usage:
332
330
  * :root { --ae-border-radius: 0; } // global: all components square
@@ -348,7 +346,7 @@ var variables_default = `:root,
348
346
  --ae-radius-circle: 50%;
349
347
  }
350
348
 
351
- /* Layout tokens \u2014 defined on :root so all light DOM elements can use them */
349
+ /* Layout tokens - defined on :root so all light DOM elements can use them */
352
350
  :root,
353
351
  :host {
354
352
  --container-max-width: 1280px;
@@ -361,18 +359,18 @@ var variables_default = `:root,
361
359
  :host-context([theme="dark"]) {
362
360
  color-scheme: dark;
363
361
 
364
- /* Hover / active \u2014 slightly gentler on dark backgrounds */
362
+ /* Hover / active - slightly gentler on dark backgrounds */
365
363
  --ae-color-mix-hover: black 8%;
366
364
  --ae-color-mix-active: black 16%;
367
365
 
368
- /* Gray UI aliases \u2014 darker palette steps for elements on dark background */
366
+ /* Gray UI aliases - darker palette steps for elements on dark background */
369
367
  --ae-color-gray-dark: var(--ae-gray-800);
370
368
  --ae-color-gray: var(--ae-gray-700);
371
369
  --ae-color-gray-light: var(--ae-gray-600);
372
370
  --ae-color-gray-lighter: var(--ae-gray-500);
373
371
  --ae-color-gray-lightest: var(--ae-gray-400);
374
372
 
375
- /* Secondary \u2014 deeper base on dark background */
373
+ /* Secondary - deeper base on dark background */
376
374
  --ae-color-secondary: var(--ae-slate-700);
377
375
  --ae-color-secondary-text: var(--ae-slate-300);
378
376
 
@@ -401,7 +399,7 @@ var variables_default = `:root,
401
399
  --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.25);
402
400
  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);
403
401
 
404
- /* Subtle intent tokens \u2014 dark context (more alpha, lighter text-emphasis) */
402
+ /* Subtle intent tokens - dark context (more alpha, lighter text-emphasis) */
405
403
  --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.10);
406
404
  --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.30);
407
405
  --ae-color-primary-text-emphasis: var(--ae-blue-300);
@@ -432,7 +430,7 @@ var variables_default = `:root,
432
430
  --ae-color-dark-bg-subtle: rgb(from var(--ae-dark) r g b / 0.30);
433
431
  --ae-color-dark-border-subtle: rgb(from var(--ae-dark) r g b / 0.50);
434
432
 
435
- /* Component tokens \u2014 dark overrides */
433
+ /* Component tokens - dark overrides */
436
434
  --ae-action-btn-bg: var(--ae-color-gray);
437
435
  --ae-action-btn-bg-hover: color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));
438
436
  --ae-action-btn-color: var(--ae-gray-400);
@@ -567,7 +565,6 @@ button:disabled {
567
565
  background: var(--ae-color-subtle-hover);
568
566
  }
569
567
 
570
- /* Icon-only: single ae-icon child \u2192 square compact layout */
571
568
  :host([icon-only]) {
572
569
  display: inline-flex;
573
570
  }
@@ -655,19 +652,12 @@ button.btn-loading::before {
655
652
 
656
653
  // src/aeico-component.ts
657
654
  import { AeicoElement } from "aeico";
658
-
659
- // src/utils.ts
660
- function toKebab(str) {
661
- const cleaned = str.replace(/^[_\d]+/, "");
662
- return cleaned.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
663
- }
664
-
665
- // src/aeico-component.ts
666
655
  var TAG_NAME_PREFIX = "ae";
667
656
  var AeicoComponent = class extends AeicoElement {
668
- static register(name) {
669
- const tagName = name || `${TAG_NAME_PREFIX}-${this.tagName || toKebab(this.name)}`;
670
- super.register(tagName);
657
+ static define(name) {
658
+ const prefix = `${TAG_NAME_PREFIX}-`;
659
+ const tagName = name.startsWith(prefix) ? name : `${prefix}${name}`;
660
+ super.define(tagName);
671
661
  }
672
662
  };
673
663
  var aeico_component_default = AeicoComponent;
@@ -765,7 +755,7 @@ __decorateElement(_init, 5, "active", _active_dec, Button);
765
755
  __decorateElement(_init, 5, "block", _block_dec, Button);
766
756
  __decoratorMetadata(_init, Button);
767
757
  __publicField(Button, "styles", [variables_default, size_default, color_default, button_default]);
768
- Button.register();
758
+ Button.define("button");
769
759
  var button_default2 = Button;
770
760
  export {
771
761
  button_default2 as Button,