aeico-components 0.1.6 → 0.1.8

package/dist/spinner.js.map

@@ -1 +1,7 @@
-{"version":3,"file":"spinner.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{
+  "version": 3,
+  "sources": ["../src/aeico-component.ts", "../src/utils.ts", "../src/spinner/spinner.ts", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/variables.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/size.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/color.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/spinner.css"],
+  "sourcesContent": ["\uFEFFimport { AeicoElement } from 'aeico';\nimport { toKebab } from './utils';\n\nconst TAG_NAME_PREFIX = 'ae';\n\n/**\n * AeicoComponent is the base class for all built-in Aeico components.\n */\nclass AeicoComponent extends AeicoElement {\n  static register(name?: string) {\n    const tagName = name || `${TAG_NAME_PREFIX}-${this.tagName || toKebab(this.name)}`;\n\n    super.register(tagName);\n  }\n}\n\nexport default AeicoComponent;\n", "export const SVG_NS = 'http://www.w3.org/2000/svg';\n\nexport function toKebab(str: string): string {\n  const cleaned = str.replace(/^[_\\d]+/, '');\n\n  return cleaned.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n}\n", "import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport { html, prop } from 'aeico';\nimport styleVariables from '../styles/variables.css';\nimport sizeCSS from '../styles/size.css';\nimport colorCSS from '../styles/color.css';\nimport style from '../styles/components/spinner.css';\nimport type { SpinnerColor, SpinnerSize, SpinnerVariant } from './defines';\n\n/**\n * Spinner \u2014 animated loading indicator.\n *\n * Supports two visual variants: a rotating ring (`border`, default) and\n * three bouncing dots (`dots`). Size and colour are driven by the shared\n * design-token system.\n *\n * @example\n * ```html\n * <ae-spinner></ae-spinner>\n * <ae-spinner variant=\"dots\" color=\"primary\" size=\"lg\"></ae-spinner>\n * <ae-spinner color=\"success\" speed=\"0.5s\" label=\"Saving\u2026\"></ae-spinner>\n * ```\n */\nclass Spinner extends AeicoComponent {\n  static tagName = 'spinner';\n\n  @prop({ type: String })\n  accessor variant: SpinnerVariant = 'border';\n\n  @prop({ type: String })\n  accessor size: SpinnerSize = 'md';\n\n  @prop({ type: String })\n  accessor color: SpinnerColor = 'default';\n\n  @prop({ type: String })\n  accessor label: string = 'Loading\u2026';\n\n  @prop({ type: String })\n  accessor speed: string | undefined;\n\n  protected static styles = [styleVariables, sizeCSS, colorCSS, style];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'status');\n  }\n\n  protected render() {\n    this.setAttribute('aria-label', this.label);\n\n    if (this.speed) {\n      this.style.setProperty('--spinner-speed', this.speed);\n    } else {\n      this.style.removeProperty('--spinner-speed');\n    }\n\n    const isDots = this.variant === 'dots';\n\n    return html(({ span }) => {\n      span({ part: 'track', className: 'track', 'aria-hidden': 'true' }, () => {\n        if (isDots) {\n          span({ className: 'dot' });\n          span({ className: 'dot' });\n          span({ className: 'dot' });\n        }\n      });\n    });\n  }\n}\n\nSpinner.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-spinner': Spinner;\n  }\n}\n\nexport default Spinner;\nexport type SpinnerProps = InferProps<typeof Spinner>;\n", "export default \":root,\\n:host {\\n  --ae-font-sans-serif: system-ui, -apple-system, \\\"Segoe UI\\\", Roboto, \\\"Helvetica Neue\\\",\\n    \\\"Noto Sans\\\", \\\"Liberation Sans\\\", Arial, sans-serif,\\n    \\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\", \\\"Noto Color Emoji\\\";\\n  --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,\\n    \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace;\\n  font-family: var(--ae-font-sans-serif);\\n  --ae-blue:   #0e639c;\\n  --ae-green:  #28a745;\\n  --ae-red:    #dc3545;\\n  --ae-yellow: #ffc107;\\n  --ae-cyan:   #17a2b8;\\n  --ae-gray:   #6e6e6e;\\n  --ae-slate:  #64748b;\\n  --ae-dark:   #343a40;\\n  --ae-light:  #f8f9fa;\\n}\\n\\n:root,\\n:host {\\n  /* Blue */\\n  --ae-blue-100: color-mix(in srgb, var(--ae-blue) 20%, white);\\n  --ae-blue-200: color-mix(in srgb, var(--ae-blue) 40%, white);\\n  --ae-blue-300: color-mix(in srgb, var(--ae-blue) 60%, white);\\n  --ae-blue-400: color-mix(in srgb, var(--ae-blue) 80%, white);\\n  --ae-blue-500: var(--ae-blue);\\n  --ae-blue-600: color-mix(in srgb, var(--ae-blue) 80%, black);\\n  --ae-blue-700: color-mix(in srgb, var(--ae-blue) 60%, black);\\n  --ae-blue-800: color-mix(in srgb, var(--ae-blue) 40%, black);\\n  --ae-blue-900: color-mix(in srgb, var(--ae-blue) 20%, black);\\n\\n  /* Green */\\n  --ae-green-100: color-mix(in srgb, var(--ae-green) 20%, white);\\n  --ae-green-200: color-mix(in srgb, var(--ae-green) 40%, white);\\n  --ae-green-300: color-mix(in srgb, var(--ae-green) 60%, white);\\n  --ae-green-400: color-mix(in srgb, var(--ae-green) 80%, white);\\n  --ae-green-500: var(--ae-green);\\n  --ae-green-600: color-mix(in srgb, var(--ae-green) 80%, black);\\n  --ae-green-700: color-mix(in srgb, var(--ae-green) 60%, black);\\n  --ae-green-800: color-mix(in srgb, var(--ae-green) 40%, black);\\n  --ae-green-900: color-mix(in srgb, var(--ae-green) 20%, black);\\n\\n  /* Red */\\n  --ae-red-100: color-mix(in srgb, var(--ae-red) 20%, white);\\n  --ae-red-200: color-mix(in srgb, var(--ae-red) 40%, white);\\n  --ae-red-300: color-mix(in srgb, var(--ae-red) 60%, white);\\n  --ae-red-400: color-mix(in srgb, var(--ae-red) 80%, white);\\n  --ae-red-500: var(--ae-red);\\n  --ae-red-600: color-mix(in srgb, var(--ae-red) 80%, black);\\n  --ae-red-700: color-mix(in srgb, var(--ae-red) 60%, black);\\n  --ae-red-800: color-mix(in srgb, var(--ae-red) 40%, black);\\n  --ae-red-900: color-mix(in srgb, var(--ae-red) 20%, black);\\n\\n  /* Yellow */\\n  --ae-yellow-100: color-mix(in srgb, var(--ae-yellow) 20%, white);\\n  --ae-yellow-200: color-mix(in srgb, var(--ae-yellow) 40%, white);\\n  --ae-yellow-300: color-mix(in srgb, var(--ae-yellow) 60%, white);\\n  --ae-yellow-400: color-mix(in srgb, var(--ae-yellow) 80%, white);\\n  --ae-yellow-500: var(--ae-yellow);\\n  --ae-yellow-600: color-mix(in srgb, var(--ae-yellow) 80%, black);\\n  --ae-yellow-700: color-mix(in srgb, var(--ae-yellow) 60%, black);\\n  --ae-yellow-800: color-mix(in srgb, var(--ae-yellow) 40%, black);\\n  --ae-yellow-900: color-mix(in srgb, var(--ae-yellow) 20%, black);\\n\\n  /* Cyan */\\n  --ae-cyan-100: color-mix(in srgb, var(--ae-cyan) 20%, white);\\n  --ae-cyan-200: color-mix(in srgb, var(--ae-cyan) 40%, white);\\n  --ae-cyan-300: color-mix(in srgb, var(--ae-cyan) 60%, white);\\n  --ae-cyan-400: color-mix(in srgb, var(--ae-cyan) 80%, white);\\n  --ae-cyan-500: var(--ae-cyan);\\n  --ae-cyan-600: color-mix(in srgb, var(--ae-cyan) 80%, black);\\n  --ae-cyan-700: color-mix(in srgb, var(--ae-cyan) 60%, black);\\n  --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);\\n  --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);\\n\\n  /* Gray  (neutral \u2014 base #6e6e6e) */\\n  --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);\\n  --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);\\n  --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);\\n  --ae-gray-400: color-mix(in srgb, var(--ae-gray) 80%, white);\\n  --ae-gray-500: var(--ae-gray);\\n  --ae-gray-600: color-mix(in srgb, var(--ae-gray) 80%, black);\\n  --ae-gray-700: color-mix(in srgb, var(--ae-gray) 60%, black);\\n  --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);\\n  --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);\\n\\n  /* Slate  (blue-gray \u2014 base #64748b, used for 'secondary') */\\n  --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);\\n  --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);\\n  --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);\\n  --ae-slate-400: color-mix(in srgb, var(--ae-slate) 80%, white);\\n  --ae-slate-500: var(--ae-slate);\\n  --ae-slate-600: color-mix(in srgb, var(--ae-slate) 80%, black);\\n  --ae-slate-700: color-mix(in srgb, var(--ae-slate) 60%, black);\\n  --ae-slate-800: color-mix(in srgb, var(--ae-slate) 40%, black);\\n  --ae-slate-900: color-mix(in srgb, var(--ae-slate) 20%, black);\\n\\n  /* Dark  (base #343a40) */\\n  --ae-dark-100: color-mix(in srgb, var(--ae-dark) 20%, white);\\n  --ae-dark-200: color-mix(in srgb, var(--ae-dark) 40%, white);\\n  --ae-dark-300: color-mix(in srgb, var(--ae-dark) 60%, white);\\n  --ae-dark-400: color-mix(in srgb, var(--ae-dark) 80%, white);\\n  --ae-dark-500: var(--ae-dark);\\n  --ae-dark-600: color-mix(in srgb, var(--ae-dark) 80%, black);\\n  --ae-dark-700: color-mix(in srgb, var(--ae-dark) 60%, black);\\n  --ae-dark-800: color-mix(in srgb, var(--ae-dark) 40%, black);\\n  --ae-dark-900: color-mix(in srgb, var(--ae-dark) 20%, black);\\n\\n  /* Light  (base #f8f9fa) */\\n  --ae-light-100: color-mix(in srgb, var(--ae-light) 20%, white);\\n  --ae-light-200: color-mix(in srgb, var(--ae-light) 40%, white);\\n  --ae-light-300: color-mix(in srgb, var(--ae-light) 60%, white);\\n  --ae-light-400: color-mix(in srgb, var(--ae-light) 80%, white);\\n  --ae-light-500: var(--ae-light);\\n  --ae-light-600: color-mix(in srgb, var(--ae-light) 80%, black);\\n  --ae-light-700: color-mix(in srgb, var(--ae-light) 60%, black);\\n  --ae-light-800: color-mix(in srgb, var(--ae-light) 40%, black);\\n  --ae-light-900: color-mix(in srgb, var(--ae-light) 20%, black);\\n}\\n\\n:root,\\n:host {\\n  /* Hover / active mix (light default \u2014 overridden in \u00A7 6 dark) */\\n  --ae-color-mix-hover:  black 10%;\\n  --ae-color-mix-active: black 20%;\\n\\n  /* Primary (Blue) */\\n  --ae-color-primary:          var(--ae-blue-500);\\n  --ae-color-primary-hover:    color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-hover));\\n  --ae-color-primary-active:   color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-active));\\n  --ae-color-primary-disabled: color-mix(in srgb, var(--ae-blue) 50%, var(--ae-gray-500));\\n\\n  /* Success (Green) */\\n  --ae-color-success:          var(--ae-green-500);\\n  --ae-color-success-hover:    color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-hover));\\n  --ae-color-success-active:   color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-active));\\n  --ae-color-success-disabled: color-mix(in srgb, var(--ae-green) 50%, var(--ae-gray-500));\\n\\n  /* Danger (Red) */\\n  --ae-color-danger:           var(--ae-red-500);\\n  --ae-color-danger-hover:     color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-hover));\\n  --ae-color-danger-active:    color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-active));\\n  --ae-color-danger-disabled:  color-mix(in srgb, var(--ae-red) 50%, var(--ae-gray-500));\\n\\n  /* Warning (Yellow) */\\n  --ae-color-warning:          var(--ae-yellow-500);\\n  --ae-color-warning-hover:    color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-hover));\\n  --ae-color-warning-active:   color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-active));\\n  --ae-color-warning-disabled: color-mix(in srgb, var(--ae-yellow) 50%, var(--ae-gray-500));\\n\\n  /* Info (Cyan) */\\n  --ae-color-info:             var(--ae-cyan-500);\\n  --ae-color-info-hover:       color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-hover));\\n  --ae-color-info-active:      color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));\\n  --ae-color-info-disabled:    color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));\\n\\n  /* Secondary (Slate) \u2014 base differs per theme, overridden in \u00A7 6 dark */\\n  --ae-color-secondary:        var(--ae-slate-500);\\n  --ae-color-secondary-hover:  color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));\\n  --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));\\n  --ae-color-secondary-text:   var(--ae-slate-700);\\n}\\n\\n\\n.theme-light,\\n:root[theme=\\\"light\\\"],\\n:host([theme=\\\"light\\\"]),\\n:host-context([theme=\\\"light\\\"]),\\n:where(:root),\\n:host {\\n  color-scheme: light;\\n\\n  /* Gray UI aliases \u2014 lighter palette steps for elements on white background */\\n  --ae-color-gray-dark:     var(--ae-gray-400);\\n  --ae-color-gray:          var(--ae-gray-300);\\n  --ae-color-gray-light:    var(--ae-gray-200);\\n  --ae-color-gray-lighter:  var(--ae-gray-100);\\n  --ae-color-gray-lightest: color-mix(in srgb, var(--ae-gray) 10%, white);\\n\\n  /* Text */\\n  --ae-color-text-main:       var(--ae-dark-700);\\n  --ae-color-text-muted:      var(--ae-gray-600);\\n  --ae-color-text-disabled:   var(--ae-gray-300);\\n  --ae-color-text-link:       var(--ae-blue-500);\\n  --ae-color-text-link-hover: var(--ae-blue-700);\\n\\n  /* Surfaces */\\n  --ae-surface-sunken:  var(--ae-light-500);\\n  --ae-surface-base:    white;\\n  --ae-surface-raised:  var(--ae-light-500);\\n  --ae-surface-overlay: white;\\n  --ae-color-overlay:   rgba(0, 0, 0, 0.4);\\n\\n  /* Borders */\\n  --ae-border-subtle:   rgba(0, 0, 0, 0.08);\\n  --ae-border-default:  rgba(0, 0, 0, 0.15);\\n  --ae-border-hover:    rgba(0, 0, 0, 0.25);\\n  --ae-border-focus:    var(--ae-color-primary);\\n  --ae-border-disabled: rgba(0, 0, 0, 0.06);\\n\\n  /* Focus ring */\\n  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.30);\\n  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);\\n\\n  /* Subtle intent tokens \u2014 light context */\\n  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.08);\\n  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.40);\\n  --ae-color-primary-text-emphasis:   var(--ae-blue-700);\\n\\n  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.08);\\n  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.40);\\n  --ae-color-success-text-emphasis:   var(--ae-green-700);\\n\\n  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.08);\\n  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.40);\\n  --ae-color-danger-text-emphasis:    var(--ae-red-700);\\n\\n  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.08);\\n  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.40);\\n  --ae-color-warning-text-emphasis:   var(--ae-yellow-700);\\n\\n  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.08);\\n  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.40);\\n  --ae-color-info-text-emphasis:      var(--ae-cyan-700);\\n\\n  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.08);\\n  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.40);\\n  --ae-color-secondary-text-emphasis: var(--ae-slate-700);\\n\\n  --ae-color-light-bg-subtle:         var(--ae-gray-100);   /* opaque on white: ~#e2e2e2 */\\n  --ae-color-light-border-subtle:     var(--ae-gray-200);   /* opaque on white: ~#c4c4c4 */\\n\\n  --ae-color-dark-bg-subtle:          var(--ae-dark-100);   /* opaque on white: ~#d6d8d9 */\\n  --ae-color-dark-border-subtle:      var(--ae-dark-300);   /* opaque on white: ~#85898c */\\n\\n  /* Component tokens \u2014 light defaults */\\n  --ae-action-btn-bg:          var(--ae-gray-200);\\n  --ae-action-btn-bg-hover:    var(--ae-color-primary);\\n  --ae-action-btn-color:       var(--ae-gray-600);\\n  --ae-action-btn-color-hover: white;\\n\\n  --ae-clear-btn-bg-hover:     var(--ae-color-danger);\\n  --ae-clear-btn-color-hover:  white;\\n\\n  --ae-reset-btn-border-radius: var(--ae-radius-xs);\\n  --ae-reset-btn-bg:            var(--ae-action-btn-bg);\\n  --ae-reset-btn-bg-hover:      var(--ae-action-btn-bg-hover);\\n  --ae-reset-btn-color:         var(--ae-action-btn-color);\\n  --ae-reset-btn-color-hover:   var(--ae-action-btn-color-hover);\\n  --ae-reset-btn-transition:    all 0.12s;\\n\\n  --ae-clear-btn-border-radius: var(--ae-radius-xs);\\n  --ae-clear-btn-bg:            var(--ae-action-btn-bg);\\n  --ae-clear-btn-color:         var(--ae-action-btn-color);\\n  --ae-clear-btn-transition:    all 0.12s;\\n}\\n\\n:root,\\n:host {\\n  --ae-size-scale: 1;\\n  --ae-size-base:  calc(1rem * var(--ae-size-scale));                    /* 16px */\\n  --ae-size-xl:    round(calc(var(--ae-size-l) * 1.125), 1px);           /* 23px */\\n  --ae-size-l:     round(calc(var(--ae-size-m) * 1.125 * 1.125), 1px);   /* 20px */\\n  --ae-size-m:     var(--ae-size-base);                                  /* 16px */\\n  --ae-size-s:     round(calc(var(--ae-size-m) / 1.125), 1px);           /* 14px */\\n  --ae-size-xs:    round(calc(var(--ae-size-s) / 1.125), 1px);           /* 12px */\\n  --ae-size-2xs:   round(calc(var(--ae-size-xs) / 1.125), 1px);          /* 11px */\\n  --ae-size-3xs:   round(calc(var(--ae-size-2xs) / 1.125), 1px);         /* 10px */\\n}\\n\\n/* Border-radius tokens \u2014 shared across all components */\\n:root,\\n:host {\\n  /**\\n   * Unified border-radius hook for all components.\\n   *\\n   * Not set by default \u2014 each component falls back to its own --ae-radius-*\\n   * token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).\\n   *\\n   * Usage:\\n   *   :root { --ae-border-radius: 0; }       // global: all components square\\n   *   :root { --ae-border-radius: 999px; }   // global: all components pill\\n   *   ae-button { --ae-border-radius: 50%; } // scoped: only buttons circular\\n   *   .sidebar { --ae-border-radius: 8px; }  // scoped: everything inside .sidebar\\n   *\\n   * To restore a component to its own default:\\n   *   ae-card { --ae-border-radius: initial; }\\n   */\\n\\n  --ae-radius-square:  0;\\n  --ae-radius-xs:      2px;\\n  --ae-radius-sm:      4px;\\n  --ae-radius-md:      6px;\\n  --ae-radius-lg:      8px;\\n  --ae-radius-xl:      12px;\\n  --ae-radius-pill:    999px;\\n  --ae-radius-circle:  50%;\\n}\\n\\n/* Layout tokens \u2014 defined on :root so all light DOM elements can use them */\\n:root,\\n:host {\\n  --container-max-width: 1280px;\\n  --container-padding-x: 1.5rem;\\n}\\n\\n.theme-dark,\\n:root[theme=\\\"dark\\\"],\\n:host([theme=\\\"dark\\\"]),\\n:host-context([theme=\\\"dark\\\"]) {\\n  color-scheme: dark;\\n\\n  /* Hover / active \u2014 slightly gentler on dark backgrounds */\\n  --ae-color-mix-hover:  black 8%;\\n  --ae-color-mix-active: black 16%;\\n\\n  /* Gray UI aliases \u2014 darker palette steps for elements on dark background */\\n  --ae-color-gray-dark:     var(--ae-gray-800);\\n  --ae-color-gray:          var(--ae-gray-700);\\n  --ae-color-gray-light:    var(--ae-gray-600);\\n  --ae-color-gray-lighter:  var(--ae-gray-500);\\n  --ae-color-gray-lightest: var(--ae-gray-400);\\n\\n  /* Secondary \u2014 deeper base on dark background */\\n  --ae-color-secondary:      var(--ae-slate-700);\\n  --ae-color-secondary-text: var(--ae-slate-300);\\n\\n  /* Text */\\n  --ae-color-text-main:       white;\\n  --ae-color-text-muted:      var(--ae-gray-200);\\n  --ae-color-text-disabled:   var(--ae-gray-500);\\n  --ae-color-text-link:       var(--ae-blue-300);\\n  --ae-color-text-link-hover: var(--ae-blue-200);\\n\\n  /* Surfaces */\\n  --ae-surface-sunken:  var(--ae-gray-900);\\n  --ae-surface-base:    color-mix(in srgb, var(--ae-gray) 27%, black);\\n  --ae-surface-raised:  color-mix(in srgb, var(--ae-gray) 34%, black);\\n  --ae-surface-overlay: color-mix(in srgb, var(--ae-gray) 38%, black);\\n  --ae-color-overlay:   rgba(0, 0, 0, 0.6);\\n\\n  /* Borders */\\n  --ae-border-subtle:   rgba(255, 255, 255, 0.08);\\n  --ae-border-default:  rgba(255, 255, 255, 0.12);\\n  --ae-border-hover:    rgba(255, 255, 255, 0.20);\\n  --ae-border-focus:    var(--ae-color-primary);\\n  --ae-border-disabled: rgba(255, 255, 255, 0.06);\\n\\n  /* Focus ring */\\n  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.25);\\n  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);\\n\\n  /* Subtle intent tokens \u2014 dark context (more alpha, lighter text-emphasis) */\\n  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.10);\\n  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.30);\\n  --ae-color-primary-text-emphasis:   var(--ae-blue-300);\\n\\n  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.10);\\n  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.30);\\n  --ae-color-success-text-emphasis:   var(--ae-green-300);\\n\\n  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.10);\\n  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.30);\\n  --ae-color-danger-text-emphasis:    var(--ae-red-300);\\n\\n  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.10);\\n  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.30);\\n  --ae-color-warning-text-emphasis:   var(--ae-yellow-300);\\n\\n  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.10);\\n  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.30);\\n  --ae-color-info-text-emphasis:      var(--ae-cyan-300);\\n\\n  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.10);\\n  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.30);\\n  --ae-color-secondary-text-emphasis: var(--ae-slate-300);\\n\\n  --ae-color-light-bg-subtle:         rgb(from var(--ae-light) r g b / 0.20);\\n  --ae-color-light-border-subtle:     rgb(from var(--ae-light) r g b / 0.25);\\n\\n  --ae-color-dark-bg-subtle:          rgb(from var(--ae-dark) r g b / 0.30);\\n  --ae-color-dark-border-subtle:      rgb(from var(--ae-dark) r g b / 0.50);\\n\\n  /* Component tokens \u2014 dark overrides */\\n  --ae-action-btn-bg:          var(--ae-color-gray);\\n  --ae-action-btn-bg-hover:    color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));\\n  --ae-action-btn-color:       var(--ae-gray-400);\\n  --ae-action-btn-color-hover: var(--ae-cyan-300);\\n  --ae-clear-btn-bg-hover:     color-mix(in srgb, var(--ae-red) 25%, var(--ae-gray-800));\\n  --ae-clear-btn-color-hover:  var(--ae-red-300);\\n}\\n\"", "export default \":host([size=\\\"xs\\\"]) { font-size: var(--ae-size-xs); }\\n:host([size=\\\"sm\\\"]) { font-size: var(--ae-size-s); }\\n:host([size=\\\"md\\\"]) { font-size: var(--ae-size-m); }\\n:host([size=\\\"lg\\\"]) { font-size: var(--ae-size-l); }\\n:host([size=\\\"xl\\\"]) { font-size: var(--ae-size-xl); }\\n:host([size=\\\"3xs\\\"]) { font-size: var(--ae-size-3xs); }\\n:host([size=\\\"2xs\\\"]) { font-size: var(--ae-size-2xs); }\\n\"", "export default \":host {\\n  --ae-color-solid:           var(--ae-color-gray);\\n  --ae-color-solid-hover:     color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-hover));\\n  --ae-color-solid-active:    color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-active));\\n  --ae-color-on-solid:        var(--ae-color-text-main);\\n  --ae-color-border:          var(--ae-color-gray);\\n  --ae-color-border-hover:    color-mix(in srgb, var(--ae-color-border), var(--ae-color-mix-hover));\\n  --ae-color-accent:          var(--ae-color-text-muted);\\n  --ae-color-accent-hover:    var(--ae-color-text-main);\\n  --ae-color-subtle:          var(--ae-border-subtle);\\n  --ae-color-subtle-hover:    var(--ae-border-default);\\n  --ae-color-bg-subtle:       var(--ae-border-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-text-muted);\\n  --ae-color-border-subtle:   var(--ae-border-default);\\n}\\n\\n:host([color=\\\"primary\\\"]) {\\n  --ae-color-solid:           var(--ae-color-primary);\\n  --ae-color-on-solid:        white;\\n  --ae-color-border:          var(--ae-color-primary);\\n  --ae-color-accent:          var(--ae-color-text-link);\\n  --ae-color-accent-hover:    var(--ae-color-text-link-hover);\\n  --ae-color-subtle:          var(--ae-color-primary-bg-subtle);\\n  --ae-color-subtle-hover:    rgb(from var(--ae-blue) r g b / 0.15);\\n  --ae-color-bg-subtle:       var(--ae-color-primary-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-primary-text-emphasis);\\n  --ae-color-border-subtle:   var(--ae-color-primary-border-subtle);\\n}\\n\\n:host([color=\\\"secondary\\\"]) {\\n  --ae-color-solid:           var(--ae-color-secondary);\\n  --ae-color-on-solid:        white;\\n  --ae-color-border:          var(--ae-color-secondary-hover);\\n  --ae-color-accent:          var(--ae-color-secondary-text-emphasis);\\n  --ae-color-accent-hover:    var(--ae-color-text-main);\\n  --ae-color-subtle:          rgb(from var(--ae-slate) r g b / 0.06);\\n  --ae-color-subtle-hover:    rgb(from var(--ae-slate) r g b / 0.12);\\n  --ae-color-bg-subtle:       var(--ae-color-secondary-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-secondary-text-emphasis);\\n  --ae-color-border-subtle:   var(--ae-color-secondary-border-subtle);\\n}\\n\\n:host([color=\\\"success\\\"]) {\\n  --ae-color-solid:           var(--ae-color-success);\\n  --ae-color-on-solid:        white;\\n  --ae-color-border:          var(--ae-color-success);\\n  --ae-color-accent:          var(--ae-color-success-text-emphasis);\\n  --ae-color-accent-hover:    var(--ae-color-success-hover);\\n  --ae-color-subtle:          var(--ae-color-success-bg-subtle);\\n  --ae-color-subtle-hover:    rgb(from var(--ae-green) r g b / 0.15);\\n  --ae-color-bg-subtle:       var(--ae-color-success-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-success-text-emphasis);\\n  --ae-color-border-subtle:   var(--ae-color-success-border-subtle);\\n}\\n\\n:host([color=\\\"danger\\\"]) {\\n  --ae-color-solid:           var(--ae-color-danger);\\n  --ae-color-on-solid:        white;\\n  --ae-color-border:          var(--ae-color-danger);\\n  --ae-color-accent:          var(--ae-color-danger-text-emphasis);\\n  --ae-color-accent-hover:    var(--ae-color-danger-hover);\\n  --ae-color-subtle:          var(--ae-color-danger-bg-subtle);\\n  --ae-color-subtle-hover:    rgb(from var(--ae-red) r g b / 0.15);\\n  --ae-color-bg-subtle:       var(--ae-color-danger-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-danger-text-emphasis);\\n  --ae-color-border-subtle:   var(--ae-color-danger-border-subtle);\\n}\\n\\n:host([color=\\\"warning\\\"]) {\\n  --ae-color-solid:           var(--ae-color-warning);\\n  --ae-color-on-solid:        var(--ae-gray-900);\\n  --ae-color-border:          var(--ae-color-warning);\\n  --ae-color-accent:          var(--ae-color-warning-text-emphasis);\\n  --ae-color-accent-hover:    var(--ae-color-warning-hover);\\n  --ae-color-subtle:          var(--ae-color-warning-bg-subtle);\\n  --ae-color-subtle-hover:    rgb(from var(--ae-yellow) r g b / 0.15);\\n  --ae-color-bg-subtle:       var(--ae-color-warning-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-warning-text-emphasis);\\n  --ae-color-border-subtle:   var(--ae-color-warning-border-subtle);\\n}\\n\\n:host([color=\\\"info\\\"]) {\\n  --ae-color-solid:           var(--ae-color-info);\\n  --ae-color-on-solid:        white;\\n  --ae-color-border:          var(--ae-color-info);\\n  --ae-color-accent:          var(--ae-color-info-text-emphasis);\\n  --ae-color-accent-hover:    var(--ae-color-info-hover);\\n  --ae-color-subtle:          var(--ae-color-info-bg-subtle);\\n  --ae-color-subtle-hover:    rgb(from var(--ae-cyan) r g b / 0.15);\\n  --ae-color-bg-subtle:       var(--ae-color-info-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-info-text-emphasis);\\n  --ae-color-border-subtle:   var(--ae-color-info-border-subtle);\\n}\\n\\n:host([color=\\\"light\\\"]) {\\n  --ae-color-solid:           var(--ae-light);\\n  --ae-color-on-solid:        var(--ae-gray-900);\\n  --ae-color-border:          var(--ae-border-hover);\\n  --ae-color-subtle:          var(--ae-color-light-bg-subtle);\\n  --ae-color-subtle-hover:    var(--ae-color-light-border-subtle);\\n  --ae-color-bg-subtle:       var(--ae-color-light-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-text-muted);\\n  --ae-color-border-subtle:   var(--ae-color-light-border-subtle);\\n}\\n\\n:host([color=\\\"dark\\\"]) {\\n  --ae-color-solid:           var(--ae-dark-500);\\n  --ae-color-on-solid:        white;\\n  --ae-color-border:          var(--ae-dark-500);\\n  --ae-color-accent:          var(--ae-color-text-main);\\n  --ae-color-accent-hover:    var(--ae-color-text-main);\\n  --ae-color-subtle:          var(--ae-color-dark-bg-subtle);\\n  --ae-color-subtle-hover:    var(--ae-color-dark-border-subtle);\\n  --ae-color-bg-subtle:       var(--ae-color-dark-bg-subtle);\\n  --ae-color-text-subtle:     var(--ae-color-text-main);\\n  --ae-color-border-subtle:   var(--ae-color-dark-border-subtle);\\n}\\n\"", "export default \":host {\\n  display: inline-flex;\\n  align-items: center;\\n  justify-content: center;\\n  flex-shrink: 0;\\n  vertical-align: middle;\\n  --spinner-size: 1.75em;\\n  --spinner-thickness: 0.15em;\\n  --spinner-speed: 0.75s;\\n}\\n\\n:host([size=\\\"xs\\\"]) { font-size: 0.75rem; }\\n:host([size=\\\"sm\\\"]) { font-size: 0.875rem; }\\n:host([size=\\\"md\\\"]) { font-size: 1rem; }\\n:host([size=\\\"lg\\\"]) { font-size: 1.5rem; }\\n\\n.track {\\n  display: inline-block;\\n  width: var(--spinner-size);\\n  height: var(--spinner-size);\\n  border-radius: var(--ae-radius-circle);\\n  border: var(--spinner-thickness) solid var(--ae-color-bg-subtle, rgba(0, 0, 0, 0.08));\\n  border-top-color: var(--ae-color-solid);\\n  animation: ae-spin var(--spinner-speed) linear infinite;\\n  box-sizing: border-box;\\n}\\n\\n:host([variant=\\\"dots\\\"]) .track {\\n  display: inline-flex;\\n  align-items: center;\\n  justify-content: center;\\n  gap: calc(var(--spinner-size) * 0.2);\\n  width: auto;\\n  height: var(--spinner-size);\\n  border: none;\\n  border-radius: var(--ae-radius-square);\\n  animation: none;\\n  background: transparent;\\n}\\n\\n:host([variant=\\\"dots\\\"]) .dot {\\n  display: inline-block;\\n  width: calc(var(--spinner-size) * 0.28);\\n  height: calc(var(--spinner-size) * 0.28);\\n  border-radius: var(--ae-radius-circle);\\n  background: var(--ae-color-solid);\\n  animation: ae-bounce var(--spinner-speed) ease-in-out infinite;\\n}\\n\\n:host([variant=\\\"dots\\\"]) .dot:nth-child(2) {\\n  animation-delay: calc(var(--spinner-speed) / 6);\\n}\\n\\n:host([variant=\\\"dots\\\"]) .dot:nth-child(3) {\\n  animation-delay: calc(var(--spinner-speed) / 3);\\n}\\n\\n@keyframes ae-spin {\\n  to { transform: rotate(360deg); }\\n}\\n\\n@keyframes ae-bounce {\\n  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }\\n  40%           { transform: scale(1);   opacity: 1;   }\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n  .track {\\n    animation: none;\\n    border-top-color: var(--ae-color-solid);\\n    opacity: 0.6;\\n  }\\n\\n  :host([variant=\\\"dots\\\"]) .dot {\\n    animation: none;\\n    opacity: 0.6;\\n  }\\n}\\n\""],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAC,SAAS,oBAAoB;;;ACEvB,SAAS,QAAQ,KAAqB;AAC3C,QAAM,UAAU,IAAI,QAAQ,WAAW,EAAE;AAEzC,SAAO,QAAQ,QAAQ,mBAAmB,OAAO,EAAE,YAAY;AACjE;;;ADHA,IAAM,kBAAkB;AAKxB,IAAM,iBAAN,cAA6B,aAAa;AAAA,EACxC,OAAO,SAAS,MAAe;AAC7B,UAAM,UAAU,QAAQ,GAAG,eAAe,IAAI,KAAK,WAAW,QAAQ,KAAK,IAAI,CAAC;AAEhF,UAAM,SAAS,OAAO;AAAA,EACxB;AACF;AAEA,IAAO,0BAAQ;;;AEdf,SAAS,MAAM,YAAY;;;ACF3B,IAAO,oBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAf,IAAO,eAAQ;;;ACAf,IAAO,gBAAQ;;;ACAf,IAAO,kBAAQ;;;AJAf;AAuBA,IAAM,UAAN,eAAsB,8BAGpB,gBAAC,KAAK,EAAE,MAAM,OAAO,CAAC,IAGtB,aAAC,KAAK,EAAE,MAAM,OAAO,CAAC,IAGtB,cAAC,KAAK,EAAE,MAAM,OAAO,CAAC,IAGtB,cAAC,KAAK,EAAE,MAAM,OAAO,CAAC,IAGtB,cAAC,KAAK,EAAE,MAAM,OAAO,CAAC,IAfF,IAAe;AAAA,EAArC;AAAA;AAIE,uBAAS,UAA0B,kBAAnC,gBAAmC,YAAnC;AAGA,uBAAS,OAAoB,kBAA7B,iBAA6B,QAA7B;AAGA,uBAAS,QAAsB,kBAA/B,iBAA+B,aAA/B;AAGA,uBAAS,QAAgB,kBAAzB,iBAAyB,mBAAzB;AAGA,uBAAS,QAAT;AAAA;AAAA,EAIA,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,aAAa,QAAQ,QAAQ;AAAA,EACpC;AAAA,EAEU,SAAS;AACjB,SAAK,aAAa,cAAc,KAAK,KAAK;AAE1C,QAAI,KAAK,OAAO;AACd,WAAK,MAAM,YAAY,mBAAmB,KAAK,KAAK;AAAA,IACtD,OAAO;AACL,WAAK,MAAM,eAAe,iBAAiB;AAAA,IAC7C;AAEA,UAAM,SAAS,KAAK,YAAY;AAEhC,WAAO,KAAK,CAAC,EAAE,KAAK,MAAM;AACxB,WAAK,EAAE,MAAM,SAAS,WAAW,SAAS,eAAe,OAAO,GAAG,MAAM;AACvE,YAAI,QAAQ;AACV,eAAK,EAAE,WAAW,MAAM,CAAC;AACzB,eAAK,EAAE,WAAW,MAAM,CAAC;AACzB,eAAK,EAAE,WAAW,MAAM,CAAC;AAAA,QAC3B;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AA9CA;AAIW;AAGA;AAGA;AAGA;AAGA;AAZT,4BAAS,WADT,cAHI,SAIK;AAGT,4BAAS,QADT,WANI,SAOK;AAGT,4BAAS,SADT,YATI,SAUK;AAGT,4BAAS,SADT,YAZI,SAaK;AAGT,4BAAS,SADT,YAfI,SAgBK;AAhBX,2BAAM;AACJ,cADI,SACG,WAAU;AAiBjB,cAlBI,SAkBa,UAAS,CAAC,mBAAgB,cAAS,eAAU,eAAK;AA8BrE,QAAQ,SAAS;AAQjB,IAAOA,mBAAQ;",
+  "names": ["spinner_default"]
+}

package/dist/styles/layout.cjs

@@ -0,0 +1 @@
+module.exports = "/*\n   layout.css — Light DOM utility classes\n   This file is for use in the user's light DOM (regular HTML),\n   NOT imported by any Web Component internally.\n\n   Import it once in your page:\n     import 'aeico-components/styles/layout.css'\n   or:\n     <link rel=\"stylesheet\" href=\"node_modules/aeico-components/src/styles/layout.css\">\n\n   Requires variables.css for the --space-* and --container-* tokens:\n     import 'aeico-components/styles/variables.css'\n\n   All utility rules live inside @layer aeico-layout so that your own\n   un-layered (or later-layered) styles always override them without !important.\n\n   The layout tokens defined here on :root are intentionally mirrored\n   in variables.css (:root, :host) so that ae-navbar's shadow DOM\n   inner content also aligns automatically.\n*/\n\n/**\n * Tokens — defined on :root outside @layer so they are always resolvable,\n * even when the cascade layer order is re-arranged by the consuming app.\n */\n:root {\n  --container-max-width:    1280px;\n  --container-padding-x:    1.5rem;\n  --container-sm-max-width:  720px;\n  --container-md-max-width:  960px;\n  --container-xl-max-width: 1440px;\n\n  /* Spacing scale — numeric steps based on a 4px unit.\n   * Usage: gap: var(--space-4);  padding: var(--space-2) var(--space-6);\n   */\n  --space-1:  0.25rem;  /*  4px */\n  --space-2:  0.5rem;   /*  8px */\n  --space-3:  0.75rem;  /* 12px */\n  --space-4:  1rem;     /* 16px */\n  --space-6:  1.5rem;   /* 24px */\n  --space-8:  2rem;     /* 32px */\n  --space-10: 2.5rem;   /* 40px */\n  --space-12: 3rem;     /* 48px */\n  --space-16: 4rem;     /* 64px */\n}\n\n/**\n * @layer aeico-layout — all utility rules live here.\n * Unlayered user styles win automatically. To override from a named layer,\n * declare the order before importing this file:\n *   @layer aeico-layout, your-layer;\n */\n@layer aeico-layout {\n\n  /* #region Container */\n\n  /*\n   * .container\n   * Fixed max-width, centred, with horizontal padding.\n   * Same padding-x as ae-navbar's inner content area.\n   */\n  .container {\n    width: 100%;\n    max-width: var(--container-max-width, 1280px);\n    margin-inline: auto;\n    padding-inline: var(--container-padding-x, 1.5rem);\n    box-sizing: border-box;\n  }\n\n  /*\n   * .container-fluid\n   * Full-width, only applies horizontal padding.\n   */\n  .container-fluid {\n    width: 100%;\n    padding-inline: var(--container-padding-x, 1.5rem);\n    box-sizing: border-box;\n  }\n\n  /**\n   * Container size variants\n   *\n   * Narrower and wider alternatives to .container, sharing the same box model.\n   * Override the width tokens globally to affect all instances at once:\n   *   --container-sm-max-width  (default 720px)\n   *   --container-md-max-width  (default 960px)\n   *   --container-xl-max-width  (default 1440px)\n   */\n  .container-sm,\n  .container-md,\n  .container-xl {\n    width: 100%;\n    margin-inline: auto;\n    padding-inline: var(--container-padding-x, 1.5rem);\n    box-sizing: border-box;\n  }\n\n  .container-sm { max-width: var(--container-sm-max-width,  720px); }\n  .container-md { max-width: var(--container-md-max-width,  960px); }\n  .container-xl { max-width: var(--container-xl-max-width, 1440px); }\n\n  /* #endregion */\n\n  /* #region Stack */\n\n  /**\n   * Stack\n   *\n   * Vertical flex container. Children are laid out top-to-bottom with a\n   * consistent gap driven by --stack-gap (defaults to --space-4 / 16px).\n   *\n   * Override per-component:  .my-section { --stack-gap: var(--space-6) }\n   * Or use a gap modifier:   <div class=\"stack stack-6\">\n   *\n   * Gap modifier scale (maps to spacing tokens):\n   *   .stack-1  4px    .stack-2  8px    .stack-3  12px   .stack-4  16px\n   *   .stack-6  24px   .stack-8  32px   .stack-10 40px   .stack-12 48px   .stack-16 64px\n   */\n  .stack {\n    display: flex;\n    flex-direction: column;\n    gap: var(--stack-gap, var(--space-4, 1rem));\n  }\n\n  /* Reset block margins on direct children — prevents h1/p/ul from adding\n     unintended spacing on top of the flex gap. */\n  .stack > * { margin-block: 0; margin-inline: 0; }\n\n  /* Default alignment — zero specificity so a single class rule overrides it. */\n  :where(.stack) { align-items: stretch; }\n\n  .stack-1  { --stack-gap: var(--space-1,  0.25rem); }\n  .stack-2  { --stack-gap: var(--space-2,  0.5rem);  }\n  .stack-3  { --stack-gap: var(--space-3,  0.75rem); }\n  .stack-4  { --stack-gap: var(--space-4,  1rem);    }\n  .stack-6  { --stack-gap: var(--space-6,  1.5rem);  }\n  .stack-8  { --stack-gap: var(--space-8,  2rem);    }\n  .stack-10 { --stack-gap: var(--space-10, 2.5rem);  }\n  .stack-12 { --stack-gap: var(--space-12, 3rem);    }\n  .stack-16 { --stack-gap: var(--space-16, 4rem);    }\n\n  /* Alignment modifiers */\n  .stack-center  { align-items: center; }\n  .stack-stretch { align-items: stretch; }\n  .stack-start   { align-items: flex-start; }\n  .stack-end     { align-items: flex-end; }\n\n  /* #endregion */\n\n  /* #region Cluster */\n\n  /**\n   * Cluster\n   *\n   * Horizontal flex container with wrapping. Items flow left-to-right and wrap\n   * to the next line when the container is too narrow.\n   *\n   * Override per-component:  .my-toolbar { --cluster-gap: var(--space-2) }\n   * Or use a gap modifier:   <div class=\"cluster cluster-2\">\n   *\n   * Inline token overrides (no extra class needed):\n   *   style=\"--cluster-align: flex-start; --cluster-justify: center\"\n   *\n   * Justify modifiers: .cluster-between  .cluster-center  .cluster-end\n   */\n  .cluster {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--cluster-gap, var(--space-4, 1rem));\n  }\n\n  /* Defaults — override via CSS custom properties or modifier classes.\n     :where() keeps specificity at zero so a plain class rule always wins. */\n  :where(.cluster) {\n    align-items: var(--cluster-align, center);\n    justify-content: var(--cluster-justify, flex-start);\n  }\n\n  .cluster-1  { --cluster-gap: var(--space-1,  0.25rem); }\n  .cluster-2  { --cluster-gap: var(--space-2,  0.5rem);  }\n  .cluster-3  { --cluster-gap: var(--space-3,  0.75rem); }\n  .cluster-4  { --cluster-gap: var(--space-4,  1rem);    }\n  .cluster-6  { --cluster-gap: var(--space-6,  1.5rem);  }\n  .cluster-8  { --cluster-gap: var(--space-8,  2rem);    }\n  .cluster-10 { --cluster-gap: var(--space-10, 2.5rem);  }\n  .cluster-12 { --cluster-gap: var(--space-12, 3rem);    }\n  .cluster-16 { --cluster-gap: var(--space-16, 4rem);    }\n\n  /* Justify modifiers */\n  .cluster-between { --cluster-justify: space-between; }\n  .cluster-center  { --cluster-justify: center; }\n  .cluster-end     { --cluster-justify: flex-end; }\n\n  /* #endregion */\n\n  /* #region Grid */\n\n  /**\n   * Grid\n   *\n   * CSS Grid container driven by two custom properties:\n   *   --grid-cols  number of equal columns (default 1)\n   *   --grid-gap   gap between cells       (default --space-4 / 16px)\n   *\n   * Fixed-column presets:\n   *   <div class=\"grid grid-cols-3\">\n   *   Override inline: style=\"--grid-cols: 5; --grid-gap: var(--space-6)\"\n   *\n   * Auto-responsive variant (.grid-auto):\n   *   Fills as many columns as fit; minimum column width set by --grid-min-col.\n   *   <div class=\"grid-auto\" style=\"--grid-min-col: 200px\">\n   *\n   * Responsive column modifiers (breakpoints: sm≥576 md≥768 lg≥992 xl≥1200):\n   *   <div class=\"grid grid-cols-1 grid-cols-md-2 grid-cols-lg-3\">\n   *\n   * Full-width span:\n   *   <div class=\"grid-span\"> inside any .grid or .grid-auto\n   */\n  .grid {\n    display: grid;\n    grid-template-columns: repeat(var(--grid-cols, 1), 1fr);\n    gap: var(--grid-gap, var(--space-4, 1rem));\n  }\n\n  /* Reset block margins on direct children — same rationale as .stack. */\n  .grid > * { margin-block: 0; margin-inline: 0; }\n\n  /* Fixed-column presets */\n  .grid-cols-2  { --grid-cols: 2;  }\n  .grid-cols-3  { --grid-cols: 3;  }\n  .grid-cols-4  { --grid-cols: 4;  }\n  .grid-cols-6  { --grid-cols: 6;  }\n  .grid-cols-12 { --grid-cols: 12; }\n\n  /**\n   * Auto-responsive grid\n   *\n   * min() guard prevents columns exceeding 100% of the container width,\n   * avoiding horizontal overflow when --grid-min-col > container width.\n   */\n  .grid-auto {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min-col, 240px), 100%), 1fr));\n    gap: var(--grid-gap, var(--space-4, 1rem));\n  }\n\n  /* .grid-span — child spans all columns */\n  .grid-span { grid-column: 1 / -1; }\n\n  /* Responsive column modifiers — sm ≥ 576px */\n  @media (min-width: 576px) {\n    .grid-cols-sm-1  { --grid-cols: 1;  }\n    .grid-cols-sm-2  { --grid-cols: 2;  }\n    .grid-cols-sm-3  { --grid-cols: 3;  }\n    .grid-cols-sm-4  { --grid-cols: 4;  }\n  }\n\n  /* Responsive column modifiers — md ≥ 768px */\n  @media (min-width: 768px) {\n    .grid-cols-md-1  { --grid-cols: 1;  }\n    .grid-cols-md-2  { --grid-cols: 2;  }\n    .grid-cols-md-3  { --grid-cols: 3;  }\n    .grid-cols-md-4  { --grid-cols: 4;  }\n    .grid-cols-md-6  { --grid-cols: 6;  }\n  }\n\n  /* Responsive column modifiers — lg ≥ 992px */\n  @media (min-width: 992px) {\n    .grid-cols-lg-1  { --grid-cols: 1;  }\n    .grid-cols-lg-2  { --grid-cols: 2;  }\n    .grid-cols-lg-3  { --grid-cols: 3;  }\n    .grid-cols-lg-4  { --grid-cols: 4;  }\n    .grid-cols-lg-6  { --grid-cols: 6;  }\n    .grid-cols-lg-12 { --grid-cols: 12; }\n  }\n\n  /* Responsive column modifiers — xl ≥ 1200px */\n  @media (min-width: 1200px) {\n    .grid-cols-xl-1  { --grid-cols: 1;  }\n    .grid-cols-xl-2  { --grid-cols: 2;  }\n    .grid-cols-xl-3  { --grid-cols: 3;  }\n    .grid-cols-xl-4  { --grid-cols: 4;  }\n    .grid-cols-xl-6  { --grid-cols: 6;  }\n    .grid-cols-xl-12 { --grid-cols: 12; }\n  }\n\n  /* #endregion */\n\n  /* #region Flank */\n\n  /**\n   * Flank\n   *\n   * A two-column layout where one side (\"the flank\") has a fixed or intrinsic\n   * width and the other side (\"the content\") fills the remaining space.\n   * Wraps to a single column when the content area would be narrower than\n   * --flank-content-min (default 50%).\n   *\n   *   --flank-size        width of the flanking element  (default: auto / intrinsic)\n   *   --flank-content-min min inline size of content before wrapping (default: 50%)\n   *   --flank-gap         gap between children           (default: --space-4)\n   *\n   * Default (.flank):    first child = flank,   last child = content\n   * Reversed (.flank-end): first child = content, last child = flank\n   *\n   * Example:\n   *   <div class=\"flank\" style=\"--flank-size: 12rem\">\n   *     <img src=\"avatar.png\" />\n   *     <div>…content…</div>\n   *   </div>\n   */\n  .flank {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--flank-gap, var(--space-4, 1rem));\n  }\n\n  :where(.flank) { align-items: flex-start; }\n\n  /* First child = flank sidebar */\n  .flank > :first-child {\n    flex-basis: var(--flank-size, auto);\n    flex-grow: 1;\n  }\n\n  /* Last child = content area */\n  .flank > :last-child {\n    flex-basis: 0;\n    flex-grow: 999;\n    min-inline-size: var(--flank-content-min, 50%);\n  }\n\n  /* .flank-end — last child becomes the flank, first child is the content */\n  .flank-end > :last-child {\n    flex-basis: var(--flank-size, auto);\n    flex-grow: 1;\n    min-inline-size: unset;\n  }\n\n  .flank-end > :first-child {\n    flex-basis: 0;\n    flex-grow: 999;\n    min-inline-size: var(--flank-content-min, 50%);\n  }\n\n  /* #endregion */\n\n  /* #region Frame */\n\n  /**\n   * Frame\n   *\n   * Aspect-ratio container that crops its content (images, videos, embeds)\n   * to a fixed ratio without distortion.\n   *\n   *   --frame-ratio  aspect ratio (default: 16 / 9)\n   *\n   * Ratio presets:\n   *   .frame-square     1 / 1\n   *   .frame-landscape  16 / 9  (default)\n   *   .frame-portrait   9 / 16\n   *\n   * Example:\n   *   <div class=\"frame frame-landscape\">\n   *     <img src=\"hero.jpg\" alt=\"…\" />\n   *   </div>\n   */\n  .frame {\n    display: flex;\n    overflow: hidden;\n    aspect-ratio: var(--frame-ratio, 16 / 9);\n  }\n\n  :where(.frame) {\n    align-items: center;\n    justify-content: center;\n  }\n\n  .frame > img,\n  .frame > video {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n  }\n\n  .frame-square    { --frame-ratio: 1 / 1;  }\n  .frame-landscape { --frame-ratio: 16 / 9; }\n  .frame-portrait  { --frame-ratio: 9 / 16; }\n\n  /* #endregion */\n\n  /* #region Split */\n\n  /**\n   * Split\n   *\n   * A space-between layout for toolbars, card headers, and navigation bars.\n   * Unlike .cluster.cluster-between, Split does not wrap by default and\n   * supports a column direction (.split-col) for vertical splits.\n   *\n   *   --split-gap  gap between children (default: --space-4)\n   *\n   * Modifiers:\n   *   .split-col  vertical split (flex-direction: column)\n   *\n   * Example:\n   *   <header class=\"split\">\n   *     <span>Title</span>\n   *     <nav>…actions…</nav>\n   *   </header>\n   */\n  .split {\n    display: flex;\n    gap: var(--split-gap, var(--space-4, 1rem));\n  }\n\n  :where(.split) {\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: nowrap;\n  }\n\n  .split-col {\n    flex-direction: column;\n    align-items: stretch;\n    justify-content: space-between;\n  }\n\n  /* #endregion */\n\n  /* #region Gap utilities */\n\n  /**\n   * Gap utilities\n   *\n   * Apply to any flex or grid container to set gap via spacing tokens.\n   *   .gap-{n}    both row and column gap\n   *   .gap-x-{n}  column gap only\n   *   .gap-y-{n}  row gap only\n   *\n   * Available steps: 0 1 2 3 4 6 8 10 12 16\n   */\n  .gap-0  { gap: 0; }\n  .gap-1  { gap: var(--space-1,  0.25rem); }\n  .gap-2  { gap: var(--space-2,  0.5rem);  }\n  .gap-3  { gap: var(--space-3,  0.75rem); }\n  .gap-4  { gap: var(--space-4,  1rem);    }\n  .gap-6  { gap: var(--space-6,  1.5rem);  }\n  .gap-8  { gap: var(--space-8,  2rem);    }\n  .gap-10 { gap: var(--space-10, 2.5rem);  }\n  .gap-12 { gap: var(--space-12, 3rem);    }\n  .gap-16 { gap: var(--space-16, 4rem);    }\n\n  .gap-x-0  { column-gap: 0; }\n  .gap-x-1  { column-gap: var(--space-1,  0.25rem); }\n  .gap-x-2  { column-gap: var(--space-2,  0.5rem);  }\n  .gap-x-3  { column-gap: var(--space-3,  0.75rem); }\n  .gap-x-4  { column-gap: var(--space-4,  1rem);    }\n  .gap-x-6  { column-gap: var(--space-6,  1.5rem);  }\n  .gap-x-8  { column-gap: var(--space-8,  2rem);    }\n  .gap-x-10 { column-gap: var(--space-10, 2.5rem);  }\n  .gap-x-12 { column-gap: var(--space-12, 3rem);    }\n  .gap-x-16 { column-gap: var(--space-16, 4rem);    }\n\n  .gap-y-0  { row-gap: 0; }\n  .gap-y-1  { row-gap: var(--space-1,  0.25rem); }\n  .gap-y-2  { row-gap: var(--space-2,  0.5rem);  }\n  .gap-y-3  { row-gap: var(--space-3,  0.75rem); }\n  .gap-y-4  { row-gap: var(--space-4,  1rem);    }\n  .gap-y-6  { row-gap: var(--space-6,  1.5rem);  }\n  .gap-y-8  { row-gap: var(--space-8,  2rem);    }\n  .gap-y-10 { row-gap: var(--space-10, 2.5rem);  }\n  .gap-y-12 { row-gap: var(--space-12, 3rem);    }\n  .gap-y-16 { row-gap: var(--space-16, 4rem);    }\n\n  /* #endregion */\n\n} /* end @layer aeico-layout */\n"

package/dist/styles/layout.js

@@ -0,0 +1 @@
+export default "/*\n   layout.css — Light DOM utility classes\n   This file is for use in the user's light DOM (regular HTML),\n   NOT imported by any Web Component internally.\n\n   Import it once in your page:\n     import 'aeico-components/styles/layout.css'\n   or:\n     <link rel=\"stylesheet\" href=\"node_modules/aeico-components/src/styles/layout.css\">\n\n   Requires variables.css for the --space-* and --container-* tokens:\n     import 'aeico-components/styles/variables.css'\n\n   All utility rules live inside @layer aeico-layout so that your own\n   un-layered (or later-layered) styles always override them without !important.\n\n   The layout tokens defined here on :root are intentionally mirrored\n   in variables.css (:root, :host) so that ae-navbar's shadow DOM\n   inner content also aligns automatically.\n*/\n\n/**\n * Tokens — defined on :root outside @layer so they are always resolvable,\n * even when the cascade layer order is re-arranged by the consuming app.\n */\n:root {\n  --container-max-width:    1280px;\n  --container-padding-x:    1.5rem;\n  --container-sm-max-width:  720px;\n  --container-md-max-width:  960px;\n  --container-xl-max-width: 1440px;\n\n  /* Spacing scale — numeric steps based on a 4px unit.\n   * Usage: gap: var(--space-4);  padding: var(--space-2) var(--space-6);\n   */\n  --space-1:  0.25rem;  /*  4px */\n  --space-2:  0.5rem;   /*  8px */\n  --space-3:  0.75rem;  /* 12px */\n  --space-4:  1rem;     /* 16px */\n  --space-6:  1.5rem;   /* 24px */\n  --space-8:  2rem;     /* 32px */\n  --space-10: 2.5rem;   /* 40px */\n  --space-12: 3rem;     /* 48px */\n  --space-16: 4rem;     /* 64px */\n}\n\n/**\n * @layer aeico-layout — all utility rules live here.\n * Unlayered user styles win automatically. To override from a named layer,\n * declare the order before importing this file:\n *   @layer aeico-layout, your-layer;\n */\n@layer aeico-layout {\n\n  /* #region Container */\n\n  /*\n   * .container\n   * Fixed max-width, centred, with horizontal padding.\n   * Same padding-x as ae-navbar's inner content area.\n   */\n  .container {\n    width: 100%;\n    max-width: var(--container-max-width, 1280px);\n    margin-inline: auto;\n    padding-inline: var(--container-padding-x, 1.5rem);\n    box-sizing: border-box;\n  }\n\n  /*\n   * .container-fluid\n   * Full-width, only applies horizontal padding.\n   */\n  .container-fluid {\n    width: 100%;\n    padding-inline: var(--container-padding-x, 1.5rem);\n    box-sizing: border-box;\n  }\n\n  /**\n   * Container size variants\n   *\n   * Narrower and wider alternatives to .container, sharing the same box model.\n   * Override the width tokens globally to affect all instances at once:\n   *   --container-sm-max-width  (default 720px)\n   *   --container-md-max-width  (default 960px)\n   *   --container-xl-max-width  (default 1440px)\n   */\n  .container-sm,\n  .container-md,\n  .container-xl {\n    width: 100%;\n    margin-inline: auto;\n    padding-inline: var(--container-padding-x, 1.5rem);\n    box-sizing: border-box;\n  }\n\n  .container-sm { max-width: var(--container-sm-max-width,  720px); }\n  .container-md { max-width: var(--container-md-max-width,  960px); }\n  .container-xl { max-width: var(--container-xl-max-width, 1440px); }\n\n  /* #endregion */\n\n  /* #region Stack */\n\n  /**\n   * Stack\n   *\n   * Vertical flex container. Children are laid out top-to-bottom with a\n   * consistent gap driven by --stack-gap (defaults to --space-4 / 16px).\n   *\n   * Override per-component:  .my-section { --stack-gap: var(--space-6) }\n   * Or use a gap modifier:   <div class=\"stack stack-6\">\n   *\n   * Gap modifier scale (maps to spacing tokens):\n   *   .stack-1  4px    .stack-2  8px    .stack-3  12px   .stack-4  16px\n   *   .stack-6  24px   .stack-8  32px   .stack-10 40px   .stack-12 48px   .stack-16 64px\n   */\n  .stack {\n    display: flex;\n    flex-direction: column;\n    gap: var(--stack-gap, var(--space-4, 1rem));\n  }\n\n  /* Reset block margins on direct children — prevents h1/p/ul from adding\n     unintended spacing on top of the flex gap. */\n  .stack > * { margin-block: 0; margin-inline: 0; }\n\n  /* Default alignment — zero specificity so a single class rule overrides it. */\n  :where(.stack) { align-items: stretch; }\n\n  .stack-1  { --stack-gap: var(--space-1,  0.25rem); }\n  .stack-2  { --stack-gap: var(--space-2,  0.5rem);  }\n  .stack-3  { --stack-gap: var(--space-3,  0.75rem); }\n  .stack-4  { --stack-gap: var(--space-4,  1rem);    }\n  .stack-6  { --stack-gap: var(--space-6,  1.5rem);  }\n  .stack-8  { --stack-gap: var(--space-8,  2rem);    }\n  .stack-10 { --stack-gap: var(--space-10, 2.5rem);  }\n  .stack-12 { --stack-gap: var(--space-12, 3rem);    }\n  .stack-16 { --stack-gap: var(--space-16, 4rem);    }\n\n  /* Alignment modifiers */\n  .stack-center  { align-items: center; }\n  .stack-stretch { align-items: stretch; }\n  .stack-start   { align-items: flex-start; }\n  .stack-end     { align-items: flex-end; }\n\n  /* #endregion */\n\n  /* #region Cluster */\n\n  /**\n   * Cluster\n   *\n   * Horizontal flex container with wrapping. Items flow left-to-right and wrap\n   * to the next line when the container is too narrow.\n   *\n   * Override per-component:  .my-toolbar { --cluster-gap: var(--space-2) }\n   * Or use a gap modifier:   <div class=\"cluster cluster-2\">\n   *\n   * Inline token overrides (no extra class needed):\n   *   style=\"--cluster-align: flex-start; --cluster-justify: center\"\n   *\n   * Justify modifiers: .cluster-between  .cluster-center  .cluster-end\n   */\n  .cluster {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--cluster-gap, var(--space-4, 1rem));\n  }\n\n  /* Defaults — override via CSS custom properties or modifier classes.\n     :where() keeps specificity at zero so a plain class rule always wins. */\n  :where(.cluster) {\n    align-items: var(--cluster-align, center);\n    justify-content: var(--cluster-justify, flex-start);\n  }\n\n  .cluster-1  { --cluster-gap: var(--space-1,  0.25rem); }\n  .cluster-2  { --cluster-gap: var(--space-2,  0.5rem);  }\n  .cluster-3  { --cluster-gap: var(--space-3,  0.75rem); }\n  .cluster-4  { --cluster-gap: var(--space-4,  1rem);    }\n  .cluster-6  { --cluster-gap: var(--space-6,  1.5rem);  }\n  .cluster-8  { --cluster-gap: var(--space-8,  2rem);    }\n  .cluster-10 { --cluster-gap: var(--space-10, 2.5rem);  }\n  .cluster-12 { --cluster-gap: var(--space-12, 3rem);    }\n  .cluster-16 { --cluster-gap: var(--space-16, 4rem);    }\n\n  /* Justify modifiers */\n  .cluster-between { --cluster-justify: space-between; }\n  .cluster-center  { --cluster-justify: center; }\n  .cluster-end     { --cluster-justify: flex-end; }\n\n  /* #endregion */\n\n  /* #region Grid */\n\n  /**\n   * Grid\n   *\n   * CSS Grid container driven by two custom properties:\n   *   --grid-cols  number of equal columns (default 1)\n   *   --grid-gap   gap between cells       (default --space-4 / 16px)\n   *\n   * Fixed-column presets:\n   *   <div class=\"grid grid-cols-3\">\n   *   Override inline: style=\"--grid-cols: 5; --grid-gap: var(--space-6)\"\n   *\n   * Auto-responsive variant (.grid-auto):\n   *   Fills as many columns as fit; minimum column width set by --grid-min-col.\n   *   <div class=\"grid-auto\" style=\"--grid-min-col: 200px\">\n   *\n   * Responsive column modifiers (breakpoints: sm≥576 md≥768 lg≥992 xl≥1200):\n   *   <div class=\"grid grid-cols-1 grid-cols-md-2 grid-cols-lg-3\">\n   *\n   * Full-width span:\n   *   <div class=\"grid-span\"> inside any .grid or .grid-auto\n   */\n  .grid {\n    display: grid;\n    grid-template-columns: repeat(var(--grid-cols, 1), 1fr);\n    gap: var(--grid-gap, var(--space-4, 1rem));\n  }\n\n  /* Reset block margins on direct children — same rationale as .stack. */\n  .grid > * { margin-block: 0; margin-inline: 0; }\n\n  /* Fixed-column presets */\n  .grid-cols-2  { --grid-cols: 2;  }\n  .grid-cols-3  { --grid-cols: 3;  }\n  .grid-cols-4  { --grid-cols: 4;  }\n  .grid-cols-6  { --grid-cols: 6;  }\n  .grid-cols-12 { --grid-cols: 12; }\n\n  /**\n   * Auto-responsive grid\n   *\n   * min() guard prevents columns exceeding 100% of the container width,\n   * avoiding horizontal overflow when --grid-min-col > container width.\n   */\n  .grid-auto {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min-col, 240px), 100%), 1fr));\n    gap: var(--grid-gap, var(--space-4, 1rem));\n  }\n\n  /* .grid-span — child spans all columns */\n  .grid-span { grid-column: 1 / -1; }\n\n  /* Responsive column modifiers — sm ≥ 576px */\n  @media (min-width: 576px) {\n    .grid-cols-sm-1  { --grid-cols: 1;  }\n    .grid-cols-sm-2  { --grid-cols: 2;  }\n    .grid-cols-sm-3  { --grid-cols: 3;  }\n    .grid-cols-sm-4  { --grid-cols: 4;  }\n  }\n\n  /* Responsive column modifiers — md ≥ 768px */\n  @media (min-width: 768px) {\n    .grid-cols-md-1  { --grid-cols: 1;  }\n    .grid-cols-md-2  { --grid-cols: 2;  }\n    .grid-cols-md-3  { --grid-cols: 3;  }\n    .grid-cols-md-4  { --grid-cols: 4;  }\n    .grid-cols-md-6  { --grid-cols: 6;  }\n  }\n\n  /* Responsive column modifiers — lg ≥ 992px */\n  @media (min-width: 992px) {\n    .grid-cols-lg-1  { --grid-cols: 1;  }\n    .grid-cols-lg-2  { --grid-cols: 2;  }\n    .grid-cols-lg-3  { --grid-cols: 3;  }\n    .grid-cols-lg-4  { --grid-cols: 4;  }\n    .grid-cols-lg-6  { --grid-cols: 6;  }\n    .grid-cols-lg-12 { --grid-cols: 12; }\n  }\n\n  /* Responsive column modifiers — xl ≥ 1200px */\n  @media (min-width: 1200px) {\n    .grid-cols-xl-1  { --grid-cols: 1;  }\n    .grid-cols-xl-2  { --grid-cols: 2;  }\n    .grid-cols-xl-3  { --grid-cols: 3;  }\n    .grid-cols-xl-4  { --grid-cols: 4;  }\n    .grid-cols-xl-6  { --grid-cols: 6;  }\n    .grid-cols-xl-12 { --grid-cols: 12; }\n  }\n\n  /* #endregion */\n\n  /* #region Flank */\n\n  /**\n   * Flank\n   *\n   * A two-column layout where one side (\"the flank\") has a fixed or intrinsic\n   * width and the other side (\"the content\") fills the remaining space.\n   * Wraps to a single column when the content area would be narrower than\n   * --flank-content-min (default 50%).\n   *\n   *   --flank-size        width of the flanking element  (default: auto / intrinsic)\n   *   --flank-content-min min inline size of content before wrapping (default: 50%)\n   *   --flank-gap         gap between children           (default: --space-4)\n   *\n   * Default (.flank):    first child = flank,   last child = content\n   * Reversed (.flank-end): first child = content, last child = flank\n   *\n   * Example:\n   *   <div class=\"flank\" style=\"--flank-size: 12rem\">\n   *     <img src=\"avatar.png\" />\n   *     <div>…content…</div>\n   *   </div>\n   */\n  .flank {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--flank-gap, var(--space-4, 1rem));\n  }\n\n  :where(.flank) { align-items: flex-start; }\n\n  /* First child = flank sidebar */\n  .flank > :first-child {\n    flex-basis: var(--flank-size, auto);\n    flex-grow: 1;\n  }\n\n  /* Last child = content area */\n  .flank > :last-child {\n    flex-basis: 0;\n    flex-grow: 999;\n    min-inline-size: var(--flank-content-min, 50%);\n  }\n\n  /* .flank-end — last child becomes the flank, first child is the content */\n  .flank-end > :last-child {\n    flex-basis: var(--flank-size, auto);\n    flex-grow: 1;\n    min-inline-size: unset;\n  }\n\n  .flank-end > :first-child {\n    flex-basis: 0;\n    flex-grow: 999;\n    min-inline-size: var(--flank-content-min, 50%);\n  }\n\n  /* #endregion */\n\n  /* #region Frame */\n\n  /**\n   * Frame\n   *\n   * Aspect-ratio container that crops its content (images, videos, embeds)\n   * to a fixed ratio without distortion.\n   *\n   *   --frame-ratio  aspect ratio (default: 16 / 9)\n   *\n   * Ratio presets:\n   *   .frame-square     1 / 1\n   *   .frame-landscape  16 / 9  (default)\n   *   .frame-portrait   9 / 16\n   *\n   * Example:\n   *   <div class=\"frame frame-landscape\">\n   *     <img src=\"hero.jpg\" alt=\"…\" />\n   *   </div>\n   */\n  .frame {\n    display: flex;\n    overflow: hidden;\n    aspect-ratio: var(--frame-ratio, 16 / 9);\n  }\n\n  :where(.frame) {\n    align-items: center;\n    justify-content: center;\n  }\n\n  .frame > img,\n  .frame > video {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n  }\n\n  .frame-square    { --frame-ratio: 1 / 1;  }\n  .frame-landscape { --frame-ratio: 16 / 9; }\n  .frame-portrait  { --frame-ratio: 9 / 16; }\n\n  /* #endregion */\n\n  /* #region Split */\n\n  /**\n   * Split\n   *\n   * A space-between layout for toolbars, card headers, and navigation bars.\n   * Unlike .cluster.cluster-between, Split does not wrap by default and\n   * supports a column direction (.split-col) for vertical splits.\n   *\n   *   --split-gap  gap between children (default: --space-4)\n   *\n   * Modifiers:\n   *   .split-col  vertical split (flex-direction: column)\n   *\n   * Example:\n   *   <header class=\"split\">\n   *     <span>Title</span>\n   *     <nav>…actions…</nav>\n   *   </header>\n   */\n  .split {\n    display: flex;\n    gap: var(--split-gap, var(--space-4, 1rem));\n  }\n\n  :where(.split) {\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: nowrap;\n  }\n\n  .split-col {\n    flex-direction: column;\n    align-items: stretch;\n    justify-content: space-between;\n  }\n\n  /* #endregion */\n\n  /* #region Gap utilities */\n\n  /**\n   * Gap utilities\n   *\n   * Apply to any flex or grid container to set gap via spacing tokens.\n   *   .gap-{n}    both row and column gap\n   *   .gap-x-{n}  column gap only\n   *   .gap-y-{n}  row gap only\n   *\n   * Available steps: 0 1 2 3 4 6 8 10 12 16\n   */\n  .gap-0  { gap: 0; }\n  .gap-1  { gap: var(--space-1,  0.25rem); }\n  .gap-2  { gap: var(--space-2,  0.5rem);  }\n  .gap-3  { gap: var(--space-3,  0.75rem); }\n  .gap-4  { gap: var(--space-4,  1rem);    }\n  .gap-6  { gap: var(--space-6,  1.5rem);  }\n  .gap-8  { gap: var(--space-8,  2rem);    }\n  .gap-10 { gap: var(--space-10, 2.5rem);  }\n  .gap-12 { gap: var(--space-12, 3rem);    }\n  .gap-16 { gap: var(--space-16, 4rem);    }\n\n  .gap-x-0  { column-gap: 0; }\n  .gap-x-1  { column-gap: var(--space-1,  0.25rem); }\n  .gap-x-2  { column-gap: var(--space-2,  0.5rem);  }\n  .gap-x-3  { column-gap: var(--space-3,  0.75rem); }\n  .gap-x-4  { column-gap: var(--space-4,  1rem);    }\n  .gap-x-6  { column-gap: var(--space-6,  1.5rem);  }\n  .gap-x-8  { column-gap: var(--space-8,  2rem);    }\n  .gap-x-10 { column-gap: var(--space-10, 2.5rem);  }\n  .gap-x-12 { column-gap: var(--space-12, 3rem);    }\n  .gap-x-16 { column-gap: var(--space-16, 4rem);    }\n\n  .gap-y-0  { row-gap: 0; }\n  .gap-y-1  { row-gap: var(--space-1,  0.25rem); }\n  .gap-y-2  { row-gap: var(--space-2,  0.5rem);  }\n  .gap-y-3  { row-gap: var(--space-3,  0.75rem); }\n  .gap-y-4  { row-gap: var(--space-4,  1rem);    }\n  .gap-y-6  { row-gap: var(--space-6,  1.5rem);  }\n  .gap-y-8  { row-gap: var(--space-8,  2rem);    }\n  .gap-y-10 { row-gap: var(--space-10, 2.5rem);  }\n  .gap-y-12 { row-gap: var(--space-12, 3rem);    }\n  .gap-y-16 { row-gap: var(--space-16, 4rem);    }\n\n  /* #endregion */\n\n} /* end @layer aeico-layout */\n"

package/dist/styles/radius.cjs

@@ -0,0 +1 @@
+module.exports = "/*\n   radius.css — Light DOM border-radius utility classes\n   This file is for use in the user's light DOM (regular HTML),\n   NOT imported by any Web Component internally.\n\n   Import it once in your page:\n     import 'aeico-components/styles/radius.css'\n\n   Requires variables.css for the --ae-radius-* tokens:\n     import 'aeico-components/styles/variables.css'\n\n   All utility rules live inside @layer aeico-radius so that your own\n   un-layered (or later-layered) styles always override them without !important.\n*/\n\n@layer aeico-radius {\n  .ae-radius-square  { border-radius: var(--ae-radius-square);  }\n  .ae-radius-xs      { border-radius: var(--ae-radius-xs);      }\n  .ae-radius-sm      { border-radius: var(--ae-radius-sm);      }\n  .ae-radius-md      { border-radius: var(--ae-radius-md);      }\n  .ae-radius-lg      { border-radius: var(--ae-radius-lg);      }\n  .ae-radius-xl      { border-radius: var(--ae-radius-xl);      }\n  .ae-radius-pill    { border-radius: var(--ae-radius-pill);    }\n  .ae-radius-circle  { border-radius: var(--ae-radius-circle);  }\n}\n"

package/dist/styles/radius.js

@@ -0,0 +1 @@
+export default "/*\n   radius.css — Light DOM border-radius utility classes\n   This file is for use in the user's light DOM (regular HTML),\n   NOT imported by any Web Component internally.\n\n   Import it once in your page:\n     import 'aeico-components/styles/radius.css'\n\n   Requires variables.css for the --ae-radius-* tokens:\n     import 'aeico-components/styles/variables.css'\n\n   All utility rules live inside @layer aeico-radius so that your own\n   un-layered (or later-layered) styles always override them without !important.\n*/\n\n@layer aeico-radius {\n  .ae-radius-square  { border-radius: var(--ae-radius-square);  }\n  .ae-radius-xs      { border-radius: var(--ae-radius-xs);      }\n  .ae-radius-sm      { border-radius: var(--ae-radius-sm);      }\n  .ae-radius-md      { border-radius: var(--ae-radius-md);      }\n  .ae-radius-lg      { border-radius: var(--ae-radius-lg);      }\n  .ae-radius-xl      { border-radius: var(--ae-radius-xl);      }\n  .ae-radius-pill    { border-radius: var(--ae-radius-pill);    }\n  .ae-radius-circle  { border-radius: var(--ae-radius-circle);  }\n}\n"

package/dist/styles/variables.cjs

@@ -0,0 +1 @@
+module.exports = ":root,\n:host {\n  --ae-font-sans-serif: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\",\n    \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif,\n    \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,\n    \"Liberation Mono\", \"Courier New\", monospace;\n  font-family: var(--ae-font-sans-serif);\n  --ae-blue:   #0e639c;\n  --ae-green:  #28a745;\n  --ae-red:    #dc3545;\n  --ae-yellow: #ffc107;\n  --ae-cyan:   #17a2b8;\n  --ae-gray:   #6e6e6e;\n  --ae-slate:  #64748b;\n  --ae-dark:   #343a40;\n  --ae-light:  #f8f9fa;\n}\n\n:root,\n:host {\n  /* Blue */\n  --ae-blue-100: color-mix(in srgb, var(--ae-blue) 20%, white);\n  --ae-blue-200: color-mix(in srgb, var(--ae-blue) 40%, white);\n  --ae-blue-300: color-mix(in srgb, var(--ae-blue) 60%, white);\n  --ae-blue-400: color-mix(in srgb, var(--ae-blue) 80%, white);\n  --ae-blue-500: var(--ae-blue);\n  --ae-blue-600: color-mix(in srgb, var(--ae-blue) 80%, black);\n  --ae-blue-700: color-mix(in srgb, var(--ae-blue) 60%, black);\n  --ae-blue-800: color-mix(in srgb, var(--ae-blue) 40%, black);\n  --ae-blue-900: color-mix(in srgb, var(--ae-blue) 20%, black);\n\n  /* Green */\n  --ae-green-100: color-mix(in srgb, var(--ae-green) 20%, white);\n  --ae-green-200: color-mix(in srgb, var(--ae-green) 40%, white);\n  --ae-green-300: color-mix(in srgb, var(--ae-green) 60%, white);\n  --ae-green-400: color-mix(in srgb, var(--ae-green) 80%, white);\n  --ae-green-500: var(--ae-green);\n  --ae-green-600: color-mix(in srgb, var(--ae-green) 80%, black);\n  --ae-green-700: color-mix(in srgb, var(--ae-green) 60%, black);\n  --ae-green-800: color-mix(in srgb, var(--ae-green) 40%, black);\n  --ae-green-900: color-mix(in srgb, var(--ae-green) 20%, black);\n\n  /* Red */\n  --ae-red-100: color-mix(in srgb, var(--ae-red) 20%, white);\n  --ae-red-200: color-mix(in srgb, var(--ae-red) 40%, white);\n  --ae-red-300: color-mix(in srgb, var(--ae-red) 60%, white);\n  --ae-red-400: color-mix(in srgb, var(--ae-red) 80%, white);\n  --ae-red-500: var(--ae-red);\n  --ae-red-600: color-mix(in srgb, var(--ae-red) 80%, black);\n  --ae-red-700: color-mix(in srgb, var(--ae-red) 60%, black);\n  --ae-red-800: color-mix(in srgb, var(--ae-red) 40%, black);\n  --ae-red-900: color-mix(in srgb, var(--ae-red) 20%, black);\n\n  /* Yellow */\n  --ae-yellow-100: color-mix(in srgb, var(--ae-yellow) 20%, white);\n  --ae-yellow-200: color-mix(in srgb, var(--ae-yellow) 40%, white);\n  --ae-yellow-300: color-mix(in srgb, var(--ae-yellow) 60%, white);\n  --ae-yellow-400: color-mix(in srgb, var(--ae-yellow) 80%, white);\n  --ae-yellow-500: var(--ae-yellow);\n  --ae-yellow-600: color-mix(in srgb, var(--ae-yellow) 80%, black);\n  --ae-yellow-700: color-mix(in srgb, var(--ae-yellow) 60%, black);\n  --ae-yellow-800: color-mix(in srgb, var(--ae-yellow) 40%, black);\n  --ae-yellow-900: color-mix(in srgb, var(--ae-yellow) 20%, black);\n\n  /* Cyan */\n  --ae-cyan-100: color-mix(in srgb, var(--ae-cyan) 20%, white);\n  --ae-cyan-200: color-mix(in srgb, var(--ae-cyan) 40%, white);\n  --ae-cyan-300: color-mix(in srgb, var(--ae-cyan) 60%, white);\n  --ae-cyan-400: color-mix(in srgb, var(--ae-cyan) 80%, white);\n  --ae-cyan-500: var(--ae-cyan);\n  --ae-cyan-600: color-mix(in srgb, var(--ae-cyan) 80%, black);\n  --ae-cyan-700: color-mix(in srgb, var(--ae-cyan) 60%, black);\n  --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);\n  --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);\n\n  /* Gray  (neutral — base #6e6e6e) */\n  --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);\n  --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);\n  --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);\n  --ae-gray-400: color-mix(in srgb, var(--ae-gray) 80%, white);\n  --ae-gray-500: var(--ae-gray);\n  --ae-gray-600: color-mix(in srgb, var(--ae-gray) 80%, black);\n  --ae-gray-700: color-mix(in srgb, var(--ae-gray) 60%, black);\n  --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);\n  --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);\n\n  /* Slate  (blue-gray — base #64748b, used for 'secondary') */\n  --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);\n  --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);\n  --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);\n  --ae-slate-400: color-mix(in srgb, var(--ae-slate) 80%, white);\n  --ae-slate-500: var(--ae-slate);\n  --ae-slate-600: color-mix(in srgb, var(--ae-slate) 80%, black);\n  --ae-slate-700: color-mix(in srgb, var(--ae-slate) 60%, black);\n  --ae-slate-800: color-mix(in srgb, var(--ae-slate) 40%, black);\n  --ae-slate-900: color-mix(in srgb, var(--ae-slate) 20%, black);\n\n  /* Dark  (base #343a40) */\n  --ae-dark-100: color-mix(in srgb, var(--ae-dark) 20%, white);\n  --ae-dark-200: color-mix(in srgb, var(--ae-dark) 40%, white);\n  --ae-dark-300: color-mix(in srgb, var(--ae-dark) 60%, white);\n  --ae-dark-400: color-mix(in srgb, var(--ae-dark) 80%, white);\n  --ae-dark-500: var(--ae-dark);\n  --ae-dark-600: color-mix(in srgb, var(--ae-dark) 80%, black);\n  --ae-dark-700: color-mix(in srgb, var(--ae-dark) 60%, black);\n  --ae-dark-800: color-mix(in srgb, var(--ae-dark) 40%, black);\n  --ae-dark-900: color-mix(in srgb, var(--ae-dark) 20%, black);\n\n  /* Light  (base #f8f9fa) */\n  --ae-light-100: color-mix(in srgb, var(--ae-light) 20%, white);\n  --ae-light-200: color-mix(in srgb, var(--ae-light) 40%, white);\n  --ae-light-300: color-mix(in srgb, var(--ae-light) 60%, white);\n  --ae-light-400: color-mix(in srgb, var(--ae-light) 80%, white);\n  --ae-light-500: var(--ae-light);\n  --ae-light-600: color-mix(in srgb, var(--ae-light) 80%, black);\n  --ae-light-700: color-mix(in srgb, var(--ae-light) 60%, black);\n  --ae-light-800: color-mix(in srgb, var(--ae-light) 40%, black);\n  --ae-light-900: color-mix(in srgb, var(--ae-light) 20%, black);\n}\n\n:root,\n:host {\n  /* Hover / active mix (light default — overridden in § 6 dark) */\n  --ae-color-mix-hover:  black 10%;\n  --ae-color-mix-active: black 20%;\n\n  /* Primary (Blue) */\n  --ae-color-primary:          var(--ae-blue-500);\n  --ae-color-primary-hover:    color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-hover));\n  --ae-color-primary-active:   color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-active));\n  --ae-color-primary-disabled: color-mix(in srgb, var(--ae-blue) 50%, var(--ae-gray-500));\n\n  /* Success (Green) */\n  --ae-color-success:          var(--ae-green-500);\n  --ae-color-success-hover:    color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-hover));\n  --ae-color-success-active:   color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-active));\n  --ae-color-success-disabled: color-mix(in srgb, var(--ae-green) 50%, var(--ae-gray-500));\n\n  /* Danger (Red) */\n  --ae-color-danger:           var(--ae-red-500);\n  --ae-color-danger-hover:     color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-hover));\n  --ae-color-danger-active:    color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-active));\n  --ae-color-danger-disabled:  color-mix(in srgb, var(--ae-red) 50%, var(--ae-gray-500));\n\n  /* Warning (Yellow) */\n  --ae-color-warning:          var(--ae-yellow-500);\n  --ae-color-warning-hover:    color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-hover));\n  --ae-color-warning-active:   color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-active));\n  --ae-color-warning-disabled: color-mix(in srgb, var(--ae-yellow) 50%, var(--ae-gray-500));\n\n  /* Info (Cyan) */\n  --ae-color-info:             var(--ae-cyan-500);\n  --ae-color-info-hover:       color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-hover));\n  --ae-color-info-active:      color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));\n  --ae-color-info-disabled:    color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));\n\n  /* Secondary (Slate) — base differs per theme, overridden in § 6 dark */\n  --ae-color-secondary:        var(--ae-slate-500);\n  --ae-color-secondary-hover:  color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));\n  --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));\n  --ae-color-secondary-text:   var(--ae-slate-700);\n}\n\n\n.theme-light,\n:root[theme=\"light\"],\n:host([theme=\"light\"]),\n:host-context([theme=\"light\"]),\n:where(:root),\n:host {\n  color-scheme: light;\n\n  /* Gray UI aliases — lighter palette steps for elements on white background */\n  --ae-color-gray-dark:     var(--ae-gray-400);\n  --ae-color-gray:          var(--ae-gray-300);\n  --ae-color-gray-light:    var(--ae-gray-200);\n  --ae-color-gray-lighter:  var(--ae-gray-100);\n  --ae-color-gray-lightest: color-mix(in srgb, var(--ae-gray) 10%, white);\n\n  /* Text */\n  --ae-color-text-main:       var(--ae-dark-700);\n  --ae-color-text-muted:      var(--ae-gray-600);\n  --ae-color-text-disabled:   var(--ae-gray-300);\n  --ae-color-text-link:       var(--ae-blue-500);\n  --ae-color-text-link-hover: var(--ae-blue-700);\n\n  /* Surfaces */\n  --ae-surface-sunken:  var(--ae-light-500);\n  --ae-surface-base:    white;\n  --ae-surface-raised:  var(--ae-light-500);\n  --ae-surface-overlay: white;\n  --ae-color-overlay:   rgba(0, 0, 0, 0.4);\n\n  /* Borders */\n  --ae-border-subtle:   rgba(0, 0, 0, 0.08);\n  --ae-border-default:  rgba(0, 0, 0, 0.15);\n  --ae-border-hover:    rgba(0, 0, 0, 0.25);\n  --ae-border-focus:    var(--ae-color-primary);\n  --ae-border-disabled: rgba(0, 0, 0, 0.06);\n\n  /* Focus ring */\n  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.30);\n  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);\n\n  /* Subtle intent tokens — light context */\n  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.08);\n  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.40);\n  --ae-color-primary-text-emphasis:   var(--ae-blue-700);\n\n  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.08);\n  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.40);\n  --ae-color-success-text-emphasis:   var(--ae-green-700);\n\n  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.08);\n  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.40);\n  --ae-color-danger-text-emphasis:    var(--ae-red-700);\n\n  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.08);\n  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.40);\n  --ae-color-warning-text-emphasis:   var(--ae-yellow-700);\n\n  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.08);\n  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.40);\n  --ae-color-info-text-emphasis:      var(--ae-cyan-700);\n\n  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.08);\n  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.40);\n  --ae-color-secondary-text-emphasis: var(--ae-slate-700);\n\n  --ae-color-light-bg-subtle:         var(--ae-gray-100);   /* opaque on white: ~#e2e2e2 */\n  --ae-color-light-border-subtle:     var(--ae-gray-200);   /* opaque on white: ~#c4c4c4 */\n\n  --ae-color-dark-bg-subtle:          var(--ae-dark-100);   /* opaque on white: ~#d6d8d9 */\n  --ae-color-dark-border-subtle:      var(--ae-dark-300);   /* opaque on white: ~#85898c */\n\n  /* Component tokens — light defaults */\n  --ae-action-btn-bg:          var(--ae-gray-200);\n  --ae-action-btn-bg-hover:    var(--ae-color-primary);\n  --ae-action-btn-color:       var(--ae-gray-600);\n  --ae-action-btn-color-hover: white;\n\n  --ae-clear-btn-bg-hover:     var(--ae-color-danger);\n  --ae-clear-btn-color-hover:  white;\n\n  --ae-reset-btn-border-radius: var(--ae-radius-xs);\n  --ae-reset-btn-bg:            var(--ae-action-btn-bg);\n  --ae-reset-btn-bg-hover:      var(--ae-action-btn-bg-hover);\n  --ae-reset-btn-color:         var(--ae-action-btn-color);\n  --ae-reset-btn-color-hover:   var(--ae-action-btn-color-hover);\n  --ae-reset-btn-transition:    all 0.12s;\n\n  --ae-clear-btn-border-radius: var(--ae-radius-xs);\n  --ae-clear-btn-bg:            var(--ae-action-btn-bg);\n  --ae-clear-btn-color:         var(--ae-action-btn-color);\n  --ae-clear-btn-transition:    all 0.12s;\n}\n\n:root,\n:host {\n  --ae-size-scale: 1;\n  --ae-size-base:  calc(1rem * var(--ae-size-scale));                    /* 16px */\n  --ae-size-xl:    round(calc(var(--ae-size-l) * 1.125), 1px);           /* 23px */\n  --ae-size-l:     round(calc(var(--ae-size-m) * 1.125 * 1.125), 1px);   /* 20px */\n  --ae-size-m:     var(--ae-size-base);                                  /* 16px */\n  --ae-size-s:     round(calc(var(--ae-size-m) / 1.125), 1px);           /* 14px */\n  --ae-size-xs:    round(calc(var(--ae-size-s) / 1.125), 1px);           /* 12px */\n  --ae-size-2xs:   round(calc(var(--ae-size-xs) / 1.125), 1px);          /* 11px */\n  --ae-size-3xs:   round(calc(var(--ae-size-2xs) / 1.125), 1px);         /* 10px */\n}\n\n/* Border-radius tokens — shared across all components */\n:root,\n:host {\n  /**\n   * Unified border-radius hook for all components.\n   *\n   * Not set by default — each component falls back to its own --ae-radius-*\n   * token (e.g. button → sm, card → lg, input → xs).\n   *\n   * Usage:\n   *   :root { --ae-border-radius: 0; }       // global: all components square\n   *   :root { --ae-border-radius: 999px; }   // global: all components pill\n   *   ae-button { --ae-border-radius: 50%; } // scoped: only buttons circular\n   *   .sidebar { --ae-border-radius: 8px; }  // scoped: everything inside .sidebar\n   *\n   * To restore a component to its own default:\n   *   ae-card { --ae-border-radius: initial; }\n   */\n\n  --ae-radius-square:  0;\n  --ae-radius-xs:      2px;\n  --ae-radius-sm:      4px;\n  --ae-radius-md:      6px;\n  --ae-radius-lg:      8px;\n  --ae-radius-xl:      12px;\n  --ae-radius-pill:    999px;\n  --ae-radius-circle:  50%;\n}\n\n/* Layout tokens — defined on :root so all light DOM elements can use them */\n:root,\n:host {\n  --container-max-width: 1280px;\n  --container-padding-x: 1.5rem;\n}\n\n.theme-dark,\n:root[theme=\"dark\"],\n:host([theme=\"dark\"]),\n:host-context([theme=\"dark\"]) {\n  color-scheme: dark;\n\n  /* Hover / active — slightly gentler on dark backgrounds */\n  --ae-color-mix-hover:  black 8%;\n  --ae-color-mix-active: black 16%;\n\n  /* Gray UI aliases — darker palette steps for elements on dark background */\n  --ae-color-gray-dark:     var(--ae-gray-800);\n  --ae-color-gray:          var(--ae-gray-700);\n  --ae-color-gray-light:    var(--ae-gray-600);\n  --ae-color-gray-lighter:  var(--ae-gray-500);\n  --ae-color-gray-lightest: var(--ae-gray-400);\n\n  /* Secondary — deeper base on dark background */\n  --ae-color-secondary:      var(--ae-slate-700);\n  --ae-color-secondary-text: var(--ae-slate-300);\n\n  /* Text */\n  --ae-color-text-main:       white;\n  --ae-color-text-muted:      var(--ae-gray-200);\n  --ae-color-text-disabled:   var(--ae-gray-500);\n  --ae-color-text-link:       var(--ae-blue-300);\n  --ae-color-text-link-hover: var(--ae-blue-200);\n\n  /* Surfaces */\n  --ae-surface-sunken:  var(--ae-gray-900);\n  --ae-surface-base:    color-mix(in srgb, var(--ae-gray) 27%, black);\n  --ae-surface-raised:  color-mix(in srgb, var(--ae-gray) 34%, black);\n  --ae-surface-overlay: color-mix(in srgb, var(--ae-gray) 38%, black);\n  --ae-color-overlay:   rgba(0, 0, 0, 0.6);\n\n  /* Borders */\n  --ae-border-subtle:   rgba(255, 255, 255, 0.08);\n  --ae-border-default:  rgba(255, 255, 255, 0.12);\n  --ae-border-hover:    rgba(255, 255, 255, 0.20);\n  --ae-border-focus:    var(--ae-color-primary);\n  --ae-border-disabled: rgba(255, 255, 255, 0.06);\n\n  /* Focus ring */\n  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.25);\n  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);\n\n  /* Subtle intent tokens — dark context (more alpha, lighter text-emphasis) */\n  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.10);\n  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.30);\n  --ae-color-primary-text-emphasis:   var(--ae-blue-300);\n\n  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.10);\n  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.30);\n  --ae-color-success-text-emphasis:   var(--ae-green-300);\n\n  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.10);\n  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.30);\n  --ae-color-danger-text-emphasis:    var(--ae-red-300);\n\n  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.10);\n  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.30);\n  --ae-color-warning-text-emphasis:   var(--ae-yellow-300);\n\n  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.10);\n  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.30);\n  --ae-color-info-text-emphasis:      var(--ae-cyan-300);\n\n  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.10);\n  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.30);\n  --ae-color-secondary-text-emphasis: var(--ae-slate-300);\n\n  --ae-color-light-bg-subtle:         rgb(from var(--ae-light) r g b / 0.20);\n  --ae-color-light-border-subtle:     rgb(from var(--ae-light) r g b / 0.25);\n\n  --ae-color-dark-bg-subtle:          rgb(from var(--ae-dark) r g b / 0.30);\n  --ae-color-dark-border-subtle:      rgb(from var(--ae-dark) r g b / 0.50);\n\n  /* Component tokens — dark overrides */\n  --ae-action-btn-bg:          var(--ae-color-gray);\n  --ae-action-btn-bg-hover:    color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));\n  --ae-action-btn-color:       var(--ae-gray-400);\n  --ae-action-btn-color-hover: var(--ae-cyan-300);\n  --ae-clear-btn-bg-hover:     color-mix(in srgb, var(--ae-red) 25%, var(--ae-gray-800));\n  --ae-clear-btn-color-hover:  var(--ae-red-300);\n}\n"

package/dist/styles/variables.js

@@ -0,0 +1 @@
+export default ":root,\n:host {\n  --ae-font-sans-serif: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\",\n    \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif,\n    \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n  --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,\n    \"Liberation Mono\", \"Courier New\", monospace;\n  font-family: var(--ae-font-sans-serif);\n  --ae-blue:   #0e639c;\n  --ae-green:  #28a745;\n  --ae-red:    #dc3545;\n  --ae-yellow: #ffc107;\n  --ae-cyan:   #17a2b8;\n  --ae-gray:   #6e6e6e;\n  --ae-slate:  #64748b;\n  --ae-dark:   #343a40;\n  --ae-light:  #f8f9fa;\n}\n\n:root,\n:host {\n  /* Blue */\n  --ae-blue-100: color-mix(in srgb, var(--ae-blue) 20%, white);\n  --ae-blue-200: color-mix(in srgb, var(--ae-blue) 40%, white);\n  --ae-blue-300: color-mix(in srgb, var(--ae-blue) 60%, white);\n  --ae-blue-400: color-mix(in srgb, var(--ae-blue) 80%, white);\n  --ae-blue-500: var(--ae-blue);\n  --ae-blue-600: color-mix(in srgb, var(--ae-blue) 80%, black);\n  --ae-blue-700: color-mix(in srgb, var(--ae-blue) 60%, black);\n  --ae-blue-800: color-mix(in srgb, var(--ae-blue) 40%, black);\n  --ae-blue-900: color-mix(in srgb, var(--ae-blue) 20%, black);\n\n  /* Green */\n  --ae-green-100: color-mix(in srgb, var(--ae-green) 20%, white);\n  --ae-green-200: color-mix(in srgb, var(--ae-green) 40%, white);\n  --ae-green-300: color-mix(in srgb, var(--ae-green) 60%, white);\n  --ae-green-400: color-mix(in srgb, var(--ae-green) 80%, white);\n  --ae-green-500: var(--ae-green);\n  --ae-green-600: color-mix(in srgb, var(--ae-green) 80%, black);\n  --ae-green-700: color-mix(in srgb, var(--ae-green) 60%, black);\n  --ae-green-800: color-mix(in srgb, var(--ae-green) 40%, black);\n  --ae-green-900: color-mix(in srgb, var(--ae-green) 20%, black);\n\n  /* Red */\n  --ae-red-100: color-mix(in srgb, var(--ae-red) 20%, white);\n  --ae-red-200: color-mix(in srgb, var(--ae-red) 40%, white);\n  --ae-red-300: color-mix(in srgb, var(--ae-red) 60%, white);\n  --ae-red-400: color-mix(in srgb, var(--ae-red) 80%, white);\n  --ae-red-500: var(--ae-red);\n  --ae-red-600: color-mix(in srgb, var(--ae-red) 80%, black);\n  --ae-red-700: color-mix(in srgb, var(--ae-red) 60%, black);\n  --ae-red-800: color-mix(in srgb, var(--ae-red) 40%, black);\n  --ae-red-900: color-mix(in srgb, var(--ae-red) 20%, black);\n\n  /* Yellow */\n  --ae-yellow-100: color-mix(in srgb, var(--ae-yellow) 20%, white);\n  --ae-yellow-200: color-mix(in srgb, var(--ae-yellow) 40%, white);\n  --ae-yellow-300: color-mix(in srgb, var(--ae-yellow) 60%, white);\n  --ae-yellow-400: color-mix(in srgb, var(--ae-yellow) 80%, white);\n  --ae-yellow-500: var(--ae-yellow);\n  --ae-yellow-600: color-mix(in srgb, var(--ae-yellow) 80%, black);\n  --ae-yellow-700: color-mix(in srgb, var(--ae-yellow) 60%, black);\n  --ae-yellow-800: color-mix(in srgb, var(--ae-yellow) 40%, black);\n  --ae-yellow-900: color-mix(in srgb, var(--ae-yellow) 20%, black);\n\n  /* Cyan */\n  --ae-cyan-100: color-mix(in srgb, var(--ae-cyan) 20%, white);\n  --ae-cyan-200: color-mix(in srgb, var(--ae-cyan) 40%, white);\n  --ae-cyan-300: color-mix(in srgb, var(--ae-cyan) 60%, white);\n  --ae-cyan-400: color-mix(in srgb, var(--ae-cyan) 80%, white);\n  --ae-cyan-500: var(--ae-cyan);\n  --ae-cyan-600: color-mix(in srgb, var(--ae-cyan) 80%, black);\n  --ae-cyan-700: color-mix(in srgb, var(--ae-cyan) 60%, black);\n  --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);\n  --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);\n\n  /* Gray  (neutral — base #6e6e6e) */\n  --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);\n  --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);\n  --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);\n  --ae-gray-400: color-mix(in srgb, var(--ae-gray) 80%, white);\n  --ae-gray-500: var(--ae-gray);\n  --ae-gray-600: color-mix(in srgb, var(--ae-gray) 80%, black);\n  --ae-gray-700: color-mix(in srgb, var(--ae-gray) 60%, black);\n  --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);\n  --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);\n\n  /* Slate  (blue-gray — base #64748b, used for 'secondary') */\n  --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);\n  --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);\n  --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);\n  --ae-slate-400: color-mix(in srgb, var(--ae-slate) 80%, white);\n  --ae-slate-500: var(--ae-slate);\n  --ae-slate-600: color-mix(in srgb, var(--ae-slate) 80%, black);\n  --ae-slate-700: color-mix(in srgb, var(--ae-slate) 60%, black);\n  --ae-slate-800: color-mix(in srgb, var(--ae-slate) 40%, black);\n  --ae-slate-900: color-mix(in srgb, var(--ae-slate) 20%, black);\n\n  /* Dark  (base #343a40) */\n  --ae-dark-100: color-mix(in srgb, var(--ae-dark) 20%, white);\n  --ae-dark-200: color-mix(in srgb, var(--ae-dark) 40%, white);\n  --ae-dark-300: color-mix(in srgb, var(--ae-dark) 60%, white);\n  --ae-dark-400: color-mix(in srgb, var(--ae-dark) 80%, white);\n  --ae-dark-500: var(--ae-dark);\n  --ae-dark-600: color-mix(in srgb, var(--ae-dark) 80%, black);\n  --ae-dark-700: color-mix(in srgb, var(--ae-dark) 60%, black);\n  --ae-dark-800: color-mix(in srgb, var(--ae-dark) 40%, black);\n  --ae-dark-900: color-mix(in srgb, var(--ae-dark) 20%, black);\n\n  /* Light  (base #f8f9fa) */\n  --ae-light-100: color-mix(in srgb, var(--ae-light) 20%, white);\n  --ae-light-200: color-mix(in srgb, var(--ae-light) 40%, white);\n  --ae-light-300: color-mix(in srgb, var(--ae-light) 60%, white);\n  --ae-light-400: color-mix(in srgb, var(--ae-light) 80%, white);\n  --ae-light-500: var(--ae-light);\n  --ae-light-600: color-mix(in srgb, var(--ae-light) 80%, black);\n  --ae-light-700: color-mix(in srgb, var(--ae-light) 60%, black);\n  --ae-light-800: color-mix(in srgb, var(--ae-light) 40%, black);\n  --ae-light-900: color-mix(in srgb, var(--ae-light) 20%, black);\n}\n\n:root,\n:host {\n  /* Hover / active mix (light default — overridden in § 6 dark) */\n  --ae-color-mix-hover:  black 10%;\n  --ae-color-mix-active: black 20%;\n\n  /* Primary (Blue) */\n  --ae-color-primary:          var(--ae-blue-500);\n  --ae-color-primary-hover:    color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-hover));\n  --ae-color-primary-active:   color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-active));\n  --ae-color-primary-disabled: color-mix(in srgb, var(--ae-blue) 50%, var(--ae-gray-500));\n\n  /* Success (Green) */\n  --ae-color-success:          var(--ae-green-500);\n  --ae-color-success-hover:    color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-hover));\n  --ae-color-success-active:   color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-active));\n  --ae-color-success-disabled: color-mix(in srgb, var(--ae-green) 50%, var(--ae-gray-500));\n\n  /* Danger (Red) */\n  --ae-color-danger:           var(--ae-red-500);\n  --ae-color-danger-hover:     color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-hover));\n  --ae-color-danger-active:    color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-active));\n  --ae-color-danger-disabled:  color-mix(in srgb, var(--ae-red) 50%, var(--ae-gray-500));\n\n  /* Warning (Yellow) */\n  --ae-color-warning:          var(--ae-yellow-500);\n  --ae-color-warning-hover:    color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-hover));\n  --ae-color-warning-active:   color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-active));\n  --ae-color-warning-disabled: color-mix(in srgb, var(--ae-yellow) 50%, var(--ae-gray-500));\n\n  /* Info (Cyan) */\n  --ae-color-info:             var(--ae-cyan-500);\n  --ae-color-info-hover:       color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-hover));\n  --ae-color-info-active:      color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));\n  --ae-color-info-disabled:    color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));\n\n  /* Secondary (Slate) — base differs per theme, overridden in § 6 dark */\n  --ae-color-secondary:        var(--ae-slate-500);\n  --ae-color-secondary-hover:  color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));\n  --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));\n  --ae-color-secondary-text:   var(--ae-slate-700);\n}\n\n\n.theme-light,\n:root[theme=\"light\"],\n:host([theme=\"light\"]),\n:host-context([theme=\"light\"]),\n:where(:root),\n:host {\n  color-scheme: light;\n\n  /* Gray UI aliases — lighter palette steps for elements on white background */\n  --ae-color-gray-dark:     var(--ae-gray-400);\n  --ae-color-gray:          var(--ae-gray-300);\n  --ae-color-gray-light:    var(--ae-gray-200);\n  --ae-color-gray-lighter:  var(--ae-gray-100);\n  --ae-color-gray-lightest: color-mix(in srgb, var(--ae-gray) 10%, white);\n\n  /* Text */\n  --ae-color-text-main:       var(--ae-dark-700);\n  --ae-color-text-muted:      var(--ae-gray-600);\n  --ae-color-text-disabled:   var(--ae-gray-300);\n  --ae-color-text-link:       var(--ae-blue-500);\n  --ae-color-text-link-hover: var(--ae-blue-700);\n\n  /* Surfaces */\n  --ae-surface-sunken:  var(--ae-light-500);\n  --ae-surface-base:    white;\n  --ae-surface-raised:  var(--ae-light-500);\n  --ae-surface-overlay: white;\n  --ae-color-overlay:   rgba(0, 0, 0, 0.4);\n\n  /* Borders */\n  --ae-border-subtle:   rgba(0, 0, 0, 0.08);\n  --ae-border-default:  rgba(0, 0, 0, 0.15);\n  --ae-border-hover:    rgba(0, 0, 0, 0.25);\n  --ae-border-focus:    var(--ae-color-primary);\n  --ae-border-disabled: rgba(0, 0, 0, 0.06);\n\n  /* Focus ring */\n  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.30);\n  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);\n\n  /* Subtle intent tokens — light context */\n  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.08);\n  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.40);\n  --ae-color-primary-text-emphasis:   var(--ae-blue-700);\n\n  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.08);\n  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.40);\n  --ae-color-success-text-emphasis:   var(--ae-green-700);\n\n  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.08);\n  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.40);\n  --ae-color-danger-text-emphasis:    var(--ae-red-700);\n\n  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.08);\n  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.40);\n  --ae-color-warning-text-emphasis:   var(--ae-yellow-700);\n\n  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.08);\n  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.40);\n  --ae-color-info-text-emphasis:      var(--ae-cyan-700);\n\n  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.08);\n  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.40);\n  --ae-color-secondary-text-emphasis: var(--ae-slate-700);\n\n  --ae-color-light-bg-subtle:         var(--ae-gray-100);   /* opaque on white: ~#e2e2e2 */\n  --ae-color-light-border-subtle:     var(--ae-gray-200);   /* opaque on white: ~#c4c4c4 */\n\n  --ae-color-dark-bg-subtle:          var(--ae-dark-100);   /* opaque on white: ~#d6d8d9 */\n  --ae-color-dark-border-subtle:      var(--ae-dark-300);   /* opaque on white: ~#85898c */\n\n  /* Component tokens — light defaults */\n  --ae-action-btn-bg:          var(--ae-gray-200);\n  --ae-action-btn-bg-hover:    var(--ae-color-primary);\n  --ae-action-btn-color:       var(--ae-gray-600);\n  --ae-action-btn-color-hover: white;\n\n  --ae-clear-btn-bg-hover:     var(--ae-color-danger);\n  --ae-clear-btn-color-hover:  white;\n\n  --ae-reset-btn-border-radius: var(--ae-radius-xs);\n  --ae-reset-btn-bg:            var(--ae-action-btn-bg);\n  --ae-reset-btn-bg-hover:      var(--ae-action-btn-bg-hover);\n  --ae-reset-btn-color:         var(--ae-action-btn-color);\n  --ae-reset-btn-color-hover:   var(--ae-action-btn-color-hover);\n  --ae-reset-btn-transition:    all 0.12s;\n\n  --ae-clear-btn-border-radius: var(--ae-radius-xs);\n  --ae-clear-btn-bg:            var(--ae-action-btn-bg);\n  --ae-clear-btn-color:         var(--ae-action-btn-color);\n  --ae-clear-btn-transition:    all 0.12s;\n}\n\n:root,\n:host {\n  --ae-size-scale: 1;\n  --ae-size-base:  calc(1rem * var(--ae-size-scale));                    /* 16px */\n  --ae-size-xl:    round(calc(var(--ae-size-l) * 1.125), 1px);           /* 23px */\n  --ae-size-l:     round(calc(var(--ae-size-m) * 1.125 * 1.125), 1px);   /* 20px */\n  --ae-size-m:     var(--ae-size-base);                                  /* 16px */\n  --ae-size-s:     round(calc(var(--ae-size-m) / 1.125), 1px);           /* 14px */\n  --ae-size-xs:    round(calc(var(--ae-size-s) / 1.125), 1px);           /* 12px */\n  --ae-size-2xs:   round(calc(var(--ae-size-xs) / 1.125), 1px);          /* 11px */\n  --ae-size-3xs:   round(calc(var(--ae-size-2xs) / 1.125), 1px);         /* 10px */\n}\n\n/* Border-radius tokens — shared across all components */\n:root,\n:host {\n  /**\n   * Unified border-radius hook for all components.\n   *\n   * Not set by default — each component falls back to its own --ae-radius-*\n   * token (e.g. button → sm, card → lg, input → xs).\n   *\n   * Usage:\n   *   :root { --ae-border-radius: 0; }       // global: all components square\n   *   :root { --ae-border-radius: 999px; }   // global: all components pill\n   *   ae-button { --ae-border-radius: 50%; } // scoped: only buttons circular\n   *   .sidebar { --ae-border-radius: 8px; }  // scoped: everything inside .sidebar\n   *\n   * To restore a component to its own default:\n   *   ae-card { --ae-border-radius: initial; }\n   */\n\n  --ae-radius-square:  0;\n  --ae-radius-xs:      2px;\n  --ae-radius-sm:      4px;\n  --ae-radius-md:      6px;\n  --ae-radius-lg:      8px;\n  --ae-radius-xl:      12px;\n  --ae-radius-pill:    999px;\n  --ae-radius-circle:  50%;\n}\n\n/* Layout tokens — defined on :root so all light DOM elements can use them */\n:root,\n:host {\n  --container-max-width: 1280px;\n  --container-padding-x: 1.5rem;\n}\n\n.theme-dark,\n:root[theme=\"dark\"],\n:host([theme=\"dark\"]),\n:host-context([theme=\"dark\"]) {\n  color-scheme: dark;\n\n  /* Hover / active — slightly gentler on dark backgrounds */\n  --ae-color-mix-hover:  black 8%;\n  --ae-color-mix-active: black 16%;\n\n  /* Gray UI aliases — darker palette steps for elements on dark background */\n  --ae-color-gray-dark:     var(--ae-gray-800);\n  --ae-color-gray:          var(--ae-gray-700);\n  --ae-color-gray-light:    var(--ae-gray-600);\n  --ae-color-gray-lighter:  var(--ae-gray-500);\n  --ae-color-gray-lightest: var(--ae-gray-400);\n\n  /* Secondary — deeper base on dark background */\n  --ae-color-secondary:      var(--ae-slate-700);\n  --ae-color-secondary-text: var(--ae-slate-300);\n\n  /* Text */\n  --ae-color-text-main:       white;\n  --ae-color-text-muted:      var(--ae-gray-200);\n  --ae-color-text-disabled:   var(--ae-gray-500);\n  --ae-color-text-link:       var(--ae-blue-300);\n  --ae-color-text-link-hover: var(--ae-blue-200);\n\n  /* Surfaces */\n  --ae-surface-sunken:  var(--ae-gray-900);\n  --ae-surface-base:    color-mix(in srgb, var(--ae-gray) 27%, black);\n  --ae-surface-raised:  color-mix(in srgb, var(--ae-gray) 34%, black);\n  --ae-surface-overlay: color-mix(in srgb, var(--ae-gray) 38%, black);\n  --ae-color-overlay:   rgba(0, 0, 0, 0.6);\n\n  /* Borders */\n  --ae-border-subtle:   rgba(255, 255, 255, 0.08);\n  --ae-border-default:  rgba(255, 255, 255, 0.12);\n  --ae-border-hover:    rgba(255, 255, 255, 0.20);\n  --ae-border-focus:    var(--ae-color-primary);\n  --ae-border-disabled: rgba(255, 255, 255, 0.06);\n\n  /* Focus ring */\n  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.25);\n  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);\n\n  /* Subtle intent tokens — dark context (more alpha, lighter text-emphasis) */\n  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.10);\n  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.30);\n  --ae-color-primary-text-emphasis:   var(--ae-blue-300);\n\n  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.10);\n  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.30);\n  --ae-color-success-text-emphasis:   var(--ae-green-300);\n\n  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.10);\n  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.30);\n  --ae-color-danger-text-emphasis:    var(--ae-red-300);\n\n  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.10);\n  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.30);\n  --ae-color-warning-text-emphasis:   var(--ae-yellow-300);\n\n  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.10);\n  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.30);\n  --ae-color-info-text-emphasis:      var(--ae-cyan-300);\n\n  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.10);\n  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.30);\n  --ae-color-secondary-text-emphasis: var(--ae-slate-300);\n\n  --ae-color-light-bg-subtle:         rgb(from var(--ae-light) r g b / 0.20);\n  --ae-color-light-border-subtle:     rgb(from var(--ae-light) r g b / 0.25);\n\n  --ae-color-dark-bg-subtle:          rgb(from var(--ae-dark) r g b / 0.30);\n  --ae-color-dark-border-subtle:      rgb(from var(--ae-dark) r g b / 0.50);\n\n  /* Component tokens — dark overrides */\n  --ae-action-btn-bg:          var(--ae-color-gray);\n  --ae-action-btn-bg-hover:    color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));\n  --ae-action-btn-color:       var(--ae-gray-400);\n  --ae-action-btn-color-hover: var(--ae-cyan-300);\n  --ae-clear-btn-bg-hover:     color-mix(in srgb, var(--ae-red) 25%, var(--ae-gray-800));\n  --ae-clear-btn-color-hover:  var(--ae-red-300);\n}\n"