@affinda/wc 0.6.1 → 0.7.0

package/dist/collection/components/af-feature-accordion/af-feature-accordion.css

@@ -35,14 +35,38 @@
   --_border-color: var(--af-background-border-default, rgba(20, 52, 59, 0.12));
 }
 
+.feature-accordion__intro {
+  margin: 0 0 56px 0;
+}
+
 .feature-accordion__heading {
   font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
-  font-weight: 400;
-  font-size: clamp(36px, 5vw, 52px);
+  font-weight: 500;
+  font-size: 44px;
   line-height: 1.05;
-  letter-spacing: -0.025em;
+  letter-spacing: -0.88px;
   color: var(--_heading-color);
-  margin: 0 0 56px 0;
+  margin: 0;
+}
+
+@media (max-width: 1024px) {
+  .feature-accordion__heading {
+    font-size: 32px;
+    font-weight: 500;
+    line-height: 100%;
+    letter-spacing: -0.64px;
+  }
+}
+
+.feature-accordion__description {
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 1.45;
+  color: var(--_body-color);
+  max-width: 760px;
+  margin: 20px 0 0 0;
+  opacity: 0.88;
 }
 
 .feature-accordion__content {
@@ -72,7 +96,10 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 24px 0;
+  /* Symmetric 20px keeps the spec'd bottom gap visible in the closed state
+     (the description's collapsible region contributes 0px when hidden) and
+     keeps the title visually balanced between top and bottom of the row. */
+  padding: 20px 0;
   background: none;
   border: none;
   cursor: pointer;
@@ -87,8 +114,9 @@
 .accordion-item__title {
   font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
   font-weight: 500;
-  font-size: 22px;
-  line-height: 1.25;
+  font-size: 24px;
+  line-height: 1.2;
+  letter-spacing: 0.48px;
   color: var(--_heading-color);
   margin: 0;
   flex: 1;
@@ -137,11 +165,36 @@
 
 .accordion-item__content {
   overflow: hidden;
+  /* Use grid-template-rows-based expansion (0fr → 1fr) so the
+     transition animates the *actual* content height, not a max-height
+     ceiling. Avoids the "section height bumps for a split second"
+     jank that happens when the outgoing item's content is shorter
+     than max-height: at the midpoint of a max-height transition the
+     outgoing item still renders at its natural height (because
+     max-height >> content) while the incoming item ALSO renders at
+     its natural height — sum > steady-state for a frame, so the
+     image column on the right jumps. With grid-rows, each item
+     occupies its proportional fraction of its own natural height;
+     incoming + outgoing always sums to one full content row.
+     Reported 2026-04-27 on /au's "Give Affinda Platform your
+     paperwork" section. */
+  display: grid;
+  grid-template-rows: 0fr;
   transition:
-    max-height var(--motion-duration-slow, 300ms) var(--motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),
+    grid-template-rows var(--motion-duration-slow, 300ms) var(--motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)),
     opacity var(--motion-duration-slow, 300ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
 }
 
+.accordion-item--expanded .accordion-item__content {
+  grid-template-rows: 1fr;
+}
+
+/* Inner wrapper required for grid-template-rows interpolation:
+   the direct grid child collapses to min-content otherwise. */
+.accordion-item__content > * {
+  min-height: 0;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .accordion-item__icon,
   .accordion-item__icon-bar,
@@ -154,28 +207,54 @@
 .accordion-item__description {
   font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
   font-weight: 400;
-  font-size: 17px;
-  line-height: 1.6;
+  font-size: 18px;
+  line-height: 1.44;
   color: var(--_body-color);
-  margin: 0 0 20px 0;
+  margin: 0;
   padding-right: 40px;
-  opacity: 0.85;
+  opacity: 1;
+}
+
+/* 20px below the description, rendered as in-flow content (not margin) so it
+   doesn't contribute to the grid track's intrinsic size when collapsed —
+   margin-bottom on the grid item leaks into row auto-sizing, leaving a
+   phantom 20px below the title in the closed state. min-height: 0 on the
+   description (via `.accordion-item__content > *`) lets the grid clip this
+   pseudo to 0 when closed, and overflow: hidden on the parent hides it. */
+.accordion-item__description::after {
+  content: '';
+  display: block;
+  height: 20px;
+}
+
+/* Per-item inline image — only rendered on mobile (see media query below).
+   On desktop the shared right-side image column is used instead. */
+.accordion-item__image-wrapper {
+  display: none;
+}
+
+.accordion-item__image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border-radius: 12px;
 }
 
 /* Timer track - the progress bar at the bottom of expanded items */
 .accordion-item__timer-track {
-  height: 3px;
+  position: relative;
+  height: 1px;
   background-color: var(--_border-color);
-  border-radius: 2px;
   margin-bottom: 8px;
-  overflow: hidden;
-  display: flex;
-  justify-content: flex-start;
 }
 
 .accordion-item__timer-progress {
-  height: 100%;
-  background-color: var(--af-accent-progress, var(--colour-softclay-600, #9e8765));
+  position: absolute;
+  top: 50%;
+  left: 0;
+  height: 3px;
+  transform: translateY(-50%);
+  background-color: var(--af-accent-progress, var(--colour-softclay-800, #7f6849));
   border-radius: 2px;
   transition: width 0.05s linear;
 }
@@ -194,6 +273,7 @@
 }
 
 .feature-accordion__image-wrapper {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -208,7 +288,7 @@
   height: auto;
   object-fit: contain;
   border-radius: 12px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  box-shadow: var(--af-feature-accordion-image-shadow, none);
 }
 
 .feature-accordion__image-placeholder {
@@ -219,6 +299,40 @@
   justify-content: center;
 }
 
+.feature-accordion__pause {
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
+  z-index: 2;
+  width: 44px;
+  height: 44px;
+  border: 1px solid var(--af-button-primary-stroke, var(--colour-brand-inkwell, #14343b));
+  border-radius: 999px;
+  background: var(--af-button-primary-bg, var(--colour-brand-ice, #a6fffb));
+  color: var(--af-button-primary-text, var(--colour-brand-inkwell, #14343b));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition:
+    transform var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1)),
+    background-color var(--motion-duration-base, 200ms) var(--motion-easing-standard, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+.feature-accordion__pause:hover {
+  transform: translateY(-1px);
+  background: var(--af-button-primary-bg-hover, var(--colour-ice-600, #95e6e2));
+}
+
+.feature-accordion__pause:focus-visible {
+  outline: 2px solid var(--af-background-border-active, var(--colour-softclay-800, #8a7049));
+  outline-offset: 2px;
+}
+
+.feature-accordion__pause-icon {
+  display: block;
+}
+
 /* Tablet */
 /* ≤ tablet */
 @media (max-width: 1024px) {
@@ -226,7 +340,7 @@
     gap: 32px;
   }
 
-  .feature-accordion__heading {
+  .feature-accordion__intro {
     margin-bottom: 40px;
   }
 
@@ -243,10 +357,10 @@
     gap: 32px;
   }
 
+  /* Hide the detached right-side image panel on mobile — each accordion
+     item now renders its own image inline inside the expanded content. */
   .feature-accordion__image-container {
-    order: -1;
-    min-height: 280px;
-    flex: none;
+    display: none;
   }
 
   .feature-accordion__list {
@@ -254,11 +368,23 @@
   }
 
   .accordion-item__title {
-    font-size: 18px;
+    font-size: 20px;
+    line-height: 1.1;
+    letter-spacing: -0.4px;
   }
 
   .accordion-item__description {
     font-size: 15px;
     padding-right: 0;
   }
+
+  .accordion-item__image-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--af-background-level-1, var(--colour-mistgreen-300, #dde6e3));
+    border-radius: 20px;
+    padding: 24px;
+    margin: 0 0 20px 0;
+  }
 }

package/dist/collection/components/af-feature-accordion/af-feature-accordion.js

@@ -18,6 +18,8 @@ export class AfFeatureAccordion {
     constructor() {
         /** Section heading */
         this.heading = 'Give AI agents your paperwork';
+        /** Optional section description shown below the heading */
+        this.description = '';
         /** JSON string of accordion items */
         this.items = '[]';
         /** Auto-cycle interval in milliseconds (default: 6000ms = 6 seconds) */
@@ -28,8 +30,23 @@ export class AfFeatureAccordion {
         this.expandedIndex = 0;
         /** Progress of current timer (0-100) */
         this.timerProgress = 100;
+        /** Whether auto-cycling is temporarily paused by the user */
+        this.isPaused = false;
         this.progressTimer = null;
         this.progressStartTime = 0;
+        this.pausedRemaining = 0;
+        this.togglePause = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!this.autoCycle)
+                return;
+            if (this.isPaused) {
+                this.resumeCycling();
+            }
+            else {
+                this.pauseCycling();
+            }
+        };
     }
     componentDidLoad() {
         if (this.autoCycle) {
@@ -57,6 +74,8 @@ export class AfFeatureAccordion {
     }
     startCycling() {
         this.stopCycling();
+        if (this.isPaused)
+            return;
         this.progressStartTime = Date.now();
         this.timerProgress = 100;
         // Progress animation frame
@@ -79,12 +98,42 @@ export class AfFeatureAccordion {
             this.progressTimer = null;
         }
     }
+    pauseCycling() {
+        if (this.isPaused)
+            return;
+        const elapsed = Date.now() - this.progressStartTime;
+        this.pausedRemaining = Math.max(0, this.cycleInterval - elapsed);
+        this.isPaused = true;
+        this.stopCycling();
+    }
+    resumeCycling() {
+        if (!this.isPaused)
+            return;
+        this.isPaused = false;
+        this.stopCycling();
+        const remaining = this.pausedRemaining > 0 ? this.pausedRemaining : this.cycleInterval;
+        this.progressStartTime = Date.now() - (this.cycleInterval - remaining);
+        const updateProgress = () => {
+            const elapsed = Date.now() - this.progressStartTime;
+            const nextRemaining = this.cycleInterval - elapsed;
+            if (nextRemaining <= 0) {
+                this.moveToNextItem();
+            }
+            else {
+                this.timerProgress = (nextRemaining / this.cycleInterval) * 100;
+                this.progressTimer = requestAnimationFrame(updateProgress);
+            }
+        };
+        this.progressTimer = requestAnimationFrame(updateProgress);
+    }
     moveToNextItem() {
         const items = this.getItems();
         if (items.length === 0)
             return;
         this.expandedIndex = (this.expandedIndex + 1) % items.length;
         // Restart the cycling timer for the new item
+        this.isPaused = false;
+        this.pausedRemaining = 0;
         this.startCycling();
     }
     handleItemClick(index) {
@@ -92,19 +141,23 @@ export class AfFeatureAccordion {
         this.expandedIndex = index;
         // Restart the cycling timer for the clicked item
         if (this.autoCycle) {
+            this.isPaused = false;
+            this.pausedRemaining = 0;
             this.startCycling();
         }
     }
     render() {
         const items = this.getItems();
         const currentItem = items[this.expandedIndex];
-        return (h(Host, { key: '595e09ae8153ade7a4fa676eb6f286fc4fec5efe' }, h("div", { key: 'ee35766aa1e9300b4826576913bb7c84ede6a1e7', class: "feature-accordion" }, h("div", { key: 'a12641497c3c3de7e975ebd0735998d4febefb5f', class: "feature-accordion__container" }, h("h2", { key: '42bb968907b3f2745f0ca8f2b40ccfb0e085dad5', class: "feature-accordion__heading" }, this.heading), h("div", { key: 'b70e9007418de1a53cf3f77b4e5477b63d0a11f1', class: "feature-accordion__content" }, h("div", { key: '3fdfbc954daa9d02efb1cdb4ea9d26caeba603c8', class: "feature-accordion__list" }, items.map((item, index) => (h("div", { class: {
+        return (h(Host, { key: '676f3124fa1eeb153c268bb5d3cdcbe5ee027acf' }, h("div", { key: '7e7b1d23aedcd8e91e13fc92ba2706e967d4fbe8', class: "feature-accordion" }, h("div", { key: 'c9c3e34a6c94f1cc62e1d5a00c3ffd96cad2fb2a', class: "feature-accordion__container" }, h("div", { key: 'd6e8449a1f19f2c3291ac3b0c3c4635128ebaf6b', class: "feature-accordion__intro" }, h("h2", { key: '4694a8f173dccdff7a7bec48247aa9dd8de239bd', class: "feature-accordion__heading" }, this.heading), this.description && (h("p", { key: '4abd1b4479107fd9cb754d0c4dcff2b138ac8bf0', class: "feature-accordion__description" }, this.description))), h("div", { key: '555c5e323a0e3ab7a60d82b317ff81d09e8c3520', class: "feature-accordion__content" }, h("div", { key: '17c913a6b19906a3c40fa06a5bc534a0d0ea8421', class: "feature-accordion__list" }, items.map((item, index) => (h("div", { class: {
                 'accordion-item': true,
                 'accordion-item--expanded': this.expandedIndex === index
             }, key: index }, h("button", { class: "accordion-item__header", onClick: () => this.handleItemClick(index), "aria-expanded": this.expandedIndex === index ? 'true' : 'false' }, h("h4", { class: "accordion-item__title" }, item.title), h("span", { class: "accordion-item__icon", "aria-hidden": "true" }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { class: "accordion-item__icon-bar", d: "M5 12H19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }), h("path", { class: "accordion-item__icon-bar accordion-item__icon-bar--vert", d: "M12 5V19", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), h("div", { class: "accordion-item__content", style: {
-                maxHeight: this.expandedIndex === index ? '200px' : '0',
                 opacity: this.expandedIndex === index ? '1' : '0'
-            } }, h("p", { class: "accordion-item__description" }, item.description), this.expandedIndex === index && this.autoCycle && (h("div", { class: "accordion-item__timer-track" }, h("div", { class: "accordion-item__timer-progress", style: { width: `${this.timerProgress}%` } })))))))), h("div", { key: '902712779f4ff2eaae179762a7b78ff1f0784d58', class: "feature-accordion__image-container" }, h("div", { key: 'b741cfaf96428e786e8780cfeff90a0c315716e8', class: "feature-accordion__image-wrapper" }, currentItem?.imageUrl && (h("img", { key: '2a565b530441c9953139b3c0517f480a81f0a77a', src: currentItem.imageUrl, alt: currentItem.imageAlt || currentItem.title, class: "feature-accordion__image" })), !currentItem?.imageUrl && (h("div", { key: 'f8248c73c5dcbd6b8224ad646ee867d34004437d', class: "feature-accordion__image-placeholder" }, h("slot", { key: '9cbe9ee773b0acd5a1b80fa4f6dd2f293152e598', name: "image" }))))))))));
+            } }, h("div", { class: "accordion-item__content-inner" }, h("p", { class: "accordion-item__description" }, item.description), item.imageUrl && (h("div", { class: "accordion-item__image-wrapper" }, h("img", { src: item.imageUrl, alt: item.imageAlt || item.title, width: item.imageWidth, height: item.imageHeight, loading: "lazy", decoding: "async", class: "accordion-item__image" }))), this.expandedIndex === index && this.autoCycle && (h("div", { class: "accordion-item__timer-track" }, h("div", { class: {
+                'accordion-item__timer-progress': true,
+                'accordion-item__timer-progress--paused': this.isPaused,
+            }, style: { width: `${this.timerProgress}%` } }))))))))), h("div", { key: '473135fa5b0ff8eeab2c3ec8ab6d38a5f0469f35', class: "feature-accordion__image-container" }, h("div", { key: '5aa14dfa7accd07751b84aedddd567a698196f40', class: "feature-accordion__image-wrapper" }, currentItem?.imageUrl && (h("img", { key: '5d721d7d2dcaa6e43d78edf99cf463159c8c65a9', src: currentItem.imageUrl, alt: currentItem.imageAlt || currentItem.title, width: currentItem.imageWidth, height: currentItem.imageHeight, loading: "lazy", decoding: "async", class: "feature-accordion__image" })), !currentItem?.imageUrl && (h("div", { key: 'fc3f40990c0372e4064edac223d6315b390d5fb8', class: "feature-accordion__image-placeholder" }, h("slot", { key: '434da2a8b19bf6200f72792bb209881755cca1ce', name: "image" }))), this.autoCycle && (h("button", { key: '2299c90f4d3591c1eec3b4119012597207a0c3fb', type: "button", class: "feature-accordion__pause", "aria-pressed": this.isPaused ? 'true' : 'false', "aria-label": this.isPaused ? 'Resume accordion rotation' : 'Pause accordion rotation', onClick: this.togglePause }, this.isPaused ? (h("svg", { class: "feature-accordion__pause-icon", width: "16", height: "16", viewBox: "0 0 17 20", fill: "none", "aria-hidden": "true" }, h("path", { d: "M15.7875 8.48391L2.28 0.220781C2.05227 0.0813301 1.79144 0.00520146 1.52445 0.0002572C1.25746 -0.00468706 0.993989 0.0617322 0.76125 0.192655C0.530728 0.321545 0.338696 0.509511 0.204904 0.737222C0.0711107 0.964934 0.000385179 1.22417 0 1.48828V18.0127C0.00173697 18.4088 0.160719 18.7881 0.441997 19.0671C0.723276 19.3461 1.10383 19.502 1.5 19.5005C1.77652 19.5003 2.04767 19.4241 2.28375 19.2802L15.7875 11.017C16.0046 10.8847 16.1839 10.6988 16.3084 10.4772C16.4329 10.2555 16.4983 10.0056 16.4983 9.7514C16.4983 9.4972 16.4329 9.24727 16.3084 9.02563C16.1839 8.80399 16.0046 8.61808 15.7875 8.48578V8.48391ZM1.5 17.9948V1.50047L14.9841 9.75047L1.5 17.9948Z", fill: "currentColor" }))) : (h("svg", { class: "feature-accordion__pause-icon", width: "16", height: "16", viewBox: "0 0 17 18", fill: "none", "aria-hidden": "true" }, h("path", { d: "M15 0H11.25C10.8522 0 10.4706 0.158035 10.1893 0.43934C9.90804 0.720644 9.75 1.10218 9.75 1.5V16.5C9.75 16.8978 9.90804 17.2794 10.1893 17.5607C10.4706 17.842 10.8522 18 11.25 18H15C15.3978 18 15.7794 17.842 16.0607 17.5607C16.342 17.2794 16.5 16.8978 16.5 16.5V1.5C16.5 1.10218 16.342 0.720644 16.0607 0.43934C15.7794 0.158035 15.3978 0 15 0ZM15 16.5H11.25V1.5H15V16.5ZM5.25 0H1.5C1.10218 0 0.720644 0.158035 0.43934 0.43934C0.158035 0.720644 0 1.10218 0 1.5V16.5C0 16.8978 0.158035 17.2794 0.43934 17.5607C0.720644 17.842 1.10218 18 1.5 18H5.25C5.64782 18 6.02936 17.842 6.31066 17.5607C6.59196 17.2794 6.75 16.8978 6.75 16.5V1.5C6.75 1.10218 6.59196 0.720644 6.31066 0.43934C6.02936 0.158035 5.64782 0 5.25 0ZM5.25 16.5H1.5V1.5H5.25V16.5Z", fill: "currentColor" }))))))))))));
     }
     static get is() { return "af-feature-accordion"; }
     static get encapsulation() { return "scoped"; }
@@ -140,6 +193,26 @@ export class AfFeatureAccordion {
                 "attribute": "heading",
                 "defaultValue": "'Give AI agents your paperwork'"
             },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional section description shown below the heading"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "''"
+            },
             "items": {
                 "type": "string",
                 "mutable": false,
@@ -205,7 +278,8 @@ export class AfFeatureAccordion {
     static get states() {
         return {
             "expandedIndex": {},
-            "timerProgress": {}
+            "timerProgress": {},
+            "isPaused": {}
         };
     }
     static get elementRef() { return "el"; }
@@ -216,4 +290,3 @@ export class AfFeatureAccordion {
             }];
     }
 }
-//# sourceMappingURL=af-feature-accordion.js.map

package/dist/collection/components/af-feature-card/af-feature-card.js

@@ -84,7 +84,8 @@ export class AfFeatureCard {
                         "Theme": {
                             "location": "import",
                             "path": "../../types",
-                            "id": "src/types.ts::Theme"
+                            "id": "src/types.ts::Theme",
+                            "referenceLocation": "Theme"
                         }
                     }
                 },
@@ -202,4 +203,3 @@ export class AfFeatureCard {
         };
     }
 }
-//# sourceMappingURL=af-feature-card.js.map

package/dist/collection/components/af-feature-grid/af-feature-grid.js

@@ -82,7 +82,7 @@ export class AfFeatureGrid {
             [`feature-grid--mobile-${this.mobileLayout}`]: true,
         };
         const showProgressLine = this.mobileLayout === 'scroll';
-        return (h(Host, { key: '79843a96c9ee451709ed2dea2273fe5394c0f180' }, h("div", { key: '83f10509eddca556b5c1bc0c9188a3e23d7a1726', class: gridClasses }, h("div", { key: '794777d18ea5232a851ad86d7fe821d008e5f7ab', class: "feature-grid__cards" }, h("slot", { key: 'ea4b54b056f3d91a73e302adedcfde3ef21c7a4c' })), showProgressLine && (h("div", { key: 'ed2c80eed8b751d2a9e17bf1d1833f9fac7c681c', class: "feature-grid__progress" }, h("af-progress-line", { key: '51fabf03ae0944dda30980a711d7f0ffdf44226d', progress: this.scrollProgress }))))));
+        return (h(Host, { key: '45bde9db23b919cb15ad001dc91c2918af5ffb21' }, h("div", { key: 'a4ae40838280f957878a8aa898d7624d13936226', class: gridClasses }, h("div", { key: 'e0981d0aefc4ba49e83f841f7d1da24b74374627', class: "feature-grid__cards" }, h("slot", { key: '65d5381d77350f8afddc329f2f2bec106f695448' })), showProgressLine && (h("div", { key: 'df1fda238f20da1e1b19b9b59e4e683ddcba7700', class: "feature-grid__progress" }, h("af-progress-line", { key: '473171e5e673f992426d8699e811a0ec09767f26', progress: this.scrollProgress }))))));
     }
     static get is() { return "af-feature-grid"; }
     static get encapsulation() { return "scoped"; }
@@ -153,4 +153,3 @@ export class AfFeatureGrid {
             }];
     }
 }
-//# sourceMappingURL=af-feature-grid.js.map

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

@@ -106,4 +106,3 @@ export class AfFieldset {
         };
     }
 }
-//# sourceMappingURL=af-fieldset.js.map

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

@@ -18,7 +18,7 @@ export class AfFooter {
         this.showStatus = true;
     }
     render() {
-        return (h(Host, { key: '4e02a8e9b378b3f06aca47609b7d39757dc4434f' }, h("footer", { key: '41177e4981ae89efc453f4890545c970a949c1a0', class: "footer" }, h("div", { key: '8c0450ada99ec27533aae3d15876ec4ca59c4b28', class: "footer__container" }, h("div", { key: 'e3ede26f252e08d666829fb1be2accfe4860425b', class: "footer__top" }, h("div", { key: 'cd8cb407f6d88cc404892d7fb58fa05046b3d332', class: "footer__brand" }, h("div", { key: '7c62228d707d5b9befa08f3355af49074c9a91c1', class: "footer__brand-card" }, h("div", { key: 'f3fc48dff5c9fe2800b7b1fffb21cb521485fb86', class: "footer__logo" }, h("slot", { key: 'af62f8619641d28cd523e893d5228ef57a9c1983', name: "logo" })), h("div", { key: '216a0eb37fb07916188acddf1521c547dffb0903', class: "footer__social" }, h("slot", { key: 'a0ecbe24c06281a27717e6253d9a553b9059ec22', name: "social" }))), h("div", { key: 'c00ecaab696e3320d1d8081ebee10818b3225bf6', class: "footer__contact-card" }, h("slot", { key: 'b767fd999eefeaf80083a27cee564d968c325fc3', name: "contact" }))), h("div", { key: '601d75ff49fb125e5de89af0e97f32728e2d8a18', class: "footer__nav" }, h("div", { key: '2875b2b5b77ab9c109701e21db1eabf0067a7f05', class: "footer__nav-columns" }, h("slot", { key: 'bf069f0ef3483210014c44de263357b5efe0437a', name: "nav" })), this.showStatus && (h("div", { key: '2e74bf503b93c08f5fdcb053c4b1b6001272897f', class: "footer__status" }, h("span", { key: '5009a1ba220866f9946d2efbbca2823ea8a5c4f2', class: `footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}` }), h("span", { key: 'a34fb1674659a7072a3890b0d5da6fd1d7255335', class: "footer__status-text" }, this.statusText), this.statusUrl && (h("a", { key: '5ee737874aea90717fd467d0dd2c2d63934d77c9', href: this.statusUrl, target: "_blank", rel: "noopener noreferrer", class: "footer__status-link" }, "Learn more")))))), h("div", { key: 'ecbde350cdfd2f794ab6d23b776d2e6824e7e834', class: "footer__bottom" }, this.copyrightText && (h("p", { key: 'e4f08b9cfe7a60319736b09ba88671963f8a0f38', class: "footer__copyright" }, this.copyrightText)), h("div", { key: '9662a40dcb5766ef5b55b615e96e9be6ee8482ab', class: "footer__legal" }, h("slot", { key: '4b4413033e24b82e11bcaa573c2b38d3a4657e01', name: "legal" })), h("div", { key: '710e4692bbccf133eee78bce5a04c2da18096532', class: "footer__badges" }, h("slot", { key: '1c9907e32621b27638b4294708fbb71254a950bf', name: "badges" })))))));
+        return (h(Host, { key: 'c5b791a591804383267d763051e05d7f9923edde' }, h("footer", { key: 'e99bc3a11227252abe194c21b71ad49b3a597aa3', class: "footer" }, h("div", { key: '9ffcc7bcfed6c56b881198c1e863ac87db0a8463', class: "footer__container" }, h("div", { key: '7282df0d815ceee93d914c4e689bff9779f0d905', class: "footer__top" }, h("div", { key: 'ab02955988ab5d49c8dee5fa54756c602038284e', class: "footer__brand" }, h("div", { key: '94399b2844cd1ab08fad14057c4d047c6603229a', class: "footer__brand-card" }, h("div", { key: 'd6cda6d9d80c540c2fa386f45d1f134d55b809d2', class: "footer__logo" }, h("slot", { key: '5f0f3b1907f0130ecde64aa0536331d72b3a6ab3', name: "logo" })), h("div", { key: '9ee5fd3fc6d5ecce425add598f6b955e9e658a8f', class: "footer__social" }, h("slot", { key: '01e961a9c81bf559e254c1009bbc3f4d959ad940', name: "social" }))), h("div", { key: 'f861dc6a6826629f4e0fe7d5fa863d625b716daf', class: "footer__contact-card" }, h("slot", { key: '519c4a448667c6cfade117f7adc840737de55659', name: "contact" }))), h("div", { key: '2d8f411cbe7c8691d77465890febe172e3fec865', class: "footer__nav" }, h("div", { key: '0d5d95fc68ea6aaa7426135ba1398b03cbbbf5e6', class: "footer__nav-columns" }, h("slot", { key: '415e7dd1dc5feed13232dc42304b6c92464bd5d1', name: "nav" })), this.showStatus && (h("div", { key: '7d89eb3e2f8907a6047cbdaef81fb3cdae448949', class: "footer__status" }, h("span", { key: '33fb0c8df6aa13a94e76c9664cb44a27b64bbb6f', class: `footer__status-dot ${this.systemsOperational ? 'footer__status-dot--operational' : 'footer__status-dot--issue'}` }), h("span", { key: '53ad12f738cfdcb028c41f282664fe96c97e0c7b', class: "footer__status-text" }, this.statusText), this.statusUrl && (h("a", { key: '875efca3178d29e1324193f078a42120a9f76c08', href: this.statusUrl, target: "_blank", rel: "noopener noreferrer", class: "footer__status-link" }, "Learn more")))))), h("div", { key: 'bedbd1aeb3e93577d9dbf6e6e9a12bf2cc7f1e47', class: "footer__bottom" }, this.copyrightText && (h("p", { key: '7696ab6fa1a7aed5d09a651bccdc7cb16fafbb19', class: "footer__copyright" }, this.copyrightText)), h("div", { key: '0b92a79e7a968dfcb96380f3c81111e6575b141e', class: "footer__legal" }, h("slot", { key: '5b00538adb14e95ac74568689858c784c8030724', name: "legal" })), h("div", { key: '3ea0a1525d9f44b10e69e26ed14a49b3ecd9115e', class: "footer__badges" }, h("slot", { key: '04a5e9279e5e7a6dea78e31d362274137cedf613', name: "badges" })))))));
     }
     static get is() { return "af-footer"; }
     static get encapsulation() { return "scoped"; }
@@ -137,4 +137,3 @@ export class AfFooter {
         };
     }
 }
-//# sourceMappingURL=af-footer.js.map

package/dist/collection/components/af-footer-column/af-footer-column.js

@@ -9,7 +9,7 @@ export class AfFooterColumn {
         this.heading = '';
     }
     render() {
-        return (h(Host, { key: '67e4bf8e1e6c60f1d00bf1cb5c064bd33f68fba5' }, h("div", { key: '3a2dd16b71346ad2709b366e0c6de7762814748c', class: "footer-column" }, this.heading && (h("h5", { key: '0e05841a9711fb6a04a5f977bf1c7f653ec52649', class: "footer-column__heading" }, this.heading)), h("ul", { key: 'cb50c8d91046ec76a886854faf1ac33a8c0a1d7c', class: "footer-column__list" }, h("slot", { key: '167597388a2dbe99b8a331e77c2491872112e82d' })))));
+        return (h(Host, { key: 'd3935044155b899138b1b4a179c77d2c3287605c' }, h("div", { key: '9f78fb40be3bf21c11d9492df9373c5d6d16c08f', class: "footer-column" }, this.heading && (h("h5", { key: 'f383205e18f2786ff1cdb482dd12ee03f4e71a31', class: "footer-column__heading" }, this.heading)), h("ul", { key: '6a98a8252cc18b1dd07657df06538012ea9f74df', class: "footer-column__list" }, h("slot", { key: '1540b769d727626ae4b886b5f5bfa09496859653' })))));
     }
     static get is() { return "af-footer-column"; }
     static get encapsulation() { return "scoped"; }
@@ -48,4 +48,3 @@ export class AfFooterColumn {
         };
     }
 }
-//# sourceMappingURL=af-footer-column.js.map

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

@@ -11,7 +11,7 @@ export class AfFooterLink {
         this.external = false;
     }
     render() {
-        return (h(Host, { key: 'e341043b7d2a33e6bad09755eef69f170c7b809a' }, h("li", { key: 'abd9188151d0d11b0b98ad28ec7263f68cf03ee9' }, h("a", { key: '8de2cdf51282334947408dc2d5f5b4060a94e73a', href: this.href, class: "footer-link", target: this.external ? '_blank' : undefined, rel: this.external ? 'noopener noreferrer' : undefined }, h("slot", { key: '3f2fd206e8b121afcd137de19e2ef7ce974ef16e' }), this.external && (h("svg", { key: '9e3075f004cfdee1dcf25be2a0437f841a2baeda', class: "footer-link__external-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: '72d0f422c4ded4b4ff44107edd5afa99b30ff123', d: "M10 6.5v3a1 1 0 0 1-1 1H2.5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3M7.5 1.5h3v3M5.5 6.5l5-5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
+        return (h(Host, { key: '8958907ea8ef32f7abcecac12afb9c4a106e3f7e' }, h("li", { key: 'e7556b66d196ce56dfd083db3221a9cc9b99b240' }, h("a", { key: 'e2969980a8ec285d65dafb818a539599431aee48', href: this.href, class: "footer-link", target: this.external ? '_blank' : undefined, rel: this.external ? 'noopener noreferrer' : undefined }, h("slot", { key: 'e4895ceedd1dca0b54538b437cb33e725110d277' }), this.external && (h("svg", { key: '7afb7e3c86c5adfc1e4607995336a3d8aa403c89', class: "footer-link__external-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: 'dee8991e646e88601719d46a15d1df9104981abf', d: "M10 6.5v3a1 1 0 0 1-1 1H2.5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3M7.5 1.5h3v3M5.5 6.5l5-5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))));
     }
     static get is() { return "af-footer-link"; }
     static get encapsulation() { return "scoped"; }
@@ -70,4 +70,3 @@ export class AfFooterLink {
         };
     }
 }
-//# sourceMappingURL=af-footer-link.js.map

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

@@ -28,14 +28,14 @@ export class AfGrid {
             end: 'end',
             stretch: 'stretch',
         };
-        return (h(Host, { key: 'd8f5d8d0eb7a070892ed00bea3b6cacba55ebfd0', style: {
+        return (h(Host, { key: 'adfabda1af8685f619dde888d18812ba7738d4d4', style: {
                 '--grid-columns': String(this.columns),
                 '--grid-columns-lg': String(this.columnsLg ?? this.columns),
                 '--grid-columns-md': String(this.columnsMd ?? this.columnsLg ?? this.columns),
                 '--grid-columns-sm': String(this.columnsSm ?? this.columnsMd ?? this.columnsLg ?? 1),
                 '--grid-gap': `var(--space-${this.gap})`,
                 '--grid-align': alignMap[this.align],
-            } }, h("div", { key: '11c90d93bb50c200faeab87ffaef287256609f4e', class: "grid" }, h("slot", { key: '4e468e5ce63b0550ae6f16694b7e0a5e26d8564f' }))));
+            } }, h("div", { key: 'b5faca69ed75d579c0e0d386d79b5a2c0f048932', class: "grid" }, h("slot", { key: '4f78745841a62235fc4f70f3e69f28065e02adaa' }))));
     }
     static get is() { return "af-grid"; }
     static get encapsulation() { return "shadow"; }
@@ -158,7 +158,8 @@ export class AfGrid {
                         "Gap": {
                             "location": "import",
                             "path": "../../types",
-                            "id": "src/types.ts::Gap"
+                            "id": "src/types.ts::Gap",
+                            "referenceLocation": "Gap"
                         }
                     }
                 },
@@ -202,4 +203,3 @@ export class AfGrid {
         };
     }
 }
-//# sourceMappingURL=af-grid.js.map

package/dist/collection/components/af-grid-callout/af-grid-callout.js

@@ -188,4 +188,3 @@ export class AfGridCallout {
         };
     }
 }
-//# sourceMappingURL=af-grid-callout.js.map

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

@@ -88,4 +88,3 @@ export class AfHeading {
         };
     }
 }
-//# sourceMappingURL=af-heading.js.map

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

@@ -165,7 +165,7 @@ export class AfHero {
                     "references": {
                         "HeroVariant": {
                             "location": "local",
-                            "path": "/home/runner/work/affinda-ui/affinda-ui/packages/wc/src/components/af-hero/af-hero.tsx",
+                            "path": "/home/runner/work/affinda-website-npm-publish/affinda-website-npm-publish/packages/wc/src/components/af-hero/af-hero.tsx",
                             "id": "src/components/af-hero/af-hero.tsx::HeroVariant"
                         }
                     }
@@ -250,7 +250,7 @@ export class AfHero {
                     "references": {
                         "HeroTopPad": {
                             "location": "local",
-                            "path": "/home/runner/work/affinda-ui/affinda-ui/packages/wc/src/components/af-hero/af-hero.tsx",
+                            "path": "/home/runner/work/affinda-website-npm-publish/affinda-website-npm-publish/packages/wc/src/components/af-hero/af-hero.tsx",
                             "id": "src/components/af-hero/af-hero.tsx::HeroTopPad"
                         }
                     }
@@ -311,4 +311,3 @@ export class AfHero {
     }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=af-hero.js.map

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { getIconSvg } from "@affinda/icons";
+import { getIconSvg } from "../../../../../icons/dist/index";
 /**
  * Icon component that displays SVG icons from the Affinda icon library.
  * Icons inherit color from their parent via currentColor.
@@ -51,12 +51,13 @@ export class AfIcon {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"info\" | \"menu\" | \"code\" | \"data\" | \"search\" | \"time\" | \"close\" | \"pause\" | \"play\" | \"home\" | \"email\" | \"account-01\" | \"account-02\" | \"accounts-payable\" | \"arrow-down\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"bpo\" | \"chats\" | \"check\" | \"check-circle\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"document-upload\" | \"download\" | \"edit\" | \"eye\" | \"facebook\" | \"gear\" | \"github\" | \"heart\" | \"insurance\" | \"lending-01\" | \"lending-02\" | \"link-out\" | \"linkedin\" | \"map-pin\" | \"minus\" | \"numbers\" | \"plus\" | \"productivity\" | \"quote\" | \"recruitment\" | \"refresh\" | \"security-01\" | \"security-02\" | \"solutions\" | \"sparkle\" | \"support\" | \"system\" | \"verification-01\" | \"wand\" | \"x\" | \"youtube\"",
+                    "resolved": "\"account-01\" | \"account-02\" | \"accounts-payable\" | \"arrow-down\" | \"arrow-left\" | \"arrow-right\" | \"arrow-up\" | \"bpo\" | \"chats\" | \"check\" | \"check-circle\" | \"chevron-down\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"close\" | \"code\" | \"data\" | \"document-upload\" | \"download\" | \"edit\" | \"email\" | \"eye\" | \"facebook\" | \"gear\" | \"github\" | \"heart\" | \"home\" | \"info\" | \"insurance\" | \"lending-01\" | \"lending-02\" | \"link-out\" | \"linkedin\" | \"map-pin\" | \"menu\" | \"minus\" | \"numbers\" | \"pause\" | \"play\" | \"plus\" | \"productivity\" | \"quote\" | \"recruitment\" | \"refresh\" | \"search\" | \"security-01\" | \"security-02\" | \"solutions\" | \"sparkle\" | \"support\" | \"system\" | \"time\" | \"verification-01\" | \"wand\" | \"x\" | \"youtube\"",
                     "references": {
                         "IconName": {
                             "location": "import",
                             "path": "@affinda/icons",
-                            "id": "../icons/dist/index.d.ts::IconName"
+                            "id": "../icons/dist/index.d.ts::IconName",
+                            "referenceLocation": "IconName"
                         }
                     }
                 },
@@ -113,4 +114,3 @@ export class AfIcon {
         };
     }
 }
-//# sourceMappingURL=af-icon.js.map