@affinda/wc 0.0.22 → 0.0.24

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

@@ -4,20 +4,8 @@ import { h, Host } from "@stencil/core";
  * Provides consistent image styling across the design system.
  */
 export class AfImage {
-    constructor() {
-        /**
-         * Shape / corner rounding variant. Matches Webflow's `.image-fill.rounded-*`
-         * patterns where only one edge is rounded so the image bleeds into a
-         * neighbouring section.
-         * - `rounded` (default) — symmetric rounded corners on all four sides.
-         * - `rounded-left` — rounded only on the left edge (top-left + bottom-left).
-         * - `rounded-right` — rounded only on the right edge.
-         * - `square` — no corner rounding.
-         */
-        this.shape = 'rounded';
-    }
     render() {
-        return (h(Host, { key: 'c9f455572ade2527ebe2fa3cf6d25799b1dcdadd' }, h("div", { key: 'bd5742851ebe8c860eff32bc0583052ffe12c664', class: `image-container image-container--${this.shape}` }, h("img", { key: 'c8f13e1b129c75dee5a2f2c39ca5928a2680fc11', src: this.src, alt: this.alt, class: "image" }), h("div", { key: '19b82389db1ceb1cc37d6824340ce2937396e766', class: "image-border", "aria-hidden": "true" }))));
+        return (h(Host, { key: '4cb4ea9887de4a009e044ff094061e776439c3a1' }, h("div", { key: 'e4db690fe52d08361b3420028aa80a7407e155c6', class: "image-container" }, h("img", { key: 'a3475febafc35e240ece6be513340bfb004e5315', src: this.src, alt: this.alt, class: "image" }), h("div", { key: 'c1d492a212f6ad3c4b7eac4c56bf5b91b2ea1809', class: "image-border", "aria-hidden": "true" }))));
     }
     static get is() { return "af-image"; }
     static get encapsulation() { return "scoped"; }
@@ -70,26 +58,6 @@ export class AfImage {
                 "setter": false,
                 "reflect": false,
                 "attribute": "alt"
-            },
-            "shape": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'rounded' | 'rounded-left' | 'rounded-right' | 'square'",
-                    "resolved": "\"rounded\" | \"rounded-left\" | \"rounded-right\" | \"square\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Shape / corner rounding variant. Matches Webflow's `.image-fill.rounded-*`\npatterns where only one edge is rounded so the image bleeds into a\nneighbouring section.\n- `rounded` (default) \u2014 symmetric rounded corners on all four sides.\n- `rounded-left` \u2014 rounded only on the left edge (top-left + bottom-left).\n- `rounded-right` \u2014 rounded only on the right edge.\n- `square` \u2014 no corner rounding."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "shape",
-                "defaultValue": "'rounded'"
             }
         };
     }

package/dist/collection/components/af-in-page-banner/af-in-page-banner.css

@@ -212,7 +212,7 @@
   gap: 16px;
   max-width: 840px;
   width: 100%;
