@affinda/wc 0.0.15 → 0.0.17

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

@@ -17,6 +17,12 @@ export class AfNavItem {
          * - '02': Lighter/more subtle styling
          */
         this.variant = '01';
+        /**
+         * Breakpoint variant for responsive styling
+         * - 'desktop': Desktop-specific styles
+         * - 'mobile': Mobile-specific styles (larger text, different spacing)
+         */
+        this.breakpoint = 'desktop';
         /**
          * Whether this nav item is currently active/selected
          */
@@ -27,6 +33,7 @@ export class AfNavItem {
             'nav-item': true,
             [`hierarchy-${this.hierarchy}`]: true,
             [`variant-${this.variant}`]: true,
+            [`breakpoint-${this.breakpoint}`]: true,
             'active': this.active
         };
         const content = (h("div", { class: classes }, h("slot", { name: "icon-left" }), h("div", { class: "label-container" }, h("slot", null)), h("slot", { name: "icon-right" })));
@@ -89,6 +96,26 @@ export class AfNavItem {
                 "attribute": "variant",
                 "defaultValue": "'01'"
             },
+            "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\n- 'mobile': Mobile-specific styles (larger text, different spacing)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "breakpoint",
+                "defaultValue": "'desktop'"
+            },
             "href": {
                 "type": "string",
                 "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"af-nav-item.js","sourceRoot":"","sources":["../../../src/components/af-nav-item/af-nav-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAMH,MAAM,OAAO,SAAS;IALtB;QAME;;;;WAIG;QACK,cAAS,GAA4B,SAAS,CAAC;QAEvD;;;;WAIG;QACK,YAAO,GAAgB,IAAI,CAAC;QAOpC;;WAEG;QACK,WAAM,GAAY,KAAK,CAAC;KAgCjC;IA9BC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,UAAU,EAAE,IAAI;YAChB,CAAC,aAAa,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE,IAAI;YACrC,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YACjC,QAAQ,EAAE,IAAI,CAAC,MAAM;SACtB,CAAC;QAEF,MAAM,OAAO,GAAG,CACd,WAAK,KAAK,EAAE,OAAO;YACjB,YAAM,IAAI,EAAC,WAAW,GAAQ;YAC9B,WAAK,KAAK,EAAC,iBAAiB;gBAC1B,eAAa,CACT;YACN,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACP,CAAC;QAEF,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,CACL,EAAC,IAAI;gBACH,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,UAAU,IACjC,OAAO,CACN,CACC,CACR,CAAC;QACJ,CAAC;QAED,OAAO,EAAC,IAAI,QAAE,OAAO,CAAQ,CAAC;IAChC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * A generic navigation item component that can be used in navigation bars, menus, and sidebars.\n * Supports multiple hierarchy levels, variants, and states (active, hover).\n */\n@Component({\n  tag: 'af-nav-item',\n  styleUrl: 'af-nav-item.css',\n  shadow: true\n})\nexport class AfNavItem {\n  /**\n   * Visual hierarchy level of the navigation item\n   * - 'primary': Bold, main navigation (larger text, prominent styling)\n   * - 'secondary': Lighter, sub-navigation (smaller text, subtle styling)\n   */\n  @Prop() hierarchy: 'primary' | 'secondary' = 'primary';\n\n  /**\n   * Visual variant within the hierarchy level\n   * - '01': Darker/more prominent styling\n   * - '02': Lighter/more subtle styling\n   */\n  @Prop() variant: '01' | '02' = '01';\n\n  /**\n   * URL to navigate to when clicked\n   */\n  @Prop() href?: string;\n\n  /**\n   * Whether this nav item is currently active/selected\n   */\n  @Prop() active: boolean = false;\n\n  render() {\n    const classes = {\n      'nav-item': true,\n      [`hierarchy-${this.hierarchy}`]: true,\n      [`variant-${this.variant}`]: true,\n      'active': this.active\n    };\n\n    const content = (\n      <div class={classes}>\n        <slot name=\"icon-left\"></slot>\n        <div class=\"label-container\">\n          <slot></slot>\n        </div>\n        <slot name=\"icon-right\"></slot>\n      </div>\n    );\n\n    if (this.href) {\n      return (\n        <Host>\n          <a href={this.href} class=\"nav-link\">\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return <Host>{content}</Host>;\n  }\n}\n"]}
+{"version":3,"file":"af-nav-item.js","sourceRoot":"","sources":["../../../src/components/af-nav-item/af-nav-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;GAGG;AAMH,MAAM,OAAO,SAAS;IALtB;QAME;;;;WAIG;QACK,cAAS,GAA4B,SAAS,CAAC;QAEvD;;;;WAIG;QACK,YAAO,GAAgB,IAAI,CAAC;QAEpC;;;;WAIG;QACK,eAAU,GAAyB,SAAS,CAAC;QAOrD;;WAEG;QACK,WAAM,GAAY,KAAK,CAAC;KAiCjC;IA/BC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,UAAU,EAAE,IAAI;YAChB,CAAC,aAAa,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE,IAAI;YACrC,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YACjC,CAAC,cAAc,IAAI,CAAC,UAAU,EAAE,CAAC,EAAE,IAAI;YACvC,QAAQ,EAAE,IAAI,CAAC,MAAM;SACtB,CAAC;QAEF,MAAM,OAAO,GAAG,CACd,WAAK,KAAK,EAAE,OAAO;YACjB,YAAM,IAAI,EAAC,WAAW,GAAQ;YAC9B,WAAK,KAAK,EAAC,iBAAiB;gBAC1B,eAAa,CACT;YACN,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACP,CAAC;QAEF,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,CACL,EAAC,IAAI;gBACH,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,UAAU,IACjC,OAAO,CACN,CACC,CACR,CAAC;QACJ,CAAC;QAED,OAAO,EAAC,IAAI,QAAE,OAAO,CAAQ,CAAC;IAChC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\n/**\n * A generic navigation item component that can be used in navigation bars, menus, and sidebars.\n * Supports multiple hierarchy levels, variants, and states (active, hover).\n */\n@Component({\n  tag: 'af-nav-item',\n  styleUrl: 'af-nav-item.css',\n  shadow: true\n})\nexport class AfNavItem {\n  /**\n   * Visual hierarchy level of the navigation item\n   * - 'primary': Bold, main navigation (larger text, prominent styling)\n   * - 'secondary': Lighter, sub-navigation (smaller text, subtle styling)\n   */\n  @Prop() hierarchy: 'primary' | 'secondary' = 'primary';\n\n  /**\n   * Visual variant within the hierarchy level\n   * - '01': Darker/more prominent styling\n   * - '02': Lighter/more subtle styling\n   */\n  @Prop() variant: '01' | '02' = '01';\n\n  /**\n   * Breakpoint variant for responsive styling\n   * - 'desktop': Desktop-specific styles\n   * - 'mobile': Mobile-specific styles (larger text, different spacing)\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * URL to navigate to when clicked\n   */\n  @Prop() href?: string;\n\n  /**\n   * Whether this nav item is currently active/selected\n   */\n  @Prop() active: boolean = false;\n\n  render() {\n    const classes = {\n      'nav-item': true,\n      [`hierarchy-${this.hierarchy}`]: true,\n      [`variant-${this.variant}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true,\n      'active': this.active\n    };\n\n    const content = (\n      <div class={classes}>\n        <slot name=\"icon-left\"></slot>\n        <div class=\"label-container\">\n          <slot></slot>\n        </div>\n        <slot name=\"icon-right\"></slot>\n      </div>\n    );\n\n    if (this.href) {\n      return (\n        <Host>\n          <a href={this.href} class=\"nav-link\">\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return <Host>{content}</Host>;\n  }\n}\n"]}

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

@@ -0,0 +1,91 @@
+:host {
+  display: block;
+}
+
+.nav-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: flex-start;
+  min-height: 1px;
+  min-width: 1px;
+}
+
+/* Desktop styles */
+.nav-menu.breakpoint-desktop {
+  padding: 0;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+
+/* Border is now controlled by parent NavMenuNest via ::slotted()
+   Use showBorder prop only when NavMenu is used standalone */
+.nav-menu.breakpoint-desktop.has-border {
+  border-right: 1px solid var(--colour-background-border-subtle, #e8eeed);
+  padding-right: 32px;
+  padding-top: 16px;
+}
+
+/* Mobile styles */
+.nav-menu.breakpoint-mobile {
+  padding: 32px 12px;
+  width: 100%;
+  border-bottom: 1px solid var(--colour-background-border-subtle, #e8eeed);
+}
+
+/* Menu header */
+.menu-header {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  width: 100%;
+}
+
+.menu-heading {
+  margin: 0;
+  font-family: var(--typography-headingfont, 'NeuSans', 'Inter', system-ui, sans-serif);
+  font-weight: var(--font-weight-book, 500);
+  font-size: 20px;
+  line-height: 1.2;
+  letter-spacing: -0.4px;
+  color: var(--colour-typography-heading-secondary, #8a7049);
+  flex: 1 0 0;
+  min-height: 1px;
+  min-width: 1px;
+}
+
+/* Mobile heading adjustments */
+.nav-menu.breakpoint-mobile .menu-heading {
+  line-height: 1.1;
+}
+
+/* Menu items container */
+.menu-items {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}
+
+/* Mobile items with left padding */
+.nav-menu.breakpoint-mobile .menu-items {
+  padding-left: 24px;
+}
+
+/* Slot styling for nav-items */
+::slotted(af-nav-item) {
+  width: 100%;
+}
+
+/* Card style variant - adds background and rounded corners */
+.nav-menu.card-style {
+  background: var(--colour-background-level-1, #e8eeed);
+  border-radius: var(--radii-card-level-1, 32px);
+  padding: 40px;
+}
+
+.nav-menu.card-style.breakpoint-desktop {
+  flex: 1 0 0;
+  align-self: stretch;
+}
+

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;
+  }
 }