@ebrains/components 3.0.0 → 3.1.0

package/dist/components/eds-table2.js

@@ -1,23 +1,22 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as sendAnalytics } from './analytics.js';
 import { p as parseData } from './sharedUtils.js';
-import { d as defineCustomElement$f } from './eds-button2.js';
-import { d as defineCustomElement$e } from './eds-icon-wrapper2.js';
-import { d as defineCustomElement$d } from './eds-input2.js';
-import { d as defineCustomElement$c } from './eds-input-dropzone2.js';
-import { d as defineCustomElement$b } from './eds-input-field2.js';
-import { d as defineCustomElement$a } from './eds-input-file2.js';
-import { d as defineCustomElement$9 } from './eds-input-footer2.js';
-import { d as defineCustomElement$8 } from './eds-input-label2.js';
-import { d as defineCustomElement$7 } from './eds-input-range2.js';
-import { d as defineCustomElement$6 } from './eds-input-search2.js';
+import { d as defineCustomElement$e } from './eds-button2.js';
+import { d as defineCustomElement$d } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$c } from './eds-input2.js';
+import { d as defineCustomElement$b } from './eds-input-dropzone2.js';
+import { d as defineCustomElement$a } from './eds-input-field2.js';
+import { d as defineCustomElement$9 } from './eds-input-file2.js';
+import { d as defineCustomElement$8 } from './eds-input-footer2.js';
+import { d as defineCustomElement$7 } from './eds-input-label2.js';
+import { d as defineCustomElement$6 } from './eds-input-range2.js';
 import { d as defineCustomElement$5 } from './eds-input-select2.js';
 import { d as defineCustomElement$4 } from './eds-link2.js';
 import { d as defineCustomElement$3 } from './eds-pagination2.js';
 import { d as defineCustomElement$2 } from './eds-switch2.js';
 import { d as defineCustomElement$1 } from './eds-tooltip2.js';
 
-const edsTableCss = "table{text-indent:0;border-color:inherit;border-collapse:collapse;}tr.table-row-default{background-color:transparent}tr.table-row-color:nth-child(even){background-color:var(--grey-light)}tr.table-row-color:nth-child(odd){background-color:transparent}.brand-table-wrapper{margin-top:2rem;width:100%}.brand-table{width:100% !important;border-collapse:separate !important;border-spacing:0 !important;display:table !important;table-layout:fixed !important}.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-row{border-bottom:1px solid var(--grey-light) !important;transition:all 0.3s ease;cursor:pointer;position:relative;background:transparent !important}.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 .actions-cell{text-align:right !important}.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)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.pt-32{padding-top:2rem}.pt-40{padding-top:2.5rem}.pt-48{padding-top:3rem}.pb-28{padding-bottom:1.75rem}.pb-60{padding-bottom:3.75rem}.mt-20{margin-top:1.25rem}.mt-28{margin-top:1.75rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.overflow-x-auto{overflow-x:auto}.mt-6{margin-top:0.375rem}.p-0{padding:0rem}.p-4{padding:0.25rem}.m-0{margin:0rem}.border{border-width:1px}.border-softer{border:1px solid rgba(0, 0, 0, .1)}.even\\:bg-inverse-softer:nth-child(even){background-color:rgba(255, 255, 255, .15)}.px-8{padding-left:0.5rem;padding-right:0.5rem}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.break-words{overflow-wrap:anywhere}.controls-container{display:flex;width:100%}.view-toggle-wrapper{flex-shrink:0}.search-wrapper{min-width:0}.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}.card-actions{display:flex;gap:0.5rem;justify-content:flex-end;padding-top:0.75rem;border-top:1px solid var(--grey-light)}@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}}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.items-start{align-items:flex-start}.items-center{align-items:center}.gap-16{gap:1rem}.mb-16{margin-bottom:1rem}.w-full{width:100%}.w-auto{width:auto}@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}}";
+const edsTableCss = "table{text-indent:0;border-color:inherit;border-collapse:collapse;}.brand-table-wrapper{margin-top:2rem;width:100%}.brand-table{width:100% !important;border-collapse:separate !important;border-spacing:0 !important;display:table !important;table-layout:fixed !important}.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-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 .actions-cell{text-align:right !important}.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)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.pt-32{padding-top:2rem}.pt-40{padding-top:2.5rem}.pt-48{padding-top:3rem}.pb-28{padding-bottom:1.75rem}.pb-60{padding-bottom:3.75rem}.mt-20{margin-top:1.25rem}.mt-28{margin-top:1.75rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.overflow-x-auto{overflow-x:auto}.mt-6{margin-top:0.375rem}.p-0{padding:0rem}.p-4{padding:0.25rem}.m-0{margin:0rem}.border{border-width:1px}.border-softer{border:1px solid rgba(0, 0, 0, .1)}.even\\:bg-inverse-softer:nth-child(even){background-color:rgba(255, 255, 255, .15)}.px-8{padding-left:0.5rem;padding-right:0.5rem}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.break-words{overflow-wrap:anywhere}.controls-container{display:flex;width:100%}.view-toggle-wrapper{flex-shrink:0}.search-wrapper{min-width:0}.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}.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;flex-wrap:wrap;align-items:center;justify-content:center;gap:0.5rem;padding-top:0.75rem;border-top:1px solid var(--grey-light)}@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}}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.items-start{align-items:flex-start}.items-center{align-items:center}.gap-16{gap:1rem}.mb-16{margin-bottom:1rem}.w-full{width:100%}.w-auto{width:auto}@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}}";
 const EdsTableStyle0 = edsTableCss;
 
 const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLElement {
@@ -91,11 +90,10 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
         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 = [];
@@ -127,6 +125,8 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
         }
     }
     componentWillLoad() {
+        // 'default' / 'color' themes are disabled — always render the brand theme.
+        this.theme = 'brand';
         this.parseConfig();
         this.handleActionsChange();
         this.parseData();
@@ -262,19 +262,6 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
             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();
     }
