aeico-components 0.1.8 → 0.1.10

package/dist/tabs.cjs

@@ -113,7 +113,7 @@ var require_variables = __commonJS({
   --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);
   --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);
 
-  /* Gray  (neutral \u2014 base #6e6e6e) */
+  /* Gray  (neutral - base #6e6e6e) */
   --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);
   --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);
   --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);
@@ -124,7 +124,7 @@ var require_variables = __commonJS({
   --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);
   --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);
 
-  /* Slate  (blue-gray \u2014 base #64748b, used for 'secondary') */
+  /* Slate  (blue-gray - base #64748b, used for 'secondary') */
   --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);
   --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);
   --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);
@@ -160,7 +160,7 @@ var require_variables = __commonJS({
 
 :root,
 :host {
-  /* Hover / active mix (light default \u2014 overridden in \xA7 6 dark) */
+  /* Hover / active mix (light default - overridden in \xA7 6 dark) */
   --ae-color-mix-hover:  black 10%;
   --ae-color-mix-active: black 20%;
 
@@ -194,7 +194,7 @@ var require_variables = __commonJS({
   --ae-color-info-active:      color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));
   --ae-color-info-disabled:    color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));
 
-  /* Secondary (Slate) \u2014 base differs per theme, overridden in \xA7 6 dark */
+  /* Secondary (Slate) - base differs per theme, overridden in \xA7 6 dark */
   --ae-color-secondary:        var(--ae-slate-500);
   --ae-color-secondary-hover:  color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));
   --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));
@@ -210,7 +210,7 @@ var require_variables = __commonJS({
 :host {
   color-scheme: light;
 
-  /* Gray UI aliases \u2014 lighter palette steps for elements on white background */
+  /* Gray UI aliases - lighter palette steps for elements on white background */
   --ae-color-gray-dark:     var(--ae-gray-400);
   --ae-color-gray:          var(--ae-gray-300);
   --ae-color-gray-light:    var(--ae-gray-200);
@@ -242,7 +242,7 @@ var require_variables = __commonJS({
   --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.30);
   --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);
 
-  /* Subtle intent tokens \u2014 light context */
+  /* Subtle intent tokens - light context */
   --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.08);
   --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.40);
   --ae-color-primary-text-emphasis:   var(--ae-blue-700);
@@ -273,7 +273,7 @@ var require_variables = __commonJS({
   --ae-color-dark-bg-subtle:          var(--ae-dark-100);   /* opaque on white: ~#d6d8d9 */
   --ae-color-dark-border-subtle:      var(--ae-dark-300);   /* opaque on white: ~#85898c */
 
-  /* Component tokens \u2014 light defaults */
+  /* Component tokens - light defaults */
   --ae-action-btn-bg:          var(--ae-gray-200);
   --ae-action-btn-bg-hover:    var(--ae-color-primary);
   --ae-action-btn-color:       var(--ae-gray-600);
@@ -308,14 +308,12 @@ var require_variables = __commonJS({
   --ae-size-3xs:   round(calc(var(--ae-size-2xs) / 1.125), 1px);         /* 10px */
 }
 
-/* Border-radius tokens \u2014 shared across all components */
+/* Border-radius tokens - shared across all components */
 :root,
 :host {
   /**
    * Unified border-radius hook for all components.
    *
-   * Not set by default \u2014 each component falls back to its own --ae-radius-*
-   * token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).
    *
    * Usage:
    *   :root { --ae-border-radius: 0; }       // global: all components square
@@ -337,7 +335,7 @@ var require_variables = __commonJS({
   --ae-radius-circle:  50%;
 }
 
-/* Layout tokens \u2014 defined on :root so all light DOM elements can use them */
+/* Layout tokens - defined on :root so all light DOM elements can use them */
 :root,
 :host {
   --container-max-width: 1280px;
@@ -350,18 +348,18 @@ var require_variables = __commonJS({
 :host-context([theme="dark"]) {
   color-scheme: dark;
 
-  /* Hover / active \u2014 slightly gentler on dark backgrounds */
+  /* Hover / active - slightly gentler on dark backgrounds */
   --ae-color-mix-hover:  black 8%;
   --ae-color-mix-active: black 16%;
 
-  /* Gray UI aliases \u2014 darker palette steps for elements on dark background */
+  /* Gray UI aliases - darker palette steps for elements on dark background */
   --ae-color-gray-dark:     var(--ae-gray-800);
   --ae-color-gray:          var(--ae-gray-700);
   --ae-color-gray-light:    var(--ae-gray-600);
   --ae-color-gray-lighter:  var(--ae-gray-500);
   --ae-color-gray-lightest: var(--ae-gray-400);
 
-  /* Secondary \u2014 deeper base on dark background */
+  /* Secondary - deeper base on dark background */
   --ae-color-secondary:      var(--ae-slate-700);
   --ae-color-secondary-text: var(--ae-slate-300);
 
@@ -390,7 +388,7 @@ var require_variables = __commonJS({
   --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.25);
   --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);
 
-  /* Subtle intent tokens \u2014 dark context (more alpha, lighter text-emphasis) */
+  /* Subtle intent tokens - dark context (more alpha, lighter text-emphasis) */
   --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.10);
   --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.30);
   --ae-color-primary-text-emphasis:   var(--ae-blue-300);
@@ -421,7 +419,7 @@ var require_variables = __commonJS({
   --ae-color-dark-bg-subtle:          rgb(from var(--ae-dark) r g b / 0.30);
   --ae-color-dark-border-subtle:      rgb(from var(--ae-dark) r g b / 0.50);
 
-  /* Component tokens \u2014 dark overrides */
+  /* Component tokens - dark overrides */
   --ae-action-btn-bg:          var(--ae-color-gray);
   --ae-action-btn-bg-hover:    color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));
   --ae-action-btn-color:       var(--ae-gray-400);
@@ -470,19 +468,12 @@ var import_tabs = __toESM(require_tabs(), 1);
 
 // src/aeico-component.ts
 var import_aeico = require("aeico");
-
-// src/utils.ts
-function toKebab(str) {
-  const cleaned = str.replace(/^[_\d]+/, "");
-  return cleaned.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-}
-
-// src/aeico-component.ts
 var TAG_NAME_PREFIX = "ae";
 var AeicoComponent = class extends import_aeico.AeicoElement {
-  static register(name) {
-    const tagName = name || `${TAG_NAME_PREFIX}-${this.tagName || toKebab(this.name)}`;
-    super.register(tagName);
+  static define(name) {
+    const prefix = `${TAG_NAME_PREFIX}-`;
+    const tagName = name.startsWith(prefix) ? name : `${prefix}${name}`;
+    super.define(tagName);
   }
 };
 var aeico_component_default = AeicoComponent;
@@ -592,7 +583,7 @@ var Tabs = class extends aeico_component_default {
     });
   }
 };
-Tabs.register();
+Tabs.define("tabs");
 var tabs_default = Tabs;
 
 // src/tabs/tab.ts
@@ -637,7 +628,7 @@ var Tab = class extends aeico_component_default {
     });
   }
 };
-Tab.register();
+Tab.define("tab");
 var tab_default = Tab;
 
 // src/tabs/tab-panel.ts
@@ -651,7 +642,7 @@ var TabPanel = class extends aeico_component_default {
     });
   }
 };
-TabPanel.register();
+TabPanel.define("tab-panel");
 var tab_panel_default = TabPanel;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/tabs.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/variables.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/tabs.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/tab.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/tab-panel.css", "../src/tabs/index.ts", "../src/tabs/tabs.ts", "../src/aeico-component.ts", "../src/utils.ts", "../src/tabs/tab.ts", "../src/tabs/tab-panel.ts"],
