@ebrains/components 2.4.1 → 3.1.0

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

@@ -12,19 +12,120 @@ table {
     /* 3 */
 }
 
-/* Default theme - no alternating colors */
+/* DISABLED — only the brand theme is used now (theme is coerced to 'brand'
+   in eds-table.tsx). Kept for reference.
+
+   Default theme - no alternating colors
 tr.table-row-default {
   background-color: transparent;
 }
 
-/* Color theme - alternating rows */
+   Color theme - alternating rows
 tr.table-row-color:nth-child(even) {
-  background-color:var(--grey-100);
+  background-color:var(--grey-light);
 }
 
 tr.table-row-color:nth-child(odd) {
   background-color: transparent;
 }
+*/
+
+/* ============================================
+   BRAND THEME STYLES
+   ============================================ */
+
+/* Brand table wrapper */
+.brand-table-wrapper {
+  margin-top: 2rem;
+  width: 100%;
+}
+
+/* Brand table base */
+.brand-table {
+  width: 100% !important;
+  border-collapse: separate !important;
+  border-spacing: 0 !important;
+  display: table !important;
+  table-layout: fixed !important;
+}
+
+/* Brand table header */
+.brand-thead {
+  background: var(--grey-light);
+}
+
+.brand-header-row {
+  border: none !important;
+}
+
+.brand-header-row th {
+  padding: 1rem 1.5rem !important;
+  text-align: center !important;
+  font-weight: 600 !important;
+  font-size: 0.9rem !important;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--grey-dark) !important;
+  border: none !important;
+  overflow-wrap: break-word !important;
+  word-wrap: break-word !important;
+}
+
+.brand-header-row th:first-child {
+  border-radius: 0.5rem 0 0 0;
+  padding-left: 2rem !important;
+}
+
+.brand-header-row th:last-child {
+  border-radius: 0 0.5rem 0 0;
+  padding-right: 2rem !important;
+}
+
+/* Brand table rows */
+.brand-row {
+  border-bottom: 1px solid var(--grey-light) !important;
+  transition: all 0.3s ease;
+  position: relative;
+  background: transparent !important;
+}
+
+.brand-row.has-actions {
+  cursor: pointer;
+}
+
+.brand-row:hover {
+  background: rgba(0, 255, 157, 0.05) !important;
+}
+
+.brand-row td {
+  padding: 1.5rem 1.5rem !important;
+  border: none !important;
+  vertical-align: middle;
+  position: relative;
+  z-index: 1;
+  overflow-wrap: break-word !important;
+  word-wrap: break-word !important;
+}
+
+.brand-row td:first-child {
+  padding-left: 2rem !important;
+}
+
+.brand-row td:last-child {
+  padding-right: 2rem !important;
+}
+
+/* Brand row action cell alignment */
+.brand-row .actions-cell {
+  text-align: right !important;
+}
+
+/* Remove default table borders for brand theme */
+.brand-table tr.brand-row {
+  border-left: none;
+  border-right: none;
+  border-top: none;
+}
 
 .container {
     width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
@@ -130,7 +231,6 @@ tr.table-row-color:nth-child(odd) {
 
 .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);
@@ -138,7 +238,6 @@ tr.table-row-color:nth-child(odd) {
 
 .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);
@@ -162,4 +261,172 @@ tr.table-row-color:nth-child(odd) {
 
 .break-words {
     overflow-wrap: anywhere;
+}
+
+/* ============================================
+   CONTROLS CONTAINER STYLES
+   ============================================ */
+
+.controls-container {
+  display: flex;
+  width: 100%;
+}
+
+.view-toggle-wrapper {
+  flex-shrink: 0;
+}
+
+.search-wrapper {
+  min-width: 0;
+}
+
+/* ============================================
+   CARD VIEW STYLES
+   ============================================ */
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1.5rem;
+  margin-top: 1.5rem;
+}
+
+.data-card {
+  background: var(--white);
+  border: 1px solid var(--grey-light);
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.data-card:hover {
+  border-color: var(--brand-green);
+  box-shadow: 0 4px 12px rgba(0, 255, 157, 0.1);
+  transform: translateY(-2px);
+}
+
+.card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  flex: 1;
+}
+
+.card-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.card-label {
+  font-family: var(--f-ui-03-fontFamily);
+  font-size: var(--f-ui-03-fontSize);
+  font-weight: var(--f-ui-03-fontWeight);
+  line-height: var(--f-ui-03-lineHeight);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--grey-dark);
+}
+
+.card-value {
+  font-family: var(--f-ui-02-fontFamily);
+  font-size: var(--f-ui-02-fontSize);
+  line-height: var(--f-ui-02-lineHeight);
+  color: var(--brand-black);
+  word-wrap: break-word;
+}
+
+/* Emphasize the primary (first) field — the service name/title — a bit
+   larger than the other card values. */
+.card-field:first-child .card-value {
+  font-size: var(--f-ui-01-fontSize);
+  line-height: var(--f-ui-01-lineHeight);
+}
+
+.card-actions {
+  display: flex;
+  flex-direction: row;        /* actions in a horizontal row... */
+  flex-wrap: wrap;            /* ...wrapping to the next line on narrow cards / many actions */
+  align-items: center;
+  justify-content: center;    /* centered row, reads cleanly at any width */
+  gap: 0.5rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--grey-light);
+}
+
+/* Responsive grid adjustments */
+@media (min-width: 640px) {
+  .card-grid {
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .card-grid {
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+    gap: 2rem;
+  }
+}
+
+/* ============================================
+   UTILITY CLASSES
+   ============================================ */
+
+/* Flex Direction */
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+/* Align Items */
+.items-start {
+  align-items: flex-start;
+}
+
+.items-center {
+  align-items: center;
+}
+
+/* Gap */
+.gap-16 {
+  gap: 1rem;
+}
+
+/* Margin Bottom */
+.mb-16 {
+  margin-bottom: 1rem;
+}
+
+/* Width */
+.w-full {
+  width: 100%;
+}
+
+.w-auto {
+  width: auto;
+}
+
+/* Responsive utilities for md screens (750px and up) */
+@media (min-width: 750px) {
+  .flex-md-row {
+    flex-direction: row;
+  }
+
+  .items-md-center {
+    align-items: center;
+  }
+
+  .w-md-auto {
+    width: auto;
+  }
+
+  .w-md-400 {
+    width: 400px;
+  }
 }

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

@@ -1,14 +1,15 @@
 /**
  * <eds-table
       table-data='[
-        { "Property": "username", "Type": "string", "Required": "Yes" },
-        { "Property": "password", "Type": "string", "Required": "Yes" },
-        { "Property": "email", "Type": "string", "Required": "No" }
+        { "Property": "username", "Type": "string", "Required": "Yes", "Docs": "<a href=\"/docs\">View Docs</a>" },
+        { "Property": "password", "Type": "string", "Required": "Yes", "Docs": "<a href=\"/docs\">View Docs</a>" },
+        { "Property": "email", "Type": "string", "Required": "No", "Docs": "<a href=\"/docs\">View Docs</a>" }
       ]'
       config='{
         "Type": { "format": "uppercase" },
         "Property": { "format": "code" },
-        "Required": { "hidden": true }
+        "Required": { "hidden": true },
+        "Docs": { "format": "html" }
       }'
       actions='[
         { "name": "view",  "label": "View"  },
@@ -33,10 +34,17 @@ import { parseData } from "../../utils/sharedUtils";
  * `EdsTable` is a customizable data table component with support for dynamic data fetching, column configuration, pagination, and search functionality.
  *
  * Key Features:
- * - Configurable columns with options to hide or apply text formatting (uppercase, bold, or code).
+ * - Configurable columns with options to hide or apply text formatting (uppercase, bold, code, or html).
  * - Pagination support with adjustable rows per page.
  * - Searchable content for easier data filtering.
  *
+ * Column Format Options:
+ * - 'uppercase': Converts text to uppercase
+ * - 'bold': Wraps text in <strong> tag
+ * - 'code': Wraps text in <code> tag
+ * - 'html': Renders raw HTML content (use for web components, links, etc.)
+ * - 'svg': (deprecated, use 'html') Renders raw HTML content
+ *
  * This component is versatile for displaying data with flexible configuration, and integrates with pagination and search functionalities.
  */
 export class EdsTable {
@@ -88,17 +96,29 @@ export class EdsTable {
                 action: this.sortDirection
             });
         };
