aeico-components 0.1.6 → 0.1.8

package/dist/chunks/menu.js

@@ -1,397 +0,0 @@
-import { A as AeicoComponent } from "./aeico-component.js";
-import { prop, html } from "aeico";
-import { v as variables } from "./variables.js";
-const style$1 = ":host {\n  display: block;\n}\n\n.menu-list {\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  gap: 0;\n}\n\n.menu-list--horizontal {\n  flex-direction: row;\n  align-items: stretch;\n}\n";
-const style = ':host {\n  display: block;\n  position: relative;\n\n  --menu-item-height: 2.5rem;\n  --menu-item-padding-x: 0.875rem;\n  --menu-item-font-size: 0.9375rem;\n  --menu-item-color: inherit;\n  --menu-item-color-disabled: var(--color-text-disabled);\n  --menu-item-bg: transparent;\n  --menu-item-bg-hover: var(--surface-raised, rgba(0, 0, 0, 0.05));\n  --menu-item-active-color: var(--color-primary, var(--blue-500));\n  --menu-item-active-border-color: var(--color-primary, var(--blue-500));\n\n  --submenu-z-index: 1001;\n  --submenu-bg: var(--surface-overlay, #fff);\n  --submenu-border: 1px solid var(--border-default);\n  --submenu-border-radius: var(--ae-radius-md, 6px);\n  --submenu-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  --submenu-min-width: 10rem;\n  --submenu-padding: 0.25rem 0;\n}\n\n.item {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  width: 100%;\n  height: var(--menu-item-height);\n  padding: 0 var(--menu-item-padding-x);\n  font-size: var(--menu-item-font-size);\n  font-family: inherit;\n  color: var(--menu-item-color);\n  background: var(--menu-item-bg);\n  border: none;\n  border-bottom: 2px solid transparent;\n  text-align: left;\n  text-decoration: none;\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n  box-sizing: border-box;\n  outline: none;\n  transition: background 0.1s, color 0.1s, border-color 0.1s;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.item--leaf-in-panel {\n  height: auto;\n  padding: 0.5rem var(--menu-item-padding-x);\n  border-bottom: none;\n}\n\n.item:hover:not(:disabled) {\n  background: var(--menu-item-bg-hover);\n}\n\n.item:focus-visible {\n  background: var(--menu-item-bg-hover);\n  outline: 2px solid var(--menu-item-active-color);\n  outline-offset: -2px;\n}\n\n:host([disabled]) .item,\n.item:disabled {\n  color: var(--menu-item-color-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n:host([selected]) .item {\n  color: var(--menu-item-active-color);\n  border-bottom-color: var(--menu-item-active-border-color);\n}\n\n.item-arrow {\n  display: inline-block;\n  width: 0;\n  height: 0;\n  flex-shrink: 0;\n}\n\n.item-arrow--right {\n  border-top: 0.3em solid transparent;\n  border-bottom: 0.3em solid transparent;\n  border-left: 0.3em solid;\n}\n\n.item-arrow--bottom {\n  border-left: 0.3em solid transparent;\n  border-right: 0.3em solid transparent;\n  border-top: 0.3em solid;\n}\n\n.item--open .item-arrow--right {\n  transform: rotate(90deg);\n}\n\nslot[name="expand"],\nslot[name="collapse"] {\n  display: inline-flex;\n  align-items: center;\n  margin-inline-start: auto;\n  flex-shrink: 0;\n}\n\nslot[name="collapse"] {\n  display: none;\n}\n\n.item--open slot[name="expand"] {\n  display: none;\n}\n\n.item--open slot[name="collapse"] {\n  display: inline-flex;\n  align-items: center;\n}\n\nslot[name="collapse"] .item-arrow--right {\n  transform: rotate(90deg);\n}\n\n:host([icon-placement="start"]) slot[name="expand"],\n:host([icon-placement="start"]) slot[name="collapse"] {\n  order: -1;\n  margin-inline-start: 0;\n}\n\n.submenu-panel {\n  display: none;\n  position: absolute;\n  z-index: var(--submenu-z-index);\n  background: var(--submenu-bg);\n  border: var(--submenu-border);\n  border-radius: var(--submenu-border-radius);\n  box-shadow: var(--submenu-shadow);\n  min-width: var(--submenu-min-width);\n  padding: var(--submenu-padding);\n  box-sizing: border-box;\n  max-width: calc(100vw - 16px);\n}\n\n.submenu-panel.open {\n  display: block;\n}\n\n.submenu-panel.placement-bottom {\n  top: 100%;\n  left: 0;\n  margin-top: 2px;\n}\n\n.submenu-panel.placement-right {\n  top: 0;\n  left: 100%;\n  margin-left: 2px;\n}\n\n.submenu-inline {\n  display: none;\n  padding-left: 1rem;\n}\n\n.submenu-inline.open {\n  display: block;\n}\n';
-var __create$1 = Object.create;
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __knownSymbol$1 = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
-var __typeError$1 = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decoratorStart$1 = (base) => [, , , __create$1((base == null ? void 0 : base[__knownSymbol$1("metadata")]) ?? null)];
-var __decoratorStrings$1 = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn$1 = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError$1("Function expected") : fn;
-var __decoratorContext$1 = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings$1[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError$1("Already initialized") : fns.push(__expectFn$1(fn || null)) });
-var __decoratorMetadata$1 = (array, target) => __defNormalProp$1(target, __knownSymbol$1("metadata"), array[3]);
-var __runInitializers$1 = (array, flags, self, value) => {
-  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
-  return value;
-};
-var __decorateElement$1 = (array, flags, name, decorators, target, extra) => {
-  var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
-  var j = array.length + 1, key = __decoratorStrings$1[k + 5];
-  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
-  var desc = (target = target.prototype, __getOwnPropDesc$1({ get [name]() {
-    return __privateGet$1(this, extra);
-  }, set [name](x) {
-    return __privateSet$1(this, extra, x);
-  } }, name));
-  for (var i = decorators.length - 1; i >= 0; i--) {
-    ctx = __decoratorContext$1(k, name, done = {}, array[3], extraInitializers);
-    {
-      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
-      access.get = (x) => x[name];
-      access.set = (x, y) => x[name] = y;
-    }
-    it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
-    if (it === void 0) __expectFn$1(it) && (desc[key] = it);
-    else if (typeof it !== "object" || it === null) __typeError$1("Object expected");
-    else __expectFn$1(fn = it.get) && (desc.get = fn), __expectFn$1(fn = it.set) && (desc.set = fn), __expectFn$1(fn = it.init) && initializers.unshift(fn);
-  }
-  return desc && __defProp$1(target, name, desc), target;
-};
-var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
-var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
-var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), member.get(obj));
-var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), member.set(obj, value), value);
-var _iconPlacement_dec, _open_dec, _selected_dec, _href_dec, _disabled_dec, _label_dec, _key_dec, _a$1, _init$1, _key, _label, _disabled, _href, _selected, _open, _iconPlacement;
-class MenuItem extends (_a$1 = AeicoComponent, _key_dec = [prop({ type: String })], _label_dec = [prop({ type: String })], _disabled_dec = [prop({ type: Boolean })], _href_dec = [prop({ type: String })], _selected_dec = [prop({ type: Boolean })], _open_dec = [prop({ type: Boolean })], _iconPlacement_dec = [prop({ type: String })], _a$1) {
-  constructor() {
-    super(...arguments);
-    __privateAdd$1(this, _key, __runInitializers$1(_init$1, 8, this)), __runInitializers$1(_init$1, 11, this);
-    __privateAdd$1(this, _label, __runInitializers$1(_init$1, 12, this)), __runInitializers$1(_init$1, 15, this);
-    __privateAdd$1(this, _disabled, __runInitializers$1(_init$1, 16, this, false)), __runInitializers$1(_init$1, 19, this);
-    __privateAdd$1(this, _href, __runInitializers$1(_init$1, 20, this)), __runInitializers$1(_init$1, 23, this);
-    __privateAdd$1(this, _selected, __runInitializers$1(_init$1, 24, this, false)), __runInitializers$1(_init$1, 27, this);
-    __privateAdd$1(this, _open, __runInitializers$1(_init$1, 28, this, false)), __runInitializers$1(_init$1, 31, this);
-    __privateAdd$1(this, _iconPlacement, __runInitializers$1(_init$1, 32, this, "end")), __runInitializers$1(_init$1, 35, this);
-    __publicField$1(this, "_outsideClickHandler", null);
-    __publicField$1(this, "_closeTimer", null);
-    __publicField$1(this, "_handleMouseEnter", () => {
-      if (!this._isHoverTrigger()) return;
-      if (this._closeTimer !== null) {
-        clearTimeout(this._closeTimer);
-        this._closeTimer = null;
-      }
-      this.open = true;
-    });
-    __publicField$1(this, "_handleMouseLeave", () => {
-      if (!this._isHoverTrigger()) return;
-      this._closeTimer = setTimeout(() => {
-        this.open = false;
-        this._closeTimer = null;
-      }, 150);
-    });
-    __publicField$1(this, "_handleParentClick", () => {
-      if (this.disabled) return;
-      const mode = this._mode;
-      const trigger = this._trigger;
-      if (mode === "flyout" && trigger === "hover") {
-        this.open = !this.open;
-        return;
-      }
-      this.open = !this.open;
-    });
-    __publicField$1(this, "_handleLeafClick", (e) => {
-      var _a2;
-      if (this.disabled) {
-        e.preventDefault();
-        return;
-      }
-      const path = this._buildKeyPath();
-      const label = ((_a2 = this.textContent) == null ? void 0 : _a2.trim()) ?? "";
-      this.dispatchEvent(
-        new CustomEvent("_menu-item-select", {
-          bubbles: true,
-          composed: true,
-          detail: { key: this.key ?? "", label, keyPath: path }
-        })
-      );
-    });
-    __publicField$1(this, "_handleChildSelect", () => {
-      if (this._mode === "flyout") {
-        this.open = false;
-      }
-    });
-    __publicField$1(this, "_handleKeydown", (e) => {
-      if (e.key === "Escape" && this.open) {
-        e.stopPropagation();
-        this.open = false;
-      }
-    });
-  }
-  connectedCallback() {
-    var _a2;
-    super.connectedCallback();
-    const depth = ((_a2 = this.parentElement) == null ? void 0 : _a2.closest("ae-menu-item")) ? 1 : 0;
-    this.dataset.depth = String(depth);
-    this.listen("mouseenter", this._handleMouseEnter);
-    this.listen("mouseleave", this._handleMouseLeave);
-    this._outsideClickHandler = (e) => {
-      if (!this.open) return;
-      if (this._mode === "inline") return;
-      if (!e.composedPath().includes(this)) this.open = false;
-    };
-    document.addEventListener("click", this._outsideClickHandler);
-    this.listen("_menu-item-select", this._handleChildSelect);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this._outsideClickHandler) {
-      document.removeEventListener("click", this._outsideClickHandler);
-      this._outsideClickHandler = null;
-    }
-    if (this._closeTimer !== null) {
-      clearTimeout(this._closeTimer);
-      this._closeTimer = null;
-    }
-  }
-  get _parentMenu() {
-    return this.closest("ae-menu");
-  }
-  get _mode() {
-    var _a2;
-    return ((_a2 = this._parentMenu) == null ? void 0 : _a2.mode) ?? "flyout";
-  }
-  get _orientation() {
-    var _a2;
-    return ((_a2 = this._parentMenu) == null ? void 0 : _a2.orientation) ?? "horizontal";
-  }
-  get _trigger() {
-    var _a2;
-    return ((_a2 = this._parentMenu) == null ? void 0 : _a2.trigger) ?? "click";
-  }
-  get _isParent() {
-    return this.label != null && this.label !== "";
-  }
-  /** Compute flyout panel placement based on depth and parent orientation. */
-  get _panelPlacement() {
-    var _a2;
-    const isNested = !!((_a2 = this.parentElement) == null ? void 0 : _a2.closest("ae-menu-item"));
-    if (!isNested && this._orientation === "horizontal") return "bottom";
-    return "right";
-  }
-  _isHoverTrigger() {
-    return this._isParent && this._mode === "flyout" && this._trigger === "hover";
-  }
-  _buildKeyPath() {
-    const path = [];
-    if (this.key) path.unshift(this.key);
-    let el = this.parentElement;
-    while (el) {
-      const tag = el.tagName.toLowerCase();
-      if (tag === "ae-menu-item") {
-        const k = el.key;
-        if (k) path.unshift(k);
-      } else if (tag === "ae-menu") {
-        break;
-      }
-      el = el.parentElement;
-    }
-    return path;
-  }
-  render() {
-    var _a2;
-    const mode = this._mode;
-    const panelPlacement = this._panelPlacement;
-    const isParent = this._isParent;
-    const isInline = mode === "inline";
-    const arrowDir = !isInline && panelPlacement === "bottom" ? "bottom" : "right";
-    const isNested = !!((_a2 = this.parentElement) == null ? void 0 : _a2.closest("ae-menu-item"));
-    return html(({ div, button, a, span, slot }) => {
-      if (isParent) {
-        div({ className: "item-wrapper" }, () => {
-          button(
-            {
-              type: "button",
-              className: { item: true, "item--parent": true, "item--open": this.open },
-              disabled: this.disabled,
-              "aria-haspopup": "menu",
-              "aria-expanded": String(this.open),
-              "@click": this._handleParentClick,
-              "@keydown": this._handleKeydown
-            },
-            () => {
-              span({ text: this.label });
-              slot({ name: "expand" }, () => {
-                span({ className: `item-arrow item-arrow--${arrowDir}`, "aria-hidden": "true" });
-              });
-              slot({ name: "collapse" }, () => {
-                span({ className: `item-arrow item-arrow--${arrowDir}`, "aria-hidden": "true" });
-              });
-            }
-          );
-          if (isInline) {
-            div(
-              {
-                className: { "submenu-inline": true, open: this.open },
-                role: "menu"
-              },
-              () => {
-                slot();
-              }
-            );
-          } else {
-            div(
-              {
-                className: {
-                  "submenu-panel": true,
-                  [`placement-${panelPlacement}`]: true,
-                  open: this.open
-                },
-                role: "menu"
-              },
-              () => {
-                slot();
-              }
-            );
-          }
-        });
-      } else {
-        const sharedProps = {
-          className: { item: true, "item--leaf-in-panel": isNested },
-          role: "menuitem",
-          "@click": this._handleLeafClick,
-          "@keydown": this._handleKeydown
-        };
-        if (this.href) {
-          a(
-            {
-              ...sharedProps,
-              href: this.disabled ? void 0 : this.href,
-              "aria-disabled": this.disabled ? "true" : void 0
-            },
-            () => {
-              slot();
-            }
-          );
-        } else {
-          button(
-            {
-              ...sharedProps,
-              type: "button",
-              disabled: this.disabled
-            },
-            () => {
-              slot();
-            }
-          );
-        }
-      }
-    });
-  }
-}
-_init$1 = __decoratorStart$1(_a$1);
-_key = /* @__PURE__ */ new WeakMap();
-_label = /* @__PURE__ */ new WeakMap();
-_disabled = /* @__PURE__ */ new WeakMap();
-_href = /* @__PURE__ */ new WeakMap();
-_selected = /* @__PURE__ */ new WeakMap();
-_open = /* @__PURE__ */ new WeakMap();
-_iconPlacement = /* @__PURE__ */ new WeakMap();
-__decorateElement$1(_init$1, 4, "key", _key_dec, MenuItem, _key);
-__decorateElement$1(_init$1, 4, "label", _label_dec, MenuItem, _label);
-__decorateElement$1(_init$1, 4, "disabled", _disabled_dec, MenuItem, _disabled);
-__decorateElement$1(_init$1, 4, "href", _href_dec, MenuItem, _href);
-__decorateElement$1(_init$1, 4, "selected", _selected_dec, MenuItem, _selected);
-__decorateElement$1(_init$1, 4, "open", _open_dec, MenuItem, _open);
-__decorateElement$1(_init$1, 4, "iconPlacement", _iconPlacement_dec, MenuItem, _iconPlacement);
-__decoratorMetadata$1(_init$1, MenuItem);
-__publicField$1(MenuItem, "tagName", "menu-item");
-__publicField$1(MenuItem, "styles", [variables, style]);
-MenuItem.register();
-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 __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 __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 = false, p = false;
-  var j = array.length + 1, key = __decoratorStrings[k + 5];
-  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
-  var desc = (target = target.prototype, __getOwnPropDesc({ get [name]() {
-    return __privateGet(this, extra);
-  }, set [name](x) {
-    return __privateSet(this, extra, x);
-  } }, name));
-  for (var i = decorators.length - 1; i >= 0; i--) {
-    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
-    {
-      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
-      access.get = (x) => x[name];
-      access.set = (x, y) => x[name] = y;
-    }
-    it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
-    if (it === void 0) __expectFn(it) && (desc[key] = it);
-    else if (typeof it !== "object" || it === null) __typeError("Object expected");
-    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
-  }
-  return desc && __defProp(target, name, 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 __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 _selectedKey_dec, _trigger_dec, _orientation_dec, _mode_dec, _a, _init, _mode, _orientation, _trigger, _selectedKey;
-class Menu extends (_a = AeicoComponent, _mode_dec = [prop({ type: String })], _orientation_dec = [prop({ type: String })], _trigger_dec = [prop({ type: String })], _selectedKey_dec = [prop({ type: String })], _a) {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _mode, __runInitializers(_init, 8, this, "flyout")), __runInitializers(_init, 11, this);
-    __privateAdd(this, _orientation, __runInitializers(_init, 12, this, "horizontal")), __runInitializers(_init, 15, this);
-    __privateAdd(this, _trigger, __runInitializers(_init, 16, this, "click")), __runInitializers(_init, 19, this);
-    __privateAdd(this, _selectedKey, __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
-    __publicField(this, "_handleItemSelect", (e) => {
-      const { key, label, keyPath } = e.detail;
-      this.querySelectorAll("ae-menu-item").forEach((el) => {
-        const item = el;
-        item.selected = item.key === key && !item.label;
-      });
-      this.selectedKey = key;
-      this.emit("select", { detail: { key, label, keyPath } });
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.listen("_menu-item-select", this._handleItemSelect);
-  }
-  render() {
-    const isHorizontal = this.orientation === "horizontal";
-    return html(({ div, slot }) => {
-      div(
-        {
-          className: { "menu-list": true, "menu-list--horizontal": isHorizontal },
-          role: isHorizontal ? "menubar" : "menu",
-          "aria-orientation": this.orientation
-        },
-        () => {
-          slot();
-        }
-      );
-    });
-  }
-}
-_init = __decoratorStart(_a);
-_mode = /* @__PURE__ */ new WeakMap();
-_orientation = /* @__PURE__ */ new WeakMap();
-_trigger = /* @__PURE__ */ new WeakMap();
-_selectedKey = /* @__PURE__ */ new WeakMap();
-__decorateElement(_init, 4, "mode", _mode_dec, Menu, _mode);
-__decorateElement(_init, 4, "orientation", _orientation_dec, Menu, _orientation);
-__decorateElement(_init, 4, "trigger", _trigger_dec, Menu, _trigger);
-__decorateElement(_init, 4, "selectedKey", _selectedKey_dec, Menu, _selectedKey);
-__decoratorMetadata(_init, Menu);
-__publicField(Menu, "tagName", "menu");
-__publicField(Menu, "styles", [variables, style$1]);
-Menu.register();
-export {
-  Menu as M,
-  MenuItem as a
-};
-//# sourceMappingURL=menu.js.map

package/dist/chunks/menu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"menu.js","sources":["../../src/menu/menu-item.ts","../../src/menu/menu.ts"],"sourcesContent":["import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport { html, prop } from 'aeico';\nimport style from '../styles/components/menu-item.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport type {\n  MenuMode,\n  MenuOrientation,\n  MenuTrigger,\n  ParentMenuLike,\n  MenuIconPlacement,\n} from './defines';\n\n/**\n * Menu item — used as a direct child of `<ae-menu>` or nested inside another\n * `<ae-menu-item>` to create a two-level submenu.\n *\n * - **Leaf item**: omit `label`; slot contains the item text.\n * - **Parent item**: set `label` to the trigger text; slot children are\n *   `<ae-menu-item>` elements that appear in the submenu panel/section.\n *\n * **Slots (parent items only)**\n * - `expand`  — icon shown when the submenu is closed (default: CSS triangle).\n * - `collapse` — icon shown when the submenu is open (default: rotated CSS triangle).\n *\n * @example\n * ```html\n * <ae-menu-item label=\"Settings\" icon-placement=\"start\">\n *   <ae-icon name=\"chevron-right\" slot=\"expand\"></ae-icon>\n *   <ae-icon name=\"chevron-down\" slot=\"collapse\"></ae-icon>\n *   <ae-menu-item key=\"profile\">Profile</ae-menu-item>\n * </ae-menu-item>\n * ```\n */\nclass MenuItem extends AeicoComponent {\n  static tagName = 'menu-item';\n\n  protected static styles = [variables, style];\n\n  @prop({ type: String })\n  accessor key: string | undefined;\n\n  @prop({ type: String })\n  accessor label: string | undefined;\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  @prop({ type: String })\n  accessor href: string | undefined;\n\n  @prop({ type: Boolean })\n  accessor selected: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor open: boolean = false;\n\n  @prop({ type: String })\n  accessor iconPlacement: MenuIconPlacement = 'end';\n\n  private _outsideClickHandler: ((e: MouseEvent) => void) | null = null;\n  private _closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // data-depth lets CSS apply depth-specific styles without JS\n    const depth = this.parentElement?.closest('ae-menu-item') ? 1 : 0;\n    this.dataset.depth = String(depth);\n\n    // Hover listeners — check mode/trigger at runtime\n    this.listen('mouseenter', this._handleMouseEnter);\n    this.listen('mouseleave', this._handleMouseLeave);\n\n    // Outside-click to close flyout panel (not applicable in inline mode)\n    this._outsideClickHandler = (e: MouseEvent) => {\n      if (!this.open) return;\n      if (this._mode === 'inline') return;\n      if (!e.composedPath().includes(this)) this.open = false;\n    };\n\n    document.addEventListener('click', this._outsideClickHandler);\n\n    // Close own submenu when a leaf inside it is selected (flyout)\n    this.listen('_menu-item-select', this._handleChildSelect as EventListener);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._outsideClickHandler) {\n      document.removeEventListener('click', this._outsideClickHandler);\n      this._outsideClickHandler = null;\n    }\n    if (this._closeTimer !== null) {\n      clearTimeout(this._closeTimer);\n      this._closeTimer = null;\n    }\n  }\n\n  private get _parentMenu(): ParentMenuLike | null {\n    return this.closest<ParentMenuLike>('ae-menu');\n  }\n\n  private get _mode(): MenuMode {\n    return this._parentMenu?.mode ?? 'flyout';\n  }\n\n  private get _orientation(): MenuOrientation {\n    return this._parentMenu?.orientation ?? 'horizontal';\n  }\n\n  private get _trigger(): MenuTrigger {\n    return this._parentMenu?.trigger ?? 'click';\n  }\n\n  private get _isParent(): boolean {\n    return this.label != null && this.label !== '';\n  }\n\n  /** Compute flyout panel placement based on depth and parent orientation. */\n  private get _panelPlacement(): 'bottom' | 'right' {\n    const isNested = !!this.parentElement?.closest('ae-menu-item');\n    if (!isNested && this._orientation === 'horizontal') return 'bottom';\n    return 'right';\n  }\n\n  private _isHoverTrigger(): boolean {\n    return this._isParent && this._mode === 'flyout' && this._trigger === 'hover';\n  }\n\n  private _handleMouseEnter = (): void => {\n    if (!this._isHoverTrigger()) return;\n    if (this._closeTimer !== null) {\n      clearTimeout(this._closeTimer);\n      this._closeTimer = null;\n    }\n    this.open = true;\n  };\n\n  private _handleMouseLeave = (): void => {\n    if (!this._isHoverTrigger()) return;\n    this._closeTimer = setTimeout(() => {\n      this.open = false;\n      this._closeTimer = null;\n    }, 150);\n  };\n\n  private _handleParentClick = (): void => {\n    if (this.disabled) return;\n    const mode = this._mode;\n    const trigger = this._trigger;\n    // In hover mode, click should still toggle (accessibility)\n    if (mode === 'flyout' && trigger === 'hover') {\n      this.open = !this.open;\n      return;\n    }\n    this.open = !this.open;\n  };\n\n  private _handleLeafClick = (e: Event): void => {\n    if (this.disabled) {\n      e.preventDefault();\n      return;\n    }\n    const path = this._buildKeyPath();\n    const label = this.textContent?.trim() ?? '';\n    this.dispatchEvent(\n      new CustomEvent('_menu-item-select', {\n        bubbles: true,\n        composed: true,\n        detail: { key: this.key ?? '', label, keyPath: path },\n      }),\n    );\n  };\n\n  private _handleChildSelect = (): void => {\n    // Close flyout panel after a child leaf is selected\n    if (this._mode === 'flyout') {\n      this.open = false;\n    }\n  };\n\n  private _handleKeydown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape' && this.open) {\n      e.stopPropagation();\n      this.open = false;\n    }\n  };\n\n  private _buildKeyPath(): string[] {\n    const path: string[] = [];\n    if (this.key) path.unshift(this.key);\n    let el: Element | null = this.parentElement;\n    while (el) {\n      const tag = el.tagName.toLowerCase();\n      if (tag === 'ae-menu-item') {\n        const k = (el as MenuItem).key;\n        if (k) path.unshift(k);\n      } else if (tag === 'ae-menu') {\n        break;\n      }\n      el = el.parentElement;\n    }\n    return path;\n  }\n\n  protected render() {\n    const mode = this._mode;\n    const panelPlacement = this._panelPlacement;\n    const isParent = this._isParent;\n    const isInline = mode === 'inline';\n    // Arrow direction: inline always shows ► (rotates to ▼ on open)\n    // flyout-bottom shows ▼; flyout-right shows ►\n    const arrowDir = !isInline && panelPlacement === 'bottom' ? 'bottom' : 'right';\n    // Leaf items inside a submenu panel (depth > 0) need different padding\n    const isNested = !!this.parentElement?.closest('ae-menu-item');\n\n    return html(({ div, button, a, span, slot }) => {\n      if (isParent) {\n        div({ className: 'item-wrapper' }, () => {\n          button(\n            {\n              type: 'button',\n              className: { item: true, 'item--parent': true, 'item--open': this.open },\n              disabled: this.disabled,\n              'aria-haspopup': 'menu',\n              'aria-expanded': String(this.open),\n              '@click': this._handleParentClick,\n              '@keydown': this._handleKeydown,\n            },\n            () => {\n              span({ text: this.label });\n              slot({ name: 'expand' }, () => {\n                span({ className: `item-arrow item-arrow--${arrowDir}`, 'aria-hidden': 'true' });\n              });\n              slot({ name: 'collapse' }, () => {\n                span({ className: `item-arrow item-arrow--${arrowDir}`, 'aria-hidden': 'true' });\n              });\n            },\n          );\n\n          if (isInline) {\n            div(\n              {\n                className: { 'submenu-inline': true, open: this.open },\n                role: 'menu',\n              },\n              () => {\n                slot();\n              },\n            );\n          } else {\n            div(\n              {\n                className: {\n                  'submenu-panel': true,\n                  [`placement-${panelPlacement}`]: true,\n                  open: this.open,\n                },\n                role: 'menu',\n              },\n              () => {\n                slot();\n              },\n            );\n          }\n        });\n      } else {\n        // Leaf item\n        const sharedProps = {\n          className: { item: true, 'item--leaf-in-panel': isNested },\n          role: 'menuitem',\n          '@click': this._handleLeafClick,\n          '@keydown': this._handleKeydown,\n        };\n\n        if (this.href) {\n          a(\n            {\n              ...sharedProps,\n              href: this.disabled ? undefined : this.href,\n              'aria-disabled': this.disabled ? 'true' : undefined,\n            },\n            () => {\n              slot();\n            },\n          );\n        } else {\n          button(\n            {\n              ...sharedProps,\n              type: 'button',\n              disabled: this.disabled,\n            },\n            () => {\n              slot();\n            },\n          );\n        }\n      }\n    });\n  }\n}\n\nMenuItem.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-menu-item': MenuItem;\n  }\n}\n\nexport default MenuItem;\nexport type MenuItemProps = InferProps<typeof MenuItem>;\nexport type { MenuIconPlacement };\n","import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport { html, prop } from 'aeico';\nimport style from '../styles/components/menu.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport type { MenuMode, MenuOrientation, MenuSelectDetail, MenuTrigger } from './defines';\n// Ensure ae-menu-item is registered when this module is used\nimport './menu-item';\n\n/**\n * Menu navigation component. Renders a horizontal or vertical menu with\n * optional two-level flyout or inline (accordion) submenus.\n *\n * Two modes:\n * - `flyout` (default) — submenus open as floating panels (like a nav bar or\n *   context menu).\n * - `inline` — submenus expand in-place (accordion-style sidebar).\n *\n * Emits:\n * - `select` — `{ detail: { key, label, keyPath } }` when a leaf item is clicked.\n */\nclass Menu extends AeicoComponent {\n  static tagName = 'menu';\n\n  protected static styles = [variables, style];\n\n  @prop({ type: String })\n  accessor mode: MenuMode = 'flyout';\n\n  @prop({ type: String })\n  accessor orientation: MenuOrientation = 'horizontal';\n\n  @prop({ type: String })\n  accessor trigger: MenuTrigger = 'click';\n\n  @prop({ type: String })\n  accessor selectedKey: string | undefined;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.listen('_menu-item-select', this._handleItemSelect as EventListener);\n  }\n\n  private _handleItemSelect = (e: CustomEvent<MenuSelectDetail>): void => {\n    const { key, label, keyPath } = e.detail;\n    // Update visual selection on all leaf items\n    this.querySelectorAll('ae-menu-item').forEach((el) => {\n      const item = el;\n      item.selected = item.key === key && !item.label; // only leaf items\n    });\n    this.selectedKey = key;\n    this.emit('select', { detail: { key, label, keyPath } });\n  };\n\n  protected render() {\n    const isHorizontal = this.orientation === 'horizontal';\n    return html(({ div, slot }) => {\n      div(\n        {\n          className: { 'menu-list': true, 'menu-list--horizontal': isHorizontal },\n          role: isHorizontal ? 'menubar' : 'menu',\n          'aria-orientation': this.orientation,\n        },\n        () => {\n          slot();\n        },\n      );\n    });\n  }\n}\n\nMenu.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-menu': Menu;\n  }\n}\n\nexport default Menu;\nexport type MenuProps = InferProps<typeof Menu>;\n"],"names":["_a","_init","__privateAdd","__runInitializers","__publicField","__decoratorStart","__decorateElement","__decoratorMetadata","style"],"mappings":"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"}

package/dist/chunks/navbar.cjs

@@ -1,142 +0,0 @@
-"use strict";
-const variables = require("./variables.cjs");
-const color = require("./color.cjs");
-const aeicoComponent = require("./aeico-component.cjs");
-const aeico = require("aeico");
-const navbarStyle = ':host {\n  /* layout — padding lives in .inner so document * { padding:0 } cannot override it */\n  display: block;\n  position: static;\n  top: auto;\n  z-index: var(--ae-navbar-z-index, 100);\n  box-sizing: border-box;\n  height: var(--ae-navbar-height, 3.25rem);\n  border-radius: var(--ae-navbar-radius, 0);\n\n  /* color */\n  background: var(--ae-navbar-bg, var(--surface-base));\n  color: var(--ae-navbar-color, var(--color-text-main));\n  border-bottom: var(--ae-navbar-border-width, 1px) solid var(--ae-navbar-border-color, var(--border-default));\n  box-shadow: var(--ae-navbar-shadow, none);\n\n  /* layout tokens — declared here so they are clearly part of the public API */\n  --ae-navbar-radius: 0;\n  /* Default padding-x references the global layout token so ae-navbar content\n     automatically aligns with .container / .container-fluid in light DOM.\n     Override with --ae-navbar-padding-x to decouple if needed. */\n  --ae-navbar-padding-x: var(--container-padding-x, 1.5rem);\n  --ae-navbar-gap: 0.5rem;\n\n  /* link style tokens — text mode defaults.\n     CSS custom properties inherit into slotted content, so\n     ::slotted(a[slot="start"]) can reference --ae-navbar-height. */\n  --ae-navbar-link-color: inherit;\n  --ae-navbar-link-font-size: inherit;\n  --ae-navbar-link-padding-x: 0.75rem;  /* horizontal padding only; height fills vertically */\n  --ae-navbar-link-radius: 0;\n  --ae-navbar-link-hover-color: var(--color-text-link-hover);\n  --ae-navbar-link-hover-bg: transparent;\n  --ae-navbar-link-active-color: var(--color-text-link);\n  --ae-navbar-link-active-font-weight: 600;\n}\n\n:host([sticky]) {\n  position: sticky;\n  top: 0;\n}\n\n:host([color]) {\n  --ae-navbar-bg: var(--color-solid);\n  --ae-navbar-color: var(--color-on-solid);\n  --ae-navbar-border-color: transparent;\n  --ae-navbar-link-hover-color: var(--color-on-solid);\n  --ae-navbar-link-active-color: var(--color-on-solid);\n}\n\n/* block preset: hover shows a subtle filled block */\n:host([appearance="block"]) {\n  --ae-navbar-link-hover-bg: var(--color-bg-subtle);\n  --ae-navbar-link-hover-color: inherit;\n}\n\n/* block preset on colored navbar: use semi-transparent white */\n:host([color][appearance="block"]) {\n  --ae-navbar-link-hover-bg: rgba(255, 255, 255, 0.15);\n  --ae-navbar-link-hover-color: var(--color-on-solid);\n}\n\n.inner {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 0 var(--ae-navbar-padding-x);\n  gap: var(--ae-navbar-gap);\n  box-sizing: border-box;\n}\n\n[part="brand"] {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n}\n\n/* nav wraps start + end; takes all remaining space */\n[part="nav"] {\n  flex: 1 1 auto;\n  display: flex;\n  align-self: stretch;   /* stretch to host height so children can fill it */\n  align-items: stretch;\n  min-width: 0;\n}\n\n[part="start"],\n[part="end"] {\n  flex: 0 0 auto;\n  display: flex;\n  align-self: stretch;\n}\n\n[part="start"] {\n  align-items: stretch;  /* slotted <a> will stretch to full height */\n  gap: var(--ae-navbar-start-gap, 0);\n}\n\n[part="end"] {\n  align-items: center;   /* buttons / avatars stay vertically centred */\n  gap: var(--ae-navbar-end-gap, 0.5rem);\n  margin-left: auto;\n}\n\n/* hamburger — hidden on desktop */\n[part="hamburger"] {\n  display: none;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n  flex-shrink: 0;\n  width: var(--ae-navbar-hamburger-size, 2rem);\n  height: var(--ae-navbar-hamburger-size, 2rem);\n  margin-left: auto;\n  padding: 0;\n  background: none;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  color: var(--ae-navbar-hamburger-color, inherit);\n}\n\n[part="hamburger"]:hover {\n  background: color-mix(in srgb, currentColor 10%, transparent);\n}\n\n[part="hamburger"] span {\n  display: block;\n  width: 18px;\n  height: 2px;\n  background: currentColor;\n  border-radius: 1px;\n  transition: transform 0.2s ease, opacity 0.2s ease;\n}\n\n/* Brand link — sensible defaults, no full-height stretch */\n::slotted(a[slot="brand"]) {\n  display: inline-flex;\n  align-items: center;\n  color: inherit;\n  font-weight: 700;\n  font-size: 1.05rem;\n  text-decoration: none;\n  white-space: nowrap;\n}\n\n/* Nav links (start / end slots) — fill full navbar height for block hover effect */\n::slotted(a[slot="start"]),\n::slotted(a[slot="end"]) {\n  display: inline-flex;\n  align-items: center;\n  height: var(--ae-navbar-height, 3.25rem);  /* full-height hover area */\n  /* !important overrides document-level * { padding: 0 } reset */\n  padding: 0 var(--ae-navbar-link-padding-x) !important;\n  border-radius: var(--ae-navbar-link-radius);\n  color: var(--ae-navbar-link-color);\n  font-size: var(--ae-navbar-link-font-size);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: color 0.15s ease, background-color 0.15s ease;\n  outline-offset: 2px;\n}\n\n::slotted(a[slot="start"]:hover),\n::slotted(a[slot="end"]:hover) {\n  color: var(--ae-navbar-link-hover-color);\n  background-color: var(--ae-navbar-link-hover-bg);\n}\n\n::slotted(a[slot="start"][aria-current="page"]),\n::slotted(a[slot="end"][aria-current="page"]) {\n  color: var(--ae-navbar-link-active-color);\n  font-weight: var(--ae-navbar-link-active-font-weight);\n}\n\n/* ae-dropdown inside navbar — map navbar tokens to dropdown trigger API */\n::slotted(ae-dropdown) {\n  align-self: stretch;\n  --dropdown-trigger-height: 100%;\n  --dropdown-trigger-padding-x: var(--ae-navbar-link-padding-x);\n  --dropdown-trigger-color: var(--ae-navbar-link-color);\n  --dropdown-trigger-bg: none;\n  --dropdown-trigger-radius: var(--ae-navbar-link-radius);\n  --dropdown-trigger-font-size: var(--ae-navbar-link-font-size);\n  --dropdown-trigger-hover-color: var(--ae-navbar-link-hover-color);\n  --dropdown-trigger-hover-bg: var(--ae-navbar-link-hover-bg);\n}\n\n@media (max-width: 768px) {\n  /* collapse the nav container */\n  [part="nav"] {\n    display: none;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0;\n    padding: 0.5rem 0;\n    background: var(--ae-navbar-mobile-bg, var(--ae-navbar-bg, var(--surface-base)));\n    border-bottom: 1px solid var(--ae-navbar-border-color, var(--border-default));\n    box-shadow: var(--ae-navbar-mobile-shadow, 0 4px 12px rgba(0, 0, 0, 0.1));\n    z-index: 1;\n  }\n\n  :host([open]) [part="nav"] {\n    display: flex;\n  }\n\n  /* stack start/end vertically inside the panel */\n  [part="start"],\n  [part="end"] {\n    flex-direction: column;\n    align-items: flex-start;\n    align-self: auto;\n    gap: 0;\n    margin-left: 0;\n    width: 100%;\n  }\n\n  /* Mobile: links revert to auto height and add vertical padding */\n  ::slotted(a[slot="start"]),\n  ::slotted(a[slot="end"]) {\n    height: auto;\n    width: 100%;\n    padding: 0.75rem var(--ae-navbar-link-padding-x);\n    border-radius: 0;\n  }\n\n  /* show hamburger */\n  [part="hamburger"] {\n    display: flex;\n  }\n\n  /* hamburger → × animation */\n  :host([open]) [part="hamburger"] span:nth-child(1) {\n    transform: translateY(7px) rotate(45deg);\n  }\n\n  :host([open]) [part="hamburger"] span:nth-child(2) {\n    opacity: 0;\n    transform: scaleX(0);\n  }\n\n  :host([open]) [part="hamburger"] span:nth-child(3) {\n    transform: translateY(-7px) rotate(-45deg);\n  }\n}\n';
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
-var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
-var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
-var __decoratorMetadata = (array, target) => __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 = false, p = false;
-  var j = array.length + 1, key = __decoratorStrings[k + 5];
-  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
-  var desc = (target = target.prototype, __getOwnPropDesc({ get [name]() {
-    return __privateGet(this, extra);
-  }, set [name](x) {
-    return __privateSet(this, extra, x);
-  } }, name));
-  for (var i = decorators.length - 1; i >= 0; i--) {
-    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
-    {
-      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
-      access.get = (x) => x[name];
-      access.set = (x, y) => x[name] = y;
-    }
-    it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
-    if (it === void 0) __expectFn(it) && (desc[key] = it);
-    else if (typeof it !== "object" || it === null) __typeError("Object expected");
-    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
-  }
-  return desc && __defProp(target, name, 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 __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 _open_dec, _appearance_dec, _sticky_dec, _color_dec, _a, _init, _color, _sticky, _appearance, _open;
-class Navbar extends (_a = aeicoComponent.AeicoComponent, _color_dec = [aeico.prop({ type: String })], _sticky_dec = [aeico.prop({ type: Boolean })], _appearance_dec = [aeico.prop({ type: String })], _open_dec = [aeico.prop({ type: Boolean })], _a) {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _color, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
-    __privateAdd(this, _sticky, __runInitializers(_init, 12, this, false)), __runInitializers(_init, 15, this);
-    __privateAdd(this, _appearance, __runInitializers(_init, 16, this, "text")), __runInitializers(_init, 19, this);
-    __privateAdd(this, _open, __runInitializers(_init, 20, this, false)), __runInitializers(_init, 23, this);
-    __publicField(this, "_outsideClickHandler", null);
-    __publicField(this, "_handleInnerClick", (e) => {
-      if (!this.open) return;
-      const path = e.composedPath();
-      if (path.some((el) => el.tagName === "A")) {
-        this._closeMenu();
-      }
-    });
-    __publicField(this, "_toggleMenu", () => {
-      this.open = !this.open;
-    });
-    __publicField(this, "_closeMenu", () => {
-      if (this.open) this.open = false;
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this._outsideClickHandler = (e) => {
-      var _a2;
-      if (!this.contains(e.target) && !((_a2 = this.shadowRoot) == null ? void 0 : _a2.contains(e.target))) {
-        this._closeMenu();
-      }
-    };
-    document.addEventListener("click", this._outsideClickHandler);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this._outsideClickHandler) {
-      document.removeEventListener("click", this._outsideClickHandler);
-      this._outsideClickHandler = null;
-    }
-  }
-  /** Toggle the mobile menu open/closed. */
-  toggleMenu() {
-    this.open = !this.open;
-  }
-  render() {
-    return aeico.html(({ div, nav, button, span, slot }) => {
-      div({ class: "inner", "@click": this._handleInnerClick }, () => {
-        div({ part: "brand" }, () => {
-          slot({ name: "brand" });
-        });
-        nav({ part: "nav", "aria-label": "Main navigation" }, () => {
-          div({ part: "start" }, () => {
-            slot({ name: "start" });
-          });
-          div({ part: "end" }, () => {
-            slot({ name: "end" });
-          });
-        });
-        button(
-          {
-            part: "hamburger",
-            type: "button",
-            "aria-expanded": String(this.open),
-            "aria-label": "Toggle navigation",
-            "@click": this._toggleMenu
-          },
-          () => {
-            span({ "aria-hidden": "true" });
-            span({ "aria-hidden": "true" });
-            span({ "aria-hidden": "true" });
-          }
-        );
-      });
-    });
-  }
-}
-_init = __decoratorStart(_a);
-_color = /* @__PURE__ */ new WeakMap();
-_sticky = /* @__PURE__ */ new WeakMap();
-_appearance = /* @__PURE__ */ new WeakMap();
-_open = /* @__PURE__ */ new WeakMap();
-__decorateElement(_init, 4, "color", _color_dec, Navbar, _color);
-__decorateElement(_init, 4, "sticky", _sticky_dec, Navbar, _sticky);
-__decorateElement(_init, 4, "appearance", _appearance_dec, Navbar, _appearance);
-__decorateElement(_init, 4, "open", _open_dec, Navbar, _open);
-__decoratorMetadata(_init, Navbar);
-__publicField(Navbar, "tagName", "navbar");
-__publicField(Navbar, "styles", [variables.variables, color.colorCSS, navbarStyle]);
-Navbar.register();
-exports.Navbar = Navbar;
-//# sourceMappingURL=navbar.cjs.map

package/dist/chunks/navbar.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"navbar.cjs","sources":["../../src/navbar/navbar.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport navbarStyle from '../styles/components/navbar.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\nimport type { NavbarColor, NavbarAppearance } from './defines';\n\n/**\n * Navbar Component\n *\n * A sticky top navigation bar with three slot regions and built-in\n * mobile hamburger collapse.\n *\n * Slots:\n * - `brand`  — leftmost area, typically a logo or site name link\n * - `start`  — main navigation links / dropdowns\n * - `end`    — right-side actions (login button, avatar, etc.)\n *\n * Slotted `<a>` elements receive default link styling controlled via\n * CSS custom properties. Mark the active link with `aria-current=\"page\"`.\n *\n * @example\n * ```html\n * <ae-navbar color=\"primary\" appearance=\"block\">\n *   <a slot=\"brand\" href=\"/\">MyApp</a>\n *   <a slot=\"start\" href=\"/\" aria-current=\"page\">Home</a>\n *   <a slot=\"start\" href=\"/docs\">Docs</a>\n *   <ae-button slot=\"end\" size=\"sm\" variant=\"outlined\">Sign in</ae-button>\n * </ae-navbar>\n * ```\n *\n * @example\n * ```css\n * /* Custom height and transparent background *\\/\n * ae-navbar {\n *   --ae-navbar-height: 4rem;\n *   --ae-navbar-bg: transparent;\n *   --ae-navbar-border-width: 0;\n *   --ae-navbar-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);\n * }\n * ```\n */\nclass Navbar extends AeicoComponent {\n  static tagName = 'navbar';\n\n  protected static styles = [styleVariables, colorCSS, navbarStyle];\n\n  /** Background color using the design-system color token set. */\n  @prop({ type: String })\n  accessor color: NavbarColor | undefined;\n\n  /** When true (default), the navbar sticks to the top of the viewport while scrolling. Set to false to let it scroll with the page. */\n  @prop({ type: Boolean })\n  accessor sticky: boolean = false;\n\n  /**\n   * Hover style preset for slotted `<a>` links.\n   * - `text`  — only the font color changes on hover (default)\n   * - `block` — a subtle filled background block appears on hover\n   *\n   * Fine-tune further with `--ae-navbar-link-hover-color` /\n   * `--ae-navbar-link-hover-bg` CSS variables.\n   */\n  @prop({ type: String })\n  accessor appearance: NavbarAppearance = 'text';\n\n  /** Whether the mobile menu is expanded. Reflects as the `open` attribute. */\n  @prop({ type: Boolean })\n  accessor open: boolean = false;\n\n  private _outsideClickHandler: ((e: MouseEvent) => void) | null = null;\n\n  connectedCallback() {\n    super.connectedCallback();\n    // Close menu when clicking outside the navbar\n    this._outsideClickHandler = (e: MouseEvent) => {\n      // Event retargeting in shadow DOM means e.target is the host element\n      // when the click originates inside the shadow root, so this check is safe.\n      if (!this.contains(e.target as Node) && !this.shadowRoot?.contains(e.target as Node)) {\n        this._closeMenu();\n      }\n    };\n    document.addEventListener('click', this._outsideClickHandler);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._outsideClickHandler) {\n      document.removeEventListener('click', this._outsideClickHandler);\n      this._outsideClickHandler = null;\n    }\n  }\n\n  /** Toggle the mobile menu open/closed. */\n  toggleMenu(): void {\n    this.open = !this.open;\n  }\n\n  private _handleInnerClick = (e: Event) => {\n    if (!this.open) return;\n    // Close mobile menu when a slotted <a> link is clicked\n    const path = e.composedPath() as Element[];\n    if (path.some((el) => (el as HTMLElement).tagName === 'A')) {\n      this._closeMenu();\n    }\n  };\n\n  private _toggleMenu = () => {\n    this.open = !this.open;\n  };\n\n  private _closeMenu = () => {\n    if (this.open) this.open = false;\n  };\n\n  protected render() {\n    return html(({ div, nav, button, span, slot }) => {\n      div({ class: 'inner', '@click': this._handleInnerClick }, () => {\n        div({ part: 'brand' }, () => {\n          slot({ name: 'brand' });\n        });\n        nav({ part: 'nav', 'aria-label': 'Main navigation' }, () => {\n          div({ part: 'start' }, () => {\n            slot({ name: 'start' });\n          });\n          div({ part: 'end' }, () => {\n            slot({ name: 'end' });\n          });\n        });\n        button(\n          {\n            part: 'hamburger',\n            type: 'button',\n            'aria-expanded': String(this.open),\n            'aria-label': 'Toggle navigation',\n            '@click': this._toggleMenu,\n          },\n          () => {\n            span({ 'aria-hidden': 'true' });\n            span({ 'aria-hidden': 'true' });\n            span({ 'aria-hidden': 'true' });\n          },\n        );\n      });\n    });\n  }\n}\n\nNavbar.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-navbar': Navbar;\n  }\n}\n\nexport default Navbar;\nexport type NavbarProps = InferProps<typeof Navbar>;\n"],"names":["AeicoComponent","prop","_a","html","styleVariables","colorCSS"],"mappings":"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"}