@ebrains/components 3.0.0 → 3.1.0

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

@@ -28,6 +28,15 @@
     transform: scale(1.2);
 }
 
+/* Non-color cue so "filled" reads instantly (not just light-green vs neon):
+   selected stars scale up. Keeps eds-button untouched. */
+.eds-rating__btn {
+    transition: transform 0.15s ease-in-out;
+}
+.eds-rating__btn.is-selected {
+    transform: scale(1.05);
+}
+
 .flex {
     display: flex;
 }

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

@@ -73,12 +73,12 @@ export class EdsRating {
         this.onSelect(next);
     }
     render() {
-        return (h("div", { key: '89671afe2d02d527001009ee83fb0d4e48550479', id: "rating-buttons", role: "group", "aria-labelledby": "rating", class: "stars flex space-x-1 my-8", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: this.ratingCount }, (_, index) => {
+        return (h("div", { key: '01857f12c63fbe53b95152902ddba594aa736f6f', id: "rating-buttons", role: "group", "aria-labelledby": "rating", class: "stars flex space-x-1 my-8", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: this.ratingCount }, (_, index) => {
             const starRating = index + 1;
             const isSelected = starRating <= this.internalRating;
             // Use the mapping text if available; otherwise, fall back to a generic label.
             const checked = this.internalRating === starRating;
-            return (h("eds-button", { ref: (el) => (this.buttonRefs[index] = el), icon: this.ratingType, "aria-label": `${starRating} ${this.ratingType}${starRating > 1 ? 's' : ''}`, onClick: () => this.onSelect(starRating), tabIndex: checked || (this.internalRating === 0 && index === 0) ? 0 : -1, intent: isSelected ? 'brand' : 'neutral', size: "large" }));
+            return (h("eds-button", { ref: (el) => (this.buttonRefs[index] = el), icon: this.ratingType, "aria-label": `${starRating} ${this.ratingType}${starRating > 1 ? 's' : ''}`, onClick: () => this.onSelect(starRating), tabIndex: checked || (this.internalRating === 0 && index === 0) ? 0 : -1, intent: isSelected ? 'brand' : 'brandLight', class: isSelected ? 'eds-rating__btn is-selected' : 'eds-rating__btn', size: "large" }));
         })));
     }
     static get is() { return "eds-rating"; }

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

@@ -20,7 +20,7 @@ export class EdsSectionCore {
     }
     render() {
         const TagType = this.tag; // Set dynamic tag type (div or section)
-        return (h(TagType, { key: '65cb765fe9b997b5e573f5befd4ca1ea6611f1c5' }, h("eds-section-heading", { key: 'a48c9fef0a45fbed08749e8b4f17d762d38bbb5b', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '7e26bc40132c32670db60f5765b412d00d64c129' })));
+        return (h(TagType, { key: '635230d1ec9a0dcc945990a6a58dc3508345d984' }, h("eds-section-heading", { key: '0b6b94df22af707cbd6964132f3a5190b4b7e83c', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '8834c29c25249fb5c384fb5d51866eadb93a97d6' })));
     }
     static get is() { return "eds-section-core"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,12 +36,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: '032f8629ef5ea1c45f40a135a54c32337f7181e9', class: {
+        return (h(TagType, { key: '7275284a1158ab982f1e53117b72738d0a001c97', 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: '37f821426fe05dba66445745da3d23c9ff75345e', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, h(HeadingTag, { key: 'a3c68baa56a0337348405c88544225ed7c7ff0ed', class: this.getHeadingClass() }, this.sectionTitle)));
     }
     static get is() { return "eds-section-heading"; }
     static get properties() {

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

@@ -145,10 +145,10 @@ export class EdsSidebar {
             } }, hasChildren && (h("span", { class: "sidebar-toggle -ml-4", "aria-hidden": "true" }, h("eds-icon-wrapper", { name: isOpen ? 'chevron-down' : 'chevron-right' }))), h("span", { class: "sidebar-link-wrapper" }, h("eds-link", { label: item.title, url: item.url || '#', intent: isActive ? 'strong' : 'weak', size: "small", "aria-label": item.title, "extra-class": "sidebar-link", tabindex: "-1" }))), hasChildren && isOpen && (h("ul", { id: childrenId, class: "sidebar-children" }, item.children.map((child) => this.renderItem(child, level + 1))))));
     }
     render() {
-        return (h(Host, { key: 'a56e293e9b53b0dbffd6268c117f77828ba5f41a', class: {
+        return (h(Host, { key: 'f5221c19e8148ca62a76fb470a4aa6786c3e41b5', class: {
                 'eds-sidebar': true,
                 [`theme-${this.theme}`]: true
-            } }, h("nav", { key: '07ca17add683f976b30e736389eddc473e1e5669', class: "sidebar-nav", "aria-label": "Sidebar" }, h("ul", { key: 'a102418d399f14715eddf34e1c3373cf1be9d4aa', class: "sidebar-list" }, this.parsedItems.map((item) => this.renderItem(item, 0))))));
+            } }, h("nav", { key: '0a975a10a3892f6eabaf2a1c2be21963f0e76549', class: "sidebar-nav", "aria-label": "Sidebar" }, h("ul", { key: '498436fa1f4ec7ff2f3feea843fe58b415d20a3f', class: "sidebar-list" }, this.parsedItems.map((item) => this.renderItem(item, 0))))));
     }
     static get is() { return "eds-sidebar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-social-networks/eds-social-networks.js

@@ -55,7 +55,7 @@ export class EdsSocialNetworks {
         const isInverse = this.variant === 'inverse';
         const textClass = isInverse ? 'text-inverse' : '';
         const linkIntent = isInverse ? 'inverse' : 'strong';
-        return (h("nav", { key: '11b876483142bb98c686a4cb722d28022ca9f40c', "aria-label": "Social media" }, h("p", { key: 'daf2865247ed69ab3e4233d191d8abb8d5be584f', class: `f-ui-02 ${textClass}` }, this.heading), h("ul", { key: '47918284e8a158d523d3329eb28f4881ac27233e', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { external: true, "aria-label": `EBRAINS on ${network.label}`, url: network.url, icon: network.icon, intent: linkIntent })))))));
+        return (h("nav", { key: '924bdf5a32b65cd0968ad92461cb8203f3305fce', "aria-label": "Social media" }, h("p", { key: 'f406d71ed2d7ff9048e5db05f5ad62566081aa45', class: `f-ui-02 ${textClass}` }, this.heading), h("ul", { key: '40d000bc78780d7ec3c0c9bf2e10ec0a26f3b72e', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { external: true, "aria-label": `EBRAINS on ${network.label}`, url: network.url, icon: network.icon, intent: linkIntent })))))));
     }
     static get is() { return "eds-social-networks"; }
     static get encapsulation() { return "shadow"; }

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

