aeico-components 0.1.6 → 0.1.8

package/dist/button-group.cjs.map

@@ -1 +1,7 @@
-{"version":3,"file":"button-group.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
+{
+  "version": 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/components/button-group.css", "../src/button-group/index.ts", "../src/button-group/button-group.ts", "../src/aeico-component.ts", "../src/utils.ts"],
+  "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 {\\n  display: inline-flex;\\n  align-items: stretch;\\n  gap: 8px;\\n}\\n\\n:host([block]) {\\n  display: flex;\\n  width: 100%;\\n}\\n\\n:host([block]) ::slotted(ae-button) {\\n  flex: 1;\\n}\\n\\n:host([compact]) {\\n  gap: 0;\\n  /* Reset --ae-border-radius so individual --_btn-r-* corners take effect */\\n  --ae-border-radius: initial;\\n}\\n\\n/* Raise hovered/focused button so its border shows above neighbours */\\n:host([compact]) ::slotted(ae-button:hover),\\n:host([compact]) ::slotted(ae-button:focus-within) {\\n  position: relative;\\n  z-index: 1;\\n}\\n\"", "export { default, default as ButtonGroup } from './button-group';\nexport type { ButtonGroupProps } from './button-group';\n", "\uFEFFimport type { InferProps, Props } from 'aeico';\nimport styleVariables from '../styles/variables.css';\nimport buttonGroupStyle from '../styles/components/button-group.css';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type { ButtonColor, ButtonVariant, ButtonSize } from '../button';\nimport Button from '../button/button';\nimport DropdownButton from '../dropdown/dropdown-button';\n\n/**\n * ButtonGroup Component\n *\n * Groups multiple `ae-button` elements, propagating shared `variant`, `color`,\n * `size`, and `disabled` props to each child. Supports a `compact` mode that\n * joins buttons into a seamless connected strip (like Bootstrap's button group).\n *\n * @example\n * ```html\n * <!-- Loose group (gap between buttons) -->\n * <ae-button-group variant=\"outlined\" color=\"primary\">\n *   <ae-button>One</ae-button>\n *   <ae-button>Two</ae-button>\n *   <ae-button>Three</ae-button>\n * </ae-button-group>\n *\n * <!-- Compact \u2014 joined strip -->\n * <ae-button-group compact color=\"primary\">\n *   <ae-button>Left</ae-button>\n *   <ae-button>Middle</ae-button>\n *   <ae-button>Right</ae-button>\n * </ae-button-group>\n *\n * <!-- Full-width -->\n * <ae-button-group block color=\"danger\" variant=\"outlined\">\n *   <ae-button>Delete</ae-button>\n *   <ae-button>Archive</ae-button>\n * </ae-button-group>\n * ```\n */\nclass ButtonGroup extends AeicoComponent {\n  static props: Props = {\n    variant: { type: String },\n    color: { type: String },\n    size: { type: String },\n    compact: { type: Boolean },\n    block: { type: Boolean },\n    disabled: { type: Boolean },\n  };\n\n  protected static styles = [styleVariables, buttonGroupStyle];\n\n  declare variant?: ButtonVariant;\n  declare color?: ButtonColor;\n  declare size?: ButtonSize;\n  declare compact?: boolean;\n  declare block?: boolean;\n  declare disabled?: boolean;\n\n  private slotEl: HTMLSlotElement | null = null;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (this.variant === undefined) this.variant = 'filled';\n    if (this.color === undefined) this.color = 'default';\n    if (this.size === undefined) this.size = 'md';\n  }\n\n  protected render() {\n    return html(({ slot }) => {\n      this.slotEl = slot({\n        '@slotchange': () => this._syncChildren(),\n      });\n      this._syncChildren();\n    });\n  }\n\n  private _getButtons(): Array<Button | DropdownButton> {\n    if (!this.slotEl) return [];\n\n    return (\n      this.slotEl.assignedElements({ flatten: true }) as Array<Button | DropdownButton>\n    ).filter((el) => {\n      const tag = el.tagName.toLowerCase();\n      return tag === 'ae-button' || tag === 'ae-dropdown-button';\n    });\n  }\n\n  private _syncChildren() {\n    const buttons = this._getButtons();\n    const isSmall = this.size === 'xs' || this.size === 'sm';\n    const r = isSmall ? 'var(--ae-radius-xs)' : 'var(--ae-radius-sm)';\n\n    buttons.forEach((btn: Button | DropdownButton, i) => {\n      btn.variant = this.variant;\n      btn.color = this.color;\n      btn.size = this.size;\n\n      if (this.disabled) {\n        btn.disabled = true;\n      } else {\n        btn.disabled = false;\n      }\n\n      if (this.compact) {\n        const isFirst = i === 0;\n        const isLast = i === buttons.length - 1;\n\n        btn.style.marginLeft = isFirst ? '' : '-1px';\n\n        btn.style.setProperty('--_btn-r-tl', isFirst ? r : '0');\n        btn.style.setProperty('--_btn-r-bl', isFirst ? r : '0');\n        btn.style.setProperty('--_btn-r-tr', isLast ? r : '0');\n        btn.style.setProperty('--_btn-r-br', isLast ? r : '0');\n      } else {\n        btn.style.marginLeft = '';\n        this._clearRadius(btn);\n      }\n    });\n  }\n\n  private _clearRadius(btn: HTMLElement) {\n    btn.style.removeProperty('--_btn-r-tl');\n    btn.style.removeProperty('--_btn-r-tr');\n    btn.style.removeProperty('--_btn-r-br');\n    btn.style.removeProperty('--_btn-r-bl');\n  }\n}\n\nButtonGroup.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-button-group': ButtonGroup;\n  }\n}\n\nexport default ButtonGroup;\nexport type ButtonGroupProps = InferProps<typeof ButtonGroup>;\n", "\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"],
+  "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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",
+  "names": ["exports", "module", "exports", "module", "import_aeico", "styleVariables", "buttonGroupStyle"]
+}

package/dist/button-group.js

