@ebrains/components 2.0.0 → 2.2.0

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

@@ -112,7 +112,7 @@ const EdsInputField = /*@__PURE__*/ proxyCustomElement(class EdsInputField exten
     }
     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: 'bf31e95b0fad54062686ae178af0d6b552d04654' }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (h("fieldset", { class: "space-y-4 mt-8" }, h("div", { class: "flex justify-between" }, 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" }, 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: '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' ? ((() => {
             var _a, _b, _c;
             const rangeProps = {
                 name: inputOpts.name,
@@ -125,11 +125,12 @@ const EdsInputField = /*@__PURE__*/ proxyCustomElement(class EdsInputField exten
             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: 'b47668a883a11da148a38a063ecf573e79a6d714', class: "mt-6" }, h("eds-input-footer", { key: '2c25baf0474a573f143b17bcaa19826fdc94dd7f', 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: '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 }))));
     }
+    static get delegatesFocus() { return true; }
     get hostEl() { return this; }
     static get style() { return EdsInputFieldStyle0; }
-}, [1, "eds-input-field", {
+}, [17, "eds-input-field", {
         "name": [1],
         "inputId": [1, "input-id"],
         "placeholder": [1],

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

@@ -16,7 +16,7 @@ const EdsInputFooter = /*@__PURE__*/ proxyCustomElement(class EdsInputFooter ext
         this.link = undefined;
     }
     render() {
-        return (h("div", { key: '08cb0dc972b0aee37260b5e606a4b162afa9100b' }, this.error && this.errorMessage && (h("div", { key: '5346af03e591f3ca2338979dc74a0b65fe2f93ba', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '072103ec3061a16992672ee92d20249dc1704e0e', icon: "warning" }), h("p", { key: '19f62274acb91ca32e5f9ee7247b27d5a63a95b7', class: "f-ui-04 ml-4 mb-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: 'e6c97c6dca2c5a7a1e62f56f2d74560861399553', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("a", { key: '528475a848b5fada0acc47dc4aa2e03b0b6e1872', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
+        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))));
     }
     static get style() { return EdsInputFooterStyle0; }
 }, [1, "eds-input-footer", {

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: 'a5ecc454f7d0398d8bf265fb36ac903af4b15c4a', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: 'f6b710dcfe91623d048a95853097f963510ebb13' }, h("span", { key: 'e903f319f01b3592ca2ea8bbd5dbf83765942603', "aria-hidden": "true" }, "*"), h("span", { key: '4548229f02d0753855a0b58944e89ff4fe40665a', class: "sr-only" }, "required")))));
+        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")))));
     }
     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: 'd17d2e14f9c851c2c4b003ac36bae62240bc16d0', class: "relative flex flex-col items-start space-y-2" }, h("input", { key: 'dccfa98f53c6283a09de624f32cc34aea2fafbfa', 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", "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: '6064aa1f5bfbfc0e925dfec32ee727c5e530226a', id: `desc_${this.name}`, class: "block f-ui-05 text-lighter" }, "Current value: ", this.sliderVal)));
+        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)));
     }
     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: '1084e1dad411bccc4b89fb61be91fbdaefedbe16', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: 'eaca5c71cf018cd95ba6debddcbbfa1457a32584', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: 'e0e888a6518abfb5f5b2a50fb89e2cec4c7ca78c', 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: '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}`,
             //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: '8b02195c9cb94edae54d0eaeffc1d5985638e705', class: "relative" }, h("select", { key: 'ab86f95d44a22492309e39ea4ed299c7da5460f7', id: selectId, name: this.name, class: {
