npm - @affinda/wc - Versions diffs - 0.5.0 → 0.6.0 - Mend

@affinda/wc 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (378) hide show

package/dist/cjs/af-illustrated-card.cjs.entry.js CHANGED Viewed

@@ -27,7 +27,7 @@ const AfIllustratedCard = class {
             [`illustrated-card--breakpoint-${this.breakpoint}`]: true,
             [`illustrated-card--size-${this.cardSize}`]: true,
         };
-        return (index.h(index.Host, { key: '6cfa00ec3678220a5cb65c47c2a6dd120a8c5553' }, index.h("div", { key: '0b2fe8e581ead66d4f87007effce17bc506acb90', class: wrapperClasses }, index.h("af-card", { key: '7c9b545d3dd1960c43a6913ed28beb7f061c31e7', theme: this.theme }, index.h("div", { key: 'cfe8a3385853a6affefc77f18f5625f292f10489', class: "illustrated-card__content" }, index.h("af-typography-lockup", { key: '38e539b8617502fdd4ae2ebd6e1e536cf502b9a1', headingSize: 3, breakpoint: this.breakpoint, textAlignment: "left", buttonLayout: "vertical" }, index.h("slot", { key: '8988255edefe50349f78fe45db72c584ba6378ef' }), index.h("span", { key: '769cbdd181f166b086974e21a7f941dd4e17add0', slot: "description" }, index.h("slot", { key: 'ac1793bf3c0cc8e1a5d1ce9b2958a4e320b81134', name: "body" })), index.h("span", { key: 'ef22764670352f88d7e647b44625ac1afa94d51f', slot: "buttons" }, index.h("slot", { key: '625f23188a6cd9914b67b1c9937c728bc7125f4f', name: "buttons" })))), index.h("div", { key: '0616a426ea07da6c92488c65d85ba3c3ab84c40b', class: "illustrated-card__illustration-area" }, index.h("slot", { key: 'cf2998e62fb20f3cd049e0640004322a0b438ac1', name: "illustration" }))))));
+        return (index.h(index.Host, { key: '9cb248db15ab8be5119df3183457470491de468b' }, index.h("div", { key: 'c3ba0afed9c7fe45f5d577aedf9b320a1f875e47', class: wrapperClasses }, index.h("af-card", { key: '07f201cc8c56bade2e793e68b7777c23ac7d0ba7', theme: this.theme }, index.h("div", { key: '7f1a2579a29229f8161771836b60c0d882cabf59', class: "illustrated-card__content" }, index.h("af-typography-lockup", { key: 'b5d9150b3f63e46e36f478380f36fb3f273f227c', headingSize: 3, breakpoint: this.breakpoint, textAlignment: "left", buttonLayout: "vertical" }, index.h("slot", { key: '6aba88b9857866d246270d6a7c0ebe9ba67c5d74' }), index.h("span", { key: '2e0454ef021e537917aad2227fd75e66b421761c', slot: "description" }, index.h("slot", { key: 'a7779fbb7ce77d4d24ac834bd302e3aa437610ab', name: "body" })), index.h("span", { key: 'c0c82b1f5470dfd8f7b75474b4730e679c2641d7', slot: "buttons" }, index.h("slot", { key: '1a9ec3da3c50fe815e4502ec71218c8a21dc3b1c', name: "buttons" })))), index.h("div", { key: 'e758d3071a54afdad44903e0002d5aa8a50b17e0', class: "illustrated-card__illustration-area" }, index.h("slot", { key: '9521bbe523e32015e5bfd8f56cdcc1959e382fc2', name: "illustration" }))))));
     }
 };
 AfIllustratedCard.style = afIllustratedCardCss;

package/dist/cjs/af-image.cjs.entry.js CHANGED Viewed

@@ -19,7 +19,7 @@ const AfImage = class {
         this.shape = 'rounded';
     }
     render() {
-        return (index.h(index.Host, { key: 'a8954272f3c0defc0b9e33d5f3221c6e1083d927' }, index.h("div", { key: '2fd3bad5b46360cac57d069031ec2f69103f6542', class: `image-container image-container--${this.shape}` }, index.h("img", { key: '72a11cde6b65481320d8b6a1d65e85862d4a449e', src: this.src, alt: this.alt, class: "image" }), index.h("div", { key: '7727e1ac4179e96f8c8928de678136337bd82f44', class: "image-border", "aria-hidden": "true" }))));
+        return (index.h(index.Host, { key: '4f48634e84e032c9a93cf48444709146ffe591b7' }, index.h("div", { key: 'c26f889afa7c3d35e5f65dcc23d63a41a9c0987e', class: `image-container image-container--${this.shape}` }, index.h("img", { key: 'c1474197475df3bff2263b509f3abf59a53aa932', src: this.src, alt: this.alt, class: "image" }), index.h("div", { key: 'bb6e0cae628bf65e423d5986df8ed119af74e699', class: "image-border", "aria-hidden": "true" }))));
     }
 };
 AfImage.style = afImageCss;

package/dist/cjs/af-in-page-banner.cjs.entry.js CHANGED Viewed

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

package/dist/cjs/af-inline.cjs.entry.js CHANGED Viewed

@@ -49,7 +49,7 @@ const AfInline = class {
             justifyContent: justifyMap[this.justify],
             flexWrap: this.wrap ? 'wrap' : 'nowrap',
         };
-        return (index.h(index.Host, { key: '3dce5c336021a6c5046258120a72f3087a421e2a', style: style }, index.h("slot", { key: '28fb5aff7cb1a0edf1389bc7146d21560313468c' })));
+        return (index.h(index.Host, { key: '7069c721994bbd1acc8d57875522dbefdaf796d9', style: style }, index.h("slot", { key: 'e39c2d982cca56ab6545e3e8a43eea7696708f21' })));
     }
 };
 AfInline.style = afInlineCss;