-  white-space: normal;
+  white-space: pre-wrap;
 }
 
 /* ==========================================================================
@@ -232,7 +232,7 @@
   letter-spacing: -0.88px;
   color: var(--banner-heading-color, var(--colour-brand-inkwell, #14343b));
   margin: 0;
-  white-space: normal;
+  white-space: pre-wrap;
 }
 
 /* ==========================================================================
@@ -252,7 +252,7 @@
   line-height: 26px;
   color: var(--banner-body-color, var(--colour-inkwell-400, #2b484f));
   margin: 0;
-  white-space: normal;
+  white-space: pre-wrap;
 }
 
 /* ==========================================================================

package/dist/collection/components/af-in-page-banner/af-in-page-banner.js

@@ -22,16 +22,6 @@ import { h, Host } from "@stencil/core";
  * ```
  *
  * Alternatively, use the `illustration` slot for completely custom content.
- *
- * **Slot-based composition (preferred for rich content):**
- * - `heading` — heading markup (overrides the `heading` prop when provided).
- * - `description` — description markup (overrides the `description` prop).
- * - `buttons` — custom button group (overrides the primary/secondary button
- *   props; use when you need ghost variants, more than two buttons, or
- *   per-button icons).
- * - `illustration` — custom illustration markup.
- *
- * The string props remain supported for simple cases.
  */
 export class AfInPageBanner {
     constructor() {
@@ -66,7 +56,7 @@ export class AfInPageBanner {
         return (h("div", { class: "banner__wave-overlay", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 521 323", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "banner__wave-svg" }, h("path", { d: "M473.775 46.273C443.539 15.92 403.701 -0.631616 361.351 0.0184478H154.183L112.67 67.225H361.893C362.189 67.225 362.533 67.225 362.829 67.225C387.155 67.225 410.004 76.7259 427.289 94.0776C445.017 111.879 454.816 135.682 454.816 161.134C454.816 213.389 412.959 255.843 361.548 255.843H108.041C84.9457 255.843 66.1345 236.742 66.1345 213.289C66.1345 189.837 84.9949 170.435 107.992 169.735H334.957L377.799 102.528H106.859C47.9636 104.029 0 153.683 0 213.289C0 272.895 48.456 323 108.041 323H361.548C449.449 323 521 250.343 521 161.084C521 117.53 504.257 76.7759 473.824 46.2229L473.775 46.273Z", fill: "currentColor" }))));
     }
     render() {
-        return (h(Host, { key: '6310f0f7600c2e19d1445065cccee4579939e0dc' }, h("div", { key: '61f59b11a415d70336106b7a61a257e30cbaca07', class: `banner theme-${this.theme}` }, this.showWaveDecoration && this.renderWaveOverlay(), h("div", { key: '338ca3f897b8da2ee01f7ccfa6f3289cc6826fc8', class: "banner__illustration" }, this.illustrationUrl ? (h("img", { src: this.illustrationUrl, alt: "", class: "banner__illustration-img", loading: "lazy" })) : (h("slot", { name: "illustration" }))), h("div", { key: '5bb803e4ae874c0422500d021683d24db0bcb390', class: "banner__content" }, h("div", { key: '64bdea0fed6cbd21fa361a139d16cf5793c827d9', class: "banner__copy" }, h("h2", { key: 'f537189a2e05202aa6b0bc7be09dad21ddb1c787', class: "banner__heading" }, h("slot", { key: 'ddb9b2a0f6be237f603333ccad962a0f9f283b45', name: "heading" }, this.heading)), h("div", { key: 'a83c28686b9ab76046df820a5750f5fff3f650d4', class: "banner__description" }, h("slot", { key: 'd3e4350761df809b4f1d97de93a0d9c58008dd93', name: "description" }, this.description))), h("div", { key: 'e6cc39eab622e5e6ea0732f94c11ca200ebb6324', class: "banner__buttons" }, h("slot", { key: '6aedd028e64940f7250054ede53ed22b5a524e2d', name: "buttons" }, this.primaryButtonText && (h("af-button", { key: 'aadec6e904ceb326d3e9e8d12f543d733551f8a3', href: this.primaryButtonUrl, variant: "primary" }, this.primaryButtonText)), this.secondaryButtonText && (h("af-button", { key: 'd9c4ade6266820459eaf5d61a5e21bf9019f2cad', href: this.secondaryButtonUrl, variant: "secondary" }, this.secondaryButtonText))))))));
+        return (h(Host, { key: '2720fd3ccb0d8f2e37144265de17ce7ec40d5197' }, h("div", { key: 'edfa5812b8de06a50fd4502ee57a4590bab7891c', class: `banner theme-${this.theme}` }, this.showWaveDecoration && this.renderWaveOverlay(), h("div", { key: '401c710a4642b04cae3ad4795db1a9444a25ca13', class: "banner__illustration" }, this.illustrationUrl ? (h("img", { src: this.illustrationUrl, alt: "", class: "banner__illustration-img", loading: "lazy" })) : (h("slot", { name: "illustration" }))), h("div", { key: 'f09c44f258171263a035081af7918085e11aede6', class: "banner__content" }, h("div", { key: '3badcdab323c0c16b9d484d4fc55989b37cdbe08', class: "banner__copy" }, this.heading && (h("h2", { key: 'c35214a8429164d16bbb024292daf8d18fbeba29', class: "banner__heading" }, this.heading)), this.description && (h("p", { key: 'ecbfa1ff0649d77d8d874582b2d09b60c8e193c6', class: "banner__description" }, this.description))), (this.primaryButtonText || this.secondaryButtonText) && (h("div", { key: '6ef15b587a684ac9d4cc9ce4af81fca6d0a23446', class: "banner__buttons" }, this.primaryButtonText && (h("af-button", { key: 'ef632338bc8a8e9332f12c30ada3ad2c83201688', href: this.primaryButtonUrl, variant: "primary" }, this.primaryButtonText)), this.secondaryButtonText && (h("af-button", { key: '6265d2595f6e7ad3f45bb1284b9b2953f03e0cfe', href: this.secondaryButtonUrl, variant: "secondary" }, this.secondaryButtonText))))))));
     }
     static get is() { return "af-in-page-banner"; }
     static get encapsulation() { return "scoped"; }

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

@@ -49,7 +49,7 @@ export class AfInline {
             justifyContent: justifyMap[this.justify],
             flexWrap: this.wrap ? 'wrap' : 'nowrap',
         };
-        return (h(Host, { key: 'bbd38c1051d630e3fe9d14f426e6f3325550876f', style: style }, h("slot", { key: 'e0cc5cc812936fc771173b21ff7ed1686ac75a5c' })));
+        return (h(Host, { key: '98aab1aa94a068796ee7abdd00d44cac516f6be1', style: style }, h("slot", { key: '2c700f8333f3c010344d499b7d8bc5126d139745' })));
     }
     static get is() { return "af-inline"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,6 +45,7 @@
 }
 
 /* Mobile adjustments */
+/* ≤ mobile */
 @media (max-width: 767px) {
   .logo-well {
     border-radius: var(--radius-logo-well-mobile, 12px);

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: '5af92f4b7a36ef209a7b93541590dfd210fba093' }, h("div", { key: 'd3cbe389d4f5007c819a27fe54763de73053d5c3', class: "logo-well" }, h("slot", { key: '37044ab145a5be26ac15ac69840f3dc792fe2f15' }))));
+        return (h(Host, { key: '8101d42a68af7c5cfc90e6a13706e93823da27c3' }, h("div", { key: '2403b1d1f5b365cc2f7e37cb9387e9c2009efd5f', class: "logo-well" }, h("slot", { key: 'da5724c0fb823b8aa7f85fd7d95b94c2841c2f70' }))));
     }
     static get is() { return "af-logo-well"; }
     static get encapsulation() { return "shadow"; }

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: 'ffb96d7b9f49689a0d35cb54beaead039ca286f7', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, h("div", { key: 'fd20f9141c3cef43992756234531998900562e22', class: "nav-accordion" }, h("slot", { key: 'ea11fb80a9700b8ce5c661e31251add479692011' }))));
+        return (h(Host, { key: '9764092415b6f501cdbf38649e00d172bbbf8e12', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, h("div", { key: 'c8dbefa2fcffc74ade77432b4a97e0decbc15823', class: "nav-accordion" }, h("slot", { key: '688c01dc567713e5e1040b766f32f8d1a67b8d0f' }))));
     }
     static get is() { return "af-nav-accordion"; }
     static get encapsulation() { return "scoped"; }

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

