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.
- package/README.md +0 -0
- package/dist/alert.cjs +637 -4
- package/dist/alert.cjs.map +7 -1
- package/dist/alert.js +575 -3
- package/dist/alert.js.map +7 -1
- package/dist/badge.cjs +573 -4
- package/dist/badge.cjs.map +7 -1
- package/dist/badge.js +510 -3
- package/dist/badge.js.map +7 -1
- package/dist/breadcrumb.cjs +709 -5
- package/dist/breadcrumb.cjs.map +7 -1
- package/dist/breadcrumb.js +644 -4
- package/dist/breadcrumb.js.map +7 -1
- package/dist/button-group.cjs +546 -4
- package/dist/button-group.cjs.map +7 -1
- package/dist/button-group.js +489 -3
- package/dist/button-group.js.map +7 -1
- package/dist/button.cjs +834 -4
- package/dist/button.cjs.map +7 -1
- package/dist/button.js +771 -3
- package/dist/button.js.map +7 -1
- package/dist/card.cjs +574 -4
- package/dist/card.cjs.map +7 -1
- package/dist/card.js +516 -3
- package/dist/card.js.map +7 -1
- package/dist/checkbox.cjs +867 -4
- package/dist/checkbox.cjs.map +7 -1
- package/dist/checkbox.js +794 -3
- package/dist/checkbox.js.map +7 -1
- package/dist/copy-button.cjs +1046 -4
- package/dist/copy-button.cjs.map +7 -1
- package/dist/copy-button.js +969 -3
- package/dist/copy-button.js.map +7 -1
- package/dist/detail-group.cjs +533 -0
- package/dist/detail-group.cjs.map +7 -0
- package/dist/detail-group.js +477 -0
- package/dist/detail-group.js.map +7 -0
- package/dist/detail.cjs +627 -4
- package/dist/detail.cjs.map +7 -1
- package/dist/detail.js +569 -3
- package/dist/detail.js.map +7 -1
- package/dist/dialog.cjs +738 -4
- package/dist/dialog.cjs.map +7 -1
- package/dist/dialog.js +665 -3
- package/dist/dialog.js.map +7 -1
- package/dist/divider.cjs +558 -4
- package/dist/divider.cjs.map +7 -1
- package/dist/divider.js +502 -3
- package/dist/divider.js.map +7 -1
- package/dist/drawer.cjs +818 -4
- package/dist/drawer.cjs.map +7 -1
- package/dist/drawer.js +749 -3
- package/dist/drawer.js.map +7 -1
- package/dist/dropdown.cjs +1396 -5
- package/dist/dropdown.cjs.map +7 -1
- package/dist/dropdown.js +1316 -4
- package/dist/dropdown.js.map +7 -1
- package/dist/icon-button.cjs +999 -4
- package/dist/icon-button.cjs.map +7 -1
- package/dist/icon-button.js +930 -3
- package/dist/icon-button.js.map +7 -1
- package/dist/icon.cjs +613 -4
- package/dist/icon.cjs.map +7 -1
- package/dist/icon.js +547 -3
- package/dist/icon.js.map +7 -1
- package/dist/index.cjs +6484 -188
- package/dist/index.cjs.map +7 -1
- package/dist/index.js +6095 -147
- package/dist/index.js.map +7 -1
- package/dist/menu.cjs +841 -4
- package/dist/menu.cjs.map +7 -1
- package/dist/menu.js +785 -3
- package/dist/menu.js.map +7 -1
- package/dist/navbar.cjs +622 -4
- package/dist/navbar.cjs.map +7 -1
- package/dist/navbar.js +564 -3
- package/dist/navbar.js.map +7 -1
- package/dist/number-input.cjs +887 -0
- package/dist/number-input.cjs.map +7 -0
- package/dist/number-input.js +820 -0
- package/dist/number-input.js.map +7 -0
- package/dist/pagination.cjs +1099 -4
- package/dist/pagination.cjs.map +7 -1
- package/dist/pagination.js +1029 -3
- package/dist/pagination.js.map +7 -1
- package/dist/progress-bar.cjs +581 -4
- package/dist/progress-bar.cjs.map +7 -1
- package/dist/progress-bar.js +525 -3
- package/dist/progress-bar.js.map +7 -1
- package/dist/radio-group.cjs +973 -5
- package/dist/radio-group.cjs.map +7 -1
- package/dist/radio-group.js +899 -4
- package/dist/radio-group.js.map +7 -1
- package/dist/select.cjs +1242 -45
- package/dist/select.cjs.map +7 -1
- package/dist/select.js +1159 -44
- package/dist/select.js.map +7 -1
- package/dist/slider.cjs +1420 -4
- package/dist/slider.cjs.map +7 -1
- package/dist/slider.js +1351 -3
- package/dist/slider.js.map +7 -1
- package/dist/spinner.cjs +587 -4
- package/dist/spinner.cjs.map +7 -1
- package/dist/spinner.js +528 -3
- package/dist/spinner.js.map +7 -1
- package/dist/styles/layout.cjs +1 -0
- package/dist/styles/layout.js +1 -0
- package/dist/styles/radius.cjs +1 -0
- package/dist/styles/radius.js +1 -0
- package/dist/styles/variables.cjs +1 -0
- package/dist/styles/variables.js +1 -0
- package/dist/switch.cjs +1092 -4
- package/dist/switch.cjs.map +7 -1
- package/dist/switch.js +1013 -3
- package/dist/switch.js.map +7 -1
- package/dist/tabs.cjs +660 -6
- package/dist/tabs.cjs.map +7 -1
- package/dist/tabs.js +591 -5
- package/dist/tabs.js.map +7 -1
- package/dist/tag.cjs +591 -3
- package/dist/tag.cjs.map +7 -1
- package/dist/tag.js +532 -2
- package/dist/tag.js.map +7 -1
- package/dist/text-input.cjs +829 -4
- package/dist/text-input.cjs.map +7 -1
- package/dist/text-input.js +761 -3
- package/dist/text-input.js.map +7 -1
- package/dist/textarea.cjs +914 -3
- package/dist/textarea.cjs.map +7 -1
- package/dist/textarea.js +854 -2
- package/dist/textarea.js.map +7 -1
- package/dist/tooltip.cjs +764 -4
- package/dist/tooltip.cjs.map +7 -1
- package/dist/tooltip.js +711 -3
- package/dist/tooltip.js.map +7 -1
- package/dist/tree.cjs +1059 -4
- package/dist/tree.cjs.map +7 -1
- package/dist/tree.js +985 -3
- package/dist/tree.js.map +7 -1
- package/dist/types/card/defines.d.ts +1 -1
- package/dist/types/detail/defines.d.ts +1 -1
- package/dist/types/dialog/dialog.d.ts +1 -0
- package/dist/types/drawer/drawer.d.ts +2 -0
- package/dist/types/icon/defines.d.ts +7 -1
- package/dist/types/icon/index.d.ts +1 -1
- package/dist/types/menu/defines.d.ts +1 -0
- package/dist/types/menu/menu-item.d.ts +1 -0
- package/dist/types/menu/menu.d.ts +1 -0
- package/dist/types/styles/layout.d.ts +2 -0
- package/dist/types/styles/radius.d.ts +2 -0
- package/dist/types/styles/variables.d.ts +2 -0
- package/dist/types/tabs/defines.d.ts +1 -0
- package/dist/types/tabs/tabs.d.ts +3 -0
- package/package.json +31 -7
- package/src/alert/alert.ts +3 -3
- package/src/badge/badge.ts +4 -4
- package/src/breadcrumb/breadcrumb-item.ts +2 -2
- package/src/breadcrumb/breadcrumb.ts +3 -3
- package/src/button/button.ts +4 -4
- package/src/button-group/button-group.ts +8 -9
- package/src/card/card.ts +3 -3
- package/src/card/defines.ts +1 -1
- package/src/checkbox/checkbox.ts +6 -6
- package/src/copy-button/copy-button.ts +13 -9
- package/src/detail/defines.ts +1 -1
- package/src/detail/detail.ts +3 -3
- package/src/detail-group/detail-group.ts +2 -2
- package/src/dialog/dialog.ts +15 -14
- package/src/divider/divider.ts +3 -3
- package/src/drawer/drawer.ts +28 -11
- package/src/dropdown/dropdown-item.ts +2 -2
- package/src/dropdown/dropdown.ts +2 -2
- package/src/icon/defines.ts +8 -1
- package/src/icon/icon.ts +32 -14
- package/src/icon/index.ts +1 -1
- package/src/icon/registry.ts +2 -2
- package/src/menu/defines.ts +1 -0
- package/src/menu/menu-item.ts +14 -4
- package/src/menu/menu.ts +5 -2
- package/src/navbar/navbar.ts +3 -3
- package/src/number-input/number-input.ts +5 -5
- package/src/pagination/pagination.ts +3 -3
- package/src/progress-bar/progress-bar.ts +3 -3
- package/src/radio-group/radio-group.ts +12 -8
- package/src/select/select-option.ts +2 -2
- package/src/select/select.ts +5 -5
- package/src/slider/slider.ts +6 -6
- package/src/spinner/spinner.ts +4 -4
- package/src/styles/color.css +91 -91
- package/src/styles/components/action-button.css +12 -12
- package/src/styles/components/alert.css +22 -28
- package/src/styles/components/badge.css +13 -20
- package/src/styles/components/breadcrumb-item.css +7 -7
- package/src/styles/components/button-group.css +2 -0
- package/src/styles/components/button.css +39 -50
- package/src/styles/components/card.css +69 -30
- package/src/styles/components/checkbox.css +22 -16
- package/src/styles/components/copy-button.css +22 -33
- package/src/styles/components/detail.css +51 -39
- package/src/styles/components/dialog.css +11 -11
- package/src/styles/components/divider.css +3 -3
- package/src/styles/components/drawer.css +59 -27
- package/src/styles/components/dropdown-item.css +7 -8
- package/src/styles/components/dropdown.css +3 -4
- package/src/styles/components/field-label.css +13 -13
- package/src/styles/components/icon-button.css +25 -36
- package/src/styles/components/icon.css +1 -1
- package/src/styles/components/menu-item.css +13 -8
- package/src/styles/components/navbar.css +23 -44
- package/src/styles/components/number-input.css +27 -36
- package/src/styles/components/pagination.css +31 -31
- package/src/styles/components/progress-bar.css +2 -3
- package/src/styles/components/radio-group.css +88 -83
- package/src/styles/components/select-option.css +5 -5
- package/src/styles/components/select.css +21 -33
- package/src/styles/components/slider.css +56 -34
- package/src/styles/components/spinner.css +7 -9
- package/src/styles/components/switch.css +21 -19
- package/src/styles/components/tab.css +4 -5
- package/src/styles/components/tabs.css +48 -1
- package/src/styles/components/tag.css +14 -21
- package/src/styles/components/text-input.css +13 -22
- package/src/styles/components/textarea.css +12 -21
- package/src/styles/components/tooltip.css +4 -5
- package/src/styles/components/tree-item.css +12 -12
- package/src/styles/layout.css +5 -2
- package/src/styles/radius.css +25 -0
- package/src/styles/size.css +7 -7
- package/src/styles/variables.css +271 -247
- package/src/switch/switch.ts +6 -6
- package/src/tabs/defines.ts +1 -0
- package/src/tabs/tab-panel.ts +1 -1
- package/src/tabs/tab.ts +1 -1
- package/src/tabs/tabs.ts +14 -2
- package/src/tag/tag.ts +4 -4
- package/src/text-input/text-input.ts +5 -5
- package/src/textarea/textarea.ts +5 -5
- package/src/tooltip/tooltip.ts +2 -2
- package/src/tree/tree-item.ts +2 -2
- package/src/tree/tree.ts +2 -2
- package/dist/chunks/action-button.cjs +0 -296
- package/dist/chunks/action-button.cjs.map +0 -1
- package/dist/chunks/action-button.js +0 -297
- package/dist/chunks/action-button.js.map +0 -1
- package/dist/chunks/aeico-component.cjs +0 -17
- package/dist/chunks/aeico-component.cjs.map +0 -1
- package/dist/chunks/aeico-component.js +0 -18
- package/dist/chunks/aeico-component.js.map +0 -1
- package/dist/chunks/alert.cjs +0 -170
- package/dist/chunks/alert.cjs.map +0 -1
- package/dist/chunks/alert.js +0 -171
- package/dist/chunks/alert.js.map +0 -1
- package/dist/chunks/badge.cjs +0 -85
- package/dist/chunks/badge.cjs.map +0 -1
- package/dist/chunks/badge.js +0 -86
- package/dist/chunks/badge.js.map +0 -1
- package/dist/chunks/breadcrumb-item.cjs +0 -261
- package/dist/chunks/breadcrumb-item.cjs.map +0 -1
- package/dist/chunks/breadcrumb-item.js +0 -262
- package/dist/chunks/breadcrumb-item.js.map +0 -1
- package/dist/chunks/button-group.cjs +0 -79
- package/dist/chunks/button-group.cjs.map +0 -1
- package/dist/chunks/button-group.js +0 -80
- package/dist/chunks/button-group.js.map +0 -1
- package/dist/chunks/button.cjs +0 -348
- package/dist/chunks/button.cjs.map +0 -1
- package/dist/chunks/button.js +0 -349
- package/dist/chunks/button.js.map +0 -1
- package/dist/chunks/card.cjs +0 -93
- package/dist/chunks/card.cjs.map +0 -1
- package/dist/chunks/card.js +0 -94
- package/dist/chunks/card.js.map +0 -1
- package/dist/chunks/checkbox.cjs +0 -86
- package/dist/chunks/checkbox.cjs.map +0 -1
- package/dist/chunks/checkbox.js +0 -87
- package/dist/chunks/checkbox.js.map +0 -1
- package/dist/chunks/color.cjs +0 -4
- package/dist/chunks/color.cjs.map +0 -1
- package/dist/chunks/color.js +0 -5
- package/dist/chunks/color.js.map +0 -1
- package/dist/chunks/copy-button.cjs +0 -168
- package/dist/chunks/copy-button.cjs.map +0 -1
- package/dist/chunks/copy-button.js +0 -169
- package/dist/chunks/copy-button.js.map +0 -1
- package/dist/chunks/detail.cjs +0 -146
- package/dist/chunks/detail.cjs.map +0 -1
- package/dist/chunks/detail.js +0 -147
- package/dist/chunks/detail.js.map +0 -1
- package/dist/chunks/dialog.cjs +0 -117
- package/dist/chunks/dialog.cjs.map +0 -1
- package/dist/chunks/dialog.js +0 -118
- package/dist/chunks/dialog.js.map +0 -1
- package/dist/chunks/divider.cjs +0 -80
- package/dist/chunks/divider.cjs.map +0 -1
- package/dist/chunks/divider.js +0 -81
- package/dist/chunks/divider.js.map +0 -1
- package/dist/chunks/drawer.cjs +0 -180
- package/dist/chunks/drawer.cjs.map +0 -1
- package/dist/chunks/drawer.js +0 -181
- package/dist/chunks/drawer.js.map +0 -1
- package/dist/chunks/dropdown-button.cjs +0 -534
- package/dist/chunks/dropdown-button.cjs.map +0 -1
- package/dist/chunks/dropdown-button.js +0 -535
- package/dist/chunks/dropdown-button.js.map +0 -1
- package/dist/chunks/icon-button.cjs +0 -35
- package/dist/chunks/icon-button.cjs.map +0 -1
- package/dist/chunks/icon-button.js +0 -36
- package/dist/chunks/icon-button.js.map +0 -1
- package/dist/chunks/icon.cjs +0 -108
- package/dist/chunks/icon.cjs.map +0 -1
- package/dist/chunks/icon.js +0 -109
- package/dist/chunks/icon.js.map +0 -1
- package/dist/chunks/menu.cjs +0 -396
- package/dist/chunks/menu.cjs.map +0 -1
- package/dist/chunks/menu.js +0 -397
- package/dist/chunks/menu.js.map +0 -1
- package/dist/chunks/navbar.cjs +0 -142
- package/dist/chunks/navbar.cjs.map +0 -1
- package/dist/chunks/navbar.js +0 -143
- package/dist/chunks/navbar.js.map +0 -1
- package/dist/chunks/pagination.cjs +0 -475
- package/dist/chunks/pagination.cjs.map +0 -1
- package/dist/chunks/pagination.js +0 -476
- package/dist/chunks/pagination.js.map +0 -1
- package/dist/chunks/progress-bar.cjs +0 -101
- package/dist/chunks/progress-bar.cjs.map +0 -1
- package/dist/chunks/progress-bar.js +0 -102
- package/dist/chunks/progress-bar.js.map +0 -1
- package/dist/chunks/radio.cjs +0 -185
- package/dist/chunks/radio.cjs.map +0 -1
- package/dist/chunks/radio.js +0 -186
- package/dist/chunks/radio.js.map +0 -1
- package/dist/chunks/select.cjs +0 -381
- package/dist/chunks/select.cjs.map +0 -1
- package/dist/chunks/select.js +0 -382
- package/dist/chunks/select.js.map +0 -1
- package/dist/chunks/size.cjs +0 -4
- package/dist/chunks/size.cjs.map +0 -1
- package/dist/chunks/size.js +0 -5
- package/dist/chunks/size.js.map +0 -1
- package/dist/chunks/slider.cjs +0 -611
- package/dist/chunks/slider.cjs.map +0 -1
- package/dist/chunks/slider.js +0 -612
- package/dist/chunks/slider.js.map +0 -1
- package/dist/chunks/spinner.cjs +0 -102
- package/dist/chunks/spinner.cjs.map +0 -1
- package/dist/chunks/spinner.js +0 -103
- package/dist/chunks/spinner.js.map +0 -1
- package/dist/chunks/switch.cjs +0 -167
- package/dist/chunks/switch.cjs.map +0 -1
- package/dist/chunks/switch.js +0 -168
- package/dist/chunks/switch.js.map +0 -1
- package/dist/chunks/tab-panel.cjs +0 -165
- package/dist/chunks/tab-panel.cjs.map +0 -1
- package/dist/chunks/tab-panel.js +0 -166
- package/dist/chunks/tab-panel.js.map +0 -1
- package/dist/chunks/tag.cjs +0 -108
- package/dist/chunks/tag.cjs.map +0 -1
- package/dist/chunks/tag.js +0 -109
- package/dist/chunks/tag.js.map +0 -1
- package/dist/chunks/text-input.cjs +0 -54
- package/dist/chunks/text-input.cjs.map +0 -1
- package/dist/chunks/text-input.js +0 -55
- package/dist/chunks/text-input.js.map +0 -1
- package/dist/chunks/textarea.cjs +0 -137
- package/dist/chunks/textarea.cjs.map +0 -1
- package/dist/chunks/textarea.js +0 -138
- package/dist/chunks/textarea.js.map +0 -1
- package/dist/chunks/tooltip.cjs +0 -293
- package/dist/chunks/tooltip.cjs.map +0 -1
- package/dist/chunks/tooltip.js +0 -294
- package/dist/chunks/tooltip.js.map +0 -1
- package/dist/chunks/tree.cjs +0 -468
- package/dist/chunks/tree.cjs.map +0 -1
- package/dist/chunks/tree.js +0 -469
- package/dist/chunks/tree.js.map +0 -1
- package/dist/chunks/variables.cjs +0 -372
- package/dist/chunks/variables.cjs.map +0 -1
- package/dist/chunks/variables.js +0 -373
- 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":"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"}
|
|
@@ -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;"}
|