@affinda/wc 0.0.14 → 0.0.16

package/dist/collection/components/af-nav-menu/af-nav-menu.js

@@ -0,0 +1,131 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A grouped navigation menu component with a heading.
+ * Used in mega-menu dropdowns to group related navigation items.
+ */
+export class AfNavMenu {
+    constructor() {
+        /**
+         * Breakpoint variant for responsive styling
+         * - 'desktop': Desktop-specific styles (right border, horizontal padding)
+         * - 'mobile': Mobile-specific styles (bottom border, vertical layout)
+         */
+        this.breakpoint = 'desktop';
+        /**
+         * Whether to show the right border separator.
+         * When used inside NavMenuNest, borders are controlled by the parent.
+         * Set to true only when using NavMenu standalone.
+         */
+        this.showBorder = false;
+        /**
+         * Whether to display as a card with background color and rounded corners.
+         * Used for highlighted sidebar menus (e.g., solutions-alt variant).
+         */
+        this.cardStyle = false;
+    }
+    render() {
+        const classes = {
+            'nav-menu': true,
+            [`breakpoint-${this.breakpoint}`]: true,
+            'has-border': this.showBorder,
+            'card-style': this.cardStyle
+        };
+        return (h(Host, { key: '25d24de982df9e0bb085023f15a0ccc99dd68987' }, h("div", { key: 'c473e5e58df5a6300bc9f7087b4ed98126d2c178', class: classes }, this.heading && (h("div", { key: '6f080b0dd068463bde77f72a0b07dace7af4a248', class: "menu-header" }, h("h3", { key: '77f1ac6ecb8c877dc6d3b6bb0e1a37617f322175', class: "menu-heading" }, this.heading))), h("div", { key: 'f8cf91ec5aa5b31e8171d98a7c7e5c4e1e977f5e', class: "menu-items" }, h("slot", { key: 'd7bd3a85725fc817c2d9110cc315d5b57837c636' })))));
+    }
+    static get is() { return "af-nav-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-nav-menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-nav-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The heading text displayed above the navigation items"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "breakpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'desktop' | 'mobile'",
+                    "resolved": "\"desktop\" | \"mobile\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Breakpoint variant for responsive styling\n- 'desktop': Desktop-specific styles (right border, horizontal padding)\n- 'mobile': Mobile-specific styles (bottom border, vertical layout)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "breakpoint",
+                "defaultValue": "'desktop'"
+            },
+            "showBorder": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the right border separator.\nWhen used inside NavMenuNest, borders are controlled by the parent.\nSet to true only when using NavMenu standalone."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-border",
+                "defaultValue": "false"
+            },
+            "cardStyle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to display as a card with background color and rounded corners.\nUsed for highlighted sidebar menus (e.g., solutions-alt variant)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "card-style",
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-nav-menu.js.map