@@ -22,6 +22,7 @@ export class AfNavAccordionItem {
         this.breakpoint = 'mobile';
         this.contentHeight = 0;
         this.hasTriggerSlot = false;
+        this.hasContent = false;
         this.handleTriggerClick = (event) => {
             // If it's a link, let it navigate (unless they clicked the chevron specifically)
             if (this.href) {
@@ -46,6 +47,16 @@ export class AfNavAccordionItem {
             this.measureContent();
         }
     }
+    /**
+     * Detect whether the host has any default-slot children — i.e. whether
+     * this item expands to reveal a sub-menu, or is just a simple link.
+     * We check in componentWillLoad (before render) because after render
+     * Stencil has appended its own output to the host and this.el.children
+     * would include that.
+     */
+    componentWillLoad() {
+        this.hasContent = Array.from(this.el.children).some((child) => !child.hasAttribute('slot'));
+    }
     componentDidLoad() {
         if (this.open) {
             this.measureContent();
@@ -69,12 +80,15 @@ export class AfNavAccordionItem {
         const contentStyle = {
             maxHeight: this.open ? `${this.contentHeight}px` : '0px'
         };
-        const hasDropdownContent = true; // Assume content is always present for accordion items
-        return (h(Host, { key: 'd0d5a77a9cf697837b850c72e4d6a59d2b9ec7cd', class: {
+        // Only render the chevron toggle when this item actually has
+        // 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: '959165c0c1ba72e3e3e33956862a47a9e080ce91', class: {
                 'is-open': this.open,
                 'is-disabled': this.disabled,
                 [`breakpoint-${this.breakpoint}`]: true
-            } }, h("div", { key: '42289d70de54e228b73cb45b8ca0e15510fd917d', 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))), 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: '20489f3802a9d702e06779ffd047a6adcb0eb880', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, h("div", { key: '39d7e3a3f3f544db582a91510bb5c721660861c8', class: "content", ref: (el) => (this.contentRef = el) }, h("slot", { key: 'b8f7e2c89facfe9a65225b6f16b1188ab979f4b8' }))))));
+            } }, h("div", { key: '7edc90a2480aa453ca8407acf31c6af8c44bc9ab', 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: '826855c6ca16a807c1f4dec417c771c8bbdc0966', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, h("div", { key: '9a614290248120ad48b7658fbeecb8d4e83e53db', class: "content", ref: (el) => (this.contentRef = el) }, h("slot", { key: 'dd22fe45b6ad6f7a7c39b1a0a1055421b7b80a51' }))))));
     }
     static get is() { return "af-nav-accordion-item"; }
     static get encapsulation() { return "scoped"; }
