aeico-components 0.1.3 → 0.1.5

package/dist/index.cjs

@@ -1,4078 +1,44 @@
 "use strict";
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const aeico = require("aeico");
-const aeicoLocalize = require("aeico-localize");
-const SVG_NS = "http://www.w3.org/2000/svg";
-function toKebab(str) {
-  const cleaned = str.replace(/^[_\d]+/, "");
-  return cleaned.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-}
-const TAG_NAME_PREFIX = "ae";
-class AeicoComponent extends aeico.AeicoElement {
-  static register(name) {
-    const tagName = name || `${TAG_NAME_PREFIX}-${this.tagName || toKebab(this.name)}`;
-    super.register(tagName);
-  }
-}
-class AeicoField extends AeicoComponent {
-  constructor() {
-    super(...arguments);
-    /**
-     * The underlying form control element (input, select, etc.)
-     * Subclasses should set this to their specific element
-     */
-    __publicField(this, "fieldElement", null);
-    __publicField(this, "resetBtn", null);
-    __publicField(this, "clearBtn", null);
-    __publicField(this, "boundOnChange", () => this.setValue(this.getValue(), { silent: false, action: "change" }));
-    __publicField(this, "boundOnReset", () => this.onReset());
-    __publicField(this, "boundOnClear", () => this.onClear());
-  }
-  /**
-   * Lifecycle: Component connected to DOM
-   */
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  /**
-   * Lifecycle: Component disconnected from DOM
-   */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-  }
-  /**
-   * Render action buttons (clear/reset) using this.builder.
-   * Must be called from within a build() callback.
-   */
-  renderActionButtons(force = false) {
-    this.renderClearButton(force);
-    this.renderResetButton(force);
-  }
-  renderResetButton(force = false) {
-    const { button } = aeico.tags;
-    if (force || this.resettable) {
-      this.resetBtn = button({
-        className: "reset-btn",
-        textContent: this.resetText || "↺",
-        title: aeicoLocalize.t("buttons.reset", "↺"),
-        "@click": this.boundOnReset
-      });
-    }
-  }
-  renderClearButton(force = false) {
-    const { button } = aeico.tags;
-    if (force || this.clearable) {
-      this.clearBtn = button({
-        className: "clear-btn",
-        textContent: this.clearText || "✕",
-        title: aeicoLocalize.t("buttons.clear", "✕"),
-        "@click": this.boundOnClear
-      });
-    }
-  }
-  /**
-   * Watcher for disabled property
-   */
-  onDisabledChanged(newValue) {
-    if (this.fieldElement) {
-      this.fieldElement.disabled = Boolean(newValue);
-    }
-  }
-  /**
-   * Render the field component
-   * Override in subclass to provide custom rendering
-   */
-  render() {
-  }
-  /**
-   * Get current value from the field element
-   * Default implementation returns the value property of fieldElement
-   * Override in subclasses if needed (e.g., checkbox uses checked instead of value)
-   *
-   * @returns Current field value
-   */
-  getValue() {
-    var _a2;
-    return ((_a2 = this.fieldElement) == null ? void 0 : _a2.value) || "";
-  }
-  /**
-   * Write value to the underlying UI element and sync props
-   * Subclasses must override this to update their specific UI element
-   *
-   * @param _value New value to write to the element
-   */
-  writeValue(_value2) {
-  }
-  /**
-   * Get event payload for change events
-   * Override in subclasses to customize event data (e.g., { checked, oldChecked } for checkbox)
-   *
-   * @param value New value
-   * @param oldValue Previous value
-   * @param action Action type
-   * @returns Event payload object
-   */
-  getEventPayload(value, oldValue, action) {
-    return { value, oldValue, action };
-  }
-  /**
-   * Update field value programmatically (internal method)
-   * Subclasses should provide type-safe public wrappers (e.g., change() method)
-   *
-   * @param value New value
-   * @param options.silent If true, won't emit change event (default: true)
-   * @param options.action Action type for the event (default: 'change')
-   */
-  setValue(value, options) {
-    const oldValue = this.getValue();
-    this.value = value;
-    this.writeValue(value);
-    if ((options == null ? void 0 : options.silent) === false) {
-      const payload = this.getEventPayload(value, oldValue, options.action || "change");
-      this.emit("change", { detail: payload });
-    }
-  }
-  /**
-   * Reset field to specified value or default value
-   *
-   * @param value Value to reset to, defaults to defaultValue prop
-   * @param options.silent If false, will emit reset event (default: true)
-   */
-  reset(value, options) {
-    const resetValue = value !== void 0 ? value : this.defaultValue;
-    this.setValue(resetValue, { ...options, action: "reset" });
-  }
-  /**
-   * Clear the field value
-   *
-   * @param options.silent If false, will emit clear event (default: true)
-   */
-  clear(options) {
-    this.setValue("", { ...options, action: "clear" });
-  }
-  /**
-   * Handle clear button click
-   * Clears the field and dispatches event
-   */
-  onClear() {
-    this.clear({ silent: false });
-  }
-  /**
-   * Handle reset button click
-   * Resets to default value and dispatches event
-   */
-  onReset() {
-    this.reset(void 0, { silent: false });
-  }
-}
-/**
- * Define base field properties (extends AeicoElement properties)
- */
-__publicField(AeicoField, "props", {
-  value: { type: String },
-  defaultValue: { type: String },
-  resettable: { type: Boolean },
-  resetText: { type: String },
-  clearable: { type: Boolean },
-  clearText: { type: String },
-  size: { type: String },
-  disabled: { type: Boolean }
-});
-/**
- * Property watchers
- */
-__publicField(AeicoField, "watchers", {
-  disabled: "onDisabledChanged"
-});
-const styleVariables = `:root,
-:host {
-  --ae-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
-    "Noto Sans", "Liberation Sans", Arial, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
-    "Liberation Mono", "Courier New", monospace;
-  font-family: var(--ae-font-sans-serif);
-  --blue:   #0e639c;
-  --green:  #28a745;
-  --red:    #dc3545;
-  --yellow: #ffc107;
-  --cyan:   #17a2b8;
-  --gray:   #6e6e6e;
-  --slate:  #64748b;
-  --dark:   #343a40;
-  --light:  #f8f9fa;
-}
-
-:root,
-:host {
-  /* Blue */
-  --blue-100: color-mix(in srgb, var(--blue) 20%, white);
-  --blue-200: color-mix(in srgb, var(--blue) 40%, white);
-  --blue-300: color-mix(in srgb, var(--blue) 60%, white);
-  --blue-400: color-mix(in srgb, var(--blue) 80%, white);
-  --blue-500: var(--blue);
-  --blue-600: color-mix(in srgb, var(--blue) 80%, black);
-  --blue-700: color-mix(in srgb, var(--blue) 60%, black);
-  --blue-800: color-mix(in srgb, var(--blue) 40%, black);
-  --blue-900: color-mix(in srgb, var(--blue) 20%, black);
-
-  /* Green */
-  --green-100: color-mix(in srgb, var(--green) 20%, white);
-  --green-200: color-mix(in srgb, var(--green) 40%, white);
-  --green-300: color-mix(in srgb, var(--green) 60%, white);
-  --green-400: color-mix(in srgb, var(--green) 80%, white);
-  --green-500: var(--green);
-  --green-600: color-mix(in srgb, var(--green) 80%, black);
-  --green-700: color-mix(in srgb, var(--green) 60%, black);
-  --green-800: color-mix(in srgb, var(--green) 40%, black);
-  --green-900: color-mix(in srgb, var(--green) 20%, black);
-
-  /* Red */
-  --red-100: color-mix(in srgb, var(--red) 20%, white);
-  --red-200: color-mix(in srgb, var(--red) 40%, white);
-  --red-300: color-mix(in srgb, var(--red) 60%, white);
-  --red-400: color-mix(in srgb, var(--red) 80%, white);
-  --red-500: var(--red);
-  --red-600: color-mix(in srgb, var(--red) 80%, black);
-  --red-700: color-mix(in srgb, var(--red) 60%, black);
-  --red-800: color-mix(in srgb, var(--red) 40%, black);
-  --red-900: color-mix(in srgb, var(--red) 20%, black);
-
-  /* Yellow */
-  --yellow-100: color-mix(in srgb, var(--yellow) 20%, white);
-  --yellow-200: color-mix(in srgb, var(--yellow) 40%, white);
-  --yellow-300: color-mix(in srgb, var(--yellow) 60%, white);
-  --yellow-400: color-mix(in srgb, var(--yellow) 80%, white);
-  --yellow-500: var(--yellow);
-  --yellow-600: color-mix(in srgb, var(--yellow) 80%, black);
-  --yellow-700: color-mix(in srgb, var(--yellow) 60%, black);
-  --yellow-800: color-mix(in srgb, var(--yellow) 40%, black);
-  --yellow-900: color-mix(in srgb, var(--yellow) 20%, black);
-
-  /* Cyan */
-  --cyan-100: color-mix(in srgb, var(--cyan) 20%, white);
-  --cyan-200: color-mix(in srgb, var(--cyan) 40%, white);
-  --cyan-300: color-mix(in srgb, var(--cyan) 60%, white);
-  --cyan-400: color-mix(in srgb, var(--cyan) 80%, white);
-  --cyan-500: var(--cyan);
-  --cyan-600: color-mix(in srgb, var(--cyan) 80%, black);
-  --cyan-700: color-mix(in srgb, var(--cyan) 60%, black);
-  --cyan-800: color-mix(in srgb, var(--cyan) 40%, black);
-  --cyan-900: color-mix(in srgb, var(--cyan) 20%, black);
-
-  /* Gray  (neutral — base #6e6e6e) */
-  --gray-100: color-mix(in srgb, var(--gray) 20%, white);
-  --gray-200: color-mix(in srgb, var(--gray) 40%, white);
-  --gray-300: color-mix(in srgb, var(--gray) 60%, white);
-  --gray-400: color-mix(in srgb, var(--gray) 80%, white);
-  --gray-500: var(--gray);
-  --gray-600: color-mix(in srgb, var(--gray) 80%, black);
-  --gray-700: color-mix(in srgb, var(--gray) 60%, black);
-  --gray-800: color-mix(in srgb, var(--gray) 40%, black);
-  --gray-900: color-mix(in srgb, var(--gray) 20%, black);
-
-  /* Slate  (blue-gray — base #64748b, used for 'secondary') */
-  --slate-100: color-mix(in srgb, var(--slate) 20%, white);
-  --slate-200: color-mix(in srgb, var(--slate) 40%, white);
-  --slate-300: color-mix(in srgb, var(--slate) 60%, white);
-  --slate-400: color-mix(in srgb, var(--slate) 80%, white);
-  --slate-500: var(--slate);
-  --slate-600: color-mix(in srgb, var(--slate) 80%, black);
-  --slate-700: color-mix(in srgb, var(--slate) 60%, black);
-  --slate-800: color-mix(in srgb, var(--slate) 40%, black);
-  --slate-900: color-mix(in srgb, var(--slate) 20%, black);
-
-  /* Dark  (base #343a40) */
-  --dark-100: color-mix(in srgb, var(--dark) 20%, white);
-  --dark-200: color-mix(in srgb, var(--dark) 40%, white);
-  --dark-300: color-mix(in srgb, var(--dark) 60%, white);
-  --dark-400: color-mix(in srgb, var(--dark) 80%, white);
-  --dark-500: var(--dark);
-  --dark-600: color-mix(in srgb, var(--dark) 80%, black);
-  --dark-700: color-mix(in srgb, var(--dark) 60%, black);
-  --dark-800: color-mix(in srgb, var(--dark) 40%, black);
-  --dark-900: color-mix(in srgb, var(--dark) 20%, black);
-
-  /* Light  (base #f8f9fa) */
-  --light-100: color-mix(in srgb, var(--light) 20%, white);
-  --light-200: color-mix(in srgb, var(--light) 40%, white);
-  --light-300: color-mix(in srgb, var(--light) 60%, white);
-  --light-400: color-mix(in srgb, var(--light) 80%, white);
-  --light-500: var(--light);
-  --light-600: color-mix(in srgb, var(--light) 80%, black);
-  --light-700: color-mix(in srgb, var(--light) 60%, black);
-  --light-800: color-mix(in srgb, var(--light) 40%, black);
-  --light-900: color-mix(in srgb, var(--light) 20%, black);
-}
-
-:root,
-:host {
-  /* Hover / active mix (light default — overridden in § 6 dark) */
-  --color-mix-hover:  black 10%;
-  --color-mix-active: black 20%;
-
-  /* Primary (Blue) */
-  --color-primary:          var(--blue-500);
-  --color-primary-hover:    color-mix(in srgb, var(--color-primary), var(--color-mix-hover));
-  --color-primary-active:   color-mix(in srgb, var(--color-primary), var(--color-mix-active));
-  --color-primary-disabled: color-mix(in srgb, var(--blue) 50%, var(--gray-500));
-
-  /* Success (Green) */
-  --color-success:          var(--green-500);
-  --color-success-hover:    color-mix(in srgb, var(--color-success), var(--color-mix-hover));
-  --color-success-active:   color-mix(in srgb, var(--color-success), var(--color-mix-active));
-  --color-success-disabled: color-mix(in srgb, var(--green) 50%, var(--gray-500));
-
-  /* Danger (Red) */
-  --color-danger:           var(--red-500);
-  --color-danger-hover:     color-mix(in srgb, var(--color-danger), var(--color-mix-hover));
-  --color-danger-active:    color-mix(in srgb, var(--color-danger), var(--color-mix-active));
-  --color-danger-disabled:  color-mix(in srgb, var(--red) 50%, var(--gray-500));
-
-  /* Warning (Yellow) */
-  --color-warning:          var(--yellow-500);
-  --color-warning-hover:    color-mix(in srgb, var(--color-warning), var(--color-mix-hover));
-  --color-warning-active:   color-mix(in srgb, var(--color-warning), var(--color-mix-active));
-  --color-warning-disabled: color-mix(in srgb, var(--yellow) 50%, var(--gray-500));
-
-  /* Info (Cyan) */
-  --color-info:             var(--cyan-500);
-  --color-info-hover:       color-mix(in srgb, var(--color-info), var(--color-mix-hover));
-  --color-info-active:      color-mix(in srgb, var(--color-info), var(--color-mix-active));
-  --color-info-disabled:    color-mix(in srgb, var(--cyan) 50%, var(--gray-500));
-
-  /* Secondary (Slate) — base differs per theme, overridden in § 6 dark */
-  --color-secondary:        var(--slate-500);
-  --color-secondary-hover:  color-mix(in srgb, var(--color-secondary), var(--color-mix-hover));
-  --color-secondary-active: color-mix(in srgb, var(--color-secondary), var(--color-mix-active));
-  --color-secondary-text:   var(--slate-700);
-
-  /* On-solid — text color on filled (saturated) backgrounds.
-     Fixed white: blue/green/red/cyan buttons always have white text.
-     Does NOT follow --color-text-main. */
-  --color-on-solid: white;
-}
-
-
-.theme-light,
-:root[theme="light"],
-:host([theme="light"]),
-:host-context([theme="light"]),
-:where(:root),
-:host {
-  color-scheme: light;
-
-  /* Gray UI aliases — lighter palette steps for elements on white background */
-  --color-gray-dark:     var(--gray-400);
-  --color-gray:          var(--gray-300);
-  --color-gray-light:    var(--gray-200);
-  --color-gray-lighter:  var(--gray-100);
-  --color-gray-lightest: color-mix(in srgb, var(--gray) 10%, white);
-
-  /* Text */
-  --color-text-main:       var(--dark-700);
-  --color-text-muted:      var(--gray-600);
-  --color-text-disabled:   var(--gray-300);
-  --color-text-link:       var(--blue-500);
-  --color-text-link-hover: var(--blue-700);
-
-  /* Surfaces */
-  --surface-sunken:  var(--light-500);
-  --surface-base:    white;
-  --surface-raised:  var(--light-500);
-  --surface-overlay: white;
-  --color-overlay:   rgba(0, 0, 0, 0.4);
-
-  /* Borders */
-  --border-subtle:   rgba(0, 0, 0, 0.08);
-  --border-default:  rgba(0, 0, 0, 0.15);
-  --border-hover:    rgba(0, 0, 0, 0.25);
-  --border-focus:    var(--color-primary);
-  --border-disabled: rgba(0, 0, 0, 0.06);
-
-  /* Focus ring */
-  --focus-ring:    rgb(from var(--blue) r g b / 0.30);
-  --focus-ring-sm: rgb(from var(--blue) r g b / 0.15);
-
-  /* Subtle intent tokens — light context */
-  --color-primary-bg-subtle:       rgb(from var(--blue) r g b / 0.08);
-  --color-primary-border-subtle:   rgb(from var(--blue) r g b / 0.40);
-  --color-primary-text-emphasis:   var(--blue-700);
-
-  --color-success-bg-subtle:       rgb(from var(--green) r g b / 0.08);
-  --color-success-border-subtle:   rgb(from var(--green) r g b / 0.40);
-  --color-success-text-emphasis:   var(--green-700);
-
-  --color-danger-bg-subtle:        rgb(from var(--red) r g b / 0.08);
-  --color-danger-border-subtle:    rgb(from var(--red) r g b / 0.40);
-  --color-danger-text-emphasis:    var(--red-700);
-
-  --color-warning-bg-subtle:       rgb(from var(--yellow) r g b / 0.08);
-  --color-warning-border-subtle:   rgb(from var(--yellow) r g b / 0.40);
-  --color-warning-text-emphasis:   var(--yellow-700);
-
-  --color-info-bg-subtle:          rgb(from var(--cyan) r g b / 0.08);
-  --color-info-border-subtle:      rgb(from var(--cyan) r g b / 0.40);
-  --color-info-text-emphasis:      var(--cyan-700);
-
-  --color-secondary-bg-subtle:     rgb(from var(--slate) r g b / 0.08);
-  --color-secondary-border-subtle: rgb(from var(--slate) r g b / 0.40);
-  --color-secondary-text-emphasis: var(--slate-700);
-
-  --color-light-bg-subtle:         var(--gray-100);   /* opaque on white: ~#e2e2e2 */
-  --color-light-border-subtle:     var(--gray-200);   /* opaque on white: ~#c4c4c4 */
-
-  --color-dark-bg-subtle:          var(--dark-100);   /* opaque on white: ~#d6d8d9 */
-  --color-dark-border-subtle:      var(--dark-300);   /* opaque on white: ~#85898c */
-
-  /* Component tokens — light defaults */
-  --action-btn-bg:          var(--gray-200);
-  --action-btn-bg-hover:    var(--color-primary);
-  --action-btn-color:       var(--gray-600);
-  --action-btn-color-hover: white;
-
-  --clear-btn-bg-hover:     var(--color-danger);
-  --clear-btn-color-hover:  white;
-
-  --reset-btn-border-radius: 2px;
-  --reset-btn-bg:            var(--action-btn-bg);
-  --reset-btn-bg-hover:      var(--action-btn-bg-hover);
-  --reset-btn-color:         var(--action-btn-color);
-  --reset-btn-color-hover:   var(--action-btn-color-hover);
-  --reset-btn-transition:    all 0.12s;
-
-  --clear-btn-border-radius: 2px;
-  --clear-btn-bg:            var(--action-btn-bg);
-  --clear-btn-color:         var(--action-btn-color);
-  --clear-btn-transition:    all 0.12s;
-}
-
-:root,
-:host {
-  --size-scale: 1;
-  --size-base:  calc(1rem * var(--size-scale));                    /* 16px */
-  --size-xl:    round(calc(var(--size-l) * 1.125), 1px);           /* 23px */
-  --size-l:     round(calc(var(--size-m) * 1.125 * 1.125), 1px);   /* 20px */
-  --size-m:     var(--size-base);                                  /* 16px */
-  --size-s:     round(calc(var(--size-m) / 1.125), 1px);           /* 14px */
-  --size-xs:    round(calc(var(--size-s) / 1.125), 1px);           /* 12px */
-  --size-2xs:   round(calc(var(--size-xs) / 1.125), 1px);          /* 11px */
-  --size-3xs:   round(calc(var(--size-2xs) / 1.125), 1px);         /* 10px */
-}
-
-/* Layout tokens — defined on :root so all light DOM elements can use them */
-:root,
-:host {
-  --container-max-width: 1280px;
-  --container-padding-x: 1.5rem;
-}
-
-.theme-dark,
-:root[theme="dark"],
-:host([theme="dark"]),
-:host-context([theme="dark"]) {
-  color-scheme: dark;
-
-  /* Hover / active — slightly gentler on dark backgrounds */
-  --color-mix-hover:  black 8%;
-  --color-mix-active: black 16%;
-
-  /* Gray UI aliases — darker palette steps for elements on dark background */
-  --color-gray-dark:     var(--gray-800);
-  --color-gray:          var(--gray-700);
-  --color-gray-light:    var(--gray-600);
-  --color-gray-lighter:  var(--gray-500);
-  --color-gray-lightest: var(--gray-400);
-
-  /* Secondary — deeper base on dark background */
-  --color-secondary:      var(--slate-700);
-  --color-secondary-text: var(--slate-300);
-
-  /* Text */
-  --color-text-main:       white;
-  --color-text-muted:      var(--gray-200);
-  --color-text-disabled:   var(--gray-500);
-  --color-text-link:       var(--blue-300);
-  --color-text-link-hover: var(--blue-200);
-
-  /* Surfaces */
-  --surface-sunken:  var(--gray-900);
-  --surface-base:    color-mix(in srgb, var(--gray) 27%, black);
-  --surface-raised:  color-mix(in srgb, var(--gray) 34%, black);
-  --surface-overlay: color-mix(in srgb, var(--gray) 38%, black);
-  --color-overlay:   rgba(0, 0, 0, 0.6);
-
-  /* Borders */
-  --border-subtle:   rgba(255, 255, 255, 0.08);
-  --border-default:  rgba(255, 255, 255, 0.12);
-  --border-hover:    rgba(255, 255, 255, 0.20);
-  --border-focus:    var(--color-primary);
-  --border-disabled: rgba(255, 255, 255, 0.06);
-
-  /* Focus ring */
-  --focus-ring:    rgb(from var(--blue) r g b / 0.25);
-  --focus-ring-sm: rgb(from var(--blue) r g b / 0.10);
-
-  /* Subtle intent tokens — dark context (more alpha, lighter text-emphasis) */
-  --color-primary-bg-subtle:       rgb(from var(--blue) r g b / 0.10);
-  --color-primary-border-subtle:   rgb(from var(--blue) r g b / 0.30);
-  --color-primary-text-emphasis:   var(--blue-300);
-
-  --color-success-bg-subtle:       rgb(from var(--green) r g b / 0.10);
-  --color-success-border-subtle:   rgb(from var(--green) r g b / 0.30);
-  --color-success-text-emphasis:   var(--green-300);
-
-  --color-danger-bg-subtle:        rgb(from var(--red) r g b / 0.10);
-  --color-danger-border-subtle:    rgb(from var(--red) r g b / 0.30);
-  --color-danger-text-emphasis:    var(--red-300);
-
-  --color-warning-bg-subtle:       rgb(from var(--yellow) r g b / 0.10);
-  --color-warning-border-subtle:   rgb(from var(--yellow) r g b / 0.30);
-  --color-warning-text-emphasis:   var(--yellow-300);
-
-  --color-info-bg-subtle:          rgb(from var(--cyan) r g b / 0.10);
-  --color-info-border-subtle:      rgb(from var(--cyan) r g b / 0.30);
-  --color-info-text-emphasis:      var(--cyan-300);
-
-  --color-secondary-bg-subtle:     rgb(from var(--slate) r g b / 0.10);
-  --color-secondary-border-subtle: rgb(from var(--slate) r g b / 0.30);
-  --color-secondary-text-emphasis: var(--slate-300);
-
-  --color-light-bg-subtle:         rgb(from var(--light) r g b / 0.20);
-  --color-light-border-subtle:     rgb(from var(--light) r g b / 0.25);
-
-  --color-dark-bg-subtle:          rgb(from var(--dark) r g b / 0.30);
-  --color-dark-border-subtle:      rgb(from var(--dark) r g b / 0.50);
-
-  /* Component tokens — dark overrides */
-  --action-btn-bg:          var(--color-gray);
-  --action-btn-bg-hover:    color-mix(in srgb, var(--blue) 25%, var(--gray-800));
-  --action-btn-color:       var(--gray-400);
-  --action-btn-color-hover: var(--cyan-300);
-  --clear-btn-bg-hover:     color-mix(in srgb, var(--red) 25%, var(--gray-800));
-  --clear-btn-color-hover:  var(--red-300);
-}
-`;
-const sizeCSS = ':host([size="xs"]) { font-size: var(--size-xs); }\n:host([size="sm"]) { font-size: var(--size-s); }\n:host([size="md"]) { font-size: var(--size-m); }\n:host([size="lg"]) { font-size: var(--size-l); }\n:host([size="xl"]) { font-size: var(--size-xl); }\n:host([size="3xs"]) { font-size: var(--size-3xs); }\n:host([size="2xs"]) { font-size: var(--size-2xs); }\n';
-const style$a = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--size-base);\n\n  /* Layout variables */\n  --input-field-gap: 4px;\n  \n  /* Input element variables */\n  --input-font-size: 1em;\n  --input-padding: 0.333em 0.583em;\n  --input-border-width: 1px;\n  --input-border-radius: 2px;\n  --input-border-color: var(--border-subtle);\n  --input-border-color-hover: var(--border-default);\n  --input-border-color-focus: var(--border-focus);\n  --input-bg: var(--surface-base);\n  --input-bg-hover: var(--surface-raised);\n  --input-bg-focus: var(--surface-raised);\n  --input-color: var(--color-text-muted);\n  --input-placeholder-color: var(--color-text-disabled);\n  --input-transition: border-color 0.12s, background 0.12s;\n}\n\n.input-container {\n  display: flex;\n  align-items: center;\n  gap: var(--input-field-gap);\n  width: 100%;\n}\n\ninput {\n  flex: 1;\n  min-width: 0;\n  font-size: var(--input-font-size);\n  padding: var(--input-padding);\n  border: var(--input-border-width) solid var(--input-border-color);\n  border-radius: var(--input-border-radius);\n  background: var(--input-bg);\n  color: var(--input-color);\n  transition: var(--input-transition);\n}\n\ninput::placeholder {\n  color: var(--input-placeholder-color);\n}\n\ninput:focus {\n  outline: none;\n  border-color: var(--input-border-color-focus);\n  background: var(--input-bg-focus);\n}\n\ninput:hover:not(:focus) {\n  border-color: var(--input-border-color-hover);\n  background: var(--input-bg-hover);\n}\n\ninput:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Clear button styles */\n.clear-btn {\n  width: 1.333em;\n  height: 1.333em;\n  border: none;\n  border-radius: var(--clear-btn-border-radius);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--clear-btn-bg);\n  color: var(--clear-btn-color);\n  transition: var(--clear-btn-transition);\n  flex-shrink: 0;\n  line-height: 1;\n}\n\n.clear-btn:hover {\n  background: var(--clear-btn-bg-hover);\n  color: var(--clear-btn-color-hover);\n}\n\n/* Reset button styles */\n.reset-btn {\n  width: 1.333em;\n  height: 1.333em;\n  border: none;\n  border-radius: var(--reset-btn-border-radius);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--reset-btn-bg);\n  color: var(--reset-btn-color);\n  transition: var(--reset-btn-transition);\n  flex-shrink: 0;\n  line-height: 1;\n}\n\n.reset-btn:hover {\n  background: var(--reset-btn-bg-hover);\n  color: var(--reset-btn-color-hover);\n}\n\n\n\n";
-class TextInput extends AeicoField {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "fieldElement", null);
-  }
-  render() {
-    return aeico.html(({ div, input }) => {
-      div({ className: "input-container" }, () => {
-        this.fieldElement = input({
-          type: this.type || "text",
-          placeholder: this.placeholder || "",
-          "@input": this.boundOnChange
-        });
-        this.renderActionButtons();
-      });
-      if (this.fieldElement && this.value != null) {
-        this.fieldElement.value = String(this.value);
-      }
-      this.updateClearButtonVisibility();
-    });
-  }
-  /**
-   * Update clear button visibility based on input value
-   */
-  updateClearButtonVisibility() {
-    if (this.clearBtn && this.fieldElement) {
-      const hasValue = this.fieldElement.value.length > 0;
-      this.clearBtn.style.display = hasValue ? "" : "none";
-    }
-  }
-  /**
-   * Write value to the input element (DOM only)
-   */
-  writeValue(value) {
-    const strValue = String(value || "");
-    if (this.fieldElement) {
-      this.fieldElement.value = strValue;
-    }
-    this.updateClearButtonVisibility();
-  }
-}
-__publicField(TextInput, "tagName", "text-input");
-__publicField(TextInput, "props", {
-  placeholder: { type: String },
-  type: { type: String }
-});
-__publicField(TextInput, "styles", [styleVariables, sizeCSS, style$a]);
-TextInput.register();
-const style$9 = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--size-base);\n\n  /* Layout variables */\n  --select-field-gap: 2px;\n\n  /* Trigger variables */\n  --select-font-size: 1em;\n  --select-padding: 0.333em 0.583em;\n  --select-border-width: 1px;\n  --select-border-radius: 2px;\n  --select-border-color: var(--border-subtle);\n  --select-border-color-hover: var(--border-default);\n  --select-border-color-focus: var(--border-focus);\n  --select-bg: var(--surface-base);\n  --select-bg-hover: var(--surface-raised);\n  --select-bg-focus: var(--surface-raised);\n  --select-color: var(--color-text-muted);\n  --select-transition: border-color 0.12s, background 0.12s;\n\n  /* Arrow */\n  --select-arrow-color: var(--color-text-muted);\n  --select-arrow-size: 0.75em;\n\n  /* Dropdown */\n  --select-dropdown-bg: var(--surface-overlay);\n  --select-dropdown-border: var(--border-default);\n  --select-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  --select-dropdown-border-radius: 2px;\n  --select-dropdown-max-height: 240px;\n  --select-dropdown-z-index: 1000;\n}\n\n.container {\n  display: flex;\n  align-items: center;\n  gap: var(--select-field-gap);\n  width: 100%;\n  position: relative;\n}\n\n.trigger {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 0.333em;\n  font-size: var(--select-font-size);\n  padding: var(--select-padding);\n  border: var(--select-border-width) solid var(--select-border-color);\n  border-radius: var(--select-border-radius);\n  background: var(--select-bg);\n  color: var(--select-color);\n  cursor: pointer;\n  transition: var(--select-transition);\n  user-select: none;\n  outline: none;\n  box-sizing: border-box;\n}\n\n.trigger:hover:not(.disabled) {\n  border-color: var(--select-border-color-hover);\n  background: var(--select-bg-hover);\n}\n\n.trigger.open {\n  border-color: var(--select-border-color-focus);\n  background: var(--select-bg-focus);\n}\n\n.trigger.disabled {\n  opacity: 0.5;\n  cursor: default;\n  pointer-events: none;\n}\n\n.value {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.placeholder {\n  color: var(--color-text-disabled);\n}\n\n.selected-list {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  align-items: center;\n  padding: 2px 0;\n}\n\n/* Non-expandable (default): single-row, clip overflow */\n.trigger:has(.selected-list--clipped) {\n  flex-wrap: nowrap;\n}\n\n.selected-list--clipped {\n  flex-wrap: nowrap;\n  overflow: hidden;\n}\n\n.overflow-indicator {\n  flex-shrink: 0;\n  align-self: center;\n  padding: 1px 6px;\n  background: color-mix(in srgb, var(--color-primary) 12%, transparent);\n  color: var(--color-primary);\n  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);\n  border-radius: 3px;\n  font-size: 0.82em;\n  line-height: 1.6;\n  cursor: default;\n  user-select: none;\n}\n\n.arrow {\n  flex-shrink: 0;\n  align-self: center;\n  font-size: var(--select-arrow-size);\n  color: var(--select-arrow-color);\n  transition: transform 0.12s;\n  pointer-events: none;\n  line-height: 1;\n}\n\n.trigger.open .arrow {\n  transform: rotate(180deg);\n}\n\n.dropdown {\n  display: none;\n  position: absolute;\n  z-index: var(--select-dropdown-z-index);\n  background: var(--select-dropdown-bg);\n  border: 1px solid var(--select-dropdown-border);\n  border-radius: var(--select-dropdown-border-radius);\n  box-shadow: var(--select-dropdown-shadow);\n  max-height: var(--select-dropdown-max-height);\n  overflow-y: auto;\n  min-width: 100%;\n  box-sizing: border-box;\n}\n\n.dropdown.open {\n  display: block;\n}\n\n.dropdown.position-bottom {\n  top: 100%;\n  left: 0;\n  margin-top: 2px;\n}\n\n.dropdown.position-top {\n  bottom: 100%;\n  left: 0;\n  margin-bottom: 2px;\n}\n\n.dropdown.position-left {\n  right: 100%;\n  top: 0;\n  margin-right: 2px;\n}\n\n.dropdown.position-right {\n  left: 100%;\n  top: 0;\n  margin-left: 2px;\n}\n\n.clear-btn {\n  width: 1.333em;\n  height: 1.333em;\n  border: none;\n  border-radius: var(--clear-btn-border-radius);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--clear-btn-bg);\n  color: var(--clear-btn-color);\n  transition: var(--clear-btn-transition);\n  flex-shrink: 0;\n  line-height: 1;\n}\n\n.clear-btn:hover {\n  background: var(--clear-btn-bg-hover);\n  color: var(--clear-btn-color-hover);\n}\n\n.reset-btn {\n  width: 1.333em;\n  height: 1.333em;\n  border: none;\n  border-radius: var(--reset-btn-border-radius);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--reset-btn-bg);\n  color: var(--reset-btn-color);\n  transition: var(--reset-btn-transition);\n  flex-shrink: 0;\n}\n\n.reset-btn:hover {\n  background: var(--reset-btn-bg-hover);\n  color: var(--reset-btn-color-hover);\n}\n";
-const colorCSS = ':host {\n  --color-solid:           var(--color-gray);\n  --color-solid-hover:     color-mix(in srgb, var(--color-solid), var(--color-mix-hover));\n  --color-solid-active:    color-mix(in srgb, var(--color-solid), var(--color-mix-active));\n  --color-on-solid:        var(--color-text-main);\n  --color-border:          var(--color-gray);\n  --color-border-hover:    color-mix(in srgb, var(--color-border), var(--color-mix-hover));\n  --color-accent:          var(--color-text-muted);\n  --color-accent-hover:    var(--color-text-main);\n  --color-subtle:          var(--border-subtle);\n  --color-subtle-hover:    var(--border-default);\n  --color-bg-subtle:       var(--border-subtle);\n  --color-text-subtle:     var(--color-text-muted);\n  --color-border-subtle:   var(--border-default);\n}\n\n:host([color="primary"]) {\n  --color-solid:           var(--color-primary);\n  --color-on-solid:        white;\n  --color-border:          var(--color-primary);\n  --color-accent:          var(--color-text-link);\n  --color-accent-hover:    var(--color-text-link-hover);\n  --color-subtle:          var(--color-primary-bg-subtle);\n  --color-subtle-hover:    rgb(from var(--blue) r g b / 0.15);\n  --color-bg-subtle:       var(--color-primary-bg-subtle);\n  --color-text-subtle:     var(--color-primary-text-emphasis);\n  --color-border-subtle:   var(--color-primary-border-subtle);\n}\n\n:host([color="secondary"]) {\n  --color-solid:           var(--color-secondary);\n  --color-on-solid:        white;\n  --color-border:          var(--color-secondary-hover);\n  --color-accent:          var(--color-secondary-text-emphasis);\n  --color-accent-hover:    var(--color-text-main);\n  --color-subtle:          rgb(from var(--slate) r g b / 0.06);\n  --color-subtle-hover:    rgb(from var(--slate) r g b / 0.12);\n  --color-bg-subtle:       var(--color-secondary-bg-subtle);\n  --color-text-subtle:     var(--color-secondary-text-emphasis);\n  --color-border-subtle:   var(--color-secondary-border-subtle);\n}\n\n:host([color="success"]) {\n  --color-solid:           var(--color-success);\n  --color-on-solid:        white;\n  --color-border:          var(--color-success);\n  --color-accent:          var(--color-success-text-emphasis);\n  --color-accent-hover:    var(--color-success-hover);\n  --color-subtle:          var(--color-success-bg-subtle);\n  --color-subtle-hover:    rgb(from var(--green) r g b / 0.15);\n  --color-bg-subtle:       var(--color-success-bg-subtle);\n  --color-text-subtle:     var(--color-success-text-emphasis);\n  --color-border-subtle:   var(--color-success-border-subtle);\n}\n\n:host([color="danger"]) {\n  --color-solid:           var(--color-danger);\n  --color-on-solid:        white;\n  --color-border:          var(--color-danger);\n  --color-accent:          var(--color-danger-text-emphasis);\n  --color-accent-hover:    var(--color-danger-hover);\n  --color-subtle:          var(--color-danger-bg-subtle);\n  --color-subtle-hover:    rgb(from var(--red) r g b / 0.15);\n  --color-bg-subtle:       var(--color-danger-bg-subtle);\n  --color-text-subtle:     var(--color-danger-text-emphasis);\n  --color-border-subtle:   var(--color-danger-border-subtle);\n}\n\n:host([color="warning"]) {\n  --color-solid:           var(--color-warning);\n  --color-on-solid:        var(--gray-900);\n  --color-border:          var(--color-warning);\n  --color-accent:          var(--color-warning-text-emphasis);\n  --color-accent-hover:    var(--color-warning-hover);\n  --color-subtle:          var(--color-warning-bg-subtle);\n  --color-subtle-hover:    rgb(from var(--yellow) r g b / 0.15);\n  --color-bg-subtle:       var(--color-warning-bg-subtle);\n  --color-text-subtle:     var(--color-warning-text-emphasis);\n  --color-border-subtle:   var(--color-warning-border-subtle);\n}\n\n:host([color="info"]) {\n  --color-solid:           var(--color-info);\n  --color-on-solid:        white;\n  --color-border:          var(--color-info);\n  --color-accent:          var(--color-info-text-emphasis);\n  --color-accent-hover:    var(--color-info-hover);\n  --color-subtle:          var(--color-info-bg-subtle);\n  --color-subtle-hover:    rgb(from var(--cyan) r g b / 0.15);\n  --color-bg-subtle:       var(--color-info-bg-subtle);\n  --color-text-subtle:     var(--color-info-text-emphasis);\n  --color-border-subtle:   var(--color-info-border-subtle);\n}\n\n:host([color="light"]) {\n  --color-solid:           var(--light);\n  --color-on-solid:        var(--gray-900);\n  --color-border:          var(--border-hover);\n  --color-subtle:          var(--color-light-bg-subtle);\n  --color-subtle-hover:    var(--color-light-border-subtle);\n  --color-bg-subtle:       var(--color-light-bg-subtle);\n  --color-text-subtle:     var(--color-text-muted);\n  --color-border-subtle:   var(--color-light-border-subtle);\n}\n\n:host([color="dark"]) {\n  --color-solid:           var(--dark-500);\n  --color-on-solid:        white;\n  --color-border:          var(--dark-500);\n  --color-accent:          var(--color-text-main);\n  --color-accent-hover:    var(--color-text-main);\n  --color-subtle:          var(--color-dark-bg-subtle);\n  --color-subtle-hover:    var(--color-dark-border-subtle);\n  --color-bg-subtle:       var(--color-dark-bg-subtle);\n  --color-text-subtle:     var(--color-text-main);\n  --color-border-subtle:   var(--color-dark-border-subtle);\n}\n';
-const tagStyle = ':host {\n  display: inline-flex;\n  align-items: center;\n  --tag-solid-bg:        var(--color-solid);\n  --tag-solid-color:     var(--color-on-solid);\n  --tag-border:          var(--color-border);\n  --tag-accent:          var(--color-accent);\n  --tag-subtle-bg:       var(--color-bg-subtle);\n  --tag-subtle-color:    var(--color-text-subtle);\n  --tag-subtle-border:   var(--color-border-subtle);\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-family: inherit;\n  font-weight: 500;\n  white-space: nowrap;\n  vertical-align: middle;\n  line-height: 1.2;\n  font-size: 1em;\n  padding: 0.15em 0.5em 0.15em 0.6em;\n  border-radius: 4px;\n  border: 1px solid var(--tag-solid-bg);\n  background: var(--tag-solid-bg);\n  color: var(--tag-solid-color);\n  max-width: 160px;\n  min-width: 0;\n}\n\n:host([variant="outlined"]) .tag {\n  background:   transparent;\n  border-color: var(--tag-border);\n  color:        var(--tag-accent);\n}\n\n:host([variant="faint"]) .tag {\n  background:   var(--tag-subtle-bg);\n  border-color: var(--tag-subtle-border);\n  color:        var(--tag-subtle-color);\n}\n\n:host([variant="subtle"]) .tag {\n  background:   var(--tag-subtle-bg);\n  border-color: transparent;\n  color:        var(--tag-subtle-color);\n}\n\n:host([variant="text"]) .tag {\n  background:   transparent;\n  border-color: transparent;\n  color:        var(--tag-accent);\n  padding-left:  0;\n  padding-right: 0;\n}\n\n\n:host([pill]) .tag { border-radius: 999px; }\n\n.tag-content {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n::slotted(ae-icon) { font-size: 1.1em; }\n\n.tag-dismiss {\n  display: none;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.55;\n  line-height: 1;\n  font-size: 1em;\n  padding: 0 1px;\n  border-radius: 2px;\n  background: transparent;\n  border: none;\n  color: inherit;\n  font-family: inherit;\n  transition: opacity 0.1s, background 0.1s;\n}\n\n:host([dismissible]) .tag-dismiss {\n  display: inline-flex;\n}\n\n.tag-dismiss:hover {\n  opacity: 1;\n  background: color-mix(in srgb, currentColor 15%, transparent);\n}\n\n/* disabled: button remains visible but is inert */\n:host([disabled]) .tag-dismiss {\n  opacity: 0.4;\n  pointer-events: none;\n  cursor: default;\n}\n\n:host([disabled]) .tag {\n  opacity: 0.6;\n}\n';
-var __create$d = Object.create;
-var __defProp$d = Object.defineProperty;
-var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
-var __knownSymbol$d = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
-var __typeError$d = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decoratorStart$d = (base) => [, , , __create$d((base == null ? void 0 : base[__knownSymbol$d("metadata")]) ?? null)];
-var __decoratorStrings$d = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn$d = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$d("Function expected") : fn;
-var __decoratorContext$d = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$d[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$d("Already initialized") : fns.push(__expectFn$d(fn || null)) });
-var __decoratorMetadata$d = (array, target) => __defNormalProp$d(target, __knownSymbol$d("metadata"), array[3]);
-var __runInitializers$d = (array, flags, self, value) => {
-  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
-  return value;
-};
-var __decorateElement$d = (array, flags, name, decorators, target, extra) => {
-  var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
-  var j = array.length + 1, key = __decoratorStrings$d[k + 5];
-  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
-  var desc = (target = target.prototype, __getOwnPropDesc$c({ get [name]() {
-    return __privateGet$c(this, extra);
-  }, set [name](x) {
-    return __privateSet$c(this, extra, x);
-  } }, name));
-  for (var i = decorators.length - 1; i >= 0; i--) {
-    ctx = __decoratorContext$d(k, name, done = {}, array[3], extraInitializers);
-    {
-      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
-      access.get = (x) => x[name];
-      access.set = (x, y) => x[name] = y;
-    }
-    it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
-    if (it === void 0) __expectFn$d(it) && (desc[key] = it);
-    else if (typeof it !== "object" || it === null) __typeError$d("Object expected");
-    else __expectFn$d(fn = it.get) && (desc.get = fn), __expectFn$d(fn = it.set) && (desc.set = fn), __expectFn$d(fn = it.init) && initializers.unshift(fn);
-  }
-  return desc && __defProp$d(target, name, desc), target;
-};
-var __publicField$d = (obj, key, value) => __defNormalProp$d(obj, key + "", value);
-var __accessCheck$c = (obj, member, msg) => member.has(obj) || __typeError$d("Cannot " + msg);
-var __privateGet$c = (obj, member, getter) => (__accessCheck$c(obj, member, "read from private field"), member.get(obj));
-var __privateAdd$c = (obj, member, value) => member.has(obj) ? __typeError$d("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$c = (obj, member, value, setter) => (__accessCheck$c(obj, member, "write to private field"), member.set(obj, value), value);
-var _pill_dec$1, _disabled_dec$5, _dismissible_dec, _size_dec$3, _variant_dec$5, _color_dec$8, _a$d, _init$d, _color$7, _variant$4, _size$2, _dismissible, _disabled$4, _pill$1;
-class Tag extends (_a$d = AeicoComponent, _color_dec$8 = [aeico.prop({ type: String })], _variant_dec$5 = [aeico.prop({ type: String })], _size_dec$3 = [aeico.prop({ type: String })], _dismissible_dec = [aeico.prop({ type: Boolean })], _disabled_dec$5 = [aeico.prop({ type: Boolean })], _pill_dec$1 = [aeico.prop({ type: Boolean })], _a$d) {
-  constructor() {
-    super(...arguments);
-    __privateAdd$c(this, _color$7, __runInitializers$d(_init$d, 8, this)), __runInitializers$d(_init$d, 11, this);
-    __privateAdd$c(this, _variant$4, __runInitializers$d(_init$d, 12, this)), __runInitializers$d(_init$d, 15, this);
-    __privateAdd$c(this, _size$2, __runInitializers$d(_init$d, 16, this)), __runInitializers$d(_init$d, 19, this);
-    __privateAdd$c(this, _dismissible, __runInitializers$d(_init$d, 20, this, false)), __runInitializers$d(_init$d, 23, this);
-    __privateAdd$c(this, _disabled$4, __runInitializers$d(_init$d, 24, this, false)), __runInitializers$d(_init$d, 27, this);
-    __privateAdd$c(this, _pill$1, __runInitializers$d(_init$d, 28, this, false)), __runInitializers$d(_init$d, 31, this);
-  }
-  render() {
-    return aeico.html(({ span, button, slot }) => {
-      span({ part: "tag", className: "tag" }, () => {
-        slot({ name: "start" });
-        span({ className: "tag-content" }, () => {
-          slot();
-        });
-        slot({ name: "end" });
-        button(
-          {
-            type: "button",
-            className: "tag-dismiss",
-            "aria-label": "dismiss",
-            "@click": (e) => {
-              e.stopPropagation();
-              if (this.disabled) return;
-              this.emit("dismiss");
-            }
-          },
-          () => {
-            span({ textContent: "×" });
-          }
-        );
-      });
-    });
-  }
-}
-_init$d = __decoratorStart$d(_a$d);
-_color$7 = /* @__PURE__ */ new WeakMap();
-_variant$4 = /* @__PURE__ */ new WeakMap();
-_size$2 = /* @__PURE__ */ new WeakMap();
-_dismissible = /* @__PURE__ */ new WeakMap();
-_disabled$4 = /* @__PURE__ */ new WeakMap();
-_pill$1 = /* @__PURE__ */ new WeakMap();
-__decorateElement$d(_init$d, 4, "color", _color_dec$8, Tag, _color$7);
-__decorateElement$d(_init$d, 4, "variant", _variant_dec$5, Tag, _variant$4);
-__decorateElement$d(_init$d, 4, "size", _size_dec$3, Tag, _size$2);
-__decorateElement$d(_init$d, 4, "dismissible", _dismissible_dec, Tag, _dismissible);
-__decorateElement$d(_init$d, 4, "disabled", _disabled_dec$5, Tag, _disabled$4);
-__decorateElement$d(_init$d, 4, "pill", _pill_dec$1, Tag, _pill$1);
-__decoratorMetadata$d(_init$d, Tag);
-__publicField$d(Tag, "styles", [styleVariables, sizeCSS, colorCSS, tagStyle]);
-Tag.register();
-var __create$c = Object.create;
-var __defProp$c = Object.defineProperty;
-var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
-var __knownSymbol$c = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
-var __typeError$c = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __name = (target, value) => __defProp$c(target, "name", { value, configurable: true });
-var __decoratorStart$c = (base) => [, , , __create$c((base == null ? void 0 : base[__knownSymbol$c("metadata")]) ?? null)];
-var __decoratorStrings$c = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn$c = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$c("Function expected") : fn;
-var __decoratorContext$c = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$c[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$c("Already initialized") : fns.push(__expectFn$c(fn || null)) });
-var __decoratorMetadata$c = (array, target) => __defNormalProp$c(target, __knownSymbol$c("metadata"), array[3]);
-var __runInitializers$c = (array, flags, self, value) => {
-  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
-  return value;
-};
-var __decorateElement$c = (array, flags, name, decorators, target, extra) => {
-  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
-  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings$c[k + 5];
-  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
-  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc$b(k < 4 ? target : { get [name]() {
-    return __privateGet$b(this, extra);
-  }, set [name](x) {
-    return __privateSet$b(this, extra, x);
-  } }, name));
-  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
-  for (var i = decorators.length - 1; i >= 0; i--) {
-    ctx = __decoratorContext$c(k, name, done = {}, array[3], extraInitializers);
-    if (k) {
-      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
-      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet$b : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
-      if (k > 2) access.set = p ? (x, y) => __privateSet$b(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
-    }
-    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
-    if (k ^ 4 || it === void 0) __expectFn$c(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
-    else if (typeof it !== "object" || it === null) __typeError$c("Object expected");
-    else __expectFn$c(fn = it.get) && (desc.get = fn), __expectFn$c(fn = it.set) && (desc.set = fn), __expectFn$c(fn = it.init) && initializers.unshift(fn);
-  }
-  return k || __decoratorMetadata$c(array, target), desc && __defProp$c(target, name, desc), p ? k ^ 4 ? extra : desc : target;
-};
-var __publicField$c = (obj, key, value) => __defNormalProp$c(obj, typeof key !== "symbol" ? key + "" : key, value);
-var __accessCheck$b = (obj, member, msg) => member.has(obj) || __typeError$c("Cannot " + msg);
-var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError$c('Cannot use the "in" operator on this value') : member.has(obj);
-var __privateGet$b = (obj, member, getter) => (__accessCheck$b(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd$b = (obj, member, value) => member.has(obj) ? __typeError$c("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$b = (obj, member, value, setter) => (__accessCheck$b(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck$b(obj, member, "access private method"), method);
-var _defaultValue_dec, _value_dec$1, _expandable_dec, _multiple_dec, _placeholder_dec, _position_dec, _options_dec$1, __expanded_dec, _a$c, _init$c, __expanded, _options$1, _position, _placeholder, _multiple, _expandable;
-class Select extends (_a$c = AeicoField, __expanded_dec = [aeico.prop({ type: Boolean, observe: false, reflect: false })], _options_dec$1 = [aeico.prop({ type: Array })], _position_dec = [aeico.prop({ type: String })], _placeholder_dec = [aeico.prop({ type: String })], _multiple_dec = [aeico.prop({ type: Boolean })], _expandable_dec = [aeico.prop({ type: Boolean })], _value_dec$1 = [aeico.prop({
-  type: String,
-  parser: (v) => {
-    if (v === null || v === void 0) return void 0;
-    try {
-      return JSON.parse(v);
-    } catch {
-      return v;
-    }
-  },
-  formatter: (v) => {
-    if (v === null || v === void 0) return "";
-    if (Array.isArray(v)) return JSON.stringify(v);
-    return String(v);
-  }
-})], _defaultValue_dec = [aeico.prop({
-  type: String,
-  parser: (v) => {
-    if (v === null || v === void 0) return void 0;
-    try {
-      return JSON.parse(v);
-    } catch {
-      return v;
-    }
-  },
-  formatter: (v) => {
-    if (v === null || v === void 0) return "";
-    if (Array.isArray(v)) return JSON.stringify(v);
-    return String(v);
-  }
-})], _a$c) {
-  constructor() {
-    super(...arguments);
-    __publicField$c(this, "fieldElement", null);
-    __publicField$c(this, "_isOpen", false);
-    __publicField$c(this, "_triggerEl", null);
-    __publicField$c(this, "_dropdownEl", null);
-    __publicField$c(this, "_slotEl", null);
-    __publicField$c(this, "_slotOptionData", []);
-    __publicField$c(this, "_selectedListEl", null);
-    __privateAdd$b(this, __expanded, __runInitializers$c(_init$c, 8, this, false)), __runInitializers$c(_init$c, 11, this);
-    __privateAdd$b(this, _options$1, __runInitializers$c(_init$c, 12, this)), __runInitializers$c(_init$c, 15, this);
-    __privateAdd$b(this, _position, __runInitializers$c(_init$c, 16, this)), __runInitializers$c(_init$c, 19, this);
-    __privateAdd$b(this, _placeholder, __runInitializers$c(_init$c, 20, this)), __runInitializers$c(_init$c, 23, this);
-    __privateAdd$b(this, _multiple, __runInitializers$c(_init$c, 24, this, false)), __runInitializers$c(_init$c, 27, this);
-    __privateAdd$b(this, _expandable, __runInitializers$c(_init$c, 28, this, false)), __runInitializers$c(_init$c, 31, this);
-    __publicField$c(this, "value", __runInitializers$c(_init$c, 32, this)), __runInitializers$c(_init$c, 35, this);
-    __publicField$c(this, "defaultValue", __runInitializers$c(_init$c, 36, this)), __runInitializers$c(_init$c, 39, this);
-    __publicField$c(this, "_handleOutsideClick", (e) => {
-      if (!e.composedPath().includes(this)) {
-        this._closeDropdown();
-      }
-    });
-    __publicField$c(this, "_handleOptionSelect", (e) => {
-      const { value, label } = e.detail;
-      if (!this._slotOptionData.find((o) => o.value === value)) {
-        this._slotOptionData = [
-          ...this._slotOptionData.filter((o) => o.value !== value),
-          { value, label }
-        ];
-      }
-      if (this.multiple) {
-        const current = this._getMultiValues();
-        const idx = current.findIndex((v) => String(v) === value);
-        const next = idx >= 0 ? current.filter((_, i) => i !== idx) : [...current, value];
-        this.setValue(next, { silent: false, action: "change" });
-      } else {
-        this.setValue(value, { silent: false, action: "change" });
-        this._closeDropdown();
-      }
-    });
-  }
-  writeValue(_value2) {
-  }
-  getValue() {
-    if (this.multiple) return this._getMultiValues();
-    return this.value || "";
-  }
-  _getMultiValues() {
-    if (Array.isArray(this.value)) return this.value;
-    if (this.value != null && this.value !== "") return [this.value];
-    return [];
-  }
-  onDisabledChanged(_newValue) {
-  }
-  onUpdated(_changedProps) {
-    if (!this.multiple || this.expandable) {
-      if (this._expanded) this._expanded = false;
-      return;
-    }
-    const list = this._selectedListEl;
-    if (!list) return;
-    const overflowing = list.scrollWidth > list.clientWidth + 1;
-    if (overflowing !== this._expanded) this._expanded = overflowing;
-  }
-  _findLabel(value) {
-    const strVal = String(value);
-    if (Array.isArray(this.options)) {
-      for (const opt of this.options) {
-        if (this._isSelectOption(opt)) {
-          if (String(opt.value) === strVal) return aeicoLocalize.t(opt.label, opt.label);
-        } else {
-          if (String(opt) === strVal) return strVal;
-        }
-      }
-    }
-    for (const opt of this._slotOptionData) {
-      if (opt.value === strVal) return opt.label;
-    }
-    return strVal;
-  }
-  _onSlotChange() {
-    var _a2;
-    if (!this._slotEl) return;
-    const data = [];
-    for (const el of this._slotEl.assignedElements({ flatten: true })) {
-      if (el.tagName.toLowerCase() !== "ae-select-option") continue;
-      const optEl = el;
-      data.push({
-        value: optEl.value ?? el.getAttribute("value") ?? "",
-        label: optEl.label || ((_a2 = el.textContent) == null ? void 0 : _a2.trim()) || ""
-      });
-    }
-    this._slotOptionData = data;
-    this.update();
-  }
-  _toggleDropdown() {
-    if (this._isOpen) {
-      this._closeDropdown();
-    } else {
-      this._openDropdown();
-    }
-  }
-  _openDropdown() {
-    this._isOpen = true;
-    this._syncOpenState();
-  }
-  _closeDropdown() {
-    this._isOpen = false;
-    this._syncOpenState();
-  }
-  _syncOpenState() {
-    var _a2, _b;
-    (_a2 = this._triggerEl) == null ? void 0 : _a2.classList.toggle("open", this._isOpen);
-    (_b = this._dropdownEl) == null ? void 0 : _b.classList.toggle("open", this._isOpen);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    document.addEventListener("click", this._handleOutsideClick);
-    this.addEventListener("selectoption", this._handleOptionSelect);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener("click", this._handleOutsideClick);
-    this.removeEventListener("selectoption", this._handleOptionSelect);
-  }
-  _syncSlotOptionsSelected() {
-    if (!this._slotEl) return;
-    const multiValues = this._getMultiValues();
-    for (const el of this._slotEl.assignedElements({ flatten: true })) {
-      if (el.tagName.toLowerCase() !== "ae-select-option") continue;
-      const optEl = el;
-      const optVal = optEl.value ?? el.getAttribute("value") ?? "";
-      const isSelected = this.multiple ? multiValues.some((v) => String(v) === optVal) : this.value != null && this.value !== "" && String(this.value) === optVal;
-      optEl.selected = isSelected ? true : void 0;
-    }
-  }
-  render() {
-    const position = this.position || "bottom";
-    const multiValues = this.multiple ? this._getMultiValues() : [];
-    const hasMultiSelection = this.multiple && multiValues.length > 0;
-    const selectedLabel = !this.multiple && this.value != null && this.value !== "" ? this._findLabel(this.value) : "";
-    const isDisabled = Boolean(this.disabled);
-    this._selectedListEl = null;
-    this._syncSlotOptionsSelected();
-    return aeico.html(({ div, span, slot }) => {
-      div({ className: "container" }, () => {
-        this._triggerEl = div(
-          {
-            className: `trigger${this._isOpen ? " open" : ""}${isDisabled ? " disabled" : ""}`,
-            "@click": () => {
-              if (isDisabled) return;
-              this._toggleDropdown();
-            }
-          },
-          () => {
-            if (this.multiple) {
-              if (hasMultiSelection) {
-                this._selectedListEl = div(
-                  {
-                    className: `selected-list${!this.expandable ? " selected-list--clipped" : ""}`
-                  },
-                  () => {
-                    for (const v of multiValues) {
-                      const lbl = this._findLabel(v);
-                      aeico.tags.aeTag({
-                        key: `sel-${v}`,
-                        color: "default",
-                        variant: "faint",
-                        dismissible: true,
-                        disabled: isDisabled,
-                        textContent: lbl,
-                        "@dismiss": (e) => {
-                          e.stopPropagation();
-                          if (isDisabled) return;
-                          const next = multiValues.filter((item) => String(item) !== String(v));
-                          this.setValue(next, { silent: false, action: "change" });
-                        }
-                      });
-                    }
-                  }
-                );
-                if (!this.expandable && this._expanded) {
-                  span({ className: "overflow-indicator", textContent: "…" });
-                }
-              } else {
-                span({ className: "value placeholder", textContent: this.placeholder || "" });
-              }
-            } else {
-              if (selectedLabel) {
-                span({ className: "value", textContent: selectedLabel });
-              } else {
-                span({ className: "value placeholder", textContent: this.placeholder || "" });
-              }
-            }
-            span({ className: "arrow", textContent: "▾" });
-          }
-        );
-        this._dropdownEl = div(
-          {
-            className: `dropdown position-${position}${this._isOpen ? " open" : ""}`
-          },
-          () => {
-            this._renderProgrammaticOptions();
-            this._slotEl = slot({
-              "@slotchange": () => this._onSlotChange()
-            });
-          }
-        );
-        this.renderActionButtons();
-      });
-    });
-  }
-  _renderProgrammaticOptions() {
-    if (!Array.isArray(this.options)) return;
-    const { aeSelectOption } = aeico.tags;
-    const multiValues = this.multiple ? this._getMultiValues() : [];
-    for (const opt of this.options) {
-      if (this._isSelectOption(opt)) {
-        const isSelected = this.multiple ? multiValues.some((v) => String(v) === String(opt.value)) : this.value != null && String(opt.value) === String(this.value);
-        aeSelectOption({
-          key: `opt-${opt.value}`,
-          value: String(opt.value),
-          label: opt.label,
-          textContent: aeicoLocalize.t(opt.label, opt.label),
-          selected: isSelected ? true : void 0
-        });
-      } else {
-        const isSelected = this.multiple ? multiValues.some((v) => String(v) === String(opt)) : this.value != null && String(opt) === String(this.value);
-        aeSelectOption({
-          key: `opt-${opt}`,
-          value: String(opt),
-          textContent: String(opt),
-          selected: isSelected ? true : void 0
-        });
-      }
-    }
-  }
-  _isSelectOption(option) {
-    return option !== null && typeof option === "object" && typeof option.label === "string" && (typeof option.value === "string" || typeof option.value === "number");
-  }
-}
-_init$c = __decoratorStart$c(_a$c);
-__expanded = /* @__PURE__ */ new WeakMap();
-_options$1 = /* @__PURE__ */ new WeakMap();
-_position = /* @__PURE__ */ new WeakMap();
-_placeholder = /* @__PURE__ */ new WeakMap();
-_multiple = /* @__PURE__ */ new WeakMap();
-_expandable = /* @__PURE__ */ new WeakMap();
-__decorateElement$c(_init$c, 4, "_expanded", __expanded_dec, Select, __expanded);
-__decorateElement$c(_init$c, 4, "options", _options_dec$1, Select, _options$1);
-__decorateElement$c(_init$c, 4, "position", _position_dec, Select, _position);
-__decorateElement$c(_init$c, 4, "placeholder", _placeholder_dec, Select, _placeholder);
-__decorateElement$c(_init$c, 4, "multiple", _multiple_dec, Select, _multiple);
-__decorateElement$c(_init$c, 4, "expandable", _expandable_dec, Select, _expandable);
-__decorateElement$c(_init$c, 5, "value", _value_dec$1, Select);
-__decorateElement$c(_init$c, 5, "defaultValue", _defaultValue_dec, Select);
-__decoratorMetadata$c(_init$c, Select);
-__publicField$c(Select, "tagName", "select");
-__publicField$c(Select, "styles", [styleVariables, sizeCSS, style$9]);
-Select.register();
-const style$8 = `:host {
-  display: block;
-  flex: 1;
-  min-width: 0;
-  font-size: var(--size-base);
-
-  /* Default color when no [color] attribute — overridden by color.css :host([color=...]) */
-  --color-solid: var(--color-primary);
-}
-
-.range-container {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  height: 26px;
-}
-
-input[type="range"] {
-  flex: 1;
-  margin: 0;
-}
-
-.input-range,
-.slider-input,
-input[type="range"] {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 100%;
-  height: 0.333em;
-  border-radius: 2px;
-  background: var(--border-subtle);
-  outline: none;
-  cursor: pointer;
-  margin: 0;
-}
-
-.input-range {
-  margin: 10px 0;
-}
-
-.input-range::-webkit-slider-thumb,
-.slider-input::-webkit-slider-thumb,
-input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 1.167em;
-  height: 1.167em;
-  border-radius: 50%;
-  background: var(--color-solid);
-  cursor: pointer;
-  transition: background 0.12s, transform 0.12s;
-}
-
-.input-range::-webkit-slider-thumb:hover,
-.slider-input::-webkit-slider-thumb:hover,
-input[type="range"]:hover::-webkit-slider-thumb {
-  background: var(--color-solid-hover);
-  transform: scale(1.1);
-}
-
-.input-range::-webkit-slider-thumb:active,
-.slider-input::-webkit-slider-thumb:active,
-input[type="range"]:active::-webkit-slider-thumb {
-  background: var(--color-solid-hover);
-  transform: scale(1.2);
-}
-
-.input-range:focus::-webkit-slider-thumb,
-.slider-input:focus::-webkit-slider-thumb,
-input[type="range"]:focus::-webkit-slider-thumb {
-  background: var(--color-solid);
-  outline: none;
-  box-shadow: none;
-}
-
-.input-range:focus:hover::-webkit-slider-thumb,
-.slider-input:focus:hover::-webkit-slider-thumb,
-input[type="range"]:focus:hover::-webkit-slider-thumb {
-  background: var(--color-solid-hover);
-  outline: none;
-  box-shadow: none;
-}
-
-.input-range:focus:active::-webkit-slider-thumb,
-.slider-input:focus:active::-webkit-slider-thumb,
-input[type="range"]:focus:active::-webkit-slider-thumb {
-  background: var(--color-solid-hover);
-  outline: none;
-  box-shadow: none;
-}
-
-.input-range::-moz-range-thumb,
-.slider-input::-moz-range-thumb,
-input[type="range"]::-moz-range-thumb {
-  width: 1.167em;
-  height: 1.167em;
-  border: none;
-  border-radius: 50%;
-  background: var(--color-solid);
-  cursor: pointer;
-  transition: background 0.12s, transform 0.12s;
-}
-
-.input-range::-moz-range-thumb:hover,
-.slider-input::-moz-range-thumb:hover,
-input[type="range"]:hover::-moz-range-thumb {
-  background: var(--color-solid-hover);
-  transform: scale(1.1);
-}
-
-.input-range::-moz-range-thumb:active,
-.slider-input::-moz-range-thumb:active,
-input[type="range"]:active::-moz-range-thumb {
-  background: var(--color-solid-hover);
-  transform: scale(1.2);
-}
-
-.input-range:focus::-moz-range-thumb,
-.slider-input:focus::-moz-range-thumb,
-input[type="range"]:focus::-moz-range-thumb {
-  background: var(--color-solid);
-  outline: none;
-  box-shadow: none;
-}
-
-.input-range:focus:hover::-moz-range-thumb,
-.slider-input:focus:hover::-moz-range-thumb,
-input[type="range"]:focus:hover::-moz-range-thumb {
-  background: var(--color-solid-hover);
-  outline: none;
-  box-shadow: none;
-}
-
-.input-range:focus:active::-moz-range-thumb,
-.slider-input:focus:active::-moz-range-thumb,
-input[type="range"]:focus:active::-moz-range-thumb {
-  background: var(--color-solid-hover);
-  outline: none;
-  box-shadow: none;
-}
-
-.input-range:disabled,
-.slider-input:disabled,
-input[type="range"]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.input-range:disabled::-webkit-slider-thumb,
-.slider-input:disabled::-webkit-slider-thumb,
-input[type="range"]:disabled::-webkit-slider-thumb {
-  cursor: not-allowed;
-}
-
-.input-range:disabled::-moz-range-thumb,
-.slider-input:disabled::-moz-range-thumb,
-input[type="range"]:disabled::-moz-range-thumb {
-  cursor: not-allowed;
-}
-
-.value-label {
-  min-width: 14px;
-  text-align: center;
-  font-size: 12px;
-  color: var(--color-text-muted);
-  font-weight: 500;
-  font-variant-numeric: tabular-nums;
-  pointer-events: none;
-  user-select: none;
-}
-
-.reset-btn {
-  width: 1.333em;
-  height: 1.333em;
-  border: none;
-  border-radius: var(--reset-btn-border-radius);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--reset-btn-bg);
-  color: var(--reset-btn-color);
-  transition: var(--reset-btn-transition);
-  flex-shrink: 0;
-}
-
-.reset-btn:hover {
-  background: var(--reset-btn-bg-hover);
-  color: var(--reset-btn-color-hover);
-}
-
-.clear-btn {
-  width: 1.333em;
-  height: 1.333em;
-  border: none;
-  border-radius: var(--clear-btn-border-radius);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--clear-btn-bg);
-  color: var(--clear-btn-color);
-  transition: var(--clear-btn-transition);
-  flex-shrink: 0;
-}
-
-.clear-btn:hover {
-  background: var(--clear-btn-bg-hover);
-  color: var(--clear-btn-color-hover);
-}
-
-
-
-.input-range,
-.slider-input,
-input[type="range"] {
-  height: 0.333em;
-}
-
-.input-range::-webkit-slider-thumb,
-.slider-input::-webkit-slider-thumb,
-input[type="range"]::-webkit-slider-thumb {
-  width: 1.167em;
-  height: 1.167em;
-}
-
-.input-range::-moz-range-thumb,
-.slider-input::-moz-range-thumb,
-input[type="range"]::-moz-range-thumb {
-  width: 1.167em;
-  height: 1.167em;
-}
-
-.value-label {
-  font-size: 1em;
-}
-
-.value-input {
-  width: 56px;
-  padding: 0 4px;
-  height: 22px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 4px;
-  background: transparent;
-  color: var(--color-text);
-  font-size: 12px;
-  text-align: center;
-  outline: none;
-  flex-shrink: 0;
-}
-
-.value-input:focus {
-  border-color: var(--color-solid);
-}
-
-.value-input:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-:host([tracked]) .input-range,
-:host([tracked]) .slider-input,
-:host([tracked]) input[type="range"] {
-  background: linear-gradient(
-    to right,
-    var(--color-solid) var(--fill-pct, 0%),
-    var(--border-subtle) var(--fill-pct, 0%)
-  );
-}
-
-.range-wrapper {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  position: relative;  /* marks-container positions against this */
-}
-
-.range-wrapper input[type="range"] {
-  width: 100%;
-  flex: none;
-}
-
-/* Marks are absolutely positioned so they don't affect range-wrapper's layout height */
-.marks-container {
-  position: absolute;
-  top: 100%;
-  left: 7px;   /* inset by half thumb so 0%/100% align with track ends */
-  right: 7px;
-  height: 18px;
-  margin-top: 2px;
-  overflow: visible;
-}
-
-.mark {
-  position: absolute;
-  transform: translateX(-50%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
-  pointer-events: none;
-  user-select: none;
-}
-
-.mark::before {
-  content: '';
-  display: block;
-  width: 1px;
-  height: 4px;
-  background: var(--border-default, var(--border-subtle));
-  border-radius: 1px;
-}
-
-.mark-label {
-  font-size: 10px;
-  color: var(--color-text-muted);
-  white-space: nowrap;
-}
-
-/* When marks are active, add padding-bottom to make room for the absolute-positioned marks */
-:host([marks]) .range-container {
-  padding-bottom: 24px; /* marks-container height (18px) + margin-top (2px) + extra (4px) */
-  height: auto;
-}
-`;
-var __create$b = Object.create;
-var __defProp$b = Object.defineProperty;
-var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-var __knownSymbol$b = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
-var __typeError$b = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decoratorStart$b = (base) => [, , , __create$b((base == null ? void 0 : base[__knownSymbol$b("metadata")]) ?? null)];
-var __decoratorStrings$b = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn$b = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$b("Function expected") : fn;
-var __decoratorContext$b = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$b[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$b("Already initialized") : fns.push(__expectFn$b(fn || null)) });
-var __decoratorMetadata$b = (array, target) => __defNormalProp$b(target, __knownSymbol$b("metadata"), array[3]);
-var __runInitializers$b = (array, flags, self, value) => {
-  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
-  return value;
-};
-var __decorateElement$b = (array, flags, name, decorators, target, extra) => {
-  var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
-  var j = array.length + 1, key = __decoratorStrings$b[k + 5];
-  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
-  var desc = (target = target.prototype, __getOwnPropDesc$a({ get [name]() {
-    return __privateGet$a(this, extra);
-  }, set [name](x) {
-    return __privateSet$a(this, extra, x);
-  } }, name));
-  for (var i = decorators.length - 1; i >= 0; i--) {
-    ctx = __decoratorContext$b(k, name, done = {}, array[3], extraInitializers);
-    {
-      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
-      access.get = (x) => x[name];
-      access.set = (x, y) => x[name] = y;
-    }
-    it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
-    if (it === void 0) __expectFn$b(it) && (desc[key] = it);
-    else if (typeof it !== "object" || it === null) __typeError$b("Object expected");
-    else __expectFn$b(fn = it.get) && (desc.get = fn), __expectFn$b(fn = it.set) && (desc.set = fn), __expectFn$b(fn = it.init) && initializers.unshift(fn);
-  }
-  return desc && __defProp$b(target, name, desc), target;
-};
-var __publicField$b = (obj, key, value) => __defNormalProp$b(obj, typeof key !== "symbol" ? key + "" : key, value);
-var __accessCheck$a = (obj, member, msg) => member.has(obj) || __typeError$b("Cannot " + msg);
-var __privateGet$a = (obj, member, getter) => (__accessCheck$a(obj, member, "read from private field"), member.get(obj));
-var __privateAdd$a = (obj, member, value) => member.has(obj) ? __typeError$b("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$a = (obj, member, value, setter) => (__accessCheck$a(obj, member, "write to private field"), member.set(obj, value), value);
-var _marks_dec, _tracked_dec, _editable_dec, _step_dec, _max_dec, _min_dec, _percentage_dec, _options_dec, _a$b, _init$b, _options, _percentage, _min, _max, _step, _editable, _tracked, _marks;
-class Slider extends (_a$b = AeicoField, _options_dec = [aeico.prop({ type: Array })], _percentage_dec = [aeico.prop({ type: Boolean })], _min_dec = [aeico.prop({ type: Number })], _max_dec = [aeico.prop({ type: Number })], _step_dec = [aeico.prop({ type: Number })], _editable_dec = [aeico.prop({ type: Boolean })], _tracked_dec = [aeico.prop({ type: Boolean })], _marks_dec = [aeico.prop({
-  type: Array,
-  // bare attribute (<ae-slider marks>) → true; JSON array → MarkItem[]
-  parser: (value) => {
-    if (value === null) return void 0;
-    if (value === "" || value === "true") return true;
-    if (value === "false") return false;
-    try {
-      return JSON.parse(value);
-    } catch {
-      return true;
-    }
-  }
-})], _a$b) {
-  constructor() {
-    super();
-    __publicField$b(this, "fieldElement", null);
-    __publicField$b(this, "_valueLabel", null);
-    __publicField$b(this, "_numberInput", null);
-    __publicField$b(this, "_boundOnRangeInput");
-    __publicField$b(this, "_boundOnNumberInput");
-    __privateAdd$a(this, _options, __runInitializers$b(_init$b, 8, this, [])), __runInitializers$b(_init$b, 11, this);
-    __privateAdd$a(this, _percentage, __runInitializers$b(_init$b, 12, this, false)), __runInitializers$b(_init$b, 15, this);
-    __privateAdd$a(this, _min, __runInitializers$b(_init$b, 16, this, 0)), __runInitializers$b(_init$b, 19, this);
-    __privateAdd$a(this, _max, __runInitializers$b(_init$b, 20, this, 100)), __runInitializers$b(_init$b, 23, this);
-    __privateAdd$a(this, _step, __runInitializers$b(_init$b, 24, this, 1)), __runInitializers$b(_init$b, 27, this);
-    __privateAdd$a(this, _editable, __runInitializers$b(_init$b, 28, this, false)), __runInitializers$b(_init$b, 31, this);
-    __privateAdd$a(this, _tracked, __runInitializers$b(_init$b, 32, this, false)), __runInitializers$b(_init$b, 35, this);
-    __privateAdd$a(this, _marks, __runInitializers$b(_init$b, 36, this)), __runInitializers$b(_init$b, 39, this);
-    this._boundOnRangeInput = this._onRangeInput.bind(this);
-    this._boundOnNumberInput = this._onNumberInput.bind(this);
-  }
-  _normalizeOptions() {
-    if (!Array.isArray(this.options) || this.options.length === 0) return null;
-    const opts = this.options.map(
-      (opt) => this._isSliderOption(opt) ? { label: opt.label, value: String(opt.value) } : { label: String(opt), value: String(opt) }
-    );
-    const allNumeric = opts.every((o) => o.value !== "" && !isNaN(Number(o.value)));
-    if (allNumeric) {
-      return [...opts].sort((a, b) => Number(a.value) - Number(b.value)).map((o) => ({ ...o, rangeValue: Number(o.value) }));
-    } else {
-      return opts.map((o, i) => ({ ...o, rangeValue: i }));
-    }
-  }
-  _getRangeAttrs(normalized) {
-    if (normalized && normalized.length >= 1) {
-      const vals = normalized.map((o) => o.rangeValue);
-      const min = Math.min(...vals);
-      const max = Math.max(...vals);
-      const sorted = [...vals].sort((a, b) => a - b);
-      let minGap = Infinity;
-      for (let i = 1; i < sorted.length; i++) {
-        const d = sorted[i] - sorted[i - 1];
-        if (d > 0 && d < minGap) minGap = d;
-      }
-      return {
-        min: String(min),
-        max: String(max),
-        step: minGap === Infinity ? "1" : String(minGap),
-        inOptionsMode: true
-      };
-    }
-    return {
-      min: String(this.min),
-      max: String(this.max),
-      step: String(this.step),
-      inOptionsMode: false
-    };
-  }
-  _toRangeValue(value, normalized) {
-    if (value == null || value === "") return "";
-    if (normalized) {
-      const found = normalized.find((o) => o.value === value);
-      return found !== void 0 ? String(found.rangeValue) : "";
-    }
-    return value;
-  }
-  _fromRangeValue(rv, normalized) {
-    var _a2, _b;
-    if (normalized) {
-      const n = Number(rv);
-      return ((_a2 = normalized.find((o) => o.rangeValue === n)) == null ? void 0 : _a2.value) ?? ((_b = normalized[0]) == null ? void 0 : _b.value) ?? rv;
-    }
-    return rv;
-  }
-  _displayLabel(value, normalized) {
-    var _a2;
-    if (value == null || value === "") return "";
-    const label = normalized ? ((_a2 = normalized.find((o) => o.value === value)) == null ? void 0 : _a2.label) ?? value : value;
-    return this.percentage ? `${label}%` : label;
-  }
-  _maxValueLabelWidth(normalized, attrs) {
-    const candidates = normalized ? normalized.map((o) => this._displayLabel(o.value, normalized)) : [this._displayLabel(attrs.min, null), this._displayLabel(attrs.max, null)];
-    const maxLen = Math.max(...candidates.map((l) => l.length), 1);
-    return `${maxLen}ch`;
-  }
-  _updateTrackFill() {
-    if (!this.tracked || !this.fieldElement) return;
-    const min = Number(this.fieldElement.min);
-    const max = Number(this.fieldElement.max);
-    const val = Number(this.fieldElement.value);
-    const range = max - min || 1;
-    const pct = Math.max(0, Math.min(100, (val - min) / range * 100));
-    this.style.setProperty("--fill-pct", `${pct}%`);
-  }
-  _getMarksData(normalized, attrs) {
-    const minVal = Number(attrs.min);
-    const maxVal = Number(attrs.max);
-    const range = maxVal - minVal || 1;
-    const marks = this.marks;
-    if (Array.isArray(marks)) {
-      const result = [];
-      for (const m of marks) {
-        const isObj = m !== null && typeof m === "object";
-        const numVal = isObj ? m.value : m;
-        if (numVal < minVal || numVal > maxVal) continue;
-        const rawLabel = isObj ? m.label ?? String(numVal) : String(numVal);
-        result.push({
-          value: String(numVal),
-          label: this.percentage ? `${rawLabel}%` : rawLabel,
-          pct: (numVal - minVal) / range * 100
-        });
-      }
-      return result;
-    }
-    if (normalized) {
-      return normalized.map((o) => ({
-        value: o.value,
-        label: this.percentage ? `${o.label}%` : o.label,
-        pct: (o.rangeValue - minVal) / range * 100
-      }));
-    }
-    return [
-      { value: attrs.min, label: this.percentage ? `${minVal}%` : String(minVal), pct: 0 },
-      { value: attrs.max, label: this.percentage ? `${maxVal}%` : String(maxVal), pct: 100 }
-    ];
-  }
-  writeValue(value) {
-    const normalized = this._normalizeOptions();
-    const rv = this._toRangeValue(value, normalized);
-    if (this.fieldElement && rv !== "" && this.fieldElement.value !== rv) {
-      this.fieldElement.value = rv;
-    }
-    if (this._valueLabel) {
-      this._valueLabel.textContent = this._displayLabel(value, normalized);
-    }
-    if (this._numberInput && !normalized && this._numberInput.value !== rv) {
-      this._numberInput.value = rv;
-    }
-    this._updateTrackFill();
-  }
-  getValue() {
-    if (!this.fieldElement) return "";
-    return this._fromRangeValue(this.fieldElement.value, this._normalizeOptions());
-  }
-  render() {
-    const normalized = this._normalizeOptions();
-    const attrs = this._getRangeAttrs(normalized);
-    return aeico.html(({ div, input, span }) => {
-      div({ className: "range-container" }, () => {
-        div({ key: "range-wrapper", className: "range-wrapper" }, () => {
-          this.fieldElement = input({
-            key: "range",
-            type: "range",
-            min: attrs.min,
-            max: attrs.max,
-            step: attrs.step,
-            "@input": this._boundOnRangeInput,
-            "@change": this.boundOnChange
-          });
-          if (this.marks) {
-            const marksData = this._getMarksData(normalized, attrs);
-            div({ key: "marks", className: "marks-container" }, () => {
-              for (const m of marksData) {
-                aeico.tags.span(
-                  {
-                    key: `mark-${m.value}`,
-                    className: "mark",
-                    style: { left: `${m.pct}%` }
-                  },
-                  () => {
-                    aeico.tags.span({ className: "mark-label", textContent: m.label });
-                  }
-                );
-              }
-            });
-          }
-        });
-        this._valueLabel = span({
-          key: "label",
-          className: "value-label",
-          style: { minWidth: this._maxValueLabelWidth(normalized, attrs) },
-          textContent: this._displayLabel(this.value, normalized)
-        });
-        this.renderActionButtons();
-        if (this.editable) {
-          this._numberInput = input({
-            key: "number",
-            type: "number",
-            className: "value-input",
-            min: attrs.min,
-            max: attrs.max,
-            step: attrs.step,
-            // Disabled in options mode: valid values are discrete, free text makes no sense
-            disabled: attrs.inOptionsMode,
-            "@input": this._boundOnNumberInput
-          });
-        } else {
-          this._numberInput = null;
-        }
-      });
-      if (this.value != null) this.writeValue(this.value);
-    });
-  }
-  _onRangeInput() {
-    if (!this.fieldElement) return;
-    const normalized = this._normalizeOptions();
-    const actualValue = this._fromRangeValue(this.fieldElement.value, normalized);
-    if (this._valueLabel) {
-      this._valueLabel.textContent = this._displayLabel(actualValue, normalized);
-    }
-    if (this._numberInput && !normalized) {
-      this._numberInput.value = this.fieldElement.value;
-    }
-    this._updateTrackFill();
-  }
-  _onNumberInput() {
-    if (!this._numberInput || !this.fieldElement) return;
-    const v = this._numberInput.value;
-    if (this.fieldElement.value === v) return;
-    this.fieldElement.value = v;
-    if (this._valueLabel) {
-      this._valueLabel.textContent = this._displayLabel(v, null);
-    }
-  }
-  clear(options) {
-    var _a2, _b;
-    const normalized = this._normalizeOptions();
-    const attrs = this._getRangeAttrs(normalized);
-    const clearTo = normalized ? ((_a2 = normalized.find((o) => String(o.rangeValue) === attrs.min)) == null ? void 0 : _a2.value) ?? ((_b = normalized[0]) == null ? void 0 : _b.value) ?? attrs.min : attrs.min;
-    this.setValue(clearTo, { ...options, action: "clear" });
-  }
-  _isSliderOption(opt) {
-    return opt !== null && typeof opt === "object" && "label" in opt && "value" in opt;
-  }
-}
-_init$b = __decoratorStart$b(_a$b);
-_options = /* @__PURE__ */ new WeakMap();
-_percentage = /* @__PURE__ */ new WeakMap();
-_min = /* @__PURE__ */ new WeakMap();
-_max = /* @__PURE__ */ new WeakMap();
-_step = /* @__PURE__ */ new WeakMap();
-_editable = /* @__PURE__ */ new WeakMap();
-_tracked = /* @__PURE__ */ new WeakMap();
-_marks = /* @__PURE__ */ new WeakMap();
-__decorateElement$b(_init$b, 4, "options", _options_dec, Slider, _options);
-__decorateElement$b(_init$b, 4, "percentage", _percentage_dec, Slider, _percentage);
-__decorateElement$b(_init$b, 4, "min", _min_dec, Slider, _min);
-__decorateElement$b(_init$b, 4, "max", _max_dec, Slider, _max);
-__decorateElement$b(_init$b, 4, "step", _step_dec, Slider, _step);
-__decorateElement$b(_init$b, 4, "editable", _editable_dec, Slider, _editable);
-__decorateElement$b(_init$b, 4, "tracked", _tracked_dec, Slider, _tracked);
-__decorateElement$b(_init$b, 4, "marks", _marks_dec, Slider, _marks);
-__decoratorMetadata$b(_init$b, Slider);
-__publicField$b(Slider, "tagName", "slider");
-__publicField$b(Slider, "styles", [styleVariables, sizeCSS, colorCSS, style$8]);
-Slider.register();
-const styles$1 = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--size-base);\n\n  /* Layout */\n  --checkbox-field-gap: 4px;\n\n  /* Checkbox */\n  --checkbox-size: 1.167em;\n  --checkbox-border-width: 1px;\n  --checkbox-border-radius: 2px;\n  --checkbox-border-color: var(--border-subtle);\n  --checkbox-bg: var(--surface-base);\n  --checkbox-accent-color: var(--color-solid);\n\n  /* Default color when no [color] attribute — overridden by color.css :host([color=...]) */\n  --color-solid: var(--color-primary);\n}\n\n.checkbox-container {\n  display: flex;\n  align-items: center;\n  gap: var(--checkbox-field-gap);\n  width: 100%;\n}\n\n.checkbox-wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.field-input {\n  width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  cursor: pointer;\n  border: var(--checkbox-border-width) solid var(--checkbox-border-color);\n  border-radius: var(--checkbox-border-radius);\n  background: var(--checkbox-bg);\n  accent-color: var(--checkbox-accent-color);\n  margin: 0;\n  flex-shrink: 0;\n}\n\n.field-input:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* action buttons */\n.reset-btn,\n.clear-btn {\n  width: 1.333em;\n  height: 1.333em;\n  border: none;\n  border-radius: var(--reset-btn-border-radius);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--reset-btn-bg);\n  color: var(--reset-btn-color);\n  transition: var(--reset-btn-transition);\n  flex-shrink: 0;\n  line-height: 1;\n}\n\n.reset-btn:hover {\n  background: var(--reset-btn-bg-hover);\n  color: var(--reset-btn-color-hover);\n}\n\n.clear-btn:hover {\n  background: var(--clear-btn-bg-hover);\n  color: var(--clear-btn-color-hover);\n}\n";
-class Checkbox extends AeicoField {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "fieldElement", null);
-  }
-  getValue() {
-    var _a2;
-    return ((_a2 = this.fieldElement) == null ? void 0 : _a2.checked) ?? false;
-  }
-  writeValue(checked) {
-    if (this.fieldElement) {
-      this.fieldElement.checked = Boolean(checked);
-    }
-  }
-  getEventPayload(checked, oldChecked, action) {
-    return { checked, oldChecked, action };
-  }
-  setValue(checked, options) {
-    const oldChecked = this.getValue();
-    this.checked = checked;
-    this.writeValue(checked);
-    if ((options == null ? void 0 : options.silent) === false) {
-      this.emit("change", {
-        detail: this.getEventPayload(checked, oldChecked, options.action || "change")
-      });
-    }
-  }
-  reset(checked, options) {
-    this.setValue(checked !== void 0 ? checked : this.defaultChecked ?? false, {
-      ...options,
-      action: "reset"
-    });
-  }
-  clear(options) {
-    this.setValue(false, { ...options, action: "clear" });
-  }
-  render() {
-    return aeico.html(({ div, input }) => {
-      div({ className: "checkbox-container", variant: this.variant }, () => {
-        div({ className: "checkbox-wrapper" }, () => {
-          this.fieldElement = input({
-            type: "checkbox",
-            className: "field-input",
-            checked: Boolean(this.checked),
-            disabled: Boolean(this.disabled),
-            "@change": this.boundOnChange
-          });
-        });
-        this.renderActionButtons();
-      });
-    });
-  }
-}
-__publicField(Checkbox, "tagName", "checkbox");
-__publicField(Checkbox, "props", {
-  checked: { type: Boolean },
-  defaultChecked: { type: Boolean },
-  variant: { type: String }
-});
-__publicField(Checkbox, "styles", [styleVariables, sizeCSS, colorCSS, styles$1]);
-Checkbox.register();
-const style$7 = ':host {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--rg-gap, 0.286em);\n  font-size: var(--size-m);\n  --rg-solid-bg:          var(--color-solid);\n  --rg-solid-bg-hover:    var(--color-solid-hover);\n  --rg-solid-bg-active:   var(--color-solid-active);\n  --rg-solid-color:       var(--color-on-solid);\n  --rg-solid-color-hover: var(--color-on-solid-hover, var(--color-on-solid));\n  --rg-border:            var(--color-border);\n  --rg-border-hover:      var(--color-border-hover);\n  --rg-accent:            var(--color-accent);\n  --rg-accent-hover:      var(--color-accent-hover);\n  --rg-subtle-bg:         var(--color-subtle);\n  --rg-subtle-bg-hover:   var(--color-subtle-hover);\n\n  --rg-font-size:    1em;\n  --rg-height:       2.286em;\n  --rg-padding:      0.429em 1.071em;\n  --rg-min-width:    4.571em;\n  --rg-radius:       4px;\n  --rg-font-weight:  400;\n\n  --color-unselected:       var(--surface-base);\n  --color-unselected-hover: var(--color-gray-lighter);\n}\n\n:host([size="xs"]) { --rg-radius: 3px; }\n:host([size="sm"]) { --rg-radius: 3px; }\n\n.rg-container {\n  display: inline-flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\nslot {\n  display: none;\n}\n\n.rg-radio-option {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  cursor: pointer;\n  font-size: var(--rg-font-size);\n  color: var(--color-text-main);\n  user-select: none;\n}\n\n.rg-radio-input {\n  width: 14px;\n  height: 14px;\n  accent-color: var(--rg-solid-bg, var(--color-primary));\n  cursor: pointer;\n  margin: 0;\n  flex-shrink: 0;\n}\n\n.rg-radio-label {\n  line-height: 1.5;\n}\n\n.rg-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: inherit;\n  font-size: var(--rg-font-size);\n  font-weight: 400;\n  height: var(--rg-height);\n  padding: var(--rg-padding);\n  min-width: var(--rg-min-width);\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;\n  outline: none;\n  border-radius: var(--rg-radius);\n\n  background:   var(--color-unselected);\n  border:       1px solid var(--color-gray-light);\n  color:        var(--color-text-muted);\n}\n\n.rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--color-unselected-hover);\n  border-color: var(--color-gray-light);\n  color:        var(--color-text-main);\n}\n\n.rg-btn.selected {\n  background:   var(--rg-solid-bg);\n  border-color: var(--rg-solid-bg);\n  color:        var(--rg-solid-color);\n  font-weight:  500;\n  box-shadow:   0 1px 4px rgb(from black r g b / 0.22);\n}\n\n.rg-btn.selected:hover:not(:disabled) {\n  background:   var(--rg-solid-bg-hover);\n  border-color: var(--rg-solid-bg-hover);\n}\n\n.rg-btn:active:not(:disabled):not(.selected) {\n  background: var(--rg-subtle-bg-hover);\n  transform: translateY(1px);\n}\n\n.rg-btn:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n:host([variant="outlined"]) .rg-btn {\n  background:   transparent;\n  border-color: var(--rg-border);\n  color:        var(--rg-accent);\n}\n:host([variant="outlined"]) .rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--rg-subtle-bg);\n  border-color: var(--rg-accent);\n  color:        var(--rg-accent-hover);\n}\n:host([variant="outlined"]) .rg-btn.selected {\n  background:   var(--rg-solid-bg);\n  border-color: var(--rg-solid-bg);\n  color:        var(--rg-solid-color);\n}\n\n:host([variant="subtle"]) .rg-btn {\n  background:   transparent;\n  border-color: transparent;\n  color:        var(--rg-accent);\n}\n:host([variant="subtle"]) .rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--rg-subtle-bg);\n  border-color: transparent;\n  color:        var(--rg-accent-hover);\n}\n:host([variant="subtle"]) .rg-btn.selected {\n  background:   var(--rg-subtle-bg-hover);\n  border-color: transparent;\n  color:        var(--rg-accent-hover);\n  font-weight:  600;\n  box-shadow:   none;\n}\n\n:host([variant="filled"]) .rg-btn:not(.selected) {\n  background:   var(--surface-base);\n  border-color: var(--border-default);\n  color:        var(--color-text-muted);\n}\n\n:host([variant="filled"]) .rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--surface-raised);\n  border-color: var(--border-hover);\n  color:        var(--color-text-main);\n}\n\n:host([mode="button"]) .rg-container {\n  gap: 6px;\n}\n\n:host([mode="button-group"]) .rg-container {\n  gap: 0;\n}\n\n:host([mode="button-group"]) .rg-btn:not(.first):not(.only) {\n  margin-left: -1px;\n}\n\n:host([mode="button-group"]) .rg-btn.first {\n  border-radius: var(--rg-radius) 0 0 var(--rg-radius);\n}\n:host([mode="button-group"]) .rg-btn.inner {\n  border-radius: 0;\n}\n:host([mode="button-group"]) .rg-btn.last {\n  border-radius: 0 var(--rg-radius) var(--rg-radius) 0;\n}\n:host([mode="button-group"]) .rg-btn.only {\n  border-radius: var(--rg-radius);\n}\n\n:host([mode="button-group"]) .rg-btn:hover:not(:disabled),\n:host([mode="button-group"]) .rg-btn.selected {\n  position: relative;\n  z-index: 1;\n}\n\n:host([mode="segmented"]) .rg-container {\n  gap: 2px;\n  background:    var(--surface-raised);\n  border:        1px solid var(--border-subtle);\n  border-radius: calc(var(--rg-radius) + 2px);\n  padding:       2px;\n  flex-wrap:     nowrap;\n}\n\n:host([mode="segmented"]) .rg-btn {\n  background:    transparent;\n  border-color:  transparent;\n  color:         var(--color-text-muted);\n  border-radius: var(--rg-radius);\n  min-width:     var(--rg-min-width);\n  box-shadow:    none;\n  font-weight:   400;\n}\n\n:host([mode="segmented"]) .rg-btn:hover:not(:disabled):not(.selected) {\n  background:   var(--rg-subtle-bg);\n  border-color: transparent;\n  color:        var(--color-text-secondary, var(--color-text-main));\n}\n\n:host([mode="segmented"]) .rg-btn.selected {\n  background:   var(--rg-solid-bg);\n  border-color: transparent;\n  color:        var(--rg-solid-color);\n  font-weight:  500;\n  box-shadow:   0 1px 4px rgb(from black r g b / 0.35);\n}\n\n:host([mode="segmented"]) .rg-btn.selected:hover:not(:disabled) {\n  background: var(--rg-solid-bg-hover);\n}\n\n:host([mode="segmented"]:not([color])) .rg-btn.selected {\n  background: var(--color-gray-lighter);\n  color:      var(--color-text-main);\n}\n\n:host([mode="segmented"][variant="outlined"]) .rg-container {\n  border-color: var(--rg-border);\n}\n:host([mode="segmented"][variant="outlined"]) .rg-btn.selected {\n  background:   var(--rg-solid-bg);\n  border-color: transparent;\n  color:        var(--rg-solid-color);\n}\n\n.reset-btn,\n.clear-btn {\n  display:        inline-flex;\n  align-items:    center;\n  justify-content: center;\n  cursor:         pointer;\n  transition:     var(--reset-btn-transition);\n  flex-shrink:    0;\n  line-height:    1;\n  font-family:    inherit;\n  padding:        0;\n\n  width:          1.333em;\n  height:         1.333em;\n  border-radius:  var(--reset-btn-border-radius);\n  border:         none;\n  background:     var(--reset-btn-bg);\n  color:          var(--reset-btn-color);\n}\n\n.reset-btn:hover { background: var(--reset-btn-bg-hover); color: var(--reset-btn-color-hover); }\n.clear-btn:hover  { background: var(--clear-btn-bg-hover);  color: var(--clear-btn-color-hover); }\n\n:host([mode="button"]) .reset-btn,\n:host([mode="button"]) .clear-btn,\n:host([mode="button-group"]) .reset-btn,\n:host([mode="button-group"]) .clear-btn,\n:host([mode="segmented"]) .reset-btn,\n:host([mode="segmented"]) .clear-btn {\n  height:        var(--rg-height);\n  width:         var(--rg-height);\n  border-radius: var(--rg-radius);\n  font-size:     var(--rg-font-size);\n}\n\n:host([mode="button"]) .reset-btn,\n:host([mode="button"]) .clear-btn,\n:host([mode="button-group"]) .reset-btn,\n:host([mode="button-group"]) .clear-btn,\n:host([mode="segmented"]) .reset-btn,\n:host([mode="segmented"]) .clear-btn {\n  background:   transparent;\n  border:       1px solid var(--color-gray-light);\n  color:        var(--color-text-muted);\n}\n\n:host([mode="button"]) .reset-btn:hover,\n:host([mode="button-group"]) .reset-btn:hover,\n:host([mode="segmented"]) .reset-btn:hover {\n  background:   var(--border-subtle);\n  border-color: var(--color-gray-lighter);\n  color:        var(--color-text-main);\n}\n\n:host([mode="button"]) .clear-btn:hover,\n:host([mode="button-group"]) .clear-btn:hover,\n:host([mode="segmented"]) .clear-btn:hover {\n  background:   rgb(from var(--red) r g b / 0.10);\n  border-color: var(--color-gray-lighter);\n  color:        var(--color-danger);\n}\n\n:host([variant="outlined"][mode="button"]) .reset-btn,\n:host([variant="outlined"][mode="button"]) .clear-btn,\n:host([variant="outlined"][mode="button-group"]) .reset-btn,\n:host([variant="outlined"][mode="button-group"]) .clear-btn,\n:host([variant="outlined"][mode="segmented"]) .reset-btn,\n:host([variant="outlined"][mode="segmented"]) .clear-btn {\n  background:   transparent;\n  border-color: var(--rg-border);\n  color:        var(--rg-accent);\n}\n\n:host([variant="outlined"][mode="button"]) .reset-btn:hover,\n:host([variant="outlined"][mode="button-group"]) .reset-btn:hover,\n:host([variant="outlined"][mode="segmented"]) .reset-btn:hover {\n  background:   var(--border-subtle);\n  border-color: var(--rg-border-hover);\n  color:        var(--rg-accent-hover);\n}\n\n:host([variant="outlined"][mode="button"]) .clear-btn:hover,\n:host([variant="outlined"][mode="button-group"]) .clear-btn:hover,\n:host([variant="outlined"][mode="segmented"]) .clear-btn:hover {\n  background:   rgb(from var(--red) r g b / 0.10);\n  border-color: var(--rg-border-hover);\n  color:        var(--color-danger);\n}\n\n:host([variant="subtle"][mode="button"]) .reset-btn,\n:host([variant="subtle"][mode="button"]) .clear-btn,\n:host([variant="subtle"][mode="button-group"]) .reset-btn,\n:host([variant="subtle"][mode="button-group"]) .clear-btn,\n:host([variant="subtle"][mode="segmented"]) .reset-btn,\n:host([variant="subtle"][mode="segmented"]) .clear-btn {\n  background:   transparent;\n  border-color: transparent;\n  color:        var(--rg-accent);\n}\n\n:host([variant="subtle"][mode="button"]) .reset-btn:hover,\n:host([variant="subtle"][mode="button-group"]) .reset-btn:hover,\n:host([variant="subtle"][mode="segmented"]) .reset-btn:hover {\n  background:   var(--border-subtle);\n  border-color: transparent;\n  color:        var(--rg-accent-hover);\n}\n\n:host([variant="subtle"][mode="button"]) .clear-btn:hover,\n:host([variant="subtle"][mode="button-group"]) .clear-btn:hover,\n:host([variant="subtle"][mode="segmented"]) .clear-btn:hover {\n  background:   rgb(from var(--red) r g b / 0.10);\n  border-color: transparent;\n  color:        var(--color-danger);\n}\n';
-const _RadioGroup = class _RadioGroup extends AeicoField {
-  constructor() {
-    super();
-    __publicField(this, "fieldElement", null);
-    __publicField(this, "_slotEl", null);
-    __publicField(this, "_slotOptions", []);
-    __publicField(this, "_groupName");
-    // Single handler for radio inputs — handles both select and deselect.
-    // Only uses `click` (not `change`) because `change` fires before `click`;
-    // if we set value in `change`, the `click` handler would see the updated
-    // value and immediately deselect.
-    __publicField(this, "_boundOnRadioClick", (e) => {
-      const input = e.target;
-      const current = this.value ?? "";
-      if (input.value === current) {
-        if (this.allowEmpty) {
-          input.checked = false;
-          this.setValue("", { silent: false, action: "change" });
-        }
-      } else {
-        this.setValue(input.value, { silent: false, action: "change" });
-      }
-    });
-    __publicField(this, "_boundOnButtonClick", (e) => {
-      const btn = e.currentTarget;
-      const val = btn.dataset.value ?? "";
-      const current = this.value ?? "";
-      if (val === current) {
-        if (this.allowEmpty) {
-          this.setValue("", { silent: false, action: "change" });
-        }
-      } else {
-        this.setValue(val, { silent: false, action: "change" });
-      }
-    });
-    this._groupName = `rg-${++_RadioGroup._instanceCount}`;
-  }
-  _optLabel(opt) {
-    if (opt !== null && typeof opt === "object") {
-      return aeicoLocalize.t(String(opt.label), String(opt.label));
-    }
-    return String(opt);
-  }
-  _optValue(opt) {
-    if (opt !== null && typeof opt === "object") return String(opt.value);
-    return String(opt);
-  }
-  _allOptions() {
-    const from_props = (Array.isArray(this.options) ? this.options : []).map((o) => ({
-      label: this._optLabel(o),
-      value: this._optValue(o)
-    }));
-    const from_slot = this._slotOptions.map((el) => {
-      var _a2;
-      return {
-        label: ((_a2 = el.textContent) == null ? void 0 : _a2.trim()) || el.value,
-        value: el.value,
-        disabled: el.disabled
-      };
-    });
-    return [...from_props, ...from_slot];
-  }
-  _onSlotChange() {
-    if (!this._slotEl) return;
-    this._slotOptions = this._slotEl.assignedElements({ flatten: true }).filter(
-      (el) => el.tagName.toLowerCase() === "ae-radio"
-    );
-    this.update();
-  }
-  getValue() {
-    return this.value ?? "";
-  }
-  writeValue(_value2) {
-  }
-  onReset() {
-    this.setValue(this.defaultValue ?? "", { silent: false, action: "reset" });
-  }
-  onClear() {
-    this.setValue("", { silent: false, action: "clear" });
-  }
-  render() {
-    const mode = this.mode || "default";
-    const opts = this._allOptions();
-    const current = this.value ?? "";
-    return aeico.html(({ div, slot }) => {
-      div({ className: "rg-container" }, () => {
-        if (mode === "default") {
-          this._renderRadio(opts, current);
-        } else {
-          this._renderButtons(opts, current, mode);
-        }
-      });
-      if (this.allowEmpty) this.renderClearButton();
-      this.renderResetButton();
-      this._slotEl = slot({
-        style: { display: "none" },
-        "@slotchange": () => this._onSlotChange()
-      });
-    });
-  }
-  _renderRadio(opts, current) {
-    const { label, input, span } = aeico.tags;
-    for (const opt of opts) {
-      const isChecked = opt.value === current;
-      label({ key: `opt-${opt.value}`, className: "rg-radio-option" }, () => {
-        const el = input({
-          type: "radio",
-          className: "rg-radio-input",
-          name: this._groupName,
-          value: opt.value,
-          disabled: Boolean(this.disabled) || Boolean(opt.disabled),
-          "@click": this._boundOnRadioClick
-        });
-        el.checked = isChecked;
-        if (!this.fieldElement) this.fieldElement = el;
-        span({ className: "rg-radio-label", textContent: opt.label });
-      });
-    }
-  }
-  _renderButtons(opts, current, mode) {
-    const { button } = aeico.tags;
-    const count = opts.length;
-    for (let i = 0; i < count; i++) {
-      const opt = opts[i];
-      const isSelected = opt.value === current;
-      let posClass = "";
-      if (mode === "button-group") {
-        if (count === 1) posClass = " only";
-        else if (i === 0) posClass = " first";
-        else if (i === count - 1) posClass = " last";
-        else posClass = " inner";
-      }
-      button({
-        key: `opt-${opt.value}`,
-        className: `rg-btn${isSelected ? " selected" : ""}${posClass}`,
-        textContent: opt.label,
-        disabled: Boolean(this.disabled) || Boolean(opt.disabled),
-        "data-value": opt.value,
-        "@click": this._boundOnButtonClick
-      });
-    }
-  }
-};
-__publicField(_RadioGroup, "_instanceCount", 0);
-__publicField(_RadioGroup, "tagName", "radio-group");
-__publicField(_RadioGroup, "props", {
-  options: { type: Array },
-  mode: { type: String },
-  color: { type: String },
-  variant: { type: String },
-  size: { type: String },
-  allowEmpty: { type: Boolean }
-});
-__publicField(_RadioGroup, "styles", [styleVariables, sizeCSS, colorCSS, style$7]);
-let RadioGroup = _RadioGroup;
-RadioGroup.register();
-class Radio extends AeicoComponent {
-}
-__publicField(Radio, "tagName", "radio");
-/** No shadow DOM — this element is a transparent data/content carrier. */
-__publicField(Radio, "useShadowDOM", false);
-__publicField(Radio, "props", {
-  value: { type: String },
-  disabled: { type: Boolean }
-});
-Radio.register();
-const styles = ":host {\n  display: block;\n  font-size: var(--size-base);\n\n  --switch-field-gap: 4px;\n\n  --toggle-width:       2.667em;\n  --toggle-height:      1.333em;\n  --toggle-slider-size: 1em;\n  --toggle-gap:         calc((var(--toggle-height) - var(--toggle-slider-size)) / 2);\n  --toggle-border-radius: calc(var(--toggle-height) / 2);\n  --toggle-bg:          var(--color-gray);\n  --toggle-bg-checked:  var(--color-solid);\n  --toggle-slider-bg:   white;\n  --toggle-transition:  0.2s;\n\n  /* Default color when no [color] attribute — overridden by color.css :host([color=...]) */\n  --color-solid: var(--color-primary);\n}\n\n.switch-container {\n  display: flex;\n  align-items: center;\n  gap: var(--switch-field-gap);\n}\n\n.switch-wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  width: var(--toggle-width);\n  height: var(--toggle-height);\n  flex-shrink: 0;\n}\n\n.field-input {\n  position: absolute;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n  margin: 0;\n  z-index: 1;\n  border: none;\n  border-radius: 0;\n  background: none;\n  accent-color: unset;\n}\n\n.field-input:disabled {\n  cursor: not-allowed;\n}\n\n.toggle-slider {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--toggle-bg);\n  border-radius: var(--toggle-border-radius);\n  transition: var(--toggle-transition);\n  pointer-events: none;\n}\n\n.toggle-slider::before {\n  content: '';\n  position: absolute;\n  height: var(--toggle-slider-size);\n  width: var(--toggle-slider-size);\n  left: var(--toggle-gap);\n  top: var(--toggle-gap);\n  background: var(--toggle-slider-bg);\n  border-radius: 50%;\n  transition: var(--toggle-transition);\n}\n\n.field-input:checked + .toggle-slider {\n  background: var(--toggle-bg-checked);\n}\n\n.field-input:checked + .toggle-slider::before {\n  transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));\n}\n\n.field-input:disabled + .toggle-slider {\n  opacity: 0.5;\n  pointer-events: auto;\n}\n\n/* action buttons */\n.reset-btn,\n.clear-btn {\n  width: 1.333em;\n  height: 1.333em;\n  border: none;\n  border-radius: var(--reset-btn-border-radius);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--reset-btn-bg);\n  color: var(--reset-btn-color);\n  transition: var(--reset-btn-transition);\n  flex-shrink: 0;\n  line-height: 1;\n}\n\n.reset-btn:hover {\n  background: var(--reset-btn-bg-hover);\n  color: var(--reset-btn-color-hover);\n}\n\n.clear-btn:hover {\n  background: var(--clear-btn-bg-hover);\n  color: var(--clear-btn-color-hover);\n}\n";
-class Switch extends AeicoField {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "fieldElement", null);
-  }
-  getValue() {
-    var _a2;
-    return ((_a2 = this.fieldElement) == null ? void 0 : _a2.checked) ?? false;
-  }
-  writeValue(checked) {
-    if (this.fieldElement) {
-      this.fieldElement.checked = Boolean(checked);
-    }
-  }
-  getEventPayload(checked, oldChecked, action) {
-    return { checked, oldChecked, action };
-  }
-  setValue(checked, options) {
-    const oldChecked = this.getValue();
-    this.checked = checked;
-    this.writeValue(checked);
-    if ((options == null ? void 0 : options.silent) === false) {
-      this.emit("change", {
-        detail: this.getEventPayload(checked, oldChecked, options.action || "change")
-      });
-    }
-  }
-  reset(checked, options) {
-    this.setValue(checked !== void 0 ? checked : this.defaultChecked ?? false, {
-      ...options,
-      action: "reset"
-    });
-  }
-  clear(options) {
-    this.setValue(false, { ...options, action: "clear" });
-  }
-  render() {
-    return aeico.html(({ div, input, span }) => {
-      div({ className: "switch-container" }, () => {
-        div({ className: "switch-wrapper" }, () => {
-          this.fieldElement = input({
-            type: "checkbox",
-            className: "field-input",
-            checked: Boolean(this.checked),
-            disabled: Boolean(this.disabled),
-            "@change": this.boundOnChange
-          });
-          span({ className: "toggle-slider" });
-        });
-        this.renderActionButtons();
-      });
-    });
-  }
-}
-__publicField(Switch, "tagName", "switch");
-__publicField(Switch, "props", {
-  checked: { type: Boolean },
-  defaultChecked: { type: Boolean }
-});
-__publicField(Switch, "styles", [styleVariables, sizeCSS, colorCSS, styles]);
-Switch.register();
-const style$6 = ":host {\n  display: block;\n}\n\n/* Hide the separator template slot visually */\n.sep-template {\n  display: none !important;\n}\n\n.list {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  font-size: inherit;\n  line-height: 1.5;\n}\n";
-var __create$a = Object.create;
-var __defProp$a = Object.defineProperty;
-var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __knownSymbol$a = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
-var __typeError$a = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decoratorStart$a = (base) => [, , , __create$a((base == null ? void 0 : base[__knownSymbol$a("metadata")]) ?? null)];
-var __decoratorStrings$a = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn$a = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$a("Function expected") : fn;
-var __decoratorContext$a = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$a[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$a("Already initialized") : fns.push(__expectFn$a(fn || null)) });
-var __decoratorMetadata$a = (array, target) => __defNormalProp$a(target, __knownSymbol$a("metadata"), array[3]);
-var __runInitializers$a = (array, flags, self, value) => {
-  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
-  return value;
-};
-var __decorateElement$a = (array, flags, name, decorators, target, extra) => {
-  var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
-  var j = array.length + 1, key = __decoratorStrings$a[k + 5];
-  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
-  var desc = (target = target.prototype, __getOwnPropDesc$9({ get [name]() {
-    return __privateGet$9(this, extra);
-  }, set [name](x) {
-    return __privateSet$9(this, extra, x);
-  } }, name));
-  for (var i = decorators.length - 1; i >= 0; i--) {
-    ctx = __decoratorContext$a(k, name, done = {}, array[3], extraInitializers);
-    {
-      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
-      access.get = (x) => x[name];
-      access.set = (x, y) => x[name] = y;
-    }
-    it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
-    if (it === void 0) __expectFn$a(it) && (desc[key] = it);
-    else if (typeof it !== "object" || it === null) __typeError$a("Object expected");
-    else __expectFn$a(fn = it.get) && (desc.get = fn), __expectFn$a(fn = it.set) && (desc.set = fn), __expectFn$a(fn = it.init) && initializers.unshift(fn);
-  }
-  return desc && __defProp$a(target, name, desc), target;
-};
-var __publicField$a = (obj, key, value) => __defNormalProp$a(obj, typeof key !== "symbol" ? key + "" : key, value);
-var __accessCheck$9 = (obj, member, msg) => member.has(obj) || __typeError$a("Cannot " + msg);
-var __privateGet$9 = (obj, member, getter) => (__accessCheck$9(obj, member, "read from private field"), member.get(obj));
-var __privateAdd$9 = (obj, member, value) => member.has(obj) ? __typeError$a("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$9 = (obj, member, value, setter) => (__accessCheck$9(obj, member, "write to private field"), member.set(obj, value), value);
-var _color_dec$7, _separator_dec, _a$a, _init$a, _separator, _color$6;
-class Breadcrumb extends (_a$a = AeicoComponent, _separator_dec = [aeico.prop({ type: String })], _color_dec$7 = [aeico.prop({ type: String })], _a$a) {
-  constructor() {
-    super(...arguments);
-    __privateAdd$9(this, _separator, __runInitializers$a(_init$a, 8, this, "/")), __runInitializers$a(_init$a, 11, this);
-    __privateAdd$9(this, _color$6, __runInitializers$a(_init$a, 12, this)), __runInitializers$a(_init$a, 15, this);
-    __publicField$a(this, "_itemsSlot", null);
-    __publicField$a(this, "_sepSlot", null);
-    __publicField$a(this, "_syncSeparators", () => {
-      const items = this._getItems();
-      const sepEl = this._getSepElement();
-      items.forEach((item, i) => {
-        item.querySelectorAll("[data-ae-sep]").forEach((n) => n.remove());
-        const isLast = i === items.length - 1;
-        if (isLast) {
-          item.setAttribute("aria-current", "page");
-        } else {
-          item.removeAttribute("aria-current");
-        }
-        if (i === 0) return;
-        const wrapper = document.createElement("span");
-        wrapper.setAttribute("slot", "separator");
-        wrapper.setAttribute("data-ae-sep", "");
-        wrapper.setAttribute("aria-hidden", "true");
-        if (sepEl) {
-          wrapper.appendChild(sepEl.cloneNode(true));
-        } else {
-          wrapper.textContent = this.separator;
-        }
-        item.prepend(wrapper);
-      });
-    });
-  }
-  render() {
-    return aeico.html(({ nav, ol, slot }) => {
-      nav({ "aria-label": "breadcrumb", part: "nav" }, () => {
-        ol({ part: "list", className: "list" }, () => {
-          this._itemsSlot = slot({
-            "@slotchange": () => this._syncSeparators()
-          });
-        });
-      });
-      this._sepSlot = slot({
-        name: "separator",
-        className: "sep-template",
-        "@slotchange": () => this._syncSeparators()
-      });
-    });
-  }
-  onUpdated() {
-    this._syncSeparators();
-  }
-  _getItems() {
-    var _a2;
-    return ((_a2 = this._itemsSlot) == null ? void 0 : _a2.assignedElements()) ?? [];
-  }
-  _getSepElement() {
-    var _a2;
-    return ((_a2 = this._sepSlot) == null ? void 0 : _a2.assignedElements()[0]) ?? null;
-  }
-}
-_init$a = __decoratorStart$a(_a$a);
-_separator = /* @__PURE__ */ new WeakMap();
-_color$6 = /* @__PURE__ */ new WeakMap();
-__decorateElement$a(_init$a, 4, "separator", _separator_dec, Breadcrumb, _separator);
-__decorateElement$a(_init$a, 4, "color", _color_dec$7, Breadcrumb, _color$6);
-__decoratorMetadata$a(_init$a, Breadcrumb);
-__publicField$a(Breadcrumb, "tagName", "breadcrumb");
-__publicField$a(Breadcrumb, "styles", [styleVariables, colorCSS, style$6]);
-Breadcrumb.register();
-const style$5 = `:host {
-  display: contents;
-}
-
-.item {
-  display: inline-flex;
-  align-items: center;
-  list-style: none;
-  white-space: nowrap;
-}
-
-/* Separator — uses a fixed muted color that does NOT follow the breadcrumb's color prop */
-.sep {
-  display: inline-flex;
-  align-items: center;
-  color: var(--color-text-muted);
-  padding: 0 0.35em;
-  user-select: none;
-  pointer-events: none;
-  flex-shrink: 0;
-  font-size: 0.85em;
-}
-
-/* Hide separator on the first item */
-:host(:first-child) .sep,
-:host(:first-of-type) .sep {
-  display: none;
-}
-
-.label {
-  display: inline-flex;
-  align-items: center;
-  color: var(--color-text-muted);
-}
-
-/* Current page — last item */
-:host([aria-current="page"]) .label {
-  color: var(--color-text-main);
-  font-weight: 500;
-  cursor: default;
-}
-
-/* Link items */
-.label a {
-  color: var(--color-accent, var(--color-text-link));
-  text-decoration: none;
-  outline: none;
-}
-
-.label a:hover {
-  color: var(--color-accent-hover, var(--color-text-link-hover));
-  text-decoration: underline;
-}
-
-.label a:focus-visible {
-  outline: 2px solid var(--color-accent, var(--focus-ring-color));
-  outline-offset: 2px;
-  border-radius: 2px;
-}
-`;
-var __create$9 = Object.create;
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __knownSymbol$9 = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
-var __typeError$9 = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decoratorStart$9 = (base) => [, , , __create$9((base == null ? void 0 : base[__knownSymbol$9("metadata")]) ?? null)];
-var __decoratorStrings$9 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn$9 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$9("Function expected") : fn;
-var __decoratorContext$9 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$9[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$9("Already initialized") : fns.push(__expectFn$9(fn || null)) });
-var __decoratorMetadata$9 = (array, target) => __defNormalProp$9(target, __knownSymbol$9("metadata"), array[3]);
-var __runInitializers$9 = (array, flags, self, value) => {
-  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
-  return value;
-};
-var __decorateElement$9 = (array, flags, name, decorators, target, extra) => {
-  var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
-  var j = array.length + 1, key = __decoratorStrings$9[k + 5];
-  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
-  var desc = (target = target.prototype, __getOwnPropDesc$8({ get [name]() {
-    return __privateGet$8(this, extra);
-  }, set [name](x) {
-    return __privateSet$8(this, extra, x);
-  } }, name));
-  for (var i = decorators.length - 1; i >= 0; i--) {
-    ctx = __decoratorContext$9(k, name, done = {}, array[3], extraInitializers);
-    {
-      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
-      access.get = (x) => x[name];
-      access.set = (x, y) => x[name] = y;
-    }
-    it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
-    if (it === void 0) __expectFn$9(it) && (desc[key] = it);
-    else if (typeof it !== "object" || it === null) __typeError$9("Object expected");
-    else __expectFn$9(fn = it.get) && (desc.get = fn), __expectFn$9(fn = it.set) && (desc.set = fn), __expectFn$9(fn = it.init) && initializers.unshift(fn);
-  }
-  return desc && __defProp$9(target, name, desc), target;
-};
-var __publicField$9 = (obj, key, value) => __defNormalProp$9(obj, typeof key !== "symbol" ? key + "" : key, value);
-var __accessCheck$8 = (obj, member, msg) => member.has(obj) || __typeError$9("Cannot " + msg);
-var __privateGet$8 = (obj, member, getter) => (__accessCheck$8(obj, member, "read from private field"), member.get(obj));
-var __privateAdd$8 = (obj, member, value) => member.has(obj) ? __typeError$9("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$8 = (obj, member, value, setter) => (__accessCheck$8(obj, member, "write to private field"), member.set(obj, value), value);
-var _href_dec$1, _a$9, _init$9, _href$1;
-class BreadcrumbItem extends (_a$9 = AeicoComponent, _href_dec$1 = [aeico.prop({ type: String })], _a$9) {
-  constructor() {
-    super(...arguments);
-    __privateAdd$8(this, _href$1, __runInitializers$9(_init$9, 8, this)), __runInitializers$9(_init$9, 11, this);
-  }
-  render() {
-    return aeico.html(({ li, span, slot, a }) => {
-      li({ part: "item", className: "item" }, () => {
-        span({ part: "separator", className: "sep", "aria-hidden": "true" }, () => {
-          slot({ name: "separator" });
-        });
-        span({ part: "label", className: "label" }, () => {
-          if (this.href) {
-            a({ href: this.href, part: "link" }, () => {
-              slot();
-            });
-          } else {
-            slot();
-          }
-        });
-      });
-    });
-  }
-}
-_init$9 = __decoratorStart$9(_a$9);
-_href$1 = /* @__PURE__ */ new WeakMap();
-__decorateElement$9(_init$9, 4, "href", _href_dec$1, BreadcrumbItem, _href$1);
-__decoratorMetadata$9(_init$9, BreadcrumbItem);
-__publicField$9(BreadcrumbItem, "tagName", "breadcrumb-item");
-__publicField$9(BreadcrumbItem, "styles", [styleVariables, style$5]);
-BreadcrumbItem.register();
-const buttonStyle = `:host {
-  display: inline-block;
-  --btn-solid-bg:          var(--color-solid);
-  --btn-solid-bg-hover:    var(--color-solid-hover);
-  --btn-solid-bg-active:   var(--color-solid-active);
-  --btn-solid-color:       var(--color-on-solid);
-  --btn-solid-color-hover: var(--color-on-solid-hover);
-  --btn-border:            var(--color-border);
-  --btn-border-hover:      var(--color-border-hover);
-  --btn-accent:            var(--color-accent);
-  --btn-accent-hover:      var(--color-accent-hover);
-  --btn-subtle-bg:         var(--color-subtle);
-  --btn-subtle-bg-hover:   var(--color-subtle-hover);
-}
-
-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  font-family: inherit;
-  font-weight: 400;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  user-select: none;
-  cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-  outline: none;
-  position: relative;
-  padding: 0.429em 1.071em;
-  font-size: 1em;
-  line-height: 1.5;
-  border-radius: var(--_btn-r-tl, 4px) var(--_btn-r-tr, 4px) var(--_btn-r-br, 4px) var(--_btn-r-bl, 4px);
-  min-width: 4.571em;
-  height: 2.286em;
-  width: 100%;
-
-  background:   var(--btn-solid-bg);
-  border: 1px solid var(--btn-solid-bg);
-  color:        var(--btn-solid-color);
-}
-
-button:focus  { outline: none; }
-button:active { transform: translateY(1px); }
-
-button:hover:not(:disabled) {
-  background:   var(--btn-solid-bg-hover);
-  border-color: var(--btn-border-hover);
-  color:        var(--btn-solid-color-hover, var(--btn-solid-color));
-}
-
-button:active:not(:disabled) { background: var(--btn-solid-bg-active); }
-
-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-:host([size="xs"]) button { border-radius: var(--_btn-r-tl, 3px) var(--_btn-r-tr, 3px) var(--_btn-r-br, 3px) var(--_btn-r-bl, 3px); }
-:host([size="sm"]) button { border-radius: var(--_btn-r-tl, 3px) var(--_btn-r-tr, 3px) var(--_btn-r-br, 3px) var(--_btn-r-bl, 3px); }
-
-/* --- Variants --- */
-
-:host([variant="outlined"]) button {
-  background:   transparent;
-  border-color: var(--btn-border);
-  color:        var(--btn-accent);
-}
-
-:host([variant="outlined"]) button:hover:not(:disabled) {
-  background:   var(--btn-subtle-bg);
-  border-color: var(--btn-border-hover);
-  color:        var(--btn-accent-hover);
-}
-
-:host([variant="outlined"]) button:active:not(:disabled) {
-  background: var(--btn-subtle-bg-hover);
-}
-
-:host([variant="subtle"]) button {
-  background:   var(--btn-subtle-bg);
-  border-color: transparent;
-  color:        var(--btn-accent);
-}
-
-:host([variant="subtle"]) button:hover:not(:disabled) {
-  background: var(--btn-subtle-bg-hover);
-  color:      var(--btn-accent-hover);
-}
-
-:host([variant="subtle"]) button:active:not(:disabled) {
-  background: var(--btn-subtle-bg-hover);
-}
-
-:host([variant="faint"]) button {
-  background:   var(--btn-subtle-bg);
-  border-color: var(--btn-border);
-  color:        var(--btn-accent);
-}
-
-:host([variant="faint"]) button:hover:not(:disabled) {
-  background:   var(--btn-subtle-bg-hover);
-  border-color: var(--btn-border-hover);
-  color:        var(--btn-accent-hover);
-}
-
-:host([variant="faint"]) button:active:not(:disabled) {
-  background: var(--btn-subtle-bg-hover);
-}
-
-:host([variant="text"]) button {
-  background:   transparent;
-  border-color: transparent;
-  color:        var(--btn-accent);
-  min-width:     auto;
-  padding-left:  4px;
-  padding-right: 4px;
-}
-
-:host([variant="text"]) button:hover:not(:disabled) {
-  background: var(--btn-subtle-bg);
-  color:      var(--btn-accent-hover);
-}
-
-:host([variant="text"]) button:active:not(:disabled) {
-  background: var(--btn-subtle-bg-hover);
-}
-
-/* Icon-only: single ae-icon child → square compact layout */
-:host([icon-only]) {
-  display: inline-flex;
-}
-
-:host([icon-only]:not([size])) {
-  font-size: var(--size-m);
-}
-
-:host([icon-only]) button {
-  padding:   0;
-  min-width: auto;
-  width:     2.286em;
-  height:    2.286em;
-  line-height: 1;
-}
-
-:host([icon-only]) ::slotted(ae-icon) {
-  font-size: 1.5em;
-}
-
-:host([active]) button {
-  background:   var(--btn-solid-bg-active);
-  border-color: var(--btn-border-hover);
-  color:        var(--btn-solid-color-hover, var(--btn-solid-color));
-}
-
-.btn-icon {
-  padding: 0;
-  min-width: auto;
-  width: 2.286em;
-  height: 2.286em;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-}
-
-.btn-icon.btn-lg {
-  width: 2.857em;
-  height: 2.857em;
-}
-
-.btn-circle {
-  border-radius: 50%;
-}
-
-:host([block]) {
-  display: block;
-}
-
-button.btn-loading {
-  position: relative;
-  pointer-events: none;
-  color: transparent;
-}
-
-button.btn-loading::before {
-  content: '';
-  position: absolute;
-  width: 1em;
-  height: 1em;
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: btn-spin 0.6s linear infinite;
-  color: currentColor;
-  opacity: 0.8;
-}
-
-@keyframes btn-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.btn-icon-left {
-  margin-right: -2px;
-}
-
-.btn-icon-right {
-  margin-left: -2px;
-}
-
-`;
-var __create$8 = Object.create;
-var __defProp$8 = Object.defineProperty;
-var __knownSymbol$8 = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
-var __typeError$8 = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decoratorStart$8 = (base) => [, , , __create$8((base == null ? void 0 : base[__knownSymbol$8("metadata")]) ?? null)];
-var __decoratorStrings$8 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn$8 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$8("Function expected") : fn;
-var __decoratorContext$8 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$8[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$8("Already initialized") : fns.push(__expectFn$8(fn || null)) });
-var __decoratorMetadata$8 = (array, target) => __defNormalProp$8(target, __knownSymbol$8("metadata"), array[3]);
-var __runInitializers$8 = (array, flags, self, value) => {
-  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
-  return value;
-};
-var __decorateElement$8 = (array, flags, name, decorators, target, extra) => {
-  var it, done, ctx, access, k = flags & 7, s = false, p = false;
-  var j = array.length + 1;
-  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
-  target = target.prototype, k < 5;
-  for (var i = decorators.length - 1; i >= 0; i--) {
-    ctx = __decoratorContext$8(k, name, done = {}, array[3], extraInitializers);
-    {
-      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
-      access.get = (x) => x[name];
-      access.set = (x, y) => x[name] = y;
-    }
-    it = (0, decorators[i])(void 0, ctx), done._ = 1;
-    __expectFn$8(it) && initializers.unshift(it);
-  }
-  return target;
-};
-var __publicField$8 = (obj, key, value) => __defNormalProp$8(obj, typeof key !== "symbol" ? key + "" : key, value);
-var _block_dec, _active_dec$1, _type_dec$1, _disabled_dec$4, _size_dec$2, _variant_dec$4, _color_dec$6, _a$8, _init$8;
-class Button extends (_a$8 = AeicoComponent, _color_dec$6 = [aeico.prop({ type: String })], _variant_dec$4 = [aeico.prop({ type: String })], _size_dec$2 = [aeico.prop({ type: String })], _disabled_dec$4 = [aeico.prop({ type: Boolean })], _type_dec$1 = [aeico.prop({ type: String })], _active_dec$1 = [aeico.prop({ type: Boolean })], _block_dec = [aeico.prop({ type: Boolean })], _a$8) {
-  constructor() {
-    super(...arguments);
-    __publicField$8(this, "color", __runInitializers$8(_init$8, 8, this)), __runInitializers$8(_init$8, 11, this);
-    __publicField$8(this, "variant", __runInitializers$8(_init$8, 12, this)), __runInitializers$8(_init$8, 15, this);
-    __publicField$8(this, "size", __runInitializers$8(_init$8, 16, this)), __runInitializers$8(_init$8, 19, this);
-    __publicField$8(this, "disabled", __runInitializers$8(_init$8, 20, this)), __runInitializers$8(_init$8, 23, this);
-    __publicField$8(this, "type", __runInitializers$8(_init$8, 24, this)), __runInitializers$8(_init$8, 27, this);
-    __publicField$8(this, "active", __runInitializers$8(_init$8, 28, this)), __runInitializers$8(_init$8, 31, this);
-    __publicField$8(this, "block", __runInitializers$8(_init$8, 32, this)), __runInitializers$8(_init$8, 35, this);
-    __publicField$8(this, "buttonElement", null);
-    __publicField$8(this, "_autoAriaLabel", false);
-    __publicField$8(this, "_handleSlotChange", () => {
-      var _a2;
-      const slot = (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector("slot:not([name])");
-      const nodes = (slot == null ? void 0 : slot.assignedNodes()) ?? [];
-      const elements = nodes.filter((n) => n.nodeType === Node.ELEMENT_NODE);
-      const hasText = nodes.some(
-        (n) => n.nodeType === Node.TEXT_NODE && n.textContent.trim() !== ""
-      );
-      const isIconOnly = !hasText && elements.length === 1 && elements[0].tagName.toLowerCase() === "ae-icon";
-      if (isIconOnly) {
-        this.setAttribute("icon-only", "");
-        if (!this.hasAttribute("aria-label") || this._autoAriaLabel) {
-          this.setAttribute("aria-label", elements[0].getAttribute("name") ?? "");
-          this._autoAriaLabel = true;
-        }
-      } else {
-        this.removeAttribute("icon-only");
-        if (this._autoAriaLabel) {
-          this.removeAttribute("aria-label");
-          this._autoAriaLabel = false;
-        }
-      }
-    });
-  }
-  onMounted() {
-    var _a2;
-    const slot = (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector("slot:not([name])");
-    if (slot) this.listen(slot, "slotchange", this._handleSlotChange);
-    this._handleSlotChange();
-  }
-  render() {
-    return aeico.html(({ button, slot }) => {
-      this.buttonElement = button(
-        {
-          type: this.type || "button",
-          disabled: this.disabled,
-          part: "button",
-          "aria-pressed": this.active,
-          "aria-disabled": this.disabled
-        },
-        () => {
-          slot();
-        }
-      );
-    });
-  }
-  /**
-   * Programmatically click the button
-   */
-  click() {
-    if (!this.disabled && this.buttonElement) {
-      this.buttonElement.click();
-    }
-  }
-  /**
-   * Focus the button
-   */
-  focus() {
-    if (this.buttonElement) {
-      this.buttonElement.focus();
-    }
-  }
-  /**
-   * Blur the button
-   */
-  blur() {
-    if (this.buttonElement) {
-      this.buttonElement.blur();
-    }
-  }
-}
-_init$8 = __decoratorStart$8(_a$8);
-__decorateElement$8(_init$8, 5, "color", _color_dec$6, Button);
-__decorateElement$8(_init$8, 5, "variant", _variant_dec$4, Button);
-__decorateElement$8(_init$8, 5, "size", _size_dec$2, Button);
-__decorateElement$8(_init$8, 5, "disabled", _disabled_dec$4, Button);
-__decorateElement$8(_init$8, 5, "type", _type_dec$1, Button);
-__decorateElement$8(_init$8, 5, "active", _active_dec$1, Button);
-__decorateElement$8(_init$8, 5, "block", _block_dec, Button);
-__decoratorMetadata$8(_init$8, Button);
-__publicField$8(Button, "styles", [styleVariables, sizeCSS, colorCSS, buttonStyle]);
-Button.register();
-const style$4 = ":host {\n  display: inline-block;\n  position: relative;\n\n  --dropdown-z-index: 1000;\n  --dropdown-bg: var(--surface-overlay, #fff);\n  --dropdown-border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));\n  --dropdown-border-radius: var(--ae-radius-md, 6px);\n  --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  --dropdown-min-width: 10rem;\n  --dropdown-padding: 0.25rem 0;\n}\n\n.trigger-wrapper {\n  display: flex;\n  align-items: stretch;\n  height: 100%;\n}\n\n/* Internal trigger rendered when `label` prop is set.\n   Uses --dropdown-trigger-* variables. Context components (e.g. ae-navbar)\n   map their own tokens to these variables via ::slotted(ae-dropdown). */\n.trigger-label {\n  display: inline-flex;\n  align-items: center;\n  height: var(--dropdown-trigger-height, auto);\n  padding: 0 var(--dropdown-trigger-padding-x, 0.75rem);\n  color: var(--dropdown-trigger-color, inherit);\n  background: var(--dropdown-trigger-bg, none);\n  border: none;\n  border-radius: var(--dropdown-trigger-radius, 0);\n  -webkit-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--dropdown-trigger-font-size, inherit);\n  white-space: nowrap;\n  transition: color 0.15s ease, background-color 0.15s ease;\n  outline-offset: 2px;\n}\n\n.trigger-label:hover {\n  color: var(--dropdown-trigger-hover-color, inherit);\n  background-color: var(--dropdown-trigger-hover-bg, transparent);\n}\n\n:host([disabled]) .trigger-label {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Bootstrap-style CSS border caret — shadow DOM only, no global injection needed */\n.ae-dropdown-arrow {\n  display: inline-block;\n  width: 0;\n  height: 0;\n  margin-left: 0.3em;\n  vertical-align: 0.2em;\n  flex-shrink: 0;\n}\n.ae-dropdown-arrow--bottom {\n  border-top: 0.35em solid;\n  border-right: 0.35em solid transparent;\n  border-left: 0.35em solid transparent;\n}\n.ae-dropdown-arrow--top {\n  border-bottom: 0.35em solid;\n  border-right: 0.35em solid transparent;\n  border-left: 0.35em solid transparent;\n}\n.ae-dropdown-arrow--right {\n  border-left: 0.35em solid;\n  border-top: 0.35em solid transparent;\n  border-bottom: 0.35em solid transparent;\n}\n.ae-dropdown-arrow--left {\n  border-right: 0.35em solid;\n  border-top: 0.35em solid transparent;\n  border-bottom: 0.35em solid transparent;\n}\n\n.panel {\n  display: none;\n  position: absolute;\n  z-index: var(--dropdown-z-index);\n  background: var(--dropdown-bg);\n  border: var(--dropdown-border);\n  border-radius: var(--dropdown-border-radius);\n  box-shadow: var(--dropdown-shadow);\n  min-width: var(--dropdown-min-width);\n  padding: var(--dropdown-padding);\n  box-sizing: border-box;\n  /* Prevent panel from being wider than viewport */\n  max-width: calc(100vw - 16px);\n}\n\n.panel.open {\n  display: block;\n}\n\n/* placement variants */\n.panel.placement-bottom-start {\n  top: 100%;\n  left: 0;\n  margin-top: 4px;\n}\n\n.panel.placement-bottom-end {\n  top: 100%;\n  right: 0;\n  margin-top: 4px;\n}\n\n.panel.placement-bottom {\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-top: 4px;\n}\n\n.panel.placement-top-start {\n  bottom: 100%;\n  left: 0;\n  margin-bottom: 4px;\n}\n\n.panel.placement-top-end {\n  bottom: 100%;\n  right: 0;\n  margin-bottom: 4px;\n}\n\n.panel.placement-top {\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-bottom: 4px;\n}\n\n/* right placements */\n.panel.placement-right-start {\n  top: 0;\n  left: 100%;\n  margin-left: 4px;\n}\n\n.panel.placement-right-end {\n  bottom: 0;\n  left: 100%;\n  margin-left: 4px;\n}\n\n.panel.placement-right {\n  top: 50%;\n  left: 100%;\n  transform: translateY(-50%);\n  margin-left: 4px;\n}\n\n/* left placements */\n.panel.placement-left-start {\n  top: 0;\n  right: 100%;\n  margin-right: 4px;\n}\n\n.panel.placement-left-end {\n  bottom: 0;\n  right: 100%;\n  margin-right: 4px;\n}\n\n.panel.placement-left {\n  top: 50%;\n  right: 100%;\n  transform: translateY(-50%);\n  margin-right: 4px;\n}\n";
-const style$3 = `:host {
-  display: block;
-
-  --dropdown-item-padding: 0.5rem 0.875rem;
-  --dropdown-item-bg: transparent;
-  --dropdown-item-bg-hover: var(--surface-raised, rgba(0, 0, 0, 0.05));
-  --dropdown-item-bg-active: var(--surface-raised-active, rgba(0, 0, 0, 0.1));
-  --dropdown-item-color: var(--color-text-main, inherit);
-  --dropdown-item-color-disabled: var(--color-text-disabled, rgba(0, 0, 0, 0.35));
-  --dropdown-item-font-size: 0.9375rem;
-  --dropdown-item-gap: 0.5rem;
-  --dropdown-item-transition: background 0.1s;
-  --dropdown-item-border-radius: var(--ae-radius-sm, 4px);
-}
-
-.item {
-  display: flex;
-  align-items: center;
-  gap: var(--dropdown-item-gap);
-  width: 100%;
-  padding: var(--dropdown-item-padding);
-  font-size: var(--dropdown-item-font-size);
-  font-family: inherit;
-  color: var(--dropdown-item-color);
-  background: var(--dropdown-item-bg);
-  border: none;
-  border-radius: var(--dropdown-item-border-radius);
-  text-align: left;
-  text-decoration: none;
-  cursor: pointer;
-  user-select: none;
-  white-space: nowrap;
-  box-sizing: border-box;
-  transition: var(--dropdown-item-transition);
-  outline: none;
-}
-
-.item:hover:not(:disabled):not([aria-disabled="true"]) {
-  background: var(--dropdown-item-bg-hover);
-}
-
-.item:active:not(:disabled):not([aria-disabled="true"]) {
-  background: var(--dropdown-item-bg-active);
-}
-
-.item:focus-visible {
-  background: var(--dropdown-item-bg-hover);
-  outline: 2px solid var(--color-primary, #0e639c);
-  outline-offset: -2px;
-}
-
-/* disabled */
-:host([disabled]) .item,
-.item:disabled {
-  color: var(--dropdown-item-color-disabled);
-  cursor: default;
-  pointer-events: none;
-}
-
-/* Active item — current selection, current route, etc. */
-:host([active]) .item {
-  background: var(--dropdown-item-bg-selected, rgba(0, 0, 0, 0.06));
-  color: var(--dropdown-item-color-active, var(--color-primary, #0e639c));
-  font-weight: 500;
-}
-
-/* Checkbox mode — fixed-width indicator column */
-.check-indicator {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1em;
-  flex-shrink: 0;
-}
-
-/* CSS-drawn checkmark (border trick) */
-.check-indicator::after {
-  content: '';
-  display: block;
-  width: 0.3em;
-  height: 0.55em;
-  border-right: 0.125em solid currentColor;
-  border-bottom: 0.125em solid currentColor;
-  transform: rotate(45deg) translateY(-0.1em);
-  opacity: 0;
-  transition: opacity 0.1s;
-}
-
-:host([checked]) .check-indicator::after {
-  opacity: 1;
-}
-`;
-const style$2 = ":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 20px;\n  width:  1em;\n  height: 1em;\n  color: inherit;\n  flex-shrink: 0;\n  line-height: 0;\n  vertical-align: middle;\n}\n\n:host([color]) {\n  color: var(--color-solid);\n}\n\n.icon-svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  fill: var(--icon-fill, currentColor);\n  stroke: var(--icon-stroke, none);\n  stroke-width: var(--icon-stroke-width, 2);\n  stroke-linecap: var(--icon-stroke-linecap, round);\n  stroke-linejoin: var(--icon-stroke-linejoin, round);\n  pointer-events: none;\n  overflow: visible;\n}\n";
-const defaultViewBox = "0 0 24 24";
-class IconRegistry {
-  static add(icons) {
-    for (const [name, data] of Object.entries(icons)) {
-      if (typeof data === "string") {
-        this._icons.set(name, { path: data, viewBox: defaultViewBox });
-      } else {
-        this._icons.set(name, data);
-      }
-    }
-  }
-  static get(name) {
-    return this._icons.get(name);
-  }
-  static has(name) {
-    return this._icons.has(name);
-  }
-}
-__publicField(IconRegistry, "_icons", /* @__PURE__ */ new Map());
-class Icon extends AeicoComponent {
-  render() {
-    const def = this.name ? IconRegistry.get(this.name) : void 0;
-    const numericSize = Number(this.size);
-    if (this.size !== void 0 && !isNaN(numericSize) && numericSize > 0) {
-      this.style.setProperty("font-size", `${numericSize}px`);
-    } else {
-      this.style.removeProperty("font-size");
-    }
-    const useStroke = this.stroke ?? (def == null ? void 0 : def.stroke) ?? false;
-    const useStrokeWidth = this.strokeWidth ?? (def == null ? void 0 : def.strokeWidth) ?? 2;
-    if (useStroke) {
-      this.style.setProperty("--icon-fill", "none");
-      this.style.setProperty("--icon-stroke", "currentColor");
-      this.style.setProperty("--icon-stroke-width", String(useStrokeWidth));
-    } else {
-      this.style.removeProperty("--icon-fill");
-      this.style.removeProperty("--icon-stroke");
-      this.style.removeProperty("--icon-stroke-width");
-    }
-    if (!def) return;
-    return aeico.html(({ svg, path }) => {
-      svg(
-        {
-          className: "icon-svg",
-          viewBox: def.viewBox ?? defaultViewBox,
-          "aria-hidden": "true",
-          xmlns: SVG_NS
-        },
-        () => {
-          path({ d: def.path });
-        }
-      );
-    });
-  }
-}
-__publicField(Icon, "tagName", "icon");
-__publicField(Icon, "props", {
-  name: { type: String },
-  size: { type: String },
-  color: { type: String },
-  stroke: { type: Boolean },
-  strokeWidth: { type: Number }
-});
-__publicField(Icon, "styles", [styleVariables, sizeCSS, colorCSS, style$2]);
-Icon.register();
-var __create$7 = Object.create;
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __knownSymbol$7 = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
-var __typeError$7 = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decoratorStart$7 = (base) => [, , , __create$7((base == null ? void 0 : base[__knownSymbol$7("metadata")]) ?? null)];
-var __decoratorStrings$7 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn$7 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$7("Function expected") : fn;
-var __decoratorContext$7 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$7[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$7("Already initialized") : fns.push(__expectFn$7(fn || null)) });
-var __decoratorMetadata$7 = (array, target) => __defNormalProp$7(target, __knownSymbol$7("metadata"), array[3]);
-var __runInitializers$7 = (array, flags, self, value) => {
-  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
-  return value;
-};
-var __decorateElement$7 = (array, flags, name, decorators, target, extra) => {
-  var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
-  var j = array.length + 1, key = __decoratorStrings$7[k + 5];
-  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
-  var desc = (target = target.prototype, __getOwnPropDesc$7({ get [name]() {
-    return __privateGet$7(this, extra);
-  }, set [name](x) {
-    return __privateSet$7(this, extra, x);
-  } }, name));
-  for (var i = decorators.length - 1; i >= 0; i--) {
-    ctx = __decoratorContext$7(k, name, done = {}, array[3], extraInitializers);
-    {
-      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
-      access.get = (x) => x[name];
-      access.set = (x, y) => x[name] = y;
-    }
-    it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
-    if (it === void 0) __expectFn$7(it) && (desc[key] = it);
-    else if (typeof it !== "object" || it === null) __typeError$7("Object expected");
-    else __expectFn$7(fn = it.get) && (desc.get = fn), __expectFn$7(fn = it.set) && (desc.set = fn), __expectFn$7(fn = it.init) && initializers.unshift(fn);
-  }
-  return desc && __defProp$7(target, name, desc), target;
-};
-var __publicField$7 = (obj, key, value) => __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
-var __accessCheck$7 = (obj, member, msg) => member.has(obj) || __typeError$7("Cannot " + msg);
-var __privateGet$7 = (obj, member, getter) => (__accessCheck$7(obj, member, "read from private field"), member.get(obj));
-var __privateAdd$7 = (obj, member, value) => member.has(obj) ? __typeError$7("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$7 = (obj, member, value, setter) => (__accessCheck$7(obj, member, "write to private field"), member.set(obj, value), value);
-var _active_dec, _checked_dec, _type_dec, _href_dec, _disabled_dec$3, _value_dec, _a$7, _init$7, _value, _disabled$3, _href, _type, _checked, _active;
-class DropdownItem extends (_a$7 = AeicoComponent, _value_dec = [aeico.prop({ type: String })], _disabled_dec$3 = [aeico.prop({ type: Boolean })], _href_dec = [aeico.prop({ type: String })], _type_dec = [aeico.prop({ type: String })], _checked_dec = [aeico.prop({ type: Boolean })], _active_dec = [aeico.prop({ type: Boolean })], _a$7) {
-  constructor() {
-    super(...arguments);
-    __privateAdd$7(this, _value, __runInitializers$7(_init$7, 8, this)), __runInitializers$7(_init$7, 11, this);
-    __privateAdd$7(this, _disabled$3, __runInitializers$7(_init$7, 12, this, false)), __runInitializers$7(_init$7, 15, this);
-    __privateAdd$7(this, _href, __runInitializers$7(_init$7, 16, this)), __runInitializers$7(_init$7, 19, this);
-    __privateAdd$7(this, _type, __runInitializers$7(_init$7, 20, this)), __runInitializers$7(_init$7, 23, this);
-    __privateAdd$7(this, _checked, __runInitializers$7(_init$7, 24, this, false)), __runInitializers$7(_init$7, 27, this);
-    __privateAdd$7(this, _active, __runInitializers$7(_init$7, 28, this, false)), __runInitializers$7(_init$7, 31, this);
-    __publicField$7(this, "_handleClick", (e) => {
-      var _a2;
-      if (this.disabled) {
-        e.preventDefault();
-        e.stopPropagation();
-        return;
-      }
-      if (this.type === "checkbox") {
-        this.checked = !this.checked;
-      }
-      const label = ((_a2 = this.textContent) == null ? void 0 : _a2.trim()) ?? "";
-      this.dispatchEvent(
-        new CustomEvent("_item-select", {
-          bubbles: true,
-          composed: true,
-          detail: { value: this.value ?? "", label, checked: this.checked }
-        })
-      );
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.listen("click", this._handleClick);
-    this.setAttribute("role", "menuitem");
-  }
-  render() {
-    const isCheckbox = this.type === "checkbox";
-    const sharedProps = {
-      part: "item",
-      className: "item",
-      "aria-checked": isCheckbox ? String(this.checked) : void 0
-    };
-    return aeico.html(({ button, a, span, slot }) => {
-      const children = () => {
-        if (isCheckbox) span({ className: "check-indicator", "aria-hidden": "true" });
-        slot();
-      };
-      if (this.href) {
-        a(
-          {
-            ...sharedProps,
-            href: this.disabled ? void 0 : this.href,
-            "aria-disabled": this.disabled || void 0
-          },
-          children
-        );
-      } else {
-        button(
-          {
-            ...sharedProps,
-            type: "button",
-            disabled: this.disabled
-          },
-          children
-        );
-      }
-    });
-  }
-}
-_init$7 = __decoratorStart$7(_a$7);
-_value = /* @__PURE__ */ new WeakMap();
-_disabled$3 = /* @__PURE__ */ new WeakMap();
-_href = /* @__PURE__ */ new WeakMap();
-_type = /* @__PURE__ */ new WeakMap();
-_checked = /* @__PURE__ */ new WeakMap();
-_active = /* @__PURE__ */ new WeakMap();
-__decorateElement$7(_init$7, 4, "value", _value_dec, DropdownItem, _value);
-__decorateElement$7(_init$7, 4, "disabled", _disabled_dec$3, DropdownItem, _disabled$3);
-__decorateElement$7(_init$7, 4, "href", _href_dec, DropdownItem, _href);
-__decorateElement$7(_init$7, 4, "type", _type_dec, DropdownItem, _type);
-__decorateElement$7(_init$7, 4, "checked", _checked_dec, DropdownItem, _checked);
-__decorateElement$7(_init$7, 4, "active", _active_dec, DropdownItem, _active);
-__decoratorMetadata$7(_init$7, DropdownItem);
-__publicField$7(DropdownItem, "tagName", "dropdown-item");
-__publicField$7(DropdownItem, "styles", [styleVariables, style$3]);
-DropdownItem.register();
-var __create$6 = Object.create;
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __knownSymbol$6 = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
-var __typeError$6 = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decoratorStart$6 = (base) => [, , , __create$6((base == null ? void 0 : base[__knownSymbol$6("metadata")]) ?? null)];
-var __decoratorStrings$6 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn$6 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$6("Function expected") : fn;
-var __decoratorContext$6 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$6[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$6("Already initialized") : fns.push(__expectFn$6(fn || null)) });
-var __decoratorMetadata$6 = (array, target) => __defNormalProp$6(target, __knownSymbol$6("metadata"), array[3]);
-var __runInitializers$6 = (array, flags, self, value) => {
-  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
-  return value;
-};
-var __decorateElement$6 = (array, flags, name, decorators, target, extra) => {
-  var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
-  var j = array.length + 1, key = __decoratorStrings$6[k + 5];
-  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
-  var desc = (target = target.prototype, __getOwnPropDesc$6({ get [name]() {
-    return __privateGet$6(this, extra);
-  }, set [name](x) {
-    return __privateSet$6(this, extra, x);
-  } }, name));
-  for (var i = decorators.length - 1; i >= 0; i--) {
-    ctx = __decoratorContext$6(k, name, done = {}, array[3], extraInitializers);
-    {
-      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
-      access.get = (x) => x[name];
-      access.set = (x, y) => x[name] = y;
-    }
-    it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
-    if (it === void 0) __expectFn$6(it) && (desc[key] = it);
-    else if (typeof it !== "object" || it === null) __typeError$6("Object expected");
-    else __expectFn$6(fn = it.get) && (desc.get = fn), __expectFn$6(fn = it.set) && (desc.set = fn), __expectFn$6(fn = it.init) && initializers.unshift(fn);
-  }
-  return desc && __defProp$6(target, name, desc), target;
-};
-var __publicField$6 = (obj, key, value) => __defNormalProp$6(obj, typeof key !== "symbol" ? key + "" : key, value);
-var __accessCheck$6 = (obj, member, msg) => member.has(obj) || __typeError$6("Cannot " + msg);
-var __privateGet$6 = (obj, member, getter) => (__accessCheck$6(obj, member, "read from private field"), member.get(obj));
-var __privateAdd$6 = (obj, member, value) => member.has(obj) ? __typeError$6("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$6 = (obj, member, value, setter) => (__accessCheck$6(obj, member, "write to private field"), member.set(obj, value), value);
-var _label_dec, _disabled_dec$2, _closeOnSelect_dec$1, _open_dec$1, _placement_dec$1, _a$6, _init$6, _placement$1, _open$1, _closeOnSelect$1, _disabled$2, _label;
-class Dropdown extends (_a$6 = AeicoComponent, _placement_dec$1 = [aeico.prop({ type: String })], _open_dec$1 = [aeico.prop({ type: Boolean })], _closeOnSelect_dec$1 = [aeico.prop({ type: Boolean })], _disabled_dec$2 = [aeico.prop({ type: Boolean })], _label_dec = [aeico.prop({ type: String })], _a$6) {
-  constructor() {
-    super(...arguments);
-    __privateAdd$6(this, _placement$1, __runInitializers$6(_init$6, 8, this, "bottom-start")), __runInitializers$6(_init$6, 11, this);
-    __privateAdd$6(this, _open$1, __runInitializers$6(_init$6, 12, this, false)), __runInitializers$6(_init$6, 15, this);
-    __privateAdd$6(this, _closeOnSelect$1, __runInitializers$6(_init$6, 16, this, true)), __runInitializers$6(_init$6, 19, this);
-    __privateAdd$6(this, _disabled$2, __runInitializers$6(_init$6, 20, this, false)), __runInitializers$6(_init$6, 23, this);
-    __privateAdd$6(this, _label, __runInitializers$6(_init$6, 24, this, "")), __runInitializers$6(_init$6, 27, this);
-    __publicField$6(this, "_outsideClickHandler", null);
-    __publicField$6(this, "_handleTriggerClick", () => {
-      this.toggle();
-    });
-    __publicField$6(this, "_handleItemSelect", (e) => {
-      this.emit("select", { detail: e.detail });
-      if (this.closeOnSelect) {
-        this._closePanel();
-      }
-    });
-    __publicField$6(this, "_handleKeydown", (e) => {
-      if (e.key === "Escape" && this.open) {
-        e.stopPropagation();
-        this._closePanel();
-      }
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.listen("_item-select", this._handleItemSelect);
-    this.listen("keydown", this._handleKeydown);
-    this._outsideClickHandler = (e) => {
-      if (!this.open) return;
-      const path = e.composedPath();
-      if (!path.includes(this)) {
-        this._closePanel();
-      }
-    };
-    document.addEventListener("click", this._outsideClickHandler);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this._outsideClickHandler) {
-      document.removeEventListener("click", this._outsideClickHandler);
-      this._outsideClickHandler = null;
-    }
-  }
-  /** Opens the dropdown panel. */
-  show() {
-    if (this.disabled || this.open) return;
-    this.open = true;
-    this.emit("open");
-  }
-  /** Closes the dropdown panel. */
-  hide() {
-    if (!this.open) return;
-    this.open = false;
-    this.emit("close");
-  }
-  /** Toggles the dropdown panel open/closed. */
-  toggle() {
-    if (this.open) {
-      this.hide();
-    } else {
-      this.show();
-    }
-  }
-  _closePanel() {
-    if (this.open) this.hide();
-  }
-  render() {
-    const placementClass = `placement-${this.placement}`;
-    const hasLabel = !!this.label;
-    const dir = this.placement.split("-")[0];
-    return aeico.html(({ div, slot, button, span }) => {
-      div(
-        {
-          className: "trigger-wrapper",
-          "aria-haspopup": "menu",
-          "aria-expanded": String(this.open),
-          "@click": this.disabled ? void 0 : this._handleTriggerClick
-        },
-        () => {
-          if (hasLabel) {
-            button(
-              {
-                className: "trigger-label",
-                type: "button",
-                disabled: this.disabled || void 0
-              },
-              () => {
-                span({ text: this.label });
-                span({
-                  className: `ae-dropdown-arrow ae-dropdown-arrow--${dir}`,
-                  "aria-hidden": "true"
-                });
-              }
-            );
-          } else {
-            slot({ name: "trigger" });
-          }
-        }
-      );
-      div(
-        {
-          part: "panel",
-          className: { panel: true, open: this.open, [placementClass]: true },
-          role: "menu"
-        },
-        () => {
-          slot();
-        }
-      );
-    });
-  }
-}
-_init$6 = __decoratorStart$6(_a$6);
-_placement$1 = /* @__PURE__ */ new WeakMap();
-_open$1 = /* @__PURE__ */ new WeakMap();
-_closeOnSelect$1 = /* @__PURE__ */ new WeakMap();
-_disabled$2 = /* @__PURE__ */ new WeakMap();
-_label = /* @__PURE__ */ new WeakMap();
-__decorateElement$6(_init$6, 4, "placement", _placement_dec$1, Dropdown, _placement$1);
-__decorateElement$6(_init$6, 4, "open", _open_dec$1, Dropdown, _open$1);
-__decorateElement$6(_init$6, 4, "closeOnSelect", _closeOnSelect_dec$1, Dropdown, _closeOnSelect$1);
-__decorateElement$6(_init$6, 4, "disabled", _disabled_dec$2, Dropdown, _disabled$2);
-__decorateElement$6(_init$6, 4, "label", _label_dec, Dropdown, _label);
-__decoratorMetadata$6(_init$6, Dropdown);
-__publicField$6(Dropdown, "tagName", "dropdown");
-__publicField$6(Dropdown, "styles", [styleVariables, style$4]);
-Dropdown.register();
-var __create$5 = Object.create;
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __knownSymbol$5 = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
-var __typeError$5 = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decoratorStart$5 = (base) => [, , , __create$5((base == null ? void 0 : base[__knownSymbol$5("metadata")]) ?? null)];
-var __decoratorStrings$5 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn$5 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$5("Function expected") : fn;
-var __decoratorContext$5 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$5[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$5("Already initialized") : fns.push(__expectFn$5(fn || null)) });
-var __decoratorMetadata$5 = (array, target) => __defNormalProp$5(target, __knownSymbol$5("metadata"), array[3]);
-var __runInitializers$5 = (array, flags, self, value) => {
-  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
-  return value;
-};
-var __decorateElement$5 = (array, flags, name, decorators, target, extra) => {
-  var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
-  var j = array.length + 1, key = __decoratorStrings$5[k + 5];
-  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
-  var desc = (target = target.prototype, __getOwnPropDesc$5({ get [name]() {
-    return __privateGet$5(this, extra);
-  }, set [name](x) {
-    return __privateSet$5(this, extra, x);
-  } }, name));
-  for (var i = decorators.length - 1; i >= 0; i--) {
-    ctx = __decoratorContext$5(k, name, done = {}, array[3], extraInitializers);
-    {
-      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
-      access.get = (x) => x[name];
-      access.set = (x, y) => x[name] = y;
-    }
-    it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
-    if (it === void 0) __expectFn$5(it) && (desc[key] = it);
-    else if (typeof it !== "object" || it === null) __typeError$5("Object expected");
-    else __expectFn$5(fn = it.get) && (desc.get = fn), __expectFn$5(fn = it.set) && (desc.set = fn), __expectFn$5(fn = it.init) && initializers.unshift(fn);
-  }
-  return desc && __defProp$5(target, name, desc), target;
-};
-var __publicField$5 = (obj, key, value) => __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
-var __accessCheck$5 = (obj, member, msg) => member.has(obj) || __typeError$5("Cannot " + msg);
-var __privateGet$5 = (obj, member, getter) => (__accessCheck$5(obj, member, "read from private field"), member.get(obj));
-var __privateAdd$5 = (obj, member, value) => member.has(obj) ? __typeError$5("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$5 = (obj, member, value, setter) => (__accessCheck$5(obj, member, "write to private field"), member.set(obj, value), value);
-var _closeOnSelect_dec, _placement_dec, _disabled_dec$1, _size_dec$1, _color_dec$5, _variant_dec$3, _a$5, _init$5, _variant$3, _color$5, _size$1, _disabled$1, _placement, _closeOnSelect;
-class DropdownButton extends (_a$5 = AeicoComponent, _variant_dec$3 = [aeico.prop({ type: String })], _color_dec$5 = [aeico.prop({ type: String })], _size_dec$1 = [aeico.prop({ type: String })], _disabled_dec$1 = [aeico.prop({ type: Boolean })], _placement_dec = [aeico.prop({ type: String })], _closeOnSelect_dec = [aeico.prop({ type: Boolean })], _a$5) {
-  constructor() {
-    super(...arguments);
-    __privateAdd$5(this, _variant$3, __runInitializers$5(_init$5, 8, this, "filled")), __runInitializers$5(_init$5, 11, this);
-    __privateAdd$5(this, _color$5, __runInitializers$5(_init$5, 12, this, "default")), __runInitializers$5(_init$5, 15, this);
-    __privateAdd$5(this, _size$1, __runInitializers$5(_init$5, 16, this, "md")), __runInitializers$5(_init$5, 19, this);
-    __privateAdd$5(this, _disabled$1, __runInitializers$5(_init$5, 20, this, false)), __runInitializers$5(_init$5, 23, this);
-    __privateAdd$5(this, _placement, __runInitializers$5(_init$5, 24, this, "bottom-start")), __runInitializers$5(_init$5, 27, this);
-    __privateAdd$5(this, _closeOnSelect, __runInitializers$5(_init$5, 28, this, true)), __runInitializers$5(_init$5, 31, this);
-    __publicField$5(this, "_dropdownEl", null);
-  }
-  show() {
-    var _a2;
-    if (this.disabled) return;
-    (_a2 = this._dropdownEl) == null ? void 0 : _a2.show();
-  }
-  hide() {
-    var _a2;
-    (_a2 = this._dropdownEl) == null ? void 0 : _a2.hide();
-  }
-  toggle() {
-    var _a2;
-    if (this.disabled) return;
-    (_a2 = this._dropdownEl) == null ? void 0 : _a2.toggle();
-  }
-  get open() {
-    var _a2;
-    return ((_a2 = this._dropdownEl) == null ? void 0 : _a2.open) ?? false;
-  }
-  render() {
-    const dir = this.placement.split("-")[0];
-    return aeico.html(({ aeDropdown, aeButton, slot, span }) => {
-      this._dropdownEl = aeDropdown(
-        {
-          placement: this.placement,
-          "close-on-select": this.closeOnSelect
-        },
-        () => {
-          aeButton(
-            {
-              slot: "trigger",
-              variant: this.variant,
-              color: this.color,
-              size: this.size,
-              disabled: this.disabled || void 0
-            },
-            () => {
-              slot({ name: "label" });
-              span({ className: `caret caret--${dir}`, "aria-hidden": "true" });
-            }
-          );
-          slot();
-        }
-      );
-    });
-  }
-}
-_init$5 = __decoratorStart$5(_a$5);
-_variant$3 = /* @__PURE__ */ new WeakMap();
-_color$5 = /* @__PURE__ */ new WeakMap();
-_size$1 = /* @__PURE__ */ new WeakMap();
-_disabled$1 = /* @__PURE__ */ new WeakMap();
-_placement = /* @__PURE__ */ new WeakMap();
-_closeOnSelect = /* @__PURE__ */ new WeakMap();
-__decorateElement$5(_init$5, 4, "variant", _variant_dec$3, DropdownButton, _variant$3);
-__decorateElement$5(_init$5, 4, "color", _color_dec$5, DropdownButton, _color$5);
-__decorateElement$5(_init$5, 4, "size", _size_dec$1, DropdownButton, _size$1);
-__decorateElement$5(_init$5, 4, "disabled", _disabled_dec$1, DropdownButton, _disabled$1);
-__decorateElement$5(_init$5, 4, "placement", _placement_dec, DropdownButton, _placement);
-__decorateElement$5(_init$5, 4, "closeOnSelect", _closeOnSelect_dec, DropdownButton, _closeOnSelect);
-__decoratorMetadata$5(_init$5, DropdownButton);
-__publicField$5(DropdownButton, "tagName", "dropdown-button");
-__publicField$5(DropdownButton, "styles", [
-  ":host { display: inline-block; }",
-  ".caret { display: inline-block; width: 0; height: 0; margin-left: 0.3em; vertical-align: 0.2em; flex-shrink: 0; }",
-  ".caret--bottom { border-top: 0.35em solid; border-right: 0.35em solid transparent; border-left: 0.35em solid transparent; }",
-  ".caret--top { border-bottom: 0.35em solid; border-right: 0.35em solid transparent; border-left: 0.35em solid transparent; }",
-  ".caret--right { border-left: 0.35em solid; border-top: 0.35em solid transparent; border-bottom: 0.35em solid transparent; }",
-  ".caret--left { border-right: 0.35em solid; border-top: 0.35em solid transparent; border-bottom: 0.35em solid transparent; }"
-]);
-DropdownButton.register();
-const buttonGroupStyle = ":host {\n  display: inline-flex;\n  align-items: stretch;\n  gap: 8px;\n}\n\n:host([block]) {\n  display: flex;\n  width: 100%;\n}\n\n:host([block]) ::slotted(ae-button) {\n  flex: 1;\n}\n\n:host([compact]) {\n  gap: 0;\n}\n\n/* Raise hovered/focused button so its border shows above neighbours */\n:host([compact]) ::slotted(ae-button:hover),\n:host([compact]) ::slotted(ae-button:focus-within) {\n  position: relative;\n  z-index: 1;\n}\n";
-class ButtonGroup extends AeicoComponent {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "slotEl", null);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.variant === void 0) this.variant = "filled";
-    if (this.color === void 0) this.color = "default";
-    if (this.size === void 0) this.size = "md";
-  }
-  render() {
-    return aeico.html(({ slot }) => {
-      this.slotEl = slot({
-        "@slotchange": () => this._syncChildren()
-      });
-      this._syncChildren();
-    });
-  }
-  _getButtons() {
-    if (!this.slotEl) return [];
-    return this.slotEl.assignedElements({ flatten: true }).filter((el) => {
-      const tag = el.tagName.toLowerCase();
-      return tag === "ae-button" || tag === "ae-dropdown-button";
-    });
-  }
-  _syncChildren() {
-    const buttons = this._getButtons();
-    const r = this.size === "xs" || this.size === "sm" ? 3 : 4;
-    buttons.forEach((btn, i) => {
-      btn.variant = this.variant;
-      btn.color = this.color;
-      btn.size = this.size;
-      if (this.disabled) {
-        btn.disabled = true;
-      } else {
-        btn.disabled = false;
-      }
-      if (this.compact) {
-        const isFirst = i === 0;
-        const isLast = i === buttons.length - 1;
-        btn.style.marginLeft = isFirst ? "" : "-1px";
-        btn.style.setProperty("--_btn-r-tl", isFirst ? `${r}px` : "0");
-        btn.style.setProperty("--_btn-r-bl", isFirst ? `${r}px` : "0");
-        btn.style.setProperty("--_btn-r-tr", isLast ? `${r}px` : "0");
-        btn.style.setProperty("--_btn-r-br", isLast ? `${r}px` : "0");
-      } else {
-        btn.style.marginLeft = "";
-        this._clearRadius(btn);
-      }
-    });
-  }
-  _clearRadius(btn) {
-    btn.style.removeProperty("--_btn-r-tl");
-    btn.style.removeProperty("--_btn-r-tr");
-    btn.style.removeProperty("--_btn-r-br");
-    btn.style.removeProperty("--_btn-r-bl");
-  }
-}
-__publicField(ButtonGroup, "props", {
-  variant: { type: String },
-  color: { type: String },
-  size: { type: String },
-  compact: { type: Boolean },
-  block: { type: Boolean },
-  disabled: { type: Boolean }
-});
-__publicField(ButtonGroup, "styles", [styleVariables, buttonGroupStyle]);
-ButtonGroup.register();
-const badgeStyle = ':host {\n  display: inline-flex;\n  align-items: center;\n  --badge-solid-bg:       var(--color-solid);\n  --badge-solid-color:    var(--color-on-solid);\n  --badge-border:         var(--color-border);\n  --badge-accent:         var(--color-accent);\n  --badge-subtle-bg:      var(--color-bg-subtle);\n  --badge-subtle-color:   var(--color-text-subtle);\n  --badge-subtle-border:  var(--color-border-subtle);\n}\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-family: inherit;\n  font-weight: 500;\n  white-space: nowrap;\n  vertical-align: middle;\n  line-height: 1.2;\n  font-size: 1em;\n  padding: 0.15em 0.6em;\n  border-radius: 4px;\n  border: 1px solid var(--badge-solid-bg);\n  background: var(--badge-solid-bg);\n  color: var(--badge-solid-color);\n}\n\n/* Default (no [variant]) = filled */\n\n/* --- Variants --- */\n\n:host([variant="outlined"]) .badge {\n  background:   transparent;\n  border-color: var(--badge-border);\n  color:        var(--badge-accent);\n}\n\n:host([variant="faint"]) .badge {\n  background:   var(--badge-subtle-bg);\n  border-color: var(--badge-subtle-border);\n  color:        var(--badge-subtle-color);\n}\n\n:host([variant="subtle"]) .badge {\n  background:   var(--badge-subtle-bg);\n  border-color: transparent;\n  color:        var(--badge-subtle-color);\n}\n\n:host([variant="text"]) .badge {\n  background:   transparent;\n  border-color: transparent;\n  color:        var(--badge-accent);\n  padding-left:  0;\n  padding-right: 0;\n}\n\n:host([pill]) .badge {\n  border-radius: 999px;\n}\n\n/* Icon slots */\n::slotted(ae-icon) {\n  font-size: 1.1em;\n}\n';
-var __create$4 = Object.create;
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __knownSymbol$4 = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
-var __typeError$4 = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decoratorStart$4 = (base) => [, , , __create$4((base == null ? void 0 : base[__knownSymbol$4("metadata")]) ?? null)];
-var __decoratorStrings$4 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn$4 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$4("Function expected") : fn;
-var __decoratorContext$4 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$4[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$4("Already initialized") : fns.push(__expectFn$4(fn || null)) });
-var __decoratorMetadata$4 = (array, target) => __defNormalProp$4(target, __knownSymbol$4("metadata"), array[3]);
-var __runInitializers$4 = (array, flags, self, value) => {
-  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
-  return value;
-};
-var __decorateElement$4 = (array, flags, name, decorators, target, extra) => {
-  var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
-  var j = array.length + 1, key = __decoratorStrings$4[k + 5];
-  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
-  var desc = (target = target.prototype, __getOwnPropDesc$4({ get [name]() {
-    return __privateGet$4(this, extra);
-  }, set [name](x) {
-    return __privateSet$4(this, extra, x);
-  } }, name));
-  for (var i = decorators.length - 1; i >= 0; i--) {
-    ctx = __decoratorContext$4(k, name, done = {}, array[3], extraInitializers);
-    {
-      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
-      access.get = (x) => x[name];
-      access.set = (x, y) => x[name] = y;
-    }
-    it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
-    if (it === void 0) __expectFn$4(it) && (desc[key] = it);
-    else if (typeof it !== "object" || it === null) __typeError$4("Object expected");
-    else __expectFn$4(fn = it.get) && (desc.get = fn), __expectFn$4(fn = it.set) && (desc.set = fn), __expectFn$4(fn = it.init) && initializers.unshift(fn);
-  }
-  return desc && __defProp$4(target, name, desc), target;
-};
-var __publicField$4 = (obj, key, value) => __defNormalProp$4(obj, key + "", value);
-var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Cannot " + msg);
-var __privateGet$4 = (obj, member, getter) => (__accessCheck$4(obj, member, "read from private field"), member.get(obj));
-var __privateAdd$4 = (obj, member, value) => member.has(obj) ? __typeError$4("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$4 = (obj, member, value, setter) => (__accessCheck$4(obj, member, "write to private field"), member.set(obj, value), value);
-var _pill_dec, _size_dec, _variant_dec$2, _color_dec$4, _a$4, _init$4, _color$4, _variant$2, _size, _pill;
-class Badge extends (_a$4 = AeicoComponent, _color_dec$4 = [aeico.prop({ type: String })], _variant_dec$2 = [aeico.prop({ type: String })], _size_dec = [aeico.prop({ type: String })], _pill_dec = [aeico.prop({ type: Boolean })], _a$4) {
-  constructor() {
-    super(...arguments);
-    __privateAdd$4(this, _color$4, __runInitializers$4(_init$4, 8, this, "default")), __runInitializers$4(_init$4, 11, this);
-    __privateAdd$4(this, _variant$2, __runInitializers$4(_init$4, 12, this, "filled")), __runInitializers$4(_init$4, 15, this);
-    __privateAdd$4(this, _size, __runInitializers$4(_init$4, 16, this, "md")), __runInitializers$4(_init$4, 19, this);
-    __privateAdd$4(this, _pill, __runInitializers$4(_init$4, 20, this, false)), __runInitializers$4(_init$4, 23, this);
-  }
-  render() {
-    return aeico.html(({ span, slot }) => {
-      span({ part: "badge", className: "badge" }, () => {
-        slot({ name: "start" });
-        slot();
-        slot({ name: "end" });
-      });
-    });
-  }
-}
-_init$4 = __decoratorStart$4(_a$4);
-_color$4 = /* @__PURE__ */ new WeakMap();
-_variant$2 = /* @__PURE__ */ new WeakMap();
-_size = /* @__PURE__ */ new WeakMap();
-_pill = /* @__PURE__ */ new WeakMap();
-__decorateElement$4(_init$4, 4, "color", _color_dec$4, Badge, _color$4);
-__decorateElement$4(_init$4, 4, "variant", _variant_dec$2, Badge, _variant$2);
-__decorateElement$4(_init$4, 4, "size", _size_dec, Badge, _size);
-__decorateElement$4(_init$4, 4, "pill", _pill_dec, Badge, _pill);
-__decoratorMetadata$4(_init$4, Badge);
-__publicField$4(Badge, "styles", [styleVariables, sizeCSS, colorCSS, badgeStyle]);
-Badge.register();
-const alertStyle = `.alert {
-  position: relative;
-  padding: 12px 16px;
-  margin-bottom: 12px;
-  border-radius: 4px;
-  font-size: 12px;
-  line-height: 1.6;
-  background-color: var(--alert-solid-bg);
-  color:            var(--alert-solid-color);
-  border: 1px solid var(--alert-solid-bg);
-}
-
-.alert:last-child {
-  margin-bottom: 0;
-}
-
-:host {
-  --color-solid:           var(--color-primary);
-  --color-on-solid:        var(--color-text-main);
-  --color-border:          var(--color-primary);
-  --color-bg-subtle:       var(--color-primary-bg-subtle);
-  --color-text-subtle:     var(--color-primary-text-emphasis);
-  --color-border-subtle:   var(--color-primary-border-subtle);
-
-  --alert-solid-bg:     var(--color-solid);
-  --alert-solid-color:  var(--color-on-solid);
-  --alert-border:       var(--color-border);
-  --alert-subtle-bg:    var(--color-bg-subtle);
-  --alert-subtle-color: var(--color-text-subtle);
-  --alert-subtle-border:var(--color-border-subtle);
-}
-
-
-:host([variant="faint"]) .alert {
-  background-color: var(--alert-subtle-bg);
-  color:            var(--alert-subtle-color);
-  border-color:     var(--alert-subtle-border);
-}
-
-:host([variant="subtle"]) .alert {
-  background-color: var(--alert-subtle-bg);
-  color:            var(--alert-subtle-color);
-  border-color:     transparent;
-}
-
-:host([variant="filled"]) .alert {
-  background-color: var(--alert-solid-bg);
-  color:            var(--alert-solid-color);
-  border-color:     var(--alert-solid-bg);
-}
-
-:host([variant="outlined"]) .alert {
-  background-color: transparent;
-  color:            var(--alert-subtle-color);
-  border-color:     var(--alert-border);
-}
-
-:host([dismissible]) .alert {
-  padding-right: 40px;
-}
-
-:host([icon]) .alert {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-}
-
-:host([icon]) .alert::before {
-  content: '';
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-  margin-top: 2px;
-}
-
-.alert-close {
-  position: absolute;
-  top: 50%;
-  right: 12px;
-  transform: translateY(-50%);
-  background: transparent;
-  border: none;
-  color: inherit;
-  opacity: 0.6;
-  cursor: pointer;
-  padding: 4px;
-  font-size: 18px;
-  line-height: 1;
-  transition: opacity 0.15s;
-}
-
-.alert-close:hover {
-  opacity: 1;
-}
-
-:host([size="sm"]) .alert {
-  padding: 8px 12px;
-  font-size: 11px;
-}
-
-:host([size="lg"]) .alert {
-  padding: 16px 20px;
-  font-size: 13px;
-}
-`;
-class Alert extends AeicoComponent {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "_handleClose", () => {
-      this.emit("alert-close", { detail: { target: this } });
-      this.remove();
-    });
-  }
-  render() {
-    return aeico.html(({ div, slot, button, span }) => {
-      div(
-        {
-          className: "alert",
-          role: "alert",
-          part: "alert",
-          style: { display: this.invisible ? "none" : "" }
-        },
-        () => {
-          slot();
-          if (this.dismissible) {
-            button(
-              {
-                className: "alert-close",
-                "@click": () => this._handleClose(),
-                title: aeicoLocalize.t("alert.close", "Close alert")
-              },
-              () => {
-                span({ "aria-hidden": "true", textContent: "×" });
-              }
-            );
-          }
-        }
-      );
-    });
-  }
-  show() {
-    if (this.invisible) {
-      this.invisible = false;
-    }
-  }
-  hide() {
-    this.invisible = true;
-  }
-}
-__publicField(Alert, "props", {
-  color: { type: String },
-  variant: { type: String },
-  size: { type: String },
-  dismissible: { type: Boolean },
-  invisible: { type: Boolean }
-});
-__publicField(Alert, "useStyles", ["alert"]);
-__publicField(Alert, "styles", [styleVariables, colorCSS, alertStyle]);
-Alert.register();
-const style$1 = ":host {\n  display: contents;\n}\n\ndialog {\n  display: none;\n  flex-direction: column;\n  border: none;\n  border-radius: 8px;\n  padding: 0;\n  max-width: min(90vw, 600px);\n  max-height: 90vh;\n  background: var(--surface-overlay);\n  color: var(--color-text-main);\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n  overflow: hidden;\n}\n\ndialog[open] {\n  display: flex;\n  animation: dialog-slide-in 0.2s ease;\n}\n\ndialog::backdrop {\n  background: var(--color-overlay);\n  animation: dialog-backdrop-in 0.2s ease;\n}\n\n@keyframes dialog-backdrop-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes dialog-slide-in {\n  from {\n    opacity: 0;\n    transform: scale(0.96) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\nheader {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 16px 20px;\n  border-bottom: 1px solid var(--border-subtle);\n  flex-shrink: 0;\n}\n\n.label {\n  flex: 1;\n  font-size: var(--size-m, 1rem);\n  font-weight: 500;\n  margin: 0;\n  color: var(--color-text-main);\n}\n\n.close-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--color-text-muted);\n  font-size: 18px;\n  line-height: 1;\n  cursor: pointer;\n  transition: background 0.15s, color 0.15s;\n}\n\n.close-btn:hover {\n  background: var(--border-subtle);\n  color: var(--color-text-main);\n}\n\n.body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 20px;\n}\n\nfooter {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 20px;\n  border-top: 1px solid var(--border-subtle);\n  flex-shrink: 0;\n}\n\n::slotted([data-align-left]) {\n  margin-right: auto;\n}\n";
-class Dialog extends AeicoComponent {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "_dialogEl", null);
-    __publicField(this, "_hasFooter", false);
-    __publicField(this, "_handleDialogClick", (e) => {
-      const mouseEvent = e;
-      const path = mouseEvent.composedPath();
-      for (const el of path) {
-        if (el instanceof Element && el.hasAttribute("data-close")) {
-          this.close();
-          return;
-        }
-        if (el === this._dialogEl) break;
-      }
-      if (this.modal !== false && this.closeOnOverlayClick !== false) {
-        if (mouseEvent.target === this._dialogEl) {
-          const rect = this._dialogEl.getBoundingClientRect();
-          const outside = mouseEvent.clientX < rect.left || mouseEvent.clientX > rect.right || mouseEvent.clientY < rect.top || mouseEvent.clientY > rect.bottom;
-          if (outside) {
-            this.close();
-          }
-        }
-      }
-    });
-    __publicField(this, "_handleNativeClose", () => {
-      this.emit("close", { detail: { target: this } });
-    });
-    __publicField(this, "_handleFooterSlotChange", (e) => {
-      const slotEl = e.target;
-      const hasContent = slotEl.assignedElements().length > 0;
-      if (hasContent !== this._hasFooter) {
-        this._hasFooter = hasContent;
-        this.update();
-      }
-    });
-  }
-  render() {
-    return aeico.html(({ dialog, div, header, footer, span, button, slot }) => {
-      this._dialogEl = dialog(
-        {
-          "@click": this._handleDialogClick,
-          "@close": this._handleNativeClose,
-          style: {
-            width: this.width || "",
-            height: this.height || ""
-          }
-        },
-        () => {
-          if (this.header !== false) {
-            header({}, () => {
-              slot({ name: "header" }, () => {
-                span({ className: "label", textContent: this.label || "" });
-              });
-              if (this.closable !== false) {
-                button({
-                  className: "close-btn",
-                  textContent: "×",
-                  "@click": () => this.close()
-                });
-              }
-            });
-          }
-          div({ className: "body" }, () => {
-            slot();
-          });
-          footer(
-            {
-              style: { display: this._hasFooter ? "" : "none" }
-            },
-            () => {
-              slot({ name: "footer", "@slotchange": this._handleFooterSlotChange });
-            }
-          );
-        }
-      );
-    });
-  }
-  open() {
-    if (!this._dialogEl) return;
-    if (this.modal !== false) {
-      this._dialogEl.showModal();
-    } else {
-      this._dialogEl.show();
-    }
-    this.emit("open", { detail: { target: this } });
-  }
-  close() {
-    var _a2;
-    (_a2 = this._dialogEl) == null ? void 0 : _a2.close();
-  }
-  isOpen() {
-    var _a2;
-    return ((_a2 = this._dialogEl) == null ? void 0 : _a2.open) ?? false;
-  }
-}
-__publicField(Dialog, "props", {
-  label: { type: String },
-  width: { type: String },
-  height: { type: String },
-  modal: { type: Boolean },
-  closable: { type: Boolean },
-  header: { type: Boolean },
-  closeOnOverlayClick: { type: Boolean }
-});
-__publicField(Dialog, "styles", [styleVariables, style$1]);
-Dialog.register();
-class IconButton extends AeicoComponent {
-  render() {
-    return aeico.html(({ aeButton, aeIcon }) => {
-      aeButton(
-        {
-          color: this.color,
-          variant: this.variant,
-          size: this.size,
-          disabled: this.disabled
-        },
-        () => {
-          aeIcon({ name: this.icon });
-        }
-      );
-    });
-  }
-}
-__publicField(IconButton, "tagName", "icon-button");
-__publicField(IconButton, "props", {
-  icon: { type: String },
-  size: { type: String },
-  color: { type: String },
-  variant: { type: String },
-  disabled: { type: Boolean }
-});
-__publicField(IconButton, "styles", [":host { display: contents; }"]);
-IconButton.register();
-const tabsStyle = ':host {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n[part="tab-nav"] {\n  display: flex;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--ae-tabs-border-color, var(--border-default));\n}\n\n[part="panels"] {\n  flex: 1;\n  overflow: auto;\n}\n';
-class Tabs extends AeicoComponent {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "_observer", null);
-    __publicField(this, "_handleTabClick", (e) => {
-      const pairs = this._getPairs();
-      const target = e.target;
-      const index = pairs.findIndex(([tab]) => tab === target);
-      if (index !== -1) this.selectTab(index);
-    });
-  }
-  get _tabs() {
-    return [...this.children].filter(
-      (el) => el.tagName.toLowerCase() === "ae-tab"
-    );
-  }
-  get _panels() {
-    return [...this.children].filter(
-      (el) => el.tagName.toLowerCase() === "ae-tab-panel"
-    );
-  }
-  _getPairs() {
-    const tabs = this._tabs;
-    const panels = this._panels;
-    const idMap = /* @__PURE__ */ new Map();
-    for (const panel of panels) {
-      const id = panel.id;
-      if (id) idMap.set(id, panel);
-    }
-    const usedPanels = /* @__PURE__ */ new Set();
-    const pairs = [];
-    for (const tab of tabs) {
-      const panelId = tab.panel;
-      if (panelId) {
-        const panel = idMap.get(panelId) ?? null;
-        if (panel) usedPanels.add(panel);
-        pairs.push([tab, panel]);
-      }
-    }
-    const unmatchedPanels = panels.filter((p) => !usedPanels.has(p));
-    let posIndex = 0;
-    for (const tab of tabs) {
-      if (!tab.panel) {
-        pairs.push([tab, unmatchedPanels[posIndex] ?? null]);
-        posIndex++;
-      }
-    }
-    return pairs;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.listen("_tab-click", this._handleTabClick);
-    this._observer = new MutationObserver(() => this.update());
-    this._observer.observe(this, { childList: true });
-  }
-  disconnectedCallback() {
-    var _a2;
-    super.disconnectedCallback();
-    (_a2 = this._observer) == null ? void 0 : _a2.disconnect();
-    this._observer = null;
-  }
-  onUpdated() {
-    this._syncActive();
-  }
-  _syncActive() {
-    const activeIndex = this.activeIndex ?? 0;
-    const pairs = this._getPairs();
-    pairs.forEach(([tab, panel], i) => {
-      const isActive = i === activeIndex;
-      if (isActive) {
-        tab.setAttribute("active", "");
-        panel == null ? void 0 : panel.setAttribute("active", "");
-      } else {
-        tab.removeAttribute("active");
-        panel == null ? void 0 : panel.removeAttribute("active");
-      }
-    });
-  }
-  selectTab(index) {
-    const pairs = this._getPairs();
-    if (index === (this.activeIndex ?? 0) || index >= pairs.length) return;
-    this.activeIndex = index;
-    this.emit("change", { detail: { index } });
-  }
-  render() {
-    return aeico.html(({ nav, div, slot }) => {
-      nav({ part: "tab-nav", role: "tablist" }, () => {
-        slot({ name: "tab" });
-      });
-      div({ part: "panels" }, () => {
-        slot();
-      });
-    });
-  }
-}
-__publicField(Tabs, "props", {
-  activeIndex: { type: Number }
-});
-__publicField(Tabs, "styles", [styleVariables, tabsStyle]);
-Tabs.register();
-const tabStyle = ":host {\n  display: inline-flex;\n  cursor: pointer;\n  margin-bottom: -1px;\n}\n\nbutton {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 16px;\n  background: none;\n  border: none;\n  border-bottom: 2px solid transparent;\n  cursor: pointer;\n  font-size: inherit;\n  font-family: inherit;\n  color: var(--ae-tab-color, #909090);\n  font-size: var(--ae-tab-font-size, inherit);\n  transition: color 0.15s, border-color 0.15s;\n  outline: none;\n  white-space: nowrap;\n  user-select: none;\n}\n\nbutton:hover {\n  color: var(--ae-tab-hover-color, var(--color-primary));\n}\n\nbutton:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: -2px;\n}\n\n:host([active]) button {\n  color: var(--ae-tab-active-color, var(--color-primary));\n  border-bottom-color: var(--ae-tab-active-color, var(--color-primary));\n}\n\n:host([disabled]) button {\n  opacity: 0.4;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n";
-class Tab extends AeicoComponent {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "_handleClick", () => {
-      if (this.disabled) return;
-      this.dispatchEvent(
-        new CustomEvent("_tab-click", {
-          bubbles: true,
-          composed: true
-        })
-      );
-    });
-  }
-  connectedCallback() {
-    this.setAttribute("slot", "tab");
-    super.connectedCallback();
-    this.listen("click", this._handleClick);
-  }
-  render() {
-    return aeico.html(({ button, slot }) => {
-      button(
-        {
-          part: "tab",
-          type: "button",
-          role: "tab",
-          "aria-selected": this.active,
-          "aria-disabled": this.disabled,
-          disabled: this.disabled
-        },
-        () => {
-          slot();
-        }
-      );
-    });
-  }
-}
-__publicField(Tab, "props", {
-  active: { type: Boolean },
-  disabled: { type: Boolean },
-  panel: { type: String }
-});
-__publicField(Tab, "styles", [tabStyle]);
-Tab.register();
-const tabPanelStyle = ":host {\n  display: none;\n  padding: 16px 0;\n}\n\n:host([active]) {\n  display: block;\n}\n";
-class TabPanel extends AeicoComponent {
-  render() {
-    return aeico.html(({ slot }) => {
-      slot();
-    });
-  }
-}
-__publicField(TabPanel, "styles", [tabPanelStyle]);
-TabPanel.register();
-const style = ":host {\n  display: block;\n  width: 100%;\n  height: var(--thickness, 1px);\n  flex-shrink: 0;\n\n  /* Override colorCSS default --color-border from gray to the subtle border token */\n  --color-border: var(--border-default);\n\n  background: var(--color-border);\n}\n\n:host([vertical]) {\n  display: inline-block;\n  width: var(--thickness, 1px);\n  height: 1lh;\n  vertical-align: middle;\n}\n";
-var __create$3 = Object.create;
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
-var __knownSymbol$3 = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
-var __typeError$3 = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decoratorStart$3 = (base) => [, , , __create$3((base == null ? void 0 : base[__knownSymbol$3("metadata")]) ?? null)];
-var __decoratorStrings$3 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn$3 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$3("Function expected") : fn;
-var __decoratorContext$3 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$3[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$3("Already initialized") : fns.push(__expectFn$3(fn || null)) });
-var __decoratorMetadata$3 = (array, target) => __defNormalProp$3(target, __knownSymbol$3("metadata"), array[3]);
-var __runInitializers$3 = (array, flags, self, value) => {
-  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
-  return value;
-};
-var __decorateElement$3 = (array, flags, name, decorators, target, extra) => {
-  var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
-  var j = array.length + 1, key = __decoratorStrings$3[k + 5];
-  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
-  var desc = (target = target.prototype, __getOwnPropDesc$3({ get [name]() {
-    return __privateGet$3(this, extra);
-  }, set [name](x) {
-    return __privateSet$3(this, extra, x);
-  } }, name));
-  for (var i = decorators.length - 1; i >= 0; i--) {
-    ctx = __decoratorContext$3(k, name, done = {}, array[3], extraInitializers);
-    {
-      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
-      access.get = (x) => x[name];
-      access.set = (x, y) => x[name] = y;
-    }
-    it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
-    if (it === void 0) __expectFn$3(it) && (desc[key] = it);
-    else if (typeof it !== "object" || it === null) __typeError$3("Object expected");
-    else __expectFn$3(fn = it.get) && (desc.get = fn), __expectFn$3(fn = it.set) && (desc.set = fn), __expectFn$3(fn = it.init) && initializers.unshift(fn);
-  }
-  return desc && __defProp$3(target, name, desc), target;
-};
-var __publicField$3 = (obj, key, value) => __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
-var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Cannot " + msg);
-var __privateGet$3 = (obj, member, getter) => (__accessCheck$3(obj, member, "read from private field"), member.get(obj));
-var __privateAdd$3 = (obj, member, value) => member.has(obj) ? __typeError$3("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$3 = (obj, member, value, setter) => (__accessCheck$3(obj, member, "write to private field"), member.set(obj, value), value);
-var _color_dec$3, _thickness_dec, _vertical_dec, _a$3, _init$3, _vertical, _thickness, _color$3;
-class Divider extends (_a$3 = AeicoComponent, _vertical_dec = [aeico.prop({ type: Boolean })], _thickness_dec = [aeico.prop({ type: String })], _color_dec$3 = [aeico.prop({ type: String })], _a$3) {
-  constructor() {
-    super(...arguments);
-    __privateAdd$3(this, _vertical, __runInitializers$3(_init$3, 8, this, false)), __runInitializers$3(_init$3, 11, this);
-    __privateAdd$3(this, _thickness, __runInitializers$3(_init$3, 12, this)), __runInitializers$3(_init$3, 15, this);
-    __privateAdd$3(this, _color$3, __runInitializers$3(_init$3, 16, this)), __runInitializers$3(_init$3, 19, this);
-  }
-  render() {
-    if (this.thickness) {
-      this.style.setProperty("--thickness", this.thickness);
-    } else {
-      this.style.removeProperty("--thickness");
-    }
-  }
-}
-_init$3 = __decoratorStart$3(_a$3);
-_vertical = /* @__PURE__ */ new WeakMap();
-_thickness = /* @__PURE__ */ new WeakMap();
-_color$3 = /* @__PURE__ */ new WeakMap();
-__decorateElement$3(_init$3, 4, "vertical", _vertical_dec, Divider, _vertical);
-__decorateElement$3(_init$3, 4, "thickness", _thickness_dec, Divider, _thickness);
-__decorateElement$3(_init$3, 4, "color", _color_dec$3, Divider, _color$3);
-__decoratorMetadata$3(_init$3, Divider);
-__publicField$3(Divider, "tagName", "divider");
-__publicField$3(Divider, "styles", [styleVariables, colorCSS, style]);
-Divider.register();
-const cardStyle = ':host {\n  display: block;\n\n  --card-bg:      var(--color-bg-subtle);\n  --card-color:   var(--color-text-subtle);\n  --card-border:  var(--color-border-subtle);\n  --card-divider: var(--color-border-subtle);\n}\n\n:host([variant="faint"]) {\n  --card-bg:      var(--color-bg-subtle);\n  --card-color:   var(--color-text-subtle);\n  --card-border:  var(--color-border-subtle);\n  --card-divider: var(--color-border-subtle);\n}\n\n:host([variant="subtle"]) {\n  --card-border:  transparent;\n  --card-divider: transparent;\n}\n\n:host([variant="filled"]) {\n  --card-bg:      var(--color-solid);\n  --card-color:   var(--color-on-solid);\n  --card-border:  var(--color-solid);\n  --card-divider: color-mix(in srgb, var(--color-solid), black 15%);\n}\n\n:host([variant="outlined"]) {\n  --card-bg:      transparent;\n  --card-color:   var(--color-text-subtle);\n  --card-border:  var(--color-border);\n  --card-divider: var(--color-border-subtle);\n}\n\n.card {\n  border: 1px solid var(--card-border);\n  border-radius: 8px;\n  background: var(--card-bg);\n  color: var(--card-color);\n  overflow: hidden;\n}\n\n.header,\n.footer {\n  display: none;\n  padding: 10px 16px;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n:host([has-header]) .header {\n  display: block;\n  border-bottom: 1px solid var(--card-divider);\n}\n\n:host([has-footer]) .footer {\n  display: block;\n  border-top: 1px solid var(--card-divider);\n}\n\n.body {\n  padding: 16px;\n}\n';
-var __create$2 = Object.create;
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
-var __knownSymbol$2 = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
-var __typeError$2 = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decoratorStart$2 = (base) => [, , , __create$2((base == null ? void 0 : base[__knownSymbol$2("metadata")]) ?? null)];
-var __decoratorStrings$2 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn$2 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$2("Function expected") : fn;
-var __decoratorContext$2 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$2[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$2("Already initialized") : fns.push(__expectFn$2(fn || null)) });
-var __decoratorMetadata$2 = (array, target) => __defNormalProp$2(target, __knownSymbol$2("metadata"), array[3]);
-var __runInitializers$2 = (array, flags, self, value) => {
-  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
-  return value;
-};
-var __decorateElement$2 = (array, flags, name, decorators, target, extra) => {
-  var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
-  var j = array.length + 1, key = __decoratorStrings$2[k + 5];
-  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
-  var desc = (target = target.prototype, __getOwnPropDesc$2({ get [name]() {
-    return __privateGet$2(this, extra);
-  }, set [name](x) {
-    return __privateSet$2(this, extra, x);
-  } }, name));
-  for (var i = decorators.length - 1; i >= 0; i--) {
-    ctx = __decoratorContext$2(k, name, done = {}, array[3], extraInitializers);
-    {
-      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
-      access.get = (x) => x[name];
-      access.set = (x, y) => x[name] = y;
-    }
-    it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
-    if (it === void 0) __expectFn$2(it) && (desc[key] = it);
-    else if (typeof it !== "object" || it === null) __typeError$2("Object expected");
-    else __expectFn$2(fn = it.get) && (desc.get = fn), __expectFn$2(fn = it.set) && (desc.set = fn), __expectFn$2(fn = it.init) && initializers.unshift(fn);
-  }
-  return desc && __defProp$2(target, name, desc), target;
-};
-var __publicField$2 = (obj, key, value) => __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
-var __accessCheck$2 = (obj, member, msg) => member.has(obj) || __typeError$2("Cannot " + msg);
-var __privateGet$2 = (obj, member, getter) => (__accessCheck$2(obj, member, "read from private field"), member.get(obj));
-var __privateAdd$2 = (obj, member, value) => member.has(obj) ? __typeError$2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$2 = (obj, member, value, setter) => (__accessCheck$2(obj, member, "write to private field"), member.set(obj, value), value);
-var _variant_dec$1, _color_dec$2, _a$2, _init$2, _color$2, _variant$1;
-class Card extends (_a$2 = AeicoComponent, _color_dec$2 = [aeico.prop({ type: String })], _variant_dec$1 = [aeico.prop({ type: String })], _a$2) {
-  constructor() {
-    super(...arguments);
-    __privateAdd$2(this, _color$2, __runInitializers$2(_init$2, 8, this, "default")), __runInitializers$2(_init$2, 11, this);
-    __privateAdd$2(this, _variant$1, __runInitializers$2(_init$2, 12, this, "filled")), __runInitializers$2(_init$2, 15, this);
-  }
-  render() {
-    return aeico.html(({ div, header, footer, slot }) => {
-      div({ className: "card", part: "card" }, () => {
-        header({ className: "header", part: "header" }, () => {
-          slot({ name: "header", "@slotchange": (e) => this._onHeaderSlotChange(e) });
-        });
-        div({ className: "body", part: "body" }, () => {
-          slot();
-        });
-        footer({ className: "footer", part: "footer" }, () => {
-          slot({ name: "footer", "@slotchange": (e) => this._onFooterSlotChange(e) });
-        });
-      });
-    });
-  }
-  _onHeaderSlotChange(e) {
-    const slot = e.target;
-    this.toggleAttribute("has-header", slot.assignedNodes({ flatten: true }).length > 0);
-  }
-  _onFooterSlotChange(e) {
-    const slot = e.target;
-    this.toggleAttribute("has-footer", slot.assignedNodes({ flatten: true }).length > 0);
-  }
-}
-_init$2 = __decoratorStart$2(_a$2);
-_color$2 = /* @__PURE__ */ new WeakMap();
-_variant$1 = /* @__PURE__ */ new WeakMap();
-__decorateElement$2(_init$2, 4, "color", _color_dec$2, Card, _color$2);
-__decorateElement$2(_init$2, 4, "variant", _variant_dec$1, Card, _variant$1);
-__decoratorMetadata$2(_init$2, Card);
-__publicField$2(Card, "tagName", "card");
-__publicField$2(Card, "styles", [styleVariables, colorCSS, cardStyle]);
-Card.register();
-const navbarStyle = ':host {\n  /* layout — padding lives in .inner so document * { padding:0 } cannot override it */\n  display: block;\n  position: static;\n  top: auto;\n  z-index: var(--ae-navbar-z-index, 100);\n  box-sizing: border-box;\n  height: var(--ae-navbar-height, 3.25rem);\n  border-radius: var(--ae-navbar-radius, 0);\n\n  /* color */\n  background: var(--ae-navbar-bg, var(--surface-base));\n  color: var(--ae-navbar-color, var(--color-text-main));\n  border-bottom: var(--ae-navbar-border-width, 1px) solid var(--ae-navbar-border-color, var(--border-default));\n  box-shadow: var(--ae-navbar-shadow, none);\n\n  /* layout tokens — declared here so they are clearly part of the public API */\n  --ae-navbar-radius: 0;\n  /* Default padding-x references the global layout token so ae-navbar content\n     automatically aligns with .container / .container-fluid in light DOM.\n     Override with --ae-navbar-padding-x to decouple if needed. */\n  --ae-navbar-padding-x: var(--container-padding-x, 1.5rem);\n  --ae-navbar-gap: 0.5rem;\n\n  /* link style tokens — text mode defaults.\n     CSS custom properties inherit into slotted content, so\n     ::slotted(a[slot="start"]) can reference --ae-navbar-height. */\n  --ae-navbar-link-color: inherit;\n  --ae-navbar-link-font-size: inherit;\n  --ae-navbar-link-padding-x: 0.75rem;  /* horizontal padding only; height fills vertically */\n  --ae-navbar-link-radius: 0;\n  --ae-navbar-link-hover-color: var(--color-text-link-hover);\n  --ae-navbar-link-hover-bg: transparent;\n  --ae-navbar-link-active-color: var(--color-text-link);\n  --ae-navbar-link-active-font-weight: 600;\n}\n\n:host([sticky]) {\n  position: sticky;\n  top: 0;\n}\n\n:host([color]) {\n  --ae-navbar-bg: var(--color-solid);\n  --ae-navbar-color: var(--color-on-solid);\n  --ae-navbar-border-color: transparent;\n  --ae-navbar-link-hover-color: var(--color-on-solid);\n  --ae-navbar-link-active-color: var(--color-on-solid);\n}\n\n/* block preset: hover shows a subtle filled block */\n:host([appearance="block"]) {\n  --ae-navbar-link-hover-bg: var(--color-bg-subtle);\n  --ae-navbar-link-hover-color: inherit;\n}\n\n/* block preset on colored navbar: use semi-transparent white */\n:host([color][appearance="block"]) {\n  --ae-navbar-link-hover-bg: rgba(255, 255, 255, 0.15);\n  --ae-navbar-link-hover-color: var(--color-on-solid);\n}\n\n.inner {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 0 var(--ae-navbar-padding-x);\n  gap: var(--ae-navbar-gap);\n  box-sizing: border-box;\n}\n\n[part="brand"] {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n}\n\n/* nav wraps start + end; takes all remaining space */\n[part="nav"] {\n  flex: 1 1 auto;\n  display: flex;\n  align-self: stretch;   /* stretch to host height so children can fill it */\n  align-items: stretch;\n  min-width: 0;\n}\n\n[part="start"],\n[part="end"] {\n  flex: 0 0 auto;\n  display: flex;\n  align-self: stretch;\n}\n\n[part="start"] {\n  align-items: stretch;  /* slotted <a> will stretch to full height */\n  gap: var(--ae-navbar-start-gap, 0);\n}\n\n[part="end"] {\n  align-items: center;   /* buttons / avatars stay vertically centred */\n  gap: var(--ae-navbar-end-gap, 0.5rem);\n  margin-left: auto;\n}\n\n/* hamburger — hidden on desktop */\n[part="hamburger"] {\n  display: none;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n  flex-shrink: 0;\n  width: var(--ae-navbar-hamburger-size, 2rem);\n  height: var(--ae-navbar-hamburger-size, 2rem);\n  margin-left: auto;\n  padding: 0;\n  background: none;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  color: var(--ae-navbar-hamburger-color, inherit);\n}\n\n[part="hamburger"]:hover {\n  background: color-mix(in srgb, currentColor 10%, transparent);\n}\n\n[part="hamburger"] span {\n  display: block;\n  width: 18px;\n  height: 2px;\n  background: currentColor;\n  border-radius: 1px;\n  transition: transform 0.2s ease, opacity 0.2s ease;\n}\n\n/* Brand link — sensible defaults, no full-height stretch */\n::slotted(a[slot="brand"]) {\n  display: inline-flex;\n  align-items: center;\n  color: inherit;\n  font-weight: 700;\n  font-size: 1.05rem;\n  text-decoration: none;\n  white-space: nowrap;\n}\n\n/* Nav links (start / end slots) — fill full navbar height for block hover effect */\n::slotted(a[slot="start"]),\n::slotted(a[slot="end"]) {\n  display: inline-flex;\n  align-items: center;\n  height: var(--ae-navbar-height, 3.25rem);  /* full-height hover area */\n  /* !important overrides document-level * { padding: 0 } reset */\n  padding: 0 var(--ae-navbar-link-padding-x) !important;\n  border-radius: var(--ae-navbar-link-radius);\n  color: var(--ae-navbar-link-color);\n  font-size: var(--ae-navbar-link-font-size);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: color 0.15s ease, background-color 0.15s ease;\n  outline-offset: 2px;\n}\n\n::slotted(a[slot="start"]:hover),\n::slotted(a[slot="end"]:hover) {\n  color: var(--ae-navbar-link-hover-color);\n  background-color: var(--ae-navbar-link-hover-bg);\n}\n\n::slotted(a[slot="start"][aria-current="page"]),\n::slotted(a[slot="end"][aria-current="page"]) {\n  color: var(--ae-navbar-link-active-color);\n  font-weight: var(--ae-navbar-link-active-font-weight);\n}\n\n/* ae-dropdown inside navbar — map navbar tokens to dropdown trigger API */\n::slotted(ae-dropdown) {\n  align-self: stretch;\n  --dropdown-trigger-height: 100%;\n  --dropdown-trigger-padding-x: var(--ae-navbar-link-padding-x);\n  --dropdown-trigger-color: var(--ae-navbar-link-color);\n  --dropdown-trigger-bg: none;\n  --dropdown-trigger-radius: var(--ae-navbar-link-radius);\n  --dropdown-trigger-font-size: var(--ae-navbar-link-font-size);\n  --dropdown-trigger-hover-color: var(--ae-navbar-link-hover-color);\n  --dropdown-trigger-hover-bg: var(--ae-navbar-link-hover-bg);\n}\n\n@media (max-width: 768px) {\n  /* collapse the nav container */\n  [part="nav"] {\n    display: none;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0;\n    padding: 0.5rem 0;\n    background: var(--ae-navbar-mobile-bg, var(--ae-navbar-bg, var(--surface-base)));\n    border-bottom: 1px solid var(--ae-navbar-border-color, var(--border-default));\n    box-shadow: var(--ae-navbar-mobile-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));\n    z-index: 1;\n  }\n\n  :host([open]) [part="nav"] {\n    display: flex;\n  }\n\n  /* stack start/end vertically inside the panel */\n  [part="start"],\n  [part="end"] {\n    flex-direction: column;\n    align-items: flex-start;\n    align-self: auto;\n    gap: 0;\n    margin-left: 0;\n    width: 100%;\n  }\n\n  /* Mobile: links revert to auto height and add vertical padding */\n  ::slotted(a[slot="start"]),\n  ::slotted(a[slot="end"]) {\n    height: auto;\n    width: 100%;\n    padding: 0.75rem var(--ae-navbar-link-padding-x);\n    border-radius: 0;\n  }\n\n  /* show hamburger */\n  [part="hamburger"] {\n    display: flex;\n  }\n\n  /* hamburger → × animation */\n  :host([open]) [part="hamburger"] span:nth-child(1) {\n    transform: translateY(7px) rotate(45deg);\n  }\n\n  :host([open]) [part="hamburger"] span:nth-child(2) {\n    opacity: 0;\n    transform: scaleX(0);\n  }\n\n  :host([open]) [part="hamburger"] span:nth-child(3) {\n    transform: translateY(-7px) rotate(-45deg);\n  }\n}\n';
-var __create$1 = Object.create;
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __knownSymbol$1 = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
-var __typeError$1 = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decoratorStart$1 = (base) => [, , , __create$1((base == null ? void 0 : base[__knownSymbol$1("metadata")]) ?? null)];
-var __decoratorStrings$1 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn$1 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$1("Function expected") : fn;
-var __decoratorContext$1 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$1[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$1("Already initialized") : fns.push(__expectFn$1(fn || null)) });
-var __decoratorMetadata$1 = (array, target) => __defNormalProp$1(target, __knownSymbol$1("metadata"), array[3]);
-var __runInitializers$1 = (array, flags, self, value) => {
-  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
-  return value;
-};
-var __decorateElement$1 = (array, flags, name, decorators, target, extra) => {
-  var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
-  var j = array.length + 1, key = __decoratorStrings$1[k + 5];
-  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
-  var desc = (target = target.prototype, __getOwnPropDesc$1({ get [name]() {
-    return __privateGet$1(this, extra);
-  }, set [name](x) {
-    return __privateSet$1(this, extra, x);
-  } }, name));
-  for (var i = decorators.length - 1; i >= 0; i--) {
-    ctx = __decoratorContext$1(k, name, done = {}, array[3], extraInitializers);
-    {
-      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
-      access.get = (x) => x[name];
-      access.set = (x, y) => x[name] = y;
-    }
-    it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
-    if (it === void 0) __expectFn$1(it) && (desc[key] = it);
-    else if (typeof it !== "object" || it === null) __typeError$1("Object expected");
-    else __expectFn$1(fn = it.get) && (desc.get = fn), __expectFn$1(fn = it.set) && (desc.set = fn), __expectFn$1(fn = it.init) && initializers.unshift(fn);
-  }
-  return desc && __defProp$1(target, name, desc), target;
-};
-var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
-var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
-var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), member.get(obj));
-var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), member.set(obj, value), value);
-var _open_dec, _appearance_dec, _sticky_dec, _color_dec$1, _a$1, _init$1, _color$1, _sticky, _appearance, _open;
-class Navbar extends (_a$1 = AeicoComponent, _color_dec$1 = [aeico.prop({ type: String })], _sticky_dec = [aeico.prop({ type: Boolean })], _appearance_dec = [aeico.prop({ type: String })], _open_dec = [aeico.prop({ type: Boolean })], _a$1) {
-  constructor() {
-    super(...arguments);
-    __privateAdd$1(this, _color$1, __runInitializers$1(_init$1, 8, this)), __runInitializers$1(_init$1, 11, this);
-    __privateAdd$1(this, _sticky, __runInitializers$1(_init$1, 12, this, false)), __runInitializers$1(_init$1, 15, this);
-    __privateAdd$1(this, _appearance, __runInitializers$1(_init$1, 16, this, "text")), __runInitializers$1(_init$1, 19, this);
-    __privateAdd$1(this, _open, __runInitializers$1(_init$1, 20, this, false)), __runInitializers$1(_init$1, 23, this);
-    __publicField$1(this, "_outsideClickHandler", null);
-    __publicField$1(this, "_handleInnerClick", (e) => {
-      if (!this.open) return;
-      const path = e.composedPath();
-      if (path.some((el) => el.tagName === "A")) {
-        this._closeMenu();
-      }
-    });
-    __publicField$1(this, "_toggleMenu", () => {
-      this.open = !this.open;
-    });
-    __publicField$1(this, "_closeMenu", () => {
-      if (this.open) this.open = false;
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.listen("click", this._handleInnerClick);
-    this._outsideClickHandler = (e) => {
-      var _a2;
-      if (!this.contains(e.target) && !((_a2 = this.shadowRoot) == null ? void 0 : _a2.contains(e.target))) {
-        this._closeMenu();
-      }
-    };
-    document.addEventListener("click", this._outsideClickHandler);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this._outsideClickHandler) {
-      document.removeEventListener("click", this._outsideClickHandler);
-      this._outsideClickHandler = null;
-    }
-  }
-  /** Toggle the mobile menu open/closed. */
-  toggleMenu() {
-    this.open = !this.open;
-  }
-  render() {
-    return aeico.html(({ div, nav, button, span, slot }) => {
-      div({ class: "inner" }, () => {
-        div({ part: "brand" }, () => {
-          slot({ name: "brand" });
-        });
-        nav({ part: "nav", "aria-label": "Main navigation" }, () => {
-          div({ part: "start" }, () => {
-            slot({ name: "start" });
-          });
-          div({ part: "end" }, () => {
-            slot({ name: "end" });
-          });
-        });
-        button(
-          {
-            part: "hamburger",
-            type: "button",
-            "aria-expanded": String(this.open),
-            "aria-label": "Toggle navigation",
-            "@click": this._toggleMenu
-          },
-          () => {
-            span({ "aria-hidden": "true" });
-            span({ "aria-hidden": "true" });
-            span({ "aria-hidden": "true" });
-          }
-        );
-      });
-    });
-  }
-}
-_init$1 = __decoratorStart$1(_a$1);
-_color$1 = /* @__PURE__ */ new WeakMap();
-_sticky = /* @__PURE__ */ new WeakMap();
-_appearance = /* @__PURE__ */ new WeakMap();
-_open = /* @__PURE__ */ new WeakMap();
-__decorateElement$1(_init$1, 4, "color", _color_dec$1, Navbar, _color$1);
-__decorateElement$1(_init$1, 4, "sticky", _sticky_dec, Navbar, _sticky);
-__decorateElement$1(_init$1, 4, "appearance", _appearance_dec, Navbar, _appearance);
-__decorateElement$1(_init$1, 4, "open", _open_dec, Navbar, _open);
-__decoratorMetadata$1(_init$1, Navbar);
-__publicField$1(Navbar, "tagName", "navbar");
-__publicField$1(Navbar, "styles", [styleVariables, colorCSS, navbarStyle]);
-Navbar.register();
-const detailStyle = ':host {\n  display: block;\n\n  --detail-bg:         var(--color-solid);\n  --detail-color:      var(--color-on-solid);\n  --detail-border:     var(--color-solid);\n  --detail-header-bg:  color-mix(in srgb, var(--color-solid), black 10%);\n  --detail-radius:     6px;\n}\n\n:host([variant="faint"]) {\n  --detail-bg:         var(--color-bg-subtle);\n  --detail-color:      var(--color-text-subtle);\n  --detail-border:     var(--color-border-subtle);\n  --detail-header-bg:  var(--color-bg-subtle);\n}\n\n:host([variant="subtle"]) {\n  --detail-bg:         transparent;\n  --detail-color:      var(--color-text-main);\n  --detail-border:     transparent;\n  --detail-header-bg:  transparent;\n}\n\n:host([variant="filled"]) {\n  --detail-bg:         var(--color-solid);\n  --detail-color:      var(--color-on-solid);\n  --detail-border:     var(--color-solid);\n  --detail-header-bg:  color-mix(in srgb, var(--color-solid), black 10%);\n}\n\n:host([variant="outlined"]) {\n  --detail-bg:         transparent;\n  --detail-color:      var(--color-text-subtle);\n  --detail-border:     var(--color-border);\n  --detail-header-bg:  transparent;\n}\n\n:host([disabled]) {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.detail {\n  border: 1px solid var(--detail-border);\n  border-radius: var(--detail-radius);\n  color: var(--detail-color);\n  background: var(--detail-bg);\n  overflow: hidden;\n}\n\n.summary {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 10px 14px;\n  background: var(--detail-header-bg);\n  color: inherit;\n  font-size: inherit;\n  font-family: inherit;\n  font-weight: 500;\n  border: none;\n  cursor: pointer;\n  text-align: left;\n  outline-offset: -2px;\n  user-select: none;\n}\n\n.summary:hover {\n  filter: brightness(0.93);\n}\n\n.summary:focus-visible {\n  outline: 2px solid var(--color-border);\n}\n\nslot[name="summary"] {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n}\n\n.label {\n  flex: 1;\n}\n\nslot[name="expand"],\nslot[name="collapse"] {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\nslot[name="collapse"] {\n  display: none;\n}\n\n:host([open]) slot[name="expand"] {\n  display: none;\n}\n\n:host([open]) slot[name="collapse"] {\n  display: inline-flex;\n}\n\n.content-outer {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 0.25s ease;\n}\n\n:host([open]) .content-outer {\n  grid-template-rows: 1fr;\n}\n\n.content {\n  overflow: hidden;\n  padding: 0 14px;\n  transition: padding 0.25s ease;\n}\n\n:host([open]) .content {\n  padding: 12px 14px;\n}\n\n';
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const textInput = require("./chunks/text-input.cjs");
+const select = require("./chunks/select.cjs");
+const slider = require("./chunks/slider.cjs");
+const checkbox = require("./chunks/checkbox.cjs");
+const radio = require("./chunks/radio.cjs");
+const _switch = require("./chunks/switch.cjs");
+const breadcrumbItem = require("./chunks/breadcrumb-item.cjs");
+const button = require("./chunks/button.cjs");
+const dropdownButton = require("./chunks/dropdown-button.cjs");
+const buttonGroup = require("./chunks/button-group.cjs");
+const badge = require("./chunks/badge.cjs");
+const tag = require("./chunks/tag.cjs");
+const alert = require("./chunks/alert.cjs");
+const dialog = require("./chunks/dialog.cjs");
+const icon = require("./chunks/icon.cjs");
+const iconButton = require("./chunks/icon-button.cjs");
+const tabPanel = require("./chunks/tab-panel.cjs");
+const divider = require("./chunks/divider.cjs");
+const card = require("./chunks/card.cjs");
+const navbar = require("./chunks/navbar.cjs");
+const detail = require("./chunks/detail.cjs");
+const aeico = require("aeico");
+const aeicoComponent = require("./chunks/aeico-component.cjs");
+const variables = require("./chunks/variables.cjs");
+const color = require("./chunks/color.cjs");
+const style = ":host {\n  display: block;\n  --progress-height: 8px;\n  --color-solid: var(--color-primary);\n}\n\n.progress-track {\n  width: 100%;\n  height: var(--progress-height);\n  background: var(--border-subtle);\n  border-radius: calc(var(--progress-height) / 2);\n  overflow: hidden;\n}\n\n.progress-bar {\n  display: block;\n  height: 100%;\n  border-radius: inherit;\n  background: var(--progress-bar-color, var(--color-solid));\n  width: 0%;\n  transition: width 0.35s ease;\n  position: relative;\n}\n\n/* animated: shimmer sweep on top of the solid fill */\n:host([animated]) .progress-bar::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    rgba(255, 255, 255, 0.35) 50%,\n    transparent 100%\n  );\n  background-size: 200% 100%;\n  animation: progress-shimmer 1.4s linear infinite;\n}\n\n@keyframes progress-shimmer {\n  0%   { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n";
 var __create = Object.create;
-var __defProp2 = Object.defineProperty;
+var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
 var __typeError = (msg) => {
   throw TypeError(msg);
 };
-var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
 var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
 var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
 var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
-var __decoratorMetadata = (array, target) => __defNormalProp2(target, __knownSymbol("metadata"), array[3]);
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
 var __runInitializers = (array, flags, self, value) => {
   for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
   return value;
@@ -4098,129 +64,88 @@ var __decorateElement = (array, flags, name, decorators, target, extra) => {
     else if (typeof it !== "object" || it === null) __typeError("Object expected");
     else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
   }
-  return desc && __defProp2(target, name, desc), target;
+  return desc && __defProp(target, name, desc), target;
 };
-var __publicField2 = (obj, key, value) => __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
-var _disabled_dec, _color_dec, _variant_dec, _summary_dec, _a, _init, _summary, _variant, _color, _disabled;
-class Detail extends (_a = AeicoComponent, _summary_dec = [aeico.prop({ type: String })], _variant_dec = [aeico.prop({ type: String })], _color_dec = [aeico.prop({ type: String })], _disabled_dec = [aeico.prop({ type: Boolean })], _a) {
+var _animated_dec, _color_dec, _label_dec, _value_dec, _a, _init, _value, _label, _color, _animated;
+class ProgressBar extends (_a = aeicoComponent.AeicoComponent, _value_dec = [aeico.prop({ type: Number })], _label_dec = [aeico.prop({ type: String })], _color_dec = [aeico.prop({ type: String })], _animated_dec = [aeico.prop({ type: Boolean })], _a) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _summary, __runInitializers(_init, 8, this, "")), __runInitializers(_init, 11, this);
-    __privateAdd(this, _variant, __runInitializers(_init, 12, this, "filled")), __runInitializers(_init, 15, this);
-    __privateAdd(this, _color, __runInitializers(_init, 16, this, "default")), __runInitializers(_init, 19, this);
-    __privateAdd(this, _disabled, __runInitializers(_init, 20, this, false)), __runInitializers(_init, 23, this);
-    __publicField2(this, "_open", false);
-    __publicField2(this, "_handleSummaryClick", () => {
-      this.toggle();
-    });
-  }
-  /** Opens the detail panel. */
-  open() {
-    if (this.disabled || this._open) return;
-    this._open = true;
-    this.toggleAttribute("open", true);
-    this.update();
-    this.emit("open");
-  }
-  /** Closes the detail panel. */
-  close() {
-    if (!this._open) return;
-    this._open = false;
-    this.toggleAttribute("open", false);
-    this.update();
-    this.emit("close");
-  }
-  /** Toggles the detail panel open/closed. */
-  toggle() {
-    if (this._open) {
-      this.close();
-    } else {
-      this.open();
-    }
-  }
-  /** Returns whether the detail panel is currently open. */
-  isOpen() {
-    return this._open;
+    __privateAdd(this, _value, __runInitializers(_init, 8, this, 0)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _label, __runInitializers(_init, 12, this, "")), __runInitializers(_init, 15, this);
+    __privateAdd(this, _color, __runInitializers(_init, 16, this, "primary")), __runInitializers(_init, 19, this);
+    __privateAdd(this, _animated, __runInitializers(_init, 20, this, false)), __runInitializers(_init, 23, this);
   }
   render() {
-    return aeico.html(({ div, button, span, slot }) => {
-      div({ className: "detail", part: "detail" }, () => {
-        button(
+    const clamped = Math.min(100, Math.max(0, this.value));
+    return aeico.html(({ div, span }) => {
+      div({ part: "base" }, () => {
+        div(
           {
-            className: "summary",
-            part: "summary",
-            type: "button",
-            "aria-expanded": String(this._open),
-            disabled: this.disabled || void 0,
-            "@click": this._handleSummaryClick
+            part: "track",
+            className: "progress-track",
+            role: "progressbar",
+            "aria-valuenow": String(clamped),
+            "aria-valuemin": "0",
+            "aria-valuemax": "100",
+            ...this.label ? { "aria-label": this.label } : {}
           },
           () => {
-            slot({ name: "summary" }, () => {
-              span({ className: "label", textContent: this.summary });
+            span({
+              part: "bar",
+              className: "progress-bar",
+              style: { width: `${clamped}%` }
             });
-            slot({ name: "expand" });
-            slot({ name: "collapse" });
           }
         );
-        div({ className: "content-outer" }, () => {
-          div(
-            {
-              className: "content",
-              part: "content",
-              role: "region"
-            },
-            () => {
-              slot();
-            }
-          );
-        });
       });
     });
   }
 }
 _init = __decoratorStart(_a);
-_summary = /* @__PURE__ */ new WeakMap();
-_variant = /* @__PURE__ */ new WeakMap();
+_value = /* @__PURE__ */ new WeakMap();
+_label = /* @__PURE__ */ new WeakMap();
 _color = /* @__PURE__ */ new WeakMap();
-_disabled = /* @__PURE__ */ new WeakMap();
-__decorateElement(_init, 4, "summary", _summary_dec, Detail, _summary);
-__decorateElement(_init, 4, "variant", _variant_dec, Detail, _variant);
-__decorateElement(_init, 4, "color", _color_dec, Detail, _color);
-__decorateElement(_init, 4, "disabled", _disabled_dec, Detail, _disabled);
-__decoratorMetadata(_init, Detail);
-__publicField2(Detail, "tagName", "detail");
-__publicField2(Detail, "styles", [styleVariables, colorCSS, detailStyle]);
-Detail.register();
-exports.Alert = Alert;
-exports.Badge = Badge;
-exports.Breadcrumb = Breadcrumb;
-exports.BreadcrumbItem = BreadcrumbItem;
-exports.Button = Button;
-exports.ButtonGroup = ButtonGroup;
-exports.Card = Card;
-exports.Checkbox = Checkbox;
-exports.Detail = Detail;
-exports.Dialog = Dialog;
-exports.Divider = Divider;
-exports.Dropdown = Dropdown;
-exports.DropdownButton = DropdownButton;
-exports.DropdownItem = DropdownItem;
-exports.Icon = Icon;
-exports.IconButton = IconButton;
-exports.IconRegistry = IconRegistry;
-exports.Navbar = Navbar;
-exports.Radio = Radio;
-exports.RadioGroup = RadioGroup;
-exports.Select = Select;
-exports.Slider = Slider;
-exports.Switch = Switch;
-exports.Tab = Tab;
-exports.TabPanel = TabPanel;
-exports.Tabs = Tabs;
-exports.Tag = Tag;
-exports.TextInput = TextInput;
+_animated = /* @__PURE__ */ new WeakMap();
+__decorateElement(_init, 4, "value", _value_dec, ProgressBar, _value);
+__decorateElement(_init, 4, "label", _label_dec, ProgressBar, _label);
+__decorateElement(_init, 4, "color", _color_dec, ProgressBar, _color);
+__decorateElement(_init, 4, "animated", _animated_dec, ProgressBar, _animated);
+__decoratorMetadata(_init, ProgressBar);
+__publicField(ProgressBar, "tagName", "progress-bar");
+__publicField(ProgressBar, "styles", [variables.styleVariables, color.colorCSS, style]);
+ProgressBar.register();
+exports.TextInput = textInput.TextInput;
+exports.Select = select.Select;
+exports.Slider = slider.Slider;
+exports.Checkbox = checkbox.Checkbox;
+exports.Radio = radio.Radio;
+exports.RadioGroup = radio.RadioGroup;
+exports.Switch = _switch.Switch;
+exports.Breadcrumb = breadcrumbItem.Breadcrumb;
+exports.BreadcrumbItem = breadcrumbItem.BreadcrumbItem;
+exports.Button = button.Button;
+exports.Dropdown = dropdownButton.Dropdown;
+exports.DropdownButton = dropdownButton.DropdownButton;
+exports.DropdownItem = dropdownButton.DropdownItem;
+exports.ButtonGroup = buttonGroup.ButtonGroup;
+exports.Badge = badge.Badge;
+exports.Tag = tag.Tag;
+exports.Alert = alert.Alert;
+exports.Dialog = dialog.Dialog;
+exports.Icon = icon.Icon;
+exports.IconRegistry = icon.IconRegistry;
+exports.IconButton = iconButton.IconButton;
+exports.Tab = tabPanel.Tab;
+exports.TabPanel = tabPanel.TabPanel;
+exports.Tabs = tabPanel.Tabs;
+exports.Divider = divider.Divider;
+exports.Card = card.Card;
+exports.Navbar = navbar.Navbar;
+exports.Detail = detail.Detail;
+exports.ProgressBar = ProgressBar;
 //# sourceMappingURL=index.cjs.map