@ebrains/components 2.2.0 → 2.3.1

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-e84b871c.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-870ab08f.js';
 import { s as sendAnalytics, m as matomoOptIn, a as matomoOptOut } from './analytics-d99780e3.js';
 import { c as cva } from './index-39c58238.js';
 import { p as parseData } from './sharedUtils-a550989c.js';
@@ -75,10 +75,10 @@ const EdsAccordion = class {
      * Adjusts styles based on `switchBg`, `tiny`, `clampText`, and other props.
      */
     render() {
-        return (h("div", { key: '1abfd8bfea763bc10e6f17148dbc252d0c3ffdea', 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: 'd162692cb9a99b6a1b9b736b828214c9d425046e', 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: '137a3311195d51f46c6677558219828e5f4d06b5', 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: '0fc6d493fd61726a53a8c4311bd183eb3ad5b270', class: "ml-auto" }, h("eds-button", { key: 'cb8182e05c5c11950c0e624ce6b11e27a4d506ab', 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: '084bfb116dcccadf7253ca8ac8de6a1e1d4aa41f', 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: 'c332a210fa4ce90f1974098ff790a7600dfb1721', 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: '842bc3bc7a968ef5a428a97327f38253e8a32888', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-4`, "aria-hidden": !this.isExpanded }, h("span", { key: '7c8fa8040da18cc2c128b42cdf9e75bfffe4c439', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, h("slot", { key: '852837c0c8c9d8a36f6263f7a943f50d82563a3c' })))))));
+          ${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' })))))));
     }
     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: '2d22944e7ae86cf2523c194e20215a3d986083d9', class: alertStyles({
+        return (h("div", { key: '33781ae5fb8504158e8fe780a76d89566a39e914', 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: 'b6c22446b0d87fb01a3cb882fe205ef48ea60b05', id: "alert-message", class: "f-ui-01 py-8", innerHTML: this.message }), this.withBtn && (h("div", { key: '8414820eb7b65c83459cfb90adef3ea696e42444', 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: '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() }))))));
     }
     get el() { return getElement(this); }
 };
@@ -247,7 +247,7 @@ const EdsAvatar = class {
      * @returns {JSX.Element} The rendered avatar component.
      */
     render() {
-        return (h("div", { key: '34e86e50b1176efd8ae0cd9b30cd3823527d7eee', 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: '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))));
     }
 };
 EdsAvatar.style = EdsAvatarStyle0;
@@ -261,7 +261,7 @@ const EdsBlockBreak = class {
         this.inverse = false;
     }
     render() {
-        return h("hr", { key: '688e11c730af1193f28db196cd144c6dd2efc3c6', class: `${this.inverse ? 'border-default' : 'border-softer'}  my-16 inline-block w-full border-t-2` });
+        return h("hr", { key: '0e2ec4b9c8b70ff9b65e6c4f2af42f198b1eb7d0', 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: '0625a234ec9f5095abbeaafa11e56bceb0432764', "aria-label": "Breadcrumb" }, h("ol", { key: '3898a4b048eca6c606a6948b26ec25a608cb908e', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
+        return (h("nav", { key: '27ddf744a07f1b697e549cdc6d2a66f65ebe6386', "aria-label": "Breadcrumb" }, h("ol", { key: '43ac089290c0a6f9b3c5cd629def8540966637b8', 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);
@@ -571,7 +571,7 @@ const EdsButton = class {
         });
         const ElementType = this.elementType;
         const isInteractive = !this.disabled && !this.loading;
-        return (h(Host, { key: '835cc81d3563abf1b5cb4c21165de1ef726d1e43' }, h(ElementType, { key: 'df05b2b2152e707e5fdd6028c5f557097d7e2b04', 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: '27c7473403e7c1bfd3dfc270151d44dbb639ceb3', class: this.loading ? 'opacity-0' : '', "aria-hidden": this.loading ? 'true' : undefined }, this.label)), this.loading && (h("span", { key: 'f52496884816bc299fb76c1afae5e4798bf642d2', class: "absolute inset-0 flex items-center justify-center", "aria-hidden": "true" }, h("span", { key: 'd42bf2c229f6956a1e0dbe64aa6c79ad5608ca5c', class: "loader", style: {
+        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: {
                 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 +3060,7 @@ const EdsCodeBlock = class {
         return this.code; // Fallback if language is not provided or unsupported
     }
     render() {
-        return (h("div", { key: '3cfaec27c58d05868313150f1a358ff64c8eafbd', class: "relative bg-stronger rounded-sm" }, h("div", { key: 'ed91821385f30305348750dbfffec5fdd7b4dbb8', 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: '3e419585214883c878a8e84c440dbd29d590002d', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: '051fa9c714d5c077d5d96ec9b92f8a744ec123bc', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: '707950ce89cb0c24b1afac42a8801d13659b6bab', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: '59923dd4c16cfecafffa2edaaac5ef7579c3f128', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '8c708992c04029d71685ad8922383ecdda05ac3c', innerHTML: this.getHighlightedCode() })))));
+        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() })))));
     }
     get el() { return getElement(this); }
 };
@@ -3078,10 +3078,12 @@ const EdsDropdown = class {
          * Toggles the visibility of the dropdown and manages focus.
          */
         this.handleClick = () => {
-            var _a;
+            var _a, _b;
             this.isOpen = !this.isOpen;
             if (this.isOpen) {
-                this.focusIndex = 0;
+                // refresh focusables each open in case slot changed
+                this.focusableItems = Array.from(((_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button, [role="menuitem"]')) || []);
+                this.focusIndex = this.focusableItems.length ? 0 : -1;
                 this.focusItem();
             }
             else {
@@ -3092,7 +3094,7 @@ const EdsDropdown = class {
                 category: 'ui-component',
                 parentContext: null,
                 tag: this.host.tagName.toLowerCase(),
-                name: ((_a = this.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+                name: ((_b = this.label) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || '',
                 action: this.isOpen ? 'expanded' : 'collapsed'
             });
         };
@@ -3104,9 +3106,14 @@ const EdsDropdown = class {
         this.dropdownPos = 'left';
         this.dropdownOffset = true;
         this.intent = 'tertiary';
+        this.autoClose = true;
+        this.noCloseSelector = '[data-dropdown-no-close]';
         this.isOpen = false;
         this.focusIndex = -1;
     }
+    async close() {
+        this.closeDropdown();
+    }
     /**
      * Closes the dropdown when a click occurs outside of it.
      * @param {Event} e - The click event.
@@ -3166,19 +3173,55 @@ const EdsDropdown = class {
         var _a;
         this.focusableItems = Array.from(((_a = this.dropdownContent) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button')) || []);
     }
+    handleHostInternalClick(ev) {
+        var _a;
+        if (!this.isOpen || !this.panelEl) {
+            return;
+        }
+        const path = (((_a = ev.composedPath) === null || _a === void 0 ? void 0 : _a.call(ev)) || []);
+        const clickedInsidePanel = path.includes(this.panelEl);
+        if (!clickedInsidePanel) {
+            return;
+        }
+        // Check if element has explicit close attribute
+        const hasCloseAttribute = path.some((t) => {
+            var _a;
+            const n = t;
+            return (_a = n === null || n === void 0 ? void 0 : n.closest) === null || _a === void 0 ? void 0 : _a.call(n, '[data-dropdown-close]');
+        });
+        // If element has data-dropdown-close, always close regardless of autoClose setting
+        if (hasCloseAttribute) {
+            setTimeout(() => this.closeDropdown(), 0);
+            return;
+        }
+        // If autoClose is disabled and no explicit close attribute, don't close
+        if (!this.autoClose) {
+            return;
+        }
+        // Auto-close mode: close unless clicked element opts out
+        const shouldNotClose = path.some((t) => {
+            var _a;
+            const n = t;
+            return (_a = n === null || n === void 0 ? void 0 : n.closest) === null || _a === void 0 ? void 0 : _a.call(n, this.noCloseSelector);
+        });
+        if (!shouldNotClose) {
+            // Defer to allow the item's own click (e.g., router navigation) to run first
+            setTimeout(() => this.closeDropdown(), 0);
+        }
+    }
     /**
      * Renders the dropdown component and displays its content when open.
      * @returns {JSX.Element} The rendered dropdown component.
      */
     render() {
-        return (h("div", { key: '31e8b1fd4e146cbcad4d74bd78dff1cd1e1950bd', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: '7021a0b0ff66780a324d7d9d1f6cff250ab64178', 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: '904fd2a7f727a8b3966eab6cf9ebdb0efa474ae0', role: "menu", class: {
+        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: {
                 '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: 'b416621930c7117775fef2ee91bdca0f660302f5' }))));
+            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, h("slot", { key: '675839893bf667a7a05a63e552935bb1a5874b73' }))));
     }
     get host() { return getElement(this); }
 };
@@ -3403,8 +3446,8 @@ const EdsForm = class {
         registerInstance(this, hostRef);
         this.form = createEvent(this, "form", 7);
         this.name = 'eds-form';
-        this.title = undefined;
-        this.description = undefined;
+        this.title = 'Form Title';
+        this.description = 'Form Description';
         this.setFormUrl = true;
         this.formBtn = true;
         this.formBtnLabel = 'Submit';
@@ -3535,6 +3578,7 @@ const EdsForm = class {
         return formData;
     }
     makeFormData() {
+        var _a;
         const formData = new FormData();
         // Add the form name
         formData.append('form_name', this.name);
@@ -3546,6 +3590,36 @@ const EdsForm = class {
             // Append each key-value pair to the FormData object.
             formData.append(key, this.values[key]);
         });
+        // 2) Only do the (slower) DOM scan if we actually have file fields in the config
+        const hasFileField = (_a = this.parsedFields) === null || _a === void 0 ? void 0 : _a.some((f) => (f === null || f === void 0 ? void 0 : f.type) === 'file');
+        if (hasFileField && this.formEl) {
+            // Find file inputs inside each eds-input-field's shadowRoot
+            const hosts = Array.from(this.formEl.querySelectorAll('eds-input-field'));
+            hosts.forEach((host) => {
+                const root = host.shadowRoot;
+                if (!root)
+                    return;
+                const fileInputs = Array.from(root.querySelectorAll('input[type="file"][name]'));
+                console.log(fileInputs);
+                fileInputs.forEach((fi) => {
+                    const name = fi.name;
+                    const files = fi.files ? Array.from(fi.files) : [];
+                    if (files.length > 0) {
+                        // Append each file under the same field name (backend can use request.files.getlist(name))
+                        files.forEach((file) => formData.append(name, file));
+                    }
+                });
+            });
+            // (Optional) mark that this payload includes files (handy in logs / policies)
+            // formData.set('_has_files', '1');
+        }
+        /*formData.forEach((value, key) => {
+          if (value instanceof File) {
+            console.log(`File field: ${key}, File name: ${value.name}, File size: ${value.size}`);
+          } else {
+            console.log(`Field: ${key}, Value: ${value}`);
+          }
+        });*/
         return formData;
     }
     handleChange(e, field) {
@@ -3656,11 +3730,11 @@ const EdsForm = class {
             message: `${field.name} updated`
         });
     }
-    handleSubmit() {
+    handleSubmit(e) {
         var _a, _b;
-        if (this.isSubmitting) {
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        if (this.isSubmitting)
             return;
-        }
         this.isSubmitting = true;
         this.validateForm();
         if (this.hasError) {
@@ -3755,9 +3829,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: 'ecf49eb81f18b444d059d3bdea4600f4ae594ea9', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '65137fb770f274431c7906326cdf49e0fee73b18', class: "flex flex-col gap-y-24" }, this.title && (h("span", { key: 'e4c5b4a7883c4569a657cc234f18f995480ec8df', role: "heading", class: "f-heading-04" }, this.title)), this.description && h("span", { key: '65528e4600127f1cff4ce0e5be6f8a6bddc4c864', class: "f-body-02 text-light" }, this.description), h("slot", { key: '6230035a050386763723c2b60bd5e81b912762d7' })), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
+        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
             .filter((g) => Array.isArray(buckets[g.id]) && buckets[g.id].length > 0)
-            .map((g) => (h("div", { class: "container 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: '8116d30248f8461a842365470da9915200531028', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), this.formBtn && (h("div", { key: 'e2f1d3ca6a9f6a3b44c45e576150505c49e41dd1', class: "mt-32" }, h("eds-button", { key: 'e312bf08b5db526c00497fafaa9476a225919aaf', 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: '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() })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -3767,6 +3841,174 @@ const EdsForm = class {
 };
 EdsForm.style = EdsFormStyle0;
 
+const edsGlobalSearchCss = ":host{display:block;width:100%}p{margin:0}ol,ul,menu{list-style:none;margin:0;padding:0}.search-wrapper{position:relative;width:100%}.search-dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;background:white;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);max-height:500px;overflow:hidden;z-index:9999;display:flex;flex-direction:column}.dropdown-state{display:flex;align-items:center;justify-content:center;gap:8px;padding:24px;color:#616161;font-size:14px}.dropdown-results{list-style:none;margin:0;overflow-y:auto;overflow-x:hidden;max-height:440px}.result-item{padding:10px 14px;cursor:pointer;transition:background-color 0.15s ease;border-left:3px solid transparent;overflow:hidden;word-wrap:break-word;word-break:break-word}.result-item:hover,.result-item--selected{background-color:var(--grey-200);border-left-color:var(--green-600)}.result-header{display:flex;align-items:center;justify-content:space-between}.result-snippet{font-size:13px;color:#616161;line-height:1.4;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.dropdown-footer{border-top:1px solid #e0e0e0;padding:8px 16px;background:#fafafa;flex-shrink:0}.footer-hint{font-size:11px;color:#757575;display:flex;align-items:center;gap:4px;flex-wrap:wrap}kbd{display:inline-block;padding:2px 5px;font-size:10px;font-family:monospace;line-height:1;color:#424242;background-color:#f5f5f5;border:1px solid #bdbdbd;border-radius:3px;box-shadow:0 1px 0 rgba(0, 0, 0, 0.1)}.dropdown-results::-webkit-scrollbar{width:8px}.dropdown-results::-webkit-scrollbar-track{background:#f5f5f5}.dropdown-results::-webkit-scrollbar-thumb{background:#bdbdbd;border-radius:4px}.dropdown-results::-webkit-scrollbar-thumb:hover{background:#9e9e9e}.flex{display:flex}.inline-flex{display:inline-flex}.text-center{text-align:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-error{color:var(--red-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.ml-4{margin-left:0.25rem}.ml-8{margin-left:0.5rem}.ml-16{margin-left:1rem}.p-16{padding:1rem}.p-64{padding:4rem}.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-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}";
+const EdsGlobalSearchStyle0 = edsGlobalSearchCss;
+
+const EdsGlobalSearch = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.resultSelected = createEvent(this, "resultSelected", 7);
+        this.searchClosed = createEvent(this, "searchClosed", 7);
+        this.handleInput = (event) => {
+            var _a;
+            const target = event.target;
+            this.query = target.value;
+            if (this.debounceTimer) {
+                clearTimeout(this.debounceTimer);
+            }
+            if (!this.query.trim()) {
+                this.results = [];
+                this.hasSearched = false;
+                this.showDropdown = false;
+                return;
+            }
+            sendAnalytics({
+                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',
+            });
+            this.debounceTimer = window.setTimeout(() => {
+                this.runSearch();
+            }, this.debounceDelay);
+        };
+        this.apiEndpoint = '/api/v1/global-search';
+        this.placeholder = 'Search Handbook + Design...';
+        this.limit = 20;
+        this.debounceDelay = 300;
+        this.query = '';
+        this.results = [];
+        this.loading = false;
+        this.error = '';
+        this.hasSearched = false;
+        this.showDropdown = false;
+        this.selectedIndex = -1;
+    }
+    componentDidLoad() {
+        // Focus input if needed
+        if (this.inputRef) {
+            this.inputRef.focus();
+        }
+    }
+    disconnectedCallback() {
+        if (this.debounceTimer) {
+            clearTimeout(this.debounceTimer);
+        }
+    }
+    handleDocumentClick(event) {
+        const path = event.composedPath();
+        if (!path.includes(this.el)) {
+            this.showDropdown = false;
+            this.selectedIndex = -1;
+        }
+    }
+    handleKeydown(event) {
+        if (!this.showDropdown || this.results.length === 0) {
+            if (event.key === 'Escape') {
+                this.searchClosed.emit();
+            }
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.selectedIndex = Math.min(this.selectedIndex + 1, this.results.length - 1);
+                this.scrollToSelected();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.selectedIndex = Math.max(this.selectedIndex - 1, -1);
+                this.scrollToSelected();
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (this.selectedIndex >= 0 &&
+                    this.selectedIndex < this.results.length) {
+                    this.selectResult(this.results[this.selectedIndex]);
+                }
+                break;
+            case 'Escape':
+                this.showDropdown = false;
+                this.selectedIndex = -1;
+                this.searchClosed.emit();
+                break;
+        }
+    }
+    async runSearch() {
+        var _a;
+        const query = this.query.trim();
+        if (!query) {
+            this.results = [];
+            this.hasSearched = false;
+            this.showDropdown = false;
+            return;
+        }
+        this.loading = true;
+        this.error = '';
+        try {
+            const response = await fetch(`${this.apiEndpoint}?q=${encodeURIComponent(query)}&limit=${this.limit}`);
+            if (!response.ok) {
+                throw new Error('Search failed');
+            }
+            const data = await response.json();
+            this.results = (_a = data.items) !== null && _a !== void 0 ? _a : [];
+            this.hasSearched = true;
+            this.showDropdown = true;
+            this.selectedIndex = -1;
+        }
+        catch (err) {
+            console.error('Search error:', err);
+            this.error = 'Search failed. Please try again.';
+            this.results = [];
+            this.showDropdown = true;
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    selectResult(result) {
+        this.resultSelected.emit(result);
+        this.searchClosed.emit();
+        sendAnalytics({
+            category: 'shared-ui',
+            parentContext: null,
+            tag: this.el.tagName.toLowerCase(),
+            name: `search-select: ${result.url}` || 'unknow search result selection',
+            action: 'click',
+        });
+        window.open(result.url, '_blank', 'noopener,noreferrer');
+    }
+    scrollToSelected() {
+        if (this.selectedIndex >= 0 && this.dropdownRef) {
+            const selectedItem = this.dropdownRef.querySelector(`[data-index="${this.selectedIndex}"]`);
+            if (selectedItem) {
+                selectedItem.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+            }
+        }
+    }
+    stripHtml(html) {
+        const div = document.createElement('div');
+        div.innerHTML = html;
+        return div.textContent || div.innerText || '';
+    }
+    get hasResults() {
+        return this.results.length > 0;
+    }
+    get showEmpty() {
+        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: {
+                '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")))))));
+    }
+    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 EdsHeaderStyle0 = edsHeaderCss;
 
@@ -3780,14 +4022,10 @@ const EdsHeader = class {
         this.menuEnabled = false;
         this.isMenuOpen = false;
         this.isUserMenuOpen = false;
-        this.isAuthenticated = false;
-    }
-    onAuthStatusChanged(event) {
-        var _a;
-        this.isAuthenticated = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.authenticated;
     }
     componentDidLoad() {
-        const links = this.hostEl.querySelectorAll('eds-link');
+        var _a, _b;
+        const links = (_b = (_a = this.hostEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-link')) !== null && _b !== void 0 ? _b : [];
         links.forEach((link) => this.emitContext(link));
     }
     emitContext(linkElement) {
@@ -3815,7 +4053,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: 'a0f5bb7d9e850e9414db804019674d6bcbc8ea0b', class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: '678d5b1583e6fa47c0eac8ce734e8ec34cd76ad9', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: '12ce9c42b266bbddfd75d2a8f0097708480a2490', type: logoType, href: this.homeUrl })), this.parsedLinks && (h("nav", { key: 'eb388b679d4e268dc7fc011bc2a6406a619287c8', class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, h("ul", { key: 'c3f8689bb257166c50dd678287c8ad4f54eb315a', 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: '3f689a811a60052393a795937a908cf7d0604cc6' }), this.menuEnabled && (h("div", { key: '506b953b455b72085d83bdaafc6855992075ddbe', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: '5b526affd813549a6142efab255d6486a5e2dd66', "aria-label": "Menu", intent: this.headerVariant === 'default' ? 'ghost' : 'ghostInverse', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
+        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() })))));
     }
     get hostEl() { return getElement(this); }
 };
@@ -3897,10 +4135,10 @@ const EdsImg = class {
             imgOpts['loading'] = 'lazy';
             imgOpts['decoding'] = 'async';
         }
-        return (h("div", { key: 'fec0dcf2ec178a953f4ced8a71b037030983670d', class: {
+        return (h("div", { key: 'c164d1584476f9fb101abb9e1233bed40c782eb9', class: {
                 'items-center justify-center': true,
                 'effect-bg-pattern': this.lazyload && this.showBg
-            } }, h("picture", { key: '0df010a6ed50519be0a2017bf12db7d1ab2fb208' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: 'ea4275b2cc6be0cce5ab63f97d05454e3c4ee1dc', ref: (el) => (this.img = el), class: {
+            } }, 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: {
                 'effect-opacity object-cover object-center': true,
                 'opacity-100': this.loaded,
                 'opacity-0': !this.loaded
@@ -3959,7 +4197,7 @@ const EdsInput = class {
     render() {
         const withIcon = !!this.icon;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
-        return (h("div", { key: '0a6386205f78655569bf93960a4e2664563e4014', 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: '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'
             ? {
                 min: this.min,
                 max: this.max,
@@ -3970,7 +4208,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: 'c78bf1501f682cde9a193ea6726baf2433566516', 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: 'c07e7d5d8394292cf365f32838dfd837ccf168d6', 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: '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 }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -4081,7 +4319,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: 'eaa1d9c1095204c82bd01eab0f19f80eeee64d05' }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (h("fieldset", { class: "space-y-4 mt-8" }, 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: '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' ? ((() => {
             var _a, _b, _c;
             const rangeProps = {
                 name: inputOpts.name,
@@ -4094,7 +4332,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: '60e6c848d41591b2e9ec8c5cf8dd656ec8562c38', class: "mt-6" }, h("eds-input-footer", { key: 'e9298e01dbab9aa6a98a486286b32024766348d1', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link }))));
+        })()) : (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 }))));
     }
     static get delegatesFocus() { return true; }
     get hostEl() { return getElement(this); }
@@ -4114,7 +4352,7 @@ const EdsInputFooter = class {
         this.link = undefined;
     }
     render() {
-        return (h("div", { key: '54571d8f3c08a7a4f12e40728e02a7210ab0d345' }, this.error && this.errorMessage && (h("div", { key: 'db35f0c0dfa931d55d57a9c4ad3fffaeb4cea914', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '63e401d86876829d8d2bbab887a66ef0dbd1837f', icon: "warning" }), h("p", { key: '81f8b0819a7cb119353c8ac38ab1df0cafb9d36f', class: "f-ui-04 ml-4 mb-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: 'e5018623e2d8578864dc1f0b06d54e4a60ff9020', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("a", { key: 'e7b6bde26ae02cf07ac8b8e6461282a4ba1355ed', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
+        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))));
     }
 };
 EdsInputFooter.style = EdsInputFooterStyle0;
@@ -4131,7 +4369,7 @@ const EdsInputLabel = class {
         this.disabled = false;
     }
     render() {
-        return (h("label", { key: '90e0659383fd3be9a166457de5429385fe3bfe02', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: '4d417c45dd636bfd5872d846e5eb89ff3694a4d4' }, h("span", { key: '3924011891ee03e530fe25b269bf4231f3acd9cb', "aria-hidden": "true" }, "*"), h("span", { key: '2f343b6b4ab4cbd538189cfa404210cf676eefe7', class: "sr-only" }, "required")))));
+        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")))));
     }
 };
 EdsInputLabel.style = EdsInputLabelStyle0;
@@ -4178,7 +4416,7 @@ const EdsInputRange = class {
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: '3fa2ef579847e66bcacc35afe202192b78a06975', class: "relative flex flex-col items-start" }, h("input", { key: '669cc03e44dfa1ae8eae758f82f41939de1be625', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: this.sliderVal, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input", tabindex: "0", role: "slider", "aria-describedby": `desc_${this.name}`, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.sliderVal, onInput: this.onInput, onChange: this.onChange }), h("p", { key: 'b3865e1bfacb423da277f4b76dfd0f3294f96cc6', id: `desc_${this.name}`, class: "block f-ui-05 mt-4 text-lighter" }, "Current value: ", this.sliderVal)));
+        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)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -4247,7 +4485,7 @@ const EdsInputSearch = class {
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: 'ad7c42baf7c54ede5dca7dd2a6916557f46d33d6', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '6de80c397bae5e541de1ce3c2937bed860b58363', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: '9637c5569c97061fde3735ecb58b6a6f81a10e15', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", "aria-label": this.placeholder, class: `input pl-36 ${this.decorate}`,
+        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}`,
             //onInput={this.onInput}
             onChange: this.onChange })));
     }
@@ -4276,12 +4514,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: '06be08db809ec9970ca4d7bdbdcdf1c8f2bc8840', class: "relative" }, h("select", { key: 'e4319592e6c2f0c71e0dc75ca2d854506bda70bc', id: selectId, name: this.name, class: {
+        return (h("div", { key: '640bbcca727ad0c511238335197bc533869f6229', class: "relative" }, h("select", { key: '75efd5a9c7951fce245a7ee8b89c35d712d06c08', 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: 'a0ece38948f84a10ea8cd4c0a01b3f8b9730c7ef', 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: '8ce085e43d0ba6340e52b0666dc0a31abbf1a2f9', class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center" }, h("eds-icon-wrapper", { key: '8b91b3fa3a819d04ede5d7816fcb2f04e66fd03b', 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: '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" }))));
     }
 };
 
