@ebrains/components 2.3.1 → 2.4.1

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) => {
@@ -3733,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) {
@@ -3816,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();
@@ -3829,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: '0b7014a7e6c641f2abc6217d919583dafce50067', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '3beaa87c72ac60e37bf5c7093b8a3f5b54c9eb4b', class: "flex flex-col gap-y-24" }, this.title && (h("span", { key: '5d07685b0e31419d442765c230f9cd2373ce2773', role: "heading", class: "f-heading-04" }, this.title)), this.description && h("span", { key: '13fe635ea00fa3c950951f1df37549fa75341666', class: "f-body-02 text-light" }, this.description), h("slot", { key: '5e62b8844536ef127ce2565e4167766bf6d5ba4d' })), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
+        return (h("form", { key: '8a722f99ea8ad7b063805b3377180d73b16d96e1', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '6a091913152adad7df2f8581a62d2146d9ea2f1d', class: "flex flex-col gap-y-24" }, this.title && (h("span", { key: '11dc49375a4eef1dfd4994a6ba2b2876262f9f55', role: "heading", class: "f-heading-04" }, this.title)), this.description && h("span", { key: 'dfa8bfa745828e8a57a4909dcbfd9f48497205c0', class: "f-body-02 text-light" }, this.description), h("slot", { key: 'db2c00b99038a6feddbe057de16b1002bbf14f03' })), 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: '831b919b0784a671596678392fe5aa0433af35a5', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), this.formBtn && (h("div", { key: 'bdddee0aa0899c9cea3ce737f30f1e25ce8d95c5', class: "mt-32" }, h("eds-button", { key: 'f9a61383079b998dc98558d85b93e30aa32a3eeb', 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: 'ed2cbf6dada2bf43c8846f5f2af8f3f0767a5b1c', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), this.formBtn && (h("div", { key: '1cc4b51279214181f1894a573227cda0cbf385ee', class: "mt-32" }, h("eds-button", { key: '2a004027664d1433cf625c48f3447960de9c5c84', intent: this.buttonIntent, label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -3866,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();
@@ -3924,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;
@@ -3959,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;
@@ -3976,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');
     }
@@ -3997,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: 'e3c15463b46aa6349efb86e4907d6f7bfabf682f', class: "search-wrapper" }, h("eds-input-field", { key: 'f2164163925534652c62541b3e954d4bb66510bc', 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: 'f592d322fb3d1556743edc39713c8dbaa6449fa6', class: "search-dropdown", ref: (el) => (this.dropdownRef = el) }, this.loading && (h("div", { key: '4d3171271b27f70650bbded9cb7c0b76799dc1a1', class: "flex text-center justify-center p-64" }, h("eds-spinner", { key: '74fed5cf70ba698468dd2ca03dc5ff4eb7aeb7db', variant: "primary", size: "sm" }))), this.error && !this.loading && (h("div", { key: '481fd52e321ff02ca61cc0877a61f577b6a1ebd7', class: "flex text-center justify-center p-16" }, h("span", { key: '073d2a12b960b3309e0ab597c41d36f946615ed6', class: "text-error f-body-02" }, this.error))), this.showEmpty && (h("div", { key: '7b031eec1e6720f4cda6bc107ebc6f64f1c6e35f', class: "dropdown-state" }, h("eds-icon-wrapper", { key: '3ce91c3dcdaf27bd85f7ea4c855bab58b1208355', icon: "search" }), h("div", { key: 'c1a9b0c3f62fc568fa9d34d41730da8960bcdd54' }, h("p", { key: 'd3b87b4a6b06e81e5c62e817b924f762974c589e', class: "f-body-02" }, "No results found"), h("p", { key: '67fde47420811b9eaef805d9e6aa1b3515c74251', class: "f-ui-04 text-lightest" }, "Try different keywords")))), this.hasResults && !this.loading && (h("ul", { key: 'ba3a77467ba5e709bdf95dc793c316a18a135b64', class: "dropdown-results" }, this.results.map((result, index) => (h("li", { key: result.id, "data-index": index, class: {
+        return (h("div", { key: '03beb0a36e20ff5e0c1213584361c9b85ef52684', class: "search-wrapper" }, h("eds-input-field", { key: 'cefbfcc4c32067fc57f4425fde7e646b2ca36bc6', 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: '60a8f38d2eb06335f97f232a7e810f22ccf379b3', class: "search-dropdown", ref: (el) => (this.dropdownRef = el) }, this.loading && (h("div", { key: '2e8dcab16d8fef0f0ec07bcb78fd568f91156095', class: "flex text-center justify-center p-64" }, h("eds-spinner", { key: 'f512b3508fe5ba35a762346f43fa780a9b0c5c11', variant: "primary", size: "sm" }))), this.error && !this.loading && (h("div", { key: '549a6ec4f84c10d5bb4449cb7aa9a4dc61a4ff05', class: "flex text-center justify-center p-16" }, h("span", { key: '2de6645b976ed3d7958867447c090639b3b613a6', class: "text-error f-body-02" }, this.error))), this.showEmpty && (h("div", { key: '1006b88e3508a51898f305e1a221762f9cbc0204', class: "dropdown-state" }, h("eds-icon-wrapper", { key: 'bc635e10a72aaf715747f8c512ebc3d18d0657c5', icon: "search" }), h("div", { key: 'd267ee5c228ae85031088faf7b44b99bacbb77f4' }, h("p", { key: '526094eab25fcb55d5e5a1529c165a39e80db386', class: "f-body-02" }, "No results found"), h("p", { key: '770ff6f735b09068bcb26eec2552c6e7081348ba', class: "f-ui-04 text-lightest" }, "Try different keywords")))), this.hasResults && !this.loading && (h("ul", { key: '75597ab0dc1c11854e366294a12a9bd448f53877', 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: 'ccdceeb06f423b28868dbf5ec2a11c5b84c651d7', class: "dropdown-footer" }, h("span", { key: 'e9dfb424b4dd277b11c6a630c673ec6368b09ef2', class: "footer-hint" }, h("kbd", { key: '4d045d4356b035c6efc7e029ea9e1f5bb4828b6b' }, "\u2191"), " ", h("kbd", { key: '5ee2913fe448ad3763ca9a70f474bfa9fcd3aad9' }, "\u2193"), " navigate \u2022 ", h("kbd", { key: 'd745261bb53ecffae5ff41d53e349fd74d37b955' }, "\u21B5"), " select \u2022", ' ', h("kbd", { key: 'baa93b7af9e8ae8994f8e73c1bf7942f659b0491' }, "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: '4af4caf6e6856feaeb91218aa249950ac835e5d8', class: "dropdown-footer" }, h("span", { key: '4634ee9a9a15674cae0eee784b7ee408c7707874', class: "footer-hint" }, h("kbd", { key: 'ea0dd3cbb169f0db034fa3ee9019592d943398f6' }, "\u2191"), " ", h("kbd", { key: 'f1fc8937f965f695b402a78c82661e0ddee8126d' }, "\u2193"), " navigate \u2022 ", h("kbd", { key: '1d7de6abe02b46362c0e7d1998aaa9b78d1c1378' }, "\u21B5"), " select \u2022 ", h("kbd", { key: '50d7d6ab8176e654529fa7e977dc67eadff84c3d' }, "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 {
@@ -4053,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: '33f041754210d5fce8b190e63a6f19ac62262cfd', role: "banner", class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: '596d4b9cbb08fa95aa9b715599290ac91aff3f77', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: 'd13e83eca926b82f7406d5efb3f16555c25c167c', type: logoType, href: this.homeUrl })), this.parsedLinks && (h("nav", { key: 'e120bef9e976e75d523bd6d1e65e8aecd7c6a694', 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: 'ea3db252b028340a007a18b4cb1fb995fefd51b0', 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: '47dfb8dcd8e77bd908236aef0cc0c3c5542de11e', name: "actions" }), this.menuEnabled && (h("div", { key: 'a6f4a3fb9834696d39a6831098c12f1a5a519a6b', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: '2c6586152953caa33911d19fa69d3518cb73fc41', "aria-label": "Menu", intent: this.headerVariant === 'default' ? 'ghost' : 'ghostInverse', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
+        return (h("header", { key: 'ebfd125d1e27d224e5702f0c7a4b8f46e279f3b7', role: "banner", class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: '64be678f68c5d5590e0a976f46a1939320d5d9c2', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: 'a94192d8df3fb22d629d29d58d681e2a2eb0506d', type: logoType, href: this.homeUrl })), this.parsedLinks && (h("nav", { key: 'd7f1055e683b90d91c977ae9fef52a00f90b63a0', 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: 'a15b4d203bacbe7f58490b8d34dd57dc31d4f573', 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: '2d83f5093b34bdc40f574f8d5676e046029c6e5d', name: "actions" }), this.menuEnabled && (h("div", { key: 'd2ad33f5ea9e55a5efb1f4dd598be5d61f1d9ab6', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: 'da824afdcaa6ce68d837096bff6bdfadec4af17c', "aria-label": "Menu", intent: this.headerVariant === 'default' ? 'ghost' : 'ghostInverse', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
     }
     get hostEl() { return getElement(this); }
 };
@@ -4135,10 +4172,10 @@ const EdsImg = class {
             imgOpts['loading'] = 'lazy';
             imgOpts['decoding'] = 'async';
         }
-        return (h("div", { key: 'c164d1584476f9fb101abb9e1233bed40c782eb9', class: {
+        return (h("div", { key: '20e754d7535484aedde364592c7a08a68e760b7d', class: {
                 'items-center justify-center': true,
                 'effect-bg-pattern': this.lazyload && this.showBg
-            } }, h("picture", { key: '70e20db2fe9bdf1a494313c6896e835ff3222f3c' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: '164d758ed706139d2d4562775a91c9518c437d28', ref: (el) => (this.img = el), class: {
+            } }, h("picture", { key: 'c6b1561f51587341af50b4129242424961b13788' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: '136c7a183750f61d237fd0845750e70f38603f48', ref: (el) => (this.img = el), class: {
                 'effect-opacity object-cover object-center': true,
                 'opacity-100': this.loaded,
                 'opacity-0': !this.loaded
@@ -4197,7 +4234,7 @@ const EdsInput = class {
     render() {
         const withIcon = !!this.icon;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
-        return (h("div", { key: '069d8ed6f23b2d98bbc24b727cad0cbc94d1a956', 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: '10cacc49f2e61f8b357d1d0dd303822d7b3d7800', 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,
@@ -4208,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: '2295538938128173047a5c81166cbee3d652cf25', 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: '70a5bc0c9019c25499c4c65ece50ddb602eb3345', 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: '2f17e830e7d5977c06dff45e248ec6d4bcf2885c', 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: 'd171f505b869787c01945720489343a6d57e02bf', 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 {
@@ -4319,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: '75e326788d214bcbdd0b4b5204ac309a3e76f6eb' }, 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: '646cf997652c5401115c5f7d96b29cf752feeacf' }, 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,
@@ -4332,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: '83d2deb40af000499d6d12e33f33b7435372ff30', class: "mt-6" }, h("eds-input-footer", { key: '21035705fd8ef6dbe8d208d4e0b88467a4d4cb09', 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: 'dd39d14a7bd629d259d9a04cd83530330d05b6fd', class: "mt-6" }, h("eds-input-footer", { key: 'd909871d432841039a82a57d174f71a3733cf51c', 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); }
@@ -4352,7 +4389,7 @@ const EdsInputFooter = class {
         this.link = undefined;
     }
     render() {
-        return (h("div", { key: 'f968c3f3cfa5d419fe2d736b8da4f1dfd5fca88f' }, this.error && this.errorMessage && (h("div", { key: '780480b021c958a4d429b13a190ed630df98f539', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '3577ebdde2d337e393d7ae41b0b55d3eac046149', icon: "warning" }), h("p", { key: 'c839fe81dcd8ee0fba4ffa53dd7ba5e65a39fa46', class: "f-ui-04 ml-4 mb-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '57833b0f0f58d36773401eaa0f37fd820ebe094c', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("a", { key: '2330e747a9274c6b9bcadf5ae4a770cfbab78b27', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
+        return (h("div", { key: 'ac60e5d56a86af64ea34445f9376c942258c9026' }, this.error && this.errorMessage && (h("div", { key: '25ff09f276f7028e1b2877133ab639b35cdebaba', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '2add9a34a966428af96598f3e8e07f9535da8728', icon: "warning" }), h("p", { key: 'bcb624339190c0585e960a0c4debc3fec2ada4eb', class: "f-ui-04 ml-4 mb-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '00944237618f325774f316faaf4620e5eb507289', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("eds-link", { key: '464c5a59e9c36a06f1cdae9be9e09a4f8b05d282', label: this.link.label, url: this.link.url, intent: "underline", size: "small", external: true }))));
     }
 };
 EdsInputFooter.style = EdsInputFooterStyle0;
@@ -4369,7 +4406,7 @@ const EdsInputLabel = class {
         this.disabled = false;
     }
     render() {
-        return (h("label", { key: '4760fa1b6a66b4ba30b689e65acc9f66e944210d', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: 'db3f8b321ab41765d9cc1e1d3b67ef2d58c1a53a' }, h("span", { key: '0c6f4ee8daab357ff4da750241c472b126cfbb98', "aria-hidden": "true" }, "*"), h("span", { key: 'ad18af56b0f20be3c9ee7280c0610c958adfdb87', class: "sr-only" }, "required")))));
+        return (h("label", { key: '8a421c62ddec859bd7837454aa664a116001fd31', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: 'ad49202fb172a182822587248c141e0f8d7bcc6f' }, h("span", { key: 'e682ff5f3ac83b8adce37c8c9893c2aa235c97b1', "aria-hidden": "true" }, "*"), h("span", { key: '343d2abb7c452fc2a6a67b04727237fea9519838', class: "sr-only" }, "required")))));
     }
 };
 EdsInputLabel.style = EdsInputLabelStyle0;
@@ -4416,7 +4453,7 @@ const EdsInputRange = class {
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: '7592e5f4c1154281fb0577af739451ea0f16dc17', class: "relative flex flex-col items-start" }, h("input", { key: '8d5d0b3b5b51665a340304ba56f6fd6b053d3c5f', 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: 'c040d2a7e6aae8662e33d393bf1e93b0c8c254dc', id: `desc_${this.name}`, class: "block f-ui-05 mt-4 text-lighter" }, "Current value: ", this.sliderVal)));
+        return (h("div", { key: '27c60fe7ad5cf3cf8255129529ef64905c87b609', class: "relative flex flex-col items-start" }, h("input", { key: '8ef115e18b6afd956c57a30cd4b9ee45ecd79334', 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: 'beb95f6aa032db57ec401839cea48ac1d3a1861d', 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 {
@@ -4485,7 +4522,7 @@ const EdsInputSearch = class {
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: 'e5065d821db5f66b4ddfccb84e911f8c9148d12c', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: 'e661107b6202d7529209c67622a9f27bb15de2fc', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: '1633e9108da6b675f1bcbddbbcb88e67843dddbf', 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: '4057975b193458daff5cc779e7671f3aa8df82fb', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '47366d7737c3c044aa97f6e5a5a76301c5f688ae', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: '70195ba54b9afd1c953735899d6fbfd668f81c71', 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 })));
     }
@@ -4514,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: '640bbcca727ad0c511238335197bc533869f6229', class: "relative" }, h("select", { key: '75efd5a9c7951fce245a7ee8b89c35d712d06c08', id: selectId, name: this.name, class: {
+        return (h("div", { key: '5f73cb76010cac41f433921395aaf779765e298a', class: "relative" }, h("select", { key: '0705adad43076b6048900d5c62b8be2dff090270', 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: 'e8723f0f947dc8e07660a34d49eb769e4bebfd06', 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: '23531f90fcaa854a8abff796e2879648987a56b9', 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: '6e836b9606c1444d8e97b78ebe1ea4cf092070e3', 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: '6b2d7856821cfe804f63f6f289f78bd3f7a8273c', 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: '161692e967ed9c094feb171c6d067058dfafa146', 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: '513a74b4753a08280326970dfbb16642b5c6b986', class: "w-20 h-20", icon: "chevron-right" }))));
     }
 };
 
@@ -4590,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'
         }
@@ -4643,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: {
@@ -4658,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;
@@ -4670,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) {
@@ -4715,9 +4760,6 @@ const EdsLink = class {
         }
     }
     getLinkSize() {
-        if (this.intent === 'underline') {
-            return 'underline';
-        }
         return this.size;
     }
     renderLeftIcon() {
@@ -4746,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: '5c190b2b079dfecb003883a8b25d3c258697c4d6', 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: 'f4e89354ea8e252a26c85a560af9e7cfed7f8287', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && h("span", { key: 'ca10c283dd14c3e3830baddec7ba193522a02e7c', class: labelClasses }, this.label), this.renderRightIcon())));
+        return (h("a", { key: '1ae7cb8fda0fdc0a4396504a4dfa13afa428d98f', 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: '7fc137758d974ba4a3a974f7b22587d3ca3b031e', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && h("span", { key: '7c79baae49579eef264ab6546aa3ac8e044dcb46', class: labelClasses }, this.label), this.renderRightIcon())));
     }
     get el() { return getElement(this); }
 };
@@ -4819,7 +4862,7 @@ const EdsLogo = class {
     }
     render() {
         const logoContent = this.getLogo();
-        return (h("a", { key: '735f3592da7eed337c528731c28c6e708bbfcf82', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '5db166d68cb6e193d3dbc2a8ba4b54eae99aac44', innerHTML: logoContent })));
+        return (h("a", { key: '0a0d4dd69a1af10c1c571a56ed0f698d95652405', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '0d8ca0f9c647b3b12daf944b9c2919a93134bec2', innerHTML: logoContent })));
     }
     get el() { return getElement(this); }
 };
@@ -4951,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: '19326c22d2b5c9f2fbc97bfb3c3d958d14cdfa25', class: "eds-nps" }, h("eds-input-label", { key: '046239977d2dc639eabfc60a67df62011833a983', id: "nps-question", name: "nps-question", label: this.question }), h("div", { key: 'e296b8ff3a081f42263ee0c0a28ef3f304b1e1c0', 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: 'f5e19e0f750c0de6da3bae5713dca0e13eba85fc', class: "eds-nps" }, h("eds-input-label", { key: '3ff611a932976956735395fb531d9a800b554974', id: "nps-question", name: "nps-question", label: this.question }), h("div", { key: 'da0c3af26dd24d7dc618675aa7f197f55023230f', 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: '305bc5b2d162fc40fc56557291d37e29498563a2', class: "flex justify-between mt-8" }, h("span", { key: '7fe2191db8cacabed26f451ac0175f23ede3317e', class: "f-ui-04 text-light ml-4" }, this.leftLabel), h("span", { key: 'a85aca88d4de2897d7ba04578cf57a844c660675', 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: '10b2f854cff8192e54ee30feb44ad4143c54ad10', class: "flex justify-between mt-8" }, h("span", { key: '361b421b368219f9d7aa6306d912913e9d401fa0', class: "f-ui-04 text-light ml-4" }, this.leftLabel), h("span", { key: '2969496e1b6f772fcdf49667f66eee6dee6760fa', class: "f-ui-04 text-light mr-4" }, this.rightLabel))));
     }
     get el() { return getElement(this); }
 };
@@ -5262,7 +5318,7 @@ const EdsPagination = class {
     }
     render() {
         const navigableIndex = -1; // Track index for keyboard navigation
-        return (h("div", { key: '1ddd5a3ee9c843a06e5f8f446ae8420a6e0df259' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '87b18c6b1fc475e335f829a4f61b7a8883dc7b9e', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, h("span", { key: 'd5af6f58fc41d83c7e9519bbaa76fb31e6cbb522', 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: '17128145803ac6af5f37d5e7c7f0576961c3e372' }, this.total > 0 && this.mode === 'default' && (h("p", { key: 'e50738bfadd0b115ed2d05b81199f0d4cfadda18', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, h("span", { key: '230f2306254d7c5fa2bfd354f308e4fa6b5c2994', 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);
                 }
@@ -5355,7 +5411,7 @@ const EdsRating = class {
         this.onSelect(next);
     }
     render() {
-        return (h("div", { key: '8dcde2afdc0db27d3f6be48f1d58cc7c7f88b0f0', 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: '5d1cf924d2a59b4141eac1bd4f122c9cf640cf9c', 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.
@@ -5368,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;
 
@@ -5444,12 +5664,12 @@ const EdsSpinner = class {
                 alignItems: 'center',
                 justifyContent: 'center'
             };
-        return (h(Host, { key: 'e4c2f4762d214028c2e97666040e05ad5651debf' }, h("div", { key: 'e12572cb0195a84402847b0fc723ad2198196661', class: "spinner-overlay", style: overlayStyle }, h("span", { key: '6aa3b28a4e79951a5bbb46f6d7d845baf3761d14', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: '5817378b525ecb8d8a211105b73a2db00067fbe3', class: "f-body-01" }, this.message))));
+        return (h(Host, { key: '28271d7eced2bc3d69538aa490d623167affd590' }, h("div", { key: '2a8987cb80c67a42f18ac0db8c0078a90d9fd97a', class: "spinner-overlay", style: overlayStyle }, h("span", { key: 'c6267576391c24c41ceb0141dd897f590033b26f', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: 'ae67369899652f6ecc9c9411fd62a68a437553c5', 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 {
@@ -5460,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;
                 }
@@ -5508,52 +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;
@@ -5565,27 +5840,65 @@ const EdsSteps = 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, null, 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 {
@@ -5596,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';
@@ -5646,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;
@@ -5708,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"]
     }; }
 };
@@ -5773,17 +6172,17 @@ const EdsSwitch = class {
                     : this.labelOff
                 : 'Toggle switch'
             : undefined;
-        return (h("div", { key: '34573e6f2b377e168039a13afb4d5fe981f575ad', class: "switch-container" }, this.labelOff && (h("span", { key: '1728e1aac88d275cd6bee0aaf50e93e3a421944d', id: `${switchId}-off`, class: "switch-label switch-label--off mr-8" }, this.labelOff)), h("button", { key: '5d35387a9bf808923bd94f5d64528cca1e4055d5', 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: '0ee7bcdc3d6bb78881c310e36e5189e5ef99bab0', class: "switch-container" }, this.labelOff && (h("span", { key: '858c4a43ccc633530d4e13a6bfa8115194ff5082', id: `${switchId}-off`, class: "switch-label switch-label--off mr-8" }, this.labelOff)), h("button", { key: 'faa59b03c46dd814c4125534a88fd7564b02205a', 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: 'd8e0e1e3b562b4ac894998641cb7c813578e1a3f', class: "switch-handle" })), this.labelOn && (h("span", { key: '86b56fbbc537e9f08d11a509a1cb0e19d8dc3c39', 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: '74db0f827a4f50dd77b88e0d372cbef1adb10f87', class: "switch-handle" })), this.labelOn && (h("span", { key: '2648bb13d533bc9fde1dc04af9cfd7116dadd581', 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 {
@@ -5819,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;
@@ -5828,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 = [];
@@ -5837,6 +6256,8 @@ const EdsTable = class {
         this.totalRows = 0;
         this.searchQuery = '';
         this.containerWidth = 0;
+        this.sortColumn = null;
+        this.sortDirection = 'asc';
     }
     handleDataChange() {
         this.parseData();
@@ -5919,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;
@@ -6002,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: {
@@ -6032,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 {
@@ -6207,12 +6658,12 @@ const EdsTabs = class {
         }
     }
     render() {
-        return (h("div", { key: '29c8adfbd79bae86919e8b72f13d9a8a4d1c1d41', id: `${this.identifier}` }, h("div", { key: '94ec3243a35be9db63846b253133fd323fb3759c', 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: '52c337db80f21714a7d3da26b21663c34f5dd836', role: "tablist", ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+        return (h("div", { key: '94766d744d61eb8d1eef51393621f85b06af822f', id: `${this.identifier}` }, h("div", { key: 'd76f26bd4e70baebab9fed6c61df26b496d899a5', 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: '74afc95f82764cedb44b99a482bedc7b5f918196', 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: '9462805200c71ebac037ac5933c156eb9c25ed5c', 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: '4652dc3741f95ccfac7d53e5e49607515f559ce1', 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 {
@@ -6257,7 +6708,7 @@ const EdsTag = class {
     }
     render() {
         const classes = tagStyles({ intent: this.intent, size: this.size });
-        return h("span", { key: '6a229183bdaf96687e1f71ca3938a22c1259546e', class: classes }, this.label);
+        return h("span", { key: 'ef36f799cf3226ccf281428929e75326ea6a06e4', class: classes }, this.label);
     }
 };
 EdsTag.style = EdsTagStyle0;
@@ -6353,7 +6804,7 @@ const EdsTooltip = class {
     }
     render() {
         const positionClass = this.position === 'bottom' ? 'top-full mt-2' : 'bottom-full mb-2';
-        return (h("div", { key: '67fbc86d5f9ecfde1d5a0a588f4fb8be2050af0b', class: "relative w-full inline-block group" }, h("slot", { key: 'b304174862dd4d5ca93418ecb0d2b4fc2c80427c' }), h("div", { key: 'fcd874d53d0e17b7d3be2c6552571f82fbde6506', class: `absolute ${positionClass}
+        return (h("div", { key: '1c56a6c10a841575d1450750d2aaf55f9f42f6ee', class: "relative w-full inline-block group" }, h("slot", { key: '631775de9a60642ec51de32708e0d6a0c2c27b66' }), h("div", { key: '9def7dbbc301f465b81ff0e77b182be90d0893de', 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
@@ -6408,10 +6859,10 @@ const EdsUser = class {
     render() {
         const user = this.parsedUser;
         const iconName = this.expanded ? 'chevron-down' : 'chevron-right';
-        return (h("div", { key: '62bb8a684095f97b6105acdb5d9803c66edba913', class: "block" }, h("div", { key: '350ff5d7b4f47686f7b39662b176f24e719d54e3', class: "flex items-center" }, h("eds-dropdown", { key: 'e3b196b127572d038b5ae6bbf00330911ca41e94', 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: 'a311fd57839b87054afc7aca9c40ce5772b1350b', class: "min-w-[280px] p-8" }, h("div", { key: 'bc8c5b7147718def37bab1adb2715f9ff0074822', class: "flex gap-x-16", "data-dropdown-no-close": true }, h("eds-avatar", { key: 'c9207d4ecab0507981bb047ee6c59ee4400b5121', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "black" }), h("div", { key: 'c6ec78d935ee851ef5e8080bf30a7ff9c4603bf1', class: "max-w-full" }, user.name && h("p", { key: 'c39af63002f1449b049d4be13927da5d51599aca', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: 'd8eaa141490abb1ad917e2da03d4a588ef6d6779', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: '904aef6596a85ae438b98bd5ab67c7c7e2299d75', class: "f-ui-03-light text-light mt-4" }, user.email))), h("div", { key: '0cd0a2d8cc59d8b054f36188b4c18182e6a7f919', class: "text-default flex w-full flex-col gap-y-8" }, h("slot", { key: 'a41332bcf086d01a458218b74a1812dc55911925' })))))));
+        return (h("div", { key: 'a16f22ec9cc18d2904ea687cbcc56099ea6273ea', class: "block" }, h("div", { key: 'f2f52774b7d5fee5169a0e944f0f9d871421da89', class: "flex items-center" }, h("eds-dropdown", { key: '5232b88c109f2e4957f3582113750d49b1bc025c', 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: '476d9ae9f4812611ae06d0dd1aecb08f0751742a', class: "min-w-[280px] p-8" }, h("div", { key: 'ad74767750213daf55029741a4ed4c8b32f55a27', class: "flex gap-x-16", "data-dropdown-no-close": true }, h("eds-avatar", { key: '64bcf2b15cc095143919d5e6a255498d77260607', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "black" }), h("div", { key: 'b3850b7c774b5434fc41dd0fad6a88c9835d4946', class: "max-w-full" }, user.name && h("p", { key: '74027025ccd58fa4f4016699ebb3f4f541cea858', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: '850f015e7a19a8f711cf22477daa5119d4211e15', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: '414e6ec14738be04b9b4e5e1fe99a4f263eb2e3b', class: "f-ui-03-light text-light mt-4" }, user.email))), h("div", { key: '9b12da0776f6d63461c5fd7201bdccb35f430610', class: "text-default flex w-full flex-col gap-y-8" }, h("slot", { key: '867b2ce8149f402ae879bd2fab689b252abed95c' })))))));
     }
     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 };