@affinda/wc 0.0.24 → 0.0.26

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: '98aab1aa94a068796ee7abdd00d44cac516f6be1', style: style }, h("slot", { key: '2c700f8333f3c010344d499b7d8bc5126d139745' })));
+        return (h(Host, { key: '17b13c3b8a5ade7e5d3c990673b2e884b0ae5cb5', style: style }, h("slot", { key: 'ac563668c3e6e26f9a1b730c6edb16cb8cb46498' })));
     }
     static get is() { return "af-inline"; }
     static get encapsulation() { return "shadow"; }

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: '8101d42a68af7c5cfc90e6a13706e93823da27c3' }, h("div", { key: '2403b1d1f5b365cc2f7e37cb9387e9c2009efd5f', class: "logo-well" }, h("slot", { key: 'da5724c0fb823b8aa7f85fd7d95b94c2841c2f70' }))));
+        return (h(Host, { key: 'c0896e6345cc862d0cd7105117016a5dc76b3141' }, h("div", { key: 'a754bb9b44319040e9b1bcb03c6440c60c91af25', class: "logo-well" }, h("slot", { key: '8f87dc5de8caba94cc30a529aaa8e4c4426c5e81' }))));
     }
     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: '9764092415b6f501cdbf38649e00d172bbbf8e12', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, h("div", { key: 'c8dbefa2fcffc74ade77432b4a97e0decbc15823', class: "nav-accordion" }, h("slot", { key: '688c01dc567713e5e1040b766f32f8d1a67b8d0f' }))));
+        return (h(Host, { key: '518288d29b17ac7ceb69ce24b37258dffefdd742', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, h("div", { key: '6a5e504a7114f3abbc064da71558342f9c45627d', class: "nav-accordion" }, h("slot", { key: '88560460c84396a492d2bc035f2d96c7c30afa58' }))));
     }
     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

@@ -84,11 +84,11 @@ export class AfNavAccordionItem {
         // sub-content to expand. A plain href item with no children is a
         // direct link and shouldn't show a disclosure affordance.
         const hasDropdownContent = this.hasContent;
-        return (h(Host, { key: '959165c0c1ba72e3e3e33956862a47a9e080ce91', class: {
+        return (h(Host, { key: '6ec460cb9004968c1386dbd4987bdcbab85fc5ee', class: {
                 'is-open': this.open,
                 'is-disabled': this.disabled,
                 [`breakpoint-${this.breakpoint}`]: true
-            } }, 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' }))))));
+            } }, h("div", { key: '8cfae124103bff2dbefee2972080014069346d85', 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: 'd1e430c8bf9bfbed5da2a647352d5166680beaee', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, h("div", { key: '8fe35fe547bc1658e1cc1fd18b6ded85f4b8ddbc', class: "content", ref: (el) => (this.contentRef = el) }, h("slot", { key: '550b245714af43a08024486dee8f1532624abe03' }))))));
     }
     static get is() { return "af-nav-accordion-item"; }
     static get encapsulation() { return "scoped"; }

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: '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' })))));
+        return (h(Host, { key: 'e52759061a3d6767cea4a543ded89fd79c6cbeb0' }, h("div", { key: '365abac4a6588998a94f4c45955157b24fdea8b4', class: classes }, this.heading && (h("div", { key: 'cb380719d52dd2da2d7559330ea806f47a6c4e99', class: "menu-header" }, h("h3", { key: '7b71a56e995645f8371f66d581b3626fbf2f5e31', class: "menu-heading" }, this.heading))), h("div", { key: 'cf2f7c5351ed8c26dcd82d1c420d225f623847f6', class: "menu-items" }, h("slot", { key: '45f38b469a9dabb7823b56d52538925a6db90f0e' })))));
     }
     static get is() { return "af-nav-menu"; }
     static get encapsulation() { return "scoped"; }

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: '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" })))));
+        return (h(Host, { key: '10f78b27ad9bb744415303815a0d332c521b97ce' }, h("div", { key: '1fd8d7624889e151a7051b0f8b2ee7c773ae4d60', class: classes }, h("div", { key: 'e2fefca6e151476e80c1b45d435bb72b623f8c15', class: "menu-columns" }, h("slot", { key: '321200c424b9e4b8b9f1f9cf101de1a2a4fdc742' })), h("div", { key: '8956a487218299d9735ece9a6ca9fe3a23828e0f', class: "menu-sidebar" }, h("slot", { key: '8cb04d5028ec97976d38b39a1b66f41600b7fa0f', name: "sidebar" })))));
     }
     static get is() { return "af-nav-menu-nest"; }
     static get encapsulation() { return "scoped"; }

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

