@affinda/wc 0.6.1 → 0.7.0

package/dist/collection/components/af-logo-mark/af-logo-mark.js

@@ -0,0 +1,86 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Compact Affinda logo mark (paperclip icon only).
+ *
+ * Use this in footers, tight spaces, or anywhere the full wordmark
+ * (`af-logo`) would be too large. The mark uses `currentColor` for
+ * the fill, so it inherits text colour from its context.
+ *
+ * @example
+ * ```html
+ * <af-logo-mark width="40" height="26"></af-logo-mark>
+ * ```
+ */
+export class AfLogoMark {
+    constructor() {
+        /**
+         * SVG width — accepts any CSS length or unitless number (pixels).
+         * Defaults to the intrinsic viewBox width.
+         */
+        this.width = '61';
+        /**
+         * SVG height — accepts any CSS length or unitless number (pixels).
+         * Defaults to the intrinsic viewBox height.
+         */
+        this.height = '39';
+    }
+    render() {
+        return (h(Host, { key: 'b8ae197c47265a0efbef52c54f83797e3fa1bbdc' }, h("svg", { key: '06128876024c53a82210d3ad8b28c11789934f66', viewBox: "0 0 61 39", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-label": "Affinda", role: "img", width: this.width, height: this.height }, h("path", { key: 'daaef34d8b8ae81bcc4d67038f3fb8fbf8c6e924', d: "M55.4708 5.44388C51.9307 1.87294 47.2664 -0.0743077 42.3079 0.00217033H18.0521L13.1917 7.90883H42.3714C42.406 7.90883 42.4463 7.90883 42.4809 7.90883C45.3291 7.90883 48.0043 9.02658 50.0281 11.068C52.1037 13.1623 53.251 15.9626 53.251 18.957C53.251 25.1046 48.3503 30.0992 42.331 30.0992H12.6497C9.94565 30.0992 7.74319 27.8519 7.74319 25.0929C7.74319 22.3338 9.95142 20.0512 12.6439 19.9688H39.2176L44.2336 12.0622H12.5114C5.6157 12.2387 0 18.0804 0 25.0929C0 32.1053 5.67335 38 12.6497 38H42.331C52.6226 38 61 29.4521 61 18.9511C61 13.827 59.0397 9.03246 55.4766 5.43799L55.4708 5.44388Z", fill: "currentColor" }))));
+    }
+    static get is() { return "af-logo-mark"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-logo-mark.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-logo-mark.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "SVG width \u2014 accepts any CSS length or unitless number (pixels).\nDefaults to the intrinsic viewBox width."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'61'"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "SVG height \u2014 accepts any CSS length or unitless number (pixels).\nDefaults to the intrinsic viewBox height."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "'39'"
+            }
+        };
+    }
+}

package/dist/collection/components/af-logo-well/af-logo-well.js

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class AfLogoWell {
     render() {
-        return (h(Host, { key: '89f971eecc9e4a0656c6a6865c2653e64bbdd7bb' }, h("div", { key: 'a4ac54bd1649f010caa095b2ea1f8e7ea8b24a02', class: "logo-well" }, h("slot", { key: '11cf1c916f2b056c6ee575351263d83778529146' }))));
+        return (h(Host, { key: '2bc3736f55fd1da164496f56f59fe6ba09d5123c' }, h("div", { key: 'c4efe27b86b6517e718f2a363f54120a28cc2da9', class: "logo-well" }, h("slot", { key: '72e8b0a6ab07cfe16afc06f75ac848d367b74def' }))));
     }
     static get is() { return "af-logo-well"; }
     static get encapsulation() { return "shadow"; }
@@ -19,4 +19,3 @@ export class AfLogoWell {
         };
     }
 }
-//# sourceMappingURL=af-logo-well.js.map

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

@@ -71,7 +71,7 @@ export class AfNavAccordion {
         this.syncItems();
     }
     render() {
-        return (h(Host, { key: '111706b5210510f44864d0dd8f5d2fe1901839da', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, h("div", { key: 'e21f1a8ae3edf2c8aa08385240a536c69cf0da6e', class: "nav-accordion" }, h("slot", { key: 'c452fa149aec51c88dbaef3e59de7e28c4f89de3' }))));
+        return (h(Host, { key: '2ee28cd0fd8a1575441e8c42fba40191846e2f68', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, h("div", { key: '9c97b12ff2709584b528f238ea9192dae94eff62', class: "nav-accordion" }, h("slot", { key: 'a3f88648d01ea566332a793fe53831c94fec9b8e' }))));
     }
     static get is() { return "af-nav-accordion"; }
     static get encapsulation() { return "scoped"; }
@@ -182,4 +182,3 @@ export class AfNavAccordion {
             }];
     }
 }