@@ -212,7 +226,8 @@ export class AfNavAccordionItem {
     static get states() {
         return {
             "contentHeight": {},
-            "hasTriggerSlot": {}
+            "hasTriggerSlot": {},
+            "hasContent": {}
         };
     }
     static get events() {

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

@@ -210,13 +210,9 @@
   color: var(--af-nav-item-secondary, var(--af-typography-body-default, #2b484f));
 }
 
-/* Icon rotation on hover for desktop primary with dropdown indicator */
-.hierarchy-primary.variant-01.breakpoint-desktop:hover ::slotted([slot="icon-right"]),
-.hierarchy-primary.variant-01.breakpoint-desktop.active ::slotted([slot="icon-right"]) {
-  transform: rotate(180deg);
-}
-
-/* Icon rotation on active for mobile primary with dropdown indicator */
+/* Icon rotation on active for mobile primary with dropdown indicator.
+   Desktop chevrons stay static — rotating on hover/active felt fidgety
+   and the open/closed state is already clear from the dropdown panel. */
 .hierarchy-primary.breakpoint-mobile.active ::slotted([slot="icon-right"]) {
   transform: rotate(180deg);
 }
@@ -237,7 +233,8 @@
 }
 
 /* Fallback media query for when breakpoint prop is not set */
-@media (max-width: 991px) {
+/* ≤ tablet */
+@media (max-width: 1023px) {
   :host([breakpoint="auto"]) .hierarchy-primary,
   :host(:not([breakpoint])) .hierarchy-primary {
     padding: 20px 12px;

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

@@ -2,6 +2,13 @@ import { h, Host } from "@stencil/core";
 /**
  * A generic navigation item component that can be used in navigation bars, menus, and sidebars.
  * Supports multiple hierarchy levels, variants, and states (active, hover).
+ *
+ * **Dropdown trigger a11y:** when the host carries a `data-dropdown="id"`
+ * attribute and has no `href`, the inner wrapper is promoted to
+ * `role="button"` with `tabindex="0"` and keyboard activation (Enter/Space),
+ * so keyboard users can open the matching dropdown panel just like a
+ * pointer click. The companion `af-navbar` keeps `aria-expanded` on the
+ * host in sync with the active dropdown.
  */
 export class AfNavItem {
     constructor() {
@@ -27,6 +34,17 @@ export class AfNavItem {
          * Whether this nav item is currently active/selected
          */
         this.active = false;
+        /**
+         * Promote Enter and Space on a focused trigger into a synthetic click
+         * so the surrounding af-navbar (which listens on click) treats the
+         * keyboard activation identically to a pointer click.
+         */
+        this.handleTriggerKeyDown = (event) => {
+            if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+                event.preventDefault();
+                this.el.click();
+            }
+        };
     }
     render() {
         const classes = {
@@ -34,13 +52,21 @@ export class AfNavItem {
             [`hierarchy-${this.hierarchy}`]: true,
             [`variant-${this.variant}`]: true,
             [`breakpoint-${this.breakpoint}`]: true,
-            'active': this.active
+            'active': this.active,
         };
-        const content = (h("div", { class: classes }, h("slot", { name: "icon-left" }), h("div", { class: "label-container" }, h("slot", null)), h("slot", { name: "icon-right" })));
+        const innerContent = [
+            h("slot", { name: "icon-left" }),
+            h("div", { class: "label-container" }, h("slot", null)),
+            h("slot", { name: "icon-right" }),
+        ];
         if (this.href) {
-            return (h(Host, null, h("a", { href: this.href, class: "nav-link" }, content)));
+            return (h(Host, null, h("a", { href: this.href, class: "nav-link" }, h("div", { class: classes }, innerContent))));
+        }
+        const isDropdownTrigger = this.el.hasAttribute('data-dropdown');
+        if (isDropdownTrigger) {
+            return (h(Host, null, h("div", { class: classes, role: "button", tabindex: 0, "aria-haspopup": "menu", onKeyDown: this.handleTriggerKeyDown }, innerContent)));
         }
-        return h(Host, null, content);
+        return h(Host, null, h("div", { class: classes }, innerContent));
     }
     static get is() { return "af-nav-item"; }
     static get encapsulation() { return "scoped"; }
@@ -157,4 +183,5 @@ export class AfNavItem {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

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: '6f7e20f1aa44b4b624411a4eb035a25d864632e6' }, h("div", { key: 'd3ac164858b0b6330e659baf660fc1d5de15f6da', class: classes }, this.heading && (h("div", { key: 'eb44abd861273745f894c2ccd16108458bb30837', class: "menu-header" }, h("h3", { key: 'c903ebe2ab7fa5aebf6a83b9559ab6ccae32a396', class: "menu-heading" }, this.heading))), h("div", { key: '606abd19e501a5962cd907da1afcbf697e0aad6c', class: "menu-items" }, h("slot", { key: 'a9399b33983fb425bad9ed5ae4a534c9aadd8884' })))));
+        return (h(Host, { key: '11f883b5cc420ee5cb99c723cc492b7346c3761d' }, h("div", { key: 'c3261a46a80fcbbdbfc3d82ee43e4cb31f6de4d8', class: classes }, this.heading && (h("div", { key: 'fd6f90c2bc9f34ef30efc22b49eb36bd6fd7ae52', class: "menu-header" }, h("h3", { key: '5e80c33bdd36dcc23d3445fd92af76f69f28a7c8', class: "menu-heading" }, this.heading))), h("div", { key: '6b62d13e30422c7f331350ec39ab2429f5a50294', class: "menu-items" }, h("slot", { key: '49740ab88d6c957395b902f98526b60353af4be5' })))));
     }
     static get is() { return "af-nav-menu"; }
     static get encapsulation() { return "scoped"; }

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

@@ -36,8 +36,13 @@
   margin-top: 16px;
 }
 
-/* Slotted NavMenu in columns - add border and spacing */
+/* Slotted NavMenu in columns - equal-width flex items with border and
+ * spacing. `flex: 1 1 0` gives every column the same width regardless of
+ * content; `min-width: 0` lets the content wrap within its column rather
+ * than forcing the whole row to grow. */
 .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);
   padding-right: 32px;
   padding-top: 16px;
@@ -55,6 +60,25 @@
   padding-right: 32px;
 }
 
+/* Tighter layout in the 992–1199px band where the desktop nav is still
+ * shown but horizontal room is limited — reduces gap/padding so the
+ * four-column layout doesn't read as cramped. */
+@media (max-width: 1199px) {
+  .nav-menu-nest.breakpoint-desktop .menu-columns {
+    gap: 20px;
+    padding: 20px 0 24px 24px;
+  }
+  .nav-menu-nest.breakpoint-desktop .menu-sidebar {
+    padding: 20px 24px 24px 20px;
+  }
+  .nav-menu-nest.breakpoint-desktop .menu-columns ::slotted(af-nav-menu) {
+    padding-right: 20px;
+  }
+  :host([show-sidebar-border]) .nav-menu-nest.breakpoint-desktop .menu-columns ::slotted(af-nav-menu:last-of-type) {
+    padding-right: 20px;
+  }
+}
+
 /* Mobile layout */
 .nav-menu-nest.breakpoint-mobile {
   flex-direction: column;

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

@@ -48,7 +48,7 @@ export class AfNavMenuNest {
             [`type-${this.type}`]: true,
             [`breakpoint-${this.breakpoint}`]: true
         };
-        return (h(Host, { key: '3d7ca814a3fbd4c435d6bb998303b4d1c8efbe24' }, h("div", { key: 'df70f98501743e2b6965add93d5ae864172ebab8', class: classes }, h("div", { key: '62cca1b06b0526c697724aa03337045e80e9f496', class: "menu-columns" }, h("slot", { key: 'febdb583fd0bd016a00dadf37a2e694a36ab2c83' })), h("div", { key: 'e70fb1c00cfe2cd6bc346c9b88eaffe360c5aee6', class: "menu-sidebar" }, h("slot", { key: '2f5425aeaf2be2ea14f880288472f7a88a8ac8b7', name: "sidebar" })))));
+        return (h(Host, { key: '8b256672578e162c65c1dd83b735f3fd8af8bb56' }, h("div", { key: '1f009f9f0986790e3b330eec97fa5e9f63604108', class: classes }, h("div", { key: 'db3540b0259d8474093e1d31c51e7ae1311700c0', class: "menu-columns" }, h("slot", { key: '06c90ac9305b96d64bc86fcf16ba639db31c4d08' })), h("div", { key: '5ad8cb59dd4c88c6dadf38aac88df6697541ad52', class: "menu-sidebar" }, h("slot", { key: '98a73cb259c755fa1efc70294772abf89d233581', name: "sidebar" })))));
     }
     static get is() { return "af-nav-menu-nest"; }
     static get encapsulation() { return "scoped"; }

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

@@ -28,11 +28,15 @@
 /* Sticky navbar that floats above the spacer */
 .navbar-container {
   position: fixed;
-  top: 32px;
+  /* Add safe-area-inset-top so the pill drops below the iOS notch / status bar
+     when the page uses viewport-fit=cover. Falls back to the original 32px. */
+  top: max(32px, env(safe-area-inset-top));
   left: 0;
   right: 0;
   z-index: 10;
-  padding: 0 80px;
+  /* Horizontal padding honours safe-area-inset-left/right for landscape on
+     notched devices; the inset is added on top of the existing 80px gutter. */
+  padding: 0 calc(80px + env(safe-area-inset-right)) 0 calc(80px + env(safe-area-inset-left));
   box-sizing: border-box;
 }
 
@@ -101,13 +105,19 @@
   align-items: center;
 }
 
