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/divider.js CHANGED
@@ -50,19 +50,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
50
50
 
51
51
  // src/aeico-component.ts
52
52
  import { AeicoElement } from "aeico";
53
-
54
- // src/utils.ts
55
- function toKebab(str) {
56
- const cleaned = str.replace(/^[_\d]+/, "");
57
- return cleaned.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
58
- }
59
-
60
- // src/aeico-component.ts
61
53
  var TAG_NAME_PREFIX = "ae";
62
54
  var AeicoComponent = class extends AeicoElement {
63
- static register(name) {
64
- const tagName = name || `${TAG_NAME_PREFIX}-${this.tagName || toKebab(this.name)}`;
65
- super.register(tagName);
55
+ static define(name) {
56
+ const prefix = `${TAG_NAME_PREFIX}-`;
57
+ const tagName = name.startsWith(prefix) ? name : `${prefix}${name}`;
58
+ super.define(tagName);
66
59
  }
67
60
  };
68
61
  var aeico_component_default = AeicoComponent;
@@ -144,7 +137,7 @@ var variables_default = `:root,
144
137
  --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);
145
138
  --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);
146
139
 
147
- /* Gray (neutral \u2014 base #6e6e6e) */
140
+ /* Gray (neutral - base #6e6e6e) */
148
141
  --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);
149
142
  --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);
150
143
  --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);
@@ -155,7 +148,7 @@ var variables_default = `:root,
155
148
  --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);
156
149
  --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);
157
150
 
158
- /* Slate (blue-gray \u2014 base #64748b, used for 'secondary') */
151
+ /* Slate (blue-gray - base #64748b, used for 'secondary') */
159
152
  --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);
160
153
  --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);
161
154
  --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);
@@ -191,7 +184,7 @@ var variables_default = `:root,
191
184
 
192
185
  :root,
193
186
  :host {
194
- /* Hover / active mix (light default \u2014 overridden in \xA7 6 dark) */
187
+ /* Hover / active mix (light default - overridden in \xA7 6 dark) */
195
188
  --ae-color-mix-hover: black 10%;
196
189
  --ae-color-mix-active: black 20%;
197
190
 
@@ -225,7 +218,7 @@ var variables_default = `:root,
225
218
  --ae-color-info-active: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));
226
219
  --ae-color-info-disabled: color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));
227
220
 
228
- /* Secondary (Slate) \u2014 base differs per theme, overridden in \xA7 6 dark */
221
+ /* Secondary (Slate) - base differs per theme, overridden in \xA7 6 dark */
229
222
  --ae-color-secondary: var(--ae-slate-500);
230
223
  --ae-color-secondary-hover: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));
231
224
  --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));
@@ -241,7 +234,7 @@ var variables_default = `:root,
241
234
  :host {
242
235
  color-scheme: light;
243
236
 
244
- /* Gray UI aliases \u2014 lighter palette steps for elements on white background */
237
+ /* Gray UI aliases - lighter palette steps for elements on white background */
245
238
  --ae-color-gray-dark: var(--ae-gray-400);
246
239
  --ae-color-gray: var(--ae-gray-300);
247
240
  --ae-color-gray-light: var(--ae-gray-200);
@@ -273,7 +266,7 @@ var variables_default = `:root,
273
266
  --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.30);
274
267
  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);
275
268
 
276
- /* Subtle intent tokens \u2014 light context */
269
+ /* Subtle intent tokens - light context */
277
270
  --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.08);
278
271
  --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.40);
279
272
  --ae-color-primary-text-emphasis: var(--ae-blue-700);
@@ -304,7 +297,7 @@ var variables_default = `:root,
304
297
  --ae-color-dark-bg-subtle: var(--ae-dark-100); /* opaque on white: ~#d6d8d9 */
305
298
  --ae-color-dark-border-subtle: var(--ae-dark-300); /* opaque on white: ~#85898c */
306
299
 
307
- /* Component tokens \u2014 light defaults */
300
+ /* Component tokens - light defaults */
308
301
  --ae-action-btn-bg: var(--ae-gray-200);
309
302
  --ae-action-btn-bg-hover: var(--ae-color-primary);
310
303
  --ae-action-btn-color: var(--ae-gray-600);
@@ -339,14 +332,12 @@ var variables_default = `:root,
339
332
  --ae-size-3xs: round(calc(var(--ae-size-2xs) / 1.125), 1px); /* 10px */
340
333
  }
341
334
 
342
- /* Border-radius tokens \u2014 shared across all components */
335
+ /* Border-radius tokens - shared across all components */
343
336
  :root,
344
337
  :host {
345
338
  /**
346
339
  * Unified border-radius hook for all components.
347
340
  *
348
- * Not set by default \u2014 each component falls back to its own --ae-radius-*
349
- * token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).
350
341
  *
351
342
  * Usage:
352
343
  * :root { --ae-border-radius: 0; } // global: all components square
@@ -368,7 +359,7 @@ var variables_default = `:root,
368
359
  --ae-radius-circle: 50%;
369
360
  }
370
361
 
371
- /* Layout tokens \u2014 defined on :root so all light DOM elements can use them */
362
+ /* Layout tokens - defined on :root so all light DOM elements can use them */
372
363
  :root,
373
364
  :host {
374
365
  --container-max-width: 1280px;
@@ -381,18 +372,18 @@ var variables_default = `:root,
381
372
  :host-context([theme="dark"]) {
382
373
  color-scheme: dark;
383
374
 
384
- /* Hover / active \u2014 slightly gentler on dark backgrounds */
375
+ /* Hover / active - slightly gentler on dark backgrounds */
385
376
  --ae-color-mix-hover: black 8%;
386
377
  --ae-color-mix-active: black 16%;
387
378
 
388
- /* Gray UI aliases \u2014 darker palette steps for elements on dark background */
379
+ /* Gray UI aliases - darker palette steps for elements on dark background */
389
380
  --ae-color-gray-dark: var(--ae-gray-800);
390
381
  --ae-color-gray: var(--ae-gray-700);
391
382
  --ae-color-gray-light: var(--ae-gray-600);
392
383
  --ae-color-gray-lighter: var(--ae-gray-500);
393
384
  --ae-color-gray-lightest: var(--ae-gray-400);
394
385
 
395
- /* Secondary \u2014 deeper base on dark background */
386
+ /* Secondary - deeper base on dark background */
396
387
  --ae-color-secondary: var(--ae-slate-700);
397
388
  --ae-color-secondary-text: var(--ae-slate-300);
398
389
 
@@ -421,7 +412,7 @@ var variables_default = `:root,
421
412
  --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.25);
422
413
  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);
423
414
 
424
- /* Subtle intent tokens \u2014 dark context (more alpha, lighter text-emphasis) */
415
+ /* Subtle intent tokens - dark context (more alpha, lighter text-emphasis) */
425
416
  --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.10);
426
417
  --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.30);
427
418
  --ae-color-primary-text-emphasis: var(--ae-blue-300);
