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

package/eds-login.entry.esm.js

@@ -1,5 +1,6 @@
 import { r as registerInstance, c as createEvent, h } from './index.esm2.js';
-import { a as logout, i as initKeycloak, b as isAuthenticated, g as getUser, l as login } from './keycloak-13893af6.esm.js';
+import { l as login, a as logout, i as initKeycloak, b as isAuthenticated, g as getUser } from './keycloak-d502ec16.esm.js';
+import { t as toast } from './toastManager-d9eee791.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
@@ -8,68 +9,88 @@ const EdsLogin = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     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(),
+    return h("div", {
+      key: '62768f8a6cc8ac16b13f9b2bb9cf5835f7f63844',
+      class: "block"
+    }, !this.authenticated && h("eds-button", {
+      key: '31e341d628242fed472f673c0fe8346c7871515d',
+      label: "Login",
       intent: "primary",
       "extra-class": "text-default",
-      "aria-label": this.getBtnLabel(),
-      triggerClick: this.authenticated ? this.handleLogout : this.handleLogin.bind(this)
-    });
+      "aria-label": "Login",
+      triggerClick: this.handleLogin.bind(this)
+    }));
   }
 };
 

package/eds-logo-variations.entry.esm.js

@@ -20,7 +20,7 @@ const EdsLogoVariations = class {
   }
   render() {
     return h("div", {
-      key: '9d6ce0e75030d6e636aab423181b0ce999f6f1b0',
+      key: '0494cbb3e7b4902e91a0c78c691bc3405b9f11cc',
       class: "container"
     }, this.renderContent());
   }

package/eds-logo.entry.esm.js

@@ -0,0 +1,87 @@
+import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import { h as hLogoColor } from './logo-color-7f1fd803.esm.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-f382f86f.esm.js';
+import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+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}}";
+const EdsLogoStyle0 = edsLogoCss;
+const EdsLogo = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.href = '/';
+    this.orientation = 'horizontal';
+    this.type = undefined;
+    this.label = 'Home';
+  }
+  /**
+   * Handles the click event on the logo link.
+   * Emits a `matomoEvent` for analytics tracking with details about the interaction.
+   * - `category`: Component type (e.g., "ui-component").
+   * - `tag`: The HTML tag name of the component.
+   * - `name`: Event name, set as "logo".
+   * - `action`: The action, set as "click".
+   */
+  handleClick() {
+    sendAnalytics({
+      category: 'ui-component',
+      tag: this.el.tagName.toLowerCase(),
+      name: 'logo',
+      action: 'click'
+    });
+  }
+  /**
+   * Determines the appropriate SVG content based on the `orientation` and `type` props.
+   */
+  getLogo() {
+    const logos = {
+      horizontal: {
+        color: hLogoColor,
+        black: hLogoBlack,
+        'color-white': hLogoColorWhite,
+        white: hLogoWhite,
+        'no-bg': hLogoWhiteNoBg
+      },
+      vertical: {
+        color: vLogoColor,
+        black: vLogoBlack,
+        'color-white': vLogoColorWhite,
+        white: vLogoWhite,
+        'no-bg': vLogoWhiteNoBg
+      }
+    };
+    // Validate the orientation and type
+    const validOrientation = logos[this.orientation];
+    if (!validOrientation) {
+      //console.error(`Invalid orientation "${this.orientation}". Falling back to "horizontal".`);
+      return hLogoColor; // Default fallback logo
+    }
+    const validLogo = validOrientation[this.type];
+    if (!validLogo) {
+      //console.error(`Invalid type "${this.type}" for orientation "${this.orientation}". Falling back to "color".`);
+      return validOrientation['color']; // Fallback to color logo
+    }
+    return validLogo;
+  }
+  render() {
+    const logoContent = this.getLogo();
+    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 getElement(this);
+  }
+};
+EdsLogo.style = EdsLogoStyle0;
+
+export { EdsLogo as eds_logo };

package/eds-modal.entry.esm.js