-  "sourcesContent": ["module.exports = \":root,\\n:host {\\n  --ae-font-sans-serif: system-ui, -apple-system, \\\"Segoe UI\\\", Roboto, \\\"Helvetica Neue\\\",\\n    \\\"Noto Sans\\\", \\\"Liberation Sans\\\", Arial, sans-serif,\\n    \\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\", \\\"Noto Color Emoji\\\";\\n  --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,\\n    \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace;\\n  font-family: var(--ae-font-sans-serif);\\n  --ae-blue:   #0e639c;\\n  --ae-green:  #28a745;\\n  --ae-red:    #dc3545;\\n  --ae-yellow: #ffc107;\\n  --ae-cyan:   #17a2b8;\\n  --ae-gray:   #6e6e6e;\\n  --ae-slate:  #64748b;\\n  --ae-dark:   #343a40;\\n  --ae-light:  #f8f9fa;\\n}\\n\\n:root,\\n:host {\\n  /* Blue */\\n  --ae-blue-100: color-mix(in srgb, var(--ae-blue) 20%, white);\\n  --ae-blue-200: color-mix(in srgb, var(--ae-blue) 40%, white);\\n  --ae-blue-300: color-mix(in srgb, var(--ae-blue) 60%, white);\\n  --ae-blue-400: color-mix(in srgb, var(--ae-blue) 80%, white);\\n  --ae-blue-500: var(--ae-blue);\\n  --ae-blue-600: color-mix(in srgb, var(--ae-blue) 80%, black);\\n  --ae-blue-700: color-mix(in srgb, var(--ae-blue) 60%, black);\\n  --ae-blue-800: color-mix(in srgb, var(--ae-blue) 40%, black);\\n  --ae-blue-900: color-mix(in srgb, var(--ae-blue) 20%, black);\\n\\n  /* Green */\\n  --ae-green-100: color-mix(in srgb, var(--ae-green) 20%, white);\\n  --ae-green-200: color-mix(in srgb, var(--ae-green) 40%, white);\\n  --ae-green-300: color-mix(in srgb, var(--ae-green) 60%, white);\\n  --ae-green-400: color-mix(in srgb, var(--ae-green) 80%, white);\\n  --ae-green-500: var(--ae-green);\\n  --ae-green-600: color-mix(in srgb, var(--ae-green) 80%, black);\\n  --ae-green-700: color-mix(in srgb, var(--ae-green) 60%, black);\\n  --ae-green-800: color-mix(in srgb, var(--ae-green) 40%, black);\\n  --ae-green-900: color-mix(in srgb, var(--ae-green) 20%, black);\\n\\n  /* Red */\\n  --ae-red-100: color-mix(in srgb, var(--ae-red) 20%, white);\\n  --ae-red-200: color-mix(in srgb, var(--ae-red) 40%, white);\\n  --ae-red-300: color-mix(in srgb, var(--ae-red) 60%, white);\\n  --ae-red-400: color-mix(in srgb, var(--ae-red) 80%, white);\\n  --ae-red-500: var(--ae-red);\\n  --ae-red-600: color-mix(in srgb, var(--ae-red) 80%, black);\\n  --ae-red-700: color-mix(in srgb, var(--ae-red) 60%, black);\\n  --ae-red-800: color-mix(in srgb, var(--ae-red) 40%, black);\\n  --ae-red-900: color-mix(in srgb, var(--ae-red) 20%, black);\\n\\n  /* Yellow */\\n  --ae-yellow-100: color-mix(in srgb, var(--ae-yellow) 20%, white);\\n  --ae-yellow-200: color-mix(in srgb, var(--ae-yellow) 40%, white);\\n  --ae-yellow-300: color-mix(in srgb, var(--ae-yellow) 60%, white);\\n  --ae-yellow-400: color-mix(in srgb, var(--ae-yellow) 80%, white);\\n  --ae-yellow-500: var(--ae-yellow);\\n  --ae-yellow-600: color-mix(in srgb, var(--ae-yellow) 80%, black);\\n  --ae-yellow-700: color-mix(in srgb, var(--ae-yellow) 60%, black);\\n  --ae-yellow-800: color-mix(in srgb, var(--ae-yellow) 40%, black);\\n  --ae-yellow-900: color-mix(in srgb, var(--ae-yellow) 20%, black);\\n\\n  /* Cyan */\\n  --ae-cyan-100: color-mix(in srgb, var(--ae-cyan) 20%, white);\\n  --ae-cyan-200: color-mix(in srgb, var(--ae-cyan) 40%, white);\\n  --ae-cyan-300: color-mix(in srgb, var(--ae-cyan) 60%, white);\\n  --ae-cyan-400: color-mix(in srgb, var(--ae-cyan) 80%, white);\\n  --ae-cyan-500: var(--ae-cyan);\\n  --ae-cyan-600: color-mix(in srgb, var(--ae-cyan) 80%, black);\\n  --ae-cyan-700: color-mix(in srgb, var(--ae-cyan) 60%, black);\\n  --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);\\n  --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);\\n\\n  /* Gray  (neutral \u2014 base #6e6e6e) */\\n  --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);\\n  --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);\\n  --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);\\n  --ae-gray-400: color-mix(in srgb, var(--ae-gray) 80%, white);\\n  --ae-gray-500: var(--ae-gray);\\n  --ae-gray-600: color-mix(in srgb, var(--ae-gray) 80%, black);\\n  --ae-gray-700: color-mix(in srgb, var(--ae-gray) 60%, black);\\n  --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);\\n  --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);\\n\\n  /* Slate  (blue-gray \u2014 base #64748b, used for 'secondary') */\\n  --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);\\n  --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);\\n  --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);\\n  --ae-slate-400: color-mix(in srgb, var(--ae-slate) 80%, white);\\n  --ae-slate-500: var(--ae-slate);\\n  --ae-slate-600: color-mix(in srgb, var(--ae-slate) 80%, black);\\n  --ae-slate-700: color-mix(in srgb, var(--ae-slate) 60%, black);\\n  --ae-slate-800: color-mix(in srgb, var(--ae-slate) 40%, black);\\n  --ae-slate-900: color-mix(in srgb, var(--ae-slate) 20%, black);\\n\\n  /* Dark  (base #343a40) */\\n  --ae-dark-100: color-mix(in srgb, var(--ae-dark) 20%, white);\\n  --ae-dark-200: color-mix(in srgb, var(--ae-dark) 40%, white);\\n  --ae-dark-300: color-mix(in srgb, var(--ae-dark) 60%, white);\\n  --ae-dark-400: color-mix(in srgb, var(--ae-dark) 80%, white);\\n  --ae-dark-500: var(--ae-dark);\\n  --ae-dark-600: color-mix(in srgb, var(--ae-dark) 80%, black);\\n  --ae-dark-700: color-mix(in srgb, var(--ae-dark) 60%, black);\\n  --ae-dark-800: color-mix(in srgb, var(--ae-dark) 40%, black);\\n  --ae-dark-900: color-mix(in srgb, var(--ae-dark) 20%, black);\\n\\n  /* Light  (base #f8f9fa) */\\n  --ae-light-100: color-mix(in srgb, var(--ae-light) 20%, white);\\n  --ae-light-200: color-mix(in srgb, var(--ae-light) 40%, white);\\n  --ae-light-300: color-mix(in srgb, var(--ae-light) 60%, white);\\n  --ae-light-400: color-mix(in srgb, var(--ae-light) 80%, white);\\n  --ae-light-500: var(--ae-light);\\n  --ae-light-600: color-mix(in srgb, var(--ae-light) 80%, black);\\n  --ae-light-700: color-mix(in srgb, var(--ae-light) 60%, black);\\n  --ae-light-800: color-mix(in srgb, var(--ae-light) 40%, black);\\n  --ae-light-900: color-mix(in srgb, var(--ae-light) 20%, black);\\n}\\n\\n:root,\\n:host {\\n  /* Hover / active mix (light default \u2014 overridden in \u00A7 6 dark) */\\n  --ae-color-mix-hover:  black 10%;\\n  --ae-color-mix-active: black 20%;\\n\\n  /* Primary (Blue) */\\n  --ae-color-primary:          var(--ae-blue-500);\\n  --ae-color-primary-hover:    color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-hover));\\n  --ae-color-primary-active:   color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-active));\\n  --ae-color-primary-disabled: color-mix(in srgb, var(--ae-blue) 50%, var(--ae-gray-500));\\n\\n  /* Success (Green) */\\n  --ae-color-success:          var(--ae-green-500);\\n  --ae-color-success-hover:    color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-hover));\\n  --ae-color-success-active:   color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-active));\\n  --ae-color-success-disabled: color-mix(in srgb, var(--ae-green) 50%, var(--ae-gray-500));\\n\\n  /* Danger (Red) */\\n  --ae-color-danger:           var(--ae-red-500);\\n  --ae-color-danger-hover:     color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-hover));\\n  --ae-color-danger-active:    color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-active));\\n  --ae-color-danger-disabled:  color-mix(in srgb, var(--ae-red) 50%, var(--ae-gray-500));\\n\\n  /* Warning (Yellow) */\\n  --ae-color-warning:          var(--ae-yellow-500);\\n  --ae-color-warning-hover:    color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-hover));\\n  --ae-color-warning-active:   color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-active));\\n  --ae-color-warning-disabled: color-mix(in srgb, var(--ae-yellow) 50%, var(--ae-gray-500));\\n\\n  /* Info (Cyan) */\\n  --ae-color-info:             var(--ae-cyan-500);\\n  --ae-color-info-hover:       color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-hover));\\n  --ae-color-info-active:      color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));\\n  --ae-color-info-disabled:    color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));\\n\\n  /* Secondary (Slate) \u2014 base differs per theme, overridden in \u00A7 6 dark */\\n  --ae-color-secondary:        var(--ae-slate-500);\\n  --ae-color-secondary-hover:  color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));\\n  --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));\\n  --ae-color-secondary-text:   var(--ae-slate-700);\\n}\\n\\n\\n.theme-light,\\n:root[theme=\\\"light\\\"],\\n:host([theme=\\\"light\\\"]),\\n:host-context([theme=\\\"light\\\"]),\\n:where(:root),\\n:host {\\n  color-scheme: light;\\n\\n  /* Gray UI aliases \u2014 lighter palette steps for elements on white background */\\n  --ae-color-gray-dark:     var(--ae-gray-400);\\n  --ae-color-gray:          var(--ae-gray-300);\\n  --ae-color-gray-light:    var(--ae-gray-200);\\n  --ae-color-gray-lighter:  var(--ae-gray-100);\\n  --ae-color-gray-lightest: color-mix(in srgb, var(--ae-gray) 10%, white);\\n\\n  /* Text */\\n  --ae-color-text-main:       var(--ae-dark-700);\\n  --ae-color-text-muted:      var(--ae-gray-600);\\n  --ae-color-text-disabled:   var(--ae-gray-300);\\n  --ae-color-text-link:       var(--ae-blue-500);\\n  --ae-color-text-link-hover: var(--ae-blue-700);\\n\\n  /* Surfaces */\\n  --ae-surface-sunken:  var(--ae-light-500);\\n  --ae-surface-base:    white;\\n  --ae-surface-raised:  var(--ae-light-500);\\n  --ae-surface-overlay: white;\\n  --ae-color-overlay:   rgba(0, 0, 0, 0.4);\\n\\n  /* Borders */\\n  --ae-border-subtle:   rgba(0, 0, 0, 0.08);\\n  --ae-border-default:  rgba(0, 0, 0, 0.15);\\n  --ae-border-hover:    rgba(0, 0, 0, 0.25);\\n  --ae-border-focus:    var(--ae-color-primary);\\n  --ae-border-disabled: rgba(0, 0, 0, 0.06);\\n\\n  /* Focus ring */\\n  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.30);\\n  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);\\n\\n  /* Subtle intent tokens \u2014 light context */\\n  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.08);\\n  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.40);\\n  --ae-color-primary-text-emphasis:   var(--ae-blue-700);\\n\\n  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.08);\\n  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.40);\\n  --ae-color-success-text-emphasis:   var(--ae-green-700);\\n\\n  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.08);\\n  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.40);\\n  --ae-color-danger-text-emphasis:    var(--ae-red-700);\\n\\n  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.08);\\n  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.40);\\n  --ae-color-warning-text-emphasis:   var(--ae-yellow-700);\\n\\n  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.08);\\n  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.40);\\n  --ae-color-info-text-emphasis:      var(--ae-cyan-700);\\n\\n  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.08);\\n  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.40);\\n  --ae-color-secondary-text-emphasis: var(--ae-slate-700);\\n\\n  --ae-color-light-bg-subtle:         var(--ae-gray-100);   /* opaque on white: ~#e2e2e2 */\\n  --ae-color-light-border-subtle:     var(--ae-gray-200);   /* opaque on white: ~#c4c4c4 */\\n\\n  --ae-color-dark-bg-subtle:          var(--ae-dark-100);   /* opaque on white: ~#d6d8d9 */\\n  --ae-color-dark-border-subtle:      var(--ae-dark-300);   /* opaque on white: ~#85898c */\\n\\n  /* Component tokens \u2014 light defaults */\\n  --ae-action-btn-bg:          var(--ae-gray-200);\\n  --ae-action-btn-bg-hover:    var(--ae-color-primary);\\n  --ae-action-btn-color:       var(--ae-gray-600);\\n  --ae-action-btn-color-hover: white;\\n\\n  --ae-clear-btn-bg-hover:     var(--ae-color-danger);\\n  --ae-clear-btn-color-hover:  white;\\n\\n  --ae-reset-btn-border-radius: var(--ae-radius-xs);\\n  --ae-reset-btn-bg:            var(--ae-action-btn-bg);\\n  --ae-reset-btn-bg-hover:      var(--ae-action-btn-bg-hover);\\n  --ae-reset-btn-color:         var(--ae-action-btn-color);\\n  --ae-reset-btn-color-hover:   var(--ae-action-btn-color-hover);\\n  --ae-reset-btn-transition:    all 0.12s;\\n\\n  --ae-clear-btn-border-radius: var(--ae-radius-xs);\\n  --ae-clear-btn-bg:            var(--ae-action-btn-bg);\\n  --ae-clear-btn-color:         var(--ae-action-btn-color);\\n  --ae-clear-btn-transition:    all 0.12s;\\n}\\n\\n:root,\\n:host {\\n  --ae-size-scale: 1;\\n  --ae-size-base:  calc(1rem * var(--ae-size-scale));                    /* 16px */\\n  --ae-size-xl:    round(calc(var(--ae-size-l) * 1.125), 1px);           /* 23px */\\n  --ae-size-l:     round(calc(var(--ae-size-m) * 1.125 * 1.125), 1px);   /* 20px */\\n  --ae-size-m:     var(--ae-size-base);                                  /* 16px */\\n  --ae-size-s:     round(calc(var(--ae-size-m) / 1.125), 1px);           /* 14px */\\n  --ae-size-xs:    round(calc(var(--ae-size-s) / 1.125), 1px);           /* 12px */\\n  --ae-size-2xs:   round(calc(var(--ae-size-xs) / 1.125), 1px);          /* 11px */\\n  --ae-size-3xs:   round(calc(var(--ae-size-2xs) / 1.125), 1px);         /* 10px */\\n}\\n\\n/* Border-radius tokens \u2014 shared across all components */\\n:root,\\n:host {\\n  /**\\n   * Unified border-radius hook for all components.\\n   *\\n   * Not set by default \u2014 each component falls back to its own --ae-radius-*\\n   * token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).\\n   *\\n   * Usage:\\n   *   :root { --ae-border-radius: 0; }       // global: all components square\\n   *   :root { --ae-border-radius: 999px; }   // global: all components pill\\n   *   ae-button { --ae-border-radius: 50%; } // scoped: only buttons circular\\n   *   .sidebar { --ae-border-radius: 8px; }  // scoped: everything inside .sidebar\\n   *\\n   * To restore a component to its own default:\\n   *   ae-card { --ae-border-radius: initial; }\\n   */\\n\\n  --ae-radius-square:  0;\\n  --ae-radius-xs:      2px;\\n  --ae-radius-sm:      4px;\\n  --ae-radius-md:      6px;\\n  --ae-radius-lg:      8px;\\n  --ae-radius-xl:      12px;\\n  --ae-radius-pill:    999px;\\n  --ae-radius-circle:  50%;\\n}\\n\\n/* Layout tokens \u2014 defined on :root so all light DOM elements can use them */\\n:root,\\n:host {\\n  --container-max-width: 1280px;\\n  --container-padding-x: 1.5rem;\\n}\\n\\n.theme-dark,\\n:root[theme=\\\"dark\\\"],\\n:host([theme=\\\"dark\\\"]),\\n:host-context([theme=\\\"dark\\\"]) {\\n  color-scheme: dark;\\n\\n  /* Hover / active \u2014 slightly gentler on dark backgrounds */\\n  --ae-color-mix-hover:  black 8%;\\n  --ae-color-mix-active: black 16%;\\n\\n  /* Gray UI aliases \u2014 darker palette steps for elements on dark background */\\n  --ae-color-gray-dark:     var(--ae-gray-800);\\n  --ae-color-gray:          var(--ae-gray-700);\\n  --ae-color-gray-light:    var(--ae-gray-600);\\n  --ae-color-gray-lighter:  var(--ae-gray-500);\\n  --ae-color-gray-lightest: var(--ae-gray-400);\\n\\n  /* Secondary \u2014 deeper base on dark background */\\n  --ae-color-secondary:      var(--ae-slate-700);\\n  --ae-color-secondary-text: var(--ae-slate-300);\\n\\n  /* Text */\\n  --ae-color-text-main:       white;\\n  --ae-color-text-muted:      var(--ae-gray-200);\\n  --ae-color-text-disabled:   var(--ae-gray-500);\\n  --ae-color-text-link:       var(--ae-blue-300);\\n  --ae-color-text-link-hover: var(--ae-blue-200);\\n\\n  /* Surfaces */\\n  --ae-surface-sunken:  var(--ae-gray-900);\\n  --ae-surface-base:    color-mix(in srgb, var(--ae-gray) 27%, black);\\n  --ae-surface-raised:  color-mix(in srgb, var(--ae-gray) 34%, black);\\n  --ae-surface-overlay: color-mix(in srgb, var(--ae-gray) 38%, black);\\n  --ae-color-overlay:   rgba(0, 0, 0, 0.6);\\n\\n  /* Borders */\\n  --ae-border-subtle:   rgba(255, 255, 255, 0.08);\\n  --ae-border-default:  rgba(255, 255, 255, 0.12);\\n  --ae-border-hover:    rgba(255, 255, 255, 0.20);\\n  --ae-border-focus:    var(--ae-color-primary);\\n  --ae-border-disabled: rgba(255, 255, 255, 0.06);\\n\\n  /* Focus ring */\\n  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.25);\\n  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);\\n\\n  /* Subtle intent tokens \u2014 dark context (more alpha, lighter text-emphasis) */\\n  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.10);\\n  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.30);\\n  --ae-color-primary-text-emphasis:   var(--ae-blue-300);\\n\\n  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.10);\\n  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.30);\\n  --ae-color-success-text-emphasis:   var(--ae-green-300);\\n\\n  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.10);\\n  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.30);\\n  --ae-color-danger-text-emphasis:    var(--ae-red-300);\\n\\n  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.10);\\n  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.30);\\n  --ae-color-warning-text-emphasis:   var(--ae-yellow-300);\\n\\n  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.10);\\n  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.30);\\n  --ae-color-info-text-emphasis:      var(--ae-cyan-300);\\n\\n  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.10);\\n  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.30);\\n  --ae-color-secondary-text-emphasis: var(--ae-slate-300);\\n\\n  --ae-color-light-bg-subtle:         rgb(from var(--ae-light) r g b / 0.20);\\n  --ae-color-light-border-subtle:     rgb(from var(--ae-light) r g b / 0.25);\\n\\n  --ae-color-dark-bg-subtle:          rgb(from var(--ae-dark) r g b / 0.30);\\n  --ae-color-dark-border-subtle:      rgb(from var(--ae-dark) r g b / 0.50);\\n\\n  /* Component tokens \u2014 dark overrides */\\n  --ae-action-btn-bg:          var(--ae-color-gray);\\n  --ae-action-btn-bg-hover:    color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));\\n  --ae-action-btn-color:       var(--ae-gray-400);\\n  --ae-action-btn-color-hover: var(--ae-cyan-300);\\n  --ae-clear-btn-bg-hover:     color-mix(in srgb, var(--ae-red) 25%, var(--ae-gray-800));\\n  --ae-clear-btn-color-hover:  var(--ae-red-300);\\n}\\n\"", "module.exports = \":host {\\n  display: flex;\\n  flex-direction: column;\\n  gap: var(--ae-tabs-gap, 0);\\n  overflow: hidden;\\n  border: 1px solid transparent;\\n  border-radius: var(--ae-border-radius, var(--ae-radius-lg));\\n  background: transparent;\\n}\\n\\n[part=\\\"tab-nav\\\"] {\\n  display: flex;\\n  flex-shrink: 0;\\n}\\n\\n[part=\\\"panels\\\"] {\\n  flex: 1;\\n  overflow: auto;\\n}\\n\\n:host([variant=\\\"filled\\\"]) {\\n  border-color: var(--ae-color-gray);\\n  background: var(--ae-color-gray);\\n}\\n\\n:host([variant=\\\"filled\\\"]) [part=\\\"tab-nav\\\"] {\\n  border-bottom: 1px solid color-mix(in srgb, var(--ae-color-gray), black 15%);\\n}\\n\\n:host([variant=\\\"outlined\\\"]) {\\n  border-color: var(--ae-border-hover);\\n  background: transparent;\\n}\\n\\n:host([variant=\\\"outlined\\\"]) [part=\\\"tab-nav\\\"] {\\n  border-bottom: 1px solid var(--ae-border-hover);\\n}\\n\\n:host([variant=\\\"faint\\\"]) {\\n  border-color: var(--ae-border-default);\\n  background: var(--ae-border-subtle);\\n}\\n\\n:host([variant=\\\"faint\\\"]) [part=\\\"tab-nav\\\"] {\\n  border-bottom: 1px solid var(--ae-border-default);\\n}\\n\\n:host([variant=\\\"subtle\\\"]) {\\n  border-color: transparent;\\n  background: var(--ae-border-subtle);\\n}\\n\\n:host([variant=\\\"subtle\\\"]) [part=\\\"tab-nav\\\"] {\\n  border-bottom: 1px solid transparent;\\n}\\n\\n:host([variant=\\\"text\\\"]) {\\n  border-color: transparent;\\n  background: transparent;\\n}\\n\\n:host([variant=\\\"text\\\"]) [part=\\\"tab-nav\\\"] {\\n  border-bottom: 1px solid transparent;\\n}\\n\"", "module.exports = \":host {\\n  display: inline-flex;\\n  cursor: pointer;\\n}\\n\\nbutton {\\n  display: inline-flex;\\n  align-items: center;\\n  gap: 6px;\\n  padding: 8px 16px;\\n  background: none;\\n  border: none;\\n  border-bottom: 2px solid transparent;\\n  cursor: pointer;\\n  font-size: inherit;\\n  font-family: inherit;\\n  color: var(--ae-tab-color, #909090);\\n  font-size: var(--ae-tab-font-size, inherit);\\n  transition: color 0.15s, border-color 0.15s;\\n  outline: none;\\n  white-space: nowrap;\\n  user-select: none;\\n}\\n\\nbutton:hover {\\n  color: var(--ae-tab-hover-color, var(--ae-color-primary));\\n}\\n\\nbutton:focus-visible {\\n  outline: 2px solid var(--ae-color-primary);\\n  outline-offset: -2px;\\n}\\n\\n:host([active]) button {\\n  color: var(--ae-tab-active-color, var(--ae-color-primary));\\n  border-bottom-color: var(--ae-tab-active-color, var(--ae-color-primary));\\n}\\n\\n:host([disabled]) button {\\n  opacity: 0.4;\\n  cursor: not-allowed;\\n  pointer-events: none;\\n}\\n\"", "module.exports = \":host {\\n  display: none;\\n  padding: var(--ae-tab-panel-padding, 16px 0);\\n}\\n\\n:host([active]) {\\n  display: block;\\n}\\n\"", "export { default, default as Tabs } from './tabs';\nexport { default as Tab } from './tab';\nexport { default as TabPanel } from './tab-panel';\n", "\uFEFFimport type { Props } from 'aeico';\nimport styleVariables from '../styles/variables.css';\nimport tabsStyle from '../styles/components/tabs.css';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type Tab from './tab';\nimport type { TabVariant } from './defines';\n\nclass Tabs extends AeicoComponent {\n  static props: Props = {\n    activeIndex: { type: Number },\n    variant: { type: String },\n  };\n\n  declare activeIndex?: number;\n  declare variant?: TabVariant;\n\n  protected static styles = [styleVariables, tabsStyle];\n\n  private _observer: MutationObserver | null = null;\n\n  private get _tabs(): Tab[] {\n    return [...this.children].filter(\n      (el) => el.tagName.toLowerCase() === 'ae-tab',\n    ) as unknown as Tab[];\n  }\n\n  private get _panels(): HTMLElement[] {\n    return [...this.children].filter(\n      (el) => el.tagName.toLowerCase() === 'ae-tab-panel',\n    ) as HTMLElement[];\n  }\n\n  private _getPairs(): [Tab, HTMLElement | null][] {\n    const tabs = this._tabs;\n    const panels = this._panels;\n\n    const idMap = new Map<string, HTMLElement>();\n    for (const panel of panels) {\n      const id = panel.id;\n      if (id) idMap.set(id, panel);\n    }\n\n    const usedPanels = new Set<HTMLElement>();\n    const pairs: [Tab, HTMLElement | null][] = [];\n\n    // First pass: ID-matched tabs\n    for (const tab of tabs) {\n      const panelId = tab.panel;\n      if (panelId) {\n        const panel = idMap.get(panelId) ?? null;\n        if (panel) usedPanels.add(panel);\n        pairs.push([tab, panel]);\n      }\n    }\n\n    // Second pass: position-matched tabs (no panel attr)\n    const unmatchedPanels = panels.filter((p) => !usedPanels.has(p));\n    let posIndex = 0;\n    for (const tab of tabs) {\n      if (!tab.panel) {\n        pairs.push([tab, unmatchedPanels[posIndex] ?? null]);\n        posIndex++;\n      }\n    }\n\n    return pairs;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._observer = new MutationObserver(() => this.update());\n    this._observer.observe(this, { childList: true });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._observer?.disconnect();\n    this._observer = null;\n  }\n\n  protected onUpdated() {\n    this._syncVariant();\n    this._syncActive();\n  }\n\n  private _syncVariant() {\n    const variant = this.variant ?? 'text';\n    this.setAttribute('variant', variant);\n    for (const tab of this._tabs) {\n      tab.setAttribute('variant', variant);\n    }\n  }\n\n  private _handleTabClick = (e: Event) => {\n    const pairs = this._getPairs();\n    const target = e.target as Element;\n    const index = pairs.findIndex(([tab]) => tab === target);\n    if (index !== -1) this.selectTab(index);\n  };\n\n  private _syncActive() {\n    const activeIndex = this.activeIndex ?? 0;\n    const pairs = this._getPairs();\n\n    pairs.forEach(([tab, panel], i) => {\n      const isActive = i === activeIndex;\n      if (isActive) {\n        tab.setAttribute('active', '');\n        panel?.setAttribute('active', '');\n      } else {\n        tab.removeAttribute('active');\n        panel?.removeAttribute('active');\n      }\n    });\n  }\n\n  selectTab(index: number): void {\n    const pairs = this._getPairs();\n    if (index === (this.activeIndex ?? 0) || index >= pairs.length) return;\n    this.activeIndex = index;\n    this.emit('change', { detail: { index } });\n  }\n\n  protected render() {\n    return html(({ nav, div, slot }) => {\n      nav({ part: 'tab-nav', role: 'tablist', '@_tab-click': this._handleTabClick }, () => {\n        slot({ name: 'tab' });\n      });\n      div({ part: 'panels' }, () => {\n        slot();\n      });\n    });\n  }\n}\n\nTabs.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tabs': Tabs;\n  }\n}\n\nexport default Tabs;\n", "\uFEFFimport { AeicoElement } from 'aeico';\nimport { toKebab } from './utils';\n\nconst TAG_NAME_PREFIX = 'ae';\n\n/**\n * AeicoComponent is the base class for all built-in Aeico components.\n */\nclass AeicoComponent extends AeicoElement {\n  static register(name?: string) {\n    const tagName = name || `${TAG_NAME_PREFIX}-${this.tagName || toKebab(this.name)}`;\n\n    super.register(tagName);\n  }\n}\n\nexport default AeicoComponent;\n", "export const SVG_NS = 'http://www.w3.org/2000/svg';\n\nexport function toKebab(str: string): string {\n  const cleaned = str.replace(/^[_\\d]+/, '');\n\n  return cleaned.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n}\n", "\uFEFFimport type { Props } from 'aeico';\nimport tabStyle from '../styles/components/tab.css';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass Tab extends AeicoComponent {\n  static props: Props = {\n    active: { type: Boolean },\n    disabled: { type: Boolean },\n    panel: { type: String },\n  };\n\n  declare active?: boolean;\n  declare disabled?: boolean;\n  declare panel?: string;\n\n  protected static styles = [tabStyle];\n\n  connectedCallback() {\n    this.setAttribute('slot', 'tab');\n    super.connectedCallback();\n  }\n\n  private _handleClick = () => {\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent('_tab-click', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  protected render() {\n    return html(({ button, slot }) => {\n      button(\n        {\n          part: 'tab',\n          type: 'button',\n          role: 'tab',\n          'aria-selected': this.active,\n          'aria-disabled': this.disabled,\n          disabled: this.disabled,\n          '@click': this._handleClick,\n        },\n        () => {\n          slot();\n        },\n      );\n    });\n  }\n}\n\nTab.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tab': Tab;\n  }\n}\n\nexport default Tab;\n", "\uFEFFimport tabPanelStyle from '../styles/components/tab-panel.css';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass TabPanel extends AeicoComponent {\n  protected static styles = [tabPanelStyle];\n\n  protected render() {\n    return html(({ slot }) => {\n      slot();\n    });\n  }\n}\n\nTabPanel.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tab-panel': TabPanel;\n  }\n}\n\nexport default TabPanel;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,4FAAAA,UAAAC,SAAA;AAAA,IAAAA,QAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA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",
+  "sources": ["css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/variables.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/tabs.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/tab.css", "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/tab-panel.css", "../src/tabs/index.ts", "../src/tabs/tabs.ts", "../src/aeico-component.ts", "../src/tabs/tab.ts", "../src/tabs/tab-panel.ts"],
+  "sourcesContent": ["module.exports = \":root,\\n:host {\\n  --ae-font-sans-serif: system-ui, -apple-system, \\\"Segoe UI\\\", Roboto, \\\"Helvetica Neue\\\",\\n    \\\"Noto Sans\\\", \\\"Liberation Sans\\\", Arial, sans-serif,\\n    \\\"Apple Color Emoji\\\", \\\"Segoe UI Emoji\\\", \\\"Segoe UI Symbol\\\", \\\"Noto Color Emoji\\\";\\n  --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,\\n    \\\"Liberation Mono\\\", \\\"Courier New\\\", monospace;\\n  font-family: var(--ae-font-sans-serif);\\n  --ae-blue:   #0e639c;\\n  --ae-green:  #28a745;\\n  --ae-red:    #dc3545;\\n  --ae-yellow: #ffc107;\\n  --ae-cyan:   #17a2b8;\\n  --ae-gray:   #6e6e6e;\\n  --ae-slate:  #64748b;\\n  --ae-dark:   #343a40;\\n  --ae-light:  #f8f9fa;\\n}\\n\\n:root,\\n:host {\\n  /* Blue */\\n  --ae-blue-100: color-mix(in srgb, var(--ae-blue) 20%, white);\\n  --ae-blue-200: color-mix(in srgb, var(--ae-blue) 40%, white);\\n  --ae-blue-300: color-mix(in srgb, var(--ae-blue) 60%, white);\\n  --ae-blue-400: color-mix(in srgb, var(--ae-blue) 80%, white);\\n  --ae-blue-500: var(--ae-blue);\\n  --ae-blue-600: color-mix(in srgb, var(--ae-blue) 80%, black);\\n  --ae-blue-700: color-mix(in srgb, var(--ae-blue) 60%, black);\\n  --ae-blue-800: color-mix(in srgb, var(--ae-blue) 40%, black);\\n  --ae-blue-900: color-mix(in srgb, var(--ae-blue) 20%, black);\\n\\n  /* Green */\\n  --ae-green-100: color-mix(in srgb, var(--ae-green) 20%, white);\\n  --ae-green-200: color-mix(in srgb, var(--ae-green) 40%, white);\\n  --ae-green-300: color-mix(in srgb, var(--ae-green) 60%, white);\\n  --ae-green-400: color-mix(in srgb, var(--ae-green) 80%, white);\\n  --ae-green-500: var(--ae-green);\\n  --ae-green-600: color-mix(in srgb, var(--ae-green) 80%, black);\\n  --ae-green-700: color-mix(in srgb, var(--ae-green) 60%, black);\\n  --ae-green-800: color-mix(in srgb, var(--ae-green) 40%, black);\\n  --ae-green-900: color-mix(in srgb, var(--ae-green) 20%, black);\\n\\n  /* Red */\\n  --ae-red-100: color-mix(in srgb, var(--ae-red) 20%, white);\\n  --ae-red-200: color-mix(in srgb, var(--ae-red) 40%, white);\\n  --ae-red-300: color-mix(in srgb, var(--ae-red) 60%, white);\\n  --ae-red-400: color-mix(in srgb, var(--ae-red) 80%, white);\\n  --ae-red-500: var(--ae-red);\\n  --ae-red-600: color-mix(in srgb, var(--ae-red) 80%, black);\\n  --ae-red-700: color-mix(in srgb, var(--ae-red) 60%, black);\\n  --ae-red-800: color-mix(in srgb, var(--ae-red) 40%, black);\\n  --ae-red-900: color-mix(in srgb, var(--ae-red) 20%, black);\\n\\n  /* Yellow */\\n  --ae-yellow-100: color-mix(in srgb, var(--ae-yellow) 20%, white);\\n  --ae-yellow-200: color-mix(in srgb, var(--ae-yellow) 40%, white);\\n  --ae-yellow-300: color-mix(in srgb, var(--ae-yellow) 60%, white);\\n  --ae-yellow-400: color-mix(in srgb, var(--ae-yellow) 80%, white);\\n  --ae-yellow-500: var(--ae-yellow);\\n  --ae-yellow-600: color-mix(in srgb, var(--ae-yellow) 80%, black);\\n  --ae-yellow-700: color-mix(in srgb, var(--ae-yellow) 60%, black);\\n  --ae-yellow-800: color-mix(in srgb, var(--ae-yellow) 40%, black);\\n  --ae-yellow-900: color-mix(in srgb, var(--ae-yellow) 20%, black);\\n\\n  /* Cyan */\\n  --ae-cyan-100: color-mix(in srgb, var(--ae-cyan) 20%, white);\\n  --ae-cyan-200: color-mix(in srgb, var(--ae-cyan) 40%, white);\\n  --ae-cyan-300: color-mix(in srgb, var(--ae-cyan) 60%, white);\\n  --ae-cyan-400: color-mix(in srgb, var(--ae-cyan) 80%, white);\\n  --ae-cyan-500: var(--ae-cyan);\\n  --ae-cyan-600: color-mix(in srgb, var(--ae-cyan) 80%, black);\\n  --ae-cyan-700: color-mix(in srgb, var(--ae-cyan) 60%, black);\\n  --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);\\n  --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);\\n\\n  /* Gray  (neutral - base #6e6e6e) */\\n  --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);\\n  --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);\\n  --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);\\n  --ae-gray-400: color-mix(in srgb, var(--ae-gray) 80%, white);\\n  --ae-gray-500: var(--ae-gray);\\n  --ae-gray-600: color-mix(in srgb, var(--ae-gray) 80%, black);\\n  --ae-gray-700: color-mix(in srgb, var(--ae-gray) 60%, black);\\n  --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);\\n  --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);\\n\\n  /* Slate  (blue-gray - base #64748b, used for 'secondary') */\\n  --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);\\n  --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);\\n  --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);\\n  --ae-slate-400: color-mix(in srgb, var(--ae-slate) 80%, white);\\n  --ae-slate-500: var(--ae-slate);\\n  --ae-slate-600: color-mix(in srgb, var(--ae-slate) 80%, black);\\n  --ae-slate-700: color-mix(in srgb, var(--ae-slate) 60%, black);\\n  --ae-slate-800: color-mix(in srgb, var(--ae-slate) 40%, black);\\n  --ae-slate-900: color-mix(in srgb, var(--ae-slate) 20%, black);\\n\\n  /* Dark  (base #343a40) */\\n  --ae-dark-100: color-mix(in srgb, var(--ae-dark) 20%, white);\\n  --ae-dark-200: color-mix(in srgb, var(--ae-dark) 40%, white);\\n  --ae-dark-300: color-mix(in srgb, var(--ae-dark) 60%, white);\\n  --ae-dark-400: color-mix(in srgb, var(--ae-dark) 80%, white);\\n  --ae-dark-500: var(--ae-dark);\\n  --ae-dark-600: color-mix(in srgb, var(--ae-dark) 80%, black);\\n  --ae-dark-700: color-mix(in srgb, var(--ae-dark) 60%, black);\\n  --ae-dark-800: color-mix(in srgb, var(--ae-dark) 40%, black);\\n  --ae-dark-900: color-mix(in srgb, var(--ae-dark) 20%, black);\\n\\n  /* Light  (base #f8f9fa) */\\n  --ae-light-100: color-mix(in srgb, var(--ae-light) 20%, white);\\n  --ae-light-200: color-mix(in srgb, var(--ae-light) 40%, white);\\n  --ae-light-300: color-mix(in srgb, var(--ae-light) 60%, white);\\n  --ae-light-400: color-mix(in srgb, var(--ae-light) 80%, white);\\n  --ae-light-500: var(--ae-light);\\n  --ae-light-600: color-mix(in srgb, var(--ae-light) 80%, black);\\n  --ae-light-700: color-mix(in srgb, var(--ae-light) 60%, black);\\n  --ae-light-800: color-mix(in srgb, var(--ae-light) 40%, black);\\n  --ae-light-900: color-mix(in srgb, var(--ae-light) 20%, black);\\n}\\n\\n:root,\\n:host {\\n  /* Hover / active mix (light default - overridden in \u00A7 6 dark) */\\n  --ae-color-mix-hover:  black 10%;\\n  --ae-color-mix-active: black 20%;\\n\\n  /* Primary (Blue) */\\n  --ae-color-primary:          var(--ae-blue-500);\\n  --ae-color-primary-hover:    color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-hover));\\n  --ae-color-primary-active:   color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-active));\\n  --ae-color-primary-disabled: color-mix(in srgb, var(--ae-blue) 50%, var(--ae-gray-500));\\n\\n  /* Success (Green) */\\n  --ae-color-success:          var(--ae-green-500);\\n  --ae-color-success-hover:    color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-hover));\\n  --ae-color-success-active:   color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-active));\\n  --ae-color-success-disabled: color-mix(in srgb, var(--ae-green) 50%, var(--ae-gray-500));\\n\\n  /* Danger (Red) */\\n  --ae-color-danger:           var(--ae-red-500);\\n  --ae-color-danger-hover:     color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-hover));\\n  --ae-color-danger-active:    color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-active));\\n  --ae-color-danger-disabled:  color-mix(in srgb, var(--ae-red) 50%, var(--ae-gray-500));\\n\\n  /* Warning (Yellow) */\\n  --ae-color-warning:          var(--ae-yellow-500);\\n  --ae-color-warning-hover:    color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-hover));\\n  --ae-color-warning-active:   color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-active));\\n  --ae-color-warning-disabled: color-mix(in srgb, var(--ae-yellow) 50%, var(--ae-gray-500));\\n\\n  /* Info (Cyan) */\\n  --ae-color-info:             var(--ae-cyan-500);\\n  --ae-color-info-hover:       color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-hover));\\n  --ae-color-info-active:      color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));\\n  --ae-color-info-disabled:    color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));\\n\\n  /* Secondary (Slate) - base differs per theme, overridden in \u00A7 6 dark */\\n  --ae-color-secondary:        var(--ae-slate-500);\\n  --ae-color-secondary-hover:  color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));\\n  --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));\\n  --ae-color-secondary-text:   var(--ae-slate-700);\\n}\\n\\n\\n.theme-light,\\n:root[theme=\\\"light\\\"],\\n:host([theme=\\\"light\\\"]),\\n:host-context([theme=\\\"light\\\"]),\\n:where(:root),\\n:host {\\n  color-scheme: light;\\n\\n  /* Gray UI aliases - lighter palette steps for elements on white background */\\n  --ae-color-gray-dark:     var(--ae-gray-400);\\n  --ae-color-gray:          var(--ae-gray-300);\\n  --ae-color-gray-light:    var(--ae-gray-200);\\n  --ae-color-gray-lighter:  var(--ae-gray-100);\\n  --ae-color-gray-lightest: color-mix(in srgb, var(--ae-gray) 10%, white);\\n\\n  /* Text */\\n  --ae-color-text-main:       var(--ae-dark-700);\\n  --ae-color-text-muted:      var(--ae-gray-600);\\n  --ae-color-text-disabled:   var(--ae-gray-300);\\n  --ae-color-text-link:       var(--ae-blue-500);\\n  --ae-color-text-link-hover: var(--ae-blue-700);\\n\\n  /* Surfaces */\\n  --ae-surface-sunken:  var(--ae-light-500);\\n  --ae-surface-base:    white;\\n  --ae-surface-raised:  var(--ae-light-500);\\n  --ae-surface-overlay: white;\\n  --ae-color-overlay:   rgba(0, 0, 0, 0.4);\\n\\n  /* Borders */\\n  --ae-border-subtle:   rgba(0, 0, 0, 0.08);\\n  --ae-border-default:  rgba(0, 0, 0, 0.15);\\n  --ae-border-hover:    rgba(0, 0, 0, 0.25);\\n  --ae-border-focus:    var(--ae-color-primary);\\n  --ae-border-disabled: rgba(0, 0, 0, 0.06);\\n\\n  /* Focus ring */\\n  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.30);\\n  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);\\n\\n  /* Subtle intent tokens - light context */\\n  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.08);\\n  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.40);\\n  --ae-color-primary-text-emphasis:   var(--ae-blue-700);\\n\\n  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.08);\\n  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.40);\\n  --ae-color-success-text-emphasis:   var(--ae-green-700);\\n\\n  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.08);\\n  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.40);\\n  --ae-color-danger-text-emphasis:    var(--ae-red-700);\\n\\n  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.08);\\n  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.40);\\n  --ae-color-warning-text-emphasis:   var(--ae-yellow-700);\\n\\n  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.08);\\n  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.40);\\n  --ae-color-info-text-emphasis:      var(--ae-cyan-700);\\n\\n  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.08);\\n  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.40);\\n  --ae-color-secondary-text-emphasis: var(--ae-slate-700);\\n\\n  --ae-color-light-bg-subtle:         var(--ae-gray-100);   /* opaque on white: ~#e2e2e2 */\\n  --ae-color-light-border-subtle:     var(--ae-gray-200);   /* opaque on white: ~#c4c4c4 */\\n\\n  --ae-color-dark-bg-subtle:          var(--ae-dark-100);   /* opaque on white: ~#d6d8d9 */\\n  --ae-color-dark-border-subtle:      var(--ae-dark-300);   /* opaque on white: ~#85898c */\\n\\n  /* Component tokens - light defaults */\\n  --ae-action-btn-bg:          var(--ae-gray-200);\\n  --ae-action-btn-bg-hover:    var(--ae-color-primary);\\n  --ae-action-btn-color:       var(--ae-gray-600);\\n  --ae-action-btn-color-hover: white;\\n\\n  --ae-clear-btn-bg-hover:     var(--ae-color-danger);\\n  --ae-clear-btn-color-hover:  white;\\n\\n  --ae-reset-btn-border-radius: var(--ae-radius-xs);\\n  --ae-reset-btn-bg:            var(--ae-action-btn-bg);\\n  --ae-reset-btn-bg-hover:      var(--ae-action-btn-bg-hover);\\n  --ae-reset-btn-color:         var(--ae-action-btn-color);\\n  --ae-reset-btn-color-hover:   var(--ae-action-btn-color-hover);\\n  --ae-reset-btn-transition:    all 0.12s;\\n\\n  --ae-clear-btn-border-radius: var(--ae-radius-xs);\\n  --ae-clear-btn-bg:            var(--ae-action-btn-bg);\\n  --ae-clear-btn-color:         var(--ae-action-btn-color);\\n  --ae-clear-btn-transition:    all 0.12s;\\n}\\n\\n:root,\\n:host {\\n  --ae-size-scale: 1;\\n  --ae-size-base:  calc(1rem * var(--ae-size-scale));                    /* 16px */\\n  --ae-size-xl:    round(calc(var(--ae-size-l) * 1.125), 1px);           /* 23px */\\n  --ae-size-l:     round(calc(var(--ae-size-m) * 1.125 * 1.125), 1px);   /* 20px */\\n  --ae-size-m:     var(--ae-size-base);                                  /* 16px */\\n  --ae-size-s:     round(calc(var(--ae-size-m) / 1.125), 1px);           /* 14px */\\n  --ae-size-xs:    round(calc(var(--ae-size-s) / 1.125), 1px);           /* 12px */\\n  --ae-size-2xs:   round(calc(var(--ae-size-xs) / 1.125), 1px);          /* 11px */\\n  --ae-size-3xs:   round(calc(var(--ae-size-2xs) / 1.125), 1px);         /* 10px */\\n}\\n\\n/* Border-radius tokens - shared across all components */\\n:root,\\n:host {\\n  /**\\n   * Unified border-radius hook for all components.\\n   *\\n   *\\n   * Usage:\\n   *   :root { --ae-border-radius: 0; }       // global: all components square\\n   *   :root { --ae-border-radius: 999px; }   // global: all components pill\\n   *   ae-button { --ae-border-radius: 50%; } // scoped: only buttons circular\\n   *   .sidebar { --ae-border-radius: 8px; }  // scoped: everything inside .sidebar\\n   *\\n   * To restore a component to its own default:\\n   *   ae-card { --ae-border-radius: initial; }\\n   */\\n\\n  --ae-radius-square:  0;\\n  --ae-radius-xs:      2px;\\n  --ae-radius-sm:      4px;\\n  --ae-radius-md:      6px;\\n  --ae-radius-lg:      8px;\\n  --ae-radius-xl:      12px;\\n  --ae-radius-pill:    999px;\\n  --ae-radius-circle:  50%;\\n}\\n\\n/* Layout tokens - defined on :root so all light DOM elements can use them */\\n:root,\\n:host {\\n  --container-max-width: 1280px;\\n  --container-padding-x: 1.5rem;\\n}\\n\\n.theme-dark,\\n:root[theme=\\\"dark\\\"],\\n:host([theme=\\\"dark\\\"]),\\n:host-context([theme=\\\"dark\\\"]) {\\n  color-scheme: dark;\\n\\n  /* Hover / active - slightly gentler on dark backgrounds */\\n  --ae-color-mix-hover:  black 8%;\\n  --ae-color-mix-active: black 16%;\\n\\n  /* Gray UI aliases - darker palette steps for elements on dark background */\\n  --ae-color-gray-dark:     var(--ae-gray-800);\\n  --ae-color-gray:          var(--ae-gray-700);\\n  --ae-color-gray-light:    var(--ae-gray-600);\\n  --ae-color-gray-lighter:  var(--ae-gray-500);\\n  --ae-color-gray-lightest: var(--ae-gray-400);\\n\\n  /* Secondary - deeper base on dark background */\\n  --ae-color-secondary:      var(--ae-slate-700);\\n  --ae-color-secondary-text: var(--ae-slate-300);\\n\\n  /* Text */\\n  --ae-color-text-main:       white;\\n  --ae-color-text-muted:      var(--ae-gray-200);\\n  --ae-color-text-disabled:   var(--ae-gray-500);\\n  --ae-color-text-link:       var(--ae-blue-300);\\n  --ae-color-text-link-hover: var(--ae-blue-200);\\n\\n  /* Surfaces */\\n  --ae-surface-sunken:  var(--ae-gray-900);\\n  --ae-surface-base:    color-mix(in srgb, var(--ae-gray) 27%, black);\\n  --ae-surface-raised:  color-mix(in srgb, var(--ae-gray) 34%, black);\\n  --ae-surface-overlay: color-mix(in srgb, var(--ae-gray) 38%, black);\\n  --ae-color-overlay:   rgba(0, 0, 0, 0.6);\\n\\n  /* Borders */\\n  --ae-border-subtle:   rgba(255, 255, 255, 0.08);\\n  --ae-border-default:  rgba(255, 255, 255, 0.12);\\n  --ae-border-hover:    rgba(255, 255, 255, 0.20);\\n  --ae-border-focus:    var(--ae-color-primary);\\n  --ae-border-disabled: rgba(255, 255, 255, 0.06);\\n\\n  /* Focus ring */\\n  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.25);\\n  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);\\n\\n  /* Subtle intent tokens - dark context (more alpha, lighter text-emphasis) */\\n  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.10);\\n  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.30);\\n  --ae-color-primary-text-emphasis:   var(--ae-blue-300);\\n\\n  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.10);\\n  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.30);\\n  --ae-color-success-text-emphasis:   var(--ae-green-300);\\n\\n  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.10);\\n  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.30);\\n  --ae-color-danger-text-emphasis:    var(--ae-red-300);\\n\\n  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.10);\\n  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.30);\\n  --ae-color-warning-text-emphasis:   var(--ae-yellow-300);\\n\\n  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.10);\\n  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.30);\\n  --ae-color-info-text-emphasis:      var(--ae-cyan-300);\\n\\n  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.10);\\n  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.30);\\n  --ae-color-secondary-text-emphasis: var(--ae-slate-300);\\n\\n  --ae-color-light-bg-subtle:         rgb(from var(--ae-light) r g b / 0.20);\\n  --ae-color-light-border-subtle:     rgb(from var(--ae-light) r g b / 0.25);\\n\\n  --ae-color-dark-bg-subtle:          rgb(from var(--ae-dark) r g b / 0.30);\\n  --ae-color-dark-border-subtle:      rgb(from var(--ae-dark) r g b / 0.50);\\n\\n  /* Component tokens - dark overrides */\\n  --ae-action-btn-bg:          var(--ae-color-gray);\\n  --ae-action-btn-bg-hover:    color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));\\n  --ae-action-btn-color:       var(--ae-gray-400);\\n  --ae-action-btn-color-hover: var(--ae-cyan-300);\\n  --ae-clear-btn-bg-hover:     color-mix(in srgb, var(--ae-red) 25%, var(--ae-gray-800));\\n  --ae-clear-btn-color-hover:  var(--ae-red-300);\\n}\\n\"", "module.exports = \":host {\\n  display: flex;\\n  flex-direction: column;\\n  gap: var(--ae-tabs-gap, 0);\\n  overflow: hidden;\\n  border: 1px solid transparent;\\n  border-radius: var(--ae-border-radius, var(--ae-radius-lg));\\n  background: transparent;\\n}\\n\\n[part=\\\"tab-nav\\\"] {\\n  display: flex;\\n  flex-shrink: 0;\\n}\\n\\n[part=\\\"panels\\\"] {\\n  flex: 1;\\n  overflow: auto;\\n}\\n\\n:host([variant=\\\"filled\\\"]) {\\n  border-color: var(--ae-color-gray);\\n  background: var(--ae-color-gray);\\n}\\n\\n:host([variant=\\\"filled\\\"]) [part=\\\"tab-nav\\\"] {\\n  border-bottom: 1px solid color-mix(in srgb, var(--ae-color-gray), black 15%);\\n}\\n\\n:host([variant=\\\"outlined\\\"]) {\\n  border-color: var(--ae-border-hover);\\n  background: transparent;\\n}\\n\\n:host([variant=\\\"outlined\\\"]) [part=\\\"tab-nav\\\"] {\\n  border-bottom: 1px solid var(--ae-border-hover);\\n}\\n\\n:host([variant=\\\"faint\\\"]) {\\n  border-color: var(--ae-border-default);\\n  background: var(--ae-border-subtle);\\n}\\n\\n:host([variant=\\\"faint\\\"]) [part=\\\"tab-nav\\\"] {\\n  border-bottom: 1px solid var(--ae-border-default);\\n}\\n\\n:host([variant=\\\"subtle\\\"]) {\\n  border-color: transparent;\\n  background: var(--ae-border-subtle);\\n}\\n\\n:host([variant=\\\"subtle\\\"]) [part=\\\"tab-nav\\\"] {\\n  border-bottom: 1px solid transparent;\\n}\\n\\n:host([variant=\\\"text\\\"]) {\\n  border-color: transparent;\\n  background: transparent;\\n}\\n\\n:host([variant=\\\"text\\\"]) [part=\\\"tab-nav\\\"] {\\n  border-bottom: 1px solid transparent;\\n}\\n\"", "module.exports = \":host {\\n  display: inline-flex;\\n  cursor: pointer;\\n}\\n\\nbutton {\\n  display: inline-flex;\\n  align-items: center;\\n  gap: 6px;\\n  padding: 8px 16px;\\n  background: none;\\n  border: none;\\n  border-bottom: 2px solid transparent;\\n  cursor: pointer;\\n  font-size: inherit;\\n  font-family: inherit;\\n  color: var(--ae-tab-color, #909090);\\n  font-size: var(--ae-tab-font-size, inherit);\\n  transition: color 0.15s, border-color 0.15s;\\n  outline: none;\\n  white-space: nowrap;\\n  user-select: none;\\n}\\n\\nbutton:hover {\\n  color: var(--ae-tab-hover-color, var(--ae-color-primary));\\n}\\n\\nbutton:focus-visible {\\n  outline: 2px solid var(--ae-color-primary);\\n  outline-offset: -2px;\\n}\\n\\n:host([active]) button {\\n  color: var(--ae-tab-active-color, var(--ae-color-primary));\\n  border-bottom-color: var(--ae-tab-active-color, var(--ae-color-primary));\\n}\\n\\n:host([disabled]) button {\\n  opacity: 0.4;\\n  cursor: not-allowed;\\n  pointer-events: none;\\n}\\n\"", "module.exports = \":host {\\n  display: none;\\n  padding: var(--ae-tab-panel-padding, 16px 0);\\n}\\n\\n:host([active]) {\\n  display: block;\\n}\\n\"", "export { default, default as Tabs } from './tabs';\nexport { default as Tab } from './tab';\nexport { default as TabPanel } from './tab-panel';\n", "import type { Props } from 'aeico';\nimport styleVariables from '../styles/variables.css';\nimport tabsStyle from '../styles/components/tabs.css';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type Tab from './tab';\nimport type { TabVariant } from './defines';\n\nclass Tabs extends AeicoComponent {\n  static props: Props = {\n    activeIndex: { type: Number },\n    variant: { type: String },\n  };\n\n  declare activeIndex?: number;\n  declare variant?: TabVariant;\n\n  protected static styles = [styleVariables, tabsStyle];\n\n  private _observer: MutationObserver | null = null;\n\n  private get _tabs(): Tab[] {\n    return [...this.children].filter(\n      (el) => el.tagName.toLowerCase() === 'ae-tab',\n    ) as unknown as Tab[];\n  }\n\n  private get _panels(): HTMLElement[] {\n    return [...this.children].filter(\n      (el) => el.tagName.toLowerCase() === 'ae-tab-panel',\n    ) as HTMLElement[];\n  }\n\n  private _getPairs(): [Tab, HTMLElement | null][] {\n    const tabs = this._tabs;\n    const panels = this._panels;\n\n    const idMap = new Map<string, HTMLElement>();\n    for (const panel of panels) {\n      const id = panel.id;\n      if (id) idMap.set(id, panel);\n    }\n\n    const usedPanels = new Set<HTMLElement>();\n    const pairs: [Tab, HTMLElement | null][] = [];\n\n    // First pass: ID-matched tabs\n    for (const tab of tabs) {\n      const panelId = tab.panel;\n      if (panelId) {\n        const panel = idMap.get(panelId) ?? null;\n        if (panel) usedPanels.add(panel);\n        pairs.push([tab, panel]);\n      }\n    }\n\n    // Second pass: position-matched tabs (no panel attr)\n    const unmatchedPanels = panels.filter((p) => !usedPanels.has(p));\n    let posIndex = 0;\n    for (const tab of tabs) {\n      if (!tab.panel) {\n        pairs.push([tab, unmatchedPanels[posIndex] ?? null]);\n        posIndex++;\n      }\n    }\n\n    return pairs;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._observer = new MutationObserver(() => this.update());\n    this._observer.observe(this, { childList: true });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._observer?.disconnect();\n    this._observer = null;\n  }\n\n  protected onUpdated() {\n    this._syncVariant();\n    this._syncActive();\n  }\n\n  private _syncVariant() {\n    const variant = this.variant ?? 'text';\n    this.setAttribute('variant', variant);\n    for (const tab of this._tabs) {\n      tab.setAttribute('variant', variant);\n    }\n  }\n\n  private _handleTabClick = (e: Event) => {\n    const pairs = this._getPairs();\n    const target = e.target as Element;\n    const index = pairs.findIndex(([tab]) => tab === target);\n    if (index !== -1) this.selectTab(index);\n  };\n\n  private _syncActive() {\n    const activeIndex = this.activeIndex ?? 0;\n    const pairs = this._getPairs();\n\n    pairs.forEach(([tab, panel], i) => {\n      const isActive = i === activeIndex;\n      if (isActive) {\n        tab.setAttribute('active', '');\n        panel?.setAttribute('active', '');\n      } else {\n        tab.removeAttribute('active');\n        panel?.removeAttribute('active');\n      }\n    });\n  }\n\n  selectTab(index: number): void {\n    const pairs = this._getPairs();\n    if (index === (this.activeIndex ?? 0) || index >= pairs.length) return;\n    this.activeIndex = index;\n    this.emit('change', { detail: { index } });\n  }\n\n  protected render() {\n    return html(({ nav, div, slot }) => {\n      nav({ part: 'tab-nav', role: 'tablist', '@_tab-click': this._handleTabClick }, () => {\n        slot({ name: 'tab' });\n      });\n      div({ part: 'panels' }, () => {\n        slot();\n      });\n    });\n  }\n}\n\nTabs.define('tabs');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tabs': Tabs;\n  }\n}\n\nexport default Tabs;\n", "import { AeicoElement } from 'aeico';\n\nconst TAG_NAME_PREFIX = 'ae';\n\n/**\n * AeicoComponent is the base class for all built-in Aeico components.\n */\nclass AeicoComponent extends AeicoElement {\n  static define(name: string) {\n    const prefix = `${TAG_NAME_PREFIX}-`;\n\n    const tagName = name.startsWith(prefix) ? name : `${prefix}${name}`;\n\n    super.define(tagName);\n  }\n}\n\nexport default AeicoComponent;\n", "import type { Props } from 'aeico';\nimport tabStyle from '../styles/components/tab.css';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass Tab extends AeicoComponent {\n  static props: Props = {\n    active: { type: Boolean },\n    disabled: { type: Boolean },\n    panel: { type: String },\n  };\n\n  declare active?: boolean;\n  declare disabled?: boolean;\n  declare panel?: string;\n\n  protected static styles = [tabStyle];\n\n  connectedCallback() {\n    this.setAttribute('slot', 'tab');\n    super.connectedCallback();\n  }\n\n  private _handleClick = () => {\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent('_tab-click', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  protected render() {\n    return html(({ button, slot }) => {\n      button(\n        {\n          part: 'tab',\n          type: 'button',\n          role: 'tab',\n          'aria-selected': this.active,\n          'aria-disabled': this.disabled,\n          disabled: this.disabled,\n          '@click': this._handleClick,\n        },\n        () => {\n          slot();\n        },\n      );\n    });\n  }\n}\n\nTab.define('tab');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tab': Tab;\n  }\n}\n\nexport default Tab;\n", "import tabPanelStyle from '../styles/components/tab-panel.css';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass TabPanel extends AeicoComponent {\n  protected static styles = [tabPanelStyle];\n\n  protected render() {\n    return html(({ slot }) => {\n      slot();\n    });\n  }\n}\n\nTabPanel.define('tab-panel');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tab-panel': TabPanel;\n  }\n}\n\nexport default TabPanel;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA,4FAAAA,UAAAC,SAAA;AAAA,IAAAA,QAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA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",
   "names": ["exports", "module", "exports", "module", "exports", "module", "exports", "module", "import_aeico", "styleVariables", "tabsStyle", "import_aeico", "tabStyle", "import_aeico", "tabPanelStyle"]
 }

package/dist/tabs.js

@@ -75,7 +75,7 @@ var variables_default = `:root,
   --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);
   --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);
 
-  /* Gray  (neutral \u2014 base #6e6e6e) */
+  /* Gray  (neutral - base #6e6e6e) */
   --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);
   --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);
   --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);
@@ -86,7 +86,7 @@ var variables_default = `:root,
   --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);
   --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);
 