@@ -4513,7 +4751,7 @@ const EdsLink = class {
         const labelClasses = this.hideLabelOnSmallScreen
             ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
             : '';
-        return (h("a", { key: 'bc82c9ea21f98ed71c812c8366ba8368c3ac5bf4', class: `${classes || ''} ${this.extraClass || ''}`, href: isInteractive ? this.url : undefined, target: this.external && isInteractive ? '_blank' : undefined, rel: this.external && isInteractive ? 'noopener noreferrer' : undefined, tabIndex: isInteractive ? 0 : -1, "aria-label": isIconOnly ? this.ariaLabel || 'Link' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-current": this.current ? 'page' : undefined, role: this.disabled ? 'link' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, h("span", { key: 'eed89377d27a476a7d7e70a8c40f3100b8089a0b', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && h("span", { key: 'c6d09f0c54e092e53350014d6d89b67c35a8be71', class: labelClasses }, this.label), this.renderRightIcon())));
+        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())));
     }
     get el() { return getElement(this); }
 };
@@ -4581,7 +4819,7 @@ const EdsLogo = class {
     }
     render() {
         const logoContent = this.getLogo();
-        return (h("a", { key: 'e5c4e4701d698282dc85561c8c434f0790fb2401', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '32cc8649fe67b6c4a874b5c1aaa6d4d793b4c4c7', innerHTML: logoContent })));
+        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 })));
     }
     get el() { return getElement(this); }
 };
