@affinda/wc 0.0.15 → 0.0.16

package/dist/cjs/index.cjs.js

@@ -8,7 +8,18 @@ var afButton_entry = require('./af-button.cjs.entry.js');
 var afIconButton_entry = require('./af-icon-button.cjs.entry.js');
 var afButtonGroup_entry = require('./af-button-group.cjs.entry.js');
 var afTypographyLockup_entry = require('./af-typography-lockup.cjs.entry.js');
-require('./index-DfEVhbS6.js');
+var afCheckbox_entry = require('./af-checkbox.cjs.entry.js');
+var afRadio_entry = require('./af-radio.cjs.entry.js');
+var afSwitch_entry = require('./af-switch.cjs.entry.js');
+var afFieldset_entry = require('./af-fieldset.cjs.entry.js');
+var afInput_entry = require('./af-input.cjs.entry.js');
+var afTextarea_entry = require('./af-textarea.cjs.entry.js');
+var afTag_entry = require('./af-tag.cjs.entry.js');
+var afTab_entry = require('./af-tab.cjs.entry.js');
+var afTabBar_entry = require('./af-tab-bar.cjs.entry.js');
+var afFeatureCard_entry = require('./af-feature-card.cjs.entry.js');
+var afIllustratedCard_entry = require('./af-illustrated-card.cjs.entry.js');
+require('./index-ybEiHT0b.js');
 
 
 
@@ -24,4 +35,15 @@ exports.AfButton = afButton_entry.af_button;
 exports.AfIconButton = afIconButton_entry.af_icon_button;
 exports.AfButtonGroup = afButtonGroup_entry.af_button_group;
 exports.AfTypographyLockup = afTypographyLockup_entry.af_typography_lockup;
+exports.AfCheckbox = afCheckbox_entry.af_checkbox;
+exports.AfRadio = afRadio_entry.af_radio;
+exports.AfSwitch = afSwitch_entry.af_switch;
+exports.AfFieldset = afFieldset_entry.af_fieldset;
+exports.AfInput = afInput_entry.af_input;
+exports.AfTextarea = afTextarea_entry.af_textarea;
+exports.AfTag = afTag_entry.af_tag;
+exports.AfTab = afTab_entry.af_tab;
+exports.AfTabBar = afTabBar_entry.af_tab_bar;
+exports.AfFeatureCard = afFeatureCard_entry.af_feature_card;
+exports.AfIllustratedCard = afIllustratedCard_entry.af_illustrated_card;
 //# sourceMappingURL=index.cjs.js.map

