@affinda/wc 0.0.23 → 0.0.24

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

@@ -72,6 +72,7 @@ export class AfNavbar {
         event.preventDefault();
         event.stopPropagation();
         this.cancelScheduledClose();
+        this.lastActiveTrigger = trigger;
         this.toggleDropdown(id);
     }
     /**
@@ -89,6 +90,7 @@ export class AfNavbar {
             return;
         }
         this.cancelScheduledClose();
+        this.lastActiveTrigger = trigger;
         this.openDropdown(id);
     }
     /**
@@ -102,11 +104,12 @@ export class AfNavbar {
         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.closeTimer = window.setTimeout(() => {
-            this.closeDropdown();
-            this.closeTimer = undefined;
-        }, 150);
+        this.closeDropdown();
     }
     cancelScheduledClose() {
         if (this.closeTimer !== undefined) {
@@ -149,19 +152,24 @@ export class AfNavbar {
                 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: 'c32c831816370318e96e3718771e3d7548b409d1', class: { 'has-dropdown-open': hasDropdown } }, h("div", { key: 'aa9f76febd84bb572d0caef2a12e6c81c812bc3c', class: `navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}` }), h("nav", { key: '11c9fe9f56bd29e332c8dbff90869f01fb68b230', class: "navbar-container" }, h("div", { key: '86ca618d8132e093f9ed24bdf3b69d6529e027e2', class: "navbar theme-white" }, h("div", { key: 'c0f70dd6b6886420c0ccda203d9d7888542f4ff3', class: "navbar-left" }, h("div", { key: 'f57a4cd8ca86fc8ab30c399db2dde7f6db1a2d1c', class: "logo" }, h("slot", { key: '77ce3ded3ba51f7de8c9ad9630a7d465ed226b34', name: "logo" }, this.showDefaultLogo && h("af-logo", { key: 'c76ed4086ee57847b7d9408d494ca8a8da81455d' }))), h("button", { key: '893ebd73a54f246b930fa96b8410ce57a09fd4cc', 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: '9a2031b367353199ed38c72d6a3b4296b0a84869', class: `nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("slot", { key: 'c3e7c3839b3ff3759cb6278e90959645ff4d1c12', name: "start" }))), h("div", { key: '58a188b798e04d417d73e729f1841a2565a32b3c', class: `navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("div", { key: '9223aee05e3fc4cd8c1ca459a2f622cc0201fd39', class: "nav-actions" }, h("slot", { key: '2298ad190f85124b269bf6018002a00fee5d2ecf', name: "end" })), h("div", { key: 'd70b2c15cb13298a917d8e4d9fafc4269da90cd1', class: "nav-button" }, h("slot", { key: '07680f4f58fef0406974f7bf413f11a0ecb3007f', name: "button" })))), h("div", { key: 'f78f9df13daf98a055885e26494a34e59881f76c', class: `dropdown-container ${hasDropdown ? 'is-open' : ''}` }, h("div", { key: 'dee249523881e2053c95dea7403554d548da77df', class: "dropdown-panel theme-white" }, h("slot", { key: '69fb3e2188069cdc1bf0c867f075345cce22c68b', name: "dropdowns" })))), h("div", { key: '4c5a00f98c52e06909813bfae898606e42004a47', class: `mobile-menu-panel theme-white ${this.mobileMenuOpen ? 'is-open' : ''}` }, h("div", { key: 'f568518c415a9d77f6a24cafb5b9e369470cc471', class: "mobile-button-container" }, h("slot", { key: '750a88950c3156e36e49c5143f67f074a14b962f', name: "mobile-button" }, h("slot", { key: 'fa461eb88d7b84bd133b1e2dfcad0e9c2987c12b', name: "button" }))), h("div", { key: 'bb39d0a53c7031fcdb5996909fc1cf17c9b9776f', class: "mobile-menu-content" }, h("slot", { key: 'ed175d7e3dad99a852fd63437635e4ea22c24b48', 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"; }

package/dist/collection/components/af-number-badge/af-number-badge.js

@@ -34,7 +34,7 @@ export class AfNumberBadge {
             height: `${this.size}px`,
             fontSize: `${fontSize}px`,
         };
-        return (h(Host, { key: '7ab56ba9abbba16278f5bf0b59649bc7011d4778', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, h("span", { key: '402e3fea84e76f66d631a79bc789134cc7fae8c2', class: {
+        return (h(Host, { key: '9966db4536a1ce0b5e35a65aa63ea5c0771e8a9a', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, h("span", { key: 'a963bb7feea690d898228a3a0d076e079994cdf4', class: {
                 'badge': true,
                 [`variant-${this.variant}`]: true,
             }, style: badgeStyle }, this.number)));

package/dist/collection/components/af-progress-line/af-progress-line.js

@@ -21,10 +21,10 @@ export class AfProgressLine {
         // Clamp progress between 0 and 1
         const clampedProgress = Math.max(0, Math.min(1, this.progress));
         const progressPercent = clampedProgress * 100;
-        return (h(Host, { key: 'e831de02f8d1263448cf0441085cee677230374e' }, h("div", { key: '57eec77244c1f0c2a1a763d04b22751651069dbc', class: {
+        return (h(Host, { key: '9a6fac61d82f79f36a4cb60e929e96449de232a8' }, h("div", { key: '1d535263ab6274466280caebcaf52052adfbb4b5', class: {
                 'progress-line': true,
                 [`progress-line--${this.orientation}`]: true,
-            }, role: "progressbar", "aria-valuenow": Math.round(progressPercent), "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { key: '9b3229746fef82f644953a189959c109104be511', class: "progress-line__background" }), h("div", { key: '0f5ec3a4a51b350b3b9cb26ea446167a40ce4ae4', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
+            }, role: "progressbar", "aria-valuenow": Math.round(progressPercent), "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { key: '6f479550cd91f8c4f5a256546ed80a09498d6bba', class: "progress-line__background" }), h("div", { key: 'b0f6e719cdede111f7a15651d9f5289456dbddf4', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
     }
     static get is() { return "af-progress-line"; }
     static get encapsulation() { return "scoped"; }

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

@@ -74,9 +74,9 @@
   --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
   
   /* Button - Tertiary */
