aeico-components 0.1.3 → 0.1.5

package/dist/chunks/icon-button.js

@@ -0,0 +1,36 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { A as AeicoComponent } from "./aeico-component.js";
+import { html } from "aeico";
+class IconButton extends AeicoComponent {
+  render() {
+    return html(({ aeButton, aeIcon }) => {
+      aeButton(
+        {
+          color: this.color,
+          variant: this.variant,
+          size: this.size,
+          disabled: this.disabled
+        },
+        () => {
+          aeIcon({ name: this.icon });
+        }
+      );
+    });
+  }
+}
+__publicField(IconButton, "tagName", "icon-button");
+__publicField(IconButton, "props", {
+  icon: { type: String },
+  size: { type: String },
+  color: { type: String },
+  variant: { type: String },
+  disabled: { type: Boolean }
+});
+__publicField(IconButton, "styles", [":host { display: contents; }"]);
+IconButton.register();
+export {
+  IconButton as I
+};
+//# sourceMappingURL=icon-button.js.map

package/dist/chunks/icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.js","sources":["../../src/icon-button/icon-button.ts"],"sourcesContent":["import type { InferProps, Props } from 'aeico';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type { IconColor } from '../icon/defines';\n// Ensure ae-button and ae-icon are registered\nimport '../button/button';\nimport '../icon/icon';\n\nexport type IconButtonVariant = 'filled' | 'outlined' | 'subtle' | 'text';\nexport type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/**\n * @deprecated Use `<ae-button>` with an `<ae-icon>` slot instead.\n *\n * ```html\n * <ae-button color=\"primary\"><ae-icon name=\"star\"></ae-icon></ae-button>\n * ```\n */\nclass IconButton extends AeicoComponent {\n  static tagName = 'icon-button';\n\n  static props: Props = {\n    icon: { type: String },\n    size: { type: String },\n    color: { type: String },\n    variant: { type: String },\n    disabled: { type: Boolean },\n  };\n\n  declare icon?: string;\n  declare size?: IconButtonSize;\n  declare color?: IconColor;\n  declare variant?: IconButtonVariant;\n  declare disabled?: boolean;\n\n  protected static styles = [':host { display: contents; }'];\n\n  protected render() {\n    return html(({ aeButton, aeIcon }) => {\n      aeButton(\n        {\n          color: this.color,\n          variant: this.variant,\n          size: this.size,\n          disabled: this.disabled,\n        },\n        () => {\n          aeIcon({ name: this.icon });\n        },\n      );\n    });\n  }\n}\n\nIconButton.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-icon-button': IconButton;\n  }\n}\n\nexport default IconButton;\nexport type IconButtonProps = InferProps<typeof IconButton>;\n"],"names":[],"mappings":";;;;;AAkBA,MAAM,mBAAmB,eAAe;AAAA,EAmB5B,SAAS;AACjB,WAAO,KAAK,CAAC,EAAE,UAAU,aAAa;AACpC;AAAA,QACE;AAAA,UACE,OAAO,KAAK;AAAA,UACZ,SAAS,KAAK;AAAA,UACd,MAAM,KAAK;AAAA,UACX,UAAU,KAAK;AAAA,QAAA;AAAA,QAEjB,MAAM;AACJ,iBAAO,EAAE,MAAM,KAAK,KAAA,CAAM;AAAA,QAC5B;AAAA,MAAA;AAAA,IAEJ,CAAC;AAAA,EACH;AACF;AAjCE,cADI,YACG,WAAU;AAEjB,cAHI,YAGG,SAAe;AAAA,EACpB,MAAM,EAAE,MAAM,OAAA;AAAA,EACd,MAAM,EAAE,MAAM,OAAA;AAAA,EACd,OAAO,EAAE,MAAM,OAAA;AAAA,EACf,SAAS,EAAE,MAAM,OAAA;AAAA,EACjB,UAAU,EAAE,MAAM,QAAA;AAAQ;AAS5B,cAjBI,YAiBa,UAAS,CAAC,8BAA8B;AAmB3D,WAAW,SAAA;"}