-//# sourceMappingURL=af-nav-accordion.js.map

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

@@ -14,7 +14,7 @@
   justify-content: space-between;
   gap: 8px;
   width: 100%;
-  padding: 20px 12px;
+  padding: 18px 12px;
   background: transparent;
   border: none;
   border-bottom: 1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));
@@ -56,10 +56,10 @@ a.trigger {
 /* Label styling - matches NavItem primary-01 mobile */
 .label {
   font-family: var(--typography-primaryfont, 'NeuSans', 'Inter', system-ui, sans-serif);
-  font-weight: var(--typography-headingweight, 500);
-  font-size: 20px;
-  line-height: 1.1;
-  letter-spacing: -0.4px;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 1.15;
+  letter-spacing: 0;
   color: var(--af-nav-item-primary, var(--af-typography-body-dark, #14343b));
 }
 
@@ -127,13 +127,13 @@ a.trigger {
 
 /* Mobile breakpoint styling */
 :host(.breakpoint-mobile) .trigger {
-  padding: 20px 12px;
+  padding: 18px 12px;
 }
 
 :host(.breakpoint-mobile) .label {
-  font-size: 20px;
-  line-height: 1.1;
-  letter-spacing: -0.4px;
+  font-size: 18px;
+  line-height: 1.15;
+  letter-spacing: 0;
 }
 
 /* Desktop breakpoint styling */
@@ -151,4 +151,3 @@ a.trigger {
 :host(.breakpoint-mobile) .content {
   padding-left: 0;
 }
-

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

@@ -84,11 +84,11 @@ export class AfNavAccordionItem {
         // sub-content to expand. A plain href item with no children is a
         // direct link and shouldn't show a disclosure affordance.
         const hasDropdownContent = this.hasContent;
-        return (h(Host, { key: 'bcdd77ad3dea306e2c1b9b8481d3e00a8cd8cc72', class: {
+        return (h(Host, { key: '2bdf603e360f6459780a03eece9b59d36244f131', class: {
                 'is-open': this.open,
                 'is-disabled': this.disabled,
                 [`breakpoint-${this.breakpoint}`]: true
-            } }, h("div", { key: 'b82a343372689e06aff2ec3eb2b9b2b0ba02c14d', class: "nav-accordion-item" }, this.href ? (h("a", { href: this.href, class: "trigger", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}` }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), hasDropdownContent && (h("button", { class: "chevron-button", onClick: (e) => { e.preventDefault(); e.stopPropagation(); this.toggle(); }, "aria-label": this.open ? 'Collapse' : 'Expand', type: "button" }, h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))) : (h("button", { class: "trigger", onClick: this.handleTriggerClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}`, disabled: this.disabled, type: "button" }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), hasDropdownContent && (h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: '880a15014002f905a4c1c1e20dc5516022b9aee1', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, h("div", { key: 'e47b8972907ad32e3fee37f030f1d86c17ac30bc', class: "content", ref: (el) => (this.contentRef = el) }, h("slot", { key: '1def93a51457196a6a023ab32905b8eaa7590c05' }))))));
+            } }, h("div", { key: 'eb4f412caebd9025f4f44a8568fa59f0e5871517', class: "nav-accordion-item" }, this.href ? (h("a", { href: this.href, class: "trigger", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}` }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), hasDropdownContent && (h("button", { class: "chevron-button", onClick: (e) => { e.preventDefault(); e.stopPropagation(); this.toggle(); }, "aria-label": this.open ? 'Collapse' : 'Expand', type: "button" }, h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), !hasDropdownContent && (h("div", { class: "chevron chevron--link", "aria-hidden": "true" }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M5 12h14M13 6l6 6-6 6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))) : (h("button", { class: "trigger", onClick: this.handleTriggerClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}`, disabled: this.disabled, type: "button" }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), hasDropdownContent && (h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: '02acb68c10acdf39c13dca8fa3b6cfdbc6d26503', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, h("div", { key: 'd177d8a62bd596df004afcde08ceffd9a2c31543', class: "content", ref: (el) => (this.contentRef = el) }, h("slot", { key: '941d30ed2da86c88acfc448f48335fd4284b64f2' }))))));
     }
     static get is() { return "af-nav-accordion-item"; }
     static get encapsulation() { return "scoped"; }
@@ -277,4 +277,3 @@ export class AfNavAccordionItem {
             }];
     }
 }
-//# sourceMappingURL=af-nav-accordion-item.js.map

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

@@ -135,4 +135,3 @@ export class AfNavCard {
         };
     }
 }
