@affinda/wc 0.0.17 → 0.0.19

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

@@ -2,6 +2,12 @@
   display: inline-block;
 }
 
+/* Mobile breakpoint - full width block display */
+:host([breakpoint="mobile"]) {
+  display: block;
+  width: 100%;
+}
+
 .nav-link {
   text-decoration: none;
   color: inherit;
@@ -36,7 +42,7 @@
   font-size: 16px;
   font-weight: var(--font-weight-book, 500);
   line-height: 20px;
-  color: var(--colour-typography-nav-item-primary, #14343b);
+  color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));
 }
 
 /* Add transparent border to prevent layout shift on hover */
@@ -50,7 +56,7 @@
   font-size: 16px;
   font-weight: var(--font-weight-regular, 400);
   line-height: 20px;
-  color: var(--colour-typography-nav-item-secondary, #2b484f);
+  color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));
 }
 
 /* Hover state for primary variant-01 - show underline */
@@ -60,7 +66,7 @@
 
 /* Active state for primary variant-01 - thicker border */
 .hierarchy-primary.variant-01.active .label-container {
-  border-bottom: 2px solid var(--colour-background-border-active, #8a7049);
+  border-bottom: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));
   /* Adjust margin to prevent shift from 1px to 2px border */
   margin-bottom: -1px;
 }
@@ -95,7 +101,7 @@
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
-  color: var(--colour-typography-body-dark, #14343b);
+  color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));
 }
 
 /* Secondary variant 02 - regular weight */
@@ -104,7 +110,7 @@
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;
-  color: var(--colour-typography-body-default, #2b484f);
+  color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));
 }
 
 /* Hover state for secondary - underline text */
@@ -114,7 +120,7 @@
 
 /* Focus states for accessibility */
 .nav-item:focus-within {
-  outline: 2px solid var(--colour-background-border-active, #8a7049);
+  outline: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));
   outline-offset: 2px;
   border-radius: 4px;
 }
@@ -126,7 +132,7 @@
 
 .nav-link:focus-visible + .nav-item,
 :host(:focus-visible) .nav-item {
-  outline: 2px solid var(--colour-background-border-active, #8a7049);
+  outline: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));
   outline-offset: 2px;
   border-radius: 4px;
 }
@@ -134,7 +140,7 @@
 /* Mobile breakpoint styles - explicit via prop */
 .hierarchy-primary.breakpoint-mobile {
   padding: 20px 12px;
-  border-bottom: 1px solid var(--colour-background-border-subtle, #e8eeed);
+  border-bottom: 1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));
   width: 100%;
   justify-content: flex-start;
 }
@@ -154,7 +160,7 @@
   font-size: 20px;
   line-height: 1.1;
   letter-spacing: -0.4px;
-  color: var(--colour-typography-body-subtle, #60767b);
+  color: var(--af-nav-item-subtle, var(--af-typography-body-subtle, #60767b));
 }
 
 /* Mobile breakpoint for secondary hierarchy */
@@ -196,12 +202,12 @@
 /* Icon color inheritance for primary hierarchy */
 .hierarchy-primary.variant-01 ::slotted([slot="icon-left"]),
 .hierarchy-primary.variant-01 ::slotted([slot="icon-right"]) {
-  color: var(--colour-typography-nav-item-primary, #14343b);
+  color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));
 }
 
 .hierarchy-primary.variant-02 ::slotted([slot="icon-left"]),
 .hierarchy-primary.variant-02 ::slotted([slot="icon-right"]) {
-  color: var(--colour-typography-nav-item-secondary, #2b484f);
+  color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));
 }
 
 /* Icon rotation on hover for desktop primary with dropdown indicator */
@@ -223,11 +229,11 @@
 
 /* Icon color inheritance for secondary hierarchy */
 .hierarchy-secondary.variant-01 ::slotted([slot="icon-right"]) {
-  color: var(--colour-typography-body-dark, #14343b);
+  color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));
 }
 
 .hierarchy-secondary.variant-02 ::slotted([slot="icon-right"]) {
-  color: var(--colour-typography-body-default, #2b484f);
+  color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));
 }
 
 /* Fallback media query for when breakpoint prop is not set */
@@ -235,7 +241,7 @@
   :host([breakpoint="auto"]) .hierarchy-primary,
   :host(:not([breakpoint])) .hierarchy-primary {
     padding: 20px 12px;
-    border-bottom: 1px solid var(--colour-background-border-subtle, #e8eeed);
+    border-bottom: 1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));
     width: 100%;
   }
 
