aeico-components 0.1.6 → 0.1.8

package/dist/select.js

@@ -1,17 +1,13 @@
-import { S, S as S2 } from "./chunks/select.js";
-import { A as AeicoComponent } from "./chunks/aeico-component.js";
-import { prop, html } from "aeico";
-import { v as variables } from "./chunks/variables.js";
-const style = ":host {\n  display: block;\n\n  --option-padding: 0.417em 0.667em;\n  --option-bg: transparent;\n  --option-bg-hover: var(--surface-raised);\n  --option-bg-selected: color-mix(in srgb, var(--color-primary) 12%, transparent);\n  --option-color: var(--color-text-main);\n  --option-color-disabled: var(--color-text-disabled);\n  --option-color-selected: var(--color-primary);\n  --option-font-size: 1em;\n  --option-transition: background 0.1s;\n}\n\n.option-item {\n  padding: var(--option-padding);\n  font-size: var(--option-font-size);\n  color: var(--option-color);\n  background: var(--option-bg);\n  cursor: pointer;\n  transition: var(--option-transition);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: none;\n}\n\n:host(:hover:not([disabled])) .option-item {\n  background: var(--option-bg-hover);\n}\n\n:host([selected]) .option-item {\n  background: var(--option-bg-selected);\n  color: var(--option-color-selected);\n}\n\n:host([disabled]) .option-item {\n  color: var(--option-color-disabled);\n  cursor: default;\n  pointer-events: none;\n}\n\n\n";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
 var __typeError = (msg) => {
   throw TypeError(msg);
 };
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __decoratorStart = (base) => [, , , __create(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)) });
@@ -21,48 +17,1166 @@ var __runInitializers = (array, flags, 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]() {
+  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[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(k < 4 ? target : { get [name]() {
     return __privateGet(this, extra);
   }, set [name](x) {
     return __privateSet(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(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;
+    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 : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
+      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.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);
+    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(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = 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 && __defProp(target, name, desc), target;
+  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
 };
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
+var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : 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 _selected_dec, _disabled_dec, _label_dec, _value_dec, _a, _init, _value, _label, _disabled, _selected;
-class SelectOption extends (_a = AeicoComponent, _value_dec = [prop({ type: String })], _label_dec = [prop({ type: String })], _disabled_dec = [prop({ type: Boolean })], _selected_dec = [prop({ type: Boolean })], _a) {
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+
+// src/aeico-field.ts
+import { tags } from "aeico";
+
+// src/aeico-component.ts
+import { AeicoElement } from "aeico";
+
+// src/utils.ts
+function toKebab(str) {
+  const cleaned = str.replace(/^[_\d]+/, "");
+  return cleaned.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+
+// src/aeico-component.ts
+var TAG_NAME_PREFIX = "ae";
+var AeicoComponent = class extends AeicoElement {
+  static register(name) {
+    const tagName = name || `${TAG_NAME_PREFIX}-${this.tagName || toKebab(this.name)}`;
+    super.register(tagName);
+  }
+};
+var aeico_component_default = AeicoComponent;
+
+// src/aeico-field.ts
+var AeicoField = class _AeicoField extends aeico_component_default {
+  /**
+   * Define base field properties (extends AeicoElement properties)
+   */
+  static props = {
+    value: { type: String },
+    defaultValue: { type: String },
+    resettable: { type: Boolean },
+    resetText: { type: String },
+    resetTitle: { type: String },
+    clearable: { type: Boolean },
+    clearText: { type: String },
+    clearTitle: { type: String },
+    actionButtonStyle: { type: String },
+    size: { type: String },
+    disabled: { type: Boolean },
+    label: { type: String },
+    labelPlacement: { type: String },
+    required: { type: Boolean },
+    helperText: { type: String },
+    error: { type: String }
+  };
+  /**
+   * Property watchers
+   */
+  static watchers = {
+    disabled: "onDisabledChanged",
+    error: "onErrorChanged"
+  };
+  static _fieldIdCounter = 0;
+  _fieldId;
+  constructor() {
+    super();
+    this._fieldId = `ae-field-${++_AeicoField._fieldIdCounter}`;
+  }
+  /**
+   * The underlying form control element (input, select, etc.)
+   * Subclasses should set this to their specific element
+   */
+  fieldElement = null;
+  resetBtn = null;
+  clearBtn = null;
+  boundOnChange = () => this.setValue(this.getValue(), { silent: false, action: "change" });
+  boundOnReset = () => this.onReset();
+  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) {
+    const style = this.actionButtonStyle || "integrated";
+    const hasActions = force || this.clearable || this.resettable;
+    if (hasActions && style === "integrated") {
+      tags.div({ className: "action-controls" }, () => {
+        this.renderClearButton(force);
+        this.renderResetButton(force);
+      });
+    } else {
+      this.renderClearButton(force);
+      this.renderResetButton(force);
+    }
+  }
+  renderResetButton(force = false) {
+    const { button } = tags;
+    const style = this.actionButtonStyle || "integrated";
+    if (force || this.resettable) {
+      const className = style === "integrated" ? "reset-btn action-btn" : "reset-btn";
+      this.resetBtn = button({
+        className,
+        textContent: this.resetText || "\u21BA",
+        title: this.resetTitle || "\u21BA",
+        "@click": this.boundOnReset
+      });
+    }
+  }
+  renderClearButton(force = false) {
+    const { button } = tags;
+    const style = this.actionButtonStyle || "integrated";
+    if (force || this.clearable) {
+      const className = style === "integrated" ? "clear-btn action-btn" : "clear-btn";
+      this.clearBtn = button({
+        className,
+        textContent: this.clearText || "\u2715",
+        title: this.clearTitle || "\u2715",
+        "@click": this.boundOnClear
+      });
+    }
+  }
+  /**
+   * Returns a stable unique ID for this field instance,
+   * used to associate <label htmlFor> with the underlying input.
+   */
+  getFieldId() {
+    return this._fieldId;
+  }
+  /**
+   * Renders a <label> element when the `label` prop is set.
+   * Call this as the first statement inside the render() html() callback.
+   * @param fieldId - The id to set on the underlying form control element (pass to input via id prop)
+   */
+  renderLabel(fieldId) {
+    if (!this.label) return;
+    const { span } = tags;
+    tags.label({ id: `${fieldId}-label`, className: "field-label", for: fieldId }, () => {
+      span({ textContent: this.label });
+      if (this.required) {
+        span({ className: "field-required", "aria-hidden": "true", textContent: " *" });
+      }
+    });
+  }
+  /**
+   * Renders helper text below the field. Hidden when `error` is set.
+   * Call this after the field-body div in render().
+   */
+  renderHelperText() {
+    if (!this.helperText || this.error) return;
+    const { span } = tags;
+    span({ className: "field-helper", textContent: this.helperText });
+  }
+  /**
+   * Renders an error message below the field when `error` is set.
+   * Call this after renderHelperText() in render().
+   */
+  renderError() {
+    if (!this.error) return;
+    const { span } = tags;
+    span({ className: "field-error", textContent: this.error });
+  }
+  /**
+   * Watcher for disabled property
+   */
+  onDisabledChanged(newValue) {
+    if (this.fieldElement) {
+      this.fieldElement.disabled = Boolean(newValue);
+    }
+  }
+  /**
+   * Watcher for error property — syncs aria-invalid on the field element
+   */
+  onErrorChanged(newValue) {
+    if (this.fieldElement) {
+      if (newValue) {
+        this.fieldElement.setAttribute("aria-invalid", "true");
+      } else {
+        this.fieldElement.removeAttribute("aria-invalid");
+      }
+    }
+  }
+  /**
+   * Lifecycle: called after every render update.
+   * Keeps aria-invalid on fieldElement in sync regardless of watcher timing.
+   */
+  onUpdated(_changedProps) {
+    if (!this.fieldElement) return;
+    if (this.error) {
+      this.fieldElement.setAttribute("aria-invalid", "true");
+    } else {
+      this.fieldElement.removeAttribute("aria-invalid");
+    }
+  }
+  /**
+   * Returns true if the field passes constraint validation.
+   * Delegates to the underlying fieldElement when available;
+   * falls back to a manual required-check otherwise.
+   */
+  checkValidity() {
+    if (this.fieldElement) {
+      return this.fieldElement.checkValidity();
+    }
+    if (this.required) {
+      const v = this.value;
+      return v !== void 0 && v !== "" && v !== null;
+    }
+    return true;
+  }
+  /**
+   * Reports validity, showing the browser's built-in validation UI when possible.
+   */
+  reportValidity() {
+    if (this.fieldElement) {
+      return this.fieldElement.reportValidity();
+    }
+    return this.checkValidity();
+  }
+  /**
+   * 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() {
+    return this.fieldElement?.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?.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 });
+  }
+};
+var aeico_field_default = AeicoField;
+
+// src/select/select.ts
+import { html as html2, tags as tags2 } from "aeico";
+
+// css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/select.css
+var select_default = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--ae-size-base);\n\n  /* Layout variables */\n  --select-field-gap: 2px;\n\n  /* Trigger variables */\n  --select-font-size: 1em;\n  --select-padding: 0.333em 0.583em;\n  --select-border-width: 1px;\n  --select-transition: border-color 0.12s, background 0.12s;\n\n  /* Arrow */\n  --select-arrow-size: 0.75em;\n\n  /* Dropdown */\n  --select-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  --select-dropdown-max-height: 240px;\n  --select-dropdown-z-index: 1000;\n}\n\n.container {\n  display: flex;\n  align-items: center;\n  gap: var(--select-field-gap);\n  width: 100%;\n  position: relative;\n}\n\n.trigger {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 0.333em;\n  font-size: var(--select-font-size);\n  padding: var(--select-padding);\n  border: var(--select-border-width) solid var(--ae-border-subtle);\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs));\n  background: var(--ae-surface-base);\n  color: var(--ae-color-text-muted);\n  cursor: pointer;\n  transition: var(--select-transition);\n  user-select: none;\n  outline: none;\n  box-sizing: border-box;\n}\n\n.trigger:hover:not(.disabled) {\n  border-color: var(--ae-border-default);\n  background: var(--ae-surface-raised);\n}\n\n.trigger.open {\n  border-color: var(--ae-border-focus);\n  background: var(--ae-surface-raised);\n}\n\n.trigger.disabled {\n  opacity: 0.5;\n  cursor: default;\n  pointer-events: none;\n}\n\n/* Error state */\n:host([error]) .trigger {\n  border-color: var(--field-error-color, var(--ae-red));\n}\n\n:host([error]) .trigger:hover:not(.disabled),\n:host([error]) .trigger.open {\n  border-color: var(--field-error-color, var(--ae-red));\n}\n\n.value {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.placeholder {\n  color: var(--ae-color-text-disabled);\n}\n\n.selected-list {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  align-items: center;\n  padding: 2px 0;\n}\n\n/* Non-expandable (default): single-row, clip overflow */\n.trigger:has(.selected-list--clipped) {\n  flex-wrap: nowrap;\n}\n\n.selected-list--clipped {\n  flex-wrap: nowrap;\n  overflow: hidden;\n}\n\n.overflow-indicator {\n  flex-shrink: 0;\n  align-self: center;\n  padding: 1px 6px;\n  background: color-mix(in srgb, var(--ae-color-primary) 12%, transparent);\n  color: var(--ae-color-primary);\n  border: 1px solid color-mix(in srgb, var(--ae-color-primary) 30%, transparent);\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs));\n  font-size: 0.82em;\n  line-height: 1.6;\n  cursor: default;\n  user-select: none;\n}\n\n.arrow {\n  flex-shrink: 0;\n  align-self: center;\n  font-size: var(--select-arrow-size);\n  color: var(--ae-color-text-muted);\n  transition: transform 0.12s;\n  pointer-events: none;\n  line-height: 1;\n}\n\n.trigger.open .arrow {\n  transform: rotate(180deg);\n}\n\n.dropdown {\n  display: none;\n  position: absolute;\n  z-index: var(--select-dropdown-z-index);\n  background: var(--ae-surface-overlay);\n  border: 1px solid var(--ae-border-default);\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs));\n  box-shadow: var(--select-dropdown-shadow);\n  max-height: var(--select-dropdown-max-height);\n  overflow-y: auto;\n  min-width: 100%;\n  box-sizing: border-box;\n}\n\n.dropdown.open {\n  display: block;\n}\n\n.dropdown.position-bottom {\n  top: 100%;\n  left: 0;\n  margin-top: 2px;\n}\n\n.dropdown.position-top {\n  bottom: 100%;\n  left: 0;\n  margin-bottom: 2px;\n}\n\n.dropdown.position-left {\n  right: 100%;\n  top: 0;\n  margin-right: 2px;\n}\n\n.dropdown.position-right {\n  left: 100%;\n  top: 0;\n  margin-left: 2px;\n}\n\n.container:has(.action-controls) .trigger {\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs)) 0 0 var(--ae-border-radius, var(--ae-radius-xs));\n}\n";
+
+// css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/variables.css
+var variables_default = `:root,
+:host {
+  --ae-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
+    "Noto Sans", "Liberation Sans", Arial, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+  font-family: var(--ae-font-sans-serif);
+  --ae-blue:   #0e639c;
+  --ae-green:  #28a745;
+  --ae-red:    #dc3545;
+  --ae-yellow: #ffc107;
+  --ae-cyan:   #17a2b8;
+  --ae-gray:   #6e6e6e;
+  --ae-slate:  #64748b;
+  --ae-dark:   #343a40;
+  --ae-light:  #f8f9fa;
+}
+
+:root,
+:host {
+  /* Blue */
+  --ae-blue-100: color-mix(in srgb, var(--ae-blue) 20%, white);
+  --ae-blue-200: color-mix(in srgb, var(--ae-blue) 40%, white);
+  --ae-blue-300: color-mix(in srgb, var(--ae-blue) 60%, white);
+  --ae-blue-400: color-mix(in srgb, var(--ae-blue) 80%, white);
+  --ae-blue-500: var(--ae-blue);
+  --ae-blue-600: color-mix(in srgb, var(--ae-blue) 80%, black);
+  --ae-blue-700: color-mix(in srgb, var(--ae-blue) 60%, black);
+  --ae-blue-800: color-mix(in srgb, var(--ae-blue) 40%, black);
+  --ae-blue-900: color-mix(in srgb, var(--ae-blue) 20%, black);
+
+  /* Green */
+  --ae-green-100: color-mix(in srgb, var(--ae-green) 20%, white);
+  --ae-green-200: color-mix(in srgb, var(--ae-green) 40%, white);
+  --ae-green-300: color-mix(in srgb, var(--ae-green) 60%, white);
+  --ae-green-400: color-mix(in srgb, var(--ae-green) 80%, white);
+  --ae-green-500: var(--ae-green);
+  --ae-green-600: color-mix(in srgb, var(--ae-green) 80%, black);
+  --ae-green-700: color-mix(in srgb, var(--ae-green) 60%, black);
+  --ae-green-800: color-mix(in srgb, var(--ae-green) 40%, black);
+  --ae-green-900: color-mix(in srgb, var(--ae-green) 20%, black);
+
+  /* Red */
+  --ae-red-100: color-mix(in srgb, var(--ae-red) 20%, white);
+  --ae-red-200: color-mix(in srgb, var(--ae-red) 40%, white);
+  --ae-red-300: color-mix(in srgb, var(--ae-red) 60%, white);
+  --ae-red-400: color-mix(in srgb, var(--ae-red) 80%, white);
+  --ae-red-500: var(--ae-red);
+  --ae-red-600: color-mix(in srgb, var(--ae-red) 80%, black);
+  --ae-red-700: color-mix(in srgb, var(--ae-red) 60%, black);
+  --ae-red-800: color-mix(in srgb, var(--ae-red) 40%, black);
+  --ae-red-900: color-mix(in srgb, var(--ae-red) 20%, black);
+
+  /* Yellow */
+  --ae-yellow-100: color-mix(in srgb, var(--ae-yellow) 20%, white);
+  --ae-yellow-200: color-mix(in srgb, var(--ae-yellow) 40%, white);
+  --ae-yellow-300: color-mix(in srgb, var(--ae-yellow) 60%, white);
+  --ae-yellow-400: color-mix(in srgb, var(--ae-yellow) 80%, white);
+  --ae-yellow-500: var(--ae-yellow);
+  --ae-yellow-600: color-mix(in srgb, var(--ae-yellow) 80%, black);
+  --ae-yellow-700: color-mix(in srgb, var(--ae-yellow) 60%, black);
+  --ae-yellow-800: color-mix(in srgb, var(--ae-yellow) 40%, black);
+  --ae-yellow-900: color-mix(in srgb, var(--ae-yellow) 20%, black);
+
+  /* Cyan */
+  --ae-cyan-100: color-mix(in srgb, var(--ae-cyan) 20%, white);
+  --ae-cyan-200: color-mix(in srgb, var(--ae-cyan) 40%, white);
+  --ae-cyan-300: color-mix(in srgb, var(--ae-cyan) 60%, white);
+  --ae-cyan-400: color-mix(in srgb, var(--ae-cyan) 80%, white);
+  --ae-cyan-500: var(--ae-cyan);
+  --ae-cyan-600: color-mix(in srgb, var(--ae-cyan) 80%, black);
+  --ae-cyan-700: color-mix(in srgb, var(--ae-cyan) 60%, black);
+  --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);
+  --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);
+
+  /* Gray  (neutral \u2014 base #6e6e6e) */
+  --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);
+  --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);
+  --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);
+  --ae-gray-400: color-mix(in srgb, var(--ae-gray) 80%, white);
+  --ae-gray-500: var(--ae-gray);
+  --ae-gray-600: color-mix(in srgb, var(--ae-gray) 80%, black);
+  --ae-gray-700: color-mix(in srgb, var(--ae-gray) 60%, black);
+  --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);
+  --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);
+
+  /* Slate  (blue-gray \u2014 base #64748b, used for 'secondary') */
+  --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);
+  --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);
+  --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);
+  --ae-slate-400: color-mix(in srgb, var(--ae-slate) 80%, white);
+  --ae-slate-500: var(--ae-slate);
+  --ae-slate-600: color-mix(in srgb, var(--ae-slate) 80%, black);
+  --ae-slate-700: color-mix(in srgb, var(--ae-slate) 60%, black);
+  --ae-slate-800: color-mix(in srgb, var(--ae-slate) 40%, black);
+  --ae-slate-900: color-mix(in srgb, var(--ae-slate) 20%, black);
+
+  /* Dark  (base #343a40) */
+  --ae-dark-100: color-mix(in srgb, var(--ae-dark) 20%, white);
+  --ae-dark-200: color-mix(in srgb, var(--ae-dark) 40%, white);
+  --ae-dark-300: color-mix(in srgb, var(--ae-dark) 60%, white);
+  --ae-dark-400: color-mix(in srgb, var(--ae-dark) 80%, white);
+  --ae-dark-500: var(--ae-dark);
+  --ae-dark-600: color-mix(in srgb, var(--ae-dark) 80%, black);
+  --ae-dark-700: color-mix(in srgb, var(--ae-dark) 60%, black);
+  --ae-dark-800: color-mix(in srgb, var(--ae-dark) 40%, black);
+  --ae-dark-900: color-mix(in srgb, var(--ae-dark) 20%, black);
+
+  /* Light  (base #f8f9fa) */
+  --ae-light-100: color-mix(in srgb, var(--ae-light) 20%, white);
+  --ae-light-200: color-mix(in srgb, var(--ae-light) 40%, white);
+  --ae-light-300: color-mix(in srgb, var(--ae-light) 60%, white);
+  --ae-light-400: color-mix(in srgb, var(--ae-light) 80%, white);
+  --ae-light-500: var(--ae-light);
+  --ae-light-600: color-mix(in srgb, var(--ae-light) 80%, black);
+  --ae-light-700: color-mix(in srgb, var(--ae-light) 60%, black);
+  --ae-light-800: color-mix(in srgb, var(--ae-light) 40%, black);
+  --ae-light-900: color-mix(in srgb, var(--ae-light) 20%, black);
+}
+
+:root,
+:host {
+  /* Hover / active mix (light default \u2014 overridden in \xA7 6 dark) */
+  --ae-color-mix-hover:  black 10%;
+  --ae-color-mix-active: black 20%;
+
+  /* Primary (Blue) */
+  --ae-color-primary:          var(--ae-blue-500);
+  --ae-color-primary-hover:    color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-hover));
+  --ae-color-primary-active:   color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-active));
+  --ae-color-primary-disabled: color-mix(in srgb, var(--ae-blue) 50%, var(--ae-gray-500));
+
+  /* Success (Green) */
+  --ae-color-success:          var(--ae-green-500);
+  --ae-color-success-hover:    color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-hover));
+  --ae-color-success-active:   color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-active));
+  --ae-color-success-disabled: color-mix(in srgb, var(--ae-green) 50%, var(--ae-gray-500));
+
+  /* Danger (Red) */
+  --ae-color-danger:           var(--ae-red-500);
+  --ae-color-danger-hover:     color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-hover));
+  --ae-color-danger-active:    color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-active));
+  --ae-color-danger-disabled:  color-mix(in srgb, var(--ae-red) 50%, var(--ae-gray-500));
+
+  /* Warning (Yellow) */
+  --ae-color-warning:          var(--ae-yellow-500);
+  --ae-color-warning-hover:    color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-hover));
+  --ae-color-warning-active:   color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-active));
+  --ae-color-warning-disabled: color-mix(in srgb, var(--ae-yellow) 50%, var(--ae-gray-500));
+
+  /* Info (Cyan) */
+  --ae-color-info:             var(--ae-cyan-500);
+  --ae-color-info-hover:       color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-hover));
+  --ae-color-info-active:      color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));
+  --ae-color-info-disabled:    color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));
+
+  /* Secondary (Slate) \u2014 base differs per theme, overridden in \xA7 6 dark */
+  --ae-color-secondary:        var(--ae-slate-500);
+  --ae-color-secondary-hover:  color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));
+  --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));
+  --ae-color-secondary-text:   var(--ae-slate-700);
+}
+
+
+.theme-light,
+:root[theme="light"],
+:host([theme="light"]),
+:host-context([theme="light"]),
+:where(:root),
+:host {
+  color-scheme: light;
+
+  /* Gray UI aliases \u2014 lighter palette steps for elements on white background */
+  --ae-color-gray-dark:     var(--ae-gray-400);
+  --ae-color-gray:          var(--ae-gray-300);
+  --ae-color-gray-light:    var(--ae-gray-200);
+  --ae-color-gray-lighter:  var(--ae-gray-100);
+  --ae-color-gray-lightest: color-mix(in srgb, var(--ae-gray) 10%, white);
+
+  /* Text */
+  --ae-color-text-main:       var(--ae-dark-700);
+  --ae-color-text-muted:      var(--ae-gray-600);
+  --ae-color-text-disabled:   var(--ae-gray-300);
+  --ae-color-text-link:       var(--ae-blue-500);
+  --ae-color-text-link-hover: var(--ae-blue-700);
+
+  /* Surfaces */
+  --ae-surface-sunken:  var(--ae-light-500);
+  --ae-surface-base:    white;
+  --ae-surface-raised:  var(--ae-light-500);
+  --ae-surface-overlay: white;
+  --ae-color-overlay:   rgba(0, 0, 0, 0.4);
+
+  /* Borders */
+  --ae-border-subtle:   rgba(0, 0, 0, 0.08);
+  --ae-border-default:  rgba(0, 0, 0, 0.15);
+  --ae-border-hover:    rgba(0, 0, 0, 0.25);
+  --ae-border-focus:    var(--ae-color-primary);
+  --ae-border-disabled: rgba(0, 0, 0, 0.06);
+
+  /* Focus ring */
+  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.30);
+  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);
+
+  /* Subtle intent tokens \u2014 light context */
+  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.08);
+  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.40);
+  --ae-color-primary-text-emphasis:   var(--ae-blue-700);
+
+  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.08);
+  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.40);
+  --ae-color-success-text-emphasis:   var(--ae-green-700);
+
+  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.08);
+  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.40);
+  --ae-color-danger-text-emphasis:    var(--ae-red-700);
+
+  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.08);
+  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.40);
+  --ae-color-warning-text-emphasis:   var(--ae-yellow-700);
+
+  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.08);
+  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.40);
+  --ae-color-info-text-emphasis:      var(--ae-cyan-700);
+
+  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.08);
+  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.40);
+  --ae-color-secondary-text-emphasis: var(--ae-slate-700);
+
+  --ae-color-light-bg-subtle:         var(--ae-gray-100);   /* opaque on white: ~#e2e2e2 */
+  --ae-color-light-border-subtle:     var(--ae-gray-200);   /* opaque on white: ~#c4c4c4 */
+
+  --ae-color-dark-bg-subtle:          var(--ae-dark-100);   /* opaque on white: ~#d6d8d9 */
+  --ae-color-dark-border-subtle:      var(--ae-dark-300);   /* opaque on white: ~#85898c */
+
+  /* Component tokens \u2014 light defaults */
+  --ae-action-btn-bg:          var(--ae-gray-200);
+  --ae-action-btn-bg-hover:    var(--ae-color-primary);
+  --ae-action-btn-color:       var(--ae-gray-600);
+  --ae-action-btn-color-hover: white;
+
+  --ae-clear-btn-bg-hover:     var(--ae-color-danger);
+  --ae-clear-btn-color-hover:  white;
+
+  --ae-reset-btn-border-radius: var(--ae-radius-xs);
+  --ae-reset-btn-bg:            var(--ae-action-btn-bg);
+  --ae-reset-btn-bg-hover:      var(--ae-action-btn-bg-hover);
+  --ae-reset-btn-color:         var(--ae-action-btn-color);
+  --ae-reset-btn-color-hover:   var(--ae-action-btn-color-hover);
+  --ae-reset-btn-transition:    all 0.12s;
+
+  --ae-clear-btn-border-radius: var(--ae-radius-xs);
+  --ae-clear-btn-bg:            var(--ae-action-btn-bg);
+  --ae-clear-btn-color:         var(--ae-action-btn-color);
+  --ae-clear-btn-transition:    all 0.12s;
+}
+
+:root,
+:host {
+  --ae-size-scale: 1;
+  --ae-size-base:  calc(1rem * var(--ae-size-scale));                    /* 16px */
+  --ae-size-xl:    round(calc(var(--ae-size-l) * 1.125), 1px);           /* 23px */
+  --ae-size-l:     round(calc(var(--ae-size-m) * 1.125 * 1.125), 1px);   /* 20px */
+  --ae-size-m:     var(--ae-size-base);                                  /* 16px */
+  --ae-size-s:     round(calc(var(--ae-size-m) / 1.125), 1px);           /* 14px */
+  --ae-size-xs:    round(calc(var(--ae-size-s) / 1.125), 1px);           /* 12px */
+  --ae-size-2xs:   round(calc(var(--ae-size-xs) / 1.125), 1px);          /* 11px */
+  --ae-size-3xs:   round(calc(var(--ae-size-2xs) / 1.125), 1px);         /* 10px */
+}
+
+/* Border-radius tokens \u2014 shared across all components */
+:root,
+:host {
+  /**
+   * Unified border-radius hook for all components.
+   *
+   * Not set by default \u2014 each component falls back to its own --ae-radius-*
+   * token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).
+   *
+   * Usage:
+   *   :root { --ae-border-radius: 0; }       // global: all components square
+   *   :root { --ae-border-radius: 999px; }   // global: all components pill
+   *   ae-button { --ae-border-radius: 50%; } // scoped: only buttons circular
+   *   .sidebar { --ae-border-radius: 8px; }  // scoped: everything inside .sidebar
+   *
+   * To restore a component to its own default:
+   *   ae-card { --ae-border-radius: initial; }
+   */
+
+  --ae-radius-square:  0;
+  --ae-radius-xs:      2px;
+  --ae-radius-sm:      4px;
+  --ae-radius-md:      6px;
+  --ae-radius-lg:      8px;
+  --ae-radius-xl:      12px;
+  --ae-radius-pill:    999px;
+  --ae-radius-circle:  50%;
+}
+
+/* Layout tokens \u2014 defined on :root so all light DOM elements can use them */
+:root,
+:host {
+  --container-max-width: 1280px;
+  --container-padding-x: 1.5rem;
+}
+
+.theme-dark,
+:root[theme="dark"],
+:host([theme="dark"]),
+:host-context([theme="dark"]) {
+  color-scheme: dark;
+
+  /* Hover / active \u2014 slightly gentler on dark backgrounds */
+  --ae-color-mix-hover:  black 8%;
+  --ae-color-mix-active: black 16%;
+
+  /* Gray UI aliases \u2014 darker palette steps for elements on dark background */
+  --ae-color-gray-dark:     var(--ae-gray-800);
+  --ae-color-gray:          var(--ae-gray-700);
+  --ae-color-gray-light:    var(--ae-gray-600);
+  --ae-color-gray-lighter:  var(--ae-gray-500);
+  --ae-color-gray-lightest: var(--ae-gray-400);
+
+  /* Secondary \u2014 deeper base on dark background */
+  --ae-color-secondary:      var(--ae-slate-700);
+  --ae-color-secondary-text: var(--ae-slate-300);
+
+  /* Text */
+  --ae-color-text-main:       white;
+  --ae-color-text-muted:      var(--ae-gray-200);
+  --ae-color-text-disabled:   var(--ae-gray-500);
+  --ae-color-text-link:       var(--ae-blue-300);
+  --ae-color-text-link-hover: var(--ae-blue-200);
+
+  /* Surfaces */
+  --ae-surface-sunken:  var(--ae-gray-900);
+  --ae-surface-base:    color-mix(in srgb, var(--ae-gray) 27%, black);
+  --ae-surface-raised:  color-mix(in srgb, var(--ae-gray) 34%, black);
+  --ae-surface-overlay: color-mix(in srgb, var(--ae-gray) 38%, black);
+  --ae-color-overlay:   rgba(0, 0, 0, 0.6);
+
+  /* Borders */
+  --ae-border-subtle:   rgba(255, 255, 255, 0.08);
+  --ae-border-default:  rgba(255, 255, 255, 0.12);
+  --ae-border-hover:    rgba(255, 255, 255, 0.20);
+  --ae-border-focus:    var(--ae-color-primary);
+  --ae-border-disabled: rgba(255, 255, 255, 0.06);
+
+  /* Focus ring */
+  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.25);
+  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);
+
+  /* Subtle intent tokens \u2014 dark context (more alpha, lighter text-emphasis) */
+  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.10);
+  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.30);
+  --ae-color-primary-text-emphasis:   var(--ae-blue-300);
+
+  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.10);
+  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.30);
+  --ae-color-success-text-emphasis:   var(--ae-green-300);
+
+  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.10);
+  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.30);
+  --ae-color-danger-text-emphasis:    var(--ae-red-300);
+
+  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.10);
+  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.30);
+  --ae-color-warning-text-emphasis:   var(--ae-yellow-300);
+
+  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.10);
+  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.30);
+  --ae-color-info-text-emphasis:      var(--ae-cyan-300);
+
+  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.10);
+  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.30);
+  --ae-color-secondary-text-emphasis: var(--ae-slate-300);
+
+  --ae-color-light-bg-subtle:         rgb(from var(--ae-light) r g b / 0.20);
+  --ae-color-light-border-subtle:     rgb(from var(--ae-light) r g b / 0.25);
+
+  --ae-color-dark-bg-subtle:          rgb(from var(--ae-dark) r g b / 0.30);
+  --ae-color-dark-border-subtle:      rgb(from var(--ae-dark) r g b / 0.50);
+
+  /* Component tokens \u2014 dark overrides */
+  --ae-action-btn-bg:          var(--ae-color-gray);
+  --ae-action-btn-bg-hover:    color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));
+  --ae-action-btn-color:       var(--ae-gray-400);
+  --ae-action-btn-color-hover: var(--ae-cyan-300);
+  --ae-clear-btn-bg-hover:     color-mix(in srgb, var(--ae-red) 25%, var(--ae-gray-800));
+  --ae-clear-btn-color-hover:  var(--ae-red-300);
+}
+`;
+
+// css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/size.css
+var size_default = ':host([size="xs"]) { font-size: var(--ae-size-xs); }\n:host([size="sm"]) { font-size: var(--ae-size-s); }\n:host([size="md"]) { font-size: var(--ae-size-m); }\n:host([size="lg"]) { font-size: var(--ae-size-l); }\n:host([size="xl"]) { font-size: var(--ae-size-xl); }\n:host([size="3xs"]) { font-size: var(--ae-size-3xs); }\n:host([size="2xs"]) { font-size: var(--ae-size-2xs); }\n';
+
+// css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/field-label.css
+var field_label_default = ':host {\n  --field-label-gap: 4px;\n  --field-label-col-gap: 8px;\n  --field-label-width: 100px;\n  --field-label-font-size: 0.875em;\n  --field-label-color: inherit;\n  --field-required-color: var(--ae-red, #dc3545);\n  --field-helper-color: var(--ae-color-text-muted, #6e6e6e);\n  --field-error-color: var(--ae-red, #dc3545);\n}\n\n:host([label]) {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--field-label-gap);\n}\n\n:host([label][label-placement="left"]) {\n  display: grid;\n  grid-template-columns: var(--field-label-width) 1fr;\n  column-gap: var(--field-label-col-gap);\n  row-gap: var(--field-label-gap);\n  align-items: center;\n}\n\n:host([label][label-placement="left"]) .field-label {\n  align-self: center;\n}\n\n:host([label][label-placement="left"]) .field-helper,\n:host([label][label-placement="left"]) .field-error {\n  grid-column: 2;\n}\n\n.field-label {\n  font-size: var(--field-label-font-size);\n  color: var(--field-label-color);\n  user-select: none;\n  line-height: 1.4;\n}\n\n.field-required {\n  color: var(--field-required-color);\n  margin-left: 2px;\n}\n\n.field-helper {\n  font-size: 0.8em;\n  color: var(--field-helper-color);\n  line-height: 1.4;\n}\n\n.field-error {\n  font-size: 0.8em;\n  color: var(--field-error-color);\n  line-height: 1.4;\n}\n\n/* Action controls container (integrated style) */\n.action-controls {\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  margin-left: calc(-1 * var(--field-action-gap, 4px) - 1px);\n  border: var(--field-action-border-width, 1px) solid var(--field-action-border-color, var(--ae-border-subtle));\n  border-radius: 0 var(--field-action-border-radius, var(--ae-radius-xs)) var(--field-action-border-radius, var(--ae-radius-xs)) 0;\n  overflow: hidden;\n  flex-shrink: 0;\n  transition: border-color 0.12s;\n  background: var(--field-action-bg, var(--ae-surface-base));\n  position: relative;\n  z-index: 1;\n  align-self: stretch;\n}\n\n.action-controls .action-btn {\n  border: none;\n  background: transparent;\n  color: var(--field-action-color, var(--ae-color-text-muted));\n  font-size: 0.875em;\n  line-height: 1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 0.5em;\n  transition: background 0.12s;\n}\n\n.action-controls .action-btn:hover:not(:disabled) {\n  background: var(--field-action-bg-hover, var(--ae-surface-raised));\n}\n\n.action-controls .action-btn:active:not(:disabled) {\n  background: var(--field-action-bg-focus, var(--ae-surface-raised));\n}\n\n.action-controls .action-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.action-controls .action-btn + .action-btn {\n  border-left: var(--field-action-border-width, 1px) solid var(--field-action-border-color, var(--ae-border-subtle));\n}\n\n.input-container:has(input:focus) ~ .action-controls,\n.input-container:has(input:focus) .action-controls,\n.container:has(.trigger.open) ~ .action-controls,\n.container:has(.trigger.open) .action-controls {\n  border-color: var(--field-action-border-color-focus, var(--ae-border-focus));\n}\n\n.input-container:has(input:hover:not(:focus)) ~ .action-controls,\n.input-container:has(input:hover:not(:focus)) .action-controls,\n.container:has(.trigger:hover:not(.disabled)) ~ .action-controls,\n.container:has(.trigger:hover:not(.disabled)) .action-controls {\n  border-color: var(--field-action-border-color-hover, var(--ae-border-default));\n}\n';
+
+// css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/action-button.css
+var action_button_default = "/* Action button base styles \u2014 shared by clear-btn and reset-btn (standalone mode) */\n.clear-btn:not(.action-btn),\n.reset-btn:not(.action-btn) {\n  width: 1.333em;\n  height: 1.333em;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  line-height: 1;\n}\n\n.clear-btn:not(.action-btn) {\n  border-radius: var(--ae-clear-btn-border-radius);\n  background: var(--ae-clear-btn-bg);\n  color: var(--ae-clear-btn-color);\n  transition: var(--ae-clear-btn-transition);\n}\n\n.reset-btn:not(.action-btn) {\n  border-radius: var(--ae-reset-btn-border-radius);\n  background: var(--ae-reset-btn-bg);\n  color: var(--ae-reset-btn-color);\n  transition: var(--ae-reset-btn-transition);\n}\n\n.clear-btn:not(.action-btn):hover {\n  background: var(--ae-clear-btn-bg-hover);\n  color: var(--ae-clear-btn-color-hover);\n}\n\n.reset-btn:not(.action-btn):hover {\n  background: var(--ae-reset-btn-bg-hover);\n  color: var(--ae-reset-btn-color-hover);\n}\n";
+
+// css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/color.css
+var color_default = ':host {\n  --ae-color-solid:           var(--ae-color-gray);\n  --ae-color-solid-hover:     color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-hover));\n  --ae-color-solid-active:    color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-active));\n  --ae-color-on-solid:        var(--ae-color-text-main);\n  --ae-color-border:          var(--ae-color-gray);\n  --ae-color-border-hover:    color-mix(in srgb, var(--ae-color-border), var(--ae-color-mix-hover));\n  --ae-color-accent:          var(--ae-color-text-muted);\n  --ae-color-accent-hover:    var(--ae-color-text-main);\n  --ae-color-subtle:          var(--ae-border-subtle);\n  --ae-color-subtle-hover:    var(--ae-border-default);\n  --ae-color-bg-subtle:       var(--ae-border-subtle);\n  --ae-color-text-subtle:     var(--ae-color-text-muted);\n  --ae-color-border-subtle:   var(--ae-border-default);\n}\n\n:host([color="primary"]) {\n  --ae-color-solid:           var(--ae-color-primary);\n  --ae-color-on-solid:        white;\n  --ae-color-border:          var(--ae-color-primary);\n  --ae-color-accent:          var(--ae-color-text-link);\n  --ae-color-accent-hover:    var(--ae-color-text-link-hover);\n  --ae-color-subtle:          var(--ae-color-primary-bg-subtle);\n  --ae-color-subtle-hover:    rgb(from var(--ae-blue) r g b / 0.15);\n  --ae-color-bg-subtle:       var(--ae-color-primary-bg-subtle);\n  --ae-color-text-subtle:     var(--ae-color-primary-text-emphasis);\n  --ae-color-border-subtle:   var(--ae-color-primary-border-subtle);\n}\n\n:host([color="secondary"]) {\n  --ae-color-solid:           var(--ae-color-secondary);\n  --ae-color-on-solid:        white;\n  --ae-color-border:          var(--ae-color-secondary-hover);\n  --ae-color-accent:          var(--ae-color-secondary-text-emphasis);\n  --ae-color-accent-hover:    var(--ae-color-text-main);\n  --ae-color-subtle:          rgb(from var(--ae-slate) r g b / 0.06);\n  --ae-color-subtle-hover:    rgb(from var(--ae-slate) r g b / 0.12);\n  --ae-color-bg-subtle:       var(--ae-color-secondary-bg-subtle);\n  --ae-color-text-subtle:     var(--ae-color-secondary-text-emphasis);\n  --ae-color-border-subtle:   var(--ae-color-secondary-border-subtle);\n}\n\n:host([color="success"]) {\n  --ae-color-solid:           var(--ae-color-success);\n  --ae-color-on-solid:        white;\n  --ae-color-border:          var(--ae-color-success);\n  --ae-color-accent:          var(--ae-color-success-text-emphasis);\n  --ae-color-accent-hover:    var(--ae-color-success-hover);\n  --ae-color-subtle:          var(--ae-color-success-bg-subtle);\n  --ae-color-subtle-hover:    rgb(from var(--ae-green) r g b / 0.15);\n  --ae-color-bg-subtle:       var(--ae-color-success-bg-subtle);\n  --ae-color-text-subtle:     var(--ae-color-success-text-emphasis);\n  --ae-color-border-subtle:   var(--ae-color-success-border-subtle);\n}\n\n:host([color="danger"]) {\n  --ae-color-solid:           var(--ae-color-danger);\n  --ae-color-on-solid:        white;\n  --ae-color-border:          var(--ae-color-danger);\n  --ae-color-accent:          var(--ae-color-danger-text-emphasis);\n  --ae-color-accent-hover:    var(--ae-color-danger-hover);\n  --ae-color-subtle:          var(--ae-color-danger-bg-subtle);\n  --ae-color-subtle-hover:    rgb(from var(--ae-red) r g b / 0.15);\n  --ae-color-bg-subtle:       var(--ae-color-danger-bg-subtle);\n  --ae-color-text-subtle:     var(--ae-color-danger-text-emphasis);\n  --ae-color-border-subtle:   var(--ae-color-danger-border-subtle);\n}\n\n:host([color="warning"]) {\n  --ae-color-solid:           var(--ae-color-warning);\n  --ae-color-on-solid:        var(--ae-gray-900);\n  --ae-color-border:          var(--ae-color-warning);\n  --ae-color-accent:          var(--ae-color-warning-text-emphasis);\n  --ae-color-accent-hover:    var(--ae-color-warning-hover);\n  --ae-color-subtle:          var(--ae-color-warning-bg-subtle);\n  --ae-color-subtle-hover:    rgb(from var(--ae-yellow) r g b / 0.15);\n  --ae-color-bg-subtle:       var(--ae-color-warning-bg-subtle);\n  --ae-color-text-subtle:     var(--ae-color-warning-text-emphasis);\n  --ae-color-border-subtle:   var(--ae-color-warning-border-subtle);\n}\n\n:host([color="info"]) {\n  --ae-color-solid:           var(--ae-color-info);\n  --ae-color-on-solid:        white;\n  --ae-color-border:          var(--ae-color-info);\n  --ae-color-accent:          var(--ae-color-info-text-emphasis);\n  --ae-color-accent-hover:    var(--ae-color-info-hover);\n  --ae-color-subtle:          var(--ae-color-info-bg-subtle);\n  --ae-color-subtle-hover:    rgb(from var(--ae-cyan) r g b / 0.15);\n  --ae-color-bg-subtle:       var(--ae-color-info-bg-subtle);\n  --ae-color-text-subtle:     var(--ae-color-info-text-emphasis);\n  --ae-color-border-subtle:   var(--ae-color-info-border-subtle);\n}\n\n:host([color="light"]) {\n  --ae-color-solid:           var(--ae-light);\n  --ae-color-on-solid:        var(--ae-gray-900);\n  --ae-color-border:          var(--ae-border-hover);\n  --ae-color-subtle:          var(--ae-color-light-bg-subtle);\n  --ae-color-subtle-hover:    var(--ae-color-light-border-subtle);\n  --ae-color-bg-subtle:       var(--ae-color-light-bg-subtle);\n  --ae-color-text-subtle:     var(--ae-color-text-muted);\n  --ae-color-border-subtle:   var(--ae-color-light-border-subtle);\n}\n\n:host([color="dark"]) {\n  --ae-color-solid:           var(--ae-dark-500);\n  --ae-color-on-solid:        white;\n  --ae-color-border:          var(--ae-dark-500);\n  --ae-color-accent:          var(--ae-color-text-main);\n  --ae-color-accent-hover:    var(--ae-color-text-main);\n  --ae-color-subtle:          var(--ae-color-dark-bg-subtle);\n  --ae-color-subtle-hover:    var(--ae-color-dark-border-subtle);\n  --ae-color-bg-subtle:       var(--ae-color-dark-bg-subtle);\n  --ae-color-text-subtle:     var(--ae-color-text-main);\n  --ae-color-border-subtle:   var(--ae-color-dark-border-subtle);\n}\n';
+
+// css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/tag.css
+var tag_default = ':host {\n  display: inline-flex;\n  align-items: center;\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-family: inherit;\n  font-weight: 500;\n  white-space: nowrap;\n  vertical-align: middle;\n  line-height: 1.2;\n  font-size: 1em;\n  padding: 0.15em 0.5em 0.15em 0.6em;\n  border-radius: var(--ae-border-radius, var(--ae-radius-sm));\n  border: 1px solid var(--ae-color-solid);\n  background: var(--ae-color-solid);\n  color: var(--ae-color-on-solid);\n  max-width: 160px;\n  min-width: 0;\n}\n\n:host([variant="outlined"]) .tag {\n  background:   transparent;\n  border-color: var(--ae-color-border);\n  color:        var(--ae-color-accent);\n}\n\n:host([variant="faint"]) .tag {\n  background:   var(--ae-color-bg-subtle);\n  border-color: var(--ae-color-border-subtle);\n  color:        var(--ae-color-text-subtle);\n}\n\n:host([variant="subtle"]) .tag {\n  background:   var(--ae-color-bg-subtle);\n  border-color: transparent;\n  color:        var(--ae-color-text-subtle);\n}\n\n:host([variant="text"]) .tag {\n  background:   transparent;\n  border-color: transparent;\n  color:        var(--ae-color-accent);\n  padding-left:  0;\n  padding-right: 0;\n}\n\n\n:host([pill]) .tag { border-radius: var(--ae-radius-pill); }\n\n.tag-content {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n::slotted(ae-icon) { font-size: 1.1em; }\n\n.tag-dismiss {\n  display: none;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.55;\n  line-height: 1;\n  font-size: 1em;\n  padding: 0 1px;\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs));\n  background: transparent;\n  border: none;\n  color: inherit;\n  font-family: inherit;\n  transition: opacity 0.1s, background 0.1s;\n}\n\n:host([dismissible]) .tag-dismiss {\n  display: inline-flex;\n}\n\n.tag-dismiss:hover {\n  opacity: 1;\n  background: color-mix(in srgb, currentColor 15%, transparent);\n}\n\n/* disabled: button remains visible but is inert */\n:host([disabled]) .tag-dismiss {\n  opacity: 0.4;\n  pointer-events: none;\n  cursor: default;\n}\n\n:host([disabled]) .tag {\n  opacity: 0.6;\n}\n';
+
+// src/tag/tag.ts
+import { html } from "aeico";
+import { prop } from "aeico";
+var _pill_dec, _disabled_dec, _dismissible_dec, _size_dec, _variant_dec, _color_dec, _a, _init, _color, _variant, _size, _dismissible, _disabled, _pill;
+var Tag = class extends (_a = aeico_component_default, _color_dec = [prop({ type: String })], _variant_dec = [prop({ type: String })], _size_dec = [prop({ type: String })], _dismissible_dec = [prop({ type: Boolean })], _disabled_dec = [prop({ type: Boolean })], _pill_dec = [prop({ type: Boolean })], _a) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _value, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
-    __privateAdd(this, _label, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
-    __privateAdd(this, _disabled, __runInitializers(_init, 16, this, false)), __runInitializers(_init, 19, this);
-    __privateAdd(this, _selected, __runInitializers(_init, 20, this, false)), __runInitializers(_init, 23, this);
+    __privateAdd(this, _color, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _variant, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _size, __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __privateAdd(this, _dismissible, __runInitializers(_init, 20, this, false)), __runInitializers(_init, 23, this);
+    __privateAdd(this, _disabled, __runInitializers(_init, 24, this, false)), __runInitializers(_init, 27, this);
+    __privateAdd(this, _pill, __runInitializers(_init, 28, this, false)), __runInitializers(_init, 31, this);
+  }
+  render() {
+    return 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: "\xD7" });
+          }
+        );
+      });
+    });
+  }
+};
+_init = __decoratorStart(_a);
+_color = new WeakMap();
+_variant = new WeakMap();
+_size = new WeakMap();
+_dismissible = new WeakMap();
+_disabled = new WeakMap();
+_pill = new WeakMap();
+__decorateElement(_init, 4, "color", _color_dec, Tag, _color);
+__decorateElement(_init, 4, "variant", _variant_dec, Tag, _variant);
+__decorateElement(_init, 4, "size", _size_dec, Tag, _size);
+__decorateElement(_init, 4, "dismissible", _dismissible_dec, Tag, _dismissible);
+__decorateElement(_init, 4, "disabled", _disabled_dec, Tag, _disabled);
+__decorateElement(_init, 4, "pill", _pill_dec, Tag, _pill);
+__decoratorMetadata(_init, Tag);
+__publicField(Tag, "styles", [variables_default, size_default, color_default, tag_default]);
+Tag.register();
+
+// src/select/select.ts
+import { prop as prop2 } from "aeico";
+var _defaultValue_dec, _value_dec, _expandable_dec, _multiple_dec, _placeholder_dec, _position_dec, _options_dec, __expanded_dec, _a2, _init2, __expanded, _options, _position, _placeholder, _multiple, _expandable;
+var Select = class extends (_a2 = aeico_field_default, __expanded_dec = [prop2({ type: Boolean, observe: false, reflect: false })], _options_dec = [prop2({ type: Array })], _position_dec = [prop2({ type: String })], _placeholder_dec = [prop2({ type: String })], _multiple_dec = [prop2({ type: Boolean })], _expandable_dec = [prop2({ type: Boolean })], _value_dec = [prop2({
+  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 = [prop2({
+  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);
+  }
+})], _a2) {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "fieldElement", null);
+    __publicField(this, "_isOpen", false);
+    __publicField(this, "_triggerEl", null);
+    __publicField(this, "_dropdownEl", null);
+    __publicField(this, "_slotEl", null);
+    __publicField(this, "_slotOptionData", []);
+    __publicField(this, "_selectedListEl", null);
+    __privateAdd(this, __expanded, __runInitializers(_init2, 8, this, false)), __runInitializers(_init2, 11, this);
+    __privateAdd(this, _options, __runInitializers(_init2, 12, this)), __runInitializers(_init2, 15, this);
+    __privateAdd(this, _position, __runInitializers(_init2, 16, this)), __runInitializers(_init2, 19, this);
+    __privateAdd(this, _placeholder, __runInitializers(_init2, 20, this)), __runInitializers(_init2, 23, this);
+    __privateAdd(this, _multiple, __runInitializers(_init2, 24, this, false)), __runInitializers(_init2, 27, this);
+    __privateAdd(this, _expandable, __runInitializers(_init2, 28, this, false)), __runInitializers(_init2, 31, this);
+    __publicField(this, "value", __runInitializers(_init2, 32, this)), __runInitializers(_init2, 35, this);
+    __publicField(this, "defaultValue", __runInitializers(_init2, 36, this)), __runInitializers(_init2, 39, this);
+    __publicField(this, "_handleOutsideClick", (e) => {
+      if (!e.composedPath().includes(this)) {
+        this._closeDropdown();
+      }
+    });
+    __publicField(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) {
+    super.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 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() {
+    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 || el.textContent?.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() {
+    this._triggerEl?.classList.toggle("open", this._isOpen);
+    this._dropdownEl?.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 html2(({ div, span, slot }) => {
+      const id = this.getFieldId();
+      this.renderLabel(id);
+      div(
+        {
+          id,
+          "aria-labelledby": this.label ? `${id}-label` : void 0,
+          className: "container field-body"
+        },
+        () => {
+          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);
+                        tags2.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: "\u2026" });
+                  }
+                } 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: "\u25BE" });
+            }
+          );
+          this._dropdownEl = div(
+            {
+              className: `dropdown position-${position}${this._isOpen ? " open" : ""}`
+            },
+            () => {
+              this._renderProgrammaticOptions();
+              this._slotEl = slot({
+                "@slotchange": () => this._onSlotChange()
+              });
+            }
+          );
+          this.renderActionButtons();
+        }
+      );
+      this.renderHelperText();
+      this.renderError();
+      const currentValue = this.value != null && this.value !== "" && !(Array.isArray(this.value) && this.value.length === 0) ? String(this.value) : "";
+      this.fieldElement = tags2.input({
+        key: "validation-input",
+        type: "text",
+        "aria-hidden": "true",
+        tabIndex: -1,
+        required: Boolean(this.required),
+        value: currentValue,
+        style: {
+          position: "absolute",
+          width: "0",
+          height: "0",
+          opacity: "0",
+          margin: "0",
+          padding: "0",
+          border: "0",
+          pointerEvents: "none",
+          overflow: "hidden"
+        }
+      });
+    });
+  }
+  _renderProgrammaticOptions() {
+    if (!Array.isArray(this.options)) return;
+    const { aeSelectOption } = tags2;
+    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: 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");
+  }
+};
+_init2 = __decoratorStart(_a2);
+__expanded = new WeakMap();
+_options = new WeakMap();
+_position = new WeakMap();
+_placeholder = new WeakMap();
+_multiple = new WeakMap();
+_expandable = new WeakMap();
+__decorateElement(_init2, 4, "_expanded", __expanded_dec, Select, __expanded);
+__decorateElement(_init2, 4, "options", _options_dec, Select, _options);
+__decorateElement(_init2, 4, "position", _position_dec, Select, _position);
+__decorateElement(_init2, 4, "placeholder", _placeholder_dec, Select, _placeholder);
+__decorateElement(_init2, 4, "multiple", _multiple_dec, Select, _multiple);
+__decorateElement(_init2, 4, "expandable", _expandable_dec, Select, _expandable);
+__decorateElement(_init2, 5, "value", _value_dec, Select);
+__decorateElement(_init2, 5, "defaultValue", _defaultValue_dec, Select);
+__decoratorMetadata(_init2, Select);
+__publicField(Select, "tagName", "select");
+__publicField(Select, "styles", [variables_default, size_default, field_label_default, action_button_default, select_default]);
+Select.register();
+var select_default2 = Select;
+
+// src/select/select-option.ts
+import { html as html3 } from "aeico";
+
+// css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/select-option.css
+var select_option_default = ":host {\n  display: block;\n\n  --option-padding: 0.417em 0.667em;\n  --option-bg: transparent;\n  --option-bg-hover: var(--ae-surface-raised);\n  --option-bg-selected: color-mix(in srgb, var(--ae-color-primary) 12%, transparent);\n  --option-color: var(--ae-color-text-main);\n  --option-color-disabled: var(--ae-color-text-disabled);\n  --option-color-selected: var(--ae-color-primary);\n  --option-font-size: 1em;\n  --option-transition: background 0.1s;\n}\n\n.option-item {\n  padding: var(--option-padding);\n  font-size: var(--option-font-size);\n  color: var(--option-color);\n  background: var(--option-bg);\n  cursor: pointer;\n  transition: var(--option-transition);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: none;\n}\n\n:host(:hover:not([disabled])) .option-item {\n  background: var(--option-bg-hover);\n}\n\n:host([selected]) .option-item {\n  background: var(--option-bg-selected);\n  color: var(--option-color-selected);\n}\n\n:host([disabled]) .option-item {\n  color: var(--option-color-disabled);\n  cursor: default;\n  pointer-events: none;\n}\n\n\n";
+
+// src/select/select-option.ts
+import { prop as prop3 } from "aeico";
+var _selected_dec, _disabled_dec2, _label_dec, _value_dec2, _a3, _init3, _value, _label, _disabled2, _selected;
+var SelectOption = class extends (_a3 = aeico_component_default, _value_dec2 = [prop3({ type: String })], _label_dec = [prop3({ type: String })], _disabled_dec2 = [prop3({ type: Boolean })], _selected_dec = [prop3({ type: Boolean })], _a3) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _value, __runInitializers(_init3, 8, this)), __runInitializers(_init3, 11, this);
+    __privateAdd(this, _label, __runInitializers(_init3, 12, this)), __runInitializers(_init3, 15, this);
+    __privateAdd(this, _disabled2, __runInitializers(_init3, 16, this, false)), __runInitializers(_init3, 19, this);
+    __privateAdd(this, _selected, __runInitializers(_init3, 20, this, false)), __runInitializers(_init3, 23, this);
     __publicField(this, "_handleClick", (e) => {
-      var _a2;
       if (this.disabled) {
         e.stopPropagation();
         return;
       }
-      const displayLabel = this.label || ((_a2 = this.textContent) == null ? void 0 : _a2.trim()) || "";
+      const displayLabel = this.label || this.textContent?.trim() || "";
       this.emit("selectoption", { detail: { value: this.value ?? "", label: displayLabel } });
     });
   }