@@ -4772,12 +5010,12 @@ const EdsNps = class {
     render() {
         const count = this.max - this.min + 1;
         //onst fallback = 0;
-        return (h("div", { key: '3831baab086cbf44a3d1511885f15bbab23c9cd2', class: "eds-nps" }, h("eds-input-label", { key: 'f9bd8a812d1b65a634dfaa7aae704218dc79468c', id: "nps-question", name: "nps-question", label: this.question }), h("div", { key: '398f5225c5b4071c2570a74a9e642f5059bb7813', role: "group", id: "nps-buttons", "aria-labelledby": "nps-question", class: "grid grid-cols-11", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: count }, (_, i) => {
+        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) => {
             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: '0acafaae3f2ce522ffbc245c5733ca509d4bf3c1', class: "flex justify-between mt-8" }, h("span", { key: '001e0be00b07ae2e831ea6af0c577a5eeecb9a56', class: "f-ui-04 text-light ml-4" }, this.leftLabel), h("span", { key: '99a12d89ea577fb2bb9c34241a2b9f0f254c284a', class: "f-ui-04 text-light mr-4" }, this.rightLabel))));
+        })), 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))));
     }
     get el() { return getElement(this); }
 };
@@ -5024,7 +5262,7 @@ const EdsPagination = class {
     }
     render() {
         const navigableIndex = -1; // Track index for keyboard navigation
-        return (h("div", { key: '9379c40daaca176e67fb59918f1ca387cb4759b9' }, this.total > 0 && this.mode === 'default' && (h("p", { key: 'd09f7f6b7de136987d5b52564bc60afb3775299a', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, h("span", { key: '4af8f097a79c8fb0495838f06424f43e5e5dcddc', 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: '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) => {
                 if (this.mode === 'default' && !this.isFirstPage()) {
                     this.handlePageClick(event, (this.currentPage || 1) - 1);
                 }
@@ -5117,7 +5355,7 @@ const EdsRating = class {
         this.onSelect(next);
     }
     render() {
-        return (h("div", { key: 'a7fc18897f2901f60432432899da18861e76edf6', id: "rating-buttons", role: "group", "aria-labelledby": "rating", class: "stars flex space-x-1 my-8", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: this.ratingCount }, (_, index) => {
+        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) => {
             const starRating = index + 1;
             const isSelected = starRating <= this.selectedRating;
             // Use the mapping text if available; otherwise, fall back to a generic label.
@@ -5130,7 +5368,88 @@ const EdsRating = class {
 };
 EdsRating.style = EdsRatingStyle0;
 
-const edsStepsCss = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:-2px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4,.steps h5{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before,.steps h5::before{content:counter(step);position:absolute;left:-40px;top:-2px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.my-16{margin-top:1rem;margin-bottom:1rem}.mt-16{margin-top:1rem}.mb-28{margin-bottom:1.75rem}.ml-8{margin-left:0.5rem}.gap-y-16{row-gap:1rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.cursor-pointer{cursor:pointer}";
+const 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;
+
+const EdsSpinner = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.size = 'md';
+        this.variant = 'secondary';
+        this.message = undefined;
+        this.background = 'var(--grey-200)';
+        this.fullscreen = false;
+    }
+    get spinnerSize() {
+        switch (this.size) {
+            case 'xs':
+                return '1rem';
+            case 'sm':
+                return '4rem';
+            case 'lg':
+                return '8rem';
+            case 'xl':
+                return '10rem';
+            case 'md':
+            default:
+                return '6rem';
+        }
+    }
+    get spinnerThickness() {
+        switch (this.size) {
+            case 'xs':
+                return '4px';
+            case 'sm':
+                return '8px';
+            case 'lg':
+                return '16px';
+            case 'xl':
+                return '20px';
+            case 'md':
+            default:
+                return '12px';
+        }
+    }
+    render() {
+        // derive colors from variant
+        const borderColor = this.variant === 'primary' ? 'var(--grey-900)' : 'var(--grey-400)';
+        const bottomColor = this.variant === 'primary' ? 'var(--green-400)' : 'var(--grey-900)';
+        const spinnerStyle = Object.assign({ width: this.spinnerSize, height: this.spinnerSize, border: `${this.spinnerThickness} solid ${borderColor}`, borderBottomColor: bottomColor }, (!this.fullscreen && { display: 'inline-block' }));
+        // Overlay style: use fixed positioning for fullscreen,
+        // and absolute positioning for inline mode.
+        const overlayStyle = this.fullscreen
+            ? {
+                position: 'fixed',
+                top: '0',
+                left: '0',
+                width: '100vw',
+                height: '100vh',
+                zIndex: '9999999',
+                backgroundColor: this.background,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center'
+            }
+            : {
+                position: 'absolute',
+                top: '0',
+                left: '0',
+                width: '100%',
+                height: '100%',
+                //zIndex: '1000',
+                backgroundColor: this.background,
+                display: 'flex',
+                flexDirection: 'column',
+                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))));
+    }
+};
+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 EdsStepsStyle0 = edsStepsCss;
 
 const EdsSteps = class {
@@ -5140,9 +5459,26 @@ const EdsSteps = class {
         this.finished = createEvent(this, "finished", 7);
         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;
+                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) {
+                return;
+            } // do nothing when Next/Finish would be disabled
+            // 3) Allow jumping back or forward when not gated
+            this.activeStep = index;
+            this.step.emit(this.activeStep);
+        };
         this.handleNext = () => {
             const lastIndex = this.parsedSteps.length - 1;
             if (this.activeStep >= lastIndex) {
+                this.activeStep = -1;
                 this.finished.emit();
                 return;
             }
@@ -5212,9 +5548,23 @@ const EdsSteps = class {
             ? !!this.disableNext[index] // per-step
             : index === this.activeStep && !!this.disableNext; // only active step
     }
-    /** Render the semantic heading element */
-    renderHeading(title) {
+    /** 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);
+            const onKey = (e) => {
+                if (forwardBlocked) {
+                    return;
+                }
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleTitleClick(index);
+                }
+            };
+            return (h(Tag, { class: `eds-steps__title ${forwardBlocked ? 'is-disabled' : ''}`, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-disabled": forwardBlocked ? 'true' : 'false', "aria-expanded": isOpen, "aria-controls": `eds-step-panel-${index}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey }, title));
+        }
         return h(Tag, null, title);
     }
     render() {
@@ -5222,11 +5572,11 @@ const EdsSteps = class {
         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), this.activeStep === index && (h("div", { class: "content grid gap-y-16" }, 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}` })))));
+                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}` })))));
             })));
         }
         // 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), h("div", { class: "content" }, 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 }))))))));
+        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 }))))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -5235,7 +5585,7 @@ const EdsSteps = class {
 };
 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}";
+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 EdsStepsV2Style0 = edsStepsV2Css;
 
 const EdsStepsV2 = class {
@@ -5245,14 +5595,29 @@ const EdsStepsV2 = class {
         this.finished = createEvent(this, "finished", 7);
         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;
+                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) {
+                return;
+            }
+            // Allow back (or forward when not gated)
+            this.activeStep = index;
+            this.step.emit(this.activeStep);
+        };
         this.handleNext = () => {
             const lastIndex = this.parsedSteps.length - 1;
             if (this.activeStep >= lastIndex) {
-                // Finish
                 this.finished.emit();
+                this.activeStep = -1; // collapse last step
                 return;
             }
-            // Next
             const target = this.activeStep + 1;
             this.next.emit(target);
             if (!this.disableNext) {
@@ -5323,16 +5688,33 @@ const EdsStepsV2 = class {
     get parsedSteps() {
         return parseData(this.steps);
     }
+    isNextDisabledForCurrent() {
+        return !!this.disableNext;
+    }
     /** Render the semantic heading element */
-    renderHeading(title) {
+    renderHeading(title, index) {
         const Tag = this.headingLevel;
-        return h(Tag, null, title);
+        if (this.type === 'linear') {
+            const isOpen = this.activeStep === index;
+            const forwardBlocked = index > this.activeStep && this.isNextDisabledForCurrent();
+            const onKey = (e) => {
+                if (forwardBlocked) {
+                    return;
+                }
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleTitleClick(index);
+                }
+            };
+            return (h(Tag, { class: `eds-steps__title ${forwardBlocked ? 'is-disabled' : ''}`, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-disabled": forwardBlocked ? 'true' : 'false', "aria-expanded": isOpen, "aria-controls": `eds-step-panel-${index}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey }, title));
+        }
+        return h(Tag, { class: "eds-steps__title" }, title);
     }
     render() {
         const steps = this.parsedSteps;
-        return (h("div", { key: '1ff00f17a85e9a3a9d7bef23694560acd77e7ee4', 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: 'a0328e80df5d9447cfa5378eb9e45925f1f68c69', 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), this.activeStep === index && (h("div", { class: "content grid gap-y-16" }, 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" }))))))))) : (
+        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), h("div", { class: "content" }, 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 })))))))))));
+        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 })))))))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -5391,11 +5773,11 @@ const EdsSwitch = class {
                     : this.labelOff
                 : 'Toggle switch'
             : undefined;
-        return (h("div", { key: '95a833cbe8e736d7e747f6fdd8504dd8c169ea60', class: "switch-container" }, this.labelOff && (h("span", { key: 'a88de63c35409ab244a6cba5bd70a10728a08b2a', id: `${switchId}-off`, class: "switch-label switch-label--off mr-8" }, this.labelOff)), h("button", { key: 'd6573f05164f2b57063e9a97c3b983f32700bd7a', id: switchId, tabindex: this.disabled ? '-1' : '0', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-labelledby": labelledBy.length > 0 ? labelledBy.join(' ') : undefined, "aria-label": accessibleLabel, class: {
+        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: {
                 switch: true,
                 'switch--checked': this.checked,
                 'switch--disabled': this.disabled
-            }, onClick: this.toggleSwitch, onKeyDown: this.handleKeyDown, disabled: this.disabled }, h("span", { key: '35e6da3bb76779bfaad04d8990dec419524fb543', class: "switch-handle" })), this.labelOn && (h("span", { key: 'b14243d9d45dbdddb9473ad2c5696e07be9831d3', 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: 'd8e0e1e3b562b4ac894998641cb7c813578e1a3f', class: "switch-handle" })), this.labelOn && (h("span", { key: '86b56fbbc537e9f08d11a509a1cb0e19d8dc3c39', id: `${switchId}-on`, class: "switch-label switch-label--on ml-8" }, this.labelOn))));
     }
     get el() { return getElement(this); }
 };