@@ -1,6 +1,492 @@
-import { B, B as B2 } from "./chunks/button-group.js";
+// css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/variables.css
+var variables_default = `:root,
+:host {
+  --ae-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
+    "Noto Sans", "Liberation Sans", Arial, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+  font-family: var(--ae-font-sans-serif);
+  --ae-blue:   #0e639c;
+  --ae-green:  #28a745;
+  --ae-red:    #dc3545;
+  --ae-yellow: #ffc107;
+  --ae-cyan:   #17a2b8;
+  --ae-gray:   #6e6e6e;
+  --ae-slate:  #64748b;
+  --ae-dark:   #343a40;
+  --ae-light:  #f8f9fa;
+}
+
+:root,
+:host {
+  /* Blue */
+  --ae-blue-100: color-mix(in srgb, var(--ae-blue) 20%, white);
+  --ae-blue-200: color-mix(in srgb, var(--ae-blue) 40%, white);
+  --ae-blue-300: color-mix(in srgb, var(--ae-blue) 60%, white);
+  --ae-blue-400: color-mix(in srgb, var(--ae-blue) 80%, white);
+  --ae-blue-500: var(--ae-blue);
+  --ae-blue-600: color-mix(in srgb, var(--ae-blue) 80%, black);
+  --ae-blue-700: color-mix(in srgb, var(--ae-blue) 60%, black);
+  --ae-blue-800: color-mix(in srgb, var(--ae-blue) 40%, black);
+  --ae-blue-900: color-mix(in srgb, var(--ae-blue) 20%, black);
+
+  /* Green */
+  --ae-green-100: color-mix(in srgb, var(--ae-green) 20%, white);
+  --ae-green-200: color-mix(in srgb, var(--ae-green) 40%, white);
+  --ae-green-300: color-mix(in srgb, var(--ae-green) 60%, white);
+  --ae-green-400: color-mix(in srgb, var(--ae-green) 80%, white);
+  --ae-green-500: var(--ae-green);
+  --ae-green-600: color-mix(in srgb, var(--ae-green) 80%, black);
+  --ae-green-700: color-mix(in srgb, var(--ae-green) 60%, black);
+  --ae-green-800: color-mix(in srgb, var(--ae-green) 40%, black);
+  --ae-green-900: color-mix(in srgb, var(--ae-green) 20%, black);
+
+  /* Red */
+  --ae-red-100: color-mix(in srgb, var(--ae-red) 20%, white);
+  --ae-red-200: color-mix(in srgb, var(--ae-red) 40%, white);
+  --ae-red-300: color-mix(in srgb, var(--ae-red) 60%, white);
+  --ae-red-400: color-mix(in srgb, var(--ae-red) 80%, white);
+  --ae-red-500: var(--ae-red);
+  --ae-red-600: color-mix(in srgb, var(--ae-red) 80%, black);
+  --ae-red-700: color-mix(in srgb, var(--ae-red) 60%, black);
+  --ae-red-800: color-mix(in srgb, var(--ae-red) 40%, black);
+  --ae-red-900: color-mix(in srgb, var(--ae-red) 20%, black);
+
+  /* Yellow */
+  --ae-yellow-100: color-mix(in srgb, var(--ae-yellow) 20%, white);
+  --ae-yellow-200: color-mix(in srgb, var(--ae-yellow) 40%, white);
+  --ae-yellow-300: color-mix(in srgb, var(--ae-yellow) 60%, white);
+  --ae-yellow-400: color-mix(in srgb, var(--ae-yellow) 80%, white);
+  --ae-yellow-500: var(--ae-yellow);
+  --ae-yellow-600: color-mix(in srgb, var(--ae-yellow) 80%, black);
+  --ae-yellow-700: color-mix(in srgb, var(--ae-yellow) 60%, black);
+  --ae-yellow-800: color-mix(in srgb, var(--ae-yellow) 40%, black);
+  --ae-yellow-900: color-mix(in srgb, var(--ae-yellow) 20%, black);
+
+  /* Cyan */
+  --ae-cyan-100: color-mix(in srgb, var(--ae-cyan) 20%, white);
+  --ae-cyan-200: color-mix(in srgb, var(--ae-cyan) 40%, white);
+  --ae-cyan-300: color-mix(in srgb, var(--ae-cyan) 60%, white);
+  --ae-cyan-400: color-mix(in srgb, var(--ae-cyan) 80%, white);
+  --ae-cyan-500: var(--ae-cyan);
+  --ae-cyan-600: color-mix(in srgb, var(--ae-cyan) 80%, black);
+  --ae-cyan-700: color-mix(in srgb, var(--ae-cyan) 60%, black);
+  --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);
+  --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);
+
+  /* Gray  (neutral \u2014 base #6e6e6e) */
+  --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);
+  --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);
+  --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);
+  --ae-gray-400: color-mix(in srgb, var(--ae-gray) 80%, white);
+  --ae-gray-500: var(--ae-gray);
+  --ae-gray-600: color-mix(in srgb, var(--ae-gray) 80%, black);
+  --ae-gray-700: color-mix(in srgb, var(--ae-gray) 60%, black);
+  --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);
+  --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);
+
+  /* Slate  (blue-gray \u2014 base #64748b, used for 'secondary') */
+  --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);
+  --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);
+  --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);
+  --ae-slate-400: color-mix(in srgb, var(--ae-slate) 80%, white);
+  --ae-slate-500: var(--ae-slate);
+  --ae-slate-600: color-mix(in srgb, var(--ae-slate) 80%, black);
+  --ae-slate-700: color-mix(in srgb, var(--ae-slate) 60%, black);
+  --ae-slate-800: color-mix(in srgb, var(--ae-slate) 40%, black);
+  --ae-slate-900: color-mix(in srgb, var(--ae-slate) 20%, black);
+
+  /* Dark  (base #343a40) */
+  --ae-dark-100: color-mix(in srgb, var(--ae-dark) 20%, white);
+  --ae-dark-200: color-mix(in srgb, var(--ae-dark) 40%, white);
+  --ae-dark-300: color-mix(in srgb, var(--ae-dark) 60%, white);
+  --ae-dark-400: color-mix(in srgb, var(--ae-dark) 80%, white);
+  --ae-dark-500: var(--ae-dark);
+  --ae-dark-600: color-mix(in srgb, var(--ae-dark) 80%, black);
+  --ae-dark-700: color-mix(in srgb, var(--ae-dark) 60%, black);
+  --ae-dark-800: color-mix(in srgb, var(--ae-dark) 40%, black);
+  --ae-dark-900: color-mix(in srgb, var(--ae-dark) 20%, black);
+
+  /* Light  (base #f8f9fa) */
+  --ae-light-100: color-mix(in srgb, var(--ae-light) 20%, white);
+  --ae-light-200: color-mix(in srgb, var(--ae-light) 40%, white);
+  --ae-light-300: color-mix(in srgb, var(--ae-light) 60%, white);
+  --ae-light-400: color-mix(in srgb, var(--ae-light) 80%, white);
+  --ae-light-500: var(--ae-light);
+  --ae-light-600: color-mix(in srgb, var(--ae-light) 80%, black);
+  --ae-light-700: color-mix(in srgb, var(--ae-light) 60%, black);
+  --ae-light-800: color-mix(in srgb, var(--ae-light) 40%, black);
+  --ae-light-900: color-mix(in srgb, var(--ae-light) 20%, black);
+}
+
+:root,
+:host {
+  /* Hover / active mix (light default \u2014 overridden in \xA7 6 dark) */
+  --ae-color-mix-hover:  black 10%;
+  --ae-color-mix-active: black 20%;
+
+  /* Primary (Blue) */
+  --ae-color-primary:          var(--ae-blue-500);
+  --ae-color-primary-hover:    color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-hover));
+  --ae-color-primary-active:   color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-active));
+  --ae-color-primary-disabled: color-mix(in srgb, var(--ae-blue) 50%, var(--ae-gray-500));
+
+  /* Success (Green) */
+  --ae-color-success:          var(--ae-green-500);
+  --ae-color-success-hover:    color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-hover));
+  --ae-color-success-active:   color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-active));
+  --ae-color-success-disabled: color-mix(in srgb, var(--ae-green) 50%, var(--ae-gray-500));
+
+  /* Danger (Red) */
+  --ae-color-danger:           var(--ae-red-500);
+  --ae-color-danger-hover:     color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-hover));
+  --ae-color-danger-active:    color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-active));
+  --ae-color-danger-disabled:  color-mix(in srgb, var(--ae-red) 50%, var(--ae-gray-500));
+
+  /* Warning (Yellow) */
+  --ae-color-warning:          var(--ae-yellow-500);
+  --ae-color-warning-hover:    color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-hover));
+  --ae-color-warning-active:   color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-active));
+  --ae-color-warning-disabled: color-mix(in srgb, var(--ae-yellow) 50%, var(--ae-gray-500));
+
+  /* Info (Cyan) */
+  --ae-color-info:             var(--ae-cyan-500);
+  --ae-color-info-hover:       color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-hover));
+  --ae-color-info-active:      color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));
+  --ae-color-info-disabled:    color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));
+
+  /* Secondary (Slate) \u2014 base differs per theme, overridden in \xA7 6 dark */
+  --ae-color-secondary:        var(--ae-slate-500);
+  --ae-color-secondary-hover:  color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));
+  --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));
+  --ae-color-secondary-text:   var(--ae-slate-700);
+}
+
+
+.theme-light,
+:root[theme="light"],
+:host([theme="light"]),
+:host-context([theme="light"]),
+:where(:root),
+:host {
+  color-scheme: light;
+
+  /* Gray UI aliases \u2014 lighter palette steps for elements on white background */
+  --ae-color-gray-dark:     var(--ae-gray-400);
+  --ae-color-gray:          var(--ae-gray-300);
+  --ae-color-gray-light:    var(--ae-gray-200);
+  --ae-color-gray-lighter:  var(--ae-gray-100);
+  --ae-color-gray-lightest: color-mix(in srgb, var(--ae-gray) 10%, white);
+
+  /* Text */
+  --ae-color-text-main:       var(--ae-dark-700);
+  --ae-color-text-muted:      var(--ae-gray-600);
+  --ae-color-text-disabled:   var(--ae-gray-300);
+  --ae-color-text-link:       var(--ae-blue-500);
+  --ae-color-text-link-hover: var(--ae-blue-700);
+
+  /* Surfaces */
+  --ae-surface-sunken:  var(--ae-light-500);
+  --ae-surface-base:    white;
+  --ae-surface-raised:  var(--ae-light-500);
+  --ae-surface-overlay: white;
+  --ae-color-overlay:   rgba(0, 0, 0, 0.4);
+
+  /* Borders */
+  --ae-border-subtle:   rgba(0, 0, 0, 0.08);
+  --ae-border-default:  rgba(0, 0, 0, 0.15);
+  --ae-border-hover:    rgba(0, 0, 0, 0.25);
+  --ae-border-focus:    var(--ae-color-primary);
+  --ae-border-disabled: rgba(0, 0, 0, 0.06);
+
+  /* Focus ring */
+  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.30);
+  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);
+
+  /* Subtle intent tokens \u2014 light context */
+  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.08);
+  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.40);
+  --ae-color-primary-text-emphasis:   var(--ae-blue-700);
+
+  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.08);
+  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.40);
+  --ae-color-success-text-emphasis:   var(--ae-green-700);
+
+  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.08);
+  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.40);
+  --ae-color-danger-text-emphasis:    var(--ae-red-700);
+
+  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.08);
+  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.40);
+  --ae-color-warning-text-emphasis:   var(--ae-yellow-700);
+
+  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.08);
+  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.40);
+  --ae-color-info-text-emphasis:      var(--ae-cyan-700);
+
+  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.08);
+  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.40);
+  --ae-color-secondary-text-emphasis: var(--ae-slate-700);
+
+  --ae-color-light-bg-subtle:         var(--ae-gray-100);   /* opaque on white: ~#e2e2e2 */
+  --ae-color-light-border-subtle:     var(--ae-gray-200);   /* opaque on white: ~#c4c4c4 */
+
+  --ae-color-dark-bg-subtle:          var(--ae-dark-100);   /* opaque on white: ~#d6d8d9 */
+  --ae-color-dark-border-subtle:      var(--ae-dark-300);   /* opaque on white: ~#85898c */
+
+  /* Component tokens \u2014 light defaults */
+  --ae-action-btn-bg:          var(--ae-gray-200);
+  --ae-action-btn-bg-hover:    var(--ae-color-primary);
+  --ae-action-btn-color:       var(--ae-gray-600);
+  --ae-action-btn-color-hover: white;
+
+  --ae-clear-btn-bg-hover:     var(--ae-color-danger);
+  --ae-clear-btn-color-hover:  white;
+
+  --ae-reset-btn-border-radius: var(--ae-radius-xs);
+  --ae-reset-btn-bg:            var(--ae-action-btn-bg);
+  --ae-reset-btn-bg-hover:      var(--ae-action-btn-bg-hover);
+  --ae-reset-btn-color:         var(--ae-action-btn-color);
+  --ae-reset-btn-color-hover:   var(--ae-action-btn-color-hover);
+  --ae-reset-btn-transition:    all 0.12s;
+
+  --ae-clear-btn-border-radius: var(--ae-radius-xs);
+  --ae-clear-btn-bg:            var(--ae-action-btn-bg);
+  --ae-clear-btn-color:         var(--ae-action-btn-color);
+  --ae-clear-btn-transition:    all 0.12s;
+}
+
+:root,
+:host {
+  --ae-size-scale: 1;
+  --ae-size-base:  calc(1rem * var(--ae-size-scale));                    /* 16px */
+  --ae-size-xl:    round(calc(var(--ae-size-l) * 1.125), 1px);           /* 23px */
+  --ae-size-l:     round(calc(var(--ae-size-m) * 1.125 * 1.125), 1px);   /* 20px */
+  --ae-size-m:     var(--ae-size-base);                                  /* 16px */
+  --ae-size-s:     round(calc(var(--ae-size-m) / 1.125), 1px);           /* 14px */
+  --ae-size-xs:    round(calc(var(--ae-size-s) / 1.125), 1px);           /* 12px */
+  --ae-size-2xs:   round(calc(var(--ae-size-xs) / 1.125), 1px);          /* 11px */
+  --ae-size-3xs:   round(calc(var(--ae-size-2xs) / 1.125), 1px);         /* 10px */
+}
+
+/* Border-radius tokens \u2014 shared across all components */
+:root,
+:host {
+  /**
+   * Unified border-radius hook for all components.
+   *
+   * Not set by default \u2014 each component falls back to its own --ae-radius-*
+   * token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).
+   *
+   * Usage:
+   *   :root { --ae-border-radius: 0; }       // global: all components square
+   *   :root { --ae-border-radius: 999px; }   // global: all components pill
+   *   ae-button { --ae-border-radius: 50%; } // scoped: only buttons circular
+   *   .sidebar { --ae-border-radius: 8px; }  // scoped: everything inside .sidebar
+   *
+   * To restore a component to its own default:
+   *   ae-card { --ae-border-radius: initial; }
+   */
+
+  --ae-radius-square:  0;
+  --ae-radius-xs:      2px;
+  --ae-radius-sm:      4px;
+  --ae-radius-md:      6px;
+  --ae-radius-lg:      8px;
+  --ae-radius-xl:      12px;
+  --ae-radius-pill:    999px;
+  --ae-radius-circle:  50%;
+}
+
+/* Layout tokens \u2014 defined on :root so all light DOM elements can use them */
+:root,
+:host {
+  --container-max-width: 1280px;
+  --container-padding-x: 1.5rem;
+}
+
+.theme-dark,
+:root[theme="dark"],
+:host([theme="dark"]),
+:host-context([theme="dark"]) {
+  color-scheme: dark;
+
+  /* Hover / active \u2014 slightly gentler on dark backgrounds */
+  --ae-color-mix-hover:  black 8%;
+  --ae-color-mix-active: black 16%;
+
+  /* Gray UI aliases \u2014 darker palette steps for elements on dark background */
+  --ae-color-gray-dark:     var(--ae-gray-800);
+  --ae-color-gray:          var(--ae-gray-700);
+  --ae-color-gray-light:    var(--ae-gray-600);
+  --ae-color-gray-lighter:  var(--ae-gray-500);
+  --ae-color-gray-lightest: var(--ae-gray-400);
+
+  /* Secondary \u2014 deeper base on dark background */
+  --ae-color-secondary:      var(--ae-slate-700);
+  --ae-color-secondary-text: var(--ae-slate-300);
+
+  /* Text */
+  --ae-color-text-main:       white;
+  --ae-color-text-muted:      var(--ae-gray-200);
+  --ae-color-text-disabled:   var(--ae-gray-500);
+  --ae-color-text-link:       var(--ae-blue-300);
+  --ae-color-text-link-hover: var(--ae-blue-200);
+
+  /* Surfaces */
+  --ae-surface-sunken:  var(--ae-gray-900);
+  --ae-surface-base:    color-mix(in srgb, var(--ae-gray) 27%, black);
+  --ae-surface-raised:  color-mix(in srgb, var(--ae-gray) 34%, black);
+  --ae-surface-overlay: color-mix(in srgb, var(--ae-gray) 38%, black);
+  --ae-color-overlay:   rgba(0, 0, 0, 0.6);
+
+  /* Borders */
+  --ae-border-subtle:   rgba(255, 255, 255, 0.08);
+  --ae-border-default:  rgba(255, 255, 255, 0.12);
+  --ae-border-hover:    rgba(255, 255, 255, 0.20);
+  --ae-border-focus:    var(--ae-color-primary);
+  --ae-border-disabled: rgba(255, 255, 255, 0.06);
+
+  /* Focus ring */
+  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.25);
+  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);
+
+  /* Subtle intent tokens \u2014 dark context (more alpha, lighter text-emphasis) */
+  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.10);
+  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.30);
+  --ae-color-primary-text-emphasis:   var(--ae-blue-300);
+
+  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.10);
+  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.30);
+  --ae-color-success-text-emphasis:   var(--ae-green-300);
+
+  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.10);
+  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.30);
+  --ae-color-danger-text-emphasis:    var(--ae-red-300);
+
+  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.10);
+  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.30);
+  --ae-color-warning-text-emphasis:   var(--ae-yellow-300);
+
+  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.10);
+  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.30);
+  --ae-color-info-text-emphasis:      var(--ae-cyan-300);
+
+  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.10);
+  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.30);
+  --ae-color-secondary-text-emphasis: var(--ae-slate-300);
+
+  --ae-color-light-bg-subtle:         rgb(from var(--ae-light) r g b / 0.20);
+  --ae-color-light-border-subtle:     rgb(from var(--ae-light) r g b / 0.25);
+
+  --ae-color-dark-bg-subtle:          rgb(from var(--ae-dark) r g b / 0.30);
+  --ae-color-dark-border-subtle:      rgb(from var(--ae-dark) r g b / 0.50);
+
+  /* Component tokens \u2014 dark overrides */
+  --ae-action-btn-bg:          var(--ae-color-gray);
+  --ae-action-btn-bg-hover:    color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));
+  --ae-action-btn-color:       var(--ae-gray-400);
+  --ae-action-btn-color-hover: var(--ae-cyan-300);
+  --ae-clear-btn-bg-hover:     color-mix(in srgb, var(--ae-red) 25%, var(--ae-gray-800));
+  --ae-clear-btn-color-hover:  var(--ae-red-300);
+}
+`;
+
+// css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/button-group.css
+var button_group_default = ":host {\n  display: inline-flex;\n  align-items: stretch;\n  gap: 8px;\n}\n\n:host([block]) {\n  display: flex;\n  width: 100%;\n}\n\n:host([block]) ::slotted(ae-button) {\n  flex: 1;\n}\n\n:host([compact]) {\n  gap: 0;\n  /* Reset --ae-border-radius so individual --_btn-r-* corners take effect */\n  --ae-border-radius: initial;\n}\n\n/* Raise hovered/focused button so its border shows above neighbours */\n:host([compact]) ::slotted(ae-button:hover),\n:host([compact]) ::slotted(ae-button:focus-within) {\n  position: relative;\n  z-index: 1;\n}\n";
+
+// src/aeico-component.ts
+import { AeicoElement } from "aeico";
+
+// src/utils.ts
+function toKebab(str) {
+  const cleaned = str.replace(/^[_\d]+/, "");
+  return cleaned.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+
+// src/aeico-component.ts
+var TAG_NAME_PREFIX = "ae";
+var AeicoComponent = class extends AeicoElement {
+  static register(name) {
+    const tagName = name || `${TAG_NAME_PREFIX}-${this.tagName || toKebab(this.name)}`;
+    super.register(tagName);
+  }
+};
+var aeico_component_default = AeicoComponent;
+
+// src/button-group/button-group.ts
+import { html } from "aeico";
+var ButtonGroup = class extends aeico_component_default {
+  static props = {
+    variant: { type: String },
+    color: { type: String },
+    size: { type: String },
+    compact: { type: Boolean },
+    block: { type: Boolean },
+    disabled: { type: Boolean }
+  };
+  static styles = [variables_default, button_group_default];
+  slotEl = null;
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.variant === void 0) this.variant = "filled";
+    if (this.color === void 0) this.color = "default";
+    if (this.size === void 0) this.size = "md";
+  }
+  render() {
+    return html(({ slot }) => {
+      this.slotEl = slot({
+        "@slotchange": () => this._syncChildren()
+      });
+      this._syncChildren();
+    });
+  }
+  _getButtons() {
+    if (!this.slotEl) return [];
+    return this.slotEl.assignedElements({ flatten: true }).filter((el) => {
+      const tag = el.tagName.toLowerCase();
+      return tag === "ae-button" || tag === "ae-dropdown-button";
+    });
+  }
+  _syncChildren() {
+    const buttons = this._getButtons();
+    const isSmall = this.size === "xs" || this.size === "sm";
+    const r = isSmall ? "var(--ae-radius-xs)" : "var(--ae-radius-sm)";
+    buttons.forEach((btn, i) => {
+      btn.variant = this.variant;
+      btn.color = this.color;
+      btn.size = this.size;
+      if (this.disabled) {
+        btn.disabled = true;
+      } else {
+        btn.disabled = false;
+      }
+      if (this.compact) {
+        const isFirst = i === 0;
+        const isLast = i === buttons.length - 1;
+        btn.style.marginLeft = isFirst ? "" : "-1px";
+        btn.style.setProperty("--_btn-r-tl", isFirst ? r : "0");
+        btn.style.setProperty("--_btn-r-bl", isFirst ? r : "0");
+        btn.style.setProperty("--_btn-r-tr", isLast ? r : "0");
+        btn.style.setProperty("--_btn-r-br", isLast ? r : "0");
+      } else {
+        btn.style.marginLeft = "";
+        this._clearRadius(btn);
+      }
+    });
+  }
+  _clearRadius(btn) {
+    btn.style.removeProperty("--_btn-r-tl");
+    btn.style.removeProperty("--_btn-r-tr");
+    btn.style.removeProperty("--_btn-r-br");
+    btn.style.removeProperty("--_btn-r-bl");
+  }
+};
+ButtonGroup.register();
+var button_group_default2 = ButtonGroup;
 export {
-  B as ButtonGroup,
-  B2 as default
+  button_group_default2 as ButtonGroup,
+  button_group_default2 as default
 };
 //# sourceMappingURL=button-group.js.map