@@ -71,29 +1185,30 @@ class SelectOption extends (_a = AeicoComponent, _value_dec = [prop({ type: Stri
     this.listen("click", this._handleClick);
   }
   render() {
-    return html(({ div, slot }) => {
+    return html3(({ div, slot }) => {
       div({ className: "option-item" }, () => {
         slot();
       });
     });
   }
-}
-_init = __decoratorStart(_a);
-_value = /* @__PURE__ */ new WeakMap();
-_label = /* @__PURE__ */ new WeakMap();
-_disabled = /* @__PURE__ */ new WeakMap();
-_selected = /* @__PURE__ */ new WeakMap();
-__decorateElement(_init, 4, "value", _value_dec, SelectOption, _value);
-__decorateElement(_init, 4, "label", _label_dec, SelectOption, _label);
-__decorateElement(_init, 4, "disabled", _disabled_dec, SelectOption, _disabled);
-__decorateElement(_init, 4, "selected", _selected_dec, SelectOption, _selected);
-__decoratorMetadata(_init, SelectOption);
+};
+_init3 = __decoratorStart(_a3);
+_value = new WeakMap();
+_label = new WeakMap();
+_disabled2 = new WeakMap();
+_selected = new WeakMap();
+__decorateElement(_init3, 4, "value", _value_dec2, SelectOption, _value);
+__decorateElement(_init3, 4, "label", _label_dec, SelectOption, _label);
+__decorateElement(_init3, 4, "disabled", _disabled_dec2, SelectOption, _disabled2);
+__decorateElement(_init3, 4, "selected", _selected_dec, SelectOption, _selected);
+__decoratorMetadata(_init3, SelectOption);
 __publicField(SelectOption, "tagName", "select-option");
-__publicField(SelectOption, "styles", [variables, style]);
+__publicField(SelectOption, "styles", [variables_default, select_option_default]);
 SelectOption.register();
+var select_option_default2 = SelectOption;
 export {
-  S as Select,
-  SelectOption,
-  S2 as default
+  select_default2 as Select,
+  select_option_default2 as SelectOption,
+  select_default2 as default
 };
 //# sourceMappingURL=select.js.map