@@ -257,7 +263,7 @@
     font-size: 20px;
     line-height: 1.1;
     letter-spacing: -0.4px;
-    color: var(--colour-typography-body-subtle, #60767b);
+    color: var(--af-nav-item-subtle, var(--af-typography-body-subtle, #60767b));
   }
 
   /* Icon rotation on active for auto/responsive breakpoint */

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

@@ -43,7 +43,7 @@ export class AfNavItem {
         return h(Host, null, content);
     }
     static get is() { return "af-nav-item"; }
-    static get encapsulation() { return "shadow"; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["af-nav-item.css"]
@@ -112,7 +112,7 @@ export class AfNavItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "breakpoint",
                 "defaultValue": "'desktop'"
             },

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;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"]}
+{"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;AAOH,MAAM,OAAO,SAAS;IANtB;QAOE;;;;WAIG;QACK,cAAS,GAA4B,SAAS,CAAC;QAEvD;;;;WAIG;QACK,YAAO,GAAgB,IAAI,CAAC;QAEpC;;;;WAIG;QACsB,eAAU,GAAyB,SAAS,CAAC;QAOtE;;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: false,\n  scoped: 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({ reflect: true }) 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

@@ -21,7 +21,7 @@
 /* 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);
+  border-right: 1px solid var(--af-background-border-subtle, #e8eeed);
   padding-right: 32px;
   padding-top: 16px;
 }
@@ -30,7 +30,7 @@
 .nav-menu.breakpoint-mobile {
   padding: 32px 12px;
   width: 100%;
-  border-bottom: 1px solid var(--colour-background-border-subtle, #e8eeed);
+  border-bottom: 1px solid var(--af-background-border-subtle, #e8eeed);
 }
 
 /* Menu header */
@@ -48,7 +48,7 @@
   font-size: 20px;
   line-height: 1.2;
   letter-spacing: -0.4px;
-  color: var(--colour-typography-heading-secondary, #8a7049);
+  color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));
   flex: 1 0 0;
   min-height: 1px;
   min-width: 1px;
@@ -79,7 +79,7 @@
 
 /* Card style variant - adds background and rounded corners */
 .nav-menu.card-style {
-  background: var(--colour-background-level-1, #e8eeed);
+  background: var(--af-background-level-1, #e8eeed);
   border-radius: var(--radii-card-level-1, 32px);
   padding: 40px;
 }

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

@@ -30,10 +30,10 @@ export class AfNavMenu {
             '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' })))));
+        return (h(Host, { key: '69414bf6a279bc971298e6f34a1b5c10ff499e93' }, h("div", { key: '5e800df5526d2b1c9de99c07bbbaae59c9b91594', class: classes }, this.heading && (h("div", { key: '13aee43c9f59c1a093eee10a191ff4571421a16f', class: "menu-header" }, h("h3", { key: '343ddced9ae2bd41b643e548ebf82d6601197e8b', class: "menu-heading" }, this.heading))), h("div", { key: '9827130b9385f200d8a6b85f89ff0a3722acb1ee', class: "menu-items" }, h("slot", { key: 'ba0e065fba624bd7d850f7e99fd88f572b008d3d' })))));
     }
     static get is() { return "af-nav-menu"; }