@@ -309,24 +296,23 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
         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',
@@ -334,18 +320,16 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
                     } }, 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" })))));
     }
     get hostEl() { return this; }
     static get watchers() { return {
@@ -361,11 +345,10 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
         "paginationEnabled": [4, "pagination-enabled"],
         "searchEnabled": [4, "search-enabled"],
         "hostWidth": [1, "host-width"],
-        "columnSize": [1, "column-size"],
         "actions": [1],
         "actionTemplate": [16],
         "sortingEnabled": [4, "sorting-enabled"],
-        "theme": [1],
+        "theme": [1025],
         "view": [1025],
         "showViewToggle": [4, "show-view-toggle"],
         "parsedActions": [32],
@@ -388,7 +371,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["eds-table", "eds-button", "eds-icon-wrapper", "eds-input", "eds-input-dropzone", "eds-input-field", "eds-input-file", "eds-input-footer", "eds-input-label", "eds-input-range", "eds-input-search", "eds-input-select", "eds-link", "eds-pagination", "eds-switch", "eds-tooltip"];
+    const components = ["eds-table", "eds-button", "eds-icon-wrapper", "eds-input", "eds-input-dropzone", "eds-input-field", "eds-input-file", "eds-input-footer", "eds-input-label", "eds-input-range", "eds-input-select", "eds-link", "eds-pagination", "eds-switch", "eds-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "eds-table":
             if (!customElements.get(tagName)) {
@@ -396,51 +379,46 @@ function defineCustomElement() {
             }
             break;
         case "eds-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$f();
-            }
-            break;
-        case "eds-icon-wrapper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$e();
             }
             break;
-        case "eds-input":
+        case "eds-icon-wrapper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$d();
             }
             break;
-        case "eds-input-dropzone":
+        case "eds-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$c();
             }
             break;
-        case "eds-input-field":
+        case "eds-input-dropzone":
             if (!customElements.get(tagName)) {
                 defineCustomElement$b();
             }
             break;
-        case "eds-input-file":
+        case "eds-input-field":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }
             break;
