@ebrains/components 2.4.1 → 3.1.0

package/dist/components/eds-table2.js

@@ -1,20 +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$c } from './eds-button2.js';
-import { d as defineCustomElement$b } from './eds-icon-wrapper2.js';
-import { d as defineCustomElement$a } from './eds-input2.js';
-import { d as defineCustomElement$9 } from './eds-input-field2.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-search2.js';
-import { d as defineCustomElement$4 } from './eds-input-select2.js';
-import { d as defineCustomElement$3 } from './eds-link2.js';
-import { d as defineCustomElement$2 } from './eds-pagination2.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-100)}tr.table-row-color:nth-child(odd){background-color:transparent}.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-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.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}";
+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 {
@@ -23,6 +25,7 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
         this.__registerHost();
         this.__attachShadow();
         this.rowaction = createEvent(this, "rowaction", 7);
+        this.viewchange = createEvent(this, "viewchange", 7);
         this.handleResize = () => {
             this.updateContainerWidth();
         };
@@ -70,17 +73,29 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
                 action: this.sortDirection
             });
         };
+        this.handleViewChange = (event) => {
+            this.view = event.detail.value ? 'card' : 'table';
+            this.viewchange.emit({ view: this.view });
+            sendAnalytics({
+                category: 'ui-component',
+                parentContext: null,
+                tag: `${this.hostEl.tagName.toLowerCase()}/view-toggle`,
+                name: this.view,
+                action: 'view-change'
+            });
+        };
         this.data = null;
         this.config = {};
         this.rowsPerPage = 10;
         this.paginationEnabled = true;
         this.searchEnabled = false;
         this.hostWidth = undefined;
-        this.columnSize = 'default';
         this.actions = [];
         this.actionTemplate = undefined;
         this.sortingEnabled = false;
-        this.theme = 'color';
+        this.theme = 'brand';
+        this.view = 'table';
+        this.showViewToggle = false;
         this.parsedActions = [];
         this.dataColumns = [];
         this.tbData = [];