package/dist/cjs/af-input.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var index = require('./index-BuJz1C1M.js');
-const afInputCss = ":host{display:block;width:100%}.input-wrapper{display:flex;flex-direction:column;gap:var(--sds-size-space-200, 8px);width:100%}.label-row{display:flex;align-items:center;gap:12px}.label{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:16px;line-height:24px;color:var(--af-input-label, var(--af-typography-body-dark, #14343b));cursor:default}.required{color:var(--af-input-error, var(--colour-error, #be292a));margin-left:2px}.info-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;color:var(--af-input-icon, var(--af-background-icon-default, #14343b));flex-shrink:0}.info-icon svg{width:20px;height:20px}.info-icon:hover{opacity:0.7}.info-icon:focus-visible{outline:2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));outline-offset:2px;border-radius:4px}.description{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-description, var(--af-typography-body-default, #2b484f));margin:0}.input-container{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--af-input-bg, #ffffff);border:1px solid var(--af-input-border, var(--af-background-border-default, #d1ddda));border-radius:var(--radii-input, 8px);transition:all 0.15s ease;min-height:48px;box-sizing:border-box}.input-container.hovered{background:var(--af-input-bg-hover, var(--af-background-base-hover, #f4f7f6));border-color:var(--af-input-border-hover, var(--af-background-border-heavy, #c6d5d1))}.input-container.focused{background:var(--af-input-bg, #ffffff);border-color:var(--af-input-border-active, var(--af-typography-body-dark, #14343b));box-shadow:0 0 0 4px var(--af-background-base, #ffffff), \n    0 0 0 5px var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b))}.input-container.error{border-color:var(--af-input-border-error, var(--colour-error, #be292a))}.input-container.disabled{background:var(--af-input-bg-disabled, var(--af-background-level-1, #e8eeed));border-color:var(--af-input-border, var(--af-background-border-default, #d1ddda));cursor:not-allowed}.search-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-input-icon, var(--af-background-icon-default, #14343b))}.search-icon svg{width:20px;height:20px}.disabled .search-icon{opacity:0.5}.input{flex:1;min-width:0;padding:0;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}.input::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));opacity:1}.input:disabled{cursor:not-allowed;color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b))}.input:disabled::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b))}.input[type=\"search\"]::-webkit-search-decoration,.input[type=\"search\"]::-webkit-search-cancel-button,.input[type=\"search\"]::-webkit-search-results-button,.input[type=\"search\"]::-webkit-search-results-decoration{display:none}.input[type=\"number\"]::-webkit-inner-spin-button,.input[type=\"number\"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input[type=\"number\"]{-moz-appearance:textfield}.clear-button{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;color:var(--af-input-icon, var(--af-background-icon-default, #14343b));flex-shrink:0;opacity:0.6;transition:opacity 0.15s ease}.clear-button svg{width:16px;height:16px}.clear-button:hover{opacity:1}.clear-button:focus-visible{outline:2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));outline-offset:2px;border-radius:4px}.error-row{display:flex;align-items:center;gap:12px}.error-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-input-error, var(--colour-error, #be292a))}.error-icon svg{width:20px;height:20px}.error-text{flex:1;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-error, var(--colour-error, #be292a))}";
+const afInputCss = ":host{display:block;width:100%}.input-wrapper{display:flex;flex-direction:column;gap:var(--sds-size-space-200, 8px);width:100%}.label-row{display:flex;align-items:center;gap:12px}.label{flex:1;font-family:var(--typography-primaryfont, 'NeuSans', sans-serif);font-weight:var(--font-weight-book, 500);font-size:16px;line-height:24px;color:var(--af-input-label, var(--af-typography-body-dark, #14343b));cursor:default}.required{color:var(--af-input-error, var(--colour-error, #be292a));margin-left:2px}.info-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;color:var(--af-input-icon, var(--af-background-icon-default, #14343b));flex-shrink:0}.info-icon svg{width:20px;height:20px}.info-icon:hover{opacity:0.7}.info-icon:focus-visible{outline:2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));outline-offset:2px;border-radius:4px}.description{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-description, var(--af-typography-body-default, #2b484f));margin:0}.input-container{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--af-input-bg, #ffffff);border:1px solid var(--af-input-border, var(--af-background-border-default, #d1ddda));border-radius:var(--radii-input, 8px);transition:all 0.15s ease;min-height:48px;box-sizing:border-box}.input-container.hovered{background:var(--af-input-bg-hover, var(--af-background-base-hover, #f4f7f6));border-color:var(--af-input-border-hover, var(--af-background-border-heavy, #c6d5d1))}.input-container.focused{background:var(--af-input-bg, #ffffff);border-color:var(--af-input-border-active, var(--af-typography-body-dark, #14343b));box-shadow:0 0 0 4px var(--af-background-base, #ffffff), \n    0 0 0 5px var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b))}.input-container.error{border-color:var(--af-input-border-error, var(--colour-error, #be292a))}.input-container.disabled{background:var(--af-input-bg-disabled, var(--af-background-level-1, #e8eeed));border-color:var(--af-input-border, var(--af-background-border-default, #d1ddda));cursor:not-allowed}.search-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-input-icon, var(--af-background-icon-default, #14343b))}.search-icon svg{width:20px;height:20px}.disabled .search-icon{opacity:0.5}.input{flex:1;min-width:0;padding:0;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}.input::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));opacity:1}.input:disabled{cursor:not-allowed;color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b))}.input:disabled::placeholder{color:var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b))}.input[type=\"search\"]::-webkit-search-decoration,.input[type=\"search\"]::-webkit-search-cancel-button,.input[type=\"search\"]::-webkit-search-results-button,.input[type=\"search\"]::-webkit-search-results-decoration{display:none}.input[type=\"number\"]::-webkit-inner-spin-button,.input[type=\"number\"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input[type=\"number\"]{-moz-appearance:textfield}.clear-button{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;color:var(--af-input-icon, var(--af-background-icon-default, #14343b));flex-shrink:0;opacity:0.6;transition:opacity 0.15s ease}.clear-button svg{width:16px;height:16px}.clear-button:hover{opacity:1}.clear-button:focus-visible{outline:2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));outline-offset:2px;border-radius:4px}.input-container--multiline{padding:0;min-height:0;overflow:hidden}.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{display:flex;align-items:center;gap:12px}.error-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;color:var(--af-input-error, var(--colour-error, #be292a))}.error-icon svg{width:20px;height:20px}.error-text{flex:1;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-error, var(--colour-error, #be292a))}";
 const AfInput = class {
     constructor(hostRef) {
@@ -17,7 +17,8 @@ const AfInput = class {
          */
         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';
         /**
@@ -37,13 +38,27 @@ const AfInput = class {
          */
         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) => {
@@ -80,8 +95,10 @@ const AfInput = class {
     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,
@@ -90,12 +107,13 @@ const AfInput = class {
         };
         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 (index.h(index.Host, { key: '5bf8980e12ad5fc3b8b84df3acc749bddf61042d' }, index.h("div", { key: 'd0266eca85871397ed73381ca3d36f3dc2dd79ce', class: wrapperClasses }, this.label && (index.h("div", { key: 'f9fc2fe3f52a1f9be1404943d91489357ea941dc', class: "label-row" }, index.h("label", { key: '76283a7f0c9be127aa8c9115fcbc26b2d67d51cc', class: "label", htmlFor: "input" }, this.label, this.required && index.h("span", { key: '6b0de23e857abfdd25d6eefaa6ff22f22fa813dd', class: "required" }, "*")), this.showInfoIcon && (index.h("button", { key: '7c5f7a47a8357301f3fe28d6078bdec3ec1160c3', type: "button", class: "info-icon", onClick: this.handleInfoClick, "aria-label": "More information" }, index.h("svg", { key: '655c9448589937c2047a58962f78ab1872e0da84', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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" }), index.h("path", { key: '1993da070066d33575618267d6af5b13b641143b', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { key: 'dd99ac12d4a23b98c98fca1df34916968276fc0e', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("slot", { key: 'b406de5a455af79a69497c6a641b5c41347ee1ab', name: "label-end" }))), this.description && (index.h("p", { key: '0dcebb186df7055efb168f96ad4199e2f614a87c', class: "description" }, this.description)), index.h("div", { key: '754b8a3e67d5807d7d484d475d31913dee8004f4', class: inputContainerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.showSearchIcon && (index.h("span", { key: '5757962a3479a6cd1f12bd1da183919af69ad9f4', class: "search-icon" }, index.h("svg", { key: '4106175e5b41e4c978b38eda6db36799a6a6f762', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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" }), index.h("path", { key: 'd3ed0187abde8c14eae462612c918e10cb46916d', d: "M21 21L16.65 16.65", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.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 && (index.h("button", { key: '6ad41a3ee4ffdbeefa11e45754a22143b33405e5', type: "button", class: "clear-button", onClick: this.handleClear, "aria-label": "Clear input" }, index.h("svg", { key: '129f73660030e81ff17071fae51bb34af23eca57', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '78d4c71521ac7daced7023c5bcfb2bfccf593fab', d: "M18 6L6 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { key: '4eb85452029e8347dd648dcc849fa000b41b7fea', d: "M6 6L18 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), hasError && (index.h("div", { key: 'cc3b6083e88bb99ec17edffbf95ec89e2bb27e97', class: "error-row", id: "error-message" }, index.h("span", { key: 'fe264a854aaebe481a6913275859ca57b1d61d0d', class: "error-icon" }, index.h("svg", { key: '1159f77b184d1888c5c5ebe6138070c66abb66e6', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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" }), index.h("path", { key: '11c79f296c1dce73beebd67eeefe3d71b17ee191', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { key: '9f146c96a38b14afb1919cf480224ee520ac16b0', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("span", { key: '2d326d0d72727dca4c4839fb5279323e556fbe04', class: "error-text" }, this.error))))));
+        return (index.h(index.Host, { key: '55cf204d355367913c765891190048599a46653e' }, index.h("div", { key: '8f72840a7a6fa8615e535f171f5297fb5d0cdfe5', class: wrapperClasses }, this.label && (index.h("div", { key: '06711c6031da07fca88bd438db7fb80acc12df71', class: "label-row" }, index.h("label", { key: '1db607ff65a624aa2520bdfbc2063c0f6587b00c', class: "label", htmlFor: "input" }, this.label, this.required && index.h("span", { key: 'd2ffc85aafb99e5fc7723993354a23fd99f04ac6', class: "required" }, "*")), this.showInfoIcon && (index.h("button", { key: '1adcddb4121582d35eff611d8299ff4ed6d0cc24', type: "button", class: "info-icon", onClick: this.handleInfoClick, "aria-label": "More information" }, index.h("svg", { key: 'e1abef80244c616ba98f89d23f9a4b6b2e4d97e1', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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" }), index.h("path", { key: '076a1ff76cc8b5287dd29df42d6b629d34ae739e', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { key: '640f19dd94e31f1090704ccc534b3917cc70a905', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("slot", { key: 'e3b42a60ad6b2378ab6593e239208b847d20c8ad', name: "label-end" }))), this.description && (index.h("p", { key: '8bf359cd53f562bedbe29f54004d5a974398db7b', class: "description" }, this.description)), index.h("div", { key: 'eb5a21523188828d60713cc772a477fa2a22a3a3', class: inputContainerClasses, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, !multiline && this.showSearchIcon && (index.h("span", { key: 'ed8945ddd4601e3d2ef84f2644a7ab567156157a', class: "search-icon" }, index.h("svg", { key: '2684f4233757a74cb55abfb1e62481e5848a5fbc', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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" }), index.h("path", { key: 'db81f64ac649e9f41bfdb47a287d3e671951f171', d: "M21 21L16.65 16.65", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), multiline ? (index.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 })) : (index.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 && (index.h("button", { key: 'ed7c9c3753fd291aa1105c2f30e00a2b2868efed', type: "button", class: "clear-button", onClick: this.handleClear, "aria-label": "Clear input" }, index.h("svg", { key: '0615828eb7d27c6cf45fa7f91b25a14dd97fe972', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '6a60d954427656fcc01940dd861c37bd214570d0', d: "M18 6L6 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { key: '9471a7899c62b9fbce7ceafc4986b29c0000f26f', d: "M6 6L18 18", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), hasError && (index.h("div", { key: '1972022a3ca5a7f366a83cf35e2eecb4b812bd29', class: "error-row", id: "error-message" }, index.h("span", { key: '450e80c8d42914048eb114a222d9db8e9b94d3fa', class: "error-icon" }, index.h("svg", { key: '57eeb2884b16a9adf5fe0744814d00465da436e1', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.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" }), index.h("path", { key: 'faf252192e9a4706c5ed363ba240a0cb1ddf6770', d: "M12 16V12", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }), index.h("path", { key: '4eda8b2840b7bf70919460ffe46e54d702ec3191', d: "M12 8H12.01", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("span", { key: 'a22e99093a097f8c7be12c8aa4a1b65a87484eb3', class: "error-text" }, this.error))))));
     }
 };
 AfInput.style = afInputCss;

package/dist/cjs/af-input.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"af-input.entry.cjs.js","sources":["src/components/af-input/af-input.css?tag=af-input&encapsulation=shadow","src/components/af-input/af-input.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n/* Wrapper /\n.input-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--sds-size-space-200, 8px);\n width: 100%;\n}\n\n/ Label row /\n.label-row {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.label {\n flex: 1;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-book, 500);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-label, var(--af-typography-body-dark, #14343b));\n cursor: default;\n}\n\n.required {\n color: var(--af-input-error, var(--colour-error, #be292a));\n margin-left: 2px;\n}\n\n/ Info icon button /\n.info-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: var(--af-input-icon, var(--af-background-icon-default, #14343b));\n flex-shrink: 0;\n}\n\n.info-icon svg {\n width: 20px;\n height: 20px;\n}\n\n.info-icon:hover {\n opacity: 0.7;\n}\n\n.info-icon:focus-visible {\n outline: 2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));\n outline-offset: 2px;\n border-radius: 4px;\n}\n\n/ Description /\n.description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-description, var(--af-typography-body-default, #2b484f));\n margin: 0;\n}\n\n/ Input container /\n.input-container {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--af-input-bg, #ffffff);\n border: 1px solid var(--af-input-border, var(--af-background-border-default, #d1ddda));\n border-radius: var(--radii-input, 8px);\n transition: all 0.15s ease;\n min-height: 48px;\n box-sizing: border-box;\n}\n\n/ Hover state /\n.input-container.hovered {\n background: var(--af-input-bg-hover, var(--af-background-base-hover, #f4f7f6));\n border-color: var(--af-input-border-hover, var(--af-background-border-heavy, #c6d5d1));\n}\n\n/ Focus state /\n.input-container.focused {\n background: var(--af-input-bg, #ffffff);\n border-color: var(--af-input-border-active, var(--af-typography-body-dark, #14343b));\n box-shadow: \n 0 0 0 4px var(--af-background-base, #ffffff), \n 0 0 0 5px var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));\n}\n\n/ Error state /\n.input-container.error {\n border-color: var(--af-input-border-error, var(--colour-error, #be292a));\n}\n\n/ Disabled state /\n.input-container.disabled {\n background: var(--af-input-bg-disabled, var(--af-background-level-1, #e8eeed));\n border-color: var(--af-input-border, var(--af-background-border-default, #d1ddda));\n cursor: not-allowed;\n}\n\n/ Search icon /\n.search-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n color: var(--af-input-icon, var(--af-background-icon-default, #14343b));\n}\n\n.search-icon svg {\n width: 20px;\n height: 20px;\n}\n\n.disabled .search-icon {\n opacity: 0.5;\n}\n\n/ Native input /\n.input {\n flex: 1;\n min-width: 0;\n padding: 0;\n border: none;\n background: transparent;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-text, var(--af-typography-body-dark, #14343b));\n outline: none;\n}\n\n.input::placeholder {\n color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n opacity: 1;\n}\n\n.input:disabled {\n cursor: not-allowed;\n color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n}\n\n.input:disabled::placeholder {\n color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n}\n\n/ Hide native browser styling for search inputs /\n.input[type=\"search\"]::-webkit-search-decoration,\n.input[type=\"search\"]::-webkit-search-cancel-button,\n.input[type=\"search\"]::-webkit-search-results-button,\n.input[type=\"search\"]::-webkit-search-results-decoration {\n display: none;\n}\n\n/ Hide number input spinners /\n.input[type=\"number\"]::-webkit-inner-spin-button,\n.input[type=\"number\"]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n.input[type=\"number\"] {\n -moz-appearance: textfield;\n}\n\n/ Clear button /\n.clear-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: var(--af-input-icon, var(--af-background-icon-default, #14343b));\n flex-shrink: 0;\n opacity: 0.6;\n transition: opacity 0.15s ease;\n}\n\n.clear-button svg {\n width: 16px;\n height: 16px;\n}\n\n.clear-button:hover {\n opacity: 1;\n}\n\n.clear-button:focus-visible {\n outline: 2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));\n outline-offset: 2px;\n border-radius: 4px;\n}\n\n/ Error row /\n.error-row {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.error-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n color: var(--af-input-error, var(--colour-error, #be292a));\n}\n\n.error-icon svg {\n width: 20px;\n height: 20px;\n}\n\n.error-text {\n flex: 1;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-error, var(--colour-error, #be292a));\n}\n","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"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,UAAU,GAAG,o6IAAo6I;;MCa16I,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;;;AAqBE;;AAEG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE3C;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAwE,MAAM;AAO1F;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElD;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAOjC;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAErC;;AAEG;AACK,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAEvC;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AA+CjB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAC1B,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAInC,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAY,KAAI;AACrC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B;AAC/C,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;AACzB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AAC1C,SAAC;AAEO,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;AACrB,SAAC;AAEO,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;AACxB,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;AACpB,SAAC;AAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACvB,SAAC;AAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACxB,SAAC;AAEO,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,KAAK,GAAG,EAAE;AACf,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;YACnB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;AAChC,YAAA,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE;AACvB,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAiB,KAAI;YAC9C,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;AACzB,SAAC;AAgIF;IA9HC,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;AAC7B,QAAA,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;AAExD,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,eAAe,EAAE,IAAI;YACrB,UAAU,EAAE,IAAI,CAAC,QAAQ;AACzB,YAAA,OAAO,EAAE,QAAQ;YACjB,SAAS,EAAE,IAAI,CAAC,SAAS;AACzB,YAAA,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS;AAC9D,YAAA,WAAW,EAAE;SACd;AAED,QAAA,MAAM,qBAAqB,GAAG;AAC5B,YAAA,iBAAiB,EAAE,IAAI;YACvB,UAAU,EAAE,IAAI,CAAC,QAAQ;AACzB,YAAA,OAAO,EAAE,QAAQ;YACjB,SAAS,EAAE,IAAI,CAAC,SAAS;AACzB,YAAA,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC;SACtD;QAED,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EAEvB,IAAI,CAAC,KAAK,KACTA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACpBA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAA,EACjC,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,QAAQ,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,UAAU,QAAS,CAC3C,EACP,IAAI,CAAC,YAAY,KAChBA,OACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,IAAI,CAAC,eAAe,gBAClB,kBAAkB,EAAA,EAE7BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACrEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,mHAAmH,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAE,CAAA,EACrNA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,WAAW,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAE,CAAA,EAC7GA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,aAAa,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAiB,iBAAA,EAAA,OAAO,EAAE,CAAA,CAC3G,CACC,CACV,EACDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,WAAW,EAAA,CAAQ,CAC1B,CACP,EAGA,IAAI,CAAC,WAAW,KACfA,OAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAE,EAAA,IAAI,CAAC,WAAW,CAAK,CAC9C,EAGDA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,qBAAqB,EAC5B,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAA,EAGlC,IAAI,CAAC,cAAc,KAClBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACvBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACrEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,mHAAmH,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAE,CAAA,EACrNA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,oBAAoB,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAiB,iBAAA,EAAA,OAAO,EAAE,CAAA,CAClH,CACD,CACR,EAGDA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,IAAI,SAAS,EAC3C,EAAE,EAAC,OAAO,EACV,KAAK,EAAC,OAAO,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,cAAA,EACP,QAAQ,GAAG,MAAM,GAAG,SAAS,EACzB,kBAAA,EAAA,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC,WAAW,GAAG,aAAa,GAAG,SAAS,EAC3F,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,CAAA,EAGD,IAAI,CAAC,SAAS,IAAI,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,KAC7DA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,IAAI,CAAC,WAAW,gBACd,aAAa,EAAA,EAExBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACrEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,YAAY,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAE,CAAA,EAC9GA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,YAAY,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAiB,iBAAA,EAAA,OAAO,GAAE,CAC1G,CACC,CACV,CACG,EAGL,QAAQ,KACPA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAC,EAAE,EAAC,eAAe,EAAA,EACvCA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACtBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACrEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,mHAAmH,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAE,CAAA,EACrNA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,WAAW,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAE,CAAA,EAC7GA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,aAAa,EAAC,MAAM,EAAC,cAAc,EAAc,cAAA,EAAA,KAAK,oBAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAA,CAAE,CAC3G,CACD,EACPA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CACxC,CACP,CACG,CACD;;;;;;;"}
1	+ {"version":3,"file":"af-input.entry.cjs.js","sources":["src/components/af-input/af-input.css?tag=af-input&encapsulation=shadow","src/components/af-input/af-input.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n/* Wrapper /\n.input-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--sds-size-space-200, 8px);\n width: 100%;\n}\n\n/ Label row /\n.label-row {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.label {\n flex: 1;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-book, 500);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-label, var(--af-typography-body-dark, #14343b));\n cursor: default;\n}\n\n.required {\n color: var(--af-input-error, var(--colour-error, #be292a));\n margin-left: 2px;\n}\n\n/ Info icon button /\n.info-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: var(--af-input-icon, var(--af-background-icon-default, #14343b));\n flex-shrink: 0;\n}\n\n.info-icon svg {\n width: 20px;\n height: 20px;\n}\n\n.info-icon:hover {\n opacity: 0.7;\n}\n\n.info-icon:focus-visible {\n outline: 2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));\n outline-offset: 2px;\n border-radius: 4px;\n}\n\n/ Description /\n.description {\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-description, var(--af-typography-body-default, #2b484f));\n margin: 0;\n}\n\n/ Input container /\n.input-container {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--af-input-bg, #ffffff);\n border: 1px solid var(--af-input-border, var(--af-background-border-default, #d1ddda));\n border-radius: var(--radii-input, 8px);\n transition: all 0.15s ease;\n min-height: 48px;\n box-sizing: border-box;\n}\n\n/ Hover state /\n.input-container.hovered {\n background: var(--af-input-bg-hover, var(--af-background-base-hover, #f4f7f6));\n border-color: var(--af-input-border-hover, var(--af-background-border-heavy, #c6d5d1));\n}\n\n/ Focus state /\n.input-container.focused {\n background: var(--af-input-bg, #ffffff);\n border-color: var(--af-input-border-active, var(--af-typography-body-dark, #14343b));\n box-shadow: \n 0 0 0 4px var(--af-background-base, #ffffff), \n 0 0 0 5px var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));\n}\n\n/ Error state /\n.input-container.error {\n border-color: var(--af-input-border-error, var(--colour-error, #be292a));\n}\n\n/ Disabled state /\n.input-container.disabled {\n background: var(--af-input-bg-disabled, var(--af-background-level-1, #e8eeed));\n border-color: var(--af-input-border, var(--af-background-border-default, #d1ddda));\n cursor: not-allowed;\n}\n\n/ Search icon /\n.search-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n color: var(--af-input-icon, var(--af-background-icon-default, #14343b));\n}\n\n.search-icon svg {\n width: 20px;\n height: 20px;\n}\n\n.disabled .search-icon {\n opacity: 0.5;\n}\n\n/ Native input /\n.input {\n flex: 1;\n min-width: 0;\n padding: 0;\n border: none;\n background: transparent;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-text, var(--af-typography-body-dark, #14343b));\n outline: none;\n}\n\n.input::placeholder {\n color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n opacity: 1;\n}\n\n.input:disabled {\n cursor: not-allowed;\n color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n}\n\n.input:disabled::placeholder {\n color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n}\n\n/ Hide native browser styling for search inputs /\n.input[type=\"search\"]::-webkit-search-decoration,\n.input[type=\"search\"]::-webkit-search-cancel-button,\n.input[type=\"search\"]::-webkit-search-results-button,\n.input[type=\"search\"]::-webkit-search-results-decoration {\n display: none;\n}\n\n/ Hide number input spinners /\n.input[type=\"number\"]::-webkit-inner-spin-button,\n.input[type=\"number\"]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n.input[type=\"number\"] {\n -moz-appearance: textfield;\n}\n\n/ Clear button /\n.clear-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n color: var(--af-input-icon, var(--af-background-icon-default, #14343b));\n flex-shrink: 0;\n opacity: 0.6;\n transition: opacity 0.15s ease;\n}\n\n.clear-button svg {\n width: 16px;\n height: 16px;\n}\n\n.clear-button:hover {\n opacity: 1;\n}\n\n.clear-button:focus-visible {\n outline: 2px solid var(--af-input-focus-ring, var(--af-typography-body-dark, #14343b));\n outline-offset: 2px;\n border-radius: 4px;\n}\n\n/ ---------- Multiline (textarea) mode ---------- /\n\n/ Container has no inner padding in multiline mode — the textarea\n element owns the padding so it fills the box and resizes cleanly. /\n.input-container--multiline {\n padding: 0;\n min-height: 0;\n overflow: hidden;\n}\n\n/ Native textarea /\n.input--multiline {\n flex: 1;\n min-width: 0;\n min-height: 108px;\n padding: 12px 16px;\n border: none;\n background: transparent;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-text, var(--af-typography-body-dark, #14343b));\n outline: none;\n resize: vertical;\n}\n\n.input--multiline::placeholder {\n color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n opacity: 1;\n}\n\n.input--multiline:disabled {\n cursor: not-allowed;\n color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n resize: none;\n}\n\n.input--multiline:disabled::placeholder {\n color: var(--af-input-placeholder, var(--af-typography-body-subtle, #60767b));\n}\n\n/ Error row /\n.error-row {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.error-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n flex-shrink: 0;\n color: var(--af-input-error, var(--colour-error, #be292a));\n}\n\n.error-icon svg {\n width: 20px;\n height: 20px;\n}\n\n.error-text {\n flex: 1;\n font-family: var(--typography-primaryfont, 'NeuSans', sans-serif);\n font-weight: var(--font-weight-regular, 400);\n font-size: 16px;\n line-height: 24px;\n color: var(--af-input-error, var(--colour-error, #be292a));\n}\n","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"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,UAAU,GAAG,krKAAkrK;;MCaxrK,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;;;AAqBE;;AAEG;AACsB,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;AAE3C;;;AAGG;AACK,QAAA,IAAI,CAAA,IAAA,GAAwE,MAAM;AAO1F;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAElD;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAEjC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAOjC;;AAEG;AACK,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAErC;;AAEG;AACK,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAEvC;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAsBlC;;;;AAIG;AACK,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAElC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAW,CAAC;AAExB;;AAEG;AACK,QAAA,IAAM,CAAA,MAAA,GAAgD,UAAU;AA2BvD,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAC1B,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAInC,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,KAAY,KAAI;AACrC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAgD;AACrE,YAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;AACzB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AAC1C,SAAC;AAEO,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;AACrB,SAAC;AAEO,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;AACxB,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACtB,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;AACpB,SAAC;AAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACvB,SAAC;AAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AACxB,SAAC;AAEO,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,KAAK,GAAG,EAAE;AACf,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;YACnB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;AAChC,YAAA,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE;AACvB,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAiB,KAAI;YAC9C,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;AACzB,SAAC;AA0JF;IAxJC,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;AAC7B,QAAA,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;AACxD,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS;AAEhC,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,eAAe,EAAE,IAAI;AACrB,YAAA,0BAA0B,EAAE,SAAS;YACrC,UAAU,EAAE,IAAI,CAAC,QAAQ;AACzB,YAAA,OAAO,EAAE,QAAQ;YACjB,SAAS,EAAE,IAAI,CAAC,SAAS;AACzB,YAAA,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS;AAC9D,YAAA,WAAW,EAAE;SACd;AAED,QAAA,MAAM,qBAAqB,GAAG;AAC5B,YAAA,iBAAiB,EAAE,IAAI;AACvB,YAAA,4BAA4B,EAAE,SAAS;YACvC,UAAU,EAAE,IAAI,CAAC,QAAQ;AACzB,YAAA,OAAO,EAAE,QAAQ;YACjB,SAAS,EAAE,IAAI,CAAC,SAAS;AACzB,YAAA,SAAS,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC;SACtD;AAED,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAA,EAEvB,IAAI,CAAC,KAAK,KACTA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACpBA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,KAAK,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,EAAA,EACjC,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,QAAQ,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,UAAU,QAAS,CAC3C,EACP,IAAI,CAAC,YAAY,KAChBA,OACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,IAAI,CAAC,eAAe,gBAClB,kBAAkB,EAAA,EAE7BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACrEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,mHAAmH,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAE,CAAA,EACrNA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,WAAW,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAE,CAAA,EAC7GA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,aAAa,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAiB,iBAAA,EAAA,OAAO,EAAE,CAAA,CAC3G,CACC,CACV,EACDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,WAAW,EAAA,CAAQ,CAC1B,CACP,EAGA,IAAI,CAAC,WAAW,KACfA,OAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAE,EAAA,IAAI,CAAC,WAAW,CAAK,CAC9C,EAGDA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,qBAAqB,EAC5B,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAA,EAGlC,CAAC,SAAS,IAAI,IAAI,CAAC,cAAc,KAChCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAA,EACvBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACrEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,mHAAmH,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAE,CAAA,EACrNA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,oBAAoB,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAiB,iBAAA,EAAA,OAAO,EAAE,CAAA,CAClH,CACD,CACR,EAGA,SAAS,IACRA,OACE,CAAA,UAAA,EAAA,EAAA,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,IAAI,SAAS,EAC3C,EAAE,EAAC,OAAO,EACV,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAChB,cAAA,EAAA,QAAQ,GAAG,MAAM,GAAG,SAAS,EAAA,kBAAA,EACzB,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC,WAAW,GAAG,aAAa,GAAG,SAAS,EAC3F,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,CAAA,KAEFA,OACE,CAAA,OAAA,EAAA,EAAA,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,OAAO,GAAG,EAAE,IAAI,SAAS,EAC3C,EAAE,EAAC,OAAO,EACV,KAAK,EAAC,OAAO,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,cAAA,EACP,QAAQ,GAAG,MAAM,GAAG,SAAS,EACzB,kBAAA,EAAA,QAAQ,GAAG,eAAe,GAAG,IAAI,CAAC,WAAW,GAAG,aAAa,GAAG,SAAS,EAC3F,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,GACvB,CACH,EAGA,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAAI,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,KAC3EA,OACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,IAAI,CAAC,WAAW,gBACd,aAAa,EAAA,EAExBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACrEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,YAAY,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAE,CAAA,EAC9GA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,YAAY,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAiB,iBAAA,EAAA,OAAO,GAAE,CAC1G,CACC,CACV,CACG,EAGL,QAAQ,KACPA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAC,EAAE,EAAC,eAAe,EAAA,EACvCA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACtBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAA,EACrEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,mHAAmH,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAE,CAAA,EACvNA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,WAAW,EAAC,MAAM,EAAC,cAAc,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAE,CAAA,EAC7GA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,CAAC,EAAC,aAAa,EAAC,MAAM,EAAC,cAAc,EAAc,cAAA,EAAA,KAAK,oBAAgB,OAAO,EAAA,iBAAA,EAAiB,OAAO,EAAA,CAAE,CACzG,CACD,EACPA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,YAAY,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CACxC,CACP,CACG,CACD;;;;;;;"}

package/dist/cjs/af-logo-well.cjs.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const AfLogoWell = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '3dce73db40979d85f0ec5f467baf049e3582d8e2' }, index.h("div", { key: '7c788d3abb3ad7b1f6835d4561c3389dda007ffa', class: "logo-well" }, index.h("slot", { key: 'fa27e27c2c6204256582143b8dd00c8de5f73501' }))));
+        return (index.h(index.Host, { key: '89f971eecc9e4a0656c6a6865c2653e64bbdd7bb' }, index.h("div", { key: 'a4ac54bd1649f010caa095b2ea1f8e7ea8b24a02', class: "logo-well" }, index.h("slot", { key: '11cf1c916f2b056c6ee575351263d83778529146' }))));
     }
 };
 AfLogoWell.style = afLogoWellCss;

package/dist/cjs/af-nav-accordion-item.cjs.entry.js CHANGED Viewed

@@ -84,11 +84,11 @@ const AfNavAccordionItem = class {
         // 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 (index.h(index.Host, { key: '4027092e406bd448da8d84941b626a5416d7974f', class: {
+        return (index.h(index.Host, { key: 'bcdd77ad3dea306e2c1b9b8481d3e00a8cd8cc72', class: {
                 'is-open': this.open,
                 'is-disabled': this.disabled,
                 [`breakpoint-${this.breakpoint}`]: true
-            } }, index.h("div", { key: '5ed6f75516a8b2a82c9231568beef6b8d5257318', class: "nav-accordion-item" }, this.href ? (index.h("a", { href: this.href, class: "trigger", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}` }, index.h("div", { class: "trigger-content" }, index.h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, index.h("span", { class: "label" }, this.label))), hasDropdownContent && (index.h("button", { class: "chevron-button", onClick: (e) => { e.preventDefault(); e.stopPropagation(); this.toggle(); }, "aria-label": this.open ? 'Collapse' : 'Expand', type: "button" }, index.h("div", { class: { 'chevron': true, 'is-open': this.open } }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, index.h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))) : (index.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" }, index.h("div", { class: "trigger-content" }, index.h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, index.h("span", { class: "label" }, this.label))), hasDropdownContent && (index.h("div", { class: { 'chevron': true, 'is-open': this.open } }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, index.h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("div", { key: '158bd9902b4f77655cccfb8571802fd4853abbcc', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, index.h("div", { key: 'a3a4a2214fb02312d2ed90772afc83f5799f01dc', class: "content", ref: (el) => (this.contentRef = el) }, index.h("slot", { key: '834d9fc168ca9e17bcfa2dc9cd117e51e331344e' }))))));
+            } }, index.h("div", { key: 'b82a343372689e06aff2ec3eb2b9b2b0ba02c14d', class: "nav-accordion-item" }, this.href ? (index.h("a", { href: this.href, class: "trigger", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `content-${this.itemId}` }, index.h("div", { class: "trigger-content" }, index.h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, index.h("span", { class: "label" }, this.label))), hasDropdownContent && (index.h("button", { class: "chevron-button", onClick: (e) => { e.preventDefault(); e.stopPropagation(); this.toggle(); }, "aria-label": this.open ? 'Collapse' : 'Expand', type: "button" }, index.h("div", { class: { 'chevron': true, 'is-open': this.open } }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, index.h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))) : (index.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" }, index.h("div", { class: "trigger-content" }, index.h("slot", { name: "trigger", onSlotchange: this.handleSlotChange }, index.h("span", { class: "label" }, this.label))), hasDropdownContent && (index.h("div", { class: { 'chevron': true, 'is-open': this.open } }, index.h("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor" }, index.h("path", { d: "M6 9l6 6 6-6", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("div", { key: '880a15014002f905a4c1c1e20dc5516022b9aee1', id: `content-${this.itemId}`, class: "content-wrapper", style: contentStyle, "aria-hidden": !this.open ? 'true' : 'false' }, index.h("div", { key: 'e47b8972907ad32e3fee37f030f1d86c17ac30bc', class: "content", ref: (el) => (this.contentRef = el) }, index.h("slot", { key: '1def93a51457196a6a023ab32905b8eaa7590c05' }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/af-nav-accordion.cjs.entry.js CHANGED Viewed

@@ -72,7 +72,7 @@ const AfNavAccordion = class {
         this.syncItems();
     }
     render() {
-        return (index.h(index.Host, { key: 'e60e0f40da03dce1a766a880f1f3649dd957b63e', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, index.h("div", { key: 'e80e79b012c3060a9fdfcec22af050eb5d063648', class: "nav-accordion" }, index.h("slot", { key: '234d41321e32046d3d439a93a544c0325b0a02a8' }))));
+        return (index.h(index.Host, { key: '111706b5210510f44864d0dd8f5d2fe1901839da', class: { [`breakpoint-${this.breakpoint}`]: true, [`mode-${this.mode}`]: true } }, index.h("div", { key: 'e21f1a8ae3edf2c8aa08385240a536c69cf0da6e', class: "nav-accordion" }, index.h("slot", { key: 'c452fa149aec51c88dbaef3e59de7e28c4f89de3' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/af-nav-menu-nest.cjs.entry.js CHANGED Viewed

@@ -35,7 +35,7 @@ const AfNavMenuNest = class {
             [`type-${this.type}`]: true,
             [`breakpoint-${this.breakpoint}`]: true
         };
-        return (index.h(index.Host, { key: '90fbee205d076ffd9884122101a2f337088d6cd6' }, index.h("div", { key: '49e9b2290833f5200119d2cac7d4381e74eddbec', class: classes }, index.h("div", { key: '148790bd4481d662149913a6b53e248c4ff49f95', class: "menu-columns" }, index.h("slot", { key: '7790aa268c060cc8253bab3dc08c9de0819eb39a' })), index.h("div", { key: '393ed046ddcd717e4d1dd8a2e9df0332f1612238', class: "menu-sidebar" }, index.h("slot", { key: 'cb61c9744b070aaf2bcbbbf2b402664e41e2866c', name: "sidebar" })))));
+        return (index.h(index.Host, { key: 'b0eb2c4904916a16b2b6ec6d612337fed3c05e12' }, index.h("div", { key: 'dd1836b1c6ee6f75555989334a35e2a41d9bacab', class: classes }, index.h("div", { key: '4e3ae3951e9969d21a5e18a0489a33631bb1e8f2', class: "menu-columns" }, index.h("slot", { key: '64c660d4a5b35dda06b0ff0ca21c0e24014ceef2' })), index.h("div", { key: '7418a543431a9fd0fbbf95b1e3b5e862d5ac3917', class: "menu-sidebar" }, index.h("slot", { key: 'd36bb4016c86d9258a70ddbb46232264bdb156e4', name: "sidebar" })))));
     }
 };
 AfNavMenuNest.style = afNavMenuNestCss;

package/dist/cjs/af-nav-menu.cjs.entry.js CHANGED Viewed

@@ -32,7 +32,7 @@ const AfNavMenu = class {
             'has-border': this.showBorder,
             'card-style': this.cardStyle
         };
-        return (index.h(index.Host, { key: 'b77aa8f55e2148e3a21dea9009ccc9f345ad5da1' }, index.h("div", { key: '0ef8c2202f6ba4925bf16a2e448dec67f65b1bd6', class: classes }, this.heading && (index.h("div", { key: '6164df7a1a6efe8afb57860d20175fa5ecabf39c', class: "menu-header" }, index.h("h3", { key: 'a517c7e3039424974c111dc8bf085b9bb57ce833', class: "menu-heading" }, this.heading))), index.h("div", { key: '18389d1f29886f2d832744bf1cadc449c8e96948', class: "menu-items" }, index.h("slot", { key: '40c5ffc54a5c1eedd8e07fbecd040070f1b16d97' })))));
+        return (index.h(index.Host, { key: '3245ae98bb4b1ab013d36630802bb1cdece57675' }, index.h("div", { key: 'e84dcdc45b92f928ee7b8dd2328a2b7276a2e02a', class: classes }, this.heading && (index.h("div", { key: 'd42c91176b53b5d0375cb29d489b722dcd3c8e74', class: "menu-header" }, index.h("h3", { key: 'b2cf5d6cb682db6f68c9a45045fb060710097137', class: "menu-heading" }, this.heading))), index.h("div", { key: '89e7aef886d60d2ce3d8b82cd1b2c588d4894be8', class: "menu-items" }, index.h("slot", { key: '29d596f664fdfc83fc40c17686751f1b893bce26' })))));
     }
 };
 AfNavMenu.style = afNavMenuCss;

package/dist/cjs/af-number-badge.cjs.entry.js CHANGED Viewed

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

package/dist/cjs/af-numbered-stepper-item.cjs.entry.js CHANGED Viewed

@@ -16,7 +16,7 @@ const AfNumberedStepperItem = class {
     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 (index.h(index.Host, { key: 'f703f0459299a2a7f9bec41634fb9c71749aebdb', role: "listitem" }, index.h("div", { key: '635c36a16c67735dd241228fb44b3dda152bc9d9', class: "numbered-stepper-item__marker-row", "aria-hidden": "true" }, index.h("af-number-badge", { key: 'ce495f0f0f17ea196a0ba0032c4e897fb027b2ad', class: "numbered-stepper-item__badge", number: clamped, variant: "inCircle", size: 40 }), index.h("span", { key: '5158ca703611b55d28bb34b445f68fa462b582cf', class: "numbered-stepper-item__connector" })), index.h("af-typography-lockup", { key: '591e3622a0cd4132a13ea7b0c87e368954ce287c', class: "numbered-stepper-item__lockup", "heading-size": "card", "text-alignment": "center" }, index.h("slot", { key: '0b8ada7fb0b6bd5bb29eb8f1fffa07eb79984b3f', name: "heading" }), index.h("span", { key: '83813e92ed8e70dbaf507db4fb306e0d69cf5d51', slot: "description" }, index.h("slot", { key: 'a676610379b5f948d65acad4f8c4adeecf5c81a1', name: "body" })))));
+        return (index.h(index.Host, { key: '62bc6f558da62d664e22c680af3d4a0cd959ee27', role: "listitem" }, index.h("div", { key: 'aac9fb7f30e3a0bbb70303102526bc9871910737', class: "numbered-stepper-item__marker-row", "aria-hidden": "true" }, index.h("af-number-badge", { key: 'fb4ba62a61cdc4bced7985f8013a7adcc309cf0e', class: "numbered-stepper-item__badge", number: clamped, variant: "inCircle", size: 40 }), index.h("span", { key: '3090034f17f0c62ab94a91bd45b5772856b6c632', class: "numbered-stepper-item__connector" })), index.h("af-typography-lockup", { key: 'fdcc257515a9265330d4443d6e665ad44630cc73', class: "numbered-stepper-item__lockup", "heading-size": "card", "text-alignment": "center" }, index.h("slot", { key: '6905c5a82d0dc82ed81ef3847f534bde32be9262', name: "heading" }), index.h("span", { key: '8be84e524019bf3f51b5d8447eaae5d6d2b881f0', slot: "description" }, index.h("slot", { key: '6c0b5d91a79706cb864fa532d6432699130bd728', name: "body" })))));
     }
 };
 AfNumberedStepperItem.style = afNumberedStepperItemCss;

package/dist/cjs/af-numbered-stepper.cjs.entry.js CHANGED Viewed

@@ -26,7 +26,7 @@ const AfNumberedStepper = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '018229242bb7fbcd74c312683b4a6ce4e7337894', class: `numbered-stepper numbered-stepper--${this.orientation}`, role: "list" }, index.h("slot", { key: '3fae9bbb5bc403d2f55bd4076c1794163e9631e2' })));
+        return (index.h(index.Host, { key: '468809af144520073ec0924b8b293a1a7a98c2a6', class: `numbered-stepper numbered-stepper--${this.orientation}`, role: "list" }, index.h("slot", { key: 'e7ab09871620ab5ccc1b384443824a91750a15c3' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/af-paperclip-decoration.cjs.entry.js CHANGED Viewed

@@ -30,7 +30,7 @@ const AfPaperclipDecoration = class {
         this.fill = 'white';
     }
     render() {
-        return (index.h(index.Host, { key: '4236fa1de1c1847b0665c79341000bfb63ab4509' }, index.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" }, index.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 (index.h(index.Host, { key: '2056080b6be950fecf3cd1dc43114e457dac513b' }, index.h("svg", { key: '8a054a7d2794adc1042d474cffb0e82ad686bb63', "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" }, index.h("path", { key: 'e8704baa60e7b272d3c731b104b8e93f7a7ae517', 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 }))));
     }
 };
 AfPaperclipDecoration.style = afPaperclipDecorationCss;

package/dist/cjs/af-progress-line.cjs.entry.js CHANGED Viewed

@@ -21,10 +21,10 @@ const AfProgressLine = class {
         // Clamp progress between 0 and 1
         const clampedProgress = Math.max(0, Math.min(1, this.progress));
         const progressPercent = clampedProgress * 100;
-        return (index.h(index.Host, { key: 'b09e523a63bdb6ea6084e98e6fb8030840648f27' }, index.h("div", { key: 'eda92bcf3b0f9d92edfb32299953b984520cc413', class: {
+        return (index.h(index.Host, { key: 'f56ae490d0d9e374f540ccb88b0af53430796b42' }, index.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 }, index.h("div", { key: 'cf4748fdaf9a5e1f410e4bf16acaf6ebd80a931b', class: "progress-line__background" }), index.h("div", { key: '3c20e0c290595e97b5e34a6e788297e180494add', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
+            }, role: "progressbar", "aria-valuenow": Math.round(progressPercent), "aria-valuemin": 0, "aria-valuemax": 100 }, index.h("div", { key: '19623163676a5fd71c7b5ba91b33f53d188647c9', class: "progress-line__background" }), index.h("div", { key: '0bd6ccd0748930edd43a384bf8ddad55f8c9d07b', class: "progress-line__active", style: { width: `${progressPercent}%` } }))));
     }
 };
 AfProgressLine.style = afProgressLineCss;

package/dist/cjs/af-section.cjs.entry.js CHANGED Viewed

@@ -15,8 +15,8 @@ const AfSection = class {
         this.container = true;
     }
     render() {
-        const content = index.h("slot", { key: '6c300093d45c3f5a029ef4ad367fb6796c392d56' });
-        return (index.h(index.Host, { key: '05da4bf23a6c5aba61b21d1536cf615cd0176cfb' }, index.h("div", { key: '3ec6bacbd5acef49183afa406efbe9301287a086', class: `section padding-${this.padding} theme-${this.theme}` }, this.container ? (index.h("af-container", null, content)) : content)));
+        const content = index.h("slot", { key: 'fd7304dd713f0cbad475910d56fd9e2622068fad' });
+        return (index.h(index.Host, { key: 'f1758977b8ce080e03631629507f33759d1696d9' }, index.h("div", { key: 'af0fd30917df8a59cf7d441e9346ed643672aaec', class: `section padding-${this.padding} theme-${this.theme}` }, this.container ? (index.h("af-container", null, content)) : content)));
     }
 };
 AfSection.style = afSectionCss;

package/dist/cjs/af-show.cjs.entry.js CHANGED Viewed

@@ -14,7 +14,7 @@ const AfShow = class {
             [`show-above-${this.above}`]: !!this.above,
             [`show-below-${this.below}`]: !!this.below,
         };
-        return (index.h(index.Host, { key: '5fcd914caa419668e4783e20fd427d25af19f769', class: classes }, index.h("slot", { key: '8e2d9c0e1df36a0e49c65956241d24ffb956bf96' })));
+        return (index.h(index.Host, { key: '42763e1aa4b245a42a4319ee3db31277b1bbca79', class: classes }, index.h("slot", { key: '0f88b298410118de3a3963b30d48b24c180f6a86' })));
     }
 };
 AfShow.style = afShowCss;

package/dist/cjs/af-social-link.cjs.entry.js CHANGED Viewed

@@ -31,7 +31,7 @@ const AfSocialLink = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'fe837fca1e27062dd707f9b5e58e5ce6d9c95cf8' }, index.h("a", { key: '78dde128f42950f3c1a51770c0a431ad16df03fb', href: this.href, target: "_blank", rel: "noopener noreferrer", class: "social-link", "aria-label": this.label }, this.renderIcon())));
+        return (index.h(index.Host, { key: 'ae4db8c4baeea96b707faf5581c5e5970019fad6' }, index.h("a", { key: '53e90930c51f30fa0ec74773234b06e3c2e06d6c', href: this.href, target: "_blank", rel: "noopener noreferrer", class: "social-link", "aria-label": this.label }, this.renderIcon())));
     }
 };
 AfSocialLink.style = afSocialLinkCss;

package/dist/cjs/af-spacer.cjs.entry.js CHANGED Viewed

@@ -36,7 +36,7 @@ const AfSpacer = class {
                 style.height = sizeValue;
             }
         }
-        return index.h(index.Host, { key: 'babcc0cce83253929d43a83856149296b0ea880b', style: style, "aria-hidden": "true" });
+        return index.h(index.Host, { key: '0ffa6692a18f469b5fe09385e268b1a43f5fdbe9', style: style, "aria-hidden": "true" });
     }
 };
 AfSpacer.style = afSpacerCss;

package/dist/cjs/af-split-section.cjs.entry.js CHANGED Viewed

@@ -25,14 +25,14 @@ const AfSplitSection = class {
         this.container = true;
     }
     render() {
-        const content = index.h("slot", { key: 'e56b2c06d21917dc745f308867026b2898a08ddf' });
+        const content = index.h("slot", { key: '25574554f5f24e11488e1b94842229b7b87b3ffe' });
         // Create the split background using CSS gradient
         const topColor = themeColors[this.topTheme];
         const bottomColor = themeColors[this.bottomTheme];
         const backgroundStyle = {
             background: `linear-gradient(to bottom, ${topColor} 0%, ${topColor} 50%, ${bottomColor} 50%, ${bottomColor} 100%)`
         };
-        return (index.h(index.Host, { key: 'f1f5610bc3789c1038efc9c82a22f9e1c400ed36' }, index.h("div", { key: 'ed7dd397f532c9daa67588edfd1861979859a70c', class: `split-section padding-${this.padding} top-theme-${this.topTheme}`, style: backgroundStyle }, this.container ? (index.h("af-container", null, content)) : content)));
+        return (index.h(index.Host, { key: '5745d7d5c8b238a4959a53f820498bf348b1c668' }, index.h("div", { key: 'a2b8760b663800015b120c2ad82b004bced9882f', class: `split-section padding-${this.padding} top-theme-${this.topTheme}`, style: backgroundStyle }, this.container ? (index.h("af-container", null, content)) : content)));
     }
 };
 AfSplitSection.style = afSplitSectionCss;

package/dist/cjs/af-stack.cjs.entry.js CHANGED Viewed

@@ -55,7 +55,7 @@ const AfStack = class {
             justifyContent: justifyMap[this.justify],
             flexWrap: this.wrap ? 'wrap' : 'nowrap',
         };
-        return (index.h(index.Host, { key: '2be027b85f3b9167ec237f8b046d41c68e92eaea', style: style }, index.h("slot", { key: 'df553b2b049139b4dbbb8b8794098dec439d3642' })));
+        return (index.h(index.Host, { key: 'bf6f8a0e7454bbdf4a55a5723a32b40bef78805b', style: style }, index.h("slot", { key: '54e82fd4bc6ca19d8b29ed424a2c7d54a8784a22' })));
     }
 };
 AfStack.style = afStackCss;

package/dist/cjs/af-stat.cjs.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const AfStat = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '7aa910b1138ba826e4b9b6e9b829cde4e512ebfe' }, index.h("div", { key: '0b8301efd14d2e4275f508b4a3b21bb7130c5308', class: "stat" }, index.h("af-heading", { key: '4ed345a252ef232354b03ed2e393f943aa7d6d2f', level: "2", class: "stat__value" }, this.value), index.h("af-text", { key: 'ea32cadc8a0b216d1bd0929e8b68d8c19121690b', variant: "medium", class: "stat__label" }, this.label))));
+        return (index.h(index.Host, { key: 'db2aa04e087c7313db9dde512368413ea6428d38' }, index.h("div", { key: '72f0578398f5d82dcd27bf7e4102f9801f1067b3', class: "stat" }, index.h("af-heading", { key: '1accbab198a0923be4af5b5b6c0e7e5ca82c36b5', level: "2", class: "stat__value" }, this.value), index.h("af-text", { key: '533ea04317fb66451e7d130369b25080e37cff41', variant: "medium", class: "stat__label" }, this.label))));
     }
 };
 AfStat.style = afStatCss;

package/dist/cjs/af-stats-row.cjs.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ const AfStatsRow = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'b2bdf61d7367064cabbb1f802436f57e056117ea' }, index.h("div", { key: '84f19a40ac81af985648a0863f90f9622bb06176', class: "stats-row" }, index.h("slot", { key: '605bda456df46717eecafdc7083c0b2e9b259fa0' }))));
+        return (index.h(index.Host, { key: '49538a82264992333834fdc12ec64522cf4242fe' }, index.h("div", { key: '9d567f97bc5f2707fad9e40b8d3ce0c4658db73b', class: "stats-row" }, index.h("slot", { key: 'f48aac6723185f8f10804355da4731f03285d9db' }))));
     }
 };
 AfStatsRow.style = afStatsRowCss;

package/dist/cjs/af-stepper-step.cjs.entry.js CHANGED Viewed

@@ -14,7 +14,7 @@ const AfStepperStep = class {
         this.index = 1;
     }
     render() {
-        return (index.h(index.Host, { key: '7ea12be34ade3e4f2cd3b5453ec13f4b4e2dc613' }, index.h("span", { key: '4be517aa7d2f6e5cf998221d2823d1f6c06167de', class: "stepper-step__badge" }, this.index), index.h("div", { key: 'e13ccd376cf098378bf1ac13ecc61ce9a8aa9cd6', class: "stepper-step__content" }, index.h("div", { key: '9798d19d11031998955c9df2a09fda210c1c96ee', class: "stepper-step__heading" }, index.h("slot", { key: '1ecaba03758b8109fa2d861cfaa09e7e41873f7e', name: "heading" })), index.h("div", { key: '21efd7b8aa67137f72044c31f4719eac1802fea3', class: "stepper-step__body" }, index.h("slot", { key: '73a42fef64c764bf96513914d4a0912f51516832', name: "body" })))));
+        return (index.h(index.Host, { key: 'd7c49caaec94513a798ff851f8975b2df55848ce' }, index.h("span", { key: 'd8f9d57de5434a961c217b57ac220f8930d17f6f', class: "stepper-step__badge" }, this.index), index.h("div", { key: '62204e81ed7bfd36d342da448ea0ea8852e16854', class: "stepper-step__content" }, index.h("div", { key: '40edc0e5973fabcfa781195e64fa0446d6be0e0c', class: "stepper-step__heading" }, index.h("slot", { key: '090302f455303956e2b6185a2e30d41d13b489e0', name: "heading" })), index.h("div", { key: '5fd26c30a269068568e95007f84dda0912a4bde4', class: "stepper-step__body" }, index.h("slot", { key: '5f3f4178f54edbbf05be6cd3df74a30bc2e18f96', name: "body" })))));
     }
 };
 AfStepperStep.style = afStepperStepCss;

package/dist/cjs/af-stepper.cjs.entry.js CHANGED Viewed

@@ -24,7 +24,7 @@ const AfStepper = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'c0f67912f1725dcc8cce09bb7fc87ef2b61f0153', class: `stepper stepper--${this.orientation}` }, index.h("div", { key: '190ee10d7b204a387cda11019275018becb7700f', class: "stepper__connector", "aria-hidden": "true" }), index.h("slot", { key: 'af02da9d06b1b29850686f66e941403ac765e5d0' })));
+        return (index.h(index.Host, { key: 'a8aeeb5a9274e24d0e3b4daf84f5ba4f30ce47d3', class: `stepper stepper--${this.orientation}` }, index.h("div", { key: 'aa2263b4a10e144c376b6afad896f83d9c642a88', class: "stepper__connector", "aria-hidden": "true" }), index.h("slot", { key: '6ff6d3ce84bd8c06599ef5e8e9244d210e16578a' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/af-tab-bar.cjs.entry.js CHANGED Viewed

@@ -78,7 +78,7 @@ const AfTabBar = class {
             [`shape-${this.shape}`]: true,
             [`breakpoint-${this.breakpoint}`]: true,
         };
-        return (index.h(index.Host, { key: 'b1fa40c2156ac7271650aafd27d369c3a8224f44', role: "tablist" }, index.h("div", { key: 'e92eaef79f5df92cca1b2170218df2668afc031d', class: containerClasses }, index.h("slot", { key: '307aea867005fe40899b54d9fe1e31ecca0528e8' }))));
+        return (index.h(index.Host, { key: '41e03f4561dc7f11c19b533e659b07053f08a5e3', role: "tablist" }, index.h("div", { key: '191491f64e3d77fafe58e241f777a6a9e3b79e04', class: containerClasses }, index.h("slot", { key: '181e1169bd9215cb99d8bd0dabeaa49aac5fc24a' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/af-tab.cjs.entry.js CHANGED Viewed

@@ -55,7 +55,7 @@ const AfTab = class {
             'disabled': this.disabled,
             [`shape-${this.shape}`]: true,
         };
-        return (index.h(index.Host, { key: '5127117fc8ffbf1ed62de57af0a3ba569398bd0b' }, index.h("button", { key: 'e32591d0448724b7ead02702b21c5f31518bf982', class: tabClasses, role: "tab", "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, disabled: this.disabled }, this.displayNumber && (index.h("span", { key: '2d9756769c9a9442e632faac4710eceb6ec7dcb2', class: "number-slot" }, index.h("slot", { key: 'fc9b02645ada6c015cbdb07db5d02c7f8fee9320', name: "number" }))), this.displayIcon && (index.h("span", { key: '8f9ef1b8cec03bea2231a0cc19a91537b84de31f', class: "icon-slot" }, index.h("slot", { key: '9fae54937c7876df37624aa8928dbfe478bec556', name: "icon" }))), index.h("span", { key: 'e332be1f9007beb3bed7bc4b74480f0fcacd8a6e', class: "label" }, this.label))));
+        return (index.h(index.Host, { key: '9e477df87e7bd6442e9f755d3caaf99e4138c60e' }, index.h("button", { key: 'b7f4504a1be24fb9db831fbf6ca4da535b7eb200', class: tabClasses, role: "tab", "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, disabled: this.disabled }, this.displayNumber && (index.h("span", { key: 'd3dbb0dda4a819304ef8a70b34379c6b7fd2d85f', class: "number-slot" }, index.h("slot", { key: '2a1b2881d7fcd689f3e4e5e4e06407084690966c', name: "number" }))), this.displayIcon && (index.h("span", { key: 'b07f1d3f8c723ec260cfa4900e51f7581d2f8024', class: "icon-slot" }, index.h("slot", { key: '6b80404c46e77ab06d3ca24a108fbea231420867', name: "icon" }))), index.h("span", { key: 'e657d5ffa4938fb85dd165e8679eff694cbb357e', class: "label" }, this.label))));
     }
 };
 AfTab.style = afTabCss;