-  /* Slate  (blue-gray \u2014 base #64748b, used for 'secondary') */
+  /* Slate  (blue-gray - base #64748b, used for 'secondary') */
   --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);
   --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);
   --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);
@@ -122,7 +122,7 @@ var variables_default = `:root,
 
 :root,
 :host {
-  /* Hover / active mix (light default \u2014 overridden in \xA7 6 dark) */
+  /* Hover / active mix (light default - overridden in \xA7 6 dark) */
   --ae-color-mix-hover:  black 10%;
   --ae-color-mix-active: black 20%;
 
@@ -156,7 +156,7 @@ var variables_default = `:root,
   --ae-color-info-active:      color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));
   --ae-color-info-disabled:    color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));
 
-  /* Secondary (Slate) \u2014 base differs per theme, overridden in \xA7 6 dark */
+  /* Secondary (Slate) - base differs per theme, overridden in \xA7 6 dark */
   --ae-color-secondary:        var(--ae-slate-500);
   --ae-color-secondary-hover:  color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));
   --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));
@@ -172,7 +172,7 @@ var variables_default = `:root,
 :host {
   color-scheme: light;
 
-  /* Gray UI aliases \u2014 lighter palette steps for elements on white background */
+  /* Gray UI aliases - lighter palette steps for elements on white background */
   --ae-color-gray-dark:     var(--ae-gray-400);
   --ae-color-gray:          var(--ae-gray-300);
   --ae-color-gray-light:    var(--ae-gray-200);
@@ -204,7 +204,7 @@ var variables_default = `:root,
   --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.30);
   --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);
 