@@ -110,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();
@@ -196,7 +213,8 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
     renderCell(value, column) {
         var _a;
         const format = (_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.format;
-        return format === 'uppercase' ? (value === null || value === void 0 ? void 0 : value.toString().toUpperCase()) : format === 'svg' ? (h("div", { innerHTML: value })) : format === 'bold' ? (h("strong", null, value)) : format === 'code' ? (h("code", null, value)) : (value);
+        return format === 'uppercase' ? (value === null || value === void 0 ? void 0 : value.toString().toUpperCase()) : format === 'html' || format === 'svg' ? ( // 'svg' is deprecated, use 'html'
+        h("div", { innerHTML: value })) : format === 'bold' ? (h("strong", null, value)) : format === 'code' ? (h("code", null, value)) : (value);
     }
     /**
      * Renders one action (button or checkbox) for a specific action‐name.
@@ -216,7 +234,10 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
         }
         // Let all action buttons be focusable naturally
         const showLabel = act.showLabel === true;
-        const btn = (h("eds-button", { icon: act.icon, label: showLabel ? act.label : null, iconPos: "left", pill: true, size: "small", intent: "ghost", tabIndex: 0, onClick: () => this.emitAction(act.name, row) }));
+        const isBrandTheme = this.theme === 'brand';
+        // Use custom intent if provided, otherwise fall back to theme-based default
+        const buttonIntent = act.intent || (isBrandTheme ? 'primary' : 'ghost');
+        const btn = (h("eds-button", { icon: act.icon, label: showLabel ? act.label : null, iconPos: act.pos || 'left', pill: true, size: "small", intent: buttonIntent, tabIndex: 0, onClick: () => this.emitAction(act.name, row) }));
         return showLabel ? btn : h("eds-tooltip", { content: act.label }, btn);
     }
     emitAction(actionName, row, checked) {
@@ -236,24 +257,11 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
         var _a, _b;
         // Grab all data‐keys from the first row (if any) as before:
         this.columns = this.tbData.length > 0 ? Object.keys(this.tbData[0]) : [];
-        // Instead of pushing each action.name, add just a single “actions” column
+        // Instead of pushing each action.name, add just a single "actions" column
         if (((_b = (_a = this.parsedActions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 && this.tbData.length > 0) {
             this.columns.push('actions');
         }
     }
-    getVisibleColumnsCount() {
-        return this.columns.filter((column) => { var _a; return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden); }).length;
-    }
-    divisionFactor() {
-        let divisionFactor = 1;
-        if (this.columnSize === 'medium') {
-            divisionFactor = 2;
-        }
-        else if (this.columnSize === 'large') {
-            divisionFactor = 4;
-        }
-        return divisionFactor;
-    }
     capitalize(str) {
         return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
     }
@@ -283,41 +291,45 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
             return this.sortDirection === 'asc' ? comparison : -comparison;
         });
     }
-    render() {
-        const currentContainerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.containerWidth || 400;
-        const visibleColumnsCount = this.getVisibleColumnsCount();
-        const columnWidth = visibleColumnsCount > 0 ? Math.floor((currentContainerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
-        const paginatedRows = this.getPaginatedRows();
-        const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
-        return (h("div", { key: '0601cea60a05d044a717219e6ff6385ef915defa' }, this.searchEnabled && (h("div", { key: 'de1affaf192dc5e63b16d534d2f518c206ab7010' }, h("eds-input-field", { key: 1, icon: "search", name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))), h("div", { key: '49f71b5a2481d719cb8fe0547f05a5ae83ad5541', class: "mt-20" }, h("table", { key: 'b63ca6615ed681c741fb2d3ff2675f9cc061d194', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: '817b534cca3c2492b69b3816a41b54ec850847ab' }, h("tr", { key: '6cb8735ac56c3fe2acc4a257815bc0d07009118c', class: `m-0 p-0 border border-softer table-row-${this.theme}` }, this.columns.map((col) => {
-            var _a;
+    renderCardView(rows) {
+        // Get data columns (exclude 'actions' column)
+        const dataColumns = this.columns.filter((col) => { var _a; return col !== 'actions' && !((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden); });
+        return (h("div", { class: "card-grid" }, rows.map((row) => (h("div", { class: "data-card" }, h("div", { class: "card-content" }, dataColumns.map((col) => (h("div", { class: "card-field" }, h("span", { class: "card-label" }, this.capitalize(col)), h("span", { class: "card-value" }, this.renderCell(row[col], col)))))), this.parsedActions.length > 0 && (h("div", { class: "card-actions" }, this.parsedActions.map((act) => (h("span", null, this.renderSingleActionCell(act.name, row)))))))))));
+    }
+    renderTableView(paginatedRows) {
+        return (h("div", { class: `mt-20 ${this.theme === 'brand' ? 'brand-table-wrapper' : ''}` }, h("table", { class: `${this.theme === 'brand' ? '' : 'block overflow-x-auto'} mt-6 p-0 ${this.theme === 'brand' ? 'brand-table' : ''}` }, h("thead", { class: this.theme === 'brand' ? 'brand-thead' : '' }, h("tr", { class: `m-0 p-0 border border-softer table-row-${this.theme} ${this.theme === 'brand' ? 'brand-header-row' : ''}` }, this.columns
+            .filter((col) => { var _a; return col === 'actions' || !((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden); })
+            .map((col) => {
             if (col === 'actions') {
-                return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }));
-            }
-            if (!((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden)) {
-                return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, h("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.25rem' } }, h("span", null, this.capitalize(col)), this.sortingEnabled && (h("eds-icon-wrapper", { icon: this.sortColumn === col
-                        ? this.sortDirection === 'asc'
-                            ? 'chevron-up'
-                            : 'chevron-down'
-                        : 'chevron-down', "aria-label": `Sort by ${col}`, onClick: () => this.handleSort(col), style: { cursor: 'pointer' } })))));
+                return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words" }));
             }
-            return null;
-        }))), h("tbody", { key: '3c8630ed1f47720688bfcdb78c5dbfc84cb238cf' }, paginatedRows.map((row) => (h("tr", { class: `m-0 p-0 border border-softer table-row-${this.theme}` }, this.columns.map((col) => {
-            var _a;
+            return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words" }, h("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.25rem' } }, h("span", null, this.capitalize(col)), this.sortingEnabled && (h("eds-icon-wrapper", { name: this.sortColumn === col
+                    ? this.sortDirection === 'asc'
+                        ? 'chevron-up'
+                        : 'chevron-down'
+                    : 'chevron-down', "aria-label": `Sort by ${col}`, onClick: () => this.handleSort(col), style: { cursor: 'pointer' } })))));
+        }))), h("tbody", null, paginatedRows.map((row) => (h("tr", { class: `m-0 p-0 border border-softer table-row-${this.theme} ${this.theme === 'brand' ? 'brand-row' : ''} ${this.parsedActions.length > 0 ? 'has-actions' : ''}` }, this.columns
+            .filter((col) => { var _a; return col === 'actions' || !((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden); })
+            .map((col) => {
             if (col === 'actions') {
-                return (h("td", { class: "text-center border border-softer m-0 f-ui-02 break-words actions-cell", style: { minWidth: `${columnWidth - 4}px` } }, h("div", { role: "toolbar", "aria-label": "Row actions", onKeyDown: this.onActionKeyDown, style: {
+                return (h("td", { class: "text-center border border-softer m-0 f-ui-01 break-words actions-cell" }, h("div", { role: "toolbar", "aria-label": "Row actions", onKeyDown: this.onActionKeyDown, style: {
                         display: 'flex',
                         gap: '0.5rem',
                         justifyContent: 'center',
                         flexWrap: 'wrap'
                     } }, this.parsedActions.map((act) => (h("span", { style: { whiteSpace: 'nowrap' } }, this.renderSingleActionCell(act.name, row)))))));
             }
-            if (!((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden)) {
-                // Regular data cell
-                return (h("td", { class: "text-center border border-softer m-0 py-8 f-ui-2 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.renderCell(row[col], col)));
-            }
-            return null;
-        }))))))), this.shouldEnablePagination() && (h("div", { key: '09faef418edc676bb2b60c2439e0652a92fe023d', class: "mt-20" }, h("eds-pagination", { key: '9403d33a37505c73fe3bec652ef93f533bdb4f03', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+            // Regular data cell
+            return (h("td", { class: "text-center border border-softer m-0 py-8 f-ui-02 break-words" }, this.renderCell(row[col], col)));
+        }))))))));
+    }
+    render() {
+        const paginatedRows = this.getPaginatedRows();
+        const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
+        const showControls = this.showViewToggle || this.searchEnabled;
+        return (h("div", { key: '1e8a2f5f19df240ee3a57951641b60b947342fad' }, showControls && (h("div", { key: '778fe091226330448bba089189e9dd6a6aa977a9', class: "controls-container flex-col flex-md-row items-start items-md-center justify-between gap-16 mb-16" }, this.showViewToggle && (h("div", { key: '7ef287464bb2fba846be5341f4bb0e71d982be0e', class: "view-toggle-wrapper" }, h("eds-switch", { key: '2d3a494a5b354a14c8e882a153633bd5e85a40ab', variant: "segmented", labelOff: "Table View", labelOn: "Card View", checked: this.view === 'card', onUiswitch: this.handleViewChange }))), this.searchEnabled && (h("div", { key: 'dfcf6d0bdc23cb10481121881a7656b02a0599c1', class: `search-wrapper w-full ${this.showViewToggle ? 'w-md-400' : ''}` }, h("eds-input-field", { key: 1, icon: "search", name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))))), this.view === 'card'
+            ? this.renderCardView(paginatedRows)
+            : this.renderTableView(paginatedRows), this.shouldEnablePagination() && (h("div", { key: '3f7faafdd6147855cb8812ff6303c335c7fd1f35', class: "mt-20" }, h("eds-pagination", { key: '17705ba01a8ca8cc79bacfce34e55f11ce53d70c', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     get hostEl() { return this; }
     static get watchers() { return {
@@ -333,11 +345,12 @@ 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],
         "dataColumns": [32],
         "tbData": [32],
@@ -358,7 +371,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["eds-table", "eds-button", "eds-icon-wrapper", "eds-input", "eds-input-field", "eds-input-footer", "eds-input-label", "eds-input-range", "eds-input-search", "eds-input-select", "eds-link", "eds-pagination", "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)) {
@@ -367,20 +380,30 @@ function defineCustomElement() {
             break;
         case "eds-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$e();
             }
             break;
         case "eds-icon-wrapper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$d();
             }
             break;
         case "eds-input":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$c();
+            }
+            break;
+        case "eds-input-dropzone":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
             }
             break;
         case "eds-input-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "eds-input-file":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
@@ -400,22 +423,22 @@ function defineCustomElement() {
                 defineCustomElement$6();
             }
             break;
-        case "eds-input-search":
+        case "eds-input-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "eds-input-select":
+        case "eds-link":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "eds-link":
+        case "eds-pagination":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "eds-pagination":
+        case "eds-switch":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/components/eds-tabs.js

@@ -1,9 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as sendAnalytics } from './analytics.js';
-import { c as cva } from './index2.js';
 import { p as parseData } from './sharedUtils.js';
 
-const edsTabsCss = "*,::before,::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(147 197 253 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor;}::before,::after{--tw-content:''}a{color:inherit;text-decoration:inherit}.relative{position:relative}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.whitespace-nowrap{white-space:nowrap}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.effect-focus:focus-visible{outline-style:solid}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.focus-visible\\:text-default:focus-visible{color:var(--black)}.hover\\:text-default:hover{color:var(--black)}.border-2{border-width:2px}.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.after\\:bottom-0::after{bottom:0rem}.after\\:border-0::after{border-width:0px}.after\\:border-b-2::after{border-bottom-width:2px}.after\\:absolute::after{position:absolute}.after\\:inset-0::after{inset:0rem}.after\\:rounded-lg::after{border-radius:16px}.after\\:border-solid::after{border-style:solid}.after\\:border-3::after{border-width:3px}.after\\:border-accent::after{border-color:var(--green-500)}.after\\:opacity-0::after{opacity:0}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:after\\:opacity-100:focus-visible::after{opacity:1}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.rounded-tl-lg{border-top-left-radius:16px}.rounded-tr-lg{border-top-right-radius:16px}.border-l-0{border-left-width:0px}.border-r-0{border-right-width:0px}.border-b-0{border-bottom-width:0px}.pr-28{padding-right:1.75rem}.pl-28{padding-left:1.75rem}.-mr-16{margin-right:-1rem}.-ml-16{margin-left:-1rem}.px-16{padding-left:1rem;padding-right:1rem}.py-12{padding-top:0.75rem;padding-bottom:0.75rem}.after\\:left-16::after{left:1rem}.after\\:right-16::after{right:1rem}.text-lighter{color:var(--grey-600)}.bg-dark{background-color:var(--grey-300)}.hover\\:bg-darker:hover{background-color:var(--grey-400)}.border-soft{border-color:var(--grey-400)}.border-softest{border-color:rgba(0, 0, 0, .05)}.bg-default{background-color:var(--grey-200)}.text-default{color:var(--black)}.z-99{z-index:99}.after\\:z-10::after{z-index:10}.before\\:bottom-0::before{bottom:0rem}.before\\:h-12::before{height:0.75rem}.before\\:opacity-5::before{opacity:0.05}.before\\:content-\\[\\'\\'\\]::before{--tw-content:'';content:var(--tw-content)}.before\\:absolute::before{position:absolute}.before\\:-bottom-2::before{bottom:-0.125rem}.after\\:inset-x-0::after{left:0rem;right:0rem}.before\\:inset-x-0::before{left:0rem;right:0rem}.before\\:h-3::before{height:0.1875rem}.before\\:bg-default::before{background-color:var(--grey-200)}.after\\:border-soft::after{border-color:rgba(0, 0, 0, .15 )}.after\\:border-softest::after{border-color:rgba(0, 0, 0, .05)}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.before\\:bg-gradient-y::before{background:linear-gradient(to bottom, transparent, ease-in-out, black)}.scroller-x{-ms-overflow-style:none;scrollbar-width:none}.overflow-x-auto{overflow-x:auto}.max-w-xxxl{max-width:2200px}.z-1{z-index:1}.mx-auto{margin-left:auto;margin-right:auto}.pt-8{padding-top:0.5rem}.pr-16{padding-right:1rem}.pl-16{padding-left:1rem}.inline-flex{display:inline-flex}@media (min-width: 900px){.lg\\:px-28{padding-left:1.75rem;padding-right:1.75rem}}@media (min-width: 2200px){.xxxl\\:px-0{padding-left:0rem;padding-right:0rem}}";
+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 {
@@ -13,44 +12,15 @@ const EdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class EdsTabs extends HTMLEle
         this.__attachShadow();
         this.tab = createEvent(this, "tab", 7);
         this.tabRefs = [];
-        // Store tab reference
         this.setTabRef = (el, index) => {
             if (el) {
                 this.tabRefs[index] = el;
             }
         };
-        // cva configuration
-        this.tabCva = cva([
-            'relative py-12',
-            'f-ui-03 whitespace-nowrap',
-            'effect-color effect-focus',
-            'focus-visible:text-default hover:text-default',
-            'border-2'
-        ], {
-            variants: {
-                position: {
-                    first: 'px-16 rounded-t-lg',
-                    center: 'px-16',
-                    left: 'pl-16 pr-28 rounded-tl-lg border-r-0 -mr-16 after:right-16',
-                    right: 'pl-28 pr-16 rounded-tr-lg border-l-0 -ml-16 after:left-16'
-                },
-                active: {
-                    false: [
-                        'text-lighter bg-dark hover:bg-darker border-softest border-b-0 z-1',
-                        "after:content-[''] after:absolute after:bottom-0 after:inset-x-0 after:h-2 after:border-soft"
-                    ],
-                    true: [
-                        'bg-default text-default z-99',
-                        'rounded-t-lg',
-                        "before:content-[''] before:absolute before:-bottom-2 z-1 before:inset-x-0 before:h-3 before:bg-default",
-                        'border-soft'
-                    ]
-                }
-            }
-        });
         this.identifier = undefined;
         this.navAriaLabel = 'Tabs';
         this.tabs = undefined;
+        this.variant = 'default';
         this.parsedTabs = [];
         this.activeIndex = -1;
     }
@@ -61,70 +31,45 @@ const EdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class EdsTabs extends HTMLEle
     }
     /**
      * Parses the `tabs` prop into an array of tab objects.
-     * Returns an empty array if parsing fails or if `tabs` is not a valid JSON string or object.
      *
-     * @returns {any[]} Array of parsed 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);
-        // Reset tab refs when tabs change
-        this.tabRefs = [];
-    }
-    componentDidLoad() {
-        this.scrollToActiveTab();
+        if (this.tabRefs.length > this.parsedTabs.length) {
+            this.tabRefs.length = this.parsedTabs.length;
+        }
     }
     componentDidUpdate() {
-        // Ensure we have the correct number of tab refs after render
-        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() {
         this.activeIndex = this.parsedTabs.findIndex((tab) => tab.active);
-        // If no active tab found, default to first tab
         if (this.activeIndex === -1 && this.parsedTabs.length > 0) {
             this.activeIndex = 0;
             this.parsedTabs[0].active = true;
         }
     }
-    scrollToActiveTab() {
-        var _a;
-        const activeTab = (_a = this.tabContainer) === null || _a === void 0 ? void 0 : _a.querySelector('[data-tab-active]');
-        if (activeTab) {
-            setTimeout(() => {
-                activeTab.scrollIntoView({
-                    inline: 'center',
-                    block: 'nearest'
-                });
-            }, 316);
-        }
-    }
-    getTabOptions(active, index) {
-        const position = active
-            ? 'center'
-            : this.activeIndex === -1 && index === 0
-                ? 'first'
-                : index < this.activeIndex
-                    ? 'left'
-                    : 'right';
-        const rawZ = position === 'left' ? index : this.parsedTabs.length + 1 - index;
-        // clamp inactive to at least 1
-        const z = active ? this.parsedTabs.length + 99 : Math.max(rawZ, 1);
-        return Object.assign({ class: this.tabCva({ active, position }), style: {
-                // stringify the number so it matches { [key: string]: string }
-                zIndex: `${z}`
-            } }, (active ? { 'data-tab-active': 'true' } : {}));
-    }
     handleTabClick(index, tabLabel, shouldFocus = true) {
-        // Validate index
+        var _a;
         if (index < 0 || index >= this.parsedTabs.length) {
             return;
         }
-        // Update the active index and set all tabs' active state accordingly
         this.activeIndex = index;
         this.parsedTabs = this.parsedTabs.map((tab, tabIndex) => (Object.assign(Object.assign({}, tab), { active: tabIndex === index })));
         this.tab.emit({ tabId: this.identifier, index: index, name: tabLabel });
-        // Only send analytics for actual clicks, not keyboard navigation
         if (shouldFocus) {
             sendAnalytics({
                 category: 'ui-component',
@@ -133,13 +78,34 @@ const EdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class EdsTabs extends HTMLEle
                 action: 'click'
             });
         }
-        // Focus management for keyboard navigation
-        if (shouldFocus && this.tabRefs[index]) {
-            // Use a small timeout to ensure the DOM has updated
-            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) {
@@ -162,19 +128,26 @@ const EdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class EdsTabs extends HTMLEle
                 ev.preventDefault();
                 break;
             default:
-                return; // Don't handle other keys
+                return;
         }
         if (newIndex !== idx) {
             this.handleTabClick(newIndex, this.parsedTabs[newIndex].label, true);
         }
     }
     render() {
-        return (h("div", { key: '94766d744d61eb8d1eef51393621f85b06af822f', id: `${this.identifier}` }, h("div", { key: 'd76f26bd4e70baebab9fed6c61df26b496d899a5', class: "scroller-x overflow-x-auto relative z-[1] mx-auto px-16 pt-8 lg:px-28 after:border-soft before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, h("nav", { key: '74afc95f82764cedb44b99a482bedc7b5f918196', role: "tablist", ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
-            const TabComponent = 'button';
-            const tabProps = this.getTabOptions(tab.active, index);
+        const containerClasses = [
+            'tabs-container',
+            `tabs-container-${this.variant}`
+        ].join(' ');
+        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;
-            return (h(TabComponent, Object.assign({}, tabProps, { type: "button", role: "tab", "aria-selected": tab.active ? '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: '4652dc3741f95ccfac7d53e5e49607515f559ce1', 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, class: "effect-focus" }, h("slot", { name: `panel-${index}` })))))));
+            const tabClasses = [
+                'tab',
+                `tab-${this.variant}`,
+                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: '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 {
@@ -185,6 +158,7 @@ const EdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class EdsTabs extends HTMLEle
         "identifier": [1, "id"],
         "navAriaLabel": [1, "nav-aria-label"],
         "tabs": [1],
+        "variant": [1],
         "parsedTabs": [32],
         "activeIndex": [32]
     }, undefined, {

package/dist/components/eds-tag2.js

@@ -1,30 +1,29 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { c as cva } from './index2.js';
 
-const edsTagCss = ".f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-05{font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing)}.py-2{padding-top:0.125rem;padding-bottom:0.125rem}.py-3{padding-top:0.1875rem;padding-bottom:0.1875rem}.py-4{padding-top:0.25rem;padding-bottom:0.25rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.px-5{padding-left:0.3125rem;padding-right:0.3125rem}.px-6{padding-left:0.375rem;padding-right:0.375rem}.border-2{border-width:2px}.rounded-pill{border-radius:100px}.border-default{border:2px solid var(--black)}.text-inverse{color:var(--white)}.bg-accent{background-color:var(--green-500)}.bg-strongest{background-color:var(--black)}.text-\\[\\#0034CB\\]{--tw-text-opacity:1;color:rgb(0 52 203 / var(--tw-text-opacity))}.border-\\[\\#0034CB\\]{--tw-border-opacity:1;border:2px solid rgb(0 52 203 / var(--tw-border-opacity))}.text-light{color:var(--grey-700)}.bg-strongest-soft{background-color:rgba(0, 0, 0, .05)}.border-transparent{border-color:var(--transparent)}.border-inverse{border-color:var(--white)}.bg-inverse{background-color:var(--white)}.text-lighter{color:var(--grey-600)}";
+const edsTagCss = "  .f-ui-01 {\n    font-family: var(--f-ui-01-fontFamily);\n    font-size: var(--f-ui-01-fontSize);\n    line-height: var(--f-ui-01-lineHeight);\n    letter-spacing: var(--f-ui-01-letterSpacing);\n  }\n\n  .f-ui-03 {\n    font-family: var(--f-ui-03-fontFamily);\n    font-size: var(--f-ui-03-fontSize);\n    line-height: var(--f-ui-03-lineHeight);\n    letter-spacing: var(--f-ui-03-letterSpacing);\n  }\n\n  .f-ui-05 {\n    font-family: var(--f-ui-05-fontFamily);\n    font-size: var(--f-ui-05-fontSize);\n    line-height: var(--f-ui-05-lineHeight);\n    letter-spacing: var(--f-ui-05-letterSpacing);\n  }\n\n  .py-2 {\n    padding-top: 0.125rem;\n    padding-bottom: 0.125rem;\n  }\n\n  .py-3 {\n    padding-top: 0.1875rem;\n    padding-bottom: 0.1875rem;\n  }\n\n  .py-4 {\n    padding-top: 0.25rem;\n    padding-bottom: 0.25rem;\n  }\n\n  .px-4 {\n    padding-left: 0.25rem;\n    padding-right: 0.25rem;\n  }\n\n  .px-5 {\n    padding-left: 0.3125rem;\n    padding-right: 0.3125rem;\n  }\n\n  .px-6 {\n    padding-left: 0.375rem;\n    padding-right: 0.375rem;\n  }\n\n  .px-8 {\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n  }\n\n  .border-2 {\n    border-width: 2px;\n  }\n\n  .rounded-xs {\n    border-radius: 4px;\n  }\n\n  .rounded-xxs {\n    border-radius: 2px;\n  }\n\n  .rounded-pill {\n    border-radius: 100px;\n  }\n\n  .border-default {\n    border-color: var(--brand-black);\n  }\n\n  .border-grey-dark {\n    border-color: var(--grey-dark);\n  }\n\n  .border-inside {\n    position: relative;\n\n    &::after {\n      pointer-events: none;\n      position: absolute;\n      inset: 0rem;\n      z-index: 0;\n      border-radius: 8px;\n      border-width: 1px;\n      border-style: solid;\n      content: '';\n    }\n\n    /* Ensure text content is above the border */\n    &>* {\n      position: relative;\n      z-index: 1;\n    }\n  }\n\n  .border-inside-inverse {\n    position: relative;\n\n    &::after {\n      pointer-events: none;\n      position: absolute;\n      inset: 0rem;\n      z-index: 0;\n      border-radius: 8px;\n      border-width: 2px;\n      border-style: solid;\n      border-color: rgba(255, 255, 255, 1);\n      /* white border */\n      content: '';\n    }\n\n    /* Ensure text content is above the border */\n    &>* {\n      position: relative;\n      z-index: 1;\n    }\n  }\n\n  .border-inside-pill {\n    &::after {\n      border-radius: 100px;\n      /* pill shape */\n      content: '';\n    }\n  }\n\n  .border-inside-inverse.border-inside-pill {\n    &::after {\n      border-radius: 100px;\n      /* pill shape for inverse border */\n    }\n  }\n\n  /* Override border-radius for tags with rounded-xs */\n  .rounded-xs.border-inside {\n    &::after {\n      border-radius: 4px;\n    }\n  }\n\n  .rounded-xs.border-inside-inverse {\n    &::after {\n      border-radius: 4px;\n    }\n  }\n\n  .border-accent {\n    border-color: var(--brand-green);\n    /* NEW: #00FF9D */\n  }\n\n\n  .border-inverse {\n    border-color: var(--white);\n    /* NEW: #00FF9D */\n  }\n\n\n  .border-accent-dark {\n    border-color: var(--brand-green-dark);\n    /* NEW: #00FF9D */\n  }\n\n  .border-soft {\n    border-color: var(--grey-dark);\n  }\n\n  .border-softest {\n    border-color: var(--grey-light);\n  }\n\n  .bg-transparent {\n    background-color: transparent;\n  }\n\n  .text-inverse {\n    color: var(--white);\n  }\n\n  .text-accent {\n    color: var(--brand-green);\n  }\n\n  .text-accent-dark {\n    color: var(--brand-green-dark);\n  }\n\n  .bg-accent {\n    background-color: var(--brand-green);\n  }\n\n  .bg-accent-dark {\n    background-color: var(--brand-green-dark);\n  }\n\n  .bg-strongest {\n    background-color: var(--brand-black);\n  }\n\n  .text-\\[\\#0034CB\\] {\n    --tw-text-opacity: 1;\n    color: rgb(0 52 203 / var(--tw-text-opacity));\n  }\n\n  .border-\\[\\#0034CB\\] {\n    --tw-border-opacity: 1;\n    border: 2px solid rgb(0 52 203 / var(--tw-border-opacity));\n  }\n\n  .text-light {\n    color: var(--grey-dark);\n  }\n\n  .bg-strongest-soft {\n    background-color: rgba(0, 0, 0, .05);\n  }\n\n  .border-transparent {\n    border-color: var(--transparent);\n  }\n\n  .border-inverse {\n    border-color: var(--white);\n  }\n\n  .bg-inverse {\n    background-color: var(--white);\n  }\n\n  .text-lighter {\n    color: var(--grey-dark);\n  }\n\n  .items-center {\n    align-items: center;\n  }\n\n  .justify-center {\n    justify-content: center;\n  }\n\n  .justify-between {\n    justify-content: space-between;\n  }\n\n  .inline-flex {\n    display: inline-flex;\n  }";
 const EdsTagStyle0 = edsTagCss;
 
 // Define the CVA for the tag styles
-const tagStyles = cva(['border-2 rounded-pill'], // Base classes
+const tagStyles = cva(['relative inline-flex justify-center items-center py-8 rounded-xs'], // Base classes
 {
     variants: {
         intent: {
-            primary: 'border-accent bg-accent',
-            default: 'border-default',
-            strong: 'text-inverse bg-strongest border-default',
-            accent: 'text-[#0034CB] border-[#0034CB]',
-            weak: 'text-light bg-strongest-soft border-transparent',
-            inverse: 'border-inverse text-inverse',
-            'inverse-strong': 'bg-inverse border-inverse text-lighter'
+            primary: 'border-inside bg-inverse text-default',
+            dark: 'border-inside border-softest bg-inverse text-light',
+            inverse: 'border-inside bg-transparent text-inverse border-inverse',
+            strong: 'bg-strongest text-inverse',
+            brand: 'border-inside bg-transparent border-accent text-accent',
+            'brand-dark': 'border-inside bg-transparent border-accent-dark text-accent-dark'
         },
         size: {
             small: 'f-ui-05 py-2 px-4', // smaller padding
-            medium: 'f-ui-03 py-3 px-5', // moderate padding
-            large: 'f-ui-01 py-4 px-6' // larger padding
+            medium: 'f-ui-03 py-3 px-6', // moderate padding
+            large: 'f-ui-01 py-4 px-8' // larger padding
         }
     },
     defaultVariants: {
-        intent: 'default',
+        intent: 'primary',
         size: 'small'
     }
 });
@@ -34,12 +33,12 @@ const EdsTag = /*@__PURE__*/ proxyCustomElement(class EdsTag extends HTMLElement
         this.__registerHost();
         this.__attachShadow();
         this.label = undefined;
-        this.intent = 'default';
-        this.size = 'small';
+        this.intent = 'brand';
+        this.size = 'large';
     }
     render() {
         const classes = tagStyles({ intent: this.intent, size: this.size });
-        return h("span", { key: 'ef36f799cf3226ccf281428929e75326ea6a06e4', class: classes }, 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", {