@ebrains/components 0.7.0-alpha.1 → 0.9.0-beta

package/dist/collection/components/eds-pagination/eds-pagination.css

@@ -6,115 +6,143 @@ menu {
 }
 
 .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;
+  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;
   }
-  .flex {
+
+  .lg\: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;
-      }
-  }
+}

package/dist/collection/components/eds-pagination/eds-pagination.stories.js

@@ -18,11 +18,6 @@ export default {
             control: 'number',
             description: 'Total items available for pagination'
         },
-        mode: {
-            control: { type: 'select' },
-            options: ['default', 'navigator'],
-            description: 'Pagination display mode'
-        },
         prevLabel: {
             control: 'text',
             description: 'Custom label for the "Previous" button in navigator mode',
@@ -57,7 +52,6 @@ export default {
         lastPage: 5,
         perPage: 10,
         total: 50,
-        mode: 'default',
         prevLabel: 'Previous',
         nextLabel: 'Next',
         prevUrl: '',

package/dist/collection/components/eds-section/eds-section-heading/eds-section-heading.js

@@ -33,12 +33,12 @@ export class EdsSectionHeading {
     render() {
         const TagType = this.tag; // Dynamically set tag type for the container
         const HeadingTag = this.headingLevel; // Dynamically set heading level
-        return (h(TagType, { key: '766d3f317904f2d735b7b531cf6ad582f22084e3', class: {
-                'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8 pb-20': true,
+        return (h(TagType, { key: '961a672dc3b656b0a308131a2d334aca51df77f6', class: {
+                'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8': true,
                 container: this.withContainer,
                 'pt-48': this.spacingLarge,
                 'pt-28': !this.spacingLarge
-            } }, h(HeadingTag, { key: '41a9db3f627cf93f58d14cdebf3b991be6a6facf', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, h(HeadingTag, { key: '42eb2ccfba8c83cf140967e39fead6ebddc3a279', class: this.getHeadingClass() }, this.sectionTitle)));
     }
     static get is() { return "eds-section-heading"; }
     static get properties() {

package/dist/collection/components/eds-steps/eds-steps.js

@@ -18,6 +18,46 @@ export class EdsSteps {
         this.type = 'static';
         this.activeStep = 0;
     }
+    /**
+     * Lifecycle method that runs when the component has fully loaded.
+     * It emits a custom event for each `eds-button` element contained within the breadcrumb.
+     */
+    componentDidLoad() {
+        var _a;
+        if (this.type === 'linear') {
+            const btns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-button');
+            btns === null || btns === void 0 ? void 0 : btns.forEach((btn) => {
+                this.emitContext(btn);
+            });
+        }
+    }
+    activeStepChanged(newValue) {
+        setTimeout(() => {
+            var _a;
+            const activeStepContainer = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.step')[newValue];
+            if (activeStepContainer) {
+                const btns = activeStepContainer.querySelectorAll('eds-button');
+                btns.forEach((btn) => {
+                    this.emitContext(btn);
+                });
+            }
+        }, 50);
+    }
+    /**
+     * Emits a custom event called `parentContext` for a given link element.
+     * This event provides context information about the breadcrumb component.
+     *
+     * @param linkElement - The link element to which the event will be dispatched.
+     */
+    emitContext(linkElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.el.tagName.toLowerCase(),
+                identifier: this.activeStep
+            }
+        });
+        linkElement.dispatchEvent(event);
+    }
     handleStepClick(index) {
         this.step.emit(index);
         // In linear mode, update the active step on header click.
@@ -34,7 +74,7 @@ export class EdsSteps {
     render() {
         const steps = this.parsedSteps;
         if (this.type === 'linear') {
-            return (h("div", null, h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-28", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), this.activeStep === index && (h("div", { class: "content" }, h("div", { class: "f-body-02 text-lighter my-16" }, step.content), h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', intent: "primary", class: "next-btn", onClick: this.handleNext }), h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index === 0, "extra-class": index === 0 ? 'hidden' : 'ml-8 block' }))))))), this.activeStep === steps.length && (h("div", { class: "completed" }, h("eds-alert", { intent: "success", message: "All steps completed - you're finished!" })))));
+            return (h("div", null, h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-28", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), this.activeStep === index && (h("div", { class: "content" }, h("div", { class: "f-body-02 text-lighter my-16" }, step.content), h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', intent: "primary", class: "next-btn", onClick: this.handleNext }), h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index === 0, "extra-class": index === 0 ? 'hidden' : 'ml-8 block' })))))))));
         }
         // Static mode: show all steps with their content, no navigation buttons.
         return (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-28", key: index }, h("h3", null, step.title), h("div", { class: "content" }, h("div", { class: "f-body-02 text-lighter my-16" }, step.content)))))));
@@ -120,4 +160,11 @@ export class EdsSteps {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "activeStep",
+                "methodName": "activeStepChanged"
+            }];
+    }
 }

package/dist/collection/components/eds-switch/eds-switch.js

@@ -16,11 +16,11 @@ export class EdsSwitch {
     render() {
         // Compute an accessible name based on state.
         const accessibleLabel = this.labelOn || this.labelOff ? (this.checked ? this.labelOn : this.labelOff) : 'Toggle switch';
-        return (h("div", { key: '624776d666ada7b31cb8e84b08380b888451b1a5', class: "switch-container" }, this.labelOff && h("span", { key: 'ced31e91b88f4cb032744bd846811dd012cb9dcd', class: "switch-label switch-label--off" }, this.labelOff), h("button", { key: '8cb4594687313076f18f30fc26062e1440ae0ab9', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": accessibleLabel, class: {
+        return (h("div", { key: '842d7ecb771ab848481c9f1f6a1aa2f5f04505a7', class: "switch-container" }, this.labelOff && h("span", { key: 'f20f4293896dcbde94346e82d10ed748bdeae0f6', class: "switch-label switch-label--off" }, this.labelOff), h("button", { key: 'ac485fe118bae7f6a42ddb9f7edeccba2224312c', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": accessibleLabel, class: {
                 switch: true,
                 'switch--checked': this.checked,
                 'switch--disabled': this.disabled
-            }, onClick: this.toggleSwitch, disabled: this.disabled }, h("span", { key: '88897b4368c337ea2dc4a017a8503171117a2070', class: "switch-handle" })), this.labelOn && h("span", { key: 'bb66f4fd1d09935598d3e9485d3cdf28e182620e', class: "switch-label switch-label--on" }, this.labelOn)));
+            }, onClick: this.toggleSwitch, disabled: this.disabled }, h("span", { key: '3701615162b3b8946fa5b9040e77dfa20b7de3fe', class: "switch-handle" })), this.labelOn && h("span", { key: 'b57bd428c7d6818bcec1f069a920a7aa2a2e776d', class: "switch-label switch-label--on" }, this.labelOn)));
     }
     static get is() { return "eds-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-table/eds-table.js

@@ -14,6 +14,9 @@ import { parseData } from "../../utils/sharedUtils";
  */
 export class EdsTable {
     constructor() {
+        this.handleResize = () => {
+            this.updateContainerWidth();
+        };
         this.data = null;
         this.endpoint = null;
         this.config = {};
@@ -22,12 +25,13 @@ export class EdsTable {
         this.searchEnabled = false;
         this.hostWidth = undefined;
         this.columnSize = 'default';
-        this.tableData = [];
+        this.tbData = [];
         this.columns = [];
         this.currentPage = 1;
         this.parsedConfig = {};
         this.totalRows = 0;
         this.searchQuery = '';
+        this.containerWidth = 0;
     }
     handleDataChange() {
         this.parseData();
@@ -40,23 +44,40 @@ export class EdsTable {
         this.data ? this.parseData() : this.endpoint && this.fetchData();
     }
     componentDidLoad() {
+        this.updateContainerWidth();
+        window.addEventListener('resize', this.handleResize);
         this.setupPaginationListener();
     }
     componentDidUpdate() {
         this.setupPaginationListener();
     }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.handleResize);
+    }
+    updateContainerWidth() {
+        // Use hostWidth prop if provided; otherwise, measure parent element
+        if (this.hostWidth && this.hostWidth.trim() !== '') {
+            this.containerWidth = Number(this.hostWidth);
+        }
+        else if (this.hostEl.parentElement instanceof HTMLElement) {
+            this.containerWidth = this.hostEl.parentElement.getBoundingClientRect().width;
+        }
+        else {
+            this.containerWidth = 400;
+        }
+    }
     parseData() {
         try {
-            this.tableData = parseData(this.data);
-            //this.tableData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data || [];
-            this.totalRows = this.tableData.length;
+            this.tbData = parseData(this.data);
+            //this.tbData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data || [];
+            this.totalRows = this.tbData.length;
             this.updateColumns();
             this.currentPage = 1;
         }
         catch (error) {
             // eslint-disable-next-line
             console.error('Failed to parse data:', error);
-            this.tableData = [];
+            this.tbData = [];
         }
     }
     parseConfig() {
@@ -92,7 +113,7 @@ export class EdsTable {
         }
     }
     getFilteredRows() {
-        return this.tableData.filter((row) => Object.values(row).some((value) => value.toString().toLowerCase().includes(this.searchQuery.toLowerCase())));
+        return this.tbData.filter((row) => Object.values(row).some((value) => value.toString().toLowerCase().includes(this.searchQuery.toLowerCase())));
     }
     getPaginatedRows() {
         const filteredRows = this.getFilteredRows();
@@ -130,7 +151,7 @@ export class EdsTable {
         return this.paginationEnabled && this.totalRows > this.rowsPerPage;
     }
     updateColumns() {
-        this.columns = this.tableData.length > 0 ? Object.keys(this.tableData[0]) : [];
+        this.columns = this.tbData.length > 0 ? Object.keys(this.tbData[0]) : [];
     }
     getVisibleColumnsCount() {
         return this.columns.filter((column) => { var _a; return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden); }).length;
@@ -146,29 +167,22 @@ export class EdsTable {
         return divisionFactor;
     }
     render() {
-        // Get the paginated rows and calculate the last page.
+        // Use containerWidth state that is updated on resize.
+        const currentContainerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.containerWidth || 400;
+        // Calculate the number of visible columns and the column width.
+        const visibleColumnsCount = this.getVisibleColumnsCount();
+        const columnWidth = visibleColumnsCount > 0 ? Math.floor((currentContainerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
         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: 'b77c9a601d3c8c0eae3cf7754839fdf4ca9b3ad4' }, this.searchEnabled && (h("div", { key: 'a1e652ce7b75f17527b6d1c83968a3c50ee50e23' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...",
+        return (h("div", { key: '43add2309d8e2c85c98676709cd87fc07e4de017' }, this.searchEnabled && (h("div", { key: '1213d8aaa8a2402bd1705e03375d17f570877d5e' }, 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: 'fd3de252d0ae287cea5409c4e7f651fc557a8fc9', class: "mt-20" }, h("table", { key: '80f767759a6049fae588e150e0ff166db4bc20b4', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: 'd7c39c1b36c9e247896082647372125d7cf11680' }, h("tr", { key: 'f32ca0941e118f89934c44dcad77a27880ea9e53', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            onInput: (event) => this.handleSearch(event) }))), h("div", { key: 'a2ec6392ed99a527e4de46a9018bc1ea9b383ecb', class: "mt-20" }, h("table", { key: 'ef79ce872f0cb1439dd6a7987f24cac005ac23ea', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: '0853a09e45f748b4bc85e319cbb08efd97426617' }, h("tr", { key: '64e114ae3661a027e9ab744ba45801d98f2faee9', 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 - 4}px` } }, column));
-        }))), h("tbody", { key: '85a9c3e55d12c6f62f0175613a4ff84e703dc4c5' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+        }))), h("tbody", { key: '1afd468551bab11221bbfc70d0f19f4e105e7432' }, 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 - 4}px` } }, this.renderCell(row[column], column)));
-        }))))))), this.shouldEnablePagination() && (h("div", { key: '093e13235ad0041096f05e476e6199575bdb3265', class: "mt-20" }, h("eds-pagination", { key: 'a86d91875a3847d1b4735fe76910367ed1fd7875', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+        }))))))), this.shouldEnablePagination() && (h("div", { key: 'c415ded700580eec2464a72a1659bd8be5bcacb3', class: "mt-20" }, h("eds-pagination", { key: '81088574b7c7fd254e07761ceed6cd1d69c2f2ed', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     static get is() { return "eds-table"; }
     static get encapsulation() { return "shadow"; }
@@ -198,7 +212,7 @@ export class EdsTable {
                     "tags": [],
                     "text": "Static data for the table as an object or JSON string"
                 },
-                "attribute": "data",
+                "attribute": "table-data",
                 "reflect": false,
                 "defaultValue": "null"
             },
@@ -225,7 +239,7 @@ export class EdsTable {
                 "mutable": false,
                 "complexType": {
                     "original": "| string\n    | {\n        [key: string]: {\n          hidden?: boolean;\n          format?: 'uppercase' | 'bold' | 'code';\n        };\n      }",
-                    "resolved": "string | { [key: string]: { hidden?: boolean; format?: \"bold\" | \"code\" | \"uppercase\"; }; }",
+                    "resolved": "string | { [key: string]: { hidden?: boolean; format?: \"code\" | \"bold\" | \"uppercase\"; }; }",
                     "references": {}
                 },
                 "required": false,
@@ -331,12 +345,13 @@ export class EdsTable {
     }
     static get states() {
         return {
-            "tableData": {},
+            "tbData": {},
             "columns": {},
             "currentPage": {},
             "parsedConfig": {},
             "totalRows": {},
-            "searchQuery": {}
+            "searchQuery": {},
+            "containerWidth": {}
         };
     }
     static get elementRef() { return "hostEl"; }

package/dist/collection/components/eds-table/eds-table.stories.js

@@ -61,7 +61,7 @@ const sampleData = [
 export const Default = {
     render: (args) => `
     <eds-table
-      data='${JSON.stringify(args.data)}'
+      table-data='${JSON.stringify(args.data)}'
       config='${JSON.stringify(args.config)}'
       rows-per-page="${args.rowsPerPage}"
       pagination-enabled="${args.paginationEnabled}"

package/dist/collection/components/eds-tag/eds-tag.js

@@ -28,7 +28,7 @@ export class EdsTag {
     }
     render() {
         const classes = tagStyles({ intent: this.intent });
-        return h("span", { key: '2f4b0011094538aaa0a7cc855eadc1b39c9dc028', class: classes }, this.label);
+        return h("span", { key: '55a6039b040436e5dded9aaf1007668b97091ba3', class: classes }, this.label);
     }
     static get is() { return "eds-tag"; }
     static get encapsulation() { return "shadow"; }