npm - aeico-components - Versions diffs - 0.1.2 → 0.1.3 - Mend

aeico-components 0.1.2 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/dist/index.cjs +1182 -1182
package/dist/index.js +1182 -1182
package/package.json +63 -63
package/src/styles/color.css +117 -117
package/src/styles/components/alert.css +104 -104
package/src/styles/components/badge.css +67 -67
package/src/styles/components/breadcrumb-item.css +59 -59
package/src/styles/components/breadcrumb.css +19 -19
package/src/styles/components/button-group.css +25 -25
package/src/styles/components/button.css +213 -213
package/src/styles/components/card.css +64 -64
package/src/styles/components/checkbox.css +78 -78
package/src/styles/components/detail.css +127 -127
package/src/styles/components/dialog.css +103 -103
package/src/styles/components/divider.css +18 -18
package/src/styles/components/dropdown-item.css +91 -91
package/src/styles/components/dropdown.css +179 -179
package/src/styles/components/icon-button.css +116 -116
package/src/styles/components/icon.css +29 -29
package/src/styles/components/navbar.css +250 -250
package/src/styles/components/radio-group.css +360 -360
package/src/styles/components/select-option.css +43 -43
package/src/styles/components/select.css +222 -222
package/src/styles/components/slider.css +326 -326
package/src/styles/components/switch.css +117 -117
package/src/styles/components/tab-panel.css +8 -8
package/src/styles/components/tab.css +44 -44
package/src/styles/components/tabs.css +16 -16
package/src/styles/components/tag.css +107 -107
package/src/styles/components/text-input.css +110 -110
package/src/styles/layout.css +43 -43
package/src/styles/size.css +7 -7
package/src/styles/variables.css +368 -368

package/dist/index.cjs CHANGED Viewed

