aeico-components 0.1.1

package/dist/index.cjs

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