@@ -104,12 +104,15 @@ 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.
+        // Short 100ms debounce so the mouse has time to cross any tiny
+        // dead-zone between the nav pill, the dropdown panel, and the
+        // items inside it without accidentally closing the panel. A
+        // re-entering mouseenter on the host cancels the pending close.
         this.cancelScheduledClose();
-        this.closeDropdown();
+        this.closeTimer = window.setTimeout(() => {
+            this.closeDropdown();
+            this.closeTimer = undefined;
+        }, 100);
     }
     cancelScheduledClose() {
         if (this.closeTimer !== undefined) {
@@ -169,7 +172,7 @@ export class AfNavbar {
     }
     render() {
         const hasDropdown = this.activeDropdown !== null;
-        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" })))));
+        return (h(Host, { key: 'bb5b7b7b1fe78eed12b3c16e2878d7905352d40c', class: { 'has-dropdown-open': hasDropdown } }, h("div", { key: 'd35c38cfbb329a7811abbc4bbc5b83e3673d3dab', class: `navbar-spacer${this.theme ? ` theme-${this.theme}` : ''}` }), h("nav", { key: '44d49577e393f60773db2d3b934ee1a253a3db1c', class: "navbar-container" }, h("div", { key: '172dfc9bcfd092c62537e2906dce3b97ae0bc6f3', class: "navbar theme-white" }, h("div", { key: 'bb10a24a359b569bd29082a75264e0d150a0cfae', class: "navbar-left" }, h("div", { key: 'd9b13adcdd2936fbfe3d177c81597b36998239a5', class: "logo" }, h("slot", { key: 'e6752d9755b854dbca123f4e45f7c4194fba9997', name: "logo" }, this.showDefaultLogo && h("af-logo", { key: '414958654451d4ec05d2ede68f989d850d6e3326' }))), h("button", { key: '42361097f38ca78004d91299ff570f168b79c342', 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: '11cedc5ae46d5bc4c1254c73571fa6d99849db15', class: `nav-links ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("slot", { key: '2ab1f72977583995c0ee569e34df8c87ea5a2787', name: "start" }))), h("div", { key: 'aca92b065a53ee293a391bc32e3d1eb693acd7c0', class: `navbar-right ${this.mobileMenuOpen ? 'mobile-open' : ''}` }, h("div", { key: 'c94a0d6c88f6dbbdc92a328effa898a3b275466c', class: "nav-actions" }, h("slot", { key: '051e4a16d64f9d8b66504921cfafd734a78a3148', name: "end" })), h("div", { key: 'fc60234ab1b58d4bfb675d7a4d65253995c3b548', class: "nav-button" }, h("slot", { key: '5a826f4d58eef982abd103e4b2fe076f0dfc138e', name: "button" })))), h("div", { key: 'cd7c0db3e62cdb689ec75855109091666177deb7', class: `dropdown-container ${hasDropdown ? 'is-open' : ''}` }, h("div", { key: 'c40e3a8032991758e8fbe40507533b9335febfef', class: "dropdown-panel theme-white" }, h("slot", { key: '72680638403af582146ae0937d21dc8342cee1cb', name: "dropdowns" })))), h("div", { key: '12dbebc3c6bb463b63424d1ee431ecdcb2d11391', class: `mobile-menu-panel theme-white ${this.mobileMenuOpen ? 'is-open' : ''}` }, h("div", { key: 'db40b156136d18f54647583d03fbc108c1ea6243', class: "mobile-button-container" }, h("slot", { key: '9a018110748c36f0129e30fadaffe4e15bf4c076', name: "mobile-button" }, h("slot", { key: '8929b69c67419e9ceccaca72b90ffede5a2ade29', name: "button" }))), h("div", { key: '151a7cad7ad32874176c59a1729a37049ca57f75', class: "mobile-menu-content" }, h("slot", { key: 'caee9dd00f204a52e0e3b7598b215020a2bec70e', 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: '9966db4536a1ce0b5e35a65aa63ea5c0771e8a9a', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, h("span", { key: 'a963bb7feea690d898228a3a0d076e079994cdf4', class: {
+        return (h(Host, { key: '816770ea4351ba01a7c069b57558efad8015f5f8', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, h("span", { key: '33bd320ab7e56fbf29251035008e862b6a249258', 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: '9a6fac61d82f79f36a4cb60e929e96449de232a8' }, h("div", { key: '1d535263ab6274466280caebcaf52052adfbb4b5', class: {
+        return (h(Host, { key: 'ab4db165b98bbd164b87d65f2e013d6719a04f52' }, h("div", { key: 'ef6ffbf323aff182c9de107d07992f032606e422', 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: '6f479550cd91f8c4f5a256546ed80a09498d6bba', class: "progress-line__background" }), h("div", { key: 'b0f6e719cdede111f7a15651d9f5289456dbddf4', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
+            }, role: "progressbar", "aria-valuenow": Math.round(progressPercent), "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { key: 'e7e2ab3850a97dc4d37194132dcdd9c7f3d614e3', class: "progress-line__background" }), h("div", { key: '00c16c1a7eebbcd314db1f12ee4344d2b2bebc9d', 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-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);
@@ -403,6 +403,7 @@
 }
 
 /* Mobile adjustments */
+/* mobile-only */
 @media (max-width: 768px) {
   .padding-tight {
     padding: 32px 0;

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: '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)));
+        const content = h("slot", { key: '9a5e38a56170b65a8bc88191fef5cfd0c7d37cda' });
+        return (h(Host, { key: '66fa1e6000cebdf1fa4ea850156ff54ec55f5952' }, h("div", { key: '883a3f086eab3b120afed962b2fff8986aaf0b25', 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.js

@@ -18,7 +18,7 @@ export class AfShow {
             [`show-above-${this.above}`]: !!this.above,
             [`show-below-${this.below}`]: !!this.below,
         };
-        return (h(Host, { key: 'b88e3f6dedeb0a8cc4f69b3c9915a4fb0a115df7', class: classes }, h("slot", { key: '55f89874b70bbcc636e615556f11e99baeafad73' })));
+        return (h(Host, { key: '0e1fa54d81a3a30c5547bd08f83bf43bf357038f', class: classes }, h("slot", { key: '52af3932d49d463f0d807bb7654ecbff02f7db8e' })));
     }
     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: 'd8875f8b62e560cd11e71f6c6b2baf219aef96d2' }, h("a", { key: 'a6e5c064945372150306b6aeb294b13659b565f4', href: this.href, target: "_blank", rel: "noopener noreferrer", class: "social-link", "aria-label": this.label }, this.renderIcon())));
+        return (h(Host, { key: '9cd9c78a4b964d2a43f9d85ff528abb63eea31e2' }, h("a", { key: '2fc0c44720aa6f58229a5ad285269ab7b73c07cc', 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: 'e3d8bff163b92ef7caf5802947556444ce2f1a48', style: style, "aria-hidden": "true" });
+        return h(Host, { key: '667181ea8f243b47e0a54fbfc5441b7551d69082', 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.js

@@ -26,14 +26,14 @@ export class AfSplitSection {
         this.container = true;
     }
     render() {
-        const content = h("slot", { key: 'bc307598c8f20de642f691d1bd02269cbd34738c' });
+        const content = h("slot", { key: 'de39e81b9bc88da7323663c248faf7a4faf20f7f' });
         // 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: '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)));
+        return (h(Host, { key: '4b140cb28dd9ec3dd2a5148737aada241dbbfb1d' }, h("div", { key: '7eeb358bbae0e98e403e39020482505248c3bb69', 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: '72e0cbdd57b5f300e1957549d225f72ae4cdc2d2', style: style }, h("slot", { key: '9f71bea28b78fa1fcb414e5f3e2b9f9e68d7962d' })));
+        return (h(Host, { key: '757fee5201ab0831e7dc51aa0f7dc2cad4279f95', style: style }, h("slot", { key: '06e94b64a308a3465e54d79e1a5ffb3758c6e626' })));
     }
     static get is() { return "af-stack"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -18,7 +18,7 @@ export class AfStepperStep {
         this.index = 1;
     }
     render() {
-        return (h(Host, { key: 'b91b1f537b806fcd529fa52e67399f6be16bca5d' }, h("span", { key: '9622f4f96632b3ba69144afd82a6787e32eb7c2c', class: "stepper-step__badge" }, this.index), h("div", { key: '315447d305191d0b74116a486454c9b4b5f6dd22', class: "stepper-step__content" }, h("div", { key: 'fc838c36ffa5ca04d798faabb1c1fa6fd446ee2a', class: "stepper-step__heading" }, h("slot", { key: '24199d97434f81e1d635cdb3a06a9946d27f969b', name: "heading" })), h("div", { key: 'ad23f7a9e6459a9ac9459202901d144df44c2f03', class: "stepper-step__body" }, h("slot", { key: '66a4b92593430b057479e15b2a0d47f5a10eb229', name: "body" })))));
+        return (h(Host, { key: '36a45ffc037fb0efd1352fb1aa8482205faada04' }, h("span", { key: '93a75d705f40f920b3480607dfe2ed9f4ba37e55', class: "stepper-step__badge" }, this.index), h("div", { key: '2eb52b18397349da4fd3a9322fb7f1af0a271b4c', class: "stepper-step__content" }, h("div", { key: 'cf0fff2d73189a63e675017b1d431d2edc03e0c6', class: "stepper-step__heading" }, h("slot", { key: '6649a32664e82bc04e6f53c05d92050ad9b828d6', name: "heading" })), h("div", { key: '8f66cf21ff1b3e1bb4e817e6e85b418c1bdffd24', class: "stepper-step__body" }, h("slot", { key: 'a38c1c2c19d5d821ca513f098cd1b4fe6d007a92', name: "body" })))));
     }
     static get is() { return "af-stepper-step"; }
     static get encapsulation() { return "scoped"; }

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

@@ -17,54 +17,77 @@
   cursor: default;
 }
 
-/* Make links look clickable */
 a.tag {
   cursor: pointer;
 }
 
 /* ==========================================================================
-   VARIANT: SAND (Soft-clay/tan colored - default)
+   VARIANT: DEFAULT (inherits from parent theme context)
    ========================================================================== */
 
-.tag.variant-sand {
-  background-color: var(--af-tag-sand-bg, var(--colour-brand-soft-clay, #b09670));
-  color: var(--af-tag-sand-text, var(--colour-brand-inkwell, #14343b));
+.tag.variant-default {
+  background-color: var(--af-tag-bg, var(--colour-brand-soft-clay, #b09670));
+  color: var(--af-tag-text, var(--colour-brand-inkwell, #14343b));
 }
 
-.tag.variant-sand:hover {
-  background-color: var(--af-tag-sand-bg-hover, var(--colour-softclay-400, #c0ab8d));
+.tag.variant-default:hover {
+  background-color: var(--af-tag-bg-hover, var(--colour-tints-soft-clay-400, #c0ab8d));
 }
 
 /* ==========================================================================
-   VARIANT: LIGHT (Mist-green/light colored)
+   EXPLICIT THEME VARIANTS
    ========================================================================== */
 
-.tag.variant-light {
-  background-color: var(--af-tag-light-bg, var(--colour-background-level1, #e8eeed));
-  color: var(--af-tag-light-text, var(--colour-brand-inkwell, #14343b));
+.tag.variant-inkwell {
+  background-color: var(--colour-brand-inkwell, #14343b);
+  color: var(--colour-brand-white, #ffffff);
 }
 
-.tag.variant-light:hover {
-  background-color: var(--af-tag-light-bg-hover, var(--colour-tints-mist-green-200, #d2e8e3));
+.tag.variant-inkwell:hover {
+  background-color: var(--colour-tints-inkwell-500, #1e4a48);
+}
+
+.tag.variant-white {
+  background-color: var(--colour-brand-white, #ffffff);
+  color: var(--colour-brand-inkwell, #14343b);
+}
+
+.tag.variant-white:hover {
+  background-color: var(--colour-tints-mist-green-100, #e1eee1);
+}
+
+.tag.variant-soft-clay {
+  background-color: var(--colour-brand-soft-clay, #b09670);
+  color: var(--colour-brand-inkwell, #14343b);
+}
+
+.tag.variant-soft-clay:hover {
+  background-color: var(--colour-tints-soft-clay-400, #c0ab8d);
+}
+
+.tag.variant-mist-green {
+  background-color: var(--colour-brand-mist-green, #c6d5d1);
+  color: var(--colour-brand-inkwell, #14343b);
+}
+
+.tag.variant-mist-green:hover {
+  background-color: var(--colour-tints-mist-green-200, #d2e8e3);
 }
 
 /* ==========================================================================
    SIZES
    ========================================================================== */
 
-/* Size: X-Small */
 .tag.size-x-small {
   padding: 6px 10px;
   font-size: var(--font-size-label-tag, 14px);
 }
 
-/* Size: Small */
 .tag.size-small {
   padding: 8px 12px;
   font-size: var(--font-size-label-tag, 14px);
 }
 
-/* Size: Large */
 .tag.size-large {
   padding: 12px 16px;
   font-size: var(--font-size-body-large, 18px);
@@ -74,19 +97,16 @@ a.tag {
    FOCUS STATES
    ========================================================================== */
 
-/* Focus state */
 .tag:focus {
   outline: none;
-  box-shadow: 
+  box-shadow:
     0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),
     0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));
 }
 
-/* Focus visible for keyboard navigation */
 .tag:focus-visible {
   outline: none;
-  box-shadow: 
+  box-shadow:
     0 0 0 4px var(--af-background-base, var(--colour-background-white, #ffffff)),
     0 0 0 5px var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));
 }
-

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

@@ -3,11 +3,15 @@ import { h, Host } from "@stencil/core";
  * Tag displays a label in a styled container.
  * Perfect for categorization, topics, or metadata display.
  *
+ * The `default` variant inherits its colors from the parent theme context
+ * (af-section, af-card). Use explicit variants (`inkwell`, `white`,
+ * `soft-clay`, `mist-green`) to override.
+ *
  * @example
  * ```html
  * <af-tag>AI</af-tag>
- * <af-tag size="small">Machine Learning</af-tag>
- * <af-tag size="large" variant="light">Document Processing</af-tag>
+ * <af-tag size="small" variant="inkwell">Machine Learning</af-tag>
+ * <af-tag size="large" variant="white">Document Processing</af-tag>
  * ```
  */
 export class AfTag {
@@ -15,25 +19,24 @@ export class AfTag {
         /**
          * The size of the tag
          * - `x-small` - Compact tag with minimal padding
-         * - `small` - Small tag with moderate padding
+         * - `small` - Small tag with moderate padding (default)
          * - `large` - Large tag with generous padding
          */
         this.size = 'small';
         /**
-         * The visual variant of the tag
-         * - `sand` - Soft-clay/tan colored background (default)
-         * - `light` - Mist-green/light colored background
+         * Visual variant of the tag. `default` inherits tag colors from the
+         * parent theme context. Theme-named variants force a specific palette.
          */
-        this.variant = 'sand';
+        this.variant = 'default';
     }
     render() {
         const TagElement = this.href ? 'a' : 'span';
         const linkProps = this.href ? { href: this.href } : {};
-        return (h(Host, { key: '0decd339f953b58f2bdc9adbe445fa2f0a2c3bf1' }, h(TagElement, { key: '9ae4d069098dd3d1caafac4918736921a76ffece', class: {
+        return (h(Host, { key: '389b869350a0ead31639016403b8bbd86c8be12f' }, h(TagElement, { key: '7be8b372a4c391ae3e426827cf425274dfe3dc44', class: {
                 'tag': true,
                 [`size-${this.size}`]: true,
                 [`variant-${this.variant}`]: true,
-            }, ...linkProps }, h("slot", { key: '2fcbbe7cc9c3954dbca1d1bff72d5c220c4afecc' }))));
+            }, ...linkProps }, h("slot", { key: 'cf622bef7dca7e64215e0e778f3893097e9e30d0' }))));
     }
     static get is() { return "af-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -67,7 +70,7 @@ export class AfTag {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The size of the tag\n- `x-small` - Compact tag with minimal padding\n- `small` - Small tag with moderate padding\n- `large` - Large tag with generous padding"
+                    "text": "The size of the tag\n- `x-small` - Compact tag with minimal padding\n- `small` - Small tag with moderate padding (default)\n- `large` - Large tag with generous padding"
                 },
                 "getter": false,
                 "setter": false,
@@ -80,7 +83,7 @@ export class AfTag {
                 "mutable": false,
                 "complexType": {
                     "original": "TagVariant",
-                    "resolved": "\"light\" | \"sand\"",
+                    "resolved": "\"default\" | \"inkwell\" | \"mist-green\" | \"soft-clay\" | \"white\"",
                     "references": {
                         "TagVariant": {
                             "location": "local",
@@ -93,13 +96,13 @@ export class AfTag {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The visual variant of the tag\n- `sand` - Soft-clay/tan colored background (default)\n- `light` - Mist-green/light colored background"
+                    "text": "Visual variant of the tag. `default` inherits tag colors from the\nparent theme context. Theme-named variants force a specific palette."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "variant",
-                "defaultValue": "'sand'"
+                "defaultValue": "'default'"
             },
             "href": {
                 "type": "string",

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

@@ -16,7 +16,7 @@
 /* Image side - 40.5% of card width (519px of 1280px in Figma) */
 .testimonial-image {
   position: relative;
-  width: 40.5%;
+  width: 50%;
   min-width: 300px;
   /* Minimum for readability */
   max-width: 519px;
@@ -84,16 +84,38 @@
   flex-shrink: 0;
 }
 
-/* Quote text - layout only, typography comes from af-text */
+/* Quote text — 22px / 140% per Webflow reference. Accepts either the
+   `quote` prop (rendered as plain text) or the `quote-body` slot (rich). */
 .testimonial-text {
-  max-height: 155px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);
+  font-size: 22px;
+  line-height: 1.4;
+  font-weight: var(--font-weight-regular, 400);
+  color: var(--af-typography-body-default, var(--colour-brand-inkwell, #14343b));
+}
+.testimonial-text ::slotted(p),
+.testimonial-text p {
+  font: inherit;
+  color: inherit;
+  margin: 0 0 12px 0;
+}
+.testimonial-text ::slotted(p:last-child),
+.testimonial-text p:last-child {
+  margin-bottom: 0;
+}
+.testimonial-text ::slotted(ul),
+.testimonial-text ul {
+  margin: 0 0 12px 0;
+  padding-left: 20px;
 }
 
 /* Attribution uses body-dark color for emphasis */
 .testimonial-attribution {
-  --af-typography-body-default: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));
+  font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343b));
+  margin-top: 12px;
 }
 
 .testimonial-stats {