@ebrains/react 0.3.0-alpha.0 → 0.5.0-alpha.0

package/eds-icon-youtube.entry.esm.js

@@ -11,7 +11,7 @@ const EdsIconYoutube = class {
   }
   render() {
     return h("span", {
-      key: 'ecd12a21c5797f93f7d8abe67803b27862967b2f',
+      key: '4eba69bfec926b7a3490feee15b5947a8ab8a7b9',
       class: this.class,
       innerHTML: youtube
     });

package/eds-input_7.entry.esm.js

@@ -52,7 +52,7 @@ const EdsInput = class {
     const withIcon = !!this.icon;
     const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
     return h("div", {
-      key: 'aed6c5b0bc70ed712c74041b1bafce771c0da2d3',
+      key: 'e67c7566fe5a1574d6ff0fff61178b163c5881f9',
       class: "relative flex items-center"
     }, this.type === 'textarea' ? h("textarea", {
       id: this.inputId || this.name,
@@ -102,10 +102,10 @@ const EdsInput = class {
       onInput: this.handleInput,
       onChange: this.handleInput
     }), this.maxLength && this.type === 'textarea' && h("span", {
-      key: '2a95bcd05820c60e428c9e5de3cc2c3fc6ceb3db',
+      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: 'd20b1b17f45c77e1e7ad63ca5cb12db777074601',
+      key: '54cab667a1b8b1bb906c2359cdbd2fb23171ba8b',
       class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`,
       icon: this.icon
     }));
@@ -174,7 +174,7 @@ const EdsInputField = class {
       checked: this.checked
     };
     return h("div", {
-      key: 'e1e4c68a8ca48b9526217b1c1eeaecbf3c73a652',
+      key: '6c2e228bc3940212ad4df6ed99bdd69b99342afb',
       class: "space-y-8"
     }, this.type === 'checkbox' || this.type === 'radio' ? this.parsedOptions.length > 0 ? h("fieldset", {
       class: "space-y-4 mt-8"
@@ -185,6 +185,7 @@ const EdsInputField = class {
       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",
@@ -209,6 +210,7 @@ const EdsInputField = class {
       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
@@ -231,7 +233,8 @@ const EdsInputField = class {
         name: "range-slider"
       });
     })() : h("eds-input", Object.assign({}, inputOpts))), h("eds-input-footer", {
-      key: '7c283d5b193f179cdefbb011862358e3c92685c5',
+      key: '16f2dd9061fc779b081c973e25d1bf9fb26fcf8b',
+      id: `${this.name}-footer`,
       name: this.name,
       message: this.message,
       "error-message": this.errorMessage,
@@ -252,26 +255,26 @@ const EdsInputFooter = class {
   }
   render() {
     return h("div", {
-      key: '9ce8da179446c0302754f1285b3733d928da042f',
+      key: 'c088f6c9bf4c3ca1efce1a1ff41ece8d4f8a6756',
       class: "space-y-4"
     }, this.error && this.errorMessage && h("div", {
-      key: 'aab7e8ded78e48864b2245603c3987a6ec3f3959',
+      key: '7404a329f2b5da7f9444f986178c5e4dbbe838ad',
       id: `error_${this.name}`,
       class: "text-error flex items-center"
     }, h("eds-icon-wrapper", {
-      key: '152a06328c6cbb40f0d52310ac3ce761de21a26c',
+      key: '8f9d83b1d8dda824cac17d9c2ce3cb6cc5a58945',
       icon: "warning"
     }), h("p", {
-      key: '658825aa4649ad83a150a0dc92d37f1b078de4c3',
+      key: 'f223076bc18088e264b4888d18bb9673f803d875',
       class: "f-ui-04 ml-4",
       innerHTML: this.errorMessage
     })), this.message && h("p", {
-      key: '378ae9ef876e087f66302547958af4543262a441',
+      key: '40bdbc35ba4985802177d7f9b2c44f893e4cb40c',
       id: `desc_${this.name}`,
       class: "f-ui-05 text-lighter",
       innerHTML: this.message
     }), this.link && h("a", {
-      key: 'cd396f03bdbd12a47544a44de17cfce35b8d206a',
+      key: 'e6297a49f63ce2ab14bac8df0186fb42fab4416d',
       href: this.link.url,
       class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4"
     }, this.link.label));
@@ -287,16 +290,16 @@ const EdsInputLabel = class {
   }
   render() {
     return h("label", {
-      key: 'd83f8267317c2d5ef500460e938b166c0e6517b1',
+      key: '38be7206acfad300657a99218c3138e91069d710',
       htmlFor: this.name,
       class: `input-label ${this.disabled ? 'text-lighter' : ''}`
     }, this.label, this.required && h("span", {
-      key: '85ad9e44af342c191d8aa7aeb7e4c6288c544d6d'
+      key: '1e80610f66d51a1c46918086bb5b5153c0e35a3c'
     }, h("span", {
-      key: 'b350ee023f80bc9d5f24ef2fac9f74b2461d27b9',
+      key: '83d15d62c0539f1847746b4a2b9c9971b4852da8',
       "aria-hidden": "true"
     }, "*"), h("span", {
-      key: 'af55a83d8998ac70817cb2f7cebfb74f276a6387',
+      key: '3f45f5a436c41cf7e55570a2abe8844c8daa7525',
       class: "sr-only"
     }, "required")));
   }
@@ -327,10 +330,10 @@ const EdsInputRange = class {
   }
   render() {
     return h("div", {
-      key: '8927f714cae6dd2237202190eade7b31cc7adc03',
+      key: '6a70b857cfbeb152e6f099b6dfc91cc9fec5bf11',
       class: "relative flex flex-col items-start space-y-2"
     }, h("input", {
-      key: '1b3ba13453992c84e00d3b3261a9d2008f45634f',
+      key: 'da4c0158b1d33804404f4373b3c55c53b5b2f53b',
       id: this.inputId || this.name,
       name: this.name,
       min: this.min,
@@ -344,7 +347,7 @@ const EdsInputRange = class {
       //aria-describedby={describedBy}
       onInput: this.onInput
     }), h("p", {
-      key: 'e04c275e51710ae09eec1603911446e1e65bf648',
+      key: '66bc2e755e4eb38015e32441599a9f9bade7c679',
       id: `desc_${this.name}`,
       class: "block f-ui-05 text-lighter"
     }, "Current value: ", this.sliderVal));
@@ -381,14 +384,14 @@ const EdsInputSearch = class {
   }
   render() {
     return h("div", {
-      key: '4a6a629fcaefa3ec3bbfb577e1a1f85e8d4f0ee0',
+      key: 'df7ee546beed6eedfba5a19e0fdf349d9aaece90',
       class: "relative flex items-center"
     }, h("eds-icon-wrapper", {
-      key: '7cb203fabdf6f1160d95d7ca125f0ca33affd1c6',
+      key: '4663fdd0a9ba4eace47dc90f9c7f50fc2e6f7925',
       icon: "search",
       class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest"
     }), h("input", {
-      key: 'fe32c40b6e438526b8ef6a74783a6455fb91a467',
+      key: 'e3e72f3dea068cbab3d398de36dd09e4a7f1ce93',
       id: this.inputId || this.name,
       name: this.name,
       placeholder: this.placeholder,
@@ -435,6 +438,7 @@ const EdsInputSelect = class {
     this.loading = false;
     this.dynamicValueKey = 'value';
     this.dynamicLabelKey = 'label';
+    this.hasFetched = false;
   }
   componentWillLoad() {
     this.loadOptions();
@@ -451,6 +455,9 @@ const EdsInputSelect = class {
   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';
@@ -464,6 +471,7 @@ const EdsInputSelect = class {
         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);
         toast.show(`<eds-input-select> Error fetching dynamic options ${error}`, 'error');
@@ -477,12 +485,15 @@ const EdsInputSelect = class {
       this.dynamicLabelKey = this.labelKey;
     }
   }
+  getValueByPath(obj, path) {
+    return path.split('.').reduce((acc, part) => acc && acc[part], obj);
+  }
   render() {
     return h("div", {
-      key: '0b45eaae992171cd9795f7bf01883b0f3efbcc13',
+      key: 'c1469a270fa5e775ac4d17f1c7e259d02477d7a2',
       class: "relative"
     }, h("select", {
-      key: '0ee8bccb24f7bd65e9347c0b79905154db39dca7',
+      key: '3aab6ec60d386e51ce27c1cfc26059132d96957f',
       id: this.inputId || this.name,
       name: this.name,
       class: `input invalid:text-lightest pr-32 ${this.error ? 'input-error' : ''}`,
@@ -492,18 +503,18 @@ const EdsInputSelect = class {
       required: this.required,
       onChange: this.handleChange
     }, h("option", {
-      key: 'b1b53dcf8dd3155e8dba28327f05b4725a013435',
+      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: option[this.dynamicValueKey]
-    }, option[this.dynamicLabelKey]))), h("span", {
-      key: '3f652e7ed7570b602565af3f0e3c5c91506e4089',
+      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: '2237727060af6286c346f749d2e8e3f7f86c7c70',
+      key: '2ef2d0d744216a1f931ac0bfe1058f54c9af4402',
       class: "w-20 h-20",
       icon: "chevron-right"
     })));

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: 'cd30a135920ae77959330a43a8544bb9c231986e',
+      class: "block"
+    }, !this.authenticated && h("eds-button", {
+      key: '98fa63c46b063a67c215ff9160c6dfbfee2265f7',
+      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-matomo-notice.entry.esm.js

@@ -1,10 +1,9 @@
 import { r as registerInstance, h, g as getElement } from './index.esm2.js';
 import { t as toast } from './toastManager-d9eee791.esm.js';
-import { m as matomoOptIn } from './color-0ba8ed56.esm.js';
+import { m as matomoOptIn } from './analytics-1cde8e4a.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
-import './index-39c58238.esm.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;

package/eds-modal.entry.esm.js

@@ -1,9 +1,10 @@
 import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import { s as sendAnalytics } from './analytics-1cde8e4a.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%}.top-1\\/2{top: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}.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 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) {
@@ -12,33 +13,59 @@ const EdsModal = class {
     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({
+    sendAnalytics({
       category: 'ui-component',
+      parentContext: null,
       tag: this.el.tagName.toLowerCase(),
-      name: this.title,
-      action: 'show'
-    });*/
+      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({
+    sendAnalytics({
       category: 'ui-component',
+      parentContext: null,
       tag: this.el.tagName.toLowerCase(),
-      name: this.title,
-      action: 'hide'
-    });*/
+      name: ((_a = this.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+      action: 'closed'
+    });
   }
   /**
    * Toggles the modal open or closed.
@@ -47,62 +74,50 @@ const EdsModal = class {
     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 btns = this.el.shadowRoot.querySelectorAll('eds-button');
-    btns.forEach(btn => {
-      this.emitContext(btn);
-    });
-  }
-  /**
-   * Emits a custom event called `parentContext` for a given button element.
-   * This event provides context information about the eds-modal component.
-   *
-   * @param btnElement - The link element to which the event will be dispatched.
-   */
-  emitContext(btnElement) {
-    const event = new CustomEvent('parentContext', {
-      detail: {
-        componentName: this.el.tagName.toLowerCase(),
-        identifier: null
-      }
-    });
-    btnElement.dispatchEvent(event);
+  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: '00816ecb900bd9b68b31fdf6e48bef0223f9e10a',
-      class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-50 flex`
+      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: '570fa8625f9ad4b1ea82633f11e2b289ab01b853',
+      key: '40a2febed5d0ec15d5370183c97cfd05abd72007',
       class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
       ,
 
       onClick: () => this.close()
     }), h("div", {
-      key: 'ff658c763e3fbc98123f13483076399966b10515',
-      class: "max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center "
+      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: 'd8b72acd90cc59ab1f82384aee4e311319f75aa9',
+      key: 'e1cba5879bc488a99b896c48c8a780336b2195e7',
       class: "flex justify-between items-center border-b-2 border-softer pb-8"
     }, h("span", {
-      key: 'ee61fc505c5a3eb93541d3762d37f28a5a788bae',
+      key: '8f018e3d2890346d23e7dcb115676051048bcacb',
+      id: titleId,
       class: `f-heading-04 text-lighter ${this.getTruncateClass()}`
     }, this.title), h("eds-button", {
-      key: '3832772417d05a162eb5f2c4d0733f0ee845ed1c',
+      key: '4ae4013dd45573648817ac95ee4370ed615aa6a0',
       intent: "tertiary",
       icon: "close",
       "aria-label": "Close modal",
       onClick: () => this.close(),
       "extra-class": "ml-8"
     })), h("div", {
-      key: 'f71b38be8284a37d0d198df0a9858c64202b3d91',
+      key: 'ac4e3d8f273d04ad02e0123c23b36b89bfc89db2',
       class: "pt-8"
     }, h("slot", {
-      key: '1f80948334e5b4e9fc00a3bf01c6fc402d8220c3'
+      key: '60917e9f750bfd7948e580acc817cffe6424608a'
     }))));
   }
   get el() {

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"
     })));