+        return (h("div", { key: '06be08db809ec9970ca4d7bdbdcdf1c8f2bc8840', class: "relative" }, h("select", { key: 'e4319592e6c2f0c71e0dc75ca2d854506bda70bc', id: selectId, name: this.name, class: {
                 input: true,
                 'input-error': this.error,
                 'px-4': true,
                 'py-2': true
-            }, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, h("option", { key: '285f9e5be9f469b21fa13c869e998fdaea4e33ad', 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: '0fced74f55c6da75e7f1aa3251fa59e8147e666f', 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: '70e964580e89d001eb3537038f4e6a28ecba5840', 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: '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" }))));
     }
 }, [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: 'f48593b92f28da7f3ea3282ebd0db0f6767ee7b6', 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: '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'
             ? {
                 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: '0391698008d36d0726ca52f9f5e3ad21136a9edb', 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: 'dd4d8a5e02dd2557deef5441cbe29afdbea8a959', 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: '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 }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/eds-link2.js

@@ -177,12 +177,34 @@ const EdsLink = /*@__PURE__*/ proxyCustomElement(class EdsLink extends HTMLEleme
             action: 'click'
         });
     }
+    handleKeyDown(event) {
+        if (this.disabled) {
+            return;
+        }
+        // Handle Enter and Space keys for activation
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleClick(event);
+            // For actual navigation, trigger the native link behavior
+            if (this.url && !this.disabled) {
+                if (this.external) {
+                    window.open(this.url, '_blank', 'noopener,noreferrer');
+                }
+                else {
+                    window.location.href = this.url;
+                }
+            }
+        }
+    }
     getLinkSize() {
+        if (this.intent === 'underline') {
+            return 'underline';
+        }
         return this.size;
     }
     renderLeftIcon() {
         if (this.icon && this.iconPos === 'left') {
-            return (h("span", { class: !this.external && !this.label ? '' : 'flex' }, h("eds-icon-wrapper", { class: `
+            return (h("span", { class: "flex" }, h("eds-icon-wrapper", { "aria-hidden": "true", class: `
               flex inline-flex items-center justify-center
               ${this.size === 'large' ? 'h-24 w-24' : 'h-20 w-20'}
             `, icon: this.icon })));
@@ -191,7 +213,7 @@ const EdsLink = /*@__PURE__*/ proxyCustomElement(class EdsLink extends HTMLEleme
     }
     renderRightIcon() {
         if (this.icon && this.iconPos === 'right') {
-            return (h("span", { class: !this.external && !this.label ? '' : 'flex' }, h("eds-icon-wrapper", { class: `
+            return (h("span", { class: "flex" }, h("eds-icon-wrapper", { "aria-hidden": "true", class: `
               flex inline-flex items-center justify-center
               ${this.size === 'large' ? 'h-24 w-24' : 'h-20 w-20'}
             `, icon: this.icon })));
@@ -199,8 +221,6 @@ const EdsLink = /*@__PURE__*/ proxyCustomElement(class EdsLink extends HTMLEleme
         return null;
     }
     render() {
-        // If the link is disabled, use a <span>; otherwise, use an <a> element.
-        const ComponentType = this.disabled ? 'span' : 'a';
         const classes = linkStyles({
             intent: this.intent,
             size: this.getLinkSize(),
@@ -208,12 +228,12 @@ const EdsLink = /*@__PURE__*/ proxyCustomElement(class EdsLink extends HTMLEleme
             isActive: this.current,
             hasIcon: !!this.icon
         });
-        // If no visible label is provided, ensure ariaLabel is set.
-        const computedAriaLabel = this.ariaLabel || this.label || 'link';
+        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(ComponentType, { key: '19e7d05290f3dda2cc4e821c5625f7dd82198dcd', class: `${classes || ''} ${this.extraClass || ''}`, href: !this.disabled ? this.url : undefined, target: this.external && !this.disabled ? '_blank' : undefined, rel: this.external && !this.disabled ? 'noopener noreferrer' : undefined, "aria-label": computedAriaLabel, "aria-disabled": this.disabled ? 'true' : null, "aria-current": this.current ? 'page' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event) }, h("span", { key: '36ce6891c07cf6e37acef3e6fecd3e96bcaa0312', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), h("span", { key: '2455011e19a98939aec59768f09ae310ad03692b', class: labelClasses }, this.label), this.renderRightIcon())));
+        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())));
     }
     get el() { return this; }
     static get style() { return EdsLinkStyle0; }

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: '717ea23a3d9156fd59abb808c3175194b6973d6b', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '794768d57ee14767a0475d949c24fafaa28bc924', innerHTML: logoContent })));
+        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 })));
     }
     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: 'b2b2c3a433049b28ec58dd7ebd0c074597c9e5d4', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999999 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (h("div", { key: '839115c4261e68289410b1a3e30eb28597cdae9e', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
+        return (h("div", { key: '29700a7b84c8728c11232aaaa526638dc6cd3156', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999999 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (h("div", { key: '0cc973541fcde90a0b69a8d3b8a95e54d987fd7d', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
             ,
-            onClick: () => this.close() })), h("div", { key: 'ffb82ca6bf618a842e5c6c5783caccac0b538f3d', class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: '8bd4b17956d04772ba690fce563aa929195cd3d0', 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: 'dcbdb579245e406d2fc4e4a44fb1828625e1e7aa', id: titleId, class: `f-heading-04 ${this.getTruncateClass()}` }, this.heading), h("eds-button", { key: '533c582543fa09ff1d7a7a8a1d1b608eb02d5c72', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8 text-default" })), h("div", { key: '8d95e7649c535da3ddb4de5646579f12341a9e10', class: "pt-8 px-20 py-20" }, h("slot", { key: '7b9678ff3cedbef291ea8dea53ef30a96237a60c' })))));
+            onClick: () => this.close() })), h("div", { key: 'd69445a547c27fccc868bee1dae9537e3e4c9d68', class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: 'e4d3ddcadf49051ebb0fe5c1d12d40f8992a5549', 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: '6a9e5c1cb187e4684b267859f2150f485d6fcced', id: titleId, class: `f-heading-04 ${this.getTruncateClass()}` }, this.heading), h("eds-button", { key: '7c9cd571b76cc87e13f9b153c4d24844b40e47c7', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8 text-default" })), h("div", { key: '150e61106d25a1a0ecf470abf14ac5c5ba836b64', class: "pt-8 px-20 py-20" }, h("slot", { key: '30100f97aa7504023e43b51fc9bebad20097b480' })))));
     }
     get el() { return this; }
     static get style() { return EdsModalStyle0; }

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

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

package/dist/components/eds-nps.js

@@ -0,0 +1,6 @@
+import { E as EdsNps$1, d as defineCustomElement$1 } from './eds-nps2.js';
+
+const EdsNps = EdsNps$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsNps, defineCustomElement };

package/dist/components/eds-nps2.js

@@ -0,0 +1,120 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './eds-button2.js';
+import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$1 } from './eds-input-label2.js';
+
+const edsNpsCss = ".flex{display:flex}.justify-between{justify-content:space-between}.mt-4{margin-top:0.25rem}.mt-8{margin-top:0.5rem}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.grid{display:grid}.grid-col-span-1{--container-grid-columns:1;grid-column:span 1 / span 1}.grid-cols-11{grid-template-columns:repeat(11, minmax(0, 1fr))}.grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"]>*:nth-child(n)::before{border-bottom-width:1px}.grid-cols-11[class*=\"grid-line-xfull\"]>*:nth-child(n)::before{inset-inline-start:calc(var(--inner-gutter) / -2);inset-inline-end:calc(var(--inner-gutter) / -2)}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1)::before{inset-inline-start:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+11)::before{inset-inline-end:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1):nth-last-child(-n+11)::before{border-bottom-width:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1):nth-last-child(-n+11)~*::before{border-bottom-width:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(n)::after{border-inline-end-width:1px}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+11)::after{border-inline-end-width:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(-n+11)::after{top:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+1):nth-last-child(-n+11)::after{bottom:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+1):nth-last-child(-n+11)~li::after{bottom:0}.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)}.text-light{color:var(--grey-700)}";
+const EdsNpsStyle0 = edsNpsCss;
+
+const EdsNps = /*@__PURE__*/ proxyCustomElement(class EdsNps extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.nps = createEvent(this, "nps", 7);
+        this.min = 0;
+        this.max = 10;
+        this.question = undefined;
+        this.leftLabel = undefined;
+        this.rightLabel = undefined;
+        this.selectedValue = null;
+    }
+    handleClick(value) {
+        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;
+        }
+    }
+    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: '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) => {
+            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))));
+    }
+    get el() { return this; }
+    static get style() { return EdsNpsStyle0; }
+}, [1, "eds-nps", {
+        "question": [1],
+        "leftLabel": [1, "left-label"],
+        "rightLabel": [1, "right-label"],
+        "selectedValue": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-nps", "eds-button", "eds-icon-wrapper", "eds-input-label"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-nps":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsNps);
+            }
+            break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "eds-input-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { EdsNps as E, defineCustomElement as d };