@@ -187,377 +187,377 @@ __publicField(AeicoField, "props", {
 __publicField(AeicoField, "watchers", {
   disabled: "onDisabledChanged"
 });
-const styleVariables = `:root,\r
-:host {\r
-  --ae-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",\r
-    "Noto Sans", "Liberation Sans", Arial, sans-serif,\r
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\r
-  --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,\r
-    "Liberation Mono", "Courier New", monospace;\r
-  font-family: var(--ae-font-sans-serif);\r
-  --blue:   #0e639c;\r
-  --green:  #28a745;\r
-  --red:    #dc3545;\r
-  --yellow: #ffc107;\r
-  --cyan:   #17a2b8;\r
-  --gray:   #6e6e6e;\r
-  --slate:  #64748b;\r
-  --dark:   #343a40;\r
-  --light:  #f8f9fa;\r
-}\r
-\r
-:root,\r
-:host {\r
-  /* Blue */\r
-  --blue-100: color-mix(in srgb, var(--blue) 20%, white);\r
-  --blue-200: color-mix(in srgb, var(--blue) 40%, white);\r
-  --blue-300: color-mix(in srgb, var(--blue) 60%, white);\r
-  --blue-400: color-mix(in srgb, var(--blue) 80%, white);\r
-  --blue-500: var(--blue);\r
-  --blue-600: color-mix(in srgb, var(--blue) 80%, black);\r
-  --blue-700: color-mix(in srgb, var(--blue) 60%, black);\r
-  --blue-800: color-mix(in srgb, var(--blue) 40%, black);\r
-  --blue-900: color-mix(in srgb, var(--blue) 20%, black);\r
-\r
-  /* Green */\r
-  --green-100: color-mix(in srgb, var(--green) 20%, white);\r
-  --green-200: color-mix(in srgb, var(--green) 40%, white);\r
-  --green-300: color-mix(in srgb, var(--green) 60%, white);\r
-  --green-400: color-mix(in srgb, var(--green) 80%, white);\r
-  --green-500: var(--green);\r
-  --green-600: color-mix(in srgb, var(--green) 80%, black);\r
-  --green-700: color-mix(in srgb, var(--green) 60%, black);\r
-  --green-800: color-mix(in srgb, var(--green) 40%, black);\r
-  --green-900: color-mix(in srgb, var(--green) 20%, black);\r
-\r
-  /* Red */\r
-  --red-100: color-mix(in srgb, var(--red) 20%, white);\r
-  --red-200: color-mix(in srgb, var(--red) 40%, white);\r
-  --red-300: color-mix(in srgb, var(--red) 60%, white);\r
-  --red-400: color-mix(in srgb, var(--red) 80%, white);\r
-  --red-500: var(--red);\r
-  --red-600: color-mix(in srgb, var(--red) 80%, black);\r
-  --red-700: color-mix(in srgb, var(--red) 60%, black);\r
-  --red-800: color-mix(in srgb, var(--red) 40%, black);\r
-  --red-900: color-mix(in srgb, var(--red) 20%, black);\r
-\r
-  /* Yellow */\r
-  --yellow-100: color-mix(in srgb, var(--yellow) 20%, white);\r
-  --yellow-200: color-mix(in srgb, var(--yellow) 40%, white);\r
-  --yellow-300: color-mix(in srgb, var(--yellow) 60%, white);\r
-  --yellow-400: color-mix(in srgb, var(--yellow) 80%, white);\r
-  --yellow-500: var(--yellow);\r
-  --yellow-600: color-mix(in srgb, var(--yellow) 80%, black);\r
-  --yellow-700: color-mix(in srgb, var(--yellow) 60%, black);\r
-  --yellow-800: color-mix(in srgb, var(--yellow) 40%, black);\r
-  --yellow-900: color-mix(in srgb, var(--yellow) 20%, black);\r
-\r
-  /* Cyan */\r
-  --cyan-100: color-mix(in srgb, var(--cyan) 20%, white);\r
-  --cyan-200: color-mix(in srgb, var(--cyan) 40%, white);\r
-  --cyan-300: color-mix(in srgb, var(--cyan) 60%, white);\r
-  --cyan-400: color-mix(in srgb, var(--cyan) 80%, white);\r
-  --cyan-500: var(--cyan);\r
-  --cyan-600: color-mix(in srgb, var(--cyan) 80%, black);\r
-  --cyan-700: color-mix(in srgb, var(--cyan) 60%, black);\r
-  --cyan-800: color-mix(in srgb, var(--cyan) 40%, black);\r
-  --cyan-900: color-mix(in srgb, var(--cyan) 20%, black);\r
-\r
-  /* Gray  (neutral — base #6e6e6e) */\r
-  --gray-100: color-mix(in srgb, var(--gray) 20%, white);\r
-  --gray-200: color-mix(in srgb, var(--gray) 40%, white);\r
-  --gray-300: color-mix(in srgb, var(--gray) 60%, white);\r
-  --gray-400: color-mix(in srgb, var(--gray) 80%, white);\r
-  --gray-500: var(--gray);\r
-  --gray-600: color-mix(in srgb, var(--gray) 80%, black);\r
-  --gray-700: color-mix(in srgb, var(--gray) 60%, black);\r
-  --gray-800: color-mix(in srgb, var(--gray) 40%, black);\r
-  --gray-900: color-mix(in srgb, var(--gray) 20%, black);\r
-\r
-  /* Slate  (blue-gray — base #64748b, used for 'secondary') */\r
-  --slate-100: color-mix(in srgb, var(--slate) 20%, white);\r
-  --slate-200: color-mix(in srgb, var(--slate) 40%, white);\r
-  --slate-300: color-mix(in srgb, var(--slate) 60%, white);\r
-  --slate-400: color-mix(in srgb, var(--slate) 80%, white);\r
-  --slate-500: var(--slate);\r
-  --slate-600: color-mix(in srgb, var(--slate) 80%, black);\r
-  --slate-700: color-mix(in srgb, var(--slate) 60%, black);\r
-  --slate-800: color-mix(in srgb, var(--slate) 40%, black);\r
-  --slate-900: color-mix(in srgb, var(--slate) 20%, black);\r
-\r
-  /* Dark  (base #343a40) */\r
-  --dark-100: color-mix(in srgb, var(--dark) 20%, white);\r
-  --dark-200: color-mix(in srgb, var(--dark) 40%, white);\r
-  --dark-300: color-mix(in srgb, var(--dark) 60%, white);\r
-  --dark-400: color-mix(in srgb, var(--dark) 80%, white);\r
-  --dark-500: var(--dark);\r
-  --dark-600: color-mix(in srgb, var(--dark) 80%, black);\r
-  --dark-700: color-mix(in srgb, var(--dark) 60%, black);\r
-  --dark-800: color-mix(in srgb, var(--dark) 40%, black);\r
-  --dark-900: color-mix(in srgb, var(--dark) 20%, black);\r
-\r
-  /* Light  (base #f8f9fa) */\r
-  --light-100: color-mix(in srgb, var(--light) 20%, white);\r
-  --light-200: color-mix(in srgb, var(--light) 40%, white);\r
-  --light-300: color-mix(in srgb, var(--light) 60%, white);\r
-  --light-400: color-mix(in srgb, var(--light) 80%, white);\r
-  --light-500: var(--light);\r
-  --light-600: color-mix(in srgb, var(--light) 80%, black);\r
-  --light-700: color-mix(in srgb, var(--light) 60%, black);\r
-  --light-800: color-mix(in srgb, var(--light) 40%, black);\r
-  --light-900: color-mix(in srgb, var(--light) 20%, black);\r
-}\r
-\r
-:root,\r
-:host {\r
-  /* Hover / active mix (light default — overridden in § 6 dark) */\r
-  --color-mix-hover:  black 10%;\r
-  --color-mix-active: black 20%;\r
-\r
-  /* Primary (Blue) */\r
-  --color-primary:          var(--blue-500);\r
-  --color-primary-hover:    color-mix(in srgb, var(--color-primary), var(--color-mix-hover));\r
-  --color-primary-active:   color-mix(in srgb, var(--color-primary), var(--color-mix-active));\r
-  --color-primary-disabled: color-mix(in srgb, var(--blue) 50%, var(--gray-500));\r
-\r
-  /* Success (Green) */\r
-  --color-success:          var(--green-500);\r
-  --color-success-hover:    color-mix(in srgb, var(--color-success), var(--color-mix-hover));\r
-  --color-success-active:   color-mix(in srgb, var(--color-success), var(--color-mix-active));\r
-  --color-success-disabled: color-mix(in srgb, var(--green) 50%, var(--gray-500));\r
-\r
-  /* Danger (Red) */\r
-  --color-danger:           var(--red-500);\r
-  --color-danger-hover:     color-mix(in srgb, var(--color-danger), var(--color-mix-hover));\r
-  --color-danger-active:    color-mix(in srgb, var(--color-danger), var(--color-mix-active));\r
-  --color-danger-disabled:  color-mix(in srgb, var(--red) 50%, var(--gray-500));\r
-\r
-  /* Warning (Yellow) */\r
-  --color-warning:          var(--yellow-500);\r
-  --color-warning-hover:    color-mix(in srgb, var(--color-warning), var(--color-mix-hover));\r
-  --color-warning-active:   color-mix(in srgb, var(--color-warning), var(--color-mix-active));\r
-  --color-warning-disabled: color-mix(in srgb, var(--yellow) 50%, var(--gray-500));\r
-\r
-  /* Info (Cyan) */\r
-  --color-info:             var(--cyan-500);\r
-  --color-info-hover:       color-mix(in srgb, var(--color-info), var(--color-mix-hover));\r
-  --color-info-active:      color-mix(in srgb, var(--color-info), var(--color-mix-active));\r
-  --color-info-disabled:    color-mix(in srgb, var(--cyan) 50%, var(--gray-500));\r
-\r
-  /* Secondary (Slate) — base differs per theme, overridden in § 6 dark */\r
-  --color-secondary:        var(--slate-500);\r
-  --color-secondary-hover:  color-mix(in srgb, var(--color-secondary), var(--color-mix-hover));\r
-  --color-secondary-active: color-mix(in srgb, var(--color-secondary), var(--color-mix-active));\r
-  --color-secondary-text:   var(--slate-700);\r
-\r
-  /* On-solid — text color on filled (saturated) backgrounds.\r
-     Fixed white: blue/green/red/cyan buttons always have white text.\r
-     Does NOT follow --color-text-main. */\r
-  --color-on-solid: white;\r
-}\r
-\r
-\r
-.theme-light,\r
-:root[theme="light"],\r
-:host([theme="light"]),\r
-:host-context([theme="light"]),\r
-:where(:root),\r
-:host {\r
-  color-scheme: light;\r
-\r
-  /* Gray UI aliases — lighter palette steps for elements on white background */\r
-  --color-gray-dark:     var(--gray-400);\r
-  --color-gray:          var(--gray-300);\r
-  --color-gray-light:    var(--gray-200);\r
-  --color-gray-lighter:  var(--gray-100);\r
-  --color-gray-lightest: color-mix(in srgb, var(--gray) 10%, white);\r
-\r
-  /* Text */\r
-  --color-text-main:       var(--dark-700);\r
-  --color-text-muted:      var(--gray-600);\r
-  --color-text-disabled:   var(--gray-300);\r
-  --color-text-link:       var(--blue-500);\r
-  --color-text-link-hover: var(--blue-700);\r
-\r
-  /* Surfaces */\r
-  --surface-sunken:  var(--light-500);\r
-  --surface-base:    white;\r
-  --surface-raised:  var(--light-500);\r
-  --surface-overlay: white;\r
-  --color-overlay:   rgba(0, 0, 0, 0.4);\r
-\r
-  /* Borders */\r
-  --border-subtle:   rgba(0, 0, 0, 0.08);\r
-  --border-default:  rgba(0, 0, 0, 0.15);\r
-  --border-hover:    rgba(0, 0, 0, 0.25);\r
-  --border-focus:    var(--color-primary);\r
-  --border-disabled: rgba(0, 0, 0, 0.06);\r
-\r
-  /* Focus ring */\r
-  --focus-ring:    rgb(from var(--blue) r g b / 0.30);\r
-  --focus-ring-sm: rgb(from var(--blue) r g b / 0.15);\r
-\r
-  /* Subtle intent tokens — light context */\r
-  --color-primary-bg-subtle:       rgb(from var(--blue) r g b / 0.08);\r
-  --color-primary-border-subtle:   rgb(from var(--blue) r g b / 0.40);\r
-  --color-primary-text-emphasis:   var(--blue-700);\r
-\r
-  --color-success-bg-subtle:       rgb(from var(--green) r g b / 0.08);\r
-  --color-success-border-subtle:   rgb(from var(--green) r g b / 0.40);\r
-  --color-success-text-emphasis:   var(--green-700);\r
-\r
-  --color-danger-bg-subtle:        rgb(from var(--red) r g b / 0.08);\r
-  --color-danger-border-subtle:    rgb(from var(--red) r g b / 0.40);\r
-  --color-danger-text-emphasis:    var(--red-700);\r
-\r
-  --color-warning-bg-subtle:       rgb(from var(--yellow) r g b / 0.08);\r
-  --color-warning-border-subtle:   rgb(from var(--yellow) r g b / 0.40);\r
-  --color-warning-text-emphasis:   var(--yellow-700);\r
-\r
-  --color-info-bg-subtle:          rgb(from var(--cyan) r g b / 0.08);\r
-  --color-info-border-subtle:      rgb(from var(--cyan) r g b / 0.40);\r
-  --color-info-text-emphasis:      var(--cyan-700);\r
-\r
-  --color-secondary-bg-subtle:     rgb(from var(--slate) r g b / 0.08);\r
-  --color-secondary-border-subtle: rgb(from var(--slate) r g b / 0.40);\r
-  --color-secondary-text-emphasis: var(--slate-700);\r
-\r
-  --color-light-bg-subtle:         var(--gray-100);   /* opaque on white: ~#e2e2e2 */\r
-  --color-light-border-subtle:     var(--gray-200);   /* opaque on white: ~#c4c4c4 */\r
-\r
-  --color-dark-bg-subtle:          var(--dark-100);   /* opaque on white: ~#d6d8d9 */\r
-  --color-dark-border-subtle:      var(--dark-300);   /* opaque on white: ~#85898c */\r
-\r
-  /* Component tokens — light defaults */\r
-  --action-btn-bg:          var(--gray-200);\r
-  --action-btn-bg-hover:    var(--color-primary);\r
-  --action-btn-color:       var(--gray-600);\r
-  --action-btn-color-hover: white;\r
-\r
-  --clear-btn-bg-hover:     var(--color-danger);\r
-  --clear-btn-color-hover:  white;\r
-\r
-  --reset-btn-border-radius: 2px;\r
-  --reset-btn-bg:            var(--action-btn-bg);\r
-  --reset-btn-bg-hover:      var(--action-btn-bg-hover);\r
-  --reset-btn-color:         var(--action-btn-color);\r
-  --reset-btn-color-hover:   var(--action-btn-color-hover);\r
-  --reset-btn-transition:    all 0.12s;\r
-\r
-  --clear-btn-border-radius: 2px;\r
-  --clear-btn-bg:            var(--action-btn-bg);\r
-  --clear-btn-color:         var(--action-btn-color);\r
-  --clear-btn-transition:    all 0.12s;\r
-}\r
-\r
-:root,\r
-:host {\r
-  --size-scale: 1;\r
-  --size-base:  calc(1rem * var(--size-scale));                    /* 16px */\r
-  --size-xl:    round(calc(var(--size-l) * 1.125), 1px);           /* 23px */\r
-  --size-l:     round(calc(var(--size-m) * 1.125 * 1.125), 1px);   /* 20px */\r
-  --size-m:     var(--size-base);                                  /* 16px */\r
-  --size-s:     round(calc(var(--size-m) / 1.125), 1px);           /* 14px */\r
-  --size-xs:    round(calc(var(--size-s) / 1.125), 1px);           /* 12px */\r
-  --size-2xs:   round(calc(var(--size-xs) / 1.125), 1px);          /* 11px */\r
-  --size-3xs:   round(calc(var(--size-2xs) / 1.125), 1px);         /* 10px */\r
-}\r
-\r
-/* Layout tokens — defined on :root so all light DOM elements can use them */\r
-:root,\r
-:host {\r
-  --container-max-width: 1280px;\r
-  --container-padding-x: 1.5rem;\r
-}\r
-\r
-.theme-dark,\r
-:root[theme="dark"],\r
-:host([theme="dark"]),\r
-:host-context([theme="dark"]) {\r
-  color-scheme: dark;\r
-\r
-  /* Hover / active — slightly gentler on dark backgrounds */\r
-  --color-mix-hover:  black 8%;\r
-  --color-mix-active: black 16%;\r
-\r
-  /* Gray UI aliases — darker palette steps for elements on dark background */\r
-  --color-gray-dark:     var(--gray-800);\r
-  --color-gray:          var(--gray-700);\r
-  --color-gray-light:    var(--gray-600);\r
-  --color-gray-lighter:  var(--gray-500);\r
-  --color-gray-lightest: var(--gray-400);\r
-\r
-  /* Secondary — deeper base on dark background */\r
-  --color-secondary:      var(--slate-700);\r
-  --color-secondary-text: var(--slate-300);\r
-\r
-  /* Text */\r
-  --color-text-main:       white;\r
-  --color-text-muted:      var(--gray-200);\r
-  --color-text-disabled:   var(--gray-500);\r
-  --color-text-link:       var(--blue-300);\r
-  --color-text-link-hover: var(--blue-200);\r
-\r
-  /* Surfaces */\r
-  --surface-sunken:  var(--gray-900);\r
-  --surface-base:    color-mix(in srgb, var(--gray) 27%, black);\r
-  --surface-raised:  color-mix(in srgb, var(--gray) 34%, black);\r
-  --surface-overlay: color-mix(in srgb, var(--gray) 38%, black);\r
-  --color-overlay:   rgba(0, 0, 0, 0.6);\r
-\r
-  /* Borders */\r
-  --border-subtle:   rgba(255, 255, 255, 0.08);\r
-  --border-default:  rgba(255, 255, 255, 0.12);\r
-  --border-hover:    rgba(255, 255, 255, 0.20);\r
-  --border-focus:    var(--color-primary);\r
-  --border-disabled: rgba(255, 255, 255, 0.06);\r
-\r
-  /* Focus ring */\r
-  --focus-ring:    rgb(from var(--blue) r g b / 0.25);\r
-  --focus-ring-sm: rgb(from var(--blue) r g b / 0.10);\r
-\r
-  /* Subtle intent tokens — dark context (more alpha, lighter text-emphasis) */\r
-  --color-primary-bg-subtle:       rgb(from var(--blue) r g b / 0.10);\r
-  --color-primary-border-subtle:   rgb(from var(--blue) r g b / 0.30);\r
-  --color-primary-text-emphasis:   var(--blue-300);\r
-\r
-  --color-success-bg-subtle:       rgb(from var(--green) r g b / 0.10);\r
-  --color-success-border-subtle:   rgb(from var(--green) r g b / 0.30);\r
-  --color-success-text-emphasis:   var(--green-300);\r
-\r
-  --color-danger-bg-subtle:        rgb(from var(--red) r g b / 0.10);\r
-  --color-danger-border-subtle:    rgb(from var(--red) r g b / 0.30);\r
-  --color-danger-text-emphasis:    var(--red-300);\r
-\r
-  --color-warning-bg-subtle:       rgb(from var(--yellow) r g b / 0.10);\r
-  --color-warning-border-subtle:   rgb(from var(--yellow) r g b / 0.30);\r
-  --color-warning-text-emphasis:   var(--yellow-300);\r
-\r
-  --color-info-bg-subtle:          rgb(from var(--cyan) r g b / 0.10);\r
-  --color-info-border-subtle:      rgb(from var(--cyan) r g b / 0.30);\r
-  --color-info-text-emphasis:      var(--cyan-300);\r
-\r
-  --color-secondary-bg-subtle:     rgb(from var(--slate) r g b / 0.10);\r
-  --color-secondary-border-subtle: rgb(from var(--slate) r g b / 0.30);\r
-  --color-secondary-text-emphasis: var(--slate-300);\r
-\r
-  --color-light-bg-subtle:         rgb(from var(--light) r g b / 0.20);\r
-  --color-light-border-subtle:     rgb(from var(--light) r g b / 0.25);\r
-\r
-  --color-dark-bg-subtle:          rgb(from var(--dark) r g b / 0.30);\r
-  --color-dark-border-subtle:      rgb(from var(--dark) r g b / 0.50);\r
-\r
-  /* Component tokens — dark overrides */\r
-  --action-btn-bg:          var(--color-gray);\r
-  --action-btn-bg-hover:    color-mix(in srgb, var(--blue) 25%, var(--gray-800));\r
-  --action-btn-color:       var(--gray-400);\r
-  --action-btn-color-hover: var(--cyan-300);\r
-  --clear-btn-bg-hover:     color-mix(in srgb, var(--red) 25%, var(--gray-800));\r
-  --clear-btn-color-hover:  var(--red-300);\r
-}\r
+const styleVariables = `: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);
+  --blue:   #0e639c;
+  --green:  #28a745;
+  --red:    #dc3545;
+  --yellow: #ffc107;
+  --cyan:   #17a2b8;
+  --gray:   #6e6e6e;
+  --slate:  #64748b;
+  --dark:   #343a40;
+  --light:  #f8f9fa;
+}
+:root,
+:host {
+  /* Blue */
+  --blue-100: color-mix(in srgb, var(--blue) 20%, white);
+  --blue-200: color-mix(in srgb, var(--blue) 40%, white);
+  --blue-300: color-mix(in srgb, var(--blue) 60%, white);
+  --blue-400: color-mix(in srgb, var(--blue) 80%, white);
+  --blue-500: var(--blue);
+  --blue-600: color-mix(in srgb, var(--blue) 80%, black);
+  --blue-700: color-mix(in srgb, var(--blue) 60%, black);
+  --blue-800: color-mix(in srgb, var(--blue) 40%, black);
+  --blue-900: color-mix(in srgb, var(--blue) 20%, black);
+  /* Green */
+  --green-100: color-mix(in srgb, var(--green) 20%, white);
+  --green-200: color-mix(in srgb, var(--green) 40%, white);
+  --green-300: color-mix(in srgb, var(--green) 60%, white);
+  --green-400: color-mix(in srgb, var(--green) 80%, white);
+  --green-500: var(--green);
+  --green-600: color-mix(in srgb, var(--green) 80%, black);
+  --green-700: color-mix(in srgb, var(--green) 60%, black);
+  --green-800: color-mix(in srgb, var(--green) 40%, black);
+  --green-900: color-mix(in srgb, var(--green) 20%, black);
+  /* Red */
+  --red-100: color-mix(in srgb, var(--red) 20%, white);
+  --red-200: color-mix(in srgb, var(--red) 40%, white);
+  --red-300: color-mix(in srgb, var(--red) 60%, white);
+  --red-400: color-mix(in srgb, var(--red) 80%, white);
+  --red-500: var(--red);
+  --red-600: color-mix(in srgb, var(--red) 80%, black);
+  --red-700: color-mix(in srgb, var(--red) 60%, black);
+  --red-800: color-mix(in srgb, var(--red) 40%, black);
+  --red-900: color-mix(in srgb, var(--red) 20%, black);
+  /* Yellow */
+  --yellow-100: color-mix(in srgb, var(--yellow) 20%, white);
+  --yellow-200: color-mix(in srgb, var(--yellow) 40%, white);
+  --yellow-300: color-mix(in srgb, var(--yellow) 60%, white);
+  --yellow-400: color-mix(in srgb, var(--yellow) 80%, white);
+  --yellow-500: var(--yellow);
+  --yellow-600: color-mix(in srgb, var(--yellow) 80%, black);
+  --yellow-700: color-mix(in srgb, var(--yellow) 60%, black);
+  --yellow-800: color-mix(in srgb, var(--yellow) 40%, black);
+  --yellow-900: color-mix(in srgb, var(--yellow) 20%, black);
+  /* Cyan */
+  --cyan-100: color-mix(in srgb, var(--cyan) 20%, white);
+  --cyan-200: color-mix(in srgb, var(--cyan) 40%, white);
+  --cyan-300: color-mix(in srgb, var(--cyan) 60%, white);
+  --cyan-400: color-mix(in srgb, var(--cyan) 80%, white);
+  --cyan-500: var(--cyan);
+  --cyan-600: color-mix(in srgb, var(--cyan) 80%, black);
+  --cyan-700: color-mix(in srgb, var(--cyan) 60%, black);
+  --cyan-800: color-mix(in srgb, var(--cyan) 40%, black);
+  --cyan-900: color-mix(in srgb, var(--cyan) 20%, black);
+  /* Gray  (neutral — base #6e6e6e) */
+  --gray-100: color-mix(in srgb, var(--gray) 20%, white);
+  --gray-200: color-mix(in srgb, var(--gray) 40%, white);
+  --gray-300: color-mix(in srgb, var(--gray) 60%, white);
+  --gray-400: color-mix(in srgb, var(--gray) 80%, white);
+  --gray-500: var(--gray);
+  --gray-600: color-mix(in srgb, var(--gray) 80%, black);
+  --gray-700: color-mix(in srgb, var(--gray) 60%, black);
+  --gray-800: color-mix(in srgb, var(--gray) 40%, black);
+  --gray-900: color-mix(in srgb, var(--gray) 20%, black);
+  /* Slate  (blue-gray — base #64748b, used for 'secondary') */
+  --slate-100: color-mix(in srgb, var(--slate) 20%, white);
+  --slate-200: color-mix(in srgb, var(--slate) 40%, white);
+  --slate-300: color-mix(in srgb, var(--slate) 60%, white);
+  --slate-400: color-mix(in srgb, var(--slate) 80%, white);
+  --slate-500: var(--slate);
+  --slate-600: color-mix(in srgb, var(--slate) 80%, black);
+  --slate-700: color-mix(in srgb, var(--slate) 60%, black);
+  --slate-800: color-mix(in srgb, var(--slate) 40%, black);
+  --slate-900: color-mix(in srgb, var(--slate) 20%, black);
+  /* Dark  (base #343a40) */
+  --dark-100: color-mix(in srgb, var(--dark) 20%, white);
+  --dark-200: color-mix(in srgb, var(--dark) 40%, white);
+  --dark-300: color-mix(in srgb, var(--dark) 60%, white);
+  --dark-400: color-mix(in srgb, var(--dark) 80%, white);
+  --dark-500: var(--dark);
+  --dark-600: color-mix(in srgb, var(--dark) 80%, black);
+  --dark-700: color-mix(in srgb, var(--dark) 60%, black);
+  --dark-800: color-mix(in srgb, var(--dark) 40%, black);
+  --dark-900: color-mix(in srgb, var(--dark) 20%, black);
+  /* Light  (base #f8f9fa) */
+  --light-100: color-mix(in srgb, var(--light) 20%, white);
+  --light-200: color-mix(in srgb, var(--light) 40%, white);
+  --light-300: color-mix(in srgb, var(--light) 60%, white);
+  --light-400: color-mix(in srgb, var(--light) 80%, white);
+  --light-500: var(--light);
+  --light-600: color-mix(in srgb, var(--light) 80%, black);
+  --light-700: color-mix(in srgb, var(--light) 60%, black);
+  --light-800: color-mix(in srgb, var(--light) 40%, black);
+  --light-900: color-mix(in srgb, var(--light) 20%, black);
+}
+:root,
+:host {
+  /* Hover / active mix (light default — overridden in § 6 dark) */
+  --color-mix-hover:  black 10%;
+  --color-mix-active: black 20%;
+  /* Primary (Blue) */
+  --color-primary:          var(--blue-500);
+  --color-primary-hover:    color-mix(in srgb, var(--color-primary), var(--color-mix-hover));
+  --color-primary-active:   color-mix(in srgb, var(--color-primary), var(--color-mix-active));
+  --color-primary-disabled: color-mix(in srgb, var(--blue) 50%, var(--gray-500));
+  /* Success (Green) */
+  --color-success:          var(--green-500);
+  --color-success-hover:    color-mix(in srgb, var(--color-success), var(--color-mix-hover));
+  --color-success-active:   color-mix(in srgb, var(--color-success), var(--color-mix-active));
+  --color-success-disabled: color-mix(in srgb, var(--green) 50%, var(--gray-500));
+  /* Danger (Red) */
+  --color-danger:           var(--red-500);
+  --color-danger-hover:     color-mix(in srgb, var(--color-danger), var(--color-mix-hover));
+  --color-danger-active:    color-mix(in srgb, var(--color-danger), var(--color-mix-active));
+  --color-danger-disabled:  color-mix(in srgb, var(--red) 50%, var(--gray-500));
+  /* Warning (Yellow) */
+  --color-warning:          var(--yellow-500);
+  --color-warning-hover:    color-mix(in srgb, var(--color-warning), var(--color-mix-hover));
+  --color-warning-active:   color-mix(in srgb, var(--color-warning), var(--color-mix-active));
+  --color-warning-disabled: color-mix(in srgb, var(--yellow) 50%, var(--gray-500));
+  /* Info (Cyan) */
+  --color-info:             var(--cyan-500);
+  --color-info-hover:       color-mix(in srgb, var(--color-info), var(--color-mix-hover));
+  --color-info-active:      color-mix(in srgb, var(--color-info), var(--color-mix-active));
+  --color-info-disabled:    color-mix(in srgb, var(--cyan) 50%, var(--gray-500));
+  /* Secondary (Slate) — base differs per theme, overridden in § 6 dark */
+  --color-secondary:        var(--slate-500);
+  --color-secondary-hover:  color-mix(in srgb, var(--color-secondary), var(--color-mix-hover));
+  --color-secondary-active: color-mix(in srgb, var(--color-secondary), var(--color-mix-active));
+  --color-secondary-text:   var(--slate-700);
+  /* On-solid — text color on filled (saturated) backgrounds.
+     Fixed white: blue/green/red/cyan buttons always have white text.
+     Does NOT follow --color-text-main. */
+  --color-on-solid: white;
+}
+.theme-light,
+:root[theme="light"],
+:host([theme="light"]),
+:host-context([theme="light"]),
+:where(:root),
+:host {
+  color-scheme: light;
+  /* Gray UI aliases — lighter palette steps for elements on white background */
+  --color-gray-dark:     var(--gray-400);
+  --color-gray:          var(--gray-300);
+  --color-gray-light:    var(--gray-200);
+  --color-gray-lighter:  var(--gray-100);
+  --color-gray-lightest: color-mix(in srgb, var(--gray) 10%, white);
+  /* Text */
+  --color-text-main:       var(--dark-700);
+  --color-text-muted:      var(--gray-600);
+  --color-text-disabled:   var(--gray-300);
+  --color-text-link:       var(--blue-500);
+  --color-text-link-hover: var(--blue-700);
+  /* Surfaces */
+  --surface-sunken:  var(--light-500);
+  --surface-base:    white;
+  --surface-raised:  var(--light-500);
+  --surface-overlay: white;
+  --color-overlay:   rgba(0, 0, 0, 0.4);
+  /* Borders */
+  --border-subtle:   rgba(0, 0, 0, 0.08);
+  --border-default:  rgba(0, 0, 0, 0.15);
+  --border-hover:    rgba(0, 0, 0, 0.25);
+  --border-focus:    var(--color-primary);
+  --border-disabled: rgba(0, 0, 0, 0.06);
+  /* Focus ring */
+  --focus-ring:    rgb(from var(--blue) r g b / 0.30);
+  --focus-ring-sm: rgb(from var(--blue) r g b / 0.15);
+  /* Subtle intent tokens — light context */
+  --color-primary-bg-subtle:       rgb(from var(--blue) r g b / 0.08);
+  --color-primary-border-subtle:   rgb(from var(--blue) r g b / 0.40);
+  --color-primary-text-emphasis:   var(--blue-700);
+  --color-success-bg-subtle:       rgb(from var(--green) r g b / 0.08);
+  --color-success-border-subtle:   rgb(from var(--green) r g b / 0.40);
+  --color-success-text-emphasis:   var(--green-700);
+  --color-danger-bg-subtle:        rgb(from var(--red) r g b / 0.08);
+  --color-danger-border-subtle:    rgb(from var(--red) r g b / 0.40);
+  --color-danger-text-emphasis:    var(--red-700);
+  --color-warning-bg-subtle:       rgb(from var(--yellow) r g b / 0.08);
+  --color-warning-border-subtle:   rgb(from var(--yellow) r g b / 0.40);
+  --color-warning-text-emphasis:   var(--yellow-700);
+  --color-info-bg-subtle:          rgb(from var(--cyan) r g b / 0.08);
+  --color-info-border-subtle:      rgb(from var(--cyan) r g b / 0.40);
+  --color-info-text-emphasis:      var(--cyan-700);
+  --color-secondary-bg-subtle:     rgb(from var(--slate) r g b / 0.08);
+  --color-secondary-border-subtle: rgb(from var(--slate) r g b / 0.40);
+  --color-secondary-text-emphasis: var(--slate-700);
+  --color-light-bg-subtle:         var(--gray-100);   /* opaque on white: ~#e2e2e2 */
+  --color-light-border-subtle:     var(--gray-200);   /* opaque on white: ~#c4c4c4 */
+  --color-dark-bg-subtle:          var(--dark-100);   /* opaque on white: ~#d6d8d9 */
+  --color-dark-border-subtle:      var(--dark-300);   /* opaque on white: ~#85898c */
+  /* Component tokens — light defaults */
+  --action-btn-bg:          var(--gray-200);
+  --action-btn-bg-hover:    var(--color-primary);
+  --action-btn-color:       var(--gray-600);
+  --action-btn-color-hover: white;
+  --clear-btn-bg-hover:     var(--color-danger);
+  --clear-btn-color-hover:  white;
+  --reset-btn-border-radius: 2px;
+  --reset-btn-bg:            var(--action-btn-bg);
+  --reset-btn-bg-hover:      var(--action-btn-bg-hover);
+  --reset-btn-color:         var(--action-btn-color);
+  --reset-btn-color-hover:   var(--action-btn-color-hover);
+  --reset-btn-transition:    all 0.12s;
+  --clear-btn-border-radius: 2px;
+  --clear-btn-bg:            var(--action-btn-bg);
+  --clear-btn-color:         var(--action-btn-color);
+  --clear-btn-transition:    all 0.12s;
+}
+:root,
+:host {
+  --size-scale: 1;
+  --size-base:  calc(1rem * var(--size-scale));                    /* 16px */
+  --size-xl:    round(calc(var(--size-l) * 1.125), 1px);           /* 23px */
+  --size-l:     round(calc(var(--size-m) * 1.125 * 1.125), 1px);   /* 20px */
+  --size-m:     var(--size-base);                                  /* 16px */
+  --size-s:     round(calc(var(--size-m) / 1.125), 1px);           /* 14px */
+  --size-xs:    round(calc(var(--size-s) / 1.125), 1px);           /* 12px */
+  --size-2xs:   round(calc(var(--size-xs) / 1.125), 1px);          /* 11px */
+  --size-3xs:   round(calc(var(--size-2xs) / 1.125), 1px);         /* 10px */
+}
+/* Layout tokens — 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 — slightly gentler on dark backgrounds */
+  --color-mix-hover:  black 8%;
+  --color-mix-active: black 16%;
+  /* Gray UI aliases — darker palette steps for elements on dark background */
+  --color-gray-dark:     var(--gray-800);
+  --color-gray:          var(--gray-700);
+  --color-gray-light:    var(--gray-600);
+  --color-gray-lighter:  var(--gray-500);
+  --color-gray-lightest: var(--gray-400);
+  /* Secondary — deeper base on dark background */
+  --color-secondary:      var(--slate-700);
+  --color-secondary-text: var(--slate-300);
+  /* Text */
+  --color-text-main:       white;
+  --color-text-muted:      var(--gray-200);
+  --color-text-disabled:   var(--gray-500);
+  --color-text-link:       var(--blue-300);
+  --color-text-link-hover: var(--blue-200);
+  /* Surfaces */
+  --surface-sunken:  var(--gray-900);
+  --surface-base:    color-mix(in srgb, var(--gray) 27%, black);
+  --surface-raised:  color-mix(in srgb, var(--gray) 34%, black);
+  --surface-overlay: color-mix(in srgb, var(--gray) 38%, black);
+  --color-overlay:   rgba(0, 0, 0, 0.6);
+  /* Borders */
+  --border-subtle:   rgba(255, 255, 255, 0.08);
+  --border-default:  rgba(255, 255, 255, 0.12);
+  --border-hover:    rgba(255, 255, 255, 0.20);
+  --border-focus:    var(--color-primary);
+  --border-disabled: rgba(255, 255, 255, 0.06);
+  /* Focus ring */
+  --focus-ring:    rgb(from var(--blue) r g b / 0.25);
+  --focus-ring-sm: rgb(from var(--blue) r g b / 0.10);
+  /* Subtle intent tokens — dark context (more alpha, lighter text-emphasis) */
+  --color-primary-bg-subtle:       rgb(from var(--blue) r g b / 0.10);
+  --color-primary-border-subtle:   rgb(from var(--blue) r g b / 0.30);
+  --color-primary-text-emphasis:   var(--blue-300);
+  --color-success-bg-subtle:       rgb(from var(--green) r g b / 0.10);
+  --color-success-border-subtle:   rgb(from var(--green) r g b / 0.30);
+  --color-success-text-emphasis:   var(--green-300);
+  --color-danger-bg-subtle:        rgb(from var(--red) r g b / 0.10);
+  --color-danger-border-subtle:    rgb(from var(--red) r g b / 0.30);
+  --color-danger-text-emphasis:    var(--red-300);
+  --color-warning-bg-subtle:       rgb(from var(--yellow) r g b / 0.10);
+  --color-warning-border-subtle:   rgb(from var(--yellow) r g b / 0.30);
+  --color-warning-text-emphasis:   var(--yellow-300);
+  --color-info-bg-subtle:          rgb(from var(--cyan) r g b / 0.10);
+  --color-info-border-subtle:      rgb(from var(--cyan) r g b / 0.30);
+  --color-info-text-emphasis:      var(--cyan-300);
+  --color-secondary-bg-subtle:     rgb(from var(--slate) r g b / 0.10);
+  --color-secondary-border-subtle: rgb(from var(--slate) r g b / 0.30);
+  --color-secondary-text-emphasis: var(--slate-300);
+  --color-light-bg-subtle:         rgb(from var(--light) r g b / 0.20);
+  --color-light-border-subtle:     rgb(from var(--light) r g b / 0.25);
+  --color-dark-bg-subtle:          rgb(from var(--dark) r g b / 0.30);
+  --color-dark-border-subtle:      rgb(from var(--dark) r g b / 0.50);
+  /* Component tokens — dark overrides */
+  --action-btn-bg:          var(--color-gray);
+  --action-btn-bg-hover:    color-mix(in srgb, var(--blue) 25%, var(--gray-800));
+  --action-btn-color:       var(--gray-400);
+  --action-btn-color-hover: var(--cyan-300);
+  --clear-btn-bg-hover:     color-mix(in srgb, var(--red) 25%, var(--gray-800));
+  --clear-btn-color-hover:  var(--red-300);
+}
 `;
-const sizeCSS = ':host([size="xs"]) { font-size: var(--size-xs); }\r\n:host([size="sm"]) { font-size: var(--size-s); }\r\n:host([size="md"]) { font-size: var(--size-m); }\r\n:host([size="lg"]) { font-size: var(--size-l); }\r\n:host([size="xl"]) { font-size: var(--size-xl); }\r\n:host([size="3xs"]) { font-size: var(--size-3xs); }\r\n:host([size="2xs"]) { font-size: var(--size-2xs); }\r\n';
-const style$a = ":host {\r\n  display: block;\r\n  flex: 1;\r\n  min-width: 0;\r\n  font-size: var(--size-base);\r\n\r\n  /* Layout variables */\r\n  --input-field-gap: 4px;\r\n  \r\n  /* Input element variables */\r\n  --input-font-size: 1em;\r\n  --input-padding: 0.333em 0.583em;\r\n  --input-border-width: 1px;\r\n  --input-border-radius: 2px;\r\n  --input-border-color: var(--border-subtle);\r\n  --input-border-color-hover: var(--border-default);\r\n  --input-border-color-focus: var(--border-focus);\r\n  --input-bg: var(--surface-base);\r\n  --input-bg-hover: var(--surface-raised);\r\n  --input-bg-focus: var(--surface-raised);\r\n  --input-color: var(--color-text-muted);\r\n  --input-placeholder-color: var(--color-text-disabled);\r\n  --input-transition: border-color 0.12s, background 0.12s;\r\n}\r\n\r\n.input-container {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--input-field-gap);\r\n  width: 100%;\r\n}\r\n\r\ninput {\r\n  flex: 1;\r\n  min-width: 0;\r\n  font-size: var(--input-font-size);\r\n  padding: var(--input-padding);\r\n  border: var(--input-border-width) solid var(--input-border-color);\r\n  border-radius: var(--input-border-radius);\r\n  background: var(--input-bg);\r\n  color: var(--input-color);\r\n  transition: var(--input-transition);\r\n}\r\n\r\ninput::placeholder {\r\n  color: var(--input-placeholder-color);\r\n}\r\n\r\ninput:focus {\r\n  outline: none;\r\n  border-color: var(--input-border-color-focus);\r\n  background: var(--input-bg-focus);\r\n}\r\n\r\ninput:hover:not(:focus) {\r\n  border-color: var(--input-border-color-hover);\r\n  background: var(--input-bg-hover);\r\n}\r\n\r\ninput:disabled {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* Clear button styles */\r\n.clear-btn {\r\n  width: 1.333em;\r\n  height: 1.333em;\r\n  border: none;\r\n  border-radius: var(--clear-btn-border-radius);\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: var(--clear-btn-bg);\r\n  color: var(--clear-btn-color);\r\n  transition: var(--clear-btn-transition);\r\n  flex-shrink: 0;\r\n  line-height: 1;\r\n}\r\n\r\n.clear-btn:hover {\r\n  background: var(--clear-btn-bg-hover);\r\n  color: var(--clear-btn-color-hover);\r\n}\r\n\r\n/* Reset button styles */\r\n.reset-btn {\r\n  width: 1.333em;\r\n  height: 1.333em;\r\n  border: none;\r\n  border-radius: var(--reset-btn-border-radius);\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: var(--reset-btn-bg);\r\n  color: var(--reset-btn-color);\r\n  transition: var(--reset-btn-transition);\r\n  flex-shrink: 0;\r\n  line-height: 1;\r\n}\r\n\r\n.reset-btn:hover {\r\n  background: var(--reset-btn-bg-hover);\r\n  color: var(--reset-btn-color-hover);\r\n}\r\n\r\n\r\n\r\n";
+const sizeCSS = ':host([size="xs"]) { font-size: var(--size-xs); }\n:host([size="sm"]) { font-size: var(--size-s); }\n:host([size="md"]) { font-size: var(--size-m); }\n:host([size="lg"]) { font-size: var(--size-l); }\n:host([size="xl"]) { font-size: var(--size-xl); }\n:host([size="3xs"]) { font-size: var(--size-3xs); }\n:host([size="2xs"]) { font-size: var(--size-2xs); }\n';
+const style$a = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--size-base);\n\n  /* Layout variables */\n  --input-field-gap: 4px;\n  \n  /* Input element variables */\n  --input-font-size: 1em;\n  --input-padding: 0.333em 0.583em;\n  --input-border-width: 1px;\n  --input-border-radius: 2px;\n  --input-border-color: var(--border-subtle);\n  --input-border-color-hover: var(--border-default);\n  --input-border-color-focus: var(--border-focus);\n  --input-bg: var(--surface-base);\n  --input-bg-hover: var(--surface-raised);\n  --input-bg-focus: var(--surface-raised);\n  --input-color: var(--color-text-muted);\n  --input-placeholder-color: var(--color-text-disabled);\n  --input-transition: border-color 0.12s, background 0.12s;\n}\n\n.input-container {\n  display: flex;\n  align-items: center;\n  gap: var(--input-field-gap);\n  width: 100%;\n}\n\ninput {\n  flex: 1;\n  min-width: 0;\n  font-size: var(--input-font-size);\n  padding: var(--input-padding);\n  border: var(--input-border-width) solid var(--input-border-color);\n  border-radius: var(--input-border-radius);\n  background: var(--input-bg);\n  color: var(--input-color);\n  transition: var(--input-transition);\n}\n\ninput::placeholder {\n  color: var(--input-placeholder-color);\n}\n\ninput:focus {\n  outline: none;\n  border-color: var(--input-border-color-focus);\n  background: var(--input-bg-focus);\n}\n\ninput:hover:not(:focus) {\n  border-color: var(--input-border-color-hover);\n  background: var(--input-bg-hover);\n}\n\ninput:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Clear button styles */\n.clear-btn {\n  width: 1.333em;\n  height: 1.333em;\n  border: none;\n  border-radius: var(--clear-btn-border-radius);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--clear-btn-bg);\n  color: var(--clear-btn-color);\n  transition: var(--clear-btn-transition);\n  flex-shrink: 0;\n  line-height: 1;\n}\n\n.clear-btn:hover {\n  background: var(--clear-btn-bg-hover);\n  color: var(--clear-btn-color-hover);\n}\n\n/* Reset button styles */\n.reset-btn {\n  width: 1.333em;\n  height: 1.333em;\n  border: none;\n  border-radius: var(--reset-btn-border-radius);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--reset-btn-bg);\n  color: var(--reset-btn-color);\n  transition: var(--reset-btn-transition);\n  flex-shrink: 0;\n  line-height: 1;\n}\n\n.reset-btn:hover {\n  background: var(--reset-btn-bg-hover);\n  color: var(--reset-btn-color-hover);\n}\n\n\n\n";
 class TextInput extends AeicoField {
   constructor() {
     super(...arguments);
@@ -606,9 +606,9 @@ __publicField(TextInput, "props", {
 });
 __publicField(TextInput, "styles", [styleVariables, sizeCSS, style$a]);
 TextInput.register();
-const style$9 = ":host {\r\n  display: block;\r\n  flex: 1;\r\n  min-width: 0;\r\n  font-size: var(--size-base);\r\n\r\n  /* Layout variables */\r\n  --select-field-gap: 2px;\r\n\r\n  /* Trigger variables */\r\n  --select-font-size: 1em;\r\n  --select-padding: 0.333em 0.583em;\r\n  --select-border-width: 1px;\r\n  --select-border-radius: 2px;\r\n  --select-border-color: var(--border-subtle);\r\n  --select-border-color-hover: var(--border-default);\r\n  --select-border-color-focus: var(--border-focus);\r\n  --select-bg: var(--surface-base);\r\n  --select-bg-hover: var(--surface-raised);\r\n  --select-bg-focus: var(--surface-raised);\r\n  --select-color: var(--color-text-muted);\r\n  --select-transition: border-color 0.12s, background 0.12s;\r\n\r\n  /* Arrow */\r\n  --select-arrow-color: var(--color-text-muted);\r\n  --select-arrow-size: 0.75em;\r\n\r\n  /* Dropdown */\r\n  --select-dropdown-bg: var(--surface-overlay);\r\n  --select-dropdown-border: var(--border-default);\r\n  --select-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\r\n  --select-dropdown-border-radius: 2px;\r\n  --select-dropdown-max-height: 240px;\r\n  --select-dropdown-z-index: 1000;\r\n}\r\n\r\n.container {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--select-field-gap);\r\n  width: 100%;\r\n  position: relative;\r\n}\r\n\r\n.trigger {\r\n  flex: 1;\r\n  min-width: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  flex-wrap: wrap;\r\n  gap: 0.333em;\r\n  font-size: var(--select-font-size);\r\n  padding: var(--select-padding);\r\n  border: var(--select-border-width) solid var(--select-border-color);\r\n  border-radius: var(--select-border-radius);\r\n  background: var(--select-bg);\r\n  color: var(--select-color);\r\n  cursor: pointer;\r\n  transition: var(--select-transition);\r\n  user-select: none;\r\n  outline: none;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.trigger:hover:not(.disabled) {\r\n  border-color: var(--select-border-color-hover);\r\n  background: var(--select-bg-hover);\r\n}\r\n\r\n.trigger.open {\r\n  border-color: var(--select-border-color-focus);\r\n  background: var(--select-bg-focus);\r\n}\r\n\r\n.trigger.disabled {\r\n  opacity: 0.5;\r\n  cursor: default;\r\n  pointer-events: none;\r\n}\r\n\r\n.value {\r\n  flex: 1;\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n.placeholder {\r\n  color: var(--color-text-disabled);\r\n}\r\n\r\n.selected-list {\r\n  flex: 1;\r\n  min-width: 0;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 4px;\r\n  align-items: center;\r\n  padding: 2px 0;\r\n}\r\n\r\n/* Non-expandable (default): single-row, clip overflow */\r\n.trigger:has(.selected-list--clipped) {\r\n  flex-wrap: nowrap;\r\n}\r\n\r\n.selected-list--clipped {\r\n  flex-wrap: nowrap;\r\n  overflow: hidden;\r\n}\r\n\r\n.overflow-indicator {\r\n  flex-shrink: 0;\r\n  align-self: center;\r\n  padding: 1px 6px;\r\n  background: color-mix(in srgb, var(--color-primary) 12%, transparent);\r\n  color: var(--color-primary);\r\n  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);\r\n  border-radius: 3px;\r\n  font-size: 0.82em;\r\n  line-height: 1.6;\r\n  cursor: default;\r\n  user-select: none;\r\n}\r\n\r\n.arrow {\r\n  flex-shrink: 0;\r\n  align-self: center;\r\n  font-size: var(--select-arrow-size);\r\n  color: var(--select-arrow-color);\r\n  transition: transform 0.12s;\r\n  pointer-events: none;\r\n  line-height: 1;\r\n}\r\n\r\n.trigger.open .arrow {\r\n  transform: rotate(180deg);\r\n}\r\n\r\n.dropdown {\r\n  display: none;\r\n  position: absolute;\r\n  z-index: var(--select-dropdown-z-index);\r\n  background: var(--select-dropdown-bg);\r\n  border: 1px solid var(--select-dropdown-border);\r\n  border-radius: var(--select-dropdown-border-radius);\r\n  box-shadow: var(--select-dropdown-shadow);\r\n  max-height: var(--select-dropdown-max-height);\r\n  overflow-y: auto;\r\n  min-width: 100%;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.dropdown.open {\r\n  display: block;\r\n}\r\n\r\n.dropdown.position-bottom {\r\n  top: 100%;\r\n  left: 0;\r\n  margin-top: 2px;\r\n}\r\n\r\n.dropdown.position-top {\r\n  bottom: 100%;\r\n  left: 0;\r\n  margin-bottom: 2px;\r\n}\r\n\r\n.dropdown.position-left {\r\n  right: 100%;\r\n  top: 0;\r\n  margin-right: 2px;\r\n}\r\n\r\n.dropdown.position-right {\r\n  left: 100%;\r\n  top: 0;\r\n  margin-left: 2px;\r\n}\r\n\r\n.clear-btn {\r\n  width: 1.333em;\r\n  height: 1.333em;\r\n  border: none;\r\n  border-radius: var(--clear-btn-border-radius);\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: var(--clear-btn-bg);\r\n  color: var(--clear-btn-color);\r\n  transition: var(--clear-btn-transition);\r\n  flex-shrink: 0;\r\n  line-height: 1;\r\n}\r\n\r\n.clear-btn:hover {\r\n  background: var(--clear-btn-bg-hover);\r\n  color: var(--clear-btn-color-hover);\r\n}\r\n\r\n.reset-btn {\r\n  width: 1.333em;\r\n  height: 1.333em;\r\n  border: none;\r\n  border-radius: var(--reset-btn-border-radius);\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: var(--reset-btn-bg);\r\n  color: var(--reset-btn-color);\r\n  transition: var(--reset-btn-transition);\r\n  flex-shrink: 0;\r\n}\r\n\r\n.reset-btn:hover {\r\n  background: var(--reset-btn-bg-hover);\r\n  color: var(--reset-btn-color-hover);\r\n}\r\n";
-const colorCSS = ':host {\r\n  --color-solid:           var(--color-gray);\r\n  --color-solid-hover:     color-mix(in srgb, var(--color-solid), var(--color-mix-hover));\r\n  --color-solid-active:    color-mix(in srgb, var(--color-solid), var(--color-mix-active));\r\n  --color-on-solid:        var(--color-text-main);\r\n  --color-border:          var(--color-gray);\r\n  --color-border-hover:    color-mix(in srgb, var(--color-border), var(--color-mix-hover));\r\n  --color-accent:          var(--color-text-muted);\r\n  --color-accent-hover:    var(--color-text-main);\r\n  --color-subtle:          var(--border-subtle);\r\n  --color-subtle-hover:    var(--border-default);\r\n  --color-bg-subtle:       var(--border-subtle);\r\n  --color-text-subtle:     var(--color-text-muted);\r\n  --color-border-subtle:   var(--border-default);\r\n}\r\n\r\n:host([color="primary"]) {\r\n  --color-solid:           var(--color-primary);\r\n  --color-on-solid:        white;\r\n  --color-border:          var(--color-primary);\r\n  --color-accent:          var(--color-text-link);\r\n  --color-accent-hover:    var(--color-text-link-hover);\r\n  --color-subtle:          var(--color-primary-bg-subtle);\r\n  --color-subtle-hover:    rgb(from var(--blue) r g b / 0.15);\r\n  --color-bg-subtle:       var(--color-primary-bg-subtle);\r\n  --color-text-subtle:     var(--color-primary-text-emphasis);\r\n  --color-border-subtle:   var(--color-primary-border-subtle);\r\n}\r\n\r\n:host([color="secondary"]) {\r\n  --color-solid:           var(--color-secondary);\r\n  --color-on-solid:        white;\r\n  --color-border:          var(--color-secondary-hover);\r\n  --color-accent:          var(--color-secondary-text-emphasis);\r\n  --color-accent-hover:    var(--color-text-main);\r\n  --color-subtle:          rgb(from var(--slate) r g b / 0.06);\r\n  --color-subtle-hover:    rgb(from var(--slate) r g b / 0.12);\r\n  --color-bg-subtle:       var(--color-secondary-bg-subtle);\r\n  --color-text-subtle:     var(--color-secondary-text-emphasis);\r\n  --color-border-subtle:   var(--color-secondary-border-subtle);\r\n}\r\n\r\n:host([color="success"]) {\r\n  --color-solid:           var(--color-success);\r\n  --color-on-solid:        white;\r\n  --color-border:          var(--color-success);\r\n  --color-accent:          var(--color-success-text-emphasis);\r\n  --color-accent-hover:    var(--color-success-hover);\r\n  --color-subtle:          var(--color-success-bg-subtle);\r\n  --color-subtle-hover:    rgb(from var(--green) r g b / 0.15);\r\n  --color-bg-subtle:       var(--color-success-bg-subtle);\r\n  --color-text-subtle:     var(--color-success-text-emphasis);\r\n  --color-border-subtle:   var(--color-success-border-subtle);\r\n}\r\n\r\n:host([color="danger"]) {\r\n  --color-solid:           var(--color-danger);\r\n  --color-on-solid:        white;\r\n  --color-border:          var(--color-danger);\r\n  --color-accent:          var(--color-danger-text-emphasis);\r\n  --color-accent-hover:    var(--color-danger-hover);\r\n  --color-subtle:          var(--color-danger-bg-subtle);\r\n  --color-subtle-hover:    rgb(from var(--red) r g b / 0.15);\r\n  --color-bg-subtle:       var(--color-danger-bg-subtle);\r\n  --color-text-subtle:     var(--color-danger-text-emphasis);\r\n  --color-border-subtle:   var(--color-danger-border-subtle);\r\n}\r\n\r\n:host([color="warning"]) {\r\n  --color-solid:           var(--color-warning);\r\n  --color-on-solid:        var(--gray-900);\r\n  --color-border:          var(--color-warning);\r\n  --color-accent:          var(--color-warning-text-emphasis);\r\n  --color-accent-hover:    var(--color-warning-hover);\r\n  --color-subtle:          var(--color-warning-bg-subtle);\r\n  --color-subtle-hover:    rgb(from var(--yellow) r g b / 0.15);\r\n  --color-bg-subtle:       var(--color-warning-bg-subtle);\r\n  --color-text-subtle:     var(--color-warning-text-emphasis);\r\n  --color-border-subtle:   var(--color-warning-border-subtle);\r\n}\r\n\r\n:host([color="info"]) {\r\n  --color-solid:           var(--color-info);\r\n  --color-on-solid:        white;\r\n  --color-border:          var(--color-info);\r\n  --color-accent:          var(--color-info-text-emphasis);\r\n  --color-accent-hover:    var(--color-info-hover);\r\n  --color-subtle:          var(--color-info-bg-subtle);\r\n  --color-subtle-hover:    rgb(from var(--cyan) r g b / 0.15);\r\n  --color-bg-subtle:       var(--color-info-bg-subtle);\r\n  --color-text-subtle:     var(--color-info-text-emphasis);\r\n  --color-border-subtle:   var(--color-info-border-subtle);\r\n}\r\n\r\n:host([color="light"]) {\r\n  --color-solid:           var(--light);\r\n  --color-on-solid:        var(--gray-900);\r\n  --color-border:          var(--border-hover);\r\n  --color-subtle:          var(--color-light-bg-subtle);\r\n  --color-subtle-hover:    var(--color-light-border-subtle);\r\n  --color-bg-subtle:       var(--color-light-bg-subtle);\r\n  --color-text-subtle:     var(--color-text-muted);\r\n  --color-border-subtle:   var(--color-light-border-subtle);\r\n}\r\n\r\n:host([color="dark"]) {\r\n  --color-solid:           var(--dark-500);\r\n  --color-on-solid:        white;\r\n  --color-border:          var(--dark-500);\r\n  --color-accent:          var(--color-text-main);\r\n  --color-accent-hover:    var(--color-text-main);\r\n  --color-subtle:          var(--color-dark-bg-subtle);\r\n  --color-subtle-hover:    var(--color-dark-border-subtle);\r\n  --color-bg-subtle:       var(--color-dark-bg-subtle);\r\n  --color-text-subtle:     var(--color-text-main);\r\n  --color-border-subtle:   var(--color-dark-border-subtle);\r\n}\r\n';
-const tagStyle = ':host {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  --tag-solid-bg:        var(--color-solid);\r\n  --tag-solid-color:     var(--color-on-solid);\r\n  --tag-border:          var(--color-border);\r\n  --tag-accent:          var(--color-accent);\r\n  --tag-subtle-bg:       var(--color-bg-subtle);\r\n  --tag-subtle-color:    var(--color-text-subtle);\r\n  --tag-subtle-border:   var(--color-border-subtle);\r\n}\r\n\r\n.tag {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  font-family: inherit;\r\n  font-weight: 500;\r\n  white-space: nowrap;\r\n  vertical-align: middle;\r\n  line-height: 1.2;\r\n  font-size: 1em;\r\n  padding: 0.15em 0.5em 0.15em 0.6em;\r\n  border-radius: 4px;\r\n  border: 1px solid var(--tag-solid-bg);\r\n  background: var(--tag-solid-bg);\r\n  color: var(--tag-solid-color);\r\n  max-width: 160px;\r\n  min-width: 0;\r\n}\r\n\r\n:host([variant="outlined"]) .tag {\r\n  background:   transparent;\r\n  border-color: var(--tag-border);\r\n  color:        var(--tag-accent);\r\n}\r\n\r\n:host([variant="faint"]) .tag {\r\n  background:   var(--tag-subtle-bg);\r\n  border-color: var(--tag-subtle-border);\r\n  color:        var(--tag-subtle-color);\r\n}\r\n\r\n:host([variant="subtle"]) .tag {\r\n  background:   var(--tag-subtle-bg);\r\n  border-color: transparent;\r\n  color:        var(--tag-subtle-color);\r\n}\r\n\r\n:host([variant="text"]) .tag {\r\n  background:   transparent;\r\n  border-color: transparent;\r\n  color:        var(--tag-accent);\r\n  padding-left:  0;\r\n  padding-right: 0;\r\n}\r\n\r\n\r\n:host([pill]) .tag { border-radius: 999px; }\r\n\r\n.tag-content {\r\n  flex: 1;\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n::slotted(ae-icon) { font-size: 1.1em; }\r\n\r\n.tag-dismiss {\r\n  display: none;\r\n  flex-shrink: 0;\r\n  align-items: center;\r\n  justify-content: center;\r\n  cursor: pointer;\r\n  opacity: 0.55;\r\n  line-height: 1;\r\n  font-size: 1em;\r\n  padding: 0 1px;\r\n  border-radius: 2px;\r\n  background: transparent;\r\n  border: none;\r\n  color: inherit;\r\n  font-family: inherit;\r\n  transition: opacity 0.1s, background 0.1s;\r\n}\r\n\r\n:host([dismissible]) .tag-dismiss {\r\n  display: inline-flex;\r\n}\r\n\r\n.tag-dismiss:hover {\r\n  opacity: 1;\r\n  background: color-mix(in srgb, currentColor 15%, transparent);\r\n}\r\n\r\n/* disabled: button remains visible but is inert */\r\n:host([disabled]) .tag-dismiss {\r\n  opacity: 0.4;\r\n  pointer-events: none;\r\n  cursor: default;\r\n}\r\n\r\n:host([disabled]) .tag {\r\n  opacity: 0.6;\r\n}\r\n';
+const style$9 = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--size-base);\n\n  /* Layout variables */\n  --select-field-gap: 2px;\n\n  /* Trigger variables */\n  --select-font-size: 1em;\n  --select-padding: 0.333em 0.583em;\n  --select-border-width: 1px;\n  --select-border-radius: 2px;\n  --select-border-color: var(--border-subtle);\n  --select-border-color-hover: var(--border-default);\n  --select-border-color-focus: var(--border-focus);\n  --select-bg: var(--surface-base);\n  --select-bg-hover: var(--surface-raised);\n  --select-bg-focus: var(--surface-raised);\n  --select-color: var(--color-text-muted);\n  --select-transition: border-color 0.12s, background 0.12s;\n\n  /* Arrow */\n  --select-arrow-color: var(--color-text-muted);\n  --select-arrow-size: 0.75em;\n\n  /* Dropdown */\n  --select-dropdown-bg: var(--surface-overlay);\n  --select-dropdown-border: var(--border-default);\n  --select-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  --select-dropdown-border-radius: 2px;\n  --select-dropdown-max-height: 240px;\n  --select-dropdown-z-index: 1000;\n}\n\n.container {\n  display: flex;\n  align-items: center;\n  gap: var(--select-field-gap);\n  width: 100%;\n  position: relative;\n}\n\n.trigger {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 0.333em;\n  font-size: var(--select-font-size);\n  padding: var(--select-padding);\n  border: var(--select-border-width) solid var(--select-border-color);\n  border-radius: var(--select-border-radius);\n  background: var(--select-bg);\n  color: var(--select-color);\n  cursor: pointer;\n  transition: var(--select-transition);\n  user-select: none;\n  outline: none;\n  box-sizing: border-box;\n}\n\n.trigger:hover:not(.disabled) {\n  border-color: var(--select-border-color-hover);\n  background: var(--select-bg-hover);\n}\n\n.trigger.open {\n  border-color: var(--select-border-color-focus);\n  background: var(--select-bg-focus);\n}\n\n.trigger.disabled {\n  opacity: 0.5;\n  cursor: default;\n  pointer-events: none;\n}\n\n.value {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.placeholder {\n  color: var(--color-text-disabled);\n}\n\n.selected-list {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  align-items: center;\n  padding: 2px 0;\n}\n\n/* Non-expandable (default): single-row, clip overflow */\n.trigger:has(.selected-list--clipped) {\n  flex-wrap: nowrap;\n}\n\n.selected-list--clipped {\n  flex-wrap: nowrap;\n  overflow: hidden;\n}\n\n.overflow-indicator {\n  flex-shrink: 0;\n  align-self: center;\n  padding: 1px 6px;\n  background: color-mix(in srgb, var(--color-primary) 12%, transparent);\n  color: var(--color-primary);\n  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);\n  border-radius: 3px;\n  font-size: 0.82em;\n  line-height: 1.6;\n  cursor: default;\n  user-select: none;\n}\n\n.arrow {\n  flex-shrink: 0;\n  align-self: center;\n  font-size: var(--select-arrow-size);\n  color: var(--select-arrow-color);\n  transition: transform 0.12s;\n  pointer-events: none;\n  line-height: 1;\n}\n\n.trigger.open .arrow {\n  transform: rotate(180deg);\n}\n\n.dropdown {\n  display: none;\n  position: absolute;\n  z-index: var(--select-dropdown-z-index);\n  background: var(--select-dropdown-bg);\n  border: 1px solid var(--select-dropdown-border);\n  border-radius: var(--select-dropdown-border-radius);\n  box-shadow: var(--select-dropdown-shadow);\n  max-height: var(--select-dropdown-max-height);\n  overflow-y: auto;\n  min-width: 100%;\n  box-sizing: border-box;\n}\n\n.dropdown.open {\n  display: block;\n}\n\n.dropdown.position-bottom {\n  top: 100%;\n  left: 0;\n  margin-top: 2px;\n}\n\n.dropdown.position-top {\n  bottom: 100%;\n  left: 0;\n  margin-bottom: 2px;\n}\n\n.dropdown.position-left {\n  right: 100%;\n  top: 0;\n  margin-right: 2px;\n}\n\n.dropdown.position-right {\n  left: 100%;\n  top: 0;\n  margin-left: 2px;\n}\n\n.clear-btn {\n  width: 1.333em;\n  height: 1.333em;\n  border: none;\n  border-radius: var(--clear-btn-border-radius);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--clear-btn-bg);\n  color: var(--clear-btn-color);\n  transition: var(--clear-btn-transition);\n  flex-shrink: 0;\n  line-height: 1;\n}\n\n.clear-btn:hover {\n  background: var(--clear-btn-bg-hover);\n  color: var(--clear-btn-color-hover);\n}\n\n.reset-btn {\n  width: 1.333em;\n  height: 1.333em;\n  border: none;\n  border-radius: var(--reset-btn-border-radius);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--reset-btn-bg);\n  color: var(--reset-btn-color);\n  transition: var(--reset-btn-transition);\n  flex-shrink: 0;\n}\n\n.reset-btn:hover {\n  background: var(--reset-btn-bg-hover);\n  color: var(--reset-btn-color-hover);\n}\n";
+const colorCSS = ':host {\n  --color-solid:           var(--color-gray);\n  --color-solid-hover:     color-mix(in srgb, var(--color-solid), var(--color-mix-hover));\n  --color-solid-active:    color-mix(in srgb, var(--color-solid), var(--color-mix-active));\n  --color-on-solid:        var(--color-text-main);\n  --color-border:          var(--color-gray);\n  --color-border-hover:    color-mix(in srgb, var(--color-border), var(--color-mix-hover));\n  --color-accent:          var(--color-text-muted);\n  --color-accent-hover:    var(--color-text-main);\n  --color-subtle:          var(--border-subtle);\n  --color-subtle-hover:    var(--border-default);\n  --color-bg-subtle:       var(--border-subtle);\n  --color-text-subtle:     var(--color-text-muted);\n  --color-border-subtle:   var(--border-default);\n}\n\n:host([color="primary"]) {\n  --color-solid:           var(--color-primary);\n  --color-on-solid:        white;\n  --color-border:          var(--color-primary);\n  --color-accent:          var(--color-text-link);\n  --color-accent-hover:    var(--color-text-link-hover);\n  --color-subtle:          var(--color-primary-bg-subtle);\n  --color-subtle-hover:    rgb(from var(--blue) r g b / 0.15);\n  --color-bg-subtle:       var(--color-primary-bg-subtle);\n  --color-text-subtle:     var(--color-primary-text-emphasis);\n  --color-border-subtle:   var(--color-primary-border-subtle);\n}\n\n:host([color="secondary"]) {\n  --color-solid:           var(--color-secondary);\n  --color-on-solid:        white;\n  --color-border:          var(--color-secondary-hover);\n  --color-accent:          var(--color-secondary-text-emphasis);\n  --color-accent-hover:    var(--color-text-main);\n  --color-subtle:          rgb(from var(--slate) r g b / 0.06);\n  --color-subtle-hover:    rgb(from var(--slate) r g b / 0.12);\n  --color-bg-subtle:       var(--color-secondary-bg-subtle);\n  --color-text-subtle:     var(--color-secondary-text-emphasis);\n  --color-border-subtle:   var(--color-secondary-border-subtle);\n}\n\n:host([color="success"]) {\n  --color-solid:           var(--color-success);\n  --color-on-solid:        white;\n  --color-border:          var(--color-success);\n  --color-accent:          var(--color-success-text-emphasis);\n  --color-accent-hover:    var(--color-success-hover);\n  --color-subtle:          var(--color-success-bg-subtle);\n  --color-subtle-hover:    rgb(from var(--green) r g b / 0.15);\n  --color-bg-subtle:       var(--color-success-bg-subtle);\n  --color-text-subtle:     var(--color-success-text-emphasis);\n  --color-border-subtle:   var(--color-success-border-subtle);\n}\n\n:host([color="danger"]) {\n  --color-solid:           var(--color-danger);\n  --color-on-solid:        white;\n  --color-border:          var(--color-danger);\n  --color-accent:          var(--color-danger-text-emphasis);\n  --color-accent-hover:    var(--color-danger-hover);\n  --color-subtle:          var(--color-danger-bg-subtle);\n  --color-subtle-hover:    rgb(from var(--red) r g b / 0.15);\n  --color-bg-subtle:       var(--color-danger-bg-subtle);\n  --color-text-subtle:     var(--color-danger-text-emphasis);\n  --color-border-subtle:   var(--color-danger-border-subtle);\n}\n\n:host([color="warning"]) {\n  --color-solid:           var(--color-warning);\n  --color-on-solid:        var(--gray-900);\n  --color-border:          var(--color-warning);\n  --color-accent:          var(--color-warning-text-emphasis);\n  --color-accent-hover:    var(--color-warning-hover);\n  --color-subtle:          var(--color-warning-bg-subtle);\n  --color-subtle-hover:    rgb(from var(--yellow) r g b / 0.15);\n  --color-bg-subtle:       var(--color-warning-bg-subtle);\n  --color-text-subtle:     var(--color-warning-text-emphasis);\n  --color-border-subtle:   var(--color-warning-border-subtle);\n}\n\n:host([color="info"]) {\n  --color-solid:           var(--color-info);\n  --color-on-solid:        white;\n  --color-border:          var(--color-info);\n  --color-accent:          var(--color-info-text-emphasis);\n  --color-accent-hover:    var(--color-info-hover);\n  --color-subtle:          var(--color-info-bg-subtle);\n  --color-subtle-hover:    rgb(from var(--cyan) r g b / 0.15);\n  --color-bg-subtle:       var(--color-info-bg-subtle);\n  --color-text-subtle:     var(--color-info-text-emphasis);\n  --color-border-subtle:   var(--color-info-border-subtle);\n}\n\n:host([color="light"]) {\n  --color-solid:           var(--light);\n  --color-on-solid:        var(--gray-900);\n  --color-border:          var(--border-hover);\n  --color-subtle:          var(--color-light-bg-subtle);\n  --color-subtle-hover:    var(--color-light-border-subtle);\n  --color-bg-subtle:       var(--color-light-bg-subtle);\n  --color-text-subtle:     var(--color-text-muted);\n  --color-border-subtle:   var(--color-light-border-subtle);\n}\n\n:host([color="dark"]) {\n  --color-solid:           var(--dark-500);\n  --color-on-solid:        white;\n  --color-border:          var(--dark-500);\n  --color-accent:          var(--color-text-main);\n  --color-accent-hover:    var(--color-text-main);\n  --color-subtle:          var(--color-dark-bg-subtle);\n  --color-subtle-hover:    var(--color-dark-border-subtle);\n  --color-bg-subtle:       var(--color-dark-bg-subtle);\n  --color-text-subtle:     var(--color-text-main);\n  --color-border-subtle:   var(--color-dark-border-subtle);\n}\n';
+const tagStyle = ':host {\n  display: inline-flex;\n  align-items: center;\n  --tag-solid-bg:        var(--color-solid);\n  --tag-solid-color:     var(--color-on-solid);\n  --tag-border:          var(--color-border);\n  --tag-accent:          var(--color-accent);\n  --tag-subtle-bg:       var(--color-bg-subtle);\n  --tag-subtle-color:    var(--color-text-subtle);\n  --tag-subtle-border:   var(--color-border-subtle);\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-family: inherit;\n  font-weight: 500;\n  white-space: nowrap;\n  vertical-align: middle;\n  line-height: 1.2;\n  font-size: 1em;\n  padding: 0.15em 0.5em 0.15em 0.6em;\n  border-radius: 4px;\n  border: 1px solid var(--tag-solid-bg);\n  background: var(--tag-solid-bg);\n  color: var(--tag-solid-color);\n  max-width: 160px;\n  min-width: 0;\n}\n\n:host([variant="outlined"]) .tag {\n  background:   transparent;\n  border-color: var(--tag-border);\n  color:        var(--tag-accent);\n}\n\n:host([variant="faint"]) .tag {\n  background:   var(--tag-subtle-bg);\n  border-color: var(--tag-subtle-border);\n  color:        var(--tag-subtle-color);\n}\n\n:host([variant="subtle"]) .tag {\n  background:   var(--tag-subtle-bg);\n  border-color: transparent;\n  color:        var(--tag-subtle-color);\n}\n\n:host([variant="text"]) .tag {\n  background:   transparent;\n  border-color: transparent;\n  color:        var(--tag-accent);\n  padding-left:  0;\n  padding-right: 0;\n}\n\n\n:host([pill]) .tag { border-radius: 999px; }\n\n.tag-content {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n::slotted(ae-icon) { font-size: 1.1em; }\n\n.tag-dismiss {\n  display: none;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.55;\n  line-height: 1;\n  font-size: 1em;\n  padding: 0 1px;\n  border-radius: 2px;\n  background: transparent;\n  border: none;\n  color: inherit;\n  font-family: inherit;\n  transition: opacity 0.1s, background 0.1s;\n}\n\n:host([dismissible]) .tag-dismiss {\n  display: inline-flex;\n}\n\n.tag-dismiss:hover {\n  opacity: 1;\n  background: color-mix(in srgb, currentColor 15%, transparent);\n}\n\n/* disabled: button remains visible but is inert */\n:host([disabled]) .tag-dismiss {\n  opacity: 0.4;\n  pointer-events: none;\n  cursor: default;\n}\n\n:host([disabled]) .tag {\n  opacity: 0.6;\n}\n';
 var __create$d = Object.create;
 var __defProp$d = Object.defineProperty;
 var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
@@ -1049,332 +1049,332 @@ __decoratorMetadata$c(_init$c, Select);
 __publicField$c(Select, "tagName", "select");
 __publicField$c(Select, "styles", [styleVariables, sizeCSS, style$9]);
 Select.register();
-const style$8 = `:host {\r
-  display: block;\r
-  flex: 1;\r
-  min-width: 0;\r
-  font-size: var(--size-base);\r
-\r
-  /* Default color when no [color] attribute — overridden by color.css :host([color=...]) */\r
-  --color-solid: var(--color-primary);\r
-}\r
-\r
-.range-container {\r
-  display: flex;\r
-  align-items: center;\r
-  gap: 6px;\r
-  width: 100%;\r
-  height: 26px;\r
-}\r
-\r
-input[type="range"] {\r
-  flex: 1;\r
-  margin: 0;\r
-}\r
-\r
-.input-range,\r
-.slider-input,\r
-input[type="range"] {\r
-  -webkit-appearance: none;\r
-  appearance: none;\r
-  width: 100%;\r
-  height: 0.333em;\r
-  border-radius: 2px;\r
-  background: var(--border-subtle);\r
-  outline: none;\r
-  cursor: pointer;\r
-  margin: 0;\r
-}\r
-\r
-.input-range {\r
-  margin: 10px 0;\r
-}\r
-\r
-.input-range::-webkit-slider-thumb,\r
-.slider-input::-webkit-slider-thumb,\r
-input[type="range"]::-webkit-slider-thumb {\r
-  -webkit-appearance: none;\r
-  appearance: none;\r
-  width: 1.167em;\r
-  height: 1.167em;\r
-  border-radius: 50%;\r
-  background: var(--color-solid);\r
-  cursor: pointer;\r
-  transition: background 0.12s, transform 0.12s;\r
-}\r
-\r
-.input-range::-webkit-slider-thumb:hover,\r
-.slider-input::-webkit-slider-thumb:hover,\r
-input[type="range"]:hover::-webkit-slider-thumb {\r
-  background: var(--color-solid-hover);\r
-  transform: scale(1.1);\r
-}\r
-\r
-.input-range::-webkit-slider-thumb:active,\r
-.slider-input::-webkit-slider-thumb:active,\r
-input[type="range"]:active::-webkit-slider-thumb {\r
-  background: var(--color-solid-hover);\r
-  transform: scale(1.2);\r
-}\r
-\r
-.input-range:focus::-webkit-slider-thumb,\r
-.slider-input:focus::-webkit-slider-thumb,\r
-input[type="range"]:focus::-webkit-slider-thumb {\r
-  background: var(--color-solid);\r
-  outline: none;\r
-  box-shadow: none;\r
-}\r
-\r
-.input-range:focus:hover::-webkit-slider-thumb,\r
-.slider-input:focus:hover::-webkit-slider-thumb,\r
-input[type="range"]:focus:hover::-webkit-slider-thumb {\r
-  background: var(--color-solid-hover);\r
-  outline: none;\r
-  box-shadow: none;\r
-}\r
-\r
-.input-range:focus:active::-webkit-slider-thumb,\r
-.slider-input:focus:active::-webkit-slider-thumb,\r
-input[type="range"]:focus:active::-webkit-slider-thumb {\r
-  background: var(--color-solid-hover);\r
-  outline: none;\r
-  box-shadow: none;\r
-}\r
-\r
-.input-range::-moz-range-thumb,\r
-.slider-input::-moz-range-thumb,\r
-input[type="range"]::-moz-range-thumb {\r
-  width: 1.167em;\r
-  height: 1.167em;\r
-  border: none;\r
-  border-radius: 50%;\r
-  background: var(--color-solid);\r
-  cursor: pointer;\r
-  transition: background 0.12s, transform 0.12s;\r
-}\r
-\r
-.input-range::-moz-range-thumb:hover,\r
-.slider-input::-moz-range-thumb:hover,\r
-input[type="range"]:hover::-moz-range-thumb {\r
-  background: var(--color-solid-hover);\r
-  transform: scale(1.1);\r
-}\r
-\r
-.input-range::-moz-range-thumb:active,\r
-.slider-input::-moz-range-thumb:active,\r
-input[type="range"]:active::-moz-range-thumb {\r
-  background: var(--color-solid-hover);\r
-  transform: scale(1.2);\r
-}\r
-\r
-.input-range:focus::-moz-range-thumb,\r
-.slider-input:focus::-moz-range-thumb,\r
-input[type="range"]:focus::-moz-range-thumb {\r
-  background: var(--color-solid);\r
-  outline: none;\r
-  box-shadow: none;\r
-}\r
-\r
-.input-range:focus:hover::-moz-range-thumb,\r
-.slider-input:focus:hover::-moz-range-thumb,\r
-input[type="range"]:focus:hover::-moz-range-thumb {\r
-  background: var(--color-solid-hover);\r
-  outline: none;\r
-  box-shadow: none;\r
-}\r
-\r
-.input-range:focus:active::-moz-range-thumb,\r
-.slider-input:focus:active::-moz-range-thumb,\r
-input[type="range"]:focus:active::-moz-range-thumb {\r
-  background: var(--color-solid-hover);\r
-  outline: none;\r
-  box-shadow: none;\r
-}\r
-\r
-.input-range:disabled,\r
-.slider-input:disabled,\r
-input[type="range"]:disabled {\r
-  opacity: 0.5;\r
-  cursor: not-allowed;\r
-}\r
-\r
-.input-range:disabled::-webkit-slider-thumb,\r
-.slider-input:disabled::-webkit-slider-thumb,\r
-input[type="range"]:disabled::-webkit-slider-thumb {\r
-  cursor: not-allowed;\r
-}\r
-\r
-.input-range:disabled::-moz-range-thumb,\r
-.slider-input:disabled::-moz-range-thumb,\r
-input[type="range"]:disabled::-moz-range-thumb {\r
-  cursor: not-allowed;\r
-}\r
-\r
-.value-label {\r
-  min-width: 14px;\r
-  text-align: center;\r
-  font-size: 12px;\r
-  color: var(--color-text-muted);\r
-  font-weight: 500;\r
-  font-variant-numeric: tabular-nums;\r
-  pointer-events: none;\r
-  user-select: none;\r
-}\r
-\r
-.reset-btn {\r
-  width: 1.333em;\r
-  height: 1.333em;\r
-  border: none;\r
-  border-radius: var(--reset-btn-border-radius);\r
-  cursor: pointer;\r
-  display: flex;\r
-  align-items: center;\r
-  justify-content: center;\r
-  background: var(--reset-btn-bg);\r
-  color: var(--reset-btn-color);\r
-  transition: var(--reset-btn-transition);\r
-  flex-shrink: 0;\r
-}\r
-\r
-.reset-btn:hover {\r
-  background: var(--reset-btn-bg-hover);\r
-  color: var(--reset-btn-color-hover);\r
-}\r
-\r
-.clear-btn {\r
-  width: 1.333em;\r
-  height: 1.333em;\r
-  border: none;\r
-  border-radius: var(--clear-btn-border-radius);\r
-  cursor: pointer;\r
-  display: flex;\r
-  align-items: center;\r
-  justify-content: center;\r
-  background: var(--clear-btn-bg);\r
-  color: var(--clear-btn-color);\r
-  transition: var(--clear-btn-transition);\r
-  flex-shrink: 0;\r
-}\r
-\r
-.clear-btn:hover {\r
-  background: var(--clear-btn-bg-hover);\r
-  color: var(--clear-btn-color-hover);\r
-}\r
-\r
-\r
-\r
-.input-range,\r
-.slider-input,\r
-input[type="range"] {\r
-  height: 0.333em;\r
-}\r
-\r
-.input-range::-webkit-slider-thumb,\r
-.slider-input::-webkit-slider-thumb,\r
-input[type="range"]::-webkit-slider-thumb {\r
-  width: 1.167em;\r
-  height: 1.167em;\r
-}\r
-\r
-.input-range::-moz-range-thumb,\r
-.slider-input::-moz-range-thumb,\r
-input[type="range"]::-moz-range-thumb {\r
-  width: 1.167em;\r
-  height: 1.167em;\r
-}\r
-\r
-.value-label {\r
-  font-size: 1em;\r
-}\r
-\r
-.value-input {\r
-  width: 56px;\r
-  padding: 0 4px;\r
-  height: 22px;\r
-  border: 1px solid var(--border-subtle);\r
-  border-radius: 4px;\r
-  background: transparent;\r
-  color: var(--color-text);\r
-  font-size: 12px;\r
-  text-align: center;\r
-  outline: none;\r
-  flex-shrink: 0;\r
-}\r
-\r
-.value-input:focus {\r
-  border-color: var(--color-solid);\r
-}\r
-\r
-.value-input:disabled {\r
-  opacity: 0.4;\r
-  cursor: not-allowed;\r
-}\r
-\r
-:host([tracked]) .input-range,\r
-:host([tracked]) .slider-input,\r
-:host([tracked]) input[type="range"] {\r
-  background: linear-gradient(\r
-    to right,\r
-    var(--color-solid) var(--fill-pct, 0%),\r
-    var(--border-subtle) var(--fill-pct, 0%)\r
-  );\r
-}\r
-\r
-.range-wrapper {\r
-  flex: 1;\r
-  min-width: 0;\r
-  display: flex;\r
-  flex-direction: column;\r
-  position: relative;  /* marks-container positions against this */\r
-}\r
-\r
-.range-wrapper input[type="range"] {\r
-  width: 100%;\r
-  flex: none;\r
-}\r
-\r
-/* Marks are absolutely positioned so they don't affect range-wrapper's layout height */\r
-.marks-container {\r
-  position: absolute;\r
-  top: 100%;\r
-  left: 7px;   /* inset by half thumb so 0%/100% align with track ends */\r
-  right: 7px;\r
-  height: 18px;\r
-  margin-top: 2px;\r
-  overflow: visible;\r
-}\r
-\r
-.mark {\r
-  position: absolute;\r
-  transform: translateX(-50%);\r
-  display: flex;\r
-  flex-direction: column;\r
-  align-items: center;\r
-  gap: 2px;\r
-  pointer-events: none;\r
-  user-select: none;\r
-}\r
-\r
-.mark::before {\r
-  content: '';\r
-  display: block;\r
-  width: 1px;\r
-  height: 4px;\r
-  background: var(--border-default, var(--border-subtle));\r
-  border-radius: 1px;\r
-}\r
-\r
-.mark-label {\r
-  font-size: 10px;\r
-  color: var(--color-text-muted);\r
-  white-space: nowrap;\r
-}\r
-\r
-/* When marks are active, add padding-bottom to make room for the absolute-positioned marks */\r
-:host([marks]) .range-container {\r
-  padding-bottom: 24px; /* marks-container height (18px) + margin-top (2px) + extra (4px) */\r
-  height: auto;\r
-}\r
+const style$8 = `:host {
+  display: block;
+  flex: 1;
+  min-width: 0;
+  font-size: var(--size-base);
+  /* Default color when no [color] attribute — overridden by color.css :host([color=...]) */
+  --color-solid: var(--color-primary);
+}
+.range-container {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  height: 26px;
+}
+input[type="range"] {
+  flex: 1;
+  margin: 0;
+}
+.input-range,
+.slider-input,
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 0.333em;
+  border-radius: 2px;
+  background: var(--border-subtle);
+  outline: none;
+  cursor: pointer;
+  margin: 0;
+}
+.input-range {
+  margin: 10px 0;
+}
+.input-range::-webkit-slider-thumb,
+.slider-input::-webkit-slider-thumb,
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 1.167em;
+  height: 1.167em;
+  border-radius: 50%;
+  background: var(--color-solid);
+  cursor: pointer;
+  transition: background 0.12s, transform 0.12s;
+}
+.input-range::-webkit-slider-thumb:hover,
+.slider-input::-webkit-slider-thumb:hover,
+input[type="range"]:hover::-webkit-slider-thumb {
+  background: var(--color-solid-hover);
+  transform: scale(1.1);
+}
+.input-range::-webkit-slider-thumb:active,
+.slider-input::-webkit-slider-thumb:active,
+input[type="range"]:active::-webkit-slider-thumb {
+  background: var(--color-solid-hover);
+  transform: scale(1.2);
+}
+.input-range:focus::-webkit-slider-thumb,
+.slider-input:focus::-webkit-slider-thumb,
+input[type="range"]:focus::-webkit-slider-thumb {
+  background: var(--color-solid);
+  outline: none;
+  box-shadow: none;
+}
+.input-range:focus:hover::-webkit-slider-thumb,
+.slider-input:focus:hover::-webkit-slider-thumb,
+input[type="range"]:focus:hover::-webkit-slider-thumb {
+  background: var(--color-solid-hover);
+  outline: none;
+  box-shadow: none;
+}
+.input-range:focus:active::-webkit-slider-thumb,
+.slider-input:focus:active::-webkit-slider-thumb,
+input[type="range"]:focus:active::-webkit-slider-thumb {
+  background: var(--color-solid-hover);
+  outline: none;
+  box-shadow: none;
+}
+.input-range::-moz-range-thumb,
+.slider-input::-moz-range-thumb,
+input[type="range"]::-moz-range-thumb {
+  width: 1.167em;
+  height: 1.167em;
+  border: none;
+  border-radius: 50%;
+  background: var(--color-solid);
+  cursor: pointer;
+  transition: background 0.12s, transform 0.12s;
+}
+.input-range::-moz-range-thumb:hover,
+.slider-input::-moz-range-thumb:hover,
+input[type="range"]:hover::-moz-range-thumb {
+  background: var(--color-solid-hover);
+  transform: scale(1.1);
+}
+.input-range::-moz-range-thumb:active,
+.slider-input::-moz-range-thumb:active,
+input[type="range"]:active::-moz-range-thumb {
+  background: var(--color-solid-hover);
+  transform: scale(1.2);
+}
+.input-range:focus::-moz-range-thumb,
+.slider-input:focus::-moz-range-thumb,
+input[type="range"]:focus::-moz-range-thumb {
+  background: var(--color-solid);
+  outline: none;
+  box-shadow: none;
+}
+.input-range:focus:hover::-moz-range-thumb,
+.slider-input:focus:hover::-moz-range-thumb,
+input[type="range"]:focus:hover::-moz-range-thumb {
+  background: var(--color-solid-hover);
+  outline: none;
+  box-shadow: none;
+}
+.input-range:focus:active::-moz-range-thumb,
+.slider-input:focus:active::-moz-range-thumb,
+input[type="range"]:focus:active::-moz-range-thumb {
+  background: var(--color-solid-hover);
+  outline: none;
+  box-shadow: none;
+}
+.input-range:disabled,
+.slider-input:disabled,
+input[type="range"]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.input-range:disabled::-webkit-slider-thumb,
+.slider-input:disabled::-webkit-slider-thumb,
+input[type="range"]:disabled::-webkit-slider-thumb {
+  cursor: not-allowed;
+}
+.input-range:disabled::-moz-range-thumb,
+.slider-input:disabled::-moz-range-thumb,
+input[type="range"]:disabled::-moz-range-thumb {
+  cursor: not-allowed;
+}
+.value-label {
+  min-width: 14px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--color-text-muted);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+  user-select: none;
+}
+.reset-btn {
+  width: 1.333em;
+  height: 1.333em;
+  border: none;
+  border-radius: var(--reset-btn-border-radius);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--reset-btn-bg);
+  color: var(--reset-btn-color);
+  transition: var(--reset-btn-transition);
+  flex-shrink: 0;
+}
+.reset-btn:hover {
+  background: var(--reset-btn-bg-hover);
+  color: var(--reset-btn-color-hover);
+}
+.clear-btn {
+  width: 1.333em;
+  height: 1.333em;
+  border: none;
+  border-radius: var(--clear-btn-border-radius);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--clear-btn-bg);
+  color: var(--clear-btn-color);
+  transition: var(--clear-btn-transition);
+  flex-shrink: 0;
+}
+.clear-btn:hover {
+  background: var(--clear-btn-bg-hover);
+  color: var(--clear-btn-color-hover);
+}
+.input-range,
+.slider-input,
+input[type="range"] {
+  height: 0.333em;
+}
+.input-range::-webkit-slider-thumb,
+.slider-input::-webkit-slider-thumb,
+input[type="range"]::-webkit-slider-thumb {
+  width: 1.167em;
+  height: 1.167em;
+}
+.input-range::-moz-range-thumb,
+.slider-input::-moz-range-thumb,
+input[type="range"]::-moz-range-thumb {
+  width: 1.167em;
+  height: 1.167em;
+}
+.value-label {
+  font-size: 1em;
+}
+.value-input {
+  width: 56px;
+  padding: 0 4px;
+  height: 22px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 4px;
+  background: transparent;
+  color: var(--color-text);
+  font-size: 12px;
+  text-align: center;
+  outline: none;
+  flex-shrink: 0;
+}
+.value-input:focus {
+  border-color: var(--color-solid);
+}
+.value-input:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+:host([tracked]) .input-range,
+:host([tracked]) .slider-input,
+:host([tracked]) input[type="range"] {
+  background: linear-gradient(
+    to right,
+    var(--color-solid) var(--fill-pct, 0%),
+    var(--border-subtle) var(--fill-pct, 0%)
+  );
+}
+.range-wrapper {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;  /* marks-container positions against this */
+}
+.range-wrapper input[type="range"] {
+  width: 100%;
+  flex: none;
+}
+/* Marks are absolutely positioned so they don't affect range-wrapper's layout height */
+.marks-container {
+  position: absolute;
+  top: 100%;
+  left: 7px;   /* inset by half thumb so 0%/100% align with track ends */
+  right: 7px;
+  height: 18px;
+  margin-top: 2px;
+  overflow: visible;
+}
+.mark {
+  position: absolute;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  pointer-events: none;
+  user-select: none;
+}
+.mark::before {
+  content: '';
+  display: block;
+  width: 1px;
+  height: 4px;
+  background: var(--border-default, var(--border-subtle));
+  border-radius: 1px;
+}
+.mark-label {
+  font-size: 10px;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+}
+/* When marks are active, add padding-bottom to make room for the absolute-positioned marks */
+:host([marks]) .range-container {
+  padding-bottom: 24px; /* marks-container height (18px) + margin-top (2px) + extra (4px) */
+  height: auto;
+}
 `;
 var __create$b = Object.create;
 var __defProp$b = Object.defineProperty;
