@affinda/wc 0.0.19 → 0.0.21

package/dist/components/p-hOnulRmz.js

@@ -1,84 +0,0 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
-
-const afTypographyLockupCss = ":host{display:block}.lockup{display:flex;flex-direction:column}.breakpoint-desktop.heading-1.lockup{gap:var(--space-6, 24px)}.breakpoint-mobile.heading-1.lockup{gap:var(--space-5, 20px)}.breakpoint-desktop.heading-2.lockup,.breakpoint-desktop.heading-3.lockup{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-2.lockup{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-3.lockup,.breakpoint-desktop.heading-4.lockup,.breakpoint-desktop.heading-5.lockup{gap:var(--space-3, 12px)}.breakpoint-mobile.heading-4.lockup,.breakpoint-mobile.heading-5.lockup{gap:var(--space-2, 8px)}.text-left{align-items:flex-start}.text-center{align-items:center}.text-right{align-items:flex-end}.text-justify{align-items:stretch}.align-left{text-align:left;--af-text-align:left}.align-center{text-align:center;--af-text-align:center}.align-right{text-align:right;--af-text-align:right}.align-justify{text-align:justify;--af-text-align:justify}.copy{display:flex;flex-direction:column;width:100%;max-width:840px}.breakpoint-desktop.heading-1 .copy{gap:var(--space-6, 24px)}.breakpoint-mobile.heading-1 .copy{gap:var(--space-5, 20px)}.breakpoint-desktop.heading-2 .copy,.breakpoint-desktop.heading-3 .copy{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-2 .copy{gap:var(--space-4, 16px)}.breakpoint-mobile.heading-3 .copy,.breakpoint-desktop.heading-4 .copy,.breakpoint-desktop.heading-5 .copy{gap:var(--space-3, 12px)}.breakpoint-mobile.heading-4 .copy,.breakpoint-mobile.heading-5 .copy{gap:var(--space-2, 8px)}.heading{font-family:var(--typography-headingfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);color:var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));line-height:var(--line-height-heading-tight, 1);letter-spacing:var(--letter-spacing-heading, -0.02em);white-space:pre-wrap}.breakpoint-desktop.heading-1 .heading{font-size:var(--font-size-heading-1-desktop, 56px)}.breakpoint-desktop.heading-2 .heading{font-size:var(--font-size-heading-2-desktop, 44px)}.breakpoint-desktop.heading-3 .heading{font-size:var(--font-size-heading-3-desktop, 34px)}.breakpoint-desktop.heading-4 .heading{font-size:var(--font-size-heading-4-desktop, 24px);line-height:var(--line-height-heading-relaxed, 1.2)}.breakpoint-desktop.heading-5 .heading{font-size:var(--font-size-heading-5-desktop, 20px);line-height:var(--line-height-heading-relaxed, 1.2)}.breakpoint-mobile.heading-1 .heading{font-size:var(--font-size-heading-1-mobile, 38px)}.breakpoint-mobile.heading-2 .heading{font-size:var(--font-size-heading-2-mobile, 32px)}.breakpoint-mobile.heading-3 .heading{font-size:var(--font-size-heading-3-mobile, 25px)}.breakpoint-mobile.heading-4 .heading{font-size:var(--font-size-heading-4-mobile, 20px);line-height:var(--line-height-heading-normal, 1.1)}.breakpoint-mobile.heading-5 .heading{font-size:var(--font-size-heading-5-mobile, 18px);line-height:var(--line-height-heading-normal, 1.1)}.description{font-family:var(--typography-bodyfont, 'NeuSans', sans-serif);font-size:var(--font-size-body-large, 18px);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-body-large, 26px);color:var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));white-space:pre-wrap}.breakpoint-mobile.heading-3 .description,.breakpoint-desktop.heading-4 .description,.breakpoint-mobile.heading-4 .description,.breakpoint-desktop.heading-5 .description,.breakpoint-mobile.heading-5 .description{font-size:var(--font-size-body-medium, 16px);line-height:var(--line-height-body-medium, 24px)}.description:empty{display:none}.buttons{display:flex;flex-direction:row;gap:var(--space-3, 12px)}.buttons:empty{display:none}.layout-horizontal .buttons{align-items:center}.text-left.layout-horizontal{flex-direction:row;align-items:center;gap:var(--space-4, 16px)}.text-left.layout-horizontal .copy{flex:1 0 0;max-width:950px}.text-left.layout-horizontal.heading-3 .copy,.text-left.layout-horizontal.heading-4 .copy{max-width:840px}.text-left.layout-horizontal .buttons{flex-shrink:0}.layout-vertical .buttons{align-items:flex-start}.buttons.align-left{justify-content:flex-start}.buttons.align-center{justify-content:center}.buttons.align-right{justify-content:flex-end}.buttons.align-justify{justify-content:space-between}.breakpoint-mobile .buttons{flex-direction:column;align-items:stretch}.breakpoint-mobile .buttons.align-center{align-items:center}.breakpoint-mobile .buttons.align-right{align-items:flex-end}.breakpoint-mobile .buttons.align-left{align-items:flex-start}.text-center .copy{max-width:840px}::slotted(*){margin:0}";
-
-const AfTypographyLockup = /*@__PURE__*/ proxyCustomElement(class AfTypographyLockup extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        /**
-         * The heading size (1-5, where 1 is largest)
-         */
-        this.headingSize = 2;
-        /**
-         * The breakpoint for responsive typography
-         */
-        this.breakpoint = 'desktop';
-        /**
-         * Text alignment for the entire lockup (heading and description).
-         * Can be overridden individually with headingAlignment and descriptionAlignment.
-         */
-        this.textAlignment = 'left';
-        /**
-         * Button layout direction (horizontal or vertical stacking)
-         */
-        this.buttonLayout = 'vertical';
-    }
-    render() {
-        const effectiveHeadingAlignment = this.headingAlignment ?? this.textAlignment;
-        const effectiveDescriptionAlignment = this.descriptionAlignment ?? this.textAlignment;
-        const effectiveButtonsAlignment = this.buttonsAlignment ?? this.textAlignment;
-        const containerClasses = {
-            'lockup': true,
-            [`text-${this.textAlignment}`]: true,
-            [`layout-${this.buttonLayout}`]: true,
-            [`heading-${this.headingSize}`]: true,
-            [`breakpoint-${this.breakpoint}`]: true
-        };
-        const headingClasses = {
-            'heading': true,
-            [`align-${effectiveHeadingAlignment}`]: true
-        };
-        const descriptionClasses = {
-            'description': true,
-            [`align-${effectiveDescriptionAlignment}`]: true
-        };
-        const buttonsClasses = {
-            'buttons': true,
-            [`align-${effectiveButtonsAlignment}`]: true
-        };
-        const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};
-        return (h(Host, { key: '8cb507e162ef7a2bca263b7fecb7ef480382e615' }, h("div", { key: '94106d59d250a47ca21c15f2e8cb5c1bef7a3936', class: containerClasses }, h("div", { key: 'f465704d4f7b1bf77611e32958674a6093813abc', class: "copy", style: copyStyle }, h("div", { key: 'd4bcad644d1194c2ecfa593bf9b6a6f185e4a7c2', class: headingClasses, part: "heading" }, h("slot", { key: '97558da091bfc3b63cf57ec0816eb3b952cb201a' })), h("div", { key: 'c0839f719f0165ecaa296bb0be321a2d8c482e87', class: descriptionClasses, part: "body" }, h("slot", { key: '946a5ff890fb09144fee49687fb9de83f45c7aac', name: "description" }))), h("div", { key: '6f06d69183d006be1031eb1f73164f10811df9b1', class: buttonsClasses, part: "buttons" }, h("slot", { key: '253ba8fada86b55b5516d4dd8732aa19dfeda620', name: "buttons" })))));
-    }
-    static get style() { return afTypographyLockupCss; }
-}, [257, "af-typography-lockup", {
-        "headingSize": [2, "heading-size"],
-        "breakpoint": [1],
-        "textAlignment": [1, "text-alignment"],
-        "headingAlignment": [1, "heading-alignment"],
-        "descriptionAlignment": [1, "description-alignment"],
-        "buttonLayout": [1, "button-layout"],
-        "buttonsAlignment": [1, "buttons-alignment"],
-        "maxWidth": [2, "max-width"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["af-typography-lockup"];
-    components.forEach(tagName => { switch (tagName) {
-        case "af-typography-lockup":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AfTypographyLockup);
-            }
-            break;
-    } });
-}
-
-export { AfTypographyLockup as A, defineCustomElement as d };
-//# sourceMappingURL=p-hOnulRmz.js.map
-
-//# sourceMappingURL=p-hOnulRmz.js.map