package/dist/chunks/icon.cjs

@@ -0,0 +1,78 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+const aeicoComponent = require("./aeico-component.cjs");
+const aeico = require("aeico");
+const variables = require("./variables.cjs");
+const size = require("./size.cjs");
+const color = require("./color.cjs");
+const style = ":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 20px;\n  width:  1em;\n  height: 1em;\n  color: inherit;\n  flex-shrink: 0;\n  line-height: 0;\n  vertical-align: middle;\n}\n\n:host([color]) {\n  color: var(--color-solid);\n}\n\n.icon-svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  fill: var(--icon-fill, currentColor);\n  stroke: var(--icon-stroke, none);\n  stroke-width: var(--icon-stroke-width, 2);\n  stroke-linecap: var(--icon-stroke-linecap, round);\n  stroke-linejoin: var(--icon-stroke-linejoin, round);\n  pointer-events: none;\n  overflow: visible;\n}\n";
+const defaultViewBox = "0 0 24 24";
+class IconRegistry {
+  static add(icons) {
+    for (const [name, data] of Object.entries(icons)) {
+      if (typeof data === "string") {
+        this._icons.set(name, { path: data, viewBox: defaultViewBox });
+      } else {
+        this._icons.set(name, data);
+      }
+    }
+  }
+  static get(name) {
+    return this._icons.get(name);
+  }
+  static has(name) {
+    return this._icons.has(name);
+  }
+}
+__publicField(IconRegistry, "_icons", /* @__PURE__ */ new Map());
+class Icon extends aeicoComponent.AeicoComponent {
+  render() {
+    const def = this.name ? IconRegistry.get(this.name) : void 0;
+    const numericSize = Number(this.size);
+    if (this.size !== void 0 && !isNaN(numericSize) && numericSize > 0) {
+      this.style.setProperty("font-size", `${numericSize}px`);
+    } else {
+      this.style.removeProperty("font-size");
+    }
+    const useStroke = this.stroke ?? (def == null ? void 0 : def.stroke) ?? false;
+    const useStrokeWidth = this.strokeWidth ?? (def == null ? void 0 : def.strokeWidth) ?? 2;
+    if (useStroke) {
+      this.style.setProperty("--icon-fill", "none");
+      this.style.setProperty("--icon-stroke", "currentColor");
+      this.style.setProperty("--icon-stroke-width", String(useStrokeWidth));
+    } else {
+      this.style.removeProperty("--icon-fill");
+      this.style.removeProperty("--icon-stroke");
+      this.style.removeProperty("--icon-stroke-width");
+    }
+    if (!def) return;
+    return aeico.html(({ svg, path }) => {
+      svg(
+        {
+          className: "icon-svg",
+          viewBox: def.viewBox ?? defaultViewBox,
+          "aria-hidden": "true",
+          xmlns: aeicoComponent.SVG_NS
+        },
+        () => {
+          path({ d: def.path });
+        }
+      );
+    });
+  }
+}
+__publicField(Icon, "tagName", "icon");
+__publicField(Icon, "props", {
+  name: { type: String },
+  size: { type: String },
+  color: { type: String },
+  stroke: { type: Boolean },
+  strokeWidth: { type: Number }
+});
+__publicField(Icon, "styles", [variables.styleVariables, size.sizeCSS, color.colorCSS, style]);
+Icon.register();
+exports.Icon = Icon;
+exports.IconRegistry = IconRegistry;
+//# sourceMappingURL=icon.cjs.map