-  --af-button-ghost-text: var(--colour-brand-inkwell, #14343b);
-  --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);
-  --af-button-ghost-stroke: var(--colour-brand-soft-clay, #B09670);
+  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #B09670);
   
   /* Input tokens */
   --af-input-label: var(--af-typography-body-dark);
@@ -148,9 +148,9 @@
   --af-button-secondary-stroke: var(--colour-brand-white, #ffffff);
   
   /* Button - Tertiary */
-  --af-button-ghost-text: var(--colour-brand-white, #ffffff);
-  --af-button-ghost-icon: var(--colour-brand-white, #ffffff);
-  --af-button-ghost-stroke: var(--colour-brand-ice, #A6FFFB);
+  --af-button-tertiary-text: var(--colour-brand-white, #ffffff);
+  --af-button-tertiary-icon: var(--colour-brand-white, #ffffff);
+  --af-button-tertiary-stroke: var(--colour-brand-ice, #A6FFFB);
   
   /* Input tokens */
   --af-input-label: var(--af-typography-body-dark);
@@ -222,9 +222,9 @@
   --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
   
   /* Button - Tertiary */
-  --af-button-ghost-text: var(--colour-brand-inkwell, #14343b);
-  --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);
-  --af-button-ghost-stroke: var(--colour-brand-soft-clay, #B09670);
+  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #B09670);
   
   /* Input tokens */
   --af-input-label: var(--af-typography-body-dark);
@@ -296,9 +296,9 @@
   --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
   
   /* Button - Tertiary */
-  --af-button-ghost-text: var(--colour-brand-inkwell, #14343b);
-  --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);
-  --af-button-ghost-stroke: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-stroke: var(--colour-brand-inkwell, #14343b);
   
   /* Input tokens */
   --af-input-label: var(--af-typography-body-dark);
@@ -370,9 +370,9 @@
   --af-button-secondary-stroke: var(--colour-brand-inkwell, #14343b);
   
   /* Button - Tertiary */
-  --af-button-ghost-text: var(--colour-brand-inkwell, #14343b);
-  --af-button-ghost-icon: var(--colour-brand-inkwell, #14343b);
-  --af-button-ghost-stroke: var(--colour-brand-soft-clay, #b09670);
+  --af-button-tertiary-text: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-icon: var(--colour-brand-inkwell, #14343b);
+  --af-button-tertiary-stroke: var(--colour-brand-soft-clay, #b09670);
   
   /* Input tokens */
   --af-input-label: var(--af-typography-body-dark);

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

@@ -13,8 +13,8 @@ export class AfSection {
         this.container = true;
     }
     render() {
-        const content = h("slot", { key: 'a67ae3c0d94b8b4024ae3cb7c5c0e4f916e1f309' });
-        return (h(Host, { key: 'dcdea86aa5b6ce4e3cfe951a90fb441f8a16f7e4' }, h("div", { key: '478836c1570fe89c73405651e03828104a6c069f', class: `section padding-${this.padding} theme-${this.theme}` }, this.container ? (h("af-container", null, content)) : content)));
+        const content = h("slot", { key: 'ae8f8342af2711fb23030adbd27d08ce89578ecb' });
+        return (h(Host, { key: 'bc6fba7cc81e35662dfb68621021136065b6e198' }, h("div", { key: '46d1700bb966cafb88a78ecc750d558b16942e79', class: `section padding-${this.padding} theme-${this.theme}` }, this.container ? (h("af-container", null, content)) : content)));
     }
     static get is() { return "af-section"; }
     static get encapsulation() { return "scoped"; }

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

@@ -7,11 +7,11 @@
 }
 
 /* Show above breakpoints (hidden below) */
-/* sm: 375px */
+/* sm: 480px (small) */
 :host(.show-above-sm) {
   display: none;
 }
-@media (min-width: 375px) {
+@media (min-width: 480px) {
   :host(.show-above-sm) {
     display: contents;
   }
@@ -48,8 +48,8 @@
 }
 
 /* Show below breakpoints (hidden at or above) */
-/* sm: 375px */
-@media (min-width: 375px) {
+/* sm: 480px (small) */
+@media (min-width: 480px) {
   :host(.show-below-sm) {
     display: none;
   }

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

@@ -18,7 +18,7 @@ export class AfShow {
             [`show-above-${this.above}`]: !!this.above,
             [`show-below-${this.below}`]: !!this.below,
         };
-        return (h(Host, { key: 'f1325c8342cdd48103996664aa410ba6da9c6566', class: classes }, h("slot", { key: '0ce4cacaa80ef10104549af9fa9068ea7d28a406' })));
+        return (h(Host, { key: 'b88e3f6dedeb0a8cc4f69b3c9915a4fb0a115df7', class: classes }, h("slot", { key: '55f89874b70bbcc636e615556f11e99baeafad73' })));
     }
     static get is() { return "af-show"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/af-social-link/af-social-link.js

@@ -29,7 +29,7 @@ export class AfSocialLink {
         }
     }
     render() {
-        return (h(Host, { key: '1637b2b00bf3808ad48979fde1248a6baae16d50' }, h("a", { key: '57cec6aa80ee7cedccdd03ac40f4931c6012bb48', href: this.href, target: "_blank", rel: "noopener noreferrer", class: "social-link", "aria-label": this.label }, this.renderIcon())));
+        return (h(Host, { key: 'd8875f8b62e560cd11e71f6c6b2baf219aef96d2' }, h("a", { key: 'a6e5c064945372150306b6aeb294b13659b565f4', href: this.href, target: "_blank", rel: "noopener noreferrer", class: "social-link", "aria-label": this.label }, this.renderIcon())));
     }
     static get is() { return "af-social-link"; }
     static get encapsulation() { return "scoped"; }

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

@@ -34,7 +34,7 @@ export class AfSpacer {
                 style.height = sizeValue;
             }
         }
-        return h(Host, { key: '17bd07b1aeb2346f614d3cf5c663f545622a82af', style: style, "aria-hidden": "true" });
+        return h(Host, { key: 'e3d8bff163b92ef7caf5802947556444ce2f1a48', style: style, "aria-hidden": "true" });
     }
     static get is() { return "af-spacer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/af-split-section/af-split-section.css

@@ -35,6 +35,7 @@
    Mobile Adjustments
    ========================================================================== */
 
+/* mobile-only */
 @media (max-width: 768px) {
   .padding-tight {
     padding: 32px 0;

package/dist/collection/components/af-split-section/af-split-section.js

@@ -26,14 +26,14 @@ export class AfSplitSection {
         this.container = true;
     }
     render() {
-        const content = h("slot", { key: 'bb153079c8b48a5f2a8bb093f3344f1ed58448f0' });
+        const content = h("slot", { key: 'bc307598c8f20de642f691d1bd02269cbd34738c' });
         // Create the split background using CSS gradient
         const topColor = themeColors[this.topTheme];
         const bottomColor = themeColors[this.bottomTheme];
         const backgroundStyle = {
             background: `linear-gradient(to bottom, ${topColor} 0%, ${topColor} 50%, ${bottomColor} 50%, ${bottomColor} 100%)`
         };
-        return (h(Host, { key: 'ec4824dfd25f5e9122d7cfd4ad4df8768b949028' }, h("div", { key: '4de289849c8cb6cb7b70446fe6c4b8ca0f5ae648', class: `split-section padding-${this.padding} top-theme-${this.topTheme}`, style: backgroundStyle }, this.container ? (h("af-container", null, content)) : content)));
+        return (h(Host, { key: 'd96957b3dc7f8daea9f3480269fde7116c587461' }, h("div", { key: 'f274ae8e50c5b1fa9f59b54a1bce3dbb5408a77b', class: `split-section padding-${this.padding} top-theme-${this.topTheme}`, style: backgroundStyle }, this.container ? (h("af-container", null, content)) : content)));
     }
     static get is() { return "af-split-section"; }
     static get encapsulation() { return "scoped"; }

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

@@ -55,7 +55,7 @@ export class AfStack {
             justifyContent: justifyMap[this.justify],
             flexWrap: this.wrap ? 'wrap' : 'nowrap',
         };
-        return (h(Host, { key: '8762617789ee74b277ccc75e01a11e0722d46d71', style: style }, h("slot", { key: '81cacfb758661b513d8e16db5d23a9a14c1d5c16' })));
+        return (h(Host, { key: '72e0cbdd57b5f300e1957549d225f72ae4cdc2d2', style: style }, h("slot", { key: '9f71bea28b78fa1fcb414e5f3e2b9f9e68d7962d' })));
     }
     static get is() { return "af-stack"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,6 +38,7 @@
   z-index: 0;
 }
 
+/* ≤ mobile */
 @media (max-width: 767px) {
   .stepper--horizontal {
     flex-direction: column;

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

@@ -40,7 +40,7 @@ export class AfStepper {
         });
     }
     render() {
-        return (h(Host, { key: '857011a248f8c9adc46c3a1c69b55cd33f0f7b36', class: `stepper stepper--${this.orientation}` }, h("div", { key: '5654c1431e991475429e1594832509236dc1a3ba', class: "stepper__connector", "aria-hidden": "true" }), h("slot", { key: '23293d2c3cc463a714f1acdfad2a3fb6e1d3cf0a' })));
+        return (h(Host, { key: 'a9c2328058c0495bbec34d3a08deb0375e2f6dae', class: `stepper stepper--${this.orientation}` }, h("div", { key: '91fb9864b86a9c2b44e84db1356099ebf5d119f3', class: "stepper__connector", "aria-hidden": "true" }), h("slot", { key: '680bf938f006e4696882aa55f7ca6fa02bcf4db4' })));
     }
     static get is() { return "af-stepper"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-stepper-step/af-stepper-step.css

@@ -71,6 +71,7 @@
   margin-bottom: 0;
 }
 
+/* ≤ mobile */
 @media (max-width: 767px) {
   :host {
     flex-direction: row;