-        case "eds-input-footer":
+        case "eds-input-file":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "eds-input-label":
+        case "eds-input-footer":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "eds-input-range":
+        case "eds-input-label":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "eds-input-search":
+        case "eds-input-range":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }

package/dist/components/eds-tabs.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { s as sendAnalytics } from './analytics.js';
 import { p as parseData } from './sharedUtils.js';
 
-const edsTabsCss = ":host{display:block}.tabs-container{display:flex;gap:0.25rem;padding:0.25rem;border-radius:10px;width:fit-content;margin-bottom:3rem}.tabs-container-default{background-color:var(--brand-black, #07140D);border:1px solid rgba(255, 255, 255, 0.06)}.tabs-container-inverse{background:rgba(0, 0, 0, 0.02);border:1px solid rgba(0, 0, 0, 0.06)}.tabs-nav{display:flex;gap:0.25rem}.tab{padding:0.625rem 1.25rem;border-radius:8px;font-size:1.125rem;cursor:pointer;transition:all 0.2s ease;border:none;background:transparent;font-family:'IBM Plex Sans', sans-serif;white-space:nowrap;outline:none}.tab:focus-visible{outline:3px solid var(--brand-green);outline-offset:2px}.tab-default{color:var(--grey-700)}.tab-default:hover{color:var(--white)}.tab-default.tab-active{background:rgba(0, 255, 157, 0.1);color:var(--brand-green)}.tab-inverse{color:var(--grey-700)}.tab-inverse:hover{color:var(--brand-black)}.tab-inverse.tab-active{background:rgba(0, 200, 123, 0.1);color:var(--brand-green-dark)}.tab-panels{margin-top:2rem}.tab-panels>div{outline:none}.tab-panels>div:focus-visible{outline:3px solid var(--brand-green);outline-offset:2px;border-radius:4px}@media (max-width: 768px){.tabs-container{width:100%;overflow-x:auto}.tabs-nav{width:100%;min-width:fit-content}}";
+const edsTabsCss = ":host{display:block}.tabs-container{display:flex;gap:0.25rem;padding:0.25rem;border-radius:10px;width:fit-content;margin-bottom:3rem}.tabs-container-default{background-color:var(--brand-black, #07140D);border:1px solid rgba(255, 255, 255, 0.06)}.tabs-container-inverse{background:rgba(0, 0, 0, 0.02);border:1px solid rgba(0, 0, 0, 0.06)}.tabs-nav{display:flex;gap:0.25rem}.tab{padding:0.625rem 1.25rem;border-radius:8px;font-size:1.125rem;cursor:pointer;transition:color 0.15s ease;border:none;background:transparent;font-family:'IBM Plex Sans', sans-serif;white-space:nowrap;outline:none}.tab:focus-visible{outline:3px solid var(--brand-green);outline-offset:2px}.tab-default{color:var(--grey-700)}.tab-default:hover{color:var(--white)}.tab-default.tab-active{background:rgba(0, 255, 157, 0.1);color:var(--brand-green)}.tab-inverse{color:var(--grey-700)}.tab-inverse:hover{color:var(--brand-black)}.tab-inverse.tab-active{background:rgba(0, 200, 123, 0.1);color:var(--brand-green-dark)}.tab-panels{margin-top:2rem}.tab-panels>div{outline:none}.tab-panels>div:focus-visible{outline:3px solid var(--brand-green);outline-offset:2px;border-radius:4px}@media (max-width: 768px){.tabs-container{width:100%;overflow-x:auto}.tabs-nav{width:100%;min-width:fit-content}}";
 const EdsTabsStyle0 = edsTabsCss;
 
 const EdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class EdsTabs extends HTMLElement {
@@ -31,14 +31,28 @@ const EdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class EdsTabs extends HTMLEle
     }
     /**
      * 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() {
@@ -49,6 +63,7 @@ const EdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class EdsTabs extends HTMLEle
         }
     }
     handleTabClick(index, tabLabel, shouldFocus = true) {
+        var _a;
         if (index < 0 || index >= this.parsedTabs.length) {
             return;
         }
@@ -63,11 +78,34 @@ const EdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class EdsTabs extends HTMLEle
                 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) {
@@ -101,7 +139,7 @@ const EdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class EdsTabs extends HTMLEle
             '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',
@@ -109,7 +147,7 @@ const EdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class EdsTabs extends HTMLEle
                 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}` })))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/eds-tag2.js

@@ -38,7 +38,7 @@ const EdsTag = /*@__PURE__*/ proxyCustomElement(class EdsTag extends HTMLElement
     }
     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 style() { return EdsTagStyle0; }
 }, [1, "eds-tag", {

package/dist/components/eds-timeline.js

@@ -50,7 +50,7 @@ const EdsTimeline$1 = /*@__PURE__*/ proxyCustomElement(class EdsTimeline extends
         }
     }
     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' }]

package/dist/components/eds-toast-manager.js

@@ -67,7 +67,7 @@ const EdsToastManager$1 = /*@__PURE__*/ proxyCustomElement(class EdsToastManager
         this.toasts = this.toasts.filter((t) => t.id !== id);
     }
     render() {
-        return (h("div", { key: 'd707822f33892171428aa926822dff5ffefac219', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
+        return (h("div", { key: '989e469e815c6af6b46a14fddee85e4707f86704', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
     }
     get hostElement() { return this; }
     static get style() { return EdsToastManagerStyle0; }

package/dist/components/eds-tooltip2.js

@@ -23,7 +23,7 @@ const EdsTooltip = /*@__PURE__*/ proxyCustomElement(class EdsTooltip extends HTM
     }
     render() {
         const positionClass = this.position === 'bottom' ? 'top-full mt-2' : 'bottom-full mb-2';
-        return (h("div", { key: '240956acf8218cb0b36254aecd629058ad39f4eb', class: "relative w-full inline-block group" }, h("slot", { key: '4424c8de31fd4e2aa702369314cf0819447ca364' }), h("div", { key: 'f260ef6ee9700231dc77ddc9debc7f5b92f546c6', class: `absolute ${positionClass}
+        return (h("div", { key: '8b4396894b1ec7cc1c2d928ffa5b3d7628f8c4ee', class: "relative w-full inline-block group" }, h("slot", { key: 'c2547098aacc584960f217edcafeb060ce742adc' }), h("div", { key: '1e6beac7e4294456f7a6130c4b0573cce3e4b548', class: `absolute ${positionClass}
             rounded-xs bg-strongest text-inverse 
             f-ui-03-light pointer-events-none 
             z-10 px-4 opacity-0 transition-opacity duration-150 ease-in-out

package/dist/components/eds-trl-badge.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsTrlBadge extends Components.EdsTrlBadge, HTMLElement {}
+export const EdsTrlBadge: {
+    prototype: EdsTrlBadge;
+    new (): EdsTrlBadge;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/eds-trl-badge.js

@@ -0,0 +1,204 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+/* eslint-disable */
+/**
+ * Official EBRAINS sphere mark, extracted from
+ * packages/assets/EBRAINS_logo_25/new_ebrains_logo_rgb/250901_new_ebrains_logo_rgb_positive.svg
+ * (the gradient-filled wave segments only — wordmark dropped).
+ *
+ * Gradient ids carry a `__UID__` placeholder so each badge instance can
+ * namespace them (no <defs> collisions when several badges share a page).
+ * Gradient template inheritance uses SVG2 `href` (no xlink namespace needed).
+ * Use markDefs() inside the badge <defs> and markGroup() in the body.
+ */
+const MARK_DEFS = `<linearGradient id="__UID__Unbenannter_Verlauf_29" x1="-26.7" y1="64.8" x2="155" y2="-19.9" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#03a98f"/> <stop offset=".1" stop-color="#10a97b"/> <stop offset=".3" stop-color="#23aa5f"/> <stop offset="1" stop-color="#00ff9d"/> </linearGradient><linearGradient id="__UID__Unbenannter_Verlauf_291" x1="38.6" y1="205" x2="220.3" y2="120.2" href="#__UID__Unbenannter_Verlauf_29"/><linearGradient id="__UID__Unbenannter_Verlauf_292" x1="33" y1="193" x2="214.8" y2="108.3" href="#__UID__Unbenannter_Verlauf_29"/><linearGradient id="__UID__Unbenannter_Verlauf_293" x1="-3.5" y1="114.7" x2="178.3" y2="30" href="#__UID__Unbenannter_Verlauf_29"/><linearGradient id="__UID__Unbenannter_Verlauf_294" x1="4.5" y1="131.8" x2="186.2" y2="47.1" href="#__UID__Unbenannter_Verlauf_29"/><linearGradient id="__UID__Unbenannter_Verlauf_295" x1="28.6" y1="183.6" x2="210.4" y2="98.9" href="#__UID__Unbenannter_Verlauf_29"/><linearGradient id="__UID__Unbenannter_Verlauf_296" x1="3.8" y1="130.3" x2="185.5" y2="45.5" href="#__UID__Unbenannter_Verlauf_29"/><linearGradient id="__UID__Unbenannter_Verlauf_297" x1="18" y1="160.6" x2="199.7" y2="75.9" href="#__UID__Unbenannter_Verlauf_29"/>`;
+const MARK_PATHS = `<path fill="url(#__UID__Unbenannter_Verlauf_29)" d="M67.3,19.9c11.2-2.3,22.5-1,32.1,1.5.8.2,1.2-.8.5-1.3-11.6-7.3-20.9-11.4-26.6-13.5l-18.3,4.9c-3.4.9-6.4,2.7-8.9,5.1l-29.6,29.6c-2.5,2.5-4.2,5.5-5.1,8.9l-.7,2.6c1.7-1.5,3.4-3.2,5.2-4.9,12.6-12,29.9-28.4,51.3-32.9Z"/><path fill="url(#__UID__Unbenannter_Verlauf_291)" d="M33.8,172.2l12.3,12.3c2.5,2.5,5.5,4.2,8.9,5.1l40.4,10.8c3.4.9,6.9.9,10.2,0l40.4-10.8c3.4-.9,6.4-2.7,8.9-5.1l2.8-2.8c-80-32.2-119-12.3-123.9-9.5Z"/><path fill="url(#__UID__Unbenannter_Verlauf_292)" d="M97.7,137.4c-25.1.2-51.1.4-78.8,19.8l10.5,10.5h.1c2-1.5,42.4-27.9,132.8,9.1h.2c0,.1,18.6-18.4,18.6-18.4-7.8-2.8-58.6-21-83.1-21h-.3Z"/><path fill="url(#__UID__Unbenannter_Verlauf_293)" d="M137.2,41h0c2.6,2.4,5.3,5,8,7.7,26.3,26.3,43.8,37.2,53.9,41.8l-9.5-35.5c-.9-3.4-2.7-6.4-5.1-8.9l-29.6-29.6c-2.5-2.5-5.5-4.2-8.9-5.1L105.7.7c-3.4-.9-6.9-.9-10.2,0l-12.1,3.2c12.4,5.6,31.5,16.5,53.7,37,0,0,.1.1.2.2Z"/><path fill="url(#__UID__Unbenannter_Verlauf_294)" d="M132.7,86.1c4.9,1.6,26.3,12,26.3,12,1.7.7,7.3,3.3,8.9,4.1.7.3,1.3-.6.8-1.1-1.5-1.4-5.8-5-10.9-8.6,0,0-21.8-15.4-27.2-18.5-7.8-4.3-47.4-26.7-81.3-10C25.8,75.6,8,89.7.6,96c-.8,3.2-.7,6.5.1,9.7l3.4,12.8c7.2-6.7,20.2-17.2,40.4-28.2,35.4-19.2,61.9-12.8,88.2-4.2Z"/><path fill="url(#__UID__Unbenannter_Verlauf_295)" d="M55.9,128c-3.1,1.7-17.5,10.3-17.5,10.3,0,0-4.9,3-.2,1.9,2-.5,7.8-3.1,9.7-3.6,0,0,19.1-7,49.8-5.4.1,0,.2,0,.4,0,27.6,0,84.2,21,86.6,21.9l1.1.5c1.8-2.2,3.2-4.7,3.9-7.5l2.7-10.2c-14.1-5.9-55.1-22.3-81-22.3s-55.3,14.3-55.5,14.4Z"/><path fill="url(#__UID__Unbenannter_Verlauf_296)" d="M131.7,44.5c-2-1.7-4.9-3.9-8.5-6.3-1.8-1.3-3.6-2.3-5.4-3.2-8.1-4.1-29.1-13.1-49.2-9-19.7,4.1-35.5,19.2-48.2,31.3-4.7,4.5-8.7,8.3-12.4,11.1l-4.6,17.2c9.4-7.4,24.4-18,43.2-27.2,36.9-18.1,79.2,5.4,87.3,10.3,12.1,7.3,47.9,34.4,64,46.8l2.6-9.8c.7-2.5.8-5,.5-7.5-10.4-3.8-29.7-14.5-60.2-45-3.1-3.1-6.1-5.9-9.1-8.6Z"/><path fill="url(#__UID__Unbenannter_Verlauf_297)" d="M47.5,95.8c-22.1,12-35.5,23.6-41.5,29.6l5.5,20.7c.3,1.2.8,2.4,1.4,3.5,9.5-9.3,38.6-26.3,39.8-27,1-.6,25.6-15.3,58.7-15.3s67.5,16,82.6,22.4l1.1-4.2c-9.9-6.7-37.4-24.5-64.4-33.5-24.9-8.3-50-14.3-83.2,3.8Z"/>`;
+/** Gradient <defs> for the mark, namespaced with `uid`. */
+function markDefs(uid) {
+    return MARK_DEFS.replace(/__UID__/g, uid);
+}
+/**
+ * The mark paths wrapped in a positioned, scaled group.
+ * The source artwork lives in a ~201×201 canvas; `size` is the rendered px.
+ */
+function markGroup(uid, x, y, size = 16) {
+    const s = (size / 201.1).toFixed(4);
+    const paths = MARK_PATHS.replace(/__UID__/g, uid);
+    return `<g transform="translate(${x},${y}) scale(${s})">${paths}</g>`;
+}
+
+const edsTrlBadgeCss = ":host{display:inline-block;line-height:0;}.link{display:inline-block;line-height:0;text-decoration:none;color:inherit}.link svg{display:block}";
+const EdsTrlBadgeStyle0 = edsTrlBadgeCss;
+
+let _uid = 0;
+const EdsTrlBadge$1 = /*@__PURE__*/ proxyCustomElement(class EdsTrlBadge extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** Per-instance suffix so the mark's gradient ids never collide. */
+        this.uid = `trl${++_uid}-`;
+        this.level = undefined;
+        this.assessed = undefined;
+        this.methodology = undefined;
+        this.theme = 'dark';
+        this.variant = 'tone';
+        this.size = undefined;
+        this.label = 'EBRAINS TRL';
+        this.href = undefined;
+    }
+    esc(s) {
+        return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+    }
+    /** Maturity tier → value/pip colour (brand palette). */
+    levelColor() {
+        const n = Number(this.level);
+        if (n >= 7)
+            return '#00FF9D';
+        if (n >= 4)
+            return '#00C87B';
+        return '#7A7B7A';
+    }
+    /** Readable value text on a coloured segment (black on green, light on grey). */
+    valueText() {
+        return Number(this.level) >= 4 ? '#07140D' : '#ECECEC';
+    }
+    fullText() {
+        const parts = [`${this.label} ${this.level}`];
+        if (this.assessed)
+            parts.push(`assessed ${this.assessed}`);
+        if (this.methodology)
+            parts.push(`methodology ${this.methodology}`);
+        return parts.join(' · ');
+    }
+    /** Build the inner markup + intrinsic dimensions for the chosen variant. */
+    build() {
+        const CW = EdsTrlBadge.CW;
+        const uid = this.uid;
+        const clip = `${uid}clip`;
+        const valColor = this.levelColor();
+        const logoSpace = 28; // 8 margin + ~16 mark + 4 gap
+        const mono = `font-family="'IBM Plex Mono',monospace"`;
+        const lvl = this.esc(String(this.level));
+        if (this.variant === 'full') {
+            const tail = (this.assessed ? ` · assessed ${this.esc(this.assessed)}` : '') +
+                (this.methodology ? ` · methodology ${this.esc(this.methodology)}` : '');
+            const w = Math.ceil(logoSpace + this.fullText().length * CW + 10);
+            const inner = `<defs><clipPath id="${clip}"><rect width="${w}" height="24" rx="6"/></clipPath>${markDefs(uid)}</defs>` +
+                `<g clip-path="url(#${clip})"><rect width="${w}" height="24" fill="#07140D"/></g>${markGroup(uid, 8, 4, 16)}` +
+                `<text x="30" y="15.5" ${mono} font-size="11" letter-spacing=".2">` +
+                `<tspan fill="#ECECEC">${this.esc(this.label)} </tspan>` +
+                `<tspan fill="${valColor}" font-weight="600">${lvl}</tspan>` +
+                `<tspan fill="#7A7B7A">${this.esc(tail)}</tspan></text>`;
+            return { w, h: 24, inner };
+        }
+        if (this.variant === 'pill') {
+            const txt = `TRL ${this.level}`;
+            const w = Math.ceil(logoSpace + txt.length * CW + 14);
+            const tx = logoSpace + (w - logoSpace) / 2 - 4;
+            const inner = `<defs>${markDefs(uid)}</defs>` +
+                `<rect width="${w}" height="24" rx="12" fill="#07140D"/>${markGroup(uid, 7, 4, 16)}` +
+                `<text x="${tx}" y="16" ${mono} font-size="11" font-weight="500" letter-spacing=".5" text-anchor="middle">` +
+                `<tspan fill="#ECECEC">TRL </tspan><tspan fill="${valColor}" font-weight="600">${lvl}</tspan></text>`;
+            return { w, h: 24, inner };
+        }
+        if (this.variant === 'outline') {
+            const dark = this.theme !== 'light';
+            const bg = dark ? '#0c1c14' : '#ffffff';
+            const stroke = dark ? '#34473d' : '#07140D';
+            const labelColor = dark ? '#ECECEC' : '#07140D';
+            const sep = dark ? '#5a6b62' : '#9aa39d';
+            const value = dark ? valColor : (Number(this.level) >= 4 ? '#00966a' : '#7A7B7A');
+            const w = Math.ceil(logoSpace + (this.label + ' · ' + this.level).length * CW + 12);
+            const inner = `<defs>${markDefs(uid)}</defs>` +
+                `<rect x=".5" y=".5" width="${w - 1}" height="23" rx="6" fill="${bg}" stroke="${stroke}"/>${markGroup(uid, 8, 4, 16)}` +
+                `<text x="30" y="16" ${mono} font-size="11" letter-spacing=".3">` +
+                `<tspan fill="${labelColor}">${this.esc(this.label)} </tspan>` +
+                `<tspan fill="${sep}">· </tspan>` +
+                `<tspan fill="${value}" font-weight="600">${lvl}</tspan></text>`;
+            return { w, h: 24, inner };
+        }
+        if (this.variant === 'scale') {
+            const dark = this.theme !== 'light';
+            const bg = dark ? '#07140D' : '#ECECEC';
+            const labelColor = dark ? '#ECECEC' : '#07140D';
+            const emptyPip = dark ? '#2f4339' : '#c4ccc7';
+            const sep = dark ? '#5a6b62' : '#9aa39d';
+            const n = Math.max(0, Math.min(9, Number(this.level) || 0));
+            const pipStart = Math.ceil(30 + this.label.length * CW + 12);
+            const pipStep = 9, pipW = 6, pipH = 8, pipY = 9;
+            let pips = '';
+            for (let i = 0; i < 9; i++) {
+                const x = pipStart + i * pipStep;
+                pips += `<rect x="${x}" y="${pipY}" width="${pipW}" height="${pipH}" rx="1" fill="${i < n ? valColor : emptyPip}"/>`;
+            }
+            const valueX = pipStart + 9 * pipStep + 5;
+            const w = Math.ceil(valueX + `${this.level}/9`.length * CW + 8);
+            const inner = `<defs>${markDefs(uid)}</defs>` +
+                `<rect width="${w}" height="26" rx="6" fill="${bg}"/>${markGroup(uid, 8, 5, 16)}` +
+                `<text x="30" y="17" ${mono} font-size="11" letter-spacing=".3" fill="${labelColor}">${this.esc(this.label)}</text>` +
+                `<g>${pips}</g>` +
+                `<text x="${valueX}" y="17" ${mono} font-size="11" font-weight="500">` +
+                `<tspan fill="${valColor}">${lvl}</tspan><tspan fill="${sep}">/9</tspan></text>`;
+            return { w, h: 26, inner };
+        }
+        // tone (default) — dark or light theme
+        const dark = this.theme !== 'light';
+        const labelBg = dark ? '#07140D' : '#ECECEC';
+        const labelTextColor = dark ? '#ECECEC' : '#07140D';
+        const valTextColor = dark ? this.valueText() : '#07140D';
+        const labelSegW = Math.ceil(logoSpace + this.label.length * CW + 12);
+        const valSegW = Math.ceil(12 + String(this.level).length * CW + 12);
+        const w = labelSegW + valSegW;
+        const inner = `<defs><clipPath id="${clip}"><rect width="${w}" height="24" rx="6"/></clipPath>${markDefs(uid)}</defs>` +
+            `<g clip-path="url(#${clip})"><rect width="${labelSegW}" height="24" fill="${labelBg}"/>` +
+            `<rect x="${labelSegW}" width="${valSegW}" height="24" fill="${valColor}"/></g>${markGroup(uid, 8, 4, 16)}` +
+            `<text x="${logoSpace + (labelSegW - logoSpace) / 2}" y="16" ${mono} font-size="11" letter-spacing=".4" fill="${labelTextColor}" text-anchor="middle">${this.esc(this.label)}</text>` +
+            `<text x="${labelSegW + valSegW / 2}" y="16" ${mono} font-size="11" font-weight="600" fill="${valTextColor}" text-anchor="middle">${lvl}</text>`;
+        return { w, h: 24, inner };
+    }
+    buildSvg() {
+        const { w, h, inner } = this.build();
+        const aria = this.esc(this.fullText());
+        const k = this.size ? this.size / h : 1;
+        const outW = Math.round(w * k);
+        const outH = Math.round(h * k);
+        return `<svg xmlns="http://www.w3.org/2000/svg" width="${outW}" height="${outH}" ` +
+            `viewBox="0 0 ${w} ${h}" role="img" aria-label="${aria}"><title>${aria}</title>${inner}</svg>`;
+    }
+    render() {
+        const svg = this.buildSvg();
+        return (h(Host, { key: 'eddfb49f35ff9771d76eef13a024b840b3a24cca' }, this.href ? (h("a", { class: "link", href: this.href, "aria-label": this.fullText(), innerHTML: svg })) : (h("span", { class: "link", innerHTML: svg }))));
+    }
+    static get style() { return EdsTrlBadgeStyle0; }
+}, [1, "eds-trl-badge", {
+        "level": [2],
+        "assessed": [1],
+        "methodology": [1],
+        "theme": [1],
+        "variant": [1],
+        "size": [2],
+        "label": [1],
+        "href": [1]
+    }]);
+// IBM Plex Mono advance width at 11px (used to size segments to the text).
+EdsTrlBadge$1.CW = 6.8;
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-trl-badge"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-trl-badge":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsTrlBadge$1);
+            }
+            break;
+    } });
+}
+
+const EdsTrlBadge = EdsTrlBadge$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsTrlBadge, defineCustomElement };