package/dist/cjs/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/loader.cjs.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-DfEVhbS6.js');
+var index = require('./index-ybEiHT0b.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["af-hero-section.cjs",[[262,"af-hero-section",{"variant":[1],"withDecoration":[4,"with-decoration"],"minHeight":[1,"min-height"]}]]],["af-section.cjs",[[262,"af-section",{"padding":[1],"background":[1],"container":[4]}]]],["af-aspect-ratio.cjs",[[257,"af-aspect-ratio",{"ratio":[1]}]]],["af-button.cjs",[[257,"af-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1],"darkBackground":[4,"dark-background"]}]]],["af-button-group.cjs",[[257,"af-button-group",{"direction":[1],"gap":[1]}]]],["af-card.cjs",[[262,"af-card",{"backgroundImage":[1,"background-image"],"backgroundColor":[1,"background-color"],"darkOverlay":[4,"dark-overlay"]}]]],["af-client-carousel.cjs",[[257,"af-client-carousel",{"showHeadline":[4,"show-headline"],"headlineText":[1,"headline-text"]}]]],["af-color-swatch.cjs",[[257,"af-color-swatch",{"color":[1],"name":[1],"size":[1]}]]],["af-contact-item.cjs",[[262,"af-contact-item",{"label":[1],"value":[1]}]]],["af-cta-section.cjs",[[262,"af-cta-section",{"heading":[1],"description":[1],"primaryButtonText":[1,"primary-button-text"],"primaryButtonUrl":[1,"primary-button-url"],"secondaryButtonText":[1,"secondary-button-text"],"secondaryButtonUrl":[1,"secondary-button-url"],"illustrationUrl":[1,"illustration-url"],"showWaveDecoration":[4,"show-wave-decoration"]}]]],["af-feature-accordion.cjs",[[262,"af-feature-accordion",{"heading":[1],"items":[1],"cycleInterval":[2,"cycle-interval"],"autoCycle":[4,"auto-cycle"],"expandedIndex":[32],"timerProgress":[32]},null,{"autoCycle":["handleAutoCycleChange"]}]]],["af-footer.cjs",[[262,"af-footer",{"copyrightText":[1,"copyright-text"],"statusText":[1,"status-text"],"statusUrl":[1,"status-url"],"systemsOperational":[4,"systems-operational"],"showStatus":[4,"show-status"]}]]],["af-footer-column.cjs",[[262,"af-footer-column",{"heading":[1]}]]],["af-footer-link.cjs",[[262,"af-footer-link",{"href":[1],"external":[4]}]]],["af-icon-button.cjs",[[257,"af-icon-button",{"variant":[1],"size":[1],"disabled":[4],"href":[1],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["af-logo-well.cjs",[[257,"af-logo-well"]]],["af-social-link.cjs",[[262,"af-social-link",{"href":[1],"label":[1],"icon":[1]}]]],["af-testimonial.cjs",[[262,"af-testimonial",{"backgroundImage":[1,"background-image"],"logoImage":[1,"logo-image"],"quote":[1],"attribution":[1],"readMoreLink":[1,"read-more-link"]}]]],["af-testimonial-carousel.cjs",[[262,"af-testimonial-carousel",{"currentIndex":[32],"isAnimating":[32],"testimonialCount":[32]}]]],["af-testimonial-stat.cjs",[[258,"af-testimonial-stat",{"value":[1],"description":[1],"accentBorder":[4,"accent-border"]}]]],["af-typography-lockup.cjs",[[257,"af-typography-lockup",{"headingSize":[2,"heading-size"],"breakpoint":[1],"textAlignment":[1,"text-alignment"],"buttonAlignment":[1,"button-alignment"],"maxWidth":[2,"max-width"]}]]],["af-heading_5.cjs",[[257,"af-navbar",{"showDefaultLogo":[4,"show-default-logo"],"mobileMenuOpen":[32]}],[257,"af-heading",{"level":[1],"align":[1],"theme":[1]}],[257,"af-nav-item",{"hierarchy":[1],"variant":[1],"href":[1],"active":[4]}],[257,"af-text",{"variant":[1],"align":[1],"as":[1],"theme":[1]}],[257,"af-logo",{"src":[1],"alt":[1]}]]],["af-container.cjs",[[257,"af-container",{"maxWidth":[1,"max-width"]}]]]], options);
+  return index.bootstrapLazy([["af-testimonial.cjs",[[262,"af-testimonial",{"backgroundImage":[1,"background-image"],"logoImage":[1,"logo-image"],"quote":[1],"attribution":[1],"readMoreLink":[1,"read-more-link"],"showNavigation":[1028,"show-navigation"],"hasPrev":[1028,"has-prev"],"hasNext":[1028,"has-next"]}]]],["af-icon-text.cjs",[[262,"af-icon-text",{"icon":[1],"headingSize":[2,"heading-size"],"orientation":[1],"iconSize":[1,"icon-size"]}]]],["af-feature-card.cjs",[[262,"af-feature-card",{"theme":[1],"layout":[1],"cardSize":[513,"card-size"],"headingSize":[2,"heading-size"],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"]}]]],["af-hero-section.cjs",[[262,"af-hero-section",{"theme":[1],"withDecoration":[4,"with-decoration"],"minHeight":[1,"min-height"],"headingSize":[2,"heading-size"],"textAlignment":[1,"text-alignment"],"buttonAlignment":[1,"button-alignment"],"maxWidth":[2,"max-width"]}]]],["af-illustrated-card.cjs",[[262,"af-illustrated-card",{"theme":[1],"breakpoint":[1],"cardSize":[1,"card-size"]}]]],["af-testimonial-stat.cjs",[[258,"af-testimonial-stat",{"value":[1],"description":[1],"accentBorder":[4,"accent-border"]}]]],["af-video-container.cjs",[[262,"af-video-container",{"videoThumbnailUrl":[1,"video-thumbnail-url"],"videoAlt":[1,"video-alt"],"videoUrl":[1,"video-url"]}]]],["af-feature-grid.cjs",[[262,"af-feature-grid",{"columns":[2],"mobileLayout":[1,"mobile-layout"],"scrollProgress":[32]},null,{"mobileLayout":["onMobileLayoutChange"]}]]],["af-grid-callout.cjs",[[262,"af-grid-callout",{"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"imagePosition":[1,"image-position"],"columns":[2],"headingSize":[2,"heading-size"]}]]],["af-in-page-banner.cjs",[[262,"af-in-page-banner",{"theme":[1],"heading":[1],"description":[1],"primaryButtonText":[1,"primary-button-text"],"primaryButtonUrl":[1,"primary-button-url"],"secondaryButtonText":[1,"secondary-button-text"],"secondaryButtonUrl":[1,"secondary-button-url"],"illustrationUrl":[1,"illustration-url"],"showWaveDecoration":[4,"show-wave-decoration"]}]]],["af-section.cjs",[[262,"af-section",{"padding":[1],"theme":[1],"container":[4]}]]],["af-split-section.cjs",[[262,"af-split-section",{"topTheme":[1,"top-theme"],"bottomTheme":[1,"bottom-theme"],"padding":[1],"container":[4]}]]],["af-testimonial-carousel.cjs",[[262,"af-testimonial-carousel",{"currentIndex":[32],"isAnimating":[32],"testimonialCount":[32]},[[0,"navPrev","handleNavPrev"],[0,"navNext","handleNavNext"]]]]],["af-text-image.cjs",[[262,"af-text-image",{"imagePosition":[1,"image-position"],"imageProportion":[1,"image-proportion"],"src":[1],"alt":[1],"showSecondLockup":[4,"show-second-lockup"]}]]],["af-button-group.cjs",[[257,"af-button-group",{"direction":[1],"gap":[1]}]]],["af-checkbox.cjs",[[257,"af-checkbox",{"checked":[1540],"indeterminate":[516],"disabled":[516],"name":[1],"value":[1]}]]],["af-client-carousel.cjs",[[257,"af-client-carousel",{"theme":[1]}]]],["af-color-swatch.cjs",[[257,"af-color-swatch",{"color":[1],"name":[1],"size":[1]}]]],["af-contact-item.cjs",[[262,"af-contact-item",{"label":[1],"value":[1]}]]],["af-feature-accordion.cjs",[[262,"af-feature-accordion",{"heading":[1],"items":[1],"cycleInterval":[2,"cycle-interval"],"autoCycle":[4,"auto-cycle"],"expandedIndex":[32],"timerProgress":[32]},null,{"autoCycle":["handleAutoCycleChange"]}]]],["af-fieldset.cjs",[[257,"af-fieldset",{"legend":[1],"orientation":[1],"disabled":[516]}]]],["af-footer.cjs",[[262,"af-footer",{"copyrightText":[1,"copyright-text"],"statusText":[1,"status-text"],"statusUrl":[1,"status-url"],"systemsOperational":[4,"systems-operational"],"showStatus":[4,"show-status"]}]]],["af-footer-column.cjs",[[262,"af-footer-column",{"heading":[1]}]]],["af-footer-link.cjs",[[262,"af-footer-link",{"href":[1],"external":[4]}]]],["af-input.cjs",[[257,"af-input",{"label":[1],"description":[1],"placeholder":[1],"value":[1025],"type":[1],"name":[1],"disabled":[516],"required":[4],"readonly":[4],"error":[1],"showInfoIcon":[4,"show-info-icon"],"showSearchIcon":[4,"show-search-icon"],"clearable":[4],"autocomplete":[1],"maxlength":[2],"minlength":[2],"pattern":[1],"isFocused":[32],"isHovered":[32]}]]],["af-logo-well.cjs",[[257,"af-logo-well"]]],["af-nav-card.cjs",[[257,"af-nav-card",{"heading":[1],"href":[1],"imageSrc":[1,"image-src"],"imageAlt":[1,"image-alt"],"isHovered":[32]}]]],["af-nav-menu.cjs",[[257,"af-nav-menu",{"heading":[1],"breakpoint":[1],"showBorder":[4,"show-border"],"cardStyle":[516,"card-style"]}]]],["af-nav-menu-nest.cjs",[[257,"af-nav-menu-nest",{"type":[1],"breakpoint":[1],"showSidebarBorder":[516,"show-sidebar-border"]}]]],["af-number-badge.cjs",[[257,"af-number-badge",{"number":[2],"variant":[1],"size":[2]}]]],["af-radio.cjs",[[257,"af-radio",{"checked":[1540],"disabled":[516],"name":[1],"value":[1]}]]],["af-social-link.cjs",[[262,"af-social-link",{"href":[1],"label":[1],"icon":[1]}]]],["af-switch.cjs",[[257,"af-switch",{"active":[1540],"disabled":[516],"name":[1],"value":[1]}]]],["af-tab.cjs",[[257,"af-tab",{"label":[1],"active":[516],"disabled":[516],"shape":[513],"displayIcon":[4,"display-icon"],"displayNumber":[4,"display-number"],"value":[1]}]]],["af-tab-bar.cjs",[[257,"af-tab-bar",{"shape":[513],"breakpoint":[513]},[[0,"keydown","handleKeyDown"]]]]],["af-tag.cjs",[[257,"af-tag",{"size":[1],"variant":[1],"href":[1]}]]],["af-text-image-nest.cjs",[[262,"af-text-image-nest",{"layout":[1]}]]],["af-textarea.cjs",[[257,"af-textarea",{"label":[1],"description":[1],"placeholder":[1],"value":[1025],"name":[1],"disabled":[516],"required":[4],"readonly":[4],"error":[1],"showInfoIcon":[4,"show-info-icon"],"rows":[2],"maxlength":[2],"minlength":[2],"resize":[1],"isFocused":[32],"isHovered":[32]}]]],["af-icon-box.cjs",[[258,"af-icon-box",{"icon":[1],"size":[1]}]]],["af-aspect-ratio.cjs",[[257,"af-aspect-ratio",{"ratio":[1]}]]],["af-icon-button.cjs",[[257,"af-icon-button",{"variant":[513],"size":[1],"disabled":[4],"href":[1],"type":[1],"ariaLabel":[1,"aria-label"]}]]],["af-image.cjs",[[258,"af-image",{"src":[1],"alt":[1]}]]],["af-button.cjs",[[257,"af-button",{"variant":[513],"size":[1],"disabled":[4],"type":[1],"href":[1],"hasIconLeft":[32],"hasIconRight":[32]}]]],["af-card.cjs",[[262,"af-card",{"theme":[1],"stretch":[516]}]]],["af-progress-line.cjs",[[258,"af-progress-line",{"progress":[2],"orientation":[1]}]]],["af-container.cjs",[[257,"af-container",{"maxWidth":[1,"max-width"]}]]],["af-heading_5.cjs",[[257,"af-navbar",{"showDefaultLogo":[4,"show-default-logo"],"theme":[1],"mobileMenuOpen":[32],"activeDropdown":[32]},[[4,"click","handleDocumentClick"],[4,"keydown","handleKeyDown"]]],[257,"af-nav-item",{"hierarchy":[1],"variant":[1],"breakpoint":[1],"href":[1],"active":[4]}],[257,"af-heading",{"level":[1],"align":[1]}],[257,"af-logo"],[257,"af-text",{"variant":[1],"align":[1],"as":[1]}]]],["af-icon.cjs",[[257,"af-icon",{"name":[1],"size":[2],"label":[1]}]]],["af-typography-lockup.cjs",[[257,"af-typography-lockup",{"headingSize":[2,"heading-size"],"breakpoint":[1],"textAlignment":[1,"text-alignment"],"buttonAlignment":[1,"button-alignment"],"maxWidth":[2,"max-width"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/assets/backgrounds/wave-overlay-inkwell.svg

@@ -0,0 +1,3 @@
+<svg width="521" height="323" viewBox="0 0 521 323" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M473.775 46.273C443.539 15.92 403.701 -0.631616 361.351 0.0184478H154.183L112.67 67.225H361.893C362.189 67.225 362.533 67.225 362.829 67.225C387.155 67.225 410.004 76.7259 427.289 94.0776C445.017 111.879 454.816 135.682 454.816 161.134C454.816 213.389 412.959 255.843 361.548 255.843H108.041C84.9457 255.843 66.1345 236.742 66.1345 213.289C66.1345 189.837 84.9949 170.435 107.992 169.735H334.957L377.799 102.528H106.859C47.9636 104.029 0 153.683 0 213.289C0 272.895 48.456 323 108.041 323H361.548C449.449 323 521 250.343 521 161.084C521 117.53 504.257 76.7759 473.824 46.2229L473.775 46.273Z" fill="white" fill-opacity="0.06"/>
+</svg>

package/dist/collection/assets/backgrounds/wave-overlay-mist-green.svg

@@ -0,0 +1,3 @@
+<svg width="521" height="323" viewBox="0 0 521 323" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M473.775 46.273C443.539 15.92 403.701 -0.631616 361.351 0.0184478H154.183L112.67 67.225H361.893C362.189 67.225 362.533 67.225 362.829 67.225C387.155 67.225 410.004 76.7259 427.289 94.0776C445.017 111.879 454.816 135.682 454.816 161.134C454.816 213.389 412.959 255.843 361.548 255.843H108.041C84.9457 255.843 66.1345 236.742 66.1345 213.289C66.1345 189.837 84.9949 170.435 107.992 169.735H334.957L377.799 102.528H106.859C47.9636 104.029 0 153.683 0 213.289C0 272.895 48.456 323 108.041 323H361.548C449.449 323 521 250.343 521 161.084C521 117.53 504.257 76.7759 473.824 46.2229L473.775 46.273Z" fill="#D1DDDA"/>
+</svg>

package/dist/collection/assets/backgrounds/wave-overlay-soft-clay.svg

@@ -0,0 +1,3 @@
+<svg width="521" height="323" viewBox="0 0 521 323" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M473.775 46.273C443.539 15.92 403.701 -0.631616 361.351 0.0184478H154.183L112.67 67.225H361.893C362.189 67.225 362.533 67.225 362.829 67.225C387.155 67.225 410.004 76.7259 427.289 94.0776C445.017 111.879 454.816 135.682 454.816 161.134C454.816 213.389 412.959 255.843 361.548 255.843H108.041C84.9457 255.843 66.1345 236.742 66.1345 213.289C66.1345 189.837 84.9949 170.435 107.992 169.735H334.957L377.799 102.528H106.859C47.9636 104.029 0 153.683 0 213.289C0 272.895 48.456 323 108.041 323H361.548C449.449 323 521 250.343 521 161.084C521 117.53 504.257 76.7759 473.824 46.2229L473.775 46.273Z" fill="#14343B" fill-opacity="0.06"/>
+</svg>

package/dist/collection/assets/backgrounds/wave-overlay-white-ivory.svg

@@ -0,0 +1,3 @@
+<svg width="521" height="323" viewBox="0 0 521 323" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M473.775 46.273C443.539 15.92 403.701 -0.631616 361.351 0.0184478H154.183L112.67 67.225H361.893C362.189 67.225 362.533 67.225 362.829 67.225C387.155 67.225 410.004 76.7259 427.289 94.0776C445.017 111.879 454.816 135.682 454.816 161.134C454.816 213.389 412.959 255.843 361.548 255.843H108.041C84.9457 255.843 66.1345 236.742 66.1345 213.289C66.1345 189.837 84.9949 170.435 107.992 169.735H334.957L377.799 102.528H106.859C47.9636 104.029 0 153.683 0 213.289C0 272.895 48.456 323 108.041 323H361.548C449.449 323 521 250.343 521 161.084C521 117.53 504.257 76.7759 473.824 46.2229L473.775 46.273Z" fill="#14343B" fill-opacity="0.04"/>
+</svg>

package/dist/collection/collection-manifest.json

@@ -12,21 +12,47 @@
     "components/af-icon-button/af-icon-button.js",
     "components/af-button-group/af-button-group.js",
     "components/af-typography-lockup/af-typography-lockup.js",
+    "components/af-checkbox/af-checkbox.js",
+    "components/af-radio/af-radio.js",
+    "components/af-switch/af-switch.js",
+    "components/af-fieldset/af-fieldset.js",
+    "components/af-input/af-input.js",
+    "components/af-textarea/af-textarea.js",
+    "components/af-tag/af-tag.js",
+    "components/af-tab/af-tab.js",
+    "components/af-tab-bar/af-tab-bar.js",
+    "components/af-feature-card/af-feature-card.js",
+    "components/af-illustrated-card/af-illustrated-card.js",
     "components/af-card/af-card.js",
     "components/af-client-carousel/af-client-carousel.js",
     "components/af-contact-item/af-contact-item.js",
-    "components/af-cta-section/af-cta-section.js",
     "components/af-feature-accordion/af-feature-accordion.js",
+    "components/af-feature-grid/af-feature-grid.js",
     "components/af-footer/af-footer.js",
     "components/af-footer-column/af-footer-column.js",
     "components/af-footer-link/af-footer-link.js",
+    "components/af-grid-callout/af-grid-callout.js",
     "components/af-hero-section/af-hero-section.js",
+    "components/af-icon/af-icon.js",
+    "components/af-icon-box/af-icon-box.js",
+    "components/af-icon-text/af-icon-text.js",
+    "components/af-image/af-image.js",
+    "components/af-in-page-banner/af-in-page-banner.js",
     "components/af-logo-well/af-logo-well.js",
+    "components/af-nav-card/af-nav-card.js",
+    "components/af-nav-menu/af-nav-menu.js",
+    "components/af-nav-menu-nest/af-nav-menu-nest.js",
+    "components/af-number-badge/af-number-badge.js",
+    "components/af-progress-line/af-progress-line.js",
     "components/af-section/af-section.js",
     "components/af-social-link/af-social-link.js",
+    "components/af-split-section/af-split-section.js",
     "components/af-testimonial/af-testimonial.js",
     "components/af-testimonial-carousel/af-testimonial-carousel.js",
-    "components/af-testimonial-stat/af-testimonial-stat.js"
+    "components/af-testimonial-stat/af-testimonial-stat.js",
+    "components/af-text-image/af-text-image.js",
+    "components/af-text-image-nest/af-text-image-nest.js",
+    "components/af-video-container/af-video-container.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/components/af-aspect-ratio/af-aspect-ratio.css

@@ -11,6 +11,8 @@
 
 /* Ensure slotted content fills the container */
 .aspect-ratio-container ::slotted(*) {
+  position: absolute;
+  inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;

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

@@ -2,6 +2,31 @@
   display: inline-block;
 }
 
+/* Set color on host for slotted content (icons) inheritance */
+:host([variant="primary"]) {
+  color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343B));
+}
+
+:host([variant="secondary"]) {
+  color: var(--af-button-secondary-icon, var(--af-typography-body-dark, var(--colour-brand-inkwell, #14343B)));
+}
+
+:host([variant="tertiary"]) {
+  color: var(--af-button-tertiary-icon, var(--colour-brand-inkwell, #14343B));
+}
+
+/* Full-width mode - when host is display: block */
+:host([full-width]),
+:host(.full-width) {
+  display: block;
+  width: 100%;
+}
+
+:host([full-width]) .button,
+:host(.full-width) .button {
+  width: 100%;
+}
+
 .button {
   display: inline-flex;
   align-items: center;
@@ -16,6 +41,8 @@
   border: 1px solid transparent;
   box-sizing: border-box;
   white-space: nowrap;
+  /* Allow width to be controlled from outside via CSS custom property */
+  width: var(--af-button-width, auto);
 }
 
 /* Size variants */
@@ -31,20 +58,20 @@
   line-height: 16px;
 }
 
-/* Icon slots */
-.icon-left:empty,
-.icon-right:empty {
-  display: none;
-}
-
+/* Icon slots - only show when they have slotted content */
 .icon-left,
 .icon-right {
-  display: flex;
+  display: none;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
 
+.icon-left.has-content,
+.icon-right.has-content {
+  display: flex;
+}
+
 .size-default .icon-left,
 .size-default .icon-right {
   width: 24px;
@@ -57,127 +84,213 @@
   height: 20px;
 }
 
-/* Label has additional padding on each side */
+/* Add spacing between icon and label only when icon is present */
+.size-default .icon-left.has-content {
+  margin-right: 12px;
+}
+
+.size-default .icon-right.has-content {
+  margin-left: 12px;
+}
+
+.size-small .icon-left.has-content {
+  margin-right: 8px;
+}
+
+.size-small .icon-right.has-content {
+  margin-left: 8px;
+}
+
+/* Label styling */
 .label {
   flex: 0 1 auto;
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 24px;
 }
 
 .size-default .label {
-  padding: 0 12px;
   height: 24px;
 }
 
 .size-small .label {
-  padding: 0 8px;
   height: 20px;
 }
 
-/* Primary variant (ice) */
+/* ==========================================================================
+   Primary Button
+   Filled background with ice color, inkwell text
+   ========================================================================== */
+
 .variant-primary {
-  background: var(--colour-brand-ice, #A6FFFB);
-  border-color: var(--colour-brand-inkwell, #14343B);
-  color: var(--colour-brand-inkwell, #14343B);
+  background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));
+  border-color: var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));
+  color: var(--af-button-primary-text, var(--colour-brand-inkwell, #14343b));
+}
+
+.variant-primary .icon-left,
+.variant-primary .icon-right {
+  color: var(--af-button-primary-icon, var(--colour-brand-inkwell, #14343b));
 }
 
 .variant-primary:hover:not(.disabled) {
-  background: #8FEBE3;
-  transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(20, 52, 59, 0.15);
+  background: var(--af-button-primary-bg-hover, #95E6E2);
+  border-color: var(--af-button-primary-stroke, #14343B);
+}
+
+.variant-primary:focus:not(.disabled),
+.variant-primary:focus-visible:not(.disabled) {
+  background: var(--af-button-primary-bg, #A6FFFB);
+  border-color: var(--af-button-primary-stroke, #14343B);
+  box-shadow: 0 0 0 4px var(--af-background-base, #FFF), 0 0 0 5px var(--af-button-primary-stroke, #14343B);
+  outline: none;
 }
 
 .variant-primary:active:not(.disabled) {
-  background: #7FE2D4;
-  transform: translateY(0);
+  background: var(--af-button-primary-bg-hover, #95E6E2);
 }
 
-/* Secondary variant (white) */
+/* ==========================================================================
+   Secondary Button
+   Transparent background with visible border
+   ========================================================================== */
+
 .variant-secondary {
-  background: var(--colour-brand-white, #FFFFFF);
-  border-color: var(--colour-brand-inkwell, #14343B);
-  color: var(--colour-brand-inkwell, #14343B);
+  background: var(--af-button-secondary-bg, transparent);
+  border-color: var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));
+  color: var(--af-button-secondary-text, var(--colour-brand-inkwell, #14343b));
 }
 
-.variant-secondary:hover:not(.disabled) {
-  background: #F6FAF9;
-  transform: translateY(-1px);
-  box-shadow: 0 2px 8px rgba(20, 52, 59, 0.15);
+.variant-secondary .icon-left,
+.variant-secondary .icon-right {
+  color: var(--af-button-secondary-icon, var(--colour-brand-inkwell, #14343b));
 }
 
-.variant-secondary:active:not(.disabled) {
-  background: #E8F1EF;
-  transform: translateY(0);
+.variant-secondary:hover:not(.disabled) {
+  background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));
+  border-color: var(--af-button-secondary-stroke, currentColor);
 }
 
-/* Outline variant */
-.variant-outline {
-  background: transparent;
-  border-color: var(--colour-brand-inkwell, #14343B);
-  color: var(--colour-brand-inkwell, #14343B);
+.variant-secondary:focus:not(.disabled),
+.variant-secondary:focus-visible:not(.disabled) {
+  background: var(--af-background-base, #FFF);
+  border-color: var(--af-button-secondary-stroke, currentColor);
+  box-shadow: 0 0 0 4px var(--af-background-base, #FFF), 0 0 0 5px var(--af-button-secondary-stroke, currentColor);
+  outline: none;
 }
 
-.variant-outline:hover:not(.disabled) {
-  background: rgba(20, 52, 59, 0.04);
-  transform: translateY(-1px);
+.variant-secondary:active:not(.disabled) {
+  background: var(--af-button-secondary-bg-hover, rgba(128, 128, 128, 0.1));
 }
 
-.variant-outline:active:not(.disabled) {
-  background: rgba(20, 52, 59, 0.08);
-  transform: translateY(0);
-}
+/* ==========================================================================
+   Tertiary Button
+   Text-only link style with underline, no border or background
+   ========================================================================== */
 
-/* Ghost variant (text only) */
-.variant-ghost {
+.variant-tertiary {
   background: transparent;
   border-color: transparent;
-  color: var(--colour-brand-inkwell, #14343B);
+  border-radius: 0;
+  color: var(--af-button-tertiary-text, var(--colour-brand-inkwell, #14343b));
   padding-left: 0;
   padding-right: 0;
 }
 
-.variant-ghost:hover:not(.disabled) {
-  text-decoration: underline;
+.variant-tertiary .label {
+  border-bottom: 2px solid var(--af-button-tertiary-stroke, var(--colour-brand-soft-clay, #B09670));
 }
 
-.variant-ghost:active:not(.disabled) {
-  opacity: 0.7;
+.variant-tertiary .icon-left,
+.variant-tertiary .icon-right {
+  color: var(--af-button-tertiary-icon, var(--colour-brand-inkwell, #14343b));
 }
 
-/* Disabled state */
+.variant-tertiary:hover:not(.disabled) {
+  opacity: 0.8;
+}
+
+.variant-tertiary:focus:not(.disabled),
+.variant-tertiary:focus-visible:not(.disabled) {
+  outline: none;
+}
+
+.variant-tertiary:focus-visible:not(.disabled) .label {
+  box-shadow: 0 4px 0 0 var(--af-button-tertiary-stroke, var(--colour-brand-soft-clay, #B09670));
+}
+
+.variant-tertiary:active:not(.disabled) {
+  opacity: 0.6;
+}
+
+/* ==========================================================================
+   Disabled states
+   ========================================================================== */
+
 .disabled {
-  opacity: 0.4;
   cursor: not-allowed;
   pointer-events: none;
 }
 
-/* Remove default button styles */
+.variant-primary.disabled {
+  border: 1px solid var(--af-button-primary-stroke, #14343B);
+  background: var(--af-button-primary-bg, #A6FFFB);
+  opacity: 0.6;
+}
+
+.variant-secondary.disabled {
+  border: 1px solid var(--af-button-secondary-stroke, currentColor);
+  opacity: 0.6;
+}
+
+.variant-tertiary.disabled {
+  opacity: 0.6;
+}
+
+/* ==========================================================================
+   Reset button element styles
+   ========================================================================== */
+
 button.button {
-  background: none;
-  border: none;
   font: inherit;
-  color: inherit;
   cursor: pointer;
 }
 
 button.button.variant-primary {
-  background: var(--colour-brand-ice, #A6FFFB);
-  border: 1px solid var(--colour-brand-inkwell, #14343B);
+  background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));
+  border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));
 }
 
 button.button.variant-secondary {
-  background: var(--colour-brand-white, #FFFFFF);
-  border: 1px solid var(--colour-brand-inkwell, #14343B);
+  background: var(--af-button-secondary-bg, transparent);
+  border: 1px solid var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));
 }
 
-button.button.variant-outline {
+button.button.variant-tertiary {
   background: transparent;
-  border: 1px solid var(--colour-brand-inkwell, #14343B);
+  border: none;
 }
 
-button.button.variant-ghost {
+/* ==========================================================================
+   Reset anchor element styles (when using href prop)
+   ========================================================================== */
+
+a.button {
+  text-decoration: none;
+  color: inherit;
+}
+
+a.button.variant-primary {
+  background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));
+  border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));
+}
+
+a.button.variant-secondary {
+  background: var(--af-button-secondary-bg, transparent);
+  border: 1px solid var(--af-button-secondary-stroke, var(--colour-brand-inkwell, #14343b));
+}
+
+a.button.variant-tertiary {
   background: transparent;
-  border: 1px solid transparent;
+  border: none;
 }