package/dist/collection/components/af-nav-menu/af-nav-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-nav-menu.js","sourceRoot":"","sources":["../../../src/components/af-nav-menu/af-nav-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAMH,MAAM,OAAO,SAAS;IALtB;QAWE;;;;WAIG;QACK,eAAU,GAAyB,SAAS,CAAC;QAErD;;;;WAIG;QACK,eAAU,GAAY,KAAK,CAAC;QAEpC;;;WAGG;QACsB,cAAS,GAAY,KAAK,CAAC;KAyBrD;IAvBC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,UAAU,EAAE,IAAI;YAChB,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;YACvC,YAAY,EAAE,IAAI,CAAC,UAAU;YAC7B,YAAY,EAAE,IAAI,CAAC,SAAS;SAC7B,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,OAAO;gBAChB,IAAI,CAAC,OAAO,IAAI,CACf,4DAAK,KAAK,EAAC,aAAa;oBACtB,2DAAI,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,OAAO,CAAM,CACxC,CACP;gBACD,4DAAK,KAAK,EAAC,YAAY;oBACrB,8DAAa,CACT,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * A grouped navigation menu component with a heading.\n * Used in mega-menu dropdowns to group related navigation items.\n */\n@Component({\n  tag: 'af-nav-menu',\n  styleUrl: 'af-nav-menu.css',\n  shadow: true\n})\nexport class AfNavMenu {\n  /**\n   * The heading text displayed above the navigation items\n   */\n  @Prop() heading?: string;\n\n  /**\n   * Breakpoint variant for responsive styling\n   * - 'desktop': Desktop-specific styles (right border, horizontal padding)\n   * - 'mobile': Mobile-specific styles (bottom border, vertical layout)\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Whether to show the right border separator.\n   * When used inside NavMenuNest, borders are controlled by the parent.\n   * Set to true only when using NavMenu standalone.\n   */\n  @Prop() showBorder: boolean = false;\n\n  /**\n   * Whether to display as a card with background color and rounded corners.\n   * Used for highlighted sidebar menus (e.g., solutions-alt variant).\n   */\n  @Prop({ reflect: true }) cardStyle: boolean = false;\n\n  render() {\n    const classes = {\n      'nav-menu': true,\n      [`breakpoint-${this.breakpoint}`]: true,\n      'has-border': this.showBorder,\n      'card-style': this.cardStyle\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.heading && (\n            <div class=\"menu-header\">\n              <h3 class=\"menu-heading\">{this.heading}</h3>\n            </div>\n          )}\n          <div class=\"menu-items\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/af-nav-menu-nest/af-nav-menu-nest.css

@@ -0,0 +1,79 @@
+:host {
+  display: inline-block;
+}
+
+.nav-menu-nest {
+  display: inline-flex;
+  background: var(--colour-background-base, #ffffff);
+  border-radius: 32px;
+}
+
+/* Desktop layout */
+.nav-menu-nest.breakpoint-desktop {
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.nav-menu-nest.breakpoint-desktop .menu-columns {
+  display: flex;
+  flex-direction: row;
+  gap: 32px;
+  padding: 24px 0 32px 40px;
+}
+
+.nav-menu-nest.breakpoint-desktop .menu-sidebar {
+  display: flex;
+  flex-direction: column;
+  padding: 24px 40px 32px 32px;
+}
+
+/* Slotted content in sidebar - match column spacing */
+.nav-menu-nest.breakpoint-desktop .menu-sidebar ::slotted(af-nav-menu) {
+  padding-top: 16px;
+}
+
+.nav-menu-nest.breakpoint-desktop .menu-sidebar ::slotted(af-nav-card) {
+  margin-top: 16px;
+}
+
+/* Slotted NavMenu in columns - add border and spacing */
+.nav-menu-nest.breakpoint-desktop .menu-columns ::slotted(af-nav-menu) {
+  border-right: 1px solid var(--colour-background-border-subtle, #e8eeed);
+  padding-right: 32px;
+  padding-top: 16px;
+}
+
+/* Last NavMenu in columns - no border by default */
+.nav-menu-nest.breakpoint-desktop .menu-columns ::slotted(af-nav-menu:last-of-type) {
+  border-right: none;
+  padding-right: 0;
+}
+
+/* When showSidebarBorder is true, last column gets heavier border */
+:host([show-sidebar-border]) .nav-menu-nest.breakpoint-desktop .menu-columns ::slotted(af-nav-menu:last-of-type) {
+  border-right: 1px solid var(--colour-background-border-heavy, #c6d5d1);
+  padding-right: 32px;
+}
+
+/* Mobile layout */
+.nav-menu-nest.breakpoint-mobile {
+  flex-direction: column;
+  border-radius: 0;
+}
+
+.nav-menu-nest.breakpoint-mobile .menu-columns {
+  display: flex;
+  flex-direction: column;
+}
+
+.nav-menu-nest.breakpoint-mobile .menu-sidebar {
+  display: flex;
+  flex-direction: column;
+  padding: 32px 12px;
+  border-top: 1px solid var(--colour-background-border-subtle, #e8eeed);
+}
+
+.nav-menu-nest.breakpoint-mobile .menu-columns ::slotted(af-nav-menu) {
+  border-right: none;
+  border-bottom: 1px solid var(--colour-background-border-subtle, #e8eeed);
+}

package/dist/collection/components/af-nav-menu-nest/af-nav-menu-nest.js

@@ -0,0 +1,129 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A mega-menu dropdown panel component.
+ * Acts as a container for NavMenu columns and optionally a sidebar.
+ * Used as the dropdown content for navbar items.
+ *
+ * **Slots:**
+ * - default: Place NavMenu components here - they will be displayed as columns
+ * - sidebar: Optional sidebar content (NavMenu, NavCard, or any content)
+ *
+ * **Example:**
+ * ```html
+ * <af-nav-menu-nest type="solutions" breakpoint="desktop">
+ *   <af-nav-menu heading="Industries">...</af-nav-menu>
+ *   <af-nav-menu heading="Use Cases">...</af-nav-menu>
+ *   <af-nav-menu heading="Documents">...</af-nav-menu>
+ *   <af-nav-menu slot="sidebar" heading="Resume Parser">...</af-nav-menu>
+ * </af-nav-menu-nest>
+ * ```
+ */
+export class AfNavMenuNest {
+    constructor() {
+        /**
+         * The type/variant of the mega-menu
+         * - 'solutions': Multi-column layout (3 columns + sidebar)
+         * - 'solutions-alt': Alternative solutions layout
+         * - 'resources': Multi-column layout with optional featured card
+         * - 'pricing': Simpler layout without sidebar
+         */
+        this.type = 'solutions';
+        /**
+         * Breakpoint variant for responsive styling
+         * - 'desktop': Horizontal multi-column layout
+         * - 'mobile': Vertical stacked layout
+         */
+        this.breakpoint = 'desktop';
+        /**
+         * Whether to show the heavier border on the last column (before sidebar).
+         * Set to `true` when sidebar has content, `false` when no sidebar.
+         * When `false`, the last column has no border.
+         */
+        this.showSidebarBorder = true;
+    }
+    render() {
+        const classes = {
+            'nav-menu-nest': true,
+            [`type-${this.type}`]: true,
+            [`breakpoint-${this.breakpoint}`]: true
+        };
+        return (h(Host, { key: '238b95cdf9c910302351b6dc07fb8c4dff386168' }, h("div", { key: '7cc941c220c635d6d22520d792122eaad98864ca', class: classes }, h("div", { key: 'b5437b4a10a1bc01ff23117e56928a96ed8e1f9e', class: "menu-columns" }, h("slot", { key: 'ab9d8520730622ee52c8d8d095d6bd5ef0b10419' })), h("div", { key: '1a859f0c957850a52fc4c24873bc4960ad8a96f3', class: "menu-sidebar" }, h("slot", { key: 'ca7ed122f10996d06bce10c6d80281283ef12a62', name: "sidebar" })))));
+    }
+    static get is() { return "af-nav-menu-nest"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-nav-menu-nest.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-nav-menu-nest.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'solutions' | 'solutions-alt' | 'resources' | 'pricing'",
+                    "resolved": "\"pricing\" | \"resources\" | \"solutions\" | \"solutions-alt\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type/variant of the mega-menu\n- 'solutions': Multi-column layout (3 columns + sidebar)\n- 'solutions-alt': Alternative solutions layout\n- 'resources': Multi-column layout with optional featured card\n- 'pricing': Simpler layout without sidebar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'solutions'"
+            },
+            "breakpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'desktop' | 'mobile'",
+                    "resolved": "\"desktop\" | \"mobile\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Breakpoint variant for responsive styling\n- 'desktop': Horizontal multi-column layout\n- 'mobile': Vertical stacked layout"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "breakpoint",
+                "defaultValue": "'desktop'"
+            },
+            "showSidebarBorder": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the heavier border on the last column (before sidebar).\nSet to `true` when sidebar has content, `false` when no sidebar.\nWhen `false`, the last column has no border."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-sidebar-border",
+                "defaultValue": "true"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-nav-menu-nest.js.map

package/dist/collection/components/af-nav-menu-nest/af-nav-menu-nest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-nav-menu-nest.js","sourceRoot":"","sources":["../../../src/components/af-nav-menu-nest/af-nav-menu-nest.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;;;;;;;;;GAkBG;AAMH,MAAM,OAAO,aAAa;IAL1B;QAME;;;;;;WAMG;QACK,SAAI,GAA4D,WAAW,CAAC;QAEpF;;;;WAIG;QACK,eAAU,GAAyB,SAAS,CAAC;QAErD;;;;WAIG;QACsB,sBAAiB,GAAY,IAAI,CAAC;KAsB5D;IApBC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,eAAe,EAAE,IAAI;YACrB,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YAC3B,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;SACxC,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,OAAO;gBACjB,4DAAK,KAAK,EAAC,cAAc;oBACvB,8DAAa,CACT;gBACN,4DAAK,KAAK,EAAC,cAAc;oBACvB,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * A mega-menu dropdown panel component.\n * Acts as a container for NavMenu columns and optionally a sidebar.\n * Used as the dropdown content for navbar items.\n * \n * **Slots:**\n * - default: Place NavMenu components here - they will be displayed as columns\n * - sidebar: Optional sidebar content (NavMenu, NavCard, or any content)\n * \n * **Example:**\n * ```html\n * <af-nav-menu-nest type=\"solutions\" breakpoint=\"desktop\">\n *   <af-nav-menu heading=\"Industries\">...</af-nav-menu>\n *   <af-nav-menu heading=\"Use Cases\">...</af-nav-menu>\n *   <af-nav-menu heading=\"Documents\">...</af-nav-menu>\n *   <af-nav-menu slot=\"sidebar\" heading=\"Resume Parser\">...</af-nav-menu>\n * </af-nav-menu-nest>\n * ```\n */\n@Component({\n  tag: 'af-nav-menu-nest',\n  styleUrl: 'af-nav-menu-nest.css',\n  shadow: true\n})\nexport class AfNavMenuNest {\n  /**\n   * The type/variant of the mega-menu\n   * - 'solutions': Multi-column layout (3 columns + sidebar)\n   * - 'solutions-alt': Alternative solutions layout\n   * - 'resources': Multi-column layout with optional featured card\n   * - 'pricing': Simpler layout without sidebar\n   */\n  @Prop() type: 'solutions' | 'solutions-alt' | 'resources' | 'pricing' = 'solutions';\n\n  /**\n   * Breakpoint variant for responsive styling\n   * - 'desktop': Horizontal multi-column layout\n   * - 'mobile': Vertical stacked layout\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Whether to show the heavier border on the last column (before sidebar).\n   * Set to `true` when sidebar has content, `false` when no sidebar.\n   * When `false`, the last column has no border.\n   */\n  @Prop({ reflect: true }) showSidebarBorder: boolean = true;\n\n  render() {\n    const classes = {\n      'nav-menu-nest': true,\n      [`type-${this.type}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"menu-columns\">\n            <slot></slot>\n          </div>\n          <div class=\"menu-sidebar\">\n            <slot name=\"sidebar\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-navbar/af-navbar.css

@@ -1,17 +1,39 @@
 :host {
   display: block;
   width: 100%;
-  position: absolute;
+}
+
+/* Spacer element that sits in normal document flow to prevent content overlap */
+.navbar-spacer {
+  height: 100px; /* Accounts for navbar height + top margin */
+}
+
+/* Theme variants for spacer background - matches section themes */
+.navbar-spacer.theme-white {
+  background-color: var(--colour-brand-white, #FFFFFF);
+}
+
+.navbar-spacer.theme-inkwell {
+  background-color: var(--colour-brand-inkwell, #14343B);
+}
+
+.navbar-spacer.theme-mist-green {
+  background-color: var(--colour-brand-mist-green, #C6D5D1);
+}
+
+.navbar-spacer.theme-soft-clay {
+  background-color: var(--colour-softclay-400, #c0ab8d);
+}
+
+/* Sticky navbar that floats above the spacer */
+.navbar-container {
+  position: fixed;
   top: 32px;
   left: 0;
   right: 0;
   z-index: 10;
-}
-
-.navbar-container {
   padding: 0 80px;
   box-sizing: border-box;
-  position: relative;
 }
 
 .navbar {
@@ -66,7 +88,6 @@
   display: flex;
   align-items: center;
   gap: 20px;
-  flex-shrink: 0;
 }
 
 .nav-actions {
@@ -80,6 +101,42 @@
   align-items: center;
 }
 
+/* Dropdown container */
+.dropdown-container {
+  position: absolute;
+  top: 108px;
+  left: 0;
+  right: 0;
+  padding: 0 80px;
+  pointer-events: none;
+  opacity: 0;
+  transform: translateY(-8px);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.dropdown-container.is-open {
+  pointer-events: auto;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.dropdown-panel {
+  background: var(--colour-background-base, #ffffff);
+  border-radius: 32px;
+  overflow: hidden;
+  box-shadow: 0 4px 24px rgba(20, 52, 59, 0.12);
+}
+
+/* Hide empty dropdown slots */
+.dropdown-panel:empty {
+  display: none;
+}
+
+/* Mobile dropdowns container */
+.mobile-dropdowns {
+  display: none;
+}
+
 /* 
  * Breakpoint 1: Hide "Talk to us" and "Log in" (nav-actions) 
  * This happens first as the viewport gets narrower
@@ -97,8 +154,13 @@
 
 /* Tablet adjustments */
 @media (max-width: 1024px) {
+  .navbar-spacer {
+    height: 88px;
+  }
+
   .navbar-container {
-    padding: 24px 40px 0;
+    top: 24px;
+    padding: 0 40px;
   }
 
   .navbar-left {
@@ -108,6 +170,10 @@
   .nav-links {
     gap: 4px;
   }
+
+  .dropdown-container {
+    padding: 0 40px;
+  }
 }
 
 /* 
@@ -115,8 +181,13 @@
  * Matches affinda.com behavior at 991px
  */
 @media (max-width: 991px) {
+  .navbar-spacer {
+    height: 72px;
+  }
+
   .navbar-container {
-    padding: 16px 16px 0;
+    top: 16px;
+    padding: 0 16px;
   }
 
   .navbar {
@@ -183,4 +254,16 @@
   .nav-button {
     width: 100%;
   }
+
+  /* Hide desktop dropdown on mobile */
+  .dropdown-container {
+    display: none;
+  }
+
+  /* Show mobile dropdowns */
+  .mobile-dropdowns {
+    display: block;
+    padding: 0 16px;
+    margin-top: 8px;
+  }
 }

package/dist/collection/components/af-navbar/af-navbar.js

@@ -2,17 +2,67 @@ import { h, Host } from "@stencil/core";
 /**
  * A full-width navigation bar component that provides the main site navigation.
  * Features a pill-shaped container with logo, navigation links, and action buttons.
- * Includes mobile hamburger menu.
+ * Includes mobile hamburger menu and support for mega-menu dropdowns.
+ *
+ * The logo slot can be used to provide a custom logo. If no logo is provided,
+ * the default Affinda logo will be displayed.
  */
 export class AfNavbar {
     constructor() {
         this.mobileMenuOpen = false;
+        /** The currently open dropdown identifier (null if none open) */
+        this.activeDropdown = null;
+        /** Whether to show the default Affinda logo when no logo slot content is provided */
+        this.showDefaultLogo = true;
         this.toggleMobileMenu = () => {
             this.mobileMenuOpen = !this.mobileMenuOpen;
+            // Close any open dropdown when toggling mobile menu
+            this.activeDropdown = null;
         };
+        /**
+         * Opens a dropdown by its identifier
+         */
+        this.openDropdown = (dropdownId) => {
+            this.activeDropdown = dropdownId;
+        };
+        /**
+         * Closes the currently open dropdown
+         */
+        this.closeDropdown = () => {
+            this.activeDropdown = null;
+        };
+        /**
+         * Toggles a dropdown by its identifier
+         */
+        this.toggleDropdown = (dropdownId) => {
+            if (this.activeDropdown === dropdownId) {
+                this.activeDropdown = null;
+            }
+            else {
+                this.activeDropdown = dropdownId;
+            }
+        };
+    }
+    /**
+     * Handle clicks outside the navbar to close dropdowns
+     */
+    handleDocumentClick(event) {
+        const path = event.composedPath();
+        if (!path.includes(this.el)) {
+            this.closeDropdown();
+        }
+    }
+    /**
+     * Handle escape key to close dropdowns
+     */
+    handleKeyDown(event) {
+        if (event.key === 'Escape') {
+            this.closeDropdown();
+        }
     }
     render() {
-        return (h(Host, { key: '305d9415a3c14b2dc352588171d4677f4be4a1af' }, h("nav", { key: 'c509365f0056b0f26d8e3aea98acda04d29d4387', class: "navbar-container" }, h("div", { key: '722fd37a76e7367f0e7cd22729f711e8164b9d60', class: "navbar" }, h("div", { key: 'e0e8d341394b30f4badf5062b899123d691123a1', class: "navbar-left" }, h("div", { key: '145ab6a0ff46f0e21b429b8e2d881404d1d6c24c', class: "logo" }, h("slot", { key: '447d9abfa74c008afac07d3d0386b26ef292ec23', name: "logo" })), h("button", { key: '1f3e5512ea1ab6ca5b6a3a1455a9ff9fa9a2c8e3', class: "mobile-menu-toggle", onClick: this.toggleMobileMenu, "aria-label": "Toggle navigation menu", "aria-expanded": this.mobileMenuOpen ? 'true' : 'false' }, this.mobileMenuOpen ? (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M18 6L6 18M6 6l12 12", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M3 12h18M3 6h18M3 18h18", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '277226e4c433ad4377810c1e3e894b0d9de11b05', class: `nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("slot", { key: 'f95617e99651d0e2a4fa28a08fbe5452a8f95aa3', name: "start" }))), h("div", { key: 'ad7b9cf31ce290303df0af868e369bc79983fff4', class: `navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("div", { key: '817c73031c45579ec13da6d53bfe1753bcd1e0ef', class: "nav-actions" }, h("slot", { key: 'e18d0c55b346722784640c37bbb5e5fe05fec5c0', name: "end" })), h("div", { key: '296dd2c84f0a59c54741b40a6333cfff5ec7d200', class: "nav-button" }, h("slot", { key: 'd94063758598f14888587d93b5b299f593b2cd31', name: "button" })))))));
+        const hasDropdown = this.activeDropdown !== null;
+        return (h(Host, { key: '56ca144ca11afcaeb86bbdbab52aee47c8a4e8db', class: { 'has-dropdown-open': hasDropdown } }, h("div", { key: '8ccc05b735246db5ca63ee2ad4546dbafda8c949', class: `navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}` }), h("nav", { key: '10d422e2fb0ae5c227522813da2f3f788e144074', class: "navbar-container" }, h("div", { key: 'b7062b1ead44808b1df54776c34833e7d710cc8e', class: "navbar" }, h("div", { key: 'fd88961f3744b8f38a27541d19ba59bd3b50a537', class: "navbar-left" }, h("div", { key: '1747708e1970b53acca93f8f1e902aadf99b094e', class: "logo" }, h("slot", { key: '30cd58a1cb5419f84044b8ff31b5646c916648a9', name: "logo" }, this.showDefaultLogo && h("af-logo", { key: 'df1ae72b0689352b823499e5d01e39166077fcfe' }))), h("button", { key: '93c3d9c6a21cfb056958f81b774b373acd9b3565', class: "mobile-menu-toggle", onClick: this.toggleMobileMenu, "aria-label": "Toggle navigation menu", "aria-expanded": this.mobileMenuOpen ? 'true' : 'false' }, this.mobileMenuOpen ? (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M18 6L6 18M6 6l12 12", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M3 12h18M3 6h18M3 18h18", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '3fd2c86dc4c90818d5c9227f2b8a86af7b4e9759', class: `nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("slot", { key: 'c65a49fc343293508a5112f0aa41aa04c3fc2062', name: "start" }))), h("div", { key: 'c0e23ee412e251b927db5557b30d44ea356db74a', class: `navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("div", { key: 'b770b0a10f9f01c7314464dd1a8925b92190b394', class: "nav-actions" }, h("slot", { key: '597e24b9a726a7b050640f17d13c4082e643ed68', name: "end" })), h("div", { key: '15930743487c7719ea81df36ecbdf349a44faa32', class: "nav-button" }, h("slot", { key: '445dd032e53ab524cee0c55e2183f9062b9f2ee0', name: "button" })))), h("div", { key: '462113ba1fd1465baae3eb06d8a0a6153b3879f7', class: `dropdown-container ${hasDropdown ? 'is-open' : ''}` }, h("div", { key: 'f88a39284ae6bb4596b9d5bb50e300b301714445', class: "dropdown-panel" }, h("slot", { key: '7b0e453d4f87c1e50b0557f72c16a77362825eb5', name: "dropdown-solutions" }), h("slot", { key: 'd4988f12dadfa08037d93adf8199cb82ae87fde3', name: "dropdown-pricing" }), h("slot", { key: 'ac7fee5d8cc9eae53a4ac2974f833869e5df3921', name: "dropdown-resources" }), h("slot", { key: 'c32254e0fa9b96f1d56a03430141c3d5854e5099', name: "dropdown" })))), this.mobileMenuOpen && (h("div", { key: 'a50c1ca35d99949f619960898fcb2e37211f5445', class: "mobile-dropdowns" }, h("slot", { key: '2539233c4536572946776249f40bfaa993939213', name: "mobile-menu" })))));
     }
     static get is() { return "af-navbar"; }
     static get encapsulation() { return "shadow"; }
@@ -26,10 +76,70 @@ export class AfNavbar {
             "$": ["af-navbar.css"]
         };
     }
+    static get properties() {
+        return {
+            "showDefaultLogo": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the default Affinda logo when no logo slot content is provided"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-default-logo",
+                "defaultValue": "true"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'white' | 'inkwell' | 'mist-green' | 'soft-clay'",
+                    "resolved": "\"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme for the spacer background - should match the section below the navbar"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme"
+            }
+        };
+    }
     static get states() {
         return {
-            "mobileMenuOpen": {}
+            "mobileMenuOpen": {},
+            "activeDropdown": {}
         };
     }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=af-navbar.js.map