-  /* Subtle intent tokens \u2014 light context */
+  /* Subtle intent tokens - light context */
   --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.08);
   --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.40);
   --ae-color-primary-text-emphasis:   var(--ae-blue-700);
@@ -235,7 +235,7 @@ var variables_default = `:root,
   --ae-color-dark-bg-subtle:          var(--ae-dark-100);   /* opaque on white: ~#d6d8d9 */
   --ae-color-dark-border-subtle:      var(--ae-dark-300);   /* opaque on white: ~#85898c */
 
-  /* Component tokens \u2014 light defaults */
+  /* Component tokens - light defaults */
   --ae-action-btn-bg:          var(--ae-gray-200);
   --ae-action-btn-bg-hover:    var(--ae-color-primary);
   --ae-action-btn-color:       var(--ae-gray-600);
@@ -270,14 +270,12 @@ var variables_default = `:root,
   --ae-size-3xs:   round(calc(var(--ae-size-2xs) / 1.125), 1px);         /* 10px */
 }
 
-/* Border-radius tokens \u2014 shared across all components */
+/* Border-radius tokens - shared across all components */
 :root,
 :host {
   /**
    * Unified border-radius hook for all components.
    *
-   * Not set by default \u2014 each component falls back to its own --ae-radius-*
-   * token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).
    *
    * Usage:
    *   :root { --ae-border-radius: 0; }       // global: all components square
@@ -299,7 +297,7 @@ var variables_default = `:root,
   --ae-radius-circle:  50%;
 }
 
-/* Layout tokens \u2014 defined on :root so all light DOM elements can use them */
+/* Layout tokens - defined on :root so all light DOM elements can use them */
 :root,
 :host {
   --container-max-width: 1280px;
@@ -312,18 +310,18 @@ var variables_default = `:root,
 :host-context([theme="dark"]) {
   color-scheme: dark;
 
-  /* Hover / active \u2014 slightly gentler on dark backgrounds */
+  /* Hover / active - slightly gentler on dark backgrounds */
   --ae-color-mix-hover:  black 8%;
   --ae-color-mix-active: black 16%;
 
-  /* Gray UI aliases \u2014 darker palette steps for elements on dark background */
+  /* Gray UI aliases - darker palette steps for elements on dark background */
   --ae-color-gray-dark:     var(--ae-gray-800);
   --ae-color-gray:          var(--ae-gray-700);
   --ae-color-gray-light:    var(--ae-gray-600);
   --ae-color-gray-lighter:  var(--ae-gray-500);
   --ae-color-gray-lightest: var(--ae-gray-400);
 
-  /* Secondary \u2014 deeper base on dark background */
+  /* Secondary - deeper base on dark background */
   --ae-color-secondary:      var(--ae-slate-700);
   --ae-color-secondary-text: var(--ae-slate-300);
 
@@ -352,7 +350,7 @@ var variables_default = `:root,
   --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.25);
   --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);
 
