@affinda/wc 0.0.20 → 0.0.22

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: '88b751702096b45e12c8d9394e69b6a0abd2122b' }, h("div", { key: '3bbdff4a72c4491b8a75359d18d0609f22811696', class: "logo-well" }, h("slot", { key: '6173141ef408944cd4e2b87e6cb40096a1ba3c08' }))));
+        return (h(Host, { key: '5af92f4b7a36ef209a7b93541590dfd210fba093' }, h("div", { key: 'd3cbe389d4f5007c819a27fe54763de73053d5c3', class: "logo-well" }, h("slot", { key: '37044ab145a5be26ac15ac69840f3dc792fe2f15' }))));
     }
     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: '891409dbe4cbb089085aa5b942c5f3c9f4a9bfe5', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, h("div", { key: 'b52051c0d7df92a5bc34400b55156fb638acbccc', class: "nav-accordion" }, h("slot", { key: '86cbd9894e0c8bb44d8001a53df01822b8806542' }))));
+        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' }))));
     }
     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.js

@@ -70,11 +70,11 @@ export class AfNavAccordionItem {
             maxHeight: this.open ? `${this.contentHeight}px` : '0px'
         };
         const hasDropdownContent = true; // Assume content is always present for accordion items
-        return (h(Host, { key: 'c60d17b2939f91ff7224f4eb156ed90645288c3c', class: {
+        return (h(Host, { key: 'd0d5a77a9cf697837b850c72e4d6a59d2b9ec7cd', class: {
                 'is-open': this.open,
                 'is-disabled': this.disabled,
                 [`breakpoint-${this.breakpoint}`]: true
-            } }, h("div", { key: '8fc7a72d88e6ab275ec9828098cc3aa70e2dcf58', 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: '4fb193591c092154364f98e0a1677c2dfee9cad9', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, h("div", { key: '1aa3437d93630a60dbce5163cdd1ceae1d234213', class: "content", ref: (el) => (this.contentRef = el) }, h("slot", { key: '2eea67c87eaccd58d180ec89ffae7f58785fb5c4' }))))));
+            } }, 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' }))))));
     }
     static get is() { return "af-nav-accordion-item"; }
     static get encapsulation() { return "scoped"; }
@@ -262,4 +262,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.js

@@ -158,4 +158,3 @@ export class AfNavItem {
         };
     }
 }
-//# sourceMappingURL=af-nav-item.js.map

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: '69414bf6a279bc971298e6f34a1b5c10ff499e93' }, h("div", { key: '5e800df5526d2b1c9de99c07bbbaae59c9b91594', class: classes }, this.heading && (h("div", { key: '13aee43c9f59c1a093eee10a191ff4571421a16f', class: "menu-header" }, h("h3", { key: '343ddced9ae2bd41b643e548ebf82d6601197e8b', class: "menu-heading" }, this.heading))), h("div", { key: '9827130b9385f200d8a6b85f89ff0a3722acb1ee', class: "menu-items" }, h("slot", { key: 'ba0e065fba624bd7d850f7e99fd88f572b008d3d' })))));
+        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' })))));
     }
     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.js

@@ -48,7 +48,7 @@ export class AfNavMenuNest {
             [`type-${this.type}`]: true,
             [`breakpoint-${this.breakpoint}`]: true
         };
-        return (h(Host, { key: '3b620840709c0494cc1bb11c1881824550b18611' }, h("div", { key: '7291119d7c8cebea30375f4c301885290413b4b4', class: classes }, h("div", { key: '270b6882e07b3b44bb3b4a0cd9c6b7b063faffa4', class: "menu-columns" }, h("slot", { key: 'f82540660813779579dfc1ba76bbc0e892cfae15' })), h("div", { key: 'e27257bae1cc4bd458c5f19a29d4bbaee41f5a5a', class: "menu-sidebar" }, h("slot", { key: '23e7fe51b7c1094edf89faca812e29bd74044381', name: "sidebar" })))));
+        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" })))));
     }
     static get is() { return "af-nav-menu-nest"; }
     static get encapsulation() { return "scoped"; }
@@ -127,4 +127,3 @@ export class AfNavMenuNest {
         };
     }
 }
-//# sourceMappingURL=af-nav-menu-nest.js.map

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

@@ -12,10 +12,10 @@ import { h, Host } from "@stencil/core";
  * - `start` - Primary navigation links (left side, desktop)
  * - `end` - Secondary/utility links (right side)
  * - `button` - Call-to-action button