-    static get encapsulation() { return "shadow"; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["af-nav-menu.css"]

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

@@ -1 +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"]}
+{"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;AAOH,MAAM,OAAO,SAAS;IANtB;QAYE;;;;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: false,\n  scoped: 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

@@ -4,7 +4,7 @@
 
 .nav-menu-nest {
   display: inline-flex;
-  background: var(--colour-background-base, #ffffff);
+  background: var(--af-background-base, #ffffff);
   border-radius: 32px;
 }
 
@@ -38,7 +38,7 @@
 
 /* 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);
+  border-right: 1px solid var(--af-background-border-subtle, #e8eeed);
   padding-right: 32px;
   padding-top: 16px;
 }
@@ -51,7 +51,7 @@
 
 /* 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);
+  border-right: 1px solid var(--af-background-border-heavy, #c6d5d1);
   padding-right: 32px;
 }
 
@@ -70,10 +70,10 @@
   display: flex;
   flex-direction: column;
   padding: 32px 12px;
-  border-top: 1px solid var(--colour-background-border-subtle, #e8eeed);
+  border-top: 1px solid var(--af-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);
+  border-bottom: 1px solid var(--af-background-border-subtle, #e8eeed);
 }

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

@@ -44,13 +44,14 @@ export class AfNavMenuNest {
     render() {
         const classes = {
             'nav-menu-nest': true,
+            'theme-white': 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" })))));
+        return (h(Host, { key: '3b620840709c0494cc1bb11c1881824550b18611' }, h("div", { key: '7291119d7c8cebea30375f4c301885290413b4b4', class: classes }, h("div", { key: '270b6882e07b3b44bb3b4a0cd9c6b7b063faffa4', class: "menu-columns" }, h("slot", { key: 'f82540660813779579dfc1ba76bbc0e892cfae15' })), h("div", { key: 'e27257bae1cc4bd458c5f19a29d4bbaee41f5a5a', class: "menu-sidebar" }, h("slot", { key: '23e7fe51b7c1094edf89faca812e29bd74044381', name: "sidebar" })))));
     }
     static get is() { return "af-nav-menu-nest"; }
-    static get encapsulation() { return "shadow"; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["af-nav-menu-nest.css"]

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

@@ -1 +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"]}
+{"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;AAOH,MAAM,OAAO,aAAa;IAN1B;QAOE;;;;;;WAMG;QACK,SAAI,GAA4D,WAAW,CAAC;QAEpF;;;;WAIG;QACK,eAAU,GAAyB,SAAS,CAAC;QAErD;;;;WAIG;QACsB,sBAAiB,GAAY,IAAI,CAAC;KAuB5D;IArBC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,eAAe,EAAE,IAAI;YACrB,aAAa,EAAE,IAAI;YACnB,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: false,\n  scoped: 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      'theme-white': 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

@@ -132,9 +132,49 @@
   display: none;
 }
 
-/* Mobile dropdowns container */
-.mobile-dropdowns {
+/* Mobile menu panel - separate from navbar for proper positioning */
+.mobile-menu-panel {
   display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--colour-background-base, #ffffff);
+  z-index: 9;
+  padding: 100px 16px 24px 16px;
+  overflow-y: auto;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+}
+
+.mobile-menu-panel.is-open {
+  display: block;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Mobile CTA button container */
+.mobile-button-container {
+  margin-bottom: 8px;
+}
+
+.mobile-button-container ::slotted(*) {
+  width: 100%;
+}
+
+/* Mobile menu content - flex column ensures items stack vertically */
+.mobile-menu-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* Force slotted items to take full width for composability */
+.mobile-menu-content ::slotted(*) {
+  flex: 0 0 auto;
+  width: 100%;
 }
 
 /* 
@@ -188,82 +228,160 @@
   .navbar-container {
     top: 16px;
     padding: 0 16px;
+    z-index: 11; /* Above mobile menu panel */
   }
 
   .navbar {
-    padding: 8px 16px;
-    flex-direction: column;
-    border-radius: 16px;
+    padding: 8px 8px 8px 24px; /* Figma: 8px padding right, 24px left on mobile */
+    flex-direction: row;
+    border-radius: 9999px; /* Keep pill shape on mobile */
     gap: 0;
-    flex-wrap: wrap; /* Allow wrapping in mobile menu */
   }
 
   .navbar-left {
-    width: 100%;
+    width: auto;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: flex-start;
     align-items: center;
     gap: 16px;
+    flex: 1;
   }
 
   /* Show hamburger button on mobile */
   .mobile-menu-toggle {
     display: flex;
+    padding: 12px;
+    margin-left: auto;
+    border-radius: 9999px;
+    border: 1px solid var(--colour-brand-inkwell, #14343b);
+  }
+
+  .mobile-menu-toggle:hover {
+    background: rgba(20, 52, 59, 0.05);
   }
 
-  /* Hide nav links by default on mobile */
+  /* Hide nav links on mobile - they're in the mobile menu panel */
   .nav-links {
     display: none;
-    width: 100%;
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0;
-    margin-top: 16px;
-    flex-wrap: wrap;
   }
 
-  /* Show nav links when menu is open */
-  .nav-links.mobile-open {
-    display: flex;
+  /* Hide right section on mobile - button is in mobile menu panel */
+  .navbar-right {
+    display: none;
   }
 
-  /* Hide right section by default on mobile */
-  .navbar-right {
+  /* Hide desktop dropdown on mobile */
+  .dropdown-container {
     display: none;
-    width: 100%;
-    flex-direction: column;
-    gap: 12px;
-    align-items: stretch;
-    margin-top: 16px;
   }
 
-  /* Show right section when menu is open */
-  .navbar-right.mobile-open {
-    display: flex;
+  /* Mobile menu panel adjustments */
+  .mobile-menu-panel {
+    padding-top: 88px; /* Accounts for navbar height */
   }
 
-  /* Show nav-actions again in mobile menu */
-  .nav-actions {
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0;
+  .mobile-button-container {
+    padding: 0 12px;
+    margin-bottom: 8px;
   }
 
-  .nav-button {
+  .mobile-button-container ::slotted(af-button),
+  .mobile-button-container ::slotted(button) {
     width: 100%;
+    display: flex;
+    justify-content: center;
   }
+}
 
-  /* Hide desktop dropdown on mobile */
-  .dropdown-container {
-    display: none;
-  }
+/* ==========================================================================
+   Force Mobile Mode
+   Apply mobile styles regardless of viewport when force-mobile attribute is set
+   ========================================================================== */
 
-  /* Show mobile dropdowns */
-  .mobile-dropdowns {
-    display: block;
-    padding: 0 16px;
-    margin-top: 8px;
-  }
+:host([force-mobile]) .navbar-spacer {
+  height: 72px;
+}
+
+:host([force-mobile]) .navbar-container {
+  top: 16px;
+  padding: 0 16px;
+  z-index: 11;
+}
+
+:host([force-mobile]) .navbar {
+  padding: 8px 8px 8px 24px;
+  flex-direction: row;
+  border-radius: 9999px;
+  gap: 0;
+}
+
+:host([force-mobile]) .navbar-left {
+  width: auto;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 16px;
+  flex: 1;
+}
+
+:host([force-mobile]) .mobile-menu-toggle {
+  display: flex;
+  padding: 12px;
+  margin-left: auto;
+  border-radius: 9999px;
+  border: 1px solid var(--colour-brand-inkwell, #14343b);
+}
+
+:host([force-mobile]) .mobile-menu-toggle:hover {
+  background: rgba(20, 52, 59, 0.05);
+}
+
+:host([force-mobile]) .nav-links {
+  display: none;
+}
+
+:host([force-mobile]) .navbar-right {
+  display: none;
+}
+
+:host([force-mobile]) .nav-actions {
+  display: none;
+}
+
+:host([force-mobile]) .dropdown-container {
+  display: none;
+}
+
+:host([force-mobile]) .mobile-menu-panel {
+  padding-top: 88px;
+}
+
+:host([force-mobile]) .mobile-menu-panel.is-open {
+  display: block;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+:host([force-mobile]) .mobile-button-container {
+  padding: 0 12px;
+  margin-bottom: 8px;
+}
+
+:host([force-mobile]) .mobile-button-container ::slotted(af-button),
+:host([force-mobile]) .mobile-button-container ::slotted(button) {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+/* Force mobile: flex column ensures items stack vertically */
+:host([force-mobile]) .mobile-menu-content {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Force mobile: slotted items take full width for composability */
+:host([force-mobile]) .mobile-menu-content ::slotted(*) {
+  flex: 0 0 auto;
+  width: 100%;
 }

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

@@ -6,6 +6,18 @@ import { h, Host } from "@stencil/core";
  *
  * The logo slot can be used to provide a custom logo. If no logo is provided,
  * the default Affinda logo will be displayed.
+ *
+ * **Slots:**
+ * - `logo` - Logo area (defaults to Affinda logo if empty)
+ * - `start` - Primary navigation links (left side, desktop)
+ * - `end` - Secondary/utility links (right side)
+ * - `button` - Call-to-action button
+ * - `dropdown-solutions` - Mega-menu for Solutions dropdown
+ * - `dropdown-pricing` - Mega-menu for Pricing dropdown
+ * - `dropdown-resources` - Mega-menu for Resources dropdown
+ * - `dropdown` - Generic dropdown slot
+ * - `mobile-menu` - Mobile menu content (use af-nav-accordion for accordion menus)
+ * - `mobile-button` - CTA button for mobile menu (appears at top)
  */
 export class AfNavbar {
     constructor() {
@@ -14,6 +26,8 @@ export class AfNavbar {
         this.activeDropdown = null;
         /** Whether to show the default Affinda logo when no logo slot content is provided */
         this.showDefaultLogo = true;
+        /** Force mobile layout regardless of viewport size (useful for testing/stories) */
+        this.forceMobile = false;
         this.toggleMobileMenu = () => {
             this.mobileMenuOpen = !this.mobileMenuOpen;
             // Close any open dropdown when toggling mobile menu
@@ -62,10 +76,10 @@ export class AfNavbar {
     }
     render() {
         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" })))));
+        return (h(Host, { key: '92f8f346f85a3dc591a97bde173442b963b37e5c', class: { 'has-dropdown-open': hasDropdown } }, h("div", { key: '059a556fb84aadf47f5e5cc78adf39314f35e7cd', class: `navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}` }), h("nav", { key: 'a724927e2b4e571efcc90baf2bc95047ee9e9e5b', class: "navbar-container" }, h("div", { key: '8459055c4d73dd08cf9e411e39b6a5efd281db33', class: "navbar theme-white" }, h("div", { key: '1672a840e29672b08bdd097decc5d3704f680b53', class: "navbar-left" }, h("div", { key: '6a7dd0e111b1afb93815d92c7ea401c6041b786e', class: "logo" }, h("slot", { key: '49706feeb1ffcf21bccb033baf717e29ed0f6809', name: "logo" }, this.showDefaultLogo && h("af-logo", { key: 'c4894daec4529effc143cd015dc298e3fe68bde6' }))), h("button", { key: '5cc3605bfd31104a8357a270b71bae0d539d459c', 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: '37cb78db1c5385f069988d2236aca7c916d24ebe', class: `nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("slot", { key: '446e40b871d0e9c689405b234d15e5a9043058bf', name: "start" }))), h("div", { key: '1112576571e29edaa6e6c33f083b1a058fdaef64', class: `navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("div", { key: '036a55766ab0e4bbc566b6cfbe6513ea0656ccb3', class: "nav-actions" }, h("slot", { key: '01b2df1708553d51475941e109c8f23652d7e0ff', name: "end" })), h("div", { key: '4429b2e026ec6b730d8c17cf9f716ad5a6a3c050', class: "nav-button" }, h("slot", { key: '0a290b167e6d32441770df9d4f6b3e6104552b77', name: "button" })))), h("div", { key: '08c1695708ddf0ef0a1a18bfbd1c45d66ef1bf4f', class: `dropdown-container ${hasDropdown ? 'is-open' : ''}` }, h("div", { key: 'b54b6dbd58888e9a844b615337ba7ee62bca00c0', class: "dropdown-panel theme-white" }, h("slot", { key: '0f72aff472972bf323e1891518d99eb5d92d2916', name: "dropdown-solutions" }), h("slot", { key: '1f7bf6bb90b334d19737e011e759787105a91fa5', name: "dropdown-pricing" }), h("slot", { key: '52272d982908c702c3447d9b2b7bddcf2cc030df', name: "dropdown-resources" }), h("slot", { key: 'ba1ea577efa7b2a9af9b8a50253eae8eef661bd7', name: "dropdown" })))), h("div", { key: '21f14e04f0c351733f7452dc1c10b6abfb26e1ce', class: `mobile-menu-panel theme-white ${this.mobileMenuOpen ? 'is-open' : ''}` }, h("div", { key: '22565f6b52971a5fe4235c8f9e2fce4ee5a2d006', class: "mobile-button-container" }, h("slot", { key: '2b01297d62d6cca6a58b128701a5a14a02d91e2d', name: "mobile-button" }, h("slot", { key: 'd755113cabd174a46acd6d2d5b65d9454964b759', name: "button" }))), h("div", { key: '31f63fa53ae2c12b5f0f19e7b2235d94f09f50cb', class: "mobile-menu-content" }, h("slot", { key: '748e5a320fb5b5940f1134e332738dccf015748e', name: "mobile-menu" })))));
     }
     static get is() { return "af-navbar"; }
-    static get encapsulation() { return "shadow"; }
+    static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "$": ["af-navbar.css"]
@@ -116,6 +130,26 @@ export class AfNavbar {
                 "setter": false,
                 "reflect": false,
                 "attribute": "theme"
+            },
+            "forceMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Force mobile layout regardless of viewport size (useful for testing/stories)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "force-mobile",
+                "defaultValue": "false"
             }
         };
     }