@affinda/wc 0.0.19 → 0.0.21

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: 'c02fe013e512c135c429737c54cb13816b477dbf' }, h("div", { key: 'c2928397950acd9ea039fc438feeda4b57a5bc80', 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: '877171e53e77401204bedef2bd44d48a70fdf20b', class: "progress-line__background" }), h("div", { key: '86857483735bc4072be844266cc5939b0943fb22', 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);

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: '74f4713c82729d58a7ccfed5f3183194b48d685b' });
+        return (h(Host, { key: '36e27c7f0d0b291bd926fa2bc502e69a7ee3b474' }, h("div", { key: '427262c5593a435dcb0ff78344e9d31d6ec65385', 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: '5a0c140b0fedd180f13574de1db5ac4fe1652e08', class: classes }, h("slot", { key: '8d0dbb6fde0e28ffb98cd1721f7ad1b917451826' })));
+        return (h(Host, { key: 'b9ae4d8ee02b569e5f0fcb7c1c11105950f11120', class: classes }, h("slot", { key: '5fef11e5c6c5aed8f09a407df0ec506e15534054' })));
     }
     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: '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: '85c3c2afa94eec43f1084325ad8c6a2465981af2' }, h("a", { key: '56a20274cbd345f6a05f1061f047eb6d0bcd1d3d', 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: 'c60e80c17eda7eeaa684768dd13550baf58be226', style: style, "aria-hidden": "true" });
+        return h(Host, { key: 'e9bfa59d6fae975e69b585ef9faf678026c377b4', 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: '1e72b3613568a42bcb4a603825ff716d2fdab8aa' });
+        const content = h("slot", { key: '6db49b19f254218829063d943dc1955a309ce38d' });
         // 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: '41c4805bb4c94df48c0002ab36e07146b51680c7' }, h("div", { key: 'd1ca45cd59fb86c5c6f37d8d74afc9eefa8ade16', 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: 'd2c22f8cb4b9a822933146ac8d16c7ffc6d64a20', style: style }, h("slot", { key: '7c43d9510e06547e5ca3bc96c201340d73439884' })));
