@ebrains/components 0.4.0-alpha.0 → 0.5.0-alpha.0

package/dist/components/eds-header.js

@@ -1,13 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$a } from './eds-avatar2.js';
-import { d as defineCustomElement$9 } from './eds-button2.js';
-import { d as defineCustomElement$8 } from './eds-dropdown2.js';
-import { d as defineCustomElement$7 } from './eds-icon-wrapper2.js';
-import { d as defineCustomElement$6 } from './eds-img2.js';
-import { d as defineCustomElement$5 } from './eds-link2.js';
-import { d as defineCustomElement$4 } from './eds-logo2.js';
-import { d as defineCustomElement$3 } from './eds-user2.js';
-import { d as defineCustomElement$2 } from './eds-user-modal2.js';
+import { d as defineCustomElement$5 } from './eds-button2.js';
+import { d as defineCustomElement$4 } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$3 } from './eds-link2.js';
+import { d as defineCustomElement$2 } from './eds-logo2.js';
 
 const edsHeaderCss = "";
 const EdsHeaderStyle0 = edsHeaderCss;
@@ -20,11 +15,7 @@ const EdsHeader$1 = /*@__PURE__*/ proxyCustomElement(class EdsHeader extends HTM
         this.homeUrl = '/';
         this.links = undefined;
         this.inverseHeader = false;
-        this.userFeature = false;
         this.menuEnabled = false;
-        this.keycloakUrl = undefined;
-        this.keycloakRealm = undefined;
-        this.keycloakClientId = undefined;
         this.isMenuOpen = false;
         this.isUserMenuOpen = false;
         this.isAuthenticated = false;
@@ -97,8 +88,8 @@ const EdsHeader$1 = /*@__PURE__*/ proxyCustomElement(class EdsHeader extends HTM
         return [];
     }
     render() {
-        return (h("header", { key: 'b16e5e84ba7565ebf4ea5892a9a1af84fc94769d', class: `flex items-center justify-between relative z-10
-       ${this.inverseHeader ? 'text-inverse bg-strongest' : 'text-default bg-dark'}` }, h("div", { key: '00206a2714dedfe205151002cc10c430e75814fb', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: '25fc6207d61bb4cc06877dd0b15bf56392b50255', type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), this.parsedLinks && (h("nav", { key: '8d1ee2947db26e5acb556da845fe1b811a8d18b2', 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: '5c70e48f3a617a6abe402659b37741e657440cbc', 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: "small", 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: '773b60e90ecfe336fede86ea6e3b0ec2fd10bd72' }), this.userFeature ? (h("div", { class: "px-16" }, h("eds-user", { "keycloak-url": this.keycloakUrl, "keycloak-realm": this.keycloakRealm, "keycloak-client-id": this.keycloakClientId }))) : null, this.menuEnabled ? (h("div", { class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { "aria-label": "Menu", intent: "ghostInverse", icon: "menu", size: "small", onClick: () => this.handleToggleMenu() }))) : null));
+        return (h("header", { key: 'ce002da29cee5446f64694ba93ec67f89c180ac4', class: `flex items-center justify-between relative z-10
+       ${this.inverseHeader ? 'text-inverse bg-strongest' : 'text-default bg-dark'}` }, h("div", { key: '579593f3180b27d129fd9ca380d6b74d0efcbd1e', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: 'c72d87a2ff7cd1ea2b0390cd364e376d1f52c67f', type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), this.parsedLinks && (h("nav", { key: '6755e304c48624049af8426d4d9b19d0cb156dda', 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: '390f9b6c6c950719598eec88b4befb4224cb0c03', 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: "small", 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: 'bc7b093739cc3058e4eb3d4eddbb0b49856b5710' }), this.menuEnabled ? (h("div", { class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { "aria-label": "Menu", intent: "ghostInverse", icon: "menu", size: "small", onClick: () => this.handleToggleMenu() }))) : null));
     }
     get hostEl() { return this; }
     static get style() { return EdsHeaderStyle0; }
@@ -106,11 +97,7 @@ const EdsHeader$1 = /*@__PURE__*/ proxyCustomElement(class EdsHeader extends HTM
         "homeUrl": [513, "home-url"],
         "links": [1],
         "inverseHeader": [4, "inverse-header"],
-        "userFeature": [4, "user-feature"],
         "menuEnabled": [4, "menu-enabled"],
-        "keycloakUrl": [1, "keycloak-url"],
-        "keycloakRealm": [1, "keycloak-realm"],
-        "keycloakClientId": [1, "keycloak-client-id"],
         "isMenuOpen": [32],
         "isUserMenuOpen": [32],
         "isAuthenticated": [32]
@@ -119,54 +106,29 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["eds-header", "eds-avatar", "eds-button", "eds-dropdown", "eds-icon-wrapper", "eds-img", "eds-link", "eds-logo", "eds-user", "eds-user-modal"];
+    const components = ["eds-header", "eds-button", "eds-icon-wrapper", "eds-link", "eds-logo"];
     components.forEach(tagName => { switch (tagName) {
         case "eds-header":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, EdsHeader$1);
             }
             break;
-        case "eds-avatar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
         case "eds-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "eds-dropdown":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "eds-icon-wrapper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "eds-img":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "eds-link":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "eds-logo":
+        case "eds-icon-wrapper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "eds-user":
+        case "eds-link":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "eds-user-modal":
+        case "eds-logo":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/components/eds-icon-arrow-diagonal.js

@@ -8,7 +8,7 @@ const EdsIconArrowDiagonal$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconArr
         this.addClass = '';
     }
     render() {
-        return h("span", { key: '08ebdce5cfbe75bf4bfab8f72493e2178be55c3c', class: this.addClass, innerHTML: arrowDiagonal });
+        return h("span", { key: 'd85a4d425e0c255efe4763d4a13f13b6ff727c2c', class: this.addClass, innerHTML: arrowDiagonal });
     }
 }, [0, "eds-icon-arrow-diagonal", {
         "addClass": [1, "add-class"]

package/dist/components/eds-icon-arrow-right.js

@@ -8,7 +8,7 @@ const EdsIconArrowRight$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconArrowR
         this.class = '';
     }
     render() {
-        return h("span", { key: '6d704324784e6c3d9c221dcaf83bd86a8a6a94ab', class: this.class, innerHTML: arrowRight });
+        return h("span", { key: '4a2b33b86753acab8270a45c7b250603b128bc88', class: this.class, innerHTML: arrowRight });
     }
 }, [0, "eds-icon-arrow-right", {
         "class": [1]

package/dist/components/eds-icon-bluesky.js

@@ -8,7 +8,7 @@ const EdsIconBluesky$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconBluesky e
         this.class = '';
     }
     render() {
-        return h("span", { key: '8b5d4cfeedf6d7e9bea48d7ba892527d484c858d', class: this.class, innerHTML: bluesky });
+        return h("span", { key: '845a157678b9d059b2c9bd8a6265d3a62f33c31a', class: this.class, innerHTML: bluesky });
     }
 }, [0, "eds-icon-bluesky", {
         "class": [1]

package/dist/components/eds-icon-chevron-down.js

@@ -8,7 +8,7 @@ const EdsIconChevronDown$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconChevr
         this.class = '';
     }
     render() {
-        return h("span", { key: 'bc01e9e10033245e02403b6b919911018eef9919', class: this.class, innerHTML: chevronDown });
+        return h("span", { key: 'fa8022d27b91e909d4cd5522c6d0406be698a412', class: this.class, innerHTML: chevronDown });
     }
 }, [0, "eds-icon-chevron-down", {
         "class": [1]

package/dist/components/eds-icon-chevron-left.js

@@ -8,7 +8,7 @@ const EdsIconChevronLeft$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconChevr
         this.class = '';
     }
     render() {
-        return h("span", { key: 'd74bd0b2ddfd5bd61c97309aebb71d7c29f0cf43', class: this.class, innerHTML: chevronLeft });
+        return h("span", { key: 'c723d7f1bbd596063ae7e66123b8038af5320a54', class: this.class, innerHTML: chevronLeft });
     }
 }, [0, "eds-icon-chevron-left", {
         "class": [1]

package/dist/components/eds-icon-chevron-right.js

@@ -8,7 +8,7 @@ const EdsIconChevronRight$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconChev
         this.class = '';
     }
     render() {
-        return h("span", { key: '998491aed74bd3edd1fb8545f85ab52cf2703b3f', class: this.class, innerHTML: chevronRight });
+        return h("span", { key: 'f770cd9151077e8708c76d2082613c65a20c420f', class: this.class, innerHTML: chevronRight });
     }
 }, [0, "eds-icon-chevron-right", {
         "class": [1]

package/dist/components/eds-icon-chevron-up.js

@@ -8,7 +8,7 @@ const EdsIconChevronUp$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconChevron
         this.class = '';
     }
     render() {
-        return h("span", { key: 'd0723afa766fc6dac454ec84602bd50ba4e49950', class: this.class, innerHTML: chevronUp });
+        return h("span", { key: '40d18a840277f2aba5d314a36fca5c1f8fd99cc6', class: this.class, innerHTML: chevronUp });
     }
 }, [0, "eds-icon-chevron-up", {
         "class": [1]

package/dist/components/eds-icon-close.js

@@ -8,7 +8,7 @@ const EdsIconClose$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconClose exten
         this.class = '';
     }
     render() {
-        return h("span", { key: '365ad476b1be9c708e73598cad1dd42a908fa1cd', class: this.class, innerHTML: close });
+        return h("span", { key: '947f6615e8ee155be98b379a9c771cc0d453becd', class: this.class, innerHTML: close });
     }
 }, [0, "eds-icon-close", {
         "class": [1]

package/dist/components/eds-icon-copy.js

@@ -8,7 +8,7 @@ const EdsIconCopy$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconCopy extends
         this.class = '';
     }
     render() {
-        return h("span", { key: '770c34b98ec0e0a7e16de4d7b5b41b4afec9911e', class: this.class, innerHTML: copy });
+        return h("span", { key: '1e23d4493d5a1d07bc794da20cc4e445a87d56b0', class: this.class, innerHTML: copy });
     }
 }, [0, "eds-icon-copy", {
         "class": [1]

package/dist/components/eds-icon-eu.js

@@ -8,7 +8,7 @@ const EdsIconEu$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconEu extends HTM
         this.class = '';
     }
     render() {
-        return h("span", { key: 'cc6e5f7d7333ff7ed4a6f716e0ee90806fa782f9', class: this.class, innerHTML: euSvg });
+        return h("span", { key: '14254e1b9d43562e6f3f943de22aa8dd4d89a044', class: this.class, innerHTML: euSvg });
     }
 }, [0, "eds-icon-eu", {
         "class": [1]

package/dist/components/eds-icon-facebook.js

@@ -8,7 +8,7 @@ const EdsIconFacebook$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconFacebook
         this.class = '';
     }
     render() {
-        return h("span", { key: 'f859db4f8b6679e138e6d72d1d0f5e5bd1bcf997', class: this.class, innerHTML: facebook });
+        return h("span", { key: '902598891dfe926f92ce5d30dc135896c6eccd43', class: this.class, innerHTML: facebook });
     }
 }, [0, "eds-icon-facebook", {
         "class": [1]

package/dist/components/eds-icon-gitlab.js

@@ -8,7 +8,7 @@ const EdsIconGitlab$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconGitlab ext
         this.class = '';
     }
     render() {
-        return h("span", { key: '5a91cfc15c4dec2b50ce57fb0f1d6cc8f57b03e8', class: this.class, innerHTML: gitlabBlack });
+        return h("span", { key: '128f9265dfc1aee95586ba0a3fd20dd131678893', class: this.class, innerHTML: gitlabBlack });
     }
 }, [0, "eds-icon-gitlab", {
         "class": [1]

package/dist/components/eds-icon-linkedin.js

@@ -8,7 +8,7 @@ const EdsIconLinkedin$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconLinkedin
         this.class = '';
     }
     render() {
-        return h("span", { key: 'b8e0661a74a92c72b6db109cb48db12da48dcf92', class: this.class, innerHTML: linkedin });
+        return h("span", { key: '0f9675a371ca7bb460882c04bf2bb0c103273a0d', class: this.class, innerHTML: linkedin });
     }
 }, [0, "eds-icon-linkedin", {
         "class": [1]

package/dist/components/eds-icon-loader.js

@@ -8,7 +8,7 @@ const EdsIconLoader$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconLoader ext
         this.class = '';
     }
     render() {
-        return h("span", { key: '260c4eeb69ff79d943571c1461346b9019ea513a', class: this.class, innerHTML: loader });
+        return h("span", { key: 'f11c60068baa2d2398056b3d7f04129d9deb4517', class: this.class, innerHTML: loader });
     }
 }, [0, "eds-icon-loader", {
         "class": [1]

package/dist/components/eds-icon-mastodon.js

@@ -8,7 +8,7 @@ const EdsIconMastodon$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconMastodon
         this.class = '';
     }
     render() {
-        return h("span", { key: '902598891dfe926f92ce5d30dc135896c6eccd43', class: this.class, innerHTML: mastodon });
+        return h("span", { key: '1f68e5d0b6f8455f40bf94f6095eceff00b7887e', class: this.class, innerHTML: mastodon });
     }
 }, [0, "eds-icon-mastodon", {
         "class": [1]

package/dist/components/eds-icon-menu.js

@@ -8,7 +8,7 @@ const EdsIconMenu$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconMenu extends
         this.class = '';
     }
     render() {
-        return h("span", { key: '9d15be28017eb074a69846a2a639861de997130b', class: this.class, innerHTML: menu });
+        return h("span", { key: '0084602c8e870b70caa66479f71bed3bd0cce94e', class: this.class, innerHTML: menu });
     }
 }, [0, "eds-icon-menu", {
         "class": [1]

package/dist/components/eds-icon-more.js

@@ -8,7 +8,7 @@ const EdsIconMore$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconMore extends
         this.class = '';
     }
     render() {
-        return h("span", { key: '0f7d61104f8f2b0a83c5b60a6ce81c6ab91ecb9c', class: this.class, innerHTML: more });
+        return h("span", { key: 'dd9df55fa03c1b27f2f931c7d07ccc69ee940ff4', class: this.class, innerHTML: more });
     }
 }, [0, "eds-icon-more", {
         "class": [1]

package/dist/components/eds-icon-search.js

@@ -8,7 +8,7 @@ const EdsIconSearch$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconSearch ext
         this.class = '';
     }
     render() {
-        return h("span", { key: '6795d973d3a1fff27c2fd6181235d0284abaf3b7', class: this.class, innerHTML: search });
+        return h("span", { key: '42acc730afd956c2884b0789b3ea37ccf323630b', class: this.class, innerHTML: search });
     }
 }, [0, "eds-icon-search", {
         "class": [1]

package/dist/components/eds-icon-success.js

@@ -8,7 +8,7 @@ const EdsIconSuccess$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconSuccess e
         this.class = '';
     }
     render() {
-        return h("span", { key: '15e428fd72496249adfe372847d5c683cd3412b1', class: this.class, innerHTML: success });
+        return h("span", { key: '8b5d4cfeedf6d7e9bea48d7ba892527d484c858d', class: this.class, innerHTML: success });
     }
 }, [0, "eds-icon-success", {
         "class": [1]

package/dist/components/eds-icon-twitter.js

@@ -8,7 +8,7 @@ const EdsIconTwitter$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconTwitter e
         this.class = '';
     }
     render() {
-        return h("span", { key: 'cfa2d903e79d5a17fb7511e078c0d26bd6d3abd6', class: this.class, innerHTML: twitter });
+        return h("span", { key: 'a06ab2e79a1ec7603244ec09649ccc2c9ea1950c', class: this.class, innerHTML: twitter });
     }
 }, [0, "eds-icon-twitter", {
         "class": [1]

package/dist/components/eds-icon-user.js

@@ -8,7 +8,7 @@ const EdsIconUser$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconUser extends
         this.class = '';
     }
     render() {
-        return h("span", { key: 'dc06f1a54b9542cb2c0165fb3bdff960ecd81cc0', class: this.class, innerHTML: user });
+        return h("span", { key: 'cb31d12146ff577195650b502f51005092404a30', class: this.class, innerHTML: user });
     }
 }, [0, "eds-icon-user", {
         "class": [1]

package/dist/components/eds-icon-youtube.js

@@ -8,7 +8,7 @@ const EdsIconYoutube$1 = /*@__PURE__*/ proxyCustomElement(class EdsIconYoutube e
         this.class = '';
     }
     render() {
-        return h("span", { key: 'ecd12a21c5797f93f7d8abe67803b27862967b2f', class: this.class, innerHTML: youtube });
+        return h("span", { key: '4eba69bfec926b7a3490feee15b5947a8ab8a7b9', class: this.class, innerHTML: youtube });
     }
 }, [0, "eds-icon-youtube", {
         "class": [1]

package/dist/components/eds-img2.js

@@ -13,11 +13,16 @@ const EdsImg = /*@__PURE__*/ proxyCustomElement(class EdsImg extends HTMLElement
             this.loaded = true;
             this.showBg = false;
         };
+        // On error, remove the background effect so users know the image failed to load.
+        this.handleError = () => {
+            this.loaded = true;
+            this.showBg = false;
+        };
         this.handleTransitionEnd = () => {
             this.showBg = false;
         };
         this.src = undefined;
-        this.alt = undefined;
+        this.alt = '';
         this.width = undefined;
         this.height = undefined;
         this.srcset = undefined;
@@ -40,14 +45,14 @@ const EdsImg = /*@__PURE__*/ proxyCustomElement(class EdsImg extends HTMLElement
             imgOpts['loading'] = 'lazy';
             imgOpts['decoding'] = 'async';
         }
-        return (h("div", { key: 'fde8a77bb251e3be2ec3a42b8d83f585eae65b2c', class: {
+        return (h("div", { key: '733be8df2b9e3db1b5b13aaa47c16a9c26f345d7', class: {
                 'items-center justify-center': true,
                 'effect-bg-pattern': this.lazyload && this.showBg
-            } }, h("picture", { key: 'e512cbd9134f14f5418856cf451cddfb93ca1760' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: '98339035b8d055d8bb8de654ce1f4ba410ef3865', ref: (el) => (this.img = el), class: {
+            } }, h("picture", { key: '3a6a0289bcf8a2851278eb6c6fbe64bfe7004014' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: 'b5d92e20a28f67a13d926f081b5f85dbd981ff78', ref: (el) => (this.img = el), class: {
                 'effect-opacity object-cover object-center': true,
                 'opacity-100': this.loaded,
                 'opacity-0': !this.loaded
-            }, width: this.width, height: this.height, sizes: this.sizes, src: this.src, srcSet: this.srcset, alt: this.alt }, imgOpts, { onLoad: this.handleLoad, onTransitionEnd: this.handleTransitionEnd })))));
+            }, width: this.width, height: this.height, sizes: this.sizes, src: this.src, srcSet: this.srcset, alt: this.alt }, imgOpts, { onLoad: this.handleLoad, onError: this.handleError, onTransitionEnd: this.handleTransitionEnd })))));
     }
     get imgElement() { return this; }
     static get style() { return EdsImgStyle0; }

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

@@ -66,11 +66,11 @@ const EdsInputField = /*@__PURE__*/ proxyCustomElement(class EdsInputField exten
             icon: this.icon,
             checked: this.checked
         };
-        return (h("div", { key: 'e1e4c68a8ca48b9526217b1c1eeaecbf3c73a652', class: "space-y-8" }, 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", { class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint)), this.parsedOptions.map((option) => (h("div", { class: "flex items-center gap-x-2", key: option.value }, h("eds-input", Object.assign({}, inputOpts, { value: option.value })), h("eds-input-label", { name: `${this.name}-${option.value}`, label: option.label })))))) : (h("div", { class: "flex items-center gap-x-8" }, h("eds-input", Object.assign({}, inputOpts)), 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", { 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.onChange, disabled: this.disabled, required: this.required })) : this.type === 'search' ? (h("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
+        return (h("div", { key: '6c2e228bc3940212ad4df6ed99bdd69b99342afb', class: "space-y-8" }, 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-2", key: option.value }, h("eds-input", Object.assign({}, inputOpts, { value: option.value })), h("eds-input-label", { name: `${this.name}-${option.value}`, label: option.label })))))) : (h("div", { class: "flex items-center gap-x-8" }, h("eds-input", Object.assign({}, inputOpts)), 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.onChange, disabled: this.disabled, required: this.required })) : this.type === 'search' ? (h("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
             var _a, _b, _c;
             const opt = this.parsedOptions;
             return (h("eds-input-range", { 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, name: "range-slider" }));
-        })()) : (h("eds-input", Object.assign({}, inputOpts))))), h("eds-input-footer", { key: '7c283d5b193f179cdefbb011862358e3c92685c5', name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link })));
+        })()) : (h("eds-input", Object.assign({}, inputOpts))))), h("eds-input-footer", { key: '16f2dd9061fc779b081c973e25d1bf9fb26fcf8b', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link })));
     }
     static get style() { return EdsInputFieldStyle0; }
 }, [1, "eds-input-field", {

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

@@ -12,7 +12,7 @@ const EdsInputFooter = /*@__PURE__*/ proxyCustomElement(class EdsInputFooter ext
         this.link = undefined;
     }
     render() {
-        return (h("div", { key: '9ce8da179446c0302754f1285b3733d928da042f', class: "space-y-4" }, this.error && this.errorMessage && (h("div", { key: 'aab7e8ded78e48864b2245603c3987a6ec3f3959', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '152a06328c6cbb40f0d52310ac3ce761de21a26c', icon: "warning" }), h("p", { key: '658825aa4649ad83a150a0dc92d37f1b078de4c3', class: "f-ui-04 ml-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '378ae9ef876e087f66302547958af4543262a441', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("a", { key: 'cd396f03bdbd12a47544a44de17cfce35b8d206a', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
+        return (h("div", { key: 'c088f6c9bf4c3ca1efce1a1ff41ece8d4f8a6756', class: "space-y-4" }, this.error && this.errorMessage && (h("div", { key: '7404a329f2b5da7f9444f986178c5e4dbbe838ad', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '8f9d83b1d8dda824cac17d9c2ce3cb6cc5a58945', icon: "warning" }), h("p", { key: 'f223076bc18088e264b4888d18bb9673f803d875', class: "f-ui-04 ml-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '40bdbc35ba4985802177d7f9b2c44f893e4cb40c', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("a", { key: 'e6297a49f63ce2ab14bac8df0186fb42fab4416d', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
     }
 }, [0, "eds-input-footer", {
         "name": [1],

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

@@ -10,7 +10,7 @@ const EdsInputLabel = /*@__PURE__*/ proxyCustomElement(class EdsInputLabel exten
         this.disabled = false;
     }
     render() {
-        return (h("label", { key: 'd83f8267317c2d5ef500460e938b166c0e6517b1', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: '85ad9e44af342c191d8aa7aeb7e4c6288c544d6d' }, h("span", { key: 'b350ee023f80bc9d5f24ef2fac9f74b2461d27b9', "aria-hidden": "true" }, "*"), h("span", { key: 'af55a83d8998ac70817cb2f7cebfb74f276a6387', class: "sr-only" }, "required")))));
+        return (h("label", { key: '38be7206acfad300657a99218c3138e91069d710', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: '1e80610f66d51a1c46918086bb5b5153c0e35a3c' }, h("span", { key: '83d15d62c0539f1847746b4a2b9c9971b4852da8', "aria-hidden": "true" }, "*"), h("span", { key: '3f45f5a436c41cf7e55570a2abe8844c8daa7525', class: "sr-only" }, "required")))));
     }
 }, [0, "eds-input-label", {
         "label": [1],

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

@@ -26,9 +26,9 @@ const EdsInputRange = /*@__PURE__*/ proxyCustomElement(class EdsInputRange exten
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: '8927f714cae6dd2237202190eade7b31cc7adc03', class: "relative flex flex-col items-start space-y-2" }, h("input", { key: '1b3ba13453992c84e00d3b3261a9d2008f45634f', 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",
+        return (h("div", { key: '6a70b857cfbeb152e6f099b6dfc91cc9fec5bf11', class: "relative flex flex-col items-start space-y-2" }, h("input", { key: 'da4c0158b1d33804404f4373b3c55c53b5b2f53b', 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={describedBy}
-            onInput: this.onInput }), h("p", { key: 'e04c275e51710ae09eec1603911446e1e65bf648', id: `desc_${this.name}`, class: "block f-ui-05 text-lighter" }, "Current value: ", this.sliderVal)));
+            onInput: this.onInput }), h("p", { key: '66bc2e755e4eb38015e32441599a9f9bade7c679', id: `desc_${this.name}`, class: "block f-ui-05 text-lighter" }, "Current value: ", this.sliderVal)));
     }
     get el() { return this; }
 }, [0, "eds-input-range", {

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

@@ -29,7 +29,7 @@ const EdsInputSearch = /*@__PURE__*/ proxyCustomElement(class EdsInputSearch ext
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: '4a6a629fcaefa3ec3bbfb577e1a1f85e8d4f0ee0', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '7cb203fabdf6f1160d95d7ca125f0ca33affd1c6', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest" }), h("input", { key: 'fe32c40b6e438526b8ef6a74783a6455fb91a467', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", class: "search-input w-full py-6 input input-icon pl-36",
+        return (h("div", { key: 'df7ee546beed6eedfba5a19e0fdf349d9aaece90', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '4663fdd0a9ba4eace47dc90f9c7f50fc2e6f7925', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest" }), h("input", { key: 'e3e72f3dea068cbab3d398de36dd09e4a7f1ce93', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", class: "search-input w-full py-6 input input-icon pl-36",
             //aria-describedby={describedBy}
             onInput: this.onInput, onChange: this.onChange })));
     }

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

@@ -32,6 +32,7 @@ const EdsInputSelect = /*@__PURE__*/ proxyCustomElement(class EdsInputSelect ext
         this.loading = false;
         this.dynamicValueKey = 'value';
         this.dynamicLabelKey = 'label';
+        this.hasFetched = false;
     }
     componentWillLoad() {
         this.loadOptions();
@@ -48,6 +49,9 @@ const EdsInputSelect = /*@__PURE__*/ proxyCustomElement(class EdsInputSelect ext
     async loadOptions() {
         // If the first option contains an "endpoint" key, assume dynamic fetch mode.
         if (this.options && this.options.length > 0 && this.options[0].endpoint) {
+            if (this.hasFetched) {
+                return;
+            }
             const config = this.options[0];
             const endpoint = config.endpoint;
             this.dynamicValueKey = config.value || 'value';
@@ -61,6 +65,7 @@ const EdsInputSelect = /*@__PURE__*/ proxyCustomElement(class EdsInputSelect ext
                 const data = await response.json();
                 // Assume the API returns an array of objects.
                 this.dynamicOptions = data;
+                this.hasFetched = true;
             }
             catch (error) {
                 //console.error('Error fetching dynamic options:', error);
@@ -77,8 +82,11 @@ const EdsInputSelect = /*@__PURE__*/ proxyCustomElement(class EdsInputSelect ext
             this.dynamicLabelKey = this.labelKey;
         }
     }
+    getValueByPath(obj, path) {
+        return path.split('.').reduce((acc, part) => acc && acc[part], obj);
+    }
     render() {
-        return (h("div", { key: 'd37107564a86281b3a3920a5eb128f47f6fd4ceb', class: "relative" }, h("select", { key: 'a69cd907ef6732ec42a99fd46bbf9a52ef03735a', id: this.inputId || this.name, name: this.name, class: `input invalid:text-lightest pr-32 ${this.error ? 'input-error' : ''}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.hasMessage || this.error ? `${this.name}-error` : '', disabled: this.disabled || this.loading, required: this.required, onChange: this.handleChange }, h("option", { key: '8b84a2b7edd7e989411908b16f35c46853889d8e', value: "", disabled: true, hidden: true }, this.loading ? 'Loading options...' : `Please select ${this.name}`), this.dynamicOptions.map((option, index) => (h("option", { key: index, value: option[this.dynamicValueKey] }, option[this.dynamicLabelKey])))), h("span", { key: 'dbccb6161aafc2dc31cc6dd5b3d8c812545eab9a', class: `bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center ${this.disabled || this.loading ? 'text-lightest bg-transparent' : ''}` }, h("eds-icon-wrapper", { key: 'b0fd24cb54185d8558dfabcb94d05b6257caacd1', class: "w-20 h-20", icon: "chevron-right" }))));
+        return (h("div", { key: 'c1469a270fa5e775ac4d17f1c7e259d02477d7a2', class: "relative" }, h("select", { key: '3aab6ec60d386e51ce27c1cfc26059132d96957f', id: this.inputId || this.name, name: this.name, class: `input invalid:text-lightest pr-32 ${this.error ? 'input-error' : ''}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.hasMessage || this.error ? `${this.name}-error` : '', disabled: this.disabled || this.loading, required: this.required, onChange: this.handleChange }, h("option", { key: 'ee3aa20ed1b99bddd7bafa3aac43f3c06db07b8f', value: "", disabled: true, hidden: true }, this.loading ? 'Loading options...' : `Please select ${this.name}`), this.dynamicOptions.map((option, index) => (h("option", { key: index, value: this.getValueByPath(option, this.dynamicValueKey) }, this.getValueByPath(option, this.dynamicLabelKey))))), h("span", { key: '7e70051ac49efd053f00521b51ad19e88cf5cdb7', class: `bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center ${this.disabled || this.loading ? 'text-lightest bg-transparent' : ''}` }, h("eds-icon-wrapper", { key: '2ef2d0d744216a1f931ac0bfe1058f54c9af4402', class: "w-20 h-20", icon: "chevron-right" }))));
     }
     static get watchers() { return {
         "options": ["loadOptions"]
@@ -98,7 +106,8 @@ const EdsInputSelect = /*@__PURE__*/ proxyCustomElement(class EdsInputSelect ext
         "dynamicOptions": [32],
         "loading": [32],
         "dynamicValueKey": [32],
-        "dynamicLabelKey": [32]
+        "dynamicLabelKey": [32],
+        "hasFetched": [32]
     }, undefined, {
         "options": ["loadOptions"]
     }]);

package/dist/components/eds-input2.js

@@ -50,12 +50,12 @@ 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: 'aed6c5b0bc70ed712c74041b1bafce771c0da2d3', 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", { 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, class: `
+        return (h("div", { key: 'e67c7566fe5a1574d6ff0fff61178b163c5881f9', 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", { 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, class: `
               ${this.extraClass || ''} 
               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: '2a95bcd05820c60e428c9e5de3cc2c3fc6ceb3db', 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: 'd20b1b17f45c77e1e7ad63ca5cb12db777074601', 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: '35bc563715e65073898259d12b4ef2c467b14439', 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: '54cab667a1b8b1bb906c2359cdbd2fb23171ba8b', 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

@@ -1,5 +1,4 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import './color.js';
 import { s as sendAnalytics } from './analytics.js';
 import { c as cva } from './index2.js';
 import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
@@ -184,7 +183,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: !this.external && !this.label ? '' : 'flex ml-4' }, h("eds-icon-wrapper", { class: `
               flex inline-flex items-center justify-center
               ${this.size === 'large' ? 'h-32 w-32' : 'h-20 w-20'}
             `, icon: this.icon })));
@@ -192,6 +191,7 @@ 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,
@@ -199,10 +199,12 @@ const EdsLink = /*@__PURE__*/ proxyCustomElement(class EdsLink extends HTMLEleme
             iconSmall: this.iconSmall,
             isActive: this.current
         });
+        // If no visible label is provided, ensure ariaLabel is set.
+        const computedAriaLabel = this.ariaLabel || this.label || 'link';
         const labelClasses = this.hideLabelOnSmallScreen
             ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
             : '';
-        return (h(ComponentType, { key: '58eb3c1c5c192c2855424864c9e3e9c7a5fe3378', 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": this.label || this.ariaLabel || undefined, "aria-disabled": this.disabled ? 'true' : null, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event) }, h("span", { key: 'd4033ba589552f60f8dc7559434a3c035d226de4', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), h("span", { key: 'ca520cc66febaf8c8ddfd2fd8ee8a13b71a3078d', class: labelClasses }, this.label), this.renderRightIcon())));
+        return (h(ComponentType, { key: '965b2bf54c59752e7ed3cafbc167a8f2d1a2a9b1', 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: '7df72410c98bab3c0ef204e5cd33f1e069976d24', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), h("span", { key: '208b4fa88695bd8e8ed961d4c7639b117341110c', class: labelClasses }, this.label), this.renderRightIcon())));
     }
     get el() { return this; }
     static get style() { return EdsLinkStyle0; }