aeico-components 0.1.6 → 0.1.8

package/dist/dropdown.js

@@ -1,7 +1,1319 @@
-import { D, a, b } from "./chunks/dropdown-button.js";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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 __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)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (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[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);
+    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])(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 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 __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"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+
+// src/aeico-component.ts
+import { AeicoElement } from "aeico";
+
+// src/utils.ts
+var 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();
+}
+
+// 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/dropdown/dropdown.ts
+import { html as html3 } from "aeico";
+import { prop as prop2 } from "aeico";
+
+// css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/dropdown.css
+var dropdown_default = ":host {\n  display: inline-block;\n  position: relative;\n\n  --dropdown-z-index: 1000;\n  --dropdown-bg: var(--ae-surface-overlay, #fff);\n  --dropdown-border: 1px solid var(--ae-color-border, rgba(0, 0, 0, 0.12));\n  --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  --dropdown-min-width: 10rem;\n  --dropdown-padding: 0.25rem 0;\n}\n\n.trigger-wrapper {\n  display: flex;\n  align-items: stretch;\n  height: 100%;\n}\n\n/* Internal trigger rendered when `label` prop is set.\n   Uses --dropdown-trigger-* variables. Context components (e.g. ae-navbar)\n   map their own tokens to these variables via ::slotted(ae-dropdown). */\n.trigger-label {\n  display: inline-flex;\n  align-items: center;\n  height: var(--dropdown-trigger-height, auto);\n  padding: 0 var(--dropdown-trigger-padding-x, 0.75rem);\n  color: var(--dropdown-trigger-color, inherit);\n  background: var(--dropdown-trigger-bg, none);\n  border: none;\n  border-radius: var(--dropdown-trigger-radius, 0);\n  -webkit-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--dropdown-trigger-font-size, inherit);\n  white-space: nowrap;\n  transition: color 0.15s ease, background-color 0.15s ease;\n  outline-offset: 2px;\n}\n\n.trigger-label:hover {\n  color: var(--dropdown-trigger-hover-color, inherit);\n  background-color: var(--dropdown-trigger-hover-bg, transparent);\n}\n\n:host([disabled]) .trigger-label {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Bootstrap-style CSS border caret \u2014 shadow DOM only, no global injection needed */\n.ae-dropdown-arrow {\n  display: inline-block;\n  width: 0;\n  height: 0;\n  margin-left: 0.3em;\n  vertical-align: 0.2em;\n  flex-shrink: 0;\n}\n.ae-dropdown-arrow--bottom {\n  border-top: 0.35em solid;\n  border-right: 0.35em solid transparent;\n  border-left: 0.35em solid transparent;\n}\n.ae-dropdown-arrow--top {\n  border-bottom: 0.35em solid;\n  border-right: 0.35em solid transparent;\n  border-left: 0.35em solid transparent;\n}\n.ae-dropdown-arrow--right {\n  border-left: 0.35em solid;\n  border-top: 0.35em solid transparent;\n  border-bottom: 0.35em solid transparent;\n}\n.ae-dropdown-arrow--left {\n  border-right: 0.35em solid;\n  border-top: 0.35em solid transparent;\n  border-bottom: 0.35em solid transparent;\n}\n\n.panel {\n  display: none;\n  position: absolute;\n  z-index: var(--dropdown-z-index);\n  background: var(--dropdown-bg);\n  border: var(--dropdown-border);\n  border-radius: var(--ae-border-radius, var(--ae-radius-md));\n  box-shadow: var(--dropdown-shadow);\n  min-width: var(--dropdown-min-width);\n  padding: var(--dropdown-padding);\n  box-sizing: border-box;\n  /* Prevent panel from being wider than viewport */\n  max-width: calc(100vw - 16px);\n}\n\n.panel.open {\n  display: block;\n}\n\n/* placement variants */\n.panel.placement-bottom-start {\n  top: 100%;\n  left: 0;\n  margin-top: 4px;\n}\n\n.panel.placement-bottom-end {\n  top: 100%;\n  right: 0;\n  margin-top: 4px;\n}\n\n.panel.placement-bottom {\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-top: 4px;\n}\n\n.panel.placement-top-start {\n  bottom: 100%;\n  left: 0;\n  margin-bottom: 4px;\n}\n\n.panel.placement-top-end {\n  bottom: 100%;\n  right: 0;\n  margin-bottom: 4px;\n}\n\n.panel.placement-top {\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-bottom: 4px;\n}\n\n/* right placements */\n.panel.placement-right-start {\n  top: 0;\n  left: 100%;\n  margin-left: 4px;\n}\n\n.panel.placement-right-end {\n  bottom: 0;\n  left: 100%;\n  margin-left: 4px;\n}\n\n.panel.placement-right {\n  top: 50%;\n  left: 100%;\n  transform: translateY(-50%);\n  margin-left: 4px;\n}\n\n/* left placements */\n.panel.placement-left-start {\n  top: 0;\n  right: 100%;\n  margin-right: 4px;\n}\n\n.panel.placement-left-end {\n  bottom: 0;\n  right: 100%;\n  margin-right: 4px;\n}\n\n.panel.placement-left {\n  top: 50%;\n  right: 100%;\n  transform: translateY(-50%);\n  margin-right: 4px;\n}\n";
+
+// 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);
+}
+`;
+
+// src/dropdown/dropdown-item.ts
+import { html as html2 } from "aeico";
+
+// css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/dropdown-item.css
+var dropdown_item_default = `:host {
+  display: block;
+
+  --dropdown-item-padding: 0.5rem 0.875rem;
+  --dropdown-item-bg: transparent;
+  --dropdown-item-bg-hover: var(--ae-surface-raised, rgba(0, 0, 0, 0.05));
+  --dropdown-item-bg-active: var(--ae-surface-raised-active, rgba(0, 0, 0, 0.1));
+  --dropdown-item-color: var(--ae-color-text-main, inherit);
+  --dropdown-item-color-disabled: var(--ae-color-text-disabled, rgba(0, 0, 0, 0.35));
+  --dropdown-item-font-size: 0.9375rem;
+  --dropdown-item-gap: 0.5rem;
+  --dropdown-item-transition: background 0.1s;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: var(--dropdown-item-gap);
+  width: 100%;
+  padding: var(--dropdown-item-padding);
+  font-size: var(--dropdown-item-font-size);
+  font-family: inherit;
+  color: var(--dropdown-item-color);
+  background: var(--dropdown-item-bg);
+  border: none;
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  box-sizing: border-box;
+  transition: var(--dropdown-item-transition);
+  outline: none;
+}
+
+.item:hover:not(:disabled):not([aria-disabled="true"]) {
+  background: var(--dropdown-item-bg-hover);
+}
+
+.item:active:not(:disabled):not([aria-disabled="true"]) {
+  background: var(--dropdown-item-bg-active);
+}
+
+.item:focus-visible {
+  background: var(--dropdown-item-bg-hover);
+  outline: 2px solid var(--ae-color-primary, #0e639c);
+  outline-offset: -2px;
+}
+
+/* disabled */
+:host([disabled]) .item,
+.item:disabled {
+  color: var(--dropdown-item-color-disabled);
+  cursor: default;
+  pointer-events: none;
+}
+
+/* Active item \u2014 current selection, current route, etc. */
+:host([active]) .item {
+  background: var(--dropdown-item-bg-selected, rgba(0, 0, 0, 0.06));
+  color: var(--dropdown-item-color-active, var(--ae-color-primary, #0e639c));
+  font-weight: 500;
+}
+
+/* Checkbox mode \u2014 fixed-width indicator column */
+.check-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1em;
+  flex-shrink: 0;
+}
+
+/* CSS-drawn checkmark (border trick) */
+.check-indicator::after {
+  content: '';
+  display: block;
+  width: 0.3em;
+  height: 0.55em;
+  border-right: 0.125em solid currentColor;
+  border-bottom: 0.125em solid currentColor;
+  transform: rotate(45deg) translateY(-0.1em);
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+
+:host([checked]) .check-indicator::after {
+  opacity: 1;
+}
+`;
+
+// src/dropdown/dropdown-item.ts
+import { prop } from "aeico";
+
+// src/icon/icon.ts
+import { html } from "aeico";
+
+// 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/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/icon.css
+var icon_default = ":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 20px;\n  width:  1em;\n  height: 1em;\n  color: inherit;\n  flex-shrink: 0;\n  line-height: 0;\n  vertical-align: middle;\n}\n\n:host([color]) {\n  color: var(--ae-color-solid);\n}\n\n.icon-svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  fill: var(--icon-fill, currentColor);\n  stroke: var(--icon-stroke, none);\n  stroke-width: var(--icon-stroke-width, 2);\n  stroke-linecap: var(--icon-stroke-linecap, round);\n  stroke-linejoin: var(--icon-stroke-linejoin, round);\n  pointer-events: none;\n  overflow: visible;\n}\n";
+
+// src/icon/defines.ts
+var defaultViewBox = "0 0 24 24";
+
+// src/icon/registry.ts
+var IconRegistry = class {
+  static _icons = /* @__PURE__ */ new Map();
+  /** Names registered via addBuiltIn — can be overridden by user add() calls */
+  static _builtInKeys = /* @__PURE__ */ new Set();
+  /** Register user icons. Always takes priority over built-in icons. */
+  static add(icons) {
+    for (const [name, data] of Object.entries(icons)) {
+      if (typeof data === "string") {
+        this._icons.set(name, { paths: data, viewBox: defaultViewBox });
+      } else {
+        this._icons.set(name, data);
+      }
+      this._builtInKeys.delete(name);
+    }
+  }
+  /**
+   * Register built-in icons provided by the library.
+   * A built-in icon will NOT overwrite an icon already registered by the user.
+   */
+  static addBuiltIn(icons) {
+    for (const [name, data] of Object.entries(icons)) {
+      if (this._icons.has(name) && !this._builtInKeys.has(name)) continue;
+      if (typeof data === "string") {
+        this._icons.set(name, { paths: data, viewBox: defaultViewBox });
+      } else {
+        this._icons.set(name, data);
+      }
+      this._builtInKeys.add(name);
+    }
+  }
+  static get(name) {
+    return this._icons.get(name);
+  }
+  static has(name) {
+    return this._icons.has(name);
+  }
+};
+var registry_default = IconRegistry;
+
+// src/icon/built-in-icons.ts
+registry_default.addBuiltIn({
+  copy: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z",
+  check: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z",
+  "chevron-left": "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z",
+  "chevron-right": "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z",
+  "chevron-up": "M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z",
+  "chevron-down": "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z",
+  "chevrons-left": "M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z",
+  "chevrons-right": "M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z",
+  close: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+});
+
+// src/icon/icon.ts
+var Icon = class extends aeico_component_default {
+  static tagName = "icon";
+  static props = {
+    name: { type: String },
+    size: { type: String },
+    color: { type: String },
+    stroke: { type: Boolean },
+    strokeWidth: { type: Number }
+  };
+  static styles = [variables_default, size_default, color_default, icon_default];
+  render() {
+    const def = this.name ? registry_default.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");
+    }
+    if (!def) return;
+    const { paths } = def;
+    const isMultiPath = Array.isArray(paths);
+    if (!isMultiPath) {
+      const useStroke = this.stroke ?? (this.strokeWidth !== void 0 ? true : def.stroke ?? false);
+      const useStrokeWidth = this.strokeWidth ?? 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");
+      }
+    } else {
+      this.style.removeProperty("--icon-fill");
+      this.style.removeProperty("--icon-stroke");
+      this.style.removeProperty("--icon-stroke-width");
+    }
+    return html(({ svg, path }) => {
+      svg(
+        {
+          className: "icon-svg",
+          viewBox: def.viewBox ?? defaultViewBox,
+          "aria-hidden": "true",
+          xmlns: SVG_NS
+        },
+        () => {
+          if (typeof paths === "string") {
+            path({ d: paths });
+          } else {
+            for (const p of paths) {
+              const attrs = { d: p.d };
+              if (p.fill) attrs.style = { fill: p.fill };
+              path(attrs);
+            }
+          }
+        }
+      );
+    });
+  }
+};
+Icon.register();
+
+// src/dropdown/dropdown-item.ts
+var _active_dec, _checked_dec, _type_dec, _href_dec, _disabled_dec, _value_dec, _a, _init, _value, _disabled, _href, _type, _checked, _active;
+var DropdownItem = class extends (_a = aeico_component_default, _value_dec = [prop({ type: String })], _disabled_dec = [prop({ type: Boolean })], _href_dec = [prop({ type: String })], _type_dec = [prop({ type: String })], _checked_dec = [prop({ type: Boolean })], _active_dec = [prop({ type: Boolean })], _a) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _value, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _disabled, __runInitializers(_init, 12, this, false)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _href, __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __privateAdd(this, _type, __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __privateAdd(this, _checked, __runInitializers(_init, 24, this, false)), __runInitializers(_init, 27, this);
+    __privateAdd(this, _active, __runInitializers(_init, 28, this, false)), __runInitializers(_init, 31, this);
+    __publicField(this, "_handleClick", (e) => {
+      if (this.disabled) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      if (this.type === "checkbox") {
+        this.checked = !this.checked;
+      }
+      const label = this.textContent?.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 html2(({ 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 = __decoratorStart(_a);
+_value = new WeakMap();
+_disabled = new WeakMap();
+_href = new WeakMap();
+_type = new WeakMap();
+_checked = new WeakMap();
+_active = new WeakMap();
+__decorateElement(_init, 4, "value", _value_dec, DropdownItem, _value);
+__decorateElement(_init, 4, "disabled", _disabled_dec, DropdownItem, _disabled);
+__decorateElement(_init, 4, "href", _href_dec, DropdownItem, _href);
+__decorateElement(_init, 4, "type", _type_dec, DropdownItem, _type);
+__decorateElement(_init, 4, "checked", _checked_dec, DropdownItem, _checked);
+__decorateElement(_init, 4, "active", _active_dec, DropdownItem, _active);
+__decoratorMetadata(_init, DropdownItem);
+__publicField(DropdownItem, "tagName", "dropdown-item");
+__publicField(DropdownItem, "styles", [variables_default, dropdown_item_default]);
+DropdownItem.register();
+var dropdown_item_default2 = DropdownItem;
+
+// src/dropdown/dropdown.ts
+var _label_dec, _disabled_dec2, _closeOnSelect_dec, _open_dec, _placement_dec, _a2, _init2, _placement, _open, _closeOnSelect, _disabled2, _label;
+var Dropdown = class extends (_a2 = aeico_component_default, _placement_dec = [prop2({ type: String })], _open_dec = [prop2({ type: Boolean })], _closeOnSelect_dec = [prop2({ type: Boolean })], _disabled_dec2 = [prop2({ type: Boolean })], _label_dec = [prop2({ type: String })], _a2) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _placement, __runInitializers(_init2, 8, this, "bottom-start")), __runInitializers(_init2, 11, this);
+    __privateAdd(this, _open, __runInitializers(_init2, 12, this, false)), __runInitializers(_init2, 15, this);
+    __privateAdd(this, _closeOnSelect, __runInitializers(_init2, 16, this, true)), __runInitializers(_init2, 19, this);
+    __privateAdd(this, _disabled2, __runInitializers(_init2, 20, this, false)), __runInitializers(_init2, 23, this);
+    __privateAdd(this, _label, __runInitializers(_init2, 24, this, "")), __runInitializers(_init2, 27, this);
+    __publicField(this, "_outsideClickHandler", null);
+    // Called via declarative @click on the trigger-wrapper div inside the shadow DOM.
+    // Events from slotted trigger content bubble through the shadow DOM slot path,
+    // so this fires for trigger clicks only — not for panel item clicks.
+    __publicField(this, "_handleTriggerClick", () => {
+      this.toggle();
+    });
+    __publicField(this, "_handleItemSelect", (e) => {
+      this.emit("select", { detail: e.detail });
+      if (this.closeOnSelect) {
+        this._closePanel();
+      }
+    });
+    __publicField(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 html3(({ 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();
+        }
+      );
+    });
+  }
+};
+_init2 = __decoratorStart(_a2);
+_placement = new WeakMap();
+_open = new WeakMap();
+_closeOnSelect = new WeakMap();
+_disabled2 = new WeakMap();
+_label = new WeakMap();
+__decorateElement(_init2, 4, "placement", _placement_dec, Dropdown, _placement);
+__decorateElement(_init2, 4, "open", _open_dec, Dropdown, _open);
+__decorateElement(_init2, 4, "closeOnSelect", _closeOnSelect_dec, Dropdown, _closeOnSelect);
+__decorateElement(_init2, 4, "disabled", _disabled_dec2, Dropdown, _disabled2);
+__decorateElement(_init2, 4, "label", _label_dec, Dropdown, _label);
+__decoratorMetadata(_init2, Dropdown);
+__publicField(Dropdown, "tagName", "dropdown");
+__publicField(Dropdown, "styles", [variables_default, dropdown_default]);
+Dropdown.register();
+var dropdown_default2 = Dropdown;
+
+// src/dropdown/dropdown-button.ts
+import { html as html5 } from "aeico";
+import { prop as prop4 } from "aeico";
+
+// css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/button.css
+var button_default = `:host {
+  display: inline-block;
+}
+
+button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-family: inherit;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  outline: none;
+  position: relative;
+  padding: 0.429em 1.071em;
+  font-size: 1em;
+  line-height: 1.5;
+  border-radius: var(--ae-border-radius, var(--_btn-r-tl, var(--ae-radius-sm)) var(--_btn-r-tr, var(--ae-radius-sm)) var(--_btn-r-br, var(--ae-radius-sm)) var(--_btn-r-bl, var(--ae-radius-sm)));
+  min-width: 4.571em;
+  height: 2.286em;
+  width: 100%;
+
+  background:   var(--ae-color-solid);
+  border: 1px solid var(--ae-color-solid);
+  color:        var(--ae-color-on-solid);
+}
+
+button:focus  { outline: none; }
+button:active { transform: translateY(1px); }
+
+button:hover:not(:disabled) {
+  background:   var(--ae-color-solid-hover);
+  border-color: var(--ae-color-border-hover);
+  color:        var(--ae-color-on-solid-hover, var(--ae-color-on-solid));
+}
+
+button:active:not(:disabled) { background: var(--ae-color-solid-active); }
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+:host([size="xs"]) button { border-radius: var(--ae-border-radius, var(--_btn-r-tl, var(--ae-radius-xs)) var(--_btn-r-tr, var(--ae-radius-xs)) var(--_btn-r-br, var(--ae-radius-xs)) var(--_btn-r-bl, var(--ae-radius-xs))); }
+:host([size="sm"]) button { border-radius: var(--ae-border-radius, var(--_btn-r-tl, var(--ae-radius-xs)) var(--_btn-r-tr, var(--ae-radius-xs)) var(--_btn-r-br, var(--ae-radius-xs)) var(--_btn-r-bl, var(--ae-radius-xs))); }
+
+/* --- Variants --- */
+
+:host([variant="outlined"]) button {
+  background:   transparent;
+  border-color: var(--ae-color-border);
+  color:        var(--ae-color-accent);
+}
+
+:host([variant="outlined"]) button:hover:not(:disabled) {
+  background:   var(--ae-color-subtle);
+  border-color: var(--ae-color-border-hover);
+  color:        var(--ae-color-accent-hover);
+}
+
+:host([variant="outlined"]) button:active:not(:disabled) {
+  background: var(--ae-color-subtle-hover);
+}
+
+:host([variant="subtle"]) button {
+  background:   var(--ae-color-subtle);
+  border-color: transparent;
+  color:        var(--ae-color-accent);
+}
+
+:host([variant="subtle"]) button:hover:not(:disabled) {
+  background: var(--ae-color-subtle-hover);
+  color:      var(--ae-color-accent-hover);
+}
+
+:host([variant="subtle"]) button:active:not(:disabled) {
+  background: var(--ae-color-subtle-hover);
+}
+
+:host([variant="faint"]) button {
+  background:   var(--ae-color-subtle);
+  border-color: var(--ae-color-border);
+  color:        var(--ae-color-accent);
+}
+
+:host([variant="faint"]) button:hover:not(:disabled) {
+  background:   var(--ae-color-subtle-hover);
+  border-color: var(--ae-color-border-hover);
+  color:        var(--ae-color-accent-hover);
+}
+
+:host([variant="faint"]) button:active:not(:disabled) {
+  background: var(--ae-color-subtle-hover);
+}
+
+:host([variant="text"]) button {
+  background:   transparent;
+  border-color: transparent;
+  color:        var(--ae-color-accent);
+  min-width:     auto;
+  padding-left:  4px;
+  padding-right: 4px;
+}
+
+:host([variant="text"]) button:hover:not(:disabled) {
+  background: var(--ae-color-subtle);
+  color:      var(--ae-color-accent-hover);
+}
+
+:host([variant="text"]) button:active:not(:disabled) {
+  background: var(--ae-color-subtle-hover);
+}
+
+/* Icon-only: single ae-icon child \u2192 square compact layout */
+:host([icon-only]) {
+  display: inline-flex;
+}
+
+:host([icon-only]:not([size])) {
+  font-size: var(--ae-size-m);
+}
+
+:host([icon-only]) button {
+  padding:   0;
+  min-width: auto;
+  width:     2.286em;
+  height:    2.286em;
+  line-height: 1;
+}
+
+:host([icon-only]) ::slotted(ae-icon) {
+  font-size: 1.5em;
+}
+
+:host([active]) button {
+  background:   var(--ae-color-solid-active);
+  border-color: var(--ae-color-border-hover);
+  color:        var(--ae-color-on-solid-hover, var(--ae-color-on-solid));
+}
+
+.btn-icon {
+  padding: 0;
+  min-width: auto;
+  width: 2.286em;
+  height: 2.286em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--ae-radius-sm);
+}
+
+.btn-icon.btn-lg {
+  width: 2.857em;
+  height: 2.857em;
+}
+
+.btn-circle {
+  border-radius: var(--ae-radius-circle);
+}
+
+:host([block]) {
+  display: block;
+}
+
+button.btn-loading {
+  position: relative;
+  pointer-events: none;
+  color: transparent;
+}
+
+button.btn-loading::before {
+  content: '';
+  position: absolute;
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: var(--ae-radius-circle);
+  animation: btn-spin 0.6s linear infinite;
+  color: currentColor;
+  opacity: 0.8;
+}
+
+@keyframes btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.btn-icon-left {
+  margin-right: -2px;
+}
+
+.btn-icon-right {
+  margin-left: -2px;
+}
+
+`;
+
+// src/button/button.ts
+import { html as html4 } from "aeico";
+import { prop as prop3 } from "aeico";
+var _block_dec, _active_dec2, _type_dec2, _disabled_dec3, _size_dec, _variant_dec, _color_dec, _a3, _init3;
+var Button = class extends (_a3 = aeico_component_default, _color_dec = [prop3({ type: String })], _variant_dec = [prop3({ type: String })], _size_dec = [prop3({ type: String })], _disabled_dec3 = [prop3({ type: Boolean })], _type_dec2 = [prop3({ type: String })], _active_dec2 = [prop3({ type: Boolean })], _block_dec = [prop3({ type: Boolean })], _a3) {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "color", __runInitializers(_init3, 8, this)), __runInitializers(_init3, 11, this);
+    __publicField(this, "variant", __runInitializers(_init3, 12, this)), __runInitializers(_init3, 15, this);
+    __publicField(this, "size", __runInitializers(_init3, 16, this)), __runInitializers(_init3, 19, this);
+    __publicField(this, "disabled", __runInitializers(_init3, 20, this)), __runInitializers(_init3, 23, this);
+    __publicField(this, "type", __runInitializers(_init3, 24, this)), __runInitializers(_init3, 27, this);
+    __publicField(this, "active", __runInitializers(_init3, 28, this)), __runInitializers(_init3, 31, this);
+    __publicField(this, "block", __runInitializers(_init3, 32, this)), __runInitializers(_init3, 35, this);
+    __publicField(this, "_buttonElement", null);
+    __publicField(this, "_slotElement", null);
+    __publicField(this, "_autoAriaLabel", false);
+    __publicField(this, "_handleSlotChange", () => {
+      const nodes = this._slotElement?.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() {
+    this._handleSlotChange();
+  }
+  render() {
+    return html4(({ button, slot }) => {
+      this._buttonElement = button(
+        {
+          type: this.type || "button",
+          disabled: this.disabled,
+          part: "button",
+          "aria-pressed": this.active,
+          "aria-disabled": this.disabled
+        },
+        () => {
+          this._slotElement = slot({ "@slotchange": this._handleSlotChange });
+        }
+      );
+    });
+  }
+  /**
+   * 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();
+    }
+  }
+};
+_init3 = __decoratorStart(_a3);
+__decorateElement(_init3, 5, "color", _color_dec, Button);
+__decorateElement(_init3, 5, "variant", _variant_dec, Button);
+__decorateElement(_init3, 5, "size", _size_dec, Button);
+__decorateElement(_init3, 5, "disabled", _disabled_dec3, Button);
+__decorateElement(_init3, 5, "type", _type_dec2, Button);
+__decorateElement(_init3, 5, "active", _active_dec2, Button);
+__decorateElement(_init3, 5, "block", _block_dec, Button);
+__decoratorMetadata(_init3, Button);
+__publicField(Button, "styles", [variables_default, size_default, color_default, button_default]);
+Button.register();
+
+// src/dropdown/dropdown-button.ts
+var _closeOnSelect_dec2, _placement_dec2, _disabled_dec4, _size_dec2, _color_dec2, _variant_dec2, _a4, _init4, _variant, _color, _size, _disabled3, _placement2, _closeOnSelect2;
+var DropdownButton = class extends (_a4 = aeico_component_default, _variant_dec2 = [prop4({ type: String })], _color_dec2 = [prop4({ type: String })], _size_dec2 = [prop4({ type: String })], _disabled_dec4 = [prop4({ type: Boolean })], _placement_dec2 = [prop4({ type: String })], _closeOnSelect_dec2 = [prop4({ type: Boolean })], _a4) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _variant, __runInitializers(_init4, 8, this, "filled")), __runInitializers(_init4, 11, this);
+    __privateAdd(this, _color, __runInitializers(_init4, 12, this, "default")), __runInitializers(_init4, 15, this);
+    __privateAdd(this, _size, __runInitializers(_init4, 16, this, "md")), __runInitializers(_init4, 19, this);
+    __privateAdd(this, _disabled3, __runInitializers(_init4, 20, this, false)), __runInitializers(_init4, 23, this);
+    __privateAdd(this, _placement2, __runInitializers(_init4, 24, this, "bottom-start")), __runInitializers(_init4, 27, this);
+    __privateAdd(this, _closeOnSelect2, __runInitializers(_init4, 28, this, true)), __runInitializers(_init4, 31, this);
+    __publicField(this, "_dropdownEl", null);
+  }
+  show() {
+    if (this.disabled) return;
+    this._dropdownEl?.show();
+  }
+  hide() {
+    this._dropdownEl?.hide();
+  }
+  toggle() {
+    if (this.disabled) return;
+    this._dropdownEl?.toggle();
+  }
+  get open() {
+    return this._dropdownEl?.open ?? false;
+  }
+  render() {
+    const dir = this.placement.split("-")[0];
+    return html5(({ 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();
+        }
+      );
+    });
+  }
+};
+_init4 = __decoratorStart(_a4);
+_variant = new WeakMap();
+_color = new WeakMap();
+_size = new WeakMap();
+_disabled3 = new WeakMap();
+_placement2 = new WeakMap();
+_closeOnSelect2 = new WeakMap();
+__decorateElement(_init4, 4, "variant", _variant_dec2, DropdownButton, _variant);
+__decorateElement(_init4, 4, "color", _color_dec2, DropdownButton, _color);
+__decorateElement(_init4, 4, "size", _size_dec2, DropdownButton, _size);
+__decorateElement(_init4, 4, "disabled", _disabled_dec4, DropdownButton, _disabled3);
+__decorateElement(_init4, 4, "placement", _placement_dec2, DropdownButton, _placement2);
+__decorateElement(_init4, 4, "closeOnSelect", _closeOnSelect_dec2, DropdownButton, _closeOnSelect2);
+__decoratorMetadata(_init4, DropdownButton);
+__publicField(DropdownButton, "tagName", "dropdown-button");
+// ae-button and ae-dropdown each carry their own shadow DOM styles.
+// Only the host display is set here so button-group compact layout works.
+__publicField(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();
+var dropdown_button_default = DropdownButton;
 export {
-  D as DropdownButton,
-  a as DropdownItem,
-  b as default
+  dropdown_button_default as DropdownButton,
+  dropdown_item_default2 as DropdownItem,
+  dropdown_default2 as default
 };
 //# sourceMappingURL=dropdown.js.map