@@ -452,7 +443,7 @@ var variables_default = `:root,
452
443
  --ae-color-dark-bg-subtle: rgb(from var(--ae-dark) r g b / 0.30);
453
444
  --ae-color-dark-border-subtle: rgb(from var(--ae-dark) r g b / 0.50);
454
445
 
455
- /* Component tokens \u2014 dark overrides */
446
+ /* Component tokens - dark overrides */
456
447
  --ae-action-btn-bg: var(--ae-color-gray);
457
448
  --ae-action-btn-bg-hover: color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));
458
449
  --ae-action-btn-color: var(--ae-gray-400);
@@ -466,7 +457,7 @@ var variables_default = `:root,
466
457
  var color_default = ':host {\n --ae-color-solid: var(--ae-color-gray);\n --ae-color-solid-hover: color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-hover));\n --ae-color-solid-active: color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-active));\n --ae-color-on-solid: var(--ae-color-text-main);\n --ae-color-border: var(--ae-color-gray);\n --ae-color-border-hover: color-mix(in srgb, var(--ae-color-border), var(--ae-color-mix-hover));\n --ae-color-accent: var(--ae-color-text-muted);\n --ae-color-accent-hover: var(--ae-color-text-main);\n --ae-color-subtle: var(--ae-border-subtle);\n --ae-color-subtle-hover: var(--ae-border-default);\n --ae-color-bg-subtle: var(--ae-border-subtle);\n --ae-color-text-subtle: var(--ae-color-text-muted);\n --ae-color-border-subtle: var(--ae-border-default);\n}\n\n:host([color="primary"]) {\n --ae-color-solid: var(--ae-color-primary);\n --ae-color-on-solid: white;\n --ae-color-border: var(--ae-color-primary);\n --ae-color-accent: var(--ae-color-text-link);\n --ae-color-accent-hover: var(--ae-color-text-link-hover);\n --ae-color-subtle: var(--ae-color-primary-bg-subtle);\n --ae-color-subtle-hover: rgb(from var(--ae-blue) r g b / 0.15);\n --ae-color-bg-subtle: var(--ae-color-primary-bg-subtle);\n --ae-color-text-subtle: var(--ae-color-primary-text-emphasis);\n --ae-color-border-subtle: var(--ae-color-primary-border-subtle);\n}\n\n:host([color="secondary"]) {\n --ae-color-solid: var(--ae-color-secondary);\n --ae-color-on-solid: white;\n --ae-color-border: var(--ae-color-secondary-hover);\n --ae-color-accent: var(--ae-color-secondary-text-emphasis);\n --ae-color-accent-hover: var(--ae-color-text-main);\n --ae-color-subtle: rgb(from var(--ae-slate) r g b / 0.06);\n --ae-color-subtle-hover: rgb(from var(--ae-slate) r g b / 0.12);\n --ae-color-bg-subtle: var(--ae-color-secondary-bg-subtle);\n --ae-color-text-subtle: var(--ae-color-secondary-text-emphasis);\n --ae-color-border-subtle: var(--ae-color-secondary-border-subtle);\n}\n\n:host([color="success"]) {\n --ae-color-solid: var(--ae-color-success);\n --ae-color-on-solid: white;\n --ae-color-border: var(--ae-color-success);\n --ae-color-accent: var(--ae-color-success-text-emphasis);\n --ae-color-accent-hover: var(--ae-color-success-hover);\n --ae-color-subtle: var(--ae-color-success-bg-subtle);\n --ae-color-subtle-hover: rgb(from var(--ae-green) r g b / 0.15);\n --ae-color-bg-subtle: var(--ae-color-success-bg-subtle);\n --ae-color-text-subtle: var(--ae-color-success-text-emphasis);\n --ae-color-border-subtle: var(--ae-color-success-border-subtle);\n}\n\n:host([color="danger"]) {\n --ae-color-solid: var(--ae-color-danger);\n --ae-color-on-solid: white;\n --ae-color-border: var(--ae-color-danger);\n --ae-color-accent: var(--ae-color-danger-text-emphasis);\n --ae-color-accent-hover: var(--ae-color-danger-hover);\n --ae-color-subtle: var(--ae-color-danger-bg-subtle);\n --ae-color-subtle-hover: rgb(from var(--ae-red) r g b / 0.15);\n --ae-color-bg-subtle: var(--ae-color-danger-bg-subtle);\n --ae-color-text-subtle: var(--ae-color-danger-text-emphasis);\n --ae-color-border-subtle: var(--ae-color-danger-border-subtle);\n}\n\n:host([color="warning"]) {\n --ae-color-solid: var(--ae-color-warning);\n --ae-color-on-solid: var(--ae-gray-900);\n --ae-color-border: var(--ae-color-warning);\n --ae-color-accent: var(--ae-color-warning-text-emphasis);\n --ae-color-accent-hover: var(--ae-color-warning-hover);\n --ae-color-subtle: var(--ae-color-warning-bg-subtle);\n --ae-color-subtle-hover: rgb(from var(--ae-yellow) r g b / 0.15);\n --ae-color-bg-subtle: var(--ae-color-warning-bg-subtle);\n --ae-color-text-subtle: var(--ae-color-warning-text-emphasis);\n --ae-color-border-subtle: var(--ae-color-warning-border-subtle);\n}\n\n:host([color="info"]) {\n --ae-color-solid: var(--ae-color-info);\n --ae-color-on-solid: white;\n --ae-color-border: var(--ae-color-info);\n --ae-color-accent: var(--ae-color-info-text-emphasis);\n --ae-color-accent-hover: var(--ae-color-info-hover);\n --ae-color-subtle: var(--ae-color-info-bg-subtle);\n --ae-color-subtle-hover: rgb(from var(--ae-cyan) r g b / 0.15);\n --ae-color-bg-subtle: var(--ae-color-info-bg-subtle);\n --ae-color-text-subtle: var(--ae-color-info-text-emphasis);\n --ae-color-border-subtle: var(--ae-color-info-border-subtle);\n}\n\n:host([color="light"]) {\n --ae-color-solid: var(--ae-light);\n --ae-color-on-solid: var(--ae-gray-900);\n --ae-color-border: var(--ae-border-hover);\n --ae-color-subtle: var(--ae-color-light-bg-subtle);\n --ae-color-subtle-hover: var(--ae-color-light-border-subtle);\n --ae-color-bg-subtle: var(--ae-color-light-bg-subtle);\n --ae-color-text-subtle: var(--ae-color-text-muted);\n --ae-color-border-subtle: var(--ae-color-light-border-subtle);\n}\n\n:host([color="dark"]) {\n --ae-color-solid: var(--ae-dark-500);\n --ae-color-on-solid: white;\n --ae-color-border: var(--ae-dark-500);\n --ae-color-accent: var(--ae-color-text-main);\n --ae-color-accent-hover: var(--ae-color-text-main);\n --ae-color-subtle: var(--ae-color-dark-bg-subtle);\n --ae-color-subtle-hover: var(--ae-color-dark-border-subtle);\n --ae-color-bg-subtle: var(--ae-color-dark-bg-subtle);\n --ae-color-text-subtle: var(--ae-color-text-main);\n --ae-color-border-subtle: var(--ae-color-dark-border-subtle);\n}\n';
467
458
 
468
459
  // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/divider.css
469
- var divider_default = ":host {\n display: block;\n width: 100%;\n height: var(--thickness, 1px);\n flex-shrink: 0;\n\n /* Override color.css default \u2014 divider uses the subtle border token when no [color] is set */\n --ae-color-border: var(--ae-border-default);\n\n background: var(--ae-color-border);\n}\n\n:host([vertical]) {\n display: inline-block;\n width: var(--thickness, 1px);\n height: 1lh;\n vertical-align: middle;\n}\n";
460
+ var divider_default = ":host {\n display: block;\n width: 100%;\n height: var(--thickness, 1px);\n flex-shrink: 0;\n\n /* Override color.css default - divider uses the subtle border token when no [color] is set */\n --ae-color-border: var(--ae-border-default);\n\n background: var(--ae-color-border);\n}\n\n:host([vertical]) {\n display: inline-block;\n width: var(--thickness, 1px);\n height: 1lh;\n vertical-align: middle;\n}\n";
470
461
 
471
462
  // src/divider/divider.ts
472
463
  import { prop } from "aeico";
@@ -494,9 +485,8 @@ __decorateElement(_init, 4, "vertical", _vertical_dec, Divider, _vertical);
494
485
  __decorateElement(_init, 4, "thickness", _thickness_dec, Divider, _thickness);
495
486
  __decorateElement(_init, 4, "color", _color_dec, Divider, _color);
496
487
  __decoratorMetadata(_init, Divider);
497
- __publicField(Divider, "tagName", "divider");
498
488
  __publicField(Divider, "styles", [variables_default, color_default, divider_default]);
499
- Divider.register();
489
+ Divider.define("divider");
500
490
  var divider_default2 = Divider;