@@ -71,7 +71,7 @@ export class EdsSpinner {
                 alignItems: 'center',
                 justifyContent: 'center'
             };
-        return (h(Host, { key: '16d20431aaa90a29b6e3d32cbd3403ece1f45345' }, h("div", { key: '0e29dafa5eb3a84f31305614ae083356604a81bf', class: "spinner-overlay", style: overlayStyle }, h("span", { key: 'cf63a83095e35a1ca4328fd14293e6895d8d9811', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: '7bb83c40db5dc985c429ca6ac171145db80c011d', class: "f-ui-01" }, this.message))));
+        return (h(Host, { key: 'c09fa07856848a03aab44bbb56ecdd66a986bb40' }, h("div", { key: '544c653e9e0457d2063eaefc5ff1fe88de89f14e', class: "spinner-overlay", style: overlayStyle }, h("span", { key: 'e389aa572863a265c9aa68d587ad744f1c8db0a7', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: '5e554fe1b870e673c5b3da3ec2a227e92dd9863d', class: "f-ui-01" }, this.message))));
     }
     static get is() { return "eds-spinner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -204,7 +204,7 @@ export class EdsStepsV2 {
         const steps = this.parsedSteps;
         const marginClass = this.orientation === 'horizontal' ? 'mt-64' : 'mt-32';
         const themeClass = this.theme === 'brand' ? 'theme-brand' : 'theme-default';
-        return (h("div", { key: '0f95d17cc699c020419593bec5ed76c4515501c9', class: this.articleClasses() }, this.imageSrc ? (h("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, h("eds-img", { src: this.imageSrc, width: this.imageWidth, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (h("div", { class: `w-full ${this.theme === 'brand' ? 'bg-strongest' : 'bg-darker'} rounded-t-lg border-2` }, h("div", { class: "p-24" }, h("span", { class: `${this.theme === 'brand' ? 'text-accent' : 'text-inverse'} f-heading-04` }, this.message))))), h("div", { key: 'ed26ac9fc5cc4d7c409d29c3cd623e37a5abc944', class: "mt-16 pb-20 px-8" }, this.type === 'linear' && this.orientation === 'horizontal' ? (h("div", { class: `steps--horizontal ${themeClass}`, style: { '--step-count': steps.length.toString() } }, h("div", { class: "horizontal-indicators" }, steps.map((step, index) => this.renderHorizontalIndicator(step, index))), steps.map((step, index) => {
+        return (h("div", { key: 'e1d78d18506adb662bbcc100f6f886e33c21a996', class: this.articleClasses() }, this.imageSrc ? (h("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, h("eds-img", { src: this.imageSrc, width: this.imageWidth, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (h("div", { class: `w-full ${this.theme === 'brand' ? 'bg-strongest' : 'bg-darker'} rounded-t-lg border-2` }, h("div", { class: "p-24" }, h("span", { class: `${this.theme === 'brand' ? 'text-accent' : 'text-inverse'} f-heading-04` }, this.message))))), h("div", { key: '5b69e2c641d96025b34377fc647679f94d0e4e44', class: "mt-16 pb-20 px-8" }, this.type === 'linear' && this.orientation === 'horizontal' ? (h("div", { class: `steps--horizontal ${themeClass}`, style: { '--step-count': steps.length.toString() } }, h("div", { class: "horizontal-indicators" }, steps.map((step, index) => this.renderHorizontalIndicator(step, index))), steps.map((step, index) => {
             const isLast = index === steps.length - 1;
             if (this.activeStep !== index) {
                 return null;

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

@@ -12,12 +12,15 @@ 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-light);
 }
@@ -25,6 +28,7 @@ tr.table-row-color:nth-child(even) {
 tr.table-row-color:nth-child(odd) {
   background-color: transparent;
 }
+*/
 
 /* ============================================
    BRAND THEME STYLES
@@ -81,11 +85,14 @@ tr.table-row-color:nth-child(odd) {
 .brand-row {
   border-bottom: 1px solid var(--grey-light) !important;
   transition: all 0.3s ease;
-  cursor: pointer;
   position: relative;
   background: transparent !important;
 }
 
+.brand-row.has-actions {
+  cursor: pointer;
+}
+
 .brand-row:hover {
   background: rgba(0, 255, 157, 0.05) !important;
 }
@@ -332,10 +339,20 @@ tr.table-row-color:nth-child(odd) {
   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;
-  justify-content: flex-end;
   padding-top: 0.75rem;
   border-top: 1px solid var(--grey-light);
 }

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

@@ -113,11 +113,10 @@ export class EdsTable {
         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 = [];
@@ -149,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();
@@ -284,19 +285,6 @@ export class EdsTable {
             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();
     }
@@ -331,24 +319,23 @@ export class EdsTable {
         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, currentContainerWidth, visibleColumnsCount) {
-        const columnWidth = visibleColumnsCount > 0 ? Math.floor((currentContainerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
+    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: this.theme === 'brand' ? {} : { minWidth: `${columnWidth - 4}px` } }));
+                return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words" }));
             }
-            return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: this.theme === 'brand' ? {} : { 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", { name: this.sortColumn === col
+            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.columns
+        }))), 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-01 break-words actions-cell", style: this.theme === 'brand' ? {} : { 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',
@@ -356,18 +343,16 @@ export class EdsTable {
                     } }, this.parsedActions.map((act) => (h("span", { style: { whiteSpace: 'nowrap' } }, this.renderSingleActionCell(act.name, row)))))));
             }
             // Regular data cell
-            return (h("td", { class: "text-center border border-softer m-0 py-8 f-ui-02 break-words", style: this.theme === 'brand' ? {} : { minWidth: `${columnWidth - 4}px` } }, this.renderCell(row[col], col)));
+            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 currentContainerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.containerWidth || 400;
-        const visibleColumnsCount = this.getVisibleColumnsCount();
         const paginatedRows = this.getPaginatedRows();
         const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
         const showControls = this.showViewToggle || this.searchEnabled;
-        return (h("div", { key: 'ca547566767c7bccd7b894dad5819ed74e9e281d' }, showControls && (h("div", { key: '47c6fa14c2dbe499617dc31df1fd578bde473c6f', class: "controls-container flex-col flex-md-row items-start items-md-center justify-between gap-16 mb-16" }, this.showViewToggle && (h("div", { key: '7f63fd07e67eaca9abc9d0700d7824e0f474dc23', class: "view-toggle-wrapper" }, h("eds-switch", { key: 'f52b744b0e83295c1641f338212bae5843970ab9', variant: "segmented", labelOff: "Table View", labelOn: "Card View", checked: this.view === 'card', onUiswitch: this.handleViewChange }))), this.searchEnabled && (h("div", { key: '5ebb3620be6161a1d7e1881cb5d33f5aac2e12a4', 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'
+        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, currentContainerWidth, visibleColumnsCount), this.shouldEnablePagination() && (h("div", { key: 'bed5232d5ff9d7cac22ac2537876a388f35c85a6', class: "mt-20" }, h("eds-pagination", { key: 'ec91525689028f6cfe2721e290f5c5c7097ab67a', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+            : 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"; }
@@ -406,7 +391,7 @@ export class EdsTable {
                 "mutable": false,
                 "complexType": {
                     "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\" | \"bold\" | \"html\" | \"svg\" | \"uppercase\"; }; }",
+                    "resolved": "string | { [key: string]: { hidden?: boolean; format?: \"code\" | \"html\" | \"svg\" | \"bold\" | \"uppercase\"; }; }",
                     "references": {}
                 },
                 "required": false,
@@ -490,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,
@@ -573,21 +540,21 @@ export class EdsTable {
             },
             "theme": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
-                    "original": "'default' | 'color' | 'brand'",
-                    "resolved": "\"brand\" | \"color\" | \"default\"",
+                    "original": "'brand'",
+                    "resolved": "\"brand\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Theme for table styling:\n- 'default': Simple rows with no background\n- 'color': Alternating row colors\n- 'brand': Modern brand styling with hover effects and green accents"
+                    "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",

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

@@ -26,16 +26,6 @@ export default {
             control: { type: 'boolean' },
             description: 'Enable column sorting'
         },
-        columnSize: {
-            control: 'select',
-            options: ['default', 'medium', 'large'],
-            description: 'Column sizing mode'
-        },
-        theme: {
-            control: 'select',
-            options: ['default', 'color', 'brand'],
-            description: 'Table theme: default (no bg), color (alternating rows), brand (modern with hover/accents)'
-        },
         view: {
             control: 'select',
             options: ['table', 'card'],
@@ -65,8 +55,6 @@ export default {
         paginationEnabled: true,
         searchEnabled: true,
         sortingEnabled: false,
-        columnSize: 'default',
-        theme: 'color',
         view: 'table',
         showViewToggle: false,
         actions: [
@@ -87,6 +75,8 @@ const sampleData = [
     { name: 'Ian', age: 27, occupation: 'Developer' },
     { name: 'Jackie', age: 33, occupation: 'Consultant' }
 ];
+// Single story — the EBRAINS brand theme (the only supported theme), with
+// pagination, search, sorting, row actions and the table/card view toggle.
 export const Default = {
     render: (args) => `
     <eds-table
@@ -96,38 +86,9 @@ export const Default = {
       pagination-enabled="${args.paginationEnabled}"
       search-enabled="${args.searchEnabled}"
       sorting-enabled="${args.sortingEnabled}"
-      column-size="${args.columnSize}"
-      theme="${args.theme}"
+      theme="brand"
       view="${args.view}"
       show-view-toggle="${args.showViewToggle}"
-    ></eds-table>
-  `,
-    args: {
-        data: sampleData,
-        config: {
-            name: { format: 'bold' },
-            occupation: { format: 'uppercase' }
-        },
-        rowsPerPage: 5,
-        paginationEnabled: true,
-        searchEnabled: true,
-        sortingEnabled: false,
-        columnSize: 'default',
-        theme: 'color',
-        view: 'table',
-        showViewToggle: false
-    }
-};
-export const BrandTheme = {
-    render: (args) => `
-    <eds-table
-      table-data='${JSON.stringify(args.data)}'
-      config='${JSON.stringify(args.config)}'
-      rows-per-page="${args.rowsPerPage}"
-      pagination-enabled="${args.paginationEnabled}"
-      search-enabled="${args.searchEnabled}"
-      sorting-enabled="${args.sortingEnabled}"
-      theme="brand"
       actions='${JSON.stringify(args.actions)}'
     ></eds-table>
   `,
@@ -141,75 +102,10 @@ export const BrandTheme = {
         paginationEnabled: true,
         searchEnabled: true,
         sortingEnabled: true,
-        actions: [
-            { name: 'view', label: 'View', icon: 'view', intent: 'brand' }
-        ]
-    }
-};
-export const DefaultTheme = {
-    render: (args) => `
-    <eds-table
-      table-data='${JSON.stringify(args.data)}'
-      config='${JSON.stringify(args.config)}'
-      rows-per-page="${args.rowsPerPage}"
-      theme="default"
-    ></eds-table>
-  `,
-    args: {
-        data: sampleData,
-        config: {
-            name: { format: 'bold' }
-        },
-        rowsPerPage: 10
-    }
-};
-export const CardView = {
-    render: (args) => `
-    <eds-table
-      table-data='${JSON.stringify(args.data)}'
-      config='${JSON.stringify(args.config)}'
-      rows-per-page="${args.rowsPerPage}"
-      view="card"
-      show-view-toggle="true"
-      theme="${args.theme}"
-      actions='${JSON.stringify(args.actions)}'
-    ></eds-table>
-  `,
-    args: {
-        data: sampleData,
-        config: {
-            name: { format: 'bold' }
-        },
-        rowsPerPage: 6,
-        theme: 'brand',
+        view: 'table',
+        showViewToggle: true,
         actions: [
             { name: 'view', label: 'View', showLabel: true, intent: 'brand' }
         ]
     }
 };
-export const WithViewToggle = {
-    render: (args) => `
-    <eds-table
-      table-data='${JSON.stringify(args.data)}'
-      config='${JSON.stringify(args.config)}'
-      rows-per-page="${args.rowsPerPage}"
-      search-enabled="true"
-      show-view-toggle="true"
-      sorting-enabled="true"
-      theme="brand"
-      actions='${JSON.stringify(args.actions)}'
-    ></eds-table>
-  `,
-    args: {
-        data: sampleData,
-        config: {
-            name: { format: 'bold' },
-            occupation: { format: 'uppercase' }
-        },
-        rowsPerPage: 5,
-        actions: [
-            { name: 'view', label: 'View', icon: 'view', intent: 'brand' },
-            { name: 'delete', label: 'Delete', type: 'checkbox' }
-        ]
-    }
-};

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

@@ -36,7 +36,13 @@
   border-radius: 8px;
   font-size: 1.125rem;
   cursor: pointer;
-  transition: all 0.2s ease;
+  /* Transition ONLY color (hover effect). Background must not
+     animate — the active-state move is a decisive UI change that
+     has to land in the same frame as the focus outline; an
+     animated background can read as "ahead of" the outline during
+     rapid keyboard navigation. Outline is left unanimated for the
+     same reason. */
+  transition: color 0.15s ease;
   border: none;
   background: transparent;
   font-family: 'IBM Plex Sans', sans-serif;

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

@@ -35,14 +35,28 @@ export class EdsTabs {
     }
     /**
      * Parses the `tabs` prop into an array of tab objects.
+     *
+     * Note: we deliberately do NOT clear `tabRefs` here. Consumers
+     * often re-pass `tabs` with an updated `active` flag every time
+     * the user switches tabs (Vue/React re-render on event). Wiping
+     * the refs leaves a window in which a queued focus() call sees
+     * `tabRefs[index] === undefined` and silently no-ops — focus
+     * gets stuck on the previous tab even though `aria-selected` and
+     * the background already moved. Stencil re-binds refs on render,
+     * so the array stays in sync without us emptying it; we only
+     * truncate when the new list is shorter to drop stale entries.
      */
     parseTabs() {
         this.parsedTabs = parseData(this.tabs);
-        this.tabRefs = [];
+        if (this.tabRefs.length > this.parsedTabs.length) {
+            this.tabRefs.length = this.parsedTabs.length;
+        }
     }
     componentDidUpdate() {
-        if (this.tabRefs.length !== this.parsedTabs.length) {
-            this.tabRefs = new Array(this.parsedTabs.length).fill(null);
+        // Same reasoning as parseTabs: only shrink, never re-allocate
+        // to nulls — that would re-introduce the silent-no-op window.
+        if (this.tabRefs.length > this.parsedTabs.length) {
+            this.tabRefs.length = this.parsedTabs.length;
         }
     }
     setActiveIndex() {
@@ -53,6 +67,7 @@ export class EdsTabs {
         }
     }
     handleTabClick(index, tabLabel, shouldFocus = true) {
+        var _a;
         if (index < 0 || index >= this.parsedTabs.length) {
             return;
         }
@@ -67,11 +82,34 @@ export class EdsTabs {
                 action: 'click'
             });
         }
-        if (shouldFocus && this.tabRefs[index]) {
-            setTimeout(() => {
+        if (shouldFocus) {
+            // Focus must move SYNCHRONOUSLY, while the keydown event
+            // that triggered this call is still on the stack. Otherwise
+            // the browser's `:focus-visible` heuristic doesn't flag the
+            // focus move as keyboard-driven and the outline never paints
+            // — accessibility regression (WCAG 2.4.7).
+            //
+            // We query by static id (`#tab-${index}`) instead of using
+            // `tabRefs[index]` because consumer-driven prop changes can
+            // briefly drop the cached ref. The button id is set in
+            // `render()` and doesn't depend on active state, so it is
+            // always findable.
+            const findBtn = () => { var _a; return ((_a = this.el.shadowRoot) !== null && _a !== void 0 ? _a : this.el).querySelector(`#tab-${index}`); };
+            (_a = findBtn()) === null || _a === void 0 ? void 0 : _a.focus();
+            // Belt-and-suspenders: if a consumer reacts to the `tab`
+            // event by re-rendering our buttons (rare, but possible
+            // when the `tabs` prop is recomputed), the sync focus above
+            // landed on a button that is now detached. Re-focus once
+            // the next frame's DOM is in place. We only act if focus
+            // genuinely isn't on the right element, to avoid a redundant
+            // focus call that would reset selection/IME state.
+            requestAnimationFrame(() => {
                 var _a;
-                (_a = this.tabRefs[index]) === null || _a === void 0 ? void 0 : _a.focus();
-            }, 0);
+                const after = findBtn();
+                if (after && ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) !== after) {
+                    after.focus();
+                }
+            });
         }
     }
     onKeyDown(ev, idx) {
@@ -105,7 +143,7 @@ export class EdsTabs {
             'tabs-container',
             `tabs-container-${this.variant}`
         ].join(' ');
-        return (h("div", { key: '66e0871d6cd917c15598b6e3ea80e5ff82970029', id: `${this.identifier}` }, h("div", { key: 'c65163e33fcf4960bbcc367a2abf62c0aec99446', class: containerClasses }, h("nav", { key: 'fae5e0f23904318299d60e1d3212f84b8c5a0bed', role: "tablist", class: "tabs-nav", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+        return (h("div", { key: '646f43031cde2e0ab84d2830fd9477841b3c757b', id: `${this.identifier}` }, h("div", { key: '2eb01c96640c6fc602777f227525066e5970489e', class: containerClasses }, h("nav", { key: 'b419fc7414574ea70b19433a3c5daa63b5ad6652', role: "tablist", class: "tabs-nav", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
             const isActive = index === this.activeIndex;
             const tabClasses = [
                 'tab',
@@ -113,7 +151,7 @@ export class EdsTabs {
                 isActive ? 'tab-active' : ''
             ].filter(Boolean).join(' ');
             return (h("button", { class: tabClasses, type: "button", role: "tab", "aria-selected": isActive ? 'true' : 'false', tabIndex: isActive ? 0 : -1, "aria-label": tab.ariaLabel || tab.label, "aria-controls": `panel-${index}`, id: `tab-${index}`, ref: (el) => this.setTabRef(el, index), onClick: () => this.handleTabClick(index, tab.label, true), onKeyDown: (e) => this.onKeyDown(e, index) }, tab.label || tab.ariaLabel));
-        }))), h("div", { key: 'a259d3e45fbcc5f75303cf8eb256374c67c62db1', class: "tab-panels" }, this.parsedTabs.map((_, index) => (h("div", { role: "tabpanel", id: `panel-${index}`, "aria-labelledby": `tab-${index}`, hidden: index !== this.activeIndex, tabIndex: index === this.activeIndex ? 0 : -1 }, h("slot", { name: `panel-${index}` })))))));
+        }))), h("div", { key: '0ce244b3d2b2120d1bdf127144e9b42e2ad34e52', class: "tab-panels" }, this.parsedTabs.map((_, index) => (h("div", { role: "tabpanel", id: `panel-${index}`, "aria-labelledby": `tab-${index}`, hidden: index !== this.activeIndex, tabIndex: index === this.activeIndex ? 0 : -1 }, h("slot", { name: `panel-${index}` })))))));
     }
     static get is() { return "eds-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -35,7 +35,7 @@ export class EdsTag {
     }
     render() {
         const classes = tagStyles({ intent: this.intent, size: this.size });
-        return (h("span", { key: 'ca20e54df5fc895110b39ce7875c3c0026e94fc3', class: classes }, h("span", { key: '5ad7ada1ae051ff2840bb033ec683b44477f6684', style: { position: 'relative', zIndex: '1' } }, this.label)));
+        return (h("span", { key: '20e1625ac01b0dc1f40356d02622e0649faa7fa7', class: classes }, h("span", { key: '313c3f18c0a5df285afe6a40ded9e68035d9648f', style: { position: 'relative', zIndex: '1' } }, this.label)));
     }
     static get is() { return "eds-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -41,7 +41,7 @@ export class EdsTimeline {
         }
     }
     render() {
-        return (h("div", { key: '9670bbe26e6f092d88c73268838d9349dca0c323', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: '202722dc0cb384ce68b2239915f44bf90d87a77e', class: "relative" }, h("div", { key: '59760e5a62518dc6c3cc7fcfa711e060837f4c49', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: '2f1f6c5f5e7f2a770fc762b1b886dd199f0cf953', 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", { title: event.title, url: "#", description: event.description, intent: "secondary", tags: JSON.stringify(event.completed
+        return (h("div", { key: '78b199b18d361ae3223e4f1fe9a2043d61f4271b', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: 'afdfdf7dc573a7f273703a02e38e755a9815bdf7', class: "relative" }, h("div", { key: '7affc96f356ee901ca263c7347ae60b84869f28b', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: '7ba006234bd1365890e75b7f59aa118265ba727c', 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", { title: event.title, url: "#", description: event.description, intent: "secondary", 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", { title: event.title, url: "#", description: event.description, intent: "secondary", tags: JSON.stringify(event.completed
                 ? [{ label: 'completed', style: 'accent' }]