@ebrains/components 2.0.0 → 2.1.0

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

@@ -30,11 +30,6 @@ button.switch {
   transition: background-color 0.2s;
 }
 
-button.switch:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #007aff;
-}
-
 button.switch.switch--checked {
   background-color: var(--green-500);
 }
@@ -66,4 +61,19 @@ button.switch.switch--checked .switch-handle {
 
 .mr-8 {
   margin-right: 0.5rem;
+}
+
+.switch:focus {
+  outline: 2px solid #005fcc;
+  outline-offset: 2px;
+}
+
+.switch:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.switch:focus-visible {
+  outline-width: 3px;
+  outline-offset: 2px;
+  outline-color: var(--green-500);
 }

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

@@ -15,19 +15,41 @@ export class EdsSwitch {
                 action: 'checked'
             });
         };
+        this.handleKeyDown = (e) => {
+            if (this.disabled) {
+                return;
+            }
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.toggleSwitch();
+            }
+        };
         this.checked = false;
         this.disabled = false;
         this.labelOn = '';
         this.labelOff = '';
     }
     render() {
-        // Compute an accessible name based on state.
-        const accessibleLabel = this.labelOn || this.labelOff ? (this.checked ? this.labelOn : this.labelOff) : 'Toggle switch';
-        return (h("div", { key: '1de6f7afd451f5d0276b62ef7bbf817f132e4440', class: "switch-container" }, this.labelOff && h("span", { key: 'd2d1017d7d26537eb2e65fa74b1f86453edc93d2', class: "switch-label switch-label--off mr-8" }, this.labelOff), h("button", { key: 'ade3ba909f5744a2b87238da52fcc33f600721cf', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": accessibleLabel, class: {
+        const switchId = `switch-${Math.random().toString(36).substr(2, 9)}`;
+        const labelledBy = [];
+        if (this.labelOff) {
+            labelledBy.push(`${switchId}-off`);
+        }
+        if (this.labelOn) {
+            labelledBy.push(`${switchId}-on`);
+        }
+        const accessibleLabel = labelledBy.length === 0
+            ? this.labelOn || this.labelOff
+                ? this.checked
+                    ? this.labelOn
+                    : this.labelOff
+                : 'Toggle switch'
+            : undefined;
+        return (h("div", { key: 'f4c99a2ec360af6030de11698bab82833b3f415f', class: "switch-container" }, this.labelOff && (h("span", { key: '8bb8d063e744c194c0d44a0c371ae8224f9611cb', id: `${switchId}-off`, class: "switch-label switch-label--off mr-8" }, this.labelOff)), h("button", { key: 'ccc49c8ac6f639707c90822e24f3ae3ab8f2c26c', id: switchId, tabindex: this.disabled ? '-1' : '0', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-labelledby": labelledBy.length > 0 ? labelledBy.join(' ') : undefined, "aria-label": accessibleLabel, class: {
                 switch: true,
                 'switch--checked': this.checked,
                 'switch--disabled': this.disabled
-            }, onClick: this.toggleSwitch, disabled: this.disabled }, h("span", { key: '64034f73021623f63523c7bb52ec5233ad291c55', class: "switch-handle" })), this.labelOn && h("span", { key: 'a96a35565ac28ed6a27855b90b180f15adb0e711', class: "switch-label switch-label--on ml-8" }, this.labelOn)));
+            }, onClick: this.toggleSwitch, onKeyDown: this.handleKeyDown, disabled: this.disabled }, h("span", { key: '2275930bc9909c0a95c6c10e28f715fe1afe9294', class: "switch-handle" })), this.labelOn && (h("span", { key: 'd789fd15943c1fadf1f87c55059261eaf5e05a8f', id: `${switchId}-on`, class: "switch-label switch-label--on ml-8" }, this.labelOn))));
     }
     static get is() { return "eds-switch"; }
     static get encapsulation() { return "shadow"; }

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,17 +156,6 @@ 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;
@@ -197,7 +210,8 @@ 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
+        return (h("eds-button", { label: act.label, icon: act.icon, pill: true, size: "small", intent: "ghost", tabIndex: 0, onClick: () => this.emitAction(act.name, row) }));
     }
     emitAction(actionName, row, checked) {
         sendAnalytics({
@@ -243,7 +257,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: '87e7cc3c87618ede91bb51d7a07cd597a438d6c5' }, this.searchEnabled && (h("div", { key: '6b77700a913e272eef4c932d40c5c5d001ff6b5c' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))), h("div", { key: '6f2ffc7a3ba2cc8e8194670a7ecb9e237f7dc60a', class: "mt-20" }, h("table", { key: '0227d3029f30ab9928cd01ba8dc2eccde2073f47', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: 'c1f844d8413b596d5ca07d6b79ebd36c8a17f51f' }, h("tr", { key: 'caadaaf66314e3ea7d47a748b6e899389a7e2d55', 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 +266,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: 'da9286063f16a5c346ce8854361cb15573166a19' }, 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: 'b7e7991225cf9fb16ca882dc42c7adead202aac5', class: "mt-20" }, h("eds-pagination", { key: '011f209f89300357e6052ee4d118f353419d5a45', 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 +315,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,

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: '939fafa4bc525b747956931f49b27e6125ecbb34', 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: '3abe8b96a25fa575acc503eafa345c63b0c4c971', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: '23039a03d10a38aa96310be6456283b5d36041e7', class: "relative" }, h("div", { key: '2bf447e7dd77a33b953ee1c7b49c72bb3e79a938', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: 'db44af20a0e09666b402e77ec739262a3506da48', 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.js

@@ -19,7 +19,7 @@ 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: 'ee76b787881bdaef986b73fb2775c900a8c33d05', class: "relative w-full inline-block group" }, h("slot", { key: 'a5f9ade50e829efab02ef28ecff3edeedae9d469' }), h("div", { key: '31bdc63d6263090578f6600ae32027c2b050b2bf', 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

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: '51e2ef0877ef34a3c413d8bb690d659525845a92', class: "container mx-auto px-4 py-8" }, h("eds-table", { key: 'b682cb9ce8182302b82042173fcc93aed65f7006', "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: '1de5ded5c58ad27b388c8c1af7938944cbea5096', 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: '8346b6b6278e8e0c837722d760aa314586ece7f4', 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: '70965eb05a6b535bf4477e7413f7fd681c4f9768', 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: 'af35aa4016013cbed62463881c380330f80066a2', 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: '8a494bd6783e8138f33dcfd37498fd69b249a2e8' }, h("ul", { key: 'a2e6c31c2e2f3745ce1e4c01cc9afae02e8ebb87', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '4ed12da885c34a07657aef2a841c87a37ae9c8f7', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '337f66d14b0ce65b19f198b7efaf9230ca50b82c', 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: 'c8c692658db9434f57e5ac264c3c9064910e9661', class: "grid" }, h("span", { key: '9fd7ae1b75ff6b6c807dbaad783f6495dc2dd9bd', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: '9d4e59b1fab74ff781c8d73db3dd468b10ce0455', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: '96f8a8fa41459228e4d8097a616926f85765cf39', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'd7a68794a9682b619be1e087c983149d491c96db', class: "grid" }, h("span", { key: '58bd1ad1029c3b121ac0d4bb5c70ae303e0352bb', class: "f-body-02" }, this.colors[0].pantoneC), h("span", { key: '3193953b5f25d007cf19d93a1f68f20404687f1e', class: "f-body-02" }, this.colors[0].pantoneU))), h("div", { key: 'cfbdd6e419b1616438c6331a1d25c18c4425acd8', 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: 'd7cbace55477934af72160da781b7a8e3aa8e06a', class: "grid" }, h("span", { key: '92751b8b5769b239e36ac130e339f8e360727cc4', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '82fe5bf3213d8d581322b33fd5e71edac1c88fb3', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: '898008dc0c37aa6dac6cc41f2034cddd65768c14', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '4e447137643b72b3c6bf7c77d9487db3b6565774', class: "grid" }, h("span", { key: 'dd6377e2669c91b70681faceef9a1a2e85aacc36', class: "f-body-02" }, this.colors[1].pantoneC), h("span", { key: '06fc395fb9c0caf71d889031d5122da97c2d437c', class: "f-body-02" }, this.colors[1].pantoneU))))), h("eds-block-break", { key: '7be7b3c75d184f3aa717f6319aeeac025760122e' }), h("ul", { key: 'b97e4bde35db0630a312b97d501ce1c59f0c3e14', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '6a92a1a7d3e3680901e18dd48eb6658f4fb0fb20', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'e90a2a1cae3c1cde6b4326b56b72c61e1892140b', 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: '61b77e314f1b0ba1a2091c8095ec202532c18606', class: "grid" }, h("span", { key: '03dab364cc0dfec33698c44a204c454fb541e212', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: 'e691950b5345a2ede462f4e83cca168bdeb9ec15', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: '0221d7e314a813dc2c5b79911951bca9c0b41b25', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '3a0a7685f28da21ad72e03fde2466ef261d732c6', class: "grid" }, h("span", { key: 'cb7b332c10b45eb9fd5db2d3fd8042e2bad64466', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: 'a2ce20d6c1f79933e63286f21cf2a2b46bae7c77', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: '22accd3b0973aef372c31e6e1f9098c20af0fe62', 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: '20ac41e5ab5abf006915a588948b0a80ba6b6500', class: "grid" }, h("span", { key: 'c45d31d03b5eed96970e573ffe9d6d7b0a4f55f2', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: 'c8615974f6fefcce9236f1dab2aa05acf79f476e', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: '4edca81579a78d5a981abd588d614e92b41e80f2', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'efb4443370dc4577f4bb0638f7189d8ebb41f7f6', class: "grid" }, h("span", { key: 'e6859deb262bbb09411b23a829461a13bca7036c', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: 'a7b10ce34dbf351ed7c9ffddae8a078af2b2dfc7', class: "f-body-02" }, this.colors[3].pantoneU))))), h("eds-block-break", { key: '1e7693f7830a8b23fbfe88a4db8ce86b8d0685f0' }), h("ul", { key: 'e968be89adb2e35e19b3c6b373b6e12f4e746a16', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '96c60c4a9e257a292782d9effc9f0c72abf11b9e', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'c4568e420e1aa059777280831c2384eab3d92bcd', 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: 'd6deb40f0bc0f42ba8dc5ce1f81f0ddffac1909c', class: "grid" }, h("span", { key: 'dfe457e42121384072c1fa914a4b20dc4b838d01', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: 'ff18c95c23f62a02e56f017a3c4fd135942ca475', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: 'bd2c5dc66d42965991741eaa399c620dfd7ccd8e', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '95a9105cf2f1c2ce4f585d20cd3d7f51ab176860', class: "grid" }, h("span", { key: '205d05eef3ead993524a70a6da8a1b99293d325b', class: "f-body-02" }, this.colors[4].pantoneC), h("span", { key: '8bd0e5c38a50e61d1c4743b069ac33bbcabd6a90', class: "f-body-02" }, this.colors[4].pantoneU))), h("div", { key: '1e23753de89b1954149cc3855dd18c35d8eff021', 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: '89d94b65035bede7a8e6783ce12b28f0d19bc517', class: "grid" }, h("span", { key: '68b5166da0440b8b71a353f112151f87ce5f0863', class: "f-body-02" }, this.colors[5].rgb), h("span", { key: '5c5440685df35b5d7a46c3aaca50f34103d227da', class: "f-body-02 w-full" }, this.colors[5].cmyk), h("eds-code-block", { key: 'bf98ce42ca5c85792f69233aa9339b76e404355e', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'd3405eb9f4b55be2ca453857006b2e168f55b723', class: "grid" }, h("span", { key: '7c5cc7a21f351c7054113feb2d08c73aa433b729', class: "f-body-02" }, this.colors[5].pantoneC), h("span", { key: 'ab88dec48dc6bfbcf0ae6952bdc83898b9f3fe01', 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: 'cd8f1b760d9d12703e63d444206cd7cb8272dc23', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '4e06317b161b310f1d0a6c03ec4511e30121a9d1', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '09ee064b51f1f60eb94449a81889fcc1b04b034b', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, h("div", { key: 'd03882aca184094d6bd6c7c1847fd825b5df391e', class: "grid" }, h("span", { key: '56401b8b651fc59ab649017e24072b7aa9e66b09', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: 'f438f24aa6caee90e0aa8b45a8e3ef3905115165', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: '1185f4d1820c900e97e376aecfdb15c079bf47d6', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '81e189f2d4d59444419b4323595f233b5a7dd5c5', class: "grid" }, h("span", { key: 'ed9c1690bc1a39a4ca10922d6954987025b75ab2', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), h("span", { key: '389c2782c0a19abdaa8bcb3bec35b08f7dc49699', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), h("li", { key: '224ddf84a71da323318a93aed512785d765ff78c', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '6f65b95fafa248d35f3bbc6b2ca1796e75d5c75d', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, h("div", { key: 'a5f7ce54255461e8955b770ba045873c4337317e', class: "grid" }, h("span", { key: '344026348686a6c356012bddcb6019d2e33d2d1a', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: 'd21a077ed8b57fc7b03d3c9e8aad84a1d6921b7e', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: 'dfc3a8574e020c3e140a582e2f6548d7df18fc2f', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '370a21f614bfa27de7cd920d33a4bda8271cb9b2', class: "grid" }, h("span", { key: 'dcd05c27f71e94ab52ab88647d7c16bdd8cb6824', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), h("span", { key: '3f596aa4db89c9444ab19a1fe6130532ea7a18de', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), h("li", { key: '4360df4a8f5439fef848bef1aff0ba7e907c0873', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '7559365a22a412e249f860b2ccd42a40c686575e', 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: '3027a68e48323ad82a7b9507902d43d3ebd5a9b5', class: "grid" }, h("span", { key: '6889a4ba793f3f82c90e2b1b87b90d1d1e9fc551', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: '688e28e641c900a105605e8f6dd65efe8d1c663a', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: 'f344601cb7b1c0210478c4c8297365655d1db5b3', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'bbd401b28071a53db3e2648545c6de8004da98cd', class: "grid" }, h("span", { key: 'e7eb3868b58336671fc8862b2dd67dd8c664b6d2', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: '97c2788da2fed4b22f11057d13ea2bd6f6041f9c', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: '8ea814cb2456d959a510b3bf2fe1348a796bf390', 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: '4a223c4bad5b21ff8f80dcbca228a66500ab6a87', class: "grid" }, h("span", { key: 'acfb82921e62c37dc091a10b2f093c41d50c32da', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '1d8a0866567e954772be7fc950579a62aa719ade', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: 'e8fe52aefd86c81713f08bcd1cb8f27789bd9ca1', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '9925c5173dd15f16fe2b08eb522adf0d8ac37ef1', class: "grid" }, h("span", { key: '78f7131ca9a960688c8957a79c4033573f7cfee1', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: '0fb4a0cfec9531e0e00b2d749d66ae6696a6db4a', class: "f-body-02" }, this.colors[3].pantoneU)))), h("li", { key: '017c338c94189ad75c79ff9db903d18246a4af80', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'd75b7e97684b6ffe19bfcfdb8315f771c42de0f1', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, h("div", { key: '63b0fc0c825edcba9f633a5b6972fdd72574ce3b', class: "grid" }, h("span", { key: '389132cc0be0358b4805356ea216a9cfd4297514', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: '902d41927973b8bf690cda7ca701a103f91dd511', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: 'f9fffe844840148e801e3b1c1c2891b2bec96bf7', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '7ecb1dc3d5e0c63cf191b1300f19cd88489e9bed', class: "grid" }, h("span", { key: '9233731334557d6b37d96d9d7e328cb9b24e2766', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), h("span", { key: '5030f6c36dd0e07785c0f11092c9452d80763101', 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: '6a68ca6961f662740e3981dc788b99e3d4a0d420', class: "container" }, h("p", { key: '3b7f675d96b1101c2d2a623082ab1987e06754de', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'cd4b48453834b32cf70aded20b3ebfc0109732cc', 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: '9c2d1c2d669bfef26b0ea45b113f727420d4a8c5', 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: '651d2e4bce17a2740372c1b56e772f12c906e45c', class: "flex" }, h("div", { key: 'dd7b40bf2c9be26367cf4d65df0e93d5590b34e9', class: "w-full" }, h("ul", { key: '62cb53477517807ad9535ca3b4474cf115f5ec03', 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: 'bb8be387a4abe956a4941db1b381d25eee435453', class: "w-full" }, h("ul", { key: '60834108dbdcc6872ff5cfd1509f08ca94847854', 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: 'b3cdb208264e8d62b144dc9eb912501d3d59e35d', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '8b358d8027c603aab384028568acfba889df7f25', 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: '9712b5e1c2433f9b707469e4d9fde547ec14f7d9', 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: 'cfb5e4ada2dab6de1e4df810f9eaae0abbabd864', class: "flex" }, h("div", { key: 'c83e1bcd91700f4fc9eada969f9d349b6976b835', class: "w-full" }, h("ul", { key: 'c0c6a2a223013a5cb7b0545d59eaea8b66454f65', 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: '7b1ce7da35db835a2db620c0b4d97199f85070e5', class: "w-full" }, h("ul", { key: '2a2f9e1d29a523d5b419ae27aa1df8f892f440e7', 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: 'c6746faf400941b4eb92eb2b520a3a817615da9d', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '89405406d127380e8b5872357cfba121a17adc3c', 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: 'a7c21a6afb1eb69e9e4cb5046f65c9a4fb193837', 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: '6097c0091a2c06e6e9e9e13db41329200a78d2d6', class: "flex" }, h("div", { key: 'e8c272ad9b1066500d940044fd86a6c6dc52264f', class: "w-full" }, h("ul", { key: '2902c01c108d7893d7e30e6401560034a2ed7a0f', 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: 'eca739bb09d6b509c1433069595a7e6fe9be38f2', class: "w-full" }, h("ul", { key: 'cf0578a5943f54a98c6433e584397c0787ad0b4b', 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: 'ead17e9a75227b4731116506bfbf9a2c656b37a9', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'd4e615ea5cc1c0a144ef0c2e0bd019ae9d58e3e8', 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: '52fe22c1055d44e4b6d772c0863abb72ffa49b5b', 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: '28487bfa952d4b2611ae1b03f71fdc6d5c46f2e7', class: "flex" }, h("div", { key: '5cd6b4413b345bc81a69fcdfc0a723e4f1c2f438', class: "w-full" }, h("ul", { key: 'c9ef7fe0eff085bb342d501f6505435220985214', 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: '65a67a40bc7cf64c19bbb1448813b1c34633cc60', class: "w-full" }, h("ul", { key: '4f26bdccba86cba74da820c500f630d88b846631', 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: '99f72ce6be806d58cdbe053d86a07e7769e7c298', class: "container" }, h("div", { key: '4689bc35f56681d07747158f45bed8960bd764bb', class: "mb-8" }, h("eds-alert", { key: 'bda983921ff3779dc947d13ff7b3c4f0509154ea', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), h("div", { key: 'ef02b05fb6fb761cae3cc5120478d9670ae65508', class: "flex" }, h("div", { key: '968ccc8bc1acec2856325c921d737f0ac2d0e26d', class: "w-full" }, h("ul", { key: 'aafe0547a6f6185216cf5ba08cca1e5ed97f7fb8', 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: 'f8af94ee21c7ed37b177fa3b5285e9bfe76e8e46', class: "w-full" }, h("ul", { key: 'ef52e37263e0bfda9d631f7aa6abe2074cbebe78', 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: 'dc274e3d76a296c8a8b18abcc4fc8741a6b9eddd', class: "container" }, this.renderContent());
     }
     static get is() { return "components-section"; }
     static get properties() {

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: '86455a5f05b74d8d751a5d17ecf58c0046e8d0a3', 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: 'b8b778fe87179f77bb71705d89026c500b0293fb', 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: '584f5f90e1e3813692870fbd8fd382956729dbf1', class: "w-full mt-28" }, h("ul", { key: '81786b7835d62739d6ec034609e77209e15e3b38', 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: '255775984f1d0edd52f48814776dfb5739b4885e', class: "w-full" }, h("eds-section-core", { key: '7fd28e74db00800fcaa4adb13dd6b0b9cace371d', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: '1e4c0af9a699e69c5bc6c86df821c457bb20614a', 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: '8ca055cb3616c9bc3f6e8c1032671ff53a540156', class: "w-full mt-28" }, h("ul", { key: '7b72868285aaffe0f31628b5ab142e39aaccd964', 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: '9967174337c771b175eb51d9cd77ec227071178e', class: "w-full" }, h("ul", { key: 'db8df572ea997ea83600cb522c761ec5c99788bc', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '25a7b31970e56ce8ff62c81a69daac121984d9d6', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '1a1dfa005e39237c2fedb210c0082293770387c6', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '473024ed6927d1a140eee0e021af92790c3ec5b0', class: "spacing-sample m-16 bg-strong" }, h("span", { key: '7b691bf830943134160396ddcd8f71e419eb29e2', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), h("li", { key: '38f1d4d7e78b1efdbc55cf732b6be2ac3a62b5b7', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '3a0fc8cdfa13bf0998a4829c36a74b17a6ee2314', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'ec730379e1041a68c9d980bb6b5d4b16560debb0', class: "spacing-sample ml-64 bg-strong" }, h("span", { key: 'fd6f3ab787f1d43fb0b060e8408a1464eacd9875', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), h("li", { key: '60a45420ca9cd7f4dab1524c8d6be31b39295b0c', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'ec433621396341959df05dd4becf2844c4266ea5', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'e2ae2d3a3f0eb5226fae09d70eff099ed79ca0e6', class: "spacing-sample mt-32 bg-strong" }, h("span", { key: '1da10931bb4dae62a1a1c020c89463634a3c1630', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), h("li", { key: 'f2f6ff5c992df7d4d426a3488cb7aa7ad9b7bc85', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '23700500e04f2ec99fb5329092b7e430f7ac4274', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'bc304e082326c02787a62681fa86d20382fbb2d7', class: "spacing-sample p-32 bg-strong" }, h("span", { key: '32692a307c58603ac232bb1004b88e0b5bff0c3d', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), h("li", { key: '6fc5032427724389d29d200347e3f5de984d6ec5', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'f66687c53866291f4f455153e34813d53bbb6d68', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'c4305cf37d1f08f50be085664d9a4da0c4859805', class: "spacing-sample pt-32 bg-strong" }, h("span", { key: '4bd0c2056950a34d119c11ffd04e1dce1b8136c5', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), h("li", { key: '67053133a6c121e02b7cab1da4cf4bc025dcc28d', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'dc7c1198e284eb0d71d183017e99fca72c3fb2a7', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '3e69f16b8673007197f18b736e07a9e2c86e7eeb', class: "spacing-sample pl-32 bg-strong" }, h("span", { key: '5a112de1bf2ce66ea278da76b8890aff02cce8af', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
     }
     static get is() { return "token-spacing"; }
 }