@ebrains/components 2.0.0 → 2.2.0

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

@@ -33,7 +33,6 @@ import { parseData } from "../../utils/sharedUtils";
  * `EdsTable` is a customizable data table component with support for dynamic data fetching, column configuration, pagination, and search functionality.
  *
  * Key Features:
- * - Accepts static data or fetches dynamic data from an endpoint.
  * - Configurable columns with options to hide or apply text formatting (uppercase, bold, or code).
  * - Pagination support with adjustable rows per page.
  * - Searchable content for easier data filtering.
@@ -45,8 +44,33 @@ export class EdsTable {
         this.handleResize = () => {
             this.updateContainerWidth();
         };
+        this.onActionKeyDown = (e) => {
+            var _a;
+            if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') {
+                return;
+            }
+            e.preventDefault();
+            const currentButton = e.target;
+            const toolbar = currentButton.closest('[role="toolbar"]');
+            if (!toolbar) {
+                return;
+            }
+            // Find all focusable action buttons in this row
+            const actionButtons = Array.from(toolbar.querySelectorAll('eds-button'));
+            const currentIndex = actionButtons.indexOf(currentButton);
+            if (currentIndex === -1) {
+                return;
+            }
+            let nextIndex;
+            if (e.key === 'ArrowRight') {
+                nextIndex = (currentIndex + 1) % actionButtons.length;
+            }
+            else {
+                nextIndex = (currentIndex - 1 + actionButtons.length) % actionButtons.length;
+            }
+            (_a = actionButtons[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+        };
         this.data = null;
-        this.endpoint = null;
         this.config = {};
         this.rowsPerPage = 10;
         this.paginationEnabled = true;
@@ -84,7 +108,7 @@ export class EdsTable {
     componentWillLoad() {
         this.parseConfig();
         this.handleActionsChange();
-        this.data ? this.parseData() : this.endpoint && this.fetchData();
+        this.parseData();
     }
     componentDidLoad() {
         this.updateContainerWidth();
@@ -132,24 +156,13 @@ export class EdsTable {
             this.parsedConfig = {};
         }
     }
-    async fetchData() {
-        try {
-            const response = await fetch(this.endpoint);
-            const data = await response.json();
-            this.data = data;
-        }
-        catch (error) {
-            // eslint-disable-next-line
-            console.error('Failed to fetch data:', error);
-        }
-    }
     setupPaginationListener() {
         if (!this.shouldEnablePagination()) {
             return;
         }
         const paginationEl = this.hostEl.shadowRoot.querySelector('eds-pagination');
         if (paginationEl && !paginationEl.hasAttribute('listener-attached')) {
-            paginationEl.addEventListener('page', (event) => this.handlePageChange(event.detail));
+            paginationEl.addEventListener('page', (event) => this.handlePageChange(event.detail.value));
             paginationEl.setAttribute('listener-attached', 'true');
         }
     }
@@ -197,7 +210,10 @@ export class EdsTable {
             const checked = !!row[boundField];
             return (h("eds-input-field", { name: `chc-${actionName}`, label: act.label, type: "checkbox", checked: checked, onChange: (e) => this.emitAction(act.name, row, e.target.checked) }));
         }
-        return h("eds-link", { label: act.label, intent: "weak", onClick: () => this.emitAction(act.name, row) });
+        // 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) }));
+        return showLabel ? btn : h("eds-tooltip", { content: act.label }, btn);
     }
     emitAction(actionName, row, checked) {
         sendAnalytics({
@@ -243,7 +259,7 @@ export class EdsTable {
         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: '02339fab49389741529bd4333689e15c0409aecc' }, this.searchEnabled && (h("div", { key: 'a056734ff7bf25d8f561a185f8cf29742643c81d' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))), h("div", { key: 'cbeb04c8d91034db5b7e6386e45c2dbc87d8f6ee', class: "mt-20" }, h("table", { key: 'd707ffd979bc80da882ea38ce2d43cb5dee0702e', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: 'b4087412a0da69f0b3177785fb71ef2ce1d481a6' }, h("tr", { key: 'eb4463081686841b3112cab121bf3aa4dcfffe31', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
+        return (h("div", { key: '67cfdabc741af13585699e43e67ba0d204a60706' }, this.searchEnabled && (h("div", { key: '208240b9832f9b2e9645cc9d7315a43bd47b54b3' }, 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: '893924497d1535b7d29bc0b64ba48f4a3e366c43', class: "mt-20" }, h("table", { key: 'a019fa4f2886d4c2aa4bddc88dc7b6d7aa63fdcb', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: 'a6360fea59c605878e443a23cf45d0f8a9644140' }, h("tr", { key: '09702e8838f32c52bf6314b59ec598c6fa55d609', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
             var _a;
             if (col === 'actions') {
                 return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }));
@@ -252,17 +268,22 @@ export class EdsTable {
                 return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.capitalize(col)));
             }
             return null;
-        }))), h("tbody", { key: '3c0de8287738ff638a46721ee4e0e07bceffed8f' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
+        }))), h("tbody", { key: '5cdb3697e6c84921a823b40714a497f02c82e360' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
             var _a;
             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", { style: { display: 'flex', gap: '0.5rem', justifyContent: 'center', flexWrap: 'wrap' } }, this.parsedActions.map((act) => (h("span", { style: { whiteSpace: 'nowrap' } }, this.renderSingleActionCell(act.name, row)))))));
+                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: {
+                        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: '27c640dfdd0906abeb7ec77dfb7fb1d052d50093', class: "mt-20" }, h("eds-pagination", { key: '0a74448e3f59098808d8ba1696b891c4ea9a37bc', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+        }))))))), this.shouldEnablePagination() && (h("div", { key: 'f5af2cd6e65c3ed55ec2810ec4b1e3f891866271', class: "mt-20" }, h("eds-pagination", { key: '32965384707df502fb197712c73bb290e38ce040', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     static get is() { return "eds-table"; }
     static get encapsulation() { return "shadow"; }
@@ -296,24 +317,6 @@ export class EdsTable {
                 "reflect": false,
                 "defaultValue": "null"
             },
-            "endpoint": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | null",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Endpoint to fetch data dynamically"
-                },
-                "attribute": "endpoint",
-                "reflect": false,
-                "defaultValue": "null"
-            },
             "config": {
                 "type": "string",
                 "mutable": false,
@@ -439,7 +442,7 @@ export class EdsTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Array of actions to render in each row.\nEach action should have:\n - `name`: a unique key (e.g. \"view\", \"delete\")\n - `label`: what shows in the button (or you could pass an icon name here)"
+                    "text": "Array of actions to render in each row. Can be passed as a JSON string or as a `TableAction[]`.\n\nEach action object may include:\n - `name`       (string; required)  \u2014 unique action key, e.g. `\"view\"`, `\"delete\"`.\n - `label`      (string; required)  \u2014 text shown on the button, or used as the tooltip/aria-label when icon-only.\n - `type`       (\"button\" | \"checkbox\"; optional) \u2014 whether to render a standard button (default) or a checkbox.\n - `icon`       (string; optional)  \u2014 name of the icon to display in icon-only mode.\n - `field`      (string; optional)  \u2014 for checkboxes, the row field whose truthiness binds the checked state (defaults to `name`).\n - `showLabel`  (boolean; optional) \u2014 if `true`, render the full `label` instead of an icon + tooltip.\n\nWhen you pass JSON, make sure field names match exactly:\n```html\nactions='[\n  { \"name\":\"view\",  \"label\":\"View\",  \"icon\":\"eye\" },\n  { \"name\":\"edit\",  \"label\":\"Edit\",  \"icon\":\"pencil\", \"showLabel\":true },\n  { \"name\":\"del\",   \"label\":\"Delete\",\"type\":\"checkbox\", \"field\":\"selected\" }\n]'\n```"
                 },
                 "attribute": "actions",
                 "reflect": false,

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

@@ -111,7 +111,7 @@ export const WithActions = {
     </div>
   `,
     args: Object.assign(Object.assign({}, Default.args), { actions: [
-            { name: 'view', label: 'View' },
+            { name: 'view', label: 'View', icon: 'view' },
             { name: 'edit', label: 'Edit' }
         ] })
 };

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

@@ -36,7 +36,7 @@ export class EdsTag {
     }
     render() {
         const classes = tagStyles({ intent: this.intent, size: this.size });
-        return h("span", { key: '153cb5a6ab669555dd8e5815413dc0d1be5bee6d', class: classes }, this.label);
+        return h("span", { key: 'e3fe041e8783a7d1bb5a281eb154e3c07851da38', class: classes }, this.label);
     }
     static get is() { return "eds-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -41,7 +41,7 @@ export class EdsTimeline {
         }
     }
     render() {
-        return (h("div", { key: '58f12a81691ac711c82aa0db5786101cecadf7eb', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: '9b9d5e83a7f9c93850b95590dda1ba38eef56131', class: "relative" }, h("div", { key: 'fd97d75bb70cbe629310e73f2017f3f188b3160a', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: 'c69f1e3755fadfa9234f51a5d9b3196f339164f5', 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", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", tags: JSON.stringify(event.completed
+        return (h("div", { key: 'c3362fa23185787a8d5a974f1f53978569e28a63', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: '59f85c0ae88876cf891b8fd2852cb15426f05c2a', class: "relative" }, h("div", { key: '89fc0969c72ba183dee530a428d6d1d9421b2764', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: '190262fe1b382ac41fba398d05e640d0db746fe9', 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", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", 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", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", tags: JSON.stringify(event.completed
                 ? [{ label: 'completed', style: 'accent' }]

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

@@ -59,6 +59,11 @@
   padding: 0.375rem;
 }
 
+.px-4 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
 .top-full {
   top: 100%;
 }

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

@@ -19,10 +19,10 @@ export class EdsTooltip {
     }
     render() {
         const positionClass = this.position === 'bottom' ? 'top-full mt-2' : 'bottom-full mb-2';
-        return (h("div", { key: 'cacea6fc1f32c6d9bef2288f9e30744cf2dacc9a', class: "relative w-full inline-block group" }, h("slot", { key: '19862715e9575583caa7cc3f818294e43196d305' }), h("div", { key: '35fa38cf5993498d61a6941a6c11204e5e66a7d5', class: `absolute ${positionClass}
+        return (h("div", { key: '135df7d17db03fb3bb7bbcc50ad9ee5d84a2bca2', class: "relative w-full inline-block group" }, h("slot", { key: '4c12874eeb942e33f9c62ea6f1077fd051f683b6' }), h("div", { key: '8bb7173d16889b2ae550dc0269d9e47e1dae00ac', class: `absolute ${positionClass}
             rounded-xs bg-strongest text-inverse 
             f-ui-03-light pointer-events-none 
-            z-10 p-4 opacity-0 transition-opacity duration-150 ease-in-out
+            z-10 px-4 opacity-0 transition-opacity duration-150 ease-in-out
             group-hover:opacity-100 whitespace-normal break-words`, role: "tooltip" }, this.content)));
     }
     static get is() { return "eds-tooltip"; }

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

@@ -41,7 +41,7 @@ export class EdsTrl {
             Application: { format: 'code' },
             'Current TRL Stage': { format: 'text' }
         };
-        return (h("div", { key: '0fe3bb33948017691e8d0d10a7b1f75881a9c2e8', class: "container mx-auto px-4 py-8" }, h("eds-table", { key: 'f45942902dec74d57cd4d2aee7643c809263abb9', "table-data": JSON.stringify(tableData), config: JSON.stringify(tableConfig), "rows-per-page": "2", "pagination-enabled": "true", "search-enabled": "true", "column-size": "default" })));
+        return (h("div", { key: '42873472d353599cbc2903b00ff03f0f802f1120', class: "container mx-auto px-4 py-8" }, h("eds-table", { key: '980a4d934f0554fefd34f8c4631f305d45f81bc3', "table-data": JSON.stringify(tableData), config: JSON.stringify(tableConfig), "rows-per-page": "2", "pagination-enabled": "true", "search-enabled": "true", "column-size": "default" })));
     }
     static get is() { return "eds-trl"; }
     static get properties() {

package/dist/collection/eds-docs-ui/colors/color-palette/primary.js

@@ -33,7 +33,7 @@ export class ColorPrimaryPalette {
         ];
     }
     render() {
-        return (h("ul", { key: '54f9d42269e4becaea4e5b6e91913ae4e52f8b1c', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
+        return (h("ul", { key: '80a1683bf07afddfc75d803735a7ebb6e175275e', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }
     static get is() { return "color-primary-palette"; }
 }

package/dist/collection/eds-docs-ui/colors/color-palette/secondary.js

@@ -58,7 +58,7 @@ export class ColorSecondaryPalette {
         this.show = undefined;
     }
     render() {
-        return (h("ul", { key: '73e6a72d3aa4659f2678fc49e7b8977711cb6055', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
+        return (h("ul", { key: '8897905f5b4e2a95b0697e90bc9b0476b9110c10', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }
     static get is() { return "color-secondary-palette"; }
     static get properties() {

package/dist/collection/eds-docs-ui/colors/color-palette/support.js

@@ -58,7 +58,7 @@ export class ColorSupportPalette {
         return 'text-default';
     }
     render() {
-        return (h("ul", { key: '268afbd0b909a22f7c8b85d5ad7f0d36a4a5e3d1', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => {
+        return (h("ul", { key: 'f0ba44197d75db8e8c35b1c774fcb9a5cf57b955', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => {
             // compute once
             const textClass = this.getTextColor(color.background);
             return (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: `f-body-02 ${textClass}` }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' }, class: textClass })), h("div", { class: "grid" }, h("span", { class: `f-body-02 ${textClass}` }, color.pantoneC), h("span", { class: `f-body-02 ${textClass}` }, color.pantoneU)))));

package/dist/collection/eds-docs-ui/colors/gradient-palette/primary.js

@@ -33,7 +33,7 @@ export class GradientPrimaryPalette {
         ];
     }
     render() {
-        return (h("ul", { key: 'bd16588910fd7f74979521f84d0d1c3f2434a19c', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
+        return (h("ul", { key: '1a8020d4141fdd0e5849eeec1f474a9e423df044', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
                 background: 'linear-gradient(to bottom, #9CE142 0%, #00C959 50%, #00A595 100%)'
             } }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16" }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }

package/dist/collection/eds-docs-ui/colors/gradient-palette/secondary.js

@@ -57,19 +57,19 @@ export class GradientSecondaryPalette {
         ];
     }
     render() {
-        return (h("div", { key: 'd7c6759d8908219c3de45f785c03b5d1ce1ba096' }, h("ul", { key: 'ed856f5b163fb0725c02808d435469ec6b7ffaed', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'abe6c28047d81414d39dc0b36db2be56f6380362', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'a1cdd15152436b70b05e7bb030977223afc9a407', class: "effect-height flex items-center justify-between p-16", style: {
+        return (h("div", { key: '3f2934f897c4cc6f620542a1ba4283c1d5a33df9' }, h("ul", { key: 'aaaf0f3c8930efd24ed43c2a921821442dd73050', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '52df1b6804670c365e43dc704d9ac5b8b15715a8', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'c301ab6086f2c1c9596336a2ad971242d1e21083', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[0].background
-            } }, h("div", { key: '29c335132b5fee16cc8e2cc34d19664e99f69c47', class: "grid" }, h("span", { key: 'c593f66f5ba6bd0f111393dbcc9bcf0bc185479a', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: 'f27114bd95383c500a6c319439c61148893b31ad', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: 'c274f3feac084aeb5b42b61b15156fd94282f497', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'bf76b37efef73cda20f1dcc79bb749360a07e34e', class: "grid" }, h("span", { key: '37a02acedd78800289bbabd318766f6141338148', class: "f-body-02" }, this.colors[0].pantoneC), h("span", { key: '8b38d9245e0c8c1c75748f944acddcd5f3b3883a', class: "f-body-02" }, this.colors[0].pantoneU))), h("div", { key: '83db75289cbb4e41c15f1150c6f7a56098d8def1', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '2b25b2b94472be6cf429f3698f0b867b779d5289', class: "grid" }, h("span", { key: 'dcd99303196abf883d50d9f0e3d952a5ab8213ea', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: 'b7bf94422eddb9d39463f261275cc2d2264c09a1', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: '9ba5dec72e690f1612361102191dfa35da9f6260', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '594086b8cca19613c8470f018f01dc4f006cf0ea', class: "grid" }, h("span", { key: '2c5b9af8a63edb49b863a491b2d05c03bf1d4074', class: "f-body-02" }, this.colors[0].pantoneC), h("span", { key: 'ca8b44a7f414459f63398ed1f77c60e9ab5f3cc1', class: "f-body-02" }, this.colors[0].pantoneU))), h("div", { key: 'f97f1c58886e6802e4c4ef7601570bcf39a34d33', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[1].background
-            } }, h("div", { key: '4d92597b209048fc28478024d8eb2e89ce0109c1', class: "grid" }, h("span", { key: '465eda6c71997ca65f48d56410e8dccf607f4cb4', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: 'e80b3e063e142213d04bd6f19f6d20c57515270d', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: 'c746f6804888132d61fb7820cfcb28db00eee1fc', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '2af1ee7b54dd29b18177fd317ebe4846c7ea98f3', class: "grid" }, h("span", { key: '69a9c403a3167026a6814bc697420e3aca6b335f', class: "f-body-02" }, this.colors[1].pantoneC), h("span", { key: 'd4dacbdc529f62bfc59eac154c5ad6b06fbec876', class: "f-body-02" }, this.colors[1].pantoneU))))), h("eds-block-break", { key: '89204f2ef69b43b82e6adc82e404bd8a7985b18b' }), h("ul", { key: 'e6a2710618d7a1e58f6812acc2d2f6d2b7d841ef', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'ed072f8a3bdc089c3a89e4b1c83127f7481f46d0', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '2010e22562d8e62ed3096815d69f354160abcb65', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: 'fe4232938f50f1ed4438fbda528e825924317bb1', class: "grid" }, h("span", { key: '17fd45986226dc01589a6214c9c409ea7b83a2b7', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '78a16b2a247b3b7ef9ba55fcea86a46414d48dd4', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: '5ba4c6cb2a15ba812ad2155f03279e45a4eb5470', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'e3459241ff6aee17dcca8b40c6d032c39eb85dcb', class: "grid" }, h("span", { key: 'cc3085e05ddc7d1837ab73aba82562ca10dc5ad8', class: "f-body-02" }, this.colors[1].pantoneC), h("span", { key: '40e81ff1064c79bc1217d7548d9af3f0aa71820b', class: "f-body-02" }, this.colors[1].pantoneU))))), h("eds-block-break", { key: '7748f6c8cc03b4e8107da154294263408238bc72' }), h("ul", { key: '371c71de57cce47d517fbc5e070b5abc7249d1d1', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '368f86411b9f0b09ade201b7ed95e2e571c92b86', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'e311b5b80115d467ffd03b222017d422def6c157', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, h("div", { key: '891397d4e60cd7a5622181a71f29734520b4298c', class: "grid" }, h("span", { key: '3f6b1baca2b5fe53bd275c92ad0310667701c753', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: '23ffbe639a0c2cfd92f6270db1ef70c3d1640fc9', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: 'e1352887585144329be0529c8dd677461b10610a', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'cd576b8104996360eed629ffa208d5117bf0e4ad', class: "grid" }, h("span", { key: '298cb076bc456fb9096cf6503a3d743569f416ba', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: '7329b19b0333a216786d503e62e98651a4d4771f', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: '4fea9070d6a61cd7402d449efd187a0a5017a097', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '7b8dfb5ee427559431a5ebb64d0fe62b0611e809', class: "grid" }, h("span", { key: '607edea5d452ed3b6cde489eb1bd86d4b0fff9af', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: '6cdeef4b8a3c443274334cfd42c2793b54e1fe02', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: '0632e3bb77e36fe5dca4cc4177ff9cabd52a0139', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '0036eb061196835f1406a7e50aab44fcab32d308', class: "grid" }, h("span", { key: 'c26f3a1e9a0ab48883e0e70986c21b11a0b7b014', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: '46f7a99fcfbf3aa8a6b9d03f4b3fe4733d1d2133', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: 'f4c1504965dc6e26aeeb580f16b2934f3f5038df', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, h("div", { key: '42add888aeddd60139a738516f0bdf2bb8ce53c6', class: "grid" }, h("span", { key: 'baf4aed8195baaf67b64f023c701c45da3ddd736', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: 'bc081ddd23179b330359271ddae1fb7ee80d5559', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: '1c99d958f47f5c85b1f73961cff31de1963ff1d1', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'd9655d11a6c6a935970990bdc85d38baab035d42', class: "grid" }, h("span", { key: '93490f1f7d4818483cf1516ae0ff945cb29d8cd3', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: 'bee2089b693ad94489a785d86a11dd2d85455f40', class: "f-body-02" }, this.colors[3].pantoneU))))), h("eds-block-break", { key: 'e0a2b7706a6564a323710743e72c964f7159e1a5' }), h("ul", { key: '7de5262ec6a1a6e55a05c1add2797af7de29bd8b', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '6a137a701f58c473cec1c2c92c57699ecee583f8', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '2f44ae854af76aa14281840d6c60f2c3256099e1', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: 'be7223a1145d57111f1db9aff6ff362f6338e526', class: "grid" }, h("span", { key: 'de3f52cc909b249e3bfb327a8d4404cf22d9f79f', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '44ee6cf212e334ef7b825add5754288382d98cc7', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: 'e3f55aaa3015811c4186e09a68ec3c5fde3a8e0a', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'fd2196253e2d01363143862935eeac2b9e16ee4a', class: "grid" }, h("span", { key: 'd27d7ed13497d0e3c81a9d01a02b4fa48390613e', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: '85f65a7bf51b56e03e17448eaf8a2b1cf67b13f9', class: "f-body-02" }, this.colors[3].pantoneU))))), h("eds-block-break", { key: 'c4571ad26fc567e66106c8d4925aa1234cf6a343' }), h("ul", { key: 'cd9d2007239b792d15a9f31242cec6748ee0962b', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '9d668bd5fe1fa168996a878c1dca6da6c2575794', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '46e2911bf0d340aabff6e2e3f374bd9d165c0ff9', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[4].background
-            } }, h("div", { key: 'b806467f9ef13799e885bd537364ddc05fe40a4f', class: "grid" }, h("span", { key: '59254c7b53f7f74a9bb7884c14e0a10dc9959e9b', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: 'c2347c08f4fad7fe6c83c16e97c81a9ed5fc3265', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: '5a5ac44c8a1e1192e606e16dc4878bc34dfc1f18', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'b02e1566bdbeb23751333450f0575f1242581fc6', class: "grid" }, h("span", { key: 'b0ba99a11f5ef2f527a7953de9e994469d5e4345', class: "f-body-02" }, this.colors[4].pantoneC), h("span", { key: 'ef8ae5b0a8b90c40d6edfaec0510a3cff51ee146', class: "f-body-02" }, this.colors[4].pantoneU))), h("div", { key: 'c5b9a09ea0de5a4d8fce281df814619477ddaf8b', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '9871887c8fdfb870081bd6811ec7d1345d903602', class: "grid" }, h("span", { key: '417a74c81f179931fb935a979f2cd6b8d9d36a10', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: '6a4d66af1fc49a403eb3b9d618191752631912d6', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: 'f5b3dfafd77f41040fd364f12f9993eee6efa678', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '78b8cd5951f2c058bdc989ef9e8ecd33fd4e227e', class: "grid" }, h("span", { key: '81c591df12b07254704c4c888e79ee795182aae8', class: "f-body-02" }, this.colors[4].pantoneC), h("span", { key: '546eb21d683067f23c0c392413945c5ff59d0992', class: "f-body-02" }, this.colors[4].pantoneU))), h("div", { key: 'a1d7d8ac8f18b76a2b0174be4e20a538ba58e836', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[5].background
-            } }, h("div", { key: '01093078bcb33b75da1ec21ea29d238edd90e9c7', class: "grid" }, h("span", { key: '0c9633660c5c2b365280a63c4a5c67b77fbd80dd', class: "f-body-02" }, this.colors[5].rgb), h("span", { key: 'd7cce349e8b86c40abba692c54d7c309d20be2b4', class: "f-body-02 w-full" }, this.colors[5].cmyk), h("eds-code-block", { key: 'b402087855fe04450eb1523014fb310446f83d26', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'cddd68685d9dbef43b849910082e844ac9dfc30a', class: "grid" }, h("span", { key: '34122a3422f7f27d81678f7f29fb0781eb598620', class: "f-body-02" }, this.colors[5].pantoneC), h("span", { key: 'cff5bbce881e6549bdeee9631a1626c7be093b84', class: "f-body-02" }, this.colors[5].pantoneU)))))));
+            } }, h("div", { key: '30ff0da22696dd631e21ddd8354b4fc0a54f430d', class: "grid" }, h("span", { key: '7546e1a8e2ebaf41e2241dd536581308cc4a92b0', class: "f-body-02" }, this.colors[5].rgb), h("span", { key: '650027eddd52b22d4e735ba459eb325e10f6c1af', class: "f-body-02 w-full" }, this.colors[5].cmyk), h("eds-code-block", { key: '5b119196ead9e34bc4360c270f02bcc21e31dafe', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '07af615883c1648cbca851527bf7ebcaef6ec1cf', class: "grid" }, h("span", { key: '4cf871344f93b002d32022a270a7ff0ba5de7c92', class: "f-body-02" }, this.colors[5].pantoneC), h("span", { key: 'e4240bbaed87c2a5c6eb717d186d6eca0e84952f', class: "f-body-02" }, this.colors[5].pantoneU)))))));
     }
     static get is() { return "gradient-secondary-palette"; }
 }

package/dist/collection/eds-docs-ui/colors/gradient-palette/support.js

@@ -49,11 +49,11 @@ export class GradientSupportPalette {
         ];
     }
     render() {
-        return (h("ul", { key: '5a612487c206581907ebc456cc6149580090f55c', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '661844e372ed3436f375410f4ab298b967f7c7dd', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '867573f26386a46b9ecccd982163f7dfaddd087b', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, h("div", { key: '4c23cb1c31308a1e163c963037856ab3dcd516e6', class: "grid" }, h("span", { key: '237e7234834b820a80caa38b47cdc33be2dc4c85', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: '68749c41d21b7994aeac33d5a3d24d0e04bca08c', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: '9b87e0cb8aee3b56e66cb26a1c933ba693487893', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'b5c6b6abd962f4649657bdf85d45e8309efd66ea', class: "grid" }, h("span", { key: '12ea4085c748e073e4bbfed5217e6aff9e61d5f8', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), h("span", { key: '8e3d52cc62bdcddf058ce3a124813b1225607bf7', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), h("li", { key: 'c6fd93aee048ab41248cd5dead3608d868459dd2', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '9ec24ba88c6c2aabd785dbde4c2a3198e836c81f', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, h("div", { key: '2636df7a6eb4ce22d3c6ce21880401ad995f4e53', class: "grid" }, h("span", { key: '293a0457140d0b595ce5a1ec3d7519554da51787', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '2e553c06d960bcd40dc6abfa84adcae3c3b850f9', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: 'c351eb2de9d9f92bf6479b4ba75ec4d2ea2adcee', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'cf78d76edea67cbb65a98d5df41ee0aa8d19a7b1', class: "grid" }, h("span", { key: 'de2b396e6ffd2e52239a1b8909c7ab14932c93a6', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), h("span", { key: 'aebdec1e5f31c1f9aecf89d657fa309dc4e6f96e', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), h("li", { key: '3391ea7989b220e68b9d3f3194d59046c22de20d', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '097878915a516699b1460c045773738a17ebf9c6', class: "effect-height flex items-center justify-between p-16", style: {
+        return (h("ul", { key: '19fa0d13f425559a057eac44251af122fa28d8f2', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '04b62c9e98c068d300d76584eee86c7a441d7308', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '51b00b545676c2f755f5209c39d299bbe5bfb3eb', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, h("div", { key: '0f9074bc3de0bc69e7500ea57d43a454af8e453b', class: "grid" }, h("span", { key: '41d0e3badfab9220b9ef6c1b3fe089238cb1ee4b', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: '8f02aa05d411d781215b7b41234f5ea816ed5af8', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: '08ec618c5fcc6ebeb7d92c5dda2fb58c7af26293', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'e9aaf995a542a3d4497f4e2129fa8e9b99d0e8f1', class: "grid" }, h("span", { key: 'ab62f5c7d81f83570bd25f9ae8c0872bdffdee49', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), h("span", { key: '20d1b270e55f172373e498b96fde480e75436893', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), h("li", { key: 'c12be45607f611fb7ef295a1942949ed4197d3c2', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '82119d77e7b21d5fff3dbfb2ae6352417f927397', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, h("div", { key: 'c76edf55a482aeb8fcdc6d7c442337db086d2874', class: "grid" }, h("span", { key: '5a828a7f6c8ea95afe08e220b4474d09abb8ba38', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '39ecebe4bdebf12b27bad8267a20bdae7bc91c5c', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: '478d7cf0b85dc6fd125a4e879628737a89b34ef9', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '639acf9fb8e989bc42b18908ba6e063f2943a619', class: "grid" }, h("span", { key: '604c16acc523e86e355a4d9cb21b577d4305b153', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), h("span", { key: '681d72b5503e3e4886661879b73d611238802be0', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), h("li", { key: '13b78355e265c0ae0b69af342d7c335349bf9656', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'eb7de148459e79667b8a0abea79f29c0a29f4c04', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, h("div", { key: 'ef76280804b503e8d7ed1a04f1ea07b762e36905', class: "grid" }, h("span", { key: '3235d6a48761d5680dd447189d2c70d4421a79b9', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: '6d27e4764d3a3c6740154a3ffc996f1259a3a1ae', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: 'b1ec314d40809791313506e2e953cc83adfe1a99', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'f2907250506bb3d9428655649ed5470188aa78ae', class: "grid" }, h("span", { key: '49e3f49a8ef6578bcf0173774734b0fe80d34380', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: '950a3aeb1a5d1e3ecaa23b3a9a43eb2a61f78993', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: 'baaea9182beb5874d53f3dde736d55d3dd6fb53d', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '8053120d580f111fbb1f3d9554567892a50a140c', class: "grid" }, h("span", { key: '0e4c72fcb479d8ce3625443d4c09430f905c8cf4', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: '1cc8f9ecd5f3c753d227d5d8f0b8a79b218167b9', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: '68b0940f2317af55229b792088abe9021ece3382', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '4213b6f6e59300a79d01108a0a530042c2eb164b', class: "grid" }, h("span", { key: '3942f091461176f14e7115d4ec26454dc84a77af', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: '7d56bffc0bbcd7fedc2b429eda6cd843ce75084c', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: '6e54e4369bc24fe897372626d2b8f524c899979e', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, h("div", { key: '52190f3fba8daf54b66a6c1fb39ffe0d3630579c', class: "grid" }, h("span", { key: '65d924d148d9aa5ea28bb2018c6205e047c63eb7', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: 'fb3046c7e64943887b015442d0822941f555b0d9', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: 'd9970b36eeedeb76601c151d8adf0d719c3bc50b', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '99f7dc373ca4cd7a6ef0bdab8554bb0448fb92ae', class: "grid" }, h("span", { key: 'cc8fd3b34d84b16d476ca8828a21a7d6edd323e3', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: '13a91251ee695c6c4675f0c4ff78196e94fb0c25', class: "f-body-02" }, this.colors[3].pantoneU)))), h("li", { key: '15d8671c59473d0536d970d37518237982f50bd7', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '1ddbd49301aacb6164261021ce8ee68a17946028', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, h("div", { key: '88440ca3f89fba17e750a27e7afbc32fa43865fa', class: "grid" }, h("span", { key: '28256827aedbbbe4cf4fcf6d36e465552095abfe', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: '4e02cb7566b147c5696f6797a2eb8fe52ccc4c3a', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: 'cd1fb27c45fba23a2e07c99f949b10b3375fc1ab', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '15b28c50322a27b285e7761b2a7336a46a2999e7', class: "grid" }, h("span", { key: '8e26da3deba60c4ac8110259891020adb8c7747b', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), h("span", { key: '12fa9dd12ee72677869b18f83777c47d339ad8ca', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
+            } }, h("div", { key: 'c10240910d81584325f5fb8fe99ea2bdf471fcca', class: "grid" }, h("span", { key: 'b463043e7fcec06836ea668caaf8f88d662c0b50', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: 'd4cb38555b59b84b8c28e6f94a194198237087d8', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: 'e11e259fdf1b28d83f425bbb627c3cfb4a4eb80b', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'bdd93a1bd8f270ddb2ccc6a8ab0643092d4c57c9', class: "grid" }, h("span", { key: 'a9874a23df6404e94c467322a416d161ae07a31b', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: '84fc3e06a694fc63d991a84f92e1ef4a74ef3db8', class: "f-body-02" }, this.colors[3].pantoneU)))), h("li", { key: '43d5a6b41ab34621e54769e32cdb896e09e4f94a', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '4cd11ea97f536e8eb36b04aca8b3da178d282817', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, h("div", { key: 'bc41de6560f69b0818f9655430099d80fc65146a', class: "grid" }, h("span", { key: '8d075abf0d186b80377dee9f4ccb3770e9c16ab3', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: '78d0f7796b14ed72742e5f4cb88688179b0f1630', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: 'ddec227e11cb2b73e14ba7b5600f18d19788bc31', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '5f2ea3156897994045de1b86bc1cf77230a5a93d', class: "grid" }, h("span", { key: '72b20e3cd6bea5de93311ee02d245570f7164ad4', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), h("span", { key: '48e0fc418cac0932891c20266099c9f6293f366a', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
     }
     static get is() { return "gradient-support-palette"; }
 }

package/dist/collection/eds-docs-ui/colors/use-of-colors/correct-use-of-colors.js

@@ -60,7 +60,7 @@ const red = [
  */
 export class CorrectUseOfColors {
     render() {
-        return (h("div", { key: '0d87f12519405c944ea432dacc79cc22e4710f7a', class: "container" }, h("p", { key: '6041d60d6e1bd6313b6d5989f89209c75b350048', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'bacd39d8122d919711793e0d90074ad4c7e91cc8', label: "primary", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: 'ab097f654aee5417323b55d17666dd37f51ff193', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: 'd7b0a82ca3108c7510a8b79ab02aff5a459b3fba', class: "flex" }, h("div", { key: '25572bd784dd3376909f9be43535d06c1eb34301', class: "w-full" }, h("ul", { key: '27508829cd4240f4b443be77182289c2de7d80e4', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '8eec0e4d1f66bc4a46d3f8f6161230667aa52b81', class: "w-full" }, h("ul", { key: '38e5c24b6a446bc9eb44e2d8c2c9918edda1685c', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: '62cf0cb3a3666bd073876a15ced356a1b786b755', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '61bb1a7b4a226b2a87115ddcacb1e5f7054f7f2c', label: "purple", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '4cade7f04885d8743de7508088453d7266fdb52e', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: 'a85edc64dedaa5a736fdb6005f227dccd7d6e417', class: "flex" }, h("div", { key: '6585c4d28cc0a0c83483e05fc50e2d1eb6543826', class: "w-full" }, h("ul", { key: '5d2cd485f2730f9ecd8f9881660b660a9863f046', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, purple.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '8cc38112f8fc04390309894e03bff57839867331', class: "w-full" }, h("ul", { key: '4fcf267012ae77e4a64cc8f3d41590a0077a71d2', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: '1e5ae9ac4d5315e74c7509bf3ea429f330c80b8c', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '2520f9de5232569e50a16bffab46ff8a7fd07de9', label: "blue", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '3319ed8a5d80766150d4479bb6d360a34e65f2c9', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '4ac76de406d9d3c7d88c743dcb55445030540979', class: "flex" }, h("div", { key: '419a21e058fd90cdb9dbc814cf161d7b9a09ea60', class: "w-full" }, h("ul", { key: '811a0e032cd72ee22f474f2bcf9292cd5c1b39b0', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, blue.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '7a99c481bc4b866fba27af928bec2d1f2d3aef40', class: "w-full" }, h("ul", { key: '903c58130e827d4b2d562cdfcdfc711357faba0a', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: '1b85b22424d7d3a1b91ea28b22c0f35ed11c8292', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'b114668b2ae7e584bdf844738b07eabf2eaf4c1b', label: "redish", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '92aea63995d20c589cd5f93fad0151b1930e676e', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '59f3e6a810cb7d399dd1290021cce9fd92238605', class: "flex" }, h("div", { key: '3f9b86e94966320bcee63999cea9da3b86a725dc', class: "w-full" }, h("ul", { key: '379a6bd45c7745b9fef85e5bfe122a860ead0ce0', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, red.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '0f0d2766a259285042054653bede2d42673e2e70', class: "w-full" }, h("ul", { key: '2e47e7406097d32f4189f9ba52b19689f998a6d8', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
+        return (h("div", { key: '2ece8530e14e2578756ea7a4b7c6de47692ea437', class: "container" }, h("p", { key: '2c1de740ce1273bff57584a89d126996b89a2585', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '3ce5ec41aff1fa649799bb1b24e2c78ce3d5709e', label: "primary", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: 'f067c4b8812fb79ddd8302a6e469131bb5ca2540', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '07216a1e8bc1c8944d7cd266fd88fd779a47af2e', class: "flex" }, h("div", { key: '86594b56c689f5013ad372f61591256b96983d1e', class: "w-full" }, h("ul", { key: '890766f2292df846fddf466b950ad572bd012732', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'c118abd619f14e52c4987a7994603ff61976a30a', class: "w-full" }, h("ul", { key: '68ff730e9d179c7c29701f82f08d0086af20d00b', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: '183bb8155e1584b04b493934edaa437d5cf4b783', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'a040517846fb066a35816d293ac04bc7872b3b26', label: "purple", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '386c5220437d6e6659488e7bef5b3ffe52caf4ee', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '0d63252310aaa25e69938f3347454094d8722071', class: "flex" }, h("div", { key: 'e4afc567b16e421b47d60679f1ea35e6663d06c6', class: "w-full" }, h("ul", { key: '479d5422ddc0fbc7bb7364fd004c91b6091eb23c', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, purple.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'cd991c92db354f80862ae1542396ea32b95c208a', class: "w-full" }, h("ul", { key: 'b88178a45d9f371feab17accb2e7316ef8471380', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: '3777953463dcb70490b0c2ce6c42dc2dcbbf1d30', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '13fe2cb15600d4c8d38cb62537222b7cc254b4ea', label: "blue", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: 'e8156e3295aefedc79483b2f07abeb840980c76e', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: 'a37aa06966858518d02108f3dc62666fdac001ad', class: "flex" }, h("div", { key: '58dd02808202c7a3e1b09b9ca2dbd560e76cd336', class: "w-full" }, h("ul", { key: '0db69e93ff385af493c2b4e6797108d3b20eb4ff', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, blue.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'f7135c48160aec5de8d7a8f550b416e54ea2c7e8', class: "w-full" }, h("ul", { key: 'f0d5d0a49bcc9ea372266683b6c029b427db73bf', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: '0a42fea17681992eec8f8c107b49cc90934730b4', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '17c3efd3b9a55bea075920137d2a58cb910115c1', label: "redish", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '60e5ed7491f4d1814973f6c9f7fbfe8b96626f9d', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '87b6b39208abc11441edc407a81208f4cda8bf49', class: "flex" }, h("div", { key: 'a123aa0926649903d2167293788e02ebfced78b9', class: "w-full" }, h("ul", { key: '2e791bb7cd1c15cccb46942e92a3fa9f6241742a', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, red.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '3b7effab5bce2b76d6ac73c8d2353eb0d69cb021', class: "w-full" }, h("ul", { key: '2412301e05f2f711e5b48f86eff270795f363ee6', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
     }
     static get is() { return "correct-use-of-colors"; }
 }

package/dist/collection/eds-docs-ui/colors/use-of-colors/incorrect-use-of-colors.js

@@ -38,7 +38,7 @@ const incorrect = [
  */
 export class IncorrectUseOfColors {
     render() {
-        return (h("div", { key: 'b427fbd92f4f89e62f36580788385d16f7f5ee4b', class: "container" }, h("div", { key: 'e17b8667edf995fa38982db1fd2dd3e32e3d8ade', class: "mb-8" }, h("eds-alert", { key: '6fc136da4684f38d95031e35ada158955ea7a776', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), h("div", { key: '2848ccb3f69d6eb0bbe644e5620615f475d00b63', class: "flex" }, h("div", { key: '8ab6a087dec45752a3dd31942f6d8595ea52c0fd', class: "w-full" }, h("ul", { key: '2b0d87c54641831b7b9c77af791fb95837061488', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '1748b5ef933d36eaa630dcf892451cf165d91156', class: "w-full" }, h("ul", { key: 'cabcc252675bde368e5d884c870bee4e11a1a7a5', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
+        return (h("div", { key: 'd09d8204f4369476882f0614e96c07c953b34f54', class: "container" }, h("div", { key: 'a80342ee08961192aa3a664f66406b220cd208ed', class: "mb-8" }, h("eds-alert", { key: '242c9bae130e9a7487412da4f75ab30a2db49335', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), h("div", { key: 'f9d60933f46189f848938a5beb1ca5fadfa84934', class: "flex" }, h("div", { key: 'd7f33f14834c5a97aafbdb447f723e1a20b5e498', class: "w-full" }, h("ul", { key: '0e3b7baf000534530164f373884a6957419539a7', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'd0422452dbb56de94fee33562b07867fb9bfd6ac', class: "w-full" }, h("ul", { key: 'e5daf06bbcec1227ccf03b3f3a8a6016a33c289c', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
     }
     static get is() { return "incorrect-use-of-colors"; }
 }

package/dist/collection/eds-docs-ui/components-section/components-section.js

@@ -28,7 +28,7 @@ export class ComponentsSection {
         }
     }
     render() {
-        return h("div", { key: 'a57909fff6c8fc3bc0bc82804595cfb08edf1b9f', class: "container" }, this.renderContent());
+        return h("div", { key: 'a5c54560de99e81caaabafc4342522602ffe35a1', class: "container" }, this.renderContent());
     }
     static get is() { return "components-section"; }
     static get properties() {

package/dist/collection/eds-docs-ui/components-section/functional/overview.js

@@ -16,4 +16,4 @@ export const DocsOverview = () => (h("div", { class: "static-content container"
             title: 'Optimized Performance',
             content: 'By registering components early and lazy-loading their implementations, the script helps maintain a fast startup while ensuring that all custom elements are ready for use when needed.'
         }
-    ] }), h("p", null, "Once included, components can be used in your markup like any other regular HTML elements:"), h("eds-code-block", { code: '<eds-button \n  label="my bytton" \n  intent="primary">\n</eds-button>', language: "html", "copy-label": "Copy Code" }), h("h2", null, "Load the variables and styles"), h("p", null, "To directly use only the produced variables (colors, breakpoints, typography) add the tag below to the", ' ', h("code", null, "head"), ". This approach is recommended when you\u2019re working solely with the web components and want minimal integration. That said, the components are configured to require only these CSS variables and nothing more."), h("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/vars.css"/>', language: "css", "copy-label": "Copy Code" }), h("p", null, "To directly use the produced css framework with a few predefined custom utility classes, add the tag below to the", ' ', h("code", null, "head"), ". Use this when you want quick access to ready-made utilities for building your own components or applications and you do not wish to dive deep to css configurations."), h("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/output.css"/>', language: "css", "copy-label": "Copy Code" }), h("p", null, "Note that, loading either the variables or the predefined CSS framework above,", ' ', h("b", null, "automatically loads the fonts so you can skip loading them separately"), ". If you wish, however, to load the fonts, add the tag below to the ", h("code", null, "head")), h("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/base/fonts.css"/>', language: "css", "copy-label": "Copy Code" })));
+    ] }), h("p", null, "Once included, components can be used in your markup like any other regular HTML elements:"), h("eds-code-block", { code: '<eds-button label="my bytton" intent="primary"></eds-button>', language: "html", "copy-label": "Copy Code" }), h("h2", null, "Load the variables and styles"), h("p", null, "To directly use only the produced variables (colors, breakpoints, typography) add the tag below to the", ' ', h("code", null, "head"), ". This approach is recommended when you\u2019re working solely with the web components and want minimal integration. That said, the components are configured to require only these CSS variables and nothing more."), h("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/vars.css"/>', language: "css", "copy-label": "Copy Code" }), h("p", null, "To directly use the produced css framework with a few predefined custom utility classes, add the tag below to the", ' ', h("code", null, "head"), ". Use this when you want quick access to ready-made utilities for building your own components or applications and you do not wish to dive deep to css configurations."), h("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/output.css"/>', language: "css", "copy-label": "Copy Code" }), h("p", null, "Note that, loading either the variables or the predefined CSS framework above,", ' ', h("b", null, "automatically loads the fonts so you can skip loading them separately"), ".")));

package/dist/collection/eds-docs-ui/design-tokens/docs-tokens/docs-tokens.js

@@ -25,7 +25,7 @@ export class DocsContent {
         }
     }
     render() {
-        return h("div", { key: '176be3a7df15e6463e13db2f0d519dc5dd6c11e4', class: "container" }, this.renderContent());
+        return h("div", { key: '17148efe64117050084010b77d85de64bdfe2000', class: "container" }, this.renderContent());
     }
     static get is() { return "docs-tokens"; }
     static get properties() {

package/dist/collection/eds-docs-ui/design-tokens/token-list/token-list.js

@@ -69,7 +69,7 @@ export class TokenList {
     render() {
         // Check if `show` prop is provided; if not, display all sections
         const sectionsToDisplay = this.show ? { [this.show]: colors[this.show] } : colors;
-        return (h("section", { key: '8fab4b610ad73943d9884c9b091f8ae0b85fec02', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
+        return (h("section", { key: 'c5a0dc7f4e58c77624481262b1a6ac31df5425ee', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
         // Only render sections that exist in `colors`
         sectionContent ? this.renderSection(sectionName, sectionContent) : null)));
     }

package/dist/collection/eds-docs-ui/design-tokens/token-radii/token-radii.js

@@ -5,7 +5,7 @@ import radii from "../../../../../../../../packages/assets/tokens/radii"; // Adj
  */
 export class TokenRadii {
     render() {
-        return (h("section", { key: '990ac7f9b888a50dfefb06d0999c845796e82db4', class: "w-full mt-28" }, h("ul", { key: '447642ed7c23039532564cf640994c1ac9a1d1de', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(radii).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${key}` }, h("eds-code-block", { language: "Utility Class", code: `rounded-${key}`, class: "mx-auto min-w-[200px] sm:mb-4 sm:max-w-[200px] mr-auto" }), h("eds-code-block", { code: `border-radius:${value}`, language: "css", class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto" }))))))));
+        return (h("section", { key: 'd0e212f61414068b55b2ce1a3d9c7c2a51743908', class: "w-full mt-28" }, h("ul", { key: 'f656822bfc1a95bb4435eec2db9573e4362d1c59', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(radii).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${key}` }, h("eds-code-block", { language: "Utility Class", code: `rounded-${key}`, class: "mx-auto min-w-[200px] sm:mb-4 sm:max-w-[200px] mr-auto" }), h("eds-code-block", { code: `border-radius:${value}`, language: "css", class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto" }))))))));
     }
     static get is() { return "token-radii"; }
 }

package/dist/collection/eds-docs-ui/design-tokens/token-ratios/token-ratios.js

@@ -5,7 +5,7 @@ import ratios from "../../../../../../../../packages/assets/tokens/ratios"; // A
  */
 export class TokenRatios {
     render() {
-        return (h("section", { key: 'be577f9c398a29f5bd996a68d102017488f8ac17', class: "w-full" }, h("eds-section-core", { key: '291b8f1692e0ba050c0871af65429db95733990c', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: '2ac59025091444b8e14b5106d8909c54fa8227aa', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(ratios).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: "container ratio-box flex items-center justify-center text-center border-2 border-soft", style: {
+        return (h("section", { key: '0215729c6c798288f74b3e9a589763c8a71c6fd3', class: "w-full" }, h("eds-section-core", { key: '9ac3c1b933b7bb7cc6c8dd9aeface59ba3646750', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: 'd4ae2c487aa2402740dfd1465823fe3d04c19e18', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(ratios).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: "container ratio-box flex items-center justify-center text-center border-2 border-soft", style: {
                 aspectRatio: value.replace('/', ':'), // Cast to string to resolve TypeScript error
                 width: '100%', // Full width to show the aspect ratio correctly
                 maxWidth: '300px'

package/dist/collection/eds-docs-ui/design-tokens/token-shadows/token-shadows.js

@@ -5,7 +5,7 @@ import shadowTokens from "../../../../../../../../packages/assets/tokens/shadows
  */
 export class TokenShadows {
     render() {
-        return (h("section", { key: '481c1eed906cfd2ec0a071fde52bd284dc689583', class: "w-full mt-28" }, h("ul", { key: 'bf3c4068320755df5df76fd40a5f533c2814e398', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(shadowTokens).map(([category, tokens]) => Object.entries(tokens).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: value } }, h("eds-code-block", { code: `${category}-${key}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), h("eds-code-block", { code: `${value}`, language: "css", class: "ml-auto min-w-[200px]" })))))))));
+        return (h("section", { key: '2f8e9eef279ee176ba1c72660181a4a36a184985', class: "w-full mt-28" }, h("ul", { key: 'a5ddc9f6faab20c73b6dbb08364925d3b221e848', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(shadowTokens).map(([category, tokens]) => Object.entries(tokens).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: value } }, h("eds-code-block", { code: `${category}-${key}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), h("eds-code-block", { code: `${value}`, language: "css", class: "ml-auto min-w-[200px]" })))))))));
     }
     static get is() { return "token-shadows"; }
 }

package/dist/collection/eds-docs-ui/design-tokens/token-spacing/token-spacing.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class TokenSpacing {
     render() {
-        return (h("div", { key: 'ccc58496f0918a9da7f1d4412391613f3f568cc9', class: "w-full" }, h("ul", { key: 'e5a8d47319a9c994e7755d3576d71b634ab20063', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '3d0a29e2c91d351ab116ce416e00c42590d035b3', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'd2d85017b45172a0b0b092de400d9151ef539ef8', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '88de94aaba4d635cc525a67542b5d472cd896c5d', class: "spacing-sample m-16 bg-strong" }, h("span", { key: 'b59a5fa9df2d4083fa06c9a258ec5ba5ccf60c0a', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), h("li", { key: '70767120c9cd4be53f96f375fd329703a963b63a', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '855d6bacf1b1423485fbf4a6d57eaae41a7a1444', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '7857867bba76856db7530bacd73f142a2b503c51', class: "spacing-sample ml-64 bg-strong" }, h("span", { key: '14b4241fc260b9d6b690dbd141098dc61a5eded9', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), h("li", { key: 'fa5b994aab19f80b3fa26393844b0bed46ecfa64', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '3c600983badcd59dcf5735e9a4c42c87a306236b', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '77abcf6391bc3fe5f798a7837e12e9f3581213d0', class: "spacing-sample mt-32 bg-strong" }, h("span", { key: 'd4626346b81f99c4690853d00c097d523616db1f', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), h("li", { key: '2ce80fc1b53afa0e157f4b185ae70f16779b9f3f', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '95f69eac2055d60ae42808fa09f4f6a68bdff4f6', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'e553f7c58b018cba77b7141be6142d3c7b34194a', class: "spacing-sample p-32 bg-strong" }, h("span", { key: '13450e5d8c07cbeb640e0b3aea1e526365f0f743', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), h("li", { key: 'dce557ae08a4800fd5d98c91b5675d4839da622f', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '9a134b12e3829b5529921ee24ba095231ea9a70f', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '2f30c7339974f96fa881b43f8b7ec9a018c2f372', class: "spacing-sample pt-32 bg-strong" }, h("span", { key: '663a2b9a903effbd5eb1988d6803934c41a26b93', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), h("li", { key: '363143700c339ab934b466ef9f84f257be3adbbc', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'e72006b92c553dfb7c3df21cbbea3a7234cbf725', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '251e68c910ee1d0485d630fde091e6790183f4f9', class: "spacing-sample pl-32 bg-strong" }, h("span", { key: 'cf2f10404629bf2e7ab10d51b2917361cf93279b', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
+        return (h("div", { key: 'e01032fc0640d466fbf25d52c786c2ad09282deb', class: "w-full" }, h("ul", { key: '067499a0d422c6759393a729018a0e428ac5bb73', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '18811cd88f3627f824c09ed57522b624c905704a', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '6f810ada1266d71181c85ae01f6d0f03d74c5d62', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'be8c8193dd759eb651230904f482bdd29ece17d9', class: "spacing-sample m-16 bg-strong" }, h("span", { key: '3275ae8d2dcc26a097fcec9e47e865d122e8a7a0', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), h("li", { key: '1501280856acd0f86ed6d18deb2994e2b938d550', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '9c6bd09fb408bf28e1ff7259ee82858657055d53', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '66ce0e318e1ef01c95634678d8dad929261c3559', class: "spacing-sample ml-64 bg-strong" }, h("span", { key: '746c47d3d838c4a2afc3e33f97ea92e4152505a4', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), h("li", { key: '1e743a6b9907f8d533b6bb0e47204ca9f2ac1540', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '9b127a0fc072a67d2a03af42718407f7c570981c', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '603d387bfc95e7eaaa688d9bed69d17dcdbeb023', class: "spacing-sample mt-32 bg-strong" }, h("span", { key: '19105f04e3571991899dcd237a2e88285200fa2a', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), h("li", { key: 'a4bba328ebdb74767c06aed1ddf90251ff53c774', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '8c0ddf065902880ea676a0178d8d384696d11d44', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'c73eb82ac1b447d2441be39f1e07e4864bba2a49', class: "spacing-sample p-32 bg-strong" }, h("span", { key: '6c76e373c0827ed4449abfd0fa1b69db2e02ef10', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), h("li", { key: '23699817570e914c03849e8bc5ab3c72b732470c', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '253d94e4ddabd622302bbc38a5e866b9a9dc8826', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'c366056f299a7fd53eb589cedbf8f40aa996d032', class: "spacing-sample pt-32 bg-strong" }, h("span", { key: '22b94a1f3f4605af8f11dcd10b03f112ad426798', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), h("li", { key: '18418c7ea84aaaefe187e484774e96d5233946ab', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '953b9ebfb47560f768bdf606fdc455eae18fa351', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '1ee32fc2918a078e421e0641c84e76c2bf48e839', class: "spacing-sample pl-32 bg-strong" }, h("span", { key: '15f50b76c805eb9fc1610d8027cd710f6c8c89b4', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
     }
     static get is() { return "token-spacing"; }
 }

package/dist/collection/eds-docs-ui/design-tokens/token-typography/token-typography.js

@@ -5,7 +5,7 @@ import typography from "../../../../../../../../packages/assets/tokens/typograph
  */
 export class TokenTypography {
     render() {
-        return (h("section", { key: '62bc664d442830ac40bc6aae9a5dbd38f5d18f05', class: "w-full" }, h("ul", { key: 'e8a97077420f77631e75ec99e14b22fd77a36c11', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
+        return (h("section", { key: 'a50023eb5ce02aebb63994e4319450f3a330617d', class: "w-full" }, h("ul", { key: '757a1845f16da440eaa8ba332b39f62ccb69ed89', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
             .filter(([typeKey]) => typeKey !== 'displays') // Exclude "displays"
             .flatMap(([typeKey, typeValues]) => Object.entries(typeValues).map(([size, style]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-4 block lg:flex items-center border border-soft rounded" }, h("div", { class: "mr-auto hidden lg:block", style: {
                 fontFamily: typography.families.sans,

package/dist/collection/eds-docs-ui/docs-palettes/docs-palettes.js

@@ -17,7 +17,7 @@ export class DocsPalettes {
         }
     }
     render() {
-        return h("div", { key: '5ca77a86d54849aaed6f2d716a66a429e6df45b7', class: "container" }, this.renderContent());
+        return h("div", { key: '8ef26f3be50f9083f1430ec0c9dbf5213ac1268e', class: "container" }, this.renderContent());
     }
     static get is() { return "docs-palettes"; }
     static get properties() {