aeico-components 0.1.6 → 0.1.8

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 (380) hide show
  1. package/README.md +0 -0
  2. package/dist/alert.cjs +637 -4
  3. package/dist/alert.cjs.map +7 -1
  4. package/dist/alert.js +575 -3
  5. package/dist/alert.js.map +7 -1
  6. package/dist/badge.cjs +573 -4
  7. package/dist/badge.cjs.map +7 -1
  8. package/dist/badge.js +510 -3
  9. package/dist/badge.js.map +7 -1
  10. package/dist/breadcrumb.cjs +709 -5
  11. package/dist/breadcrumb.cjs.map +7 -1
  12. package/dist/breadcrumb.js +644 -4
  13. package/dist/breadcrumb.js.map +7 -1
  14. package/dist/button-group.cjs +546 -4
  15. package/dist/button-group.cjs.map +7 -1
  16. package/dist/button-group.js +489 -3
  17. package/dist/button-group.js.map +7 -1
  18. package/dist/button.cjs +834 -4
  19. package/dist/button.cjs.map +7 -1
  20. package/dist/button.js +771 -3
  21. package/dist/button.js.map +7 -1
  22. package/dist/card.cjs +574 -4
  23. package/dist/card.cjs.map +7 -1
  24. package/dist/card.js +516 -3
  25. package/dist/card.js.map +7 -1
  26. package/dist/checkbox.cjs +867 -4
  27. package/dist/checkbox.cjs.map +7 -1
  28. package/dist/checkbox.js +794 -3
  29. package/dist/checkbox.js.map +7 -1
  30. package/dist/copy-button.cjs +1046 -4
  31. package/dist/copy-button.cjs.map +7 -1
  32. package/dist/copy-button.js +969 -3
  33. package/dist/copy-button.js.map +7 -1
  34. package/dist/detail-group.cjs +533 -0
  35. package/dist/detail-group.cjs.map +7 -0
  36. package/dist/detail-group.js +477 -0
  37. package/dist/detail-group.js.map +7 -0
  38. package/dist/detail.cjs +627 -4
  39. package/dist/detail.cjs.map +7 -1
  40. package/dist/detail.js +569 -3
  41. package/dist/detail.js.map +7 -1
  42. package/dist/dialog.cjs +738 -4
  43. package/dist/dialog.cjs.map +7 -1
  44. package/dist/dialog.js +665 -3
  45. package/dist/dialog.js.map +7 -1
  46. package/dist/divider.cjs +558 -4
  47. package/dist/divider.cjs.map +7 -1
  48. package/dist/divider.js +502 -3
  49. package/dist/divider.js.map +7 -1
  50. package/dist/drawer.cjs +818 -4
  51. package/dist/drawer.cjs.map +7 -1
  52. package/dist/drawer.js +749 -3
  53. package/dist/drawer.js.map +7 -1
  54. package/dist/dropdown.cjs +1396 -5
  55. package/dist/dropdown.cjs.map +7 -1
  56. package/dist/dropdown.js +1316 -4
  57. package/dist/dropdown.js.map +7 -1
  58. package/dist/icon-button.cjs +999 -4
  59. package/dist/icon-button.cjs.map +7 -1
  60. package/dist/icon-button.js +930 -3
  61. package/dist/icon-button.js.map +7 -1
  62. package/dist/icon.cjs +613 -4
  63. package/dist/icon.cjs.map +7 -1
  64. package/dist/icon.js +547 -3
  65. package/dist/icon.js.map +7 -1
  66. package/dist/index.cjs +6484 -188
  67. package/dist/index.cjs.map +7 -1
  68. package/dist/index.js +6095 -147
  69. package/dist/index.js.map +7 -1
  70. package/dist/menu.cjs +841 -4
  71. package/dist/menu.cjs.map +7 -1
  72. package/dist/menu.js +785 -3
  73. package/dist/menu.js.map +7 -1
  74. package/dist/navbar.cjs +622 -4
  75. package/dist/navbar.cjs.map +7 -1
  76. package/dist/navbar.js +564 -3
  77. package/dist/navbar.js.map +7 -1
  78. package/dist/number-input.cjs +887 -0
  79. package/dist/number-input.cjs.map +7 -0
  80. package/dist/number-input.js +820 -0
  81. package/dist/number-input.js.map +7 -0
  82. package/dist/pagination.cjs +1099 -4
  83. package/dist/pagination.cjs.map +7 -1
  84. package/dist/pagination.js +1029 -3
  85. package/dist/pagination.js.map +7 -1
  86. package/dist/progress-bar.cjs +581 -4
  87. package/dist/progress-bar.cjs.map +7 -1
  88. package/dist/progress-bar.js +525 -3
  89. package/dist/progress-bar.js.map +7 -1
  90. package/dist/radio-group.cjs +973 -5
  91. package/dist/radio-group.cjs.map +7 -1
  92. package/dist/radio-group.js +899 -4
  93. package/dist/radio-group.js.map +7 -1
  94. package/dist/select.cjs +1242 -45
  95. package/dist/select.cjs.map +7 -1
  96. package/dist/select.js +1159 -44
  97. package/dist/select.js.map +7 -1
  98. package/dist/slider.cjs +1420 -4
  99. package/dist/slider.cjs.map +7 -1
  100. package/dist/slider.js +1351 -3
  101. package/dist/slider.js.map +7 -1
  102. package/dist/spinner.cjs +587 -4
  103. package/dist/spinner.cjs.map +7 -1
  104. package/dist/spinner.js +528 -3
  105. package/dist/spinner.js.map +7 -1
  106. package/dist/styles/layout.cjs +1 -0
  107. package/dist/styles/layout.js +1 -0
  108. package/dist/styles/radius.cjs +1 -0
  109. package/dist/styles/radius.js +1 -0
  110. package/dist/styles/variables.cjs +1 -0
  111. package/dist/styles/variables.js +1 -0
  112. package/dist/switch.cjs +1092 -4
  113. package/dist/switch.cjs.map +7 -1
  114. package/dist/switch.js +1013 -3
  115. package/dist/switch.js.map +7 -1
  116. package/dist/tabs.cjs +660 -6
  117. package/dist/tabs.cjs.map +7 -1
  118. package/dist/tabs.js +591 -5
  119. package/dist/tabs.js.map +7 -1
  120. package/dist/tag.cjs +591 -3
  121. package/dist/tag.cjs.map +7 -1
  122. package/dist/tag.js +532 -2
  123. package/dist/tag.js.map +7 -1
  124. package/dist/text-input.cjs +829 -4
  125. package/dist/text-input.cjs.map +7 -1
  126. package/dist/text-input.js +761 -3
  127. package/dist/text-input.js.map +7 -1
  128. package/dist/textarea.cjs +914 -3
  129. package/dist/textarea.cjs.map +7 -1
  130. package/dist/textarea.js +854 -2
  131. package/dist/textarea.js.map +7 -1
  132. package/dist/tooltip.cjs +764 -4
  133. package/dist/tooltip.cjs.map +7 -1
  134. package/dist/tooltip.js +711 -3
  135. package/dist/tooltip.js.map +7 -1
  136. package/dist/tree.cjs +1059 -4
  137. package/dist/tree.cjs.map +7 -1
  138. package/dist/tree.js +985 -3
  139. package/dist/tree.js.map +7 -1
  140. package/dist/types/card/defines.d.ts +1 -1
  141. package/dist/types/detail/defines.d.ts +1 -1
  142. package/dist/types/dialog/dialog.d.ts +1 -0
  143. package/dist/types/drawer/drawer.d.ts +2 -0
  144. package/dist/types/icon/defines.d.ts +7 -1
  145. package/dist/types/icon/index.d.ts +1 -1
  146. package/dist/types/menu/defines.d.ts +1 -0
  147. package/dist/types/menu/menu-item.d.ts +1 -0
  148. package/dist/types/menu/menu.d.ts +1 -0
  149. package/dist/types/styles/layout.d.ts +2 -0
  150. package/dist/types/styles/radius.d.ts +2 -0
  151. package/dist/types/styles/variables.d.ts +2 -0
  152. package/dist/types/tabs/defines.d.ts +1 -0
  153. package/dist/types/tabs/tabs.d.ts +3 -0
  154. package/package.json +31 -7
  155. package/src/alert/alert.ts +3 -3
  156. package/src/badge/badge.ts +4 -4
  157. package/src/breadcrumb/breadcrumb-item.ts +2 -2
  158. package/src/breadcrumb/breadcrumb.ts +3 -3
  159. package/src/button/button.ts +4 -4
  160. package/src/button-group/button-group.ts +8 -9
  161. package/src/card/card.ts +3 -3
  162. package/src/card/defines.ts +1 -1
  163. package/src/checkbox/checkbox.ts +6 -6
  164. package/src/copy-button/copy-button.ts +13 -9
  165. package/src/detail/defines.ts +1 -1
  166. package/src/detail/detail.ts +3 -3
  167. package/src/detail-group/detail-group.ts +2 -2
  168. package/src/dialog/dialog.ts +15 -14
  169. package/src/divider/divider.ts +3 -3
  170. package/src/drawer/drawer.ts +28 -11
  171. package/src/dropdown/dropdown-item.ts +2 -2
  172. package/src/dropdown/dropdown.ts +2 -2
  173. package/src/icon/defines.ts +8 -1
  174. package/src/icon/icon.ts +32 -14
  175. package/src/icon/index.ts +1 -1
  176. package/src/icon/registry.ts +2 -2
  177. package/src/menu/defines.ts +1 -0
  178. package/src/menu/menu-item.ts +14 -4
  179. package/src/menu/menu.ts +5 -2
  180. package/src/navbar/navbar.ts +3 -3
  181. package/src/number-input/number-input.ts +5 -5
  182. package/src/pagination/pagination.ts +3 -3
  183. package/src/progress-bar/progress-bar.ts +3 -3
  184. package/src/radio-group/radio-group.ts +12 -8
  185. package/src/select/select-option.ts +2 -2
  186. package/src/select/select.ts +5 -5
  187. package/src/slider/slider.ts +6 -6
  188. package/src/spinner/spinner.ts +4 -4
  189. package/src/styles/color.css +91 -91
  190. package/src/styles/components/action-button.css +12 -12
  191. package/src/styles/components/alert.css +22 -28
  192. package/src/styles/components/badge.css +13 -20
  193. package/src/styles/components/breadcrumb-item.css +7 -7
  194. package/src/styles/components/button-group.css +2 -0
  195. package/src/styles/components/button.css +39 -50
  196. package/src/styles/components/card.css +69 -30
  197. package/src/styles/components/checkbox.css +22 -16
  198. package/src/styles/components/copy-button.css +22 -33
  199. package/src/styles/components/detail.css +51 -39
  200. package/src/styles/components/dialog.css +11 -11
  201. package/src/styles/components/divider.css +3 -3
  202. package/src/styles/components/drawer.css +59 -27
  203. package/src/styles/components/dropdown-item.css +7 -8
  204. package/src/styles/components/dropdown.css +3 -4
  205. package/src/styles/components/field-label.css +13 -13
  206. package/src/styles/components/icon-button.css +25 -36
  207. package/src/styles/components/icon.css +1 -1
  208. package/src/styles/components/menu-item.css +13 -8
  209. package/src/styles/components/navbar.css +23 -44
  210. package/src/styles/components/number-input.css +27 -36
  211. package/src/styles/components/pagination.css +31 -31
  212. package/src/styles/components/progress-bar.css +2 -3
  213. package/src/styles/components/radio-group.css +88 -83
  214. package/src/styles/components/select-option.css +5 -5
  215. package/src/styles/components/select.css +21 -33
  216. package/src/styles/components/slider.css +56 -34
  217. package/src/styles/components/spinner.css +7 -9
  218. package/src/styles/components/switch.css +21 -19
  219. package/src/styles/components/tab.css +4 -5
  220. package/src/styles/components/tabs.css +48 -1
  221. package/src/styles/components/tag.css +14 -21
  222. package/src/styles/components/text-input.css +13 -22
  223. package/src/styles/components/textarea.css +12 -21
  224. package/src/styles/components/tooltip.css +4 -5
  225. package/src/styles/components/tree-item.css +12 -12
  226. package/src/styles/layout.css +5 -2
  227. package/src/styles/radius.css +25 -0
  228. package/src/styles/size.css +7 -7
  229. package/src/styles/variables.css +271 -247
  230. package/src/switch/switch.ts +6 -6
  231. package/src/tabs/defines.ts +1 -0
  232. package/src/tabs/tab-panel.ts +1 -1
  233. package/src/tabs/tab.ts +1 -1
  234. package/src/tabs/tabs.ts +14 -2
  235. package/src/tag/tag.ts +4 -4
  236. package/src/text-input/text-input.ts +5 -5
  237. package/src/textarea/textarea.ts +5 -5
  238. package/src/tooltip/tooltip.ts +2 -2
  239. package/src/tree/tree-item.ts +2 -2
  240. package/src/tree/tree.ts +2 -2
  241. package/dist/chunks/action-button.cjs +0 -296
  242. package/dist/chunks/action-button.cjs.map +0 -1
  243. package/dist/chunks/action-button.js +0 -297
  244. package/dist/chunks/action-button.js.map +0 -1
  245. package/dist/chunks/aeico-component.cjs +0 -17
  246. package/dist/chunks/aeico-component.cjs.map +0 -1
  247. package/dist/chunks/aeico-component.js +0 -18
  248. package/dist/chunks/aeico-component.js.map +0 -1
  249. package/dist/chunks/alert.cjs +0 -170
  250. package/dist/chunks/alert.cjs.map +0 -1
  251. package/dist/chunks/alert.js +0 -171
  252. package/dist/chunks/alert.js.map +0 -1
  253. package/dist/chunks/badge.cjs +0 -85
  254. package/dist/chunks/badge.cjs.map +0 -1
  255. package/dist/chunks/badge.js +0 -86
  256. package/dist/chunks/badge.js.map +0 -1
  257. package/dist/chunks/breadcrumb-item.cjs +0 -261
  258. package/dist/chunks/breadcrumb-item.cjs.map +0 -1
  259. package/dist/chunks/breadcrumb-item.js +0 -262
  260. package/dist/chunks/breadcrumb-item.js.map +0 -1
  261. package/dist/chunks/button-group.cjs +0 -79
  262. package/dist/chunks/button-group.cjs.map +0 -1
  263. package/dist/chunks/button-group.js +0 -80
  264. package/dist/chunks/button-group.js.map +0 -1
  265. package/dist/chunks/button.cjs +0 -348
  266. package/dist/chunks/button.cjs.map +0 -1
  267. package/dist/chunks/button.js +0 -349
  268. package/dist/chunks/button.js.map +0 -1
  269. package/dist/chunks/card.cjs +0 -93
  270. package/dist/chunks/card.cjs.map +0 -1
  271. package/dist/chunks/card.js +0 -94
  272. package/dist/chunks/card.js.map +0 -1
  273. package/dist/chunks/checkbox.cjs +0 -86
  274. package/dist/chunks/checkbox.cjs.map +0 -1
  275. package/dist/chunks/checkbox.js +0 -87
  276. package/dist/chunks/checkbox.js.map +0 -1
  277. package/dist/chunks/color.cjs +0 -4
  278. package/dist/chunks/color.cjs.map +0 -1
  279. package/dist/chunks/color.js +0 -5
  280. package/dist/chunks/color.js.map +0 -1
  281. package/dist/chunks/copy-button.cjs +0 -168
  282. package/dist/chunks/copy-button.cjs.map +0 -1
  283. package/dist/chunks/copy-button.js +0 -169
  284. package/dist/chunks/copy-button.js.map +0 -1
  285. package/dist/chunks/detail.cjs +0 -146
  286. package/dist/chunks/detail.cjs.map +0 -1
  287. package/dist/chunks/detail.js +0 -147
  288. package/dist/chunks/detail.js.map +0 -1
  289. package/dist/chunks/dialog.cjs +0 -117
  290. package/dist/chunks/dialog.cjs.map +0 -1
  291. package/dist/chunks/dialog.js +0 -118
  292. package/dist/chunks/dialog.js.map +0 -1
  293. package/dist/chunks/divider.cjs +0 -80
  294. package/dist/chunks/divider.cjs.map +0 -1
  295. package/dist/chunks/divider.js +0 -81
  296. package/dist/chunks/divider.js.map +0 -1
  297. package/dist/chunks/drawer.cjs +0 -180
  298. package/dist/chunks/drawer.cjs.map +0 -1
  299. package/dist/chunks/drawer.js +0 -181
  300. package/dist/chunks/drawer.js.map +0 -1
  301. package/dist/chunks/dropdown-button.cjs +0 -534
  302. package/dist/chunks/dropdown-button.cjs.map +0 -1
  303. package/dist/chunks/dropdown-button.js +0 -535
  304. package/dist/chunks/dropdown-button.js.map +0 -1
  305. package/dist/chunks/icon-button.cjs +0 -35
  306. package/dist/chunks/icon-button.cjs.map +0 -1
  307. package/dist/chunks/icon-button.js +0 -36
  308. package/dist/chunks/icon-button.js.map +0 -1
  309. package/dist/chunks/icon.cjs +0 -108
  310. package/dist/chunks/icon.cjs.map +0 -1
  311. package/dist/chunks/icon.js +0 -109
  312. package/dist/chunks/icon.js.map +0 -1
  313. package/dist/chunks/menu.cjs +0 -396
  314. package/dist/chunks/menu.cjs.map +0 -1
  315. package/dist/chunks/menu.js +0 -397
  316. package/dist/chunks/menu.js.map +0 -1
  317. package/dist/chunks/navbar.cjs +0 -142
  318. package/dist/chunks/navbar.cjs.map +0 -1
  319. package/dist/chunks/navbar.js +0 -143
  320. package/dist/chunks/navbar.js.map +0 -1
  321. package/dist/chunks/pagination.cjs +0 -475
  322. package/dist/chunks/pagination.cjs.map +0 -1
  323. package/dist/chunks/pagination.js +0 -476
  324. package/dist/chunks/pagination.js.map +0 -1
  325. package/dist/chunks/progress-bar.cjs +0 -101
  326. package/dist/chunks/progress-bar.cjs.map +0 -1
  327. package/dist/chunks/progress-bar.js +0 -102
  328. package/dist/chunks/progress-bar.js.map +0 -1
  329. package/dist/chunks/radio.cjs +0 -185
  330. package/dist/chunks/radio.cjs.map +0 -1
  331. package/dist/chunks/radio.js +0 -186
  332. package/dist/chunks/radio.js.map +0 -1
  333. package/dist/chunks/select.cjs +0 -381
  334. package/dist/chunks/select.cjs.map +0 -1
  335. package/dist/chunks/select.js +0 -382
  336. package/dist/chunks/select.js.map +0 -1
  337. package/dist/chunks/size.cjs +0 -4
  338. package/dist/chunks/size.cjs.map +0 -1
  339. package/dist/chunks/size.js +0 -5
  340. package/dist/chunks/size.js.map +0 -1
  341. package/dist/chunks/slider.cjs +0 -611
  342. package/dist/chunks/slider.cjs.map +0 -1
  343. package/dist/chunks/slider.js +0 -612
  344. package/dist/chunks/slider.js.map +0 -1
  345. package/dist/chunks/spinner.cjs +0 -102
  346. package/dist/chunks/spinner.cjs.map +0 -1
  347. package/dist/chunks/spinner.js +0 -103
  348. package/dist/chunks/spinner.js.map +0 -1
  349. package/dist/chunks/switch.cjs +0 -167
  350. package/dist/chunks/switch.cjs.map +0 -1
  351. package/dist/chunks/switch.js +0 -168
  352. package/dist/chunks/switch.js.map +0 -1
  353. package/dist/chunks/tab-panel.cjs +0 -165
  354. package/dist/chunks/tab-panel.cjs.map +0 -1
  355. package/dist/chunks/tab-panel.js +0 -166
  356. package/dist/chunks/tab-panel.js.map +0 -1
  357. package/dist/chunks/tag.cjs +0 -108
  358. package/dist/chunks/tag.cjs.map +0 -1
  359. package/dist/chunks/tag.js +0 -109
  360. package/dist/chunks/tag.js.map +0 -1
  361. package/dist/chunks/text-input.cjs +0 -54
  362. package/dist/chunks/text-input.cjs.map +0 -1
  363. package/dist/chunks/text-input.js +0 -55
  364. package/dist/chunks/text-input.js.map +0 -1
  365. package/dist/chunks/textarea.cjs +0 -137
  366. package/dist/chunks/textarea.cjs.map +0 -1
  367. package/dist/chunks/textarea.js +0 -138
  368. package/dist/chunks/textarea.js.map +0 -1
  369. package/dist/chunks/tooltip.cjs +0 -293
  370. package/dist/chunks/tooltip.cjs.map +0 -1
  371. package/dist/chunks/tooltip.js +0 -294
  372. package/dist/chunks/tooltip.js.map +0 -1
  373. package/dist/chunks/tree.cjs +0 -468
  374. package/dist/chunks/tree.cjs.map +0 -1
  375. package/dist/chunks/tree.js +0 -469
  376. package/dist/chunks/tree.js.map +0 -1
  377. package/dist/chunks/variables.cjs +0 -372
  378. package/dist/chunks/variables.cjs.map +0 -1
  379. package/dist/chunks/variables.js +0 -373
  380. package/dist/chunks/variables.js.map +0 -1
