@affinda/wc 0.5.0 → 0.6.1

package/dist/collection/components/af-in-page-banner/af-in-page-banner.js

@@ -66,7 +66,7 @@ export class AfInPageBanner {
         return (h("div", { class: "banner__wave-overlay", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 521 323", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "banner__wave-svg" }, h("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: "currentColor" }))));
     }
     render() {
-        return (h(Host, { key: '87abd1c23d56419cbbaf1c34230afa17f7ccffa8' }, h("div", { key: 'ea56f17212a63e56bf1339009dbbac39835aacf3', class: `banner theme-${this.theme}` }, this.showWaveDecoration && this.renderWaveOverlay(), h("div", { key: '09016e39680edb60995ce373f906025d86e4c9d4', class: "banner__illustration" }, this.illustrationUrl ? (h("img", { src: this.illustrationUrl, alt: "", class: "banner__illustration-img", loading: "lazy" })) : (h("slot", { name: "illustration" }))), h("div", { key: 'aebd3b10940e61b6b24a4592741173e175b8f17a', class: "banner__content" }, h("div", { key: 'e3f900a1775c905f4e5816ed56fc7ccfd48581a7', class: "banner__copy" }, h("h2", { key: 'fde36b2f853c379ab9434c2619eb9b5959f47a66', class: "banner__heading" }, h("slot", { key: 'd872bb70022c71240442fbf884e2479332657973', name: "heading" }, this.heading)), h("div", { key: '21728ca79ef014f2397da9c9bea6e42d278fdcbf', class: "banner__description" }, h("slot", { key: '5c383f37817482d3865d0aa9f4119522ef6b9152', name: "description" }, this.description))), h("div", { key: '057731169459a52833810baf53ad3f62c4687693', class: "banner__buttons" }, h("slot", { key: '1e6da776478fd903694226b78ccf4b99f9848d39', name: "buttons" }, this.primaryButtonText && (h("af-button", { key: '8c930f1b11bcd07a1078caa8a65dc29ef9a625f4', href: this.primaryButtonUrl, variant: "primary" }, this.primaryButtonText)), this.secondaryButtonText && (h("af-button", { key: '0b57d550f76dd26b2d5253f618fb4cd03cfd5186', href: this.secondaryButtonUrl, variant: "secondary" }, this.secondaryButtonText))))))));
+        return (h(Host, { key: '022f98e0925a4cdc04db66889b266f1741932513' }, h("div", { key: '64f60ef33b18ba4e0e20d5248a3a8d396a72b4cd', class: `banner theme-${this.theme}` }, this.showWaveDecoration && this.renderWaveOverlay(), h("div", { key: '26ff6aefd41268a5bece7fb2c5161cfacd38d54e', class: "banner__illustration" }, this.illustrationUrl ? (h("img", { src: this.illustrationUrl, alt: "", class: "banner__illustration-img", loading: "lazy" })) : (h("slot", { name: "illustration" }))), h("div", { key: '025c1664b11d6531d2471ab652a0715e58ee5d46', class: "banner__content" }, h("div", { key: 'e58cc91158e663068ddaa01fd9776135055769fc', class: "banner__copy" }, h("h2", { key: '7f3afcf9b28cbc1b924f6dec0bf4882c64b1c306', class: "banner__heading" }, h("slot", { key: 'ac04c8f27d294f97f79ab11595ce4c1e12e3d9f3', name: "heading" }, this.heading)), h("div", { key: '7b5a689cf681591d8eac098f9e0a8d3b01348140', class: "banner__description" }, h("slot", { key: '724079691b59aab3f336a3524b85f5fe27ad754d', name: "description" }, this.description))), h("div", { key: 'e4d8eedee783e6b48ca780bf95337048384165fc', class: "banner__buttons" }, h("slot", { key: 'e1b5995706145354b41daa5a774086ddaa65accc', name: "buttons" }, this.primaryButtonText && (h("af-button", { key: 'c5e797d3c62876d4ba964272efe7d9d97b962a36', href: this.primaryButtonUrl, variant: "primary" }, this.primaryButtonText)), this.secondaryButtonText && (h("af-button", { key: 'e4a8ba0065181b3201f906fdc718595ad9bdd4fc', href: this.secondaryButtonUrl, variant: "secondary" }, this.secondaryButtonText))))))));
     }
     static get is() { return "af-in-page-banner"; }
     static get encapsulation() { return "scoped"; }

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

@@ -49,7 +49,7 @@ export class AfInline {
             justifyContent: justifyMap[this.justify],
             flexWrap: this.wrap ? 'wrap' : 'nowrap',
         };
-        return (h(Host, { key: '3dce5c336021a6c5046258120a72f3087a421e2a', style: style }, h("slot", { key: '28fb5aff7cb1a0edf1389bc7146d21560313468c' })));
+        return (h(Host, { key: '7069c721994bbd1acc8d57875522dbefdaf796d9', style: style }, h("slot", { key: 'e39c2d982cca56ab6545e3e8a43eea7696708f21' })));
     }
     static get is() { return "af-inline"; }
     static get encapsulation() { return "shadow"; }

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

@@ -214,6 +214,48 @@
   border-radius: 4px;
 }
 