+        this.handleViewChange = (event) => {
+            this.view = event.detail.value ? 'card' : 'table';
+            this.viewchange.emit({ view: this.view });
+            sendAnalytics({
+                category: 'ui-component',
+                parentContext: null,
+                tag: `${this.hostEl.tagName.toLowerCase()}/view-toggle`,
+                name: this.view,
+                action: 'view-change'
+            });
+        };
         this.data = null;
         this.config = {};
         this.rowsPerPage = 10;
         this.paginationEnabled = true;
         this.searchEnabled = false;
         this.hostWidth = undefined;
-        this.columnSize = 'default';
         this.actions = [];
         this.actionTemplate = undefined;
         this.sortingEnabled = false;
-        this.theme = 'color';
+        this.theme = 'brand';
+        this.view = 'table';
+        this.showViewToggle = false;
         this.parsedActions = [];
         this.dataColumns = [];
         this.tbData = [];
@@ -128,6 +148,8 @@ export class EdsTable {
         }
     }
     componentWillLoad() {
+        // 'default' / 'color' themes are disabled — always render the brand theme.
+        this.theme = 'brand';
         this.parseConfig();
         this.handleActionsChange();
         this.parseData();
@@ -214,7 +236,8 @@ export class EdsTable {
     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);
+        return format === 'uppercase' ? (value === null || value === void 0 ? void 0 : value.toString().toUpperCase()) : format === 'html' || format === 'svg' ? ( // 'svg' is deprecated, use 'html'
+        h("div", { innerHTML: value })) : format === 'bold' ? (h("strong", null, value)) : format === 'code' ? (h("code", null, value)) : (value);
     }
     /**
      * Renders one action (button or checkbox) for a specific action‐name.
@@ -234,7 +257,10 @@ export class EdsTable {
         }
         // Let all action buttons be focusable naturally
         const showLabel = act.showLabel === true;
-        const btn = (h("eds-button", { icon: act.icon, label: showLabel ? act.label : null, iconPos: "left", pill: true, size: "small", intent: "ghost", tabIndex: 0, onClick: () => this.emitAction(act.name, row) }));
+        const isBrandTheme = this.theme === 'brand';
+        // Use custom intent if provided, otherwise fall back to theme-based default
+        const buttonIntent = act.intent || (isBrandTheme ? 'primary' : 'ghost');
+        const btn = (h("eds-button", { icon: act.icon, label: showLabel ? act.label : null, iconPos: act.pos || 'left', pill: true, size: "small", intent: buttonIntent, tabIndex: 0, onClick: () => this.emitAction(act.name, row) }));
         return showLabel ? btn : h("eds-tooltip", { content: act.label }, btn);
     }
     emitAction(actionName, row, checked) {
@@ -254,24 +280,11 @@ export class EdsTable {
         var _a, _b;
         // Grab all data‐keys from the first row (if any) as before:
         this.columns = this.tbData.length > 0 ? Object.keys(this.tbData[0]) : [];
-        // Instead of pushing each action.name, add just a single “actions” column
+        // Instead of pushing each action.name, add just a single "actions" column
         if (((_b = (_a = this.parsedActions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 && this.tbData.length > 0) {
             this.columns.push('actions');
         }
     }
-    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;
-    }
     capitalize(str) {
         return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
     }
@@ -301,41 +314,45 @@ export class EdsTable {
             return this.sortDirection === 'asc' ? comparison : -comparison;
         });
     }
-    render() {
-        const currentContainerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.containerWidth || 400;
-        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);
-        return (h("div", { key: '0601cea60a05d044a717219e6ff6385ef915defa' }, this.searchEnabled && (h("div", { key: 'de1affaf192dc5e63b16d534d2f518c206ab7010' }, h("eds-input-field", { key: 1, icon: "search", name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))), h("div", { key: '49f71b5a2481d719cb8fe0547f05a5ae83ad5541', class: "mt-20" }, h("table", { key: 'b63ca6615ed681c741fb2d3ff2675f9cc061d194', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: '817b534cca3c2492b69b3816a41b54ec850847ab' }, h("tr", { key: '6cb8735ac56c3fe2acc4a257815bc0d07009118c', class: `m-0 p-0 border border-softer table-row-${this.theme}` }, this.columns.map((col) => {
-            var _a;
+    renderCardView(rows) {
+        // Get data columns (exclude 'actions' column)
+        const dataColumns = this.columns.filter((col) => { var _a; return col !== 'actions' && !((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden); });
+        return (h("div", { class: "card-grid" }, rows.map((row) => (h("div", { class: "data-card" }, h("div", { class: "card-content" }, dataColumns.map((col) => (h("div", { class: "card-field" }, h("span", { class: "card-label" }, this.capitalize(col)), h("span", { class: "card-value" }, this.renderCell(row[col], col)))))), this.parsedActions.length > 0 && (h("div", { class: "card-actions" }, this.parsedActions.map((act) => (h("span", null, this.renderSingleActionCell(act.name, row)))))))))));
+    }
+    renderTableView(paginatedRows) {
+        return (h("div", { class: `mt-20 ${this.theme === 'brand' ? 'brand-table-wrapper' : ''}` }, h("table", { class: `${this.theme === 'brand' ? '' : 'block overflow-x-auto'} mt-6 p-0 ${this.theme === 'brand' ? 'brand-table' : ''}` }, h("thead", { class: this.theme === 'brand' ? 'brand-thead' : '' }, h("tr", { class: `m-0 p-0 border border-softer table-row-${this.theme} ${this.theme === 'brand' ? 'brand-header-row' : ''}` }, this.columns
+            .filter((col) => { var _a; return col === 'actions' || !((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden); })
+            .map((col) => {
             if (col === 'actions') {
-                return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }));
-            }
-            if (!((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden)) {
-                return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, h("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.25rem' } }, h("span", null, this.capitalize(col)), this.sortingEnabled && (h("eds-icon-wrapper", { icon: this.sortColumn === col
-                        ? this.sortDirection === 'asc'
-                            ? 'chevron-up'
-                            : 'chevron-down'
-                        : 'chevron-down', "aria-label": `Sort by ${col}`, onClick: () => this.handleSort(col), style: { cursor: 'pointer' } })))));
+                return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words" }));
             }
-            return null;
-        }))), h("tbody", { key: '3c8630ed1f47720688bfcdb78c5dbfc84cb238cf' }, paginatedRows.map((row) => (h("tr", { class: `m-0 p-0 border border-softer table-row-${this.theme}` }, this.columns.map((col) => {
-            var _a;
+            return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words" }, h("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.25rem' } }, h("span", null, this.capitalize(col)), this.sortingEnabled && (h("eds-icon-wrapper", { name: this.sortColumn === col
+                    ? this.sortDirection === 'asc'
+                        ? 'chevron-up'
+                        : 'chevron-down'
+                    : 'chevron-down', "aria-label": `Sort by ${col}`, onClick: () => this.handleSort(col), style: { cursor: 'pointer' } })))));
+        }))), h("tbody", null, paginatedRows.map((row) => (h("tr", { class: `m-0 p-0 border border-softer table-row-${this.theme} ${this.theme === 'brand' ? 'brand-row' : ''} ${this.parsedActions.length > 0 ? 'has-actions' : ''}` }, this.columns
+            .filter((col) => { var _a; return col === 'actions' || !((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden); })
+            .map((col) => {
             if (col === 'actions') {
-                return (h("td", { class: "text-center border border-softer m-0 f-ui-02 break-words actions-cell", style: { minWidth: `${columnWidth - 4}px` } }, h("div", { role: "toolbar", "aria-label": "Row actions", onKeyDown: this.onActionKeyDown, style: {
+                return (h("td", { class: "text-center border border-softer m-0 f-ui-01 break-words actions-cell" }, h("div", { role: "toolbar", "aria-label": "Row actions", onKeyDown: this.onActionKeyDown, style: {
                         display: 'flex',
                         gap: '0.5rem',
                         justifyContent: 'center',
                         flexWrap: 'wrap'
                     } }, this.parsedActions.map((act) => (h("span", { style: { whiteSpace: 'nowrap' } }, this.renderSingleActionCell(act.name, row)))))));
             }
-            if (!((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden)) {
-                // Regular data cell
-                return (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[col], col)));
-            }
-            return null;
-        }))))))), this.shouldEnablePagination() && (h("div", { key: '09faef418edc676bb2b60c2439e0652a92fe023d', class: "mt-20" }, h("eds-pagination", { key: '9403d33a37505c73fe3bec652ef93f533bdb4f03', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+            // Regular data cell
+            return (h("td", { class: "text-center border border-softer m-0 py-8 f-ui-02 break-words" }, this.renderCell(row[col], col)));
+        }))))))));
+    }
+    render() {
+        const paginatedRows = this.getPaginatedRows();
+        const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
+        const showControls = this.showViewToggle || this.searchEnabled;
+        return (h("div", { key: '1e8a2f5f19df240ee3a57951641b60b947342fad' }, showControls && (h("div", { key: '778fe091226330448bba089189e9dd6a6aa977a9', class: "controls-container flex-col flex-md-row items-start items-md-center justify-between gap-16 mb-16" }, this.showViewToggle && (h("div", { key: '7ef287464bb2fba846be5341f4bb0e71d982be0e', class: "view-toggle-wrapper" }, h("eds-switch", { key: '2d3a494a5b354a14c8e882a153633bd5e85a40ab', variant: "segmented", labelOff: "Table View", labelOn: "Card View", checked: this.view === 'card', onUiswitch: this.handleViewChange }))), this.searchEnabled && (h("div", { key: 'dfcf6d0bdc23cb10481121881a7656b02a0599c1', class: `search-wrapper w-full ${this.showViewToggle ? 'w-md-400' : ''}` }, h("eds-input-field", { key: 1, icon: "search", name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))))), this.view === 'card'
+            ? this.renderCardView(paginatedRows)
+            : this.renderTableView(paginatedRows), this.shouldEnablePagination() && (h("div", { key: '3f7faafdd6147855cb8812ff6303c335c7fd1f35', class: "mt-20" }, h("eds-pagination", { key: '17705ba01a8ca8cc79bacfce34e55f11ce53d70c', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     static get is() { return "eds-table"; }
     static get encapsulation() { return "shadow"; }
@@ -373,8 +390,8 @@ export class EdsTable {
                 "type": "string",
                 "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\"; }; }",
+                    "original": "| string\n    | {\n        [key: string]: {\n          hidden?: boolean;\n          format?: 'uppercase' | 'bold' | 'code' | 'html' | 'svg';\n        };\n      }",
+                    "resolved": "string | { [key: string]: { hidden?: boolean; format?: \"code\" | \"html\" | \"svg\" | \"bold\" | \"uppercase\"; }; }",
                     "references": {}
                 },
                 "required": false,
@@ -458,24 +475,6 @@ export class EdsTable {
                 "attribute": "host-width",
                 "reflect": false
             },
-            "columnSize": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'default' | 'medium' | 'large'",
-                    "resolved": "\"default\" | \"large\" | \"medium\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Optional property to control the column sizing mode.\n- 'default' uses containerWidth / visibleColumns.\n- 'medium' divides that result by 2.\n- 'large' divides that result by 4."
-                },
-                "attribute": "column-size",
-                "reflect": false,
-                "defaultValue": "'default'"
-            },
             "actions": {
                 "type": "string",
                 "mutable": false,
@@ -485,7 +484,7 @@ export class EdsTable {
                     "references": {
                         "TableAction": {
                             "location": "local",
-                            "path": "/Users/nigeor/Documents/Projects/EBRAINS/ebrains-ui-ecosystem/packages/components/src/components/eds-table/eds-table.tsx",
+                            "path": "/Users/nikolaosgeorgomanolis/Documents/EBRAINS/Projects/ebrains-ui-ecosystem/packages/components/src/components/eds-table/eds-table.tsx",
                             "id": "../../../packages/components/src/components/eds-table/eds-table.tsx::TableAction"
                         }
                     }
@@ -494,7 +493,7 @@ export class EdsTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Array of actions to render in each row. Can be passed as a JSON string or as a `TableAction[]`.\n\nEach action object may include:\n - `name`       (string; required)  \u2014 unique action key, e.g. `\"view\"`, `\"delete\"`.\n - `label`      (string; required)  \u2014 text shown on the button, or used as the tooltip/aria-label when icon-only.\n - `type`       (\"button\" | \"checkbox\"; optional) \u2014 whether to render a standard button (default) or a checkbox.\n - `icon`       (string; optional)  \u2014 name of the icon to display in icon-only mode.\n - `field`      (string; optional)  \u2014 for checkboxes, the row field whose truthiness binds the checked state (defaults to `name`).\n - `showLabel`  (boolean; optional) \u2014 if `true`, render the full `label` instead of an icon + tooltip.\n\nWhen you pass JSON, make sure field names match exactly:\n```html\nactions='[\n  { \"name\":\"view\",  \"label\":\"View\",  \"icon\":\"eye\" },\n  { \"name\":\"edit\",  \"label\":\"Edit\",  \"icon\":\"pencil\", \"showLabel\":true },\n  { \"name\":\"del\",   \"label\":\"Delete\",\"type\":\"checkbox\", \"field\":\"selected\" }\n]'\n```"
+                    "text": "Array of actions to render in each row. Can be passed as a JSON string or as a `TableAction[]`.\n\nEach action object may include:\n - `name`       (string; required)  \u2014 unique action key, e.g. `\"view\"`, `\"delete\"`.\n - `label`      (string; required)  \u2014 text shown on the button, or used as the tooltip/aria-label when icon-only.\n - `type`       (\"button\" | \"checkbox\"; optional) \u2014 whether to render a standard button (default) or a checkbox.\n - `icon`       (string; optional)  \u2014 name of the icon to display in icon-only mode.\n - `field`      (string; optional)  \u2014 for checkboxes, the row field whose truthiness binds the checked state (defaults to `name`).\n - `showLabel`  (boolean; optional) \u2014 if `true`, render the full `label` instead of an icon + tooltip.\n - `intent`     (\"brand\" | \"primary\" | \"secondary\" | \"neutral\" | \"ghost\" | \"brandInverse\" | \"secondaryInverse\" | \"ghostInverse\"; optional) \u2014 button intent/style.\n\nWhen you pass JSON, make sure field names match exactly:\n```html\nactions='[\n  { \"name\":\"view\",  \"label\":\"View\",  \"icon\":\"eye\", \"intent\":\"brand\" },\n  { \"name\":\"edit\",  \"label\":\"Edit\",  \"icon\":\"pencil\", \"showLabel\":true, \"intent\":\"primary\" },\n  { \"name\":\"del\",   \"label\":\"Delete\",\"type\":\"checkbox\", \"field\":\"selected\" }\n]'\n```"
                 },
                 "attribute": "actions",
                 "reflect": false,
@@ -541,21 +540,57 @@ export class EdsTable {
             },
             "theme": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
-                    "original": "'default' | 'color'",
-                    "resolved": "\"color\" | \"default\"",
+                    "original": "'brand'",
+                    "resolved": "\"brand\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Theme for table styling - 'default' or 'color' for alternating row colors"
+                    "text": "Theme for table styling.\n\nThe 'default' (no background) and 'color' (alternating rows) themes are\nDISABLED \u2014 the table now always renders the EBRAINS 'brand' theme (modern\nstyling, hover, green accents). The prop is kept for API compatibility but\nis coerced to 'brand' in componentWillLoad(), so any value a consumer\npasses is ignored."
                 },
                 "attribute": "theme",
                 "reflect": false,
-                "defaultValue": "'color'"
+                "defaultValue": "'brand'"
+            },
+            "view": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'table' | 'card'",
+                    "resolved": "\"card\" | \"table\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "View mode for displaying data:\n- 'table': Traditional table layout (default)\n- 'card': Card grid layout"
+                },
+                "attribute": "view",
+                "reflect": false,
+                "defaultValue": "'table'"
+            },
+            "showViewToggle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show view toggle control (segmented switch for Table/Card views)"
+                },
+                "attribute": "show-view-toggle",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -590,6 +625,21 @@ export class EdsTable {
                     "resolved": "{ action: string; row: any; checked: boolean; }",
                     "references": {}
                 }
+            }, {
+                "method": "viewchange",
+                "name": "viewchange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when view mode changes"
+                },
+                "complexType": {
+                    "original": "{ view: 'table' | 'card' }",
+                    "resolved": "{ view: \"card\" | \"table\"; }",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "hostEl"; }