@ebrains/components 2.3.0 → 2.4.0

package/dist/esm/{eds-accordion_36.entry.js → eds-accordion_37.entry.js}

@@ -75,10 +75,10 @@ const EdsAccordion = class {
      * Adjusts styles based on `switchBg`, `tiny`, `clampText`, and other props.
      */
     render() {
-        return (h("div", { key: 'd162692cb9a99b6a1b9b736b828214c9d425046e', ref: (el) => (this.wrapperRef = el), class: `flex effect-color border-softer relative grid overflow-hidden rounded-lg border-2 p-16 
+        return (h("div", { key: '095474500f7c60f20e4d737188001d2f3084dbcc', ref: (el) => (this.wrapperRef = el), class: `flex effect-color border-softer relative grid overflow-hidden rounded-lg border-2 p-16 
           ${this.switchBg && this.isExpanded ? 'bg-inverse' : 'bg-default'} 
           ${this.switchBg ? 'hover:bg-inverse' : ''}
-          ${this.description ? 'min-h-56' : ''}` }, h("h3", { key: '3770e241daa7e4696c5481c97965fb2ebe0b17f9', ref: (el) => (this.headerRef = el), class: "mr-auto f-heading-06 text-left absolute inset-x-16 break-words top-16 pr-40" }, this.heading), h("div", { key: '56b7b70d16cf3f944bf3cec878bd15c3e18b399b', class: "ml-auto" }, h("eds-button", { key: '4b770831f155f7e77a424b9dd3ec0a8708a0859f', id: "toggleAccordion", intent: this.buttonIntent, "aria-expanded": this.isExpanded || this.shortContent, "aria-label": "Toggle accordion", "aria-controls": "accordionSection", class: `effect-color flex w-full items-center justify-between rounded-md`, onClick: this.handleClick, icon: "chevron-down" })), h("div", { key: 'c75c4d840bc8be25ee7590d90e3290faf090fdf0', class: `w-full`, style: Number.isFinite(this.headerHeight) ? { marginTop: `${this.headerHeight}px` } : {} }, this.description ? (h("span", { class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description)) : null, h("section", { key: 'b78b8f7fa93a85c886136cac8119d7b94de2a129', id: "accordionSection", "aria-labelledby": "accordionHeader", "aria-hidden": !this.isExpanded, class: `z-1 effect-height relative h-0 w-full ${!this.isExpanded && this.clampText ? 'overflow-hidden' : ''}`, style: { height: this.isExpanded ? 'auto' : '0' } }, h("div", { key: '75ba9a9a7082b4ded3dacd6cbaa9ceb3688c5045', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-4`, "aria-hidden": !this.isExpanded }, h("span", { key: 'e08cefc1d6fe7f3d162de86a17646d88a8686d83', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, h("slot", { key: '77d3a7fb997a9f313e3013a17f87c28f7ff8adad' })))))));
+          ${this.description ? 'min-h-56' : ''}` }, h("h3", { key: 'f090fbe3632df8302046f1178e82b8affc4cc821', ref: (el) => (this.headerRef = el), class: "mr-auto f-heading-06 text-left absolute inset-x-16 break-words top-16 pr-40" }, this.heading), h("div", { key: '0a30ab8c27cadbb342fc57f6393111c84f10a664', class: "ml-auto" }, h("eds-button", { key: '01f4658df8181b63b71a2e0d2a67e8f8b58efbb7', id: "toggleAccordion", intent: this.buttonIntent, "aria-expanded": this.isExpanded || this.shortContent, "aria-label": "Toggle accordion", "aria-controls": "accordionSection", class: `effect-color flex w-full items-center justify-between rounded-md`, onClick: this.handleClick, icon: "chevron-down" })), h("div", { key: '9f3b5a0e425c2dffe3b6fe40fa33b020d64256d8', class: `w-full`, style: Number.isFinite(this.headerHeight) ? { marginTop: `${this.headerHeight}px` } : {} }, this.description ? (h("span", { class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description)) : null, h("section", { key: '414735d7d982de76d8a1b8db24aa9a569eba37c7', id: "accordionSection", "aria-labelledby": "accordionHeader", "aria-hidden": !this.isExpanded, class: `z-1 effect-height relative h-0 w-full ${!this.isExpanded ? 'overflow-hidden' : ''}`, style: { height: this.isExpanded ? 'auto' : '0' } }, h("div", { key: '11097a0646b18f728af494c14aa4cc0e5335defe', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-4`, "aria-hidden": !this.isExpanded }, h("span", { key: '88414c40490aa77166d23868f16556b9356279a7', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, h("slot", { key: '8070a7676ca8fba065f813852a2e0cf4146f3374' })))))));
     }
     get el() { return getElement(this); }
 };
@@ -179,12 +179,12 @@ const EdsAlert = class {
     }
     render() {
         const ariaLabel = this.intent !== 'default' ? `${this.intent} alert` : 'alert';
-        return (h("div", { key: '33781ae5fb8504158e8fe780a76d89566a39e914', class: alertStyles({
+        return (h("div", { key: 'd8f0a45ddbaf3d3eb284751e33ddfdce2e13b67a', class: alertStyles({
                 intent: this.intent,
                 brd: this.brd,
                 direction: this.direction,
                 withBtn: this.withBtn
-            }), role: "alert", "aria-label": ariaLabel, "aria-live": this.intent === 'error' ? 'assertive' : 'polite', "aria-labelledby": "alert-message", "aria-describedby": this.withBtn ? 'alert-action' : undefined }, h("p", { key: 'fb3a1d216279b4076b09ef9544d37c5229b4d706', id: "alert-message", class: "f-ui-01 py-8", innerHTML: this.message }), this.withBtn && (h("div", { key: 'a5edd833ae3924f41edb17068090eeeb4e9f9cfd', id: "alert-action" }, this.pressableUrl ? (h("eds-link", { class: "eds-alert-link", label: this.pressableLabel, url: this.pressableUrl, intent: "secondary", external: true })) : (h("eds-button", { class: "eds-alert-button", label: this.pressableLabel, intent: "secondary", onClick: () => this.handleAction() }))))));
+            }), role: "alert", "aria-label": ariaLabel, "aria-live": this.intent === 'error' ? 'assertive' : 'polite', "aria-labelledby": "alert-message", "aria-describedby": this.withBtn ? 'alert-action' : undefined }, h("p", { key: '179862c141a2ce05fa9f8562be7e64196baa3922', id: "alert-message", class: "f-ui-01 py-8", innerHTML: this.message }), this.withBtn && (h("div", { key: '3677358bd563a3e2ee1b74309dc4fb6c84ac475f', id: "alert-action" }, this.pressableUrl ? (h("eds-link", { class: "eds-alert-link", label: this.pressableLabel, url: this.pressableUrl, intent: "secondary", external: true })) : (h("eds-button", { class: "eds-alert-button", label: this.pressableLabel, intent: "secondary", onClick: () => this.handleAction() }))))));
     }
     get el() { return getElement(this); }
 };
@@ -247,7 +247,7 @@ const EdsAvatar = class {
      * @returns {JSX.Element} The rendered avatar component.
      */
     render() {
-        return (h("div", { key: 'd29c110e340567236716e77c4f003bec5c70ee63', class: this.containerClasses }, this.picture ? (h("eds-img", { src: this.picture, width: 54, height: 54, sizes: "120px", alt: `${this.firstName} ${this.lastName}`, lazyload: true, withBg: true })) : (h("abbr", { title: this.computedInitials || `${this.firstName} ${this.lastName}`, class: "!no-underline f-ui-01" }, this.computedInitials))));
+        return (h("div", { key: '7b5bf31c794c9bbddd2976fdd5a273842a75603a', class: this.containerClasses }, this.picture ? (h("eds-img", { src: this.picture, width: 54, height: 54, sizes: "120px", alt: `${this.firstName} ${this.lastName}`, lazyload: true, withBg: true })) : (h("abbr", { title: this.computedInitials || `${this.firstName} ${this.lastName}`, class: "!no-underline f-ui-01" }, this.computedInitials))));
     }
 };
 EdsAvatar.style = EdsAvatarStyle0;
@@ -261,7 +261,7 @@ const EdsBlockBreak = class {
         this.inverse = false;
     }
     render() {
-        return h("hr", { key: '0e2ec4b9c8b70ff9b65e6c4f2af42f198b1eb7d0', class: `${this.inverse ? 'border-default' : 'border-softer'}  my-16 inline-block w-full border-t-2` });
+        return h("hr", { key: 'dd9b98d66f195135ff2fb1374a56d4c670e43d3e', class: `${this.inverse ? 'border-default' : 'border-softer'}  my-16 inline-block w-full border-t-2` });
     }
 };
 EdsBlockBreak.style = EdsBlockBreakStyle0;