-//# sourceMappingURL=af-nav-card.js.map

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

@@ -118,20 +118,13 @@
   text-decoration: underline;
 }
 
-/* Focus states for accessibility */
-.nav-item:focus-within {
-  outline: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));
-  outline-offset: 2px;
-  border-radius: 4px;
-}
-
 /* Remove default focus outline on link */
 .nav-link:focus {
   outline: none;
 }
 
-.nav-link:focus-visible + .nav-item,
-:host(:focus-visible) .nav-item {
+.nav-link:focus-visible .nav-item,
+.nav-item:focus-visible {
   outline: 2px solid var(--af-nav-border-active, var(--af-background-border-active, #8a7049));
   outline-offset: 2px;
   border-radius: 4px;
@@ -139,7 +132,7 @@
 
 /* Mobile breakpoint styles - explicit via prop */
 .hierarchy-primary.breakpoint-mobile {
-  padding: 20px 12px;
+  padding: 18px 12px;
   border-bottom: 1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));
   width: 100%;
   justify-content: flex-start;
@@ -151,22 +144,24 @@
 }
 
 .hierarchy-primary.variant-01.breakpoint-mobile {
-  font-size: 20px;
-  line-height: 1.1;
-  letter-spacing: -0.4px;
+  font-size: 18px;
+  line-height: 1.15;
+  letter-spacing: 0;
 }
 
 .hierarchy-primary.variant-02.breakpoint-mobile {
-  font-size: 20px;
-  line-height: 1.1;
-  letter-spacing: -0.4px;
+  font-size: 18px;
+  line-height: 1.15;
+  letter-spacing: 0;
   color: var(--af-nav-item-subtle, var(--af-typography-body-subtle, #60767b));
 }
 
 /* Mobile breakpoint for secondary hierarchy */
 .hierarchy-secondary.breakpoint-mobile {
   padding: 2px 0;
-  height: 40px;
+  min-height: 34px;
+  font-size: 15px;
+  line-height: 20px;
 }
 
 .hierarchy-secondary.breakpoint-mobile .label-container {
@@ -237,7 +232,7 @@
 @media (max-width: 1023px) {
   :host([breakpoint="auto"]) .hierarchy-primary,
   :host(:not([breakpoint])) .hierarchy-primary {
-    padding: 20px 12px;
+    padding: 18px 12px;
     border-bottom: 1px solid var(--af-nav-border-subtle, var(--af-background-border-subtle, #e8eeed));
     width: 100%;
   }
@@ -250,16 +245,16 @@
 
   :host([breakpoint="auto"]) .hierarchy-primary.variant-01,
   :host(:not([breakpoint])) .hierarchy-primary.variant-01 {
-    font-size: 20px;
-    line-height: 1.1;
-    letter-spacing: -0.4px;
+    font-size: 18px;
+    line-height: 1.15;
+    letter-spacing: 0;
   }
 
   :host([breakpoint="auto"]) .hierarchy-primary.variant-02,
   :host(:not([breakpoint])) .hierarchy-primary.variant-02 {
-    font-size: 20px;
-    line-height: 1.1;
-    letter-spacing: -0.4px;
+    font-size: 18px;
+    line-height: 1.15;
+    letter-spacing: 0;
     color: var(--af-nav-item-subtle, var(--af-typography-body-subtle, #60767b));
   }
 

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

@@ -185,4 +185,3 @@ export class AfNavItem {
     }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=af-nav-item.js.map

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

@@ -28,7 +28,7 @@
 
 /* Mobile styles */
 .nav-menu.breakpoint-mobile {
-  padding: 32px 12px;
+  padding: 22px 12px 24px;
   width: 100%;
   border-bottom: 1px solid var(--af-background-border-subtle, #e8eeed);
 }
@@ -45,9 +45,9 @@
   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;
+  font-size: 16px;
+  line-height: 100%;
+  letter-spacing: 0;
   color: var(--af-typography-heading-secondary, var(--colour-brand-soft-clay, #b09670));
   flex: 1 0 0;
   min-height: 1px;
@@ -56,7 +56,9 @@
 
 /* Mobile heading adjustments */
 .nav-menu.breakpoint-mobile .menu-heading {
+  font-size: 16px;
   line-height: 1.1;
+  letter-spacing: 0;
 }
 
 /* Menu items container */
@@ -69,7 +71,7 @@
 
 /* Mobile items with left padding */
 .nav-menu.breakpoint-mobile .menu-items {
-  padding-left: 24px;
+  padding-left: 16px;
 }
 
 /* Slot styling for nav-items */
@@ -88,4 +90,3 @@
   flex: 1 0 0;
   align-self: stretch;
 }
-

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

@@ -30,7 +30,7 @@ export class AfNavMenu {
             'has-border': this.showBorder,
             'card-style': this.cardStyle
         };
-        return (h(Host, { key: '3245ae98bb4b1ab013d36630802bb1cdece57675' }, h("div", { key: 'e84dcdc45b92f928ee7b8dd2328a2b7276a2e02a', class: classes }, this.heading && (h("div", { key: 'd42c91176b53b5d0375cb29d489b722dcd3c8e74', class: "menu-header" }, h("h3", { key: 'b2cf5d6cb682db6f68c9a45045fb060710097137', class: "menu-heading" }, this.heading))), h("div", { key: '89e7aef886d60d2ce3d8b82cd1b2c588d4894be8', class: "menu-items" }, h("slot", { key: '29d596f664fdfc83fc40c17686751f1b893bce26' })))));
+        return (h(Host, { key: '1cb9cc6b1f91225f4665efbb2832615ff6ef7ef1' }, h("div", { key: '2796c68a81c3b57c7f2c3079108b1d18cabfcc39', class: classes }, this.heading && (h("div", { key: '7424886326924cd42b0c055f7d4c195da6aa9593', class: "menu-header" }, h("h3", { key: '4c0700fec4127a206101f1854852a1e4725b0f74', class: "menu-heading" }, this.heading))), h("div", { key: '810e22e938e16fece55207546009ccf1666a0bac', class: "menu-items" }, h("slot", { key: '93691f1d2a921b1217fce0180e55b01c35b6abd6' })))));
     }
     static get is() { return "af-nav-menu"; }
     static get encapsulation() { return "scoped"; }
@@ -128,4 +128,3 @@ export class AfNavMenu {
         };
     }
 }
-//# sourceMappingURL=af-nav-menu.js.map

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

@@ -43,7 +43,7 @@
 .nav-menu-nest.breakpoint-desktop .menu-columns ::slotted(af-nav-menu) {
   flex: 1 1 0;
   min-width: 0;
-  border-right: 1px solid var(--af-background-border-subtle, #e8eeed);
+  border-right: 2px solid var(--af-background-border-subtle, #e8eeed);
   padding-right: 32px;
   padding-top: 16px;
 }

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

@@ -39,7 +39,7 @@ export class AfNavMenuNest {
          * Set to `true` when sidebar has content, `false` when no sidebar.
          * When `false`, the last column has no border.
          */
-        this.showSidebarBorder = true;
+        this.showSidebarBorder = false;
     }
     render() {
         const classes = {
@@ -48,7 +48,7 @@ export class AfNavMenuNest {
             [`type-${this.type}`]: true,
             [`breakpoint-${this.breakpoint}`]: true
         };
-        return (h(Host, { key: 'b0eb2c4904916a16b2b6ec6d612337fed3c05e12' }, h("div", { key: 'dd1836b1c6ee6f75555989334a35e2a41d9bacab', class: classes }, h("div", { key: '4e3ae3951e9969d21a5e18a0489a33631bb1e8f2', class: "menu-columns" }, h("slot", { key: '64c660d4a5b35dda06b0ff0ca21c0e24014ceef2' })), h("div", { key: '7418a543431a9fd0fbbf95b1e3b5e862d5ac3917', class: "menu-sidebar" }, h("slot", { key: 'd36bb4016c86d9258a70ddbb46232264bdb156e4', name: "sidebar" })))));
+        return (h(Host, { key: '53d8b54481f2d0d1eb119aa7b85634fa1264efd2' }, h("div", { key: '7b1e558654f9f957f56f6f92eeda187a6163d4d9', class: classes }, h("div", { key: '830507b9718ff6bad9d31430aa3fc16c938767a2', class: "menu-columns" }, h("slot", { key: '5bc877069510b1dc5908b050354eaf3ac4aaef5c' })), h("div", { key: '057b917012e37e93a35e72105a476fd2c3613f38', class: "menu-sidebar" }, h("slot", { key: 'b65758680162c4f93922e7d1438ebdc8af7dd0c8', name: "sidebar" })))));
     }
     static get is() { return "af-nav-menu-nest"; }
     static get encapsulation() { return "scoped"; }
@@ -122,9 +122,8 @@ export class AfNavMenuNest {
                 "setter": false,
                 "reflect": true,
                 "attribute": "show-sidebar-border",
-                "defaultValue": "true"
+                "defaultValue": "false"
             }
         };
     }
 }
-//# sourceMappingURL=af-nav-menu-nest.js.map

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

@@ -132,7 +132,7 @@
 
 .dropdown-panel {
   background: var(--colour-background-base, #ffffff);
-  border-radius: 32px;
+  border-radius: 40px;
   overflow: hidden;
   /* shadow-navbar replaces the hand-rolled `0 4px 24px rgba(20, 52, 59, 0.12)`;
    * same value, now sourced from the token ladder so the marketing site can
@@ -147,7 +147,7 @@
 
 /* Mobile menu panel - separate from navbar for proper positioning */
 .mobile-menu-panel {
-  display: none;
+  display: block;
   position: fixed;
   top: 0;
   left: 0;
@@ -165,13 +165,23 @@
   overflow-y: auto;
   opacity: 0;
   pointer-events: none;
-  transition: opacity 0.2s ease;
+  visibility: hidden;
+  clip-path: inset(0 100% 0 0);
+  transition:
+    clip-path 0.28s cubic-bezier(0.2, 0, 0, 1),
+    opacity 0.2s ease,
+    visibility 0s linear 0.28s;
 }
 
 .mobile-menu-panel.is-open {
-  display: block;
   opacity: 1;
   pointer-events: auto;
+  visibility: visible;
+  clip-path: inset(0 0 0 0);
+  transition:
+    clip-path 0.28s cubic-bezier(0.2, 0, 0, 1),
+    opacity 0.2s ease,
+    visibility 0s;
 }
 
 /* Mobile CTA button container */
@@ -181,6 +191,7 @@
 
 .mobile-button-container ::slotted(*) {
   width: 100%;
+  --af-button-width: 100%;
 }
 
 /* Mobile menu content - flex column ensures items stack vertically */
@@ -296,17 +307,32 @@
 
   /* Mobile menu panel adjustments */
   .mobile-menu-panel {
-    padding-top: max(88px, calc(88px + env(safe-area-inset-top))); /* Accounts for navbar height + notch */
+    padding-top: max(96px, calc(96px + env(safe-area-inset-top))); /* Accounts for navbar height + notch */
+  }
+
+  /* When the mobile menu is open, dissolve the pill chrome so the
+     header reads as the top of the menu panel rather than a floating
+     chip on top of it. The hamburger morphs to a close X and stays
+     interactive. */
+  :host(.mobile-menu-open) .navbar {
+    background: transparent;
+    border: none;
+    box-shadow: none;
+  }
+
+  :host(.mobile-menu-open) .mobile-menu-toggle {
+    border-color: transparent;
   }
 
   .mobile-button-container {
     padding: 0 12px;
-    margin-bottom: 8px;
+    margin-bottom: 12px;
   }
 
   .mobile-button-container ::slotted(af-button),
   .mobile-button-container ::slotted(button) {
     width: 100%;
+    --af-button-width: 100%;
     display: flex;
     justify-content: center;
   }
@@ -372,23 +398,35 @@
 }
 
 :host([force-mobile]) .mobile-menu-panel {
-  padding-top: max(88px, calc(88px + env(safe-area-inset-top)));
+  padding-top: max(96px, calc(96px + env(safe-area-inset-top)));
 }
 
 :host([force-mobile]) .mobile-menu-panel.is-open {
-  display: block;
   opacity: 1;
   pointer-events: auto;
+  visibility: visible;
+  clip-path: inset(0 0 0 0);
+}
+
+:host([force-mobile].mobile-menu-open) .navbar {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+:host([force-mobile].mobile-menu-open) .mobile-menu-toggle {
+  border-color: transparent;
 }
 
 :host([force-mobile]) .mobile-button-container {
   padding: 0 12px;
-  margin-bottom: 8px;
+  margin-bottom: 12px;
 }
 
 :host([force-mobile]) .mobile-button-container ::slotted(af-button),
 :host([force-mobile]) .mobile-button-container ::slotted(button) {
   width: 100%;
+  --af-button-width: 100%;
   display: flex;
   justify-content: center;
 }

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

@@ -77,21 +77,32 @@ export class AfNavbar {
     }
     /**
      * Open the dropdown matching a `[data-dropdown]` trigger on hover.
-     * Uses mouseover (which bubbles) and checks for the trigger ancestor.
+     * When hovering over the dropdown panel itself, keep it open.
+     * Anywhere else in the navbar, schedule a debounced close so the
+     * mouse has a brief grace period to cross gaps.
      */
     handleHover(event) {
         const target = event.target;
         const trigger = target?.closest?.('[data-dropdown]');
-        if (!trigger || !this.el.contains(trigger))
+        if (trigger && this.el.contains(trigger)) {
+            const id = trigger.getAttribute('data-dropdown');
+            if (!id || this.activeDropdown === id) {
+                this.cancelScheduledClose();
+                return;
+            }
+            this.cancelScheduledClose();
+            this.lastActiveTrigger = trigger;
+            this.openDropdown(id);
             return;
-        const id = trigger.getAttribute('data-dropdown');
-        if (!id || this.activeDropdown === id) {
+        }
+        const dropdownContainer = this.el.querySelector('.dropdown-container');
+        if (dropdownContainer?.contains(target)) {
             this.cancelScheduledClose();
             return;
         }
-        this.cancelScheduledClose();
-        this.lastActiveTrigger = trigger;
-        this.openDropdown(id);
+        if (this.activeDropdown !== null) {
+            this.scheduleClose();
+        }
     }
     /**
      * When the pointer leaves the navbar entirely (including any open
@@ -172,7 +183,7 @@ export class AfNavbar {
     }
     render() {
         const hasDropdown = this.activeDropdown !== null;
-        return (h(Host, { key: '78bb68495b077735b93558eb2ff3c7a5368c95ba', class: { 'has-dropdown-open': hasDropdown } }, h("div", { key: 'd295d9865e936a9e10f2a552658265b5bfff2509', class: `navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}` }), h("nav", { key: '7a2f7ea2a7ac704d5a4854ed8bde9ec4186b7a48', class: "navbar-container" }, h("div", { key: '796c3fbcdc5b93ac2ea756f400900050a4e68904', class: "navbar theme-white" }, h("div", { key: '4f470bd5ca1c24f2de9a051c049ca0f3a6d343d7', class: "navbar-left" }, h("div", { key: '0ff19f610a2dfc60535ca601187214fd9184706c', class: "logo" }, h("slot", { key: 'b62680fa9641835e96c0975aa8b53289a4c331be', name: "logo" }, this.showDefaultLogo && h("af-logo", { key: '5acf4cce6d2b59ca3f08cb112aa53608ff92d3d7' }))), h("button", { key: '2fae1551b462c43388ef570620e2b6356d176724', 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: '847fa6e696769da5ce2d166e4298bbf35acdffec', class: `nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("slot", { key: '79774a3987661ff611090741b8d0f598a5cbc1c1', name: "start" }))), h("div", { key: '18c965fe437fc54f293d5127af13d94d83e212d3', class: `navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("div", { key: '664c29f5d0cd01b493ae8bf9b430be34fd135c5c', class: "nav-actions" }, h("slot", { key: 'c94f3e8b1092d4e6891a77a1714470be7fa265d8', name: "end" })), h("div", { key: '2f598ff355d1cf5662a7246434eeb02af034da7c', class: "nav-button" }, h("slot", { key: 'cda81abe6c63c56270926015cb389e4fe6735d22', name: "button" })))), h("div", { key: 'e551f820e91cca9ae401bd0f514e35b77af896d0', class: `dropdown-container ${hasDropdown ? 'is-open' : ''}` }, h("div", { key: '1253fb594e9db19bb9b79eb3f5d0e1788f728c3d', class: "dropdown-panel theme-white" }, h("slot", { key: 'b134d4150908a4d3bb7d77ba5d80246bbc709b35', name: "dropdowns" })))), h("div", { key: '40c2c6de6f661f89a9746ab55a5be2d68a9ad5a8', class: `mobile-menu-panel theme-white ${this.mobileMenuOpen ? 'is-open' : ''}` }, h("div", { key: '8be85b23f99f8556141c48bed691836de2afe129', class: "mobile-button-container" }, h("slot", { key: 'add78c754de721ca09d9295d628993c2708e5cb8', name: "mobile-button" })), h("div", { key: '8f3776c268349b30fbfab8952a640a2e293b6a2f', class: "mobile-menu-content" }, h("slot", { key: '6eb194b51d1b7545178edc762833c63bb73d5483', name: "mobile-menu" })))));
+        return (h(Host, { key: '6bdcc5eb13a48e5e12c156f9e5467a2c36872b07', class: { 'has-dropdown-open': hasDropdown, 'mobile-menu-open': this.mobileMenuOpen } }, h("div", { key: 'a1c23a83e63104926b1f1e8d175f493f431e1557', class: `navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}` }), h("nav", { key: 'f4767d1c25ad7f9c1e681c3416042766def382dd', class: "navbar-container" }, h("div", { key: 'c92db400169f716ff516ac2a811e98cfaed71f6e', class: "navbar theme-white" }, h("div", { key: '3e84f0e722cc88a88ec1367aa6ecbec7e69069d3', class: "navbar-left" }, h("div", { key: '74fc80b1a4390a044bb5f7c5bdbc236bdacd8ba6', class: "logo" }, h("slot", { key: 'daccaf960dbdd0196d698815338b08998aba7b5a', name: "logo" }, this.showDefaultLogo && h("af-logo", { key: '0e2c8112f2193659e9627a4d6234cfd3d61478fe' }))), h("button", { key: '3482819b3213c6f1fd64001169350f674e134595', 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: '2f5866963f44a7f77c8d409821e7756d09380738', class: `nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("slot", { key: '851ec42467e62657b09e02de92de7c44c83de399', name: "start" }))), h("div", { key: 'b493af78ae732c3c7c7ff892eaf536720aca5e31', class: `navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("div", { key: 'a22b742c27f2dbd7cf984473eeccb4926348cfcd', class: "nav-actions" }, h("slot", { key: 'f3f45a6f50fa7d2a6858e30ee06ff95584b24115', name: "end" })), h("div", { key: '98a1f642b05c69cbdf0d47eb5dbf23a8875a146b', class: "nav-button" }, h("slot", { key: 'fb46d64acd65f3f4f67cb1baf335dd402cc91fac', name: "button" })))), h("div", { key: '6503b41825cdf720d136a6f32ac42bdd1cfdc476', class: `dropdown-container ${hasDropdown ? 'is-open' : ''}` }, h("div", { key: 'ec05bbbea5689a818efdd0e7eced3e46947ecef7', class: "dropdown-panel theme-white" }, h("slot", { key: '5f03007afe3412bfd3e31749407d8b38f6474476', name: "dropdowns" })))), h("div", { key: '64edf5c83c906cc44d06e6a02835a0b829fef98e', class: `mobile-menu-panel theme-white ${this.mobileMenuOpen ? 'is-open' : ''}` }, h("div", { key: '95c041d91c0c68614d87d8bf2286743a40384d47', class: "mobile-button-container" }, h("slot", { key: '81e151460a5d088fd48386b45d9b5fc1ef814956', name: "mobile-button" })), h("div", { key: '892167256302284416a4473b739fe395c82fe1f1', class: "mobile-menu-content" }, h("slot", { key: 'b1bae87e0fde7bf28c517d84163d6504dc39f909', name: "mobile-menu" })))));
     }
     static get is() { return "af-navbar"; }
     static get encapsulation() { return "scoped"; }
@@ -218,7 +229,8 @@ export class AfNavbar {
                         "Theme": {
                             "location": "import",
                             "path": "../../types",
-                            "id": "src/types.ts::Theme"
+                            "id": "src/types.ts::Theme",
+                            "referenceLocation": "Theme"
                         }
                     }
                 },
@@ -302,4 +314,3 @@ export class AfNavbar {
             }];
     }
 }
-//# sourceMappingURL=af-navbar.js.map