package/dist/components/p-hOnulRmz.js.map

@@ -1 +0,0 @@
-{"file":"p-hOnulRmz.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-typography-lockup/af-typography-lockup.css?tag=af-typography-lockup&encapsulation=shadow","src/components/af-typography-lockup/af-typography-lockup.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.lockup {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Lockup gap variations (between copy and buttons) - matches copy internal gap */\n/* Heading 1 desktop: 24px gap */\n.breakpoint-desktop.heading-1.lockup {\n  gap: var(--space-6, 24px);\n}\n\n/* Heading 1 mobile: 20px gap */\n.breakpoint-mobile.heading-1.lockup {\n  gap: var(--space-5, 20px);\n}\n\n/* Heading 2, 3 desktop: 16px gap */\n.breakpoint-desktop.heading-2.lockup,\n.breakpoint-desktop.heading-3.lockup {\n  gap: var(--space-4, 16px);\n}\n\n/* Heading 2 mobile: 16px gap */\n.breakpoint-mobile.heading-2.lockup {\n  gap: var(--space-4, 16px);\n}\n\n/* Heading 3 mobile, 4 desktop, 5 desktop: 12px gap */\n.breakpoint-mobile.heading-3.lockup,\n.breakpoint-desktop.heading-4.lockup,\n.breakpoint-desktop.heading-5.lockup {\n  gap: var(--space-3, 12px);\n}\n\n/* Heading 4 mobile, 5 mobile: 8px gap */\n.breakpoint-mobile.heading-4.lockup,\n.breakpoint-mobile.heading-5.lockup {\n  gap: var(--space-2, 8px);\n}\n\n/* Container alignment (affects flexbox positioning) */\n.text-left {\n  align-items: flex-start;\n}\n\n.text-center {\n  align-items: center;\n}\n\n.text-right {\n  align-items: flex-end;\n}\n\n.text-justify {\n  align-items: stretch;\n}\n\n/* Individual text alignment classes */\n.align-left {\n  text-align: left;\n  --af-text-align: left;\n}\n\n.align-center {\n  text-align: center;\n  --af-text-align: center;\n}\n\n.align-right {\n  text-align: right;\n  --af-text-align: right;\n}\n\n.align-justify {\n  text-align: justify;\n  --af-text-align: justify;\n}\n\n/* Copy section - base styles */\n.copy {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  max-width: 840px;\n}\n\n/* Copy gap variations based on heading size and breakpoint */\n/* Heading 1 desktop: 24px gap */\n.breakpoint-desktop.heading-1 .copy {\n  gap: var(--space-6, 24px);\n}\n\n/* Heading 1 mobile: 20px gap */\n.breakpoint-mobile.heading-1 .copy {\n  gap: var(--space-5, 20px);\n}\n\n/* Heading 2, 3 desktop: 16px gap */\n.breakpoint-desktop.heading-2 .copy,\n.breakpoint-desktop.heading-3 .copy {\n  gap: var(--space-4, 16px);\n}\n\n/* Heading 2 mobile: 16px gap */\n.breakpoint-mobile.heading-2 .copy {\n  gap: var(--space-4, 16px);\n}\n\n/* Heading 3 mobile, 4 desktop, 5 desktop: 12px gap */\n.breakpoint-mobile.heading-3 .copy,\n.breakpoint-desktop.heading-4 .copy,\n.breakpoint-desktop.heading-5 .copy {\n  gap: var(--space-3, 12px);\n}\n\n/* Heading 4 mobile, 5 mobile: 8px gap */\n.breakpoint-mobile.heading-4 .copy,\n.breakpoint-mobile.heading-5 .copy {\n  gap: var(--space-2, 8px);\n}\n\n/* Heading styles */\n.heading {\n  font-family: var(--typography-headingfont, 'NeuSans', sans-serif);\n  font-weight: var(--font-weight-book, 500);\n  color: var(--af-typography-heading-primary, var(--colour-typography-heading-primary, #14343B));\n  line-height: var(--line-height-heading-tight, 1);\n  letter-spacing: var(--letter-spacing-heading, -0.02em);\n  white-space: pre-wrap;\n}\n\n/* Desktop heading sizes */\n.breakpoint-desktop.heading-1 .heading {\n  font-size: var(--font-size-heading-1-desktop, 56px);\n}\n\n.breakpoint-desktop.heading-2 .heading {\n  font-size: var(--font-size-heading-2-desktop, 44px);\n}\n\n.breakpoint-desktop.heading-3 .heading {\n  font-size: var(--font-size-heading-3-desktop, 34px);\n}\n\n.breakpoint-desktop.heading-4 .heading {\n  font-size: var(--font-size-heading-4-desktop, 24px);\n  line-height: var(--line-height-heading-relaxed, 1.2);\n}\n\n.breakpoint-desktop.heading-5 .heading {\n  font-size: var(--font-size-heading-5-desktop, 20px);\n  line-height: var(--line-height-heading-relaxed, 1.2);\n}\n\n/* Mobile heading sizes */\n.breakpoint-mobile.heading-1 .heading {\n  font-size: var(--font-size-heading-1-mobile, 38px);\n}\n\n.breakpoint-mobile.heading-2 .heading {\n  font-size: var(--font-size-heading-2-mobile, 32px);\n}\n\n.breakpoint-mobile.heading-3 .heading {\n  font-size: var(--font-size-heading-3-mobile, 25px);\n}\n\n.breakpoint-mobile.heading-4 .heading {\n  font-size: var(--font-size-heading-4-mobile, 20px);\n  line-height: var(--line-height-heading-normal, 1.1);\n}\n\n.breakpoint-mobile.heading-5 .heading {\n  font-size: var(--font-size-heading-5-mobile, 18px);\n  line-height: var(--line-height-heading-normal, 1.1);\n}\n\n/* Description/body text - default (body/large) */\n.description {\n  font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);\n  font-size: var(--font-size-body-large, 18px);\n  font-weight: var(--font-weight-regular, 400);\n  line-height: var(--line-height-body-large, 26px);\n  color: var(--af-typography-body-default, var(--colour-typography-body-default, #2B484F));\n  white-space: pre-wrap;\n}\n\n/* Description text size variations - smaller for heading 3 mobile, 4, and 5 */\n.breakpoint-mobile.heading-3 .description,\n.breakpoint-desktop.heading-4 .description,\n.breakpoint-mobile.heading-4 .description,\n.breakpoint-desktop.heading-5 .description,\n.breakpoint-mobile.heading-5 .description {\n  font-size: var(--font-size-body-medium, 16px);\n  line-height: var(--line-height-body-medium, 24px);\n}\n\n.description:empty {\n  display: none;\n}\n\n/* Buttons section */\n.buttons {\n  display: flex;\n  flex-direction: row;\n  gap: var(--space-3, 12px);\n}\n\n.buttons:empty {\n  display: none;\n}\n\n/* Button layout - horizontal (inline with copy) */\n.layout-horizontal .buttons {\n  align-items: center;\n}\n\n.text-left.layout-horizontal {\n  flex-direction: row;\n  align-items: center;\n  gap: var(--space-4, 16px);\n}\n\n.text-left.layout-horizontal .copy {\n  flex: 1 0 0;\n  max-width: 950px;\n}\n\n/* Heading 3, 4 horizontal: different max-width */\n.text-left.layout-horizontal.heading-3 .copy,\n.text-left.layout-horizontal.heading-4 .copy {\n  max-width: 840px;\n}\n\n.text-left.layout-horizontal .buttons {\n  flex-shrink: 0;\n}\n\n/* Button layout - vertical (stacked below copy) */\n.layout-vertical .buttons {\n  align-items: flex-start;\n}\n\n/* Button position alignment */\n.buttons.align-left {\n  justify-content: flex-start;\n}\n\n.buttons.align-center {\n  justify-content: center;\n}\n\n.buttons.align-right {\n  justify-content: flex-end;\n}\n\n.buttons.align-justify {\n  justify-content: space-between;\n}\n\n/* Mobile button stacking - buttons stack vertically on mobile */\n.breakpoint-mobile .buttons {\n  flex-direction: column;\n  align-items: stretch;\n}\n\n.breakpoint-mobile .buttons.align-center {\n  align-items: center;\n}\n\n.breakpoint-mobile .buttons.align-right {\n  align-items: flex-end;\n}\n\n.breakpoint-mobile .buttons.align-left {\n  align-items: flex-start;\n}\n\n/* Max width constraints for centered layouts */\n.text-center .copy {\n  max-width: 840px;\n}\n\n/* Slot content styling */\n::slotted(*) {\n  margin: 0;\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n\ntype TextAlign = 'left' | 'center' | 'right' | 'justify';\n\n@Component({\n  tag: 'af-typography-lockup',\n  styleUrl: 'af-typography-lockup.css',\n  shadow: true\n})\nexport class AfTypographyLockup {\n  /**\n   * The heading size (1-5, where 1 is largest)\n   */\n  @Prop() headingSize: 1 | 2 | 3 | 4 | 5 = 2;\n\n  /**\n   * The breakpoint for responsive typography\n   */\n  @Prop() breakpoint: 'desktop' | 'mobile' = 'desktop';\n\n  /**\n   * Text alignment for the entire lockup (heading and description).\n   * Can be overridden individually with headingAlignment and descriptionAlignment.\n   */\n  @Prop() textAlignment: TextAlign = 'left';\n\n  /**\n   * Heading text alignment. Falls back to textAlignment if not specified.\n   */\n  @Prop() headingAlignment?: TextAlign;\n\n  /**\n   * Description text alignment. Falls back to textAlignment if not specified.\n   */\n  @Prop() descriptionAlignment?: TextAlign;\n\n  /**\n   * Button layout direction (horizontal or vertical stacking)\n   */\n  @Prop() buttonLayout: 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Buttons position alignment. Falls back to textAlignment if not specified.\n   */\n  @Prop() buttonsAlignment?: TextAlign;\n\n  /**\n   * Maximum width for the copy section (in pixels)\n   */\n  @Prop() maxWidth?: number;\n\n  render() {\n    const effectiveHeadingAlignment = this.headingAlignment ?? this.textAlignment;\n    const effectiveDescriptionAlignment = this.descriptionAlignment ?? this.textAlignment;\n    const effectiveButtonsAlignment = this.buttonsAlignment ?? this.textAlignment;\n\n    const containerClasses = {\n      'lockup': true,\n      [`text-${this.textAlignment}`]: true,\n      [`layout-${this.buttonLayout}`]: true,\n      [`heading-${this.headingSize}`]: true,\n      [`breakpoint-${this.breakpoint}`]: true\n    };\n\n    const headingClasses = {\n      'heading': true,\n      [`align-${effectiveHeadingAlignment}`]: true\n    };\n\n    const descriptionClasses = {\n      'description': true,\n      [`align-${effectiveDescriptionAlignment}`]: true\n    };\n\n    const buttonsClasses = {\n      'buttons': true,\n      [`align-${effectiveButtonsAlignment}`]: true\n    };\n\n    const copyStyle = this.maxWidth ? { maxWidth: `${this.maxWidth}px` } : {};\n\n    return (\n      <Host>\n        <div class={containerClasses}>\n          <div class=\"copy\" style={copyStyle}>\n            <div class={headingClasses} part=\"heading\">\n              <slot></slot>\n            </div>\n            <div class={descriptionClasses} part=\"body\">\n              <slot name=\"description\"></slot>\n            </div>\n          </div>\n          <div class={buttonsClasses} part=\"buttons\">\n            <slot name=\"buttons\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-pDs2K2nD.js

@@ -1,100 +0,0 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-CxngDK-N.js';
-import { d as defineCustomElement$1 } from './p-CLmCtN_R.js';
-
-const afNavbarCss = ".sc-af-navbar-h{display:block;width:100%}.navbar-spacer.sc-af-navbar{height:100px}.navbar-spacer.theme-white.sc-af-navbar{background-color:var(--colour-brand-white, #FFFFFF)}.navbar-spacer.theme-inkwell.sc-af-navbar{background-color:var(--colour-brand-inkwell, #14343B)}.navbar-spacer.theme-mist-green.sc-af-navbar{background-color:var(--colour-brand-mist-green, #C6D5D1)}.navbar-spacer.theme-soft-clay.sc-af-navbar{background-color:var(--colour-softclay-400, #c0ab8d)}.navbar-container.sc-af-navbar{position:fixed;top:32px;left:0;right:0;z-index:10;padding:0 80px;box-sizing:border-box}.navbar.sc-af-navbar{background:var(--colour-background-white, #ffffff);border-radius:9999px;display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 40px;box-sizing:border-box;flex-wrap:nowrap}.navbar-left.sc-af-navbar{display:flex;align-items:center;gap:32px;flex-shrink:0}.logo.sc-af-navbar{display:flex;align-items:center;flex-shrink:0}.mobile-menu-toggle.sc-af-navbar{display:none;background:none;border:none;padding:8px;cursor:pointer;color:var(--colour-brand-inkwell, #14343b);margin-left:auto}.mobile-menu-toggle.sc-af-navbar svg.sc-af-navbar{display:block}.nav-links.sc-af-navbar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}.navbar-right.sc-af-navbar{display:flex;align-items:center;gap:20px}.nav-actions.sc-af-navbar{display:flex;align-items:center;gap:12px}.nav-button.sc-af-navbar{display:flex;align-items:center}.dropdown-container.sc-af-navbar{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.sc-af-navbar{pointer-events:auto;opacity:1;transform:translateY(0)}.dropdown-panel.sc-af-navbar{background:var(--colour-background-base, #ffffff);border-radius:32px;overflow:hidden;box-shadow:0 4px 24px rgba(20, 52, 59, 0.12)}.dropdown-panel.sc-af-navbar:empty{display:none}.mobile-menu-panel.sc-af-navbar{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.sc-af-navbar{display:block;opacity:1;pointer-events:auto}.mobile-button-container.sc-af-navbar{margin-bottom:8px}.mobile-button-container.sc-af-navbar-s>*,.mobile-button-container .sc-af-navbar-s>*{width:100%}.mobile-menu-content.sc-af-navbar{display:flex;flex-direction:column;width:100%}.mobile-menu-content.sc-af-navbar-s>*,.mobile-menu-content .sc-af-navbar-s>*{flex:0 0 auto;width:100%}@media (max-width: 1099px){.nav-actions.sc-af-navbar{display:none}.navbar-right.sc-af-navbar{gap:0}}@media (max-width: 1024px){.navbar-spacer.sc-af-navbar{height:88px}.navbar-container.sc-af-navbar{top:24px;padding:0 40px}.navbar-left.sc-af-navbar{gap:24px}.nav-links.sc-af-navbar{gap:4px}.dropdown-container.sc-af-navbar{padding:0 40px}}@media (max-width: 991px){.navbar-spacer.sc-af-navbar{height:72px}.navbar-container.sc-af-navbar{top:16px;padding:0 16px;z-index:11}.navbar.sc-af-navbar{padding:8px 8px 8px 24px;flex-direction:row;border-radius:9999px;gap:0}.navbar-left.sc-af-navbar{width:auto;flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;flex:1}.mobile-menu-toggle.sc-af-navbar{display:flex;padding:12px;margin-left:auto;border-radius:9999px;border:1px solid var(--colour-brand-inkwell, #14343b)}.mobile-menu-toggle.sc-af-navbar:hover{background:rgba(20, 52, 59, 0.05)}.nav-links.sc-af-navbar{display:none}.navbar-right.sc-af-navbar{display:none}.dropdown-container.sc-af-navbar{display:none}.mobile-menu-panel.sc-af-navbar{padding-top:88px}.mobile-button-container.sc-af-navbar{padding:0 12px;margin-bottom:8px}.mobile-button-container.sc-af-navbar-s>af-button,.mobile-button-container .sc-af-navbar-s>af-button,.mobile-button-container.sc-af-navbar-s>button,.mobile-button-container .sc-af-navbar-s>button{width:100%;display:flex;justify-content:center}}[force-mobile].sc-af-navbar-h .navbar-spacer.sc-af-navbar{height:72px}[force-mobile].sc-af-navbar-h .navbar-container.sc-af-navbar{top:16px;padding:0 16px;z-index:11}[force-mobile].sc-af-navbar-h .navbar.sc-af-navbar{padding:8px 8px 8px 24px;flex-direction:row;border-radius:9999px;gap:0}[force-mobile].sc-af-navbar-h .navbar-left.sc-af-navbar{width:auto;flex-direction:row;justify-content:flex-start;align-items:center;gap:16px;flex:1}[force-mobile].sc-af-navbar-h .mobile-menu-toggle.sc-af-navbar{display:flex;padding:12px;margin-left:auto;border-radius:9999px;border:1px solid var(--colour-brand-inkwell, #14343b)}[force-mobile].sc-af-navbar-h .mobile-menu-toggle.sc-af-navbar:hover{background:rgba(20, 52, 59, 0.05)}[force-mobile].sc-af-navbar-h .nav-links.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .navbar-right.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .nav-actions.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .dropdown-container.sc-af-navbar{display:none}[force-mobile].sc-af-navbar-h .mobile-menu-panel.sc-af-navbar{padding-top:88px}[force-mobile].sc-af-navbar-h .mobile-menu-panel.is-open.sc-af-navbar{display:block;opacity:1;pointer-events:auto}[force-mobile].sc-af-navbar-h .mobile-button-container.sc-af-navbar{padding:0 12px;margin-bottom:8px}.sc-af-navbar-h[force-mobile] .mobile-button-container.sc-af-navbar-s>af-button,.mobile-button-container .sc-af-navbar-s>af-button,.sc-af-navbar-h[force-mobile] .mobile-button-container.sc-af-navbar-s>button,.mobile-button-container .sc-af-navbar-s>button{width:100%;display:flex;justify-content:center}";
-
-const AfNavbar = /*@__PURE__*/ proxyCustomElement(class AfNavbar extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        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;
-        /** 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
-            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() {
-        const hasDropdown = this.activeDropdown !== null;
-        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" })))));
-    }
-    get el() { return this; }
-    static get style() { return afNavbarCss; }
-}, [262, "af-navbar", {
-        "showDefaultLogo": [4, "show-default-logo"],
-        "theme": [1],
-        "forceMobile": [516, "force-mobile"],
-        "mobileMenuOpen": [32],
-        "activeDropdown": [32]
-    }, [[4, "click", "handleDocumentClick"], [4, "keydown", "handleKeyDown"]]]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["af-navbar", "af-logo"];
-    components.forEach(tagName => { switch (tagName) {
-        case "af-navbar":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, AfNavbar);
-            }
-            break;
-        case "af-logo":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { AfNavbar as A, defineCustomElement as d };
-//# sourceMappingURL=p-pDs2K2nD.js.map
-
-//# sourceMappingURL=p-pDs2K2nD.js.map

package/dist/components/p-pDs2K2nD.js.map

@@ -1 +0,0 @@
-{"file":"p-pDs2K2nD.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/af-navbar/af-navbar.css?tag=af-navbar&encapsulation=scoped","src/components/af-navbar/af-navbar.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n/* Spacer element that sits in normal document flow to prevent content overlap */\n.navbar-spacer {\n  height: 100px; /* Accounts for navbar height + top margin */\n}\n\n/* Theme variants for spacer background - matches section themes */\n.navbar-spacer.theme-white {\n  background-color: var(--colour-brand-white, #FFFFFF);\n}\n\n.navbar-spacer.theme-inkwell {\n  background-color: var(--colour-brand-inkwell, #14343B);\n}\n\n.navbar-spacer.theme-mist-green {\n  background-color: var(--colour-brand-mist-green, #C6D5D1);\n}\n\n.navbar-spacer.theme-soft-clay {\n  background-color: var(--colour-softclay-400, #c0ab8d);\n}\n\n/* Sticky navbar that floats above the spacer */\n.navbar-container {\n  position: fixed;\n  top: 32px;\n  left: 0;\n  right: 0;\n  z-index: 10;\n  padding: 0 80px;\n  box-sizing: border-box;\n}\n\n.navbar {\n  background: var(--colour-background-white, #ffffff);\n  border-radius: 9999px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 8px 8px 40px;\n  box-sizing: border-box;\n  flex-wrap: nowrap; /* Prevent wrapping */\n}\n\n/* Left section */\n.navbar-left {\n  display: flex;\n  align-items: center;\n  gap: 32px;\n  flex-shrink: 0;\n}\n\n.logo {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* Mobile menu toggle button */\n.mobile-menu-toggle {\n  display: none;\n  background: none;\n  border: none;\n  padding: 8px;\n  cursor: pointer;\n  color: var(--colour-brand-inkwell, #14343b);\n  margin-left: auto;\n}\n\n.mobile-menu-toggle svg {\n  display: block;\n}\n\n.nav-links {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: nowrap;\n}\n\n/* Right section */\n.navbar-right {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n}\n\n.nav-actions {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.nav-button {\n  display: flex;\n  align-items: center;\n}\n\n/* Dropdown container */\n.dropdown-container {\n  position: absolute;\n  top: 108px;\n  left: 0;\n  right: 0;\n  padding: 0 80px;\n  pointer-events: none;\n  opacity: 0;\n  transform: translateY(-8px);\n  transition: opacity 0.2s ease, transform 0.2s ease;\n}\n\n.dropdown-container.is-open {\n  pointer-events: auto;\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.dropdown-panel {\n  background: var(--colour-background-base, #ffffff);\n  border-radius: 32px;\n  overflow: hidden;\n  box-shadow: 0 4px 24px rgba(20, 52, 59, 0.12);\n}\n\n/* Hide empty dropdown slots */\n.dropdown-panel:empty {\n  display: none;\n}\n\n/* Mobile menu panel - separate from navbar for proper positioning */\n.mobile-menu-panel {\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--colour-background-base, #ffffff);\n  z-index: 9;\n  padding: 100px 16px 24px 16px;\n  overflow-y: auto;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.2s ease;\n}\n\n.mobile-menu-panel.is-open {\n  display: block;\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Mobile CTA button container */\n.mobile-button-container {\n  margin-bottom: 8px;\n}\n\n.mobile-button-container ::slotted(*) {\n  width: 100%;\n}\n\n/* Mobile menu content - flex column ensures items stack vertically */\n.mobile-menu-content {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n/* Force slotted items to take full width for composability */\n.mobile-menu-content ::slotted(*) {\n  flex: 0 0 auto;\n  width: 100%;\n}\n\n/* \n * Breakpoint 1: Hide \"Talk to us\" and \"Log in\" (nav-actions) \n * This happens first as the viewport gets narrower\n * Matches affinda.com behavior at ~1100px\n */\n@media (max-width: 1099px) {\n  .nav-actions {\n    display: none;\n  }\n  \n  .navbar-right {\n    gap: 0;\n  }\n}\n\n/* Tablet adjustments */\n@media (max-width: 1024px) {\n  .navbar-spacer {\n    height: 88px;\n  }\n\n  .navbar-container {\n    top: 24px;\n    padding: 0 40px;\n  }\n\n  .navbar-left {\n    gap: 24px;\n  }\n\n  .nav-links {\n    gap: 4px;\n  }\n\n  .dropdown-container {\n    padding: 0 40px;\n  }\n}\n\n/* \n * Breakpoint 2: Switch to hamburger menu\n * Matches affinda.com behavior at 991px\n */\n@media (max-width: 991px) {\n  .navbar-spacer {\n    height: 72px;\n  }\n\n  .navbar-container {\n    top: 16px;\n    padding: 0 16px;\n    z-index: 11; /* Above mobile menu panel */\n  }\n\n  .navbar {\n    padding: 8px 8px 8px 24px; /* Figma: 8px padding right, 24px left on mobile */\n    flex-direction: row;\n    border-radius: 9999px; /* Keep pill shape on mobile */\n    gap: 0;\n  }\n\n  .navbar-left {\n    width: auto;\n    flex-direction: row;\n    justify-content: flex-start;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n  }\n\n  /* Show hamburger button on mobile */\n  .mobile-menu-toggle {\n    display: flex;\n    padding: 12px;\n    margin-left: auto;\n    border-radius: 9999px;\n    border: 1px solid var(--colour-brand-inkwell, #14343b);\n  }\n\n  .mobile-menu-toggle:hover {\n    background: rgba(20, 52, 59, 0.05);\n  }\n\n  /* Hide nav links on mobile - they're in the mobile menu panel */\n  .nav-links {\n    display: none;\n  }\n\n  /* Hide right section on mobile - button is in mobile menu panel */\n  .navbar-right {\n    display: none;\n  }\n\n  /* Hide desktop dropdown on mobile */\n  .dropdown-container {\n    display: none;\n  }\n\n  /* Mobile menu panel adjustments */\n  .mobile-menu-panel {\n    padding-top: 88px; /* Accounts for navbar height */\n  }\n\n  .mobile-button-container {\n    padding: 0 12px;\n    margin-bottom: 8px;\n  }\n\n  .mobile-button-container ::slotted(af-button),\n  .mobile-button-container ::slotted(button) {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n}\n\n/* ==========================================================================\n   Force Mobile Mode\n   Apply mobile styles regardless of viewport when force-mobile attribute is set\n   ========================================================================== */\n\n:host([force-mobile]) .navbar-spacer {\n  height: 72px;\n}\n\n:host([force-mobile]) .navbar-container {\n  top: 16px;\n  padding: 0 16px;\n  z-index: 11;\n}\n\n:host([force-mobile]) .navbar {\n  padding: 8px 8px 8px 24px;\n  flex-direction: row;\n  border-radius: 9999px;\n  gap: 0;\n}\n\n:host([force-mobile]) .navbar-left {\n  width: auto;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  gap: 16px;\n  flex: 1;\n}\n\n:host([force-mobile]) .mobile-menu-toggle {\n  display: flex;\n  padding: 12px;\n  margin-left: auto;\n  border-radius: 9999px;\n  border: 1px solid var(--colour-brand-inkwell, #14343b);\n}\n\n:host([force-mobile]) .mobile-menu-toggle:hover {\n  background: rgba(20, 52, 59, 0.05);\n}\n\n:host([force-mobile]) .nav-links {\n  display: none;\n}\n\n:host([force-mobile]) .navbar-right {\n  display: none;\n}\n\n:host([force-mobile]) .nav-actions {\n  display: none;\n}\n\n:host([force-mobile]) .dropdown-container {\n  display: none;\n}\n\n:host([force-mobile]) .mobile-menu-panel {\n  padding-top: 88px;\n}\n\n:host([force-mobile]) .mobile-menu-panel.is-open {\n  display: block;\n  opacity: 1;\n  pointer-events: auto;\n}\n\n:host([force-mobile]) .mobile-button-container {\n  padding: 0 12px;\n  margin-bottom: 8px;\n}\n\n:host([force-mobile]) .mobile-button-container ::slotted(af-button),\n:host([force-mobile]) .mobile-button-container ::slotted(button) {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n}\n","import { Component, State, h, Host, Prop, Element, Listen } from '@stencil/core';\n\n/**\n * A full-width navigation bar component that provides the main site navigation.\n * Features a pill-shaped container with logo, navigation links, and action buttons.\n * Includes mobile hamburger menu and support for mega-menu dropdowns.\n * \n * The logo slot can be used to provide a custom logo. If no logo is provided,\n * the default Affinda logo will be displayed.\n * \n * **Slots:**\n * - `logo` - Logo area (defaults to Affinda logo if empty)\n * - `start` - Primary navigation links (left side, desktop)\n * - `end` - Secondary/utility links (right side)\n * - `button` - Call-to-action button\n * - `dropdown-solutions` - Mega-menu for Solutions dropdown\n * - `dropdown-pricing` - Mega-menu for Pricing dropdown  \n * - `dropdown-resources` - Mega-menu for Resources dropdown\n * - `dropdown` - Generic dropdown slot\n * - `mobile-menu` - Mobile menu content (use af-nav-accordion for accordion menus)\n * - `mobile-button` - CTA button for mobile menu (appears at top)\n */\n@Component({\n  tag: 'af-navbar',\n  styleUrl: 'af-navbar.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfNavbar {\n  @Element() el!: HTMLElement;\n\n  @State() mobileMenuOpen: boolean = false;\n  \n  /** The currently open dropdown identifier (null if none open) */\n  @State() activeDropdown: string | null = null;\n\n  /** Whether to show the default Affinda logo when no logo slot content is provided */\n  @Prop() showDefaultLogo: boolean = true;\n\n  /** Theme for the spacer background - should match the section below the navbar */\n  @Prop() theme?: 'white' | 'inkwell' | 'mist-green' | 'soft-clay';\n\n  /** Force mobile layout regardless of viewport size (useful for testing/stories) */\n  @Prop({ reflect: true }) forceMobile: boolean = false;\n\n  private toggleMobileMenu = () => {\n    this.mobileMenuOpen = !this.mobileMenuOpen;\n    // Close any open dropdown when toggling mobile menu\n    this.activeDropdown = null;\n  };\n\n  /**\n   * Opens a dropdown by its identifier\n   */\n  private openDropdown = (dropdownId: string) => {\n    this.activeDropdown = dropdownId;\n  };\n\n  /**\n   * Closes the currently open dropdown\n   */\n  private closeDropdown = () => {\n    this.activeDropdown = null;\n  };\n\n  /**\n   * Toggles a dropdown by its identifier\n   */\n  private toggleDropdown = (dropdownId: string) => {\n    if (this.activeDropdown === dropdownId) {\n      this.activeDropdown = null;\n    } else {\n      this.activeDropdown = dropdownId;\n    }\n  };\n\n  /**\n   * Handle clicks outside the navbar to close dropdowns\n   */\n  @Listen('click', { target: 'document' })\n  handleDocumentClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.el)) {\n      this.closeDropdown();\n    }\n  }\n\n  /**\n   * Handle escape key to close dropdowns\n   */\n  @Listen('keydown', { target: 'document' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.closeDropdown();\n    }\n  }\n\n  render() {\n    const hasDropdown = this.activeDropdown !== null;\n\n    return (\n      <Host class={{ 'has-dropdown-open': hasDropdown }}>\n        {/* Spacer element to prevent content from being hidden behind sticky navbar */}\n        <div class={`navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}`}></div>\n        \n        <nav class=\"navbar-container\">\n          <div class=\"navbar theme-white\">\n            {/* Left section: Logo + Nav Links */}\n            <div class=\"navbar-left\">\n              <div class=\"logo\">\n                <slot name=\"logo\">\n                  {/* Default Affinda logo if no slot content provided */}\n                  {this.showDefaultLogo && <af-logo></af-logo>}\n                </slot>\n              </div>\n              \n              {/* Hamburger menu button - mobile only */}\n              <button \n                class=\"mobile-menu-toggle\"\n                onClick={this.toggleMobileMenu}\n                aria-label=\"Toggle navigation menu\"\n                aria-expanded={this.mobileMenuOpen ? 'true' : 'false'}\n              >\n                {this.mobileMenuOpen ? (\n                  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                    <path d=\"M18 6L6 18M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                ) : (\n                  <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n                    <path d=\"M3 12h18M3 6h18M3 18h18\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                )}\n              </button>\n              \n              <div class={`nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n                <slot name=\"start\"></slot>\n              </div>\n            </div>\n\n            {/* Right section: Actions + Button */}\n            <div class={`navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}`}>\n              <div class=\"nav-actions\">\n                <slot name=\"end\"></slot>\n              </div>\n              <div class=\"nav-button\">\n                <slot name=\"button\"></slot>\n              </div>\n            </div>\n          </div>\n\n          {/* Dropdown panel container */}\n          <div class={`dropdown-container ${hasDropdown ? 'is-open' : ''}`}>\n            <div class=\"dropdown-panel theme-white\">\n              <slot name=\"dropdown-solutions\"></slot>\n              <slot name=\"dropdown-pricing\"></slot>\n              <slot name=\"dropdown-resources\"></slot>\n              <slot name=\"dropdown\"></slot>\n            </div>\n          </div>\n        </nav>\n\n        {/* Mobile menu panel */}\n        <div class={`mobile-menu-panel theme-white ${this.mobileMenuOpen ? 'is-open' : ''}`}>\n          {/* Mobile CTA button at top */}\n          <div class=\"mobile-button-container\">\n            <slot name=\"mobile-button\">\n              <slot name=\"button\"></slot>\n            </slot>\n          </div>\n          \n          {/* Mobile navigation content */}\n          <div class=\"mobile-menu-content\">\n            <slot name=\"mobile-menu\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}