501
491
  export {
502
492
  divider_default2 as Divider,
package/dist/divider.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../src/aeico-component.ts", "../src/utils.ts", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/variables.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/color.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/divider.css", "../src/divider/divider.ts"],
4
- "sourcesContent": ["\uFEFFimport { AeicoElement } from 'aeico';\nimport { toKebab } from './utils';\n\nconst TAG_NAME_PREFIX = 'ae';\n\n/**\n * AeicoComponent is the base class for all built-in Aeico components.\n */\nclass AeicoComponent extends AeicoElement {\n static register(name?: string) {\n const tagName = name || `${TAG_NAME_PREFIX}-${this.tagName || toKebab(this.name)}`;\n\n super.register(tagName);\n }\n}\n\nexport default AeicoComponent;\n", "export const SVG_NS = 'http://www.w3.org/2000/svg';\n\nexport function toKebab(str: string): string {\n const cleaned = str.replace(/^[_\\d]+/, '');\n\n return cleaned.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n}\n", "export default \":root,\\n:host {\\n --ae-font-sans-serif: system-ui, -apple-system, \\\"Segoe UI\\\", Roboto, \\\"Helvetica Neue\\\",\\n \\\"Noto Sans\\\", \\\"Liberation Sans\\\", Arial, sans-serif,\\n \\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\", \\\"Noto Color Emoji\\\";\\n --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,\\n \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace;\\n font-family: var(--ae-font-sans-serif);\\n --ae-blue: #0e639c;\\n --ae-green: #28a745;\\n --ae-red: #dc3545;\\n --ae-yellow: #ffc107;\\n --ae-cyan: #17a2b8;\\n --ae-gray: #6e6e6e;\\n --ae-slate: #64748b;\\n --ae-dark: #343a40;\\n --ae-light: #f8f9fa;\\n}\\n\\n:root,\\n:host {\\n /* Blue */\\n --ae-blue-100: color-mix(in srgb, var(--ae-blue) 20%, white);\\n --ae-blue-200: color-mix(in srgb, var(--ae-blue) 40%, white);\\n --ae-blue-300: color-mix(in srgb, var(--ae-blue) 60%, white);\\n --ae-blue-400: color-mix(in srgb, var(--ae-blue) 80%, white);\\n --ae-blue-500: var(--ae-blue);\\n --ae-blue-600: color-mix(in srgb, var(--ae-blue) 80%, black);\\n --ae-blue-700: color-mix(in srgb, var(--ae-blue) 60%, black);\\n --ae-blue-800: color-mix(in srgb, var(--ae-blue) 40%, black);\\n --ae-blue-900: color-mix(in srgb, var(--ae-blue) 20%, black);\\n\\n /* Green */\\n --ae-green-100: color-mix(in srgb, var(--ae-green) 20%, white);\\n --ae-green-200: color-mix(in srgb, var(--ae-green) 40%, white);\\n --ae-green-300: color-mix(in srgb, var(--ae-green) 60%, white);\\n --ae-green-400: color-mix(in srgb, var(--ae-green) 80%, white);\\n --ae-green-500: var(--ae-green);\\n --ae-green-600: color-mix(in srgb, var(--ae-green) 80%, black);\\n --ae-green-700: color-mix(in srgb, var(--ae-green) 60%, black);\\n --ae-green-800: color-mix(in srgb, var(--ae-green) 40%, black);\\n --ae-green-900: color-mix(in srgb, var(--ae-green) 20%, black);\\n\\n /* Red */\\n --ae-red-100: color-mix(in srgb, var(--ae-red) 20%, white);\\n --ae-red-200: color-mix(in srgb, var(--ae-red) 40%, white);\\n --ae-red-300: color-mix(in srgb, var(--ae-red) 60%, white);\\n --ae-red-400: color-mix(in srgb, var(--ae-red) 80%, white);\\n --ae-red-500: var(--ae-red);\\n --ae-red-600: color-mix(in srgb, var(--ae-red) 80%, black);\\n --ae-red-700: color-mix(in srgb, var(--ae-red) 60%, black);\\n --ae-red-800: color-mix(in srgb, var(--ae-red) 40%, black);\\n --ae-red-900: color-mix(in srgb, var(--ae-red) 20%, black);\\n\\n /* Yellow */\\n --ae-yellow-100: color-mix(in srgb, var(--ae-yellow) 20%, white);\\n --ae-yellow-200: color-mix(in srgb, var(--ae-yellow) 40%, white);\\n --ae-yellow-300: color-mix(in srgb, var(--ae-yellow) 60%, white);\\n --ae-yellow-400: color-mix(in srgb, var(--ae-yellow) 80%, white);\\n --ae-yellow-500: var(--ae-yellow);\\n --ae-yellow-600: color-mix(in srgb, var(--ae-yellow) 80%, black);\\n --ae-yellow-700: color-mix(in srgb, var(--ae-yellow) 60%, black);\\n --ae-yellow-800: color-mix(in srgb, var(--ae-yellow) 40%, black);\\n --ae-yellow-900: color-mix(in srgb, var(--ae-yellow) 20%, black);\\n\\n /* Cyan */\\n --ae-cyan-100: color-mix(in srgb, var(--ae-cyan) 20%, white);\\n --ae-cyan-200: color-mix(in srgb, var(--ae-cyan) 40%, white);\\n --ae-cyan-300: color-mix(in srgb, var(--ae-cyan) 60%, white);\\n --ae-cyan-400: color-mix(in srgb, var(--ae-cyan) 80%, white);\\n --ae-cyan-500: var(--ae-cyan);\\n --ae-cyan-600: color-mix(in srgb, var(--ae-cyan) 80%, black);\\n --ae-cyan-700: color-mix(in srgb, var(--ae-cyan) 60%, black);\\n --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);\\n --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);\\n\\n /* Gray (neutral \u2014 base #6e6e6e) */\\n --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);\\n --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);\\n --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);\\n --ae-gray-400: color-mix(in srgb, var(--ae-gray) 80%, white);\\n --ae-gray-500: var(--ae-gray);\\n --ae-gray-600: color-mix(in srgb, var(--ae-gray) 80%, black);\\n --ae-gray-700: color-mix(in srgb, var(--ae-gray) 60%, black);\\n --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);\\n --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);\\n\\n /* Slate (blue-gray \u2014 base #64748b, used for 'secondary') */\\n --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);\\n --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);\\n --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);\\n --ae-slate-400: color-mix(in srgb, var(--ae-slate) 80%, white);\\n --ae-slate-500: var(--ae-slate);\\n --ae-slate-600: color-mix(in srgb, var(--ae-slate) 80%, black);\\n --ae-slate-700: color-mix(in srgb, var(--ae-slate) 60%, black);\\n --ae-slate-800: color-mix(in srgb, var(--ae-slate) 40%, black);\\n --ae-slate-900: color-mix(in srgb, var(--ae-slate) 20%, black);\\n\\n /* Dark (base #343a40) */\\n --ae-dark-100: color-mix(in srgb, var(--ae-dark) 20%, white);\\n --ae-dark-200: color-mix(in srgb, var(--ae-dark) 40%, white);\\n --ae-dark-300: color-mix(in srgb, var(--ae-dark) 60%, white);\\n --ae-dark-400: color-mix(in srgb, var(--ae-dark) 80%, white);\\n --ae-dark-500: var(--ae-dark);\\n --ae-dark-600: color-mix(in srgb, var(--ae-dark) 80%, black);\\n --ae-dark-700: color-mix(in srgb, var(--ae-dark) 60%, black);\\n --ae-dark-800: color-mix(in srgb, var(--ae-dark) 40%, black);\\n --ae-dark-900: color-mix(in srgb, var(--ae-dark) 20%, black);\\n\\n /* Light (base #f8f9fa) */\\n --ae-light-100: color-mix(in srgb, var(--ae-light) 20%, white);\\n --ae-light-200: color-mix(in srgb, var(--ae-light) 40%, white);\\n --ae-light-300: color-mix(in srgb, var(--ae-light) 60%, white);\\n --ae-light-400: color-mix(in srgb, var(--ae-light) 80%, white);\\n --ae-light-500: var(--ae-light);\\n --ae-light-600: color-mix(in srgb, var(--ae-light) 80%, black);\\n --ae-light-700: color-mix(in srgb, var(--ae-light) 60%, black);\\n --ae-light-800: color-mix(in srgb, var(--ae-light) 40%, black);\\n --ae-light-900: color-mix(in srgb, var(--ae-light) 20%, black);\\n}\\n\\n:root,\\n:host {\\n /* Hover / active mix (light default \u2014 overridden in \u00A7 6 dark) */\\n --ae-color-mix-hover: black 10%;\\n --ae-color-mix-active: black 20%;\\n\\n /* Primary (Blue) */\\n --ae-color-primary: var(--ae-blue-500);\\n --ae-color-primary-hover: color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-hover));\\n --ae-color-primary-active: color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-active));\\n --ae-color-primary-disabled: color-mix(in srgb, var(--ae-blue) 50%, var(--ae-gray-500));\\n\\n /* Success (Green) */\\n --ae-color-success: var(--ae-green-500);\\n --ae-color-success-hover: color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-hover));\\n --ae-color-success-active: color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-active));\\n --ae-color-success-disabled: color-mix(in srgb, var(--ae-green) 50%, var(--ae-gray-500));\\n\\n /* Danger (Red) */\\n --ae-color-danger: var(--ae-red-500);\\n --ae-color-danger-hover: color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-hover));\\n --ae-color-danger-active: color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-active));\\n --ae-color-danger-disabled: color-mix(in srgb, var(--ae-red) 50%, var(--ae-gray-500));\\n\\n /* Warning (Yellow) */\\n --ae-color-warning: var(--ae-yellow-500);\\n --ae-color-warning-hover: color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-hover));\\n --ae-color-warning-active: color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-active));\\n --ae-color-warning-disabled: color-mix(in srgb, var(--ae-yellow) 50%, var(--ae-gray-500));\\n\\n /* Info (Cyan) */\\n --ae-color-info: var(--ae-cyan-500);\\n --ae-color-info-hover: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-hover));\\n --ae-color-info-active: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));\\n --ae-color-info-disabled: color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));\\n\\n /* Secondary (Slate) \u2014 base differs per theme, overridden in \u00A7 6 dark */\\n --ae-color-secondary: var(--ae-slate-500);\\n --ae-color-secondary-hover: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));\\n --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));\\n --ae-color-secondary-text: var(--ae-slate-700);\\n}\\n\\n\\n.theme-light,\\n:root[theme=\\\"light\\\"],\\n:host([theme=\\\"light\\\"]),\\n:host-context([theme=\\\"light\\\"]),\\n:where(:root),\\n:host {\\n color-scheme: light;\\n\\n /* Gray UI aliases \u2014 lighter palette steps for elements on white background */\\n --ae-color-gray-dark: var(--ae-gray-400);\\n --ae-color-gray: var(--ae-gray-300);\\n --ae-color-gray-light: var(--ae-gray-200);\\n --ae-color-gray-lighter: var(--ae-gray-100);\\n --ae-color-gray-lightest: color-mix(in srgb, var(--ae-gray) 10%, white);\\n\\n /* Text */\\n --ae-color-text-main: var(--ae-dark-700);\\n --ae-color-text-muted: var(--ae-gray-600);\\n --ae-color-text-disabled: var(--ae-gray-300);\\n --ae-color-text-link: var(--ae-blue-500);\\n --ae-color-text-link-hover: var(--ae-blue-700);\\n\\n /* Surfaces */\\n --ae-surface-sunken: var(--ae-light-500);\\n --ae-surface-base: white;\\n --ae-surface-raised: var(--ae-light-500);\\n --ae-surface-overlay: white;\\n --ae-color-overlay: rgba(0, 0, 0, 0.4);\\n\\n /* Borders */\\n --ae-border-subtle: rgba(0, 0, 0, 0.08);\\n --ae-border-default: rgba(0, 0, 0, 0.15);\\n --ae-border-hover: rgba(0, 0, 0, 0.25);\\n --ae-border-focus: var(--ae-color-primary);\\n --ae-border-disabled: rgba(0, 0, 0, 0.06);\\n\\n /* Focus ring */\\n --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.30);\\n --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);\\n\\n /* Subtle intent tokens \u2014 light context */\\n --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.08);\\n --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.40);\\n --ae-color-primary-text-emphasis: var(--ae-blue-700);\\n\\n --ae-color-success-bg-subtle: rgb(from var(--ae-green) r g b / 0.08);\\n --ae-color-success-border-subtle: rgb(from var(--ae-green) r g b / 0.40);\\n --ae-color-success-text-emphasis: var(--ae-green-700);\\n\\n --ae-color-danger-bg-subtle: rgb(from var(--ae-red) r g b / 0.08);\\n --ae-color-danger-border-subtle: rgb(from var(--ae-red) r g b / 0.40);\\n --ae-color-danger-text-emphasis: var(--ae-red-700);\\n\\n --ae-color-warning-bg-subtle: rgb(from var(--ae-yellow) r g b / 0.08);\\n --ae-color-warning-border-subtle: rgb(from var(--ae-yellow) r g b / 0.40);\\n --ae-color-warning-text-emphasis: var(--ae-yellow-700);\\n\\n --ae-color-info-bg-subtle: rgb(from var(--ae-cyan) r g b / 0.08);\\n --ae-color-info-border-subtle: rgb(from var(--ae-cyan) r g b / 0.40);\\n --ae-color-info-text-emphasis: var(--ae-cyan-700);\\n\\n --ae-color-secondary-bg-subtle: rgb(from var(--ae-slate) r g b / 0.08);\\n --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.40);\\n --ae-color-secondary-text-emphasis: var(--ae-slate-700);\\n\\n --ae-color-light-bg-subtle: var(--ae-gray-100); /* opaque on white: ~#e2e2e2 */\\n --ae-color-light-border-subtle: var(--ae-gray-200); /* opaque on white: ~#c4c4c4 */\\n\\n --ae-color-dark-bg-subtle: var(--ae-dark-100); /* opaque on white: ~#d6d8d9 */\\n --ae-color-dark-border-subtle: var(--ae-dark-300); /* opaque on white: ~#85898c */\\n\\n /* Component tokens \u2014 light defaults */\\n --ae-action-btn-bg: var(--ae-gray-200);\\n --ae-action-btn-bg-hover: var(--ae-color-primary);\\n --ae-action-btn-color: var(--ae-gray-600);\\n --ae-action-btn-color-hover: white;\\n\\n --ae-clear-btn-bg-hover: var(--ae-color-danger);\\n --ae-clear-btn-color-hover: white;\\n\\n --ae-reset-btn-border-radius: var(--ae-radius-xs);\\n --ae-reset-btn-bg: var(--ae-action-btn-bg);\\n --ae-reset-btn-bg-hover: var(--ae-action-btn-bg-hover);\\n --ae-reset-btn-color: var(--ae-action-btn-color);\\n --ae-reset-btn-color-hover: var(--ae-action-btn-color-hover);\\n --ae-reset-btn-transition: all 0.12s;\\n\\n --ae-clear-btn-border-radius: var(--ae-radius-xs);\\n --ae-clear-btn-bg: var(--ae-action-btn-bg);\\n --ae-clear-btn-color: var(--ae-action-btn-color);\\n --ae-clear-btn-transition: all 0.12s;\\n}\\n\\n:root,\\n:host {\\n --ae-size-scale: 1;\\n --ae-size-base: calc(1rem * var(--ae-size-scale)); /* 16px */\\n --ae-size-xl: round(calc(var(--ae-size-l) * 1.125), 1px); /* 23px */\\n --ae-size-l: round(calc(var(--ae-size-m) * 1.125 * 1.125), 1px); /* 20px */\\n --ae-size-m: var(--ae-size-base); /* 16px */\\n --ae-size-s: round(calc(var(--ae-size-m) / 1.125), 1px); /* 14px */\\n --ae-size-xs: round(calc(var(--ae-size-s) / 1.125), 1px); /* 12px */\\n --ae-size-2xs: round(calc(var(--ae-size-xs) / 1.125), 1px); /* 11px */\\n --ae-size-3xs: round(calc(var(--ae-size-2xs) / 1.125), 1px); /* 10px */\\n}\\n\\n/* Border-radius tokens \u2014 shared across all components */\\n:root,\\n:host {\\n /**\\n * Unified border-radius hook for all components.\\n *\\n * Not set by default \u2014 each component falls back to its own --ae-radius-*\\n * token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).\\n *\\n * Usage:\\n * :root { --ae-border-radius: 0; } // global: all components square\\n * :root { --ae-border-radius: 999px; } // global: all components pill\\n * ae-button { --ae-border-radius: 50%; } // scoped: only buttons circular\\n * .sidebar { --ae-border-radius: 8px; } // scoped: everything inside .sidebar\\n *\\n * To restore a component to its own default:\\n * ae-card { --ae-border-radius: initial; }\\n */\\n\\n --ae-radius-square: 0;\\n --ae-radius-xs: 2px;\\n --ae-radius-sm: 4px;\\n --ae-radius-md: 6px;\\n --ae-radius-lg: 8px;\\n --ae-radius-xl: 12px;\\n --ae-radius-pill: 999px;\\n --ae-radius-circle: 50%;\\n}\\n\\n/* Layout tokens \u2014 defined on :root so all light DOM elements can use them */\\n:root,\\n:host {\\n --container-max-width: 1280px;\\n --container-padding-x: 1.5rem;\\n}\\n\\n.theme-dark,\\n:root[theme=\\\"dark\\\"],\\n:host([theme=\\\"dark\\\"]),\\n:host-context([theme=\\\"dark\\\"]) {\\n color-scheme: dark;\\n\\n /* Hover / active \u2014 slightly gentler on dark backgrounds */\\n --ae-color-mix-hover: black 8%;\\n --ae-color-mix-active: black 16%;\\n\\n /* Gray UI aliases \u2014 darker palette steps for elements on dark background */\\n --ae-color-gray-dark: var(--ae-gray-800);\\n --ae-color-gray: var(--ae-gray-700);\\n --ae-color-gray-light: var(--ae-gray-600);\\n --ae-color-gray-lighter: var(--ae-gray-500);\\n --ae-color-gray-lightest: var(--ae-gray-400);\\n\\n /* Secondary \u2014 deeper base on dark background */\\n --ae-color-secondary: var(--ae-slate-700);\\n --ae-color-secondary-text: var(--ae-slate-300);\\n\\n /* Text */\\n --ae-color-text-main: white;\\n --ae-color-text-muted: var(--ae-gray-200);\\n --ae-color-text-disabled: var(--ae-gray-500);\\n --ae-color-text-link: var(--ae-blue-300);\\n --ae-color-text-link-hover: var(--ae-blue-200);\\n\\n /* Surfaces */\\n --ae-surface-sunken: var(--ae-gray-900);\\n --ae-surface-base: color-mix(in srgb, var(--ae-gray) 27%, black);\\n --ae-surface-raised: color-mix(in srgb, var(--ae-gray) 34%, black);\\n --ae-surface-overlay: color-mix(in srgb, var(--ae-gray) 38%, black);\\n --ae-color-overlay: rgba(0, 0, 0, 0.6);\\n\\n /* Borders */\\n --ae-border-subtle: rgba(255, 255, 255, 0.08);\\n --ae-border-default: rgba(255, 255, 255, 0.12);\\n --ae-border-hover: rgba(255, 255, 255, 0.20);\\n --ae-border-focus: var(--ae-color-primary);\\n --ae-border-disabled: rgba(255, 255, 255, 0.06);\\n\\n /* Focus ring */\\n --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.25);\\n --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);\\n\\n /* Subtle intent tokens \u2014 dark context (more alpha, lighter text-emphasis) */\\n --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.10);\\n --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.30);\\n --ae-color-primary-text-emphasis: var(--ae-blue-300);\\n\\n --ae-color-success-bg-subtle: rgb(from var(--ae-green) r g b / 0.10);\\n --ae-color-success-border-subtle: rgb(from var(--ae-green) r g b / 0.30);\\n --ae-color-success-text-emphasis: var(--ae-green-300);\\n\\n --ae-color-danger-bg-subtle: rgb(from var(--ae-red) r g b / 0.10);\\n --ae-color-danger-border-subtle: rgb(from var(--ae-red) r g b / 0.30);\\n --ae-color-danger-text-emphasis: var(--ae-red-300);\\n\\n --ae-color-warning-bg-subtle: rgb(from var(--ae-yellow) r g b / 0.10);\\n --ae-color-warning-border-subtle: rgb(from var(--ae-yellow) r g b / 0.30);\\n --ae-color-warning-text-emphasis: var(--ae-yellow-300);\\n\\n --ae-color-info-bg-subtle: rgb(from var(--ae-cyan) r g b / 0.10);\\n --ae-color-info-border-subtle: rgb(from var(--ae-cyan) r g b / 0.30);\\n --ae-color-info-text-emphasis: var(--ae-cyan-300);\\n\\n --ae-color-secondary-bg-subtle: rgb(from var(--ae-slate) r g b / 0.10);\\n --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.30);\\n --ae-color-secondary-text-emphasis: var(--ae-slate-300);\\n\\n --ae-color-light-bg-subtle: rgb(from var(--ae-light) r g b / 0.20);\\n --ae-color-light-border-subtle: rgb(from var(--ae-light) r g b / 0.25);\\n\\n --ae-color-dark-bg-subtle: rgb(from var(--ae-dark) r g b / 0.30);\\n --ae-color-dark-border-subtle: rgb(from var(--ae-dark) r g b / 0.50);\\n\\n /* Component tokens \u2014 dark overrides */\\n --ae-action-btn-bg: var(--ae-color-gray);\\n --ae-action-btn-bg-hover: color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));\\n --ae-action-btn-color: var(--ae-gray-400);\\n --ae-action-btn-color-hover: var(--ae-cyan-300);\\n --ae-clear-btn-bg-hover: color-mix(in srgb, var(--ae-red) 25%, var(--ae-gray-800));\\n --ae-clear-btn-color-hover: var(--ae-red-300);\\n}\\n\"", "export default \":host {\\n --ae-color-solid: var(--ae-color-gray);\\n --ae-color-solid-hover: color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-hover));\\n --ae-color-solid-active: color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-active));\\n --ae-color-on-solid: var(--ae-color-text-main);\\n --ae-color-border: var(--ae-color-gray);\\n --ae-color-border-hover: color-mix(in srgb, var(--ae-color-border), var(--ae-color-mix-hover));\\n --ae-color-accent: var(--ae-color-text-muted);\\n --ae-color-accent-hover: var(--ae-color-text-main);\\n --ae-color-subtle: var(--ae-border-subtle);\\n --ae-color-subtle-hover: var(--ae-border-default);\\n --ae-color-bg-subtle: var(--ae-border-subtle);\\n --ae-color-text-subtle: var(--ae-color-text-muted);\\n --ae-color-border-subtle: var(--ae-border-default);\\n}\\n\\n:host([color=\\\"primary\\\"]) {\\n --ae-color-solid: var(--ae-color-primary);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-primary);\\n --ae-color-accent: var(--ae-color-text-link);\\n --ae-color-accent-hover: var(--ae-color-text-link-hover);\\n --ae-color-subtle: var(--ae-color-primary-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-blue) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-primary-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-primary-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-primary-border-subtle);\\n}\\n\\n:host([color=\\\"secondary\\\"]) {\\n --ae-color-solid: var(--ae-color-secondary);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-secondary-hover);\\n --ae-color-accent: var(--ae-color-secondary-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-text-main);\\n --ae-color-subtle: rgb(from var(--ae-slate) r g b / 0.06);\\n --ae-color-subtle-hover: rgb(from var(--ae-slate) r g b / 0.12);\\n --ae-color-bg-subtle: var(--ae-color-secondary-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-secondary-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-secondary-border-subtle);\\n}\\n\\n:host([color=\\\"success\\\"]) {\\n --ae-color-solid: var(--ae-color-success);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-success);\\n --ae-color-accent: var(--ae-color-success-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-success-hover);\\n --ae-color-subtle: var(--ae-color-success-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-green) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-success-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-success-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-success-border-subtle);\\n}\\n\\n:host([color=\\\"danger\\\"]) {\\n --ae-color-solid: var(--ae-color-danger);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-danger);\\n --ae-color-accent: var(--ae-color-danger-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-danger-hover);\\n --ae-color-subtle: var(--ae-color-danger-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-red) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-danger-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-danger-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-danger-border-subtle);\\n}\\n\\n:host([color=\\\"warning\\\"]) {\\n --ae-color-solid: var(--ae-color-warning);\\n --ae-color-on-solid: var(--ae-gray-900);\\n --ae-color-border: var(--ae-color-warning);\\n --ae-color-accent: var(--ae-color-warning-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-warning-hover);\\n --ae-color-subtle: var(--ae-color-warning-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-yellow) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-warning-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-warning-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-warning-border-subtle);\\n}\\n\\n:host([color=\\\"info\\\"]) {\\n --ae-color-solid: var(--ae-color-info);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-info);\\n --ae-color-accent: var(--ae-color-info-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-info-hover);\\n --ae-color-subtle: var(--ae-color-info-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-cyan) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-info-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-info-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-info-border-subtle);\\n}\\n\\n:host([color=\\\"light\\\"]) {\\n --ae-color-solid: var(--ae-light);\\n --ae-color-on-solid: var(--ae-gray-900);\\n --ae-color-border: var(--ae-border-hover);\\n --ae-color-subtle: var(--ae-color-light-bg-subtle);\\n --ae-color-subtle-hover: var(--ae-color-light-border-subtle);\\n --ae-color-bg-subtle: var(--ae-color-light-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-text-muted);\\n --ae-color-border-subtle: var(--ae-color-light-border-subtle);\\n}\\n\\n:host([color=\\\"dark\\\"]) {\\n --ae-color-solid: var(--ae-dark-500);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-dark-500);\\n --ae-color-accent: var(--ae-color-text-main);\\n --ae-color-accent-hover: var(--ae-color-text-main);\\n --ae-color-subtle: var(--ae-color-dark-bg-subtle);\\n --ae-color-subtle-hover: var(--ae-color-dark-border-subtle);\\n --ae-color-bg-subtle: var(--ae-color-dark-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-text-main);\\n --ae-color-border-subtle: var(--ae-color-dark-border-subtle);\\n}\\n\"", "export default \":host {\\n display: block;\\n width: 100%;\\n height: var(--thickness, 1px);\\n flex-shrink: 0;\\n\\n /* Override color.css default \u2014 divider uses the subtle border token when no [color] is set */\\n --ae-color-border: var(--ae-border-default);\\n\\n background: var(--ae-color-border);\\n}\\n\\n:host([vertical]) {\\n display: inline-block;\\n width: var(--thickness, 1px);\\n height: 1lh;\\n vertical-align: middle;\\n}\\n\"", "\uFEFFimport AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css';\nimport colorCSS from '../styles/color.css';\nimport style from '../styles/components/divider.css';\nimport { prop } from 'aeico';\n/**\n * A simple divider component that can be used to separate content. It supports both horizontal and vertical orientations, as well as customizable thickness and color.\n * @example\n * ```html\n * <ae-divider></ae-divider>\n * <ae-divider vertical></ae-divider>\n * <ae-divider thickness=\"4px\" color=\"primary\"></ae-divider>\n * ```\n * @props\n * - `vertical` (boolean): If true, the divider will be vertical. Default is false (horizontal).\n * - `thickness` (string): Custom thickness for the divider (e.g., \"2px\", \"0.5rem\"). If not provided, it will use the default thickness defined in CSS.\n * - `color` (string): Color variant for the divider (e.g., \"primary\", \"secondary\"). If not provided, it will use the default color defined in CSS.\n *\n * @csspart divider - The main divider element that can be styled.\n *\n * @cssproperty --thickness - Custom property to set the thickness of the divider when the `thickness` prop is used.\n */\nclass Divider extends AeicoComponent {\n static tagName = 'divider';\n\n @prop({ type: Boolean })\n accessor vertical: boolean = false;\n\n @prop({ type: String })\n accessor thickness: string | undefined;\n\n @prop({ type: String })\n accessor color: string | undefined;\n\n protected static styles = [styleVariables, colorCSS, style];\n\n protected render(): void {\n if (this.thickness) {\n this.style.setProperty('--thickness', this.thickness);\n } else {\n this.style.removeProperty('--thickness');\n }\n }\n}\n\nDivider.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-divider': Divider;\n }\n}\n\nexport default Divider;\nexport type DividerProps = InferProps<typeof Divider>;\n"],
5
- "mappings": "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",
3
+ "sources": ["../src/aeico-component.ts", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/variables.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/color.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/divider.css", "../src/divider/divider.ts"],
4
+ "sourcesContent": ["import { AeicoElement } from 'aeico';\n\nconst TAG_NAME_PREFIX = 'ae';\n\n/**\n * AeicoComponent is the base class for all built-in Aeico components.\n */\nclass AeicoComponent extends AeicoElement {\n static define(name: string) {\n const prefix = `${TAG_NAME_PREFIX}-`;\n\n const tagName = name.startsWith(prefix) ? name : `${prefix}${name}`;\n\n super.define(tagName);\n }\n}\n\nexport default AeicoComponent;\n", "export default \":root,\\n:host {\\n --ae-font-sans-serif: system-ui, -apple-system, \\\"Segoe UI\\\", Roboto, \\\"Helvetica Neue\\\",\\n \\\"Noto Sans\\\", \\\"Liberation Sans\\\", Arial, sans-serif,\\n \\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\", \\\"Noto Color Emoji\\\";\\n --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,\\n \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace;\\n font-family: var(--ae-font-sans-serif);\\n --ae-blue: #0e639c;\\n --ae-green: #28a745;\\n --ae-red: #dc3545;\\n --ae-yellow: #ffc107;\\n --ae-cyan: #17a2b8;\\n --ae-gray: #6e6e6e;\\n --ae-slate: #64748b;\\n --ae-dark: #343a40;\\n --ae-light: #f8f9fa;\\n}\\n\\n:root,\\n:host {\\n /* Blue */\\n --ae-blue-100: color-mix(in srgb, var(--ae-blue) 20%, white);\\n --ae-blue-200: color-mix(in srgb, var(--ae-blue) 40%, white);\\n --ae-blue-300: color-mix(in srgb, var(--ae-blue) 60%, white);\\n --ae-blue-400: color-mix(in srgb, var(--ae-blue) 80%, white);\\n --ae-blue-500: var(--ae-blue);\\n --ae-blue-600: color-mix(in srgb, var(--ae-blue) 80%, black);\\n --ae-blue-700: color-mix(in srgb, var(--ae-blue) 60%, black);\\n --ae-blue-800: color-mix(in srgb, var(--ae-blue) 40%, black);\\n --ae-blue-900: color-mix(in srgb, var(--ae-blue) 20%, black);\\n\\n /* Green */\\n --ae-green-100: color-mix(in srgb, var(--ae-green) 20%, white);\\n --ae-green-200: color-mix(in srgb, var(--ae-green) 40%, white);\\n --ae-green-300: color-mix(in srgb, var(--ae-green) 60%, white);\\n --ae-green-400: color-mix(in srgb, var(--ae-green) 80%, white);\\n --ae-green-500: var(--ae-green);\\n --ae-green-600: color-mix(in srgb, var(--ae-green) 80%, black);\\n --ae-green-700: color-mix(in srgb, var(--ae-green) 60%, black);\\n --ae-green-800: color-mix(in srgb, var(--ae-green) 40%, black);\\n --ae-green-900: color-mix(in srgb, var(--ae-green) 20%, black);\\n\\n /* Red */\\n --ae-red-100: color-mix(in srgb, var(--ae-red) 20%, white);\\n --ae-red-200: color-mix(in srgb, var(--ae-red) 40%, white);\\n --ae-red-300: color-mix(in srgb, var(--ae-red) 60%, white);\\n --ae-red-400: color-mix(in srgb, var(--ae-red) 80%, white);\\n --ae-red-500: var(--ae-red);\\n --ae-red-600: color-mix(in srgb, var(--ae-red) 80%, black);\\n --ae-red-700: color-mix(in srgb, var(--ae-red) 60%, black);\\n --ae-red-800: color-mix(in srgb, var(--ae-red) 40%, black);\\n --ae-red-900: color-mix(in srgb, var(--ae-red) 20%, black);\\n\\n /* Yellow */\\n --ae-yellow-100: color-mix(in srgb, var(--ae-yellow) 20%, white);\\n --ae-yellow-200: color-mix(in srgb, var(--ae-yellow) 40%, white);\\n --ae-yellow-300: color-mix(in srgb, var(--ae-yellow) 60%, white);\\n --ae-yellow-400: color-mix(in srgb, var(--ae-yellow) 80%, white);\\n --ae-yellow-500: var(--ae-yellow);\\n --ae-yellow-600: color-mix(in srgb, var(--ae-yellow) 80%, black);\\n --ae-yellow-700: color-mix(in srgb, var(--ae-yellow) 60%, black);\\n --ae-yellow-800: color-mix(in srgb, var(--ae-yellow) 40%, black);\\n --ae-yellow-900: color-mix(in srgb, var(--ae-yellow) 20%, black);\\n\\n /* Cyan */\\n --ae-cyan-100: color-mix(in srgb, var(--ae-cyan) 20%, white);\\n --ae-cyan-200: color-mix(in srgb, var(--ae-cyan) 40%, white);\\n --ae-cyan-300: color-mix(in srgb, var(--ae-cyan) 60%, white);\\n --ae-cyan-400: color-mix(in srgb, var(--ae-cyan) 80%, white);\\n --ae-cyan-500: var(--ae-cyan);\\n --ae-cyan-600: color-mix(in srgb, var(--ae-cyan) 80%, black);\\n --ae-cyan-700: color-mix(in srgb, var(--ae-cyan) 60%, black);\\n --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);\\n --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);\\n\\n /* Gray (neutral - base #6e6e6e) */\\n --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);\\n --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);\\n --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);\\n --ae-gray-400: color-mix(in srgb, var(--ae-gray) 80%, white);\\n --ae-gray-500: var(--ae-gray);\\n --ae-gray-600: color-mix(in srgb, var(--ae-gray) 80%, black);\\n --ae-gray-700: color-mix(in srgb, var(--ae-gray) 60%, black);\\n --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);\\n --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);\\n\\n /* Slate (blue-gray - base #64748b, used for 'secondary') */\\n --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);\\n --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);\\n --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);\\n --ae-slate-400: color-mix(in srgb, var(--ae-slate) 80%, white);\\n --ae-slate-500: var(--ae-slate);\\n --ae-slate-600: color-mix(in srgb, var(--ae-slate) 80%, black);\\n --ae-slate-700: color-mix(in srgb, var(--ae-slate) 60%, black);\\n --ae-slate-800: color-mix(in srgb, var(--ae-slate) 40%, black);\\n --ae-slate-900: color-mix(in srgb, var(--ae-slate) 20%, black);\\n\\n /* Dark (base #343a40) */\\n --ae-dark-100: color-mix(in srgb, var(--ae-dark) 20%, white);\\n --ae-dark-200: color-mix(in srgb, var(--ae-dark) 40%, white);\\n --ae-dark-300: color-mix(in srgb, var(--ae-dark) 60%, white);\\n --ae-dark-400: color-mix(in srgb, var(--ae-dark) 80%, white);\\n --ae-dark-500: var(--ae-dark);\\n --ae-dark-600: color-mix(in srgb, var(--ae-dark) 80%, black);\\n --ae-dark-700: color-mix(in srgb, var(--ae-dark) 60%, black);\\n --ae-dark-800: color-mix(in srgb, var(--ae-dark) 40%, black);\\n --ae-dark-900: color-mix(in srgb, var(--ae-dark) 20%, black);\\n\\n /* Light (base #f8f9fa) */\\n --ae-light-100: color-mix(in srgb, var(--ae-light) 20%, white);\\n --ae-light-200: color-mix(in srgb, var(--ae-light) 40%, white);\\n --ae-light-300: color-mix(in srgb, var(--ae-light) 60%, white);\\n --ae-light-400: color-mix(in srgb, var(--ae-light) 80%, white);\\n --ae-light-500: var(--ae-light);\\n --ae-light-600: color-mix(in srgb, var(--ae-light) 80%, black);\\n --ae-light-700: color-mix(in srgb, var(--ae-light) 60%, black);\\n --ae-light-800: color-mix(in srgb, var(--ae-light) 40%, black);\\n --ae-light-900: color-mix(in srgb, var(--ae-light) 20%, black);\\n}\\n\\n:root,\\n:host {\\n /* Hover / active mix (light default - overridden in \u00A7 6 dark) */\\n --ae-color-mix-hover: black 10%;\\n --ae-color-mix-active: black 20%;\\n\\n /* Primary (Blue) */\\n --ae-color-primary: var(--ae-blue-500);\\n --ae-color-primary-hover: color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-hover));\\n --ae-color-primary-active: color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-active));\\n --ae-color-primary-disabled: color-mix(in srgb, var(--ae-blue) 50%, var(--ae-gray-500));\\n\\n /* Success (Green) */\\n --ae-color-success: var(--ae-green-500);\\n --ae-color-success-hover: color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-hover));\\n --ae-color-success-active: color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-active));\\n --ae-color-success-disabled: color-mix(in srgb, var(--ae-green) 50%, var(--ae-gray-500));\\n\\n /* Danger (Red) */\\n --ae-color-danger: var(--ae-red-500);\\n --ae-color-danger-hover: color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-hover));\\n --ae-color-danger-active: color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-active));\\n --ae-color-danger-disabled: color-mix(in srgb, var(--ae-red) 50%, var(--ae-gray-500));\\n\\n /* Warning (Yellow) */\\n --ae-color-warning: var(--ae-yellow-500);\\n --ae-color-warning-hover: color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-hover));\\n --ae-color-warning-active: color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-active));\\n --ae-color-warning-disabled: color-mix(in srgb, var(--ae-yellow) 50%, var(--ae-gray-500));\\n\\n /* Info (Cyan) */\\n --ae-color-info: var(--ae-cyan-500);\\n --ae-color-info-hover: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-hover));\\n --ae-color-info-active: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));\\n --ae-color-info-disabled: color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));\\n\\n /* Secondary (Slate) - base differs per theme, overridden in \u00A7 6 dark */\\n --ae-color-secondary: var(--ae-slate-500);\\n --ae-color-secondary-hover: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));\\n --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));\\n --ae-color-secondary-text: var(--ae-slate-700);\\n}\\n\\n\\n.theme-light,\\n:root[theme=\\\"light\\\"],\\n:host([theme=\\\"light\\\"]),\\n:host-context([theme=\\\"light\\\"]),\\n:where(:root),\\n:host {\\n color-scheme: light;\\n\\n /* Gray UI aliases - lighter palette steps for elements on white background */\\n --ae-color-gray-dark: var(--ae-gray-400);\\n --ae-color-gray: var(--ae-gray-300);\\n --ae-color-gray-light: var(--ae-gray-200);\\n --ae-color-gray-lighter: var(--ae-gray-100);\\n --ae-color-gray-lightest: color-mix(in srgb, var(--ae-gray) 10%, white);\\n\\n /* Text */\\n --ae-color-text-main: var(--ae-dark-700);\\n --ae-color-text-muted: var(--ae-gray-600);\\n --ae-color-text-disabled: var(--ae-gray-300);\\n --ae-color-text-link: var(--ae-blue-500);\\n --ae-color-text-link-hover: var(--ae-blue-700);\\n\\n /* Surfaces */\\n --ae-surface-sunken: var(--ae-light-500);\\n --ae-surface-base: white;\\n --ae-surface-raised: var(--ae-light-500);\\n --ae-surface-overlay: white;\\n --ae-color-overlay: rgba(0, 0, 0, 0.4);\\n\\n /* Borders */\\n --ae-border-subtle: rgba(0, 0, 0, 0.08);\\n --ae-border-default: rgba(0, 0, 0, 0.15);\\n --ae-border-hover: rgba(0, 0, 0, 0.25);\\n --ae-border-focus: var(--ae-color-primary);\\n --ae-border-disabled: rgba(0, 0, 0, 0.06);\\n\\n /* Focus ring */\\n --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.30);\\n --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);\\n\\n /* Subtle intent tokens - light context */\\n --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.08);\\n --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.40);\\n --ae-color-primary-text-emphasis: var(--ae-blue-700);\\n\\n --ae-color-success-bg-subtle: rgb(from var(--ae-green) r g b / 0.08);\\n --ae-color-success-border-subtle: rgb(from var(--ae-green) r g b / 0.40);\\n --ae-color-success-text-emphasis: var(--ae-green-700);\\n\\n --ae-color-danger-bg-subtle: rgb(from var(--ae-red) r g b / 0.08);\\n --ae-color-danger-border-subtle: rgb(from var(--ae-red) r g b / 0.40);\\n --ae-color-danger-text-emphasis: var(--ae-red-700);\\n\\n --ae-color-warning-bg-subtle: rgb(from var(--ae-yellow) r g b / 0.08);\\n --ae-color-warning-border-subtle: rgb(from var(--ae-yellow) r g b / 0.40);\\n --ae-color-warning-text-emphasis: var(--ae-yellow-700);\\n\\n --ae-color-info-bg-subtle: rgb(from var(--ae-cyan) r g b / 0.08);\\n --ae-color-info-border-subtle: rgb(from var(--ae-cyan) r g b / 0.40);\\n --ae-color-info-text-emphasis: var(--ae-cyan-700);\\n\\n --ae-color-secondary-bg-subtle: rgb(from var(--ae-slate) r g b / 0.08);\\n --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.40);\\n --ae-color-secondary-text-emphasis: var(--ae-slate-700);\\n\\n --ae-color-light-bg-subtle: var(--ae-gray-100); /* opaque on white: ~#e2e2e2 */\\n --ae-color-light-border-subtle: var(--ae-gray-200); /* opaque on white: ~#c4c4c4 */\\n\\n --ae-color-dark-bg-subtle: var(--ae-dark-100); /* opaque on white: ~#d6d8d9 */\\n --ae-color-dark-border-subtle: var(--ae-dark-300); /* opaque on white: ~#85898c */\\n\\n /* Component tokens - light defaults */\\n --ae-action-btn-bg: var(--ae-gray-200);\\n --ae-action-btn-bg-hover: var(--ae-color-primary);\\n --ae-action-btn-color: var(--ae-gray-600);\\n --ae-action-btn-color-hover: white;\\n\\n --ae-clear-btn-bg-hover: var(--ae-color-danger);\\n --ae-clear-btn-color-hover: white;\\n\\n --ae-reset-btn-border-radius: var(--ae-radius-xs);\\n --ae-reset-btn-bg: var(--ae-action-btn-bg);\\n --ae-reset-btn-bg-hover: var(--ae-action-btn-bg-hover);\\n --ae-reset-btn-color: var(--ae-action-btn-color);\\n --ae-reset-btn-color-hover: var(--ae-action-btn-color-hover);\\n --ae-reset-btn-transition: all 0.12s;\\n\\n --ae-clear-btn-border-radius: var(--ae-radius-xs);\\n --ae-clear-btn-bg: var(--ae-action-btn-bg);\\n --ae-clear-btn-color: var(--ae-action-btn-color);\\n --ae-clear-btn-transition: all 0.12s;\\n}\\n\\n:root,\\n:host {\\n --ae-size-scale: 1;\\n --ae-size-base: calc(1rem * var(--ae-size-scale)); /* 16px */\\n --ae-size-xl: round(calc(var(--ae-size-l) * 1.125), 1px); /* 23px */\\n --ae-size-l: round(calc(var(--ae-size-m) * 1.125 * 1.125), 1px); /* 20px */\\n --ae-size-m: var(--ae-size-base); /* 16px */\\n --ae-size-s: round(calc(var(--ae-size-m) / 1.125), 1px); /* 14px */\\n --ae-size-xs: round(calc(var(--ae-size-s) / 1.125), 1px); /* 12px */\\n --ae-size-2xs: round(calc(var(--ae-size-xs) / 1.125), 1px); /* 11px */\\n --ae-size-3xs: round(calc(var(--ae-size-2xs) / 1.125), 1px); /* 10px */\\n}\\n\\n/* Border-radius tokens - shared across all components */\\n:root,\\n:host {\\n /**\\n * Unified border-radius hook for all components.\\n *\\n *\\n * Usage:\\n * :root { --ae-border-radius: 0; } // global: all components square\\n * :root { --ae-border-radius: 999px; } // global: all components pill\\n * ae-button { --ae-border-radius: 50%; } // scoped: only buttons circular\\n * .sidebar { --ae-border-radius: 8px; } // scoped: everything inside .sidebar\\n *\\n * To restore a component to its own default:\\n * ae-card { --ae-border-radius: initial; }\\n */\\n\\n --ae-radius-square: 0;\\n --ae-radius-xs: 2px;\\n --ae-radius-sm: 4px;\\n --ae-radius-md: 6px;\\n --ae-radius-lg: 8px;\\n --ae-radius-xl: 12px;\\n --ae-radius-pill: 999px;\\n --ae-radius-circle: 50%;\\n}\\n\\n/* Layout tokens - defined on :root so all light DOM elements can use them */\\n:root,\\n:host {\\n --container-max-width: 1280px;\\n --container-padding-x: 1.5rem;\\n}\\n\\n.theme-dark,\\n:root[theme=\\\"dark\\\"],\\n:host([theme=\\\"dark\\\"]),\\n:host-context([theme=\\\"dark\\\"]) {\\n color-scheme: dark;\\n\\n /* Hover / active - slightly gentler on dark backgrounds */\\n --ae-color-mix-hover: black 8%;\\n --ae-color-mix-active: black 16%;\\n\\n /* Gray UI aliases - darker palette steps for elements on dark background */\\n --ae-color-gray-dark: var(--ae-gray-800);\\n --ae-color-gray: var(--ae-gray-700);\\n --ae-color-gray-light: var(--ae-gray-600);\\n --ae-color-gray-lighter: var(--ae-gray-500);\\n --ae-color-gray-lightest: var(--ae-gray-400);\\n\\n /* Secondary - deeper base on dark background */\\n --ae-color-secondary: var(--ae-slate-700);\\n --ae-color-secondary-text: var(--ae-slate-300);\\n\\n /* Text */\\n --ae-color-text-main: white;\\n --ae-color-text-muted: var(--ae-gray-200);\\n --ae-color-text-disabled: var(--ae-gray-500);\\n --ae-color-text-link: var(--ae-blue-300);\\n --ae-color-text-link-hover: var(--ae-blue-200);\\n\\n /* Surfaces */\\n --ae-surface-sunken: var(--ae-gray-900);\\n --ae-surface-base: color-mix(in srgb, var(--ae-gray) 27%, black);\\n --ae-surface-raised: color-mix(in srgb, var(--ae-gray) 34%, black);\\n --ae-surface-overlay: color-mix(in srgb, var(--ae-gray) 38%, black);\\n --ae-color-overlay: rgba(0, 0, 0, 0.6);\\n\\n /* Borders */\\n --ae-border-subtle: rgba(255, 255, 255, 0.08);\\n --ae-border-default: rgba(255, 255, 255, 0.12);\\n --ae-border-hover: rgba(255, 255, 255, 0.20);\\n --ae-border-focus: var(--ae-color-primary);\\n --ae-border-disabled: rgba(255, 255, 255, 0.06);\\n\\n /* Focus ring */\\n --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.25);\\n --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);\\n\\n /* Subtle intent tokens - dark context (more alpha, lighter text-emphasis) */\\n --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.10);\\n --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.30);\\n --ae-color-primary-text-emphasis: var(--ae-blue-300);\\n\\n --ae-color-success-bg-subtle: rgb(from var(--ae-green) r g b / 0.10);\\n --ae-color-success-border-subtle: rgb(from var(--ae-green) r g b / 0.30);\\n --ae-color-success-text-emphasis: var(--ae-green-300);\\n\\n --ae-color-danger-bg-subtle: rgb(from var(--ae-red) r g b / 0.10);\\n --ae-color-danger-border-subtle: rgb(from var(--ae-red) r g b / 0.30);\\n --ae-color-danger-text-emphasis: var(--ae-red-300);\\n\\n --ae-color-warning-bg-subtle: rgb(from var(--ae-yellow) r g b / 0.10);\\n --ae-color-warning-border-subtle: rgb(from var(--ae-yellow) r g b / 0.30);\\n --ae-color-warning-text-emphasis: var(--ae-yellow-300);\\n\\n --ae-color-info-bg-subtle: rgb(from var(--ae-cyan) r g b / 0.10);\\n --ae-color-info-border-subtle: rgb(from var(--ae-cyan) r g b / 0.30);\\n --ae-color-info-text-emphasis: var(--ae-cyan-300);\\n\\n --ae-color-secondary-bg-subtle: rgb(from var(--ae-slate) r g b / 0.10);\\n --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.30);\\n --ae-color-secondary-text-emphasis: var(--ae-slate-300);\\n\\n --ae-color-light-bg-subtle: rgb(from var(--ae-light) r g b / 0.20);\\n --ae-color-light-border-subtle: rgb(from var(--ae-light) r g b / 0.25);\\n\\n --ae-color-dark-bg-subtle: rgb(from var(--ae-dark) r g b / 0.30);\\n --ae-color-dark-border-subtle: rgb(from var(--ae-dark) r g b / 0.50);\\n\\n /* Component tokens - dark overrides */\\n --ae-action-btn-bg: var(--ae-color-gray);\\n --ae-action-btn-bg-hover: color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));\\n --ae-action-btn-color: var(--ae-gray-400);\\n --ae-action-btn-color-hover: var(--ae-cyan-300);\\n --ae-clear-btn-bg-hover: color-mix(in srgb, var(--ae-red) 25%, var(--ae-gray-800));\\n --ae-clear-btn-color-hover: var(--ae-red-300);\\n}\\n\"", "export default \":host {\\n --ae-color-solid: var(--ae-color-gray);\\n --ae-color-solid-hover: color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-hover));\\n --ae-color-solid-active: color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-active));\\n --ae-color-on-solid: var(--ae-color-text-main);\\n --ae-color-border: var(--ae-color-gray);\\n --ae-color-border-hover: color-mix(in srgb, var(--ae-color-border), var(--ae-color-mix-hover));\\n --ae-color-accent: var(--ae-color-text-muted);\\n --ae-color-accent-hover: var(--ae-color-text-main);\\n --ae-color-subtle: var(--ae-border-subtle);\\n --ae-color-subtle-hover: var(--ae-border-default);\\n --ae-color-bg-subtle: var(--ae-border-subtle);\\n --ae-color-text-subtle: var(--ae-color-text-muted);\\n --ae-color-border-subtle: var(--ae-border-default);\\n}\\n\\n:host([color=\\\"primary\\\"]) {\\n --ae-color-solid: var(--ae-color-primary);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-primary);\\n --ae-color-accent: var(--ae-color-text-link);\\n --ae-color-accent-hover: var(--ae-color-text-link-hover);\\n --ae-color-subtle: var(--ae-color-primary-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-blue) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-primary-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-primary-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-primary-border-subtle);\\n}\\n\\n:host([color=\\\"secondary\\\"]) {\\n --ae-color-solid: var(--ae-color-secondary);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-secondary-hover);\\n --ae-color-accent: var(--ae-color-secondary-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-text-main);\\n --ae-color-subtle: rgb(from var(--ae-slate) r g b / 0.06);\\n --ae-color-subtle-hover: rgb(from var(--ae-slate) r g b / 0.12);\\n --ae-color-bg-subtle: var(--ae-color-secondary-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-secondary-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-secondary-border-subtle);\\n}\\n\\n:host([color=\\\"success\\\"]) {\\n --ae-color-solid: var(--ae-color-success);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-success);\\n --ae-color-accent: var(--ae-color-success-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-success-hover);\\n --ae-color-subtle: var(--ae-color-success-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-green) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-success-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-success-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-success-border-subtle);\\n}\\n\\n:host([color=\\\"danger\\\"]) {\\n --ae-color-solid: var(--ae-color-danger);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-danger);\\n --ae-color-accent: var(--ae-color-danger-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-danger-hover);\\n --ae-color-subtle: var(--ae-color-danger-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-red) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-danger-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-danger-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-danger-border-subtle);\\n}\\n\\n:host([color=\\\"warning\\\"]) {\\n --ae-color-solid: var(--ae-color-warning);\\n --ae-color-on-solid: var(--ae-gray-900);\\n --ae-color-border: var(--ae-color-warning);\\n --ae-color-accent: var(--ae-color-warning-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-warning-hover);\\n --ae-color-subtle: var(--ae-color-warning-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-yellow) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-warning-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-warning-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-warning-border-subtle);\\n}\\n\\n:host([color=\\\"info\\\"]) {\\n --ae-color-solid: var(--ae-color-info);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-info);\\n --ae-color-accent: var(--ae-color-info-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-info-hover);\\n --ae-color-subtle: var(--ae-color-info-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-cyan) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-info-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-info-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-info-border-subtle);\\n}\\n\\n:host([color=\\\"light\\\"]) {\\n --ae-color-solid: var(--ae-light);\\n --ae-color-on-solid: var(--ae-gray-900);\\n --ae-color-border: var(--ae-border-hover);\\n --ae-color-subtle: var(--ae-color-light-bg-subtle);\\n --ae-color-subtle-hover: var(--ae-color-light-border-subtle);\\n --ae-color-bg-subtle: var(--ae-color-light-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-text-muted);\\n --ae-color-border-subtle: var(--ae-color-light-border-subtle);\\n}\\n\\n:host([color=\\\"dark\\\"]) {\\n --ae-color-solid: var(--ae-dark-500);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-dark-500);\\n --ae-color-accent: var(--ae-color-text-main);\\n --ae-color-accent-hover: var(--ae-color-text-main);\\n --ae-color-subtle: var(--ae-color-dark-bg-subtle);\\n --ae-color-subtle-hover: var(--ae-color-dark-border-subtle);\\n --ae-color-bg-subtle: var(--ae-color-dark-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-text-main);\\n --ae-color-border-subtle: var(--ae-color-dark-border-subtle);\\n}\\n\"", "export default \":host {\\n display: block;\\n width: 100%;\\n height: var(--thickness, 1px);\\n flex-shrink: 0;\\n\\n /* Override color.css default - divider uses the subtle border token when no [color] is set */\\n --ae-color-border: var(--ae-border-default);\\n\\n background: var(--ae-color-border);\\n}\\n\\n:host([vertical]) {\\n display: inline-block;\\n width: var(--thickness, 1px);\\n height: 1lh;\\n vertical-align: middle;\\n}\\n\"", "import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css';\nimport colorCSS from '../styles/color.css';\nimport style from '../styles/components/divider.css';\nimport { prop } from 'aeico';\n/**\n * A simple divider component that can be used to separate content. It supports both horizontal and vertical orientations, as well as customizable thickness and color.\n * @example\n * ```html\n * <ae-divider></ae-divider>\n * <ae-divider vertical></ae-divider>\n * <ae-divider thickness=\"4px\" color=\"primary\"></ae-divider>\n * ```\n * @props\n * - `vertical` (boolean): If true, the divider will be vertical. Default is false (horizontal).\n * - `thickness` (string): Custom thickness for the divider (e.g., \"2px\", \"0.5rem\"). If not provided, it will use the default thickness defined in CSS.\n * - `color` (string): Color variant for the divider (e.g., \"primary\", \"secondary\"). If not provided, it will use the default color defined in CSS.\n *\n * @csspart divider - The main divider element that can be styled.\n *\n * @cssproperty --thickness - Custom property to set the thickness of the divider when the `thickness` prop is used.\n */\nclass Divider extends AeicoComponent {\n @prop({ type: Boolean })\n accessor vertical: boolean = false;\n\n @prop({ type: String })\n accessor thickness: string | undefined;\n\n @prop({ type: String })\n accessor color: string | undefined;\n\n protected static styles = [styleVariables, colorCSS, style];\n\n protected render(): void {\n if (this.thickness) {\n this.style.setProperty('--thickness', this.thickness);\n } else {\n this.style.removeProperty('--thickness');\n }\n }\n}\n\nDivider.define('divider');\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-divider': Divider;\n }\n}\n\nexport default Divider;\nexport type DividerProps = InferProps<typeof Divider>;\n"],
5
+ "mappings": "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",
6
6
  "names": ["divider_default"]
7
7
  }