package/dist/chunks/icon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.cjs","sources":["../../src/icon/defines.ts","../../src/icon/registry.ts","../../src/icon/icon.ts"],"sourcesContent":["export type IconSize = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;\n\nexport type IconColor =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'success'\n  | 'danger'\n  | 'warning'\n  | 'info';\n\nexport interface IconDefinition {\n  path: string;\n  viewBox?: string;\n  stroke?: boolean;\n  strokeWidth?: number;\n}\n\nexport const defaultViewBox = '0 0 24 24';\n\nexport type IconRegistryData = Record<string, string | IconDefinition>;\n","import { IconDefinition, IconRegistryData, defaultViewBox } from './defines';\n\nclass IconRegistry {\n  private static _icons: Map<string, IconDefinition> = new Map();\n\n  static add(icons: IconRegistryData) {\n    for (const [name, data] of Object.entries(icons)) {\n      if (typeof data === 'string') {\n        this._icons.set(name, { path: data, viewBox: defaultViewBox });\n      } else {\n        this._icons.set(name, data);\n      }\n    }\n  }\n\n  static get(name: string): IconDefinition | undefined {\n    return this._icons.get(name);\n  }\n\n  static has(name: string): boolean {\n    return this._icons.has(name);\n  }\n}\n\nexport default IconRegistry;\n","import type { InferProps, Props } from 'aeico';\nimport { SVG_NS } from '../utils';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport style from '../styles/components/icon.css?inline';\nimport type { IconSize, IconColor } from './defines';\nimport { defaultViewBox } from './defines';\nimport IconRegistry from './registry';\n\nclass Icon extends AeicoComponent {\n  static tagName = 'icon';\n\n  static props: Props = {\n    name: { type: String },\n    size: { type: String },\n    color: { type: String },\n    stroke: { type: Boolean },\n    strokeWidth: { type: Number },\n  };\n\n  declare name?: string;\n  declare size?: IconSize;\n  declare color?: IconColor;\n  declare stroke?: boolean;\n  declare strokeWidth?: number;\n\n  protected static styles = [styleVariables, sizeCSS, colorCSS, style];\n\n  protected render() {\n    const def = this.name ? IconRegistry.get(this.name) : undefined;\n\n    // Numeric size: set font-size directly (string sizes are handled by size.css)\n    const numericSize = Number(this.size);\n    if (this.size !== undefined && !isNaN(numericSize) && numericSize > 0) {\n      this.style.setProperty('font-size', `${numericSize}px`);\n    } else {\n      this.style.removeProperty('font-size');\n    }\n\n    // Resolve stroke: component prop takes priority over registry definition\n    const useStroke = this.stroke ?? def?.stroke ?? false;\n    const useStrokeWidth = this.strokeWidth ?? def?.strokeWidth ?? 2;\n\n    if (useStroke) {\n      this.style.setProperty('--icon-fill', 'none');\n      this.style.setProperty('--icon-stroke', 'currentColor');\n      this.style.setProperty('--icon-stroke-width', String(useStrokeWidth));\n    } else {\n      this.style.removeProperty('--icon-fill');\n      this.style.removeProperty('--icon-stroke');\n      this.style.removeProperty('--icon-stroke-width');\n    }\n\n    if (!def) return;\n\n    return html(({ svg, path }) => {\n      svg(\n        {\n          className: 'icon-svg',\n          viewBox: def.viewBox ?? defaultViewBox,\n          'aria-hidden': 'true',\n          xmlns: SVG_NS,\n        },\n        () => {\n          path({ d: def.path });\n        },\n      );\n    });\n  }\n}\n\nIcon.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-icon': Icon;\n  }\n}\n\nexport default Icon;\nexport type IconProps = InferProps<typeof Icon>;\n"],"names":["AeicoComponent","html","SVG_NS","styleVariables","sizeCSS","colorCSS"],"mappings":";;;;;;;;;;AAkBO,MAAM,iBAAiB;AChB9B,MAAM,aAAa;AAAA,EAGjB,OAAO,IAAI,OAAyB;AAClC,eAAW,CAAC,MAAM,IAAI,KAAK,OAAO,QAAQ,KAAK,GAAG;AAChD,UAAI,OAAO,SAAS,UAAU;AAC5B,aAAK,OAAO,IAAI,MAAM,EAAE,MAAM,MAAM,SAAS,gBAAgB;AAAA,MAC/D,OAAO;AACL,aAAK,OAAO,IAAI,MAAM,IAAI;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAAA,EAEA,OAAO,IAAI,MAA0C;AACnD,WAAO,KAAK,OAAO,IAAI,IAAI;AAAA,EAC7B;AAAA,EAEA,OAAO,IAAI,MAAuB;AAChC,WAAO,KAAK,OAAO,IAAI,IAAI;AAAA,EAC7B;AACF;AAnBE,cADI,cACW,UAAsC,oBAAI,IAAA;ACS3D,MAAM,aAAaA,eAAAA,eAAe;AAAA,EAmBtB,SAAS;AACjB,UAAM,MAAM,KAAK,OAAO,aAAa,IAAI,KAAK,IAAI,IAAI;AAGtD,UAAM,cAAc,OAAO,KAAK,IAAI;AACpC,QAAI,KAAK,SAAS,UAAa,CAAC,MAAM,WAAW,KAAK,cAAc,GAAG;AACrE,WAAK,MAAM,YAAY,aAAa,GAAG,WAAW,IAAI;AAAA,IACxD,OAAO;AACL,WAAK,MAAM,eAAe,WAAW;AAAA,IACvC;AAGA,UAAM,YAAY,KAAK,WAAU,2BAAK,WAAU;AAChD,UAAM,iBAAiB,KAAK,gBAAe,2BAAK,gBAAe;AAE/D,QAAI,WAAW;AACb,WAAK,MAAM,YAAY,eAAe,MAAM;AAC5C,WAAK,MAAM,YAAY,iBAAiB,cAAc;AACtD,WAAK,MAAM,YAAY,uBAAuB,OAAO,cAAc,CAAC;AAAA,IACtE,OAAO;AACL,WAAK,MAAM,eAAe,aAAa;AACvC,WAAK,MAAM,eAAe,eAAe;AACzC,WAAK,MAAM,eAAe,qBAAqB;AAAA,IACjD;AAEA,QAAI,CAAC,IAAK;AAEV,WAAOC,WAAK,CAAC,EAAE,KAAK,WAAW;AAC7B;AAAA,QACE;AAAA,UACE,WAAW;AAAA,UACX,SAAS,IAAI,WAAW;AAAA,UACxB,eAAe;AAAA,UACf,OAAOC,eAAAA;AAAAA,QAAA;AAAA,QAET,MAAM;AACJ,eAAK,EAAE,GAAG,IAAI,KAAA,CAAM;AAAA,QACtB;AAAA,MAAA;AAAA,IAEJ,CAAC;AAAA,EACH;AACF;AA3DE,cADI,MACG,WAAU;AAEjB,cAHI,MAGG,SAAe;AAAA,EACpB,MAAM,EAAE,MAAM,OAAA;AAAA,EACd,MAAM,EAAE,MAAM,OAAA;AAAA,EACd,OAAO,EAAE,MAAM,OAAA;AAAA,EACf,QAAQ,EAAE,MAAM,QAAA;AAAA,EAChB,aAAa,EAAE,MAAM,OAAA;AAAO;AAS9B,cAjBI,MAiBa,UAAS,CAACC,UAAAA,gBAAgBC,KAAAA,SAASC,MAAAA,UAAU,KAAK;AA6CrE,KAAK,SAAA;;;"}

package/dist/chunks/icon.js

@@ -0,0 +1,79 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { A as AeicoComponent, S as SVG_NS } from "./aeico-component.js";
+import { html } from "aeico";
+import { s as styleVariables } from "./variables.js";
+import { s as sizeCSS } from "./size.js";
+import { c as colorCSS } from "./color.js";
+const style = ":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 20px;\n  width:  1em;\n  height: 1em;\n  color: inherit;\n  flex-shrink: 0;\n  line-height: 0;\n  vertical-align: middle;\n}\n\n:host([color]) {\n  color: var(--color-solid);\n}\n\n.icon-svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n  fill: var(--icon-fill, currentColor);\n  stroke: var(--icon-stroke, none);\n  stroke-width: var(--icon-stroke-width, 2);\n  stroke-linecap: var(--icon-stroke-linecap, round);\n  stroke-linejoin: var(--icon-stroke-linejoin, round);\n  pointer-events: none;\n  overflow: visible;\n}\n";
+const defaultViewBox = "0 0 24 24";
+class IconRegistry {
+  static add(icons) {
+    for (const [name, data] of Object.entries(icons)) {
+      if (typeof data === "string") {
+        this._icons.set(name, { path: data, viewBox: defaultViewBox });
+      } else {
+        this._icons.set(name, data);
+      }
+    }
+  }
+  static get(name) {
+    return this._icons.get(name);
+  }
+  static has(name) {
+    return this._icons.has(name);
+  }
+}
+__publicField(IconRegistry, "_icons", /* @__PURE__ */ new Map());
+class Icon extends AeicoComponent {
+  render() {
+    const def = this.name ? IconRegistry.get(this.name) : void 0;
+    const numericSize = Number(this.size);
+    if (this.size !== void 0 && !isNaN(numericSize) && numericSize > 0) {
+      this.style.setProperty("font-size", `${numericSize}px`);
+    } else {
+      this.style.removeProperty("font-size");
+    }
+    const useStroke = this.stroke ?? (def == null ? void 0 : def.stroke) ?? false;
+    const useStrokeWidth = this.strokeWidth ?? (def == null ? void 0 : def.strokeWidth) ?? 2;
+    if (useStroke) {
+      this.style.setProperty("--icon-fill", "none");
+      this.style.setProperty("--icon-stroke", "currentColor");
+      this.style.setProperty("--icon-stroke-width", String(useStrokeWidth));
+    } else {
+      this.style.removeProperty("--icon-fill");
+      this.style.removeProperty("--icon-stroke");
+      this.style.removeProperty("--icon-stroke-width");
+    }
+    if (!def) return;
+    return html(({ svg, path }) => {
+      svg(
+        {
+          className: "icon-svg",
+          viewBox: def.viewBox ?? defaultViewBox,
+          "aria-hidden": "true",
+          xmlns: SVG_NS
+        },
+        () => {
+          path({ d: def.path });
+        }
+      );
+    });
+  }
+}
+__publicField(Icon, "tagName", "icon");
+__publicField(Icon, "props", {
+  name: { type: String },
+  size: { type: String },
+  color: { type: String },
+  stroke: { type: Boolean },
+  strokeWidth: { type: Number }
+});
+__publicField(Icon, "styles", [styleVariables, sizeCSS, colorCSS, style]);
+Icon.register();
+export {
+  Icon as I,
+  IconRegistry as a
+};
+//# sourceMappingURL=icon.js.map

package/dist/chunks/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sources":["../../src/icon/defines.ts","../../src/icon/registry.ts","../../src/icon/icon.ts"],"sourcesContent":["export type IconSize = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;\n\nexport type IconColor =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'success'\n  | 'danger'\n  | 'warning'\n  | 'info';\n\nexport interface IconDefinition {\n  path: string;\n  viewBox?: string;\n  stroke?: boolean;\n  strokeWidth?: number;\n}\n\nexport const defaultViewBox = '0 0 24 24';\n\nexport type IconRegistryData = Record<string, string | IconDefinition>;\n","import { IconDefinition, IconRegistryData, defaultViewBox } from './defines';\n\nclass IconRegistry {\n  private static _icons: Map<string, IconDefinition> = new Map();\n\n  static add(icons: IconRegistryData) {\n    for (const [name, data] of Object.entries(icons)) {\n      if (typeof data === 'string') {\n        this._icons.set(name, { path: data, viewBox: defaultViewBox });\n      } else {\n        this._icons.set(name, data);\n      }\n    }\n  }\n\n  static get(name: string): IconDefinition | undefined {\n    return this._icons.get(name);\n  }\n\n  static has(name: string): boolean {\n    return this._icons.has(name);\n  }\n}\n\nexport default IconRegistry;\n","import type { InferProps, Props } from 'aeico';\nimport { SVG_NS } from '../utils';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport style from '../styles/components/icon.css?inline';\nimport type { IconSize, IconColor } from './defines';\nimport { defaultViewBox } from './defines';\nimport IconRegistry from './registry';\n\nclass Icon extends AeicoComponent {\n  static tagName = 'icon';\n\n  static props: Props = {\n    name: { type: String },\n    size: { type: String },\n    color: { type: String },\n    stroke: { type: Boolean },\n    strokeWidth: { type: Number },\n  };\n\n  declare name?: string;\n  declare size?: IconSize;\n  declare color?: IconColor;\n  declare stroke?: boolean;\n  declare strokeWidth?: number;\n\n  protected static styles = [styleVariables, sizeCSS, colorCSS, style];\n\n  protected render() {\n    const def = this.name ? IconRegistry.get(this.name) : undefined;\n\n    // Numeric size: set font-size directly (string sizes are handled by size.css)\n    const numericSize = Number(this.size);\n    if (this.size !== undefined && !isNaN(numericSize) && numericSize > 0) {\n      this.style.setProperty('font-size', `${numericSize}px`);\n    } else {\n      this.style.removeProperty('font-size');\n    }\n\n    // Resolve stroke: component prop takes priority over registry definition\n    const useStroke = this.stroke ?? def?.stroke ?? false;\n    const useStrokeWidth = this.strokeWidth ?? def?.strokeWidth ?? 2;\n\n    if (useStroke) {\n      this.style.setProperty('--icon-fill', 'none');\n      this.style.setProperty('--icon-stroke', 'currentColor');\n      this.style.setProperty('--icon-stroke-width', String(useStrokeWidth));\n    } else {\n      this.style.removeProperty('--icon-fill');\n      this.style.removeProperty('--icon-stroke');\n      this.style.removeProperty('--icon-stroke-width');\n    }\n\n    if (!def) return;\n\n    return html(({ svg, path }) => {\n      svg(\n        {\n          className: 'icon-svg',\n          viewBox: def.viewBox ?? defaultViewBox,\n          'aria-hidden': 'true',\n          xmlns: SVG_NS,\n        },\n        () => {\n          path({ d: def.path });\n        },\n      );\n    });\n  }\n}\n\nIcon.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-icon': Icon;\n  }\n}\n\nexport default Icon;\nexport type IconProps = InferProps<typeof Icon>;\n"],"names":[],"mappings":";;;;;;;;;AAkBO,MAAM,iBAAiB;AChB9B,MAAM,aAAa;AAAA,EAGjB,OAAO,IAAI,OAAyB;AAClC,eAAW,CAAC,MAAM,IAAI,KAAK,OAAO,QAAQ,KAAK,GAAG;AAChD,UAAI,OAAO,SAAS,UAAU;AAC5B,aAAK,OAAO,IAAI,MAAM,EAAE,MAAM,MAAM,SAAS,gBAAgB;AAAA,MAC/D,OAAO;AACL,aAAK,OAAO,IAAI,MAAM,IAAI;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAAA,EAEA,OAAO,IAAI,MAA0C;AACnD,WAAO,KAAK,OAAO,IAAI,IAAI;AAAA,EAC7B;AAAA,EAEA,OAAO,IAAI,MAAuB;AAChC,WAAO,KAAK,OAAO,IAAI,IAAI;AAAA,EAC7B;AACF;AAnBE,cADI,cACW,UAAsC,oBAAI,IAAA;ACS3D,MAAM,aAAa,eAAe;AAAA,EAmBtB,SAAS;AACjB,UAAM,MAAM,KAAK,OAAO,aAAa,IAAI,KAAK,IAAI,IAAI;AAGtD,UAAM,cAAc,OAAO,KAAK,IAAI;AACpC,QAAI,KAAK,SAAS,UAAa,CAAC,MAAM,WAAW,KAAK,cAAc,GAAG;AACrE,WAAK,MAAM,YAAY,aAAa,GAAG,WAAW,IAAI;AAAA,IACxD,OAAO;AACL,WAAK,MAAM,eAAe,WAAW;AAAA,IACvC;AAGA,UAAM,YAAY,KAAK,WAAU,2BAAK,WAAU;AAChD,UAAM,iBAAiB,KAAK,gBAAe,2BAAK,gBAAe;AAE/D,QAAI,WAAW;AACb,WAAK,MAAM,YAAY,eAAe,MAAM;AAC5C,WAAK,MAAM,YAAY,iBAAiB,cAAc;AACtD,WAAK,MAAM,YAAY,uBAAuB,OAAO,cAAc,CAAC;AAAA,IACtE,OAAO;AACL,WAAK,MAAM,eAAe,aAAa;AACvC,WAAK,MAAM,eAAe,eAAe;AACzC,WAAK,MAAM,eAAe,qBAAqB;AAAA,IACjD;AAEA,QAAI,CAAC,IAAK;AAEV,WAAO,KAAK,CAAC,EAAE,KAAK,WAAW;AAC7B;AAAA,QACE;AAAA,UACE,WAAW;AAAA,UACX,SAAS,IAAI,WAAW;AAAA,UACxB,eAAe;AAAA,UACf,OAAO;AAAA,QAAA;AAAA,QAET,MAAM;AACJ,eAAK,EAAE,GAAG,IAAI,KAAA,CAAM;AAAA,QACtB;AAAA,MAAA;AAAA,IAEJ,CAAC;AAAA,EACH;AACF;AA3DE,cADI,MACG,WAAU;AAEjB,cAHI,MAGG,SAAe;AAAA,EACpB,MAAM,EAAE,MAAM,OAAA;AAAA,EACd,MAAM,EAAE,MAAM,OAAA;AAAA,EACd,OAAO,EAAE,MAAM,OAAA;AAAA,EACf,QAAQ,EAAE,MAAM,QAAA;AAAA,EAChB,aAAa,EAAE,MAAM,OAAA;AAAO;AAS9B,cAjBI,MAiBa,UAAS,CAAC,gBAAgB,SAAS,UAAU,KAAK;AA6CrE,KAAK,SAAA;"}

package/dist/chunks/navbar.cjs

@@ -0,0 +1,142 @@
+"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.styleVariables, color.colorCSS, navbarStyle]);
+Navbar.register();
+exports.Navbar = Navbar;
+//# sourceMappingURL=navbar.cjs.map

package/dist/chunks/navbar.cjs.map

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

package/dist/chunks/navbar.js

@@ -0,0 +1,143 @@
+import { s as styleVariables } from "./variables.js";
+import { c as colorCSS } from "./color.js";
+import { A as AeicoComponent } from "./aeico-component.js";
+import { prop, html } from "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, _color_dec = [prop({ type: String })], _sticky_dec = [prop({ type: Boolean })], _appearance_dec = [prop({ type: String })], _open_dec = [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 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", [styleVariables, colorCSS, navbarStyle]);
+Navbar.register();
+export {
+  Navbar as N
+};
+//# sourceMappingURL=navbar.js.map

package/dist/chunks/navbar.js.map

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