-/* Dropdown container */
+/* Dropdown container. The container's top is raised 8px into what
+   was previously a blank gap between the nav pill and the panel, and
+   that 8px is absorbed as container top-padding — so the visible panel
+   stays put, but the hoverable region is now continuous between the
+   nav pill and the dropdown. Without this, the mouse crosses an
+   un-hovered strip on its way from trigger to panel and the navbar's
+   mouseleave handler fires a close. */
 .dropdown-container {
   position: absolute;
-  top: 108px;
+  top: 100px;
   left: 0;
   right: 0;
-  padding: 0 80px;
+  padding: 8px 80px 0;
   pointer-events: none;
   opacity: 0;
   transform: translateY(-8px);
@@ -142,7 +152,13 @@
   bottom: 0;
   background: var(--colour-background-base, #ffffff);
   z-index: 9;
-  padding: 100px 16px 24px 16px;
+  /* Full-viewport drawer: pad the top below the notch, the bottom above the
+     home indicator, and the sides away from landscape edge cutouts. */
+  padding:
+    max(100px, calc(100px + env(safe-area-inset-top)))
+    calc(16px + env(safe-area-inset-right))
+    max(24px, env(safe-area-inset-bottom))
+    calc(16px + env(safe-area-inset-left));
   overflow-y: auto;
   opacity: 0;
   pointer-events: none;
@@ -199,8 +215,8 @@
   }
 
   .navbar-container {
-    top: 24px;
-    padding: 0 40px;
+    top: max(24px, env(safe-area-inset-top));
+    padding: 0 calc(40px + env(safe-area-inset-right)) 0 calc(40px + env(safe-area-inset-left));
   }
 
   .navbar-left {
@@ -226,8 +242,8 @@
   }
 
   .navbar-container {
-    top: 16px;
-    padding: 0 16px;
+    top: max(16px, env(safe-area-inset-top));
+    padding: 0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));
     z-index: 11; /* Above mobile menu panel */
   }
 