package/dist/drawer.cjs CHANGED
@@ -159,7 +159,7 @@ var require_variables = __commonJS({
159
159
  --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);
160
160
  --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);
161
161
 
162
- /* Gray (neutral \u2014 base #6e6e6e) */
162
+ /* Gray (neutral - base #6e6e6e) */
163
163
  --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);
164
164
  --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);
165
165
  --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);
@@ -170,7 +170,7 @@ var require_variables = __commonJS({
170
170
  --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);
171
171
  --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);
172
172
 
173
- /* Slate (blue-gray \u2014 base #64748b, used for 'secondary') */
173
+ /* Slate (blue-gray - base #64748b, used for 'secondary') */
174
174
  --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);
175
175
  --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);
176
176
  --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);
@@ -206,7 +206,7 @@ var require_variables = __commonJS({
206
206
 
207
207
  :root,
208
208
  :host {
209
- /* Hover / active mix (light default \u2014 overridden in \xA7 6 dark) */
209
+ /* Hover / active mix (light default - overridden in \xA7 6 dark) */
210
210
  --ae-color-mix-hover: black 10%;
211
211
  --ae-color-mix-active: black 20%;
212
212
 
@@ -240,7 +240,7 @@ var require_variables = __commonJS({
240
240
  --ae-color-info-active: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));
241
241
  --ae-color-info-disabled: color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));
242
242
 
243
- /* Secondary (Slate) \u2014 base differs per theme, overridden in \xA7 6 dark */
243
+ /* Secondary (Slate) - base differs per theme, overridden in \xA7 6 dark */
244
244
  --ae-color-secondary: var(--ae-slate-500);
245
245
  --ae-color-secondary-hover: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));
