aeico-components 0.1.5 → 0.1.6

package/dist/chunks/menu.js

@@ -0,0 +1,397 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -136,7 +136,7 @@ __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.styleVariables, color.colorCSS, navbarStyle]);
+__publicField(Navbar, "styles", [variables.variables, color.colorCSS, navbarStyle]);
 Navbar.register();
 exports.Navbar = Navbar;
 //# sourceMappingURL=navbar.cjs.map

package/dist/chunks/navbar.cjs.map

@@ -1 +1 @@
-{"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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"}
+{"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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"}

package/dist/chunks/navbar.js

@@ -1,4 +1,4 @@
-import { s as styleVariables } from "./variables.js";
+import { v as variables } from "./variables.js";
 import { c as colorCSS } from "./color.js";
 import { A as AeicoComponent } from "./aeico-component.js";
 import { prop, html } from "aeico";
@@ -135,7 +135,7 @@ __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", [styleVariables, colorCSS, navbarStyle]);
+__publicField(Navbar, "styles", [variables, colorCSS, navbarStyle]);
 Navbar.register();
 export {
   Navbar as N

package/dist/chunks/navbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.js","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":["_a"],"mappings":"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"}
+{"version":3,"file":"navbar.js","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":["_a","styleVariables"],"mappings":"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"}