@@ -277,7 +293,7 @@
 
   /* Mobile menu panel adjustments */
   .mobile-menu-panel {
-    padding-top: 88px; /* Accounts for navbar height */
+    padding-top: max(88px, calc(88px + env(safe-area-inset-top))); /* Accounts for navbar height + notch */
   }
 
   .mobile-button-container {
@@ -303,8 +319,8 @@
 }
 
 :host([force-mobile]) .navbar-container {
-  top: 16px;
-  padding: 0 16px;
+  top: max(16px, env(safe-area-inset-top));
+  padding: 0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));
   z-index: 11;
 }
 
@@ -353,7 +369,7 @@
 }
 
 :host([force-mobile]) .mobile-menu-panel {
-  padding-top: 88px;
+  padding-top: max(88px, calc(88px + env(safe-area-inset-top)));
 }
 
 :host([force-mobile]) .mobile-menu-panel.is-open {

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

@@ -58,9 +58,8 @@ export class AfNavbar {
         };
     }
     /**
-     * Open the dropdown matching the clicked `[data-dropdown]` trigger.
-     * Runs on capture so we intercept the click before nav-item's own
-     * navigation behaviour.
+     * Open the dropdown matching a `[data-dropdown]` trigger on click —
+     * acts as a toggle so keyboard/touch users can still dismiss it.
      */
     handleTriggerClick(event) {
         const target = event.target;
@@ -72,8 +71,52 @@ export class AfNavbar {
             return;
         event.preventDefault();
         event.stopPropagation();
+        this.cancelScheduledClose();
+        this.lastActiveTrigger = trigger;
         this.toggleDropdown(id);
     }
+    /**
+     * Open the dropdown matching a `[data-dropdown]` trigger on hover.
+     * Uses mouseover (which bubbles) and checks for the trigger ancestor.
+     */
+    handleHover(event) {
+        const target = event.target;
+        const trigger = target?.closest?.('[data-dropdown]');
+        if (!trigger || !this.el.contains(trigger))
+            return;
+        const id = trigger.getAttribute('data-dropdown');
+        if (!id || this.activeDropdown === id) {
+            this.cancelScheduledClose();
+            return;
+        }
+        this.cancelScheduledClose();
+        this.lastActiveTrigger = trigger;
+        this.openDropdown(id);
+    }
+    /**
+     * When the pointer leaves the navbar entirely (including any open
+     * dropdown panel), schedule a close. Re-entering cancels it.
+     */
+    handleHostLeave() {
+        this.scheduleClose();
+    }
+    handleHostEnter() {
+        this.cancelScheduledClose();
+    }
+    scheduleClose() {
+        // Close immediately on mouseleave. The css change in af-navbar.css
+        // bridges the former 8px dead-zone between the nav pill and the
+        // dropdown panel into a single hoverable region, so there's no
+        // longer a mid-transit mouseleave to swallow with a debounce.
+        this.cancelScheduledClose();
+        this.closeDropdown();
+    }
+    cancelScheduledClose() {
+        if (this.closeTimer !== undefined) {
+            clearTimeout(this.closeTimer);
+            this.closeTimer = undefined;
+        }
+    }
     /**
      * Handle clicks outside the navbar to close dropdowns
      */
@@ -84,35 +127,49 @@ export class AfNavbar {
         }
     }
     /**
-     * Keep the visibility of slotted dropdown panels in sync with the
-     * currently active dropdown. Each panel lives in the `dropdowns` slot
-     * and carries a `data-for` attribute that matches its trigger's id.
+     * Keep the visibility of slotted dropdown panels, and the `data-active`
+     * flag on their triggers, in sync with the currently active dropdown.
+     * Each panel lives in the `dropdowns` slot and carries a `data-for`
+     * attribute that matches its trigger's id.
      */
     componentDidLoad() {
-        this.syncDropdownPanels();
+        this.syncDropdownState();
     }
     componentDidUpdate() {
-        this.syncDropdownPanels();
+        this.syncDropdownState();
     }
