aeico-components 0.1.8 → 0.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -0
- package/dist/alert.cjs +20 -29
- package/dist/alert.cjs.map +3 -3
- package/dist/alert.js +20 -29
- package/dist/alert.js.map +3 -3
- package/dist/badge.cjs +19 -28
- package/dist/badge.cjs.map +3 -3
- package/dist/badge.js +19 -28
- package/dist/badge.js.map +3 -3
- package/dist/breadcrumb.cjs +22 -33
- package/dist/breadcrumb.cjs.map +3 -3
- package/dist/breadcrumb.js +22 -33
- package/dist/breadcrumb.js.map +3 -3
- package/dist/button-group.cjs +19 -28
- package/dist/button-group.cjs.map +3 -3
- package/dist/button-group.js +19 -28
- package/dist/button-group.js.map +3 -3
- package/dist/button.cjs +19 -29
- package/dist/button.cjs.map +3 -3
- package/dist/button.js +19 -29
- package/dist/button.js.map +3 -3
- package/dist/card.cjs +19 -29
- package/dist/card.cjs.map +3 -3
- package/dist/card.js +19 -29
- package/dist/card.js.map +3 -3
- package/dist/checkbox.cjs +21 -31
- package/dist/checkbox.cjs.map +3 -3
- package/dist/checkbox.js +21 -31
- package/dist/checkbox.js.map +3 -3
- package/dist/copy-button.cjs +25 -33
- package/dist/copy-button.cjs.map +2 -2
- package/dist/copy-button.js +25 -33
- package/dist/copy-button.js.map +3 -3
- package/dist/detail-group.cjs +19 -29
- package/dist/detail-group.cjs.map +3 -3
- package/dist/detail-group.js +19 -29
- package/dist/detail-group.js.map +3 -3
- package/dist/detail.cjs +19 -29
- package/dist/detail.cjs.map +3 -3
- package/dist/detail.js +19 -29
- package/dist/detail.js.map +3 -3
- package/dist/dialog.cjs +24 -32
- package/dist/dialog.cjs.map +2 -2
- package/dist/dialog.js +24 -32
- package/dist/dialog.js.map +3 -3
- package/dist/divider.cjs +20 -30
- package/dist/divider.cjs.map +3 -3
- package/dist/divider.js +20 -30
- package/dist/divider.js.map +3 -3
- package/dist/drawer.cjs +24 -32
- package/dist/drawer.cjs.map +2 -2
- package/dist/drawer.js +24 -32
- package/dist/drawer.js.map +3 -3
- package/dist/dropdown.cjs +31 -43
- package/dist/dropdown.cjs.map +3 -3
- package/dist/dropdown.js +31 -43
- package/dist/dropdown.js.map +3 -3
- package/dist/icon-button.cjs +25 -35
- package/dist/icon-button.cjs.map +3 -3
- package/dist/icon-button.js +25 -35
- package/dist/icon-button.js.map +3 -3
- package/dist/icon.cjs +20 -26
- package/dist/icon.cjs.map +2 -2
- package/dist/icon.js +20 -26
- package/dist/icon.js.map +2 -2
- package/dist/index.cjs +75 -113
- package/dist/index.cjs.map +3 -3
- package/dist/index.js +75 -113
- package/dist/index.js.map +3 -3
- package/dist/menu.cjs +20 -31
- package/dist/menu.cjs.map +3 -3
- package/dist/menu.js +20 -31
- package/dist/menu.js.map +3 -3
- package/dist/navbar.cjs +19 -29
- package/dist/navbar.cjs.map +3 -3
- package/dist/navbar.js +19 -29
- package/dist/navbar.js.map +3 -3
- package/dist/number-input.cjs +21 -31
- package/dist/number-input.cjs.map +3 -3
- package/dist/number-input.js +21 -31
- package/dist/number-input.js.map +3 -3
- package/dist/pagination.cjs +24 -33
- package/dist/pagination.cjs.map +2 -2
- package/dist/pagination.js +24 -33
- package/dist/pagination.js.map +3 -3
- package/dist/progress-bar.cjs +19 -29
- package/dist/progress-bar.cjs.map +3 -3
- package/dist/progress-bar.js +19 -29
- package/dist/progress-bar.js.map +3 -3
- package/dist/radio-group.cjs +24 -35
- package/dist/radio-group.cjs.map +3 -3
- package/dist/radio-group.js +24 -35
- package/dist/radio-group.js.map +3 -3
- package/dist/select.cjs +23 -34
- package/dist/select.cjs.map +3 -3
- package/dist/select.js +23 -34
- package/dist/select.js.map +3 -3
- package/dist/slider.cjs +21 -32
- package/dist/slider.cjs.map +3 -3
- package/dist/slider.js +21 -32
- package/dist/slider.js.map +3 -3
- package/dist/spinner.cjs +19 -29
- package/dist/spinner.cjs.map +3 -3
- package/dist/spinner.js +19 -29
- package/dist/spinner.js.map +3 -3
- package/dist/styles/layout.cjs +1 -1
- package/dist/styles/layout.js +1 -1
- package/dist/styles/radius.cjs +1 -1
- package/dist/styles/radius.js +1 -1
- package/dist/styles/variables.cjs +1 -1
- package/dist/styles/variables.js +1 -1
- package/dist/switch.cjs +26 -35
- package/dist/switch.cjs.map +3 -3
- package/dist/switch.js +26 -35
- package/dist/switch.js.map +3 -3
- package/dist/tabs.cjs +21 -30
- package/dist/tabs.cjs.map +3 -3
- package/dist/tabs.js +21 -30
- package/dist/tabs.js.map +3 -3
- package/dist/tag.cjs +19 -28
- package/dist/tag.cjs.map +3 -3
- package/dist/tag.js +19 -28
- package/dist/tag.js.map +3 -3
- package/dist/text-input.cjs +21 -31
- package/dist/text-input.cjs.map +3 -3
- package/dist/text-input.js +21 -31
- package/dist/text-input.js.map +3 -3
- package/dist/textarea.cjs +21 -31
- package/dist/textarea.cjs.map +3 -3
- package/dist/textarea.js +21 -31
- package/dist/textarea.js.map +3 -3
- package/dist/tooltip.cjs +19 -28
- package/dist/tooltip.cjs.map +3 -3
- package/dist/tooltip.js +19 -28
- package/dist/tooltip.js.map +3 -3
- package/dist/tree.cjs +25 -35
- package/dist/tree.cjs.map +3 -3
- package/dist/tree.js +25 -35
- package/dist/tree.js.map +3 -3
- package/dist/types/aeico-component.d.ts +1 -1
- package/dist/types/aeico-field.d.ts +1 -1
- package/dist/types/breadcrumb/breadcrumb-item.d.ts +0 -1
- package/dist/types/breadcrumb/breadcrumb.d.ts +2 -3
- package/dist/types/button-group/button-group.d.ts +1 -1
- package/dist/types/card/card.d.ts +0 -1
- package/dist/types/checkbox/checkbox.d.ts +0 -1
- package/dist/types/detail/detail.d.ts +0 -1
- package/dist/types/detail-group/detail-group.d.ts +1 -2
- package/dist/types/divider/divider.d.ts +0 -1
- package/dist/types/dropdown/dropdown-button.d.ts +4 -5
- package/dist/types/dropdown/dropdown-item.d.ts +3 -4
- package/dist/types/dropdown/dropdown.d.ts +4 -5
- package/dist/types/icon/icon.d.ts +0 -1
- package/dist/types/icon/registry.d.ts +1 -1
- package/dist/types/icon-button/icon-button.d.ts +0 -1
- package/dist/types/index.d.ts +4 -4
- package/dist/types/menu/menu-item.d.ts +3 -4
- package/dist/types/menu/menu.d.ts +3 -4
- package/dist/types/navbar/navbar.d.ts +5 -6
- package/dist/types/number-input/number-input.d.ts +0 -1
- package/dist/types/pagination/pagination.d.ts +0 -1
- package/dist/types/progress-bar/progress-bar.d.ts +0 -1
- package/dist/types/radio-group/radio-group.d.ts +0 -1
- package/dist/types/radio-group/radio.d.ts +6 -7
- package/dist/types/select/select-option.d.ts +0 -1
- package/dist/types/select/select.d.ts +0 -1
- package/dist/types/slider/defines.d.ts +5 -5
- package/dist/types/slider/slider.d.ts +0 -1
- package/dist/types/spinner/spinner.d.ts +1 -2
- package/dist/types/switch/switch.d.ts +0 -1
- package/dist/types/text-input/text-input.d.ts +0 -1
- package/dist/types/textarea/textarea.d.ts +0 -1
- package/dist/types/tree/tree-item.d.ts +1 -2
- package/dist/types/tree/tree.d.ts +0 -1
- package/package.json +5 -3
- package/src/aeico-component.ts +6 -5
- package/src/aeico-field.ts +2 -2
- package/src/alert/alert.ts +2 -2
- package/src/badge/badge.ts +2 -2
- package/src/breadcrumb/breadcrumb-item.ts +2 -4
- package/src/breadcrumb/breadcrumb.ts +4 -6
- package/src/button/button.ts +2 -2
- package/src/button-group/button-group.ts +3 -3
- package/src/card/card.ts +2 -4
- package/src/card/defines.ts +1 -1
- package/src/card/index.ts +1 -1
- package/src/checkbox/checkbox.ts +2 -4
- package/src/copy-button/copy-button.ts +1 -1
- package/src/detail/detail.ts +2 -4
- package/src/detail-group/detail-group.ts +2 -4
- package/src/dialog/dialog.ts +2 -2
- package/src/divider/divider.ts +2 -4
- package/src/drawer/drawer.ts +2 -2
- package/src/dropdown/dropdown-button.ts +6 -8
- package/src/dropdown/dropdown-item.ts +5 -7
- package/src/dropdown/dropdown.ts +7 -9
- package/src/icon/icon.ts +2 -4
- package/src/icon/registry.ts +1 -1
- package/src/icon-button/icon-button.ts +2 -4
- package/src/index.ts +4 -4
- package/src/menu/menu-item.ts +5 -7
- package/src/menu/menu.ts +4 -6
- package/src/navbar/navbar.ts +7 -9
- package/src/number-input/number-input.ts +1 -3
- package/src/pagination/pagination.ts +1 -3
- package/src/progress-bar/progress-bar.ts +1 -2
- package/src/radio-group/radio-group.ts +5 -7
- package/src/radio-group/radio.ts +8 -10
- package/src/select/select-option.ts +2 -4
- package/src/select/select.ts +4 -6
- package/src/slider/defines.ts +5 -5
- package/src/slider/slider.ts +5 -8
- package/src/spinner/spinner.ts +2 -4
- package/src/styles/components/action-button.css +1 -1
- package/src/styles/components/alert.css +1 -1
- package/src/styles/components/breadcrumb-item.css +2 -2
- package/src/styles/components/button.css +0 -1
- package/src/styles/components/divider.css +1 -1
- package/src/styles/components/dropdown-item.css +2 -2
- package/src/styles/components/dropdown.css +1 -1
- package/src/styles/layout.css +14 -14
- package/src/styles/radius.css +1 -1
- package/src/styles/variables.css +14 -16
- package/src/switch/switch.ts +2 -4
- package/src/tabs/tab-panel.ts +2 -2
- package/src/tabs/tab.ts +2 -2
- package/src/tabs/tabs.ts +2 -2
- package/src/tag/tag.ts +2 -2
- package/src/text-input/text-input.ts +2 -4
- package/src/textarea/textarea.ts +1 -3
- package/src/tooltip/tooltip.ts +1 -1
- package/src/tree/tree-item.ts +3 -5
- package/src/tree/tree.ts +2 -4
package/dist/icon-button.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/variables.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/size.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/color.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/button.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/icon.css", "../src/icon-button/index.ts", "../src/aeico-component.ts", "../src/
|
|
4
|
-
"sourcesContent": ["module.exports = \":root,\\n:host {\\n --ae-font-sans-serif: system-ui, -apple-system, \\\"Segoe UI\\\", Roboto, \\\"Helvetica Neue\\\",\\n \\\"Noto Sans\\\", \\\"Liberation Sans\\\", Arial, sans-serif,\\n \\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\", \\\"Noto Color Emoji\\\";\\n --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,\\n \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace;\\n font-family: var(--ae-font-sans-serif);\\n --ae-blue: #0e639c;\\n --ae-green: #28a745;\\n --ae-red: #dc3545;\\n --ae-yellow: #ffc107;\\n --ae-cyan: #17a2b8;\\n --ae-gray: #6e6e6e;\\n --ae-slate: #64748b;\\n --ae-dark: #343a40;\\n --ae-light: #f8f9fa;\\n}\\n\\n:root,\\n:host {\\n /* Blue */\\n --ae-blue-100: color-mix(in srgb, var(--ae-blue) 20%, white);\\n --ae-blue-200: color-mix(in srgb, var(--ae-blue) 40%, white);\\n --ae-blue-300: color-mix(in srgb, var(--ae-blue) 60%, white);\\n --ae-blue-400: color-mix(in srgb, var(--ae-blue) 80%, white);\\n --ae-blue-500: var(--ae-blue);\\n --ae-blue-600: color-mix(in srgb, var(--ae-blue) 80%, black);\\n --ae-blue-700: color-mix(in srgb, var(--ae-blue) 60%, black);\\n --ae-blue-800: color-mix(in srgb, var(--ae-blue) 40%, black);\\n --ae-blue-900: color-mix(in srgb, var(--ae-blue) 20%, black);\\n\\n /* Green */\\n --ae-green-100: color-mix(in srgb, var(--ae-green) 20%, white);\\n --ae-green-200: color-mix(in srgb, var(--ae-green) 40%, white);\\n --ae-green-300: color-mix(in srgb, var(--ae-green) 60%, white);\\n --ae-green-400: color-mix(in srgb, var(--ae-green) 80%, white);\\n --ae-green-500: var(--ae-green);\\n --ae-green-600: color-mix(in srgb, var(--ae-green) 80%, black);\\n --ae-green-700: color-mix(in srgb, var(--ae-green) 60%, black);\\n --ae-green-800: color-mix(in srgb, var(--ae-green) 40%, black);\\n --ae-green-900: color-mix(in srgb, var(--ae-green) 20%, black);\\n\\n /* Red */\\n --ae-red-100: color-mix(in srgb, var(--ae-red) 20%, white);\\n --ae-red-200: color-mix(in srgb, var(--ae-red) 40%, white);\\n --ae-red-300: color-mix(in srgb, var(--ae-red) 60%, white);\\n --ae-red-400: color-mix(in srgb, var(--ae-red) 80%, white);\\n --ae-red-500: var(--ae-red);\\n --ae-red-600: color-mix(in srgb, var(--ae-red) 80%, black);\\n --ae-red-700: color-mix(in srgb, var(--ae-red) 60%, black);\\n --ae-red-800: color-mix(in srgb, var(--ae-red) 40%, black);\\n --ae-red-900: color-mix(in srgb, var(--ae-red) 20%, black);\\n\\n /* Yellow */\\n --ae-yellow-100: color-mix(in srgb, var(--ae-yellow) 20%, white);\\n --ae-yellow-200: color-mix(in srgb, var(--ae-yellow) 40%, white);\\n --ae-yellow-300: color-mix(in srgb, var(--ae-yellow) 60%, white);\\n --ae-yellow-400: color-mix(in srgb, var(--ae-yellow) 80%, white);\\n --ae-yellow-500: var(--ae-yellow);\\n --ae-yellow-600: color-mix(in srgb, var(--ae-yellow) 80%, black);\\n --ae-yellow-700: color-mix(in srgb, var(--ae-yellow) 60%, black);\\n --ae-yellow-800: color-mix(in srgb, var(--ae-yellow) 40%, black);\\n --ae-yellow-900: color-mix(in srgb, var(--ae-yellow) 20%, black);\\n\\n /* Cyan */\\n --ae-cyan-100: color-mix(in srgb, var(--ae-cyan) 20%, white);\\n --ae-cyan-200: color-mix(in srgb, var(--ae-cyan) 40%, white);\\n --ae-cyan-300: color-mix(in srgb, var(--ae-cyan) 60%, white);\\n --ae-cyan-400: color-mix(in srgb, var(--ae-cyan) 80%, white);\\n --ae-cyan-500: var(--ae-cyan);\\n --ae-cyan-600: color-mix(in srgb, var(--ae-cyan) 80%, black);\\n --ae-cyan-700: color-mix(in srgb, var(--ae-cyan) 60%, black);\\n --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);\\n --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);\\n\\n /* Gray (neutral \u2014 base #6e6e6e) */\\n --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);\\n --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);\\n --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);\\n --ae-gray-400: color-mix(in srgb, var(--ae-gray) 80%, white);\\n --ae-gray-500: var(--ae-gray);\\n --ae-gray-600: color-mix(in srgb, var(--ae-gray) 80%, black);\\n --ae-gray-700: color-mix(in srgb, var(--ae-gray) 60%, black);\\n --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);\\n --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);\\n\\n /* Slate (blue-gray \u2014 base #64748b, used for 'secondary') */\\n --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);\\n --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);\\n --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);\\n --ae-slate-400: color-mix(in srgb, var(--ae-slate) 80%, white);\\n --ae-slate-500: var(--ae-slate);\\n --ae-slate-600: color-mix(in srgb, var(--ae-slate) 80%, black);\\n --ae-slate-700: color-mix(in srgb, var(--ae-slate) 60%, black);\\n --ae-slate-800: color-mix(in srgb, var(--ae-slate) 40%, black);\\n --ae-slate-900: color-mix(in srgb, var(--ae-slate) 20%, black);\\n\\n /* Dark (base #343a40) */\\n --ae-dark-100: color-mix(in srgb, var(--ae-dark) 20%, white);\\n --ae-dark-200: color-mix(in srgb, var(--ae-dark) 40%, white);\\n --ae-dark-300: color-mix(in srgb, var(--ae-dark) 60%, white);\\n --ae-dark-400: color-mix(in srgb, var(--ae-dark) 80%, white);\\n --ae-dark-500: var(--ae-dark);\\n --ae-dark-600: color-mix(in srgb, var(--ae-dark) 80%, black);\\n --ae-dark-700: color-mix(in srgb, var(--ae-dark) 60%, black);\\n --ae-dark-800: color-mix(in srgb, var(--ae-dark) 40%, black);\\n --ae-dark-900: color-mix(in srgb, var(--ae-dark) 20%, black);\\n\\n /* Light (base #f8f9fa) */\\n --ae-light-100: color-mix(in srgb, var(--ae-light) 20%, white);\\n --ae-light-200: color-mix(in srgb, var(--ae-light) 40%, white);\\n --ae-light-300: color-mix(in srgb, var(--ae-light) 60%, white);\\n --ae-light-400: color-mix(in srgb, var(--ae-light) 80%, white);\\n --ae-light-500: var(--ae-light);\\n --ae-light-600: color-mix(in srgb, var(--ae-light) 80%, black);\\n --ae-light-700: color-mix(in srgb, var(--ae-light) 60%, black);\\n --ae-light-800: color-mix(in srgb, var(--ae-light) 40%, black);\\n --ae-light-900: color-mix(in srgb, var(--ae-light) 20%, black);\\n}\\n\\n:root,\\n:host {\\n /* Hover / active mix (light default \u2014 overridden in \u00A7 6 dark) */\\n --ae-color-mix-hover: black 10%;\\n --ae-color-mix-active: black 20%;\\n\\n /* Primary (Blue) */\\n --ae-color-primary: var(--ae-blue-500);\\n --ae-color-primary-hover: color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-hover));\\n --ae-color-primary-active: color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-active));\\n --ae-color-primary-disabled: color-mix(in srgb, var(--ae-blue) 50%, var(--ae-gray-500));\\n\\n /* Success (Green) */\\n --ae-color-success: var(--ae-green-500);\\n --ae-color-success-hover: color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-hover));\\n --ae-color-success-active: color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-active));\\n --ae-color-success-disabled: color-mix(in srgb, var(--ae-green) 50%, var(--ae-gray-500));\\n\\n /* Danger (Red) */\\n --ae-color-danger: var(--ae-red-500);\\n --ae-color-danger-hover: color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-hover));\\n --ae-color-danger-active: color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-active));\\n --ae-color-danger-disabled: color-mix(in srgb, var(--ae-red) 50%, var(--ae-gray-500));\\n\\n /* Warning (Yellow) */\\n --ae-color-warning: var(--ae-yellow-500);\\n --ae-color-warning-hover: color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-hover));\\n --ae-color-warning-active: color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-active));\\n --ae-color-warning-disabled: color-mix(in srgb, var(--ae-yellow) 50%, var(--ae-gray-500));\\n\\n /* Info (Cyan) */\\n --ae-color-info: var(--ae-cyan-500);\\n --ae-color-info-hover: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-hover));\\n --ae-color-info-active: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));\\n --ae-color-info-disabled: color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));\\n\\n /* Secondary (Slate) \u2014 base differs per theme, overridden in \u00A7 6 dark */\\n --ae-color-secondary: var(--ae-slate-500);\\n --ae-color-secondary-hover: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));\\n --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));\\n --ae-color-secondary-text: var(--ae-slate-700);\\n}\\n\\n\\n.theme-light,\\n:root[theme=\\\"light\\\"],\\n:host([theme=\\\"light\\\"]),\\n:host-context([theme=\\\"light\\\"]),\\n:where(:root),\\n:host {\\n color-scheme: light;\\n\\n /* Gray UI aliases \u2014 lighter palette steps for elements on white background */\\n --ae-color-gray-dark: var(--ae-gray-400);\\n --ae-color-gray: var(--ae-gray-300);\\n --ae-color-gray-light: var(--ae-gray-200);\\n --ae-color-gray-lighter: var(--ae-gray-100);\\n --ae-color-gray-lightest: color-mix(in srgb, var(--ae-gray) 10%, white);\\n\\n /* Text */\\n --ae-color-text-main: var(--ae-dark-700);\\n --ae-color-text-muted: var(--ae-gray-600);\\n --ae-color-text-disabled: var(--ae-gray-300);\\n --ae-color-text-link: var(--ae-blue-500);\\n --ae-color-text-link-hover: var(--ae-blue-700);\\n\\n /* Surfaces */\\n --ae-surface-sunken: var(--ae-light-500);\\n --ae-surface-base: white;\\n --ae-surface-raised: var(--ae-light-500);\\n --ae-surface-overlay: white;\\n --ae-color-overlay: rgba(0, 0, 0, 0.4);\\n\\n /* Borders */\\n --ae-border-subtle: rgba(0, 0, 0, 0.08);\\n --ae-border-default: rgba(0, 0, 0, 0.15);\\n --ae-border-hover: rgba(0, 0, 0, 0.25);\\n --ae-border-focus: var(--ae-color-primary);\\n --ae-border-disabled: rgba(0, 0, 0, 0.06);\\n\\n /* Focus ring */\\n --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.30);\\n --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);\\n\\n /* Subtle intent tokens \u2014 light context */\\n --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.08);\\n --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.40);\\n --ae-color-primary-text-emphasis: var(--ae-blue-700);\\n\\n --ae-color-success-bg-subtle: rgb(from var(--ae-green) r g b / 0.08);\\n --ae-color-success-border-subtle: rgb(from var(--ae-green) r g b / 0.40);\\n --ae-color-success-text-emphasis: var(--ae-green-700);\\n\\n --ae-color-danger-bg-subtle: rgb(from var(--ae-red) r g b / 0.08);\\n --ae-color-danger-border-subtle: rgb(from var(--ae-red) r g b / 0.40);\\n --ae-color-danger-text-emphasis: var(--ae-red-700);\\n\\n --ae-color-warning-bg-subtle: rgb(from var(--ae-yellow) r g b / 0.08);\\n --ae-color-warning-border-subtle: rgb(from var(--ae-yellow) r g b / 0.40);\\n --ae-color-warning-text-emphasis: var(--ae-yellow-700);\\n\\n --ae-color-info-bg-subtle: rgb(from var(--ae-cyan) r g b / 0.08);\\n --ae-color-info-border-subtle: rgb(from var(--ae-cyan) r g b / 0.40);\\n --ae-color-info-text-emphasis: var(--ae-cyan-700);\\n\\n --ae-color-secondary-bg-subtle: rgb(from var(--ae-slate) r g b / 0.08);\\n --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.40);\\n --ae-color-secondary-text-emphasis: var(--ae-slate-700);\\n\\n --ae-color-light-bg-subtle: var(--ae-gray-100); /* opaque on white: ~#e2e2e2 */\\n --ae-color-light-border-subtle: var(--ae-gray-200); /* opaque on white: ~#c4c4c4 */\\n\\n --ae-color-dark-bg-subtle: var(--ae-dark-100); /* opaque on white: ~#d6d8d9 */\\n --ae-color-dark-border-subtle: var(--ae-dark-300); /* opaque on white: ~#85898c */\\n\\n /* Component tokens \u2014 light defaults */\\n --ae-action-btn-bg: var(--ae-gray-200);\\n --ae-action-btn-bg-hover: var(--ae-color-primary);\\n --ae-action-btn-color: var(--ae-gray-600);\\n --ae-action-btn-color-hover: white;\\n\\n --ae-clear-btn-bg-hover: var(--ae-color-danger);\\n --ae-clear-btn-color-hover: white;\\n\\n --ae-reset-btn-border-radius: var(--ae-radius-xs);\\n --ae-reset-btn-bg: var(--ae-action-btn-bg);\\n --ae-reset-btn-bg-hover: var(--ae-action-btn-bg-hover);\\n --ae-reset-btn-color: var(--ae-action-btn-color);\\n --ae-reset-btn-color-hover: var(--ae-action-btn-color-hover);\\n --ae-reset-btn-transition: all 0.12s;\\n\\n --ae-clear-btn-border-radius: var(--ae-radius-xs);\\n --ae-clear-btn-bg: var(--ae-action-btn-bg);\\n --ae-clear-btn-color: var(--ae-action-btn-color);\\n --ae-clear-btn-transition: all 0.12s;\\n}\\n\\n:root,\\n:host {\\n --ae-size-scale: 1;\\n --ae-size-base: calc(1rem * var(--ae-size-scale)); /* 16px */\\n --ae-size-xl: round(calc(var(--ae-size-l) * 1.125), 1px); /* 23px */\\n --ae-size-l: round(calc(var(--ae-size-m) * 1.125 * 1.125), 1px); /* 20px */\\n --ae-size-m: var(--ae-size-base); /* 16px */\\n --ae-size-s: round(calc(var(--ae-size-m) / 1.125), 1px); /* 14px */\\n --ae-size-xs: round(calc(var(--ae-size-s) / 1.125), 1px); /* 12px */\\n --ae-size-2xs: round(calc(var(--ae-size-xs) / 1.125), 1px); /* 11px */\\n --ae-size-3xs: round(calc(var(--ae-size-2xs) / 1.125), 1px); /* 10px */\\n}\\n\\n/* Border-radius tokens \u2014 shared across all components */\\n:root,\\n:host {\\n /**\\n * Unified border-radius hook for all components.\\n *\\n * Not set by default \u2014 each component falls back to its own --ae-radius-*\\n * token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).\\n *\\n * Usage:\\n * :root { --ae-border-radius: 0; } // global: all components square\\n * :root { --ae-border-radius: 999px; } // global: all components pill\\n * ae-button { --ae-border-radius: 50%; } // scoped: only buttons circular\\n * .sidebar { --ae-border-radius: 8px; } // scoped: everything inside .sidebar\\n *\\n * To restore a component to its own default:\\n * ae-card { --ae-border-radius: initial; }\\n */\\n\\n --ae-radius-square: 0;\\n --ae-radius-xs: 2px;\\n --ae-radius-sm: 4px;\\n --ae-radius-md: 6px;\\n --ae-radius-lg: 8px;\\n --ae-radius-xl: 12px;\\n --ae-radius-pill: 999px;\\n --ae-radius-circle: 50%;\\n}\\n\\n/* Layout tokens \u2014 defined on :root so all light DOM elements can use them */\\n:root,\\n:host {\\n --container-max-width: 1280px;\\n --container-padding-x: 1.5rem;\\n}\\n\\n.theme-dark,\\n:root[theme=\\\"dark\\\"],\\n:host([theme=\\\"dark\\\"]),\\n:host-context([theme=\\\"dark\\\"]) {\\n color-scheme: dark;\\n\\n /* Hover / active \u2014 slightly gentler on dark backgrounds */\\n --ae-color-mix-hover: black 8%;\\n --ae-color-mix-active: black 16%;\\n\\n /* Gray UI aliases \u2014 darker palette steps for elements on dark background */\\n --ae-color-gray-dark: var(--ae-gray-800);\\n --ae-color-gray: var(--ae-gray-700);\\n --ae-color-gray-light: var(--ae-gray-600);\\n --ae-color-gray-lighter: var(--ae-gray-500);\\n --ae-color-gray-lightest: var(--ae-gray-400);\\n\\n /* Secondary \u2014 deeper base on dark background */\\n --ae-color-secondary: var(--ae-slate-700);\\n --ae-color-secondary-text: var(--ae-slate-300);\\n\\n /* Text */\\n --ae-color-text-main: white;\\n --ae-color-text-muted: var(--ae-gray-200);\\n --ae-color-text-disabled: var(--ae-gray-500);\\n --ae-color-text-link: var(--ae-blue-300);\\n --ae-color-text-link-hover: var(--ae-blue-200);\\n\\n /* Surfaces */\\n --ae-surface-sunken: var(--ae-gray-900);\\n --ae-surface-base: color-mix(in srgb, var(--ae-gray) 27%, black);\\n --ae-surface-raised: color-mix(in srgb, var(--ae-gray) 34%, black);\\n --ae-surface-overlay: color-mix(in srgb, var(--ae-gray) 38%, black);\\n --ae-color-overlay: rgba(0, 0, 0, 0.6);\\n\\n /* Borders */\\n --ae-border-subtle: rgba(255, 255, 255, 0.08);\\n --ae-border-default: rgba(255, 255, 255, 0.12);\\n --ae-border-hover: rgba(255, 255, 255, 0.20);\\n --ae-border-focus: var(--ae-color-primary);\\n --ae-border-disabled: rgba(255, 255, 255, 0.06);\\n\\n /* Focus ring */\\n --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.25);\\n --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);\\n\\n /* Subtle intent tokens \u2014 dark context (more alpha, lighter text-emphasis) */\\n --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.10);\\n --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.30);\\n --ae-color-primary-text-emphasis: var(--ae-blue-300);\\n\\n --ae-color-success-bg-subtle: rgb(from var(--ae-green) r g b / 0.10);\\n --ae-color-success-border-subtle: rgb(from var(--ae-green) r g b / 0.30);\\n --ae-color-success-text-emphasis: var(--ae-green-300);\\n\\n --ae-color-danger-bg-subtle: rgb(from var(--ae-red) r g b / 0.10);\\n --ae-color-danger-border-subtle: rgb(from var(--ae-red) r g b / 0.30);\\n --ae-color-danger-text-emphasis: var(--ae-red-300);\\n\\n --ae-color-warning-bg-subtle: rgb(from var(--ae-yellow) r g b / 0.10);\\n --ae-color-warning-border-subtle: rgb(from var(--ae-yellow) r g b / 0.30);\\n --ae-color-warning-text-emphasis: var(--ae-yellow-300);\\n\\n --ae-color-info-bg-subtle: rgb(from var(--ae-cyan) r g b / 0.10);\\n --ae-color-info-border-subtle: rgb(from var(--ae-cyan) r g b / 0.30);\\n --ae-color-info-text-emphasis: var(--ae-cyan-300);\\n\\n --ae-color-secondary-bg-subtle: rgb(from var(--ae-slate) r g b / 0.10);\\n --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.30);\\n --ae-color-secondary-text-emphasis: var(--ae-slate-300);\\n\\n --ae-color-light-bg-subtle: rgb(from var(--ae-light) r g b / 0.20);\\n --ae-color-light-border-subtle: rgb(from var(--ae-light) r g b / 0.25);\\n\\n --ae-color-dark-bg-subtle: rgb(from var(--ae-dark) r g b / 0.30);\\n --ae-color-dark-border-subtle: rgb(from var(--ae-dark) r g b / 0.50);\\n\\n /* Component tokens \u2014 dark overrides */\\n --ae-action-btn-bg: var(--ae-color-gray);\\n --ae-action-btn-bg-hover: color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));\\n --ae-action-btn-color: var(--ae-gray-400);\\n --ae-action-btn-color-hover: var(--ae-cyan-300);\\n --ae-clear-btn-bg-hover: color-mix(in srgb, var(--ae-red) 25%, var(--ae-gray-800));\\n --ae-clear-btn-color-hover: var(--ae-red-300);\\n}\\n\"", "module.exports = \":host([size=\\\"xs\\\"]) { font-size: var(--ae-size-xs); }\\n:host([size=\\\"sm\\\"]) { font-size: var(--ae-size-s); }\\n:host([size=\\\"md\\\"]) { font-size: var(--ae-size-m); }\\n:host([size=\\\"lg\\\"]) { font-size: var(--ae-size-l); }\\n:host([size=\\\"xl\\\"]) { font-size: var(--ae-size-xl); }\\n:host([size=\\\"3xs\\\"]) { font-size: var(--ae-size-3xs); }\\n:host([size=\\\"2xs\\\"]) { font-size: var(--ae-size-2xs); }\\n\"", "module.exports = \":host {\\n --ae-color-solid: var(--ae-color-gray);\\n --ae-color-solid-hover: color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-hover));\\n --ae-color-solid-active: color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-active));\\n --ae-color-on-solid: var(--ae-color-text-main);\\n --ae-color-border: var(--ae-color-gray);\\n --ae-color-border-hover: color-mix(in srgb, var(--ae-color-border), var(--ae-color-mix-hover));\\n --ae-color-accent: var(--ae-color-text-muted);\\n --ae-color-accent-hover: var(--ae-color-text-main);\\n --ae-color-subtle: var(--ae-border-subtle);\\n --ae-color-subtle-hover: var(--ae-border-default);\\n --ae-color-bg-subtle: var(--ae-border-subtle);\\n --ae-color-text-subtle: var(--ae-color-text-muted);\\n --ae-color-border-subtle: var(--ae-border-default);\\n}\\n\\n:host([color=\\\"primary\\\"]) {\\n --ae-color-solid: var(--ae-color-primary);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-primary);\\n --ae-color-accent: var(--ae-color-text-link);\\n --ae-color-accent-hover: var(--ae-color-text-link-hover);\\n --ae-color-subtle: var(--ae-color-primary-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-blue) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-primary-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-primary-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-primary-border-subtle);\\n}\\n\\n:host([color=\\\"secondary\\\"]) {\\n --ae-color-solid: var(--ae-color-secondary);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-secondary-hover);\\n --ae-color-accent: var(--ae-color-secondary-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-text-main);\\n --ae-color-subtle: rgb(from var(--ae-slate) r g b / 0.06);\\n --ae-color-subtle-hover: rgb(from var(--ae-slate) r g b / 0.12);\\n --ae-color-bg-subtle: var(--ae-color-secondary-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-secondary-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-secondary-border-subtle);\\n}\\n\\n:host([color=\\\"success\\\"]) {\\n --ae-color-solid: var(--ae-color-success);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-success);\\n --ae-color-accent: var(--ae-color-success-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-success-hover);\\n --ae-color-subtle: var(--ae-color-success-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-green) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-success-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-success-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-success-border-subtle);\\n}\\n\\n:host([color=\\\"danger\\\"]) {\\n --ae-color-solid: var(--ae-color-danger);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-danger);\\n --ae-color-accent: var(--ae-color-danger-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-danger-hover);\\n --ae-color-subtle: var(--ae-color-danger-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-red) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-danger-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-danger-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-danger-border-subtle);\\n}\\n\\n:host([color=\\\"warning\\\"]) {\\n --ae-color-solid: var(--ae-color-warning);\\n --ae-color-on-solid: var(--ae-gray-900);\\n --ae-color-border: var(--ae-color-warning);\\n --ae-color-accent: var(--ae-color-warning-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-warning-hover);\\n --ae-color-subtle: var(--ae-color-warning-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-yellow) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-warning-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-warning-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-warning-border-subtle);\\n}\\n\\n:host([color=\\\"info\\\"]) {\\n --ae-color-solid: var(--ae-color-info);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-info);\\n --ae-color-accent: var(--ae-color-info-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-info-hover);\\n --ae-color-subtle: var(--ae-color-info-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-cyan) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-info-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-info-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-info-border-subtle);\\n}\\n\\n:host([color=\\\"light\\\"]) {\\n --ae-color-solid: var(--ae-light);\\n --ae-color-on-solid: var(--ae-gray-900);\\n --ae-color-border: var(--ae-border-hover);\\n --ae-color-subtle: var(--ae-color-light-bg-subtle);\\n --ae-color-subtle-hover: var(--ae-color-light-border-subtle);\\n --ae-color-bg-subtle: var(--ae-color-light-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-text-muted);\\n --ae-color-border-subtle: var(--ae-color-light-border-subtle);\\n}\\n\\n:host([color=\\\"dark\\\"]) {\\n --ae-color-solid: var(--ae-dark-500);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-dark-500);\\n --ae-color-accent: var(--ae-color-text-main);\\n --ae-color-accent-hover: var(--ae-color-text-main);\\n --ae-color-subtle: var(--ae-color-dark-bg-subtle);\\n --ae-color-subtle-hover: var(--ae-color-dark-border-subtle);\\n --ae-color-bg-subtle: var(--ae-color-dark-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-text-main);\\n --ae-color-border-subtle: var(--ae-color-dark-border-subtle);\\n}\\n\"", "module.exports = \":host {\\n display: inline-block;\\n}\\n\\nbutton {\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n gap: 6px;\\n font-family: inherit;\\n font-weight: 400;\\n text-align: center;\\n white-space: nowrap;\\n vertical-align: middle;\\n user-select: none;\\n cursor: pointer;\\n transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\\n outline: none;\\n position: relative;\\n padding: 0.429em 1.071em;\\n font-size: 1em;\\n line-height: 1.5;\\n border-radius: var(--ae-border-radius, var(--_btn-r-tl, var(--ae-radius-sm)) var(--_btn-r-tr, var(--ae-radius-sm)) var(--_btn-r-br, var(--ae-radius-sm)) var(--_btn-r-bl, var(--ae-radius-sm)));\\n min-width: 4.571em;\\n height: 2.286em;\\n width: 100%;\\n\\n background: var(--ae-color-solid);\\n border: 1px solid var(--ae-color-solid);\\n color: var(--ae-color-on-solid);\\n}\\n\\nbutton:focus { outline: none; }\\nbutton:active { transform: translateY(1px); }\\n\\nbutton:hover:not(:disabled) {\\n background: var(--ae-color-solid-hover);\\n border-color: var(--ae-color-border-hover);\\n color: var(--ae-color-on-solid-hover, var(--ae-color-on-solid));\\n}\\n\\nbutton:active:not(:disabled) { background: var(--ae-color-solid-active); }\\n\\nbutton:disabled {\\n opacity: 0.5;\\n cursor: not-allowed;\\n}\\n\\n:host([size=\\\"xs\\\"]) button { border-radius: var(--ae-border-radius, var(--_btn-r-tl, var(--ae-radius-xs)) var(--_btn-r-tr, var(--ae-radius-xs)) var(--_btn-r-br, var(--ae-radius-xs)) var(--_btn-r-bl, var(--ae-radius-xs))); }\\n:host([size=\\\"sm\\\"]) button { border-radius: var(--ae-border-radius, var(--_btn-r-tl, var(--ae-radius-xs)) var(--_btn-r-tr, var(--ae-radius-xs)) var(--_btn-r-br, var(--ae-radius-xs)) var(--_btn-r-bl, var(--ae-radius-xs))); }\\n\\n/* --- Variants --- */\\n\\n:host([variant=\\\"outlined\\\"]) button {\\n background: transparent;\\n border-color: var(--ae-color-border);\\n color: var(--ae-color-accent);\\n}\\n\\n:host([variant=\\\"outlined\\\"]) button:hover:not(:disabled) {\\n background: var(--ae-color-subtle);\\n border-color: var(--ae-color-border-hover);\\n color: var(--ae-color-accent-hover);\\n}\\n\\n:host([variant=\\\"outlined\\\"]) button:active:not(:disabled) {\\n background: var(--ae-color-subtle-hover);\\n}\\n\\n:host([variant=\\\"subtle\\\"]) button {\\n background: var(--ae-color-subtle);\\n border-color: transparent;\\n color: var(--ae-color-accent);\\n}\\n\\n:host([variant=\\\"subtle\\\"]) button:hover:not(:disabled) {\\n background: var(--ae-color-subtle-hover);\\n color: var(--ae-color-accent-hover);\\n}\\n\\n:host([variant=\\\"subtle\\\"]) button:active:not(:disabled) {\\n background: var(--ae-color-subtle-hover);\\n}\\n\\n:host([variant=\\\"faint\\\"]) button {\\n background: var(--ae-color-subtle);\\n border-color: var(--ae-color-border);\\n color: var(--ae-color-accent);\\n}\\n\\n:host([variant=\\\"faint\\\"]) button:hover:not(:disabled) {\\n background: var(--ae-color-subtle-hover);\\n border-color: var(--ae-color-border-hover);\\n color: var(--ae-color-accent-hover);\\n}\\n\\n:host([variant=\\\"faint\\\"]) button:active:not(:disabled) {\\n background: var(--ae-color-subtle-hover);\\n}\\n\\n:host([variant=\\\"text\\\"]) button {\\n background: transparent;\\n border-color: transparent;\\n color: var(--ae-color-accent);\\n min-width: auto;\\n padding-left: 4px;\\n padding-right: 4px;\\n}\\n\\n:host([variant=\\\"text\\\"]) button:hover:not(:disabled) {\\n background: var(--ae-color-subtle);\\n color: var(--ae-color-accent-hover);\\n}\\n\\n:host([variant=\\\"text\\\"]) button:active:not(:disabled) {\\n background: var(--ae-color-subtle-hover);\\n}\\n\\n/* Icon-only: single ae-icon child \u2192 square compact layout */\\n:host([icon-only]) {\\n display: inline-flex;\\n}\\n\\n:host([icon-only]:not([size])) {\\n font-size: var(--ae-size-m);\\n}\\n\\n:host([icon-only]) button {\\n padding: 0;\\n min-width: auto;\\n width: 2.286em;\\n height: 2.286em;\\n line-height: 1;\\n}\\n\\n:host([icon-only]) ::slotted(ae-icon) {\\n font-size: 1.5em;\\n}\\n\\n:host([active]) button {\\n background: var(--ae-color-solid-active);\\n border-color: var(--ae-color-border-hover);\\n color: var(--ae-color-on-solid-hover, var(--ae-color-on-solid));\\n}\\n\\n.btn-icon {\\n padding: 0;\\n min-width: auto;\\n width: 2.286em;\\n height: 2.286em;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n border-radius: var(--ae-radius-sm);\\n}\\n\\n.btn-icon.btn-lg {\\n width: 2.857em;\\n height: 2.857em;\\n}\\n\\n.btn-circle {\\n border-radius: var(--ae-radius-circle);\\n}\\n\\n:host([block]) {\\n display: block;\\n}\\n\\nbutton.btn-loading {\\n position: relative;\\n pointer-events: none;\\n color: transparent;\\n}\\n\\nbutton.btn-loading::before {\\n content: '';\\n position: absolute;\\n width: 1em;\\n height: 1em;\\n border: 2px solid currentColor;\\n border-top-color: transparent;\\n border-radius: var(--ae-radius-circle);\\n animation: btn-spin 0.6s linear infinite;\\n color: currentColor;\\n opacity: 0.8;\\n}\\n\\n@keyframes btn-spin {\\n to {\\n transform: rotate(360deg);\\n }\\n}\\n\\n.btn-icon-left {\\n margin-right: -2px;\\n}\\n\\n.btn-icon-right {\\n margin-left: -2px;\\n}\\n\\n\"", "module.exports = \":host {\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n font-size: 20px;\\n width: 1em;\\n height: 1em;\\n color: inherit;\\n flex-shrink: 0;\\n line-height: 0;\\n vertical-align: middle;\\n}\\n\\n:host([color]) {\\n color: var(--ae-color-solid);\\n}\\n\\n.icon-svg {\\n display: block;\\n width: 100%;\\n height: 100%;\\n fill: var(--icon-fill, currentColor);\\n stroke: var(--icon-stroke, none);\\n stroke-width: var(--icon-stroke-width, 2);\\n stroke-linecap: var(--icon-stroke-linecap, round);\\n stroke-linejoin: var(--icon-stroke-linejoin, round);\\n pointer-events: none;\\n overflow: visible;\\n}\\n\"", "export { default, default as IconButton } from './icon-button';\nexport type { IconButtonProps, IconButtonVariant, IconButtonSize } from './icon-button';\n", "\uFEFFimport { AeicoElement } from 'aeico';\nimport { toKebab } from './utils';\n\nconst TAG_NAME_PREFIX = 'ae';\n\n/**\n * AeicoComponent is the base class for all built-in Aeico components.\n */\nclass AeicoComponent extends AeicoElement {\n static register(name?: string) {\n const tagName = name || `${TAG_NAME_PREFIX}-${this.tagName || toKebab(this.name)}`;\n\n super.register(tagName);\n }\n}\n\nexport default AeicoComponent;\n", "export const SVG_NS = 'http://www.w3.org/2000/svg';\n\nexport function toKebab(str: string): string {\n const cleaned = str.replace(/^[_\\d]+/, '');\n\n return cleaned.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n}\n", "\uFEFFimport type { InferProps, Props } from 'aeico';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type { IconColor } from '../icon/defines';\n// Ensure ae-button and ae-icon are registered\nimport '../button/button';\nimport '../icon/icon';\n\nexport type IconButtonVariant = 'filled' | 'outlined' | 'subtle' | 'text';\nexport type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/**\n * @deprecated Use `<ae-button>` with an `<ae-icon>` slot instead.\n *\n * ```html\n * <ae-button color=\"primary\"><ae-icon name=\"star\"></ae-icon></ae-button>\n * ```\n */\nclass IconButton extends AeicoComponent {\n static tagName = 'icon-button';\n\n static props: Props = {\n icon: { type: String },\n size: { type: String },\n color: { type: String },\n variant: { type: String },\n disabled: { type: Boolean },\n };\n\n declare icon?: string;\n declare size?: IconButtonSize;\n declare color?: IconColor;\n declare variant?: IconButtonVariant;\n declare disabled?: boolean;\n\n protected static styles = [':host { display: contents; }'];\n\n protected render() {\n return html(({ aeButton, aeIcon }) => {\n aeButton(\n {\n color: this.color,\n variant: this.variant,\n size: this.size,\n disabled: this.disabled,\n },\n () => {\n aeIcon({ name: this.icon });\n },\n );\n });\n }\n}\n\nIconButton.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-icon-button': IconButton;\n }\n}\n\nexport default IconButton;\nexport type IconButtonProps = InferProps<typeof IconButton>;\n", "\uFEFFimport type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css';\nimport sizeCSS from '../styles/size.css';\nimport colorCSS from '../styles/color.css';\nimport buttonStyle from '../styles/components/button.css';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { ButtonColor, ButtonSize, ButtonVariant } from './defines';\nimport { prop } from 'aeico';\n\n/**\n * Button Component\n *\n * A customizable button component with multiple variants and sizes.\n * Supports theme and internationalization through mixins.\n *\n * @example\n * ```typescript\n * // Using the static create method\n * const button = Button.create({\n * variant: 'primary',\n * size: 'md'\n * })\n * ```\n *\n * @example\n * ```html\n * <!-- Using as Web Component -->\n * <ae-button variant=\"primary\" size=\"md\">Save</ae-button>\n * <ae-button variant=\"danger\" size=\"sm\">Delete</ae-button>\n * <ae-button variant=\"subtle\">Cancel</ae-button>\n * ```\n */\nclass Button extends AeicoComponent {\n protected static styles = [styleVariables, sizeCSS, colorCSS, buttonStyle];\n\n @prop({ type: String })\n color?: ButtonColor;\n\n @prop({ type: String })\n variant?: ButtonVariant;\n\n @prop({ type: String })\n size?: ButtonSize;\n\n @prop({ type: Boolean })\n disabled?: boolean;\n\n @prop({ type: String })\n type?: 'button' | 'submit' | 'reset';\n\n @prop({ type: Boolean })\n active?: boolean;\n\n @prop({ type: Boolean })\n block?: boolean;\n\n private _buttonElement: HTMLButtonElement | null = null;\n private _slotElement: HTMLSlotElement | null = null;\n private _autoAriaLabel = false;\n\n protected onMounted() {\n this._handleSlotChange();\n }\n\n private _handleSlotChange = () => {\n const nodes = this._slotElement?.assignedNodes() ?? [];\n // Icon-only: exactly one element (ae-icon) and no meaningful text nodes\n const elements = nodes.filter((n): n is Element => n.nodeType === Node.ELEMENT_NODE);\n const hasText = nodes.some(\n (n) => n.nodeType === Node.TEXT_NODE && n.textContent!.trim() !== '',\n );\n const isIconOnly =\n !hasText && elements.length === 1 && elements[0].tagName.toLowerCase() === 'ae-icon';\n\n if (isIconOnly) {\n this.setAttribute('icon-only', '');\n if (!this.hasAttribute('aria-label') || this._autoAriaLabel) {\n this.setAttribute('aria-label', elements[0].getAttribute('name') ?? '');\n this._autoAriaLabel = true;\n }\n } else {\n this.removeAttribute('icon-only');\n if (this._autoAriaLabel) {\n this.removeAttribute('aria-label');\n this._autoAriaLabel = false;\n }\n }\n };\n\n protected render() {\n return html(({ button, slot }) => {\n this._buttonElement = button(\n {\n type: this.type || 'button',\n disabled: this.disabled,\n part: 'button',\n 'aria-pressed': this.active,\n 'aria-disabled': this.disabled,\n },\n () => {\n this._slotElement = slot({ '@slotchange': this._handleSlotChange });\n },\n );\n });\n }\n\n /**\n * Programmatically click the button\n */\n click() {\n if (!this.disabled && this._buttonElement) {\n this._buttonElement.click();\n }\n }\n\n /**\n * Focus the button\n */\n focus() {\n if (this._buttonElement) {\n this._buttonElement.focus();\n }\n }\n\n /**\n * Blur the button\n */\n blur() {\n if (this._buttonElement) {\n this._buttonElement.blur();\n }\n }\n}\n\nButton.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-button': Button;\n }\n}\n\nexport default Button;\nexport type ButtonProps = InferProps<typeof Button>;\n", "\uFEFFimport type { InferProps, Props } from 'aeico';\nimport { SVG_NS } from '../utils';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport styleVariables from '../styles/variables.css';\nimport sizeCSS from '../styles/size.css';\nimport colorCSS from '../styles/color.css';\nimport style from '../styles/components/icon.css';\nimport type { IconSize, IconColor } from './defines';\nimport { defaultViewBox } from './defines';\nimport IconRegistry from './registry';\nimport './built-in-icons';\n\nclass Icon extends AeicoComponent {\n static tagName = 'icon';\n\n static props: Props = {\n name: { type: String },\n size: { type: String },\n color: { type: String },\n stroke: { type: Boolean },\n strokeWidth: { type: Number },\n };\n\n declare name?: string;\n declare size?: IconSize;\n declare color?: IconColor;\n declare stroke?: boolean;\n declare strokeWidth?: number;\n\n protected static styles = [styleVariables, sizeCSS, colorCSS, style];\n\n protected render() {\n const def = this.name ? IconRegistry.get(this.name) : undefined;\n\n // Numeric size: set font-size directly (string sizes are handled by size.css)\n const numericSize = Number(this.size);\n if (this.size !== undefined && !isNaN(numericSize) && numericSize > 0) {\n this.style.setProperty('font-size', `${numericSize}px`);\n } else {\n this.style.removeProperty('font-size');\n }\n\n if (!def) return;\n\n const { paths } = def;\n const isMultiPath = Array.isArray(paths);\n\n // Stroke CSS variables only apply in single-path mode (component props)\n if (!isMultiPath) {\n const useStroke =\n this.stroke ?? (this.strokeWidth !== undefined ? true : (def.stroke ?? false));\n const useStrokeWidth = this.strokeWidth ?? def.strokeWidth ?? 2;\n\n if (useStroke) {\n this.style.setProperty('--icon-fill', 'none');\n this.style.setProperty('--icon-stroke', 'currentColor');\n this.style.setProperty('--icon-stroke-width', String(useStrokeWidth));\n } else {\n this.style.removeProperty('--icon-fill');\n this.style.removeProperty('--icon-stroke');\n this.style.removeProperty('--icon-stroke-width');\n }\n } else {\n this.style.removeProperty('--icon-fill');\n this.style.removeProperty('--icon-stroke');\n this.style.removeProperty('--icon-stroke-width');\n }\n\n return html(({ svg, path }) => {\n svg(\n {\n className: 'icon-svg',\n viewBox: def.viewBox ?? defaultViewBox,\n 'aria-hidden': 'true',\n xmlns: SVG_NS,\n },\n () => {\n if (typeof paths === 'string') {\n path({ d: paths });\n } else {\n for (const p of paths) {\n const attrs: Record<string, unknown> = { d: p.d };\n if (p.fill) attrs.style = { fill: p.fill };\n path(attrs);\n }\n }\n },\n );\n });\n }\n}\n\nIcon.register();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-icon': Icon;\n }\n}\n\nexport default Icon;\nexport type IconProps = InferProps<typeof Icon>;\n", "export type IconSize = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;\n\nexport type IconColor =\n | 'default'\n | 'primary'\n | 'secondary'\n | 'success'\n | 'danger'\n | 'warning'\n | 'info';\n\nexport interface IconPathDef {\n d: string;\n fill?: string;\n stroke?: boolean;\n strokeWidth?: number;\n}\n\nexport interface IconDefinition {\n paths: string | IconPathDef[];\n viewBox?: string;\n stroke?: boolean;\n strokeWidth?: number;\n}\n\nexport const defaultViewBox = '0 0 24 24';\n\nexport type IconRegistryData = Record<string, string | IconDefinition>;\n", "import { IconDefinition, IconRegistryData, defaultViewBox } from './defines';\n\nclass IconRegistry {\n private static _icons: Map<string, IconDefinition> = new Map();\n /** Names registered via addBuiltIn \u2014 can be overridden by user add() calls */\n private static _builtInKeys: Set<string> = new Set();\n\n /** Register user icons. Always takes priority over built-in icons. */\n static add(icons: IconRegistryData) {\n for (const [name, data] of Object.entries(icons)) {\n if (typeof data === 'string') {\n this._icons.set(name, { paths: data, viewBox: defaultViewBox });\n } else {\n this._icons.set(name, data);\n }\n // Mark as user-defined (removes built-in status)\n this._builtInKeys.delete(name);\n }\n }\n\n /**\n * Register built-in icons provided by the library.\n * A built-in icon will NOT overwrite an icon already registered by the user.\n */\n static addBuiltIn(icons: IconRegistryData) {\n for (const [name, data] of Object.entries(icons)) {\n // Skip if the user has already registered this icon\n if (this._icons.has(name) && !this._builtInKeys.has(name)) continue;\n if (typeof data === 'string') {\n this._icons.set(name, { paths: data, viewBox: defaultViewBox });\n } else {\n this._icons.set(name, data);\n }\n this._builtInKeys.add(name);\n }\n }\n\n static get(name: string): IconDefinition | undefined {\n return this._icons.get(name);\n }\n\n static has(name: string): boolean {\n return this._icons.has(name);\n }\n}\n\nexport default IconRegistry;\n", "/**\n * Built-in system icons used internally by aeico components.\n * These are pre-registered so components work out of the box.\n * Users can override any of them by calling IconRegistry.add({ 'name': '...' }).\n *\n * All paths use the Material Design 24\u00D724 viewBox.\n */\nimport IconRegistry from './registry';\n\nIconRegistry.addBuiltIn({\n copy: 'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z',\n check: 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z',\n 'chevron-left': 'M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z',\n 'chevron-right': 'M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z',\n 'chevron-up': 'M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z',\n 'chevron-down': 'M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z',\n 'chevrons-left': 'M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z',\n 'chevrons-right': 'M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z',\n close:\n 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',\n});\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,4FAAAA,UAAAC,SAAA;AAAA,IAAAA,QAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
3
|
+
"sources": ["css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/variables.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/size.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/color.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/button.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/icon.css", "../src/icon-button/index.ts", "../src/aeico-component.ts", "../src/icon-button/icon-button.ts", "../src/button/button.ts", "../src/utils.ts", "../src/icon/icon.ts", "../src/icon/defines.ts", "../src/icon/registry.ts", "../src/icon/built-in-icons.ts"],
|
|
4
|
+
"sourcesContent": ["module.exports = \":root,\\n:host {\\n --ae-font-sans-serif: system-ui, -apple-system, \\\"Segoe UI\\\", Roboto, \\\"Helvetica Neue\\\",\\n \\\"Noto Sans\\\", \\\"Liberation Sans\\\", Arial, sans-serif,\\n \\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\", \\\"Noto Color Emoji\\\";\\n --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,\\n \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace;\\n font-family: var(--ae-font-sans-serif);\\n --ae-blue: #0e639c;\\n --ae-green: #28a745;\\n --ae-red: #dc3545;\\n --ae-yellow: #ffc107;\\n --ae-cyan: #17a2b8;\\n --ae-gray: #6e6e6e;\\n --ae-slate: #64748b;\\n --ae-dark: #343a40;\\n --ae-light: #f8f9fa;\\n}\\n\\n:root,\\n:host {\\n /* Blue */\\n --ae-blue-100: color-mix(in srgb, var(--ae-blue) 20%, white);\\n --ae-blue-200: color-mix(in srgb, var(--ae-blue) 40%, white);\\n --ae-blue-300: color-mix(in srgb, var(--ae-blue) 60%, white);\\n --ae-blue-400: color-mix(in srgb, var(--ae-blue) 80%, white);\\n --ae-blue-500: var(--ae-blue);\\n --ae-blue-600: color-mix(in srgb, var(--ae-blue) 80%, black);\\n --ae-blue-700: color-mix(in srgb, var(--ae-blue) 60%, black);\\n --ae-blue-800: color-mix(in srgb, var(--ae-blue) 40%, black);\\n --ae-blue-900: color-mix(in srgb, var(--ae-blue) 20%, black);\\n\\n /* Green */\\n --ae-green-100: color-mix(in srgb, var(--ae-green) 20%, white);\\n --ae-green-200: color-mix(in srgb, var(--ae-green) 40%, white);\\n --ae-green-300: color-mix(in srgb, var(--ae-green) 60%, white);\\n --ae-green-400: color-mix(in srgb, var(--ae-green) 80%, white);\\n --ae-green-500: var(--ae-green);\\n --ae-green-600: color-mix(in srgb, var(--ae-green) 80%, black);\\n --ae-green-700: color-mix(in srgb, var(--ae-green) 60%, black);\\n --ae-green-800: color-mix(in srgb, var(--ae-green) 40%, black);\\n --ae-green-900: color-mix(in srgb, var(--ae-green) 20%, black);\\n\\n /* Red */\\n --ae-red-100: color-mix(in srgb, var(--ae-red) 20%, white);\\n --ae-red-200: color-mix(in srgb, var(--ae-red) 40%, white);\\n --ae-red-300: color-mix(in srgb, var(--ae-red) 60%, white);\\n --ae-red-400: color-mix(in srgb, var(--ae-red) 80%, white);\\n --ae-red-500: var(--ae-red);\\n --ae-red-600: color-mix(in srgb, var(--ae-red) 80%, black);\\n --ae-red-700: color-mix(in srgb, var(--ae-red) 60%, black);\\n --ae-red-800: color-mix(in srgb, var(--ae-red) 40%, black);\\n --ae-red-900: color-mix(in srgb, var(--ae-red) 20%, black);\\n\\n /* Yellow */\\n --ae-yellow-100: color-mix(in srgb, var(--ae-yellow) 20%, white);\\n --ae-yellow-200: color-mix(in srgb, var(--ae-yellow) 40%, white);\\n --ae-yellow-300: color-mix(in srgb, var(--ae-yellow) 60%, white);\\n --ae-yellow-400: color-mix(in srgb, var(--ae-yellow) 80%, white);\\n --ae-yellow-500: var(--ae-yellow);\\n --ae-yellow-600: color-mix(in srgb, var(--ae-yellow) 80%, black);\\n --ae-yellow-700: color-mix(in srgb, var(--ae-yellow) 60%, black);\\n --ae-yellow-800: color-mix(in srgb, var(--ae-yellow) 40%, black);\\n --ae-yellow-900: color-mix(in srgb, var(--ae-yellow) 20%, black);\\n\\n /* Cyan */\\n --ae-cyan-100: color-mix(in srgb, var(--ae-cyan) 20%, white);\\n --ae-cyan-200: color-mix(in srgb, var(--ae-cyan) 40%, white);\\n --ae-cyan-300: color-mix(in srgb, var(--ae-cyan) 60%, white);\\n --ae-cyan-400: color-mix(in srgb, var(--ae-cyan) 80%, white);\\n --ae-cyan-500: var(--ae-cyan);\\n --ae-cyan-600: color-mix(in srgb, var(--ae-cyan) 80%, black);\\n --ae-cyan-700: color-mix(in srgb, var(--ae-cyan) 60%, black);\\n --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);\\n --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);\\n\\n /* Gray (neutral - base #6e6e6e) */\\n --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);\\n --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);\\n --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);\\n --ae-gray-400: color-mix(in srgb, var(--ae-gray) 80%, white);\\n --ae-gray-500: var(--ae-gray);\\n --ae-gray-600: color-mix(in srgb, var(--ae-gray) 80%, black);\\n --ae-gray-700: color-mix(in srgb, var(--ae-gray) 60%, black);\\n --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);\\n --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);\\n\\n /* Slate (blue-gray - base #64748b, used for 'secondary') */\\n --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);\\n --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);\\n --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);\\n --ae-slate-400: color-mix(in srgb, var(--ae-slate) 80%, white);\\n --ae-slate-500: var(--ae-slate);\\n --ae-slate-600: color-mix(in srgb, var(--ae-slate) 80%, black);\\n --ae-slate-700: color-mix(in srgb, var(--ae-slate) 60%, black);\\n --ae-slate-800: color-mix(in srgb, var(--ae-slate) 40%, black);\\n --ae-slate-900: color-mix(in srgb, var(--ae-slate) 20%, black);\\n\\n /* Dark (base #343a40) */\\n --ae-dark-100: color-mix(in srgb, var(--ae-dark) 20%, white);\\n --ae-dark-200: color-mix(in srgb, var(--ae-dark) 40%, white);\\n --ae-dark-300: color-mix(in srgb, var(--ae-dark) 60%, white);\\n --ae-dark-400: color-mix(in srgb, var(--ae-dark) 80%, white);\\n --ae-dark-500: var(--ae-dark);\\n --ae-dark-600: color-mix(in srgb, var(--ae-dark) 80%, black);\\n --ae-dark-700: color-mix(in srgb, var(--ae-dark) 60%, black);\\n --ae-dark-800: color-mix(in srgb, var(--ae-dark) 40%, black);\\n --ae-dark-900: color-mix(in srgb, var(--ae-dark) 20%, black);\\n\\n /* Light (base #f8f9fa) */\\n --ae-light-100: color-mix(in srgb, var(--ae-light) 20%, white);\\n --ae-light-200: color-mix(in srgb, var(--ae-light) 40%, white);\\n --ae-light-300: color-mix(in srgb, var(--ae-light) 60%, white);\\n --ae-light-400: color-mix(in srgb, var(--ae-light) 80%, white);\\n --ae-light-500: var(--ae-light);\\n --ae-light-600: color-mix(in srgb, var(--ae-light) 80%, black);\\n --ae-light-700: color-mix(in srgb, var(--ae-light) 60%, black);\\n --ae-light-800: color-mix(in srgb, var(--ae-light) 40%, black);\\n --ae-light-900: color-mix(in srgb, var(--ae-light) 20%, black);\\n}\\n\\n:root,\\n:host {\\n /* Hover / active mix (light default - overridden in \u00A7 6 dark) */\\n --ae-color-mix-hover: black 10%;\\n --ae-color-mix-active: black 20%;\\n\\n /* Primary (Blue) */\\n --ae-color-primary: var(--ae-blue-500);\\n --ae-color-primary-hover: color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-hover));\\n --ae-color-primary-active: color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-active));\\n --ae-color-primary-disabled: color-mix(in srgb, var(--ae-blue) 50%, var(--ae-gray-500));\\n\\n /* Success (Green) */\\n --ae-color-success: var(--ae-green-500);\\n --ae-color-success-hover: color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-hover));\\n --ae-color-success-active: color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-active));\\n --ae-color-success-disabled: color-mix(in srgb, var(--ae-green) 50%, var(--ae-gray-500));\\n\\n /* Danger (Red) */\\n --ae-color-danger: var(--ae-red-500);\\n --ae-color-danger-hover: color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-hover));\\n --ae-color-danger-active: color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-active));\\n --ae-color-danger-disabled: color-mix(in srgb, var(--ae-red) 50%, var(--ae-gray-500));\\n\\n /* Warning (Yellow) */\\n --ae-color-warning: var(--ae-yellow-500);\\n --ae-color-warning-hover: color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-hover));\\n --ae-color-warning-active: color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-active));\\n --ae-color-warning-disabled: color-mix(in srgb, var(--ae-yellow) 50%, var(--ae-gray-500));\\n\\n /* Info (Cyan) */\\n --ae-color-info: var(--ae-cyan-500);\\n --ae-color-info-hover: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-hover));\\n --ae-color-info-active: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));\\n --ae-color-info-disabled: color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));\\n\\n /* Secondary (Slate) - base differs per theme, overridden in \u00A7 6 dark */\\n --ae-color-secondary: var(--ae-slate-500);\\n --ae-color-secondary-hover: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));\\n --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));\\n --ae-color-secondary-text: var(--ae-slate-700);\\n}\\n\\n\\n.theme-light,\\n:root[theme=\\\"light\\\"],\\n:host([theme=\\\"light\\\"]),\\n:host-context([theme=\\\"light\\\"]),\\n:where(:root),\\n:host {\\n color-scheme: light;\\n\\n /* Gray UI aliases - lighter palette steps for elements on white background */\\n --ae-color-gray-dark: var(--ae-gray-400);\\n --ae-color-gray: var(--ae-gray-300);\\n --ae-color-gray-light: var(--ae-gray-200);\\n --ae-color-gray-lighter: var(--ae-gray-100);\\n --ae-color-gray-lightest: color-mix(in srgb, var(--ae-gray) 10%, white);\\n\\n /* Text */\\n --ae-color-text-main: var(--ae-dark-700);\\n --ae-color-text-muted: var(--ae-gray-600);\\n --ae-color-text-disabled: var(--ae-gray-300);\\n --ae-color-text-link: var(--ae-blue-500);\\n --ae-color-text-link-hover: var(--ae-blue-700);\\n\\n /* Surfaces */\\n --ae-surface-sunken: var(--ae-light-500);\\n --ae-surface-base: white;\\n --ae-surface-raised: var(--ae-light-500);\\n --ae-surface-overlay: white;\\n --ae-color-overlay: rgba(0, 0, 0, 0.4);\\n\\n /* Borders */\\n --ae-border-subtle: rgba(0, 0, 0, 0.08);\\n --ae-border-default: rgba(0, 0, 0, 0.15);\\n --ae-border-hover: rgba(0, 0, 0, 0.25);\\n --ae-border-focus: var(--ae-color-primary);\\n --ae-border-disabled: rgba(0, 0, 0, 0.06);\\n\\n /* Focus ring */\\n --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.30);\\n --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);\\n\\n /* Subtle intent tokens - light context */\\n --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.08);\\n --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.40);\\n --ae-color-primary-text-emphasis: var(--ae-blue-700);\\n\\n --ae-color-success-bg-subtle: rgb(from var(--ae-green) r g b / 0.08);\\n --ae-color-success-border-subtle: rgb(from var(--ae-green) r g b / 0.40);\\n --ae-color-success-text-emphasis: var(--ae-green-700);\\n\\n --ae-color-danger-bg-subtle: rgb(from var(--ae-red) r g b / 0.08);\\n --ae-color-danger-border-subtle: rgb(from var(--ae-red) r g b / 0.40);\\n --ae-color-danger-text-emphasis: var(--ae-red-700);\\n\\n --ae-color-warning-bg-subtle: rgb(from var(--ae-yellow) r g b / 0.08);\\n --ae-color-warning-border-subtle: rgb(from var(--ae-yellow) r g b / 0.40);\\n --ae-color-warning-text-emphasis: var(--ae-yellow-700);\\n\\n --ae-color-info-bg-subtle: rgb(from var(--ae-cyan) r g b / 0.08);\\n --ae-color-info-border-subtle: rgb(from var(--ae-cyan) r g b / 0.40);\\n --ae-color-info-text-emphasis: var(--ae-cyan-700);\\n\\n --ae-color-secondary-bg-subtle: rgb(from var(--ae-slate) r g b / 0.08);\\n --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.40);\\n --ae-color-secondary-text-emphasis: var(--ae-slate-700);\\n\\n --ae-color-light-bg-subtle: var(--ae-gray-100); /* opaque on white: ~#e2e2e2 */\\n --ae-color-light-border-subtle: var(--ae-gray-200); /* opaque on white: ~#c4c4c4 */\\n\\n --ae-color-dark-bg-subtle: var(--ae-dark-100); /* opaque on white: ~#d6d8d9 */\\n --ae-color-dark-border-subtle: var(--ae-dark-300); /* opaque on white: ~#85898c */\\n\\n /* Component tokens - light defaults */\\n --ae-action-btn-bg: var(--ae-gray-200);\\n --ae-action-btn-bg-hover: var(--ae-color-primary);\\n --ae-action-btn-color: var(--ae-gray-600);\\n --ae-action-btn-color-hover: white;\\n\\n --ae-clear-btn-bg-hover: var(--ae-color-danger);\\n --ae-clear-btn-color-hover: white;\\n\\n --ae-reset-btn-border-radius: var(--ae-radius-xs);\\n --ae-reset-btn-bg: var(--ae-action-btn-bg);\\n --ae-reset-btn-bg-hover: var(--ae-action-btn-bg-hover);\\n --ae-reset-btn-color: var(--ae-action-btn-color);\\n --ae-reset-btn-color-hover: var(--ae-action-btn-color-hover);\\n --ae-reset-btn-transition: all 0.12s;\\n\\n --ae-clear-btn-border-radius: var(--ae-radius-xs);\\n --ae-clear-btn-bg: var(--ae-action-btn-bg);\\n --ae-clear-btn-color: var(--ae-action-btn-color);\\n --ae-clear-btn-transition: all 0.12s;\\n}\\n\\n:root,\\n:host {\\n --ae-size-scale: 1;\\n --ae-size-base: calc(1rem * var(--ae-size-scale)); /* 16px */\\n --ae-size-xl: round(calc(var(--ae-size-l) * 1.125), 1px); /* 23px */\\n --ae-size-l: round(calc(var(--ae-size-m) * 1.125 * 1.125), 1px); /* 20px */\\n --ae-size-m: var(--ae-size-base); /* 16px */\\n --ae-size-s: round(calc(var(--ae-size-m) / 1.125), 1px); /* 14px */\\n --ae-size-xs: round(calc(var(--ae-size-s) / 1.125), 1px); /* 12px */\\n --ae-size-2xs: round(calc(var(--ae-size-xs) / 1.125), 1px); /* 11px */\\n --ae-size-3xs: round(calc(var(--ae-size-2xs) / 1.125), 1px); /* 10px */\\n}\\n\\n/* Border-radius tokens - shared across all components */\\n:root,\\n:host {\\n /**\\n * Unified border-radius hook for all components.\\n *\\n *\\n * Usage:\\n * :root { --ae-border-radius: 0; } // global: all components square\\n * :root { --ae-border-radius: 999px; } // global: all components pill\\n * ae-button { --ae-border-radius: 50%; } // scoped: only buttons circular\\n * .sidebar { --ae-border-radius: 8px; } // scoped: everything inside .sidebar\\n *\\n * To restore a component to its own default:\\n * ae-card { --ae-border-radius: initial; }\\n */\\n\\n --ae-radius-square: 0;\\n --ae-radius-xs: 2px;\\n --ae-radius-sm: 4px;\\n --ae-radius-md: 6px;\\n --ae-radius-lg: 8px;\\n --ae-radius-xl: 12px;\\n --ae-radius-pill: 999px;\\n --ae-radius-circle: 50%;\\n}\\n\\n/* Layout tokens - defined on :root so all light DOM elements can use them */\\n:root,\\n:host {\\n --container-max-width: 1280px;\\n --container-padding-x: 1.5rem;\\n}\\n\\n.theme-dark,\\n:root[theme=\\\"dark\\\"],\\n:host([theme=\\\"dark\\\"]),\\n:host-context([theme=\\\"dark\\\"]) {\\n color-scheme: dark;\\n\\n /* Hover / active - slightly gentler on dark backgrounds */\\n --ae-color-mix-hover: black 8%;\\n --ae-color-mix-active: black 16%;\\n\\n /* Gray UI aliases - darker palette steps for elements on dark background */\\n --ae-color-gray-dark: var(--ae-gray-800);\\n --ae-color-gray: var(--ae-gray-700);\\n --ae-color-gray-light: var(--ae-gray-600);\\n --ae-color-gray-lighter: var(--ae-gray-500);\\n --ae-color-gray-lightest: var(--ae-gray-400);\\n\\n /* Secondary - deeper base on dark background */\\n --ae-color-secondary: var(--ae-slate-700);\\n --ae-color-secondary-text: var(--ae-slate-300);\\n\\n /* Text */\\n --ae-color-text-main: white;\\n --ae-color-text-muted: var(--ae-gray-200);\\n --ae-color-text-disabled: var(--ae-gray-500);\\n --ae-color-text-link: var(--ae-blue-300);\\n --ae-color-text-link-hover: var(--ae-blue-200);\\n\\n /* Surfaces */\\n --ae-surface-sunken: var(--ae-gray-900);\\n --ae-surface-base: color-mix(in srgb, var(--ae-gray) 27%, black);\\n --ae-surface-raised: color-mix(in srgb, var(--ae-gray) 34%, black);\\n --ae-surface-overlay: color-mix(in srgb, var(--ae-gray) 38%, black);\\n --ae-color-overlay: rgba(0, 0, 0, 0.6);\\n\\n /* Borders */\\n --ae-border-subtle: rgba(255, 255, 255, 0.08);\\n --ae-border-default: rgba(255, 255, 255, 0.12);\\n --ae-border-hover: rgba(255, 255, 255, 0.20);\\n --ae-border-focus: var(--ae-color-primary);\\n --ae-border-disabled: rgba(255, 255, 255, 0.06);\\n\\n /* Focus ring */\\n --ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.25);\\n --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);\\n\\n /* Subtle intent tokens - dark context (more alpha, lighter text-emphasis) */\\n --ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.10);\\n --ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.30);\\n --ae-color-primary-text-emphasis: var(--ae-blue-300);\\n\\n --ae-color-success-bg-subtle: rgb(from var(--ae-green) r g b / 0.10);\\n --ae-color-success-border-subtle: rgb(from var(--ae-green) r g b / 0.30);\\n --ae-color-success-text-emphasis: var(--ae-green-300);\\n\\n --ae-color-danger-bg-subtle: rgb(from var(--ae-red) r g b / 0.10);\\n --ae-color-danger-border-subtle: rgb(from var(--ae-red) r g b / 0.30);\\n --ae-color-danger-text-emphasis: var(--ae-red-300);\\n\\n --ae-color-warning-bg-subtle: rgb(from var(--ae-yellow) r g b / 0.10);\\n --ae-color-warning-border-subtle: rgb(from var(--ae-yellow) r g b / 0.30);\\n --ae-color-warning-text-emphasis: var(--ae-yellow-300);\\n\\n --ae-color-info-bg-subtle: rgb(from var(--ae-cyan) r g b / 0.10);\\n --ae-color-info-border-subtle: rgb(from var(--ae-cyan) r g b / 0.30);\\n --ae-color-info-text-emphasis: var(--ae-cyan-300);\\n\\n --ae-color-secondary-bg-subtle: rgb(from var(--ae-slate) r g b / 0.10);\\n --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.30);\\n --ae-color-secondary-text-emphasis: var(--ae-slate-300);\\n\\n --ae-color-light-bg-subtle: rgb(from var(--ae-light) r g b / 0.20);\\n --ae-color-light-border-subtle: rgb(from var(--ae-light) r g b / 0.25);\\n\\n --ae-color-dark-bg-subtle: rgb(from var(--ae-dark) r g b / 0.30);\\n --ae-color-dark-border-subtle: rgb(from var(--ae-dark) r g b / 0.50);\\n\\n /* Component tokens - dark overrides */\\n --ae-action-btn-bg: var(--ae-color-gray);\\n --ae-action-btn-bg-hover: color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));\\n --ae-action-btn-color: var(--ae-gray-400);\\n --ae-action-btn-color-hover: var(--ae-cyan-300);\\n --ae-clear-btn-bg-hover: color-mix(in srgb, var(--ae-red) 25%, var(--ae-gray-800));\\n --ae-clear-btn-color-hover: var(--ae-red-300);\\n}\\n\"", "module.exports = \":host([size=\\\"xs\\\"]) { font-size: var(--ae-size-xs); }\\n:host([size=\\\"sm\\\"]) { font-size: var(--ae-size-s); }\\n:host([size=\\\"md\\\"]) { font-size: var(--ae-size-m); }\\n:host([size=\\\"lg\\\"]) { font-size: var(--ae-size-l); }\\n:host([size=\\\"xl\\\"]) { font-size: var(--ae-size-xl); }\\n:host([size=\\\"3xs\\\"]) { font-size: var(--ae-size-3xs); }\\n:host([size=\\\"2xs\\\"]) { font-size: var(--ae-size-2xs); }\\n\"", "module.exports = \":host {\\n --ae-color-solid: var(--ae-color-gray);\\n --ae-color-solid-hover: color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-hover));\\n --ae-color-solid-active: color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-active));\\n --ae-color-on-solid: var(--ae-color-text-main);\\n --ae-color-border: var(--ae-color-gray);\\n --ae-color-border-hover: color-mix(in srgb, var(--ae-color-border), var(--ae-color-mix-hover));\\n --ae-color-accent: var(--ae-color-text-muted);\\n --ae-color-accent-hover: var(--ae-color-text-main);\\n --ae-color-subtle: var(--ae-border-subtle);\\n --ae-color-subtle-hover: var(--ae-border-default);\\n --ae-color-bg-subtle: var(--ae-border-subtle);\\n --ae-color-text-subtle: var(--ae-color-text-muted);\\n --ae-color-border-subtle: var(--ae-border-default);\\n}\\n\\n:host([color=\\\"primary\\\"]) {\\n --ae-color-solid: var(--ae-color-primary);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-primary);\\n --ae-color-accent: var(--ae-color-text-link);\\n --ae-color-accent-hover: var(--ae-color-text-link-hover);\\n --ae-color-subtle: var(--ae-color-primary-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-blue) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-primary-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-primary-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-primary-border-subtle);\\n}\\n\\n:host([color=\\\"secondary\\\"]) {\\n --ae-color-solid: var(--ae-color-secondary);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-secondary-hover);\\n --ae-color-accent: var(--ae-color-secondary-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-text-main);\\n --ae-color-subtle: rgb(from var(--ae-slate) r g b / 0.06);\\n --ae-color-subtle-hover: rgb(from var(--ae-slate) r g b / 0.12);\\n --ae-color-bg-subtle: var(--ae-color-secondary-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-secondary-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-secondary-border-subtle);\\n}\\n\\n:host([color=\\\"success\\\"]) {\\n --ae-color-solid: var(--ae-color-success);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-success);\\n --ae-color-accent: var(--ae-color-success-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-success-hover);\\n --ae-color-subtle: var(--ae-color-success-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-green) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-success-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-success-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-success-border-subtle);\\n}\\n\\n:host([color=\\\"danger\\\"]) {\\n --ae-color-solid: var(--ae-color-danger);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-danger);\\n --ae-color-accent: var(--ae-color-danger-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-danger-hover);\\n --ae-color-subtle: var(--ae-color-danger-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-red) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-danger-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-danger-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-danger-border-subtle);\\n}\\n\\n:host([color=\\\"warning\\\"]) {\\n --ae-color-solid: var(--ae-color-warning);\\n --ae-color-on-solid: var(--ae-gray-900);\\n --ae-color-border: var(--ae-color-warning);\\n --ae-color-accent: var(--ae-color-warning-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-warning-hover);\\n --ae-color-subtle: var(--ae-color-warning-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-yellow) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-warning-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-warning-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-warning-border-subtle);\\n}\\n\\n:host([color=\\\"info\\\"]) {\\n --ae-color-solid: var(--ae-color-info);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-color-info);\\n --ae-color-accent: var(--ae-color-info-text-emphasis);\\n --ae-color-accent-hover: var(--ae-color-info-hover);\\n --ae-color-subtle: var(--ae-color-info-bg-subtle);\\n --ae-color-subtle-hover: rgb(from var(--ae-cyan) r g b / 0.15);\\n --ae-color-bg-subtle: var(--ae-color-info-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-info-text-emphasis);\\n --ae-color-border-subtle: var(--ae-color-info-border-subtle);\\n}\\n\\n:host([color=\\\"light\\\"]) {\\n --ae-color-solid: var(--ae-light);\\n --ae-color-on-solid: var(--ae-gray-900);\\n --ae-color-border: var(--ae-border-hover);\\n --ae-color-subtle: var(--ae-color-light-bg-subtle);\\n --ae-color-subtle-hover: var(--ae-color-light-border-subtle);\\n --ae-color-bg-subtle: var(--ae-color-light-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-text-muted);\\n --ae-color-border-subtle: var(--ae-color-light-border-subtle);\\n}\\n\\n:host([color=\\\"dark\\\"]) {\\n --ae-color-solid: var(--ae-dark-500);\\n --ae-color-on-solid: white;\\n --ae-color-border: var(--ae-dark-500);\\n --ae-color-accent: var(--ae-color-text-main);\\n --ae-color-accent-hover: var(--ae-color-text-main);\\n --ae-color-subtle: var(--ae-color-dark-bg-subtle);\\n --ae-color-subtle-hover: var(--ae-color-dark-border-subtle);\\n --ae-color-bg-subtle: var(--ae-color-dark-bg-subtle);\\n --ae-color-text-subtle: var(--ae-color-text-main);\\n --ae-color-border-subtle: var(--ae-color-dark-border-subtle);\\n}\\n\"", "module.exports = \":host {\\n display: inline-block;\\n}\\n\\nbutton {\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n gap: 6px;\\n font-family: inherit;\\n font-weight: 400;\\n text-align: center;\\n white-space: nowrap;\\n vertical-align: middle;\\n user-select: none;\\n cursor: pointer;\\n transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\\n outline: none;\\n position: relative;\\n padding: 0.429em 1.071em;\\n font-size: 1em;\\n line-height: 1.5;\\n border-radius: var(--ae-border-radius, var(--_btn-r-tl, var(--ae-radius-sm)) var(--_btn-r-tr, var(--ae-radius-sm)) var(--_btn-r-br, var(--ae-radius-sm)) var(--_btn-r-bl, var(--ae-radius-sm)));\\n min-width: 4.571em;\\n height: 2.286em;\\n width: 100%;\\n\\n background: var(--ae-color-solid);\\n border: 1px solid var(--ae-color-solid);\\n color: var(--ae-color-on-solid);\\n}\\n\\nbutton:focus { outline: none; }\\nbutton:active { transform: translateY(1px); }\\n\\nbutton:hover:not(:disabled) {\\n background: var(--ae-color-solid-hover);\\n border-color: var(--ae-color-border-hover);\\n color: var(--ae-color-on-solid-hover, var(--ae-color-on-solid));\\n}\\n\\nbutton:active:not(:disabled) { background: var(--ae-color-solid-active); }\\n\\nbutton:disabled {\\n opacity: 0.5;\\n cursor: not-allowed;\\n}\\n\\n:host([size=\\\"xs\\\"]) button { border-radius: var(--ae-border-radius, var(--_btn-r-tl, var(--ae-radius-xs)) var(--_btn-r-tr, var(--ae-radius-xs)) var(--_btn-r-br, var(--ae-radius-xs)) var(--_btn-r-bl, var(--ae-radius-xs))); }\\n:host([size=\\\"sm\\\"]) button { border-radius: var(--ae-border-radius, var(--_btn-r-tl, var(--ae-radius-xs)) var(--_btn-r-tr, var(--ae-radius-xs)) var(--_btn-r-br, var(--ae-radius-xs)) var(--_btn-r-bl, var(--ae-radius-xs))); }\\n\\n/* --- Variants --- */\\n\\n:host([variant=\\\"outlined\\\"]) button {\\n background: transparent;\\n border-color: var(--ae-color-border);\\n color: var(--ae-color-accent);\\n}\\n\\n:host([variant=\\\"outlined\\\"]) button:hover:not(:disabled) {\\n background: var(--ae-color-subtle);\\n border-color: var(--ae-color-border-hover);\\n color: var(--ae-color-accent-hover);\\n}\\n\\n:host([variant=\\\"outlined\\\"]) button:active:not(:disabled) {\\n background: var(--ae-color-subtle-hover);\\n}\\n\\n:host([variant=\\\"subtle\\\"]) button {\\n background: var(--ae-color-subtle);\\n border-color: transparent;\\n color: var(--ae-color-accent);\\n}\\n\\n:host([variant=\\\"subtle\\\"]) button:hover:not(:disabled) {\\n background: var(--ae-color-subtle-hover);\\n color: var(--ae-color-accent-hover);\\n}\\n\\n:host([variant=\\\"subtle\\\"]) button:active:not(:disabled) {\\n background: var(--ae-color-subtle-hover);\\n}\\n\\n:host([variant=\\\"faint\\\"]) button {\\n background: var(--ae-color-subtle);\\n border-color: var(--ae-color-border);\\n color: var(--ae-color-accent);\\n}\\n\\n:host([variant=\\\"faint\\\"]) button:hover:not(:disabled) {\\n background: var(--ae-color-subtle-hover);\\n border-color: var(--ae-color-border-hover);\\n color: var(--ae-color-accent-hover);\\n}\\n\\n:host([variant=\\\"faint\\\"]) button:active:not(:disabled) {\\n background: var(--ae-color-subtle-hover);\\n}\\n\\n:host([variant=\\\"text\\\"]) button {\\n background: transparent;\\n border-color: transparent;\\n color: var(--ae-color-accent);\\n min-width: auto;\\n padding-left: 4px;\\n padding-right: 4px;\\n}\\n\\n:host([variant=\\\"text\\\"]) button:hover:not(:disabled) {\\n background: var(--ae-color-subtle);\\n color: var(--ae-color-accent-hover);\\n}\\n\\n:host([variant=\\\"text\\\"]) button:active:not(:disabled) {\\n background: var(--ae-color-subtle-hover);\\n}\\n\\n:host([icon-only]) {\\n display: inline-flex;\\n}\\n\\n:host([icon-only]:not([size])) {\\n font-size: var(--ae-size-m);\\n}\\n\\n:host([icon-only]) button {\\n padding: 0;\\n min-width: auto;\\n width: 2.286em;\\n height: 2.286em;\\n line-height: 1;\\n}\\n\\n:host([icon-only]) ::slotted(ae-icon) {\\n font-size: 1.5em;\\n}\\n\\n:host([active]) button {\\n background: var(--ae-color-solid-active);\\n border-color: var(--ae-color-border-hover);\\n color: var(--ae-color-on-solid-hover, var(--ae-color-on-solid));\\n}\\n\\n.btn-icon {\\n padding: 0;\\n min-width: auto;\\n width: 2.286em;\\n height: 2.286em;\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n border-radius: var(--ae-radius-sm);\\n}\\n\\n.btn-icon.btn-lg {\\n width: 2.857em;\\n height: 2.857em;\\n}\\n\\n.btn-circle {\\n border-radius: var(--ae-radius-circle);\\n}\\n\\n:host([block]) {\\n display: block;\\n}\\n\\nbutton.btn-loading {\\n position: relative;\\n pointer-events: none;\\n color: transparent;\\n}\\n\\nbutton.btn-loading::before {\\n content: '';\\n position: absolute;\\n width: 1em;\\n height: 1em;\\n border: 2px solid currentColor;\\n border-top-color: transparent;\\n border-radius: var(--ae-radius-circle);\\n animation: btn-spin 0.6s linear infinite;\\n color: currentColor;\\n opacity: 0.8;\\n}\\n\\n@keyframes btn-spin {\\n to {\\n transform: rotate(360deg);\\n }\\n}\\n\\n.btn-icon-left {\\n margin-right: -2px;\\n}\\n\\n.btn-icon-right {\\n margin-left: -2px;\\n}\\n\\n\"", "module.exports = \":host {\\n display: inline-flex;\\n align-items: center;\\n justify-content: center;\\n font-size: 20px;\\n width: 1em;\\n height: 1em;\\n color: inherit;\\n flex-shrink: 0;\\n line-height: 0;\\n vertical-align: middle;\\n}\\n\\n:host([color]) {\\n color: var(--ae-color-solid);\\n}\\n\\n.icon-svg {\\n display: block;\\n width: 100%;\\n height: 100%;\\n fill: var(--icon-fill, currentColor);\\n stroke: var(--icon-stroke, none);\\n stroke-width: var(--icon-stroke-width, 2);\\n stroke-linecap: var(--icon-stroke-linecap, round);\\n stroke-linejoin: var(--icon-stroke-linejoin, round);\\n pointer-events: none;\\n overflow: visible;\\n}\\n\"", "export { default, default as IconButton } from './icon-button';\nexport type { IconButtonProps, IconButtonVariant, IconButtonSize } from './icon-button';\n", "import { AeicoElement } from 'aeico';\n\nconst TAG_NAME_PREFIX = 'ae';\n\n/**\n * AeicoComponent is the base class for all built-in Aeico components.\n */\nclass AeicoComponent extends AeicoElement {\n static define(name: string) {\n const prefix = `${TAG_NAME_PREFIX}-`;\n\n const tagName = name.startsWith(prefix) ? name : `${prefix}${name}`;\n\n super.define(tagName);\n }\n}\n\nexport default AeicoComponent;\n", "import type { InferProps, Props } from 'aeico';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type { IconColor } from '../icon/defines';\n// Ensure ae-button and ae-icon are registered\nimport '../button/button';\nimport '../icon/icon';\n\nexport type IconButtonVariant = 'filled' | 'outlined' | 'subtle' | 'text';\nexport type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/**\n * @deprecated Use `<ae-button>` with an `<ae-icon>` slot instead.\n *\n * ```html\n * <ae-button color=\"primary\"><ae-icon name=\"star\"></ae-icon></ae-button>\n * ```\n */\nclass IconButton extends AeicoComponent {\n static props: Props = {\n icon: { type: String },\n size: { type: String },\n color: { type: String },\n variant: { type: String },\n disabled: { type: Boolean },\n };\n\n declare icon?: string;\n declare size?: IconButtonSize;\n declare color?: IconColor;\n declare variant?: IconButtonVariant;\n declare disabled?: boolean;\n\n protected static styles = [':host { display: contents; }'];\n\n protected render() {\n return html(({ aeButton, aeIcon }) => {\n aeButton(\n {\n color: this.color,\n variant: this.variant,\n size: this.size,\n disabled: this.disabled,\n },\n () => {\n aeIcon({ name: this.icon });\n },\n );\n });\n }\n}\n\nIconButton.define('icon-button');\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-icon-button': IconButton;\n }\n}\n\nexport default IconButton;\nexport type IconButtonProps = InferProps<typeof IconButton>;\n", "import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css';\nimport sizeCSS from '../styles/size.css';\nimport colorCSS from '../styles/color.css';\nimport buttonStyle from '../styles/components/button.css';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { ButtonColor, ButtonSize, ButtonVariant } from './defines';\nimport { prop } from 'aeico';\n\n/**\n * Button Component\n *\n * A customizable button component with multiple variants and sizes.\n * Supports theme and internationalization through mixins.\n *\n * @example\n * ```typescript\n * // Using the static create method\n * const button = Button.create({\n * variant: 'primary',\n * size: 'md'\n * })\n * ```\n *\n * @example\n * ```html\n * <!-- Using as Web Component -->\n * <ae-button variant=\"primary\" size=\"md\">Save</ae-button>\n * <ae-button variant=\"danger\" size=\"sm\">Delete</ae-button>\n * <ae-button variant=\"subtle\">Cancel</ae-button>\n * ```\n */\nclass Button extends AeicoComponent {\n protected static styles = [styleVariables, sizeCSS, colorCSS, buttonStyle];\n\n @prop({ type: String })\n color?: ButtonColor;\n\n @prop({ type: String })\n variant?: ButtonVariant;\n\n @prop({ type: String })\n size?: ButtonSize;\n\n @prop({ type: Boolean })\n disabled?: boolean;\n\n @prop({ type: String })\n type?: 'button' | 'submit' | 'reset';\n\n @prop({ type: Boolean })\n active?: boolean;\n\n @prop({ type: Boolean })\n block?: boolean;\n\n private _buttonElement: HTMLButtonElement | null = null;\n private _slotElement: HTMLSlotElement | null = null;\n private _autoAriaLabel = false;\n\n protected onMounted() {\n this._handleSlotChange();\n }\n\n private _handleSlotChange = () => {\n const nodes = this._slotElement?.assignedNodes() ?? [];\n // Icon-only: exactly one element (ae-icon) and no meaningful text nodes\n const elements = nodes.filter((n): n is Element => n.nodeType === Node.ELEMENT_NODE);\n const hasText = nodes.some(\n (n) => n.nodeType === Node.TEXT_NODE && n.textContent!.trim() !== '',\n );\n const isIconOnly =\n !hasText && elements.length === 1 && elements[0].tagName.toLowerCase() === 'ae-icon';\n\n if (isIconOnly) {\n this.setAttribute('icon-only', '');\n if (!this.hasAttribute('aria-label') || this._autoAriaLabel) {\n this.setAttribute('aria-label', elements[0].getAttribute('name') ?? '');\n this._autoAriaLabel = true;\n }\n } else {\n this.removeAttribute('icon-only');\n if (this._autoAriaLabel) {\n this.removeAttribute('aria-label');\n this._autoAriaLabel = false;\n }\n }\n };\n\n protected render() {\n return html(({ button, slot }) => {\n this._buttonElement = button(\n {\n type: this.type || 'button',\n disabled: this.disabled,\n part: 'button',\n 'aria-pressed': this.active,\n 'aria-disabled': this.disabled,\n },\n () => {\n this._slotElement = slot({ '@slotchange': this._handleSlotChange });\n },\n );\n });\n }\n\n /**\n * Programmatically click the button\n */\n click() {\n if (!this.disabled && this._buttonElement) {\n this._buttonElement.click();\n }\n }\n\n /**\n * Focus the button\n */\n focus() {\n if (this._buttonElement) {\n this._buttonElement.focus();\n }\n }\n\n /**\n * Blur the button\n */\n blur() {\n if (this._buttonElement) {\n this._buttonElement.blur();\n }\n }\n}\n\nButton.define('button');\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-button': Button;\n }\n}\n\nexport default Button;\nexport type ButtonProps = InferProps<typeof Button>;\n", "export const SVG_NS = 'http://www.w3.org/2000/svg';\n\nexport function toKebab(str: string): string {\n const cleaned = str.replace(/^[_\\d]+/, '');\n\n return cleaned.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n}\n", "import type { InferProps, Props } from 'aeico';\nimport { SVG_NS } from '../utils';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport styleVariables from '../styles/variables.css';\nimport sizeCSS from '../styles/size.css';\nimport colorCSS from '../styles/color.css';\nimport style from '../styles/components/icon.css';\nimport type { IconSize, IconColor } from './defines';\nimport { defaultViewBox } from './defines';\nimport IconRegistry from './registry';\nimport './built-in-icons';\n\nclass Icon extends AeicoComponent {\n static props: Props = {\n name: { type: String },\n size: { type: String },\n color: { type: String },\n stroke: { type: Boolean },\n strokeWidth: { type: Number },\n };\n\n declare name?: string;\n declare size?: IconSize;\n declare color?: IconColor;\n declare stroke?: boolean;\n declare strokeWidth?: number;\n\n protected static styles = [styleVariables, sizeCSS, colorCSS, style];\n\n protected render() {\n const def = this.name ? IconRegistry.get(this.name) : undefined;\n\n // Numeric size: set font-size directly (string sizes are handled by size.css)\n const numericSize = Number(this.size);\n if (this.size !== undefined && !isNaN(numericSize) && numericSize > 0) {\n this.style.setProperty('font-size', `${numericSize}px`);\n } else {\n this.style.removeProperty('font-size');\n }\n\n if (!def) return;\n\n const { paths } = def;\n const isMultiPath = Array.isArray(paths);\n\n // Stroke CSS variables only apply in single-path mode (component props)\n if (!isMultiPath) {\n const useStroke =\n this.stroke ?? (this.strokeWidth !== undefined ? true : (def.stroke ?? false));\n const useStrokeWidth = this.strokeWidth ?? def.strokeWidth ?? 2;\n\n if (useStroke) {\n this.style.setProperty('--icon-fill', 'none');\n this.style.setProperty('--icon-stroke', 'currentColor');\n this.style.setProperty('--icon-stroke-width', String(useStrokeWidth));\n } else {\n this.style.removeProperty('--icon-fill');\n this.style.removeProperty('--icon-stroke');\n this.style.removeProperty('--icon-stroke-width');\n }\n } else {\n this.style.removeProperty('--icon-fill');\n this.style.removeProperty('--icon-stroke');\n this.style.removeProperty('--icon-stroke-width');\n }\n\n return html(({ svg, path }) => {\n svg(\n {\n className: 'icon-svg',\n viewBox: def.viewBox ?? defaultViewBox,\n 'aria-hidden': 'true',\n xmlns: SVG_NS,\n },\n () => {\n if (typeof paths === 'string') {\n path({ d: paths });\n } else {\n for (const p of paths) {\n const attrs: Record<string, unknown> = { d: p.d };\n if (p.fill) attrs.style = { fill: p.fill };\n path(attrs);\n }\n }\n },\n );\n });\n }\n}\n\nIcon.define('icon');\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ae-icon': Icon;\n }\n}\n\nexport default Icon;\nexport type IconProps = InferProps<typeof Icon>;\n", "export type IconSize = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;\n\nexport type IconColor =\n | 'default'\n | 'primary'\n | 'secondary'\n | 'success'\n | 'danger'\n | 'warning'\n | 'info';\n\nexport interface IconPathDef {\n d: string;\n fill?: string;\n stroke?: boolean;\n strokeWidth?: number;\n}\n\nexport interface IconDefinition {\n paths: string | IconPathDef[];\n viewBox?: string;\n stroke?: boolean;\n strokeWidth?: number;\n}\n\nexport const defaultViewBox = '0 0 24 24';\n\nexport type IconRegistryData = Record<string, string | IconDefinition>;\n", "import { IconDefinition, IconRegistryData, defaultViewBox } from './defines';\n\nclass IconRegistry {\n private static _icons: Map<string, IconDefinition> = new Map();\n /** Names registered via addBuiltIn - can be overridden by user add() calls */\n private static _builtInKeys: Set<string> = new Set();\n\n /** Register user icons. Always takes priority over built-in icons. */\n static add(icons: IconRegistryData) {\n for (const [name, data] of Object.entries(icons)) {\n if (typeof data === 'string') {\n this._icons.set(name, { paths: data, viewBox: defaultViewBox });\n } else {\n this._icons.set(name, data);\n }\n // Mark as user-defined (removes built-in status)\n this._builtInKeys.delete(name);\n }\n }\n\n /**\n * Register built-in icons provided by the library.\n * A built-in icon will NOT overwrite an icon already registered by the user.\n */\n static addBuiltIn(icons: IconRegistryData) {\n for (const [name, data] of Object.entries(icons)) {\n // Skip if the user has already registered this icon\n if (this._icons.has(name) && !this._builtInKeys.has(name)) continue;\n if (typeof data === 'string') {\n this._icons.set(name, { paths: data, viewBox: defaultViewBox });\n } else {\n this._icons.set(name, data);\n }\n this._builtInKeys.add(name);\n }\n }\n\n static get(name: string): IconDefinition | undefined {\n return this._icons.get(name);\n }\n\n static has(name: string): boolean {\n return this._icons.has(name);\n }\n}\n\nexport default IconRegistry;\n", "/**\n * Built-in system icons used internally by aeico components.\n * These are pre-registered so components work out of the box.\n * Users can override any of them by calling IconRegistry.add({ 'name': '...' }).\n *\n * All paths use the Material Design 24\u00D724 viewBox.\n */\nimport IconRegistry from './registry';\n\nIconRegistry.addBuiltIn({\n copy: 'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z',\n check: 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z',\n 'chevron-left': 'M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z',\n 'chevron-right': 'M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z',\n 'chevron-up': 'M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z',\n 'chevron-down': 'M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z',\n 'chevrons-left': 'M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z',\n 'chevrons-right': 'M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z',\n close:\n 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',\n});\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,4FAAAA,UAAAC,SAAA;AAAA,IAAAA,QAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAjB;AAAA,uFAAAC,UAAAC,SAAA;AAAA,IAAAA,QAAO,UAAU;AAAA;AAAA;;;ACAjB;AAAA,wFAAAC,UAAAC,SAAA;AAAA,IAAAA,QAAO,UAAU;AAAA;AAAA;;;ACAjB;AAAA,oGAAAC,UAAAC,SAAA;AAAA,IAAAA,QAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAjB;AAAA,kGAAAC,UAAAC,SAAA;AAAA,IAAAA,QAAO,UAAU;AAAA;AAAA;;;ACAjB;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA6B;AAE7B,IAAM,kBAAkB;AAKxB,IAAM,iBAAN,cAA6B,0BAAa;AAAA,EACxC,OAAO,OAAO,MAAc;AAC1B,UAAM,SAAS,GAAG,eAAe;AAEjC,UAAM,UAAU,KAAK,WAAW,MAAM,IAAI,OAAO,GAAG,MAAM,GAAG,IAAI;AAEjE,UAAM,OAAO,OAAO;AAAA,EACtB;AACF;AAEA,IAAO,0BAAQ;;;ACff,IAAAC,gBAAqB;;;ACDrB,uBAA2B;AAC3B,kBAAoB;AACpB,mBAAqB;AACrB,oBAAwB;AAExB,IAAAC,gBAAqB;AAErB,IAAAA,gBAAqB;AARrB;AAiCA,IAAM,SAAN,eAAqB,8BAGnB,kBAAC,oBAAK,EAAE,MAAM,OAAO,CAAC,IAGtB,oBAAC,oBAAK,EAAE,MAAM,OAAO,CAAC,IAGtB,iBAAC,oBAAK,EAAE,MAAM,OAAO,CAAC,IAGtB,qBAAC,oBAAK,EAAE,MAAM,QAAQ,CAAC,IAGvB,iBAAC,oBAAK,EAAE,MAAM,OAAO,CAAC,IAGtB,mBAAC,oBAAK,EAAE,MAAM,QAAQ,CAAC,IAGvB,kBAAC,oBAAK,EAAE,MAAM,QAAQ,CAAC,IArBJ,IAAe;AAAA,EAApC;AAAA;AAIE;AAGA;AAGA;AAGA;AAGA;AAGA;AAGA;AAEA,wBAAQ,kBAA2C;AACnD,wBAAQ,gBAAuC;AAC/C,wBAAQ,kBAAiB;AAMzB,wBAAQ,qBAAoB,MAAM;AAChC,YAAM,QAAQ,KAAK,cAAc,cAAc,KAAK,CAAC;AAErD,YAAM,WAAW,MAAM,OAAO,CAAC,MAAoB,EAAE,aAAa,KAAK,YAAY;AACnF,YAAM,UAAU,MAAM;AAAA,QACpB,CAAC,MAAM,EAAE,aAAa,KAAK,aAAa,EAAE,YAAa,KAAK,MAAM;AAAA,MACpE;AACA,YAAM,aACJ,CAAC,WAAW,SAAS,WAAW,KAAK,SAAS,CAAC,EAAE,QAAQ,YAAY,MAAM;AAE7E,UAAI,YAAY;AACd,aAAK,aAAa,aAAa,EAAE;AACjC,YAAI,CAAC,KAAK,aAAa,YAAY,KAAK,KAAK,gBAAgB;AAC3D,eAAK,aAAa,cAAc,SAAS,CAAC,EAAE,aAAa,MAAM,KAAK,EAAE;AACtE,eAAK,iBAAiB;AAAA,QACxB;AAAA,MACF,OAAO;AACL,aAAK,gBAAgB,WAAW;AAChC,YAAI,KAAK,gBAAgB;AACvB,eAAK,gBAAgB,YAAY;AACjC,eAAK,iBAAiB;AAAA,QACxB;AAAA,MACF;AAAA,IACF;AAAA;AAAA,EA3BU,YAAY;AACpB,SAAK,kBAAkB;AAAA,EACzB;AAAA,EA2BU,SAAS;AACjB,eAAO,oBAAK,CAAC,EAAE,QAAQ,KAAK,MAAM;AAChC,WAAK,iBAAiB;AAAA,QACpB;AAAA,UACE,MAAM,KAAK,QAAQ;AAAA,UACnB,UAAU,KAAK;AAAA,UACf,MAAM;AAAA,UACN,gBAAgB,KAAK;AAAA,UACrB,iBAAiB,KAAK;AAAA,QACxB;AAAA,QACA,MAAM;AACJ,eAAK,eAAe,KAAK,EAAE,eAAe,KAAK,kBAAkB,CAAC;AAAA,QACpE;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ;AACN,QAAI,CAAC,KAAK,YAAY,KAAK,gBAAgB;AACzC,WAAK,eAAe,MAAM;AAAA,IAC5B;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ;AACN,QAAI,KAAK,gBAAgB;AACvB,WAAK,eAAe,MAAM;AAAA,IAC5B;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO;AACL,QAAI,KAAK,gBAAgB;AACvB,WAAK,eAAe,KAAK;AAAA,IAC3B;AAAA,EACF;AACF;AApGA;AAIE,qCADA,YAHI;AAOJ,uCADA,cANI;AAUJ,oCADA,WATI;AAaJ,wCADA,eAZI;AAgBJ,oCADA,WAfI;AAmBJ,sCADA,aAlBI;AAsBJ,qCADA,YArBI;AAAN,2BAAM;AACJ,cADI,QACa,UAAS,CAAC,iBAAAC,SAAgB,YAAAC,SAAS,aAAAC,SAAU,cAAAC,OAAW;AAqG3E,OAAO,OAAO,QAAQ;;;ACvIf,IAAM,SAAS;;;ACGtB,IAAAC,gBAAqB;AACrB,IAAAC,oBAA2B;AAC3B,IAAAC,eAAoB;AACpB,IAAAC,gBAAqB;AACrB,kBAAkB;;;ACkBX,IAAM,iBAAiB;;;ACvB9B,IAAM,eAAN,MAAmB;AAAA,EACjB,OAAe,SAAsC,oBAAI,IAAI;AAAA;AAAA,EAE7D,OAAe,eAA4B,oBAAI,IAAI;AAAA;AAAA,EAGnD,OAAO,IAAI,OAAyB;AAClC,eAAW,CAAC,MAAM,IAAI,KAAK,OAAO,QAAQ,KAAK,GAAG;AAChD,UAAI,OAAO,SAAS,UAAU;AAC5B,aAAK,OAAO,IAAI,MAAM,EAAE,OAAO,MAAM,SAAS,eAAe,CAAC;AAAA,MAChE,OAAO;AACL,aAAK,OAAO,IAAI,MAAM,IAAI;AAAA,MAC5B;AAEA,WAAK,aAAa,OAAO,IAAI;AAAA,IAC/B;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO,WAAW,OAAyB;AACzC,eAAW,CAAC,MAAM,IAAI,KAAK,OAAO,QAAQ,KAAK,GAAG;AAEhD,UAAI,KAAK,OAAO,IAAI,IAAI,KAAK,CAAC,KAAK,aAAa,IAAI,IAAI,EAAG;AAC3D,UAAI,OAAO,SAAS,UAAU;AAC5B,aAAK,OAAO,IAAI,MAAM,EAAE,OAAO,MAAM,SAAS,eAAe,CAAC;AAAA,MAChE,OAAO;AACL,aAAK,OAAO,IAAI,MAAM,IAAI;AAAA,MAC5B;AACA,WAAK,aAAa,IAAI,IAAI;AAAA,IAC5B;AAAA,EACF;AAAA,EAEA,OAAO,IAAI,MAA0C;AACnD,WAAO,KAAK,OAAO,IAAI,IAAI;AAAA,EAC7B;AAAA,EAEA,OAAO,IAAI,MAAuB;AAChC,WAAO,KAAK,OAAO,IAAI,IAAI;AAAA,EAC7B;AACF;AAEA,IAAO,mBAAQ;;;ACrCf,iBAAa,WAAW;AAAA,EACtB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,OACE;AACJ,CAAC;;;AHPD,IAAM,OAAN,cAAmB,wBAAe;AAAA,EAChC,OAAO,QAAe;AAAA,IACpB,MAAM,EAAE,MAAM,OAAO;AAAA,IACrB,MAAM,EAAE,MAAM,OAAO;AAAA,IACrB,OAAO,EAAE,MAAM,OAAO;AAAA,IACtB,QAAQ,EAAE,MAAM,QAAQ;AAAA,IACxB,aAAa,EAAE,MAAM,OAAO;AAAA,EAC9B;AAAA,EAQA,OAAiB,SAAS,CAAC,kBAAAC,SAAgB,aAAAC,SAAS,cAAAC,SAAU,YAAAC,OAAK;AAAA,EAEzD,SAAS;AACjB,UAAM,MAAM,KAAK,OAAO,iBAAa,IAAI,KAAK,IAAI,IAAI;AAGtD,UAAM,cAAc,OAAO,KAAK,IAAI;AACpC,QAAI,KAAK,SAAS,UAAa,CAAC,MAAM,WAAW,KAAK,cAAc,GAAG;AACrE,WAAK,MAAM,YAAY,aAAa,GAAG,WAAW,IAAI;AAAA,IACxD,OAAO;AACL,WAAK,MAAM,eAAe,WAAW;AAAA,IACvC;AAEA,QAAI,CAAC,IAAK;AAEV,UAAM,EAAE,MAAM,IAAI;AAClB,UAAM,cAAc,MAAM,QAAQ,KAAK;AAGvC,QAAI,CAAC,aAAa;AAChB,YAAM,YACJ,KAAK,WAAW,KAAK,gBAAgB,SAAY,OAAQ,IAAI,UAAU;AACzE,YAAM,iBAAiB,KAAK,eAAe,IAAI,eAAe;AAE9D,UAAI,WAAW;AACb,aAAK,MAAM,YAAY,eAAe,MAAM;AAC5C,aAAK,MAAM,YAAY,iBAAiB,cAAc;AACtD,aAAK,MAAM,YAAY,uBAAuB,OAAO,cAAc,CAAC;AAAA,MACtE,OAAO;AACL,aAAK,MAAM,eAAe,aAAa;AACvC,aAAK,MAAM,eAAe,eAAe;AACzC,aAAK,MAAM,eAAe,qBAAqB;AAAA,MACjD;AAAA,IACF,OAAO;AACL,WAAK,MAAM,eAAe,aAAa;AACvC,WAAK,MAAM,eAAe,eAAe;AACzC,WAAK,MAAM,eAAe,qBAAqB;AAAA,IACjD;AAEA,eAAO,oBAAK,CAAC,EAAE,KAAK,KAAK,MAAM;AAC7B;AAAA,QACE;AAAA,UACE,WAAW;AAAA,UACX,SAAS,IAAI,WAAW;AAAA,UACxB,eAAe;AAAA,UACf,OAAO;AAAA,QACT;AAAA,QACA,MAAM;AACJ,cAAI,OAAO,UAAU,UAAU;AAC7B,iBAAK,EAAE,GAAG,MAAM,CAAC;AAAA,UACnB,OAAO;AACL,uBAAW,KAAK,OAAO;AACrB,oBAAM,QAAiC,EAAE,GAAG,EAAE,EAAE;AAChD,kBAAI,EAAE,KAAM,OAAM,QAAQ,EAAE,MAAM,EAAE,KAAK;AACzC,mBAAK,KAAK;AAAA,YACZ;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAEA,KAAK,OAAO,MAAM;;;AHzElB,IAAM,aAAN,cAAyB,wBAAe;AAAA,EACtC,OAAO,QAAe;AAAA,IACpB,MAAM,EAAE,MAAM,OAAO;AAAA,IACrB,MAAM,EAAE,MAAM,OAAO;AAAA,IACrB,OAAO,EAAE,MAAM,OAAO;AAAA,IACtB,SAAS,EAAE,MAAM,OAAO;AAAA,IACxB,UAAU,EAAE,MAAM,QAAQ;AAAA,EAC5B;AAAA,EAQA,OAAiB,SAAS,CAAC,8BAA8B;AAAA,EAE/C,SAAS;AACjB,eAAO,oBAAK,CAAC,EAAE,UAAU,OAAO,MAAM;AACpC;AAAA,QACE;AAAA,UACE,OAAO,KAAK;AAAA,UACZ,SAAS,KAAK;AAAA,UACd,MAAM,KAAK;AAAA,UACX,UAAU,KAAK;AAAA,QACjB;AAAA,QACA,MAAM;AACJ,iBAAO,EAAE,MAAM,KAAK,KAAK,CAAC;AAAA,QAC5B;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAEA,WAAW,OAAO,aAAa;AAQ/B,IAAO,sBAAQ;",
|
|
6
6
|
"names": ["exports", "module", "exports", "module", "exports", "module", "exports", "module", "exports", "module", "import_aeico", "import_aeico", "styleVariables", "sizeCSS", "colorCSS", "buttonStyle", "import_aeico", "import_variables", "import_size", "import_color", "styleVariables", "sizeCSS", "colorCSS", "style"]
|
|
7
7
|
}
|
package/dist/icon-button.js
CHANGED
|
@@ -49,20 +49,12 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
|
|
|
49
49
|
|
|
50
50
|
// src/aeico-component.ts
|
|
51
51
|
import { AeicoElement } from "aeico";
|
|
52
|
-
|
|
53
|
-
// src/utils.ts
|
|
54
|
-
var SVG_NS = "http://www.w3.org/2000/svg";
|
|
55
|
-
function toKebab(str) {
|
|
56
|
-
const cleaned = str.replace(/^[_\d]+/, "");
|
|
57
|
-
return cleaned.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
// src/aeico-component.ts
|
|
61
52
|
var TAG_NAME_PREFIX = "ae";
|
|
62
53
|
var AeicoComponent = class extends AeicoElement {
|
|
63
|
-
static
|
|
64
|
-
const
|
|
65
|
-
|
|
54
|
+
static define(name) {
|
|
55
|
+
const prefix = `${TAG_NAME_PREFIX}-`;
|
|
56
|
+
const tagName = name.startsWith(prefix) ? name : `${prefix}${name}`;
|
|
57
|
+
super.define(tagName);
|
|
66
58
|
}
|
|
67
59
|
};
|
|
68
60
|
var aeico_component_default = AeicoComponent;
|
|
@@ -147,7 +139,7 @@ var variables_default = `:root,
|
|
|
147
139
|
--ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);
|
|
148
140
|
--ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);
|
|
149
141
|
|
|
150
|
-
/* Gray (neutral
|
|
142
|
+
/* Gray (neutral - base #6e6e6e) */
|
|
151
143
|
--ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);
|
|
152
144
|
--ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);
|
|
153
145
|
--ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);
|
|
@@ -158,7 +150,7 @@ var variables_default = `:root,
|
|
|
158
150
|
--ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);
|
|
159
151
|
--ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);
|
|
160
152
|
|
|
161
|
-
/* Slate (blue-gray
|
|
153
|
+
/* Slate (blue-gray - base #64748b, used for 'secondary') */
|
|
162
154
|
--ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);
|
|
163
155
|
--ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);
|
|
164
156
|
--ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);
|
|
@@ -194,7 +186,7 @@ var variables_default = `:root,
|
|
|
194
186
|
|
|
195
187
|
:root,
|
|
196
188
|
:host {
|
|
197
|
-
/* Hover / active mix (light default
|
|
189
|
+
/* Hover / active mix (light default - overridden in \xA7 6 dark) */
|
|
198
190
|
--ae-color-mix-hover: black 10%;
|
|
199
191
|
--ae-color-mix-active: black 20%;
|
|
200
192
|
|
|
@@ -228,7 +220,7 @@ var variables_default = `:root,
|
|
|
228
220
|
--ae-color-info-active: color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));
|
|
229
221
|
--ae-color-info-disabled: color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));
|
|
230
222
|
|
|
231
|
-
/* Secondary (Slate)
|
|
223
|
+
/* Secondary (Slate) - base differs per theme, overridden in \xA7 6 dark */
|
|
232
224
|
--ae-color-secondary: var(--ae-slate-500);
|
|
233
225
|
--ae-color-secondary-hover: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));
|
|
234
226
|
--ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));
|
|
@@ -244,7 +236,7 @@ var variables_default = `:root,
|
|
|
244
236
|
:host {
|
|
245
237
|
color-scheme: light;
|
|
246
238
|
|
|
247
|
-
/* Gray UI aliases
|
|
239
|
+
/* Gray UI aliases - lighter palette steps for elements on white background */
|
|
248
240
|
--ae-color-gray-dark: var(--ae-gray-400);
|
|
249
241
|
--ae-color-gray: var(--ae-gray-300);
|
|
250
242
|
--ae-color-gray-light: var(--ae-gray-200);
|
|
@@ -276,7 +268,7 @@ var variables_default = `:root,
|
|
|
276
268
|
--ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.30);
|
|
277
269
|
--ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);
|
|
278
270
|
|
|
279
|
-
/* Subtle intent tokens
|
|
271
|
+
/* Subtle intent tokens - light context */
|
|
280
272
|
--ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.08);
|
|
281
273
|
--ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.40);
|
|
282
274
|
--ae-color-primary-text-emphasis: var(--ae-blue-700);
|
|
@@ -307,7 +299,7 @@ var variables_default = `:root,
|
|
|
307
299
|
--ae-color-dark-bg-subtle: var(--ae-dark-100); /* opaque on white: ~#d6d8d9 */
|
|
308
300
|
--ae-color-dark-border-subtle: var(--ae-dark-300); /* opaque on white: ~#85898c */
|
|
309
301
|
|
|
310
|
-
/* Component tokens
|
|
302
|
+
/* Component tokens - light defaults */
|
|
311
303
|
--ae-action-btn-bg: var(--ae-gray-200);
|
|
312
304
|
--ae-action-btn-bg-hover: var(--ae-color-primary);
|
|
313
305
|
--ae-action-btn-color: var(--ae-gray-600);
|
|
@@ -342,14 +334,12 @@ var variables_default = `:root,
|
|
|
342
334
|
--ae-size-3xs: round(calc(var(--ae-size-2xs) / 1.125), 1px); /* 10px */
|
|
343
335
|
}
|
|
344
336
|
|
|
345
|
-
/* Border-radius tokens
|
|
337
|
+
/* Border-radius tokens - shared across all components */
|
|
346
338
|
:root,
|
|
347
339
|
:host {
|
|
348
340
|
/**
|
|
349
341
|
* Unified border-radius hook for all components.
|
|
350
342
|
*
|
|
351
|
-
* Not set by default \u2014 each component falls back to its own --ae-radius-*
|
|
352
|
-
* token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).
|
|
353
343
|
*
|
|
354
344
|
* Usage:
|
|
355
345
|
* :root { --ae-border-radius: 0; } // global: all components square
|
|
@@ -371,7 +361,7 @@ var variables_default = `:root,
|
|
|
371
361
|
--ae-radius-circle: 50%;
|
|
372
362
|
}
|
|
373
363
|
|
|
374
|
-
/* Layout tokens
|
|
364
|
+
/* Layout tokens - defined on :root so all light DOM elements can use them */
|
|
375
365
|
:root,
|
|
376
366
|
:host {
|
|
377
367
|
--container-max-width: 1280px;
|
|
@@ -384,18 +374,18 @@ var variables_default = `:root,
|
|
|
384
374
|
:host-context([theme="dark"]) {
|
|
385
375
|
color-scheme: dark;
|
|
386
376
|
|
|
387
|
-
/* Hover / active
|
|
377
|
+
/* Hover / active - slightly gentler on dark backgrounds */
|
|
388
378
|
--ae-color-mix-hover: black 8%;
|
|
389
379
|
--ae-color-mix-active: black 16%;
|
|
390
380
|
|
|
391
|
-
/* Gray UI aliases
|
|
381
|
+
/* Gray UI aliases - darker palette steps for elements on dark background */
|
|
392
382
|
--ae-color-gray-dark: var(--ae-gray-800);
|
|
393
383
|
--ae-color-gray: var(--ae-gray-700);
|
|
394
384
|
--ae-color-gray-light: var(--ae-gray-600);
|
|
395
385
|
--ae-color-gray-lighter: var(--ae-gray-500);
|
|
396
386
|
--ae-color-gray-lightest: var(--ae-gray-400);
|
|
397
387
|
|
|
398
|
-
/* Secondary
|
|
388
|
+
/* Secondary - deeper base on dark background */
|
|
399
389
|
--ae-color-secondary: var(--ae-slate-700);
|
|
400
390
|
--ae-color-secondary-text: var(--ae-slate-300);
|
|
401
391
|
|
|
@@ -424,7 +414,7 @@ var variables_default = `:root,
|
|
|
424
414
|
--ae-focus-ring: rgb(from var(--ae-blue) r g b / 0.25);
|
|
425
415
|
--ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);
|
|
426
416
|
|
|
427
|
-
/* Subtle intent tokens
|
|
417
|
+
/* Subtle intent tokens - dark context (more alpha, lighter text-emphasis) */
|
|
428
418
|
--ae-color-primary-bg-subtle: rgb(from var(--ae-blue) r g b / 0.10);
|
|
429
419
|
--ae-color-primary-border-subtle: rgb(from var(--ae-blue) r g b / 0.30);
|
|
430
420
|
--ae-color-primary-text-emphasis: var(--ae-blue-300);
|
|
@@ -455,7 +445,7 @@ var variables_default = `:root,
|
|
|
455
445
|
--ae-color-dark-bg-subtle: rgb(from var(--ae-dark) r g b / 0.30);
|
|
456
446
|
--ae-color-dark-border-subtle: rgb(from var(--ae-dark) r g b / 0.50);
|
|
457
447
|
|
|
458
|
-
/* Component tokens
|
|
448
|
+
/* Component tokens - dark overrides */
|
|
459
449
|
--ae-action-btn-bg: var(--ae-color-gray);
|
|
460
450
|
--ae-action-btn-bg-hover: color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));
|
|
461
451
|
--ae-action-btn-color: var(--ae-gray-400);
|
|
@@ -590,7 +580,6 @@ button:disabled {
|
|
|
590
580
|
background: var(--ae-color-subtle-hover);
|
|
591
581
|
}
|
|
592
582
|
|
|
593
|
-
/* Icon-only: single ae-icon child \u2192 square compact layout */
|
|
594
583
|
:host([icon-only]) {
|
|
595
584
|
display: inline-flex;
|
|
596
585
|
}
|
|
@@ -769,7 +758,10 @@ __decorateElement(_init, 5, "active", _active_dec, Button);
|
|
|
769
758
|
__decorateElement(_init, 5, "block", _block_dec, Button);
|
|
770
759
|
__decoratorMetadata(_init, Button);
|
|
771
760
|
__publicField(Button, "styles", [variables_default, size_default, color_default, button_default]);
|
|
772
|
-
Button.
|
|
761
|
+
Button.define("button");
|
|
762
|
+
|
|
763
|
+
// src/utils.ts
|
|
764
|
+
var SVG_NS = "http://www.w3.org/2000/svg";
|
|
773
765
|
|
|
774
766
|
// src/icon/icon.ts
|
|
775
767
|
import { html as html2 } from "aeico";
|
|
@@ -783,7 +775,7 @@ var defaultViewBox = "0 0 24 24";
|
|
|
783
775
|
// src/icon/registry.ts
|
|
784
776
|
var IconRegistry = class {
|
|
785
777
|
static _icons = /* @__PURE__ */ new Map();
|
|
786
|
-
/** Names registered via addBuiltIn
|
|
778
|
+
/** Names registered via addBuiltIn - can be overridden by user add() calls */
|
|
787
779
|
static _builtInKeys = /* @__PURE__ */ new Set();
|
|
788
780
|
/** Register user icons. Always takes priority over built-in icons. */
|
|
789
781
|
static add(icons) {
|
|
@@ -835,7 +827,6 @@ registry_default.addBuiltIn({
|
|
|
835
827
|
|
|
836
828
|
// src/icon/icon.ts
|
|
837
829
|
var Icon = class extends aeico_component_default {
|
|
838
|
-
static tagName = "icon";
|
|
839
830
|
static props = {
|
|
840
831
|
name: { type: String },
|
|
841
832
|
size: { type: String },
|
|
@@ -895,11 +886,10 @@ var Icon = class extends aeico_component_default {
|
|
|
895
886
|
});
|
|
896
887
|
}
|
|
897
888
|
};
|
|
898
|
-
Icon.
|
|
889
|
+
Icon.define("icon");
|
|
899
890
|
|
|
900
891
|
// src/icon-button/icon-button.ts
|
|
901
892
|
var IconButton = class extends aeico_component_default {
|
|
902
|
-
static tagName = "icon-button";
|
|
903
893
|
static props = {
|
|
904
894
|
icon: { type: String },
|
|
905
895
|
size: { type: String },
|
|
@@ -924,7 +914,7 @@ var IconButton = class extends aeico_component_default {
|
|
|
924
914
|
});
|
|
925
915
|
}
|
|
926
916
|
};
|
|
927
|
-
IconButton.
|
|
917
|
+
IconButton.define("icon-button");
|
|
928
918
|
var icon_button_default = IconButton;
|
|
929
919
|
export {
|
|
930
920
|
icon_button_default as IconButton,
|