@@ -0,0 +1,129 @@
+import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsModalCss = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.fixed{position:fixed}.inset-0{inset:0rem}.z-10{z-index:10}.z-50{z-index:50}.max-w-full{max-width:100%}.absolute{position:absolute}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-20{padding-top:1.25rem;padding-bottom:1.25rem}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-300)}.rounded-lg{border-radius:16px}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.left-1\\/2{left:50%}.left-20{left:1.25rem}.right-20{right:1.25rem}.top-1\\/2{top:50%}.top-20{top:1.25rem}.bottom-20{bottom:1.25rem}.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}.border-b-2{border-bottom-width:2px}.border-softer{border-color:rgba(0, 0, 0, .1)}.pb-8{padding-bottom:0.5rem}.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)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.ml-8{margin-left:0.5rem}.pt-8{padding-top:0.5rem}.bg-opacity-90{opacity:0.9}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}";
+const EdsModalStyle0 = edsModalCss;
+const EdsModal = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.isOpen = false;
+    this.title = '';
+    this.truncate = true;
+    this.truncateLines = '1';
+    this.position = 'middle';
+  }
+  getTruncateClass() {
+    return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
+  }
+  /**
+   * Returns the Tailwind CSS classes to position the modal based on the `position` prop.
+   *
+   * @private
+   * @returns {string} The concatenated CSS classes for modal positioning.
+   */
+  getModalPositionClasses() {
+    switch (this.position) {
+      case 'top':
+        return 'left-1/2 top-20 -translate-x-1/2';
+      case 'bottom':
+        return 'left-1/2 bottom-20 -translate-x-1/2';
+      case 'left':
+        return 'left-20 top-1/2 -translate-y-1/2';
+      case 'right':
+        return 'right-20 top-1/2 -translate-y-1/2';
+      case 'middle':
+      default:
+        return 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2';
+    }
+  }
+  /**
+   * Opens the modal.
+   */
+  async open() {
+    var _a;
+    this.isOpen = true;
+    sendAnalytics({
+      category: 'ui-component',
+      parentContext: null,
+      tag: this.el.tagName.toLowerCase(),
+      name: ((_a = this.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+      action: 'opened'
+    });
+  }
+  /**
+   * Closes the modal.
+   */
+  async close() {
+    var _a;
+    this.isOpen = false;
+    sendAnalytics({
+      category: 'ui-component',
+      parentContext: null,
+      tag: this.el.tagName.toLowerCase(),
+      name: ((_a = this.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+      action: 'closed'
+    });
+  }
+  /**
+   * Toggles the modal open or closed.
+   */
+  async toggle() {
+    this.isOpen = !this.isOpen;
+  }
+  /**
+   * Closes the modal when the Escape key is pressed.
+   */
+  handleKeyDown(event) {
+    if (this.isOpen && event.key === 'Escape') {
+      this.close();
+    }
+  }
+  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: '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: '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 getElement(this);
+  }
+};
+EdsModal.style = EdsModalStyle0;
+
+export { EdsModal as eds_modal };

package/eds-navigator.entry.esm.js

@@ -35,10 +35,10 @@ const EdsNavigator = class {
   }
   render() {
     return h("ul", {
-      key: '1ab60197bbc9ee86d77134138744dce39df2aaa7',
+      key: '712287e683436cc98c2d6ef195501add1929522e',
       class: "flex lg:flex grow items-center justify-center gap-x-8"
     }, this.prevLabel && h("eds-link", {
-      key: 'b29fd121d33c1e919d24a5d460d8d6864f1ff9db',
+      key: '4fda36ce37897284d7062f88133f147831d96a6f',
       label: this.prevLabel,
       url: this.prevUrl || undefined,
       disabled: !this.prevUrl,
@@ -47,10 +47,10 @@ const EdsNavigator = class {
       intent: this.linkIntent,
       class: "mr-auto !p-8 lg:!pr-12"
     }, h("eds-icon-wrapper", {
-      key: '64620ccfaf2e006a6414bcd7e874a352b9d2d56b',
+      key: '9bfa6bbbdc68641f65bec49f207d96f075b9a5b0',
       icon: "chevron-left"
     }), this.prevLabel), this.nextLabel && h("eds-link", {
-      key: 'ae6425f0f01c8f5bcbdae27d9bea9dc3a5b09d3b',
+      key: '6ee8ebee011a2c30a74645b072c7c37929d0a55f',
       label: this.nextLabel,
       url: this.nextUrl || undefined,
       disabled: !this.nextUrl,
@@ -59,7 +59,7 @@ const EdsNavigator = class {
       intent: this.linkIntent,
       class: "ml-auto !p-8 lg:!pl-12"
     }, this.nextLabel, h("eds-icon-wrapper", {
-      key: 'd286fc26f17ee6cf6828990e98df7865fbbfd352',
+      key: '44ebd4dcce0e367df7d9035bb445e49fde35e913',
       icon: "chevron-right",
       class: "w-20 h-20"
     })));

package/eds-pagination_2.entry.esm.js

@@ -1,9 +1,8 @@
 import { r as registerInstance, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './color-bb472c37.esm.js';
+import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
-import './index-39c58238.esm.js';
 
 const edsPaginationCss = "ul,menu{list-style:none;margin:0;padding:0}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.text-lightest{color:var(--grey-500)}.mb-28{margin-bottom:1.75rem}.w-full{width:100%}.w-20{width:1.25rem}.h-20{height:1.25rem}.h-28{height:1.75rem}.h-32{height:2rem}.h-36{height:2.25rem}.text-center{text-align:center}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-x-8{-moz-column-gap:0.5rem;column-gap:0.5rem}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.\\!p-8{padding:0.5rem !important}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.hidden{display:none}.gap-1{gap:0.0625rem}.py-4{padding-top:0.25rem;padding-bottom:0.25rem}.transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}@media (min-width: 900px){.lg\\:\\!pr-12{padding-right:0.75rem !important}.lg\\:flex{display:flex}}";
 const EdsPaginationStyle0 = edsPaginationCss;
@@ -172,12 +171,12 @@ const EdsPagination = class {
   }
   render() {
     return h("div", {
-      key: '584e0918b070eac25a7c4bfceff59b000b60076c'
+      key: '8c8418eec263acc153a928b752775458f897504f'
     }, this.total > 0 && this.mode === 'default' && h("p", {
-      key: 'c688bd8e1f1d15904fc274454093f03213f59e38',
+      key: '02a5a69772a4812f10b29e8df117b72df210614d',
       class: "f-ui-03 text-lightest mb-28 w-full text-center"
     }, h("span", {
-      key: 'c2472919bad41f76e26d518da27509e545ed9db6',
+      key: 'ef9804843100c722643c24e31a05f86f2d55efa0',
       class: "sr-only"
     }, "Results:"), this.pageResults()), this.mode === 'navigator' || this.lastPage && this.lastPage > 1 ? h("nav", {
       "aria-label": "Pagination"
@@ -404,9 +403,9 @@ const EdsTable = class {
     const containerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.hostEl.parentElement instanceof HTMLElement ? this.hostEl.parentElement.getBoundingClientRect().width : this.hostEl.getRootNode().host instanceof HTMLElement ? this.hostEl.getRootNode().host.getBoundingClientRect().width : 400;
     const columnWidth = visibleColumnsCount > 0 ? Math.floor(containerWidth / visibleColumnsCount * this.divisionFactor()) : 100;
     return h("div", {
-      key: '69fd87330d2049eeb91751c781c7aa753fa89883'
+      key: '66ca59804bc8054655ed0d942104516fe4cd259b'
     }, this.searchEnabled && h("div", {
-      key: '2f9680dd17b852b140fe560f7979e1dd58236c5a'
+      key: 'df7267fc443da042e4b6ff81ded5800a2213bd73'
     }, h("eds-input-field", {
       key: 1,
       name: "search",
@@ -416,26 +415,26 @@ const EdsTable = class {
       // @ts-ignore
       onInput: event => this.handleSearch(event)
     })), h("div", {
-      key: 'd67edb24308e526a3e860a90250d58cf8bfee9c8',
+      key: '80ac1fcb3802f9f5d5eabe016fb7345b88908b36',
       class: "mt-20"
     }, h("table", {
-      key: '9a2ef219110e459ac670a0f9c2e62c600f6b5acd',
+      key: '09acf39378b1a4c8bfe40b496ec6bf71a2d761ca',
       class: "block overflow-x-auto mt-6 p-0"
     }, h("thead", {
-      key: '81bae222447e805d06642dda19903d5bf99f2b01'
+      key: '8b844806cfef10d1a59da54a385ee8ed6c167050'
     }, h("tr", {
-      key: '582d7ea661823b81ccdf3adc9769fe53cf56f04c',
+      key: '1b3cff91bdaf225e9f3b337e245cd80ad4772b6a',
       class: "m-0 p-0 border border-softer even:bg-inverse-softer"
     }, this.columns.map(column => {
       var _a;
       return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && h("th", {
         class: "m-0 py-8 border border-softer f-ui-02 break-words",
         style: {
-          minWidth: `${columnWidth}px`
+          minWidth: `${columnWidth - 5}px`
         }
       }, column);
     }))), h("tbody", {
-      key: 'ce7f87e665c394c5e9f2201ef2658e888ea07948'
+      key: '93dfd3abd196779c288f85bb6a357ad3e9c01418'
     }, paginatedRows.map(row => h("tr", {
       class: "m-0 p-0 border border-softer even:bg-inverse-softer"
     }, this.columns.map(column => {
@@ -443,14 +442,14 @@ const EdsTable = class {
       return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && h("td", {
         class: "text-center border border-softer m-0 py-8 f-ui-2 break-words",
         style: {
-          minWidth: `${columnWidth}px`
+          minWidth: `${columnWidth - 5}px`
         }
       }, this.renderCell(row[column], column));
     })))))), this.shouldEnablePagination() && h("div", {
-      key: '0fe6aed0d03c3aa491cd1bb17cd3bdc1e35372a0',
+      key: '516b65d78a9ea91060c1dfcb3306bbd3ac2c6f58',
       class: "mt-20"
     }, h("eds-pagination", {
-      key: '5192f3f4b2ee93d5864d1afed3341a122c826d97',
+      key: 'abe3a593827d99437a06e204ea9d8ef92f80aba7',
       currentPage: this.currentPage,
       lastPage: lastPage,
       perPage: this.rowsPerPage,

package/eds-progress-bar.entry.esm.js

@@ -20,10 +20,15 @@ const EdsProgressBar = class {
   render() {
     const progressValue = this.value;
     return h("div", {
-      key: '3131f56034a9fd72ca51e448bc2bcc6281669b25',
+      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: 'f1665a254f8dbe1ccb9e512e5f2e7c1e5ab88c07',
+      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}%`

package/eds-rating.entry.esm.js

@@ -3,7 +3,7 @@ import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
 
-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 = class {
   constructor(hostRef) {
@@ -16,7 +16,6 @@ const EdsRating = class {
   }
   /**
    * Parses the `textMapping` prop into an array of strings.
-   * Returns an empty array if parsing fails.
    */
   get parsedMappings() {
     if (typeof this.textMapping === 'object') {
@@ -25,8 +24,7 @@ const EdsRating = class {
       try {
         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 [];
       }
     }
@@ -42,25 +40,37 @@ const EdsRating = class {
   }
   render() {
     return h("div", {
-      key: 'c9147c2635f091d93f329d2b56a5fee8dce9126c',
+      key: 'b613863ad54ae9b381a5741bce4b188eff806ef0',
       class: "relative w-full flex flex-col"
     }, h("span", {
-      key: '39a84bc3d9bcd4b729a35737c883eca7144d13ac',
-      class: "f-body-01"
+      key: 'f35cef9c3691aab73995e2ca6e2554cc19bae837',
+      class: "f-heading-05"
     }, this.label), h("div", {
-      key: '3cb84acf399cac0b23393c71df2f2b36aab4f43e',
-      class: "stars"
+      key: '37082eb4bbadf5c211c197f3f81501d0b0e61404',
+      role: "radiogroup",
+      "aria-label": this.label,
+      class: "stars flex space-x-2"
     }, 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"
+    }, (_, 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]));
   }
 };

package/eds-section-core_2.entry.esm.js

@@ -15,13 +15,13 @@ const EdsSectionCore = class {
   render() {
     const TagType = this.tag; // Set dynamic tag type (div or section)
     return h(TagType, {
-      key: '849c35d9cd587cf14b0d6bc6efd1310a85d447f2'
+      key: 'e7ef9e7a589d8cde8aa54d73dff8421d74a7d0ac'
     }, h("eds-section-heading", {
-      key: '7ed4486fcf6e7c653026869c9468be9471db1775',
+      key: '379c6bc644612d3e0865ce2acd8eacb4d67c7769',
       headingLevel: this.headingLevel,
       sectionTitle: this.sectionTitle
     }), h("slot", {
-      key: '5d95ea6516ecaaab4e07a40b84cd20deb3d8d3b2'
+      key: '5828a28c2c8ac65fbc56652f733f148a0d0198b7'
     }));
   }
 };
@@ -52,7 +52,7 @@ const EdsSectionHeading = class {
     const TagType = this.tag; // Dynamically set tag type for the container
     const HeadingTag = this.headingLevel; // Dynamically set heading level
     return h(TagType, {
-      key: '2c6466c0a02bf8598153c18eafb37affc3dac395',
+      key: 'c15f83f8aaa4fb01c884fb1390965fcf9dbd61fb',
       class: {
         'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8 pb-20': true,
         container: this.withContainer,
@@ -60,7 +60,7 @@ const EdsSectionHeading = class {
         'pt-28': !this.spacingLarge
       }
     }, h(HeadingTag, {
-      key: 'fc7f0f09e02e8c63697e46811c465792497126e0',
+      key: 'e65e13820553eefa5aec8bc9740e5e9da828ac92',
       class: this.getHeadingClass()
     }, this.sectionTitle));
   }