-    syncDropdownPanels() {
-        const panels = this.el.querySelectorAll('[slot="dropdowns"] [data-for], [data-for]');
-        panels.forEach((panel) => {
+    syncDropdownState() {
+        this.el.querySelectorAll('[data-for]').forEach((panel) => {
             if (!this.el.contains(panel))
                 return;
             panel.hidden = panel.getAttribute('data-for') !== this.activeDropdown;
         });
+        this.el.querySelectorAll('[data-dropdown]').forEach((trigger) => {
+            if (!this.el.contains(trigger))
+                return;
+            const active = trigger.getAttribute('data-dropdown') === this.activeDropdown;
+            if (active)
+                trigger.setAttribute('data-active', '');
+            else
+                trigger.removeAttribute('data-active');
+            trigger.setAttribute('aria-expanded', active ? 'true' : 'false');
+        });
     }
     /**
-     * Handle escape key to close dropdowns
+     * Handle escape key to close dropdowns. If a dropdown is open, restore
+     * focus to the trigger that opened it so keyboard users don't lose
+     * their place in the tab order.
      */
     handleKeyDown(event) {
-        if (event.key === 'Escape') {
+        if (event.key === 'Escape' && this.activeDropdown !== null) {
+            const toFocus = this.lastActiveTrigger;
             this.closeDropdown();
+            toFocus?.focus?.();
         }
     }
     render() {
         const hasDropdown = this.activeDropdown !== null;
-        return (h(Host, { key: '9bd335da2d3dbae95c22d28a82747ca9a7473e1b', class: { 'has-dropdown-open': hasDropdown } }, h("div", { key: 'ce19c383cc51490b460dd10c43598f1dedf912ed', class: `navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}` }), h("nav", { key: '2efdf324378327710d4cb40b8b8acfa820746a05', class: "navbar-container" }, h("div", { key: '0af404d555c0c69b4d88ac24d9a37ab845f66927', class: "navbar theme-white" }, h("div", { key: '20cd6e5215e9e326e9cb128a1f6442584580130a', class: "navbar-left" }, h("div", { key: '6f54915c28bd36a41a402e94d69484d9515ab9ae', class: "logo" }, h("slot", { key: '27a2a236703414dcd341a86e826bcf956e078896', name: "logo" }, this.showDefaultLogo && h("af-logo", { key: '3fcf375f8c2ad79cea3cf47b6cda1215f9509f6e' }))), h("button", { key: '4f4ad8f1954bac594ca120c6c2ef636491a644a5', 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: 'bb541ead48855a7ef125afb10463b3ef39b215bf', class: `nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("slot", { key: '64760e34dbdc8e8b11840c4705639a971318414b', name: "start" }))), h("div", { key: '0b42ee972bf9325e9080374662c4b01cee912065', class: `navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("div", { key: '0236e0072f2cd65937afd2c1d1b98f9c9122005d', class: "nav-actions" }, h("slot", { key: '410e7bc54406db754f3478e92614f0835b3f3432', name: "end" })), h("div", { key: '6366c0e743fad848e768b4ec50a3cac4f9e1d89a', class: "nav-button" }, h("slot", { key: '62774a0c921181ebfe7c14037aaa3eb3c0bf0de1', name: "button" })))), h("div", { key: '7251669348de83743ecfa899575a7a7ca49a69a4', class: `dropdown-container ${hasDropdown ? 'is-open' : ''}` }, h("div", { key: 'f1a6cfd8624a45e7027842382ed2281455a6d224', class: "dropdown-panel theme-white" }, h("slot", { key: 'ba6317a597aded558de5a63c447dce037817def2', name: "dropdowns" })))), h("div", { key: '7eace5d5cce7939a076390b585d1b1fcc0d8e754', class: `mobile-menu-panel theme-white ${this.mobileMenuOpen ? 'is-open' : ''}` }, h("div", { key: 'c5ba7214853db2dce96cf35d4270a1e096eb9ff9', class: "mobile-button-container" }, h("slot", { key: 'c2f0f8109794c79e6af81682c5bf55b58bf6780e', name: "mobile-button" }, h("slot", { key: '3812764b1c9757d734b16b83f78242bdc3e394e2', name: "button" }))), h("div", { key: '3b9403ca3e9de2435d3d5cfa87393886639a9223', class: "mobile-menu-content" }, h("slot", { key: '3e85515b1ffdbad63ec8afe3caddab62121f789a', name: "mobile-menu" })))));
+        return (h(Host, { key: 'c92f2eb42ee2a82970d6d0173a2a2f06749519c4', class: { 'has-dropdown-open': hasDropdown } }, h("div", { key: 'c395ed813e5e0a2ee40005492d750c45ade71b52', class: `navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}` }), h("nav", { key: '172a9748e455a0eed9d0c403eec9264174330c52', class: "navbar-container" }, h("div", { key: '1208708b75f9a1c5f48c3301e2288553f85de763', class: "navbar theme-white" }, h("div", { key: '4aeea43bcf455af574450195bdc2612728609c8f', class: "navbar-left" }, h("div", { key: '833f39108ba12057f952b10cd082c2c96a2f0f0d', class: "logo" }, h("slot", { key: 'acd75c0ce9ed06ed0ca25347c90c3048851ec247', name: "logo" }, this.showDefaultLogo && h("af-logo", { key: '03efa58fd39bc47901749d0e573313b9cb5e62ec' }))), h("button", { key: '6cbeadaf552bed6ff5ea5b237173908446a67409', 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: 'a9a2adecf1cbbc99d2f40067fcc911d9bccd7a6f', class: `nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("slot", { key: '379e4561319583d8c06f7326b9e496f5c9e53563', name: "start" }))), h("div", { key: 'd81e54abc11534835c87c6d035bd3c6d1f532557', class: `navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("div", { key: 'e5e2b70ccf406e11d061cd178876ee939e028f76', class: "nav-actions" }, h("slot", { key: '3b268fd03cb76a820d7d0a17a08752eb2c92ba6e', name: "end" })), h("div", { key: 'b8320a6e68a3a63b2ea9864691a910879295f65f', class: "nav-button" }, h("slot", { key: 'c8d021843b572c57eb79162e8129bdea98503938', name: "button" })))), h("div", { key: 'a84301f02c46413d795aaa531ae7300d1a872957', class: `dropdown-container ${hasDropdown ? 'is-open' : ''}` }, h("div", { key: '86231e59e9e35b2b1d766ec51f5e72fbe0788882', class: "dropdown-panel theme-white" }, h("slot", { key: 'e57c57fc13dc9fd7194ac92063c1ddb1bd5d078f', name: "dropdowns" })))), h("div", { key: 'dd1ee04b61f0882a73e2254dee676cc94b4db63d', class: `mobile-menu-panel theme-white ${this.mobileMenuOpen ? 'is-open' : ''}` }, h("div", { key: '0fa91c6f29a2cdbd3a67788194f9dc0c7eb9d0e5', class: "mobile-button-container" }, h("slot", { key: 'f6766b2ca0001ad68ea47b3d2ba661a663612019', name: "mobile-button" }, h("slot", { key: 'efd0c11aeabf2cdc147317e98cb3429bd14ad31c', name: "button" }))), h("div", { key: '9d4d65978dfe70c22383e77fbc57c9889433b58b', class: "mobile-menu-content" }, h("slot", { key: '7be698d9e1460cc780a5df9f80b919c932af00a5', name: "mobile-menu" })))));
     }
     static get is() { return "af-navbar"; }
     static get encapsulation() { return "scoped"; }
@@ -203,6 +260,24 @@ export class AfNavbar {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "mouseover",
+                "method": "handleHover",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "mouseleave",
+                "method": "handleHostLeave",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "mouseenter",
+                "method": "handleHostEnter",
+                "target": undefined,
+                "capture": false,
+                "passive": true
             }, {
                 "name": "click",
                 "method": "handleDocumentClick",