@@ -5626,7 +6008,7 @@ const EdsTable = class {
         const columnWidth = visibleColumnsCount > 0 ? Math.floor((currentContainerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
         const paginatedRows = this.getPaginatedRows();
         const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
-        return (h("div", { key: '67cfdabc741af13585699e43e67ba0d204a60706' }, this.searchEnabled && (h("div", { key: '208240b9832f9b2e9645cc9d7315a43bd47b54b3' }, 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: '893924497d1535b7d29bc0b64ba48f4a3e366c43', class: "mt-20" }, h("table", { key: 'a019fa4f2886d4c2aa4bddc88dc7b6d7aa63fdcb', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: 'a6360fea59c605878e443a23cf45d0f8a9644140' }, h("tr", { key: '09702e8838f32c52bf6314b59ec598c6fa55d609', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
+        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) => {
             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` } }));
@@ -5635,7 +6017,7 @@ const EdsTable = class {
                 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 null;
-        }))), h("tbody", { key: '5cdb3697e6c84921a823b40714a497f02c82e360' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
+        }))), 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) => {
             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: {
@@ -5650,7 +6032,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: 'f5af2cd6e65c3ed55ec2810ec4b1e3f891866271', class: "mt-20" }, h("eds-pagination", { key: '32965384707df502fb197712c73bb290e38ce040', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+        }))))))), 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" })))));
     }
     get hostEl() { return getElement(this); }
     static get watchers() { return {
@@ -5825,12 +6207,12 @@ const EdsTabs = class {
         }
     }
     render() {
-        return (h("div", { key: '7cb51cf475d45ee3e43877ee4d42565f5930613a', id: `${this.identifier}` }, h("div", { key: '4f3c6d23f9084f07e5728b72310b96798d20b724', class: "scroller-x overflow-x-auto relative z-[1] mx-auto px-16 pt-8 lg:px-28 after:border-soft before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, h("nav", { key: '4d55e72e9f437cef8be06931445f619196a973a7', role: "tablist", ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+        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) => {
             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: 'e75f877da39c25e912853fea5dc2438fc15c67b5', 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: '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}` })))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -5875,7 +6257,7 @@ const EdsTag = class {
     }
     render() {
         const classes = tagStyles({ intent: this.intent, size: this.size });
-        return h("span", { key: 'e3fe041e8783a7d1bb5a281eb154e3c07851da38', class: classes }, this.label);
+        return h("span", { key: '6a229183bdaf96687e1f71ca3938a22c1259546e', class: classes }, this.label);
     }
 };
 EdsTag.style = EdsTagStyle0;
@@ -5971,7 +6353,7 @@ const EdsTooltip = class {
     }
     render() {
         const positionClass = this.position === 'bottom' ? 'top-full mt-2' : 'bottom-full mb-2';
-        return (h("div", { key: '135df7d17db03fb3bb7bbcc50ad9ee5d84a2bca2', class: "relative w-full inline-block group" }, h("slot", { key: '4c12874eeb942e33f9c62ea6f1077fd051f683b6' }), h("div", { key: '8bb7173d16889b2ae550dc0269d9e47e1dae00ac', class: `absolute ${positionClass}
+        return (h("div", { key: '67fbc86d5f9ecfde1d5a0a588f4fb8be2050af0b', class: "relative w-full inline-block group" }, h("slot", { key: 'b304174862dd4d5ca93418ecb0d2b4fc2c80427c' }), h("div", { key: 'fcd874d53d0e17b7d3be2c6552571f82fbde6506', 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
@@ -5992,7 +6374,9 @@ const EdsUser = class {
         };
         this.user = undefined;
         this.intent = 'tertiary';
+        this.dropdownLabel = 'Account';
         this.expanded = false;
+        this.shortMode = false;
     }
     /**
      * Helper getter to ensure we work with a User object.
@@ -6016,13 +6400,18 @@ const EdsUser = class {
         const initials = `${((_a = user.given_name) === null || _a === void 0 ? void 0 : _a.charAt(0)) || ''}${((_b = user.family_name) === null || _b === void 0 ? void 0 : _b.charAt(0)) || ''}`.toUpperCase();
         return initials || ((_d = (_c = user.name) === null || _c === void 0 ? void 0 : _c.charAt(0)) === null || _d === void 0 ? void 0 : _d.toUpperCase()) || '';
     }
+    async closeDropdown() {
+        var _a;
+        await ((_a = this.dropdownEl) === null || _a === void 0 ? void 0 : _a.close());
+        this.expanded = false;
+    }
     render() {
         const user = this.parsedUser;
         const iconName = this.expanded ? 'chevron-down' : 'chevron-right';
-        return (h("div", { key: '965387104c4bd6cd3223c08f16d90146c098594c', class: "block" }, h("div", { key: '37fe5539cb058112ebe0d910439acb55b5abccd8', class: "flex items-center" }, h("eds-dropdown", { key: '17afc8dbae191aec1202ba04d85c41ed656a8c5b', label: `Hi, ${user.preferred_username}`, intent: this.intent, "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: iconName, class: "text-default", onDropdown: this.handleDropdown }, h("div", { key: '0228c1728b0b73e2504d2608339f9be408be09b8', class: "min-w-[280px] p-8" }, h("div", { key: 'b83148ff8249bde91842b036da5506f9f5cbb145', class: "flex gap-x-16" }, h("eds-avatar", { key: '243a05bae2e4e592dc386b1897d824232d0bcfa6', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "black" }), h("div", { key: '6938f54621aa89e61aa6639e8c88af4e262e0fec', class: "max-w-full" }, user.name && h("p", { key: '224ce5cf6819a9dd0c3794410a94da30cc4213bf', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: '096ac761149763ef4305ef5e9bf1f4b593a0fe4f', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: '79f7da3c6c5efc1f521991c403184cf050b3d2e7', class: "f-ui-03-light text-light mt-4" }, user.email))), h("div", { key: '52ce98bcc290902605ebd427ee8ab72ac9af3d62', class: "text-default flex w-full flex-col gap-y-8" }, h("slot", { key: '88d1b250c434830347e0eb813214382ce899c485' })))))));
+        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' })))))));
     }
     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, 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, 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, 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 };