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

package/dist/components/eds-login.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { a as logout, i as initKeycloak, b as isAuthenticated, g as getUser, l as login } from './keycloak.js';
+import { l as login, a as logout, i as initKeycloak, b as isAuthenticated, g as getUser } from './keycloak.js';
+import { t as toast } from './toastManager.js';
 import { d as defineCustomElement$3 } from './eds-button2.js';
 import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
 
@@ -9,63 +10,81 @@ const EdsLogin$1 = /*@__PURE__*/ proxyCustomElement(class EdsLogin extends HTMLE
         this.__registerHost();
         this.__attachShadow();
         this.authStatusChanged = createEvent(this, "authStatusChanged", 7);
-        // Method to handle user logout
-        this.handleLogout = () => {
-            logout();
-            this.authenticated = false; // Reset authentication state after logout
+        /**
+         * Handles user login by invoking the Keycloak `login` function.
+         * Only triggers login if the user is not already authenticated.
+         */
+        this.handleLogin = async () => {
+            if (!this.authenticated) {
+                try {
+                    await login();
+                    toast.show('You are authenticated', 'success');
+                }
+                catch (error) {
+                    toast.show(error.message, 'error');
+                }
+            }
+        };
+        /**
+         * Handles user logout by invoking the Keycloak `logout` function.
+         * Resets the `authenticated` state to `false` after logout.
+         */
+        this.handleLogout = async () => {
+            try {
+                await logout();
+            }
+            catch (error) {
+                toast.show(error.message, 'error');
+            }
+            this.authenticated = false;
+            this.user = null;
         };
-        this.keycloakUrl = '';
-        this.keycloakRealm = '';
-        this.keycloakClientId = '';
+        this.keycloakUrl = undefined;
+        this.keycloakRealm = undefined;
+        this.keycloakClientId = undefined;
         this.authenticated = false;
         this.user = null;
     }
-    // Lifecycle method to check authentication status before the component loads
+    /**
+     * Lifecycle method that runs when the component is about to load.
+     * It initializes authentication by calling the `initAuth` method.
+     */
     async componentWillLoad() {
-        await this.checkAuthentication();
+        // Check if required props are provided (optional check)
+        if (!this.keycloakUrl || !this.keycloakRealm || !this.keycloakClientId) {
+            // eslint-disable-next-line
+            console.error('Keycloak configuration props are missing.');
+            return;
+        }
+        await this.initAuth();
     }
-    // Method to initialize Keycloak and check if the user is authenticated
-    async checkAuthentication() {
+    /**
+     * Initializes the Keycloak authentication by configuring Keycloak with the provided props.
+     * Sets the `authenticated` state and `user` data if the user is authenticated.
+     * Emits `authStatusChanged` event with the authentication status.
+     */
+    async initAuth() {
         try {
-            const keycloakConfig = {
+            await initKeycloak({
                 url: this.keycloakUrl,
                 realm: this.keycloakRealm,
                 clientId: this.keycloakClientId
-            };
-            await initKeycloak(keycloakConfig);
-            // eslint-disable-next-line
-            // Set authentication state and fetch user data if authenticated
-            this.authenticated = isAuthenticated();
-            if (this.authenticated) {
+            }, true);
+            if (isAuthenticated()) {
                 this.user = getUser();
-            }
-            this.authStatusChanged.emit({
-                authenticated: this.authenticated,
-                user: this.user
-            }); // Emit auth status change
-        }
-        catch (error) {
-            // eslint-disable-next-line
-            console.error('Keycloak initialization or login check failed:', error);
-        }
-    }
-    // Method to handle user login
-    async handleLogin() {
-        try {
-            if (!this.authenticated) {
-                login(); // Start the Keycloak login process
+                this.authenticated = true;
+                this.authStatusChanged.emit({
+                    authenticated: this.authenticated,
+                    user: this.user
+                }); // Emit auth status change
             }
         }
         catch (error) {
-            // eslint-disable-next-line
-            console.error('Login failed:', error);
+            toast.show(error.message, 'error');
         }
     }
-    getBtnLabel() {
-        return this.authenticated ? 'Logout' : 'Login';
-    }
     render() {
-        return (h("eds-button", { key: '35f298ecf951d5b1087f988262ae7d312c5e2d38', label: this.getBtnLabel(), intent: "primary", "extra-class": "text-default", "aria-label": this.getBtnLabel(), triggerClick: this.authenticated ? this.handleLogout : this.handleLogin.bind(this) }));
+        return (h("div", { key: '62768f8a6cc8ac16b13f9b2bb9cf5835f7f63844', class: "block" }, !this.authenticated && (h("eds-button", { key: '31e341d628242fed472f673c0fe8346c7871515d', label: "Login", intent: "primary", "extra-class": "text-default", "aria-label": "Login", triggerClick: this.handleLogin.bind(this) }))));
     }
 }, [1, "eds-login", {
         "keycloakUrl": [1, "keycloak-url"],

package/dist/components/eds-logo-variations.js

@@ -20,7 +20,7 @@ const EdsLogoVariations$1 = /*@__PURE__*/ proxyCustomElement(class EdsLogoVariat
         }
     }
     render() {
-        return h("div", { key: '9d6ce0e75030d6e636aab423181b0ce999f6f1b0', class: "container" }, this.renderContent());
+        return h("div", { key: '0494cbb3e7b4902e91a0c78c691bc3405b9f11cc', class: "container" }, this.renderContent());
     }
 }, [0, "eds-logo-variations", {
         "tabIndex": [2, "tab-index"]

package/dist/components/eds-logo2.js

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { h as hLogoColor } from './logo-color.js';
 import { h as hLogoBlack, a as hLogoColorWhite, b as hLogoWhite, c as hLogoWhiteNoBg, v as vLogoColor, d as vLogoBlack, e as vLogoColorWhite, f as vLogoWhite, g as vLogoWhiteNoBg } from './logo-white-no-bg.js';
-import './color.js';
 import { s as sendAnalytics } from './analytics.js';
 
 const edsLogoCss = ".w-\\[130px\\]{width:130px}.mr-auto{margin-right:auto}.text-current{color:currentColor}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.h-full{height:100%}.w-full{width:100%}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}@media (min-width: 900px){.lg\\:w-\\[150px\\]{width:150px}}";
@@ -15,6 +14,7 @@ const EdsLogo = /*@__PURE__*/ proxyCustomElement(class EdsLogo extends HTMLEleme
         this.href = '/';
         this.orientation = 'horizontal';
         this.type = undefined;
+        this.label = 'Home';
     }
     /**
      * Handles the click event on the logo link.
@@ -67,14 +67,15 @@ const EdsLogo = /*@__PURE__*/ proxyCustomElement(class EdsLogo extends HTMLEleme
     }
     render() {
         const logoContent = this.getLogo();
-        return (h("a", { key: '3d9435fbc45427865bfa7bacb36bea4c34f08c4e', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper" }, h("div", { key: '662122c4b687a082c930c034b033e9732ef611be', innerHTML: logoContent })));
+        return (h("a", { key: 'ee8de4071b0137020341982b4c5cb2c938f1c4df', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '1eb620afbcc5a2a5c6914cc1c91a45ca62d0068c', innerHTML: logoContent })));
     }
     get el() { return this; }
     static get style() { return EdsLogoStyle0; }
 }, [1, "eds-logo", {
         "href": [1],
         "orientation": [1],
-        "type": [1]
+        "type": [1],
+        "label": [1]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/eds-matomo-notice.js

@@ -1,144 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { t as toast } from './toastManager.js';
-import './color.js';
-import { m as matomoOptIn } from './analytics.js';
-import { d as defineCustomElement$4 } from './eds-accordion2.js';
-import { d as defineCustomElement$3 } from './eds-button2.js';
-import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
-
-const edsMatomoNoticeCss = ".fixed{position:fixed}.absolute{position:absolute}.w-full{width:100%}.bottom-0{bottom:0rem}.bottom-4{bottom:0.25rem}.p-4{padding:0.25rem}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.z-10{z-index:10}.left-0{left:0rem}.left-1\\/2{left:50%}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex{display:flex}.gap-12{gap:0.75rem}.gap-20{gap:1.25rem}.gap-4{gap:0.25rem}@media (min-width: 750px){.md\\:left-1\\/2{left:50%}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}";
-const EdsMatomoNoticeStyle0 = edsMatomoNoticeCss;
-
-const EdsMatomoNotice$1 = /*@__PURE__*/ proxyCustomElement(class EdsMatomoNotice extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.title = 'Analytics Consent';
-        this.description = 'We use anonymous analytics to improve our services. No personal data is collected unless you give your consent.';
-        this.showNotice = true;
-    }
-    /**
-     * Lifecycle method called before the component is rendered.
-     * Checks for the presence of the "mtm_consent" cookie to determine
-     * if the notice should be displayed.
-     */
-    componentWillLoad() {
-        this.checkConsentCookie();
-    }
-    /**
-     * Lifecycle method called after the component has been rendered.
-     * Emits `parentContext` events for each `eds-button` in the shadow DOM.
-     */
-    componentDidLoad() {
-        const btns = this.el.shadowRoot.querySelectorAll('eds-button');
-        btns.forEach((b) => {
-            this.emitContext(b);
-        });
-    }
-    /**
-     * Emits a custom `parentContext` event for a given button element.
-     * This can be used to provide context information about the component.
-     *
-     * @param linkElement - The button element to which the event will be dispatched.
-     */
-    emitContext(linkElement) {
-        const event = new CustomEvent('parentContext', {
-            detail: {
-                componentName: this.el.tagName.toLowerCase(),
-                identifier: null
-            }
-        });
-        linkElement.dispatchEvent(event);
-    }
-    /**
-     * Checks if the Matomo "mtm_consent" cookie exists in the browser.
-     * If the cookie is found, the notice is hidden.
-     */
-    checkConsentCookie() {
-        const consentCookie = document.cookie.split('; ').find((row) => row.startsWith('mtm_consent='));
-        //this.showNotice = !consentCookie;
-        const sessionDeferred = sessionStorage.getItem('matomo-deferred');
-        this.showNotice = !consentCookie && !sessionDeferred;
-    }
-    /**
-     * Handles user consent for analytics tracking.
-     * Calls the `matomoOptIn` utility and shows a success toast notification.
-     */
-    optInAnalytics() {
-        matomoOptIn();
-        toast.show('You have opted in to analytics.', 'success');
-        this.hideNotice();
-    }
-    /**
-     * Handles user opt-out from analytics tracking.
-     * Calls the `matomoOptOut` utility and shows a warning toast notification.
-     
-    private optOutAnalytics() {
-      matomoOptOut();
-      toast.show('You have opted out of analytics.', 'warning');
-      this.hideNotice();
-    }*/
-    /**
-     * Handles "Ask me later" action by storing a session storage entry
-     * and hiding the notice for the rest of the session.
-     */
-    deferDecision() {
-        sessionStorage.setItem('matomo-deferred', 'true');
-        toast.show('You can decide later.', 'warning');
-        this.hideNotice();
-    }
-    /**
-     * Hides the notice by updating the `showNotice` state.
-     */
-    hideNotice() {
-        this.showNotice = false;
-    }
-    /**
-     * Renders the Matomo consent notice with user options.
-     * Includes an accordion for the description and two buttons for user consent.
-     */
-    render() {
-        if (!this.showNotice) {
-            return null;
-        }
-        return (h("div", { class: "fixed bottom-0 p-8 z-10 grow md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 justify-center" }, h("eds-accordion", { title: this.title, description: this.description, switchBg: true, expanded: true }, h("div", { class: "flex items-center gap-4" }, h("eds-button", { intent: "primary", label: "Yes, I agree", "aria-label": "Opt-in for analytics", onClick: () => this.optInAnalytics() }), h("eds-button", { intent: "ghost", label: "Ask me later", "aria-label": "Defer analytics decision", onClick: () => this.deferDecision() })))));
-    }
-    get el() { return this; }
-    static get style() { return EdsMatomoNoticeStyle0; }
-}, [1, "eds-matomo-notice", {
-        "title": [1],
-        "description": [1],
-        "showNotice": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["eds-matomo-notice", "eds-accordion", "eds-button", "eds-icon-wrapper"];
-    components.forEach(tagName => { switch (tagName) {
-        case "eds-matomo-notice":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, EdsMatomoNotice$1);
-            }
-            break;
-        case "eds-accordion":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "eds-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "eds-icon-wrapper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
+import { E as EdsMatomoNotice$1, d as defineCustomElement$1 } from './eds-matomo-notice2.js';
 
 const EdsMatomoNotice = EdsMatomoNotice$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/eds-matomo-notice2.js

@@ -0,0 +1,127 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { t as toast } from './toastManager.js';
+import { m as matomoOptIn, a as matomoOptOut } from './analytics.js';
+import { d as defineCustomElement$3 } from './eds-accordion2.js';
+import { d as defineCustomElement$2 } from './eds-button2.js';
+import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
+
+const edsMatomoNoticeCss = ".fixed{position:fixed}.absolute{position:absolute}.w-full{width:100%}.bottom-0{bottom:0rem}.bottom-4{bottom:0.25rem}.p-4{padding:0.25rem}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.z-10{z-index:10}.left-0{left:0rem}.left-1\\/2{left:50%}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex{display:flex}.gap-12{gap:0.75rem}.gap-20{gap:1.25rem}.gap-4{gap:0.25rem}@media (min-width: 750px){.md\\:left-1\\/2{left:50%}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}";
+const EdsMatomoNoticeStyle0 = edsMatomoNoticeCss;
+
+const EdsMatomoNotice = /*@__PURE__*/ proxyCustomElement(class EdsMatomoNotice extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.title = 'Analytics Consent';
+        this.description = 'We use anonymous analytics to improve our services. No personal data is collected unless you give your consent.';
+        this.deferMsgToast = 'You can decide later.';
+        this.optInMsgToast = 'You have opted in to analytics.';
+        this.optOutMsgToast = 'You have opted out of analytics.';
+        this.forceShow = false;
+        this.showNotice = true;
+    }
+    /**
+     * Checks if the consent cookie exists.
+     */
+    hasCookieConsent() {
+        return !!document.cookie.split('; ').find((row) => row.startsWith('mtm_consent='));
+    }
+    /**
+     * Generate a unique storage key based on appId or the app's domain.
+     */
+    getStorageKey() {
+        return `${window.location.host}-matomo-deferred`;
+    }
+    /**
+     * Check cookies and sessionStorage (unless forceShow is true) to decide if the notice should be shown.
+     */
+    componentWillLoad() {
+        if (this.forceShow) {
+            this.showNotice = true;
+        }
+        else {
+            const sessionDeferred = sessionStorage.getItem(this.getStorageKey());
+            this.showNotice = !sessionDeferred;
+        }
+    }
+    componentDidLoad() {
+        const btns = this.el.shadowRoot.querySelectorAll('eds-button');
+        btns.forEach((b) => {
+            this.emitContext(b);
+        });
+    }
+    emitContext(linkElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.el.tagName.toLowerCase(),
+                identifier: null
+            }
+        });
+        linkElement.dispatchEvent(event);
+    }
+    optInAnalytics() {
+        matomoOptIn();
+        toast.show(this.optInMsgToast, 'success');
+        this.hideNotice();
+    }
+    optOutAnalytics() {
+        matomoOptOut();
+        toast.show(this.optOutMsgToast, 'warning');
+        this.hideNotice();
+    }
+    deferDecision() {
+        sessionStorage.setItem(this.getStorageKey(), 'true');
+        toast.show(this.deferMsgToast, 'warning');
+        this.hideNotice();
+    }
+    hideNotice() {
+        this.showNotice = false;
+    }
+    render() {
+        if (!this.showNotice) {
+            return null;
+        }
+        return (h("div", { class: "fixed bottom-0 p-8 z-10 grow md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 justify-center" }, h("eds-accordion", { title: this.title, description: this.description, switchBg: true, expanded: true }, h("div", { class: "flex items-center gap-4" }, this.hasCookieConsent() ? (h("eds-button", { intent: "primary", label: "Opt-out", "aria-label": "Opt-out from analytics", onClick: () => this.optOutAnalytics() })) : (h("eds-button", { intent: "primary", label: "Yes, I agree", "aria-label": "Opt-in for analytics", onClick: () => this.optInAnalytics() })), h("eds-button", { intent: "ghost", label: "Ask me later", "aria-label": "Defer analytics decision", onClick: () => this.deferDecision() })))));
+    }
+    get el() { return this; }
+    static get style() { return EdsMatomoNoticeStyle0; }
+}, [1, "eds-matomo-notice", {
+        "title": [1],
+        "description": [1],
+        "deferMsgToast": [1, "defer-msg-toast"],
+        "optInMsgToast": [1, "opt-in-msg-toast"],
+        "optOutMsgToast": [1, "opt-out-msg-toast"],
+        "forceShow": [4, "force-show"],
+        "showNotice": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-matomo-notice", "eds-accordion", "eds-button", "eds-icon-wrapper"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-matomo-notice":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsMatomoNotice);
+            }
+            break;
+        case "eds-accordion":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { EdsMatomoNotice as E, defineCustomElement as d };

package/dist/components/eds-modal.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 { d as defineCustomElement$3 } from './eds-button2.js';
 import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
@@ -77,32 +76,19 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
         this.isOpen = !this.isOpen;
     }
     /**
-     * Lifecycle method that runs when the component has fully loaded.
-     * It emits a custom event for each `eds-button` element contained within the breadcrumb.
+     * Closes the modal when the Escape key is pressed.
      */
-    componentDidLoad() {
-        // Emit context for each eds-link element after the component is fully loaded
-        //const btn = this.el.shadowRoot.querySelector('eds-button');
-        //this.emitContext(btn);
-    }
-    /**
-     * Emits a custom event called `parentContext` for a given button element.
-     * This event provides context information about the eds-modal component.
-     */
-    /*emitContext(btnElement: HTMLElement) {
-      const event = new CustomEvent<ParentContextDetail>('parentContext', {
-        detail: {
-          componentName: this.el.tagName.toLowerCase(),
-          identifier: null
+    handleKeyDown(event) {
+        if (this.isOpen && event.key === 'Escape') {
+            this.close();
         }
-      });
-  
-      btnElement.dispatchEvent(event);
-    }*/
+    }
     render() {
-        return (h("div", { key: 'eedcdc49c9f4a16ef4537ec02335757aa1143bd9', class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-50 flex` }, this.isOpen && (h("div", { key: '2b24903b85895fd5eca389d6897aa85c892e762f', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
+        // 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: 'cd976fb0cd0c0663279dcd4dbd5823e26b6c32f7', class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-50 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (h("div", { key: '40a2febed5d0ec15d5370183c97cfd05abd72007', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
             ,
-            onClick: () => this.close() })), h("div", { key: 'd135a2d9eff1764b6335b9b16be54d8fec7d4112', class: `max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: 'bc8ea6f95443f01d3e5b88953581e1f2eae4009c', class: "flex justify-between items-center border-b-2 border-softer pb-8" }, h("span", { key: '872b9a4bf44db478d38f18d3459a816c119f352d', class: `f-heading-04 text-lighter ${this.getTruncateClass()}` }, this.title), h("eds-button", { key: 'bdf27a3f564d295383985cb1f0ce7df7f13a97fb', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8" })), h("div", { key: '600cc4d544d0a41d9d2be74aedbb0d2fe2028141', class: "pt-8" }, h("slot", { key: '8ce560804a6d960b4075e4b6d1607dda6530c08d' })))));
+            onClick: () => this.close() })), h("div", { key: '50f2c23d80a2007aca4d0a8911816141e43b71ee', class: `max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: 'e1cba5879bc488a99b896c48c8a780336b2195e7', class: "flex justify-between items-center border-b-2 border-softer pb-8" }, h("span", { key: '8f018e3d2890346d23e7dcb115676051048bcacb', id: titleId, class: `f-heading-04 text-lighter ${this.getTruncateClass()}` }, this.title), h("eds-button", { key: '4ae4013dd45573648817ac95ee4370ed615aa6a0', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8" })), h("div", { key: 'ac4e3d8f273d04ad02e0123c23b36b89bfc89db2', class: "pt-8" }, h("slot", { key: '60917e9f750bfd7948e580acc817cffe6424608a' })))));
     }
     get el() { return this; }
     static get style() { return EdsModalStyle0; }
@@ -115,7 +101,7 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
         "open": [64],
         "close": [64],
         "toggle": [64]
-    }]);
+    }, [[8, "keydown", "handleKeyDown"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/eds-navigator.js

@@ -34,7 +34,7 @@ const EdsNavigator$1 = /*@__PURE__*/ proxyCustomElement(class EdsNavigator exten
         linkElement.dispatchEvent(event);
     }
     render() {
-        return (h("ul", { key: '1ab60197bbc9ee86d77134138744dce39df2aaa7', class: "flex lg:flex grow items-center justify-center gap-x-8" }, this.prevLabel && (h("eds-link", { key: 'b29fd121d33c1e919d24a5d460d8d6864f1ff9db', label: this.prevLabel, url: this.prevUrl || undefined, disabled: !this.prevUrl, "aria-label": this.prevLabel, size: this.linkSize, intent: this.linkIntent, class: "mr-auto !p-8 lg:!pr-12" }, h("eds-icon-wrapper", { key: '64620ccfaf2e006a6414bcd7e874a352b9d2d56b', icon: "chevron-left" }), this.prevLabel)), this.nextLabel && (h("eds-link", { key: 'ae6425f0f01c8f5bcbdae27d9bea9dc3a5b09d3b', label: this.nextLabel, url: this.nextUrl || undefined, disabled: !this.nextUrl, "aria-label": this.nextLabel, size: this.linkSize, intent: this.linkIntent, class: "ml-auto !p-8 lg:!pl-12" }, this.nextLabel, h("eds-icon-wrapper", { key: 'd286fc26f17ee6cf6828990e98df7865fbbfd352', icon: "chevron-right", class: "w-20 h-20" })))));
+        return (h("ul", { key: '712287e683436cc98c2d6ef195501add1929522e', class: "flex lg:flex grow items-center justify-center gap-x-8" }, this.prevLabel && (h("eds-link", { key: '4fda36ce37897284d7062f88133f147831d96a6f', label: this.prevLabel, url: this.prevUrl || undefined, disabled: !this.prevUrl, "aria-label": this.prevLabel, size: this.linkSize, intent: this.linkIntent, class: "mr-auto !p-8 lg:!pr-12" }, h("eds-icon-wrapper", { key: '9bfa6bbbdc68641f65bec49f207d96f075b9a5b0', icon: "chevron-left" }), this.prevLabel)), this.nextLabel && (h("eds-link", { key: '6ee8ebee011a2c30a74645b072c7c37929d0a55f', label: this.nextLabel, url: this.nextUrl || undefined, disabled: !this.nextUrl, "aria-label": this.nextLabel, size: this.linkSize, intent: this.linkIntent, class: "ml-auto !p-8 lg:!pl-12" }, this.nextLabel, h("eds-icon-wrapper", { key: '44ebd4dcce0e367df7d9035bb445e49fde35e913', icon: "chevron-right", class: "w-20 h-20" })))));
     }
     get el() { return this; }
 }, [0, "eds-navigator", {

package/dist/components/eds-pagination2.js

@@ -172,7 +172,7 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
         }
     }
     render() {
-        return (h("div", { key: '584e0918b070eac25a7c4bfceff59b000b60076c' }, this.total > 0 && this.mode === 'default' && (h("p", { key: 'c688bd8e1f1d15904fc274454093f03213f59e38', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, h("span", { key: 'c2472919bad41f76e26d518da27509e545ed9db6', class: "sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination" }, h("ul", { class: "flex items-center justify-center gap-x-8" }, h("li", { class: "mr-auto" }, h("eds-link", { label: this.prevLabel, url: this.mode === 'navigator'
+        return (h("div", { key: '8c8418eec263acc153a928b752775458f897504f' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '02a5a69772a4812f10b29e8df117b72df210614d', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, h("span", { key: 'ef9804843100c722643c24e31a05f86f2d55efa0', class: "sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination" }, h("ul", { class: "flex items-center justify-center gap-x-8" }, h("li", { class: "mr-auto" }, h("eds-link", { label: this.prevLabel, url: this.mode === 'navigator'
                 ? this.prevUrl || '#' // Use prevUrl if provided, otherwise disable with '#'
                 : this.isFirstPage()
                     ? '#'

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

@@ -19,7 +19,7 @@ const EdsProgressBar = /*@__PURE__*/ proxyCustomElement(class EdsProgressBar ext
     }
     render() {
         const progressValue = this.value;
-        return (h("div", { key: '3131f56034a9fd72ca51e448bc2bcc6281669b25', class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden" }, h("div", { key: 'f1665a254f8dbe1ccb9e512e5f2e7c1e5ab88c07', class: `inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02`, style: { width: `${progressValue}%` } }, progressValue, "%")));
+        return (h("div", { key: '0f47fedbf9d44887f65b399e184215f0937b1df1', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden" }, h("div", { key: 'a2d095d778842c969832ea6b1ba7f7ef917d1390', class: `inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02`, style: { width: `${progressValue}%` } }, progressValue, "%")));
     }
     static get style() { return EdsProgressBarStyle0; }
 }, [1, "eds-progress-bar", {

package/dist/components/eds-rating.js

@@ -1,6 +1,8 @@
 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';
 
-const edsRatingCss = ":host{display:inline-block;font-size:2rem}.stars{display:flex;gap:0.25rem;cursor:pointer}.star{color:var(--star-empty-color, #ccc);transition:color 0.2s ease-in-out}.star.filled{color:var(--green-500);}.star:hover,.star.filled:hover{transform:scale(1.2)}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-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)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}";
+const edsRatingCss = ":host{display:inline-block;font-size:2rem}.stars{display:flex;gap:0.25rem;cursor:pointer}.star{color:var(--star-empty-color, #ccc);transition:color 0.2s ease-in-out}.star.filled{color:var(--green-500);}.star:hover,.star.filled:hover{transform:scale(1.2)}.f-heading-02{font-family:var(--f-heading-02-fontFamily);font-weight:var(--f-heading-02-fontWeight);font-size:var(--f-heading-02-fontSize);line-height:var(--f-heading-02-lineHeight);letter-spacing:var(--f-heading-02-letterSpacing)}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.f-heading-06{font-family:var(--f-heading-06-fontFamily);font-weight:var(--f-heading-06-fontWeight);font-size:var(--f-heading-06-fontSize);line-height:var(--f-heading-06-lineHeight);letter-spacing:var(--f-heading-06-letterSpacing)}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-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)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}";
 const EdsRatingStyle0 = edsRatingCss;
 
 const EdsRating$1 = /*@__PURE__*/ proxyCustomElement(class EdsRating extends HTMLElement {
@@ -16,7 +18,6 @@ const EdsRating$1 = /*@__PURE__*/ proxyCustomElement(class EdsRating extends HTM
     }
     /**
      * Parses the `textMapping` prop into an array of strings.
-     * Returns an empty array if parsing fails.
      */
     get parsedMappings() {
         if (typeof this.textMapping === 'object') {
@@ -27,8 +28,7 @@ const EdsRating$1 = /*@__PURE__*/ proxyCustomElement(class EdsRating extends HTM
                 return JSON.parse(this.textMapping);
             }
             catch (e) {
-                // eslint-disable-next-line
-                console.error('Error parsing textMapping prop:', e);
+                //console.error('Error parsing textMapping prop:', e);
                 return [];
             }
         }
@@ -43,10 +43,14 @@ const EdsRating$1 = /*@__PURE__*/ proxyCustomElement(class EdsRating extends HTM
         this.ratingChange.emit(rating);
     }
     render() {
-        return (h("div", { key: 'c9147c2635f091d93f329d2b56a5fee8dce9126c', class: "relative w-full flex flex-col" }, h("span", { key: '39a84bc3d9bcd4b729a35737c883eca7144d13ac', class: "f-body-01" }, this.label), h("div", { key: '3cb84acf399cac0b23393c71df2f2b36aab4f43e', class: "stars" }, Array.from({ length: this.stars }, (_, index) => (h("span", { class: {
-                star: true,
-                filled: index < this.selectedRating
-            }, onClick: () => this.handleClick(index + 1) }, "\u2605")))), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: '60605ec21b542825da0dad629fc1618d9cf63b25', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
+        return (h("div", { key: 'b613863ad54ae9b381a5741bce4b188eff806ef0', class: "relative w-full flex flex-col" }, h("span", { key: 'f35cef9c3691aab73995e2ca6e2554cc19bae837', class: "f-heading-05" }, this.label), h("div", { key: '37082eb4bbadf5c211c197f3f81501d0b0e61404', role: "radiogroup", "aria-label": this.label, class: "stars flex space-x-2" }, Array.from({ length: this.stars }, (_, index) => {
+            const starRating = index + 1;
+            const isSelected = starRating <= this.selectedRating;
+            // Use the mapping text if available; otherwise, fall back to a generic label.
+            const mappingText = this.parsedMappings[starRating - 1] || `Rating ${starRating}`;
+            return (h("eds-button", { label: "\u2605", role: "radio", "aria-checked": isSelected ? 'true' : 'false', "aria-label": mappingText, onClick: () => this.handleClick(starRating), tabIndex: this.selectedRating === 0 && index === 0 ? 0 : isSelected ? 0 : -1, intent: isSelected ? 'primary' : 'ghost', size: "small", "extra-class": "p-2" // Optional padding or styling for the star button
+            }));
+        })), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: '61b4b92e476cfa0dd9bf405cb080dedd995ff9c6', class: "f-ui-04 text-lighter mt-4" }, this.parsedMappings[this.selectedRating - 1]))));
     }
     static get style() { return EdsRatingStyle0; }
 }, [1, "eds-rating", {
@@ -59,13 +63,23 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["eds-rating"];
+    const components = ["eds-rating", "eds-button", "eds-icon-wrapper"];
     components.forEach(tagName => { switch (tagName) {
         case "eds-rating":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, EdsRating$1);
             }
             break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
     } });
 }
 

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

@@ -14,7 +14,7 @@ const EdsSectionCore = /*@__PURE__*/ proxyCustomElement(class EdsSectionCore ext
     }
     render() {
         const TagType = this.tag; // Set dynamic tag type (div or section)
-        return (h(TagType, { key: '849c35d9cd587cf14b0d6bc6efd1310a85d447f2' }, h("eds-section-heading", { key: '7ed4486fcf6e7c653026869c9468be9471db1775', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '5d95ea6516ecaaab4e07a40b84cd20deb3d8d3b2' })));
+        return (h(TagType, { key: 'e7ef9e7a589d8cde8aa54d73dff8421d74a7d0ac' }, h("eds-section-heading", { key: '379c6bc644612d3e0865ce2acd8eacb4d67c7769', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '5828a28c2c8ac65fbc56652f733f148a0d0198b7' })));
     }
     static get style() { return EdsSectionCoreStyle0; }
 }, [4, "eds-section-core", {