246
246
  --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));
@@ -256,7 +256,7 @@ var require_variables = __commonJS({
256
256
  :host {
257
257
  color-scheme: light;
258
258
 
259
- /* Gray UI aliases \u2014 lighter palette steps for elements on white background */
259
+ /* Gray UI aliases - lighter palette steps for elements on white background */
260
260
  --ae-color-gray-dark: var(--ae-gray-400);
261
261
  --ae-color-gray: var(--ae-gray-300);
262
262
  --ae-color-gray-light: var(--ae-gray-200);
@@ -288,7 +288,7 @@ var require_variables = __commonJS({
288
288
  --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.30);
289
289
  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);
290
290
 
291
- /* Subtle intent tokens \u2014 light context */
291
+ /* Subtle intent tokens - light context */
292
292
  --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.08);
293
293
  --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.40);
294
294
  --ae-color-primary-text-emphasis: var(--ae-blue-700);
@@ -319,7 +319,7 @@ var require_variables = __commonJS({
319
319
  --ae-color-dark-bg-subtle: var(--ae-dark-100); /* opaque on white: ~#d6d8d9 */
320
320
  --ae-color-dark-border-subtle: var(--ae-dark-300); /* opaque on white: ~#85898c */
321
321
 
322
- /* Component tokens \u2014 light defaults */
322
+ /* Component tokens - light defaults */
323
323
  --ae-action-btn-bg: var(--ae-gray-200);
324
324
  --ae-action-btn-bg-hover: var(--ae-color-primary);
325
325
  --ae-action-btn-color: var(--ae-gray-600);
@@ -354,14 +354,12 @@ var require_variables = __commonJS({
354
354
  --ae-size-3xs: round(calc(var(--ae-size-2xs) / 1.125), 1px); /* 10px */
355
355
  }
356
356
 
357
- /* Border-radius tokens \u2014 shared across all components */
357
+ /* Border-radius tokens - shared across all components */
358
358
  :root,
359
359
  :host {
360
360
  /**
361
361
  * Unified border-radius hook for all components.
362
362
  *
363
- * Not set by default \u2014 each component falls back to its own --ae-radius-*
364
- * token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).
365
363
  *
366
364
  * Usage:
367
365
  * :root { --ae-border-radius: 0; } // global: all components square
@@ -383,7 +381,7 @@ var require_variables = __commonJS({
383
381
  --ae-radius-circle: 50%;
384
382
  }
385
383
 
386
- /* Layout tokens \u2014 defined on :root so all light DOM elements can use them */
384
+ /* Layout tokens - defined on :root so all light DOM elements can use them */
387
385
  :root,
388
386
  :host {
389
387
  --container-max-width: 1280px;
@@ -396,18 +394,18 @@ var require_variables = __commonJS({
396
394
  :host-context([theme="dark"]) {
397
395
  color-scheme: dark;
398
396
 
399
- /* Hover / active \u2014 slightly gentler on dark backgrounds */
397
+ /* Hover / active - slightly gentler on dark backgrounds */
400
398
  --ae-color-mix-hover: black 8%;
401
399
  --ae-color-mix-active: black 16%;
402
400
 
403
- /* Gray UI aliases \u2014 darker palette steps for elements on dark background */
401
+ /* Gray UI aliases - darker palette steps for elements on dark background */
404
402
  --ae-color-gray-dark: var(--ae-gray-800);
405
403
  --ae-color-gray: var(--ae-gray-700);
406
404
  --ae-color-gray-light: var(--ae-gray-600);
407
405
  --ae-color-gray-lighter: var(--ae-gray-500);
408
406
  --ae-color-gray-lightest: var(--ae-gray-400);
409
407
 
410
- /* Secondary \u2014 deeper base on dark background */
408
+ /* Secondary - deeper base on dark background */
411
409
  --ae-color-secondary: var(--ae-slate-700);
412
410
  --ae-color-secondary-text: var(--ae-slate-300);
413
411
 
@@ -436,7 +434,7 @@ var require_variables = __commonJS({
436
434
  --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.25);
437
435
  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);
438
436
 
439
- /* Subtle intent tokens \u2014 dark context (more alpha, lighter text-emphasis) */
437
+ /* Subtle intent tokens - dark context (more alpha, lighter text-emphasis) */
440
438
  --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.10);
441
439
  --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.30);
442
440
  --ae-color-primary-text-emphasis: var(--ae-blue-300);
@@ -467,7 +465,7 @@ var require_variables = __commonJS({
467
465
  --ae-color-dark-bg-subtle: rgb(from var(--ae-dark) r g b / 0.30);
468
466
  --ae-color-dark-border-subtle: rgb(from var(--ae-dark) r g b / 0.50);
469
467
 
470
- /* Component tokens \u2014 dark overrides */
468
+ /* Component tokens - dark overrides */
471
469
  --ae-action-btn-bg: var(--ae-color-gray);
472
470
  --ae-action-btn-bg-hover: color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));
473
471
  --ae-action-btn-color: var(--ae-gray-400);
@@ -521,20 +519,12 @@ var import_drawer = __toESM(require_drawer(), 1);
521
519
 
522
520
  // src/aeico-component.ts
523
521
  var import_aeico = require("aeico");
524
-
525
- // src/utils.ts
526
- var SVG_NS = "http://www.w3.org/2000/svg";
527
- function toKebab(str) {
528
- const cleaned = str.replace(/^[_\d]+/, "");
529
- return cleaned.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
530
- }
531
-
532
- // src/aeico-component.ts
533
522
  var TAG_NAME_PREFIX = "ae";
534
523
  var AeicoComponent = class extends import_aeico.AeicoElement {
535
- static register(name) {
536
- const tagName = name || `${TAG_NAME_PREFIX}-${this.tagName || toKebab(this.name)}`;
537
- super.register(tagName);
524
+ static define(name) {
525
+ const prefix = `${TAG_NAME_PREFIX}-`;
526
+ const tagName = name.startsWith(prefix) ? name : `${prefix}${name}`;
527
+ super.define(tagName);
538
528
  }
539
529
  };
540
530
  var aeico_component_default = AeicoComponent;
@@ -542,6 +532,9 @@ var aeico_component_default = AeicoComponent;
542
532
  // src/drawer/drawer.ts
543
533
  var import_aeico3 = require("aeico");
544
534
 
535
+ // src/utils.ts
536
+ var SVG_NS = "http://www.w3.org/2000/svg";
537
+
545
538
  // src/icon/icon.ts
546
539
  var import_aeico2 = require("aeico");
547
540
  var import_variables = __toESM(require_variables(), 1);
@@ -555,7 +548,7 @@ var defaultViewBox = "0 0 24 24";
555
548
  // src/icon/registry.ts
556
549
  var IconRegistry = class {
557
550
  static _icons = /* @__PURE__ */ new Map();
558
- /** Names registered via addBuiltIn — can be overridden by user add() calls */
551
+ /** Names registered via addBuiltIn - can be overridden by user add() calls */
559
552
  static _builtInKeys = /* @__PURE__ */ new Set();
560
553
  /** Register user icons. Always takes priority over built-in icons. */
561
554
  static add(icons) {
@@ -607,7 +600,6 @@ registry_default.addBuiltIn({
607
600
 
608
601
  // src/icon/icon.ts
609
602
  var Icon = class extends aeico_component_default {
610
- static tagName = "icon";
611
603
  static props = {
612
604
  name: { type: String },
613
605
  size: { type: String },
@@ -667,7 +659,7 @@ var Icon = class extends aeico_component_default {
667
659
  });
668
660
  }
669
661
  };
670
- Icon.register();
662
+ Icon.define("icon");
671
663
 
672
664
  // src/drawer/drawer.ts
673
665
  var _closeOnOverlayClick_dec, _header_dec, _closable_dec, _modal_dec, _size_dec, _placement_dec, _label_dec, _a, _init, _label, _placement, _size, _modal, _closable, _header, _closeOnOverlayClick;
@@ -811,7 +803,7 @@ __decorateElement(_init, 4, "header", _header_dec, Drawer, _header);
811
803
  __decorateElement(_init, 4, "closeOnOverlayClick", _closeOnOverlayClick_dec, Drawer, _closeOnOverlayClick);
812
804
  __decoratorMetadata(_init, Drawer);
813
805
  __publicField(Drawer, "styles", [import_variables2.default, import_drawer.default]);
814
- Drawer.register();
806
+ Drawer.define("drawer");
815
807
  var drawer_default = Drawer;
816
808
  // Annotate the CommonJS export names for ESM import in node:
817
809
  0 && (module.exports = {