-  /* Subtle intent tokens \u2014 dark context (more alpha, lighter text-emphasis) */
+  /* Subtle intent tokens - dark context (more alpha, lighter text-emphasis) */
   --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.10);
   --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.30);
   --ae-color-primary-text-emphasis:   var(--ae-blue-300);
@@ -383,7 +381,7 @@ var variables_default = `:root,
   --ae-color-dark-bg-subtle:          rgb(from var(--ae-dark) r g b / 0.30);
   --ae-color-dark-border-subtle:      rgb(from var(--ae-dark) r g b / 0.50);
 
-  /* Component tokens \u2014 dark overrides */
+  /* Component tokens - dark overrides */
   --ae-action-btn-bg:          var(--ae-color-gray);
   --ae-action-btn-bg-hover:    color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));
   --ae-action-btn-color:       var(--ae-gray-400);
@@ -398,19 +396,12 @@ var tabs_default = ':host {\n  display: flex;\n  flex-direction: column;\n  gap:
 
 // src/aeico-component.ts
 import { AeicoElement } from "aeico";
-
-// src/utils.ts
-function toKebab(str) {
-  const cleaned = str.replace(/^[_\d]+/, "");
-  return cleaned.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-}
-
-// src/aeico-component.ts
 var TAG_NAME_PREFIX = "ae";
 var AeicoComponent = class extends AeicoElement {
-  static register(name) {
-    const tagName = name || `${TAG_NAME_PREFIX}-${this.tagName || toKebab(this.name)}`;
-    super.register(tagName);
+  static define(name) {
+    const prefix = `${TAG_NAME_PREFIX}-`;
+    const tagName = name.startsWith(prefix) ? name : `${prefix}${name}`;
+    super.define(tagName);
   }
 };
 var aeico_component_default = AeicoComponent;
@@ -520,7 +511,7 @@ var Tabs = class extends aeico_component_default {
     });
   }
 };
-Tabs.register();
+Tabs.define("tabs");
 var tabs_default2 = Tabs;
 
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/tab.css
@@ -567,7 +558,7 @@ var Tab = class extends aeico_component_default {
     });
   }
 };
-Tab.register();
+Tab.define("tab");
 var tab_default2 = Tab;
 
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/tab-panel.css
@@ -583,7 +574,7 @@ var TabPanel = class extends aeico_component_default {
     });
   }
 };
-TabPanel.register();
+TabPanel.define("tab-panel");
 var tab_panel_default2 = TabPanel;
 export {
   tab_default2 as Tab,