@ebrains/components 2.3.1 → 2.4.1

package/dist/components/eds-input-footer2.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$1 } from './eds-link2.js';
 
 const edsInputFooterCss = "p{margin:0}.text-error{color:var(--red-700)}.flex{display:flex}.items-center{align-items:center}.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)}.ml-4{margin-left:0.25rem}.mb-4{margin-bottom:0.25rem}.f-ui-05{font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing)}.text-lighter{color:var(--grey-600)}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\\:text-lighter:hover{color:var(--grey-600)}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}";
 const EdsInputFooterStyle0 = edsInputFooterCss;
@@ -16,7 +17,7 @@ const EdsInputFooter = /*@__PURE__*/ proxyCustomElement(class EdsInputFooter ext
         this.link = undefined;
     }
     render() {
-        return (h("div", { key: 'f968c3f3cfa5d419fe2d736b8da4f1dfd5fca88f' }, this.error && this.errorMessage && (h("div", { key: '780480b021c958a4d429b13a190ed630df98f539', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '3577ebdde2d337e393d7ae41b0b55d3eac046149', icon: "warning" }), h("p", { key: 'c839fe81dcd8ee0fba4ffa53dd7ba5e65a39fa46', class: "f-ui-04 ml-4 mb-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '57833b0f0f58d36773401eaa0f37fd820ebe094c', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("a", { key: '2330e747a9274c6b9bcadf5ae4a770cfbab78b27', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
+        return (h("div", { key: 'ac60e5d56a86af64ea34445f9376c942258c9026' }, this.error && this.errorMessage && (h("div", { key: '25ff09f276f7028e1b2877133ab639b35cdebaba', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '2add9a34a966428af96598f3e8e07f9535da8728', icon: "warning" }), h("p", { key: 'bcb624339190c0585e960a0c4debc3fec2ada4eb', class: "f-ui-04 ml-4 mb-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '00944237618f325774f316faaf4620e5eb507289', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("eds-link", { key: '464c5a59e9c36a06f1cdae9be9e09a4f8b05d282', label: this.link.label, url: this.link.url, intent: "underline", size: "small", external: true }))));
     }
     static get style() { return EdsInputFooterStyle0; }
 }, [1, "eds-input-footer", {
@@ -30,7 +31,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["eds-input-footer", "eds-icon-wrapper"];
+    const components = ["eds-input-footer", "eds-icon-wrapper", "eds-link"];
     components.forEach(tagName => { switch (tagName) {
         case "eds-input-footer":
             if (!customElements.get(tagName)) {
@@ -38,6 +39,11 @@ function defineCustomElement() {
             }
             break;
         case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "eds-link":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/dist/components/eds-input-label2.js

@@ -14,7 +14,7 @@ const EdsInputLabel = /*@__PURE__*/ proxyCustomElement(class EdsInputLabel exten
         this.disabled = false;
     }
     render() {
-        return (h("label", { key: '4760fa1b6a66b4ba30b689e65acc9f66e944210d', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: 'db3f8b321ab41765d9cc1e1d3b67ef2d58c1a53a' }, h("span", { key: '0c6f4ee8daab357ff4da750241c472b126cfbb98', "aria-hidden": "true" }, "*"), h("span", { key: 'ad18af56b0f20be3c9ee7280c0610c958adfdb87', class: "sr-only" }, "required")))));
+        return (h("label", { key: '8a421c62ddec859bd7837454aa664a116001fd31', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: 'ad49202fb172a182822587248c141e0f8d7bcc6f' }, h("span", { key: 'e682ff5f3ac83b8adce37c8c9893c2aa235c97b1', "aria-hidden": "true" }, "*"), h("span", { key: '343d2abb7c452fc2a6a67b04727237fea9519838', class: "sr-only" }, "required")))));
     }
     static get style() { return EdsInputLabelStyle0; }
 }, [1, "eds-input-label", {

package/dist/components/eds-input-range2.js

@@ -43,7 +43,7 @@ const EdsInputRange = /*@__PURE__*/ proxyCustomElement(class EdsInputRange exten
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: '7592e5f4c1154281fb0577af739451ea0f16dc17', class: "relative flex flex-col items-start" }, h("input", { key: '8d5d0b3b5b51665a340304ba56f6fd6b053d3c5f', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: this.sliderVal, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input", tabindex: "0", role: "slider", "aria-describedby": `desc_${this.name}`, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.sliderVal, onInput: this.onInput, onChange: this.onChange }), h("p", { key: 'c040d2a7e6aae8662e33d393bf1e93b0c8c254dc', id: `desc_${this.name}`, class: "block f-ui-05 mt-4 text-lighter" }, "Current value: ", this.sliderVal)));
+        return (h("div", { key: '27c60fe7ad5cf3cf8255129529ef64905c87b609', class: "relative flex flex-col items-start" }, h("input", { key: '8ef115e18b6afd956c57a30cd4b9ee45ecd79334', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: this.sliderVal, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input", tabindex: "0", role: "slider", "aria-describedby": `desc_${this.name}`, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.sliderVal, onInput: this.onInput, onChange: this.onChange }), h("p", { key: 'beb95f6aa032db57ec401839cea48ac1d3a1861d', id: `desc_${this.name}`, class: "block f-ui-05 mt-4 text-lighter" }, "Current value: ", this.sliderVal)));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/eds-input-search2.js

@@ -64,7 +64,7 @@ const EdsInputSearch = /*@__PURE__*/ proxyCustomElement(class EdsInputSearch ext
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: 'e5065d821db5f66b4ddfccb84e911f8c9148d12c', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: 'e661107b6202d7529209c67622a9f27bb15de2fc', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: '1633e9108da6b675f1bcbddbbcb88e67843dddbf', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", "aria-label": this.placeholder, class: `input pl-36 ${this.decorate}`,
+        return (h("div", { key: '4057975b193458daff5cc779e7671f3aa8df82fb', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '47366d7737c3c044aa97f6e5a5a76301c5f688ae', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: '70195ba54b9afd1c953735899d6fbfd668f81c71', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", "aria-label": this.placeholder, class: `input pl-36 ${this.decorate}`,
             //onInput={this.onInput}
             onChange: this.onChange })));
     }

package/dist/components/eds-input-select2.js

@@ -24,12 +24,12 @@ const EdsInputSelect = /*@__PURE__*/ proxyCustomElement(class EdsInputSelect ext
         const selectId = this.inputId || this.name;
         const placeholderText = this.placeholder || `Pick from the list`;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : undefined;
-        return (h("div", { key: '640bbcca727ad0c511238335197bc533869f6229', class: "relative" }, h("select", { key: '75efd5a9c7951fce245a7ee8b89c35d712d06c08', id: selectId, name: this.name, class: {
+        return (h("div", { key: '5f73cb76010cac41f433921395aaf779765e298a', class: "relative" }, h("select", { key: '0705adad43076b6048900d5c62b8be2dff090270', id: selectId, name: this.name, class: {
                 input: true,
                 'input-error': this.error,
                 'px-4': true,
                 'py-2': true
-            }, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, h("option", { key: 'e8723f0f947dc8e07660a34d49eb769e4bebfd06', value: "", disabled: true, hidden: true }, placeholderText), this.options.map((opt, index) => (h("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), h("span", { key: '23531f90fcaa854a8abff796e2879648987a56b9', class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center" }, h("eds-icon-wrapper", { key: '6e836b9606c1444d8e97b78ebe1ea4cf092070e3', class: "w-20 h-20", icon: "chevron-right" }))));
+            }, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, h("option", { key: '6b2d7856821cfe804f63f6f289f78bd3f7a8273c', value: "", disabled: true, hidden: true }, placeholderText), this.options.map((opt, index) => (h("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), h("span", { key: '161692e967ed9c094feb171c6d067058dfafa146', class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center" }, h("eds-icon-wrapper", { key: '513a74b4753a08280326970dfbb16642b5c6b986', class: "w-20 h-20", icon: "chevron-right" }))));
     }
 }, [0, "eds-input-select", {
         "inputId": [1, "input-id"],

package/dist/components/eds-input2.js

@@ -51,7 +51,7 @@ const EdsInput = /*@__PURE__*/ proxyCustomElement(class EdsInput extends HTMLEle
     render() {
         const withIcon = !!this.icon;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
-        return (h("div", { key: '069d8ed6f23b2d98bbc24b727cad0cbc94d1a956', class: "relative flex items-center" }, this.type === 'textarea' ? (h("textarea", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, class: `min-h-80 input input-textarea ${withIcon ? 'input-with-icon' : ''} ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })) : this.type === 'select' ? (h("select", { id: this.inputId || this.name, name: this.name, required: this.required, disabled: this.disabled, class: `input input-select ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, onInput: this.handleInput, onChange: this.handleInput }, this.options.map((option) => (h("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (h("input", Object.assign({ id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, type: this.type, checked: ['radio', 'checkbox'].includes(this.type) ? this.checked : undefined }, (this.type === 'number'
+        return (h("div", { key: '10cacc49f2e61f8b357d1d0dd303822d7b3d7800', class: "relative flex items-center" }, this.type === 'textarea' ? (h("textarea", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, class: `min-h-80 input input-textarea ${withIcon ? 'input-with-icon' : ''} ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })) : this.type === 'select' ? (h("select", { id: this.inputId || this.name, name: this.name, required: this.required, disabled: this.disabled, class: `input input-select ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, onInput: this.handleInput, onChange: this.handleInput }, this.options.map((option) => (h("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (h("input", Object.assign({ id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, type: this.type, checked: ['radio', 'checkbox'].includes(this.type) ? this.checked : undefined }, (this.type === 'number'
             ? {
                 min: this.min,
                 max: this.max,
@@ -62,7 +62,7 @@ const EdsInput = /*@__PURE__*/ proxyCustomElement(class EdsInput extends HTMLEle
               input ${this.type === 'radio' ? 'input-radio' : this.type === 'checkbox' ? 'input-checkbox' : ''}
               ${withIcon && this.type !== 'radio' && this.type !== 'checkbox' ? 'input-icon pl-36' : ''} 
               ${this.error ? 'input-error' : ''}
-              `, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput }))), this.maxLength && this.type === 'textarea' && (h("span", { key: '2295538938128173047a5c81166cbee3d652cf25', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (h("eds-icon-wrapper", { key: '70a5bc0c9019c25499c4c65ece50ddb602eb3345', class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, icon: this.icon }))));
+              `, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput }))), this.maxLength && this.type === 'textarea' && (h("span", { key: '2f17e830e7d5977c06dff45e248ec6d4bcf2885c', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (h("eds-icon-wrapper", { key: 'd171f505b869787c01945720489343a6d57e02bf', class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, icon: this.icon }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/eds-link2.js

@@ -70,7 +70,6 @@ const linkStyles = cva([
             false: ''
         },
         size: {
-            underline: 'f-body-02 ',
             small: 'min-h-36 f-ui-02 px-12',
             large: 'min-h-44 f-ui-01 px-16'
         }
@@ -123,6 +122,16 @@ const linkStyles = cva([
             intent: 'inverse',
             isActive: true,
             class: 'before:!opacity-100'
+        },
+        {
+            intent: 'underline',
+            size: 'small',
+            class: '!px-0 !py-0 !min-h-0 f-ui-02'
+        },
+        {
+            intent: 'underline',
+            size: 'large',
+            class: '!px-0 !py-0 !min-h-0 f-ui-01'
         }
     ],
     defaultVariants: {
@@ -140,7 +149,7 @@ const EdsLink = /*@__PURE__*/ proxyCustomElement(class EdsLink extends HTMLEleme
         this.__attachShadow();
         this.parentContext = null; // Accepts the entire event detail or null
         this.label = undefined;
-        this.intent = undefined;
+        this.intent = 'primary';
         this.icon = undefined;
         this.iconPos = 'right';
         this.iconSmall = false;
@@ -152,7 +161,6 @@ const EdsLink = /*@__PURE__*/ proxyCustomElement(class EdsLink extends HTMLEleme
         this.ariaLabel = undefined;
         this.disabled = false;
         this.hideLabelOnSmallScreen = false;
-        this.extraClass = undefined;
     }
     handleParentContext(event) {
         if (event.target !== this.el) {
@@ -197,9 +205,6 @@ const EdsLink = /*@__PURE__*/ proxyCustomElement(class EdsLink extends HTMLEleme
         }
     }
     getLinkSize() {
-        if (this.intent === 'underline') {
-            return 'underline';
-        }
         return this.size;
     }
     renderLeftIcon() {
@@ -228,12 +233,13 @@ const EdsLink = /*@__PURE__*/ proxyCustomElement(class EdsLink extends HTMLEleme
             isActive: this.current,
             hasIcon: !!this.icon
         });
+        const safeUrl = typeof this.url === 'string' && this.url.length ? this.url : undefined;
         const isInteractive = !this.disabled;
         const isIconOnly = !this.label || (this.hideLabelOnSmallScreen && this.icon);
         const labelClasses = this.hideLabelOnSmallScreen
             ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
             : '';
-        return (h("a", { key: '5c190b2b079dfecb003883a8b25d3c258697c4d6', class: `${classes || ''} ${this.extraClass || ''}`, href: isInteractive ? this.url : undefined, target: this.external && isInteractive ? '_blank' : undefined, rel: this.external && isInteractive ? 'noopener noreferrer' : undefined, tabIndex: isInteractive ? 0 : -1, "aria-label": isIconOnly ? this.ariaLabel || 'Link' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-current": this.current ? 'page' : undefined, role: this.disabled ? 'link' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, h("span", { key: 'f4e89354ea8e252a26c85a560af9e7cfed7f8287', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && h("span", { key: 'ca10c283dd14c3e3830baddec7ba193522a02e7c', class: labelClasses }, this.label), this.renderRightIcon())));
+        return (h("a", { key: '1ae7cb8fda0fdc0a4396504a4dfa13afa428d98f', class: `${classes || ''}`, href: isInteractive ? safeUrl : undefined, target: this.external && isInteractive ? '_blank' : undefined, rel: this.external && isInteractive ? 'noopener noreferrer' : undefined, tabIndex: isInteractive ? 0 : -1, "aria-label": isIconOnly ? this.ariaLabel || 'Link' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-current": this.current ? 'page' : undefined, role: this.disabled ? 'link' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, h("span", { key: '7fc137758d974ba4a3a974f7b22587d3ca3b031e', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && h("span", { key: '7c79baae49579eef264ab6546aa3ac8e044dcb46', class: labelClasses }, this.label), this.renderRightIcon())));
     }
     get el() { return this; }
     static get style() { return EdsLinkStyle0; }
@@ -250,8 +256,7 @@ const EdsLink = /*@__PURE__*/ proxyCustomElement(class EdsLink extends HTMLEleme
         "url": [1],
         "ariaLabel": [1, "aria-label"],
         "disabled": [4],
-        "hideLabelOnSmallScreen": [4, "hide-label-on-small-screen"],
-        "extraClass": [1, "extra-class"]
+        "hideLabelOnSmallScreen": [4, "hide-label-on-small-screen"]
     }, [[0, "parentContext", "handleParentContext"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/eds-logo2.js

@@ -67,7 +67,7 @@ const EdsLogo = /*@__PURE__*/ proxyCustomElement(class EdsLogo extends HTMLEleme
     }
     render() {
         const logoContent = this.getLogo();
-        return (h("a", { key: '735f3592da7eed337c528731c28c6e708bbfcf82', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '5db166d68cb6e193d3dbc2a8ba4b54eae99aac44', innerHTML: logoContent })));
+        return (h("a", { key: '0a0d4dd69a1af10c1c571a56ed0f698d95652405', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '0d8ca0f9c647b3b12daf944b9c2919a93134bec2', innerHTML: logoContent })));
     }
     get el() { return this; }
     static get style() { return EdsLogoStyle0; }

package/dist/components/eds-modal.js

@@ -120,9 +120,9 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
     render() {
         // Generate a unique id for the title so we can reference it for aria-labelledby.
         const titleId = `modal-title-${this.el.tagName.toLowerCase()}`;
-        return (h("div", { key: '084e8a793a54d3b94e9936aea3dddff6c5dbf31c', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999991 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (h("div", { key: 'f1ba9240bd0427010e6439e4113a72c723e76735', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
+        return (h("div", { key: '6b7cbab7db29bb09415bb9538d69ac9a238a7776', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999991 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (h("div", { key: '56f00980b2f843b5c1ce85502409d4711d89fad7', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
             ,
-            onClick: () => this.close() })), h("div", { key: 'fdc9834811631f45218de181d8c8aac6437b6d8e', class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: '5c26633ad8dcccef085d8e44ae730d2a2aa8c8e8', class: `flex justify-between items-center border-b-2 border-softer px-20 py-20  ${this.inverseHeader ? 'bg-strongest text-inverse' : 'bg-dark text-default'}` }, h("span", { key: '469d306cad57cceebc01d7875bf7ff2b2677e25a', id: titleId, class: `f-heading-04 ${this.getTruncateClass()}` }, this.heading), h("eds-button", { key: '37234a6ba72ec0c2b02b245974b2902a18578f02', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8 text-default" })), h("div", { key: '1b30473db862378b7d712b7a9b954a37ae61743f', class: "pt-8 px-20 py-20" }, h("slot", { key: 'e1ef78bbd750000172e3536f8d8b6584085869b6' })))));
+            onClick: () => this.close() })), h("div", { key: '687e1975bb8a17b0a6eb42038f72117dc71ca876', class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: '653886c1ee090152b0a9d8dbb6e554762496167f', class: `flex justify-between items-center border-b-2 border-softer px-20 py-20  ${this.inverseHeader ? 'bg-strongest text-inverse' : 'bg-dark text-default'}` }, h("span", { key: 'efefadd7e6630d9d9b498e68480a41b604c16c9f', id: titleId, class: `f-heading-04 ${this.getTruncateClass()}` }, this.heading), h("eds-button", { key: '79a156bd0640990911f1480a4e6becc7c4c20d7b', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8 text-default" })), h("div", { key: '802a6cc72f1bb41e8f907baa8d37cb5a01baf0cf', class: "pt-8 px-20 py-20" }, h("slot", { key: '1a59aaa764e4c4ed972de7a700ddf8f716e40e58' })))));
     }
     get el() { return this; }
     static get style() { return EdsModalStyle0; }

package/dist/components/eds-nps2.js

@@ -14,71 +14,84 @@ const EdsNps = /*@__PURE__*/ proxyCustomElement(class EdsNps extends HTMLElement
         this.nps = createEvent(this, "nps", 7);
         this.min = 0;
         this.max = 10;
+        this.btnRefs = [];
+        this.onSelect = (value) => {
+            this.selectedValue = value;
+            this.nps.emit(value);
+            // Move focus to the selected button (like your rating component)
+            requestAnimationFrame(() => {
+                var _a, _b;
+                const idx = value - this.min;
+                (_b = (_a = this.btnRefs[idx]) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+            });
+        };
+        this.handleKeyNav = (e) => {
+            const { key } = e;
+            const navigational = ['ArrowRight', 'ArrowLeft', 'Home', 'End', ' ', 'Enter'];
+            if (!navigational.includes(key)) {
+                return;
+            }
+            e.preventDefault();
+            const count = this.max - this.min + 1;
+            // Derive current index from selectedValue; if none, use 0 (first)
+            let currentIdx = this.selectedValue == null ? 0 : this.selectedValue - this.min;
+            switch (key) {
+                case 'ArrowRight':
+                    currentIdx = Math.min(count - 1, currentIdx + 1);
+                    this.setActiveByIndex(currentIdx, /*commit*/ false);
+                    break;
+                case 'ArrowLeft':
+                    currentIdx = Math.max(0, currentIdx - 1);
+                    this.setActiveByIndex(currentIdx, /*commit*/ false);
+                    break;
+                case 'Home':
+                    this.setActiveByIndex(0, /*commit*/ false);
+                    break;
+                case 'End':
+                    this.setActiveByIndex(count - 1, /*commit*/ false);
+                    break;
+                case ' ':
+                case 'Enter':
+                    // Commit current focused item
+                    this.onSelect(this.min + currentIdx);
+                    break;
+            }
+        };
         this.question = undefined;
         this.leftLabel = undefined;
         this.rightLabel = undefined;
         this.selectedValue = null;
     }
-    handleClick(value) {
+    /** Move visual highlight & roving tabindex; optionally commit selection */
+    setActiveByIndex(index, commit = false) {
+        var _a;
+        const value = this.min + index;
+        // Update highlight so focus movement is visible (like your rating)
         this.selectedValue = value;
-        this.nps.emit(value);
-    }
-    handleKeyNav(e) {
-        const radios = Array.from(this.el.shadowRoot.querySelectorAll('eds-button'));
-        const currentIndex = radios.findIndex((r) => r.tabIndex === 0);
-        switch (e.key) {
-            case 'ArrowRight':
-            case 'ArrowLeft': {
-                e.preventDefault();
-                const delta = e.key === 'ArrowRight' ? 1 : -1;
-                const nextIndex = Math.min(this.max, Math.max(0, currentIndex + delta));
-                this.activateRadio(radios, nextIndex);
-                break;
-            }
-            case 'Home': {
-                e.preventDefault();
-                this.activateRadio(radios, 0);
-                break;
-            }
-            case 'End': {
-                e.preventDefault();
-                this.activateRadio(radios, this.max);
-                break;
-            }
-            case 'Enter':
-            case ' ': {
-                e.preventDefault();
-                if (currentIndex >= 0) {
-                    this.handleClick(this.min + currentIndex);
-                }
-                break;
-            }
-            case 'Escape': {
-                e.preventDefault();
-                if (currentIndex >= 0) {
-                    radios[currentIndex].blur();
-                }
-                break;
-            }
-            default:
-                return;
+        // Focus the button host (ensure eds-button forwards focus to its inner <button>)
+        const target = this.btnRefs[index];
+        typeof (target === null || target === void 0 ? void 0 : target.focusInner) === 'function' ? target.focusInner() : (_a = target === null || target === void 0 ? void 0 : target.focus) === null || _a === void 0 ? void 0 : _a.call(target);
+        if (commit) {
+            this.onSelect(value);
         }
     }
-    activateRadio(radios, index) {
-        const target = radios[index];
-        const value = this.min + index;
-        this.handleClick(value);
-        target.focus();
-    }
     render() {
         const count = this.max - this.min + 1;
-        //onst fallback = 0;
-        return (h("div", { key: '19326c22d2b5c9f2fbc97bfb3c3d958d14cdfa25', class: "eds-nps" }, h("eds-input-label", { key: '046239977d2dc639eabfc60a67df62011833a983', id: "nps-question", name: "nps-question", label: this.question }), h("div", { key: 'e296b8ff3a081f42263ee0c0a28ef3f304b1e1c0', role: "group", id: "nps-buttons", "aria-labelledby": "nps-question", class: "grid grid-cols-11", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: count }, (_, i) => {
+        return (h("div", { key: 'f5e19e0f750c0de6da3bae5713dca0e13eba85fc', class: "eds-nps" }, h("eds-input-label", { key: '3ff611a932976956735395fb531d9a800b554974', id: "nps-question", name: "nps-question", label: this.question }), h("div", { key: 'da0c3af26dd24d7dc618675aa7f197f55023230f', id: "nps-buttons", role: "radiogroup", "aria-labelledby": "nps-question", class: "grid grid-cols-11", onKeyDown: this.handleKeyNav }, Array.from({ length: count }, (_, i) => {
             const val = this.min + i;
             const isSelected = val === this.selectedValue;
-            const tabIndex = isSelected ? 0 : -1;
-            return (h("div", { class: "grid-col-span-1", key: val }, h("eds-button", { tabindex: tabIndex, label: `${val}`, "aria-label": `${val}`, intent: isSelected ? 'primary' : 'ghost', "extra-class": "!block !px-0 w-full", triggerClick: () => this.handleClick(val) })));
-        })), h("div", { key: '305bc5b2d162fc40fc56557291d37e29498563a2', class: "flex justify-between mt-8" }, h("span", { key: '7fe2191db8cacabed26f451ac0175f23ede3317e', class: "f-ui-04 text-light ml-4" }, this.leftLabel), h("span", { key: 'a85aca88d4de2897d7ba04578cf57a844c660675', class: "f-ui-04 text-light mr-4" }, this.rightLabel))));
+            // Roving tabindex: focusable is the selected; if none selected yet, first is focusable
+            const tabIndex = isSelected || (this.selectedValue == null && i === 0) ? 0 : -1;
+            return (h("div", { class: "grid-col-span-1", key: val }, h("eds-button", { ref: (el) => (this.btnRefs[i] = el), role: "radio", "aria-checked": isSelected ? 'true' : 'false', "aria-label": `${val}`,
+                // Use onClick so keyboard activation on inner <button> works natively
+                onClick: () => this.onSelect(val), tabIndex: tabIndex, intent: isSelected ? 'primary' : 'ghost', "extra-class": "!block !px-0 w-full", label: `${val}`,
+                // Optional: keep highlight in sync when tabbing into the group
+                onFocus: () => {
+                    // Only move highlight on initial focus or when roving; remove if you
+                    // want focus without highlight.
+                    this.selectedValue = val;
+                } })));
+        })), h("div", { key: '10b2f854cff8192e54ee30feb44ad4143c54ad10', class: "flex justify-between mt-8" }, h("span", { key: '361b421b368219f9d7aa6306d912913e9d401fa0', class: "f-ui-04 text-light ml-4" }, this.leftLabel), h("span", { key: '2969496e1b6f772fcdf49667f66eee6dee6760fa', class: "f-ui-04 text-light mr-4" }, this.rightLabel))));
     }
     get el() { return this; }
     static get style() { return EdsNpsStyle0; }

package/dist/components/eds-pagination2.js

@@ -246,7 +246,7 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
     }
     render() {
         const navigableIndex = -1; // Track index for keyboard navigation
-        return (h("div", { key: '1ddd5a3ee9c843a06e5f8f446ae8420a6e0df259' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '87b18c6b1fc475e335f829a4f61b7a8883dc7b9e', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, h("span", { key: 'd5af6f58fc41d83c7e9519bbaa76fb31e6cbb522', class: "text-light sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination Navigation", "aria-describedby": this.mode === 'default' ? 'pagination-info' : undefined, onKeyDown: this.handleKeyDown }, h("ul", { class: "flex items-center justify-center gap-x-8", role: "list" }, h("li", { class: "mr-auto" }, this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: this.prevLabel, disabled: this.mode === 'navigator' ? !this.prevUrl : this.isFirstPage(), "aria-label": "Go to previous page", icon: "chevron-left", "icon-pos": "left", size: "small", "icon-small": "true", intent: "ghost", "extra-class": "!p-8 lg:!pr-12 pagination-button", onClick: (event) => {
+        return (h("div", { key: '17128145803ac6af5f37d5e7c7f0576961c3e372' }, this.total > 0 && this.mode === 'default' && (h("p", { key: 'e50738bfadd0b115ed2d05b81199f0d4cfadda18', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, h("span", { key: '230f2306254d7c5fa2bfd354f308e4fa6b5c2994', class: "text-light sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination Navigation", "aria-describedby": this.mode === 'default' ? 'pagination-info' : undefined, onKeyDown: this.handleKeyDown }, h("ul", { class: "flex items-center justify-center gap-x-8", role: "list" }, h("li", { class: "mr-auto" }, this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: this.prevLabel, disabled: this.mode === 'navigator' ? !this.prevUrl : this.isFirstPage(), "aria-label": "Go to previous page", icon: "chevron-left", "icon-pos": "left", size: "small", "icon-small": "true", intent: "ghost", "extra-class": "!p-8 lg:!pr-12 pagination-button", onClick: (event) => {
                 if (this.mode === 'default' && !this.isFirstPage()) {
                     this.handlePageClick(event, (this.currentPage || 1) - 1);
                 }

package/dist/components/eds-progress-bar2.js

@@ -46,7 +46,7 @@ const EdsProgressBar = /*@__PURE__*/ proxyCustomElement(class EdsProgressBar ext
         ]
             .filter(Boolean)
             .join(' ');
-        return (h("div", { key: '38e64c698f6cf8c22a6ddf41476a6eda785e537e', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, h("div", { key: 'a0a17695931c6e442d886ef773e2cee3a31ab720', class: fillClasses, style: { width: `${progressValue}%` } }), h("div", { key: '6ee49e1cf553b0cc20a70a8b258a307e5282be97', class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, h("span", { key: '0485a3b6ce82ee2c309554e92c14a6dd03819bb2', class: "text-default f-body-02" }, progressValue, "%"))));
+        return (h("div", { key: 'a3a56c8ed86104fb26ce5a3f7d583d02705b59d0', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, h("div", { key: 'ef56ff5501bfec77174a90dafabdd35210936c9d', class: fillClasses, style: { width: `${progressValue}%` } }), h("div", { key: '69eec5cd3a6b8fec6defa621b69559da47df66a6', class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, h("span", { key: '7fdeea8fbe2e600daca350e67a27fbed9708c1e1', class: "text-default f-body-02" }, progressValue, "%"))));
     }
     static get style() { return EdsProgressBarStyle0; }
 }, [1, "eds-progress-bar", {

package/dist/components/eds-rating2.js

@@ -70,7 +70,7 @@ const EdsRating = /*@__PURE__*/ proxyCustomElement(class EdsRating extends HTMLE
         this.onSelect(next);
     }
     render() {
-        return (h("div", { key: '8dcde2afdc0db27d3f6be48f1d58cc7c7f88b0f0', id: "rating-buttons", role: "group", "aria-labelledby": "rating", class: "stars flex space-x-1 my-8", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: this.ratingCount }, (_, index) => {
+        return (h("div", { key: '5d1cf924d2a59b4141eac1bd4f122c9cf640cf9c', id: "rating-buttons", role: "group", "aria-labelledby": "rating", class: "stars flex space-x-1 my-8", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: this.ratingCount }, (_, index) => {
             const starRating = index + 1;
             const isSelected = starRating <= this.selectedRating;
             // Use the mapping text if available; otherwise, fall back to a generic label.

package/dist/components/eds-section-core2.js

@@ -15,7 +15,7 @@ const EdsSectionCore = /*@__PURE__*/ proxyCustomElement(class EdsSectionCore ext
     }
     render() {
         const TagType = this.tag; // Set dynamic tag type (div or section)
-        return (h(TagType, { key: 'b27b48854fc7d537c131da2c23850b2b7b9b2368' }, h("eds-section-heading", { key: '7c3575d8c0295e2cd1c70a2748a25aa65d6892e6', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '66526792e818932d8e44ff927638560ce1b40cac' })));
+        return (h(TagType, { key: '3c75c9cda6a41c0d4243c3c111d7cc95f3efb97b' }, h("eds-section-heading", { key: '05b4d011aa1b8f489fe8aa0fd6d43b824da03370', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '1749580398e56d38d83d5f5fdd87f43867a554cb' })));
     }
     static get style() { return EdsSectionCoreStyle0; }
 }, [1, "eds-section-core", {

package/dist/components/eds-section-heading2.js

@@ -26,12 +26,12 @@ const EdsSectionHeading = /*@__PURE__*/ proxyCustomElement(class EdsSectionHeadi
     render() {
         const TagType = this.tag; // Dynamically set tag type for the container
         const HeadingTag = this.headingLevel; // Dynamically set heading level
-        return (h(TagType, { key: 'efba0650ab65807f560c5676ead78b19b94e8b18', class: {
+        return (h(TagType, { key: '18614645f329d9ccfe6104b544ff306c6190173a', class: {
                 'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8': true,
                 container: this.withContainer,
                 'pt-48': this.spacingLarge,
                 'pt-28': !this.spacingLarge
-            } }, h(HeadingTag, { key: '50e3a8d81b7fd5af96ef3a1dbb7e5bbacb73ef15', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, h(HeadingTag, { key: 'ce699077313e9ee8d8a66e68af667451351a35a6', class: this.getHeadingClass() }, this.sectionTitle)));
     }
 }, [0, "eds-section-heading", {
         "sectionTitle": [1, "section-title"],

package/dist/components/eds-sidebar.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsSidebar extends Components.EdsSidebar, HTMLElement {}
+export const EdsSidebar: {
+    prototype: EdsSidebar;
+    new (): EdsSidebar;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;