@@ -381,7 +381,7 @@ const EdsBreadcrumb = class {
      */
     render() {
         const itemsToRender = this.getTruncatedItems();
-        return (h("nav", { key: '27ddf744a07f1b697e549cdc6d2a66f65ebe6386', "aria-label": "Breadcrumb" }, h("ol", { key: '43ac089290c0a6f9b3c5cd629def8540966637b8', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
+        return (h("nav", { key: '4894fb9e6b37ef84880a62f4dcd3289dcb9cab38', "aria-label": "Breadcrumb" }, h("ol", { key: 'd69405fcee024465d645d9cdbb17189998a94b95', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
             const isLast = index === itemsToRender.length - 1;
             return (h("li", { class: "flex items-center" }, !item.isHidden ? ((() => {
                 const { fullLabel } = this.getLabels(item, isLast);
@@ -520,7 +520,6 @@ const EdsButton = class {
         this.size = 'small';
         this.iconPos = 'right';
         this.iconSmall = false;
-        this.extraClass = undefined;
         this.triggerClick = undefined;
     }
     handleParentContext(event) {
@@ -571,7 +570,7 @@ const EdsButton = class {
         });
         const ElementType = this.elementType;
         const isInteractive = !this.disabled && !this.loading;
-        return (h(Host, { key: 'fe91be3eb9c2a3ece800097392462b3bd76f1264' }, h(ElementType, { key: 'aa1d4e0544beff8759d232d0e897ffdbcd584ea5', tabindex: isInteractive ? '0' : '-1', "aria-label": this.label ? undefined : this.ariaLabel, "aria-disabled": this.disabled || this.loading ? 'true' : undefined, "aria-busy": this.loading ? 'true' : undefined, disabled: this.elementType === 'button' ? this.disabled || this.loading : undefined, role: this.elementType === 'a' ? 'button' : undefined, class: `${classes || ''} ${this.extraClass || ''}`, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, this.label && (h("span", { key: '2b55edc1b986950ba03a759cffd7346c8611ac0a', class: this.loading ? 'opacity-0' : '', "aria-hidden": this.loading ? 'true' : undefined }, this.label)), this.loading && (h("span", { key: '5b035b8ef848cde63af9a2cc4a3ed72c68e1e03d', class: "absolute inset-0 flex items-center justify-center", "aria-hidden": "true" }, h("span", { key: '2746ef996f0835c76c4ef2cbd39103ad4d07c21f', class: "loader", style: {
+        return (h(Host, { key: '25a7b4ffda3df65e91c77a18becd45bc40973f3c' }, h(ElementType, { key: '0f00d82a37f3189b862015eb2d915f2364b6d75d', tabindex: isInteractive ? '0' : '-1', "aria-label": this.label ? undefined : this.ariaLabel, "aria-disabled": this.disabled || this.loading ? 'true' : undefined, "aria-busy": this.loading ? 'true' : undefined, disabled: this.elementType === 'button' ? this.disabled || this.loading : undefined, role: this.elementType === 'a' ? 'button' : undefined, class: `${classes || ''}`, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, this.label && (h("span", { key: '6e45dfefb4805eef0574f7462becca6cde85dbc0', class: this.loading ? 'opacity-0' : '', "aria-hidden": this.loading ? 'true' : undefined }, this.label)), this.loading && (h("span", { key: '9909c70db39a039b883854caff816d25f132b866', class: "absolute inset-0 flex items-center justify-center", "aria-hidden": "true" }, h("span", { key: '367cd65a13f81cbcb12d93855dc091a4309566bb', class: "loader", style: {
                 border: `3px solid ${this.intent === 'secondary' ? 'rgba(255, 255, 255, .3)' : 'rgba(0, 0, 0, .3)'}`,
                 borderBottomColor: this.intent === 'secondary' ? '#fff' : '#000'
             } }))), this.icon ? (h("eds-icon-wrapper", { class: `
@@ -3060,7 +3059,7 @@ const EdsCodeBlock = class {
         return this.code; // Fallback if language is not provided or unsupported
     }
     render() {
-        return (h("div", { key: '2c5addd195dc8d930db643e95ecc52410dd94052', class: "relative bg-stronger rounded-sm" }, h("div", { key: 'aea2d891f9e5d57d4b8390cff4597cb8edd163a1', class: "text-inverse flex justify-between items-center p-8" }, this.language ? (h("span", { class: "f-ui-03" }, this.language.toUpperCase())) : (h("pre", { class: "bg-stronger pl-8", role: "region", "aria-label": "Code block without language" }, h("code", { innerHTML: this.getHighlightedCode() }))), h("span", { key: '41e2d463bde145f901eae42dda68091a9a42e3ef', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: '7285b81dd936c770b09b4a36bed8c8ba2a87da99', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: 'a12d74735064478480544cc4b5cf14d7b028b1a8', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: '2fcde4f271059ac98cb3b1b6bffbf4564ccf795b', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '68a8b83f492e7b0eb2916a063e28a4293e6a988f', innerHTML: this.getHighlightedCode() })))));
+        return (h("div", { key: 'bc74b6be37bcb24700d17b48b5398077e485abd7', class: "relative bg-stronger rounded-sm" }, h("div", { key: 'db0395bfd55eb3394ab2149c5c436f2a54e8afb0', class: "text-inverse flex justify-between items-center p-8" }, this.language ? (h("span", { class: "f-ui-03" }, this.language.toUpperCase())) : (h("pre", { class: "bg-stronger pl-8", role: "region", "aria-label": "Code block without language" }, h("code", { innerHTML: this.getHighlightedCode() }))), h("span", { key: '628ad41f15f3a38abe4b7c382074c8f5a8679a8c', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: '1c95d57a5d8113d6ab7ebf7da713e058c7cc10f1', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: 'a64b2450b631835b6fc2c15047b09ceea5a9fc95', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: '51945cbee1504625b54362505b60f1bd1784bdda', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '55961aa8278177451e13c929ec7f7065afcac93b', innerHTML: this.getHighlightedCode() })))));
     }
     get el() { return getElement(this); }
 };
@@ -3214,14 +3213,14 @@ const EdsDropdown = class {
      * @returns {JSX.Element} The rendered dropdown component.
      */
     render() {
-        return (h("div", { key: 'e31acbda3428f47fe32cfe550cf00c53374da215', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: 'ce3e11ecee4f603c3ba0e003fccf3fe81289f4c8', label: this.label, "aria-label": this.ariaLabel, icon: this.icon, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu" }), h("nav", { key: '59f8533409171401ed73eac8d307e4eafbde9209', ref: (el) => (this.panelEl = el), role: "menu", class: {
+        return (h("div", { key: 'ffc4915b2104e3d2dd347900acd897f56910a674', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: 'ba48bdd7b75fd230bdc2dd564bd477f0349f5426', label: this.label, "aria-label": this.ariaLabel, icon: this.icon, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu" }), h("nav", { key: 'a29b57598a2ed8fcc9593c928df9443fd4449481', ref: (el) => (this.panelEl = el), role: "menu", class: {
                 'shadow-small bg-inverse border-softest z-10 z-on-top absolute top-full mt-4 flex flex-col gap-y-4 border-2 p-8': true,
                 'left-4': this.dropdownPos === 'left' && this.dropdownOffset,
                 'left-0': this.dropdownPos === 'left' && !this.dropdownOffset,
                 'right-4': this.dropdownPos === 'right' && this.dropdownOffset,
                 'right-0': this.dropdownPos === 'right' && !this.dropdownOffset,
                 'rounded-lg': this.rounded
-            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, h("slot", { key: '675839893bf667a7a05a63e552935bb1a5874b73' }))));
+            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, h("slot", { key: 'ddf003345ef5181b968b4bfd8962805d09d15e89' }))));
     }
     get host() { return getElement(this); }
 };
@@ -3505,17 +3504,41 @@ const EdsForm = class {
         }
         const actual = this.values[field.condition.field];
         const expected = field.condition.value;
-        // Handle loose match between booleans and strings
-        return String(actual) === String(expected);
+        // Handle undefined/null/empty
+        if (actual == null) {
+            return expected == null || expected === '';
+        }
+        // Handle arrays (multi-select, checkboxes)
+        if (Array.isArray(actual)) {
+            return actual.some((val) => this.normalizeValue(val) === this.normalizeValue(expected));
+        }
+        // Handle comma-separated strings (from checkboxes stored as "val1,val2")
+        if (typeof actual === 'string' && actual.includes(',')) {
+            const values = actual.split(',').map((v) => v.trim());
+            return values.some((val) => this.normalizeValue(val) === this.normalizeValue(expected));
+        }
+        // Standard comparison with normalization
+        return this.normalizeValue(actual) === this.normalizeValue(expected);
+    }
+    normalizeValue(value) {
+        if (value == null) {
+            return '';
+        }
+        if (typeof value === 'boolean') {
+            return value ? 'true' : 'false';
+        }
+        if (typeof value === 'number') {
+            return String(value);
+        }
+        if (typeof value === 'string') {
+            return value.trim().toLowerCase();
+        }
+        return String(value).trim().toLowerCase();
     }
     validateForm() {
-        const { errors, hasError } = validateFormFields(this.parsedFields, this.formEl, this.values, (field, values) => {
-            if (!field.condition) {
-                return true;
-            }
-            const parentValue = values[field.condition.field];
-            return parentValue === field.condition.value;
-        });
+        const { errors, hasError } = validateFormFields(this.parsedFields, this.formEl, this.values, (field, _values) => 
+        // Use a temporary object with the condition to reuse isFieldVisible logic
+        this.isFieldVisible(field));
         this.errors = errors;
         this.hasError = hasError;
     }
@@ -3529,8 +3552,22 @@ const EdsForm = class {
                 if (!field.condition) {
                     return true;
                 }
-                const parentValue = values[field.condition.field];
-                return parentValue === field.condition.value;
+                const actual = values[field.condition.field];
+                const expected = field.condition.value;
+                // Handle undefined/null/empty
+                if (actual == null) {
+                    return expected == null || expected === '';
+                }
+                // Handle arrays
+                if (Array.isArray(actual)) {
+                    return actual.some((val) => this.normalizeValue(val) === this.normalizeValue(expected));
+                }
+                // Handle comma-separated strings
+                if (typeof actual === 'string' && actual.includes(',')) {
+                    const values = actual.split(',').map((v) => v.trim());
+                    return values.some((val) => this.normalizeValue(val) === this.normalizeValue(expected));
+                }
+                return this.normalizeValue(actual) === this.normalizeValue(expected);
             }
         });
         this.values = updatedValues;
@@ -3597,8 +3634,9 @@ const EdsForm = class {
             const hosts = Array.from(this.formEl.querySelectorAll('eds-input-field'));
             hosts.forEach((host) => {
                 const root = host.shadowRoot;
-                if (!root)
+                if (!root) {
                     return;
+                }
                 const fileInputs = Array.from(root.querySelectorAll('input[type="file"][name]'));
                 console.log(fileInputs);
                 fileInputs.forEach((fi) => {
@@ -3613,14 +3651,13 @@ const EdsForm = class {
             // (Optional) mark that this payload includes files (handy in logs / policies)
             // formData.set('_has_files', '1');
         }
-        formData.forEach((value, key) => {
-            if (value instanceof File) {
-                console.log(`File field: ${key}, File name: ${value.name}, File size: ${value.size}`);
-            }
-            else {
-                console.log(`Field: ${key}, Value: ${value}`);
-            }
-        });
+        /*formData.forEach((value, key) => {
+          if (value instanceof File) {
+            console.log(`File field: ${key}, File name: ${value.name}, File size: ${value.size}`);
+          } else {
+            console.log(`Field: ${key}, Value: ${value}`);
+          }
+        });*/
         return formData;
     }
     handleChange(e, field) {
@@ -3734,8 +3771,9 @@ const EdsForm = class {
     handleSubmit(e) {
         var _a, _b;
         e === null || e === void 0 ? void 0 : e.preventDefault();
-        if (this.isSubmitting)
+        if (this.isSubmitting) {
             return;
+        }
         this.isSubmitting = true;
         this.validateForm();
         if (this.hasError) {
@@ -3817,7 +3855,7 @@ const EdsForm = class {
         else if (field.type === 'nps') {
             return (h("div", { class: "form-group nps-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `nps-${field.name}`, label: field.question, disabled: field.disabled, required: field.required }))), h("eds-nps", { id: `nps-${field.name}`, "right-label": field.rightLabel, "left-label": field.leftLabel, onNps: (e) => this.handleNPS(e, field) }), h("div", { class: "mt-6" }, 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 (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) }));
+        return (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, link: field.link, 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) }));
     }
     async getData() {
         return this.makeFormData();
@@ -3830,9 +3868,9 @@ const EdsForm = class {
         const styleClasses = this.formStyle === 'shadow'
             ? 'bg-inverse effect-shadow shadow-hover border-softer relative rounded-lg border-2 p-32'
             : '';
-        return (h("form", { key: 'a2e7de988c60301b92f6b756702bfcc78e9f3d90', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '22172631522aa6094d8b163b0774c57ef4404d60', class: "flex flex-col gap-y-24" }, this.title && (h("span", { key: '0597bbacbaf5f3d9ec1ab938cf755a10baafdf21', role: "heading", class: "f-heading-04" }, this.title)), this.description && h("span", { key: '5e636072bc2692071bd0b518af721999cc8b511e', class: "f-body-02 text-light" }, this.description), h("slot", { key: '79d21172208eb77ec6460e817d3c7bc3a680c806' })), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
+        return (h("form", { key: 'a4b6cf51242567739fc3ff2da482c41edb4e4e57', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '5f7e1d618f8a10a1cd6aa8d512c04064a484cd93', class: "flex flex-col gap-y-24" }, this.title && (h("span", { key: '283d752d3e9f4ede0f50493ba9e5010376ebfb1f', role: "heading", class: "f-heading-04" }, this.title)), this.description && h("span", { key: 'bd5866482b87bdc86a59594b884a9b81c676afdb', class: "f-body-02 text-light" }, this.description), h("slot", { key: 'b2de746ccf8743fdef545a70ab111dfff0d7912f' })), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
             .filter((g) => Array.isArray(buckets[g.id]) && buckets[g.id].length > 0)
-            .map((g) => (h("div", { class: "mt-32", key: g.id }, h("span", { class: "f-body-02" }, h("b", null, g.title)), h("div", { class: "border-group mt-32 mb-32 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), h("div", { key: 'b99941e53dec1c8c4e167d8588d6e86793838d1a', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), this.formBtn && (h("div", { key: '27365a4d7d8150ff4e94ffb3d27d011400c8c412', class: "mt-32" }, h("eds-button", { key: '66f89292b95d9549e3718d7e499b0724762127c6', intent: this.buttonIntent, label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
+            .map((g) => (h("div", { class: "mt-32", key: g.id }, h("span", { class: "f-body-02" }, h("b", null, g.title)), h("div", { class: "border-group mt-32 mb-32 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), h("div", { key: '917c5bd2e6048a91487f0a66bd0426e529295f9e', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), this.formBtn && (h("div", { key: '96abbd19ea2869c21146f0b37da7ff6b89fbf66c', class: "mt-32" }, h("eds-button", { key: '066348df32cf27fc6e56c94b9d5c455bc51b4adf', intent: this.buttonIntent, label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -3867,9 +3905,8 @@ const EdsGlobalSearch = class {
                 category: 'shared-ui',
                 parentContext: null,
                 tag: this.el.tagName.toLowerCase(),
-                name: `search-input: ${(_a = this.query) === null || _a === void 0 ? void 0 : _a.toLowerCase()}` ||
-                    'unknow seach input query',
-                action: 'click',
+                name: `search-input: ${(_a = this.query) === null || _a === void 0 ? void 0 : _a.toLowerCase()}` || 'unknow seach input query',
+                action: 'click'
             });
             this.debounceTimer = window.setTimeout(() => {
                 this.runSearch();
@@ -3925,8 +3962,7 @@ const EdsGlobalSearch = class {
                 break;
             case 'Enter':
                 event.preventDefault();
-                if (this.selectedIndex >= 0 &&
-                    this.selectedIndex < this.results.length) {
+                if (this.selectedIndex >= 0 && this.selectedIndex < this.results.length) {
                     this.selectResult(this.results[this.selectedIndex]);
                 }
                 break;
@@ -3960,7 +3996,7 @@ const EdsGlobalSearch = class {
             this.selectedIndex = -1;
         }
         catch (err) {
-            console.error('Search error:', err);
+            //console.error('Search error:', err);
             this.error = 'Search failed. Please try again.';
             this.results = [];
             this.showDropdown = true;
@@ -3977,7 +4013,7 @@ const EdsGlobalSearch = class {
             parentContext: null,
             tag: this.el.tagName.toLowerCase(),
             name: `search-select: ${result.url}` || 'unknow search result selection',
-            action: 'click',
+            action: 'click'
         });
         window.open(result.url, '_blank', 'noopener,noreferrer');
     }
@@ -3998,19 +4034,19 @@ const EdsGlobalSearch = class {
         return this.results.length > 0;
     }
     get showEmpty() {
-        return (this.hasSearched && !this.loading && !this.hasResults && this.query.trim());
+        return this.hasSearched && !this.loading && !this.hasResults && this.query.trim();
     }
     render() {
-        return (h("div", { key: '8fb5d13cbb123d7a6d6a26d0ba59d4c6d1660216', class: "search-wrapper" }, h("eds-input-field", { key: 'a8bf5d6f4aa5746e144b82fad60b77697d0fdb99', icon: "search", "input-id": "search-global", type: "text", name: "search-box-global", placeholder: this.placeholder, value: this.query, onInput: this.handleInput }), this.showDropdown && (h("div", { key: '553cb12c9b2aa9ecfbcf9c1eee9ff9a44549e35a', class: "search-dropdown", ref: (el) => (this.dropdownRef = el) }, this.loading && (h("div", { key: '4f40853beecd11f8812fd97cf07d2394e7b73466', class: "flex text-center justify-center p-64" }, h("eds-spinner", { key: '307a3ba3ec2d296f31f8e5cf1a696786387ea8fa', variant: "primary", size: "sm" }))), this.error && !this.loading && (h("div", { key: '46fc2ed3f48237864c62ce52d5789b72ab007f61', class: "flex text-center justify-center p-16" }, h("span", { key: 'b555370d936f99234d9be576d04766bc674bfd24', class: "text-error f-body-02" }, this.error))), this.showEmpty && (h("div", { key: '7464c4850872ce8dcee55c189b1e78baa1799f14', class: "dropdown-state" }, h("eds-icon-wrapper", { key: '989282ef0fc8fde7018bb80ab172773cc2107942', icon: "search" }), h("div", { key: 'efbdbd61312b7de43c4f9944cbd573573ec22f11' }, h("p", { key: 'fb8bf8c76f101a182f2f0e0c9beac642a872d4cb', class: "f-body-02" }, "No results found"), h("p", { key: '003a1facf39b7efe8f61c58518e7fdef4779f9c3', class: "f-ui-04 text-lightest" }, "Try different keywords")))), this.hasResults && !this.loading && (h("ul", { key: '01b48376f9b290218f93eed314bcc71fa15f83ef', class: "dropdown-results" }, this.results.map((result, index) => (h("li", { key: result.id, "data-index": index, class: {
+        return (h("div", { key: 'be8f46caa1d12a034401686c9860b87032652322', class: "search-wrapper" }, h("eds-input-field", { key: 'c31ac27a5e9f97729da8f7168e22ad09205ffce0', icon: "search", "input-id": "search-global", type: "text", name: "search-box-global", placeholder: this.placeholder, value: this.query, onInput: this.handleInput }), this.showDropdown && (h("div", { key: '57b87393636913be24856bedc805e180171f084e', class: "search-dropdown", ref: (el) => (this.dropdownRef = el) }, this.loading && (h("div", { key: '3ddb78e5a734d69b581e64ee825d12574f98574d', class: "flex text-center justify-center p-64" }, h("eds-spinner", { key: '178c99535ce61b320fd70ab1f3aeb8408c868fe3', variant: "primary", size: "sm" }))), this.error && !this.loading && (h("div", { key: '87feb37ffec93fa12185cd1fffb5c4f8ac54cd55', class: "flex text-center justify-center p-16" }, h("span", { key: '07544fe95721c9e0898364f3bdcfc0b1ca79a48d', class: "text-error f-body-02" }, this.error))), this.showEmpty && (h("div", { key: '6595178cb14ce5e21cdb15f96e039975a8af0c67', class: "dropdown-state" }, h("eds-icon-wrapper", { key: 'f5b614218bb6ef642c3d1f4c7d41f56f28319a9d', icon: "search" }), h("div", { key: '857671d7783d8fe854e6b3203a3755d24f337e5d' }, h("p", { key: '89bae3bfb4efa63e777121088a59d873652de4e9', class: "f-body-02" }, "No results found"), h("p", { key: '1a951b1a6f0daf7506e6e7892a211f92d95b94d4', class: "f-ui-04 text-lightest" }, "Try different keywords")))), this.hasResults && !this.loading && (h("ul", { key: '1c1711dc4332d70cefe965dcfeeabc3c6745ce4d', class: "dropdown-results" }, this.results.map((result, index) => (h("li", { key: result.id, "data-index": index, class: {
                 'result-item': true,
-                'result-item--selected': index === this.selectedIndex,
-            }, onClick: () => this.selectResult(result), onMouseEnter: () => (this.selectedIndex = index) }, h("div", { class: "result-header" }, h("span", { class: "f-body-02" }, result.title)), h("div", { class: "inline" }, h("eds-tag", { intent: "accent", label: result.source }), result.section && (h("span", { class: "result-badge" }, result.section)), h("span", { class: "f-ui-03-light text-lighter ml-8" }, result.url)), result.snippet && (h("p", { class: "result-snippet" }, this.stripHtml(result.snippet)))))))), this.hasResults && !this.loading && (h("div", { key: '3730704ff20781f23403df56a452bf586c06a688', class: "dropdown-footer" }, h("span", { key: '981e0fb42c24116a2b7caa1a341db1435fb57298', class: "footer-hint" }, h("kbd", { key: 'a3afa1202d694af3f87c736f8384b11497729d2c' }, "\u2191"), " ", h("kbd", { key: '4158766047e73eef837b3a7be415b52792473f3e' }, "\u2193"), " navigate \u2022 ", h("kbd", { key: '49dc09c928a6f0d69e4c95cee7ba5b655dfcd56c' }, "\u21B5"), " select \u2022", ' ', h("kbd", { key: '8da9b6f1bef58c7633a484f63e63920646d6b675' }, "esc"), " close")))))));
+                'result-item--selected': index === this.selectedIndex
+            }, onClick: () => this.selectResult(result), onMouseEnter: () => (this.selectedIndex = index) }, h("div", { class: "result-header" }, h("span", { class: "f-body-02" }, result.title)), h("div", { class: "inline" }, h("eds-tag", { intent: "accent", label: result.source }), result.section && h("span", { class: "result-badge" }, result.section), h("span", { class: "f-ui-03-light text-lighter ml-8" }, result.url)), result.snippet && h("p", { class: "result-snippet" }, this.stripHtml(result.snippet))))))), this.hasResults && !this.loading && (h("div", { key: '26e172b579f71b7096481994c0a4af80d3e416d3', class: "dropdown-footer" }, h("span", { key: '57a6432125472aaed3b7b46c106aeec0d0a5ee50', class: "footer-hint" }, h("kbd", { key: 'c8ca5d4b1a2e8f59665290ab78499f8db431a2e9' }, "\u2191"), " ", h("kbd", { key: '89a6520e51bed33cfc37b892480af44e5b77a9c3' }, "\u2193"), " navigate \u2022 ", h("kbd", { key: '4173b9ec77d52d4570e016c3366e27fef225ccb0' }, "\u21B5"), " select \u2022 ", h("kbd", { key: '7f118c184acf52edd545e1f97b4ca991eaa1aa1f' }, "esc"), " close")))))));
     }
     get el() { return getElement(this); }
 };
 EdsGlobalSearch.style = EdsGlobalSearchStyle0;
 
-const edsHeaderCss = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.z-10{z-index:10}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.mr-auto{margin-right:auto}.w-\\[200px\\]{width:200px}.h-\\[85px\\]{height:85px}.left-1\\/2{left:50%}.top-1\\/2{top:50%}.grow{flex-grow:1}.-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))}.hidden{display:none}.gap-x-2{-moz-column-gap:0.125rem;column-gap:0.125rem}.after\\:effect-opacity::after{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.whitespace-nowrap{white-space:nowrap}.\\!text-current{color:currentColor !important}.overflow-hidden{overflow:hidden}.after\\:\\!border-transparent::after{border-color:var(--transparent) !important}.hover\\:after\\:\\!border-transparent:hover::after{border-color:var(--transparent) !important}.after\\:opacity-0::after{opacity:0}.hover\\:after\\:opacity-100:hover::after{opacity:1}.px-16{padding-left:1rem;padding-right:1rem}@media (min-width: 750px){.md\\:flex{display:flex}.md\\:hidden{display:none}}";
+const edsHeaderCss = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.z-10{z-index:10}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-300)}.bg-strongest{background-color:var(--black)}.mr-auto{margin-right:auto}.w-\\[200px\\]{width:200px}.h-\\[85px\\]{height:85px}.left-1\\/2{left:50%}.top-1\\/2{top:50%}.grow{flex-grow:1}.-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))}.hidden{display:none}.gap-x-2{-moz-column-gap:0.125rem;column-gap:0.125rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.after\\:effect-opacity::after{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.whitespace-nowrap{white-space:nowrap}.\\!text-current{color:currentColor !important}.overflow-hidden{overflow:hidden}.after\\:\\!border-transparent::after{border-color:var(--transparent) !important}.hover\\:after\\:\\!border-transparent:hover::after{border-color:var(--transparent) !important}.after\\:opacity-0::after{opacity:0}.hover\\:after\\:opacity-100:hover::after{opacity:1}.px-16{padding-left:1rem;padding-right:1rem}@media (min-width: 750px){.md\\:flex{display:flex}.md\\:hidden{display:none}}";
 const EdsHeaderStyle0 = edsHeaderCss;
 
 const EdsHeader = class {
@@ -4023,14 +4059,10 @@ const EdsHeader = class {
         this.menuEnabled = false;
         this.isMenuOpen = false;
         this.isUserMenuOpen = false;
-        this.isAuthenticated = false;
-    }
-    onAuthStatusChanged(event) {
-        var _a;
-        this.isAuthenticated = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.authenticated;
     }
     componentDidLoad() {
-        const links = this.hostEl.querySelectorAll('eds-link');
+        var _a, _b;
+        const links = (_b = (_a = this.hostEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-link')) !== null && _b !== void 0 ? _b : [];
         links.forEach((link) => this.emitContext(link));
     }
     emitContext(linkElement) {
@@ -4058,7 +4090,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 (h("header", { key: '937c78379bb6f3a97705862b2fa3f0f6ddd76d4c', class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: 'd94837e8414d558f02039501d7b01ab550275ca7', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: '02711bc6d80075a215761ce79698555f7b31bffa', type: logoType, href: this.homeUrl })), this.parsedLinks && (h("nav", { key: 'e3f0033cce5a6145a4f457d1c2c7aebb767593f7', class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, h("ul", { key: '85008ed8ceb8eca869d8730b38a8aa37aeb757ff', class: "flex gap-x-2" }, this.parsedLinks.map((link) => (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" })))))), h("slot", { key: '35eb7af751f3da381fada990118fa0a37ce150b1' }), this.menuEnabled && (h("div", { key: '121bba2b027fc21e8c77054f3de533e40fad6b96', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: '00774810aabf8fa292ecca2210bcd9542a7cb0c2', "aria-label": "Menu", intent: this.headerVariant === 'default' ? 'ghost' : 'ghostInverse', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
+        return (h("header", { key: 'cf272ed6242b2effa3027081d72b58025c49d055', role: "banner", class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: '16f81e55c3aa28beabfead914488ce1fd70b408d', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: '0961fb91dff26c457833b67ef963d60a9902a916', type: logoType, href: this.homeUrl })), this.parsedLinks && (h("nav", { key: 'a034d1bfc21da2245b3c91a2f91f092476d67f97', role: "navigation", "aria-label": "Primary", class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, h("ul", { key: '06ebd9012b829a30f7cdc27f417116a21d2bfc2f', class: "flex gap-x-16" }, this.parsedLinks.map((link) => (h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: "strong", 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" })))))), h("slot", { key: '68c34af928ee215329d354ca1a5ef7850d1112cf', name: "actions" }), this.menuEnabled && (h("div", { key: 'cb4cd94fbf5ebbd770631066f2f69f8ac50a3f5f', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: '8f2aa4d59705e9410a0fa8b10c9f348fcfe73db3', "aria-label": "Menu", intent: this.headerVariant === 'default' ? 'ghost' : 'ghostInverse', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
     }
     get hostEl() { return getElement(this); }
 };
@@ -4140,10 +4172,10 @@ const EdsImg = class {
             imgOpts['loading'] = 'lazy';
             imgOpts['decoding'] = 'async';
         }
-        return (h("div", { key: '7d704bdd14072d6ce69632d6f2de3270ff393b87', class: {
+        return (h("div", { key: '1ff909ca6fe3fe40ca5659cea033b404a45580fb', class: {
                 'items-center justify-center': true,
                 'effect-bg-pattern': this.lazyload && this.showBg
-            } }, h("picture", { key: '724f384b7b9f112727d3ab4ecdab5f769e581b26' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: '8b12b640a9d66fba117676e6bd81659c72a8e15c', ref: (el) => (this.img = el), class: {
+            } }, h("picture", { key: '92c92a5aaebd84d96a7bf8c291542d6a8cf4d896' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: 'ac8eb664987b1205d5a96c723840ac3ccd779ac1', ref: (el) => (this.img = el), class: {
                 'effect-opacity object-cover object-center': true,
                 'opacity-100': this.loaded,
                 'opacity-0': !this.loaded
@@ -4202,7 +4234,7 @@ const EdsInput = class {
     render() {
         const withIcon = !!this.icon;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
-        return (h("div", { key: '4c49edfceefe448b6f5bb29284f0b757342a6003', class: "relative flex items-center" }, this.type === 'textarea' ? (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' ? (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) => (h("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (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 (h("div", { key: '1800587d54da282566893c538d47aadf9f9bb390', class: "relative flex items-center" }, this.type === 'textarea' ? (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' ? (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) => (h("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (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,
@@ -4213,7 +4245,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' && (h("span", { key: 'df877332c68d4783d5f0f8d8beb94c1859cd00da', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (h("eds-icon-wrapper", { key: '94f7d3d75f5c578c10ab72b6140785b0b5988a13', 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' && (h("span", { key: 'cc6cc50cdebea1d4eaecb78bc6ab2b4b92503893', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (h("eds-icon-wrapper", { key: 'ff4b36e873438f7208eb660c77381f87f0805109', class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, icon: this.icon }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -4324,7 +4356,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 (h("div", { key: '8351609cb76699040d692f3a99746970a1498bea' }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (h("fieldset", { class: "space-y-4" }, h("div", { class: "flex justify-between mb-4" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.parsedOptions.map((option) => (h("div", { class: "flex items-center gap-x-4 gap-y-4", key: option.value }, h("eds-input", Object.assign({}, inputOpts, { value: option.value, checked: typeof this.value === 'string' && this.value.split(',').includes(String(option.value)) })), h("label", { htmlFor: this.name, class: `input-label-options ${this.disabled ? 'text-lighter' : ''}` }, option.label)))))) : (h("div", { class: "flex items-center gap-x-8" }, h("eds-input", Object.assign({}, inputOpts, { value: this.value, checked: this.value === 'on' || this.checked })), this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }))))) : (h("div", null, h("div", { class: "flex justify-between mb-4" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.type === 'select' ? (h("eds-input-select", Object.assign({}, inputOpts, { options: this.parsedOptions }))) : this.type === 'file' ? (h("input", { type: "file", id: this.inputId || this.name, name: this.name, onChange: this.onChangeNative, disabled: this.disabled, required: this.required })) : this.type === 'search' ? (h("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
+        return (h("div", { key: 'aca76f43840c0e8344d548610bc832cd75ff7bd9' }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (h("fieldset", { class: "space-y-4" }, h("div", { class: "flex justify-between mb-4" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.parsedOptions.map((option) => (h("div", { class: "flex items-center gap-x-4 gap-y-4", key: option.value }, h("eds-input", Object.assign({}, inputOpts, { value: option.value, checked: typeof this.value === 'string' && this.value.split(',').includes(String(option.value)) })), h("label", { htmlFor: this.name, class: `input-label-options ${this.disabled ? 'text-lighter' : ''}` }, option.label)))))) : (h("div", { class: "flex items-center gap-x-8" }, h("eds-input", Object.assign({}, inputOpts, { value: this.value, checked: this.value === 'on' || this.checked })), this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }))))) : (h("div", null, h("div", { class: "flex justify-between mb-4" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.type === 'select' ? (h("eds-input-select", Object.assign({}, inputOpts, { options: this.parsedOptions }))) : this.type === 'file' ? (h("input", { type: "file", id: this.inputId || this.name, name: this.name, onChange: this.onChangeNative, disabled: this.disabled, required: this.required })) : this.type === 'search' ? (h("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
             var _a, _b, _c;
             const rangeProps = {
                 name: inputOpts.name,
@@ -4337,7 +4369,7 @@ const EdsInputField = class {
             const opt = this.parsedOptions;
             const numberValue = typeof this.value === 'string' ? parseFloat(this.value) : this.value || 0;
             return (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 })));
-        })()) : (h("eds-input", Object.assign({}, inputOpts))))), h("div", { key: '171ca8dfbf4b30a62a05d00f5296b1aaa3d964bd', class: "mt-6" }, h("eds-input-footer", { key: 'c6b7d0a9dc574a5e0dba1e62ff77934e96b4dec1', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link }))));
+        })()) : (h("eds-input", Object.assign({}, inputOpts))))), h("div", { key: '27dc5705b9627fb597b04837b488326371fac2e2', class: "mt-6" }, h("eds-input-footer", { key: '6e73fb80b91de81ee22cb33b7589916b7eb882fe', 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 getElement(this); }
@@ -4357,7 +4389,7 @@ const EdsInputFooter = class {
         this.link = undefined;
     }
     render() {
-        return (h("div", { key: '4c3c1cc26e2b003f49b3cfd1c2388833c305781b' }, this.error && this.errorMessage && (h("div", { key: '7e14e3a77c99ee2700fd0cd8cb1e738c11e34823', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '700bc9b58a15e985903fc91abe4e41847d1cf761', icon: "warning" }), h("p", { key: 'a90a0fb49221c15125a54a0413a926174c065319', class: "f-ui-04 ml-4 mb-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '24d7c4fb5de1bb54237282edf6e51a16f0475474', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("a", { key: '2f01a63b36409dfddd19416777f88008f358b1cb', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
+        return (h("div", { key: '6c045ff40d674a27cf4fe4c1a125251edd7455ab' }, this.error && this.errorMessage && (h("div", { key: 'd6edd41359f7efb8f0a3bce487b852c1b26c035a', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: 'cd24f34b58c81f00046cc1d90a5b993928e72be8', icon: "warning" }), h("p", { key: 'bf718bcf0e04c5af1924381f567d5921bd43edec', class: "f-ui-04 ml-4 mb-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '4ea38b231e7b7fba679a05c12773a486aa3201bc', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("eds-link", { key: 'e2e1255c198b707abb2b2194100b83f7b00de9e7', label: this.link.label, url: this.link.url, intent: "underline", size: "small", external: true }))));
     }
 };
 EdsInputFooter.style = EdsInputFooterStyle0;
@@ -4374,7 +4406,7 @@ const EdsInputLabel = class {
         this.disabled = false;
     }
     render() {
-        return (h("label", { key: '51cf53579cea9effbf421c4f4ab45ef63f6770bf', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: '381c4e1e014d43f726e997767c76565a1979e54a' }, h("span", { key: '08102ef7990f262bf56b6f5bcf70e2ef6ecb0670', "aria-hidden": "true" }, "*"), h("span", { key: '6d3c6f3af5a06c5a1ee2245240cb3fbbef6cf9a8', class: "sr-only" }, "required")))));
+        return (h("label", { key: '5e97f430a0ef1cdc4d0b28618d78402991fda8fe', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: 'fedf93c4b037f387c4aad3ffab354de94de564d3' }, h("span", { key: '72ae856c25308b676d84d7ee0bf214362218a203', "aria-hidden": "true" }, "*"), h("span", { key: '39fcf9a2b39a0207eb0b6f62c16183885c98f145', class: "sr-only" }, "required")))));
     }
 };
 EdsInputLabel.style = EdsInputLabelStyle0;
@@ -4421,7 +4453,7 @@ const EdsInputRange = class {
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: 'c4ce20af554533837b8fc3f7bf69bd649e26b574', class: "relative flex flex-col items-start" }, h("input", { key: '924b247fd81481e648bbf44fec22185284014254', 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 }), h("p", { key: 'a3acfa464938748480e259cac4376a2be3512e6e', id: `desc_${this.name}`, class: "block f-ui-05 mt-4 text-lighter" }, "Current value: ", this.sliderVal)));
+        return (h("div", { key: 'c8106420cb482123e72c8e5b00079d9921749290', class: "relative flex flex-col items-start" }, h("input", { key: '752dfbeb9fb73c8a4b5ad874461b63e73477ca99', 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 }), h("p", { key: 'de123d07b20996d3f0c7c5baff788ab42fa0a386', id: `desc_${this.name}`, class: "block f-ui-05 mt-4 text-lighter" }, "Current value: ", this.sliderVal)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -4490,7 +4522,7 @@ const EdsInputSearch = class {
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: 'b1232c04e55c9f0bd7b864271ca855a3de242a73', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '67e51a49b994fc00cb48f2b55f54217097f4d837', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: 'a6526f68a35145631254e4a0380a1298242c592e', 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 (h("div", { key: 'f8484e4e4a971db07a75ca91b66d4b3cddd5cee9', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '68782ac168c062564d6378bc1bc62e58efeb3555', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: 'c59e9b91f214fc94fc4fb4c991c3e667ea3c24ae', 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 })));
     }
@@ -4519,12 +4551,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 (h("div", { key: 'b28b21c38ed5848cf08c0bc626f4ce32eddfb775', class: "relative" }, h("select", { key: '727f578d43cf12568d3d3b35548a30972fc46300', id: selectId, name: this.name, class: {
+        return (h("div", { key: '7f6a81c0f3d1f998c2bd671722cd06992b382540', class: "relative" }, h("select", { key: '3e62519e3973cf1136cda70a3af1cc2a2e093451', 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 }, h("option", { key: '9283f69f3c723d65243d8f38b92ee2fcd16d187e', value: "", disabled: true, hidden: true }, placeholderText), this.options.map((opt, index) => (h("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), h("span", { key: '63a0a9fc049f10141697028195aa28abb8d246f2', class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center" }, h("eds-icon-wrapper", { key: 'aa756ea1d279a03ca7919518a15cd63b368a20a0', 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 }, h("option", { key: '4292bd21e8c912f3bb0bc727ed2657051a3e03b8', value: "", disabled: true, hidden: true }, placeholderText), this.options.map((opt, index) => (h("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), h("span", { key: 'a03c59be80950fd17a89b0adc693654e99496018', class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center" }, h("eds-icon-wrapper", { key: '0183976264d130c3c12b30c829fae36512607ac4', class: "w-20 h-20", icon: "chevron-right" }))));
     }
 };
 
@@ -4595,7 +4627,6 @@ const linkStyles = cva([
             false: ''
         },
         size: {
-            underline: 'f-body-02 ',
             small: 'min-h-36 f-ui-02 px-12',
             large: 'min-h-44 f-ui-01 px-16'
         }
@@ -4648,6 +4679,16 @@ const linkStyles = cva([
             intent: 'inverse',
             isActive: true,
             class: 'before:!opacity-100'
+        },
+        {
+            intent: 'underline',
+            size: 'small',
+            class: '!px-0 !py-0 !min-h-0 f-ui-02'
+        },
+        {
+            intent: 'underline',
+            size: 'large',
+            class: '!px-0 !py-0 !min-h-0 f-ui-01'
         }
     ],
     defaultVariants: {
@@ -4663,7 +4704,7 @@ const EdsLink = class {
         registerInstance(this, hostRef);
         this.parentContext = null; // Accepts the entire event detail or null
         this.label = undefined;
-        this.intent = undefined;
+        this.intent = 'primary';
         this.icon = undefined;
         this.iconPos = 'right';
         this.iconSmall = false;
@@ -4675,7 +4716,6 @@ const EdsLink = class {
         this.ariaLabel = undefined;
         this.disabled = false;
         this.hideLabelOnSmallScreen = false;
-        this.extraClass = undefined;
     }
     handleParentContext(event) {
         if (event.target !== this.el) {
@@ -4720,9 +4760,6 @@ const EdsLink = class {
         }
     }
     getLinkSize() {
-        if (this.intent === 'underline') {
-            return 'underline';
-        }
         return this.size;
     }
     renderLeftIcon() {
@@ -4751,12 +4788,13 @@ const EdsLink = class {
             isActive: this.current,
             hasIcon: !!this.icon
         });
+        const safeUrl = typeof this.url === 'string' && this.url.length ? this.url : undefined;
         const isInteractive = !this.disabled;
         const isIconOnly = !this.label || (this.hideLabelOnSmallScreen && this.icon);
         const labelClasses = this.hideLabelOnSmallScreen
             ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
             : '';
-        return (h("a", { key: 'c09fd68443e1c98a1bfb679b669f9fecfb349548', 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) }, h("span", { key: '5bf88be39965ca8693daa611b4ca9a85cefb30d3', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && h("span", { key: 'd92b36812200d809cbccfd9da7f2387a7de80699', class: labelClasses }, this.label), this.renderRightIcon())));
+        return (h("a", { key: '2d72b4f56aad829c674edc920d8b8b9f83a6c9c1', class: `${classes || ''}`, href: isInteractive ? safeUrl : 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) }, h("span", { key: '8a8d9d31456c414d2167db7520978aefd9d955dc', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && h("span", { key: 'b26b2f5aafa647912ced4b747c8b1e1c7a508050', class: labelClasses }, this.label), this.renderRightIcon())));
     }
     get el() { return getElement(this); }
 };
@@ -4824,7 +4862,7 @@ const EdsLogo = class {
     }
     render() {
         const logoContent = this.getLogo();
-        return (h("a", { key: '550cb4d73702a6a7053adfb5ebe67ff4201e98ad', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '141b0faa05a2d51d3ca97242aa910e53e910ad9d', innerHTML: logoContent })));
+        return (h("a", { key: '341988e61c1b9f946bd4529f5562af8366704868', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '1a1e4516ba223b6132a85889626ca7856ca5a16c', innerHTML: logoContent })));
     }
     get el() { return getElement(this); }
 };
@@ -4956,71 +4994,84 @@ const EdsNps = class {
         this.nps = createEvent(this, "nps", 7);
         this.min = 0;
         this.max = 10;
+        this.btnRefs = [];
+        this.onSelect = (value) => {
+            this.selectedValue = value;
+            this.nps.emit(value);
+            // Move focus to the selected button (like your rating component)
+            requestAnimationFrame(() => {
+                var _a, _b;
+                const idx = value - this.min;
+                (_b = (_a = this.btnRefs[idx]) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+            });
+        };
+        this.handleKeyNav = (e) => {
+            const { key } = e;
+            const navigational = ['ArrowRight', 'ArrowLeft', 'Home', 'End', ' ', 'Enter'];
+            if (!navigational.includes(key)) {
+                return;
+            }
+            e.preventDefault();
+            const count = this.max - this.min + 1;
+            // Derive current index from selectedValue; if none, use 0 (first)
+            let currentIdx = this.selectedValue == null ? 0 : this.selectedValue - this.min;
+            switch (key) {
+                case 'ArrowRight':
+                    currentIdx = Math.min(count - 1, currentIdx + 1);
+                    this.setActiveByIndex(currentIdx, /*commit*/ false);
+                    break;
+                case 'ArrowLeft':
+                    currentIdx = Math.max(0, currentIdx - 1);
+                    this.setActiveByIndex(currentIdx, /*commit*/ false);
+                    break;
+                case 'Home':
+                    this.setActiveByIndex(0, /*commit*/ false);
+                    break;
+                case 'End':
+                    this.setActiveByIndex(count - 1, /*commit*/ false);
+                    break;
+                case ' ':
+                case 'Enter':
+                    // Commit current focused item
+                    this.onSelect(this.min + currentIdx);
+                    break;
+            }
+        };
         this.question = undefined;
         this.leftLabel = undefined;
         this.rightLabel = undefined;
         this.selectedValue = null;
     }
-    handleClick(value) {
+    /** Move visual highlight & roving tabindex; optionally commit selection */
+    setActiveByIndex(index, commit = false) {
+        var _a;
+        const value = this.min + index;
+        // Update highlight so focus movement is visible (like your rating)
         this.selectedValue = value;
-        this.nps.emit(value);
-    }
-    handleKeyNav(e) {
-        const radios = Array.from(this.el.shadowRoot.querySelectorAll('eds-button'));
-        const currentIndex = radios.findIndex((r) => r.tabIndex === 0);
-        switch (e.key) {
-            case 'ArrowRight':
-            case 'ArrowLeft': {
-                e.preventDefault();
-                const delta = e.key === 'ArrowRight' ? 1 : -1;
-                const nextIndex = Math.min(this.max, Math.max(0, currentIndex + delta));
-                this.activateRadio(radios, nextIndex);
-                break;
-            }
-            case 'Home': {
-                e.preventDefault();
-                this.activateRadio(radios, 0);
-                break;
-            }
-            case 'End': {
-                e.preventDefault();
-                this.activateRadio(radios, this.max);
-                break;
-            }
-            case 'Enter':
-            case ' ': {
-                e.preventDefault();
-                if (currentIndex >= 0) {
-                    this.handleClick(this.min + currentIndex);
-                }
-                break;
-            }
-            case 'Escape': {
-                e.preventDefault();
-                if (currentIndex >= 0) {
-                    radios[currentIndex].blur();
-                }
-                break;
-            }
-            default:
-                return;
+        // Focus the button host (ensure eds-button forwards focus to its inner <button>)
+        const target = this.btnRefs[index];
+        typeof (target === null || target === void 0 ? void 0 : target.focusInner) === 'function' ? target.focusInner() : (_a = target === null || target === void 0 ? void 0 : target.focus) === null || _a === void 0 ? void 0 : _a.call(target);
+        if (commit) {
+            this.onSelect(value);
         }
     }
-    activateRadio(radios, index) {
-        const target = radios[index];
-        const value = this.min + index;
-        this.handleClick(value);
-        target.focus();
-    }
     render() {
         const count = this.max - this.min + 1;
-        //onst fallback = 0;
-        return (h("div", { key: '51e0d272693fd42d1f239f8498d9a5744dead8d7', class: "eds-nps" }, h("eds-input-label", { key: 'f9d3b65985e221f9608da3aba22cc1dc4dd54417', id: "nps-question", name: "nps-question", label: this.question }), h("div", { key: '00b22eff70fd1dd3d210e17aaef5df2057f99bb7', role: "group", id: "nps-buttons", "aria-labelledby": "nps-question", class: "grid grid-cols-11", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: count }, (_, i) => {
+        return (h("div", { key: 'ca0a63dd6554e39b78fe1c607af0fede74c692c7', class: "eds-nps" }, h("eds-input-label", { key: 'bdf231836d8c6dbd46e852753696c4b7dad577c7', id: "nps-question", name: "nps-question", label: this.question }), h("div", { key: '004ad431ca02e57c7848a4c3fd0a4ecff40b6573', id: "nps-buttons", role: "radiogroup", "aria-labelledby": "nps-question", class: "grid grid-cols-11", onKeyDown: this.handleKeyNav }, Array.from({ length: count }, (_, i) => {
             const val = this.min + i;
             const isSelected = val === this.selectedValue;
-            const tabIndex = isSelected ? 0 : -1;
-            return (h("div", { class: "grid-col-span-1", key: val }, 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) })));
-        })), h("div", { key: '7289bd6476a2080be3c02011240e2493b84079e5', class: "flex justify-between mt-8" }, h("span", { key: 'ebfcebd9aa3d11cf298e44987debd8edef1f6e40', class: "f-ui-04 text-light ml-4" }, this.leftLabel), h("span", { key: '002f9878b267439af9f83f9ffd1b52eaef46b929', class: "f-ui-04 text-light mr-4" }, this.rightLabel))));
+            // Roving tabindex: focusable is the selected; if none selected yet, first is focusable
+            const tabIndex = isSelected || (this.selectedValue == null && i === 0) ? 0 : -1;
+            return (h("div", { class: "grid-col-span-1", key: val }, h("eds-button", { ref: (el) => (this.btnRefs[i] = el), role: "radio", "aria-checked": isSelected ? 'true' : 'false', "aria-label": `${val}`,
+                // Use onClick so keyboard activation on inner <button> works natively
+                onClick: () => this.onSelect(val), tabIndex: tabIndex, intent: isSelected ? 'primary' : 'ghost', "extra-class": "!block !px-0 w-full", label: `${val}`,
+                // Optional: keep highlight in sync when tabbing into the group
+                onFocus: () => {
+                    // Only move highlight on initial focus or when roving; remove if you
+                    // want focus without highlight.
+                    this.selectedValue = val;
+                } })));
+        })), h("div", { key: 'ffd498e00559a76b44e8d98ed060db86e60fbde7', class: "flex justify-between mt-8" }, h("span", { key: '80065344c34d88ce3f01aac28d2b87ded60ec524', class: "f-ui-04 text-light ml-4" }, this.leftLabel), h("span", { key: '2a67b416e4e7b0bf61aa66cb4546192860bd372f', class: "f-ui-04 text-light mr-4" }, this.rightLabel))));
     }
     get el() { return getElement(this); }
 };
@@ -5267,7 +5318,7 @@ const EdsPagination = class {
     }
     render() {
         const navigableIndex = -1; // Track index for keyboard navigation
-        return (h("div", { key: 'bf34cb68555555ef984592b261929cfb5ef93048' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '47b8034e6fd839151cdaff04d4df43fec520ce40', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, h("span", { key: 'd9d340393777b7b6e808fa21d38f691f1002b363', class: "text-light sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination Navigation", "aria-describedby": this.mode === 'default' ? 'pagination-info' : undefined, onKeyDown: this.handleKeyDown }, h("ul", { class: "flex items-center justify-center gap-x-8", role: "list" }, h("li", { class: "mr-auto" }, this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, 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 (h("div", { key: '3ca147814cf1e0003bac73502a0ae2bf96412ce2' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '85e3fe3224888a4fc9029e91c53c5a753506af55', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, h("span", { key: '9edeecb5ae0a1c74dcbf11829a4079cdbbfd46e4', class: "text-light sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination Navigation", "aria-describedby": this.mode === 'default' ? 'pagination-info' : undefined, onKeyDown: this.handleKeyDown }, h("ul", { class: "flex items-center justify-center gap-x-8", role: "list" }, h("li", { class: "mr-auto" }, this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, 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);
                 }
@@ -5360,7 +5411,7 @@ const EdsRating = class {
         this.onSelect(next);
     }
     render() {
-        return (h("div", { key: '764b3b37545e97f028423fd5760b882e6151f767', 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) => {
+        return (h("div", { key: '52cc87859b174e2eb89392c083031ffde587fb7d', 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) => {
             const starRating = index + 1;
             const isSelected = starRating <= this.selectedRating;
             // Use the mapping text if available; otherwise, fall back to a generic label.
@@ -5373,6 +5424,170 @@ const EdsRating = class {
 };
 EdsRating.style = EdsRatingStyle0;
 
+const edsSidebarCss = ":host{display:block;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;transition:width 0.3s ease}:host(.collapsed){width:4rem}:host::-webkit-scrollbar{width:8px}:host::-webkit-scrollbar-track{background:transparent}:host::-webkit-scrollbar-thumb{background:rgba(0, 0, 0, 0.2);border-radius:4px}:host::-webkit-scrollbar-thumb:hover{background:rgba(0, 0, 0, 0.3)}.sidebar-nav{padding:0.5rem 0}.sidebar-header{display:flex;justify-content:flex-end;padding:0.5rem 0.75rem;margin-bottom:0.5rem}:host(.collapsed) .sidebar-header{justify-content:center;padding:0.5rem}.collapse-toggle{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;background:none;border:none;cursor:pointer;padding:0;border-radius:0.375rem;transition:background-color 0.15s ease;color:inherit}.collapse-toggle:hover{background-color:rgba(0, 0, 0, 0.08)}.collapse-toggle:focus-visible{outline:2px solid var(--eds-focus-color, #0066cc);outline-offset:2px}.sidebar-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.125rem}.sidebar-item{display:flex;flex-direction:column}.sidebar-item-content{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;cursor:pointer;user-select:none;word-break:break-word;transition:background-color 0.15s ease;border-radius:0.375rem;margin:0 0.5rem;position:relative}:host(.collapsed) .sidebar-item-content{justify-content:center;padding:0.75rem;margin:0 0.5rem}.sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.04)}.sidebar-item-content:focus-visible{outline:2px solid var(--eds-focus-color, #0066cc);outline-offset:-2px;z-index:1}.sidebar-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem}.sidebar-content-wrapper{display:flex;align-items:center;gap:0.5rem;flex:1;min-width:0}.sidebar-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;padding:0;margin:-0.125rem 0;pointer-events:none}.sidebar-link-wrapper{flex:1;min-width:0;pointer-events:none}.sidebar-link{font-weight:400;pointer-events:none}.sidebar-children{list-style:none;margin:0.25rem 0 0 0;padding:0;display:flex;flex-direction:column;gap:0.125rem;overflow:hidden;animation:slideDown 0.2s ease}@keyframes slideDown{from{opacity:0;transform:translateY(-0.25rem)}to{opacity:1;transform:translateY(0)}}.sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}:host(.collapsed) .sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}.sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}.sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}.sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}.sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}.sidebar-item.level-5 .sidebar-item-content{padding-left:7rem}:host(.theme-default) .sidebar-item-content{border-radius:0.375rem;margin:0 0.5rem;padding:0.5rem 0.75rem}:host(.theme-default.collapsed) .sidebar-item-content{margin:0 0.5rem;border-radius:0.375rem}:host(.theme-default) .sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.04)}:host(.theme-default) .sidebar-item.active>.sidebar-item-content{background-color:transparent}:host(.theme-default) .sidebar-item.active>.sidebar-item-content .sidebar-link{font-weight:600}:host(.theme-default) .sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}:host(.theme-default) .sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}:host(.theme-default) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}:host(.theme-default) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}:host(.theme-default) .sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}:host(.theme-minimal) .sidebar-item-content{border-radius:0;margin:0;padding-left:1rem;padding-right:1rem}:host(.theme-minimal.collapsed) .sidebar-item-content{margin:0 0.25rem;border-radius:0.375rem}:host(.theme-minimal) .sidebar-item-content:hover{background-color:var(--grey-300)}:host(.theme-minimal) .sidebar-item.active>.sidebar-item-content{background-color:var(--grey-400);border-left:3px solid var(--grey-900);padding-left:calc(1rem - 3px)}:host(.theme-minimal.collapsed) .sidebar-item.active>.sidebar-item-content{border-left:none;border-radius:0.375rem;padding-left:0.75rem}:host(.theme-minimal) .sidebar-item.level-1.active>.sidebar-item-content{padding-left:calc(2rem - 3px)}:host(.theme-minimal) .sidebar-item.level-2.active>.sidebar-item-content{padding-left:calc(3.25rem - 3px)}:host(.theme-minimal) .sidebar-item.level-3.active>.sidebar-item-content{padding-left:calc(4.5rem - 3px)}:host(.theme-minimal) .sidebar-item.level-4.active>.sidebar-item-content{padding-left:calc(5.75rem - 3px)}:host(.theme-minimal) .sidebar-item.level-0 .sidebar-item-content{padding-left:1rem}:host(.theme-minimal) .sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}:host(.theme-minimal) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}:host(.theme-minimal) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}:host(.theme-minimal) .sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}:host(.theme-minimal) .sidebar-children{position:relative}:host(.theme-ebrains) .sidebar-item-content{padding:0.5rem 1rem;border-radius:0.5rem;margin:0 0.5rem}:host(.theme-ebrains.collapsed) .sidebar-item-content{padding:0.75rem}:host(.theme-ebrains) .sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.05)}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content{background-color:var(--green-600, #22c55e);color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-link{--eds-link-color:white;--eds-link-hover-color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-toggle{color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-icon{color:white}:host(.theme-ebrains) .sidebar-item.level-0 .sidebar-item-content{padding-left:1rem}:host(.theme-ebrains) .sidebar-item.level-1 .sidebar-item-content{padding-left:2.25rem}:host(.theme-ebrains) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.5rem}:host(.theme-ebrains) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.75rem}:host(.theme-ebrains) .sidebar-item.level-4 .sidebar-item-content{padding-left:6rem}@media (prefers-color-scheme: dark){.collapse-toggle:hover{background-color:rgba(255, 255, 255, 0.08)}:host(.theme-default) .sidebar-item-content:hover{background-color:rgba(255, 255, 255, 0.05)}:host(.theme-default) .sidebar-item.active>.sidebar-item-content{background-color:rgba(0, 102, 204, 0.15)}:host(.theme-minimal) .sidebar-item-content:hover{background-color:rgba(255, 255, 255, 0.06)}:host::-webkit-scrollbar-thumb{background:rgba(255, 255, 255, 0.2)}:host::-webkit-scrollbar-thumb:hover{background:rgba(255, 255, 255, 0.3)}}.sidebar-toggle eds-icon-wrapper,.sidebar-icon eds-icon-wrapper,.collapse-toggle eds-icon-wrapper{transition:transform 0.15s ease;display:flex;align-items:center;justify-content:center}.sidebar-item-content:focus-visible .sidebar-link{text-decoration:underline}.sidebar-item.active>.sidebar-item-content .sidebar-link{font-weight:500}:host(.collapsed) .sidebar-item-content::after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:0.5rem;padding:0.5rem 0.75rem;background:rgba(0, 0, 0, 0.9);color:white;border-radius:0.375rem;white-space:nowrap;font-size:0.875rem;opacity:0;pointer-events:none;transition:opacity 0.2s ease;z-index:1000}:host(.collapsed) .sidebar-item-content:hover::after{opacity:1;transition-delay:0.3s}.-ml-4{margin-left:-0.25rem}.mt-2{margin-top:0.125rem}";
+const EdsSidebarStyle0 = edsSidebarCss;
+
+const EdsSidebar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sidebar = createEvent(this, "sidebar", 7);
+        this.toggleItem = (itemId, ev) => {
+            if (ev) {
+                ev.stopPropagation();
+            }
+            const newOpen = new Set(this.openItems);
+            if (newOpen.has(itemId)) {
+                newOpen.delete(itemId);
+            }
+            else {
+                newOpen.add(itemId);
+            }
+            this.openItems = newOpen;
+        };
+        this.navigate = (url, ev) => {
+            if (!this.enableRouting || !url) {
+                return;
+            }
+            if (ev) {
+                ev.preventDefault();
+                ev.stopPropagation();
+            }
+            // Emit custom event for routing
+            this.sidebar.emit(url);
+            // Update browser history if available
+            if (typeof window !== 'undefined' && window.history) {
+                window.history.pushState({}, '', url);
+            }
+        };
+        this.handleItemClick = (item, ev) => {
+            var _a;
+            // If item has children, ONLY toggle (don't navigate)
+            if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
+                this.toggleItem(item.id, ev);
+                return;
+            }
+            // Only navigate if no children and has URL
+            if (item.url) {
+                this.navigate(item.url, ev);
+            }
+        };
+        this.items = '[]';
+        this.theme = 'default';
+        this.activeUrl = '';
+        this.enableRouting = true;
+        this.maxLevel = 4;
+        this.openItems = new Set();
+        this.parsedItems = [];
+    }
+    // ---------------------------------------------------------------------------
+    // Lifecycle
+    // ---------------------------------------------------------------------------
+    componentWillLoad() {
+        this.parsedItems = this.parseItems(this.items);
+        this.initializeOpenItems(this.parsedItems);
+    }
+    // ---------------------------------------------------------------------------
+    // Watchers
+    // ---------------------------------------------------------------------------
+    handleItemsChange(newItems) {
+        this.parsedItems = this.parseItems(newItems);
+        this.initializeOpenItems(this.parsedItems);
+    }
+    handleActiveUrlChange() {
+        this.initializeOpenItems(this.parsedItems);
+    }
+    // ---------------------------------------------------------------------------
+    // Utils
+    // ---------------------------------------------------------------------------
+    parseItems(items) {
+        if (Array.isArray(items)) {
+            return items;
+        }
+        if (typeof items === 'string') {
+            if (!items || items.trim() === '') {
+                return [];
+            }
+            try {
+                const parsed = JSON.parse(items);
+                return Array.isArray(parsed) ? parsed : [];
+            }
+            catch (e) {
+                console.error('eds-sidebar: Failed to parse items JSON:', e);
+                console.error('Received string:', items);
+                return [];
+            }
+        }
+        return [];
+    }
+    initializeOpenItems(items, level = 0) {
+        if (level === 0) {
+            // reset before recomputing
+            this.openItems = new Set();
+        }
+        if (level >= this.maxLevel) {
+            return;
+        }
+        items.forEach((item) => {
+            var _a;
+            const isActive = this.activeUrl && item.url === this.activeUrl;
+            const hasActiveChild = this.hasActiveDescendant(item);
+            if (item.open || isActive || hasActiveChild) {
+                this.openItems.add(item.id);
+            }
+            if ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) {
+                this.initializeOpenItems(item.children, level + 1);
+            }
+        });
+    }
+    hasActiveDescendant(item) {
+        var _a;
+        if (item.url === this.activeUrl) {
+            return true;
+        }
+        if (!((_a = item.children) === null || _a === void 0 ? void 0 : _a.length)) {
+            return false;
+        }
+        return item.children.some((child) => this.hasActiveDescendant(child));
+    }
+    // ---------------------------------------------------------------------------
+    // Render
+    // ---------------------------------------------------------------------------
+    renderItem(item, level = 0) {
+        if (level >= this.maxLevel) {
+            return null;
+        }
+        const isOpen = this.openItems.has(item.id);
+        const isActive = !!item.url && this.activeUrl === item.url;
+        const hasChildren = !!(item.children && item.children.length);
+        const itemId = `eds-sidebar-${item.id}`;
+        const childrenId = `${itemId}-children`;
+        return (h("li", { class: {
+                'sidebar-item': true,
+                open: isOpen,
+                active: isActive,
+                'has-children': hasChildren,
+                [`level-${level}`]: true
+            } }, h("div", { class: "sidebar-item-content", onClick: (e) => this.handleItemClick(item, e), role: hasChildren ? 'button' : item.url ? 'link' : 'button', tabindex: "0", "aria-current": isActive ? 'page' : undefined, "aria-expanded": hasChildren ? (isOpen ? 'true' : 'false') : undefined, "aria-controls": hasChildren ? childrenId : undefined, onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleItemClick(item, e);
+                }
+            } }, hasChildren && (h("span", { class: "sidebar-toggle mt-2 -ml-4", "aria-hidden": "true" }, h("eds-icon-wrapper", { icon: isOpen ? 'chevron-down' : 'chevron-right' }))), h("span", { class: "sidebar-link-wrapper" }, h("eds-link", { label: item.title, url: item.url || '#', intent: isActive ? 'strong' : 'weak', size: "small", "aria-label": item.title, "extra-class": "sidebar-link", tabindex: "-1" }))), hasChildren && isOpen && (h("ul", { id: childrenId, class: "sidebar-children" }, item.children.map((child) => this.renderItem(child, level + 1))))));
+    }
+    render() {
+        return (h(Host, { key: '4334d20e5d72671243633253910ab05b4da013da', class: {
+                'eds-sidebar': true,
+                [`theme-${this.theme}`]: true
+            } }, h("nav", { key: '319f6f42416d4229f1b011bf1216b39c8627302d', class: "sidebar-nav", "aria-label": "Sidebar" }, h("ul", { key: '687ceae3eca3e844e8f6a361db4a76d127d27813', class: "sidebar-list" }, this.parsedItems.map((item) => this.renderItem(item, 0))))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "items": ["handleItemsChange"],
+        "activeUrl": ["handleActiveUrlChange"]
+    }; }
+};
+EdsSidebar.style = EdsSidebarStyle0;
+
 const edsSpinnerCss = ":host{display:block}.spinner{box-sizing:border-box;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.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)}";
 const EdsSpinnerStyle0 = edsSpinnerCss;
 
@@ -5449,12 +5664,12 @@ const EdsSpinner = class {
                 alignItems: 'center',
                 justifyContent: 'center'
             };
-        return (h(Host, { key: 'dbf06a1430e3a69314ec016937a9b3ba89229353' }, h("div", { key: '12a51b0eed154fd2c6b6ae4ce586630a8f61164a', class: "spinner-overlay", style: overlayStyle }, h("span", { key: '0e63b80c45efec7b226b5f4277fe00e4f7bc4f1b', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: '8625d4589ec26c9513d1dc7a53fa17b9874fcf3c', class: "f-body-01" }, this.message))));
+        return (h(Host, { key: 'c50ca410eb23855b3076babb78b4849246722cf7' }, h("div", { key: '9b3722b00777a0dd77288c4c3b29419a9b87640b', class: "spinner-overlay", style: overlayStyle }, h("span", { key: '5479d0195b6d8991613df8ae03eee34b2a095b6b', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: '448c3b0e6ce0aac6c21b53c58b97e423a1739864', class: "f-body-01" }, this.message))));
     }
 };
 EdsSpinner.style = EdsSpinnerStyle0;
 
-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}.eds-steps__title{cursor:pointer}";
+const edsStepsCss = "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;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:-39px;top:-2px;display:flex;align-items:center;justify-content:center;width:31px;height:31px;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)}.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-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)}.text-center{text-align:center}.text-default{color:var(--black)}.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}.justify-between{justify-content:space-between}.mt-16{margin-top:1rem}.mt-32{margin-top:2rem}.mt-64{margin-top:4rem}.my-16{margin-top:1rem;margin-bottom:1rem}.mb-12{margin-bottom:0.75rem}.mb-16{margin-bottom:1rem}.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}.items-center{align-items:center}.px-8{padding-left:0.5rem;padding-right:0.5rem}.pb-20{padding-bottom:1.25rem}.eds-steps__title[role=\"button\"]{cursor:pointer}.eds-steps__title.is-disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.5);}.eds-steps__title.is-disabled::before{opacity:1;filter:none}.steps--horizontal{display:flex;flex-direction:column;gap:2rem}.horizontal-indicators{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0}.horizontal-step{display:flex;flex-direction:column;align-items:center;gap:0.5rem;cursor:pointer;flex:1;position:relative}.horizontal-step:not(:last-child)::after{content:'';position:absolute;top:1.25rem;left:50%;width:100%;height:2px;background-color:#e0e0e0;z-index:-1}.horizontal-step.is-completed:not(:last-child)::after{background-color:var(--green-500);}.step-indicator{width:2.5rem;height:2.5rem;border-radius:50%;border:2px solid #e0e0e0;display:flex;align-items:center;justify-content:center;background-color:white;transition:all 0.3s ease}.horizontal-step.is-active .step-indicator{border-color:var(--green-500);background-color:var(--green-500);color:var(--white)}.horizontal-step.is-completed .step-indicator{border-color:var(--green-500);background-color:var(--white)}.horizontal-step.is-disabled{opacity:0.5;cursor:not-allowed}.step-number{font-weight:600;font-size:0.875rem}.step-label{font-size:0.875rem;text-align:center;font-weight:500}.horizontal-step.is-active .step-label{color:var(--green-500)}.step-content{padding:2rem 0;margin-left:calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);margin-right:calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem)}.opacity-50{opacity:0.5}.eds-steps__title[role=\"button\"]{cursor:pointer}";
 const EdsStepsStyle0 = edsStepsCss;
 
 const EdsSteps = class {
@@ -5465,47 +5680,63 @@ const EdsSteps = class {
         this.next = createEvent(this, "next", 7);
         this.back = createEvent(this, "back", 7);
         this.handleTitleClick = (index) => {
-            // 1) If clicking the current title, keep your existing toggle behavior
-            if (index === this.activeStep) {
-                this.activeStep = this.activeStep === index ? -1 : index;
+            // In linear mode, do NOT collapse; only navigate if allowed.
+            if (this.type === 'linear') {
+                // prevent jumping forward over disabled steps
+                if (index > this.activeStep) {
+                    for (let i = this.activeStep; i < index; i++) {
+                        if (this.isStepDisabled(i)) {
+                            return;
+                        }
+                    }
+                }
+                this.activeStep = index;
                 this.step.emit(this.activeStep);
                 return;
             }
-            // 2) In linear mode, block jumping *forward* when current step is gated
-            const forwardBlocked = this.type === 'linear' && index > this.activeStep && this.isNextDisabledFor(this.activeStep);
-            if (forwardBlocked) {
+            // Non-linear vertical mode: support optional collapse/expand on current title
+            if (this.orientation === 'vertical' && index === this.activeStep && this.collapsibleTitles) {
+                this.activeStep = this.activeStep === index ? -1 : index;
+                this.step.emit(this.activeStep);
                 return;
-            } // do nothing when Next/Finish would be disabled
-            // 3) Allow jumping back or forward when not gated
+            }
+            // Otherwise, just set
             this.activeStep = index;
             this.step.emit(this.activeStep);
         };
         this.handleNext = () => {
             const lastIndex = this.parsedSteps.length - 1;
+            // On last step
             if (this.activeStep >= lastIndex) {
-                this.activeStep = -1;
                 this.finished.emit();
+                this.activeStep = -1; // collapse the content
+                this.step.emit(this.activeStep); // notify change (-1 sentinel)
                 return;
             }
             const target = this.activeStep + 1;
             this.next.emit(target);
-            if (this.isNextDisabledFor(this.activeStep)) {
+            if (this.isStepDisabled(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 = () => {
+            const lastIndex = this.parsedSteps.length - 1;
+            // If somehow collapsed, recover to last visible step first
+            if (this.activeStep < 0) {
+                this.activeStep = lastIndex;
+                this.step.emit(this.activeStep);
+                return;
+            }
             if (this.activeStep > 0) {
                 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;
                 }
@@ -5513,51 +5744,91 @@ const EdsSteps = class {
         };
         this.steps = [];
         this.type = 'static';
+        this.orientation = 'vertical';
         this.nextLabel = 'Next';
         this.backLabel = 'Back';
         this.finishLabel = 'Finish';
         this.disableNext = false;
         this.headingLevel = 'h4';
+        this.collapsibleTitles = false;
         this.activeStep = 0;
     }
+    handleDisableNextChange(newValue) {
+        if (typeof newValue === 'string' && newValue.trim().startsWith('[')) {
+            try {
+                this.disableNext = JSON.parse(newValue);
+            }
+            catch (e) {
+                console.error('Failed to parse disable-next array:', e);
+            }
+        }
+    }
+    componentWillLoad() {
+        this.handleDisableNextChange(this.disableNext);
+    }
     componentDidLoad() {
-        var _a;
         if (this.type === 'linear') {
-            const btns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-button');
+            const root = this.el.shadowRoot || this.el;
+            const btns = root.querySelectorAll('eds-button');
             btns === null || btns === void 0 ? void 0 : btns.forEach((btn) => this.emitContext(btn));
         }
     }
     activeStepChanged(newValue) {
+        // Clamp to valid range or collapsed sentinel
+        const max = Math.max(0, this.parsedSteps.length - 1);
+        if (newValue > max) {
+            this.activeStep = max;
+            return;
+        }
+        if (newValue < -1) {
+            this.activeStep = -1;
+            return;
+        }
+        // If collapsed (only possible in non-linear mode), do not emit context
+        if (newValue < 0) {
+            return;
+        }
         setTimeout(() => {
-            var _a;
-            const activeStepContainer = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.step')[newValue];
-            if (activeStepContainer) {
-                activeStepContainer.querySelectorAll('eds-button').forEach((btn) => this.emitContext(btn));
-            }
+            const root = this.el.shadowRoot || this.el;
+            const all = root.querySelectorAll('.step');
+            const active = all && newValue < all.length ? all[newValue] : undefined;
+            active === null || active === void 0 ? void 0 : active.querySelectorAll('eds-button').forEach((btn) => this.emitContext(btn));
         }, 50);
     }
     emitContext(linkElement) {
         const event = new CustomEvent('parentContext', {
-            detail: {
-                componentName: this.el.tagName.toLowerCase(),
-                identifier: this.activeStep
-            }
+            detail: { componentName: this.el.tagName.toLowerCase(), identifier: this.activeStep },
+            bubbles: true,
+            composed: true
         });
         linkElement.dispatchEvent(event);
     }
     get parsedSteps() {
         return parseData(this.steps);
     }
+    isStepDisabled(index) {
+        if (Array.isArray(this.disableNext)) {
+            return index < this.disableNext.length ? !!this.disableNext[index] : false;
+        }
+        return index === this.activeStep && !!this.disableNext;
+    }
     isNextDisabledFor(index) {
-        return Array.isArray(this.disableNext)
-            ? !!this.disableNext[index] // per-step
-            : index === this.activeStep && !!this.disableNext; // only active step
+        return this.isStepDisabled(index);
     }
     /** Render the semantic heading element as a clickable control only in linear mode */
     renderHeading(title, index) {
         const Tag = this.headingLevel;
+        const isOpen = this.activeStep === index;
         if (this.type === 'linear') {
-            const forwardBlocked = index > this.activeStep && this.isNextDisabledFor(this.activeStep);
+            let forwardBlocked = false;
+            if (index > this.activeStep) {
+                for (let i = this.activeStep; i < index; i++) {
+                    if (this.isStepDisabled(i)) {
+                        forwardBlocked = true;
+                        break;
+                    }
+                }
+            }
             const onKey = (e) => {
                 if (forwardBlocked) {
                     return;
@@ -5567,30 +5838,67 @@ const EdsSteps = class {
                     this.handleTitleClick(index);
                 }
             };
-            const isOpen = this.activeStep === index;
             return (h(Tag, { class: `eds-steps__title ${forwardBlocked ? 'is-disabled' : ''}`, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-disabled": forwardBlocked ? 'true' : 'false', "aria-expanded": isOpen, "aria-controls": `eds-step-panel-${index}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey }, title));
         }
-        return h(Tag, { class: "eds-steps__title" }, title);
+        return (h(Tag, { class: `eds-steps__title ${this.collapsibleTitles && index !== this.activeStep ? '' : ''}`, onClick: () => this.handleTitleClick(index) }, title));
+    }
+    /** Render horizontal step indicator */
+    renderHorizontalIndicator(step, index) {
+        const isActive = this.activeStep === index;
+        const isCompleted = this.activeStep > index;
+        let forwardBlocked = false;
+        if (index > this.activeStep) {
+            for (let i = this.activeStep; i < index; i++) {
+                if (this.isStepDisabled(i)) {
+                    forwardBlocked = true;
+                    break;
+                }
+            }
+        }
+        const onKey = (e) => {
+            if (forwardBlocked) {
+                return;
+            }
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.handleTitleClick(index);
+            }
+        };
+        return (h("div", { class: `horizontal-step ${isActive ? 'is-active' : ''} ${isCompleted ? 'is-completed' : ''}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-label": `Step ${index + 1}: ${step.title}`, "aria-current": isActive ? 'step' : undefined, "aria-disabled": forwardBlocked ? 'true' : 'false' }, h("div", { class: "step-indicator" }, h("span", { class: "step-number" }, index + 1)), h("span", { class: `text-center text-default f-ui-03 ${forwardBlocked ? 'opacity-50' : ''}` }, step.title)));
     }
     render() {
         const steps = this.parsedSteps;
+        // Horizontal Linear
+        if (this.type === 'linear' && this.orientation === 'horizontal') {
+            return (h("div", { class: "steps--horizontal", style: { '--step-count': steps.length.toString() } }, h("div", { class: "horizontal-indicators" }, steps.map((step, index) => this.renderHorizontalIndicator(step, index))), steps.map((step, index) => {
+                const isLast = index === steps.length - 1;
+                if (this.activeStep !== index) {
+                    return null;
+                }
+                const marginClass = this.orientation === 'horizontal' ? 'mt-64' : 'mt-32';
+                return (h("div", { class: "step-content", key: index, id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null })), h("slot", { name: `actions-${index}` })));
+            })));
+        }
+        // Vertical Linear
         if (this.type === 'linear') {
             return (h("div", { class: "steps" }, steps.map((step, index) => {
                 const isLast = index === steps.length - 1;
-                return (h("div", { class: "step mb-28", key: index }, this.renderHeading(step.title, index), this.activeStep === index && (h("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: isLast ? 'f-body-02 text-lighter' : 'f-body-02 text-lighter', innerHTML: step.content })), h("div", { class: "flex items-center mt-16" }, h("eds-button", { label: this.backLabel, intent: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: "ml-8" })), h("slot", { name: `actions-${index}` })))));
+                const marginClass = this.orientation === 'horizontal' ? 'mt-64' : 'mt-32';
+                return (h("div", { class: "step mb-16", key: index }, this.renderHeading(step.title, index), this.activeStep === index && (h("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null })), h("slot", { name: `actions-${index}` })))));
             })));
         }
-        // Static: no navigation buttons
-        return (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-28", key: index }, this.renderHeading(step.title, index), h("div", { class: "content", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content }))))))));
+        // Static
+        return (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-16", key: index }, this.renderHeading(step.title, index), h("div", { class: "content", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "f-body-02 text-lighter my-16", innerHTML: step.content }))))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "disableNext": ["handleDisableNextChange"],
         "activeStep": ["activeStepChanged"]
     }; }
 };
 EdsSteps.style = EdsStepsStyle0;
 
-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}.eds-steps__title{cursor:pointer}";
+const edsStepsV2Css = "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:-41px;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)}.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-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)}.text-center{text-align:center}.text-default{color:var(--black)}.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}.justify-between{justify-content:space-between}.mt-16{margin-top:1rem}.mt-32{margin-top:2rem}.mt-64{margin-top:4rem}.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}.items-center{align-items:center}.px-8{padding-left:0.5rem;padding-right:0.5rem}.pb-20{padding-bottom:1.25rem}.eds-steps__title[role=\"button\"]{cursor:pointer}.eds-steps__title.is-disabled{cursor:not-allowed;color:rgba(0, 0, 0, 0.5);}.eds-steps__title.is-disabled::before{opacity:1;filter:none}.steps--horizontal{display:flex;flex-direction:column;gap:2rem}.horizontal-indicators{display:flex;justify-content:space-between;gap:1rem;padding:1rem 0}.horizontal-step{display:flex;flex-direction:column;align-items:center;gap:0.5rem;cursor:pointer;flex:1;position:relative}.horizontal-step:not(:last-child)::after{content:'';position:absolute;top:1.25rem;left:50%;width:100%;height:2px;background-color:#e0e0e0;z-index:-1}.horizontal-step.is-completed:not(:last-child)::after{background-color:var(--green-500);}.step-indicator{width:2.5rem;height:2.5rem;border-radius:50%;border:2px solid #e0e0e0;display:flex;align-items:center;justify-content:center;background-color:white;transition:all 0.3s ease;z-index:2}.horizontal-step.is-active .step-indicator{border-color:var(--green-500);background-color:var(--green-500);color:var(--white)}.horizontal-step.is-completed .step-indicator{border-color:var(--green-500);background-color:var(--white)}.horizontal-step.is-disabled{opacity:0.5;cursor:not-allowed}.step-number{font-weight:600;font-size:0.875rem}.step-label{font-size:0.875rem;text-align:center;font-weight:500}.horizontal-step.is-active .step-label{color:var(--green-500)}.step-content{padding:2rem 0;margin-left:calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);margin-right:calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem)}.opacity-50{opacity:0.5}";
 const EdsStepsV2Style0 = edsStepsV2Css;
 
 const EdsStepsV2 = class {
@@ -5601,48 +5909,74 @@ const EdsStepsV2 = class {
         this.next = createEvent(this, "next", 7);
         this.back = createEvent(this, "back", 7);
         this.handleTitleClick = (index) => {
-            // If clicking the same title, keep your existing toggle behavior
-            if (index === this.activeStep) {
-                this.activeStep = this.activeStep === index ? -1 : index;
+            // In linear mode, do NOT collapse; only navigate if allowed.
+            if (this.type === 'linear') {
+                if (index > this.activeStep) {
+                    // Prevent jumping forward over disabled steps
+                    for (let i = this.activeStep; i < index; i++) {
+                        if (this.isStepDisabled(i)) {
+                            return;
+                        }
+                    }
+                }
+                this.activeStep = index;
                 this.step.emit(this.activeStep);
                 return;
             }
-            // Block *forward* jumps when progression is gated by disableNext (boolean)
-            const forwardBlocked = this.type === 'linear' && index > this.activeStep && this.isNextDisabledForCurrent();
-            if (forwardBlocked) {
+            // Non-linear vertical mode can toggle collapse of the current title
+            if (this.orientation === 'vertical' && index === this.activeStep) {
+                this.activeStep = this.activeStep === index ? -1 : index;
+                this.step.emit(this.activeStep);
                 return;
             }
-            // Allow back (or forward when not gated)
+            // Otherwise just set
             this.activeStep = index;
             this.step.emit(this.activeStep);
         };
         this.handleNext = () => {
             const lastIndex = this.parsedSteps.length - 1;
+            // On last step: do NOT collapse; keep content visible, just emit finished
             if (this.activeStep >= lastIndex) {
                 this.finished.emit();
-                this.activeStep = -1; // collapse last step
+                this.activeStep = -1; // collapse the content
+                this.step.emit(this.activeStep); // notify change (-1 sentinel)
                 return;
             }
             const target = this.activeStep + 1;
             this.next.emit(target);
-            if (!this.disableNext) {
-                this.activeStep = target;
-                this.step.emit(this.activeStep);
+            if (this.isStepDisabled(this.activeStep)) {
+                return;
+            }
+            this.activeStep = target;
+            this.step.emit(this.activeStep);
+            // clear boolean form when moving away from a step
+            if (!Array.isArray(this.disableNext)) {
+                this.disableNext = false;
             }
         };
         this.handleBack = () => {
+            const lastIndex = this.parsedSteps.length - 1;
+            // Recover from collapsed sentinel if it ever occurs
+            if (this.activeStep < 0) {
+                this.activeStep = lastIndex;
+                this.step.emit(this.activeStep);
+                return;
+            }
             if (this.activeStep > 0) {
                 const target = this.activeStep - 1;
                 this.back.emit(target);
                 this.activeStep = target;
                 this.step.emit(this.activeStep);
+                if (!Array.isArray(this.disableNext)) {
+                    this.disableNext = false;
+                }
             }
         };
         this.steps = [];
         this.type = 'static';
+        this.orientation = 'vertical';
         this.imageSrc = undefined;
         this.imageWidth = undefined;
-        this.bg = true;
         this.message = undefined;
         this.nextLabel = 'Next';
         this.backLabel = 'Back';
@@ -5651,57 +5985,87 @@ const EdsStepsV2 = class {
         this.headingLevel = 'h4';
         this.activeStep = 0;
     }
-    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);
-            });
+    handleDisableNextChange(newValue) {
+        if (typeof newValue === 'string' && newValue.trim().startsWith('[')) {
+            try {
+                this.disableNext = JSON.parse(newValue);
+            }
+            catch (e) {
+                console.error('Failed to parse disable-next array:', e);
+            }
         }
     }
     activeStepChanged(newValue) {
+        // Clamp and ignore collapsed sentinel
+        const max = Math.max(0, this.parsedSteps.length - 1);
+        if (newValue > max) {
+            this.activeStep = max;
+            return;
+        }
+        if (newValue < -1) {
+            this.activeStep = -1;
+            return;
+        }
+        if (newValue < 0) {
+            return;
+        } // ignore collapsed state if ever set elsewhere
+        // Emit parentContext to buttons inside the newly active step
         setTimeout(() => {
-            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);
-                });
-            }
+            const host = this.el.shadowRoot || this.el;
+            const activeStepContainer = host.querySelectorAll('.step')[newValue];
+            activeStepContainer === null || activeStepContainer === void 0 ? void 0 : activeStepContainer.querySelectorAll('eds-button').forEach((btn) => this.emitContext(btn));
         }, 50);
     }
+    componentWillLoad() {
+        this.handleDisableNextChange(this.disableNext);
+    }
+    componentDidLoad() {
+        if (this.type === 'linear') {
+            const host = this.el.shadowRoot || this.el;
+            const btns = host.querySelectorAll('eds-button');
+            btns === null || btns === void 0 ? void 0 : btns.forEach((btn) => this.emitContext(btn));
+        }
+    }
     emitContext(linkElement) {
         const event = new CustomEvent('parentContext', {
             detail: {
                 componentName: this.el.tagName.toLowerCase(),
                 identifier: this.activeStep
-            }
+            },
+            bubbles: true,
+            composed: true
         });
         linkElement.dispatchEvent(event);
     }
     articleClasses() {
-        return [
-            this.bg ? 'bg-inverse' : 'bg-default',
-            'border-softer effect-focus-within relative rounded-lg border-2'
-        ].join(' ');
+        return ['border-softer effect-focus-within relative rounded-lg border-2'].join(' ');
     }
-    /**
-     * Parses the steps property into an array of Step objects.
-     */
     get parsedSteps() {
         return parseData(this.steps);
     }
-    isNextDisabledForCurrent() {
-        return !!this.disableNext;
+    isStepDisabled(index) {
+        if (Array.isArray(this.disableNext)) {
+            return index < this.disableNext.length ? !!this.disableNext[index] : false;
+        }
+        return index === this.activeStep && !!this.disableNext;
+    }
+    isNextDisabledFor(index) {
+        return this.isStepDisabled(index);
     }
-    /** Render the semantic heading element */
     renderHeading(title, index) {
         const Tag = this.headingLevel;
         if (this.type === 'linear') {
             const isOpen = this.activeStep === index;
-            const forwardBlocked = index > this.activeStep && this.isNextDisabledForCurrent();
+            // Check if jumping to this step crosses a disabled step
+            let forwardBlocked = false;
+            if (index > this.activeStep) {
+                for (let i = this.activeStep; i < index; i++) {
+                    if (this.isStepDisabled(i)) {
+                        forwardBlocked = true;
+                        break;
+                    }
+                }
+            }
             const onKey = (e) => {
                 if (forwardBlocked) {
                     return;
@@ -5713,16 +6077,46 @@ const EdsStepsV2 = class {
             };
             return (h(Tag, { class: `eds-steps__title ${forwardBlocked ? 'is-disabled' : ''}`, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-disabled": forwardBlocked ? 'true' : 'false', "aria-expanded": isOpen, "aria-controls": `eds-step-panel-${index}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey }, title));
         }
-        return h(Tag, { class: "eds-steps__title" }, title);
+        return (h(Tag, { class: "eds-steps__title", onClick: () => this.handleTitleClick(index) }, title));
+    }
+    /** Render horizontal indicator item */
+    renderHorizontalIndicator(step, index) {
+        const isActive = this.activeStep === index;
+        const isCompleted = this.activeStep > index;
+        let forwardBlocked = false;
+        if (index > this.activeStep) {
+            for (let i = this.activeStep; i < index; i++) {
+                if (this.isStepDisabled(i)) {
+                    forwardBlocked = true;
+                    break;
+                }
+            }
+        }
+        const onKey = (e) => {
+            if (forwardBlocked) {
+                return;
+            }
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.handleTitleClick(index);
+            }
+        };
+        return (h("div", { class: `horizontal-step ${isActive ? 'is-active' : ''} ${isCompleted ? 'is-completed' : ''}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-label": `Step ${index + 1}: ${step.title}`, "aria-current": isActive ? 'step' : undefined, "aria-disabled": forwardBlocked ? 'true' : 'false' }, h("div", { class: "step-indicator" }, h("span", { class: "step-number" }, index + 1)), h("span", { class: `text-center text-default f-ui-03 ${forwardBlocked ? 'opacity-50' : ''}` }, step.title)));
     }
     render() {
         const steps = this.parsedSteps;
-        return (h("div", { key: 'b486aa34dfab4902cd6569cc2ce228104ca536cd', class: this.articleClasses() }, this.imageSrc ? (h("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, h("eds-img", { src: this.imageSrc, width: this.imageWidth, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (h("div", { class: "w-full bg-[#00A595] rounded-t-lg border-2" }, h("div", { class: "p-24" }, h("span", { class: "text-inverse f-heading-04 " }, this.message))))), h("div", { key: 'e2a928ecb67caed4885c9e364621b422249610f1', class: "pb-20 px-8" }, this.type === 'linear' ? (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: index === 0 ? 'step' : 'step space-y-16', key: index }, this.renderHeading(step.title, index), this.activeStep === index && (h("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter' : 'f-body-02 text-lighter', innerHTML: step.content })), h("div", { class: "flex items-center" }, h("eds-button", { label: this.backLabel, intent: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), h("eds-button", { label: index === 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.
-        h("div", { class: "steps space-y-8" }, steps.map((step, index) => (h("div", { class: "step", key: index }, this.renderHeading(step.title, index), h("div", { class: "content", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter', innerHTML: step.content })))))))))));
+        const marginClass = this.orientation === 'horizontal' ? 'mt-64' : 'mt-32';
+        return (h("div", { key: '0f9dbb87f9cd269057183ee969addd55e85b2149', class: this.articleClasses() }, this.imageSrc ? (h("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, h("eds-img", { src: this.imageSrc, width: this.imageWidth, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (h("div", { class: "w-full bg-[#00A595] rounded-t-lg border-2" }, h("div", { class: "p-24" }, h("span", { class: "text-inverse f-heading-04" }, this.message))))), h("div", { key: 'd636d36c2e95d73c23c269b1faf67870eca97c16', class: "mt-16 pb-20 px-8" }, this.type === 'linear' && this.orientation === 'horizontal' ? (h("div", { class: "steps--horizontal", style: { '--step-count': steps.length.toString() } }, h("div", { class: "horizontal-indicators" }, steps.map((step, index) => this.renderHorizontalIndicator(step, index))), steps.map((step, index) => {
+            const isLast = index === steps.length - 1;
+            if (this.activeStep !== index) {
+                return null;
+            }
+            return (h("div", { class: "step-content", key: index, id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null })), h("slot", { name: `actions-${index}` })));
+        }))) : this.type === 'linear' ? (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: index === 0 ? 'step' : 'step mt-16', key: index }, this.renderHeading(step.title, index), this.activeStep === index && (h("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, h("eds-button", { label: this.backLabel, intent: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), h("eds-button", { label: index === steps.length - 1 ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null }))))))))) : (h("div", { class: "steps space-y-8" }, steps.map((step, index) => (h("div", { class: "step", key: index }, this.renderHeading(step.title, index), h("div", { class: "content", id: `eds-step-panel-${index}` }, h("div", { class: "content-body" }, h("slot", { name: `step-${index}` }, h("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content }))))))))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "disableNext": ["handleDisableNextChange"],
         "activeStep": ["activeStepChanged"]
     }; }
 };
@@ -5778,17 +6172,17 @@ const EdsSwitch = class {
                     : this.labelOff
                 : 'Toggle switch'
             : undefined;
-        return (h("div", { key: 'd73bf797be76e256e065ab8b4fbe68a44802d3f1', class: "switch-container" }, this.labelOff && (h("span", { key: 'f4897e3d9948358a82bd61ea26c86e0d2eba81b5', id: `${switchId}-off`, class: "switch-label switch-label--off mr-8" }, this.labelOff)), h("button", { key: 'a01753fce0fedbf8a25d2cd64c662da8e69fef95', 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 (h("div", { key: 'a339677097f16cd2dfe180f0a7de26d4963a9f17', class: "switch-container" }, this.labelOff && (h("span", { key: '7db8e71c0f1668fb66f2b1ff049706b80b4683b3', id: `${switchId}-off`, class: "switch-label switch-label--off mr-8" }, this.labelOff)), h("button", { key: 'ce2a8400bc42612bcb22b47ce46762348a7a7b80', 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 }, h("span", { key: 'eee315ce803b246cbe73e9d42635cbaa775febdb', class: "switch-handle" })), this.labelOn && (h("span", { key: 'f1229ffea8041dea2237a032292a4465fc76e216', id: `${switchId}-on`, class: "switch-label switch-label--on ml-8" }, this.labelOn))));
+            }, onClick: this.toggleSwitch, onKeyDown: this.handleKeyDown, disabled: this.disabled }, h("span", { key: 'c7bbace6e78fe2358ee4b91febec51a280305df0', class: "switch-handle" })), this.labelOn && (h("span", { key: 'b4fa05fc1296a6d906abb4a7fa609d721d01248f', id: `${switchId}-on`, class: "switch-label switch-label--on ml-8" }, this.labelOn))));
     }
     get el() { return 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}.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 edsTableCss = "table{text-indent:0;border-color:inherit;border-collapse:collapse;}tr.table-row-default{background-color:transparent}tr.table-row-color:nth-child(even){background-color:var(--grey-100)}tr.table-row-color:nth-child(odd){background-color:transparent}.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 {
@@ -5824,6 +6218,24 @@ const EdsTable = class {
             }
             (_a = actionButtons[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
         };
+        this.handleSort = (column) => {
+            if (this.sortColumn === column) {
+                // Toggle direction if same column
+                this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+            }
+            else {
+                // New column, default to ascending
+                this.sortColumn = column;
+                this.sortDirection = 'asc';
+            }
+            sendAnalytics({
+                category: 'ui-component',
+                parentContext: null,
+                tag: `${this.hostEl.tagName.toLowerCase()}/sort`,
+                name: column,
+                action: this.sortDirection
+            });
+        };
         this.data = null;
         this.config = {};
         this.rowsPerPage = 10;
@@ -5833,6 +6245,8 @@ const EdsTable = class {
         this.columnSize = 'default';
         this.actions = [];
         this.actionTemplate = undefined;
+        this.sortingEnabled = false;
+        this.theme = 'color';
         this.parsedActions = [];
         this.dataColumns = [];
         this.tbData = [];
@@ -5842,6 +6256,8 @@ const EdsTable = class {
         this.totalRows = 0;
         this.searchQuery = '';
         this.containerWidth = 0;
+        this.sortColumn = null;
+        this.sortDirection = 'asc';
     }
     handleDataChange() {
         this.parseData();
@@ -5924,10 +6340,10 @@ const EdsTable = class {
         return this.tbData.filter((row) => Object.values(row).some((value) => value.toString().toLowerCase().includes(this.searchQuery.toLowerCase())));
     }
     getPaginatedRows() {
-        const filteredRows = this.getFilteredRows();
-        this.totalRows = filteredRows.length;
+        const sortedRows = this.getSortedRows();
+        this.totalRows = sortedRows.length;
         const start = (this.currentPage - 1) * this.rowsPerPage;
-        return filteredRows.slice(start, start + this.rowsPerPage);
+        return sortedRows.slice(start, start + this.rowsPerPage);
     }
     handlePageChange(newPage) {
         this.currentPage = newPage;
@@ -6007,22 +6423,52 @@ const EdsTable = class {
     capitalize(str) {
         return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
     }
+    getSortedRows() {
+        const filtered = this.getFilteredRows();
+        if (!this.sortColumn) {
+            return filtered;
+        }
+        return [...filtered].sort((a, b) => {
+            const aVal = a[this.sortColumn];
+            const bVal = b[this.sortColumn];
+            // Handle null/undefined
+            if (aVal == null) {
+                return 1;
+            }
+            if (bVal == null) {
+                return -1;
+            }
+            // Compare values
+            let comparison = 0;
+            if (typeof aVal === 'number' && typeof bVal === 'number') {
+                comparison = aVal - bVal;
+            }
+            else {
+                comparison = String(aVal).localeCompare(String(bVal));
+            }
+            return this.sortDirection === 'asc' ? comparison : -comparison;
+        });
+    }
     render() {
         const currentContainerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.containerWidth || 400;
         const visibleColumnsCount = this.getVisibleColumnsCount();
         const columnWidth = visibleColumnsCount > 0 ? Math.floor((currentContainerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
         const paginatedRows = this.getPaginatedRows();
         const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
-        return (h("div", { key: '0c986dec22a52676b110fad1f7f82ef792da796e' }, this.searchEnabled && (h("div", { key: '855c5c3d6c2b86e75a210c0296524bc8029e37f2' }, h("eds-input-field", { key: 1, icon: "search", name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))), h("div", { key: '62b18340bbf992dba888c2d24ff306ada8a1a985', class: "mt-20" }, h("table", { key: '656dd0dd7f99611c2bd9beea4cd1f37f57da1384', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: '1278ea89f588aa52c215c32bcc03c424e4501fed' }, h("tr", { key: '186e6ac48859dd9f7cbf8c4f4fb5f6bfddfd4d34', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
+        return (h("div", { key: '0601cea60a05d044a717219e6ff6385ef915defa' }, this.searchEnabled && (h("div", { key: 'de1affaf192dc5e63b16d534d2f518c206ab7010' }, h("eds-input-field", { key: 1, icon: "search", name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))), h("div", { key: '49f71b5a2481d719cb8fe0547f05a5ae83ad5541', class: "mt-20" }, h("table", { key: 'b63ca6615ed681c741fb2d3ff2675f9cc061d194', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: '817b534cca3c2492b69b3816a41b54ec850847ab' }, h("tr", { key: '6cb8735ac56c3fe2acc4a257815bc0d07009118c', class: `m-0 p-0 border border-softer table-row-${this.theme}` }, this.columns.map((col) => {
             var _a;
             if (col === 'actions') {
                 return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }));
             }
             if (!((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden)) {
-                return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.capitalize(col)));
+                return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, h("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.25rem' } }, h("span", null, this.capitalize(col)), this.sortingEnabled && (h("eds-icon-wrapper", { icon: this.sortColumn === col
+                        ? this.sortDirection === 'asc'
+                            ? 'chevron-up'
+                            : 'chevron-down'
+                        : 'chevron-down', "aria-label": `Sort by ${col}`, onClick: () => this.handleSort(col), style: { cursor: 'pointer' } })))));
             }
             return null;
-        }))), h("tbody", { key: 'b27bd372efe64469d2a5001dc6d5b464eb419217' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
+        }))), h("tbody", { key: '3c8630ed1f47720688bfcdb78c5dbfc84cb238cf' }, paginatedRows.map((row) => (h("tr", { class: `m-0 p-0 border border-softer table-row-${this.theme}` }, this.columns.map((col) => {
             var _a;
             if (col === 'actions') {
                 return (h("td", { class: "text-center border border-softer m-0 f-ui-02 break-words actions-cell", style: { minWidth: `${columnWidth - 4}px` } }, h("div", { role: "toolbar", "aria-label": "Row actions", onKeyDown: this.onActionKeyDown, style: {
@@ -6037,7 +6483,7 @@ const EdsTable = class {
                 return (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() && (h("div", { key: 'd442153f48c85c6de1a0752d1348d8814811faed', class: "mt-20" }, h("eds-pagination", { key: '4c48c96eacb112002b0110e85dce0dab94350dfb', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+        }))))))), this.shouldEnablePagination() && (h("div", { key: '09faef418edc676bb2b60c2439e0652a92fe023d', class: "mt-20" }, h("eds-pagination", { key: '9403d33a37505c73fe3bec652ef93f533bdb4f03', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     get hostEl() { return getElement(this); }
     static get watchers() { return {
@@ -6212,12 +6658,12 @@ const EdsTabs = class {
         }
     }
     render() {
-        return (h("div", { key: 'bab7b3d6a9e6e66ab6476827ecc06a3e3c7244be', id: `${this.identifier}` }, h("div", { key: 'e20639e1842936b6c1fe24b19ca7f94ccc09d18f', 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-['']" }, h("nav", { key: 'e3f4e385e1bfb1f5abc75697697ab9a6a8124b6b', role: "tablist", ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+        return (h("div", { key: '36b4771f5dc68c2b2686ece5957b4a54f70d8c38', id: `${this.identifier}` }, h("div", { key: '0b9cac117898a5c8d179c69aaa971c63fed5b12c', 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-['']" }, h("nav", { key: '6bb2ca84bd9b12e67bb2e6055cb435c66061f547', role: "tablist", ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
             const TabComponent = 'button';
             const tabProps = this.getTabOptions(tab.active, index);
             const isActive = index === this.activeIndex;
             return (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}`, id: `tab-${index}`, ref: (el) => this.setTabRef(el, index), onClick: () => this.handleTabClick(index, tab.label, true), onKeyDown: (e) => this.onKeyDown(e, index) }), tab.label || tab.ariaLabel));
-        }))), h("div", { key: 'f958fca5abaeeba0b6fcc900b91fa1309508dc57', class: "tab-panels" }, this.parsedTabs.map((_, index) => (h("div", { role: "tabpanel", id: `panel-${index}`, "aria-labelledby": `tab-${index}`, hidden: index !== this.activeIndex, tabIndex: index === this.activeIndex ? 0 : -1, class: "effect-focus" }, h("slot", { name: `panel-${index}` })))))));
+        }))), h("div", { key: '7b17d99c5dda91842171c941228b0a0f82d595d4', class: "tab-panels" }, this.parsedTabs.map((_, index) => (h("div", { role: "tabpanel", id: `panel-${index}`, "aria-labelledby": `tab-${index}`, hidden: index !== this.activeIndex, tabIndex: index === this.activeIndex ? 0 : -1, class: "effect-focus" }, h("slot", { name: `panel-${index}` })))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -6262,7 +6708,7 @@ const EdsTag = class {
     }
     render() {
         const classes = tagStyles({ intent: this.intent, size: this.size });
-        return h("span", { key: 'a00f436391013091c78f15bc53d91b0b01d8f4bb', class: classes }, this.label);
+        return h("span", { key: '0b37fdd21a8828a00daba55a7157e164e7057a88', class: classes }, this.label);
     }
 };
 EdsTag.style = EdsTagStyle0;
@@ -6358,7 +6804,7 @@ const EdsTooltip = class {
     }
     render() {
         const positionClass = this.position === 'bottom' ? 'top-full mt-2' : 'bottom-full mb-2';
-        return (h("div", { key: 'c2ae55fbf9fefb2748db770d98f12f679022a416', class: "relative w-full inline-block group" }, h("slot", { key: '5151e3269cb39d3caba960eee7155a3d5171c8cd' }), h("div", { key: '8956683d968d77d88133dc231975d258aca3d1d3', class: `absolute ${positionClass}
+        return (h("div", { key: '1ba27ac30f67a50e39b2bfdff2b4392b4adc948a', class: "relative w-full inline-block group" }, h("slot", { key: 'c84887cde7b92c3684ef61e36039d2e8c96f71f2' }), h("div", { key: 'c7e475e74d977b6ab291ba8a315cdb237742a8e6', 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
@@ -6413,10 +6859,10 @@ const EdsUser = class {
     render() {
         const user = this.parsedUser;
         const iconName = this.expanded ? 'chevron-down' : 'chevron-right';
-        return (h("div", { key: '68836f7fc63986d1ef1e5d1775258358db3418c6', class: "block" }, h("div", { key: '3b5be3d2d700ce3e1a800c33adde9b55bb07fda0', class: "flex items-center" }, h("eds-dropdown", { key: 'f3f97f19aac315031f428d190f1e143429bcd860', ref: (el) => (this.dropdownEl = el), label: this.dropdownLabel, intent: this.intent, "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: iconName, class: "text-default", onDropdown: this.handleDropdown }, h("div", { key: '6a6bccaa4e8b0e68460ac50e3edc8d9fc3612e00', class: "min-w-[280px] p-8" }, h("div", { key: '97a9b4d9c0e0873162103461a542cf401be06c2f', class: "flex gap-x-16", "data-dropdown-no-close": true }, h("eds-avatar", { key: 'f89cee9f0ad6549e60ebb3ade437d1dd0c2e6eb6', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "black" }), h("div", { key: 'b9fc649a35280ecebe57955b85844f3a78c4db04', class: "max-w-full" }, user.name && h("p", { key: 'b2914fca3ddabc4d12fa2c6cee83a98505fd110a', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: '68ec348104e36b6fbf9c5fc47e254f3cfc4ca85b', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: '3b7720aaa30597a49acf61b6c3ff0c1f1cc3bfd8', class: "f-ui-03-light text-light mt-4" }, user.email))), h("div", { key: '28cdba1fb361b84e9cb0a7ce904ec39cf13d022e', class: "text-default flex w-full flex-col gap-y-8" }, h("slot", { key: 'c1cddbb24c72749c4ea07e2e0311da61af6e9886' })))))));
+        return (h("div", { key: '1c4017bd33c81ad29385e164dc8611cfac58eca0', class: "block" }, h("div", { key: 'b692ce5a4b6b424c7e109589bdff5617d4e3b33c', class: "flex items-center" }, h("eds-dropdown", { key: '0df9e3b3c5212433ec88da84edd746a1dce8c763', ref: (el) => (this.dropdownEl = el), label: this.dropdownLabel, intent: this.intent, "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: iconName, class: "text-default", onDropdown: this.handleDropdown }, h("div", { key: 'ef25176f1fc1796dde0b1d56264617d067d06adb', class: "min-w-[280px] p-8" }, h("div", { key: '539532b05094ad47281f7d03c7900b93162e175a', class: "flex gap-x-16", "data-dropdown-no-close": true }, h("eds-avatar", { key: 'ff51082744e2d32e5bc57069ccc99a3214ac3c03', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "black" }), h("div", { key: '1850d3ad72889a446fb8f5f29cf96d7434bc8c81', class: "max-w-full" }, user.name && h("p", { key: '29a458e82be47f3b4ce801e289253158b6f7372b', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: 'fbb49fa957c32bd90b15dd71691b975c920049bb', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: 'e634ceb7b74062a19f466abb1f50266370a82747', class: "f-ui-03-light text-light mt-4" }, user.email))), h("div", { key: '3a8a04862973d0e28d7c62d84a6928953fd08df3', class: "text-default flex w-full flex-col gap-y-8" }, h("slot", { key: '50627b6ed0b735079d60b66092181334cd1a954a' })))))));
     }
     get hostEl() { return getElement(this); }
 };
 EdsUser.style = EdsUserStyle0;
 
-export { EdsAccordion as eds_accordion, EdsAlert as eds_alert, EdsAvatar as eds_avatar, EdsBlockBreak as eds_block_break, EdsBreadcrumb as eds_breadcrumb, EdsButton as eds_button, EdsCodeBlock as eds_code_block, EdsDropdown as eds_dropdown, EdsForm as eds_form, EdsGlobalSearch as eds_global_search, EdsHeader as eds_header, EdsIconWrapper as eds_icon_wrapper, EdsImg as eds_img, EdsInput as eds_input, EdsInputField as eds_input_field, EdsInputFooter as eds_input_footer, EdsInputLabel as eds_input_label, EdsInputRange as eds_input_range, EdsInputSearch as eds_input_search, EdsInputSelect as eds_input_select, EdsLink as eds_link, EdsLogo as eds_logo, EdsMatomoNotice as eds_matomo_notice, EdsNps as eds_nps, EdsPagination as eds_pagination, EdsRating as eds_rating, EdsSpinner as eds_spinner, EdsSteps as eds_steps, EdsStepsV2 as eds_steps_v2, EdsSwitch as eds_switch, EdsTable as eds_table, EdsTabs as eds_tabs, EdsTag as eds_tag, EdsToast as eds_toast, EdsTooltip as eds_tooltip, EdsUser as eds_user };
+export { EdsAccordion as eds_accordion, EdsAlert as eds_alert, EdsAvatar as eds_avatar, EdsBlockBreak as eds_block_break, EdsBreadcrumb as eds_breadcrumb, EdsButton as eds_button, EdsCodeBlock as eds_code_block, EdsDropdown as eds_dropdown, EdsForm as eds_form, EdsGlobalSearch as eds_global_search, EdsHeader as eds_header, EdsIconWrapper as eds_icon_wrapper, EdsImg as eds_img, EdsInput as eds_input, EdsInputField as eds_input_field, EdsInputFooter as eds_input_footer, EdsInputLabel as eds_input_label, EdsInputRange as eds_input_range, EdsInputSearch as eds_input_search, EdsInputSelect as eds_input_select, EdsLink as eds_link, EdsLogo as eds_logo, EdsMatomoNotice as eds_matomo_notice, EdsNps as eds_nps, EdsPagination as eds_pagination, EdsRating as eds_rating, EdsSidebar as eds_sidebar, EdsSpinner as eds_spinner, EdsSteps as eds_steps, EdsStepsV2 as eds_steps_v2, EdsSwitch as eds_switch, EdsTable as eds_table, EdsTabs as eds_tabs, EdsTag as eds_tag, EdsToast as eds_toast, EdsTooltip as eds_tooltip, EdsUser as eds_user };