@@ -1 +0,0 @@
1
- {"version":3,"file":"breadcrumb-item.cjs","sources":["../../src/breadcrumb/breadcrumb.ts","../../src/breadcrumb/breadcrumb-item.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport style from '../styles/components/breadcrumb.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\nimport type BreadcrumbItem from './breadcrumb-item';\n\n/**\n * Breadcrumb Component\n *\n * A navigation trail that shows the user's location in a hierarchy.\n * Automatically injects separators between items and marks the last item\n * as `aria-current=\"page\"`.\n *\n * The separator is configurable via:\n * - `separator` attribute (text, default `/`) — simple and concise\n * - `slot=\"separator\"` (any element, e.g. `ae-icon`) — takes priority over the attribute\n *\n * Supports `color` for theming item link colors. The separator intentionally\n * uses a fixed muted color and does NOT respond to the `color` prop.\n *\n * @example\n * ```html\n * <!-- Default separator \"/\" -->\n * <ae-breadcrumb>\n * <ae-breadcrumb-item href=\"/\">Home</ae-breadcrumb-item>\n * <ae-breadcrumb-item href=\"/docs\">Docs</ae-breadcrumb-item>\n * <ae-breadcrumb-item>Getting Started</ae-breadcrumb-item>\n * </ae-breadcrumb>\n *\n * <!-- Custom text separator -->\n * <ae-breadcrumb separator=\">\">\n * <ae-breadcrumb-item href=\"/\">Home</ae-breadcrumb-item>\n * <ae-breadcrumb-item>Current</ae-breadcrumb-item>\n * </ae-breadcrumb>\n *\n * <!-- Icon separator (slot takes priority over separator attribute) -->\n * <ae-breadcrumb>\n * <ae-icon slot=\"separator\" name=\"chevron-right\" size=\"xs\"></ae-icon>\n * <ae-breadcrumb-item href=\"/\">Home</ae-breadcrumb-item>\n * <ae-breadcrumb-item>Current</ae-breadcrumb-item>\n * </ae-breadcrumb>\n * ```\n */\nclass Breadcrumb extends AeicoComponent {\n static tagName = 'breadcrumb';\n\n protected static styles = [styleVariables, colorCSS, style];\n\n /** Text separator shown between items. Ignored when `slot=\"separator\"` is provided. */\n @prop({ type: String })\n accessor separator: string = '/';\n\n @prop({ type: String })\n accessor color: string | undefined;\n\n private _itemsSlot: HTMLSlotElement | null = null;\n private _sepSlot: HTMLSlotElement | null = null;\n\n protected render() {\n return html(({ nav, ol, slot }) => {\n nav({ 'aria-label': 'breadcrumb', part: 'nav' }, () => {\n ol({ part: 'list', className: 'list' }, () => {\n this._itemsSlot = slot({\n '@slotchange': () => this._syncSeparators(),\n });\n });\n });\n this._sepSlot = slot({\n name: 'separator',\n className: 'sep-template',\n '@slotchange': () => this._syncSeparators(),\n });\n });\n }\n\n protected onUpdated() {\n this._syncSeparators();\n }\n\n private _getItems(): BreadcrumbItem[] {\n return (this._itemsSlot?.assignedElements() ?? []) as BreadcrumbItem[];\n }\n\n private _getSepElement(): Element | null {\n return this._sepSlot?.assignedElements()[0] ?? null;\n }\n\n private _syncSeparators = () => {\n const items = this._getItems();\n const sepEl = this._getSepElement();\n\n items.forEach((item, i) => {\n // Remove previously injected separators to avoid duplicates\n item.querySelectorAll('[data-ae-sep]').forEach((n) => n.remove());\n\n const isLast = i === items.length - 1;\n\n // Mark the last item as the current page for accessibility\n if (isLast) {\n item.setAttribute('aria-current', 'page');\n } else {\n item.removeAttribute('aria-current');\n }\n\n // First item gets no separator\n if (i === 0) return;\n\n const wrapper = document.createElement('span');\n wrapper.setAttribute('slot', 'separator');\n wrapper.setAttribute('data-ae-sep', '');\n wrapper.setAttribute('aria-hidden', 'true');\n\n if (sepEl) {\n // Clone the slotted separator element (e.g. ae-icon)\n wrapper.appendChild(sepEl.cloneNode(true));\n } else {\n // Fall back to text separator\n wrapper.textContent = this.separator;\n }\n\n item.prepend(wrapper);\n });\n };\n}\n\nBreadcrumb.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-breadcrumb': Breadcrumb;\n }\n}\n\nexport default Breadcrumb;\nexport type BreadcrumbProps = InferProps<typeof Breadcrumb>;\n","import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport style from '../styles/components/breadcrumb-item.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\n\n/**\n * BreadcrumbItem Component\n *\n * A single item in the `ae-breadcrumb` navigation trail.\n * Renders as a link (`<a>`) when `href` is provided, otherwise as plain text.\n * The separator is injected by the parent `ae-breadcrumb`.\n *\n * @example\n * ```html\n * <ae-breadcrumb>\n * <ae-breadcrumb-item href=\"/\">Home</ae-breadcrumb-item>\n * <ae-breadcrumb-item href=\"/docs\">Docs</ae-breadcrumb-item>\n * <ae-breadcrumb-item>Current Page</ae-breadcrumb-item>\n * </ae-breadcrumb>\n * ```\n */\nclass BreadcrumbItem extends AeicoComponent {\n static tagName = 'breadcrumb-item';\n\n protected static styles = [styleVariables, style];\n\n @prop({ type: String })\n accessor href: string | undefined;\n\n protected render() {\n return html(({ li, span, slot, a }) => {\n li({ part: 'item', className: 'item' }, () => {\n span({ part: 'separator', className: 'sep', 'aria-hidden': 'true' }, () => {\n slot({ name: 'separator' });\n });\n span({ part: 'label', className: 'label' }, () => {\n if (this.href) {\n a({ href: this.href, part: 'link' }, () => {\n slot();\n });\n } else {\n slot();\n }\n });\n });\n });\n }\n}\n\nBreadcrumbItem.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-breadcrumb-item': BreadcrumbItem;\n }\n}\n\nexport default BreadcrumbItem;\nexport type BreadcrumbItemProps = InferProps<typeof BreadcrumbItem>;\n"],"names":["_a","_init","AeicoComponent","prop","__privateAdd","__runInitializers","__publicField","html","__decoratorStart","__decorateElement","__decoratorMetadata","styleVariables","colorCSS","style"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,YAAA,gBAAAA,MAAAC,SAAA,YAAA;AA8CA,MAAM,oBAAmBD,OAAAE,+BAMvB,iBAAA,CAACC,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,aAAA,CAACA,WAAK,EAAE,MAAM,OAAA,CAAQ,IATCH,MAAe;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA;AAOEI,mBAAA,MAAS,YAAoBC,oBAA7BJ,SAAA,GAAA,MAA6B,GAAA,CAAA,GAA7BI,oBAAAJ,SAAA,IAAA,IAAA;AAGAG,mBAAA,MAAS,QAATC,oBAAAJ,SAAA,IAAA,IAAA,CAAA,GAAAI,oBAAAJ,SAAA,IAAA,IAAA;AAEAK,oBAAA,MAAQ,cAAqC,IAAA;AAC7CA,oBAAA,MAAQ,YAAmC,IAAA;AA+B3CA,oBAAA,MAAQ,mBAAkB,MAAM;AAC9B,YAAM,QAAQ,KAAK,UAAA;AACnB,YAAM,QAAQ,KAAK,eAAA;AAEnB,YAAM,QAAQ,CAAC,MAAM,MAAM;AAEzB,aAAK,iBAAiB,eAAe,EAAE,QAAQ,CAAC,MAAM,EAAE,QAAQ;AAEhE,cAAM,SAAS,MAAM,MAAM,SAAS;AAGpC,YAAI,QAAQ;AACV,eAAK,aAAa,gBAAgB,MAAM;AAAA,QAC1C,OAAO;AACL,eAAK,gBAAgB,cAAc;AAAA,QACrC;AAGA,YAAI,MAAM,EAAG;AAEb,cAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,gBAAQ,aAAa,QAAQ,WAAW;AACxC,gBAAQ,aAAa,eAAe,EAAE;AACtC,gBAAQ,aAAa,eAAe,MAAM;AAE1C,YAAI,OAAO;AAET,kBAAQ,YAAY,MAAM,UAAU,IAAI,CAAC;AAAA,QAC3C,OAAO;AAEL,kBAAQ,cAAc,KAAK;AAAA,QAC7B;AAEA,aAAK,QAAQ,OAAO;AAAA,MACtB,CAAC;AAAA,IACH,CAAA;AAAA,EAAA;AAAA,EAhEU,SAAS;AACjB,WAAOC,MAAAA,KAAK,CAAC,EAAE,KAAK,IAAI,WAAW;AACjC,UAAI,EAAE,cAAc,cAAc,MAAM,MAAA,GAAS,MAAM;AACrD,WAAG,EAAE,MAAM,QAAQ,WAAW,OAAA,GAAU,MAAM;AAC5C,eAAK,aAAa,KAAK;AAAA,YACrB,eAAe,MAAM,KAAK,gBAAA;AAAA,UAAgB,CAC3C;AAAA,QACH,CAAC;AAAA,MACH,CAAC;AACD,WAAK,WAAW,KAAK;AAAA,QACnB,MAAM;AAAA,QACN,WAAW;AAAA,QACX,eAAe,MAAM,KAAK,gBAAA;AAAA,MAAgB,CAC3C;AAAA,IACH,CAAC;AAAA,EACH;AAAA,EAEU,YAAY;AACpB,SAAK,gBAAA;AAAA,EACP;AAAA,EAEQ,YAA8B;;AACpC,aAAQP,MAAA,KAAK,eAAL,gBAAAA,IAAiB,uBAAsB,CAAA;AAAA,EACjD;AAAA,EAEQ,iBAAiC;;AACvC,aAAOA,MAAA,KAAK,aAAL,gBAAAA,IAAe,mBAAmB,OAAM;AAAA,EACjD;AAsCF;AAhFAC,UAAAO,mBAAAR,IAAA;AAOW,aAAA,oBAAA,QAAA;AAGA,SAAA,oBAAA,QAAA;AAHTS,oBAAAR,SAAA,GAAS,aADT,gBANI,YAOK,UAAA;AAGTQ,oBAAAR,SAAA,GAAS,SADT,YATI,YAUK,MAAA;AAVXS,sBAAAT,SAAM,UAAA;AACJK,gBADI,YACG,WAAU,YAAA;AAEjBA,gBAHI,YAGa,UAAS,CAACK,UAAAA,WAAgBC,MAAAA,UAAUC,OAAK,CAAA;AA+E5D,WAAW,SAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AChIX,IAAA,WAAA,IAAA,OAAA;AAuBA,MAAM,wBAAuB,oCAK3B,YAAA,CAACV,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GALK,IAAe;AAAA,EAA5C,cAAA;AAAA,UAAA,GAAA,SAAA;AAME,iBAAA,MAAS,OAAT,kBAAA,OAAA,GAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAAA,EAAA;AAAA,EAEU,SAAS;AACjB,WAAOI,MAAAA,KAAK,CAAC,EAAE,IAAI,MAAM,MAAM,QAAQ;AACrC,SAAG,EAAE,MAAM,QAAQ,WAAW,OAAA,GAAU,MAAM;AAC5C,aAAK,EAAE,MAAM,aAAa,WAAW,OAAO,eAAe,OAAA,GAAU,MAAM;AACzE,eAAK,EAAE,MAAM,aAAa;AAAA,QAC5B,CAAC;AACD,aAAK,EAAE,MAAM,SAAS,WAAW,QAAA,GAAW,MAAM;AAChD,cAAI,KAAK,MAAM;AACb,cAAE,EAAE,MAAM,KAAK,MAAM,MAAM,OAAA,GAAU,MAAM;AACzC,mBAAA;AAAA,YACF,CAAC;AAAA,UACH,OAAO;AACL,iBAAA;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AA1BA,QAAA,iBAAA,EAAA;AAMW,QAAA,oBAAA,QAAA;AAAT,kBAAA,OAAA,GAAS,QADT,WALI,gBAMK,KAAA;AANX,oBAAA,OAAM,cAAA;AACJ,cADI,gBACG,WAAU,iBAAA;AAEjB,cAHI,gBAGa,UAAS,CAACI,UAAAA,WAAgB,KAAK,CAAA;AAyBlD,eAAe,SAAA;;;"}
@@ -1,262 +0,0 @@
1
- import { v as variables } from "./variables.js";
2
- import { c as colorCSS } from "./color.js";
3
- import { A as AeicoComponent } from "./aeico-component.js";
4
- import { prop, html } from "aeico";
5
- const style$1 = ":host {\n display: block;\n}\n\n/* Hide the separator template slot visually */\n.sep-template {\n display: none !important;\n}\n\n.list {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n list-style: none;\n margin: 0;\n padding: 0;\n font-size: inherit;\n line-height: 1.5;\n}\n";
6
- var __create$1 = Object.create;
7
- var __defProp$1 = Object.defineProperty;
8
- var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
9
- var __knownSymbol$1 = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
10
- var __typeError$1 = (msg) => {
11
- throw TypeError(msg);
12
- };
13
- var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
14
- var __decoratorStart$1 = (base) => [, , , __create$1((base == null ? void 0 : base[__knownSymbol$1("metadata")]) ?? null)];
15
- var __decoratorStrings$1 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
16
- var __expectFn$1 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$1("Function expected") : fn;
17
- var __decoratorContext$1 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$1[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$1("Already initialized") : fns.push(__expectFn$1(fn || null)) });
18
- var __decoratorMetadata$1 = (array, target) => __defNormalProp$1(target, __knownSymbol$1("metadata"), array[3]);
19
- var __runInitializers$1 = (array, flags, self, value) => {
20
- for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
21
- return value;
22
- };
23
- var __decorateElement$1 = (array, flags, name, decorators, target, extra) => {
24
- var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
25
- var j = array.length + 1, key = __decoratorStrings$1[k + 5];
26
- var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
27
- var desc = (target = target.prototype, __getOwnPropDesc$1({ get [name]() {
28
- return __privateGet$1(this, extra);
29
- }, set [name](x) {
30
- return __privateSet$1(this, extra, x);
31
- } }, name));
32
- for (var i = decorators.length - 1; i >= 0; i--) {
33
- ctx = __decoratorContext$1(k, name, done = {}, array[3], extraInitializers);
34
- {
35
- ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
36
- access.get = (x) => x[name];
37
- access.set = (x, y) => x[name] = y;
38
- }
39
- it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
40
- if (it === void 0) __expectFn$1(it) && (desc[key] = it);
41
- else if (typeof it !== "object" || it === null) __typeError$1("Object expected");
42
- else __expectFn$1(fn = it.get) && (desc.get = fn), __expectFn$1(fn = it.set) && (desc.set = fn), __expectFn$1(fn = it.init) && initializers.unshift(fn);
43
- }
44
- return desc && __defProp$1(target, name, desc), target;
45
- };
46
- var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
47
- var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
48
- var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), member.get(obj));
49
- var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
50
- var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), member.set(obj, value), value);
51
- var _color_dec, _separator_dec, _a$1, _init$1, _separator, _color;
52
- class Breadcrumb extends (_a$1 = AeicoComponent, _separator_dec = [prop({ type: String })], _color_dec = [prop({ type: String })], _a$1) {
53
- constructor() {
54
- super(...arguments);
55
- __privateAdd$1(this, _separator, __runInitializers$1(_init$1, 8, this, "/")), __runInitializers$1(_init$1, 11, this);
56
- __privateAdd$1(this, _color, __runInitializers$1(_init$1, 12, this)), __runInitializers$1(_init$1, 15, this);
57
- __publicField$1(this, "_itemsSlot", null);
58
- __publicField$1(this, "_sepSlot", null);
59
- __publicField$1(this, "_syncSeparators", () => {
60
- const items = this._getItems();
61
- const sepEl = this._getSepElement();
62
- items.forEach((item, i) => {
63
- item.querySelectorAll("[data-ae-sep]").forEach((n) => n.remove());
64
- const isLast = i === items.length - 1;
65
- if (isLast) {
66
- item.setAttribute("aria-current", "page");
67
- } else {
68
- item.removeAttribute("aria-current");
69
- }
70
- if (i === 0) return;
71
- const wrapper = document.createElement("span");
72
- wrapper.setAttribute("slot", "separator");
73
- wrapper.setAttribute("data-ae-sep", "");
74
- wrapper.setAttribute("aria-hidden", "true");
75
- if (sepEl) {
76
- wrapper.appendChild(sepEl.cloneNode(true));
77
- } else {
78
- wrapper.textContent = this.separator;
79
- }
80
- item.prepend(wrapper);
81
- });
82
- });
83
- }
84
- render() {
85
- return html(({ nav, ol, slot }) => {
86
- nav({ "aria-label": "breadcrumb", part: "nav" }, () => {
87
- ol({ part: "list", className: "list" }, () => {
88
- this._itemsSlot = slot({
89
- "@slotchange": () => this._syncSeparators()
90
- });
91
- });
92
- });
93
- this._sepSlot = slot({
94
- name: "separator",
95
- className: "sep-template",
96
- "@slotchange": () => this._syncSeparators()
97
- });
98
- });
99
- }
100
- onUpdated() {
101
- this._syncSeparators();
102
- }
103
- _getItems() {
104
- var _a2;
105
- return ((_a2 = this._itemsSlot) == null ? void 0 : _a2.assignedElements()) ?? [];
106
- }
107
- _getSepElement() {
108
- var _a2;
109
- return ((_a2 = this._sepSlot) == null ? void 0 : _a2.assignedElements()[0]) ?? null;
110
- }
111
- }
112
- _init$1 = __decoratorStart$1(_a$1);
113
- _separator = /* @__PURE__ */ new WeakMap();
114
- _color = /* @__PURE__ */ new WeakMap();
115
- __decorateElement$1(_init$1, 4, "separator", _separator_dec, Breadcrumb, _separator);
116
- __decorateElement$1(_init$1, 4, "color", _color_dec, Breadcrumb, _color);
117
- __decoratorMetadata$1(_init$1, Breadcrumb);
118
- __publicField$1(Breadcrumb, "tagName", "breadcrumb");
119
- __publicField$1(Breadcrumb, "styles", [variables, colorCSS, style$1]);
120
- Breadcrumb.register();
121
- const style = `:host {
122
- display: contents;
123
- }
124
-
125
- .item {
126
- display: inline-flex;
127
- align-items: center;
128
- list-style: none;
129
- white-space: nowrap;
130
- }
131
-
132
- /* Separator — uses a fixed muted color that does NOT follow the breadcrumb's color prop */
133
- .sep {
134
- display: inline-flex;
135
- align-items: center;
136
- color: var(--color-text-muted);
137
- padding: 0 0.35em;
138
- user-select: none;
139
- pointer-events: none;
140
- flex-shrink: 0;
141
- font-size: 0.85em;
142
- }
143
-
144
- /* Hide separator on the first item */
145
- :host(:first-child) .sep,
146
- :host(:first-of-type) .sep {
147
- display: none;
148
- }
149
-
150
- .label {
151
- display: inline-flex;
152
- align-items: center;
153
- color: var(--color-text-muted);
154
- }
155
-
156
- /* Current page — last item */
157
- :host([aria-current="page"]) .label {
158
- color: var(--color-text-main);
159
- font-weight: 500;
160
- cursor: default;
161
- }
162
-
163
- /* Link items */
164
- .label a {
165
- color: var(--color-accent, var(--color-text-link));
166
- text-decoration: none;
167
- outline: none;
168
- }
169
-
170
- .label a:hover {
171
- color: var(--color-accent-hover, var(--color-text-link-hover));
172
- text-decoration: underline;
173
- }
174
-
175
- .label a:focus-visible {
176
- outline: 2px solid var(--color-accent, var(--focus-ring-color));
177
- outline-offset: 2px;
178
- border-radius: 2px;
179
- }
180
- `;
181
- var __create = Object.create;
182
- var __defProp = Object.defineProperty;
183
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
184
- var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
185
- var __typeError = (msg) => {
186
- throw TypeError(msg);
187
- };
188
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
189
- var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
190
- var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
191
- var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
192
- var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
193
- var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
194
- var __runInitializers = (array, flags, self, value) => {
195
- for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
196
- return value;
197
- };
198
- var __decorateElement = (array, flags, name, decorators, target, extra) => {
199
- var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
200
- var j = array.length + 1, key = __decoratorStrings[k + 5];
201
- var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
202
- var desc = (target = target.prototype, __getOwnPropDesc({ get [name]() {
203
- return __privateGet(this, extra);
204
- }, set [name](x) {
205
- return __privateSet(this, extra, x);
206
- } }, name));
207
- for (var i = decorators.length - 1; i >= 0; i--) {
208
- ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
209
- {
210
- ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
211
- access.get = (x) => x[name];
212
- access.set = (x, y) => x[name] = y;
213
- }
214
- it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
215
- if (it === void 0) __expectFn(it) && (desc[key] = it);
216
- else if (typeof it !== "object" || it === null) __typeError("Object expected");
217
- else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
218
- }
219
- return desc && __defProp(target, name, desc), target;
220
- };
221
- var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
222
- var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
223
- var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
224
- var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
225
- var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
226
- var _href_dec, _a, _init, _href;
227
- class BreadcrumbItem extends (_a = AeicoComponent, _href_dec = [prop({ type: String })], _a) {
228
- constructor() {
229
- super(...arguments);
230
- __privateAdd(this, _href, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
231
- }
232
- render() {
233
- return html(({ li, span, slot, a }) => {
234
- li({ part: "item", className: "item" }, () => {
235
- span({ part: "separator", className: "sep", "aria-hidden": "true" }, () => {
236
- slot({ name: "separator" });
237
- });
238
- span({ part: "label", className: "label" }, () => {
239
- if (this.href) {
240
- a({ href: this.href, part: "link" }, () => {
241
- slot();
242
- });
243
- } else {
244
- slot();
245
- }
246
- });
247
- });
248
- });
249
- }
250
- }
251
- _init = __decoratorStart(_a);
252
- _href = /* @__PURE__ */ new WeakMap();
253
- __decorateElement(_init, 4, "href", _href_dec, BreadcrumbItem, _href);
254
- __decoratorMetadata(_init, BreadcrumbItem);
255
- __publicField(BreadcrumbItem, "tagName", "breadcrumb-item");
256
- __publicField(BreadcrumbItem, "styles", [variables, style]);
257
- BreadcrumbItem.register();
258
- export {
259
- Breadcrumb as B,
260
- BreadcrumbItem as a
261
- };
262
- //# sourceMappingURL=breadcrumb-item.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"breadcrumb-item.js","sources":["../../src/breadcrumb/breadcrumb.ts","../../src/breadcrumb/breadcrumb-item.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport style from '../styles/components/breadcrumb.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\nimport type BreadcrumbItem from './breadcrumb-item';\n\n/**\n * Breadcrumb Component\n *\n * A navigation trail that shows the user's location in a hierarchy.\n * Automatically injects separators between items and marks the last item\n * as `aria-current=\"page\"`.\n *\n * The separator is configurable via:\n * - `separator` attribute (text, default `/`) — simple and concise\n * - `slot=\"separator\"` (any element, e.g. `ae-icon`) — takes priority over the attribute\n *\n * Supports `color` for theming item link colors. The separator intentionally\n * uses a fixed muted color and does NOT respond to the `color` prop.\n *\n * @example\n * ```html\n * <!-- Default separator \"/\" -->\n * <ae-breadcrumb>\n * <ae-breadcrumb-item href=\"/\">Home</ae-breadcrumb-item>\n * <ae-breadcrumb-item href=\"/docs\">Docs</ae-breadcrumb-item>\n * <ae-breadcrumb-item>Getting Started</ae-breadcrumb-item>\n * </ae-breadcrumb>\n *\n * <!-- Custom text separator -->\n * <ae-breadcrumb separator=\">\">\n * <ae-breadcrumb-item href=\"/\">Home</ae-breadcrumb-item>\n * <ae-breadcrumb-item>Current</ae-breadcrumb-item>\n * </ae-breadcrumb>\n *\n * <!-- Icon separator (slot takes priority over separator attribute) -->\n * <ae-breadcrumb>\n * <ae-icon slot=\"separator\" name=\"chevron-right\" size=\"xs\"></ae-icon>\n * <ae-breadcrumb-item href=\"/\">Home</ae-breadcrumb-item>\n * <ae-breadcrumb-item>Current</ae-breadcrumb-item>\n * </ae-breadcrumb>\n * ```\n */\nclass Breadcrumb extends AeicoComponent {\n static tagName = 'breadcrumb';\n\n protected static styles = [styleVariables, colorCSS, style];\n\n /** Text separator shown between items. Ignored when `slot=\"separator\"` is provided. */\n @prop({ type: String })\n accessor separator: string = '/';\n\n @prop({ type: String })\n accessor color: string | undefined;\n\n private _itemsSlot: HTMLSlotElement | null = null;\n private _sepSlot: HTMLSlotElement | null = null;\n\n protected render() {\n return html(({ nav, ol, slot }) => {\n nav({ 'aria-label': 'breadcrumb', part: 'nav' }, () => {\n ol({ part: 'list', className: 'list' }, () => {\n this._itemsSlot = slot({\n '@slotchange': () => this._syncSeparators(),\n });\n });\n });\n this._sepSlot = slot({\n name: 'separator',\n className: 'sep-template',\n '@slotchange': () => this._syncSeparators(),\n });\n });\n }\n\n protected onUpdated() {\n this._syncSeparators();\n }\n\n private _getItems(): BreadcrumbItem[] {\n return (this._itemsSlot?.assignedElements() ?? []) as BreadcrumbItem[];\n }\n\n private _getSepElement(): Element | null {\n return this._sepSlot?.assignedElements()[0] ?? null;\n }\n\n private _syncSeparators = () => {\n const items = this._getItems();\n const sepEl = this._getSepElement();\n\n items.forEach((item, i) => {\n // Remove previously injected separators to avoid duplicates\n item.querySelectorAll('[data-ae-sep]').forEach((n) => n.remove());\n\n const isLast = i === items.length - 1;\n\n // Mark the last item as the current page for accessibility\n if (isLast) {\n item.setAttribute('aria-current', 'page');\n } else {\n item.removeAttribute('aria-current');\n }\n\n // First item gets no separator\n if (i === 0) return;\n\n const wrapper = document.createElement('span');\n wrapper.setAttribute('slot', 'separator');\n wrapper.setAttribute('data-ae-sep', '');\n wrapper.setAttribute('aria-hidden', 'true');\n\n if (sepEl) {\n // Clone the slotted separator element (e.g. ae-icon)\n wrapper.appendChild(sepEl.cloneNode(true));\n } else {\n // Fall back to text separator\n wrapper.textContent = this.separator;\n }\n\n item.prepend(wrapper);\n });\n };\n}\n\nBreadcrumb.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-breadcrumb': Breadcrumb;\n }\n}\n\nexport default Breadcrumb;\nexport type BreadcrumbProps = InferProps<typeof Breadcrumb>;\n","import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport style from '../styles/components/breadcrumb-item.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\n\n/**\n * BreadcrumbItem Component\n *\n * A single item in the `ae-breadcrumb` navigation trail.\n * Renders as a link (`<a>`) when `href` is provided, otherwise as plain text.\n * The separator is injected by the parent `ae-breadcrumb`.\n *\n * @example\n * ```html\n * <ae-breadcrumb>\n * <ae-breadcrumb-item href=\"/\">Home</ae-breadcrumb-item>\n * <ae-breadcrumb-item href=\"/docs\">Docs</ae-breadcrumb-item>\n * <ae-breadcrumb-item>Current Page</ae-breadcrumb-item>\n * </ae-breadcrumb>\n * ```\n */\nclass BreadcrumbItem extends AeicoComponent {\n static tagName = 'breadcrumb-item';\n\n protected static styles = [styleVariables, style];\n\n @prop({ type: String })\n accessor href: string | undefined;\n\n protected render() {\n return html(({ li, span, slot, a }) => {\n li({ part: 'item', className: 'item' }, () => {\n span({ part: 'separator', className: 'sep', 'aria-hidden': 'true' }, () => {\n slot({ name: 'separator' });\n });\n span({ part: 'label', className: 'label' }, () => {\n if (this.href) {\n a({ href: this.href, part: 'link' }, () => {\n slot();\n });\n } else {\n slot();\n }\n });\n });\n });\n }\n}\n\nBreadcrumbItem.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-breadcrumb-item': BreadcrumbItem;\n }\n}\n\nexport default BreadcrumbItem;\nexport type BreadcrumbItemProps = InferProps<typeof BreadcrumbItem>;\n"],"names":["_a","_init","__privateAdd","__runInitializers","__publicField","__decoratorStart","__decorateElement","__decoratorMetadata","styleVariables","style"],"mappings":"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"}
@@ -1,79 +0,0 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
4
- var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
5
- const variables = require("./variables.cjs");
6
- const aeicoComponent = require("./aeico-component.cjs");
7
- const aeico = require("aeico");
8
- const buttonGroupStyle = ":host {\n display: inline-flex;\n align-items: stretch;\n gap: 8px;\n}\n\n:host([block]) {\n display: flex;\n width: 100%;\n}\n\n:host([block]) ::slotted(ae-button) {\n flex: 1;\n}\n\n:host([compact]) {\n gap: 0;\n}\n\n/* Raise hovered/focused button so its border shows above neighbours */\n:host([compact]) ::slotted(ae-button:hover),\n:host([compact]) ::slotted(ae-button:focus-within) {\n position: relative;\n z-index: 1;\n}\n";
9
- class ButtonGroup extends aeicoComponent.AeicoComponent {
10
- constructor() {
11
- super(...arguments);
12
- __publicField(this, "slotEl", null);
13
- }
14
- connectedCallback() {
15
- super.connectedCallback();
16
- if (this.variant === void 0) this.variant = "filled";
17
- if (this.color === void 0) this.color = "default";
18
- if (this.size === void 0) this.size = "md";
19
- }
20
- render() {
21
- return aeico.html(({ slot }) => {
22
- this.slotEl = slot({
23
- "@slotchange": () => this._syncChildren()
24
- });
25
- this._syncChildren();
26
- });
27
- }
28
- _getButtons() {
29
- if (!this.slotEl) return [];
30
- return this.slotEl.assignedElements({ flatten: true }).filter((el) => {
31
- const tag = el.tagName.toLowerCase();
32
- return tag === "ae-button" || tag === "ae-dropdown-button";
33
- });
34
- }
35
- _syncChildren() {
36
- const buttons = this._getButtons();
37
- const r = this.size === "xs" || this.size === "sm" ? 3 : 4;
38
- buttons.forEach((btn, i) => {
39
- btn.variant = this.variant;
40
- btn.color = this.color;
41
- btn.size = this.size;
42
- if (this.disabled) {
43
- btn.disabled = true;
44
- } else {
45
- btn.disabled = false;
46
- }
47
- if (this.compact) {
48
- const isFirst = i === 0;
49
- const isLast = i === buttons.length - 1;
50
- btn.style.marginLeft = isFirst ? "" : "-1px";
51
- btn.style.setProperty("--_btn-r-tl", isFirst ? `${r}px` : "0");
52
- btn.style.setProperty("--_btn-r-bl", isFirst ? `${r}px` : "0");
53
- btn.style.setProperty("--_btn-r-tr", isLast ? `${r}px` : "0");
54
- btn.style.setProperty("--_btn-r-br", isLast ? `${r}px` : "0");
55
- } else {
56
- btn.style.marginLeft = "";
57
- this._clearRadius(btn);
58
- }
59
- });
60
- }
61
- _clearRadius(btn) {
62
- btn.style.removeProperty("--_btn-r-tl");
63
- btn.style.removeProperty("--_btn-r-tr");
64
- btn.style.removeProperty("--_btn-r-br");
65
- btn.style.removeProperty("--_btn-r-bl");
66
- }
67
- }
68
- __publicField(ButtonGroup, "props", {
69
- variant: { type: String },
70
- color: { type: String },
71
- size: { type: String },
72
- compact: { type: Boolean },
73
- block: { type: Boolean },
74
- disabled: { type: Boolean }
75
- });
76
- __publicField(ButtonGroup, "styles", [variables.variables, buttonGroupStyle]);
77
- ButtonGroup.register();
78
- exports.ButtonGroup = ButtonGroup;
79
- //# sourceMappingURL=button-group.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"button-group.cjs","sources":["../../src/button-group/button-group.ts"],"sourcesContent":["import type { InferProps, Props } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport buttonGroupStyle from '../styles/components/button-group.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type { ButtonColor, ButtonVariant, ButtonSize } from '../button';\nimport Button from '../button/button';\nimport DropdownButton from '../dropdown/dropdown-button';\n\n/**\n * ButtonGroup Component\n *\n * Groups multiple `ae-button` elements, propagating shared `variant`, `color`,\n * `size`, and `disabled` props to each child. Supports a `compact` mode that\n * joins buttons into a seamless connected strip (like Bootstrap's button group).\n *\n * @example\n * ```html\n * <!-- Loose group (gap between buttons) -->\n * <ae-button-group variant=\"outlined\" color=\"primary\">\n * <ae-button>One</ae-button>\n * <ae-button>Two</ae-button>\n * <ae-button>Three</ae-button>\n * </ae-button-group>\n *\n * <!-- Compact — joined strip -->\n * <ae-button-group compact color=\"primary\">\n * <ae-button>Left</ae-button>\n * <ae-button>Middle</ae-button>\n * <ae-button>Right</ae-button>\n * </ae-button-group>\n *\n * <!-- Full-width -->\n * <ae-button-group block color=\"danger\" variant=\"outlined\">\n * <ae-button>Delete</ae-button>\n * <ae-button>Archive</ae-button>\n * </ae-button-group>\n * ```\n */\nclass ButtonGroup extends AeicoComponent {\n static props: Props = {\n variant: { type: String },\n color: { type: String },\n size: { type: String },\n compact: { type: Boolean },\n block: { type: Boolean },\n disabled: { type: Boolean },\n };\n\n protected static styles = [styleVariables, buttonGroupStyle];\n\n declare variant?: ButtonVariant;\n declare color?: ButtonColor;\n declare size?: ButtonSize;\n declare compact?: boolean;\n declare block?: boolean;\n declare disabled?: boolean;\n\n private slotEl: HTMLSlotElement | null = null;\n\n connectedCallback() {\n super.connectedCallback();\n\n if (this.variant === undefined) this.variant = 'filled';\n if (this.color === undefined) this.color = 'default';\n if (this.size === undefined) this.size = 'md';\n }\n\n protected render() {\n return html(({ slot }) => {\n this.slotEl = slot({\n '@slotchange': () => this._syncChildren(),\n });\n this._syncChildren();\n });\n }\n\n private _getButtons(): Array<Button | DropdownButton> {\n if (!this.slotEl) return [];\n\n return (\n this.slotEl.assignedElements({ flatten: true }) as Array<Button | DropdownButton>\n ).filter((el) => {\n const tag = el.tagName.toLowerCase();\n return tag === 'ae-button' || tag === 'ae-dropdown-button';\n });\n }\n\n private _syncChildren() {\n const buttons = this._getButtons();\n const r = this.size === 'xs' || this.size === 'sm' ? 3 : 4;\n\n buttons.forEach((btn: Button | DropdownButton, i) => {\n btn.variant = this.variant;\n btn.color = this.color;\n btn.size = this.size;\n\n if (this.disabled) {\n btn.disabled = true;\n } else {\n btn.disabled = false;\n }\n\n if (this.compact) {\n const isFirst = i === 0;\n const isLast = i === buttons.length - 1;\n\n // Overlap adjacent borders by pulling non-first buttons left 1px\n btn.style.marginLeft = isFirst ? '' : '-1px';\n\n // Shape corners: only the outer edges of the strip keep radius\n btn.style.setProperty('--_btn-r-tl', isFirst ? `${r}px` : '0');\n btn.style.setProperty('--_btn-r-bl', isFirst ? `${r}px` : '0');\n btn.style.setProperty('--_btn-r-tr', isLast ? `${r}px` : '0');\n btn.style.setProperty('--_btn-r-br', isLast ? `${r}px` : '0');\n } else {\n btn.style.marginLeft = '';\n this._clearRadius(btn);\n }\n });\n }\n\n private _clearRadius(btn: HTMLElement) {\n btn.style.removeProperty('--_btn-r-tl');\n btn.style.removeProperty('--_btn-r-tr');\n btn.style.removeProperty('--_btn-r-br');\n btn.style.removeProperty('--_btn-r-bl');\n }\n}\n\nButtonGroup.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-button-group': ButtonGroup;\n }\n}\n\nexport default ButtonGroup;\nexport type ButtonGroupProps = InferProps<typeof ButtonGroup>;\n"],"names":["AeicoComponent","html","styleVariables"],"mappings":";;;;;;;;AAuCA,MAAM,oBAAoBA,eAAAA,eAAe;AAAA,EAAzC;AAAA;AAmBU,kCAAiC;AAAA;AAAA,EAEzC,oBAAoB;AAClB,UAAM,kBAAA;AAEN,QAAI,KAAK,YAAY,OAAW,MAAK,UAAU;AAC/C,QAAI,KAAK,UAAU,OAAW,MAAK,QAAQ;AAC3C,QAAI,KAAK,SAAS,OAAW,MAAK,OAAO;AAAA,EAC3C;AAAA,EAEU,SAAS;AACjB,WAAOC,MAAAA,KAAK,CAAC,EAAE,WAAW;AACxB,WAAK,SAAS,KAAK;AAAA,QACjB,eAAe,MAAM,KAAK,cAAA;AAAA,MAAc,CACzC;AACD,WAAK,cAAA;AAAA,IACP,CAAC;AAAA,EACH;AAAA,EAEQ,cAA8C;AACpD,QAAI,CAAC,KAAK,OAAQ,QAAO,CAAA;AAEzB,WACE,KAAK,OAAO,iBAAiB,EAAE,SAAS,MAAM,EAC9C,OAAO,CAAC,OAAO;AACf,YAAM,MAAM,GAAG,QAAQ,YAAA;AACvB,aAAO,QAAQ,eAAe,QAAQ;AAAA,IACxC,CAAC;AAAA,EACH;AAAA,EAEQ,gBAAgB;AACtB,UAAM,UAAU,KAAK,YAAA;AACrB,UAAM,IAAI,KAAK,SAAS,QAAQ,KAAK,SAAS,OAAO,IAAI;AAEzD,YAAQ,QAAQ,CAAC,KAA8B,MAAM;AACnD,UAAI,UAAU,KAAK;AACnB,UAAI,QAAQ,KAAK;AACjB,UAAI,OAAO,KAAK;AAEhB,UAAI,KAAK,UAAU;AACjB,YAAI,WAAW;AAAA,MACjB,OAAO;AACL,YAAI,WAAW;AAAA,MACjB;AAEA,UAAI,KAAK,SAAS;AAChB,cAAM,UAAU,MAAM;AACtB,cAAM,SAAS,MAAM,QAAQ,SAAS;AAGtC,YAAI,MAAM,aAAa,UAAU,KAAK;AAGtC,YAAI,MAAM,YAAY,eAAe,UAAU,GAAG,CAAC,OAAO,GAAG;AAC7D,YAAI,MAAM,YAAY,eAAe,UAAU,GAAG,CAAC,OAAO,GAAG;AAC7D,YAAI,MAAM,YAAY,eAAe,SAAS,GAAG,CAAC,OAAO,GAAG;AAC5D,YAAI,MAAM,YAAY,eAAe,SAAS,GAAG,CAAC,OAAO,GAAG;AAAA,MAC9D,OAAO;AACL,YAAI,MAAM,aAAa;AACvB,aAAK,aAAa,GAAG;AAAA,MACvB;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEQ,aAAa,KAAkB;AACrC,QAAI,MAAM,eAAe,aAAa;AACtC,QAAI,MAAM,eAAe,aAAa;AACtC,QAAI,MAAM,eAAe,aAAa;AACtC,QAAI,MAAM,eAAe,aAAa;AAAA,EACxC;AACF;AAxFE,cADI,aACG,SAAe;AAAA,EACpB,SAAS,EAAE,MAAM,OAAA;AAAA,EACjB,OAAO,EAAE,MAAM,OAAA;AAAA,EACf,MAAM,EAAE,MAAM,OAAA;AAAA,EACd,SAAS,EAAE,MAAM,QAAA;AAAA,EACjB,OAAO,EAAE,MAAM,QAAA;AAAA,EACf,UAAU,EAAE,MAAM,QAAA;AAAQ;AAG5B,cAVI,aAUa,UAAS,CAACC,UAAAA,WAAgB,gBAAgB;AAiF7D,YAAY,SAAA;;"}
@@ -1,80 +0,0 @@
1
- var __defProp = Object.defineProperty;
2
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
3
- var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
4
- import { v as variables } from "./variables.js";
5
- import { A as AeicoComponent } from "./aeico-component.js";
6
- import { html } from "aeico";
7
- const buttonGroupStyle = ":host {\n display: inline-flex;\n align-items: stretch;\n gap: 8px;\n}\n\n:host([block]) {\n display: flex;\n width: 100%;\n}\n\n:host([block]) ::slotted(ae-button) {\n flex: 1;\n}\n\n:host([compact]) {\n gap: 0;\n}\n\n/* Raise hovered/focused button so its border shows above neighbours */\n:host([compact]) ::slotted(ae-button:hover),\n:host([compact]) ::slotted(ae-button:focus-within) {\n position: relative;\n z-index: 1;\n}\n";
8
- class ButtonGroup extends AeicoComponent {
9
- constructor() {
10
- super(...arguments);
11
- __publicField(this, "slotEl", null);
12
- }
13
- connectedCallback() {
14
- super.connectedCallback();
15
- if (this.variant === void 0) this.variant = "filled";
16
- if (this.color === void 0) this.color = "default";
17
- if (this.size === void 0) this.size = "md";
18
- }
19
- render() {
20
- return html(({ slot }) => {
21
- this.slotEl = slot({
22
- "@slotchange": () => this._syncChildren()
23
- });
24
- this._syncChildren();
25
- });
26
- }
27
- _getButtons() {
28
- if (!this.slotEl) return [];
29
- return this.slotEl.assignedElements({ flatten: true }).filter((el) => {
30
- const tag = el.tagName.toLowerCase();
31
- return tag === "ae-button" || tag === "ae-dropdown-button";
32
- });
33
- }
34
- _syncChildren() {
35
- const buttons = this._getButtons();
36
- const r = this.size === "xs" || this.size === "sm" ? 3 : 4;
37
- buttons.forEach((btn, i) => {
38
- btn.variant = this.variant;
39
- btn.color = this.color;
40
- btn.size = this.size;
41
- if (this.disabled) {
42
- btn.disabled = true;
43
- } else {
44
- btn.disabled = false;
45
- }
46
- if (this.compact) {
47
- const isFirst = i === 0;
48
- const isLast = i === buttons.length - 1;
49
- btn.style.marginLeft = isFirst ? "" : "-1px";
50
- btn.style.setProperty("--_btn-r-tl", isFirst ? `${r}px` : "0");
51
- btn.style.setProperty("--_btn-r-bl", isFirst ? `${r}px` : "0");
52
- btn.style.setProperty("--_btn-r-tr", isLast ? `${r}px` : "0");
53
- btn.style.setProperty("--_btn-r-br", isLast ? `${r}px` : "0");
54
- } else {
55
- btn.style.marginLeft = "";
56
- this._clearRadius(btn);
57
- }
58
- });
59
- }
60
- _clearRadius(btn) {
61
- btn.style.removeProperty("--_btn-r-tl");
62
- btn.style.removeProperty("--_btn-r-tr");
63
- btn.style.removeProperty("--_btn-r-br");
64
- btn.style.removeProperty("--_btn-r-bl");
65
- }
66
- }
67
- __publicField(ButtonGroup, "props", {
68
- variant: { type: String },
69
- color: { type: String },
70
- size: { type: String },
71
- compact: { type: Boolean },
72
- block: { type: Boolean },
73
- disabled: { type: Boolean }
74
- });
75
- __publicField(ButtonGroup, "styles", [variables, buttonGroupStyle]);
76
- ButtonGroup.register();
77
- export {
78
- ButtonGroup as B
79
- };
80
- //# sourceMappingURL=button-group.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"button-group.js","sources":["../../src/button-group/button-group.ts"],"sourcesContent":["import type { InferProps, Props } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport buttonGroupStyle from '../styles/components/button-group.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type { ButtonColor, ButtonVariant, ButtonSize } from '../button';\nimport Button from '../button/button';\nimport DropdownButton from '../dropdown/dropdown-button';\n\n/**\n * ButtonGroup Component\n *\n * Groups multiple `ae-button` elements, propagating shared `variant`, `color`,\n * `size`, and `disabled` props to each child. Supports a `compact` mode that\n * joins buttons into a seamless connected strip (like Bootstrap's button group).\n *\n * @example\n * ```html\n * <!-- Loose group (gap between buttons) -->\n * <ae-button-group variant=\"outlined\" color=\"primary\">\n * <ae-button>One</ae-button>\n * <ae-button>Two</ae-button>\n * <ae-button>Three</ae-button>\n * </ae-button-group>\n *\n * <!-- Compact — joined strip -->\n * <ae-button-group compact color=\"primary\">\n * <ae-button>Left</ae-button>\n * <ae-button>Middle</ae-button>\n * <ae-button>Right</ae-button>\n * </ae-button-group>\n *\n * <!-- Full-width -->\n * <ae-button-group block color=\"danger\" variant=\"outlined\">\n * <ae-button>Delete</ae-button>\n * <ae-button>Archive</ae-button>\n * </ae-button-group>\n * ```\n */\nclass ButtonGroup extends AeicoComponent {\n static props: Props = {\n variant: { type: String },\n color: { type: String },\n size: { type: String },\n compact: { type: Boolean },\n block: { type: Boolean },\n disabled: { type: Boolean },\n };\n\n protected static styles = [styleVariables, buttonGroupStyle];\n\n declare variant?: ButtonVariant;\n declare color?: ButtonColor;\n declare size?: ButtonSize;\n declare compact?: boolean;\n declare block?: boolean;\n declare disabled?: boolean;\n\n private slotEl: HTMLSlotElement | null = null;\n\n connectedCallback() {\n super.connectedCallback();\n\n if (this.variant === undefined) this.variant = 'filled';\n if (this.color === undefined) this.color = 'default';\n if (this.size === undefined) this.size = 'md';\n }\n\n protected render() {\n return html(({ slot }) => {\n this.slotEl = slot({\n '@slotchange': () => this._syncChildren(),\n });\n this._syncChildren();\n });\n }\n\n private _getButtons(): Array<Button | DropdownButton> {\n if (!this.slotEl) return [];\n\n return (\n this.slotEl.assignedElements({ flatten: true }) as Array<Button | DropdownButton>\n ).filter((el) => {\n const tag = el.tagName.toLowerCase();\n return tag === 'ae-button' || tag === 'ae-dropdown-button';\n });\n }\n\n private _syncChildren() {\n const buttons = this._getButtons();\n const r = this.size === 'xs' || this.size === 'sm' ? 3 : 4;\n\n buttons.forEach((btn: Button | DropdownButton, i) => {\n btn.variant = this.variant;\n btn.color = this.color;\n btn.size = this.size;\n\n if (this.disabled) {\n btn.disabled = true;\n } else {\n btn.disabled = false;\n }\n\n if (this.compact) {\n const isFirst = i === 0;\n const isLast = i === buttons.length - 1;\n\n // Overlap adjacent borders by pulling non-first buttons left 1px\n btn.style.marginLeft = isFirst ? '' : '-1px';\n\n // Shape corners: only the outer edges of the strip keep radius\n btn.style.setProperty('--_btn-r-tl', isFirst ? `${r}px` : '0');\n btn.style.setProperty('--_btn-r-bl', isFirst ? `${r}px` : '0');\n btn.style.setProperty('--_btn-r-tr', isLast ? `${r}px` : '0');\n btn.style.setProperty('--_btn-r-br', isLast ? `${r}px` : '0');\n } else {\n btn.style.marginLeft = '';\n this._clearRadius(btn);\n }\n });\n }\n\n private _clearRadius(btn: HTMLElement) {\n btn.style.removeProperty('--_btn-r-tl');\n btn.style.removeProperty('--_btn-r-tr');\n btn.style.removeProperty('--_btn-r-br');\n btn.style.removeProperty('--_btn-r-bl');\n }\n}\n\nButtonGroup.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-button-group': ButtonGroup;\n }\n}\n\nexport default ButtonGroup;\nexport type ButtonGroupProps = InferProps<typeof ButtonGroup>;\n"],"names":["styleVariables"],"mappings":";;;;;;;AAuCA,MAAM,oBAAoB,eAAe;AAAA,EAAzC;AAAA;AAmBU,kCAAiC;AAAA;AAAA,EAEzC,oBAAoB;AAClB,UAAM,kBAAA;AAEN,QAAI,KAAK,YAAY,OAAW,MAAK,UAAU;AAC/C,QAAI,KAAK,UAAU,OAAW,MAAK,QAAQ;AAC3C,QAAI,KAAK,SAAS,OAAW,MAAK,OAAO;AAAA,EAC3C;AAAA,EAEU,SAAS;AACjB,WAAO,KAAK,CAAC,EAAE,WAAW;AACxB,WAAK,SAAS,KAAK;AAAA,QACjB,eAAe,MAAM,KAAK,cAAA;AAAA,MAAc,CACzC;AACD,WAAK,cAAA;AAAA,IACP,CAAC;AAAA,EACH;AAAA,EAEQ,cAA8C;AACpD,QAAI,CAAC,KAAK,OAAQ,QAAO,CAAA;AAEzB,WACE,KAAK,OAAO,iBAAiB,EAAE,SAAS,MAAM,EAC9C,OAAO,CAAC,OAAO;AACf,YAAM,MAAM,GAAG,QAAQ,YAAA;AACvB,aAAO,QAAQ,eAAe,QAAQ;AAAA,IACxC,CAAC;AAAA,EACH;AAAA,EAEQ,gBAAgB;AACtB,UAAM,UAAU,KAAK,YAAA;AACrB,UAAM,IAAI,KAAK,SAAS,QAAQ,KAAK,SAAS,OAAO,IAAI;AAEzD,YAAQ,QAAQ,CAAC,KAA8B,MAAM;AACnD,UAAI,UAAU,KAAK;AACnB,UAAI,QAAQ,KAAK;AACjB,UAAI,OAAO,KAAK;AAEhB,UAAI,KAAK,UAAU;AACjB,YAAI,WAAW;AAAA,MACjB,OAAO;AACL,YAAI,WAAW;AAAA,MACjB;AAEA,UAAI,KAAK,SAAS;AAChB,cAAM,UAAU,MAAM;AACtB,cAAM,SAAS,MAAM,QAAQ,SAAS;AAGtC,YAAI,MAAM,aAAa,UAAU,KAAK;AAGtC,YAAI,MAAM,YAAY,eAAe,UAAU,GAAG,CAAC,OAAO,GAAG;AAC7D,YAAI,MAAM,YAAY,eAAe,UAAU,GAAG,CAAC,OAAO,GAAG;AAC7D,YAAI,MAAM,YAAY,eAAe,SAAS,GAAG,CAAC,OAAO,GAAG;AAC5D,YAAI,MAAM,YAAY,eAAe,SAAS,GAAG,CAAC,OAAO,GAAG;AAAA,MAC9D,OAAO;AACL,YAAI,MAAM,aAAa;AACvB,aAAK,aAAa,GAAG;AAAA,MACvB;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEQ,aAAa,KAAkB;AACrC,QAAI,MAAM,eAAe,aAAa;AACtC,QAAI,MAAM,eAAe,aAAa;AACtC,QAAI,MAAM,eAAe,aAAa;AACtC,QAAI,MAAM,eAAe,aAAa;AAAA,EACxC;AACF;AAxFE,cADI,aACG,SAAe;AAAA,EACpB,SAAS,EAAE,MAAM,OAAA;AAAA,EACjB,OAAO,EAAE,MAAM,OAAA;AAAA,EACf,MAAM,EAAE,MAAM,OAAA;AAAA,EACd,SAAS,EAAE,MAAM,QAAA;AAAA,EACjB,OAAO,EAAE,MAAM,QAAA;AAAA,EACf,UAAU,EAAE,MAAM,QAAA;AAAQ;AAG5B,cAVI,aAUa,UAAS,CAACA,WAAgB,gBAAgB;AAiF7D,YAAY,SAAA;"}