@@ -1689,7 +1689,7 @@ __decoratorMetadata$b(_init$b, Slider);
 __publicField$b(Slider, "tagName", "slider");
 __publicField$b(Slider, "styles", [styleVariables, sizeCSS, colorCSS, style$8]);
 Slider.register();
-const styles$1 = ":host {\r\n  display: block;\r\n  flex: 1;\r\n  min-width: 0;\r\n  font-size: var(--size-base);\r\n\r\n  /* Layout */\r\n  --checkbox-field-gap: 4px;\r\n\r\n  /* Checkbox */\r\n  --checkbox-size: 1.167em;\r\n  --checkbox-border-width: 1px;\r\n  --checkbox-border-radius: 2px;\r\n  --checkbox-border-color: var(--border-subtle);\r\n  --checkbox-bg: var(--surface-base);\r\n  --checkbox-accent-color: var(--color-solid);\r\n\r\n  /* Default color when no [color] attribute — overridden by color.css :host([color=...]) */\r\n  --color-solid: var(--color-primary);\r\n}\r\n\r\n.checkbox-container {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--checkbox-field-gap);\r\n  width: 100%;\r\n}\r\n\r\n.checkbox-wrapper {\r\n  position: relative;\r\n  display: inline-flex;\r\n  align-items: center;\r\n}\r\n\r\n.field-input {\r\n  width: var(--checkbox-size);\r\n  height: var(--checkbox-size);\r\n  cursor: pointer;\r\n  border: var(--checkbox-border-width) solid var(--checkbox-border-color);\r\n  border-radius: var(--checkbox-border-radius);\r\n  background: var(--checkbox-bg);\r\n  accent-color: var(--checkbox-accent-color);\r\n  margin: 0;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.field-input:disabled {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n}\r\n\r\n/* action buttons */\r\n.reset-btn,\r\n.clear-btn {\r\n  width: 1.333em;\r\n  height: 1.333em;\r\n  border: none;\r\n  border-radius: var(--reset-btn-border-radius);\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: var(--reset-btn-bg);\r\n  color: var(--reset-btn-color);\r\n  transition: var(--reset-btn-transition);\r\n  flex-shrink: 0;\r\n  line-height: 1;\r\n}\r\n\r\n.reset-btn:hover {\r\n  background: var(--reset-btn-bg-hover);\r\n  color: var(--reset-btn-color-hover);\r\n}\r\n\r\n.clear-btn:hover {\r\n  background: var(--clear-btn-bg-hover);\r\n  color: var(--clear-btn-color-hover);\r\n}\r\n";
+const styles$1 = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--size-base);\n\n  /* Layout */\n  --checkbox-field-gap: 4px;\n\n  /* Checkbox */\n  --checkbox-size: 1.167em;\n  --checkbox-border-width: 1px;\n  --checkbox-border-radius: 2px;\n  --checkbox-border-color: var(--border-subtle);\n  --checkbox-bg: var(--surface-base);\n  --checkbox-accent-color: var(--color-solid);\n\n  /* Default color when no [color] attribute — overridden by color.css :host([color=...]) */\n  --color-solid: var(--color-primary);\n}\n\n.checkbox-container {\n  display: flex;\n  align-items: center;\n  gap: var(--checkbox-field-gap);\n  width: 100%;\n}\n\n.checkbox-wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.field-input {\n  width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  cursor: pointer;\n  border: var(--checkbox-border-width) solid var(--checkbox-border-color);\n  border-radius: var(--checkbox-border-radius);\n  background: var(--checkbox-bg);\n  accent-color: var(--checkbox-accent-color);\n  margin: 0;\n  flex-shrink: 0;\n}\n\n.field-input:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* action buttons */\n.reset-btn,\n.clear-btn {\n  width: 1.333em;\n  height: 1.333em;\n  border: none;\n  border-radius: var(--reset-btn-border-radius);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--reset-btn-bg);\n  color: var(--reset-btn-color);\n  transition: var(--reset-btn-transition);\n  flex-shrink: 0;\n  line-height: 1;\n}\n\n.reset-btn:hover {\n  background: var(--reset-btn-bg-hover);\n  color: var(--reset-btn-color-hover);\n}\n\n.clear-btn:hover {\n  background: var(--clear-btn-bg-hover);\n  color: var(--clear-btn-color-hover);\n}\n";
 class Checkbox extends AeicoField {
   constructor() {
     super(...arguments);
@@ -1751,7 +1751,7 @@ __publicField(Checkbox, "props", {
 });
 __publicField(Checkbox, "styles", [styleVariables, sizeCSS, colorCSS, styles$1]);
 Checkbox.register();
-const style$7 = ':host {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: var(--rg-gap, 0.286em);\r\n  font-size: var(--size-m);\r\n  --rg-solid-bg:          var(--color-solid);\r\n  --rg-solid-bg-hover:    var(--color-solid-hover);\r\n  --rg-solid-bg-active:   var(--color-solid-active);\r\n  --rg-solid-color:       var(--color-on-solid);\r\n  --rg-solid-color-hover: var(--color-on-solid-hover, var(--color-on-solid));\r\n  --rg-border:            var(--color-border);\r\n  --rg-border-hover:      var(--color-border-hover);\r\n  --rg-accent:            var(--color-accent);\r\n  --rg-accent-hover:      var(--color-accent-hover);\r\n  --rg-subtle-bg:         var(--color-subtle);\r\n  --rg-subtle-bg-hover:   var(--color-subtle-hover);\r\n\r\n  --rg-font-size:    1em;\r\n  --rg-height:       2.286em;\r\n  --rg-padding:      0.429em 1.071em;\r\n  --rg-min-width:    4.571em;\r\n  --rg-radius:       4px;\r\n  --rg-font-weight:  400;\r\n\r\n  --color-unselected:       var(--surface-base);\r\n  --color-unselected-hover: var(--color-gray-lighter);\r\n}\r\n\r\n:host([size="xs"]) { --rg-radius: 3px; }\r\n:host([size="sm"]) { --rg-radius: 3px; }\r\n\r\n.rg-container {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  flex-wrap: wrap;\r\n  gap: 6px;\r\n}\r\n\r\nslot {\r\n  display: none;\r\n}\r\n\r\n.rg-radio-option {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n  cursor: pointer;\r\n  font-size: var(--rg-font-size);\r\n  color: var(--color-text-main);\r\n  user-select: none;\r\n}\r\n\r\n.rg-radio-input {\r\n  width: 14px;\r\n  height: 14px;\r\n  accent-color: var(--rg-solid-bg, var(--color-primary));\r\n  cursor: pointer;\r\n  margin: 0;\r\n  flex-shrink: 0;\r\n}\r\n\r\n.rg-radio-label {\r\n  line-height: 1.5;\r\n}\r\n\r\n.rg-btn {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-family: inherit;\r\n  font-size: var(--rg-font-size);\r\n  font-weight: 400;\r\n  height: var(--rg-height);\r\n  padding: var(--rg-padding);\r\n  min-width: var(--rg-min-width);\r\n  white-space: nowrap;\r\n  cursor: pointer;\r\n  user-select: none;\r\n  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;\r\n  outline: none;\r\n  border-radius: var(--rg-radius);\r\n\r\n  background:   var(--color-unselected);\r\n  border:       1px solid var(--color-gray-light);\r\n  color:        var(--color-text-muted);\r\n}\r\n\r\n.rg-btn:hover:not(:disabled):not(.selected) {\r\n  background:   var(--color-unselected-hover);\r\n  border-color: var(--color-gray-light);\r\n  color:        var(--color-text-main);\r\n}\r\n\r\n.rg-btn.selected {\r\n  background:   var(--rg-solid-bg);\r\n  border-color: var(--rg-solid-bg);\r\n  color:        var(--rg-solid-color);\r\n  font-weight:  500;\r\n  box-shadow:   0 1px 4px rgb(from black r g b / 0.22);\r\n}\r\n\r\n.rg-btn.selected:hover:not(:disabled) {\r\n  background:   var(--rg-solid-bg-hover);\r\n  border-color: var(--rg-solid-bg-hover);\r\n}\r\n\r\n.rg-btn:active:not(:disabled):not(.selected) {\r\n  background: var(--rg-subtle-bg-hover);\r\n  transform: translateY(1px);\r\n}\r\n\r\n.rg-btn:disabled {\r\n  opacity: 0.45;\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n:host([variant="outlined"]) .rg-btn {\r\n  background:   transparent;\r\n  border-color: var(--rg-border);\r\n  color:        var(--rg-accent);\r\n}\r\n:host([variant="outlined"]) .rg-btn:hover:not(:disabled):not(.selected) {\r\n  background:   var(--rg-subtle-bg);\r\n  border-color: var(--rg-accent);\r\n  color:        var(--rg-accent-hover);\r\n}\r\n:host([variant="outlined"]) .rg-btn.selected {\r\n  background:   var(--rg-solid-bg);\r\n  border-color: var(--rg-solid-bg);\r\n  color:        var(--rg-solid-color);\r\n}\r\n\r\n:host([variant="subtle"]) .rg-btn {\r\n  background:   transparent;\r\n  border-color: transparent;\r\n  color:        var(--rg-accent);\r\n}\r\n:host([variant="subtle"]) .rg-btn:hover:not(:disabled):not(.selected) {\r\n  background:   var(--rg-subtle-bg);\r\n  border-color: transparent;\r\n  color:        var(--rg-accent-hover);\r\n}\r\n:host([variant="subtle"]) .rg-btn.selected {\r\n  background:   var(--rg-subtle-bg-hover);\r\n  border-color: transparent;\r\n  color:        var(--rg-accent-hover);\r\n  font-weight:  600;\r\n  box-shadow:   none;\r\n}\r\n\r\n:host([variant="filled"]) .rg-btn:not(.selected) {\r\n  background:   var(--surface-base);\r\n  border-color: var(--border-default);\r\n  color:        var(--color-text-muted);\r\n}\r\n\r\n:host([variant="filled"]) .rg-btn:hover:not(:disabled):not(.selected) {\r\n  background:   var(--surface-raised);\r\n  border-color: var(--border-hover);\r\n  color:        var(--color-text-main);\r\n}\r\n\r\n:host([mode="button"]) .rg-container {\r\n  gap: 6px;\r\n}\r\n\r\n:host([mode="button-group"]) .rg-container {\r\n  gap: 0;\r\n}\r\n\r\n:host([mode="button-group"]) .rg-btn:not(.first):not(.only) {\r\n  margin-left: -1px;\r\n}\r\n\r\n:host([mode="button-group"]) .rg-btn.first {\r\n  border-radius: var(--rg-radius) 0 0 var(--rg-radius);\r\n}\r\n:host([mode="button-group"]) .rg-btn.inner {\r\n  border-radius: 0;\r\n}\r\n:host([mode="button-group"]) .rg-btn.last {\r\n  border-radius: 0 var(--rg-radius) var(--rg-radius) 0;\r\n}\r\n:host([mode="button-group"]) .rg-btn.only {\r\n  border-radius: var(--rg-radius);\r\n}\r\n\r\n:host([mode="button-group"]) .rg-btn:hover:not(:disabled),\r\n:host([mode="button-group"]) .rg-btn.selected {\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n\r\n:host([mode="segmented"]) .rg-container {\r\n  gap: 2px;\r\n  background:    var(--surface-raised);\r\n  border:        1px solid var(--border-subtle);\r\n  border-radius: calc(var(--rg-radius) + 2px);\r\n  padding:       2px;\r\n  flex-wrap:     nowrap;\r\n}\r\n\r\n:host([mode="segmented"]) .rg-btn {\r\n  background:    transparent;\r\n  border-color:  transparent;\r\n  color:         var(--color-text-muted);\r\n  border-radius: var(--rg-radius);\r\n  min-width:     var(--rg-min-width);\r\n  box-shadow:    none;\r\n  font-weight:   400;\r\n}\r\n\r\n:host([mode="segmented"]) .rg-btn:hover:not(:disabled):not(.selected) {\r\n  background:   var(--rg-subtle-bg);\r\n  border-color: transparent;\r\n  color:        var(--color-text-secondary, var(--color-text-main));\r\n}\r\n\r\n:host([mode="segmented"]) .rg-btn.selected {\r\n  background:   var(--rg-solid-bg);\r\n  border-color: transparent;\r\n  color:        var(--rg-solid-color);\r\n  font-weight:  500;\r\n  box-shadow:   0 1px 4px rgb(from black r g b / 0.35);\r\n}\r\n\r\n:host([mode="segmented"]) .rg-btn.selected:hover:not(:disabled) {\r\n  background: var(--rg-solid-bg-hover);\r\n}\r\n\r\n:host([mode="segmented"]:not([color])) .rg-btn.selected {\r\n  background: var(--color-gray-lighter);\r\n  color:      var(--color-text-main);\r\n}\r\n\r\n:host([mode="segmented"][variant="outlined"]) .rg-container {\r\n  border-color: var(--rg-border);\r\n}\r\n:host([mode="segmented"][variant="outlined"]) .rg-btn.selected {\r\n  background:   var(--rg-solid-bg);\r\n  border-color: transparent;\r\n  color:        var(--rg-solid-color);\r\n}\r\n\r\n.reset-btn,\r\n.clear-btn {\r\n  display:        inline-flex;\r\n  align-items:    center;\r\n  justify-content: center;\r\n  cursor:         pointer;\r\n  transition:     var(--reset-btn-transition);\r\n  flex-shrink:    0;\r\n  line-height:    1;\r\n  font-family:    inherit;\r\n  padding:        0;\r\n\r\n  width:          1.333em;\r\n  height:         1.333em;\r\n  border-radius:  var(--reset-btn-border-radius);\r\n  border:         none;\r\n  background:     var(--reset-btn-bg);\r\n  color:          var(--reset-btn-color);\r\n}\r\n\r\n.reset-btn:hover { background: var(--reset-btn-bg-hover); color: var(--reset-btn-color-hover); }\r\n.clear-btn:hover  { background: var(--clear-btn-bg-hover);  color: var(--clear-btn-color-hover); }\r\n\r\n:host([mode="button"]) .reset-btn,\r\n:host([mode="button"]) .clear-btn,\r\n:host([mode="button-group"]) .reset-btn,\r\n:host([mode="button-group"]) .clear-btn,\r\n:host([mode="segmented"]) .reset-btn,\r\n:host([mode="segmented"]) .clear-btn {\r\n  height:        var(--rg-height);\r\n  width:         var(--rg-height);\r\n  border-radius: var(--rg-radius);\r\n  font-size:     var(--rg-font-size);\r\n}\r\n\r\n:host([mode="button"]) .reset-btn,\r\n:host([mode="button"]) .clear-btn,\r\n:host([mode="button-group"]) .reset-btn,\r\n:host([mode="button-group"]) .clear-btn,\r\n:host([mode="segmented"]) .reset-btn,\r\n:host([mode="segmented"]) .clear-btn {\r\n  background:   transparent;\r\n  border:       1px solid var(--color-gray-light);\r\n  color:        var(--color-text-muted);\r\n}\r\n\r\n:host([mode="button"]) .reset-btn:hover,\r\n:host([mode="button-group"]) .reset-btn:hover,\r\n:host([mode="segmented"]) .reset-btn:hover {\r\n  background:   var(--border-subtle);\r\n  border-color: var(--color-gray-lighter);\r\n  color:        var(--color-text-main);\r\n}\r\n\r\n:host([mode="button"]) .clear-btn:hover,\r\n:host([mode="button-group"]) .clear-btn:hover,\r\n:host([mode="segmented"]) .clear-btn:hover {\r\n  background:   rgb(from var(--red) r g b / 0.10);\r\n  border-color: var(--color-gray-lighter);\r\n  color:        var(--color-danger);\r\n}\r\n\r\n:host([variant="outlined"][mode="button"]) .reset-btn,\r\n:host([variant="outlined"][mode="button"]) .clear-btn,\r\n:host([variant="outlined"][mode="button-group"]) .reset-btn,\r\n:host([variant="outlined"][mode="button-group"]) .clear-btn,\r\n:host([variant="outlined"][mode="segmented"]) .reset-btn,\r\n:host([variant="outlined"][mode="segmented"]) .clear-btn {\r\n  background:   transparent;\r\n  border-color: var(--rg-border);\r\n  color:        var(--rg-accent);\r\n}\r\n\r\n:host([variant="outlined"][mode="button"]) .reset-btn:hover,\r\n:host([variant="outlined"][mode="button-group"]) .reset-btn:hover,\r\n:host([variant="outlined"][mode="segmented"]) .reset-btn:hover {\r\n  background:   var(--border-subtle);\r\n  border-color: var(--rg-border-hover);\r\n  color:        var(--rg-accent-hover);\r\n}\r\n\r\n:host([variant="outlined"][mode="button"]) .clear-btn:hover,\r\n:host([variant="outlined"][mode="button-group"]) .clear-btn:hover,\r\n:host([variant="outlined"][mode="segmented"]) .clear-btn:hover {\r\n  background:   rgb(from var(--red) r g b / 0.10);\r\n  border-color: var(--rg-border-hover);\r\n  color:        var(--color-danger);\r\n}\r\n\r\n:host([variant="subtle"][mode="button"]) .reset-btn,\r\n:host([variant="subtle"][mode="button"]) .clear-btn,\r\n:host([variant="subtle"][mode="button-group"]) .reset-btn,\r\n:host([variant="subtle"][mode="button-group"]) .clear-btn,\r\n:host([variant="subtle"][mode="segmented"]) .reset-btn,\r\n:host([variant="subtle"][mode="segmented"]) .clear-btn {\r\n  background:   transparent;\r\n  border-color: transparent;\r\n  color:        var(--rg-accent);\r\n}\r\n\r\n:host([variant="subtle"][mode="button"]) .reset-btn:hover,\r\n:host([variant="subtle"][mode="button-group"]) .reset-btn:hover,\r\n:host([variant="subtle"][mode="segmented"]) .reset-btn:hover {\r\n  background:   var(--border-subtle);\r\n  border-color: transparent;\r\n  color:        var(--rg-accent-hover);\r\n}\r\n\r\n:host([variant="subtle"][mode="button"]) .clear-btn:hover,\r\n:host([variant="subtle"][mode="button-group"]) .clear-btn:hover,\r\n:host([variant="subtle"][mode="segmented"]) .clear-btn:hover {\r\n  background:   rgb(from var(--red) r g b / 0.10);\r\n  border-color: transparent;\r\n  color:        var(--color-danger);\r\n}\r\n';
+const style$7 = ':host {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--rg-gap, 0.286em);\n  font-size: var(--size-m);\n  --rg-solid-bg:          var(--color-solid);\n  --rg-solid-bg-hover:    var(--color-solid-hover);\n  --rg-solid-bg-active:   var(--color-solid-active);\n  --rg-solid-color:       var(--color-on-solid);\n  --rg-solid-color-hover: var(--color-on-solid-hover, var(--color-on-solid));\n  --rg-border:            var(--color-border);\n  --rg-border-hover:      var(--color-border-hover);\n  --rg-accent:            var(--color-accent);\n  --rg-accent-hover:      var(--color-accent-hover);\n  --rg-subtle-bg:         var(--color-subtle);\n  --rg-subtle-bg-hover:   var(--color-subtle-hover);\n\n  --rg-font-size:    1em;\n  --rg-height:       2.286em;\n  --rg-padding:      0.429em 1.071em;\n  --rg-min-width:    4.571em;\n  --rg-radius:       4px;\n  --rg-font-weight:  400;\n\n  --color-unselected:       var(--surface-base);\n  --color-unselected-hover: var(--color-gray-lighter);\n}\n\n:host([size="xs"]) { --rg-radius: 3px; }\n:host([size="sm"]) { --rg-radius: 3px; }\n\n.rg-container {\n  display: inline-flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\nslot {\n  display: none;\n}\n\n.rg-radio-option {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  cursor: pointer;\n  font-size: var(--rg-font-size);\n  color: var(--color-text-main);\n  user-select: none;\n}\n\n.rg-radio-input {\n  width: 14px;\n  height: 14px;\n  accent-color: var(--rg-solid-bg, var(--color-primary));\n  cursor: pointer;\n  margin: 0;\n  flex-shrink: 0;\n}\n\n.rg-radio-label {\n  line-height: 1.5;\n}\n\n.rg-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: inherit;\n  font-size: var(--rg-font-size);\n  font-weight: 400;\n  height: var(--rg-height);\n  padding: var(--rg-padding);\n  min-width: var(--rg-min-width);\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;\n  outline: none;\n  border-radius: var(--rg-radius);\n\n  background:   var(--color-unselected);\n  border:       1px solid var(--color-gray-light);\n  color:        var(--color-text-muted);\n}\n\n.rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--color-unselected-hover);\n  border-color: var(--color-gray-light);\n  color:        var(--color-text-main);\n}\n\n.rg-btn.selected {\n  background:   var(--rg-solid-bg);\n  border-color: var(--rg-solid-bg);\n  color:        var(--rg-solid-color);\n  font-weight:  500;\n  box-shadow:   0 1px 4px rgb(from black r g b / 0.22);\n}\n\n.rg-btn.selected:hover:not(:disabled) {\n  background:   var(--rg-solid-bg-hover);\n  border-color: var(--rg-solid-bg-hover);\n}\n\n.rg-btn:active:not(:disabled):not(.selected) {\n  background: var(--rg-subtle-bg-hover);\n  transform: translateY(1px);\n}\n\n.rg-btn:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n:host([variant="outlined"]) .rg-btn {\n  background:   transparent;\n  border-color: var(--rg-border);\n  color:        var(--rg-accent);\n}\n:host([variant="outlined"]) .rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--rg-subtle-bg);\n  border-color: var(--rg-accent);\n  color:        var(--rg-accent-hover);\n}\n:host([variant="outlined"]) .rg-btn.selected {\n  background:   var(--rg-solid-bg);\n  border-color: var(--rg-solid-bg);\n  color:        var(--rg-solid-color);\n}\n\n:host([variant="subtle"]) .rg-btn {\n  background:   transparent;\n  border-color: transparent;\n  color:        var(--rg-accent);\n}\n:host([variant="subtle"]) .rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--rg-subtle-bg);\n  border-color: transparent;\n  color:        var(--rg-accent-hover);\n}\n:host([variant="subtle"]) .rg-btn.selected {\n  background:   var(--rg-subtle-bg-hover);\n  border-color: transparent;\n  color:        var(--rg-accent-hover);\n  font-weight:  600;\n  box-shadow:   none;\n}\n\n:host([variant="filled"]) .rg-btn:not(.selected) {\n  background:   var(--surface-base);\n  border-color: var(--border-default);\n  color:        var(--color-text-muted);\n}\n\n:host([variant="filled"]) .rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--surface-raised);\n  border-color: var(--border-hover);\n  color:        var(--color-text-main);\n}\n\n:host([mode="button"]) .rg-container {\n  gap: 6px;\n}\n\n:host([mode="button-group"]) .rg-container {\n  gap: 0;\n}\n\n:host([mode="button-group"]) .rg-btn:not(.first):not(.only) {\n  margin-left: -1px;\n}\n\n:host([mode="button-group"]) .rg-btn.first {\n  border-radius: var(--rg-radius) 0 0 var(--rg-radius);\n}\n:host([mode="button-group"]) .rg-btn.inner {\n  border-radius: 0;\n}\n:host([mode="button-group"]) .rg-btn.last {\n  border-radius: 0 var(--rg-radius) var(--rg-radius) 0;\n}\n:host([mode="button-group"]) .rg-btn.only {\n  border-radius: var(--rg-radius);\n}\n\n:host([mode="button-group"]) .rg-btn:hover:not(:disabled),\n:host([mode="button-group"]) .rg-btn.selected {\n  position: relative;\n  z-index: 1;\n}\n\n:host([mode="segmented"]) .rg-container {\n  gap: 2px;\n  background:    var(--surface-raised);\n  border:        1px solid var(--border-subtle);\n  border-radius: calc(var(--rg-radius) + 2px);\n  padding:       2px;\n  flex-wrap:     nowrap;\n}\n\n:host([mode="segmented"]) .rg-btn {\n  background:    transparent;\n  border-color:  transparent;\n  color:         var(--color-text-muted);\n  border-radius: var(--rg-radius);\n  min-width:     var(--rg-min-width);\n  box-shadow:    none;\n  font-weight:   400;\n}\n\n:host([mode="segmented"]) .rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--rg-subtle-bg);\n  border-color: transparent;\n  color:        var(--color-text-secondary, var(--color-text-main));\n}\n\n:host([mode="segmented"]) .rg-btn.selected {\n  background:   var(--rg-solid-bg);\n  border-color: transparent;\n  color:        var(--rg-solid-color);\n  font-weight:  500;\n  box-shadow:   0 1px 4px rgb(from black r g b / 0.35);\n}\n\n:host([mode="segmented"]) .rg-btn.selected:hover:not(:disabled) {\n  background: var(--rg-solid-bg-hover);\n}\n\n:host([mode="segmented"]:not([color])) .rg-btn.selected {\n  background: var(--color-gray-lighter);\n  color:      var(--color-text-main);\n}\n\n:host([mode="segmented"][variant="outlined"]) .rg-container {\n  border-color: var(--rg-border);\n}\n:host([mode="segmented"][variant="outlined"]) .rg-btn.selected {\n  background:   var(--rg-solid-bg);\n  border-color: transparent;\n  color:        var(--rg-solid-color);\n}\n\n.reset-btn,\n.clear-btn {\n  display:        inline-flex;\n  align-items:    center;\n  justify-content: center;\n  cursor:         pointer;\n  transition:     var(--reset-btn-transition);\n  flex-shrink:    0;\n  line-height:    1;\n  font-family:    inherit;\n  padding:        0;\n\n  width:          1.333em;\n  height:         1.333em;\n  border-radius:  var(--reset-btn-border-radius);\n  border:         none;\n  background:     var(--reset-btn-bg);\n  color:          var(--reset-btn-color);\n}\n\n.reset-btn:hover { background: var(--reset-btn-bg-hover); color: var(--reset-btn-color-hover); }\n.clear-btn:hover  { background: var(--clear-btn-bg-hover);  color: var(--clear-btn-color-hover); }\n\n:host([mode="button"]) .reset-btn,\n:host([mode="button"]) .clear-btn,\n:host([mode="button-group"]) .reset-btn,\n:host([mode="button-group"]) .clear-btn,\n:host([mode="segmented"]) .reset-btn,\n:host([mode="segmented"]) .clear-btn {\n  height:        var(--rg-height);\n  width:         var(--rg-height);\n  border-radius: var(--rg-radius);\n  font-size:     var(--rg-font-size);\n}\n\n:host([mode="button"]) .reset-btn,\n:host([mode="button"]) .clear-btn,\n:host([mode="button-group"]) .reset-btn,\n:host([mode="button-group"]) .clear-btn,\n:host([mode="segmented"]) .reset-btn,\n:host([mode="segmented"]) .clear-btn {\n  background:   transparent;\n  border:       1px solid var(--color-gray-light);\n  color:        var(--color-text-muted);\n}\n\n:host([mode="button"]) .reset-btn:hover,\n:host([mode="button-group"]) .reset-btn:hover,\n:host([mode="segmented"]) .reset-btn:hover {\n  background:   var(--border-subtle);\n  border-color: var(--color-gray-lighter);\n  color:        var(--color-text-main);\n}\n\n:host([mode="button"]) .clear-btn:hover,\n:host([mode="button-group"]) .clear-btn:hover,\n:host([mode="segmented"]) .clear-btn:hover {\n  background:   rgb(from var(--red) r g b / 0.10);\n  border-color: var(--color-gray-lighter);\n  color:        var(--color-danger);\n}\n\n:host([variant="outlined"][mode="button"]) .reset-btn,\n:host([variant="outlined"][mode="button"]) .clear-btn,\n:host([variant="outlined"][mode="button-group"]) .reset-btn,\n:host([variant="outlined"][mode="button-group"]) .clear-btn,\n:host([variant="outlined"][mode="segmented"]) .reset-btn,\n:host([variant="outlined"][mode="segmented"]) .clear-btn {\n  background:   transparent;\n  border-color: var(--rg-border);\n  color:        var(--rg-accent);\n}\n\n:host([variant="outlined"][mode="button"]) .reset-btn:hover,\n:host([variant="outlined"][mode="button-group"]) .reset-btn:hover,\n:host([variant="outlined"][mode="segmented"]) .reset-btn:hover {\n  background:   var(--border-subtle);\n  border-color: var(--rg-border-hover);\n  color:        var(--rg-accent-hover);\n}\n\n:host([variant="outlined"][mode="button"]) .clear-btn:hover,\n:host([variant="outlined"][mode="button-group"]) .clear-btn:hover,\n:host([variant="outlined"][mode="segmented"]) .clear-btn:hover {\n  background:   rgb(from var(--red) r g b / 0.10);\n  border-color: var(--rg-border-hover);\n  color:        var(--color-danger);\n}\n\n:host([variant="subtle"][mode="button"]) .reset-btn,\n:host([variant="subtle"][mode="button"]) .clear-btn,\n:host([variant="subtle"][mode="button-group"]) .reset-btn,\n:host([variant="subtle"][mode="button-group"]) .clear-btn,\n:host([variant="subtle"][mode="segmented"]) .reset-btn,\n:host([variant="subtle"][mode="segmented"]) .clear-btn {\n  background:   transparent;\n  border-color: transparent;\n  color:        var(--rg-accent);\n}\n\n:host([variant="subtle"][mode="button"]) .reset-btn:hover,\n:host([variant="subtle"][mode="button-group"]) .reset-btn:hover,\n:host([variant="subtle"][mode="segmented"]) .reset-btn:hover {\n  background:   var(--border-subtle);\n  border-color: transparent;\n  color:        var(--rg-accent-hover);\n}\n\n:host([variant="subtle"][mode="button"]) .clear-btn:hover,\n:host([variant="subtle"][mode="button-group"]) .clear-btn:hover,\n:host([variant="subtle"][mode="segmented"]) .clear-btn:hover {\n  background:   rgb(from var(--red) r g b / 0.10);\n  border-color: transparent;\n  color:        var(--color-danger);\n}\n';
 const _RadioGroup = class _RadioGroup extends AeicoField {
   constructor() {
     super();
@@ -1918,7 +1918,7 @@ __publicField(Radio, "props", {
   disabled: { type: Boolean }
 });
 Radio.register();
-const styles = ":host {\r\n  display: block;\r\n  font-size: var(--size-base);\r\n\r\n  --switch-field-gap: 4px;\r\n\r\n  --toggle-width:       2.667em;\r\n  --toggle-height:      1.333em;\r\n  --toggle-slider-size: 1em;\r\n  --toggle-gap:         calc((var(--toggle-height) - var(--toggle-slider-size)) / 2);\r\n  --toggle-border-radius: calc(var(--toggle-height) / 2);\r\n  --toggle-bg:          var(--color-gray);\r\n  --toggle-bg-checked:  var(--color-solid);\r\n  --toggle-slider-bg:   white;\r\n  --toggle-transition:  0.2s;\r\n\r\n  /* Default color when no [color] attribute — overridden by color.css :host([color=...]) */\r\n  --color-solid: var(--color-primary);\r\n}\r\n\r\n.switch-container {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: var(--switch-field-gap);\r\n}\r\n\r\n.switch-wrapper {\r\n  position: relative;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  width: var(--toggle-width);\r\n  height: var(--toggle-height);\r\n  flex-shrink: 0;\r\n}\r\n\r\n.field-input {\r\n  position: absolute;\r\n  opacity: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  cursor: pointer;\r\n  margin: 0;\r\n  z-index: 1;\r\n  border: none;\r\n  border-radius: 0;\r\n  background: none;\r\n  accent-color: unset;\r\n}\r\n\r\n.field-input:disabled {\r\n  cursor: not-allowed;\r\n}\r\n\r\n.toggle-slider {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background: var(--toggle-bg);\r\n  border-radius: var(--toggle-border-radius);\r\n  transition: var(--toggle-transition);\r\n  pointer-events: none;\r\n}\r\n\r\n.toggle-slider::before {\r\n  content: '';\r\n  position: absolute;\r\n  height: var(--toggle-slider-size);\r\n  width: var(--toggle-slider-size);\r\n  left: var(--toggle-gap);\r\n  top: var(--toggle-gap);\r\n  background: var(--toggle-slider-bg);\r\n  border-radius: 50%;\r\n  transition: var(--toggle-transition);\r\n}\r\n\r\n.field-input:checked + .toggle-slider {\r\n  background: var(--toggle-bg-checked);\r\n}\r\n\r\n.field-input:checked + .toggle-slider::before {\r\n  transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));\r\n}\r\n\r\n.field-input:disabled + .toggle-slider {\r\n  opacity: 0.5;\r\n  pointer-events: auto;\r\n}\r\n\r\n/* action buttons */\r\n.reset-btn,\r\n.clear-btn {\r\n  width: 1.333em;\r\n  height: 1.333em;\r\n  border: none;\r\n  border-radius: var(--reset-btn-border-radius);\r\n  cursor: pointer;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  background: var(--reset-btn-bg);\r\n  color: var(--reset-btn-color);\r\n  transition: var(--reset-btn-transition);\r\n  flex-shrink: 0;\r\n  line-height: 1;\r\n}\r\n\r\n.reset-btn:hover {\r\n  background: var(--reset-btn-bg-hover);\r\n  color: var(--reset-btn-color-hover);\r\n}\r\n\r\n.clear-btn:hover {\r\n  background: var(--clear-btn-bg-hover);\r\n  color: var(--clear-btn-color-hover);\r\n}\r\n";
+const styles = ":host {\n  display: block;\n  font-size: var(--size-base);\n\n  --switch-field-gap: 4px;\n\n  --toggle-width:       2.667em;\n  --toggle-height:      1.333em;\n  --toggle-slider-size: 1em;\n  --toggle-gap:         calc((var(--toggle-height) - var(--toggle-slider-size)) / 2);\n  --toggle-border-radius: calc(var(--toggle-height) / 2);\n  --toggle-bg:          var(--color-gray);\n  --toggle-bg-checked:  var(--color-solid);\n  --toggle-slider-bg:   white;\n  --toggle-transition:  0.2s;\n\n  /* Default color when no [color] attribute — overridden by color.css :host([color=...]) */\n  --color-solid: var(--color-primary);\n}\n\n.switch-container {\n  display: flex;\n  align-items: center;\n  gap: var(--switch-field-gap);\n}\n\n.switch-wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  width: var(--toggle-width);\n  height: var(--toggle-height);\n  flex-shrink: 0;\n}\n\n.field-input {\n  position: absolute;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  margin: 0;\n  z-index: 1;\n  border: none;\n  border-radius: 0;\n  background: none;\n  accent-color: unset;\n}\n\n.field-input:disabled {\n  cursor: not-allowed;\n}\n\n.toggle-slider {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--toggle-bg);\n  border-radius: var(--toggle-border-radius);\n  transition: var(--toggle-transition);\n  pointer-events: none;\n}\n\n.toggle-slider::before {\n  content: '';\n  position: absolute;\n  height: var(--toggle-slider-size);\n  width: var(--toggle-slider-size);\n  left: var(--toggle-gap);\n  top: var(--toggle-gap);\n  background: var(--toggle-slider-bg);\n  border-radius: 50%;\n  transition: var(--toggle-transition);\n}\n\n.field-input:checked + .toggle-slider {\n  background: var(--toggle-bg-checked);\n}\n\n.field-input:checked + .toggle-slider::before {\n  transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));\n}\n\n.field-input:disabled + .toggle-slider {\n  opacity: 0.5;\n  pointer-events: auto;\n}\n\n/* action buttons */\n.reset-btn,\n.clear-btn {\n  width: 1.333em;\n  height: 1.333em;\n  border: none;\n  border-radius: var(--reset-btn-border-radius);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--reset-btn-bg);\n  color: var(--reset-btn-color);\n  transition: var(--reset-btn-transition);\n  flex-shrink: 0;\n  line-height: 1;\n}\n\n.reset-btn:hover {\n  background: var(--reset-btn-bg-hover);\n  color: var(--reset-btn-color-hover);\n}\n\n.clear-btn:hover {\n  background: var(--clear-btn-bg-hover);\n  color: var(--clear-btn-color-hover);\n}\n";
 class Switch extends AeicoField {
   constructor() {
     super(...arguments);
@@ -1980,7 +1980,7 @@ __publicField(Switch, "props", {
 });
 __publicField(Switch, "styles", [styleVariables, sizeCSS, colorCSS, styles]);
 Switch.register();
-const style$6 = ":host {\r\n  display: block;\r\n}\r\n\r\n/* Hide the separator template slot visually */\r\n.sep-template {\r\n  display: none !important;\r\n}\r\n\r\n.list {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  list-style: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  font-size: inherit;\r\n  line-height: 1.5;\r\n}\r\n";
+const style$6 = ":host {\n  display: block;\n}\n\n/* Hide the separator template slot visually */\n.sep-template {\n  display: none !important;\n}\n\n.list {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  font-size: inherit;\n  line-height: 1.5;\n}\n";
 var __create$a = Object.create;
 var __defProp$a = Object.defineProperty;
 var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
@@ -2096,65 +2096,65 @@ __decoratorMetadata$a(_init$a, Breadcrumb);
 __publicField$a(Breadcrumb, "tagName", "breadcrumb");
 __publicField$a(Breadcrumb, "styles", [styleVariables, colorCSS, style$6]);
 Breadcrumb.register();
-const style$5 = `:host {\r
-  display: contents;\r
-}\r
-\r
-.item {\r
-  display: inline-flex;\r
-  align-items: center;\r
-  list-style: none;\r
-  white-space: nowrap;\r
-}\r
-\r
-/* Separator — uses a fixed muted color that does NOT follow the breadcrumb's color prop */\r
-.sep {\r
-  display: inline-flex;\r
-  align-items: center;\r
-  color: var(--color-text-muted);\r
-  padding: 0 0.35em;\r
-  user-select: none;\r
-  pointer-events: none;\r
-  flex-shrink: 0;\r
-  font-size: 0.85em;\r
-}\r
-\r
-/* Hide separator on the first item */\r
-:host(:first-child) .sep,\r
-:host(:first-of-type) .sep {\r
-  display: none;\r
-}\r
-\r
-.label {\r
-  display: inline-flex;\r
-  align-items: center;\r
-  color: var(--color-text-muted);\r
-}\r
-\r
-/* Current page — last item */\r
-:host([aria-current="page"]) .label {\r
-  color: var(--color-text-main);\r
-  font-weight: 500;\r
-  cursor: default;\r
-}\r
-\r
-/* Link items */\r
-.label a {\r
-  color: var(--color-accent, var(--color-text-link));\r
-  text-decoration: none;\r
-  outline: none;\r
-}\r
-\r
-.label a:hover {\r
-  color: var(--color-accent-hover, var(--color-text-link-hover));\r
-  text-decoration: underline;\r
-}\r
-\r
-.label a:focus-visible {\r
-  outline: 2px solid var(--color-accent, var(--focus-ring-color));\r
-  outline-offset: 2px;\r
-  border-radius: 2px;\r
-}\r
+const style$5 = `:host {
+  display: contents;
+}
+.item {
+  display: inline-flex;
+  align-items: center;
+  list-style: none;
+  white-space: nowrap;
+}
+/* Separator — uses a fixed muted color that does NOT follow the breadcrumb's color prop */
+.sep {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-text-muted);
+  padding: 0 0.35em;
+  user-select: none;
+  pointer-events: none;
+  flex-shrink: 0;
+  font-size: 0.85em;
+}
+/* Hide separator on the first item */
+:host(:first-child) .sep,
+:host(:first-of-type) .sep {
+  display: none;
+}
+.label {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-text-muted);
+}
+/* Current page — last item */
+:host([aria-current="page"]) .label {
+  color: var(--color-text-main);
+  font-weight: 500;
+  cursor: default;
+}
+/* Link items */
+.label a {
+  color: var(--color-accent, var(--color-text-link));
+  text-decoration: none;
+  outline: none;
+}
+.label a:hover {
+  color: var(--color-accent-hover, var(--color-text-link-hover));
+  text-decoration: underline;
+}
+.label a:focus-visible {
+  outline: 2px solid var(--color-accent, var(--focus-ring-color));
+  outline-offset: 2px;
+  border-radius: 2px;
+}
 `;
 var __create$9 = Object.create;
 var __defProp$9 = Object.defineProperty;
@@ -2233,219 +2233,219 @@ __decoratorMetadata$9(_init$9, BreadcrumbItem);
 __publicField$9(BreadcrumbItem, "tagName", "breadcrumb-item");
 __publicField$9(BreadcrumbItem, "styles", [styleVariables, style$5]);
 BreadcrumbItem.register();
-const buttonStyle = `:host {\r
-  display: inline-block;\r
-  --btn-solid-bg:          var(--color-solid);\r
-  --btn-solid-bg-hover:    var(--color-solid-hover);\r
-  --btn-solid-bg-active:   var(--color-solid-active);\r
-  --btn-solid-color:       var(--color-on-solid);\r
-  --btn-solid-color-hover: var(--color-on-solid-hover);\r
-  --btn-border:            var(--color-border);\r
-  --btn-border-hover:      var(--color-border-hover);\r
-  --btn-accent:            var(--color-accent);\r
-  --btn-accent-hover:      var(--color-accent-hover);\r
-  --btn-subtle-bg:         var(--color-subtle);\r
-  --btn-subtle-bg-hover:   var(--color-subtle-hover);\r
-}\r
-\r
-button {\r
-  display: inline-flex;\r
-  align-items: center;\r
-  justify-content: center;\r
-  gap: 6px;\r
-  font-family: inherit;\r
-  font-weight: 400;\r
-  text-align: center;\r
-  white-space: nowrap;\r
-  vertical-align: middle;\r
-  user-select: none;\r
-  cursor: pointer;\r
-  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\r
-  outline: none;\r
-  position: relative;\r
-  padding: 0.429em 1.071em;\r
-  font-size: 1em;\r
-  line-height: 1.5;\r
-  border-radius: var(--_btn-r-tl, 4px) var(--_btn-r-tr, 4px) var(--_btn-r-br, 4px) var(--_btn-r-bl, 4px);\r
-  min-width: 4.571em;\r
-  height: 2.286em;\r
-  width: 100%;\r
-\r
-  background:   var(--btn-solid-bg);\r
-  border: 1px solid var(--btn-solid-bg);\r
-  color:        var(--btn-solid-color);\r
-}\r
-\r
-button:focus  { outline: none; }\r
-button:active { transform: translateY(1px); }\r
-\r
-button:hover:not(:disabled) {\r
-  background:   var(--btn-solid-bg-hover);\r
-  border-color: var(--btn-border-hover);\r
-  color:        var(--btn-solid-color-hover, var(--btn-solid-color));\r
-}\r
-\r
-button:active:not(:disabled) { background: var(--btn-solid-bg-active); }\r
-\r
-button:disabled {\r
-  opacity: 0.5;\r
-  cursor: not-allowed;\r
-}\r
-\r
-:host([size="xs"]) button { border-radius: var(--_btn-r-tl, 3px) var(--_btn-r-tr, 3px) var(--_btn-r-br, 3px) var(--_btn-r-bl, 3px); }\r
-:host([size="sm"]) button { border-radius: var(--_btn-r-tl, 3px) var(--_btn-r-tr, 3px) var(--_btn-r-br, 3px) var(--_btn-r-bl, 3px); }\r
-\r
-/* --- Variants --- */\r
-\r
-:host([variant="outlined"]) button {\r
-  background:   transparent;\r
-  border-color: var(--btn-border);\r
-  color:        var(--btn-accent);\r
-}\r
-\r
-:host([variant="outlined"]) button:hover:not(:disabled) {\r
-  background:   var(--btn-subtle-bg);\r
-  border-color: var(--btn-border-hover);\r
-  color:        var(--btn-accent-hover);\r
-}\r
-\r
-:host([variant="outlined"]) button:active:not(:disabled) {\r
-  background: var(--btn-subtle-bg-hover);\r
-}\r
-\r
-:host([variant="subtle"]) button {\r
-  background:   var(--btn-subtle-bg);\r
-  border-color: transparent;\r
-  color:        var(--btn-accent);\r
-}\r
-\r
-:host([variant="subtle"]) button:hover:not(:disabled) {\r
-  background: var(--btn-subtle-bg-hover);\r
-  color:      var(--btn-accent-hover);\r
-}\r
-\r
-:host([variant="subtle"]) button:active:not(:disabled) {\r
-  background: var(--btn-subtle-bg-hover);\r
-}\r
-\r
-:host([variant="faint"]) button {\r
-  background:   var(--btn-subtle-bg);\r
-  border-color: var(--btn-border);\r
-  color:        var(--btn-accent);\r
-}\r
-\r
-:host([variant="faint"]) button:hover:not(:disabled) {\r
-  background:   var(--btn-subtle-bg-hover);\r
-  border-color: var(--btn-border-hover);\r
-  color:        var(--btn-accent-hover);\r
-}\r
-\r
-:host([variant="faint"]) button:active:not(:disabled) {\r
-  background: var(--btn-subtle-bg-hover);\r
-}\r
-\r
-:host([variant="text"]) button {\r
-  background:   transparent;\r
-  border-color: transparent;\r
-  color:        var(--btn-accent);\r
-  min-width:     auto;\r
-  padding-left:  4px;\r
-  padding-right: 4px;\r
-}\r
-\r
-:host([variant="text"]) button:hover:not(:disabled) {\r
-  background: var(--btn-subtle-bg);\r
-  color:      var(--btn-accent-hover);\r
-}\r
-\r
-:host([variant="text"]) button:active:not(:disabled) {\r
-  background: var(--btn-subtle-bg-hover);\r
-}\r
-\r
-/* Icon-only: single ae-icon child → square compact layout */\r
-:host([icon-only]) {\r
-  display: inline-flex;\r
-}\r
-\r
-:host([icon-only]:not([size])) {\r
-  font-size: var(--size-m);\r
-}\r
-\r
-:host([icon-only]) button {\r
-  padding:   0;\r
-  min-width: auto;\r
-  width:     2.286em;\r
-  height:    2.286em;\r
-  line-height: 1;\r
-}\r
-\r
-:host([icon-only]) ::slotted(ae-icon) {\r
-  font-size: 1.5em;\r
-}\r
-\r
-:host([active]) button {\r
-  background:   var(--btn-solid-bg-active);\r
-  border-color: var(--btn-border-hover);\r
-  color:        var(--btn-solid-color-hover, var(--btn-solid-color));\r
-}\r
-\r
-.btn-icon {\r
-  padding: 0;\r
-  min-width: auto;\r
-  width: 2.286em;\r
-  height: 2.286em;\r
-  display: inline-flex;\r
-  align-items: center;\r
-  justify-content: center;\r
-  border-radius: 4px;\r
-}\r
-\r
-.btn-icon.btn-lg {\r
-  width: 2.857em;\r
-  height: 2.857em;\r
-}\r
-\r
-.btn-circle {\r
-  border-radius: 50%;\r
-}\r
-\r
-:host([block]) {\r
-  display: block;\r
-}\r
-\r
-button.btn-loading {\r
-  position: relative;\r
-  pointer-events: none;\r
-  color: transparent;\r
-}\r
-\r
-button.btn-loading::before {\r
-  content: '';\r
-  position: absolute;\r
-  width: 1em;\r
-  height: 1em;\r
-  border: 2px solid currentColor;\r
-  border-top-color: transparent;\r
-  border-radius: 50%;\r
-  animation: btn-spin 0.6s linear infinite;\r
-  color: currentColor;\r
-  opacity: 0.8;\r
-}\r
-\r
-@keyframes btn-spin {\r
-  to {\r
-    transform: rotate(360deg);\r
-  }\r
-}\r
-\r
-.btn-icon-left {\r
-  margin-right: -2px;\r
-}\r
-\r
-.btn-icon-right {\r
-  margin-left: -2px;\r
-}\r
-\r
+const buttonStyle = `:host {
+  display: inline-block;
+  --btn-solid-bg:          var(--color-solid);
+  --btn-solid-bg-hover:    var(--color-solid-hover);
+  --btn-solid-bg-active:   var(--color-solid-active);
+  --btn-solid-color:       var(--color-on-solid);
+  --btn-solid-color-hover: var(--color-on-solid-hover);
+  --btn-border:            var(--color-border);
+  --btn-border-hover:      var(--color-border-hover);
+  --btn-accent:            var(--color-accent);
+  --btn-accent-hover:      var(--color-accent-hover);
+  --btn-subtle-bg:         var(--color-subtle);
+  --btn-subtle-bg-hover:   var(--color-subtle-hover);
+}
+button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-family: inherit;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  outline: none;
+  position: relative;
+  padding: 0.429em 1.071em;
+  font-size: 1em;
+  line-height: 1.5;
+  border-radius: var(--_btn-r-tl, 4px) var(--_btn-r-tr, 4px) var(--_btn-r-br, 4px) var(--_btn-r-bl, 4px);
+  min-width: 4.571em;
+  height: 2.286em;
+  width: 100%;
+  background:   var(--btn-solid-bg);
+  border: 1px solid var(--btn-solid-bg);
+  color:        var(--btn-solid-color);
+}
+button:focus  { outline: none; }
+button:active { transform: translateY(1px); }
+button:hover:not(:disabled) {
+  background:   var(--btn-solid-bg-hover);
+  border-color: var(--btn-border-hover);
+  color:        var(--btn-solid-color-hover, var(--btn-solid-color));
+}
+button:active:not(:disabled) { background: var(--btn-solid-bg-active); }
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+:host([size="xs"]) button { border-radius: var(--_btn-r-tl, 3px) var(--_btn-r-tr, 3px) var(--_btn-r-br, 3px) var(--_btn-r-bl, 3px); }
+:host([size="sm"]) button { border-radius: var(--_btn-r-tl, 3px) var(--_btn-r-tr, 3px) var(--_btn-r-br, 3px) var(--_btn-r-bl, 3px); }
+/* --- Variants --- */
+:host([variant="outlined"]) button {
+  background:   transparent;
+  border-color: var(--btn-border);
+  color:        var(--btn-accent);
+}
+:host([variant="outlined"]) button:hover:not(:disabled) {
+  background:   var(--btn-subtle-bg);
+  border-color: var(--btn-border-hover);
+  color:        var(--btn-accent-hover);
+}
+:host([variant="outlined"]) button:active:not(:disabled) {
+  background: var(--btn-subtle-bg-hover);
+}
+:host([variant="subtle"]) button {
+  background:   var(--btn-subtle-bg);
+  border-color: transparent;
+  color:        var(--btn-accent);
+}
+:host([variant="subtle"]) button:hover:not(:disabled) {
+  background: var(--btn-subtle-bg-hover);
+  color:      var(--btn-accent-hover);
+}
+:host([variant="subtle"]) button:active:not(:disabled) {
+  background: var(--btn-subtle-bg-hover);
+}
+:host([variant="faint"]) button {
+  background:   var(--btn-subtle-bg);
+  border-color: var(--btn-border);
+  color:        var(--btn-accent);
+}
+:host([variant="faint"]) button:hover:not(:disabled) {
+  background:   var(--btn-subtle-bg-hover);
+  border-color: var(--btn-border-hover);
+  color:        var(--btn-accent-hover);
+}
+:host([variant="faint"]) button:active:not(:disabled) {
+  background: var(--btn-subtle-bg-hover);
+}
+:host([variant="text"]) button {
+  background:   transparent;
+  border-color: transparent;
+  color:        var(--btn-accent);
+  min-width:     auto;
+  padding-left:  4px;
+  padding-right: 4px;
+}
+:host([variant="text"]) button:hover:not(:disabled) {
+  background: var(--btn-subtle-bg);
+  color:      var(--btn-accent-hover);
+}
+:host([variant="text"]) button:active:not(:disabled) {
+  background: var(--btn-subtle-bg-hover);
+}
+/* Icon-only: single ae-icon child → square compact layout */
+:host([icon-only]) {
+  display: inline-flex;
+}
+:host([icon-only]:not([size])) {
+  font-size: var(--size-m);
+}
+:host([icon-only]) button {
+  padding:   0;
+  min-width: auto;
+  width:     2.286em;
+  height:    2.286em;
+  line-height: 1;
+}
+:host([icon-only]) ::slotted(ae-icon) {
+  font-size: 1.5em;
+}
+:host([active]) button {
+  background:   var(--btn-solid-bg-active);
+  border-color: var(--btn-border-hover);
+  color:        var(--btn-solid-color-hover, var(--btn-solid-color));
+}
+.btn-icon {
+  padding: 0;
+  min-width: auto;
+  width: 2.286em;
+  height: 2.286em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+.btn-icon.btn-lg {
+  width: 2.857em;
+  height: 2.857em;
+}
+.btn-circle {
+  border-radius: 50%;
+}
+:host([block]) {
+  display: block;
+}
+button.btn-loading {
+  position: relative;
+  pointer-events: none;
+  color: transparent;
+}
+button.btn-loading::before {
+  content: '';
+  position: absolute;
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: btn-spin 0.6s linear infinite;
+  color: currentColor;
+  opacity: 0.8;
+}
+@keyframes btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.btn-icon-left {
+  margin-right: -2px;
+}
+.btn-icon-right {
+  margin-left: -2px;
+}
 `;
 var __create$8 = Object.create;
 var __defProp$8 = Object.defineProperty;
@@ -2576,100 +2576,100 @@ __decorateElement$8(_init$8, 5, "block", _block_dec, Button);
 __decoratorMetadata$8(_init$8, Button);
 __publicField$8(Button, "styles", [styleVariables, sizeCSS, colorCSS, buttonStyle]);
 Button.register();
-const style$4 = ":host {\r\n  display: inline-block;\r\n  position: relative;\r\n\r\n  --dropdown-z-index: 1000;\r\n  --dropdown-bg: var(--surface-overlay, #fff);\r\n  --dropdown-border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));\r\n  --dropdown-border-radius: var(--ae-radius-md, 6px);\r\n  --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\r\n  --dropdown-min-width: 10rem;\r\n  --dropdown-padding: 0.25rem 0;\r\n}\r\n\r\n.trigger-wrapper {\r\n  display: flex;\r\n  align-items: stretch;\r\n  height: 100%;\r\n}\r\n\r\n/* Internal trigger rendered when `label` prop is set.\r\n   Uses --dropdown-trigger-* variables. Context components (e.g. ae-navbar)\r\n   map their own tokens to these variables via ::slotted(ae-dropdown). */\r\n.trigger-label {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  height: var(--dropdown-trigger-height, auto);\r\n  padding: 0 var(--dropdown-trigger-padding-x, 0.75rem);\r\n  color: var(--dropdown-trigger-color, inherit);\r\n  background: var(--dropdown-trigger-bg, none);\r\n  border: none;\r\n  border-radius: var(--dropdown-trigger-radius, 0);\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  cursor: pointer;\r\n  font: inherit;\r\n  font-size: var(--dropdown-trigger-font-size, inherit);\r\n  white-space: nowrap;\r\n  transition: color 0.15s ease, background-color 0.15s ease;\r\n  outline-offset: 2px;\r\n}\r\n\r\n.trigger-label:hover {\r\n  color: var(--dropdown-trigger-hover-color, inherit);\r\n  background-color: var(--dropdown-trigger-hover-bg, transparent);\r\n}\r\n\r\n:host([disabled]) .trigger-label {\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n/* Bootstrap-style CSS border caret — shadow DOM only, no global injection needed */\r\n.ae-dropdown-arrow {\r\n  display: inline-block;\r\n  width: 0;\r\n  height: 0;\r\n  margin-left: 0.3em;\r\n  vertical-align: 0.2em;\r\n  flex-shrink: 0;\r\n}\r\n.ae-dropdown-arrow--bottom {\r\n  border-top: 0.35em solid;\r\n  border-right: 0.35em solid transparent;\r\n  border-left: 0.35em solid transparent;\r\n}\r\n.ae-dropdown-arrow--top {\r\n  border-bottom: 0.35em solid;\r\n  border-right: 0.35em solid transparent;\r\n  border-left: 0.35em solid transparent;\r\n}\r\n.ae-dropdown-arrow--right {\r\n  border-left: 0.35em solid;\r\n  border-top: 0.35em solid transparent;\r\n  border-bottom: 0.35em solid transparent;\r\n}\r\n.ae-dropdown-arrow--left {\r\n  border-right: 0.35em solid;\r\n  border-top: 0.35em solid transparent;\r\n  border-bottom: 0.35em solid transparent;\r\n}\r\n\r\n.panel {\r\n  display: none;\r\n  position: absolute;\r\n  z-index: var(--dropdown-z-index);\r\n  background: var(--dropdown-bg);\r\n  border: var(--dropdown-border);\r\n  border-radius: var(--dropdown-border-radius);\r\n  box-shadow: var(--dropdown-shadow);\r\n  min-width: var(--dropdown-min-width);\r\n  padding: var(--dropdown-padding);\r\n  box-sizing: border-box;\r\n  /* Prevent panel from being wider than viewport */\r\n  max-width: calc(100vw - 16px);\r\n}\r\n\r\n.panel.open {\r\n  display: block;\r\n}\r\n\r\n/* placement variants */\r\n.panel.placement-bottom-start {\r\n  top: 100%;\r\n  left: 0;\r\n  margin-top: 4px;\r\n}\r\n\r\n.panel.placement-bottom-end {\r\n  top: 100%;\r\n  right: 0;\r\n  margin-top: 4px;\r\n}\r\n\r\n.panel.placement-bottom {\r\n  top: 100%;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  margin-top: 4px;\r\n}\r\n\r\n.panel.placement-top-start {\r\n  bottom: 100%;\r\n  left: 0;\r\n  margin-bottom: 4px;\r\n}\r\n\r\n.panel.placement-top-end {\r\n  bottom: 100%;\r\n  right: 0;\r\n  margin-bottom: 4px;\r\n}\r\n\r\n.panel.placement-top {\r\n  bottom: 100%;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  margin-bottom: 4px;\r\n}\r\n\r\n/* right placements */\r\n.panel.placement-right-start {\r\n  top: 0;\r\n  left: 100%;\r\n  margin-left: 4px;\r\n}\r\n\r\n.panel.placement-right-end {\r\n  bottom: 0;\r\n  left: 100%;\r\n  margin-left: 4px;\r\n}\r\n\r\n.panel.placement-right {\r\n  top: 50%;\r\n  left: 100%;\r\n  transform: translateY(-50%);\r\n  margin-left: 4px;\r\n}\r\n\r\n/* left placements */\r\n.panel.placement-left-start {\r\n  top: 0;\r\n  right: 100%;\r\n  margin-right: 4px;\r\n}\r\n\r\n.panel.placement-left-end {\r\n  bottom: 0;\r\n  right: 100%;\r\n  margin-right: 4px;\r\n}\r\n\r\n.panel.placement-left {\r\n  top: 50%;\r\n  right: 100%;\r\n  transform: translateY(-50%);\r\n  margin-right: 4px;\r\n}\r\n";
-const style$3 = `:host {\r
-  display: block;\r
-\r
-  --dropdown-item-padding: 0.5rem 0.875rem;\r
-  --dropdown-item-bg: transparent;\r
-  --dropdown-item-bg-hover: var(--surface-raised, rgba(0, 0, 0, 0.05));\r
-  --dropdown-item-bg-active: var(--surface-raised-active, rgba(0, 0, 0, 0.1));\r
-  --dropdown-item-color: var(--color-text-main, inherit);\r
-  --dropdown-item-color-disabled: var(--color-text-disabled, rgba(0, 0, 0, 0.35));\r
-  --dropdown-item-font-size: 0.9375rem;\r
-  --dropdown-item-gap: 0.5rem;\r
-  --dropdown-item-transition: background 0.1s;\r
-  --dropdown-item-border-radius: var(--ae-radius-sm, 4px);\r
-}\r
-\r
-.item {\r
-  display: flex;\r
-  align-items: center;\r
-  gap: var(--dropdown-item-gap);\r
-  width: 100%;\r
-  padding: var(--dropdown-item-padding);\r
-  font-size: var(--dropdown-item-font-size);\r
-  font-family: inherit;\r
-  color: var(--dropdown-item-color);\r
-  background: var(--dropdown-item-bg);\r
-  border: none;\r
-  border-radius: var(--dropdown-item-border-radius);\r
-  text-align: left;\r
-  text-decoration: none;\r
-  cursor: pointer;\r
-  user-select: none;\r
-  white-space: nowrap;\r
-  box-sizing: border-box;\r
-  transition: var(--dropdown-item-transition);\r
-  outline: none;\r
-}\r
-\r
-.item:hover:not(:disabled):not([aria-disabled="true"]) {\r
-  background: var(--dropdown-item-bg-hover);\r
-}\r
-\r
-.item:active:not(:disabled):not([aria-disabled="true"]) {\r
-  background: var(--dropdown-item-bg-active);\r
-}\r
-\r
-.item:focus-visible {\r
-  background: var(--dropdown-item-bg-hover);\r
-  outline: 2px solid var(--color-primary, #0e639c);\r
-  outline-offset: -2px;\r
-}\r
-\r
-/* disabled */\r
-:host([disabled]) .item,\r
-.item:disabled {\r
-  color: var(--dropdown-item-color-disabled);\r
-  cursor: default;\r
-  pointer-events: none;\r
-}\r
-\r
-/* Active item — current selection, current route, etc. */\r
-:host([active]) .item {\r
-  background: var(--dropdown-item-bg-selected, rgba(0, 0, 0, 0.06));\r
-  color: var(--dropdown-item-color-active, var(--color-primary, #0e639c));\r
-  font-weight: 500;\r
-}\r
-\r
-/* Checkbox mode — fixed-width indicator column */\r
-.check-indicator {\r
-  display: inline-flex;\r
-  align-items: center;\r
-  justify-content: center;\r
-  width: 1em;\r
-  flex-shrink: 0;\r
-}\r
-\r
-/* CSS-drawn checkmark (border trick) */\r
-.check-indicator::after {\r
-  content: '';\r
-  display: block;\r
-  width: 0.3em;\r
-  height: 0.55em;\r
-  border-right: 0.125em solid currentColor;\r
-  border-bottom: 0.125em solid currentColor;\r
-  transform: rotate(45deg) translateY(-0.1em);\r
-  opacity: 0;\r
-  transition: opacity 0.1s;\r
-}\r
-\r
-:host([checked]) .check-indicator::after {\r
-  opacity: 1;\r
-}\r
+const style$4 = ":host {\n  display: inline-block;\n  position: relative;\n\n  --dropdown-z-index: 1000;\n  --dropdown-bg: var(--surface-overlay, #fff);\n  --dropdown-border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));\n  --dropdown-border-radius: var(--ae-radius-md, 6px);\n  --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  --dropdown-min-width: 10rem;\n  --dropdown-padding: 0.25rem 0;\n}\n\n.trigger-wrapper {\n  display: flex;\n  align-items: stretch;\n  height: 100%;\n}\n\n/* Internal trigger rendered when `label` prop is set.\n   Uses --dropdown-trigger-* variables. Context components (e.g. ae-navbar)\n   map their own tokens to these variables via ::slotted(ae-dropdown). */\n.trigger-label {\n  display: inline-flex;\n  align-items: center;\n  height: var(--dropdown-trigger-height, auto);\n  padding: 0 var(--dropdown-trigger-padding-x, 0.75rem);\n  color: var(--dropdown-trigger-color, inherit);\n  background: var(--dropdown-trigger-bg, none);\n  border: none;\n  border-radius: var(--dropdown-trigger-radius, 0);\n  -webkit-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--dropdown-trigger-font-size, inherit);\n  white-space: nowrap;\n  transition: color 0.15s ease, background-color 0.15s ease;\n  outline-offset: 2px;\n}\n\n.trigger-label:hover {\n  color: var(--dropdown-trigger-hover-color, inherit);\n  background-color: var(--dropdown-trigger-hover-bg, transparent);\n}\n\n:host([disabled]) .trigger-label {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Bootstrap-style CSS border caret — shadow DOM only, no global injection needed */\n.ae-dropdown-arrow {\n  display: inline-block;\n  width: 0;\n  height: 0;\n  margin-left: 0.3em;\n  vertical-align: 0.2em;\n  flex-shrink: 0;\n}\n.ae-dropdown-arrow--bottom {\n  border-top: 0.35em solid;\n  border-right: 0.35em solid transparent;\n  border-left: 0.35em solid transparent;\n}\n.ae-dropdown-arrow--top {\n  border-bottom: 0.35em solid;\n  border-right: 0.35em solid transparent;\n  border-left: 0.35em solid transparent;\n}\n.ae-dropdown-arrow--right {\n  border-left: 0.35em solid;\n  border-top: 0.35em solid transparent;\n  border-bottom: 0.35em solid transparent;\n}\n.ae-dropdown-arrow--left {\n  border-right: 0.35em solid;\n  border-top: 0.35em solid transparent;\n  border-bottom: 0.35em solid transparent;\n}\n\n.panel {\n  display: none;\n  position: absolute;\n  z-index: var(--dropdown-z-index);\n  background: var(--dropdown-bg);\n  border: var(--dropdown-border);\n  border-radius: var(--dropdown-border-radius);\n  box-shadow: var(--dropdown-shadow);\n  min-width: var(--dropdown-min-width);\n  padding: var(--dropdown-padding);\n  box-sizing: border-box;\n  /* Prevent panel from being wider than viewport */\n  max-width: calc(100vw - 16px);\n}\n\n.panel.open {\n  display: block;\n}\n\n/* placement variants */\n.panel.placement-bottom-start {\n  top: 100%;\n  left: 0;\n  margin-top: 4px;\n}\n\n.panel.placement-bottom-end {\n  top: 100%;\n  right: 0;\n  margin-top: 4px;\n}\n\n.panel.placement-bottom {\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-top: 4px;\n}\n\n.panel.placement-top-start {\n  bottom: 100%;\n  left: 0;\n  margin-bottom: 4px;\n}\n\n.panel.placement-top-end {\n  bottom: 100%;\n  right: 0;\n  margin-bottom: 4px;\n}\n\n.panel.placement-top {\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-bottom: 4px;\n}\n\n/* right placements */\n.panel.placement-right-start {\n  top: 0;\n  left: 100%;\n  margin-left: 4px;\n}\n\n.panel.placement-right-end {\n  bottom: 0;\n  left: 100%;\n  margin-left: 4px;\n}\n\n.panel.placement-right {\n  top: 50%;\n  left: 100%;\n  transform: translateY(-50%);\n  margin-left: 4px;\n}\n\n/* left placements */\n.panel.placement-left-start {\n  top: 0;\n  right: 100%;\n  margin-right: 4px;\n}\n\n.panel.placement-left-end {\n  bottom: 0;\n  right: 100%;\n  margin-right: 4px;\n}\n\n.panel.placement-left {\n  top: 50%;\n  right: 100%;\n  transform: translateY(-50%);\n  margin-right: 4px;\n}\n";
+const style$3 = `:host {
+  display: block;
+  --dropdown-item-padding: 0.5rem 0.875rem;
+  --dropdown-item-bg: transparent;
+  --dropdown-item-bg-hover: var(--surface-raised, rgba(0, 0, 0, 0.05));
+  --dropdown-item-bg-active: var(--surface-raised-active, rgba(0, 0, 0, 0.1));
+  --dropdown-item-color: var(--color-text-main, inherit);
+  --dropdown-item-color-disabled: var(--color-text-disabled, rgba(0, 0, 0, 0.35));
+  --dropdown-item-font-size: 0.9375rem;
+  --dropdown-item-gap: 0.5rem;
+  --dropdown-item-transition: background 0.1s;
+  --dropdown-item-border-radius: var(--ae-radius-sm, 4px);
+}
+.item {
+  display: flex;
+  align-items: center;
+  gap: var(--dropdown-item-gap);
+  width: 100%;
+  padding: var(--dropdown-item-padding);
+  font-size: var(--dropdown-item-font-size);
+  font-family: inherit;
+  color: var(--dropdown-item-color);
+  background: var(--dropdown-item-bg);
+  border: none;
+  border-radius: var(--dropdown-item-border-radius);
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  box-sizing: border-box;
+  transition: var(--dropdown-item-transition);
+  outline: none;
+}
+.item:hover:not(:disabled):not([aria-disabled="true"]) {
+  background: var(--dropdown-item-bg-hover);
+}
+.item:active:not(:disabled):not([aria-disabled="true"]) {
+  background: var(--dropdown-item-bg-active);
+}
+.item:focus-visible {
+  background: var(--dropdown-item-bg-hover);
+  outline: 2px solid var(--color-primary, #0e639c);
+  outline-offset: -2px;
+}
+/* disabled */
+:host([disabled]) .item,
+.item:disabled {
+  color: var(--dropdown-item-color-disabled);
+  cursor: default;
+  pointer-events: none;
+}
+/* Active item — current selection, current route, etc. */
+:host([active]) .item {
+  background: var(--dropdown-item-bg-selected, rgba(0, 0, 0, 0.06));
+  color: var(--dropdown-item-color-active, var(--color-primary, #0e639c));
+  font-weight: 500;
+}
+/* Checkbox mode — fixed-width indicator column */
+.check-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  flex-shrink: 0;
+}
+/* CSS-drawn checkmark (border trick) */
+.check-indicator::after {
+  content: '';
+  display: block;
+  width: 0.3em;
+  height: 0.55em;
+  border-right: 0.125em solid currentColor;
+  border-bottom: 0.125em solid currentColor;
+  transform: rotate(45deg) translateY(-0.1em);
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+:host([checked]) .check-indicator::after {
+  opacity: 1;
+}
 `;
-const style$2 = ":host {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 20px;\r\n  width:  1em;\r\n  height: 1em;\r\n  color: inherit;\r\n  flex-shrink: 0;\r\n  line-height: 0;\r\n  vertical-align: middle;\r\n}\r\n\r\n:host([color]) {\r\n  color: var(--color-solid);\r\n}\r\n\r\n.icon-svg {\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  fill: var(--icon-fill, currentColor);\r\n  stroke: var(--icon-stroke, none);\r\n  stroke-width: var(--icon-stroke-width, 2);\r\n  stroke-linecap: var(--icon-stroke-linecap, round);\r\n  stroke-linejoin: var(--icon-stroke-linejoin, round);\r\n  pointer-events: none;\r\n  overflow: visible;\r\n}\r\n";
+const style$2 = ":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(--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";
 const defaultViewBox = "0 0 24 24";
 class IconRegistry {
   static add(icons) {
@@ -3168,7 +3168,7 @@ __publicField$5(DropdownButton, "styles", [
   ".caret--left { border-right: 0.35em solid; border-top: 0.35em solid transparent; border-bottom: 0.35em solid transparent; }"
 ]);
 DropdownButton.register();
-const buttonGroupStyle = ":host {\r\n  display: inline-flex;\r\n  align-items: stretch;\r\n  gap: 8px;\r\n}\r\n\r\n:host([block]) {\r\n  display: flex;\r\n  width: 100%;\r\n}\r\n\r\n:host([block]) ::slotted(ae-button) {\r\n  flex: 1;\r\n}\r\n\r\n:host([compact]) {\r\n  gap: 0;\r\n}\r\n\r\n/* Raise hovered/focused button so its border shows above neighbours */\r\n:host([compact]) ::slotted(ae-button:hover),\r\n:host([compact]) ::slotted(ae-button:focus-within) {\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n";
+const buttonGroupStyle = ":host {\n  display: inline-flex;\n  align-items: stretch;\n  gap: 8px;\n}\n\n:host([block]) {\n  display: flex;\n  width: 100%;\n}\n\n:host([block]) ::slotted(ae-button) {\n  flex: 1;\n}\n\n:host([compact]) {\n  gap: 0;\n}\n\n/* Raise hovered/focused button so its border shows above neighbours */\n:host([compact]) ::slotted(ae-button:hover),\n:host([compact]) ::slotted(ae-button:focus-within) {\n  position: relative;\n  z-index: 1;\n}\n";
 class ButtonGroup extends AeicoComponent {
   constructor() {
     super(...arguments);
@@ -3238,7 +3238,7 @@ __publicField(ButtonGroup, "props", {
 });
 __publicField(ButtonGroup, "styles", [styleVariables, buttonGroupStyle]);
 ButtonGroup.register();
-const badgeStyle = ':host {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  --badge-solid-bg:       var(--color-solid);\r\n  --badge-solid-color:    var(--color-on-solid);\r\n  --badge-border:         var(--color-border);\r\n  --badge-accent:         var(--color-accent);\r\n  --badge-subtle-bg:      var(--color-bg-subtle);\r\n  --badge-subtle-color:   var(--color-text-subtle);\r\n  --badge-subtle-border:  var(--color-border-subtle);\r\n}\r\n\r\n.badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 4px;\r\n  font-family: inherit;\r\n  font-weight: 500;\r\n  white-space: nowrap;\r\n  vertical-align: middle;\r\n  line-height: 1.2;\r\n  font-size: 1em;\r\n  padding: 0.15em 0.6em;\r\n  border-radius: 4px;\r\n  border: 1px solid var(--badge-solid-bg);\r\n  background: var(--badge-solid-bg);\r\n  color: var(--badge-solid-color);\r\n}\r\n\r\n/* Default (no [variant]) = filled */\r\n\r\n/* --- Variants --- */\r\n\r\n:host([variant="outlined"]) .badge {\r\n  background:   transparent;\r\n  border-color: var(--badge-border);\r\n  color:        var(--badge-accent);\r\n}\r\n\r\n:host([variant="faint"]) .badge {\r\n  background:   var(--badge-subtle-bg);\r\n  border-color: var(--badge-subtle-border);\r\n  color:        var(--badge-subtle-color);\r\n}\r\n\r\n:host([variant="subtle"]) .badge {\r\n  background:   var(--badge-subtle-bg);\r\n  border-color: transparent;\r\n  color:        var(--badge-subtle-color);\r\n}\r\n\r\n:host([variant="text"]) .badge {\r\n  background:   transparent;\r\n  border-color: transparent;\r\n  color:        var(--badge-accent);\r\n  padding-left:  0;\r\n  padding-right: 0;\r\n}\r\n\r\n:host([pill]) .badge {\r\n  border-radius: 999px;\r\n}\r\n\r\n/* Icon slots */\r\n::slotted(ae-icon) {\r\n  font-size: 1.1em;\r\n}\r\n';
+const badgeStyle = ':host {\n  display: inline-flex;\n  align-items: center;\n  --badge-solid-bg:       var(--color-solid);\n  --badge-solid-color:    var(--color-on-solid);\n  --badge-border:         var(--color-border);\n  --badge-accent:         var(--color-accent);\n  --badge-subtle-bg:      var(--color-bg-subtle);\n  --badge-subtle-color:   var(--color-text-subtle);\n  --badge-subtle-border:  var(--color-border-subtle);\n}\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-family: inherit;\n  font-weight: 500;\n  white-space: nowrap;\n  vertical-align: middle;\n  line-height: 1.2;\n  font-size: 1em;\n  padding: 0.15em 0.6em;\n  border-radius: 4px;\n  border: 1px solid var(--badge-solid-bg);\n  background: var(--badge-solid-bg);\n  color: var(--badge-solid-color);\n}\n\n/* Default (no [variant]) = filled */\n\n/* --- Variants --- */\n\n:host([variant="outlined"]) .badge {\n  background:   transparent;\n  border-color: var(--badge-border);\n  color:        var(--badge-accent);\n}\n\n:host([variant="faint"]) .badge {\n  background:   var(--badge-subtle-bg);\n  border-color: var(--badge-subtle-border);\n  color:        var(--badge-subtle-color);\n}\n\n:host([variant="subtle"]) .badge {\n  background:   var(--badge-subtle-bg);\n  border-color: transparent;\n  color:        var(--badge-subtle-color);\n}\n\n:host([variant="text"]) .badge {\n  background:   transparent;\n  border-color: transparent;\n  color:        var(--badge-accent);\n  padding-left:  0;\n  padding-right: 0;\n}\n\n:host([pill]) .badge {\n  border-radius: 999px;\n}\n\n/* Icon slots */\n::slotted(ae-icon) {\n  font-size: 1.1em;\n}\n';
 var __create$4 = Object.create;
 var __defProp$4 = Object.defineProperty;
 var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
@@ -3315,110 +3315,110 @@ __decorateElement$4(_init$4, 4, "pill", _pill_dec, Badge, _pill);
 __decoratorMetadata$4(_init$4, Badge);
 __publicField$4(Badge, "styles", [styleVariables, sizeCSS, colorCSS, badgeStyle]);
 Badge.register();
-const alertStyle = `.alert {\r
-  position: relative;\r
-  padding: 12px 16px;\r
-  margin-bottom: 12px;\r
-  border-radius: 4px;\r
-  font-size: 12px;\r
-  line-height: 1.6;\r
-  background-color: var(--alert-solid-bg);\r
-  color:            var(--alert-solid-color);\r
-  border: 1px solid var(--alert-solid-bg);\r
-}\r
-\r
-.alert:last-child {\r
-  margin-bottom: 0;\r
-}\r
-\r
-:host {\r
-  --color-solid:           var(--color-primary);\r
-  --color-on-solid:        var(--color-text-main);\r
-  --color-border:          var(--color-primary);\r
-  --color-bg-subtle:       var(--color-primary-bg-subtle);\r
-  --color-text-subtle:     var(--color-primary-text-emphasis);\r
-  --color-border-subtle:   var(--color-primary-border-subtle);\r
-\r
-  --alert-solid-bg:     var(--color-solid);\r
-  --alert-solid-color:  var(--color-on-solid);\r
-  --alert-border:       var(--color-border);\r
-  --alert-subtle-bg:    var(--color-bg-subtle);\r
-  --alert-subtle-color: var(--color-text-subtle);\r
-  --alert-subtle-border:var(--color-border-subtle);\r
-}\r
-\r
-\r
-:host([variant="faint"]) .alert {\r
-  background-color: var(--alert-subtle-bg);\r
-  color:            var(--alert-subtle-color);\r
-  border-color:     var(--alert-subtle-border);\r
-}\r
-\r
-:host([variant="subtle"]) .alert {\r
-  background-color: var(--alert-subtle-bg);\r
-  color:            var(--alert-subtle-color);\r
-  border-color:     transparent;\r
-}\r
-\r
-:host([variant="filled"]) .alert {\r
-  background-color: var(--alert-solid-bg);\r
-  color:            var(--alert-solid-color);\r
-  border-color:     var(--alert-solid-bg);\r
-}\r
-\r
-:host([variant="outlined"]) .alert {\r
-  background-color: transparent;\r
-  color:            var(--alert-subtle-color);\r
-  border-color:     var(--alert-border);\r
-}\r
-\r
-:host([dismissible]) .alert {\r
-  padding-right: 40px;\r
-}\r
-\r
-:host([icon]) .alert {\r
-  display: flex;\r
-  align-items: flex-start;\r
-  gap: 10px;\r
-}\r
-\r
-:host([icon]) .alert::before {\r
-  content: '';\r
-  flex-shrink: 0;\r
-  width: 16px;\r
-  height: 16px;\r
-  margin-top: 2px;\r
-}\r
-\r
-.alert-close {\r
-  position: absolute;\r
-  top: 50%;\r
-  right: 12px;\r
-  transform: translateY(-50%);\r
-  background: transparent;\r
-  border: none;\r
-  color: inherit;\r
-  opacity: 0.6;\r
-  cursor: pointer;\r
-  padding: 4px;\r
-  font-size: 18px;\r
-  line-height: 1;\r
-  transition: opacity 0.15s;\r
-}\r
-\r
-.alert-close:hover {\r
-  opacity: 1;\r
-}\r
-\r
-:host([size="sm"]) .alert {\r
-  padding: 8px 12px;\r
-  font-size: 11px;\r
-}\r
-\r
-:host([size="lg"]) .alert {\r
-  padding: 16px 20px;\r
-  font-size: 13px;\r
-}\r
+const alertStyle = `.alert {
+  position: relative;
+  padding: 12px 16px;
+  margin-bottom: 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 1.6;
+  background-color: var(--alert-solid-bg);
+  color:            var(--alert-solid-color);
+  border: 1px solid var(--alert-solid-bg);
+}
+.alert:last-child {
+  margin-bottom: 0;
+}
+:host {
+  --color-solid:           var(--color-primary);
+  --color-on-solid:        var(--color-text-main);
+  --color-border:          var(--color-primary);
+  --color-bg-subtle:       var(--color-primary-bg-subtle);
+  --color-text-subtle:     var(--color-primary-text-emphasis);
+  --color-border-subtle:   var(--color-primary-border-subtle);
+  --alert-solid-bg:     var(--color-solid);
+  --alert-solid-color:  var(--color-on-solid);
+  --alert-border:       var(--color-border);
+  --alert-subtle-bg:    var(--color-bg-subtle);
+  --alert-subtle-color: var(--color-text-subtle);
+  --alert-subtle-border:var(--color-border-subtle);
+}
+:host([variant="faint"]) .alert {
+  background-color: var(--alert-subtle-bg);
+  color:            var(--alert-subtle-color);
+  border-color:     var(--alert-subtle-border);
+}
+:host([variant="subtle"]) .alert {
+  background-color: var(--alert-subtle-bg);
+  color:            var(--alert-subtle-color);
+  border-color:     transparent;
+}
+:host([variant="filled"]) .alert {
+  background-color: var(--alert-solid-bg);
+  color:            var(--alert-solid-color);
+  border-color:     var(--alert-solid-bg);
+}
+:host([variant="outlined"]) .alert {
+  background-color: transparent;
+  color:            var(--alert-subtle-color);
+  border-color:     var(--alert-border);
+}
+:host([dismissible]) .alert {
+  padding-right: 40px;
+}
+:host([icon]) .alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+:host([icon]) .alert::before {
+  content: '';
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+}
+.alert-close {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  transform: translateY(-50%);
+  background: transparent;
+  border: none;
+  color: inherit;
+  opacity: 0.6;
+  cursor: pointer;
+  padding: 4px;
+  font-size: 18px;
+  line-height: 1;
+  transition: opacity 0.15s;
+}
+.alert-close:hover {
+  opacity: 1;
+}
+:host([size="sm"]) .alert {
+  padding: 8px 12px;
+  font-size: 11px;
+}
+:host([size="lg"]) .alert {
+  padding: 16px 20px;
+  font-size: 13px;
+}
 `;
 class Alert extends AeicoComponent {
   constructor() {
@@ -3474,7 +3474,7 @@ __publicField(Alert, "props", {
 __publicField(Alert, "useStyles", ["alert"]);
 __publicField(Alert, "styles", [styleVariables, colorCSS, alertStyle]);
 Alert.register();
-const style$1 = ":host {\r\n  display: contents;\r\n}\r\n\r\ndialog {\r\n  display: none;\r\n  flex-direction: column;\r\n  border: none;\r\n  border-radius: 8px;\r\n  padding: 0;\r\n  max-width: min(90vw, 600px);\r\n  max-height: 90vh;\r\n  background: var(--surface-overlay);\r\n  color: var(--color-text-main);\r\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\r\n  overflow: hidden;\r\n}\r\n\r\ndialog[open] {\r\n  display: flex;\r\n  animation: dialog-slide-in 0.2s ease;\r\n}\r\n\r\ndialog::backdrop {\r\n  background: var(--color-overlay);\r\n  animation: dialog-backdrop-in 0.2s ease;\r\n}\r\n\r\n@keyframes dialog-backdrop-in {\r\n  from { opacity: 0; }\r\n  to { opacity: 1; }\r\n}\r\n\r\n@keyframes dialog-slide-in {\r\n  from {\r\n    opacity: 0;\r\n    transform: scale(0.96) translateY(-8px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: scale(1) translateY(0);\r\n  }\r\n}\r\n\r\nheader {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  padding: 16px 20px;\r\n  border-bottom: 1px solid var(--border-subtle);\r\n  flex-shrink: 0;\r\n}\r\n\r\n.label {\r\n  flex: 1;\r\n  font-size: var(--size-m, 1rem);\r\n  font-weight: 500;\r\n  margin: 0;\r\n  color: var(--color-text-main);\r\n}\r\n\r\n.close-btn {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  width: 28px;\r\n  height: 28px;\r\n  padding: 0;\r\n  border: none;\r\n  border-radius: 4px;\r\n  background: transparent;\r\n  color: var(--color-text-muted);\r\n  font-size: 18px;\r\n  line-height: 1;\r\n  cursor: pointer;\r\n  transition: background 0.15s, color 0.15s;\r\n}\r\n\r\n.close-btn:hover {\r\n  background: var(--border-subtle);\r\n  color: var(--color-text-main);\r\n}\r\n\r\n.body {\r\n  flex: 1;\r\n  overflow-y: auto;\r\n  padding: 20px;\r\n}\r\n\r\nfooter {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-end;\r\n  gap: 8px;\r\n  padding: 12px 20px;\r\n  border-top: 1px solid var(--border-subtle);\r\n  flex-shrink: 0;\r\n}\r\n\r\n::slotted([data-align-left]) {\r\n  margin-right: auto;\r\n}\r\n";
+const style$1 = ":host {\n  display: contents;\n}\n\ndialog {\n  display: none;\n  flex-direction: column;\n  border: none;\n  border-radius: 8px;\n  padding: 0;\n  max-width: min(90vw, 600px);\n  max-height: 90vh;\n  background: var(--surface-overlay);\n  color: var(--color-text-main);\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n  overflow: hidden;\n}\n\ndialog[open] {\n  display: flex;\n  animation: dialog-slide-in 0.2s ease;\n}\n\ndialog::backdrop {\n  background: var(--color-overlay);\n  animation: dialog-backdrop-in 0.2s ease;\n}\n\n@keyframes dialog-backdrop-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes dialog-slide-in {\n  from {\n    opacity: 0;\n    transform: scale(0.96) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\nheader {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--border-subtle);\n  flex-shrink: 0;\n}\n\n.label {\n  flex: 1;\n  font-size: var(--size-m, 1rem);\n  font-weight: 500;\n  margin: 0;\n  color: var(--color-text-main);\n}\n\n.close-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--color-text-muted);\n  font-size: 18px;\n  line-height: 1;\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.close-btn:hover {\n  background: var(--border-subtle);\n  color: var(--color-text-main);\n}\n\n.body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n}\n\nfooter {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 20px;\n  border-top: 1px solid var(--border-subtle);\n  flex-shrink: 0;\n}\n\n::slotted([data-align-left]) {\n  margin-right: auto;\n}\n";
 class Dialog extends AeicoComponent {
   constructor() {
     super(...arguments);
@@ -3609,7 +3609,7 @@ __publicField(IconButton, "props", {
 });
 __publicField(IconButton, "styles", [":host { display: contents; }"]);
 IconButton.register();
-const tabsStyle = ':host {\r\n  display: flex;\r\n  flex-direction: column;\r\n  overflow: hidden;\r\n}\r\n\r\n[part="tab-nav"] {\r\n  display: flex;\r\n  flex-shrink: 0;\r\n  border-bottom: 1px solid var(--ae-tabs-border-color, var(--border-default));\r\n}\r\n\r\n[part="panels"] {\r\n  flex: 1;\r\n  overflow: auto;\r\n}\r\n';
+const tabsStyle = ':host {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n[part="tab-nav"] {\n  display: flex;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--ae-tabs-border-color, var(--border-default));\n}\n\n[part="panels"] {\n  flex: 1;\n  overflow: auto;\n}\n';
 class Tabs extends AeicoComponent {
   constructor() {
     super(...arguments);
@@ -3710,7 +3710,7 @@ __publicField(Tabs, "props", {
 });
 __publicField(Tabs, "styles", [styleVariables, tabsStyle]);
 Tabs.register();
-const tabStyle = ":host {\r\n  display: inline-flex;\r\n  cursor: pointer;\r\n  margin-bottom: -1px;\r\n}\r\n\r\nbutton {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n  padding: 8px 16px;\r\n  background: none;\r\n  border: none;\r\n  border-bottom: 2px solid transparent;\r\n  cursor: pointer;\r\n  font-size: inherit;\r\n  font-family: inherit;\r\n  color: var(--ae-tab-color, #909090);\r\n  font-size: var(--ae-tab-font-size, inherit);\r\n  transition: color 0.15s, border-color 0.15s;\r\n  outline: none;\r\n  white-space: nowrap;\r\n  user-select: none;\r\n}\r\n\r\nbutton:hover {\r\n  color: var(--ae-tab-hover-color, var(--color-primary));\r\n}\r\n\r\nbutton:focus-visible {\r\n  outline: 2px solid var(--color-primary);\r\n  outline-offset: -2px;\r\n}\r\n\r\n:host([active]) button {\r\n  color: var(--ae-tab-active-color, var(--color-primary));\r\n  border-bottom-color: var(--ae-tab-active-color, var(--color-primary));\r\n}\r\n\r\n:host([disabled]) button {\r\n  opacity: 0.4;\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n";
+const tabStyle = ":host {\n  display: inline-flex;\n  cursor: pointer;\n  margin-bottom: -1px;\n}\n\nbutton {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  cursor: pointer;\n  font-size: inherit;\n  font-family: inherit;\n  color: var(--ae-tab-color, #909090);\n  font-size: var(--ae-tab-font-size, inherit);\n  transition: color 0.15s, border-color 0.15s;\n  outline: none;\n  white-space: nowrap;\n  user-select: none;\n}\n\nbutton:hover {\n  color: var(--ae-tab-hover-color, var(--color-primary));\n}\n\nbutton:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: -2px;\n}\n\n:host([active]) button {\n  color: var(--ae-tab-active-color, var(--color-primary));\n  border-bottom-color: var(--ae-tab-active-color, var(--color-primary));\n}\n\n:host([disabled]) button {\n  opacity: 0.4;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n";
 class Tab extends AeicoComponent {
   constructor() {
     super(...arguments);
@@ -3754,7 +3754,7 @@ __publicField(Tab, "props", {
 });
 __publicField(Tab, "styles", [tabStyle]);
 Tab.register();
-const tabPanelStyle = ":host {\r\n  display: none;\r\n  padding: 16px 0;\r\n}\r\n\r\n:host([active]) {\r\n  display: block;\r\n}\r\n";
+const tabPanelStyle = ":host {\n  display: none;\n  padding: 16px 0;\n}\n\n:host([active]) {\n  display: block;\n}\n";
 class TabPanel extends AeicoComponent {
   render() {
     return aeico.html(({ slot }) => {
@@ -3764,7 +3764,7 @@ class TabPanel extends AeicoComponent {
 }
 __publicField(TabPanel, "styles", [tabPanelStyle]);
 TabPanel.register();
-const style = ":host {\r\n  display: block;\r\n  width: 100%;\r\n  height: var(--thickness, 1px);\r\n  flex-shrink: 0;\r\n\r\n  /* Override colorCSS default --color-border from gray to the subtle border token */\r\n  --color-border: var(--border-default);\r\n\r\n  background: var(--color-border);\r\n}\r\n\r\n:host([vertical]) {\r\n  display: inline-block;\r\n  width: var(--thickness, 1px);\r\n  height: 1lh;\r\n  vertical-align: middle;\r\n}\r\n";
+const style = ":host {\n  display: block;\n  width: 100%;\n  height: var(--thickness, 1px);\n  flex-shrink: 0;\n\n  /* Override colorCSS default --color-border from gray to the subtle border token */\n  --color-border: var(--border-default);\n\n  background: var(--color-border);\n}\n\n:host([vertical]) {\n  display: inline-block;\n  width: var(--thickness, 1px);\n  height: 1lh;\n  vertical-align: middle;\n}\n";
 var __create$3 = Object.create;
 var __defProp$3 = Object.defineProperty;
 var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
@@ -3837,7 +3837,7 @@ __decoratorMetadata$3(_init$3, Divider);
 __publicField$3(Divider, "tagName", "divider");
 __publicField$3(Divider, "styles", [styleVariables, colorCSS, style]);
 Divider.register();
-const cardStyle = ':host {\r\n  display: block;\r\n\r\n  --card-bg:      var(--color-bg-subtle);\r\n  --card-color:   var(--color-text-subtle);\r\n  --card-border:  var(--color-border-subtle);\r\n  --card-divider: var(--color-border-subtle);\r\n}\r\n\r\n:host([variant="faint"]) {\r\n  --card-bg:      var(--color-bg-subtle);\r\n  --card-color:   var(--color-text-subtle);\r\n  --card-border:  var(--color-border-subtle);\r\n  --card-divider: var(--color-border-subtle);\r\n}\r\n\r\n:host([variant="subtle"]) {\r\n  --card-border:  transparent;\r\n  --card-divider: transparent;\r\n}\r\n\r\n:host([variant="filled"]) {\r\n  --card-bg:      var(--color-solid);\r\n  --card-color:   var(--color-on-solid);\r\n  --card-border:  var(--color-solid);\r\n  --card-divider: color-mix(in srgb, var(--color-solid), black 15%);\r\n}\r\n\r\n:host([variant="outlined"]) {\r\n  --card-bg:      transparent;\r\n  --card-color:   var(--color-text-subtle);\r\n  --card-border:  var(--color-border);\r\n  --card-divider: var(--color-border-subtle);\r\n}\r\n\r\n.card {\r\n  border: 1px solid var(--card-border);\r\n  border-radius: 8px;\r\n  background: var(--card-bg);\r\n  color: var(--card-color);\r\n  overflow: hidden;\r\n}\r\n\r\n.header,\r\n.footer {\r\n  display: none;\r\n  padding: 10px 16px;\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n}\r\n\r\n:host([has-header]) .header {\r\n  display: block;\r\n  border-bottom: 1px solid var(--card-divider);\r\n}\r\n\r\n:host([has-footer]) .footer {\r\n  display: block;\r\n  border-top: 1px solid var(--card-divider);\r\n}\r\n\r\n.body {\r\n  padding: 16px;\r\n}\r\n';
+const cardStyle = ':host {\n  display: block;\n\n  --card-bg:      var(--color-bg-subtle);\n  --card-color:   var(--color-text-subtle);\n  --card-border:  var(--color-border-subtle);\n  --card-divider: var(--color-border-subtle);\n}\n\n:host([variant="faint"]) {\n  --card-bg:      var(--color-bg-subtle);\n  --card-color:   var(--color-text-subtle);\n  --card-border:  var(--color-border-subtle);\n  --card-divider: var(--color-border-subtle);\n}\n\n:host([variant="subtle"]) {\n  --card-border:  transparent;\n  --card-divider: transparent;\n}\n\n:host([variant="filled"]) {\n  --card-bg:      var(--color-solid);\n  --card-color:   var(--color-on-solid);\n  --card-border:  var(--color-solid);\n  --card-divider: color-mix(in srgb, var(--color-solid), black 15%);\n}\n\n:host([variant="outlined"]) {\n  --card-bg:      transparent;\n  --card-color:   var(--color-text-subtle);\n  --card-border:  var(--color-border);\n  --card-divider: var(--color-border-subtle);\n}\n\n.card {\n  border: 1px solid var(--card-border);\n  border-radius: 8px;\n  background: var(--card-bg);\n  color: var(--card-color);\n  overflow: hidden;\n}\n\n.header,\n.footer {\n  display: none;\n  padding: 10px 16px;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n:host([has-header]) .header {\n  display: block;\n  border-bottom: 1px solid var(--card-divider);\n}\n\n:host([has-footer]) .footer {\n  display: block;\n  border-top: 1px solid var(--card-divider);\n}\n\n.body {\n  padding: 16px;\n}\n';
 var __create$2 = Object.create;
 var __defProp$2 = Object.defineProperty;
 var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
@@ -3923,7 +3923,7 @@ __decoratorMetadata$2(_init$2, Card);
 __publicField$2(Card, "tagName", "card");
 __publicField$2(Card, "styles", [styleVariables, colorCSS, cardStyle]);
 Card.register();
-const navbarStyle = ':host {\r\n  /* layout — padding lives in .inner so document * { padding:0 } cannot override it */\r\n  display: block;\r\n  position: static;\r\n  top: auto;\r\n  z-index: var(--ae-navbar-z-index, 100);\r\n  box-sizing: border-box;\r\n  height: var(--ae-navbar-height, 3.25rem);\r\n  border-radius: var(--ae-navbar-radius, 0);\r\n\r\n  /* color */\r\n  background: var(--ae-navbar-bg, var(--surface-base));\r\n  color: var(--ae-navbar-color, var(--color-text-main));\r\n  border-bottom: var(--ae-navbar-border-width, 1px) solid var(--ae-navbar-border-color, var(--border-default));\r\n  box-shadow: var(--ae-navbar-shadow, none);\r\n\r\n  /* layout tokens — declared here so they are clearly part of the public API */\r\n  --ae-navbar-radius: 0;\r\n  /* Default padding-x references the global layout token so ae-navbar content\r\n     automatically aligns with .container / .container-fluid in light DOM.\r\n     Override with --ae-navbar-padding-x to decouple if needed. */\r\n  --ae-navbar-padding-x: var(--container-padding-x, 1.5rem);\r\n  --ae-navbar-gap: 0.5rem;\r\n\r\n  /* link style tokens — text mode defaults.\r\n     CSS custom properties inherit into slotted content, so\r\n     ::slotted(a[slot="start"]) can reference --ae-navbar-height. */\r\n  --ae-navbar-link-color: inherit;\r\n  --ae-navbar-link-font-size: inherit;\r\n  --ae-navbar-link-padding-x: 0.75rem;  /* horizontal padding only; height fills vertically */\r\n  --ae-navbar-link-radius: 0;\r\n  --ae-navbar-link-hover-color: var(--color-text-link-hover);\r\n  --ae-navbar-link-hover-bg: transparent;\r\n  --ae-navbar-link-active-color: var(--color-text-link);\r\n  --ae-navbar-link-active-font-weight: 600;\r\n}\r\n\r\n:host([sticky]) {\r\n  position: sticky;\r\n  top: 0;\r\n}\r\n\r\n:host([color]) {\r\n  --ae-navbar-bg: var(--color-solid);\r\n  --ae-navbar-color: var(--color-on-solid);\r\n  --ae-navbar-border-color: transparent;\r\n  --ae-navbar-link-hover-color: var(--color-on-solid);\r\n  --ae-navbar-link-active-color: var(--color-on-solid);\r\n}\r\n\r\n/* block preset: hover shows a subtle filled block */\r\n:host([appearance="block"]) {\r\n  --ae-navbar-link-hover-bg: var(--color-bg-subtle);\r\n  --ae-navbar-link-hover-color: inherit;\r\n}\r\n\r\n/* block preset on colored navbar: use semi-transparent white */\r\n:host([color][appearance="block"]) {\r\n  --ae-navbar-link-hover-bg: rgba(255, 255, 255, 0.15);\r\n  --ae-navbar-link-hover-color: var(--color-on-solid);\r\n}\r\n\r\n.inner {\r\n  display: flex;\r\n  align-items: center;\r\n  height: 100%;\r\n  padding: 0 var(--ae-navbar-padding-x);\r\n  gap: var(--ae-navbar-gap);\r\n  box-sizing: border-box;\r\n}\r\n\r\n[part="brand"] {\r\n  flex: 0 0 auto;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n/* nav wraps start + end; takes all remaining space */\r\n[part="nav"] {\r\n  flex: 1 1 auto;\r\n  display: flex;\r\n  align-self: stretch;   /* stretch to host height so children can fill it */\r\n  align-items: stretch;\r\n  min-width: 0;\r\n}\r\n\r\n[part="start"],\r\n[part="end"] {\r\n  flex: 0 0 auto;\r\n  display: flex;\r\n  align-self: stretch;\r\n}\r\n\r\n[part="start"] {\r\n  align-items: stretch;  /* slotted <a> will stretch to full height */\r\n  gap: var(--ae-navbar-start-gap, 0);\r\n}\r\n\r\n[part="end"] {\r\n  align-items: center;   /* buttons / avatars stay vertically centred */\r\n  gap: var(--ae-navbar-end-gap, 0.5rem);\r\n  margin-left: auto;\r\n}\r\n\r\n/* hamburger — hidden on desktop */\r\n[part="hamburger"] {\r\n  display: none;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: center;\r\n  gap: 5px;\r\n  flex-shrink: 0;\r\n  width: var(--ae-navbar-hamburger-size, 2rem);\r\n  height: var(--ae-navbar-hamburger-size, 2rem);\r\n  margin-left: auto;\r\n  padding: 0;\r\n  background: none;\r\n  border: none;\r\n  border-radius: 4px;\r\n  cursor: pointer;\r\n  color: var(--ae-navbar-hamburger-color, inherit);\r\n}\r\n\r\n[part="hamburger"]:hover {\r\n  background: color-mix(in srgb, currentColor 10%, transparent);\r\n}\r\n\r\n[part="hamburger"] span {\r\n  display: block;\r\n  width: 18px;\r\n  height: 2px;\r\n  background: currentColor;\r\n  border-radius: 1px;\r\n  transition: transform 0.2s ease, opacity 0.2s ease;\r\n}\r\n\r\n/* Brand link — sensible defaults, no full-height stretch */\r\n::slotted(a[slot="brand"]) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  color: inherit;\r\n  font-weight: 700;\r\n  font-size: 1.05rem;\r\n  text-decoration: none;\r\n  white-space: nowrap;\r\n}\r\n\r\n/* Nav links (start / end slots) — fill full navbar height for block hover effect */\r\n::slotted(a[slot="start"]),\r\n::slotted(a[slot="end"]) {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  height: var(--ae-navbar-height, 3.25rem);  /* full-height hover area */\r\n  /* !important overrides document-level * { padding: 0 } reset */\r\n  padding: 0 var(--ae-navbar-link-padding-x) !important;\r\n  border-radius: var(--ae-navbar-link-radius);\r\n  color: var(--ae-navbar-link-color);\r\n  font-size: var(--ae-navbar-link-font-size);\r\n  text-decoration: none;\r\n  white-space: nowrap;\r\n  transition: color 0.15s ease, background-color 0.15s ease;\r\n  outline-offset: 2px;\r\n}\r\n\r\n::slotted(a[slot="start"]:hover),\r\n::slotted(a[slot="end"]:hover) {\r\n  color: var(--ae-navbar-link-hover-color);\r\n  background-color: var(--ae-navbar-link-hover-bg);\r\n}\r\n\r\n::slotted(a[slot="start"][aria-current="page"]),\r\n::slotted(a[slot="end"][aria-current="page"]) {\r\n  color: var(--ae-navbar-link-active-color);\r\n  font-weight: var(--ae-navbar-link-active-font-weight);\r\n}\r\n\r\n/* ae-dropdown inside navbar — map navbar tokens to dropdown trigger API */\r\n::slotted(ae-dropdown) {\r\n  align-self: stretch;\r\n  --dropdown-trigger-height: 100%;\r\n  --dropdown-trigger-padding-x: var(--ae-navbar-link-padding-x);\r\n  --dropdown-trigger-color: var(--ae-navbar-link-color);\r\n  --dropdown-trigger-bg: none;\r\n  --dropdown-trigger-radius: var(--ae-navbar-link-radius);\r\n  --dropdown-trigger-font-size: var(--ae-navbar-link-font-size);\r\n  --dropdown-trigger-hover-color: var(--ae-navbar-link-hover-color);\r\n  --dropdown-trigger-hover-bg: var(--ae-navbar-link-hover-bg);\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  /* collapse the nav container */\r\n  [part="nav"] {\r\n    display: none;\r\n    position: absolute;\r\n    top: 100%;\r\n    left: 0;\r\n    right: 0;\r\n    flex-direction: column;\r\n    align-items: stretch;\r\n    gap: 0;\r\n    padding: 0.5rem 0;\r\n    background: var(--ae-navbar-mobile-bg, var(--ae-navbar-bg, var(--surface-base)));\r\n    border-bottom: 1px solid var(--ae-navbar-border-color, var(--border-default));\r\n    box-shadow: var(--ae-navbar-mobile-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));\r\n    z-index: 1;\r\n  }\r\n\r\n  :host([open]) [part="nav"] {\r\n    display: flex;\r\n  }\r\n\r\n  /* stack start/end vertically inside the panel */\r\n  [part="start"],\r\n  [part="end"] {\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    align-self: auto;\r\n    gap: 0;\r\n    margin-left: 0;\r\n    width: 100%;\r\n  }\r\n\r\n  /* Mobile: links revert to auto height and add vertical padding */\r\n  ::slotted(a[slot="start"]),\r\n  ::slotted(a[slot="end"]) {\r\n    height: auto;\r\n    width: 100%;\r\n    padding: 0.75rem var(--ae-navbar-link-padding-x);\r\n    border-radius: 0;\r\n  }\r\n\r\n  /* show hamburger */\r\n  [part="hamburger"] {\r\n    display: flex;\r\n  }\r\n\r\n  /* hamburger → × animation */\r\n  :host([open]) [part="hamburger"] span:nth-child(1) {\r\n    transform: translateY(7px) rotate(45deg);\r\n  }\r\n\r\n  :host([open]) [part="hamburger"] span:nth-child(2) {\r\n    opacity: 0;\r\n    transform: scaleX(0);\r\n  }\r\n\r\n  :host([open]) [part="hamburger"] span:nth-child(3) {\r\n    transform: translateY(-7px) rotate(-45deg);\r\n  }\r\n}\r\n';
+const navbarStyle = ':host {\n  /* layout — padding lives in .inner so document * { padding:0 } cannot override it */\n  display: block;\n  position: static;\n  top: auto;\n  z-index: var(--ae-navbar-z-index, 100);\n  box-sizing: border-box;\n  height: var(--ae-navbar-height, 3.25rem);\n  border-radius: var(--ae-navbar-radius, 0);\n\n  /* color */\n  background: var(--ae-navbar-bg, var(--surface-base));\n  color: var(--ae-navbar-color, var(--color-text-main));\n  border-bottom: var(--ae-navbar-border-width, 1px) solid var(--ae-navbar-border-color, var(--border-default));\n  box-shadow: var(--ae-navbar-shadow, none);\n\n  /* layout tokens — declared here so they are clearly part of the public API */\n  --ae-navbar-radius: 0;\n  /* Default padding-x references the global layout token so ae-navbar content\n     automatically aligns with .container / .container-fluid in light DOM.\n     Override with --ae-navbar-padding-x to decouple if needed. */\n  --ae-navbar-padding-x: var(--container-padding-x, 1.5rem);\n  --ae-navbar-gap: 0.5rem;\n\n  /* link style tokens — text mode defaults.\n     CSS custom properties inherit into slotted content, so\n     ::slotted(a[slot="start"]) can reference --ae-navbar-height. */\n  --ae-navbar-link-color: inherit;\n  --ae-navbar-link-font-size: inherit;\n  --ae-navbar-link-padding-x: 0.75rem;  /* horizontal padding only; height fills vertically */\n  --ae-navbar-link-radius: 0;\n  --ae-navbar-link-hover-color: var(--color-text-link-hover);\n  --ae-navbar-link-hover-bg: transparent;\n  --ae-navbar-link-active-color: var(--color-text-link);\n  --ae-navbar-link-active-font-weight: 600;\n}\n\n:host([sticky]) {\n  position: sticky;\n  top: 0;\n}\n\n:host([color]) {\n  --ae-navbar-bg: var(--color-solid);\n  --ae-navbar-color: var(--color-on-solid);\n  --ae-navbar-border-color: transparent;\n  --ae-navbar-link-hover-color: var(--color-on-solid);\n  --ae-navbar-link-active-color: var(--color-on-solid);\n}\n\n/* block preset: hover shows a subtle filled block */\n:host([appearance="block"]) {\n  --ae-navbar-link-hover-bg: var(--color-bg-subtle);\n  --ae-navbar-link-hover-color: inherit;\n}\n\n/* block preset on colored navbar: use semi-transparent white */\n:host([color][appearance="block"]) {\n  --ae-navbar-link-hover-bg: rgba(255, 255, 255, 0.15);\n  --ae-navbar-link-hover-color: var(--color-on-solid);\n}\n\n.inner {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 0 var(--ae-navbar-padding-x);\n  gap: var(--ae-navbar-gap);\n  box-sizing: border-box;\n}\n\n[part="brand"] {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n}\n\n/* nav wraps start + end; takes all remaining space */\n[part="nav"] {\n  flex: 1 1 auto;\n  display: flex;\n  align-self: stretch;   /* stretch to host height so children can fill it */\n  align-items: stretch;\n  min-width: 0;\n}\n\n[part="start"],\n[part="end"] {\n  flex: 0 0 auto;\n  display: flex;\n  align-self: stretch;\n}\n\n[part="start"] {\n  align-items: stretch;  /* slotted <a> will stretch to full height */\n  gap: var(--ae-navbar-start-gap, 0);\n}\n\n[part="end"] {\n  align-items: center;   /* buttons / avatars stay vertically centred */\n  gap: var(--ae-navbar-end-gap, 0.5rem);\n  margin-left: auto;\n}\n\n/* hamburger — hidden on desktop */\n[part="hamburger"] {\n  display: none;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n  flex-shrink: 0;\n  width: var(--ae-navbar-hamburger-size, 2rem);\n  height: var(--ae-navbar-hamburger-size, 2rem);\n  margin-left: auto;\n  padding: 0;\n  background: none;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  color: var(--ae-navbar-hamburger-color, inherit);\n}\n\n[part="hamburger"]:hover {\n  background: color-mix(in srgb, currentColor 10%, transparent);\n}\n\n[part="hamburger"] span {\n  display: block;\n  width: 18px;\n  height: 2px;\n  background: currentColor;\n  border-radius: 1px;\n  transition: transform 0.2s ease, opacity 0.2s ease;\n}\n\n/* Brand link — sensible defaults, no full-height stretch */\n::slotted(a[slot="brand"]) {\n  display: inline-flex;\n  align-items: center;\n  color: inherit;\n  font-weight: 700;\n  font-size: 1.05rem;\n  text-decoration: none;\n  white-space: nowrap;\n}\n\n/* Nav links (start / end slots) — fill full navbar height for block hover effect */\n::slotted(a[slot="start"]),\n::slotted(a[slot="end"]) {\n  display: inline-flex;\n  align-items: center;\n  height: var(--ae-navbar-height, 3.25rem);  /* full-height hover area */\n  /* !important overrides document-level * { padding: 0 } reset */\n  padding: 0 var(--ae-navbar-link-padding-x) !important;\n  border-radius: var(--ae-navbar-link-radius);\n  color: var(--ae-navbar-link-color);\n  font-size: var(--ae-navbar-link-font-size);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: color 0.15s ease, background-color 0.15s ease;\n  outline-offset: 2px;\n}\n\n::slotted(a[slot="start"]:hover),\n::slotted(a[slot="end"]:hover) {\n  color: var(--ae-navbar-link-hover-color);\n  background-color: var(--ae-navbar-link-hover-bg);\n}\n\n::slotted(a[slot="start"][aria-current="page"]),\n::slotted(a[slot="end"][aria-current="page"]) {\n  color: var(--ae-navbar-link-active-color);\n  font-weight: var(--ae-navbar-link-active-font-weight);\n}\n\n/* ae-dropdown inside navbar — map navbar tokens to dropdown trigger API */\n::slotted(ae-dropdown) {\n  align-self: stretch;\n  --dropdown-trigger-height: 100%;\n  --dropdown-trigger-padding-x: var(--ae-navbar-link-padding-x);\n  --dropdown-trigger-color: var(--ae-navbar-link-color);\n  --dropdown-trigger-bg: none;\n  --dropdown-trigger-radius: var(--ae-navbar-link-radius);\n  --dropdown-trigger-font-size: var(--ae-navbar-link-font-size);\n  --dropdown-trigger-hover-color: var(--ae-navbar-link-hover-color);\n  --dropdown-trigger-hover-bg: var(--ae-navbar-link-hover-bg);\n}\n\n@media (max-width: 768px) {\n  /* collapse the nav container */\n  [part="nav"] {\n    display: none;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0;\n    padding: 0.5rem 0;\n    background: var(--ae-navbar-mobile-bg, var(--ae-navbar-bg, var(--surface-base)));\n    border-bottom: 1px solid var(--ae-navbar-border-color, var(--border-default));\n    box-shadow: var(--ae-navbar-mobile-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));\n    z-index: 1;\n  }\n\n  :host([open]) [part="nav"] {\n    display: flex;\n  }\n\n  /* stack start/end vertically inside the panel */\n  [part="start"],\n  [part="end"] {\n    flex-direction: column;\n    align-items: flex-start;\n    align-self: auto;\n    gap: 0;\n    margin-left: 0;\n    width: 100%;\n  }\n\n  /* Mobile: links revert to auto height and add vertical padding */\n  ::slotted(a[slot="start"]),\n  ::slotted(a[slot="end"]) {\n    height: auto;\n    width: 100%;\n    padding: 0.75rem var(--ae-navbar-link-padding-x);\n    border-radius: 0;\n  }\n\n  /* show hamburger */\n  [part="hamburger"] {\n    display: flex;\n  }\n\n  /* hamburger → × animation */\n  :host([open]) [part="hamburger"] span:nth-child(1) {\n    transform: translateY(7px) rotate(45deg);\n  }\n\n  :host([open]) [part="hamburger"] span:nth-child(2) {\n    opacity: 0;\n    transform: scaleX(0);\n  }\n\n  :host([open]) [part="hamburger"] span:nth-child(3) {\n    transform: translateY(-7px) rotate(-45deg);\n  }\n}\n';
 var __create$1 = Object.create;
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
@@ -4059,7 +4059,7 @@ __decoratorMetadata$1(_init$1, Navbar);
 __publicField$1(Navbar, "tagName", "navbar");
 __publicField$1(Navbar, "styles", [styleVariables, colorCSS, navbarStyle]);
 Navbar.register();
-const detailStyle = ':host {\r\n  display: block;\r\n\r\n  --detail-bg:         var(--color-solid);\r\n  --detail-color:      var(--color-on-solid);\r\n  --detail-border:     var(--color-solid);\r\n  --detail-header-bg:  color-mix(in srgb, var(--color-solid), black 10%);\r\n  --detail-radius:     6px;\r\n}\r\n\r\n:host([variant="faint"]) {\r\n  --detail-bg:         var(--color-bg-subtle);\r\n  --detail-color:      var(--color-text-subtle);\r\n  --detail-border:     var(--color-border-subtle);\r\n  --detail-header-bg:  var(--color-bg-subtle);\r\n}\r\n\r\n:host([variant="subtle"]) {\r\n  --detail-bg:         transparent;\r\n  --detail-color:      var(--color-text-main);\r\n  --detail-border:     transparent;\r\n  --detail-header-bg:  transparent;\r\n}\r\n\r\n:host([variant="filled"]) {\r\n  --detail-bg:         var(--color-solid);\r\n  --detail-color:      var(--color-on-solid);\r\n  --detail-border:     var(--color-solid);\r\n  --detail-header-bg:  color-mix(in srgb, var(--color-solid), black 10%);\r\n}\r\n\r\n:host([variant="outlined"]) {\r\n  --detail-bg:         transparent;\r\n  --detail-color:      var(--color-text-subtle);\r\n  --detail-border:     var(--color-border);\r\n  --detail-header-bg:  transparent;\r\n}\r\n\r\n:host([disabled]) {\r\n  opacity: 0.5;\r\n  pointer-events: none;\r\n}\r\n\r\n.detail {\r\n  border: 1px solid var(--detail-border);\r\n  border-radius: var(--detail-radius);\r\n  color: var(--detail-color);\r\n  background: var(--detail-bg);\r\n  overflow: hidden;\r\n}\r\n\r\n.summary {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n  width: 100%;\r\n  padding: 10px 14px;\r\n  background: var(--detail-header-bg);\r\n  color: inherit;\r\n  font-size: inherit;\r\n  font-family: inherit;\r\n  font-weight: 500;\r\n  border: none;\r\n  cursor: pointer;\r\n  text-align: left;\r\n  outline-offset: -2px;\r\n  user-select: none;\r\n}\r\n\r\n.summary:hover {\r\n  filter: brightness(0.93);\r\n}\r\n\r\n.summary:focus-visible {\r\n  outline: 2px solid var(--color-border);\r\n}\r\n\r\nslot[name="summary"] {\r\n  display: flex;\r\n  align-items: center;\r\n  flex: 1;\r\n  min-width: 0;\r\n}\r\n\r\n.label {\r\n  flex: 1;\r\n}\r\n\r\nslot[name="expand"],\r\nslot[name="collapse"] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  flex-shrink: 0;\r\n}\r\n\r\nslot[name="collapse"] {\r\n  display: none;\r\n}\r\n\r\n:host([open]) slot[name="expand"] {\r\n  display: none;\r\n}\r\n\r\n:host([open]) slot[name="collapse"] {\r\n  display: inline-flex;\r\n}\r\n\r\n.content-outer {\r\n  display: grid;\r\n  grid-template-rows: 0fr;\r\n  transition: grid-template-rows 0.25s ease;\r\n}\r\n\r\n:host([open]) .content-outer {\r\n  grid-template-rows: 1fr;\r\n}\r\n\r\n.content {\r\n  overflow: hidden;\r\n  padding: 0 14px;\r\n  transition: padding 0.25s ease;\r\n}\r\n\r\n:host([open]) .content {\r\n  padding: 12px 14px;\r\n}\r\n\r\n';
+const detailStyle = ':host {\n  display: block;\n\n  --detail-bg:         var(--color-solid);\n  --detail-color:      var(--color-on-solid);\n  --detail-border:     var(--color-solid);\n  --detail-header-bg:  color-mix(in srgb, var(--color-solid), black 10%);\n  --detail-radius:     6px;\n}\n\n:host([variant="faint"]) {\n  --detail-bg:         var(--color-bg-subtle);\n  --detail-color:      var(--color-text-subtle);\n  --detail-border:     var(--color-border-subtle);\n  --detail-header-bg:  var(--color-bg-subtle);\n}\n\n:host([variant="subtle"]) {\n  --detail-bg:         transparent;\n  --detail-color:      var(--color-text-main);\n  --detail-border:     transparent;\n  --detail-header-bg:  transparent;\n}\n\n:host([variant="filled"]) {\n  --detail-bg:         var(--color-solid);\n  --detail-color:      var(--color-on-solid);\n  --detail-border:     var(--color-solid);\n  --detail-header-bg:  color-mix(in srgb, var(--color-solid), black 10%);\n}\n\n:host([variant="outlined"]) {\n  --detail-bg:         transparent;\n  --detail-color:      var(--color-text-subtle);\n  --detail-border:     var(--color-border);\n  --detail-header-bg:  transparent;\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.detail {\n  border: 1px solid var(--detail-border);\n  border-radius: var(--detail-radius);\n  color: var(--detail-color);\n  background: var(--detail-bg);\n  overflow: hidden;\n}\n\n.summary {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 10px 14px;\n  background: var(--detail-header-bg);\n  color: inherit;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: 500;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  outline-offset: -2px;\n  user-select: none;\n}\n\n.summary:hover {\n  filter: brightness(0.93);\n}\n\n.summary:focus-visible {\n  outline: 2px solid var(--color-border);\n}\n\nslot[name="summary"] {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n}\n\n.label {\n  flex: 1;\n}\n\nslot[name="expand"],\nslot[name="collapse"] {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\nslot[name="collapse"] {\n  display: none;\n}\n\n:host([open]) slot[name="expand"] {\n  display: none;\n}\n\n:host([open]) slot[name="collapse"] {\n  display: inline-flex;\n}\n\n.content-outer {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 0.25s ease;\n}\n\n:host([open]) .content-outer {\n  grid-template-rows: 1fr;\n}\n\n.content {\n  overflow: hidden;\n  padding: 0 14px;\n  transition: padding 0.25s ease;\n}\n\n:host([open]) .content {\n  padding: 12px 14px;\n}\n\n';
 var __create = Object.create;
 var __defProp2 = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;