+        return (h(Host, { key: 'bbb0562779cd8b779aeccad01944d36402c514c9', style: style }, h("slot", { key: '8c2dff16adc75e6ba516394990eb808783d21e39' })));
     }
     static get is() { return "af-stack"; }
     static get encapsulation() { return "shadow"; }

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,83 @@
+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: 'b5f2ab2322500d11cf8f7b4c21a21325d369c2dd', class: `stepper stepper--${this.orientation}` }, h("div", { key: '48ab51de16af6744d77ae8d2426638739538615f', class: "stepper__connector", "aria-hidden": "true" }), h("slot", { key: '155473dde69196b6a8635fc487d4b88a61905053' })));
+    }
+    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"; }
+}
+//# sourceMappingURL=af-stepper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-stepper.js","sourceRoot":"","sources":["../../../src/components/af-stepper/af-stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAElE;;;;;;;;;;;;;;;;;;;;;GAqBG;AAOH,MAAM,OAAO,SAAS;IANtB;QASE,wEAAwE;QAChE,gBAAW,GAA8B,YAAY,CAAC;KAyB/D;IAvBC,gBAAgB;QACd,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,aAAa;QACnB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAU,CAAC;QAC/E,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YACxB,+DAA+D;YAC/D,8DAA8D;YAC9D,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE,CAAC;gBAC3C,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC;YACrB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,oBAAoB,IAAI,CAAC,WAAW,EAAE;YACjD,4DAAK,KAAK,EAAC,oBAAoB,iBAAa,MAAM,GAAO;YACzD,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, Element } from '@stencil/core';\n\n/**\n * Stepper composite for \"Sign up / Upload / See results\"-style marketing\n * flows. Renders children `af-stepper-step` elements in a horizontal row\n * (desktop) or vertical stack (mobile), with a connector line between badges.\n *\n * Matches Webflow's `.stepper` pattern — numbered circled badges, a spine\n * connector, and centered step text.\n *\n * @example\n * ```html\n * <af-stepper>\n *   <af-stepper-step>\n *     <h3 slot=\"heading\">Sign up for free</h3>\n *     <p slot=\"body\">No sales calls, no credit cards.</p>\n *   </af-stepper-step>\n *   <af-stepper-step>...</af-stepper-step>\n *   <af-stepper-step>...</af-stepper-step>\n * </af-stepper>\n * ```\n *\n * @slot - `af-stepper-step` elements.\n */\n@Component({\n  tag: 'af-stepper',\n  styleUrl: 'af-stepper.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfStepper {\n  @Element() el!: HTMLElement;\n\n  /** Layout orientation. Horizontal on desktop, auto-stacks on mobile. */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  componentDidLoad() {\n    this.assignIndices();\n  }\n\n  private assignIndices() {\n    const steps = Array.from(this.el.querySelectorAll('af-stepper-step')) as any[];\n    steps.forEach((step, i) => {\n      // Set via property so Stencil reactively re-renders the badge.\n      // Only overwrite when the consumer hasn't explicitly set one.\n      if (step.index == null || step.index === 1) {\n        step.index = i + 1;\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host class={`stepper stepper--${this.orientation}`}>\n        <div class=\"stepper__connector\" aria-hidden=\"true\"></div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,85 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  flex: 1 1 0;
+  min-width: 0;
+  padding: 0 16px;
+  position: relative;
+  z-index: 1;
+}
+
+.stepper-step__badge {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  border: 1px solid var(--colour-brand-inkwell, #14343b);
+  background: var(--colour-background-white, #ffffff);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--typography-headingfont, 'NeuSans', sans-serif);
+  font-weight: 500;
+  font-size: 20px;
+  color: var(--colour-brand-inkwell, #14343b);
+  margin-bottom: 24px;
+  flex-shrink: 0;
+}
+
+.stepper-step__content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  max-width: 320px;
+}
+
+.stepper-step__heading {
+  font-family: var(--typography-headingfont, 'NeuSans', sans-serif);
+  font-weight: var(--font-weight-regular, 400);
+  font-size: 24px;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  color: var(--af-typography-heading-primary, var(--colour-brand-inkwell, #14343b));
+}
+
+.stepper-step__body {
+  font-family: var(--typography-bodyfont, 'NeuSans', sans-serif);
+  font-size: 16px;
+  line-height: 1.5;
+  color: var(--af-typography-body-default, var(--colour-brand-inkwell, #14343b));
+}
+
+/* Normalize slotted heading/body tags */
+:host :where(h1, h2, h3, h4, h5, h6),
+:host :where(p) {
+  font: inherit;
+  color: inherit;
+  margin: 0;
+}
+
+/* Vertical orientation — align left */
+:host-context(.stepper--vertical) {
+  flex-direction: row;
+  align-items: flex-start;
+  text-align: left;
+  gap: 24px;
+  padding: 0;
+}
+
+:host-context(.stepper--vertical) .stepper-step__badge {
+  margin-bottom: 0;
+}
+
+@media (max-width: 767px) {
+  :host {
+    flex-direction: row;
+    align-items: flex-start;
+    text-align: left;
+    gap: 24px;
+    padding: 0;
+  }
+  .stepper-step__badge {
+    margin-bottom: 0;
+  }
+}

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

@@ -0,0 +1,60 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A single step within an af-stepper. Renders a numbered circular badge
+ * followed by slotted heading + body content.
+ *
+ * The parent af-stepper auto-assigns the `index` attribute based on DOM
+ * order, so consumers don't need to hand-number the steps.
+ *
+ * @slot heading - Step title (h3/h4 recommended).
+ * @slot body - Step description paragraph(s).
+ */
+export class AfStepperStep {
+    constructor() {
+        /**
+         * Step number shown in the badge. Auto-assigned by the parent stepper if
+         * not explicitly set.
+         */
+        this.index = 1;
+    }
+    render() {
+        return (h(Host, { key: '46648c0bf2d8e105124330d3b5af3e00846aa835' }, h("span", { key: 'a93e98a78ea6af3b88872881d2def273f8ed6c9e', class: "stepper-step__badge" }, this.index), h("div", { key: '158b3cd26c698e18cd62ff7cd91a335ee67816d0', class: "stepper-step__content" }, h("div", { key: '1c460bbc8dad67b86a9dbdd6b069548ae8299628', class: "stepper-step__heading" }, h("slot", { key: '1e5125c95c98e770ebbb2c6114e18fe4b7255e55', name: "heading" })), h("div", { key: '05b7d6c8f0560e9a51c12d50b005cc55d727b6b5', class: "stepper-step__body" }, h("slot", { key: 'efc0219f2ec216d8f3409f73239f603eafe4b299', name: "body" })))));
+    }
+    static get is() { return "af-stepper-step"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-stepper-step.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-stepper-step.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "index": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Step number shown in the badge. Auto-assigned by the parent stepper if\nnot explicitly set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "index",
+                "defaultValue": "1"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-stepper-step.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"af-stepper-step.js","sourceRoot":"","sources":["../../../src/components/af-stepper-step/af-stepper-step.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;GASG;AAOH,MAAM,OAAO,aAAa;IAN1B;QAOE;;;WAGG;QACsB,UAAK,GAAW,CAAC,CAAC;KAiB5C;IAfC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,KAAK,CAAQ;YACrD,4DAAK,KAAK,EAAC,uBAAuB;gBAChC,4DAAK,KAAK,EAAC,uBAAuB;oBAChC,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB;gBACN,4DAAK,KAAK,EAAC,oBAAoB;oBAC7B,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A single step within an af-stepper. Renders a numbered circular badge\n * followed by slotted heading + body content.\n *\n * The parent af-stepper auto-assigns the `index` attribute based on DOM\n * order, so consumers don't need to hand-number the steps.\n *\n * @slot heading - Step title (h3/h4 recommended).\n * @slot body - Step description paragraph(s).\n */\n@Component({\n  tag: 'af-stepper-step',\n  styleUrl: 'af-stepper-step.css',\n  shadow: false,\n  scoped: true,\n})\nexport class AfStepperStep {\n  /**\n   * Step number shown in the badge. Auto-assigned by the parent stepper if\n   * not explicitly set.\n   */\n  @Prop({ reflect: true }) index: number = 1;\n\n  render() {\n    return (\n      <Host>\n        <span class=\"stepper-step__badge\">{this.index}</span>\n        <div class=\"stepper-step__content\">\n          <div class=\"stepper-step__heading\">\n            <slot name=\"heading\"></slot>\n          </div>\n          <div class=\"stepper-step__body\">\n            <slot name=\"body\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -151,7 +151,7 @@ export class AfTab {
                     "references": {
                         "TabShape": {
                             "location": "local",
-                            "path": "/home/elle/affinda-ui/packages/wc/src/components/af-tab/af-tab.tsx",
+                            "path": "/home/andrew/affinda-ui/packages/wc/src/components/af-tab/af-tab.tsx",
                             "id": "src/components/af-tab/af-tab.tsx::TabShape"
                         }
                     }

package/dist/collection/components/af-tab-bar/af-tab-bar.js

@@ -112,7 +112,7 @@ export class AfTabBar {
                     "references": {
                         "TabBarShape": {
                             "location": "local",
-                            "path": "/home/elle/affinda-ui/packages/wc/src/components/af-tab-bar/af-tab-bar.tsx",
+                            "path": "/home/andrew/affinda-ui/packages/wc/src/components/af-tab-bar/af-tab-bar.tsx",
                             "id": "src/components/af-tab-bar/af-tab-bar.tsx::TabBarShape"
                         }
                     }
@@ -138,7 +138,7 @@ export class AfTabBar {
                     "references": {
                         "TabBarBreakpoint": {
                             "location": "local",
-                            "path": "/home/elle/affinda-ui/packages/wc/src/components/af-tab-bar/af-tab-bar.tsx",
+                            "path": "/home/andrew/affinda-ui/packages/wc/src/components/af-tab-bar/af-tab-bar.tsx",
                             "id": "src/components/af-tab-bar/af-tab-bar.tsx::TabBarBreakpoint"
                         }
                     }

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));
 }
-