- * - `dropdown-solutions` - Mega-menu for Solutions dropdown
- * - `dropdown-pricing` - Mega-menu for Pricing dropdown
- * - `dropdown-resources` - Mega-menu for Resources dropdown
- * - `dropdown` - Generic dropdown slot
+ * - `dropdowns` - One or more dropdown panels, each a `<div data-for="id">`
+ *   where `id` matches the `data-dropdown="id"` attribute on the trigger.
+ *   Clicking a trigger toggles the matching panel; only one is visible at
+ *   a time.
  * - `mobile-menu` - Mobile menu content (use af-nav-accordion for accordion menus)
  * - `mobile-button` - CTA button for mobile menu (appears at top)
  */
@@ -57,6 +57,23 @@ 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.
+     */
+    handleTriggerClick(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)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.toggleDropdown(id);
+    }
     /**
      * Handle clicks outside the navbar to close dropdowns
      */
@@ -66,6 +83,25 @@ export class AfNavbar {
             this.closeDropdown();
         }
     }
+    /**
+     * 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.
+     */
+    componentDidLoad() {
+        this.syncDropdownPanels();
+    }
+    componentDidUpdate() {
+        this.syncDropdownPanels();
+    }
+    syncDropdownPanels() {
+        const panels = this.el.querySelectorAll('[slot="dropdowns"] [data-for], [data-for]');
+        panels.forEach((panel) => {
+            if (!this.el.contains(panel))
+                return;
+            panel.hidden = panel.getAttribute('data-for') !== this.activeDropdown;
+        });
+    }
     /**
      * Handle escape key to close dropdowns
      */
