@ebrains/components 2.1.0 → 2.2.0

package/dist/cjs/{eds-accordion_33.cjs.entry.js → eds-accordion_34.cjs.entry.js}

@@ -3330,9 +3330,10 @@ isFieldVisible) {
                 const npsEl = findNpsElement(formEl);
                 if (npsEl && npsEl.shadowRoot) {
                     const raw = (_a = npsEl.shadowRoot
-                        .querySelector('div[role="radio"][aria-checked="true"] eds-button')) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-label');
-                    const value = raw !== null ? parseInt(raw, 10) : null;
-                    if (value === null) {
+                        .querySelector('eds-button[tabindex="0"]')) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-label');
+                    const parsed = raw !== null ? parseInt(raw, 10) : NaN;
+                    const value = Number.isInteger(parsed) && parsed >= 0 && parsed <= 10 ? parsed : NaN;
+                    if (isNaN(value)) {
                         // eslint-disable-next-line
                         if (field.required) {
                             errors[field.name] = ['This field is required.'];
@@ -3398,7 +3399,7 @@ function getFormInitData({ initData, parsedFields, currentValues
     return { updatedValues };
 }
 
-const edsFormCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.flex{display:flex}.flex-col{flex-direction:column}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-01 b,.f-body-01 strong{font-weight:var(--f-body-01---bold-weight, bold)}.f-body-02 b,.f-body-02 strong{font-weight:var(--f-body-02---bold-weight, bold)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.rounded-sm{border-radius:8px}.border-softer{border-color:rgba(0, 0, 0, .1)}.border-2{border-width:2px}.mt-20{margin-top:1.25rem}.mt-32{margin-top:2rem}.mb-32{margin-bottom:2rem}.pt-28{padding-top:1.75rem}.pl-8{padding-left:0.5rem}.pl-16{padding-left:1rem}.border-l-2{border-left-width:2px}.gap-y-8{row-gap:0.5rem}.gap-y-16{row-gap:1rem}.gap-y-24{row-gap:1.5rem}.border-group{border-left:1px solid var(--soft-color, #ddd);padding-left:1rem}";
+const edsFormCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.flex{display:flex}.flex-col{flex-direction:column}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-body-01 b,.f-body-01 strong{font-weight:var(--f-body-01---bold-weight, bold)}.f-body-02 b,.f-body-02 strong{font-weight:var(--f-body-02---bold-weight, bold)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.text-light{color:var(--grey-700)}.rounded-sm{border-radius:8px}.border-softer{border-color:rgba(0, 0, 0, .1)}.border-2{border-width:2px}.mt-20{margin-top:1.25rem}.mt-32{margin-top:2rem}.mb-32{margin-bottom:2rem}.pt-28{padding-top:1.75rem}.pl-8{padding-left:0.5rem}.pl-16{padding-left:1rem}.border-l-2{border-left-width:2px}.gap-y-8{row-gap:0.5rem}.gap-y-16{row-gap:1rem}.gap-y-24{row-gap:1.5rem}.border-group{border-left:1px solid var(--soft-color, #ddd);padding-left:1rem}.bg-inverse{background-color:var(--white)}.effect-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.shadow-hover{--tw-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);--tw-shadow-colored:0px 0px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.cursor-pointer{cursor:pointer}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.effect-focus-within:focus-within{outline-style:solid}.relative{position:relative}.rounded-lg{border-radius:16px}.px-16{padding-left:1rem;padding-right:1rem}.pb-16{padding-bottom:1rem}.p-32{padding:2rem}";
 const EdsFormStyle0 = edsFormCss;
 
 const EdsForm = class {
@@ -3406,13 +3407,17 @@ const EdsForm = class {
         index.registerInstance(this, hostRef);
         this.form = index.createEvent(this, "form", 7);
         this.name = 'eds-form';
+        this.title = undefined;
+        this.description = undefined;
         this.setFormUrl = true;
         this.formBtn = true;
         this.formBtnLabel = 'Submit';
+        this.buttonIntent = 'primary';
         this.errorMessage = 'Some fields in your form are incorrect.';
         this.fields = [];
         this.groups = [];
         this.initData = {};
+        this.formStyle = 'default';
         this.values = {};
         this.isSubmitting = false;
         this.hasError = false;
@@ -3710,10 +3715,15 @@ const EdsForm = class {
     }
     get groupedFields() {
         const map = {};
-        // initialize buckets for each group
+        // initialize buckets for each declared group
         this.parsedGroups.forEach((g) => (map[g.id] = []));
+        // always keep an ungrouped bucket
         map['__ungrouped'] = [];
+        // only bucket fields that are currently visible
         this.parsedFields.forEach((f) => {
+            if (!this.isFieldVisible(f)) {
+                return;
+            }
             const gid = f.groupId || '__ungrouped';
             if (!map[gid]) {
                 map[gid] = [];
@@ -3734,7 +3744,7 @@ const EdsForm = class {
             return (index.h("div", { class: "form-group rating-field", key: field.name }, index.h("div", { class: "flex justify-between" }, field && (index.h("eds-input-label", { name: `rating-${field.name}`, label: field.label, disabled: field.disabled, required: field.required }))), index.h("eds-rating", { id: `rating-${field.name}`, "rating-type": field.ratingType, "rating-count": field.ratingCount, "selected-rating": val, onRating: (e) => this.handleRating(e, field) }), index.h("div", { class: "mt-6" }, index.h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, message: field.message, "error-message": (_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.join('<br/>'), error: !!this.errors[field.name], link: field.link }))));
         }
         else if (field.type === 'nps') {
-            return (index.h("div", { class: "form-group nps-field", key: field.name }, index.h("div", { class: "flex justify-between" }, field && (index.h("eds-input-label", { name: `nps-${field.name}`, label: field.question, disabled: field.disabled, required: field.required }))), index.h("eds-nps", { id: `nps-${field.name}`, "right-label": field.rightLabel, "left-label": field.leftLabel, onNps: (e) => this.handleNPS(e, field) }), index.h("div", { class: "mt-6" }, index.h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, message: field.message, "error-message": (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br/>'), error: !!this.errors[field.name], link: field.link }))));
+            return (index.h("div", { class: "form-group nps-field", key: field.name }, index.h("div", { class: "flex justify-between" }, field && (index.h("eds-input-label", { name: `nps-${field.name}`, label: field.question, disabled: field.disabled, required: field.required }))), index.h("eds-nps", { id: `nps-${field.name}`, "right-label": field.rightLabel, "left-label": field.leftLabel, onNps: (e) => this.handleNPS(e, field) }), index.h("div", { class: "mt-6" }, index.h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, "error-message": (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br/>'), error: !!this.errors[field.name] }))));
         }
         return (index.h("eds-input-field", { key: field.name, name: field.name, label: field.label, placeholder: field.placeholder, type: field.type, value: this.values[field.name], required: field.required, hint: field.hint, message: field.message, error: !!this.errors[field.name], errorMessage: (_c = this.errors[field.name]) === null || _c === void 0 ? void 0 : _c.join('<br/>'), options: field.options, onInput: (e) => this.handleInput(e, field), onChangeNative: (e) => this.handleChange(e, field) }));
     }
@@ -3745,9 +3755,13 @@ const EdsForm = class {
         const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
         //const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
         const buckets = this.groupedFields;
-        return (index.h("form", { key: 'a66997f39b5be347a4d502f77bcd1da9d1a274ac', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, index.h("div", { key: 'f8800d2ebe64b3279234ab8ebe20e535dc822872' }, index.h("slot", { key: 'b4194073b281dec35a79a6cc974fdf7476a67807' }), hiddenFields.map((field, index$1) => (index.h("eds-input", { key: index$1, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
+        // build the shadow/bg classes if formStyle="shadow"
+        const styleClasses = this.formStyle === 'shadow'
+            ? 'bg-inverse effect-shadow shadow-hover border-softer relative rounded-lg border-2 p-32'
+            : '';
+        return (index.h("form", { key: 'ecf49eb81f18b444d059d3bdea4600f4ae594ea9', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, index.h("div", { key: '65137fb770f274431c7906326cdf49e0fee73b18', class: "flex flex-col gap-y-24" }, this.title && (index.h("span", { key: 'e4c5b4a7883c4569a657cc234f18f995480ec8df', role: "heading", class: "f-heading-04" }, this.title)), this.description && index.h("span", { key: '65528e4600127f1cff4ce0e5be6f8a6bddc4c864', class: "f-body-02 text-light" }, this.description), index.h("slot", { key: '6230035a050386763723c2b60bd5e81b912762d7' })), hiddenFields.map((field, index$1) => (index.h("eds-input", { key: index$1, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
             .filter((g) => Array.isArray(buckets[g.id]) && buckets[g.id].length > 0)
-            .map((g) => (index.h("div", { class: "container mt-20", key: g.id }, index.h("span", { class: "f-body-02" }, index.h("b", null, g.title)), index.h("div", { class: "border-group mt-32 mb-32 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), index.h("div", { key: '2fc83ebb6b0a472f6853618602c37ee83adae9ff', class: "flex flex-col mt-20 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f)))), this.formBtn && (index.h("div", { key: '91b569b1a4513945f3228c374ae45b52ea17f91d', class: "mt-32" }, index.h("eds-button", { key: '1a8feaecd5a7f292f8aeae3db900700b4f7fb8d4', intent: "primary", label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
+            .map((g) => (index.h("div", { class: "container mt-32", key: g.id }, index.h("span", { class: "f-body-02" }, index.h("b", null, g.title)), index.h("div", { class: "border-group mt-32 mb-32 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), index.h("div", { key: '8116d30248f8461a842365470da9915200531028', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), this.formBtn && (index.h("div", { key: 'e2f1d3ca6a9f6a3b44c45e576150505c49e41dd1', class: "mt-32" }, index.h("eds-button", { key: 'e312bf08b5db526c00497fafaa9476a225919aaf', intent: this.buttonIntent, label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -3805,7 +3819,7 @@ const EdsHeader = class {
         const classes = variantClasses[this.headerVariant] || variantClasses.default;
         // Logo color variant: default and inverse use 'color', strong uses 'color-white'
         const logoType = this.headerVariant === 'strong' ? 'color-white' : 'color';
-        return (index.h("header", { key: '812ad4427cbb3f4b0ca9e305870c35d63487dc59', class: `flex items-center justify-between relative z-10 ${classes}` }, index.h("div", { key: '531acdceb12ca45fea125091dee4d8a0ff39a10b', class: "mr-auto w-[200px] h-[85px]" }, index.h("eds-logo", { key: 'bb2708b3c8eacc575117bfed404b7c9db4fd05e2', type: logoType, href: this.homeUrl })), this.parsedLinks && (index.h("nav", { key: 'a80192d7666416c29025a1ac5812946f14feec3f', class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, index.h("ul", { key: 'fae258c468367837a9738bcbe2442709fdc601a0', class: "flex gap-x-2" }, this.parsedLinks.map((link) => (index.h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: "ghost", size: "large", icon: link.icon, external: link.external, "extra-class": "after:effect-opacity aria-current-page:bg-darker whitespace-nowrap !text-current after:!border-transparent after:opacity-0 hover:after:!border-transparent hover:after:opacity-100" })))))), index.h("slot", { key: '9588ef20e19fda76115074c39d902eebead3c845' }), this.menuEnabled && (index.h("div", { key: 'ce2e43645a1c33ca7d6495acd820ad0a93cefdf9', class: "md:hidden flex overflow-hidden px-16" }, index.h("eds-button", { key: 'ed73c7e7a6544f60eea9dbf43379ffe4967c0dbd', "aria-label": "Menu", intent: this.headerVariant === 'default' ? 'ghost' : 'ghostInverse', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
+        return (index.h("header", { key: 'a0f5bb7d9e850e9414db804019674d6bcbc8ea0b', class: `flex items-center justify-between relative z-10 ${classes}` }, index.h("div", { key: '678d5b1583e6fa47c0eac8ce734e8ec34cd76ad9', class: "mr-auto w-[200px] h-[85px]" }, index.h("eds-logo", { key: '12ce9c42b266bbddfd75d2a8f0097708480a2490', type: logoType, href: this.homeUrl })), this.parsedLinks && (index.h("nav", { key: 'eb388b679d4e268dc7fc011bc2a6406a619287c8', class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, index.h("ul", { key: 'c3f8689bb257166c50dd678287c8ad4f54eb315a', class: "flex gap-x-2" }, this.parsedLinks.map((link) => (index.h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: "ghost", size: "large", icon: link.icon, external: link.external, "extra-class": "after:effect-opacity aria-current-page:bg-darker whitespace-nowrap !text-current after:!border-transparent after:opacity-0 hover:after:!border-transparent hover:after:opacity-100" })))))), index.h("slot", { key: '3f689a811a60052393a795937a908cf7d0604cc6' }), this.menuEnabled && (index.h("div", { key: '506b953b455b72085d83bdaafc6855992075ddbe', class: "md:hidden flex overflow-hidden px-16" }, index.h("eds-button", { key: '5b526affd813549a6142efab255d6486a5e2dd66', "aria-label": "Menu", intent: this.headerVariant === 'default' ? 'ghost' : 'ghostInverse', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
     }
     get hostEl() { return index.getElement(this); }
 };
@@ -3887,10 +3901,10 @@ const EdsImg = class {
             imgOpts['loading'] = 'lazy';
             imgOpts['decoding'] = 'async';
         }
-        return (index.h("div", { key: '605bff5657ca79678517527a9462b31608e5af7a', class: {
+        return (index.h("div", { key: 'fec0dcf2ec178a953f4ced8a71b037030983670d', class: {
                 'items-center justify-center': true,
                 'effect-bg-pattern': this.lazyload && this.showBg
-            } }, index.h("picture", { key: '0d0def26688c1ec7214211d02875160965e2ce48' }, this.formats.map((format) => (index.h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), index.h("img", Object.assign({ key: 'c9c307a5fdf25d9792db2a76f4d08fcd27b50401', ref: (el) => (this.img = el), class: {
+            } }, index.h("picture", { key: '0df010a6ed50519be0a2017bf12db7d1ab2fb208' }, this.formats.map((format) => (index.h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), index.h("img", Object.assign({ key: 'ea4275b2cc6be0cce5ab63f97d05454e3c4ee1dc', ref: (el) => (this.img = el), class: {
                 'effect-opacity object-cover object-center': true,
                 'opacity-100': this.loaded,
                 'opacity-0': !this.loaded
@@ -3949,7 +3963,7 @@ const EdsInput = class {
     render() {
         const withIcon = !!this.icon;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
-        return (index.h("div", { key: 'a26224d6345099df6bc5110d42b701980603f7f7', class: "relative flex items-center" }, this.type === 'textarea' ? (index.h("textarea", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, class: `min-h-80 input input-textarea ${withIcon ? 'input-with-icon' : ''} ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })) : this.type === 'select' ? (index.h("select", { id: this.inputId || this.name, name: this.name, required: this.required, disabled: this.disabled, class: `input input-select ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, onInput: this.handleInput, onChange: this.handleInput }, this.options.map((option) => (index.h("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (index.h("input", Object.assign({ id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, type: this.type, checked: ['radio', 'checkbox'].includes(this.type) ? this.checked : undefined }, (this.type === 'number'
+        return (index.h("div", { key: '0a6386205f78655569bf93960a4e2664563e4014', class: "relative flex items-center" }, this.type === 'textarea' ? (index.h("textarea", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, class: `min-h-80 input input-textarea ${withIcon ? 'input-with-icon' : ''} ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })) : this.type === 'select' ? (index.h("select", { id: this.inputId || this.name, name: this.name, required: this.required, disabled: this.disabled, class: `input input-select ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, onInput: this.handleInput, onChange: this.handleInput }, this.options.map((option) => (index.h("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (index.h("input", Object.assign({ id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, type: this.type, checked: ['radio', 'checkbox'].includes(this.type) ? this.checked : undefined }, (this.type === 'number'
             ? {
                 min: this.min,
                 max: this.max,
@@ -3960,7 +3974,7 @@ const EdsInput = class {
               input ${this.type === 'radio' ? 'input-radio' : this.type === 'checkbox' ? 'input-checkbox' : ''}
               ${withIcon && this.type !== 'radio' && this.type !== 'checkbox' ? 'input-icon pl-36' : ''} 
               ${this.error ? 'input-error' : ''}
-              `, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput }))), this.maxLength && this.type === 'textarea' && (index.h("span", { key: 'beb48d08d18b5ca5b054b1b579e2f9527af222e9', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (index.h("eds-icon-wrapper", { key: '06948fe33c35c5830edd50a37411281865ef6d12', class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, icon: this.icon }))));
+              `, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput }))), this.maxLength && this.type === 'textarea' && (index.h("span", { key: 'c78bf1501f682cde9a193ea6726baf2433566516', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (index.h("eds-icon-wrapper", { key: 'c07e7d5d8394292cf365f32838dfd837ccf168d6', class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, icon: this.icon }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -4071,7 +4085,7 @@ const EdsInputField = class {
     }
     render() {
         const inputOpts = Object.assign({ name: this.name, id: this.inputId, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleNativeInput, onChange: this.handleNativeChange, type: this.type, required: this.required, value: this.value, error: this.error, icon: this.icon, checked: this.checked }, (this.type === 'number' ? { min: this.min, max: this.max, step: this.step } : {}));
-        return (index.h("div", { key: '615165ebb5980d2da414ad4028e053b46358eb4e' }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (index.h("fieldset", { class: "space-y-4 mt-8" }, index.h("div", { class: "flex justify-between" }, this.label && (index.h("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.hint && (index.h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.parsedOptions.map((option) => (index.h("div", { class: "flex items-center gap-x-4 gap-y-4", key: option.value }, index.h("eds-input", Object.assign({}, inputOpts, { value: option.value, checked: typeof this.value === 'string' && this.value.split(',').includes(String(option.value)) })), index.h("label", { htmlFor: this.name, class: `input-label-options ${this.disabled ? 'text-lighter' : ''}` }, option.label)))))) : (index.h("div", { class: "flex items-center gap-x-8" }, index.h("eds-input", Object.assign({}, inputOpts, { value: this.value, checked: this.value === 'on' || this.checked })), this.label && (index.h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }))))) : (index.h("div", null, index.h("div", { class: "flex justify-between" }, this.label && (index.h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })), this.hint && (index.h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.type === 'select' ? (index.h("eds-input-select", Object.assign({}, inputOpts, { options: this.parsedOptions }))) : this.type === 'file' ? (index.h("input", { type: "file", id: this.inputId || this.name, name: this.name, onChange: this.onChangeNative, disabled: this.disabled, required: this.required })) : this.type === 'search' ? (index.h("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
+        return (index.h("div", { key: 'eaa1d9c1095204c82bd01eab0f19f80eeee64d05' }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (index.h("fieldset", { class: "space-y-4 mt-8" }, index.h("div", { class: "flex justify-between mb-4" }, this.label && (index.h("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.hint && (index.h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.parsedOptions.map((option) => (index.h("div", { class: "flex items-center gap-x-4 gap-y-4", key: option.value }, index.h("eds-input", Object.assign({}, inputOpts, { value: option.value, checked: typeof this.value === 'string' && this.value.split(',').includes(String(option.value)) })), index.h("label", { htmlFor: this.name, class: `input-label-options ${this.disabled ? 'text-lighter' : ''}` }, option.label)))))) : (index.h("div", { class: "flex items-center gap-x-8" }, index.h("eds-input", Object.assign({}, inputOpts, { value: this.value, checked: this.value === 'on' || this.checked })), this.label && (index.h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }))))) : (index.h("div", null, index.h("div", { class: "flex justify-between mb-4" }, this.label && (index.h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })), this.hint && (index.h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.type === 'select' ? (index.h("eds-input-select", Object.assign({}, inputOpts, { options: this.parsedOptions }))) : this.type === 'file' ? (index.h("input", { type: "file", id: this.inputId || this.name, name: this.name, onChange: this.onChangeNative, disabled: this.disabled, required: this.required })) : this.type === 'search' ? (index.h("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
             var _a, _b, _c;
             const rangeProps = {
                 name: inputOpts.name,
@@ -4084,7 +4098,7 @@ const EdsInputField = class {
             const opt = this.parsedOptions;
             const numberValue = typeof this.value === 'string' ? parseFloat(this.value) : this.value || 0;
             return (index.h("eds-input-range", Object.assign({}, rangeProps, { min: (_a = opt[0]) === null || _a === void 0 ? void 0 : _a.value, max: (_b = opt[1]) === null || _b === void 0 ? void 0 : _b.value, step: (_c = opt[2]) === null || _c === void 0 ? void 0 : _c.value, value: numberValue })));
-        })()) : (index.h("eds-input", Object.assign({}, inputOpts))))), index.h("div", { key: '4ca8edfb4538caab53e89f16008683aea28adfbc', class: "mt-6" }, index.h("eds-input-footer", { key: '68053a16f607a277a5c806f3c830b24acf3b1f50', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link }))));
+        })()) : (index.h("eds-input", Object.assign({}, inputOpts))))), index.h("div", { key: '60e6c848d41591b2e9ec8c5cf8dd656ec8562c38', class: "mt-6" }, index.h("eds-input-footer", { key: 'e9298e01dbab9aa6a98a486286b32024766348d1', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link }))));
     }
     static get delegatesFocus() { return true; }
     get hostEl() { return index.getElement(this); }
@@ -4104,7 +4118,7 @@ const EdsInputFooter = class {
         this.link = undefined;
     }
     render() {
-        return (index.h("div", { key: '58bce34f2ec417696ba03d6c8c0c77fa1d900f9a' }, this.error && this.errorMessage && (index.h("div", { key: 'be14dc0f6e9494c1ee436fd8f822112eab6d2ce2', id: `error_${this.name}`, class: "text-error flex items-center" }, index.h("eds-icon-wrapper", { key: 'aaa2010441b0bfe9445e4b6401115b29606ac507', icon: "warning" }), index.h("p", { key: '277ac1de538e873c7da9b592e60dfd276738025d', class: "f-ui-04 ml-4 mb-4", innerHTML: this.errorMessage }))), this.message && index.h("p", { key: '4f07c6efe398bb002322a35279e68b237eac860e', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (index.h("a", { key: '50d042530985eeafd7334b0bb38fd2c14aed0e3f', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
+        return (index.h("div", { key: '54571d8f3c08a7a4f12e40728e02a7210ab0d345' }, this.error && this.errorMessage && (index.h("div", { key: 'db35f0c0dfa931d55d57a9c4ad3fffaeb4cea914', id: `error_${this.name}`, class: "text-error flex items-center" }, index.h("eds-icon-wrapper", { key: '63e401d86876829d8d2bbab887a66ef0dbd1837f', icon: "warning" }), index.h("p", { key: '81f8b0819a7cb119353c8ac38ab1df0cafb9d36f', class: "f-ui-04 ml-4 mb-4", innerHTML: this.errorMessage }))), this.message && index.h("p", { key: 'e5018623e2d8578864dc1f0b06d54e4a60ff9020', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (index.h("a", { key: 'e7b6bde26ae02cf07ac8b8e6461282a4ba1355ed', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
     }
 };
 EdsInputFooter.style = EdsInputFooterStyle0;
@@ -4121,7 +4135,7 @@ const EdsInputLabel = class {
         this.disabled = false;
     }
     render() {
-        return (index.h("label", { key: '622cd7e26774448ca86c1168d0a287d7b61d3e29', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (index.h("span", { key: 'c3162e765af70dd972e3cd0ca360cd3f52003f76' }, index.h("span", { key: '5bca5243c95399fefff4fa21b6c1477a287a3cb4', "aria-hidden": "true" }, "*"), index.h("span", { key: 'bc1c229ac387161e4aa314498dbbc77fbab62955', class: "sr-only" }, "required")))));
+        return (index.h("label", { key: '90e0659383fd3be9a166457de5429385fe3bfe02', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (index.h("span", { key: '4d417c45dd636bfd5872d846e5eb89ff3694a4d4' }, index.h("span", { key: '3924011891ee03e530fe25b269bf4231f3acd9cb', "aria-hidden": "true" }, "*"), index.h("span", { key: '2f343b6b4ab4cbd538189cfa404210cf676eefe7', class: "sr-only" }, "required")))));
     }
 };
 EdsInputLabel.style = EdsInputLabelStyle0;
@@ -4168,7 +4182,7 @@ const EdsInputRange = class {
         return this.inputElement;
     }
     render() {
-        return (index.h("div", { key: '51c9adb300d50eecb48de1547c0a0475692aa97b', class: "relative flex flex-col items-start" }, index.h("input", { key: '65ac18497d2a4307d7f5161951b87bb38cdad892', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: this.sliderVal, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input", tabindex: "0", role: "slider", "aria-describedby": `desc_${this.name}`, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.sliderVal, onInput: this.onInput, onChange: this.onChange }), index.h("p", { key: '9b717fce31d2340f3b4bc4b5583e6b1e7764314f', id: `desc_${this.name}`, class: "block f-ui-05 mt-4 text-lighter" }, "Current value: ", this.sliderVal)));
+        return (index.h("div", { key: '3fa2ef579847e66bcacc35afe202192b78a06975', class: "relative flex flex-col items-start" }, index.h("input", { key: '669cc03e44dfa1ae8eae758f82f41939de1be625', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: this.sliderVal, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input", tabindex: "0", role: "slider", "aria-describedby": `desc_${this.name}`, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.sliderVal, onInput: this.onInput, onChange: this.onChange }), index.h("p", { key: 'b3865e1bfacb423da277f4b76dfd0f3294f96cc6', id: `desc_${this.name}`, class: "block f-ui-05 mt-4 text-lighter" }, "Current value: ", this.sliderVal)));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -4237,7 +4251,7 @@ const EdsInputSearch = class {
         return this.inputElement;
     }
     render() {
-        return (index.h("div", { key: '40f0faa26610671e0a89055e5a51fb17ab17c470', class: "relative flex items-center" }, index.h("eds-icon-wrapper", { key: '910f6681ae719608c6f2787de4b3871742dd290a', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), index.h("input", { key: '77534918bd9f2bcd4014e5b201a4f7eb2c0753b4', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", "aria-label": this.placeholder, class: `input pl-36 ${this.decorate}`,
+        return (index.h("div", { key: 'ad7c42baf7c54ede5dca7dd2a6916557f46d33d6', class: "relative flex items-center" }, index.h("eds-icon-wrapper", { key: '6de80c397bae5e541de1ce3c2937bed860b58363', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), index.h("input", { key: '9637c5569c97061fde3735ecb58b6a6f81a10e15', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", "aria-label": this.placeholder, class: `input pl-36 ${this.decorate}`,
             //onInput={this.onInput}
             onChange: this.onChange })));
     }
@@ -4266,12 +4280,12 @@ const EdsInputSelect = class {
         const selectId = this.inputId || this.name;
         const placeholderText = this.placeholder || `Pick from the list`;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : undefined;
-        return (index.h("div", { key: 'f154a5f34a0d09cf6a02e24f13ed9af46532c76c', class: "relative" }, index.h("select", { key: '0982936337bcbec3e2b81f7edc1436506841c782', id: selectId, name: this.name, class: {
+        return (index.h("div", { key: '06be08db809ec9970ca4d7bdbdcdf1c8f2bc8840', class: "relative" }, index.h("select", { key: 'e4319592e6c2f0c71e0dc75ca2d854506bda70bc', id: selectId, name: this.name, class: {
                 input: true,
                 'input-error': this.error,
                 'px-4': true,
                 'py-2': true
-            }, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, index.h("option", { key: '7656fa514dec6b8b05bbb8d02636bf5e2ee8d213', value: "", disabled: true, hidden: true }, placeholderText), this.options.map((opt, index$1) => (index.h("option", { key: index$1, value: opt.value, selected: opt.value === this.value }, opt.label)))), index.h("span", { key: '8464aa5ef3eab675f493b582736c25a7edd88224', class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center" }, index.h("eds-icon-wrapper", { key: '092271b13e4d496a85c55fbb5f1756805cd5d3de', class: "w-20 h-20", icon: "chevron-right" }))));
+            }, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, index.h("option", { key: 'a0ece38948f84a10ea8cd4c0a01b3f8b9730c7ef', value: "", disabled: true, hidden: true }, placeholderText), this.options.map((opt, index$1) => (index.h("option", { key: index$1, value: opt.value, selected: opt.value === this.value }, opt.label)))), index.h("span", { key: '8ce085e43d0ba6340e52b0666dc0a31abbf1a2f9', class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center" }, index.h("eds-icon-wrapper", { key: '8b91b3fa3a819d04ede5d7816fcb2f04e66fd03b', class: "w-20 h-20", icon: "chevron-right" }))));
     }
 };
 
@@ -4503,7 +4517,7 @@ const EdsLink = class {
         const labelClasses = this.hideLabelOnSmallScreen
             ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
             : '';
-        return (index.h("a", { key: '929b7318ec6475113125e40d789476df76e59e38', class: `${classes || ''} ${this.extraClass || ''}`, href: isInteractive ? this.url : undefined, target: this.external && isInteractive ? '_blank' : undefined, rel: this.external && isInteractive ? 'noopener noreferrer' : undefined, tabIndex: isInteractive ? 0 : -1, "aria-label": isIconOnly ? this.ariaLabel || 'Link' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-current": this.current ? 'page' : undefined, role: this.disabled ? 'link' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, index.h("span", { key: '4b965dcb07ebca43577b0dcd9f2d11495caa761a', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && index.h("span", { key: 'a4327fe130fb8c3962096eff3415ad62e19230f4', class: labelClasses }, this.label), this.renderRightIcon())));
+        return (index.h("a", { key: 'bc82c9ea21f98ed71c812c8366ba8368c3ac5bf4', class: `${classes || ''} ${this.extraClass || ''}`, href: isInteractive ? this.url : undefined, target: this.external && isInteractive ? '_blank' : undefined, rel: this.external && isInteractive ? 'noopener noreferrer' : undefined, tabIndex: isInteractive ? 0 : -1, "aria-label": isIconOnly ? this.ariaLabel || 'Link' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-current": this.current ? 'page' : undefined, role: this.disabled ? 'link' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, index.h("span", { key: 'eed89377d27a476a7d7e70a8c40f3100b8089a0b', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && index.h("span", { key: 'c6d09f0c54e092e53350014d6d89b67c35a8be71', class: labelClasses }, this.label), this.renderRightIcon())));
     }
     get el() { return index.getElement(this); }
 };
@@ -4571,7 +4585,7 @@ const EdsLogo = class {
     }
     render() {
         const logoContent = this.getLogo();
-        return (index.h("a", { key: 'fff2a45eb8b41f59026ff7033824484339e3c0a9', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, index.h("div", { key: 'bc13988a739af1c94d5eadbabf558cbbb10927b8', innerHTML: logoContent })));
+        return (index.h("a", { key: 'e5c4e4701d698282dc85561c8c434f0790fb2401', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, index.h("div", { key: '32cc8649fe67b6c4a874b5c1aaa6d4d793b4c4c7', innerHTML: logoContent })));
     }
     get el() { return index.getElement(this); }
 };
@@ -4761,19 +4775,19 @@ const EdsNps = class {
     }
     render() {
         const count = this.max - this.min + 1;
-        const fallback = 0;
-        return (index.h("div", { key: 'd675e1e4ecc306511c0324d0b76ee66237cb6738', class: "eds-nps" }, index.h("eds-input-label", { key: '2eede06f6ee166c36b0cf315a35435c89c3c0ba5', id: "nps-question", name: "nps-question", label: this.question }), index.h("div", { key: '16105649fe6b3b229127c9a741367a6381db774f', role: "group", id: "nps-buttons", "aria-labelledby": "nps-question", class: "grid grid-cols-11", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: count }, (_, i) => {
+        //onst fallback = 0;
+        return (index.h("div", { key: '3831baab086cbf44a3d1511885f15bbab23c9cd2', class: "eds-nps" }, index.h("eds-input-label", { key: 'f9bd8a812d1b65a634dfaa7aae704218dc79468c', id: "nps-question", name: "nps-question", label: this.question }), index.h("div", { key: '398f5225c5b4071c2570a74a9e642f5059bb7813', role: "group", id: "nps-buttons", "aria-labelledby": "nps-question", class: "grid grid-cols-11", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: count }, (_, i) => {
             const val = this.min + i;
             const isSelected = val === this.selectedValue;
-            const tabIndex = this.selectedValue === null ? (i === fallback ? 0 : -1) : isSelected ? 0 : -1;
+            const tabIndex = isSelected ? 0 : -1;
             return (index.h("div", { class: "grid-col-span-1", key: val }, index.h("eds-button", { tabindex: tabIndex, label: `${val}`, "aria-label": `${val}`, intent: isSelected ? 'primary' : 'ghost', "extra-class": "!block !px-0 w-full", triggerClick: () => this.handleClick(val) })));
-        })), index.h("div", { key: 'e7bd70a4f1a8083d9c3e08fdf8de55999a27d92d', class: "flex justify-between mt-8" }, index.h("span", { key: 'ea3fbbac20a162e7cf5f2d5e3321c8bc9297014e', class: "f-ui-04 text-light ml-4" }, this.leftLabel), index.h("span", { key: '3ff59cde0c532587ead8b8a1eaaff6c630e7e7ac', class: "f-ui-04 text-light mr-4" }, this.rightLabel))));
+        })), index.h("div", { key: '0acafaae3f2ce522ffbc245c5733ca509d4bf3c1', class: "flex justify-between mt-8" }, index.h("span", { key: '001e0be00b07ae2e831ea6af0c577a5eeecb9a56', class: "f-ui-04 text-light ml-4" }, this.leftLabel), index.h("span", { key: '99a12d89ea577fb2bb9c34241a2b9f0f254c284a', class: "f-ui-04 text-light mr-4" }, this.rightLabel))));
     }
     get el() { return index.getElement(this); }
 };
 EdsNps.style = EdsNpsStyle0;
 
-const edsPaginationCss = "ul,menu{list-style:none;margin:0;padding:0}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.text-light{color:var(--grey-700)}.text-lightest{color:var(--grey-500)}.mb-28{margin-bottom:1.75rem}.w-full{width:100%}.w-20{width:1.25rem}.h-20{height:1.25rem}.h-28{height:1.75rem}.h-32{height:2rem}.h-36{height:2.25rem}.text-center{text-align:center}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-x-8{-moz-column-gap:0.5rem;column-gap:0.5rem}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.\\!p-8{padding:0.5rem !important}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.hidden{display:none}.gap-1{gap:0.0625rem}.py-4{padding-top:0.25rem;padding-bottom:0.25rem}.transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}@media (min-width: 900px){.lg\\:\\!pr-12{padding-right:0.75rem !important}.lg\\:flex{display:flex}}";
+const edsPaginationCss = "ul,menu{list-style:none;margin:0;padding:0}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.text-light{color:var(--grey-700)}.text-lightest{color:var(--grey-500)}.mb-28{margin-bottom:1.75rem}.w-full{width:100%}.w-20{width:1.25rem}.h-20{height:1.25rem}.h-28{height:1.75rem}.h-32{height:2rem}.h-36{height:2.25rem}.text-center{text-align:center}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-x-8{-moz-column-gap:0.5rem;column-gap:0.5rem}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.\\!p-8{padding:0.5rem !important}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.hidden{display:none}.gap-1{gap:0.0625rem}.py-4{padding-top:0.25rem;padding-bottom:0.25rem}.transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media (min-width: 900px){.lg\\:\\!pr-12{padding-right:0.75rem !important}.lg\\:flex{display:flex}}";
 const EdsPaginationStyle0 = edsPaginationCss;
 
 const EdsPagination = class {
@@ -5004,7 +5018,7 @@ const EdsPagination = class {
         if (newPage !== this.currentPage) {
             this.links = this.links.map((link) => typeof link === 'object' ? Object.assign(Object.assign({}, link), { current: parseInt(link.label) === newPage }) : link);
             const pageChangeEvent = new CustomEvent('page', {
-                detail: newPage,
+                detail: { value: newPage },
                 bubbles: true,
                 composed: true
             });
@@ -5014,7 +5028,7 @@ const EdsPagination = class {
     }
     render() {
         const navigableIndex = -1; // Track index for keyboard navigation
-        return (index.h("div", { key: '753a7e573a09e7fcb66eac9e11e00f690c49543d' }, this.total > 0 && this.mode === 'default' && (index.h("p", { key: '6286d71622614a835d471812a55d5c6bef37a13e', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, index.h("span", { key: 'daa7bfa31e736a40c46641fed88653d51eeabc67', class: "text-light sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (index.h("nav", { "aria-label": "Pagination Navigation", "aria-describedby": this.mode === 'default' ? 'pagination-info' : undefined, onKeyDown: this.handleKeyDown }, index.h("ul", { class: "flex items-center justify-center gap-x-8", role: "list" }, index.h("li", { class: "mr-auto" }, this.useButtons ? (index.h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, index.h("eds-button", { label: this.prevLabel, disabled: this.mode === 'navigator' ? !this.prevUrl : this.isFirstPage(), "aria-label": "Go to previous page", icon: "chevron-left", "icon-pos": "left", size: "small", "icon-small": "true", intent: "ghost", "extra-class": "!p-8 lg:!pr-12 pagination-button", onClick: (event) => {
+        return (index.h("div", { key: '9379c40daaca176e67fb59918f1ca387cb4759b9' }, this.total > 0 && this.mode === 'default' && (index.h("p", { key: 'd09f7f6b7de136987d5b52564bc60afb3775299a', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, index.h("span", { key: '4af8f097a79c8fb0495838f06424f43e5e5dcddc', class: "text-light sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (index.h("nav", { "aria-label": "Pagination Navigation", "aria-describedby": this.mode === 'default' ? 'pagination-info' : undefined, onKeyDown: this.handleKeyDown }, index.h("ul", { class: "flex items-center justify-center gap-x-8", role: "list" }, index.h("li", { class: "mr-auto" }, this.useButtons ? (index.h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, index.h("eds-button", { label: this.prevLabel, disabled: this.mode === 'navigator' ? !this.prevUrl : this.isFirstPage(), "aria-label": "Go to previous page", icon: "chevron-left", "icon-pos": "left", size: "small", "icon-small": "true", intent: "ghost", "extra-class": "!p-8 lg:!pr-12 pagination-button", onClick: (event) => {
                 if (this.mode === 'default' && !this.isFirstPage()) {
                     this.handlePageClick(event, (this.currentPage || 1) - 1);
                 }
@@ -5107,12 +5121,12 @@ const EdsRating = class {
         this.onSelect(next);
     }
     render() {
-        return (index.h("div", { key: 'bd72970d86f2dbb21d58671fc85feea3011749b3', id: "rating-buttons", role: "radiogroup", "aria-labelledby": "rating", class: "stars flex space-x-1 my-8", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: this.ratingCount }, (_, index$1) => {
+        return (index.h("div", { key: 'a7fc18897f2901f60432432899da18861e76edf6', id: "rating-buttons", role: "group", "aria-labelledby": "rating", class: "stars flex space-x-1 my-8", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: this.ratingCount }, (_, index$1) => {
             const starRating = index$1 + 1;
             const isSelected = starRating <= this.selectedRating;
             // Use the mapping text if available; otherwise, fall back to a generic label.
             const checked = this.selectedRating === starRating;
-            return (index.h("eds-button", { ref: (el) => (this.buttonRefs[index$1] = el), icon: this.ratingType, role: "radio", "aria-checked": checked, "aria-label": `${starRating} ${this.ratingType}${starRating > 1 ? 's' : ''}`, onClick: () => this.onSelect(starRating), tabIndex: checked || (this.selectedRating === 0 && index$1 === 0) ? 0 : -1, intent: isSelected ? 'primary' : 'ghost', size: "large", "extra-class": "p-2" // Optional padding or styling for the star button
+            return (index.h("eds-button", { ref: (el) => (this.buttonRefs[index$1] = el), icon: this.ratingType, "aria-label": `${starRating} ${this.ratingType}${starRating > 1 ? 's' : ''}`, onClick: () => this.onSelect(starRating), tabIndex: checked || (this.selectedRating === 0 && index$1 === 0) ? 0 : -1, intent: isSelected ? 'primary' : 'ghost', size: "large", "extra-class": "p-2" // Optional padding or styling for the star button
             }));
         })));
     }
@@ -5120,40 +5134,60 @@ const EdsRating = class {
 };
 EdsRating.style = EdsRatingStyle0;
 
-const edsStepsCss = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.my-16{margin-top:1rem;margin-bottom:1rem}.mb-28{margin-bottom:1.75rem}";
+const edsStepsCss = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:-2px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4,.steps h5{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before,.steps h5::before{content:counter(step);position:absolute;left:-40px;top:-2px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.my-16{margin-top:1rem;margin-bottom:1rem}.mt-16{margin-top:1rem}.mb-28{margin-bottom:1.75rem}.ml-8{margin-left:0.5rem}.gap-y-16{row-gap:1rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.cursor-pointer{cursor:pointer}";
 const EdsStepsStyle0 = edsStepsCss;
 
 const EdsSteps = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.step = index.createEvent(this, "step", 7);
+        this.finished = index.createEvent(this, "finished", 7);
+        this.next = index.createEvent(this, "next", 7);
+        this.back = index.createEvent(this, "back", 7);
         this.handleNext = () => {
-            this.activeStep = this.activeStep + 1;
-            if (this.activeStep < this.parsedSteps.length) {
-                this.step.emit(this.activeStep);
+            const lastIndex = this.parsedSteps.length - 1;
+            if (this.activeStep >= lastIndex) {
+                this.finished.emit();
+                return;
+            }
+            const target = this.activeStep + 1;
+            this.next.emit(target);
+            if (this.isNextDisabledFor(this.activeStep)) {
+                return;
+            } // block advance only if current is disabled
+            this.activeStep = target;
+            this.step.emit(this.activeStep);
+            // 2) if using the boolean form, clear it when moving away from a step
+            if (!Array.isArray(this.disableNext)) {
+                this.disableNext = false;
             }
         };
         this.handleBack = () => {
             if (this.activeStep > 0) {
-                this.activeStep = this.activeStep - 1;
+                const target = this.activeStep - 1;
+                this.back.emit(target);
+                this.activeStep = target;
                 this.step.emit(this.activeStep);
+                // also clear boolean form on back
+                if (!Array.isArray(this.disableNext)) {
+                    this.disableNext = false;
+                }
             }
         };
         this.steps = [];
         this.type = 'static';
+        this.nextLabel = 'Next';
+        this.backLabel = 'Back';
+        this.finishLabel = 'Finish';
+        this.disableNext = false;
+        this.headingLevel = 'h4';
         this.activeStep = 0;
     }
-    /**
-     * Lifecycle method that runs when the component has fully loaded.
-     * It emits a custom event for each `eds-button` element contained within the breadcrumb.
-     */
     componentDidLoad() {
         var _a;
         if (this.type === 'linear') {
             const btns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-button');
-            btns === null || btns === void 0 ? void 0 : btns.forEach((btn) => {
-                this.emitContext(btn);
-            });
+            btns === null || btns === void 0 ? void 0 : btns.forEach((btn) => this.emitContext(btn));
         }
     }
     activeStepChanged(newValue) {
@@ -5161,19 +5195,10 @@ const EdsSteps = class {
             var _a;
             const activeStepContainer = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.step')[newValue];
             if (activeStepContainer) {
-                const btns = activeStepContainer.querySelectorAll('eds-button');
-                btns.forEach((btn) => {
-                    this.emitContext(btn);
-                });
+                activeStepContainer.querySelectorAll('eds-button').forEach((btn) => this.emitContext(btn));
             }
         }, 50);
     }
-    /**
-     * Emits a custom event called `parentContext` for a given link element.
-     * This event provides context information about the breadcrumb component.
-     *
-     * @param linkElement - The link element to which the event will be dispatched.
-     */
     emitContext(linkElement) {
         const event = new CustomEvent('parentContext', {
             detail: {
@@ -5183,26 +5208,29 @@ const EdsSteps = class {
         });
         linkElement.dispatchEvent(event);
     }
-    handleStepClick(index) {
-        this.step.emit(index);
-        // In linear mode, update the active step on header click.
-        if (this.type === 'linear') {
-            this.activeStep = index;
-        }
-    }
-    /**
-     * Parse the JSON string into an array of steps.
-     */
     get parsedSteps() {
         return sharedUtils.parseData(this.steps);
     }
+    isNextDisabledFor(index) {
+        return Array.isArray(this.disableNext)
+            ? !!this.disableNext[index] // per-step
+            : index === this.activeStep && !!this.disableNext; // only active step
+    }
+    /** Render the semantic heading element */
+    renderHeading(title) {
+        const Tag = this.headingLevel;
+        return index.h(Tag, null, title);
+    }
     render() {
         const steps = this.parsedSteps;
         if (this.type === 'linear') {
-            return (index.h("div", null, index.h("div", { class: "steps" }, steps.map((step, index$1) => (index.h("div", { class: "step mb-28", key: index$1 }, index.h("h3", { onClick: () => this.handleStepClick(index$1) }, step.title), this.activeStep === index$1 && (index.h("div", { class: "content" }, index.h("slot", { name: `step-${index$1}` }, index.h("div", { class: index$1 === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content })), index.h("eds-button", { label: index$1 === steps.length - 1 ? 'Finish' : 'Continue', intent: "primary", class: "next-btn", onClick: this.handleNext }), index.h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index$1 === 0, "extra-class": index$1 === 0 ? 'hidden' : 'ml-8 block' })))))))));
+            return (index.h("div", { class: "steps" }, steps.map((step, index$1) => {
+                const isLast = index$1 === steps.length - 1;
+                return (index.h("div", { class: "step mb-28", key: index$1 }, this.renderHeading(step.title), this.activeStep === index$1 && (index.h("div", { class: "content grid gap-y-16" }, index.h("slot", { name: `step-${index$1}` }, index.h("div", { class: isLast ? 'f-body-02 text-lighter' : 'f-body-02 text-lighter', innerHTML: step.content })), index.h("div", { class: "flex items-center mt-16" }, index.h("eds-button", { label: this.backLabel, intent: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index$1 === 0, class: index$1 === 0 ? 'hidden' : 'block', size: "small" }), index.h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.isNextDisabledFor(index$1), size: "small", class: "ml-8" })), index.h("slot", { name: `actions-${index$1}` })))));
+            })));
         }
-        // Static mode: show all steps with their content, no navigation buttons.
-        return (index.h("div", { class: "steps" }, steps.map((step, index$1) => (index.h("div", { class: "step mb-28", key: index$1 }, index.h("h3", null, step.title), index.h("div", { class: "content" }, index.h("slot", { name: `step-${index$1}` }, index.h("div", { class: index$1 === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content }))))))));
+        // Static: no navigation buttons
+        return (index.h("div", { class: "steps" }, steps.map((step, index$1) => (index.h("div", { class: "step mb-28", key: index$1 }, this.renderHeading(step.title), index.h("div", { class: "content" }, index.h("slot", { name: `step-${index$1}` }, index.h("div", { class: index$1 === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content }))))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -5211,22 +5239,36 @@ const EdsSteps = class {
 };
 EdsSteps.style = EdsStepsStyle0;
 
-const edsStepsV2Css = "h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}.steps{position:sticky;margin-left:16px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.steps-img-placeholder{width:100%;height:200px;background:linear-gradient(to bottom, #9CE142, #00C959, #00A595);}.bg-\\[\\#00A595\\]{--tw-bg-opacity:1;background-color:rgb(0 165 149 / var(--tw-bg-opacity))}.relative{position:relative}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.mt-16{margin-top:1rem}.my-16{margin-top:1rem;margin-bottom:1rem}.mb-12{margin-bottom:0.75rem}.last\\:mb-0:last-child{margin-bottom:0rem}.last\\:mt-16:last-child{margin-top:1rem}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:16px}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.p-24{padding:1.5rem}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.top-2{top:0.125rem}.bottom-2{bottom:0.125rem}.left-2{left:0.125rem}.right-2{right:0.125rem}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.overflow-hidden{overflow:hidden}.space-y-8{--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-16{--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}";
+const edsStepsV2Css = ".steps{position:sticky;margin-left:16px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:-2px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4,.steps h5{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before,.steps h5::before{content:counter(step);position:absolute;left:-40px;top:-2px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.steps-img-placeholder{width:100%;height:200px;background:linear-gradient(to bottom, #9CE142, #00C959, #00A595);}.bg-\\[\\#00A595\\]{--tw-bg-opacity:1;background-color:rgb(0 165 149 / var(--tw-bg-opacity))}.relative{position:relative}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.mt-16{margin-top:1rem}.my-16{margin-top:1rem;margin-bottom:1rem}.mb-12{margin-bottom:0.75rem}.last\\:mb-0:last-child{margin-bottom:0rem}.last\\:mt-16:last-child{margin-top:1rem}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:16px}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.p-24{padding:1.5rem}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.top-2{top:0.125rem}.bottom-2{bottom:0.125rem}.left-2{left:0.125rem}.right-2{right:0.125rem}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.overflow-hidden{overflow:hidden}.space-y-8{--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-16{--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.ml-8{margin-left:0.5rem}.gap-y-16{row-gap:1rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.px-8{padding-left:0.5rem;padding-right:0.5rem}.pb-20{padding-bottom:1.25rem}";
 const EdsStepsV2Style0 = edsStepsV2Css;
 
 const EdsStepsV2 = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.step = index.createEvent(this, "step", 7);
+        this.finished = index.createEvent(this, "finished", 7);
+        this.next = index.createEvent(this, "next", 7);
+        this.back = index.createEvent(this, "back", 7);
         this.handleNext = () => {
-            this.activeStep = this.activeStep + 1;
-            if (this.activeStep < this.parsedSteps.length) {
+            const lastIndex = this.parsedSteps.length - 1;
+            if (this.activeStep >= lastIndex) {
+                // Finish
+                this.finished.emit();
+                return;
+            }
+            // Next
+            const target = this.activeStep + 1;
+            this.next.emit(target);
+            if (!this.disableNext) {
+                this.activeStep = target;
                 this.step.emit(this.activeStep);
             }
         };
         this.handleBack = () => {
             if (this.activeStep > 0) {
-                this.activeStep = this.activeStep - 1;
+                const target = this.activeStep - 1;
+                this.back.emit(target);
+                this.activeStep = target;
                 this.step.emit(this.activeStep);
             }
         };
@@ -5236,6 +5278,11 @@ const EdsStepsV2 = class {
         this.imageWidth = undefined;
         this.bg = true;
         this.message = undefined;
+        this.nextLabel = 'Next';
+        this.backLabel = 'Back';
+        this.finishLabel = 'Finish';
+        this.disableNext = false;
+        this.headingLevel = 'h4';
         this.activeStep = 0;
     }
     componentDidLoad() {
@@ -5274,24 +5321,22 @@ const EdsStepsV2 = class {
             'border-softer effect-focus-within relative rounded-lg border-2'
         ].join(' ');
     }
-    handleStepClick(index) {
-        this.step.emit(index);
-        // In linear mode, update the active step on header click.
-        if (this.type === 'linear') {
-            this.activeStep = index;
-        }
-    }
     /**
      * Parses the steps property into an array of Step objects.
      */
     get parsedSteps() {
         return sharedUtils.parseData(this.steps);
     }
+    /** Render the semantic heading element */
+    renderHeading(title) {
+        const Tag = this.headingLevel;
+        return index.h(Tag, null, title);
+    }
     render() {
         const steps = this.parsedSteps;
-        return (index.h("div", { key: 'bbcec2dd9a5096eb0cecf0d413892e5708822f52', class: this.articleClasses() }, this.imageSrc ? (index.h("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, index.h("eds-img", { src: this.imageSrc, width: this.imageWidth, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (index.h("div", { class: "w-full bg-[#00A595] rounded-t-lg border-2" }, index.h("div", { class: "p-24" }, index.h("span", { class: "text-inverse f-heading-04 " }, this.message))))), index.h("div", { key: 'db0618aad7d5986fcb0889f1c439be73f83a00df', class: "p-8" }, this.type === 'linear' ? (index.h("div", { class: "steps" }, steps.map((step, index$1) => (index.h("div", { class: index$1 === 0 ? 'step' : 'step space-y-16', key: index$1 }, index.h("h3", { onClick: () => this.handleStepClick(index$1) }, step.title), this.activeStep === index$1 && (index.h("div", { class: "content" }, index.h("slot", { name: `step-${index$1}` }, index.h("div", { class: index$1 === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content })), index.h("eds-button", { label: index$1 === steps.length - 1 ? 'Finish' : 'Continue', intent: "primary", class: "next-btn", onClick: this.handleNext }), index.h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index$1 === 0, "extra-class": index$1 === 0 ? 'hidden' : 'ml-8 block' })))))))) : (
+        return (index.h("div", { key: '1ff00f17a85e9a3a9d7bef23694560acd77e7ee4', class: this.articleClasses() }, this.imageSrc ? (index.h("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, index.h("eds-img", { src: this.imageSrc, width: this.imageWidth, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (index.h("div", { class: "w-full bg-[#00A595] rounded-t-lg border-2" }, index.h("div", { class: "p-24" }, index.h("span", { class: "text-inverse f-heading-04 " }, this.message))))), index.h("div", { key: 'a0328e80df5d9447cfa5378eb9e45925f1f68c69', class: "pb-20 px-8" }, this.type === 'linear' ? (index.h("div", { class: "steps" }, steps.map((step, index$1) => (index.h("div", { class: index$1 === 0 ? 'step' : 'step space-y-16', key: index$1 }, this.renderHeading(step.title), this.activeStep === index$1 && (index.h("div", { class: "content grid gap-y-16" }, index.h("slot", { name: `step-${index$1}` }, index.h("div", { class: index$1 === steps.length - 1 ? 'f-body-02 text-lighter' : 'f-body-02 text-lighter', innerHTML: step.content })), index.h("div", { class: "flex items-center" }, index.h("eds-button", { label: this.backLabel, intent: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index$1 === 0, class: index$1 === 0 ? 'hidden' : 'block', size: "small" }), index.h("eds-button", { label: index$1 === steps.length - 1 ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.disableNext, size: "small", class: "ml-8" }))))))))) : (
         // Static mode: show all steps with their content.
-        index.h("div", { class: "steps space-y-8" }, steps.map((step, index$1) => (index.h("div", { class: "step", key: index$1 }, index.h("h3", { onClick: () => this.handleStepClick(index$1) }, step.title), index.h("div", { class: "content" }, index.h("slot", { name: `step-${index$1}` }, index.h("div", { class: index$1 === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content })))))))))));
+        index.h("div", { class: "steps space-y-8" }, steps.map((step, index$1) => (index.h("div", { class: "step", key: index$1 }, this.renderHeading(step.title), index.h("div", { class: "content" }, index.h("slot", { name: `step-${index$1}` }, index.h("div", { class: index$1 === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter', innerHTML: step.content })))))))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -5350,17 +5395,17 @@ const EdsSwitch = class {
                     : this.labelOff
                 : 'Toggle switch'
             : undefined;
-        return (index.h("div", { key: 'f4c99a2ec360af6030de11698bab82833b3f415f', class: "switch-container" }, this.labelOff && (index.h("span", { key: '8bb8d063e744c194c0d44a0c371ae8224f9611cb', id: `${switchId}-off`, class: "switch-label switch-label--off mr-8" }, this.labelOff)), index.h("button", { key: 'ccc49c8ac6f639707c90822e24f3ae3ab8f2c26c', id: switchId, tabindex: this.disabled ? '-1' : '0', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-labelledby": labelledBy.length > 0 ? labelledBy.join(' ') : undefined, "aria-label": accessibleLabel, class: {
+        return (index.h("div", { key: '95a833cbe8e736d7e747f6fdd8504dd8c169ea60', class: "switch-container" }, this.labelOff && (index.h("span", { key: 'a88de63c35409ab244a6cba5bd70a10728a08b2a', id: `${switchId}-off`, class: "switch-label switch-label--off mr-8" }, this.labelOff)), index.h("button", { key: 'd6573f05164f2b57063e9a97c3b983f32700bd7a', id: switchId, tabindex: this.disabled ? '-1' : '0', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-labelledby": labelledBy.length > 0 ? labelledBy.join(' ') : undefined, "aria-label": accessibleLabel, class: {
                 switch: true,
                 'switch--checked': this.checked,
                 'switch--disabled': this.disabled
-            }, onClick: this.toggleSwitch, onKeyDown: this.handleKeyDown, disabled: this.disabled }, index.h("span", { key: '2275930bc9909c0a95c6c10e28f715fe1afe9294', class: "switch-handle" })), this.labelOn && (index.h("span", { key: 'd789fd15943c1fadf1f87c55059261eaf5e05a8f', id: `${switchId}-on`, class: "switch-label switch-label--on ml-8" }, this.labelOn))));
+            }, onClick: this.toggleSwitch, onKeyDown: this.handleKeyDown, disabled: this.disabled }, index.h("span", { key: '35e6da3bb76779bfaad04d8990dec419524fb543', class: "switch-handle" })), this.labelOn && (index.h("span", { key: 'b14243d9d45dbdddb9473ad2c5696e07be9831d3', id: `${switchId}-on`, class: "switch-label switch-label--on ml-8" }, this.labelOn))));
     }
     get el() { return index.getElement(this); }
 };
 EdsSwitch.style = EdsSwitchStyle0;
 
-const edsTableCss = "table{text-indent:0;border-color:inherit;border-collapse:collapse;}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.pt-32{padding-top:2rem}.pt-40{padding-top:2.5rem}.pt-48{padding-top:3rem}.pb-28{padding-bottom:1.75rem}.pb-60{padding-bottom:3.75rem}.mt-20{margin-top:1.25rem}.mt-28{margin-top:1.75rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.overflow-x-auto{overflow-x:auto}.mt-6{margin-top:0.375rem}.p-0{padding:0rem}.m-0{margin:0rem}.border{border-width:1px}.border-softer{border:1px solid rgba(0, 0, 0, .1)}.even\\:bg-inverse-softer:nth-child(even){background-color:rgba(255, 255, 255, .15)}.px-8{padding-left:0.5rem;padding-right:0.5rem}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.break-words{overflow-wrap:anywhere}";
+const edsTableCss = "table{text-indent:0;border-color:inherit;border-collapse:collapse;}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.pt-32{padding-top:2rem}.pt-40{padding-top:2.5rem}.pt-48{padding-top:3rem}.pb-28{padding-bottom:1.75rem}.pb-60{padding-bottom:3.75rem}.mt-20{margin-top:1.25rem}.mt-28{margin-top:1.75rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.overflow-x-auto{overflow-x:auto}.mt-6{margin-top:0.375rem}.p-0{padding:0rem}.p-4{padding:0.25rem}.m-0{margin:0rem}.border{border-width:1px}.border-softer{border:1px solid rgba(0, 0, 0, .1)}.even\\:bg-inverse-softer:nth-child(even){background-color:rgba(255, 255, 255, .15)}.px-8{padding-left:0.5rem;padding-right:0.5rem}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.break-words{overflow-wrap:anywhere}";
 const EdsTableStyle0 = edsTableCss;
 
 const EdsTable = class {
@@ -5488,7 +5533,7 @@ const EdsTable = class {
         }
         const paginationEl = this.hostEl.shadowRoot.querySelector('eds-pagination');
         if (paginationEl && !paginationEl.hasAttribute('listener-attached')) {
-            paginationEl.addEventListener('page', (event) => this.handlePageChange(event.detail));
+            paginationEl.addEventListener('page', (event) => this.handlePageChange(event.detail.value));
             paginationEl.setAttribute('listener-attached', 'true');
         }
     }
@@ -5537,7 +5582,9 @@ const EdsTable = class {
             return (index.h("eds-input-field", { name: `chc-${actionName}`, label: act.label, type: "checkbox", checked: checked, onChange: (e) => this.emitAction(act.name, row, e.target.checked) }));
         }
         // Let all action buttons be focusable naturally
-        return (index.h("eds-button", { label: act.label, icon: act.icon, pill: true, size: "small", intent: "ghost", tabIndex: 0, onClick: () => this.emitAction(act.name, row) }));
+        const showLabel = act.showLabel === true;
+        const btn = (index.h("eds-button", { icon: act.icon, label: showLabel ? act.label : null, iconPos: "left", pill: true, size: "small", intent: "ghost", tabIndex: 0, onClick: () => this.emitAction(act.name, row) }));
+        return showLabel ? btn : index.h("eds-tooltip", { content: act.label }, btn);
     }
     emitAction(actionName, row, checked) {
         analytics.sendAnalytics({
@@ -5583,7 +5630,7 @@ const EdsTable = class {
         const columnWidth = visibleColumnsCount > 0 ? Math.floor((currentContainerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
         const paginatedRows = this.getPaginatedRows();
         const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
-        return (index.h("div", { key: '87e7cc3c87618ede91bb51d7a07cd597a438d6c5' }, this.searchEnabled && (index.h("div", { key: '6b77700a913e272eef4c932d40c5c5d001ff6b5c' }, index.h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))), index.h("div", { key: '6f2ffc7a3ba2cc8e8194670a7ecb9e237f7dc60a', class: "mt-20" }, index.h("table", { key: '0227d3029f30ab9928cd01ba8dc2eccde2073f47', class: "block overflow-x-auto mt-6 p-0" }, index.h("thead", { key: 'c1f844d8413b596d5ca07d6b79ebd36c8a17f51f' }, index.h("tr", { key: 'caadaaf66314e3ea7d47a748b6e899389a7e2d55', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
+        return (index.h("div", { key: '67cfdabc741af13585699e43e67ba0d204a60706' }, this.searchEnabled && (index.h("div", { key: '208240b9832f9b2e9645cc9d7315a43bd47b54b3' }, index.h("eds-input-field", { key: 1, icon: "search", name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))), index.h("div", { key: '893924497d1535b7d29bc0b64ba48f4a3e366c43', class: "mt-20" }, index.h("table", { key: 'a019fa4f2886d4c2aa4bddc88dc7b6d7aa63fdcb', class: "block overflow-x-auto mt-6 p-0" }, index.h("thead", { key: 'a6360fea59c605878e443a23cf45d0f8a9644140' }, index.h("tr", { key: '09702e8838f32c52bf6314b59ec598c6fa55d609', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
             var _a;
             if (col === 'actions') {
                 return (index.h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }));
@@ -5592,7 +5639,7 @@ const EdsTable = class {
                 return (index.h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.capitalize(col)));
             }
             return null;
-        }))), index.h("tbody", { key: 'da9286063f16a5c346ce8854361cb15573166a19' }, paginatedRows.map((row) => (index.h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
+        }))), index.h("tbody", { key: '5cdb3697e6c84921a823b40714a497f02c82e360' }, paginatedRows.map((row) => (index.h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
             var _a;
             if (col === 'actions') {
                 return (index.h("td", { class: "text-center border border-softer m-0 f-ui-02 break-words actions-cell", style: { minWidth: `${columnWidth - 4}px` } }, index.h("div", { role: "toolbar", "aria-label": "Row actions", onKeyDown: this.onActionKeyDown, style: {
@@ -5607,7 +5654,7 @@ const EdsTable = class {
                 return (index.h("td", { class: "text-center border border-softer m-0 py-8 f-ui-2 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.renderCell(row[col], col)));
             }
             return null;
-        }))))))), this.shouldEnablePagination() && (index.h("div", { key: 'b7e7991225cf9fb16ca882dc42c7adead202aac5', class: "mt-20" }, index.h("eds-pagination", { key: '011f209f89300357e6052ee4d118f353419d5a45', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+        }))))))), this.shouldEnablePagination() && (index.h("div", { key: 'f5af2cd6e65c3ed55ec2810ec4b1e3f891866271', class: "mt-20" }, index.h("eds-pagination", { key: '32965384707df502fb197712c73bb290e38ce040', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     get hostEl() { return index.getElement(this); }
     static get watchers() { return {
@@ -5782,12 +5829,12 @@ const EdsTabs = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'e3bd802f08f460d5f3e89860669fefe2a8006e59', id: `${this.identifier}` }, index.h("div", { key: 'bcbd4afb8febec0520075c8e34269f184e2d9738', class: "scroller-x overflow-x-auto relative z-[1] mx-auto px-16 pt-8 lg:px-28 after:border-soft before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, index.h("nav", { key: '32e93b3ee6831918fd863fb23f1a5af1ae979201', role: "tablist", ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index$1) => {
+        return (index.h("div", { key: '7cb51cf475d45ee3e43877ee4d42565f5930613a', id: `${this.identifier}` }, index.h("div", { key: '4f3c6d23f9084f07e5728b72310b96798d20b724', class: "scroller-x overflow-x-auto relative z-[1] mx-auto px-16 pt-8 lg:px-28 after:border-soft before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, index.h("nav", { key: '4d55e72e9f437cef8be06931445f619196a973a7', role: "tablist", ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index$1) => {
             const TabComponent = 'button';
             const tabProps = this.getTabOptions(tab.active, index$1);
             const isActive = index$1 === this.activeIndex;
             return (index.h(TabComponent, Object.assign({}, tabProps, { type: "button", role: "tab", "aria-selected": tab.active ? 'true' : 'false', tabIndex: isActive ? 0 : -1, "aria-label": tab.ariaLabel || tab.label, "aria-controls": `panel-${index$1}`, id: `tab-${index$1}`, ref: (el) => this.setTabRef(el, index$1), onClick: () => this.handleTabClick(index$1, tab.label, true), onKeyDown: (e) => this.onKeyDown(e, index$1) }), tab.label || tab.ariaLabel));
-        }))), index.h("div", { key: 'ffe610574d342933121cbaca9bcb8fb483fde60b', class: "tab-panels" }, this.parsedTabs.map((_, index$1) => (index.h("div", { role: "tabpanel", id: `panel-${index$1}`, "aria-labelledby": `tab-${index$1}`, hidden: index$1 !== this.activeIndex, tabIndex: index$1 === this.activeIndex ? 0 : -1, class: "effect-focus" }, index.h("slot", { name: `panel-${index$1}` })))))));
+        }))), index.h("div", { key: 'e75f877da39c25e912853fea5dc2438fc15c67b5', class: "tab-panels" }, this.parsedTabs.map((_, index$1) => (index.h("div", { role: "tabpanel", id: `panel-${index$1}`, "aria-labelledby": `tab-${index$1}`, hidden: index$1 !== this.activeIndex, tabIndex: index$1 === this.activeIndex ? 0 : -1, class: "effect-focus" }, index.h("slot", { name: `panel-${index$1}` })))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -5832,7 +5879,7 @@ const EdsTag = class {
     }
     render() {
         const classes = tagStyles({ intent: this.intent, size: this.size });
-        return index.h("span", { key: '939fafa4bc525b747956931f49b27e6125ecbb34', class: classes }, this.label);
+        return index.h("span", { key: 'e3fe041e8783a7d1bb5a281eb154e3c07851da38', class: classes }, this.label);
     }
 };
 EdsTag.style = EdsTagStyle0;
@@ -5908,13 +5955,48 @@ const EdsToast = class {
 };
 EdsToast.style = EdsToastStyle0;
 
+const edsTooltipCss = ".relative{position:relative}.absolute{position:absolute}.inline-block{display:inline-block}.rounded-xs{border-radius:4px}.bg-strongest{background-color:var(--black)}.text-inverse{color:var(--white)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.pointer-events-none{pointer-events:none}.left-1\\/2{left:50%}.z-10{z-index:10}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.whitespace-nowrap{white-space:nowrap}.p-6{padding:0.375rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.top-full{top:100%}.bottom-full{bottom:100%}.right-full{right:100%}.left-full{left:100%}.mr-2{margin-right:0.125rem}.ml-2{margin-left:0.125rem}.mt-2{margin-top:0.125rem}.mb-2{margin-bottom:0.125rem}.opacity-0{opacity:0}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-150{transition-duration:150ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.group:hover .group-hover\\:opacity-100{opacity:1}.max-w-\\[20rem\\]{max-width:20rem}.whitespace-normal{white-space:normal}.break-words{overflow-wrap:break-word}.w-full{width:100%}";
+const EdsTooltipStyle0 = edsTooltipCss;
+
+const EdsTooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.content = undefined;
+        this.position = 'top';
+    }
+    /** fire analytics on every hover */
+    handleHover() {
+        analytics.sendAnalytics({
+            category: 'ui-component',
+            tag: this.el.tagName.toLowerCase(),
+            name: this.content.toLowerCase(),
+            action: 'hover'
+        });
+    }
+    render() {
+        const positionClass = this.position === 'bottom' ? 'top-full mt-2' : 'bottom-full mb-2';
+        return (index.h("div", { key: '135df7d17db03fb3bb7bbcc50ad9ee5d84a2bca2', class: "relative w-full inline-block group" }, index.h("slot", { key: '4c12874eeb942e33f9c62ea6f1077fd051f683b6' }), index.h("div", { key: '8bb7173d16889b2ae550dc0269d9e47e1dae00ac', class: `absolute ${positionClass}
+            rounded-xs bg-strongest text-inverse 
+            f-ui-03-light pointer-events-none 
+            z-10 px-4 opacity-0 transition-opacity duration-150 ease-in-out
+            group-hover:opacity-100 whitespace-normal break-words`, role: "tooltip" }, this.content)));
+    }
+    get el() { return index.getElement(this); }
+};
+EdsTooltip.style = EdsTooltipStyle0;
+
 const edsUserCss = "hr,p{margin:0}.block{display:block}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.text-default{color:var(--black)}.min-w-\\[280px\\]{min-width:280px}.p-8{padding:0.5rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.gap-y-8{row-gap:0.5rem}.pb-16{padding-bottom:1rem}.border-b-2{border-bottom-width:2px}.border-softer{border-color:rgba(0, 0, 0, .1 )}.max-w-full{max-width:100%}.w-full{width:100%}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.text-light{color:var(--grey-700)}.mt-4{margin-top:0.25rem}.mt-16{margin-top:1rem}";
 const EdsUserStyle0 = edsUserCss;
 
 const EdsUser = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.handleDropdown = (e) => {
+            this.expanded = e.detail.expanded;
+        };
         this.user = undefined;
+        this.intent = 'tertiary';
+        this.expanded = false;
     }
     /**
      * Helper getter to ensure we work with a User object.
@@ -5940,7 +6022,8 @@ const EdsUser = class {
     }
     render() {
         const user = this.parsedUser;
-        return (index.h("div", { key: '8a1f10cc85d8e2707042c85bc597b76fb2d25da4', class: "block" }, index.h("div", { key: 'a744de3d113920b8ff0d01ce273672b2bff57c97', class: "flex items-center" }, index.h("eds-dropdown", { key: 'e9230372d79936a785050ebb3e41f40e73282a57', label: `Hi, ${user.preferred_username}`, intent: "tertiary", "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "chevron-down", class: "text-default" }, index.h("div", { key: '7d4bd0ee0985c840a18764cac784726ff1c987fb', class: "min-w-[280px] p-8" }, index.h("div", { key: '603d6807988dd79cd4e7827918ff8932d8463fc3', class: "flex gap-x-16" }, index.h("eds-avatar", { key: '65ba89139cb6e3b6cb90c2072eb68cc7dc1da49c', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "grey" }), index.h("div", { key: 'df35b758918ebccbdfe6630bd356e647522404e1', class: "max-w-full" }, user.name && index.h("p", { key: '7174f34445bb1a0b77a3c1b893421bd104832485', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && index.h("p", { key: '72d853f5014c03803dce7aa0a74d96847ed8c875', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && index.h("p", { key: 'e406e2f3ca8504220ee9586a1d176c15c7236502', class: "f-ui-03-light text-light mt-4" }, user.email))), index.h("div", { key: '8fd3b42ab4eb3d1d70a0b827e3a03af8503c55d1', class: "text-default flex w-full flex-col gap-y-8" }, index.h("slot", { key: '6a477155c256543b7793947d52feb3f5abb0df6e' })))))));
+        const iconName = this.expanded ? 'chevron-down' : 'chevron-right';
+        return (index.h("div", { key: '965387104c4bd6cd3223c08f16d90146c098594c', class: "block" }, index.h("div", { key: '37fe5539cb058112ebe0d910439acb55b5abccd8', class: "flex items-center" }, index.h("eds-dropdown", { key: '17afc8dbae191aec1202ba04d85c41ed656a8c5b', label: `Hi, ${user.preferred_username}`, intent: this.intent, "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: iconName, class: "text-default", onDropdown: this.handleDropdown }, index.h("div", { key: '0228c1728b0b73e2504d2608339f9be408be09b8', class: "min-w-[280px] p-8" }, index.h("div", { key: 'b83148ff8249bde91842b036da5506f9f5cbb145', class: "flex gap-x-16" }, index.h("eds-avatar", { key: '243a05bae2e4e592dc386b1897d824232d0bcfa6', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "black" }), index.h("div", { key: '6938f54621aa89e61aa6639e8c88af4e262e0fec', class: "max-w-full" }, user.name && index.h("p", { key: '224ce5cf6819a9dd0c3794410a94da30cc4213bf', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && index.h("p", { key: '096ac761149763ef4305ef5e9bf1f4b593a0fe4f', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && index.h("p", { key: '79f7da3c6c5efc1f521991c403184cf050b3d2e7', class: "f-ui-03-light text-light mt-4" }, user.email))), index.h("div", { key: '52ce98bcc290902605ebd427ee8ab72ac9af3d62', class: "text-default flex w-full flex-col gap-y-8" }, index.h("slot", { key: '88d1b250c434830347e0eb813214382ce899c485' })))))));
     }
     get hostEl() { return index.getElement(this); }
 };
@@ -5978,4 +6061,5 @@ exports.eds_table = EdsTable;
 exports.eds_tabs = EdsTabs;
 exports.eds_tag = EdsTag;
 exports.eds_toast = EdsToast;
+exports.eds_tooltip = EdsTooltip;
 exports.eds_user = EdsUser;