@ebrains/components 3.0.0 → 3.2.0

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

@@ -5,12 +5,7 @@ export default {
     argTypes: {
         steps: {
             control: 'object',
-            description: 'Array of step objects',
-            defaultValue: [
-                { title: 'Step One', content: '<p>Details for step one.</p>' },
-                { title: 'Step Two', content: '<p>Details for step two.</p>' },
-                { title: 'Step Three', content: '<p>Details for step three.</p>' }
-            ]
+            description: 'Array of step objects'
         },
         orientation: {
             control: { type: 'select' },
@@ -20,17 +15,28 @@ export default {
         type: {
             control: 'select',
             options: ['static', 'linear'],
-            description: 'Stepper type: static (all steps) or linear (one at a time)',
-            defaultValue: 'static'
+            description: 'Stepper type: static (all steps) or linear (one at a time)'
+        },
+        theme: {
+            control: 'select',
+            options: ['default', 'brand'],
+            description: 'Visual theme. "brand" is the dark/green look multi-step brand forms use.'
+        },
+        card: {
+            control: 'boolean',
+            description: 'Draw the stepper\'s own card chrome (border/background). Set false when an outer wrapper already carries it — e.g. the brand multi-step form card.'
+        },
+        disableNext: {
+            control: 'boolean',
+            description: 'Disable the Next button (boolean for all steps, or an array/JSON string per step) — used to gate advancing until the current step validates.'
         },
         imageSrc: {
             control: 'text',
             description: 'URL of the image to display above the steps'
         },
-        bg: {
-            control: 'boolean',
-            description: 'Whether to apply inverse background to container',
-            defaultValue: true
+        imageWidth: {
+            control: 'number',
+            description: 'Rendered width (px) of the image above the steps'
         },
         message: {
             control: 'text',
@@ -40,8 +46,7 @@ export default {
             name: 'heading-level',
             control: { type: 'select' },
             options: ['h3', 'h4', 'h5'],
-            description: 'Semantic heading tag to render for each step title',
-            defaultValue: 'h4'
+            description: 'Semantic heading tag to render for each step title'
         },
         nextLabel: {
             control: 'text',
@@ -68,8 +73,11 @@ export default {
         ],
         orientation: 'vertical',
         type: 'static',
+        theme: 'default',
+        card: true,
+        disableNext: false,
         imageSrc: '',
-        bg: true,
+        imageWidth: undefined,
         message: 'No image available',
         headingLevel: 'h4',
         nextLabel: 'Next',
@@ -78,15 +86,17 @@ export default {
         showFinish: true
     }
 };
-const Template = ({ steps, type, orientation, imageSrc, imageWidth, bg, message, headingLevel, nextLabel, backLabel, finishLabel, showFinish }) => html `
+const Template = ({ steps, type, orientation, theme, card, disableNext, imageSrc, imageWidth, message, headingLevel, nextLabel, backLabel, finishLabel, showFinish }) => html `
   <div class="grid grid-layout grid-cols-2">
     <eds-steps-v2
       .steps=${steps}
       type="${type}"
       orientation="${orientation}"
+      theme="${theme || 'default'}"
+      .card=${card}
+      .disableNext=${disableNext}
       .imageSrc=${imageSrc}
       .imageWidth=${imageWidth}
-      ?bg=${bg}
       message="${message || ''}"
       heading-level="${headingLevel}"
       next-label="${nextLabel}"
@@ -131,3 +141,56 @@ LinearHorizontal.parameters = {
         }
     }
 };
+/* How brand multi-step forms actually mount the stepper (FormsPage): linear +
+   horizontal, theme="brand", and card=false because the OUTER brand card
+   carries the chrome — recreated here with a dark rounded wrapper. */
+export const BrandTheme = ({ steps, disableNext }) => html `
+  <div class="grid grid-layout grid-cols-2">
+    <div class="bg-inverse rounded-xs overflow-hidden" style="--eds-steps-padding-x: 2rem;">
+      <div class="bg-strongest p-32">
+        <p class="f-heading-05 text-inverse m-0">Attendee Confirmation Survey</p>
+      </div>
+      <eds-steps-v2
+        .steps=${steps}
+        type="linear"
+        orientation="horizontal"
+        theme="brand"
+        .card=${false}
+        .disableNext=${disableNext}
+        next-label="Next"
+        back-label="Back"
+        finish-label="Submit"
+        ?show-finish=${true}
+      ></eds-steps-v2>
+    </div>
+  </div>
+`;
+BrandTheme.storyName = 'Brand Theme (multi-step form)';
+BrandTheme.args = {
+    steps: [
+        { title: 'Step 1', content: '<p>About you — name, email, institution.</p>' },
+        { title: 'Step 2', content: '<p>Logistics — attendance, dietary needs, sessions.</p>' }
+    ],
+    disableNext: false
+};
+BrandTheme.parameters = {
+    docs: {
+        description: {
+            story: 'theme="brand" + card=false, exactly as multi-step brand forms mount it: the outer card provides the chrome (dark hero above), the stepper renders flush. Toggle disableNext to see the gated Next button.'
+        }
+    }
+};
+export const DisabledNext = Template.bind({});
+DisabledNext.storyName = 'Linear — Next disabled';
+DisabledNext.args = {
+    type: 'linear',
+    orientation: 'horizontal',
+    disableNext: true
+};
+DisabledNext.parameters = {
+    docs: {
+        description: {
+            story: 'disableNext gates advancing (forms set it while the current step has validation errors). Accepts a boolean for all steps or an array/JSON string per step.'
+        }
+    }
+};

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

@@ -95,12 +95,15 @@ button.switch.switch--checked .switch-handle {
   background: transparent;
   border: none;
   border-radius: 1.5rem;
-  font-family: var(--f-ui-02-fontFamily);
-  font-size: 0.9rem;
+  /* Mockup type: Plex Sans 14px medium. Note we bundle 400/600 only, so 500
+     resolves to 400 in-app — kept at 500 so environments that do load the
+     medium cut match the mockup exactly. */
+  font-family: var(--plex-sans, 'IBM Plex Sans', system-ui, sans-serif);
+  font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.3s;
-  color: var(--grey-dark);
+  color: var(--body-l, #5a5f5c);
   white-space: nowrap;
 }
 
@@ -113,6 +116,26 @@ button.switch.switch--checked .switch-handle {
   color: var(--brand-black);
 }
 
+/* Dark segmented — the mockup's quiet control bar: white pill container with a
+   hairline border; the active segment inverts to brand-black. */
+.segmented-container--dark {
+  background: #fff;
+  border: 1px solid var(--grey-300, #e2e2e2);
+  padding: 4px;
+  gap: 3px;
+}
+
+.segmented-container--dark .segmented-btn {
+  padding: 9px 30px;
+  border-radius: 999px;
+  transition: 0.14s;
+}
+
+.segmented-container--dark .segmented-btn--active {
+  background: var(--brand-black, #07140d);
+  color: #fff;
+}
+
 .segmented-btn--disabled {
   opacity: 0.6;
   cursor: not-allowed;

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

@@ -31,7 +31,7 @@ export class EdsSwitch {
         this.variant = 'toggle';
     }
     render() {
-        if (this.variant === 'segmented') {
+        if (this.variant === 'segmented' || this.variant === 'segmented-dark') {
             return this.renderSegmented();
         }
         return this.renderToggle();
@@ -59,7 +59,10 @@ export class EdsSwitch {
             }, onClick: this.toggleSwitch, onKeyDown: this.handleKeyDown, disabled: this.disabled }, h("span", { class: "switch-handle" })), this.labelOn && (h("span", { id: `${switchId}-on`, class: "switch-label switch-label--on ml-8" }, this.labelOn))));
     }
     renderSegmented() {
-        return (h("div", { class: "segmented-container", role: "group", "aria-label": "View toggle" }, h("button", { type: "button", tabindex: this.disabled ? '-1' : '0', class: {
+        return (h("div", { class: {
+                'segmented-container': true,
+                'segmented-container--dark': this.variant === 'segmented-dark'
+            }, role: "group", "aria-label": "View toggle" }, h("button", { type: "button", tabindex: this.disabled ? '-1' : '0', class: {
                 'segmented-btn': true,
                 'segmented-btn--active': !this.checked,
                 'segmented-btn--disabled': this.disabled
@@ -67,7 +70,7 @@ export class EdsSwitch {
                 if (!this.disabled && this.checked) {
                     this.toggleSwitch();
                 }
-            }, onKeyDown: this.handleKeyDown, disabled: this.disabled, "aria-pressed": !this.checked ? 'true' : 'false' }, h("span", { class: "f-ui-03" }, this.labelOff)), h("button", { type: "button", tabindex: this.disabled ? '-1' : '0', class: {
+            }, onKeyDown: this.handleKeyDown, disabled: this.disabled, "aria-pressed": !this.checked ? 'true' : 'false' }, h("span", null, this.labelOff)), h("button", { type: "button", tabindex: this.disabled ? '-1' : '0', class: {
                 'segmented-btn': true,
                 'segmented-btn--active': this.checked,
                 'segmented-btn--disabled': this.disabled
@@ -75,7 +78,7 @@ export class EdsSwitch {
                 if (!this.disabled && !this.checked) {
                     this.toggleSwitch();
                 }
-            }, onKeyDown: this.handleKeyDown, disabled: this.disabled, "aria-pressed": this.checked ? 'true' : 'false' }, h("span", { class: "f-ui-03" }, this.labelOn))));
+            }, onKeyDown: this.handleKeyDown, disabled: this.disabled, "aria-pressed": this.checked ? 'true' : 'false' }, h("span", null, this.labelOn))));
     }
     static get is() { return "eds-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -167,15 +170,15 @@ export class EdsSwitch {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'toggle' | 'segmented'",
-                    "resolved": "\"segmented\" | \"toggle\"",
+                    "original": "'toggle' | 'segmented' | 'segmented-dark'",
+                    "resolved": "\"segmented\" | \"segmented-dark\" | \"toggle\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Variant of the switch: 'toggle' (default) or 'segmented' (pill-style buttons)"
+                    "text": "Variant of the switch:\n- 'toggle' (default): the classic on/off switch\n- 'segmented': pill-style buttons \u2014 light container, green active pill\n- 'segmented-dark': pill-style buttons \u2014 white container with a hairline\n  border and a dark (brand-black) active pill"
                 },
                 "attribute": "variant",
                 "reflect": false,

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

@@ -6,7 +6,11 @@ export default {
         disabled: { control: 'boolean', description: 'Disables the switch when true.' },
         labelOn: { control: 'text', description: 'Label displayed when the switch is ON.' },
         labelOff: { control: 'text', description: 'Label displayed when the switch is OFF.' },
-        variant: { control: 'select', options: ['toggle', 'segmented'], description: 'Switch variant: toggle or segmented.' }
+        variant: {
+            control: 'select',
+            options: ['toggle', 'segmented', 'segmented-dark'],
+            description: 'Switch variant: toggle, segmented (green active pill), or segmented-dark (white container, dark active pill).'
+        }
     },
     args: {
         checked: false,
@@ -90,6 +94,21 @@ export const SegmentedChecked = {
         labelOff: 'Light'
     }
 };
+export const SegmentedDark = {
+    render: (args) => `
+    <eds-switch
+      variant="segmented-dark"
+      ${args.checked ? 'checked' : ''}
+      ${args.disabled ? 'disabled' : ''}
+      label-on="${args.labelOn}"
+      label-off="${args.labelOff}">
+    </eds-switch>`,
+    args: {
+        labelOn: 'Results',
+        labelOff: 'Poll',
+        checked: true
+    }
+};
 export const SegmentedDisabled = {
     render: (args) => `
     <eds-switch

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,14 @@ 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'
-            ? 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" })))));
+        return (h("div", { key: '8a025e9e12285aa3444b2f83e0b68af55cbe32e6' }, showControls && (h("div", { key: 'f97864d8b61db7ec4fa623ecadc3c225464a6c84', class: "controls-container flex-col flex-md-row items-start items-md-center justify-between gap-16 mb-16" }, this.showViewToggle && (h("div", { key: 'ddf8b1c0fb59fe81efa22a4dc02b414d41ae7208', class: "view-toggle-wrapper" }, h("eds-switch", { key: 'c3631986b456a88559face6a2ce7ce8acd5d01c2', variant: "segmented", labelOff: "Table View", labelOn: "Card View", checked: this.view === 'card', onUiswitch: this.handleViewChange }))), this.searchEnabled && (h("div", { key: 'a02d7f163dd2bb34bb26ae60bd5b018ed07291d9', 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: 'ecf412674a951b4d19e87385270cb49e64e590f6', class: "mt-20" }, h("eds-pagination", { key: 'fe1365ecb4d249548ba0c936a48b6141ff14ad0e', 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 +389,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 +473,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 +538,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",