package/dist/button-group.js.map

@@ -1 +1,7 @@
-{"version":3,"file":"button-group.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{
+  "version": 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/components/button-group.css", "../src/aeico-component.ts", "../src/utils.ts", "../src/button-group/button-group.ts"],
+  "sourcesContent": ["export default \":root,\\n:host {\\n  --ae-font-sans-serif: system-ui, -apple-system, \\\"Segoe UI\\\", Roboto, \\\"Helvetica Neue\\\",\\n    \\\"Noto Sans\\\", \\\"Liberation Sans\\\", Arial, sans-serif,\\n    \\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\", \\\"Noto Color Emoji\\\";\\n  --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,\\n    \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace;\\n  font-family: var(--ae-font-sans-serif);\\n  --ae-blue:   #0e639c;\\n  --ae-green:  #28a745;\\n  --ae-red:    #dc3545;\\n  --ae-yellow: #ffc107;\\n  --ae-cyan:   #17a2b8;\\n  --ae-gray:   #6e6e6e;\\n  --ae-slate:  #64748b;\\n  --ae-dark:   #343a40;\\n  --ae-light:  #f8f9fa;\\n}\\n\\n:root,\\n:host {\\n  /* Blue */\\n  --ae-blue-100: color-mix(in srgb, var(--ae-blue) 20%, white);\\n  --ae-blue-200: color-mix(in srgb, var(--ae-blue) 40%, white);\\n  --ae-blue-300: color-mix(in srgb, var(--ae-blue) 60%, white);\\n  --ae-blue-400: color-mix(in srgb, var(--ae-blue) 80%, white);\\n  --ae-blue-500: var(--ae-blue);\\n  --ae-blue-600: color-mix(in srgb, var(--ae-blue) 80%, black);\\n  --ae-blue-700: color-mix(in srgb, var(--ae-blue) 60%, black);\\n  --ae-blue-800: color-mix(in srgb, var(--ae-blue) 40%, black);\\n  --ae-blue-900: color-mix(in srgb, var(--ae-blue) 20%, black);\\n\\n  /* Green */\\n  --ae-green-100: color-mix(in srgb, var(--ae-green) 20%, white);\\n  --ae-green-200: color-mix(in srgb, var(--ae-green) 40%, white);\\n  --ae-green-300: color-mix(in srgb, var(--ae-green) 60%, white);\\n  --ae-green-400: color-mix(in srgb, var(--ae-green) 80%, white);\\n  --ae-green-500: var(--ae-green);\\n  --ae-green-600: color-mix(in srgb, var(--ae-green) 80%, black);\\n  --ae-green-700: color-mix(in srgb, var(--ae-green) 60%, black);\\n  --ae-green-800: color-mix(in srgb, var(--ae-green) 40%, black);\\n  --ae-green-900: color-mix(in srgb, var(--ae-green) 20%, black);\\n\\n  /* Red */\\n  --ae-red-100: color-mix(in srgb, var(--ae-red) 20%, white);\\n  --ae-red-200: color-mix(in srgb, var(--ae-red) 40%, white);\\n  --ae-red-300: color-mix(in srgb, var(--ae-red) 60%, white);\\n  --ae-red-400: color-mix(in srgb, var(--ae-red) 80%, white);\\n  --ae-red-500: var(--ae-red);\\n  --ae-red-600: color-mix(in srgb, var(--ae-red) 80%, black);\\n  --ae-red-700: color-mix(in srgb, var(--ae-red) 60%, black);\\n  --ae-red-800: color-mix(in srgb, var(--ae-red) 40%, black);\\n  --ae-red-900: color-mix(in srgb, var(--ae-red) 20%, black);\\n\\n  /* Yellow */\\n  --ae-yellow-100: color-mix(in srgb, var(--ae-yellow) 20%, white);\\n  --ae-yellow-200: color-mix(in srgb, var(--ae-yellow) 40%, white);\\n  --ae-yellow-300: color-mix(in srgb, var(--ae-yellow) 60%, white);\\n  --ae-yellow-400: color-mix(in srgb, var(--ae-yellow) 80%, white);\\n  --ae-yellow-500: var(--ae-yellow);\\n  --ae-yellow-600: color-mix(in srgb, var(--ae-yellow) 80%, black);\\n  --ae-yellow-700: color-mix(in srgb, var(--ae-yellow) 60%, black);\\n  --ae-yellow-800: color-mix(in srgb, var(--ae-yellow) 40%, black);\\n  --ae-yellow-900: color-mix(in srgb, var(--ae-yellow) 20%, black);\\n\\n  /* Cyan */\\n  --ae-cyan-100: color-mix(in srgb, var(--ae-cyan) 20%, white);\\n  --ae-cyan-200: color-mix(in srgb, var(--ae-cyan) 40%, white);\\n  --ae-cyan-300: color-mix(in srgb, var(--ae-cyan) 60%, white);\\n  --ae-cyan-400: color-mix(in srgb, var(--ae-cyan) 80%, white);\\n  --ae-cyan-500: var(--ae-cyan);\\n  --ae-cyan-600: color-mix(in srgb, var(--ae-cyan) 80%, black);\\n  --ae-cyan-700: color-mix(in srgb, var(--ae-cyan) 60%, black);\\n  --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);\\n  --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);\\n\\n  /* Gray  (neutral \u2014 base #6e6e6e) */\\n  --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);\\n  --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);\\n  --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);\\n  --ae-gray-400: color-mix(in srgb, var(--ae-gray) 80%, white);\\n  --ae-gray-500: var(--ae-gray);\\n  --ae-gray-600: color-mix(in srgb, var(--ae-gray) 80%, black);\\n  --ae-gray-700: color-mix(in srgb, var(--ae-gray) 60%, black);\\n  --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);\\n  --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);\\n\\n  /* Slate  (blue-gray \u2014 base #64748b, used for 'secondary') */\\n  --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);\\n  --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);\\n  --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);\\n  --ae-slate-400: color-mix(in srgb, var(--ae-slate) 80%, white);\\n  --ae-slate-500: var(--ae-slate);\\n  --ae-slate-600: color-mix(in srgb, var(--ae-slate) 80%, black);\\n  --ae-slate-700: color-mix(in srgb, var(--ae-slate) 60%, black);\\n  --ae-slate-800: color-mix(in srgb, var(--ae-slate) 40%, black);\\n  --ae-slate-900: color-mix(in srgb, var(--ae-slate) 20%, black);\\n\\n  /* Dark  (base #343a40) */\\n  --ae-dark-100: color-mix(in srgb, var(--ae-dark) 20%, white);\\n  --ae-dark-200: color-mix(in srgb, var(--ae-dark) 40%, white);\\n  --ae-dark-300: color-mix(in srgb, var(--ae-dark) 60%, white);\\n  --ae-dark-400: color-mix(in srgb, var(--ae-dark) 80%, white);\\n  --ae-dark-500: var(--ae-dark);\\n  --ae-dark-600: color-mix(in srgb, var(--ae-dark) 80%, black);\\n  --ae-dark-700: color-mix(in srgb, var(--ae-dark) 60%, black);\\n  --ae-dark-800: color-mix(in srgb, var(--ae-dark) 40%, black);\\n  --ae-dark-900: color-mix(in srgb, var(--ae-dark) 20%, black);\\n\\n  /* Light  (base #f8f9fa) */\\n  --ae-light-100: color-mix(in srgb, var(--ae-light) 20%, white);\\n  --ae-light-200: color-mix(in srgb, var(--ae-light) 40%, white);\\n  --ae-light-300: color-mix(in srgb, var(--ae-light) 60%, white);\\n  --ae-light-400: color-mix(in srgb, var(--ae-light) 80%, white);\\n  --ae-light-500: var(--ae-light);\\n  --ae-light-600: color-mix(in srgb, var(--ae-light) 80%, black);\\n  --ae-light-700: color-mix(in srgb, var(--ae-light) 60%, black);\\n  --ae-light-800: color-mix(in srgb, var(--ae-light) 40%, black);\\n  --ae-light-900: color-mix(in srgb, var(--ae-light) 20%, black);\\n}\\n\\n:root,\\n:host {\\n  /* Hover / active mix (light default \u2014 overridden in \u00A7 6 dark) */\\n  --ae-color-mix-hover:  black 10%;\\n  --ae-color-mix-active: black 20%;\\n\\n  /* Primary (Blue) */\\n  --ae-color-primary:          var(--ae-blue-500);\\n  --ae-color-primary-hover:    color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-hover));\\n  --ae-color-primary-active:   color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-active));\\n  --ae-color-primary-disabled: color-mix(in srgb, var(--ae-blue) 50%, var(--ae-gray-500));\\n\\n  /* Success (Green) */\\n  --ae-color-success:          var(--ae-green-500);\\n  --ae-color-success-hover:    color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-hover));\\n  --ae-color-success-active:   color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-active));\\n  --ae-color-success-disabled: color-mix(in srgb, var(--ae-green) 50%, var(--ae-gray-500));\\n\\n  /* Danger (Red) */\\n  --ae-color-danger:           var(--ae-red-500);\\n  --ae-color-danger-hover:     color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-hover));\\n  --ae-color-danger-active:    color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-active));\\n  --ae-color-danger-disabled:  color-mix(in srgb, var(--ae-red) 50%, var(--ae-gray-500));\\n\\n  /* Warning (Yellow) */\\n  --ae-color-warning:          var(--ae-yellow-500);\\n  --ae-color-warning-hover:    color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-hover));\\n  --ae-color-warning-active:   color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-active));\\n  --ae-color-warning-disabled: color-mix(in srgb, var(--ae-yellow) 50%, var(--ae-gray-500));\\n\\n  /* Info (Cyan) */\\n  --ae-color-info:             var(--ae-cyan-500);\\n  --ae-color-info-hover:       color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-hover));\\n  --ae-color-info-active:      color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));\\n  --ae-color-info-disabled:    color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));\\n\\n  /* Secondary (Slate) \u2014 base differs per theme, overridden in \u00A7 6 dark */\\n  --ae-color-secondary:        var(--ae-slate-500);\\n  --ae-color-secondary-hover:  color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));\\n  --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));\\n  --ae-color-secondary-text:   var(--ae-slate-700);\\n}\\n\\n\\n.theme-light,\\n:root[theme=\\\"light\\\"],\\n:host([theme=\\\"light\\\"]),\\n:host-context([theme=\\\"light\\\"]),\\n:where(:root),\\n:host {\\n  color-scheme: light;\\n\\n  /* Gray UI aliases \u2014 lighter palette steps for elements on white background */\\n  --ae-color-gray-dark:     var(--ae-gray-400);\\n  --ae-color-gray:          var(--ae-gray-300);\\n  --ae-color-gray-light:    var(--ae-gray-200);\\n  --ae-color-gray-lighter:  var(--ae-gray-100);\\n  --ae-color-gray-lightest: color-mix(in srgb, var(--ae-gray) 10%, white);\\n\\n  /* Text */\\n  --ae-color-text-main:       var(--ae-dark-700);\\n  --ae-color-text-muted:      var(--ae-gray-600);\\n  --ae-color-text-disabled:   var(--ae-gray-300);\\n  --ae-color-text-link:       var(--ae-blue-500);\\n  --ae-color-text-link-hover: var(--ae-blue-700);\\n\\n  /* Surfaces */\\n  --ae-surface-sunken:  var(--ae-light-500);\\n  --ae-surface-base:    white;\\n  --ae-surface-raised:  var(--ae-light-500);\\n  --ae-surface-overlay: white;\\n  --ae-color-overlay:   rgba(0, 0, 0, 0.4);\\n\\n  /* Borders */\\n  --ae-border-subtle:   rgba(0, 0, 0, 0.08);\\n  --ae-border-default:  rgba(0, 0, 0, 0.15);\\n  --ae-border-hover:    rgba(0, 0, 0, 0.25);\\n  --ae-border-focus:    var(--ae-color-primary);\\n  --ae-border-disabled: rgba(0, 0, 0, 0.06);\\n\\n  /* Focus ring */\\n  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.30);\\n  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);\\n\\n  /* Subtle intent tokens \u2014 light context */\\n  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.08);\\n  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.40);\\n  --ae-color-primary-text-emphasis:   var(--ae-blue-700);\\n\\n  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.08);\\n  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.40);\\n  --ae-color-success-text-emphasis:   var(--ae-green-700);\\n\\n  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.08);\\n  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.40);\\n  --ae-color-danger-text-emphasis:    var(--ae-red-700);\\n\\n  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.08);\\n  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.40);\\n  --ae-color-warning-text-emphasis:   var(--ae-yellow-700);\\n\\n  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.08);\\n  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.40);\\n  --ae-color-info-text-emphasis:      var(--ae-cyan-700);\\n\\n  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.08);\\n  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.40);\\n  --ae-color-secondary-text-emphasis: var(--ae-slate-700);\\n\\n  --ae-color-light-bg-subtle:         var(--ae-gray-100);   /* opaque on white: ~#e2e2e2 */\\n  --ae-color-light-border-subtle:     var(--ae-gray-200);   /* opaque on white: ~#c4c4c4 */\\n\\n  --ae-color-dark-bg-subtle:          var(--ae-dark-100);   /* opaque on white: ~#d6d8d9 */\\n  --ae-color-dark-border-subtle:      var(--ae-dark-300);   /* opaque on white: ~#85898c */\\n\\n  /* Component tokens \u2014 light defaults */\\n  --ae-action-btn-bg:          var(--ae-gray-200);\\n  --ae-action-btn-bg-hover:    var(--ae-color-primary);\\n  --ae-action-btn-color:       var(--ae-gray-600);\\n  --ae-action-btn-color-hover: white;\\n\\n  --ae-clear-btn-bg-hover:     var(--ae-color-danger);\\n  --ae-clear-btn-color-hover:  white;\\n\\n  --ae-reset-btn-border-radius: var(--ae-radius-xs);\\n  --ae-reset-btn-bg:            var(--ae-action-btn-bg);\\n  --ae-reset-btn-bg-hover:      var(--ae-action-btn-bg-hover);\\n  --ae-reset-btn-color:         var(--ae-action-btn-color);\\n  --ae-reset-btn-color-hover:   var(--ae-action-btn-color-hover);\\n  --ae-reset-btn-transition:    all 0.12s;\\n\\n  --ae-clear-btn-border-radius: var(--ae-radius-xs);\\n  --ae-clear-btn-bg:            var(--ae-action-btn-bg);\\n  --ae-clear-btn-color:         var(--ae-action-btn-color);\\n  --ae-clear-btn-transition:    all 0.12s;\\n}\\n\\n:root,\\n:host {\\n  --ae-size-scale: 1;\\n  --ae-size-base:  calc(1rem * var(--ae-size-scale));                    /* 16px */\\n  --ae-size-xl:    round(calc(var(--ae-size-l) * 1.125), 1px);           /* 23px */\\n  --ae-size-l:     round(calc(var(--ae-size-m) * 1.125 * 1.125), 1px);   /* 20px */\\n  --ae-size-m:     var(--ae-size-base);                                  /* 16px */\\n  --ae-size-s:     round(calc(var(--ae-size-m) / 1.125), 1px);           /* 14px */\\n  --ae-size-xs:    round(calc(var(--ae-size-s) / 1.125), 1px);           /* 12px */\\n  --ae-size-2xs:   round(calc(var(--ae-size-xs) / 1.125), 1px);          /* 11px */\\n  --ae-size-3xs:   round(calc(var(--ae-size-2xs) / 1.125), 1px);         /* 10px */\\n}\\n\\n/* Border-radius tokens \u2014 shared across all components */\\n:root,\\n:host {\\n  /**\\n   * Unified border-radius hook for all components.\\n   *\\n   * Not set by default \u2014 each component falls back to its own --ae-radius-*\\n   * token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).\\n   *\\n   * Usage:\\n   *   :root { --ae-border-radius: 0; }       // global: all components square\\n   *   :root { --ae-border-radius: 999px; }   // global: all components pill\\n   *   ae-button { --ae-border-radius: 50%; } // scoped: only buttons circular\\n   *   .sidebar { --ae-border-radius: 8px; }  // scoped: everything inside .sidebar\\n   *\\n   * To restore a component to its own default:\\n   *   ae-card { --ae-border-radius: initial; }\\n   */\\n\\n  --ae-radius-square:  0;\\n  --ae-radius-xs:      2px;\\n  --ae-radius-sm:      4px;\\n  --ae-radius-md:      6px;\\n  --ae-radius-lg:      8px;\\n  --ae-radius-xl:      12px;\\n  --ae-radius-pill:    999px;\\n  --ae-radius-circle:  50%;\\n}\\n\\n/* Layout tokens \u2014 defined on :root so all light DOM elements can use them */\\n:root,\\n:host {\\n  --container-max-width: 1280px;\\n  --container-padding-x: 1.5rem;\\n}\\n\\n.theme-dark,\\n:root[theme=\\\"dark\\\"],\\n:host([theme=\\\"dark\\\"]),\\n:host-context([theme=\\\"dark\\\"]) {\\n  color-scheme: dark;\\n\\n  /* Hover / active \u2014 slightly gentler on dark backgrounds */\\n  --ae-color-mix-hover:  black 8%;\\n  --ae-color-mix-active: black 16%;\\n\\n  /* Gray UI aliases \u2014 darker palette steps for elements on dark background */\\n  --ae-color-gray-dark:     var(--ae-gray-800);\\n  --ae-color-gray:          var(--ae-gray-700);\\n  --ae-color-gray-light:    var(--ae-gray-600);\\n  --ae-color-gray-lighter:  var(--ae-gray-500);\\n  --ae-color-gray-lightest: var(--ae-gray-400);\\n\\n  /* Secondary \u2014 deeper base on dark background */\\n  --ae-color-secondary:      var(--ae-slate-700);\\n  --ae-color-secondary-text: var(--ae-slate-300);\\n\\n  /* Text */\\n  --ae-color-text-main:       white;\\n  --ae-color-text-muted:      var(--ae-gray-200);\\n  --ae-color-text-disabled:   var(--ae-gray-500);\\n  --ae-color-text-link:       var(--ae-blue-300);\\n  --ae-color-text-link-hover: var(--ae-blue-200);\\n\\n  /* Surfaces */\\n  --ae-surface-sunken:  var(--ae-gray-900);\\n  --ae-surface-base:    color-mix(in srgb, var(--ae-gray) 27%, black);\\n  --ae-surface-raised:  color-mix(in srgb, var(--ae-gray) 34%, black);\\n  --ae-surface-overlay: color-mix(in srgb, var(--ae-gray) 38%, black);\\n  --ae-color-overlay:   rgba(0, 0, 0, 0.6);\\n\\n  /* Borders */\\n  --ae-border-subtle:   rgba(255, 255, 255, 0.08);\\n  --ae-border-default:  rgba(255, 255, 255, 0.12);\\n  --ae-border-hover:    rgba(255, 255, 255, 0.20);\\n  --ae-border-focus:    var(--ae-color-primary);\\n  --ae-border-disabled: rgba(255, 255, 255, 0.06);\\n\\n  /* Focus ring */\\n  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.25);\\n  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);\\n\\n  /* Subtle intent tokens \u2014 dark context (more alpha, lighter text-emphasis) */\\n  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.10);\\n  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.30);\\n  --ae-color-primary-text-emphasis:   var(--ae-blue-300);\\n\\n  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.10);\\n  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.30);\\n  --ae-color-success-text-emphasis:   var(--ae-green-300);\\n\\n  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.10);\\n  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.30);\\n  --ae-color-danger-text-emphasis:    var(--ae-red-300);\\n\\n  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.10);\\n  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.30);\\n  --ae-color-warning-text-emphasis:   var(--ae-yellow-300);\\n\\n  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.10);\\n  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.30);\\n  --ae-color-info-text-emphasis:      var(--ae-cyan-300);\\n\\n  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.10);\\n  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.30);\\n  --ae-color-secondary-text-emphasis: var(--ae-slate-300);\\n\\n  --ae-color-light-bg-subtle:         rgb(from var(--ae-light) r g b / 0.20);\\n  --ae-color-light-border-subtle:     rgb(from var(--ae-light) r g b / 0.25);\\n\\n  --ae-color-dark-bg-subtle:          rgb(from var(--ae-dark) r g b / 0.30);\\n  --ae-color-dark-border-subtle:      rgb(from var(--ae-dark) r g b / 0.50);\\n\\n  /* Component tokens \u2014 dark overrides */\\n  --ae-action-btn-bg:          var(--ae-color-gray);\\n  --ae-action-btn-bg-hover:    color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));\\n  --ae-action-btn-color:       var(--ae-gray-400);\\n  --ae-action-btn-color-hover: var(--ae-cyan-300);\\n  --ae-clear-btn-bg-hover:     color-mix(in srgb, var(--ae-red) 25%, var(--ae-gray-800));\\n  --ae-clear-btn-color-hover:  var(--ae-red-300);\\n}\\n\"", "export default \":host {\\n  display: inline-flex;\\n  align-items: stretch;\\n  gap: 8px;\\n}\\n\\n:host([block]) {\\n  display: flex;\\n  width: 100%;\\n}\\n\\n:host([block]) ::slotted(ae-button) {\\n  flex: 1;\\n}\\n\\n:host([compact]) {\\n  gap: 0;\\n  /* Reset --ae-border-radius so individual --_btn-r-* corners take effect */\\n  --ae-border-radius: initial;\\n}\\n\\n/* Raise hovered/focused button so its border shows above neighbours */\\n:host([compact]) ::slotted(ae-button:hover),\\n:host([compact]) ::slotted(ae-button:focus-within) {\\n  position: relative;\\n  z-index: 1;\\n}\\n\"", "\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 styleVariables from '../styles/variables.css';\nimport buttonGroupStyle from '../styles/components/button-group.css';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type { ButtonColor, ButtonVariant, ButtonSize } from '../button';\nimport Button from '../button/button';\nimport DropdownButton from '../dropdown/dropdown-button';\n\n/**\n * ButtonGroup Component\n *\n * Groups multiple `ae-button` elements, propagating shared `variant`, `color`,\n * `size`, and `disabled` props to each child. Supports a `compact` mode that\n * joins buttons into a seamless connected strip (like Bootstrap's button group).\n *\n * @example\n * ```html\n * <!-- Loose group (gap between buttons) -->\n * <ae-button-group variant=\"outlined\" color=\"primary\">\n *   <ae-button>One</ae-button>\n *   <ae-button>Two</ae-button>\n *   <ae-button>Three</ae-button>\n * </ae-button-group>\n *\n * <!-- Compact \u2014 joined strip -->\n * <ae-button-group compact color=\"primary\">\n *   <ae-button>Left</ae-button>\n *   <ae-button>Middle</ae-button>\n *   <ae-button>Right</ae-button>\n * </ae-button-group>\n *\n * <!-- Full-width -->\n * <ae-button-group block color=\"danger\" variant=\"outlined\">\n *   <ae-button>Delete</ae-button>\n *   <ae-button>Archive</ae-button>\n * </ae-button-group>\n * ```\n */\nclass ButtonGroup extends AeicoComponent {\n  static props: Props = {\n    variant: { type: String },\n    color: { type: String },\n    size: { type: String },\n    compact: { type: Boolean },\n    block: { type: Boolean },\n    disabled: { type: Boolean },\n  };\n\n  protected static styles = [styleVariables, buttonGroupStyle];\n\n  declare variant?: ButtonVariant;\n  declare color?: ButtonColor;\n  declare size?: ButtonSize;\n  declare compact?: boolean;\n  declare block?: boolean;\n  declare disabled?: boolean;\n\n  private slotEl: HTMLSlotElement | null = null;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (this.variant === undefined) this.variant = 'filled';\n    if (this.color === undefined) this.color = 'default';\n    if (this.size === undefined) this.size = 'md';\n  }\n\n  protected render() {\n    return html(({ slot }) => {\n      this.slotEl = slot({\n        '@slotchange': () => this._syncChildren(),\n      });\n      this._syncChildren();\n    });\n  }\n\n  private _getButtons(): Array<Button | DropdownButton> {\n    if (!this.slotEl) return [];\n\n    return (\n      this.slotEl.assignedElements({ flatten: true }) as Array<Button | DropdownButton>\n    ).filter((el) => {\n      const tag = el.tagName.toLowerCase();\n      return tag === 'ae-button' || tag === 'ae-dropdown-button';\n    });\n  }\n\n  private _syncChildren() {\n    const buttons = this._getButtons();\n    const isSmall = this.size === 'xs' || this.size === 'sm';\n    const r = isSmall ? 'var(--ae-radius-xs)' : 'var(--ae-radius-sm)';\n\n    buttons.forEach((btn: Button | DropdownButton, i) => {\n      btn.variant = this.variant;\n      btn.color = this.color;\n      btn.size = this.size;\n\n      if (this.disabled) {\n        btn.disabled = true;\n      } else {\n        btn.disabled = false;\n      }\n\n      if (this.compact) {\n        const isFirst = i === 0;\n        const isLast = i === buttons.length - 1;\n\n        btn.style.marginLeft = isFirst ? '' : '-1px';\n\n        btn.style.setProperty('--_btn-r-tl', isFirst ? r : '0');\n        btn.style.setProperty('--_btn-r-bl', isFirst ? r : '0');\n        btn.style.setProperty('--_btn-r-tr', isLast ? r : '0');\n        btn.style.setProperty('--_btn-r-br', isLast ? r : '0');\n      } else {\n        btn.style.marginLeft = '';\n        this._clearRadius(btn);\n      }\n    });\n  }\n\n  private _clearRadius(btn: HTMLElement) {\n    btn.style.removeProperty('--_btn-r-tl');\n    btn.style.removeProperty('--_btn-r-tr');\n    btn.style.removeProperty('--_btn-r-br');\n    btn.style.removeProperty('--_btn-r-bl');\n  }\n}\n\nButtonGroup.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-button-group': ButtonGroup;\n  }\n}\n\nexport default ButtonGroup;\nexport type ButtonGroupProps = InferProps<typeof ButtonGroup>;\n"],
+  "mappings": ";AAAA,IAAO,oBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAf,IAAO,uBAAQ;;;ACAd,SAAS,oBAAoB;;;ACEvB,SAAS,QAAQ,KAAqB;AAC3C,QAAM,UAAU,IAAI,QAAQ,WAAW,EAAE;AAEzC,SAAO,QAAQ,QAAQ,mBAAmB,OAAO,EAAE,YAAY;AACjE;;;ADHA,IAAM,kBAAkB;AAKxB,IAAM,iBAAN,cAA6B,aAAa;AAAA,EACxC,OAAO,SAAS,MAAe;AAC7B,UAAM,UAAU,QAAQ,GAAG,eAAe,IAAI,KAAK,WAAW,QAAQ,KAAK,IAAI,CAAC;AAEhF,UAAM,SAAS,OAAO;AAAA,EACxB;AACF;AAEA,IAAO,0BAAQ;;;AEZf,SAAS,YAAY;AAmCrB,IAAM,cAAN,cAA0B,wBAAe;AAAA,EACvC,OAAO,QAAe;AAAA,IACpB,SAAS,EAAE,MAAM,OAAO;AAAA,IACxB,OAAO,EAAE,MAAM,OAAO;AAAA,IACtB,MAAM,EAAE,MAAM,OAAO;AAAA,IACrB,SAAS,EAAE,MAAM,QAAQ;AAAA,IACzB,OAAO,EAAE,MAAM,QAAQ;AAAA,IACvB,UAAU,EAAE,MAAM,QAAQ;AAAA,EAC5B;AAAA,EAEA,OAAiB,SAAS,CAAC,mBAAgB,oBAAgB;AAAA,EASnD,SAAiC;AAAA,EAEzC,oBAAoB;AAClB,UAAM,kBAAkB;AAExB,QAAI,KAAK,YAAY,OAAW,MAAK,UAAU;AAC/C,QAAI,KAAK,UAAU,OAAW,MAAK,QAAQ;AAC3C,QAAI,KAAK,SAAS,OAAW,MAAK,OAAO;AAAA,EAC3C;AAAA,EAEU,SAAS;AACjB,WAAO,KAAK,CAAC,EAAE,KAAK,MAAM;AACxB,WAAK,SAAS,KAAK;AAAA,QACjB,eAAe,MAAM,KAAK,cAAc;AAAA,MAC1C,CAAC;AACD,WAAK,cAAc;AAAA,IACrB,CAAC;AAAA,EACH;AAAA,EAEQ,cAA8C;AACpD,QAAI,CAAC,KAAK,OAAQ,QAAO,CAAC;AAE1B,WACE,KAAK,OAAO,iBAAiB,EAAE,SAAS,KAAK,CAAC,EAC9C,OAAO,CAAC,OAAO;AACf,YAAM,MAAM,GAAG,QAAQ,YAAY;AACnC,aAAO,QAAQ,eAAe,QAAQ;AAAA,IACxC,CAAC;AAAA,EACH;AAAA,EAEQ,gBAAgB;AACtB,UAAM,UAAU,KAAK,YAAY;AACjC,UAAM,UAAU,KAAK,SAAS,QAAQ,KAAK,SAAS;AACpD,UAAM,IAAI,UAAU,wBAAwB;AAE5C,YAAQ,QAAQ,CAAC,KAA8B,MAAM;AACnD,UAAI,UAAU,KAAK;AACnB,UAAI,QAAQ,KAAK;AACjB,UAAI,OAAO,KAAK;AAEhB,UAAI,KAAK,UAAU;AACjB,YAAI,WAAW;AAAA,MACjB,OAAO;AACL,YAAI,WAAW;AAAA,MACjB;AAEA,UAAI,KAAK,SAAS;AAChB,cAAM,UAAU,MAAM;AACtB,cAAM,SAAS,MAAM,QAAQ,SAAS;AAEtC,YAAI,MAAM,aAAa,UAAU,KAAK;AAEtC,YAAI,MAAM,YAAY,eAAe,UAAU,IAAI,GAAG;AACtD,YAAI,MAAM,YAAY,eAAe,UAAU,IAAI,GAAG;AACtD,YAAI,MAAM,YAAY,eAAe,SAAS,IAAI,GAAG;AACrD,YAAI,MAAM,YAAY,eAAe,SAAS,IAAI,GAAG;AAAA,MACvD,OAAO;AACL,YAAI,MAAM,aAAa;AACvB,aAAK,aAAa,GAAG;AAAA,MACvB;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEQ,aAAa,KAAkB;AACrC,QAAI,MAAM,eAAe,aAAa;AACtC,QAAI,MAAM,eAAe,aAAa;AACtC,QAAI,MAAM,eAAe,aAAa;AACtC,QAAI,MAAM,eAAe,aAAa;AAAA,EACxC;AACF;AAEA,YAAY,SAAS;AAQrB,IAAOA,wBAAQ;",
+  "names": ["button_group_default"]
+}