+/* ---------- Multiline (textarea) mode ---------- */
+
+/* Container has no inner padding in multiline mode — the textarea
+   element owns the padding so it fills the box and resizes cleanly. */
+.input-container--multiline {
+  padding: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Native textarea */
+.input--multiline {
+  flex: 1;
+  min-width: 0;
+  min-height: 108px;
+  padding: 12px 16px;
+  border: none;
+  background: transparent;
+  font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);
+  font-weight: var(--font-weight-regular, 400);
+  font-size: 16px;
+  line-height: 24px;
+  color: var(--af-input-text, var(--af-typography-body-dark, #14343b));
+  outline: none;
+  resize: vertical;
+}
+
+.input--multiline::placeholder {
+  color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));
+  opacity: 1;
+}
+
+.input--multiline:disabled {
+  cursor: not-allowed;
+  color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));
+  resize: none;
+}
+
+.input--multiline:disabled::placeholder {
+  color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));
+}
+
 /* Error row */
 .error-row {
   display: flex;

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 /**
  * Input field component with label, description, and error states.
- * Supports various input types and validation states.
+ * Supports single-line and multi-line (textarea) modes via the `multiline` prop.
  *
  * @slot label-end - Content to display at the end of the label (e.g., info icon)
  */
@@ -12,7 +12,8 @@ export class AfInput {
          */
         this.value = '';
         /**
-         * The input type (text, email, password, number, tel, url, search)
+         * The input type (text, email, password, number, tel, url, search).
+         * Ignored when `multiline` is true.
          */
         this.type = 'text';
         /**
@@ -32,13 +33,27 @@ export class AfInput {
          */
         this.showInfoIcon = false;
         /**
-         * Whether to show a search icon in the input
+         * Whether to show a search icon in the input. Ignored when `multiline` is true.
          */
         this.showSearchIcon = false;
         /**
-         * Whether to show a clear button when input has value
+         * Whether to show a clear button when input has value. Ignored when `multiline` is true.
          */
         this.clearable = false;
+        /**
+         * Render as a multi-line textarea instead of a single-line input.
+         * Activates `rows` and `resize` props; ignores `type`, `pattern`,
+         * `autocomplete`, `showSearchIcon`, `clearable`.
+         */
+        this.multiline = false;
+        /**
+         * Number of visible rows when `multiline` is true. Ignored otherwise.
+         */
+        this.rows = 4;
+        /**
+         * Whether the textarea is resizable. Ignored when `multiline` is false.
+         */
+        this.resize = 'vertical';
         this.isFocused = false;
         this.isHovered = false;
         this.handleInput = (event) => {
@@ -75,8 +90,10 @@ export class AfInput {
     render() {
         const hasError = !!this.error;
         const hasValue = !!(this.value && this.value.length > 0);
+        const multiline = this.multiline;
         const wrapperClasses = {
             'input-wrapper': true,
+            'input-wrapper--multiline': multiline,
             'disabled': this.disabled,
             'error': hasError,
             'focused': this.isFocused,
@@ -85,12 +102,13 @@ export class AfInput {
         };
         const inputContainerClasses = {
             'input-container': true,
+            'input-container--multiline': multiline,
             'disabled': this.disabled,
             'error': hasError,
             'focused': this.isFocused,
             'hovered': this.isHovered && !this.disabled && !this.isFocused
         };
-        return (h(Host, { key: '5bf8980e12ad5fc3b8b84df3acc749bddf61042d' }, h("div", { key: 'd0266eca85871397ed73381ca3d36f3dc2dd79ce', class: wrapperClasses }, this.label && (h("div", { key: 'f9fc2fe3f52a1f9be1404943d91489357ea941dc', class: "label-row" }, h("label", { key: '76283a7f0c9be127aa8c9115fcbc26b2d67d51cc', class: "label", htmlFor: "input" }, this.label, this.required && h("span", { key: '6b0de23e857abfdd25d6eefaa6ff22f22fa813dd', class: "required" }, "*")), this.showInfoIcon && (h("button", { key: '7c5f7a47a8357301f3fe28d6078bdec3ec1160c3', type: "button", class: "info-icon", onClick: this.handleInfoClick, "aria-label": "More information" }, h("svg", { key: '655c9448589937c2047a58962f78ab1872e0da84', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '5066c29389ac8f9e1e27771f43a98f75f9b03634', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '1993da070066d33575618267d6af5b13b641143b', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'dd99ac12d4a23b98c98fca1df34916968276fc0e', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("slot", { key: 'b406de5a455af79a69497c6a641b5c41347ee1ab', name: "label-end" }))), this.description && (h("p", { key: '0dcebb186df7055efb168f96ad4199e2f614a87c', class: "description" }, this.description)), h("div", { key: '754b8a3e67d5807d7d484d475d31913dee8004f4', class: inputContainerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.showSearchIcon && (h("span", { key: '5757962a3479a6cd1f12bd1da183919af69ad9f4', class: "search-icon" }, h("svg", { key: '4106175e5b41e4c978b38eda6db36799a6a6f762', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '1d54b9a8c682c9049e97b28143f0dcd90e068dee', d: "M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'd3ed0187abde8c14eae462612c918e10cb46916d', d: "M21 21L16.65 16.65", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("input", { key: 'fb7a551d44282686732b78865bab8720c5e08830', ref: (el) => this.inputEl = el ?? undefined, id: "input", class: "input", type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, readonly: this.readonly, autocomplete: this.autocomplete, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, "aria-invalid": hasError ? 'true' : undefined, "aria-describedby": hasError ? 'error-message' : this.description ? 'description' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }), this.clearable && hasValue && !this.disabled && !this.readonly && (h("button", { key: '6ad41a3ee4ffdbeefa11e45754a22143b33405e5', type: "button", class: "clear-button", onClick: this.handleClear, "aria-label": "Clear input" }, h("svg", { key: '129f73660030e81ff17071fae51bb34af23eca57', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '78d4c71521ac7daced7023c5bcfb2bfccf593fab', d: "M18 6L6 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '4eb85452029e8347dd648dcc849fa000b41b7fea', d: "M6 6L18 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), hasError && (h("div", { key: 'cc3b6083e88bb99ec17edffbf95ec89e2bb27e97', class: "error-row", id: "error-message" }, h("span", { key: 'fe264a854aaebe481a6913275859ca57b1d61d0d', class: "error-icon" }, h("svg", { key: '1159f77b184d1888c5c5ebe6138070c66abb66e6', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '59975a202086127c2548843e842d33895d6ba1ff', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '11c79f296c1dce73beebd67eeefe3d71b17ee191', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '9f146c96a38b14afb1919cf480224ee520ac16b0', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { key: '2d326d0d72727dca4c4839fb5279323e556fbe04', class: "error-text" }, this.error))))));
+        return (h(Host, { key: '55cf204d355367913c765891190048599a46653e' }, h("div", { key: '8f72840a7a6fa8615e535f171f5297fb5d0cdfe5', class: wrapperClasses }, this.label && (h("div", { key: '06711c6031da07fca88bd438db7fb80acc12df71', class: "label-row" }, h("label", { key: '1db607ff65a624aa2520bdfbc2063c0f6587b00c', class: "label", htmlFor: "input" }, this.label, this.required && h("span", { key: 'd2ffc85aafb99e5fc7723993354a23fd99f04ac6', class: "required" }, "*")), this.showInfoIcon && (h("button", { key: '1adcddb4121582d35eff611d8299ff4ed6d0cc24', type: "button", class: "info-icon", onClick: this.handleInfoClick, "aria-label": "More information" }, h("svg", { key: 'e1abef80244c616ba98f89d23f9a4b6b2e4d97e1', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'fedd67859d45345298c7e6e4a67e1e98ac4a9178', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '076a1ff76cc8b5287dd29df42d6b629d34ae739e', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '640f19dd94e31f1090704ccc534b3917cc70a905', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("slot", { key: 'e3b42a60ad6b2378ab6593e239208b847d20c8ad', name: "label-end" }))), this.description && (h("p", { key: '8bf359cd53f562bedbe29f54004d5a974398db7b', class: "description" }, this.description)), h("div", { key: 'eb5a21523188828d60713cc772a477fa2a22a3a3', class: inputContainerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, !multiline && this.showSearchIcon && (h("span", { key: 'ed8945ddd4601e3d2ef84f2644a7ab567156157a', class: "search-icon" }, h("svg", { key: '2684f4233757a74cb55abfb1e62481e5848a5fbc', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f6855623658e5ea149421b37f039967e6622c955', d: "M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'db81f64ac649e9f41bfdb47a287d3e671951f171', d: "M21 21L16.65 16.65", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), multiline ? (h("textarea", { ref: (el) => this.inputEl = el ?? undefined, id: "input", class: "input input--multiline", name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, readonly: this.readonly, rows: this.rows, maxlength: this.maxlength, minlength: this.minlength, style: { resize: this.resize }, "aria-invalid": hasError ? 'true' : undefined, "aria-describedby": hasError ? 'error-message' : this.description ? 'description' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })) : (h("input", { ref: (el) => this.inputEl = el ?? undefined, id: "input", class: "input", type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, readonly: this.readonly, autocomplete: this.autocomplete, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, "aria-invalid": hasError ? 'true' : undefined, "aria-describedby": hasError ? 'error-message' : this.description ? 'description' : undefined, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur })), !multiline && this.clearable && hasValue && !this.disabled && !this.readonly && (h("button", { key: 'ed7c9c3753fd291aa1105c2f30e00a2b2868efed', type: "button", class: "clear-button", onClick: this.handleClear, "aria-label": "Clear input" }, h("svg", { key: '0615828eb7d27c6cf45fa7f91b25a14dd97fe972', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '6a60d954427656fcc01940dd861c37bd214570d0', d: "M18 6L6 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '9471a7899c62b9fbce7ceafc4986b29c0000f26f', d: "M6 6L18 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), hasError && (h("div", { key: '1972022a3ca5a7f366a83cf35e2eecb4b812bd29', class: "error-row", id: "error-message" }, h("span", { key: '450e80c8d42914048eb114a222d9db8e9b94d3fa', class: "error-icon" }, h("svg", { key: '57eeb2884b16a9adf5fe0744814d00465da436e1', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '9e25cb82f47c915b4c4afa0283a143c9221b465c', d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: 'faf252192e9a4706c5ed363ba240a0cb1ddf6770', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { key: '4eda8b2840b7bf70919460ffe46e54d702ec3191', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { key: 'a22e99093a097f8c7be12c8aa4a1b65a87484eb3', class: "error-text" }, this.error))))));
     }
     static get is() { return "af-input"; }
     static get encapsulation() { return "shadow"; }
@@ -195,7 +213,7 @@ export class AfInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The input type (text, email, password, number, tel, url, search)"
+                    "text": "The input type (text, email, password, number, tel, url, search).\nIgnored when `multiline` is true."
                 },
                 "getter": false,
                 "setter": false,
@@ -333,7 +351,7 @@ export class AfInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether to show a search icon in the input"
+                    "text": "Whether to show a search icon in the input. Ignored when `multiline` is true."
                 },
                 "getter": false,
                 "setter": false,
@@ -353,7 +371,7 @@ export class AfInput {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether to show a clear button when input has value"
+                    "text": "Whether to show a clear button when input has value. Ignored when `multiline` is true."
                 },
                 "getter": false,
                 "setter": false,
@@ -430,12 +448,72 @@ export class AfInput {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Pattern for input validation (regex)"
+                    "text": "Pattern for input validation (regex). Ignored when `multiline` is true."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "pattern"
+            },
+            "multiline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Render as a multi-line textarea instead of a single-line input.\nActivates `rows` and `resize` props; ignores `type`, `pattern`,\n`autocomplete`, `showSearchIcon`, `clearable`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiline",
+                "defaultValue": "false"
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of visible rows when `multiline` is true. Ignored otherwise."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows",
+                "defaultValue": "4"
+            },
+            "resize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'vertical' | 'horizontal' | 'both'",
+                    "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the textarea is resizable. Ignored when `multiline` is false."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "resize",
+                "defaultValue": "'vertical'"
             }
         };
     }
@@ -499,7 +577,7 @@ export class AfInput {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the clear button is clicked"
+                    "text": "Emitted when the clear button is clicked. Only fires in single-line mode."
                 },
                 "complexType": {
                     "original": "void",

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

@@ -1 +1 @@
-{"version":3,"file":"af-input.js","sourceRoot":"","sources":["../../../src/components/af-input/af-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Host, Event, EventEmitter, State } from '@stencil/core';\n\n/**\n * Input field component with label, description, and error states.\n * Supports various input types and validation states.\n * \n * @slot label-end - Content to display at the end of the label (e.g., info icon)\n */\n@Component({\n  tag: 'af-input',\n  styleUrl: 'af-input.css',\n  shadow: true\n})\nexport class AfInput {\n  /**\n   * The label text for the input field\n   */\n  @Prop() label?: string;\n\n  /**\n   * Description text displayed below the label\n   */\n  @Prop() description?: string;\n\n  /**\n   * Placeholder text for the input\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * The current value of the input\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * The input type (text, email, password, number, tel, url, search)\n   */\n  @Prop() type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' = 'text';\n\n  /**\n   * The name of the input for form submission\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Whether the input is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether the input is read-only\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Error message to display (also sets error state)\n   */\n  @Prop() error?: string;\n\n  /**\n   * Whether to show the info icon next to the label\n   */\n  @Prop() showInfoIcon: boolean = false;\n\n  /**\n   * Whether to show a search icon in the input\n   */\n  @Prop() showSearchIcon: boolean = false;\n\n  /**\n   * Whether to show a clear button when input has value\n   */\n  @Prop() clearable: boolean = false;\n\n  /**\n   * Autocomplete attribute for the input\n   */\n  @Prop() autocomplete?: string;\n\n  /**\n   * Maximum length of input value\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * Minimum length of input value\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * Pattern for input validation (regex)\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Emitted when the input value changes\n   */\n  @Event() afInput!: EventEmitter<{ value: string }>;\n\n  /**\n   * Emitted when the input loses focus\n   */\n  @Event() afBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input gains focus\n   */\n  @Event() afFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the clear button is clicked\n   */\n  @Event() afClear!: EventEmitter<void>;\n\n  /**\n   * Emitted when the info icon is clicked\n   */\n  @Event() afInfoClick!: EventEmitter<void>;\n\n  @State() private isFocused: boolean = false;\n  @State() private isHovered: boolean = false;\n\n  private inputEl?: HTMLInputElement;\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.afInput.emit({ value: this.value });\n  };\n\n  private handleFocus = () => {\n    this.isFocused = true;\n    this.afFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.isFocused = false;\n    this.afBlur.emit();\n  };\n\n  private handleMouseEnter = () => {\n    this.isHovered = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovered = false;\n  };\n\n  private handleClear = () => {\n    this.value = '';\n    this.afClear.emit();\n    this.afInput.emit({ value: '' });\n    this.inputEl?.focus();\n  };\n\n  private handleInfoClick = (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.afInfoClick.emit();\n  };\n\n  render() {\n    const hasError = !!this.error;\n    const hasValue = !!(this.value && this.value.length > 0);\n\n    const wrapperClasses = {\n      'input-wrapper': true,\n      'disabled': this.disabled,\n      'error': hasError,\n      'focused': this.isFocused,\n      'hovered': this.isHovered && !this.disabled && !this.isFocused,\n      'populated': hasValue\n    };\n\n    const inputContainerClasses = {\n      'input-container': true,\n      'disabled': this.disabled,\n      'error': hasError,\n      'focused': this.isFocused,\n      'hovered': this.isHovered && !this.disabled && !this.isFocused\n    };\n\n    return (\n      <Host>\n        <div class={wrapperClasses}>\n          {/* Label */}\n          {this.label && (\n            <div class=\"label-row\">\n              <label class=\"label\" htmlFor=\"input\">\n                {this.label}\n                {this.required && <span class=\"required\">*</span>}\n              </label>\n              {this.showInfoIcon && (\n                <button \n                  type=\"button\" \n                  class=\"info-icon\" \n                  onClick={this.handleInfoClick}\n                  aria-label=\"More information\"\n                >\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M12 16V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M12 8H12.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                </button>\n              )}\n              <slot name=\"label-end\"></slot>\n            </div>\n          )}\n\n          {/* Description */}\n          {this.description && (\n            <p class=\"description\">{this.description}</p>\n          )}\n\n          {/* Input container */}\n          <div \n            class={inputContainerClasses}\n            onMouseEnter={this.handleMouseEnter}\n            onMouseLeave={this.handleMouseLeave}\n          >\n            {/* Search icon */}\n            {this.showSearchIcon && (\n              <span class=\"search-icon\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  <path d=\"M21 21L16.65 16.65\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n            )}\n\n            {/* Native input */}\n            <input\n              ref={(el) => this.inputEl = el ?? undefined}\n              id=\"input\"\n              class=\"input\"\n              type={this.type}\n              name={this.name}\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              required={this.required}\n              readonly={this.readonly}\n              autocomplete={this.autocomplete}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              pattern={this.pattern}\n              aria-invalid={hasError ? 'true' : undefined}\n              aria-describedby={hasError ? 'error-message' : this.description ? 'description' : undefined}\n              onInput={this.handleInput}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n            />\n\n            {/* Clear button */}\n            {this.clearable && hasValue && !this.disabled && !this.readonly && (\n              <button \n                type=\"button\" \n                class=\"clear-button\" \n                onClick={this.handleClear}\n                aria-label=\"Clear input\"\n              >\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  <path d=\"M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </button>\n            )}\n          </div>\n\n          {/* Error message */}\n          {hasError && (\n            <div class=\"error-row\" id=\"error-message\">\n              <span class=\"error-icon\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  <path d=\"M12 16V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  <path d=\"M12 8H12.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"error-text\">{this.error}</span>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}
+{"version":3,"file":"af-input.js","sourceRoot":"","sources":["../../../src/components/af-input/af-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Host, Event, EventEmitter, State } from '@stencil/core';\n\n/**\n * Input field component with label, description, and error states.\n * Supports single-line and multi-line (textarea) modes via the `multiline` prop.\n *\n * @slot label-end - Content to display at the end of the label (e.g., info icon)\n */\n@Component({\n  tag: 'af-input',\n  styleUrl: 'af-input.css',\n  shadow: true\n})\nexport class AfInput {\n  /**\n   * The label text for the input field\n   */\n  @Prop() label?: string;\n\n  /**\n   * Description text displayed below the label\n   */\n  @Prop() description?: string;\n\n  /**\n   * Placeholder text for the input\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * The current value of the input\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * The input type (text, email, password, number, tel, url, search).\n   * Ignored when `multiline` is true.\n   */\n  @Prop() type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' = 'text';\n\n  /**\n   * The name of the input for form submission\n   */\n  @Prop() name?: string;\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Whether the input is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Whether the input is read-only\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Error message to display (also sets error state)\n   */\n  @Prop() error?: string;\n\n  /**\n   * Whether to show the info icon next to the label\n   */\n  @Prop() showInfoIcon: boolean = false;\n\n  /**\n   * Whether to show a search icon in the input. Ignored when `multiline` is true.\n   */\n  @Prop() showSearchIcon: boolean = false;\n\n  /**\n   * Whether to show a clear button when input has value. Ignored when `multiline` is true.\n   */\n  @Prop() clearable: boolean = false;\n\n  /**\n   * Autocomplete attribute for the input\n   */\n  @Prop() autocomplete?: string;\n\n  /**\n   * Maximum length of input value\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * Minimum length of input value\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * Pattern for input validation (regex). Ignored when `multiline` is true.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Render as a multi-line textarea instead of a single-line input.\n   * Activates `rows` and `resize` props; ignores `type`, `pattern`,\n   * `autocomplete`, `showSearchIcon`, `clearable`.\n   */\n  @Prop() multiline: boolean = false;\n\n  /**\n   * Number of visible rows when `multiline` is true. Ignored otherwise.\n   */\n  @Prop() rows: number = 4;\n\n  /**\n   * Whether the textarea is resizable. Ignored when `multiline` is false.\n   */\n  @Prop() resize: 'none' | 'vertical' | 'horizontal' | 'both' = 'vertical';\n\n  /**\n   * Emitted when the input value changes\n   */\n  @Event() afInput!: EventEmitter<{ value: string }>;\n\n  /**\n   * Emitted when the input loses focus\n   */\n  @Event() afBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input gains focus\n   */\n  @Event() afFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the clear button is clicked. Only fires in single-line mode.\n   */\n  @Event() afClear!: EventEmitter<void>;\n\n  /**\n   * Emitted when the info icon is clicked\n   */\n  @Event() afInfoClick!: EventEmitter<void>;\n\n  @State() private isFocused: boolean = false;\n  @State() private isHovered: boolean = false;\n\n  private inputEl?: HTMLInputElement | HTMLTextAreaElement;\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement | HTMLTextAreaElement;\n    this.value = target.value;\n    this.afInput.emit({ value: this.value });\n  };\n\n  private handleFocus = () => {\n    this.isFocused = true;\n    this.afFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.isFocused = false;\n    this.afBlur.emit();\n  };\n\n  private handleMouseEnter = () => {\n    this.isHovered = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovered = false;\n  };\n\n  private handleClear = () => {\n    this.value = '';\n    this.afClear.emit();\n    this.afInput.emit({ value: '' });\n    this.inputEl?.focus();\n  };\n\n  private handleInfoClick = (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.afInfoClick.emit();\n  };\n\n  render() {\n    const hasError = !!this.error;\n    const hasValue = !!(this.value && this.value.length > 0);\n    const multiline = this.multiline;\n\n    const wrapperClasses = {\n      'input-wrapper': true,\n      'input-wrapper--multiline': multiline,\n      'disabled': this.disabled,\n      'error': hasError,\n      'focused': this.isFocused,\n      'hovered': this.isHovered && !this.disabled && !this.isFocused,\n      'populated': hasValue\n    };\n\n    const inputContainerClasses = {\n      'input-container': true,\n      'input-container--multiline': multiline,\n      'disabled': this.disabled,\n      'error': hasError,\n      'focused': this.isFocused,\n      'hovered': this.isHovered && !this.disabled && !this.isFocused\n    };\n\n    return (\n      <Host>\n        <div class={wrapperClasses}>\n          {/* Label */}\n          {this.label && (\n            <div class=\"label-row\">\n              <label class=\"label\" htmlFor=\"input\">\n                {this.label}\n                {this.required && <span class=\"required\">*</span>}\n              </label>\n              {this.showInfoIcon && (\n                <button\n                  type=\"button\"\n                  class=\"info-icon\"\n                  onClick={this.handleInfoClick}\n                  aria-label=\"More information\"\n                >\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M12 16V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                    <path d=\"M12 8H12.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  </svg>\n                </button>\n              )}\n              <slot name=\"label-end\"></slot>\n            </div>\n          )}\n\n          {/* Description */}\n          {this.description && (\n            <p class=\"description\">{this.description}</p>\n          )}\n\n          {/* Input container */}\n          <div\n            class={inputContainerClasses}\n            onMouseEnter={this.handleMouseEnter}\n            onMouseLeave={this.handleMouseLeave}\n          >\n            {/* Search icon (single-line only) */}\n            {!multiline && this.showSearchIcon && (\n              <span class=\"search-icon\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  <path d=\"M21 21L16.65 16.65\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n            )}\n\n            {/* Native input or textarea */}\n            {multiline ? (\n              <textarea\n                ref={(el) => this.inputEl = el ?? undefined}\n                id=\"input\"\n                class=\"input input--multiline\"\n                name={this.name}\n                value={this.value}\n                placeholder={this.placeholder}\n                disabled={this.disabled}\n                required={this.required}\n                readonly={this.readonly}\n                rows={this.rows}\n                maxlength={this.maxlength}\n                minlength={this.minlength}\n                style={{ resize: this.resize }}\n                aria-invalid={hasError ? 'true' : undefined}\n                aria-describedby={hasError ? 'error-message' : this.description ? 'description' : undefined}\n                onInput={this.handleInput}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n              />\n            ) : (\n              <input\n                ref={(el) => this.inputEl = el ?? undefined}\n                id=\"input\"\n                class=\"input\"\n                type={this.type}\n                name={this.name}\n                value={this.value}\n                placeholder={this.placeholder}\n                disabled={this.disabled}\n                required={this.required}\n                readonly={this.readonly}\n                autocomplete={this.autocomplete}\n                maxlength={this.maxlength}\n                minlength={this.minlength}\n                pattern={this.pattern}\n                aria-invalid={hasError ? 'true' : undefined}\n                aria-describedby={hasError ? 'error-message' : this.description ? 'description' : undefined}\n                onInput={this.handleInput}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n              />\n            )}\n\n            {/* Clear button (single-line only) */}\n            {!multiline && this.clearable && hasValue && !this.disabled && !this.readonly && (\n              <button\n                type=\"button\"\n                class=\"clear-button\"\n                onClick={this.handleClear}\n                aria-label=\"Clear input\"\n              >\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                  <path d=\"M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </button>\n            )}\n          </div>\n\n          {/* Error message */}\n          {hasError && (\n            <div class=\"error-row\" id=\"error-message\">\n              <span class=\"error-icon\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M12 16V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                <path d=\"M12 8H12.01\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                </svg>\n              </span>\n              <span class=\"error-text\">{this.error}</span>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n\n"]}

package/dist/collection/components/af-logo-well/af-logo-well.js

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class AfLogoWell {
     render() {
-        return (h(Host, { key: '3dce73db40979d85f0ec5f467baf049e3582d8e2' }, h("div", { key: '7c788d3abb3ad7b1f6835d4561c3389dda007ffa', class: "logo-well" }, h("slot", { key: 'fa27e27c2c6204256582143b8dd00c8de5f73501' }))));
+        return (h(Host, { key: '89f971eecc9e4a0656c6a6865c2653e64bbdd7bb' }, h("div", { key: 'a4ac54bd1649f010caa095b2ea1f8e7ea8b24a02', class: "logo-well" }, h("slot", { key: '11cf1c916f2b056c6ee575351263d83778529146' }))));
     }
     static get is() { return "af-logo-well"; }
     static get encapsulation() { return "shadow"; }

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

@@ -71,7 +71,7 @@ export class AfNavAccordion {
         this.syncItems();
     }
     render() {
-        return (h(Host, { key: 'e60e0f40da03dce1a766a880f1f3649dd957b63e', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, h("div", { key: 'e80e79b012c3060a9fdfcec22af050eb5d063648', class: "nav-accordion" }, h("slot", { key: '234d41321e32046d3d439a93a544c0325b0a02a8' }))));
+        return (h(Host, { key: '111706b5210510f44864d0dd8f5d2fe1901839da', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, h("div", { key: 'e21f1a8ae3edf2c8aa08385240a536c69cf0da6e', class: "nav-accordion" }, h("slot", { key: 'c452fa149aec51c88dbaef3e59de7e28c4f89de3' }))));
     }
     static get is() { return "af-nav-accordion"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-nav-accordion-item/af-nav-accordion-item.js

@@ -84,11 +84,11 @@ export class AfNavAccordionItem {
         // sub-content to expand. A plain href item with no children is a
         // direct link and shouldn't show a disclosure affordance.
         const hasDropdownContent = this.hasContent;
-        return (h(Host, { key: '4027092e406bd448da8d84941b626a5416d7974f', class: {
+        return (h(Host, { key: 'bcdd77ad3dea306e2c1b9b8481d3e00a8cd8cc72', class: {
                 'is-open': this.open,
                 'is-disabled': this.disabled,
                 [`breakpoint-${this.breakpoint}`]: true
-            } }, h("div", { key: '5ed6f75516a8b2a82c9231568beef6b8d5257318', class: "nav-accordion-item" }, this.href ? (h("a", { href: this.href, class: "trigger", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}` }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), hasDropdownContent && (h("button", { class: "chevron-button", onClick: (e) => { e.preventDefault(); e.stopPropagation(); this.toggle(); }, "aria-label": this.open ? 'Collapse' : 'Expand', type: "button" }, h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))) : (h("button", { class: "trigger", onClick: this.handleTriggerClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}`, disabled: this.disabled, type: "button" }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), hasDropdownContent && (h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: '158bd9902b4f77655cccfb8571802fd4853abbcc', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, h("div", { key: 'a3a4a2214fb02312d2ed90772afc83f5799f01dc', class: "content", ref: (el) => (this.contentRef = el) }, h("slot", { key: '834d9fc168ca9e17bcfa2dc9cd117e51e331344e' }))))));
+            } }, h("div", { key: 'b82a343372689e06aff2ec3eb2b9b2b0ba02c14d', class: "nav-accordion-item" }, this.href ? (h("a", { href: this.href, class: "trigger", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}` }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), hasDropdownContent && (h("button", { class: "chevron-button", onClick: (e) => { e.preventDefault(); e.stopPropagation(); this.toggle(); }, "aria-label": this.open ? 'Collapse' : 'Expand', type: "button" }, h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))) : (h("button", { class: "trigger", onClick: this.handleTriggerClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}`, disabled: this.disabled, type: "button" }, h("div", { class: "trigger-content" }, h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, h("span", { class: "label" }, this.label))), hasDropdownContent && (h("div", { class: { 'chevron': true, 'is-open': this.open } }, h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: '880a15014002f905a4c1c1e20dc5516022b9aee1', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, h("div", { key: 'e47b8972907ad32e3fee37f030f1d86c17ac30bc', class: "content", ref: (el) => (this.contentRef = el) }, h("slot", { key: '1def93a51457196a6a023ab32905b8eaa7590c05' }))))));
     }
     static get is() { return "af-nav-accordion-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-nav-menu/af-nav-menu.js

@@ -30,7 +30,7 @@ export class AfNavMenu {
             'has-border': this.showBorder,
             'card-style': this.cardStyle
         };
-        return (h(Host, { key: 'b77aa8f55e2148e3a21dea9009ccc9f345ad5da1' }, h("div", { key: '0ef8c2202f6ba4925bf16a2e448dec67f65b1bd6', class: classes }, this.heading && (h("div", { key: '6164df7a1a6efe8afb57860d20175fa5ecabf39c', class: "menu-header" }, h("h3", { key: 'a517c7e3039424974c111dc8bf085b9bb57ce833', class: "menu-heading" }, this.heading))), h("div", { key: '18389d1f29886f2d832744bf1cadc449c8e96948', class: "menu-items" }, h("slot", { key: '40c5ffc54a5c1eedd8e07fbecd040070f1b16d97' })))));
+        return (h(Host, { key: '3245ae98bb4b1ab013d36630802bb1cdece57675' }, h("div", { key: 'e84dcdc45b92f928ee7b8dd2328a2b7276a2e02a', class: classes }, this.heading && (h("div", { key: 'd42c91176b53b5d0375cb29d489b722dcd3c8e74', class: "menu-header" }, h("h3", { key: 'b2cf5d6cb682db6f68c9a45045fb060710097137', class: "menu-heading" }, this.heading))), h("div", { key: '89e7aef886d60d2ce3d8b82cd1b2c588d4894be8', class: "menu-items" }, h("slot", { key: '29d596f664fdfc83fc40c17686751f1b893bce26' })))));
     }
     static get is() { return "af-nav-menu"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-nav-menu-nest/af-nav-menu-nest.js

@@ -48,7 +48,7 @@ export class AfNavMenuNest {
             [`type-${this.type}`]: true,
             [`breakpoint-${this.breakpoint}`]: true
         };
-        return (h(Host, { key: '90fbee205d076ffd9884122101a2f337088d6cd6' }, h("div", { key: '49e9b2290833f5200119d2cac7d4381e74eddbec', class: classes }, h("div", { key: '148790bd4481d662149913a6b53e248c4ff49f95', class: "menu-columns" }, h("slot", { key: '7790aa268c060cc8253bab3dc08c9de0819eb39a' })), h("div", { key: '393ed046ddcd717e4d1dd8a2e9df0332f1612238', class: "menu-sidebar" }, h("slot", { key: 'cb61c9744b070aaf2bcbbbf2b402664e41e2866c', name: "sidebar" })))));
+        return (h(Host, { key: 'b0eb2c4904916a16b2b6ec6d612337fed3c05e12' }, h("div", { key: 'dd1836b1c6ee6f75555989334a35e2a41d9bacab', class: classes }, h("div", { key: '4e3ae3951e9969d21a5e18a0489a33631bb1e8f2', class: "menu-columns" }, h("slot", { key: '64c660d4a5b35dda06b0ff0ca21c0e24014ceef2' })), h("div", { key: '7418a543431a9fd0fbbf95b1e3b5e862d5ac3917', class: "menu-sidebar" }, h("slot", { key: 'd36bb4016c86d9258a70ddbb46232264bdb156e4', name: "sidebar" })))));
     }
     static get is() { return "af-nav-menu-nest"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-number-badge/af-number-badge.js

@@ -34,7 +34,7 @@ export class AfNumberBadge {
             height: `${this.size}px`,
             fontSize: `${fontSize}px`,
         };
-        return (h(Host, { key: '6d275b5b5e029c0d34508dca9cd674cfcc686130', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, h("span", { key: 'd158b8c0139ac46b892170859ae0d0c43ec2eb9a', class: {
+        return (h(Host, { key: 'e38ee2826f507669b252c5aac8b02c9f0040d97e', role: "img", "aria-label": `Number ${this.number}${isInCircle ? ' badge' : ''}` }, h("span", { key: '49d9df033be715ce38e87b32a8fec3b2d9596675', class: {
                 'badge': true,
                 [`variant-${this.variant}`]: true,
             }, style: badgeStyle }, this.number)));

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

@@ -49,7 +49,7 @@ export class AfNumberedStepper {
         });
     }
     render() {
-        return (h(Host, { key: '018229242bb7fbcd74c312683b4a6ce4e7337894', class: `numbered-stepper numbered-stepper--${this.orientation}`, role: "list" }, h("slot", { key: '3fae9bbb5bc403d2f55bd4076c1794163e9631e2' })));
+        return (h(Host, { key: '468809af144520073ec0924b8b293a1a7a98c2a6', class: `numbered-stepper numbered-stepper--${this.orientation}`, role: "list" }, h("slot", { key: 'e7ab09871620ab5ccc1b384443824a91750a15c3' })));
     }
     static get is() { return "af-numbered-stepper"; }
     static get encapsulation() { return "scoped"; }

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

@@ -24,7 +24,7 @@ export class AfNumberedStepperItem {
     render() {
         // The badge supports 1–10; clamp for safety so we never pass a bad prop.
         const clamped = Math.max(1, Math.min(10, this.index | 0));
-        return (h(Host, { key: 'f703f0459299a2a7f9bec41634fb9c71749aebdb', role: "listitem" }, h("div", { key: '635c36a16c67735dd241228fb44b3dda152bc9d9', class: "numbered-stepper-item__marker-row", "aria-hidden": "true" }, h("af-number-badge", { key: 'ce495f0f0f17ea196a0ba0032c4e897fb027b2ad', class: "numbered-stepper-item__badge", number: clamped, variant: "inCircle", size: 40 }), h("span", { key: '5158ca703611b55d28bb34b445f68fa462b582cf', class: "numbered-stepper-item__connector" })), h("af-typography-lockup", { key: '591e3622a0cd4132a13ea7b0c87e368954ce287c', class: "numbered-stepper-item__lockup", "heading-size": "card", "text-alignment": "center" }, h("slot", { key: '0b8ada7fb0b6bd5bb29eb8f1fffa07eb79984b3f', name: "heading" }), h("span", { key: '83813e92ed8e70dbaf507db4fb306e0d69cf5d51', slot: "description" }, h("slot", { key: 'a676610379b5f948d65acad4f8c4adeecf5c81a1', name: "body" })))));
+        return (h(Host, { key: '62bc6f558da62d664e22c680af3d4a0cd959ee27', role: "listitem" }, h("div", { key: 'aac9fb7f30e3a0bbb70303102526bc9871910737', class: "numbered-stepper-item__marker-row", "aria-hidden": "true" }, h("af-number-badge", { key: 'fb4ba62a61cdc4bced7985f8013a7adcc309cf0e', class: "numbered-stepper-item__badge", number: clamped, variant: "inCircle", size: 40 }), h("span", { key: '3090034f17f0c62ab94a91bd45b5772856b6c632', class: "numbered-stepper-item__connector" })), h("af-typography-lockup", { key: 'fdcc257515a9265330d4443d6e665ad44630cc73', class: "numbered-stepper-item__lockup", "heading-size": "card", "text-alignment": "center" }, h("slot", { key: '6905c5a82d0dc82ed81ef3847f534bde32be9262', name: "heading" }), h("span", { key: '8be84e524019bf3f51b5d8447eaae5d6d2b881f0', slot: "description" }, h("slot", { key: '6c0b5d91a79706cb864fa532d6432699130bd728', name: "body" })))));
     }
     static get is() { return "af-numbered-stepper-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/af-paperclip-decoration/af-paperclip-decoration.js

@@ -29,14 +29,18 @@ export class AfPaperclipDecoration {
     constructor() {
         /**
          * SVG width — accepts any CSS length or unitless number (pixels).
-         * Defaults to the intrinsic viewBox width (`655`).
+         * Default sized so the watermark stays inside the af-hero
+         * inkwell-centered column without bleeding into the `logos-below`
+         * client-logo carousel. Override per-page via the prop if a larger
+         * decorative scale is wanted somewhere with no logos slot.
          */
-        this.width = '655';
+        this.width = '520';
         /**
          * SVG height — accepts any CSS length or unitless number (pixels).
-         * Defaults to the intrinsic viewBox height (`754`).
+         * Sized to match the trimmed `width` default; preserves the source
+         * SVG's 655 × 754 aspect ratio.
          */
-        this.height = '754';
+        this.height = '600';
         /**
          * Fill opacity of the paperclip shape. Defaults to `0.06` to match the
          * marketing-site watermark treatment.
@@ -50,7 +54,7 @@ export class AfPaperclipDecoration {
         this.fill = 'white';
     }
     render() {
-        return (h(Host, { key: '4236fa1de1c1847b0665c79341000bfb63ab4509' }, h("svg", { key: '6c11c85851c7e6e11d625dac2eb546bb9a0405dc', "aria-hidden": "true", width: this.width, height: this.height, viewBox: "0 0 655 754", fill: "none", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "none" }, h("path", { key: 'ab2f7bcda82bd715dcf336abb1e191badd1f624a', d: "M1102.14 108.279C1031.8 37.5181 939.128 -1.06817 840.61 0.447304H358.674L262.104 157.124H841.87C842.558 157.124 843.36 157.124 844.047 157.124C900.638 157.124 953.791 179.273 994 219.725C1035.24 261.225 1058.04 316.715 1058.04 376.052C1058.04 497.872 960.665 596.844 841.068 596.844H251.335C197.609 596.844 153.848 552.313 153.848 497.639C153.848 442.965 197.723 397.734 251.221 396.102H779.208L878.872 239.426H248.586C111.577 242.923 0 358.682 0 497.639C0 636.596 112.723 753.404 251.335 753.404H841.068C1045.55 753.404 1212 584.021 1212 375.935C1212 274.398 1173.05 179.39 1102.26 108.162L1102.14 108.279Z", fill: this.fill, "fill-opacity": this.opacity }))));
+        return (h(Host, { key: '9db0e4d35474d6c783387ed5c522943ac89f5315' }, h("svg", { key: 'a79d736a5ab711844bc1f2233c493edf66039fb4', "aria-hidden": "true", width: this.width, height: this.height, viewBox: "0 0 655 754", fill: "none", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "none" }, h("path", { key: 'c6a0f21366a159e5af9f69e324797450e4b31b15', d: "M1102.14 108.279C1031.8 37.5181 939.128 -1.06817 840.61 0.447304H358.674L262.104 157.124H841.87C842.558 157.124 843.36 157.124 844.047 157.124C900.638 157.124 953.791 179.273 994 219.725C1035.24 261.225 1058.04 316.715 1058.04 376.052C1058.04 497.872 960.665 596.844 841.068 596.844H251.335C197.609 596.844 153.848 552.313 153.848 497.639C153.848 442.965 197.723 397.734 251.221 396.102H779.208L878.872 239.426H248.586C111.577 242.923 0 358.682 0 497.639C0 636.596 112.723 753.404 251.335 753.404H841.068C1045.55 753.404 1212 584.021 1212 375.935C1212 274.398 1173.05 179.39 1102.26 108.162L1102.14 108.279Z", fill: this.fill, "fill-opacity": this.opacity }))));
     }
     static get is() { return "af-paperclip-decoration"; }
     static get encapsulation() { return "shadow"; }
@@ -78,13 +82,13 @@ export class AfPaperclipDecoration {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "SVG width \u2014 accepts any CSS length or unitless number (pixels).\nDefaults to the intrinsic viewBox width (`655`)."
+                    "text": "SVG width \u2014 accepts any CSS length or unitless number (pixels).\nDefault sized so the watermark stays inside the af-hero\ninkwell-centered column without bleeding into the `logos-below`\nclient-logo carousel. Override per-page via the prop if a larger\ndecorative scale is wanted somewhere with no logos slot."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "width",
-                "defaultValue": "'655'"
+                "defaultValue": "'520'"
             },
             "height": {
                 "type": "string",
@@ -98,13 +102,13 @@ export class AfPaperclipDecoration {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "SVG height \u2014 accepts any CSS length or unitless number (pixels).\nDefaults to the intrinsic viewBox height (`754`)."
+                    "text": "SVG height \u2014 accepts any CSS length or unitless number (pixels).\nSized to match the trimmed `width` default; preserves the source\nSVG's 655 \u00D7 754 aspect ratio."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "height",
-                "defaultValue": "'754'"
+                "defaultValue": "'600'"
             },
             "opacity": {
                 "type": "number",

package/dist/collection/components/af-paperclip-decoration/af-paperclip-decoration.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-paperclip-decoration.js","sourceRoot":"","sources":["../../../src/components/af-paperclip-decoration/af-paperclip-decoration.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAMH,MAAM,OAAO,qBAAqB;IALlC;QAME;;;WAGG;QACK,UAAK,GAAW,KAAK,CAAC;QAE9B;;;WAGG;QACK,WAAM,GAAW,KAAK,CAAC;QAE/B;;;WAGG;QACK,YAAO,GAAW,IAAI,CAAC;QAE/B;;;;WAIG;QACK,SAAI,GAAW,OAAO,CAAC;KAuBhC;IArBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,2EACc,MAAM,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,mBAAmB,EAAC,MAAM;gBAE1B,6DACE,CAAC,EAAC,imBAAimB,EACnmB,IAAI,EAAE,IAAI,CAAC,IAAI,kBACD,IAAI,CAAC,OAAO,GAC1B,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Decorative paperclip vector graphic. Renders the left-half paperclip\n * silhouette (viewBox `0 0 655 754`) that the marketing site bleeds off\n * the right edge of inkwell hero sections.\n *\n * Purely decorative — the inner `<svg>` is `aria-hidden=\"true\"`. Size it\n * via the `width` / `height` props (they accept any CSS length, e.g.\n * `\"655\"`, `\"100%\"`, `\"50vw\"`) and position the host element in CSS.\n *\n * `fill` is white by default (intended for inkwell backgrounds); override\n * for other themes, e.g. `fill=\"var(--colour-brand-inkwell)\"` on a\n * mist-green section. `opacity` defaults to `0.06` to match the\n * watermark treatment used on `/`, `/au`, and `/platform`.\n *\n * @example\n * ```html\n * <af-section theme=\"inkwell\" padding=\"loose\" style=\"position:relative;overflow:hidden\">\n *   <af-paperclip-decoration\n *     style=\"position:absolute;bottom:-80px;right:-80px\"\n *   ></af-paperclip-decoration>\n *   <af-container style=\"position:relative;z-index:1\">\n *     <!-- hero content -->\n *   </af-container>\n * </af-section>\n * ```\n */\n@Component({\n  tag: 'af-paperclip-decoration',\n  styleUrl: 'af-paperclip-decoration.css',\n  shadow: true\n})\nexport class AfPaperclipDecoration {\n  /**\n   * SVG width — accepts any CSS length or unitless number (pixels).\n   * Defaults to the intrinsic viewBox width (`655`).\n   */\n  @Prop() width: string = '655';\n\n  /**\n   * SVG height — accepts any CSS length or unitless number (pixels).\n   * Defaults to the intrinsic viewBox height (`754`).\n   */\n  @Prop() height: string = '754';\n\n  /**\n   * Fill opacity of the paperclip shape. Defaults to `0.06` to match the\n   * marketing-site watermark treatment.\n   */\n  @Prop() opacity: number = 0.06;\n\n  /**\n   * Fill colour. Defaults to `white` (designed for inkwell backgrounds);\n   * override for other themes, e.g. `var(--colour-brand-inkwell)` on a\n   * mist-green section.\n   */\n  @Prop() fill: string = 'white';\n\n  render() {\n    return (\n      <Host>\n        <svg\n          aria-hidden=\"true\"\n          width={this.width}\n          height={this.height}\n          viewBox=\"0 0 655 754\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          preserveAspectRatio=\"none\"\n        >\n          <path\n            d=\"M1102.14 108.279C1031.8 37.5181 939.128 -1.06817 840.61 0.447304H358.674L262.104 157.124H841.87C842.558 157.124 843.36 157.124 844.047 157.124C900.638 157.124 953.791 179.273 994 219.725C1035.24 261.225 1058.04 316.715 1058.04 376.052C1058.04 497.872 960.665 596.844 841.068 596.844H251.335C197.609 596.844 153.848 552.313 153.848 497.639C153.848 442.965 197.723 397.734 251.221 396.102H779.208L878.872 239.426H248.586C111.577 242.923 0 358.682 0 497.639C0 636.596 112.723 753.404 251.335 753.404H841.068C1045.55 753.404 1212 584.021 1212 375.935C1212 274.398 1173.05 179.39 1102.26 108.162L1102.14 108.279Z\"\n            fill={this.fill}\n            fill-opacity={this.opacity}\n          />\n        </svg>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-paperclip-decoration.js","sourceRoot":"","sources":["../../../src/components/af-paperclip-decoration/af-paperclip-decoration.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAMH,MAAM,OAAO,qBAAqB;IALlC;QAME;;;;;;WAMG;QACK,UAAK,GAAW,KAAK,CAAC;QAE9B;;;;WAIG;QACK,WAAM,GAAW,KAAK,CAAC;QAE/B;;;WAGG;QACK,YAAO,GAAW,IAAI,CAAC;QAE/B;;;;WAIG;QACK,SAAI,GAAW,OAAO,CAAC;KAuBhC;IArBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,2EACc,MAAM,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,mBAAmB,EAAC,MAAM;gBAE1B,6DACE,CAAC,EAAC,imBAAimB,EACnmB,IAAI,EAAE,IAAI,CAAC,IAAI,kBACD,IAAI,CAAC,OAAO,GAC1B,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * Decorative paperclip vector graphic. Renders the left-half paperclip\n * silhouette (viewBox `0 0 655 754`) that the marketing site bleeds off\n * the right edge of inkwell hero sections.\n *\n * Purely decorative — the inner `<svg>` is `aria-hidden=\"true\"`. Size it\n * via the `width` / `height` props (they accept any CSS length, e.g.\n * `\"655\"`, `\"100%\"`, `\"50vw\"`) and position the host element in CSS.\n *\n * `fill` is white by default (intended for inkwell backgrounds); override\n * for other themes, e.g. `fill=\"var(--colour-brand-inkwell)\"` on a\n * mist-green section. `opacity` defaults to `0.06` to match the\n * watermark treatment used on `/`, `/au`, and `/platform`.\n *\n * @example\n * ```html\n * <af-section theme=\"inkwell\" padding=\"loose\" style=\"position:relative;overflow:hidden\">\n *   <af-paperclip-decoration\n *     style=\"position:absolute;bottom:-80px;right:-80px\"\n *   ></af-paperclip-decoration>\n *   <af-container style=\"position:relative;z-index:1\">\n *     <!-- hero content -->\n *   </af-container>\n * </af-section>\n * ```\n */\n@Component({\n  tag: 'af-paperclip-decoration',\n  styleUrl: 'af-paperclip-decoration.css',\n  shadow: true\n})\nexport class AfPaperclipDecoration {\n  /**\n   * SVG width — accepts any CSS length or unitless number (pixels).\n   * Default sized so the watermark stays inside the af-hero\n   * inkwell-centered column without bleeding into the `logos-below`\n   * client-logo carousel. Override per-page via the prop if a larger\n   * decorative scale is wanted somewhere with no logos slot.\n   */\n  @Prop() width: string = '520';\n\n  /**\n   * SVG height — accepts any CSS length or unitless number (pixels).\n   * Sized to match the trimmed `width` default; preserves the source\n   * SVG's 655 × 754 aspect ratio.\n   */\n  @Prop() height: string = '600';\n\n  /**\n   * Fill opacity of the paperclip shape. Defaults to `0.06` to match the\n   * marketing-site watermark treatment.\n   */\n  @Prop() opacity: number = 0.06;\n\n  /**\n   * Fill colour. Defaults to `white` (designed for inkwell backgrounds);\n   * override for other themes, e.g. `var(--colour-brand-inkwell)` on a\n   * mist-green section.\n   */\n  @Prop() fill: string = 'white';\n\n  render() {\n    return (\n      <Host>\n        <svg\n          aria-hidden=\"true\"\n          width={this.width}\n          height={this.height}\n          viewBox=\"0 0 655 754\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          preserveAspectRatio=\"none\"\n        >\n          <path\n            d=\"M1102.14 108.279C1031.8 37.5181 939.128 -1.06817 840.61 0.447304H358.674L262.104 157.124H841.87C842.558 157.124 843.36 157.124 844.047 157.124C900.638 157.124 953.791 179.273 994 219.725C1035.24 261.225 1058.04 316.715 1058.04 376.052C1058.04 497.872 960.665 596.844 841.068 596.844H251.335C197.609 596.844 153.848 552.313 153.848 497.639C153.848 442.965 197.723 397.734 251.221 396.102H779.208L878.872 239.426H248.586C111.577 242.923 0 358.682 0 497.639C0 636.596 112.723 753.404 251.335 753.404H841.068C1045.55 753.404 1212 584.021 1212 375.935C1212 274.398 1173.05 179.39 1102.26 108.162L1102.14 108.279Z\"\n            fill={this.fill}\n            fill-opacity={this.opacity}\n          />\n        </svg>\n      </Host>\n    );\n  }\n}\n"]}

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: 'b09e523a63bdb6ea6084e98e6fb8030840648f27' }, h("div", { key: 'eda92bcf3b0f9d92edfb32299953b984520cc413', class: {
+        return (h(Host, { key: 'f56ae490d0d9e374f540ccb88b0af53430796b42' }, h("div", { key: '20832426b290b5ee44d0507848f1cd4f06973202', 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: 'cf4748fdaf9a5e1f410e4bf16acaf6ebd80a931b', class: "progress-line__background" }), h("div", { key: '3c20e0c290595e97b5e34a6e788297e180494add', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
+            }, role: "progressbar", "aria-valuenow": Math.round(progressPercent), "aria-valuemin": 0, "aria-valuemax": 100 }, h("div", { key: '19623163676a5fd71c7b5ba91b33f53d188647c9', class: "progress-line__background" }), h("div", { key: '0bd6ccd0748930edd43a384bf8ddad55f8c9d07b', 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.js

@@ -13,8 +13,8 @@ export class AfSection {
         this.container = true;
     }
     render() {
-        const content = h("slot", { key: '6c300093d45c3f5a029ef4ad367fb6796c392d56' });
-        return (h(Host, { key: '05da4bf23a6c5aba61b21d1536cf615cd0176cfb' }, h("div", { key: '3ec6bacbd5acef49183afa406efbe9301287a086', class: `section padding-${this.padding} theme-${this.theme}` }, this.container ? (h("af-container", null, content)) : content)));
+        const content = h("slot", { key: 'fd7304dd713f0cbad475910d56fd9e2622068fad' });
+        return (h(Host, { key: 'f1758977b8ce080e03631629507f33759d1696d9' }, h("div", { key: 'af0fd30917df8a59cf7d441e9346ed643672aaec', 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"; }