@@ -76,7 +112,7 @@ export class AfNavbar {
     }
     render() {
         const hasDropdown = this.activeDropdown !== null;
-        return (h(Host, { key: '92f8f346f85a3dc591a97bde173442b963b37e5c', class: { 'has-dropdown-open': hasDropdown } }, h("div", { key: '059a556fb84aadf47f5e5cc78adf39314f35e7cd', class: `navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}` }), h("nav", { key: 'a724927e2b4e571efcc90baf2bc95047ee9e9e5b', class: "navbar-container" }, h("div", { key: '8459055c4d73dd08cf9e411e39b6a5efd281db33', class: "navbar theme-white" }, h("div", { key: '1672a840e29672b08bdd097decc5d3704f680b53', class: "navbar-left" }, h("div", { key: '6a7dd0e111b1afb93815d92c7ea401c6041b786e', class: "logo" }, h("slot", { key: '49706feeb1ffcf21bccb033baf717e29ed0f6809', name: "logo" }, this.showDefaultLogo && h("af-logo", { key: 'c4894daec4529effc143cd015dc298e3fe68bde6' }))), h("button", { key: '5cc3605bfd31104a8357a270b71bae0d539d459c', class: "mobile-menu-toggle", onClick: this.toggleMobileMenu, "aria-label": "Toggle navigation menu", "aria-expanded": this.mobileMenuOpen ? 'true' : 'false' }, this.mobileMenuOpen ? (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M18 6L6 18M6 6l12 12", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M3 12h18M3 6h18M3 18h18", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '37cb78db1c5385f069988d2236aca7c916d24ebe', class: `nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("slot", { key: '446e40b871d0e9c689405b234d15e5a9043058bf', name: "start" }))), h("div", { key: '1112576571e29edaa6e6c33f083b1a058fdaef64', class: `navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("div", { key: '036a55766ab0e4bbc566b6cfbe6513ea0656ccb3', class: "nav-actions" }, h("slot", { key: '01b2df1708553d51475941e109c8f23652d7e0ff', name: "end" })), h("div", { key: '4429b2e026ec6b730d8c17cf9f716ad5a6a3c050', class: "nav-button" }, h("slot", { key: '0a290b167e6d32441770df9d4f6b3e6104552b77', name: "button" })))), h("div", { key: '08c1695708ddf0ef0a1a18bfbd1c45d66ef1bf4f', class: `dropdown-container ${hasDropdown ? 'is-open' : ''}` }, h("div", { key: 'b54b6dbd58888e9a844b615337ba7ee62bca00c0', class: "dropdown-panel theme-white" }, h("slot", { key: '0f72aff472972bf323e1891518d99eb5d92d2916', name: "dropdown-solutions" }), h("slot", { key: '1f7bf6bb90b334d19737e011e759787105a91fa5', name: "dropdown-pricing" }), h("slot", { key: '52272d982908c702c3447d9b2b7bddcf2cc030df', name: "dropdown-resources" }), h("slot", { key: 'ba1ea577efa7b2a9af9b8a50253eae8eef661bd7', name: "dropdown" })))), h("div", { key: '21f14e04f0c351733f7452dc1c10b6abfb26e1ce', class: `mobile-menu-panel theme-white ${this.mobileMenuOpen ? 'is-open' : ''}` }, h("div", { key: '22565f6b52971a5fe4235c8f9e2fce4ee5a2d006', class: "mobile-button-container" }, h("slot", { key: '2b01297d62d6cca6a58b128701a5a14a02d91e2d', name: "mobile-button" }, h("slot", { key: 'd755113cabd174a46acd6d2d5b65d9454964b759', name: "button" }))), h("div", { key: '31f63fa53ae2c12b5f0f19e7b2235d94f09f50cb', class: "mobile-menu-content" }, h("slot", { key: '748e5a320fb5b5940f1134e332738dccf015748e', name: "mobile-menu" })))));
+        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" })))));
     }
     static get is() { return "af-navbar"; }
     static get encapsulation() { return "scoped"; }
@@ -162,6 +198,12 @@ export class AfNavbar {
     static get elementRef() { return "el"; }
     static get listeners() {
         return [{
+                "name": "click",
+                "method": "handleTriggerClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
                 "name": "click",
                 "method": "handleDocumentClick",
                 "target": "document",
@@ -176,4 +218,3 @@ export class AfNavbar {
             }];
     }
 }
-//# sourceMappingURL=af-navbar.js.map

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: 'f8c10410f86461a7c91c7a4ec581df66378a0064', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, h("span", { key: 'd84893da541132b58c86575aeec8975b3d583e92', class: {
+        return (h(Host, { key: '7ab56ba9abbba16278f5bf0b59649bc7011d4778', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, h("span", { key: '402e3fea84e76f66d631a79bc789134cc7fae8c2', class: {
                 'badge': true,
                 [`variant-${this.variant}`]: true,
             }, style: badgeStyle }, this.number)));
@@ -62,7 +62,7 @@ export class AfNumberBadge {
                     "references": {
                         "NumberBadgeNumber": {
                             "location": "local",
-                            "path": "/home/elle/affinda-ui/packages/wc/src/components/af-number-badge/af-number-badge.tsx",
+                            "path": "/home/andrew/affinda-ui/packages/wc/src/components/af-number-badge/af-number-badge.tsx",
                             "id": "src/components/af-number-badge/af-number-badge.tsx::NumberBadgeNumber"
                         }
                     }
@@ -88,7 +88,7 @@ export class AfNumberBadge {
                     "references": {
                         "NumberBadgeVariant": {
                             "location": "local",
-                            "path": "/home/elle/affinda-ui/packages/wc/src/components/af-number-badge/af-number-badge.tsx",
+                            "path": "/home/andrew/affinda-ui/packages/wc/src/components/af-number-badge/af-number-badge.tsx",
                             "id": "src/components/af-number-badge/af-number-badge.tsx::NumberBadgeVariant"
                         }
                     }
@@ -128,4 +128,3 @@ export class AfNumberBadge {
         };
     }
 }
-//# sourceMappingURL=af-number-badge.js.map

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: '62410fb52d8010a3544e4aff10587e656162eb50' }, h("div", { key: '35ecb7c0c89d305456aa07a1db34fa0cf41e9181', class: {
+        return (h(Host, { key: 'e831de02f8d1263448cf0441085cee677230374e' }, h("div", { key: '57eec77244c1f0c2a1a763d04b22751651069dbc', 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: 'd5c61725e5797df2d16555b2035aa58477622b07', class: "progress-line__background" }), h("div", { key: '983d07564432e4f6699dd820a304fd10935e952d', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
+            }, 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}%` } }))));
     }
     static get is() { return "af-progress-line"; }
     static get encapsulation() { return "scoped"; }
@@ -83,4 +83,3 @@ export class AfProgressLine {
         };
     }
 }
-//# sourceMappingURL=af-progress-line.js.map

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

@@ -41,7 +41,7 @@ export class AfRadio {
             'checked': this.checked,
             'disabled': this.disabled
         };
-        return (h(Host, { key: 'f01068a7c7d1ddb47dbb5e55575098c6646218cc' }, h("label", { key: '2e57f31f11985a0b93d1b36318b3e51443b9b8a1', class: radioClasses, onClick: this.handleClick }, h("input", { key: 'eee5a87c24e16d7446ddc93a27f278a7be7043b8', type: "radio", class: "input", checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, tabindex: this.disabled ? -1 : 0 }), h("span", { key: '0c0dd903fcdb3d81e5cca01d17173f48049f19fe', class: controlClasses }, h("span", { key: '7c56dc92603d06dcb55fc1d44e2821c6c785cec0', class: "dot" })), h("span", { key: 'af9dc16e499f10707ebb078263fc865085083759', class: "label" }, h("slot", { key: 'c19a5db6ddd72b93f2abb46c569a58e4203506b2' })))));
+        return (h(Host, { key: 'c14ec6c7bb198a672322642d6d1871137efa1162' }, h("label", { key: 'e1b1d0b8fd4baa6d21a5bba6e5ed7e076d934bb1', class: radioClasses, onClick: this.handleClick }, h("input", { key: '5069d766a6a22e0597ab4d9121c5c3f4c64bb15b', type: "radio", class: "input", checked: this.checked, disabled: this.disabled, name: this.name, value: this.value, tabindex: this.disabled ? -1 : 0 }), h("span", { key: 'bebf784c260126ae0bd37d74b0a9497d5ef893e2', class: controlClasses }, h("span", { key: 'c6c83eb516b1dbb215de7e857a94e08a07c33b22', class: "dot" })), h("span", { key: '047473f2a575284bb8321e54593cba900855fed3', class: "label" }, h("slot", { key: '534b3082f8731e7d8e744a39d2adfec44d577d5b' })))));
     }
     static get is() { return "af-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -157,4 +157,3 @@ export class AfRadio {
     }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=af-radio.js.map

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-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);
+  --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);
   
   /* 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-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);
+  --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);
   
   /* 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-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);
+  --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);
   
   /* 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-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);
+  --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);
   
   /* 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-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);
+  --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);
   
   /* 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: 'd08857f705f1719acd32eef6eb4e4262f2154a60' });
-        return (h(Host, { key: 'b7b0793c5ed8011582774bfb30758ef1883731a0' }, h("div", { key: 'fe61281c91d794df34b64a48d7142ad8cd70a204', class: `section padding-${this.padding} theme-${this.theme}` }, this.container ? (h("af-container", null, content)) : content)));
+        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)));
     }
     static get is() { return "af-section"; }
     static get encapsulation() { return "scoped"; }
@@ -93,4 +93,3 @@ export class AfSection {
         };
     }
 }
-//# sourceMappingURL=af-section.js.map

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: '5a0c140b0fedd180f13574de1db5ac4fe1652e08', class: classes }, h("slot", { key: '8d0dbb6fde0e28ffb98cd1721f7ad1b917451826' })));
+        return (h(Host, { key: 'f1325c8342cdd48103996664aa410ba6da9c6566', class: classes }, h("slot", { key: '0ce4cacaa80ef10104549af9fa9068ea7d28a406' })));
     }
     static get is() { return "af-show"; }
     static get encapsulation() { return "shadow"; }
@@ -85,4 +85,3 @@ export class AfShow {
         };
     }
 }
-//# sourceMappingURL=af-show.js.map

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

@@ -29,7 +29,7 @@ export class AfSocialLink {
         }
     }
     render() {
-        return (h(Host, { key: 'a34a9d296e864b2998ea3a6af258bce827544194' }, h("a", { key: '711f8ee451a6b2a07588e063e179edac7214e439', href: this.href, target: "_blank", rel: "noopener noreferrer", class: "social-link", "aria-label": this.label }, this.renderIcon())));
+        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())));
     }
     static get is() { return "af-social-link"; }
     static get encapsulation() { return "scoped"; }
@@ -108,4 +108,3 @@ export class AfSocialLink {
         };
     }
 }
-//# sourceMappingURL=af-social-link.js.map

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

@@ -34,7 +34,7 @@ export class AfSpacer {
                 style.height = sizeValue;
             }
         }
-        return h(Host, { key: 'c60e80c17eda7eeaa684768dd13550baf58be226', style: style, "aria-hidden": "true" });
+        return h(Host, { key: '17bd07b1aeb2346f614d3cf5c663f545622a82af', style: style, "aria-hidden": "true" });
     }
     static get is() { return "af-spacer"; }
     static get encapsulation() { return "shadow"; }
@@ -117,4 +117,3 @@ export class AfSpacer {
         };
     }
 }
-//# sourceMappingURL=af-spacer.js.map

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: '1e72b3613568a42bcb4a603825ff716d2fdab8aa' });
+        const content = h("slot", { key: 'bb153079c8b48a5f2a8bb093f3344f1ed58448f0' });
         // 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: '334e732a7fe24da3d0886181126ff89403dfc3b0' }, h("div", { key: '1d19ad0564ddd961530be370875248e81f12dc3a', class: `split-section padding-${this.padding} top-theme-${this.topTheme}`, style: backgroundStyle }, this.container ? (h("af-container", null, content)) : content)));
+        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)));
     }
     static get is() { return "af-split-section"; }
     static get encapsulation() { return "scoped"; }
@@ -142,4 +142,3 @@ export class AfSplitSection {
         };
     }
 }
-//# sourceMappingURL=af-split-section.js.map

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: 'd2c22f8cb4b9a822933146ac8d16c7ffc6d64a20', style: style }, h("slot", { key: '7c43d9510e06547e5ca3bc96c201340d73439884' })));
+        return (h(Host, { key: '8762617789ee74b277ccc75e01a11e0722d46d71', style: style }, h("slot", { key: '81cacfb758661b513d8e16db5d23a9a14c1d5c16' })));
     }
     static get is() { return "af-stack"; }
     static get encapsulation() { return "shadow"; }
@@ -194,4 +194,3 @@ export class AfStack {
         };
     }
 }
-//# sourceMappingURL=af-stack.js.map

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

@@ -0,0 +1,54 @@
+:host {
+  display: flex;
+  width: 100%;
+  position: relative;
+  max-width: 1120px;
+  margin: 0 auto;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
+}
+
+:host(.stepper--vertical) {
+  flex-direction: column;
+  max-width: 680px;
+  gap: 40px;
+}
+
+/* Horizontal connector — thin line running across the row of badges. */
+.stepper--horizontal .stepper__connector {
+  position: absolute;
+  top: 23px; /* aligned to badge centre (badge height 48px / 2 = 24, minus 1px for line) */
+  left: 8%;
+  right: 8%;
+  height: 2px;
+  background: var(--colour-brand-inkwell, #14343b);
+  opacity: 0.25;
+  z-index: 0;
+}
+
+.stepper--vertical .stepper__connector {
+  position: absolute;
+  top: 24px;
+  bottom: 24px;
+  left: 23px;
+  width: 2px;
+  background: var(--colour-brand-inkwell, #14343b);
+  opacity: 0.25;
+  z-index: 0;
+}
+
+@media (max-width: 767px) {
+  .stepper--horizontal {
+    flex-direction: column;
+    gap: 32px;
+  }
+  .stepper--horizontal .stepper__connector {
+    top: 24px;
+    bottom: 24px;
+    left: 23px;
+    right: auto;
+    width: 2px;
+    height: auto;
+  }
+}

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

@@ -0,0 +1,82 @@
+import { h, Host } from "@stencil/core";
+/**
+ * Stepper composite for "Sign up / Upload / See results"-style marketing
+ * flows. Renders children `af-stepper-step` elements in a horizontal row
+ * (desktop) or vertical stack (mobile), with a connector line between badges.
+ *
+ * Matches Webflow's `.stepper` pattern — numbered circled badges, a spine
+ * connector, and centered step text.
+ *
+ * @example
+ * ```html
+ * <af-stepper>
+ *   <af-stepper-step>
+ *     <h3 slot="heading">Sign up for free</h3>
+ *     <p slot="body">No sales calls, no credit cards.</p>
+ *   </af-stepper-step>
+ *   <af-stepper-step>...</af-stepper-step>
+ *   <af-stepper-step>...</af-stepper-step>
+ * </af-stepper>
+ * ```
+ *
+ * @slot - `af-stepper-step` elements.
+ */
+export class AfStepper {
+    constructor() {
+        /** Layout orientation. Horizontal on desktop, auto-stacks on mobile. */
+        this.orientation = 'horizontal';
+    }
+    componentDidLoad() {
+        this.assignIndices();
+    }
+    assignIndices() {
+        const steps = Array.from(this.el.querySelectorAll('af-stepper-step'));
+        steps.forEach((step, i) => {
+            // Set via property so Stencil reactively re-renders the badge.
+            // Only overwrite when the consumer hasn't explicitly set one.
+            if (step.index == null || step.index === 1) {
+                step.index = i + 1;
+            }
+        });
+    }
+    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' })));
+    }
+    static get is() { return "af-stepper"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-stepper.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-stepper.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout orientation. Horizontal on desktop, auto-stacks on mobile."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}