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

package/{eds-pagination.entry.esm.js → eds-pagination_2.entry.esm.js}

@@ -1,7 +1,9 @@
 import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import { s as sendAnalytics } from './color-bb472c37.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;
@@ -29,14 +31,17 @@ const EdsPagination = class {
   componentDidLoad() {
     // Emit context for each eds-link element after the component is fully loaded
     const links = this.hostEl.shadowRoot.querySelectorAll('eds-link');
-    if (links.length > 0) {
+    links.forEach(lnk => {
+      this.emitContext(lnk);
+    });
+    /*if (links.length > 0) {
       // Emit context for the first link
       this.emitContext(links[0]);
-      // Emit context for the last link, if it's different from the first
+           // Emit context for the last link, if it's different from the first
       if (links.length > 1) {
         this.emitContext(links[links.length - 1]);
       }
-    }
+    }*/
   }
   /**
    * Emits a custom event called `parentContext` for a given link element.
@@ -167,12 +172,12 @@ const EdsPagination = class {
   }
   render() {
     return h("div", {
-      key: '2385b59b0a8b2bbdc40bfc5032b846c0ec20065e'
+      key: '584e0918b070eac25a7c4bfceff59b000b60076c'
     }, this.total > 0 && this.mode === 'default' && h("p", {
-      key: '6aea281a4df247874f354469bbabae039424ad9e',
+      key: 'c688bd8e1f1d15904fc274454093f03213f59e38',
       class: "f-ui-03 text-lightest mb-28 w-full text-center"
     }, h("span", {
-      key: 'eeb5f0ea902505c3853a30d51026cef9d9785e48',
+      key: 'c2472919bad41f76e26d518da27509e545ed9db6',
       class: "sr-only"
     }, "Results:"), this.pageResults()), this.mode === 'navigator' || this.lastPage && this.lastPage > 1 ? h("nav", {
       "aria-label": "Pagination"
@@ -254,5 +259,215 @@ const EdsPagination = class {
   }
 };
 EdsPagination.style = EdsPaginationStyle0;
+const edsTableCss = "table{text-indent:0;border-color:inherit;border-collapse:collapse;}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.pt-32{padding-top:2rem}.pt-40{padding-top:2.5rem}.pt-48{padding-top:3rem}.pb-28{padding-bottom:1.75rem}.pb-60{padding-bottom:3.75rem}.mt-20{margin-top:1.25rem}.mt-28{margin-top:1.75rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.overflow-x-auto{overflow-x:auto}.mt-6{margin-top:0.375rem}.p-0{padding:0rem}.m-0{margin:0rem}.border{border-width:1px}.border-softer{border:1px solid rgba(0, 0, 0, .1)}.even\\:bg-inverse-softer:nth-child(even){background-color:rgba(255, 255, 255, .15)}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-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)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.break-words{overflow-wrap:anywhere}";
+const EdsTableStyle0 = edsTableCss;
+const EdsTable = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.data = null;
+    this.endpoint = null;
+    this.config = {};
+    this.rowsPerPage = 10;
+    this.paginationEnabled = true;
+    this.searchEnabled = false;
+    this.hostWidth = undefined;
+    this.columnSize = 'default';
+    this.tableData = [];
+    this.columns = [];
+    this.currentPage = 1;
+    this.parsedConfig = {};
+    this.totalRows = 0;
+    this.searchQuery = '';
+  }
+  handleDataChange() {
+    this.parseData();
+  }
+  handleConfigChange() {
+    this.parseConfig();
+  }
+  componentWillLoad() {
+    this.parseConfig();
+    this.data ? this.parseData() : this.endpoint && this.fetchData();
+  }
+  componentDidLoad() {
+    this.setupPaginationListener();
+  }
+  componentDidUpdate() {
+    this.setupPaginationListener();
+  }
+  parseData() {
+    try {
+      this.tableData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data || [];
+      this.totalRows = this.tableData.length;
+      this.updateColumns();
+      this.currentPage = 1;
+    } catch (error) {
+      // eslint-disable-next-line
+      console.error('Failed to parse data:', error);
+      this.tableData = [];
+    }
+  }
+  parseConfig() {
+    try {
+      this.parsedConfig = typeof this.config === 'string' ? JSON.parse(this.config) : this.config;
+    } catch (error) {
+      // eslint-disable-next-line
+      console.error('Failed to parse config:', error);
+      this.parsedConfig = {};
+    }
+  }
+  async fetchData() {
+    try {
+      const response = await fetch(this.endpoint);
+      const data = await response.json();
+      this.data = data;
+    } catch (error) {
+      // eslint-disable-next-line
+      console.error('Failed to fetch data:', error);
+    }
+  }
+  setupPaginationListener() {
+    if (!this.shouldEnablePagination()) {
+      return;
+    }
+    const paginationEl = this.hostEl.shadowRoot.querySelector('eds-pagination');
+    if (paginationEl && !paginationEl.hasAttribute('listener-attached')) {
+      paginationEl.addEventListener('pageChange', event => this.handlePageChange(event.detail));
+      paginationEl.setAttribute('listener-attached', 'true');
+    }
+  }
+  getFilteredRows() {
+    return this.tableData.filter(row => Object.values(row).some(value => value.toString().toLowerCase().includes(this.searchQuery.toLowerCase())));
+  }
+  getPaginatedRows() {
+    const filteredRows = this.getFilteredRows();
+    this.totalRows = filteredRows.length;
+    const start = (this.currentPage - 1) * this.rowsPerPage;
+    return filteredRows.slice(start, start + this.rowsPerPage);
+  }
+  handlePageChange(newPage) {
+    this.currentPage = newPage;
+    sendAnalytics({
+      category: 'ui-component',
+      parentContext: null,
+      tag: `${this.hostEl.tagName.toLowerCase()}/eds-pagination`,
+      name: `${newPage}` || '',
+      action: 'page'
+    });
+  }
+  handleSearch(event) {
+    this.searchQuery = event.target.value;
+    this.currentPage = 1;
+    /*sendAnalytics({
+      category: 'ui-component',
+      parentContext: null,
+      tag: `${this.hostEl.tagName.toLowerCase()}/eds-input-field/search`,
+      name: `${this.searchQuery}` || '',
+      action: 'page'
+    });*/
+  }
+  renderCell(value, column) {
+    var _a;
+    const format = (_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.format;
+    return format === 'uppercase' ? value === null || value === void 0 ? void 0 : value.toString().toUpperCase() : format === 'svg' ? h("div", {
+      innerHTML: value
+    }) : format === 'bold' ? h("strong", null, value) : format === 'code' ? h("code", null, value) : value;
+  }
+  shouldEnablePagination() {
+    return this.paginationEnabled && this.totalRows > this.rowsPerPage;
+  }
+  updateColumns() {
+    this.columns = this.tableData.length > 0 ? Object.keys(this.tableData[0]) : [];
+  }
+  getVisibleColumnsCount() {
+    return this.columns.filter(column => {
+      var _a;
+      return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden);
+    }).length;
+  }
+  divisionFactor() {
+    let divisionFactor = 1;
+    if (this.columnSize === 'medium') {
+      divisionFactor = 2;
+    } else if (this.columnSize === 'large') {
+      divisionFactor = 4;
+    }
+    return divisionFactor;
+  }
+  render() {
+    // Get the paginated rows and calculate the last page.
+    const paginatedRows = this.getPaginatedRows();
+    const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
+    // Determine the number of visible columns (i.e., those not hidden via config)
+    const visibleColumnsCount = this.getVisibleColumnsCount();
+    /// Calculate container width based on the optional prop or parent's measured width.
+    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'
+    }, this.searchEnabled && h("div", {
+      key: '2f9680dd17b852b140fe560f7979e1dd58236c5a'
+    }, h("eds-input-field", {
+      key: 1,
+      name: "search",
+      "aria-label": "Search",
+      type: "text",
+      placeholder: "Search...",
+      // @ts-ignore
+      onInput: event => this.handleSearch(event)
+    })), h("div", {
+      key: 'd67edb24308e526a3e860a90250d58cf8bfee9c8',
+      class: "mt-20"
+    }, h("table", {
+      key: '9a2ef219110e459ac670a0f9c2e62c600f6b5acd',
+      class: "block overflow-x-auto mt-6 p-0"
+    }, h("thead", {
+      key: '81bae222447e805d06642dda19903d5bf99f2b01'
+    }, h("tr", {
+      key: '582d7ea661823b81ccdf3adc9769fe53cf56f04c',
+      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`
+        }
+      }, column);
+    }))), h("tbody", {
+      key: 'ce7f87e665c394c5e9f2201ef2658e888ea07948'
+    }, paginatedRows.map(row => h("tr", {
+      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("td", {
+        class: "text-center border border-softer m-0 py-8 f-ui-2 break-words",
+        style: {
+          minWidth: `${columnWidth}px`
+        }
+      }, this.renderCell(row[column], column));
+    })))))), this.shouldEnablePagination() && h("div", {
+      key: '0fe6aed0d03c3aa491cd1bb17cd3bdc1e35372a0',
+      class: "mt-20"
+    }, h("eds-pagination", {
+      key: '5192f3f4b2ee93d5864d1afed3341a122c826d97',
+      currentPage: this.currentPage,
+      lastPage: lastPage,
+      perPage: this.rowsPerPage,
+      total: this.totalRows,
+      mode: "default"
+    })));
+  }
+  get hostEl() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "data": ["handleDataChange", "parseData"],
+      "config": ["handleConfigChange"]
+    };
+  }
+};
+EdsTable.style = EdsTableStyle0;
 
-export { EdsPagination as eds_pagination };
+export { EdsPagination as eds_pagination, EdsTable as eds_table };

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

@@ -0,0 +1,36 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsProgressBarCss = ".w-full{width:100%}.h-full{height:100%}.bg-default{background-color:var(--grey-200)}.rounded-lg{border-radius:16px}.h-24{height:1.5rem}.border{border-width:1px}.border-softer{border:2px solid rgba(0, 0, 0, .1 )}.overflow-hidden{overflow:hidden}.bg-accent{background-color:var(--green-500)}.bg-\\[\\#0034CB\\]{--tw-text-opacity:1;background-color:rgb(0 52 203 / var(--tw-text-opacity))}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.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)}";
+const EdsProgressBarStyle0 = edsProgressBarCss;
+const EdsProgressBar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.value = 0;
+  }
+  /**
+   * Method to update the progress value externally.
+   * @param newValue The new progress value (0-100).
+   */
+  async updateValue(newValue) {
+    this.value = Math.min(100, Math.max(0, newValue)); // Clamp value between 0 and 100
+  }
+  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, "%"));
+  }
+};
+EdsProgressBar.style = EdsProgressBarStyle0;
+
+export { EdsProgressBar as eds_progress_bar };

package/eds-rating.entry.esm.js

@@ -15,10 +15,8 @@ const EdsRating = class {
     this.selectedRating = 0;
   }
   /**
-   * Parses the `links` prop into an array of link objects.
-   * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
-   *
-   * @returns {any[]} Array of parsed link objects
+   * Parses the `textMapping` prop into an array of strings.
+   * Returns an empty array if parsing fails.
    */
   get parsedMappings() {
     if (typeof this.textMapping === 'object') {
@@ -28,7 +26,7 @@ const EdsRating = class {
         return JSON.parse(this.textMapping);
       } catch (e) {
         // eslint-disable-next-line
-        console.error('Error parsing links prop:', e);
+        console.error('Error parsing textMapping prop:', e);
         return [];
       }
     }
@@ -44,13 +42,13 @@ const EdsRating = class {
   }
   render() {
     return h("div", {
-      key: '4ca6d5e0fb35d8ebce1acd5c1a7c6c857ba4f463',
+      key: 'c9147c2635f091d93f329d2b56a5fee8dce9126c',
       class: "relative w-full flex flex-col"
     }, h("span", {
-      key: '784b77f84098b8d88cd3872004b0208a4437c51b',
+      key: '39a84bc3d9bcd4b729a35737c883eca7144d13ac',
       class: "f-body-01"
     }, this.label), h("div", {
-      key: '6780db58d3c96046a99d383518cfe1db1e3f1c68',
+      key: '3cb84acf399cac0b23393c71df2f2b36aab4f43e',
       class: "stars"
     }, Array.from({
       length: this.stars
@@ -61,7 +59,7 @@ const EdsRating = class {
       },
       onClick: () => this.handleClick(index + 1)
     }, "\u2605"))), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && h("span", {
-      key: 'ce0eec3c29cf27bff86e3307a29a2c39c2167087',
+      key: '60605ec21b542825da0dad629fc1618d9cf63b25',
       class: "f-ui-04 text-lighter"
     }, this.parsedMappings[this.selectedRating - 1]));
   }

package/eds-svg-repository.entry.esm.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index.esm2.js';
+import { r as registerInstance, h, g as getElement } from './index.esm2.js';
 import { e as euSvg } from './eu-9ddde93a.esm.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';
@@ -291,6 +291,11 @@ const EdsSvgRepository = class {
       icon: svgContent // Pass SVG content as innerHTML
     }));
   }
+  get hostWidth() {
+    // Instead of using window.innerWidth, use the parent element's width.
+    const containerWidth = this.hostEl.parentElement ? this.hostEl.parentElement.offsetWidth : 400;
+    return containerWidth;
+  }
   render() {
     const svgData = this.getSvgData();
     // Define table configuration
@@ -303,14 +308,18 @@ const EdsSvgRepository = class {
       }
     };
     return h("eds-table", {
-      key: 'd5b4cdb69826e22d716bf9bf4ff7fb9ab1f65044',
+      key: 'a1d4a1db6f0886a43513fc34707cdd6140ab685d',
       data: JSON.stringify(svgData),
       config: JSON.stringify(tableConfig),
       "rows-per-page": 10,
       "search-enabled": true,
-      "pagination-enabled": true
+      "pagination-enabled": true,
+      "host-width": this.hostWidth
     });
   }
+  get hostEl() {
+    return getElement(this);
+  }
 };
 
 export { EdsSvgRepository as eds_svg_repository };

package/eds-tabs-content.entry.esm.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './color-0ba8ed56.esm.js';
+import { s as sendAnalytics } from './color-bb472c37.esm.js';
 import { c as cva } from './index-39c58238.esm.js';
 import 'react';
 import 'react/jsx-runtime';
@@ -108,13 +108,13 @@ const EdsTabsContent = class {
   }
   render() {
     return h("div", {
-      key: 'b1bfb55fbdee21a10fcc600d4c3ce2842684c519',
+      key: '7bc954d9251bd15b5e3a49d5c74b83805f802b07',
       class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']"
     }, h("div", {
-      key: '1d1aeb094b6c350355abec1bf74928561a1c0f2d',
+      key: '1bfda380604f1eae1cc5be147a5e3e6b537e0396',
       class: "scroller-x max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28"
     }, h("nav", {
-      key: '5d5b04ddf5ddb60c2a9b49d19f4efe026cc2557d',
+      key: 'b2ed26b52fd629ec99b01c7dc8e612eae4f3886d',
       ref: el => this.tabContainer = el,
       class: "inline-flex",
       "aria-label": this.navAriaLabel
@@ -129,7 +129,7 @@ const EdsTabsContent = class {
         onClick: () => this.handleTabClick(index, tab.label)
       }));
     })), h("slot", {
-      key: '58e9281516d0a4485ba0779f9b79c0fa5e989166'
+      key: '5072b877786a23358d540d6d242d5fbdb3c63d7f'
     })));
   }
   get el() {

package/eds-tabs.entry.esm.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './color-0ba8ed56.esm.js';
+import { s as sendAnalytics } from './color-bb472c37.esm.js';
 import { c as cva } from './index-39c58238.esm.js';
 import 'react';
 import 'react/jsx-runtime';
@@ -40,11 +40,30 @@ const EdsTabs = class {
       index: 0
     });
   }
+  /**
+   * Parses the `links` prop into an array of link objects.
+   * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
+   *
+   * @returns {any[]} Array of parsed link objects
+   */
+  /**
+   * Parses the `links` prop into an array of link objects.
+   * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
+   *
+   * @returns {any[]} Array of parsed link objects
+   */
   parseTabs() {
-    try {
-      this.parsedTabs = JSON.parse(this.tabs);
-    } catch (error) {
-      //console.error('Invalid JSON format for tabs:', error);
+    if (Array.isArray(this.tabs)) {
+      this.parsedTabs = this.tabs;
+    } else if (typeof this.tabs === 'string') {
+      try {
+        this.parsedTabs = JSON.parse(this.tabs);
+      } catch (e) {
+        //console.error('Error parsing tabs prop:', e);
+        this.parsedTabs = [];
+      }
+    } else {
+      // If the type is not an array or string, assume an empty array.
       this.parsedTabs = [];
     }
   }
@@ -100,14 +119,14 @@ const EdsTabs = class {
   }
   render() {
     return h("div", {
-      key: '25078703609dbdaa2025013d0e266b169c880c50',
+      key: '540bb667084b36ae2151ec39ef6b54a9ac6a4c4a',
       id: `${this.id}`,
       class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']"
     }, h("div", {
-      key: '8aa1b4ab1f15692c912db3ee39486a59d634c6a5',
+      key: 'f0266d39c943b82725ded757cce0b35fb85fa874',
       class: "scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28"
     }, h("nav", {
-      key: '33728823ca0f039e1037a691da90b295cbe3f3ac',
+      key: 'fcedf94e6f6c14635291d9c8e6d672efc8055433',
       ref: el => this.tabContainer = el,
       class: "inline-flex",
       "aria-label": this.navAriaLabel

package/eds-timeline.entry.esm.js

@@ -0,0 +1,131 @@
+import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const EdsTimeline = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.events = undefined;
+    this.selectedEvent = null;
+    this.parsedEvents = [];
+  }
+  parseEvents(newValue) {
+    let parsed;
+    // If events is a string, try to parse it
+    if (typeof newValue === 'string') {
+      try {
+        parsed = JSON.parse(newValue);
+      } catch (e) {
+        // eslint-disable-next-line
+        console.error('Error parsing timeline events JSON', e);
+        parsed = [];
+      }
+    }
+    // If events is already an array, use it directly
+    else if (Array.isArray(newValue)) {
+      parsed = newValue;
+    }
+    // Otherwise, default to an empty array
+    else {
+      parsed = [];
+    }
+    // Map over the parsed events to ensure boolean conversion for "completed"
+    this.parsedEvents = Array.isArray(parsed) ? parsed.map(event => Object.assign(Object.assign({}, event), {
+      completed: event.completed === 'true' || event.completed === true
+    })) : [];
+  }
+  componentWillLoad() {
+    this.parseEvents(this.events);
+  }
+  componentDidLoad() {
+    const cards = this.el.querySelectorAll('eds-card-generic');
+    cards.forEach(card => {
+      this.emitContext(card);
+    });
+  }
+  emitContext(cardElement) {
+    const event = new CustomEvent('parentContext', {
+      detail: {
+        componentName: this.el.tagName.toLowerCase(),
+        identifier: null
+      }
+    });
+    cardElement.dispatchEvent(event);
+  }
+  handleEventClick(event) {
+    this.selectedEvent = event;
+    if (this.modalRef && typeof this.modalRef.open === 'function') {
+      this.modalRef.open();
+    }
+  }
+  render() {
+    return h("div", {
+      key: '6016cb89d3fe3250482b42d8a0bf500fe18cee5d',
+      class: "max-w-sidebar mx-auto px-4 py-8"
+    }, h("div", {
+      key: '994cc7af75950a0f09d108804efff796602aeb93',
+      class: "relative"
+    }, h("div", {
+      key: '77b15ae60feb380ea20c6466b49d0efd5d8f5180',
+      class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0"
+    }), h("div", {
+      key: '60bb384ce4eedd7bfc3b15a7a637e2b89318d619',
+      class: "space-y-16"
+    }, this.parsedEvents.map((event, index) => h("div", {
+      class: "relative flex"
+    }, h("div", {
+      class: `w-1/2 ${index % 2 === 0 ? 'pr-4' : ''}`
+    }, index % 2 === 0 && h("eds-card-generic", {
+      cardTitle: event.title,
+      url: "#",
+      description: event.description,
+      "heading-level": "h2",
+      tiny: true,
+      bg: !event.completed,
+      "with-hover": "false",
+      tags: JSON.stringify(event.completed ? [{
+        label: 'completed',
+        style: 'accent'
+      }] : [{
+        label: 'pending',
+        style: 'default'
+      }]),
+      onClick: () => this.handleEventClick(event)
+    })), h("div", {
+      class: "flex items-center justify-center relative"
+    }, event.completed ? h("div", {
+      class: "w-32 h-32 bg-accent rounded-full shadow flex items-center justify-center"
+    }) : h("div", {
+      class: "w-32 h-32 bg-strong rounded-full shadow flex items-center justify-center"
+    })), h("div", {
+      class: `w-1/2 ${index % 2 !== 0 ? 'pl-4' : ''}`
+    }, index % 2 !== 0 && h("eds-card-generic", {
+      cardTitle: event.title,
+      url: "#",
+      description: event.description,
+      "heading-level": "h2",
+      tiny: true,
+      bg: !event.completed,
+      "with-hover": "false",
+      tags: JSON.stringify(event.completed ? [{
+        label: 'completed',
+        style: 'accent'
+      }] : [{
+        label: 'pending',
+        style: 'default'
+      }]),
+      onClick: () => this.handleEventClick(event)
+    })))))));
+  }
+  get el() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "events": ["parseEvents"]
+    };
+  }
+};
+
+export { EdsTimeline as eds_timeline };

package/eds-tooltip.entry.esm.js

@@ -1,7 +1,9 @@
 import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import { s as sendAnalytics } from './color-bb472c37.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
+import './index-39c58238.esm.js';
 
 const edsTooltipCss = ".relative{position:relative}.absolute{position:absolute}.rounded-sm{border-radius:8px}.rounded-xs{border-radius:4px}.bg-stronger{background-color:var(--grey-900)}.bg-strongest{background-color:var(--black)}.text-inverse{color:var(--white)}.text-default{color:var(--black)}.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)}.pointer-events-none{pointer-events:none}.-top-8{top:-0.5rem}.left-1\\/2{left:50%}.z-10{z-index:10}.block{display:block}.-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))}.-translate-y-full{--tw-translate-y:-100%;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))}.whitespace-nowrap{white-space:nowrap}.py-2{padding-top:0.125rem;padding-bottom:0.125rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.p-4{padding:0.25rem}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.p-12{padding:0.75rem}.p-16{padding:1rem}.p-20{padding:1.25rem}";
 const EdsTooltipStyle0 = edsTooltipCss;
@@ -22,9 +24,17 @@ const EdsTooltip = class {
    * Show the tooltip and update its position.
    */
   async showTooltip() {
+    var _a;
     await this.updateTooltipPosition();
     this.isPositioned = true;
     this.isVisible = true;
+    sendAnalytics({
+      category: 'ui-component',
+      parentContext: null,
+      tag: this.el.tagName.toLowerCase(),
+      name: ((_a = this.content) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+      action: 'hover'
+    });
   }
   /**
    * Hide the tooltip.
@@ -92,12 +102,12 @@ const EdsTooltip = class {
   }
   render() {
     return h("div", {
-      key: '5edce5e2ca66ef992ad22604a5017e5ab02f846b',
+      key: '673ab0ee31378410f9c83bb5fd37b27d00a7b018',
       class: "relative"
     }, h("slot", {
-      key: '74c9ef5978e023a45eb9c25c18f95f1875c19b13'
+      key: '0c0138dfdf9aafecc1e0e925c84d4b0ca957f82d'
     }), this.isVisible && this.isPositioned && this.content && h("div", {
-      key: '4cc3ea40bd81308eb7685b5c1065e8bd30f99191',
+      key: '798d01cf631f2e5b3af9d9bb11a847041a6ee2ba',
       class: "rounded-xs bg-strongest text-inverse f-ui-03-light pointer-events-none absolute z-10 whitespace-nowrap p-6",
       role: "tooltip",
       style: {