npm - @ebrains/components - Versions diffs - 0.2.0-alpha.0 → 0.3.0-alpha.0 - Mend

@ebrains/components 0.2.0-alpha.0 → 0.3.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (262) hide show

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

@@ -7,13 +7,23 @@ export class EdsTrl {
         this.applications = undefined;
     }
     getParsedApplications() {
-        try {
-            return JSON.parse(this.applications || '[]');
+        let apps = [];
+        // If applications is a string, attempt to parse it as JSON.
+        if (typeof this.applications === 'string') {
+            try {
+                apps = JSON.parse(this.applications || '[]');
+            }
+            catch (error) {
+                // Uncomment the next line for debugging
+                // console.error('Invalid applications JSON', error);
+                apps = [];
+            }
         }
-        catch (error) {
-            //console.error('Invalid applications JSON', error);
-            return [];
+        // If applications is already an array, use it directly.
+        else if (Array.isArray(this.applications)) {
+            apps = this.applications;
         }
+        return apps;
     }
     calculateProgress(currentTrl) {
         const maxTrl = 9;
@@ -21,37 +31,35 @@ export class EdsTrl {
     }
     render() {
         const apps = this.getParsedApplications();
-        if (apps.length === 0) {
-            return h("p", null, "No applications to display.");
-        }
-        return (h("div", { class: "container mx-auto px-4 py-8" }, h("table", { class: "table-auto w-full border-collapse border border-gray-200" }, h("thead", null, h("tr", { class: "bg-gray-100" }, h("th", { class: "border border-gray-300 px-4 py-2 text-left" }, "Application"), h("th", { class: "border border-gray-300 px-4 py-2 text-left" }, "Current TRL Stage"), h("th", { class: "border border-gray-300 px-4 py-2 text-left" }, "Progress"))), h("tbody", null, apps.map((app) => (h("tr", null, h("td", { class: "border border-gray-300 px-4 py-2" }, app.name), h("td", { class: "border border-gray-300 px-4 py-2" }, "TRL ", app.currentTrl), h("td", { class: "border border-gray-300 px-4 py-2" }, h("eds-progress-bar", { value: this.calculateProgress(app.currentTrl) })))))))));
-    }
-    static get is() { return "eds-trl"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["eds-trl.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["eds-trl.css"]
+        console.log('apps:', apps);
+        // Map applications into table-friendly data.
+        const tableData = apps.map(app => ({
+            Application: app.name,
+            "Current TRL Stage": `TRL ${app.currentTrl}`,
+            Progress: (h("div", { class: "w-[200px]" }, h("eds-progress-bar", { value: this.calculateProgress(app.currentTrl) })))
+        }));
+        const tableConfig = {
+            "Application": { "format": "code" },
+            "Current TRL Stage": { "format": "text" }
         };
+        return (h("div", { key: '71e903734b5cd1ef74bf93e8fcdc57afacb51f07', class: "container mx-auto px-4 py-8" }, h("eds-table", { key: 'cb8e4324c9c8481dcc2daf74f06c6928257e6f8b', 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() {
         return {
             "applications": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | any[]",
+                    "resolved": "any[] | string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Accepts a JSON string or an array of application objects."
                 },
                 "attribute": "applications",
                 "reflect": false

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

@@ -33,7 +33,7 @@ export class ColorPrimaryPalette {
         ];
     }
     render() {
-        return (h("ul", { key: '20dce1081c2a9213d9df3bb19f14445881892809', class: "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: '581f0978ebeda33a156d2baf3cc41a10897da1cf', class: "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 CHANGED Viewed

@@ -58,7 +58,7 @@ export class ColorSecondaryPalette {
         this.show = undefined;
     }
     render() {
-        return (h("ul", { key: '1eb0e9d0b681be4049209e60ab72bfd36cb09731', class: "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: '7f2e8e7efa207bedaa1e19c0f7d87459a5c22693', class: "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 CHANGED Viewed

@@ -49,7 +49,7 @@ export class ColorSupportPalette {
         ];
     }
     render() {
-        return (h("ul", { key: 'c3dfdc3ab9ac3dcfbe1b82c7725d548d9f10a7ad', class: "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 || 'N/A'), h("span", { class: "f-body-02" }, color.pantoneU || 'N/A'))))))));
+        return (h("ul", { key: '6cd3d5f3128a49e9ac77abc11f46ca880bc6c195', class: "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 || 'N/A'), h("span", { class: "f-body-02" }, color.pantoneU || 'N/A'))))))));
     }
     static get is() { return "color-support-palette"; }
 }

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

@@ -33,7 +33,7 @@ export class GradientPrimaryPalette {
         ];
     }
     render() {
-        return (h("ul", { key: 'f943b364e509b687251bc9f75a6de5292f31533e', class: "gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
+        return (h("ul", { key: '922dbe263e6db86ed17d98d65d38e1d6f4ef25df', class: "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 CHANGED Viewed

@@ -57,19 +57,19 @@ export class GradientSecondaryPalette {
         ];
     }
     render() {
-        return (h("div", { key: 'bdc18e3d665665553343829c723199b442e19d45' }, h("ul", { key: 'd8eaca9e80b609d02bc8110f18df5e160df31a82', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'c5aebad3d86550c6cf1a838df3e8c9ec9747cb66', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '23b9e4b23e828626a764ef259015b9d257bc0c0a', class: "effect-height flex items-center justify-between p-16", style: {
+        return (h("div", { key: '29353679b15fce11ec2e357704cffd6a2d1389d4' }, h("ul", { key: '7a262e1c8f17226c6639a00e1829d4f0927f988d', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'f3dfcbe6da3ee882ae9100f95fe68788cd82195f', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '83e3ac5d6f64e18e38e179251d58ff3ed23019a3', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[0].background
-            } }, h("div", { key: 'a91c4fa791b2047cc5269c7904a128850e4d0fb1', class: "grid" }, h("span", { key: 'cf468a9a5668b8985bfb017c388700aa15004c14', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: '562785dd94ded6d876aa99255996dcdb29ab1697', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: '1864b7d5a62e7936b23c6db3aaf2265e1b7e9d05', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '21c102281f3d0190931f4c51ceec86bb6d47f329', class: "grid" }, h("span", { key: 'f6f6afb11df2a294083285ddd4f571e36693490c', class: "f-body-02" }, this.colors[0].pantoneC), h("span", { key: '0e14a45108fe727bb8be3035138eb5b814417062', class: "f-body-02" }, this.colors[0].pantoneU))), h("div", { key: '2d4142003fce425659f61711f1d6f1c99883753e', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: 'ebc2424dd2950cc2704351456d4d974051e0dd93', class: "grid" }, h("span", { key: '3fdfb110070a8795a1bb1aea12447bc2556937cc', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: '0b929d1ddd40e67bc8cd0248fc7bf0c0f8a11cb7', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: '3f4ab8d6b91afeaba20c273b8ede74593d452bf0', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '80b6a23a151e6b71630071f2d51c03e6b8c957ff', class: "grid" }, h("span", { key: 'c86531490e51f5559d4293bc75bb2477d23d1593', class: "f-body-02" }, this.colors[0].pantoneC), h("span", { key: '5bbc4e02eb2845508c6de7715f5fe202a36249a5', class: "f-body-02" }, this.colors[0].pantoneU))), h("div", { key: '050d2770d4c2e6395dc5350c9f29860ecf3d7e46', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[1].background
-            } }, h("div", { key: '4d2d09712751c9c9a6d65b5fa17b940c2052ab22', class: "grid" }, h("span", { key: 'd114fd9cb9b365c5c671e5949437d666b82ad565', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '185b7450294ffe29066af38007e0c49ef63e076f', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: '351efdce5d3fac3feaf0bf2f7893dc27c2d75342', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '3bf2699a9868e389f992ff48d4c39d488a4abbfc', class: "grid" }, h("span", { key: 'a681050804433e72304d96ec086fafb8cbc51173', class: "f-body-02" }, this.colors[1].pantoneC), h("span", { key: '95c9809b141e92a409a5a627ceb768520c9c4ece', class: "f-body-02" }, this.colors[1].pantoneU))))), h("eds-block-break", { key: '66ef5f885a5c19fafa1b0fff70d1b9030a7134b0' }), h("ul", { key: '64c01dd159b84674852efb2fe3745408bae602d8', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '3f26394aa89b38a2da75745a2e10cd667b384794', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '02175a5dee1685aa806f7f11f38b1fc10bc3e39f', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '20a5a6748573d6e059ec81d00a737355cfd7f934', class: "grid" }, h("span", { key: 'a63a0ea4301f11e4984f3749c087041acedb94b4', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: 'd986ecee52e15de1bbd58c48109f8c89d0cf19a2', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: 'd35bb3c1cb26aa9a3828cecfde1b32f428e8b1af', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '8a616b789a99d3721ccc1f102131c2aba1951106', class: "grid" }, h("span", { key: '03d172bbc56a4535d20051bb2ab1bfb4c0889586', class: "f-body-02" }, this.colors[1].pantoneC), h("span", { key: '66f1656d1d41f1616175285cf8f7e7089c9f2657', class: "f-body-02" }, this.colors[1].pantoneU))))), h("eds-block-break", { key: '85a7244a69f0d3af26ea5f148917183e2431140e' }), h("ul", { key: 'eb44b6b21fc75b1fd22e1aee42fac1aa99155b0d', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'ecb50392387996034d1f4211d5336d2071927844', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'f45bf292bf11cb440731ff7bc67e5b364cb7b6c1', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, h("div", { key: 'f32d9cfe7b4f685cd763c782978f74e5e9a89163', class: "grid" }, h("span", { key: '553c770c44856f9cd9c1889469d23cda5f287cc0', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: 'bbf13e0c6a19b0e916fff6c9d327a647e7a6fbf8', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: 'b06f51bea3fc1e9163cc05db89394eba7043f6c7', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '3aa123886f1a945552885d37698229f5cd0a2966', class: "grid" }, h("span", { key: '3016782b49158e04f6d45ad64cee65b39e878fa4', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: '21d1948bdaa6bfbb6089657f74ee8fa0ecbebace', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: 'f47d2389491869cd32b738a3b90018115afbcb54', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '981db4da9bdbc0f60ba6e8fd83840101a815550f', class: "grid" }, h("span", { key: 'd6aaf058991f0d7e1c4d5d7bfa17b0342880cb9c', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: 'cd63d8d64b9fa30f7a568125f61d3735c3596f0b', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: 'aca8d6c9668168c6d4b71cb5039e0af4cd419e30', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'ed16477727fe22372cbcd730c4e9cc67f5b35ed8', class: "grid" }, h("span", { key: '4b6989756eb826d93b5b7d71e874f62914d221df', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: 'a4e3d7e9f3582a0fc5dfabbfc9feb5bb969c2933', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: 'd23b28073abf3c16b3f8d58744fb5f66877cdd94', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, h("div", { key: 'f1f01d85a7c3be1ad5ed8b853f79eedf6330e82e', class: "grid" }, h("span", { key: 'f649a7e8e05bb5831c23a7411843cd98ed2ed96f', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '455e57d9ca09d6e77bdc0991712e808bdca0e6e5', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: '7fb2003ba7dd3d1f24aebdd90c87bd805ad0cd3a', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'e0d3fedab453a4bec2d84aaf62b4a80c82a2db86', class: "grid" }, h("span", { key: '5286c2010275bc886814b513cf4d84e7094621fd', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: '3593537296fa34b31d417242664384f7a8d87583', class: "f-body-02" }, this.colors[3].pantoneU))))), h("eds-block-break", { key: '5cfec71639c53573ba390860973e8a2ba1fd5c44' }), h("ul", { key: '117e15fcee91fc3f01af739bd73bfd34cdf56e7a', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '301626130c8f9737f05a3d4b070ff1fd6adf177f', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'c58c6cef85dbf3fb3fddd6bfceb0bf1d39590f5c', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '1c96adb58e67d7cada4b4ba382ca2fcd37f0dfd8', class: "grid" }, h("span", { key: 'beaab441ab5852d1141b509a161123ab0f743e7c', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: 'd2e57f4fd72ff1ef9c84f27e81c8c6b03ec50f66', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: '48772cedf0b4ad119e14696e58203efce7bb3559', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '0e233bc33432cdd2149ab20b64464d03de22bcef', class: "grid" }, h("span", { key: 'b0f41ae03bfd3bedf2ebd60b6a4b30c677395da0', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: '433f30e367352cbd24668dac2ecf741b9f81febe', class: "f-body-02" }, this.colors[3].pantoneU))))), h("eds-block-break", { key: 'a862789d835c146d140b634782eefa7b48139597' }), h("ul", { key: '9fe132435b11fa93057df3d747dfe36f04bfd997', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'e8438aedc62f4d0195a3c4c1c714ba99c6f7b67f', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '9928ba20be7b9100e437345a4c5b03bf6d495707', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[4].background
-            } }, h("div", { key: 'f5a2a3cbfa9c62bf0073a176474b41a6fcf684a1', class: "grid" }, h("span", { key: 'b4af0df345df2de8031bf404ebae2f048fd9c5c9', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: '79e7576ed0036fb4339b12e8c4b3fe327685879d', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: 'b409249f4fb37f56251bb1305f4062d89bdf6b0e', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '84fe567c909d8c1f4923b9be35b7548a95a11eea', class: "grid" }, h("span", { key: '6bf3c87341ab929749913400f1a2f9773bb03a97', class: "f-body-02" }, this.colors[4].pantoneC), h("span", { key: '237e9a04a4c7dc25ed19d021dc292053034e8113', class: "f-body-02" }, this.colors[4].pantoneU))), h("div", { key: 'd2c85d6e08bdb41850d4a93b7a6e18b683583d8f', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '1cd2d6a8ec580b4094335d3c56acfbb398a96c28', class: "grid" }, h("span", { key: 'dbbd548a12bcc861526309132e685a97714de1d5', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: '93d38512e45747e4277169ee3221c36f96862f29', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: 'b04c9679ea48bf89e70cc969ecd42984ce3c7286', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '4a6130bdeb963c9674100528e2ef24a2245acbab', class: "grid" }, h("span", { key: '7f49f52d514e36d7886a1aecb3c92c7148dcf595', class: "f-body-02" }, this.colors[4].pantoneC), h("span", { key: '0d9a53c5262183a24114f762175f1d9fe5299950', class: "f-body-02" }, this.colors[4].pantoneU))), h("div", { key: '26a6e6ca4a67e5ff01d4fcb75e40fdb1456ca62f', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[5].background
-            } }, h("div", { key: '832782a24170ba86015d59bbc7e59654fe8e6537', class: "grid" }, h("span", { key: '9b45e512e6068874f829260378f2e2545d098e05', class: "f-body-02" }, this.colors[5].rgb), h("span", { key: '31c2ef651c4fd295921910828388d6aaeba21c9e', class: "f-body-02 w-full" }, this.colors[5].cmyk), h("eds-code-block", { key: '3d238f2e4d97604c411f5ad38787cf2d6fc9771a', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'b96d4416fc2fb060ccc197020ae8ee8a2fc05aa5', class: "grid" }, h("span", { key: '83b4399412447ab4c3ab43a75d6b82c069b37b76', class: "f-body-02" }, this.colors[5].pantoneC), h("span", { key: '4af3fd1f49acae167a909e1ceb21203bdff66690', class: "f-body-02" }, this.colors[5].pantoneU)))))));
+            } }, h("div", { key: 'ff5052b9aa74a3edb7d3ba6d1c75b9073b969b31', class: "grid" }, h("span", { key: 'b69e9f4646835b689fd46c6f84b8b35dba1500a1', class: "f-body-02" }, this.colors[5].rgb), h("span", { key: 'a459cc1600cb4072e6d1cfbcae75d17cf14fbbfe', class: "f-body-02 w-full" }, this.colors[5].cmyk), h("eds-code-block", { key: '55f9185213f01a7891a4e8ff54f4f26759370ef8', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '2f3bbbcdf402f0da4bade772b3cadb1b8cb3370c', class: "grid" }, h("span", { key: '818372e4673ef5c8e35085702a559b744a5cbe8c', class: "f-body-02" }, this.colors[5].pantoneC), h("span", { key: '2bc994826618735b82fd93fe039328a2ff4f6f95', 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 CHANGED Viewed

@@ -49,11 +49,11 @@ export class GradientSupportPalette {
         ];
     }
     render() {
-        return (h("ul", { key: 'c7a9e89b9da867c127705056cdb10a6985bcfa43', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '47cd16f026680ac4885a87fda5a7334b51412236', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '4a400afaa3dada2350a4f0c22f68e31c68f8fbb5', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, h("div", { key: 'b42a6ea902b8ceb2b59625dd505e8a9dd76eaef5', class: "grid" }, h("span", { key: '50d914814be2695d1479e4503e6ba29494769333', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: 'c9c2900f6e5a03cce2d692270efeb6196f5247d9', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: 'bc07b6e90d9b426ef20bf0b61dfd1cf9ffeb9c28', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '29a0057038daa5a5eceb64607658c7016fd55dce', class: "grid" }, h("span", { key: 'a94716477804b07614ffdc0fe543e8828ad39c24', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), h("span", { key: '83be94becd5d45b4547e204d89725b3b6ac2cf9f', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), h("li", { key: '0ea4a2a1e82af5d75003a518d39cf256707e7bc9', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'fbf46dbacd066c848b32c0cc5450a27f27ac9fff', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, h("div", { key: '1ee3cf46b024449c1ef3b574d444a7c46c681329', class: "grid" }, h("span", { key: '9f330c8d91f92cdf265b533a6452b0bcbb750b59', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '8233d8e3edd2e56cf0c21ef41ad3fbc9304081d6', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: 'b5fe02b9ebba2007e79bea4dc626529dfb079387', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '9cc0560cd2b01ba2dd28cbcdd6498112824840ee', class: "grid" }, h("span", { key: '239157d8d24f5ad8384479c2cb01c98b175d1ba9', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), h("span", { key: '3bf35bb7d4d6b40469dcf7fad11e91280f509dcd', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), h("li", { key: 'ce422b2cd0e6aa04b479fc65051a84a6df6b7885', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'be5b32ca29a572fe6259f1ce38cb619ff891dd10', class: "effect-height flex items-center justify-between p-16", style: {
+        return (h("ul", { key: 'e5444717497402cac34586943ffd10abd2e77148', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '84f6b65181b6f2237b7ef261445a2e58935975ab', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'b9eb17a05b1a479e46adf3908ede6d2a74e47e91', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, h("div", { key: '74cb2cf74997cf993557cbf06158578a45439965', class: "grid" }, h("span", { key: '29c00a82880aff024927e29c95fde61016553d5d', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: 'db89f95d9c30eb90ba6d7f9cd12c793f8a500b00', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: 'd050e9d7910ed8ac88f4f791a2c8a1edaadcb0ac', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'd2b688154a3d1f61df4dcc1f735eae9747011d01', class: "grid" }, h("span", { key: '2a204759a52f881b2d6b0d40116bf00bbda3aed2', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), h("span", { key: '9023f33ba5182558f12dfb119ed4338649638bd7', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), h("li", { key: '55a4cf54a4dbc1b5c7f9962c571cbb971cba0d93', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'b4190fda8834ddfe5e53e90d357cc1835e7d16ce', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, h("div", { key: 'cf5415f31d46d7a966fa3da040aec720c0241673', class: "grid" }, h("span", { key: '4fb475890391784e8be7c40d0c74c02a492739f7', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '02f5bd1fcb7be45141963bb1d723646195978d49', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: '781791e59a86c8687d9afe6d729161acf05fc9dd', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'dd84d9b36892ff47481babfb2fbb8a9082f43219', class: "grid" }, h("span", { key: 'df5ef60b6866f46bafcd93d8f82498090102a520', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), h("span", { key: 'a8cf80fcb9f7fef12daf32055c61fdb33ee38d67', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), h("li", { key: '2ed0376ad5484fadac08c530450e993fa6145328', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '30ba72591ea4537407b2220a85a961fce0fc54e5', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[2].background
-            } }, h("div", { key: '316e83dc0cb32df5dc95bc926f628a17c83ee7ff', class: "grid" }, h("span", { key: '137f7cd7f0bbac24cfc12cf7c9bc0f3cf79f697d', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: '22b0307ccd12d25b42b8253b78a1b82a52bd5ebc', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: '1e27dd1221baeead37dda20d2869f446b1098655', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '6d2a34842470d26a49e56f1ac87991de251d437c', class: "grid" }, h("span", { key: '7e2213e4f1f51e26779bb20ad5f5ad228c71be95', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: '59424be94d66cb7fc4cc25f4b470179f145d31cf', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: '3abe2e221fb94bfe2d3a1808496a195753e50b92', class: "effect-height flex items-center justify-between p-16", style: {
+            } }, h("div", { key: '641ea920703268846558c852fe087fa9546e14b7', class: "grid" }, h("span", { key: 'f672422e13deb40e9dfaddd6f9855b2de28eab5b', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: '008794c76fb2713438c198c914e718efbbfc7b5e', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: 'ee1cfa3a78f670c74e00e96b6415f85715334526', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '295c044bb9cc9ed3a85bb488225db4401f0ea542', class: "grid" }, h("span", { key: '9d7dbf15fd44ce3d3e45a39324ad3a60d7ae30f0', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: 'd639d12c3215caf3f4f1e8a4ae062b540b6af50d', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: '04e95d8b1a6f7dcdbc465263382e36d05f79d602', class: "effect-height flex items-center justify-between p-16", style: {
                 background: this.colors[3].background
-            } }, h("div", { key: '24502f470ddb1881655b6c19216f0702b3728d26', class: "grid" }, h("span", { key: 'b0a86c800dafa141d5d665d1cfcf4dde204f9594', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '20309cdbfff6bb0953025e82c06343f83fd6f878', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: 'd83e2351a1f717716d339638b10bdc96d1acaeda', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '0fda1734b7ab96453af9316695c66bb03917d1f6', class: "grid" }, h("span", { key: '692a1cecedf32db4783840ba0d6c5b9d7db3ee50', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: 'be23c5a7bd828f00d123cf20febea767cbe0f9b3', class: "f-body-02" }, this.colors[3].pantoneU)))), h("li", { key: 'd584c32630f9b58355cf3b772ebdf8cdaac2d060', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '78f22604defd15a5d43e2eaa79e254b7415976b7', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, h("div", { key: 'd216e68addbd780486b699672033c27ff68a8034', class: "grid" }, h("span", { key: '1c26437a530d3b09c5a3e92cf14d243aa86c0956', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: 'e9ee2088dfad82523f799663e1b9a1aeaac2529b', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: 'f8ef23e2a5027609ddf4be44c7c3b1096586bd04', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '7f36d8b56cb6475c4a852d6aa7d242e1a241ca10', class: "grid" }, h("span", { key: 'abe78109be71d80d68347ded8794d0bed31f66a0', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), h("span", { key: 'd2e2343639db85544e1819b59460d0ef2b1c1317', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
+            } }, h("div", { key: 'e67079bbbdfa1853a2f069f08c52a8388cce688a', class: "grid" }, h("span", { key: '43be6b7785066c0d51aa87e987fb672a758de8bb', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '791e968b11a9dafefac8fe0eda01b04ab4911802', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: '5831fd1e75f8ed0d2edc29fbc439389275adf59e', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '09329acac8fbc33edada7a7c10c675631a240ea2', class: "grid" }, h("span", { key: '42f70fa2578b40e189b95cd1d4c56ccd84cdce69', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: '2b8dfefd1e2dff08aa17b234a04cff60e3eb9d7a', class: "f-body-02" }, this.colors[3].pantoneU)))), h("li", { key: 'e3a39fb7ad23526623bfea88cdab8d320847365d', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'cfde16c94675c5c9b510e3752f875655c9d098e2', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, h("div", { key: '1f8a8bd2e746c187323841ced84eec52d2c2f2f1', class: "grid" }, h("span", { key: '920fc68ae73790a37c927dabf687ccaf5e248841', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: '40205cf5666e6ba44ca07a09dc08e54f2f9cad56', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: '8a855110b362569cc9926a09772d12f133aa20b6', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'a69c90cfac79b0a7ba5fbd921117a12ce997c228', class: "grid" }, h("span", { key: 'bc06aaaaececad3b81e4884380e17fe773f97570', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), h("span", { key: '15baae3dafc6b53322e1a67956af1f533ea402f7', 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 CHANGED Viewed

@@ -60,7 +60,7 @@ const red = [
  */
 export class CorrectUseOfColors {
     render() {
-        return (h("div", { key: 'c200227a9e2f169d0aa287867fbb8e37950ba1fc', class: "container" }, h("p", { key: '8fb2fee0b58ee6ad9386bd7ab9b7defe77bf0ea8', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '779695d669a2dcea9dfa02ad98afbbbb40fd1c60', label: "primary", size: "small", intent: "ghost", icon: "arrow-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block" }), "and", h("eds-link", { key: '9adae0aedf1121fcae938fea0a190a4c6d919615', label: "support", size: "small", intent: "ghost", icon: "arrow-right", url: "../color-palette/#support-palette", "extra-class": "inline-block" }), "color palettes."), h("div", { key: 'ba6f9af827fc2d961d3bbe6e525f322a1cd1915a', class: "flex" }, h("div", { key: 'c7c0375674e317e44501061074498a4d61061815', class: "w-full" }, h("ul", { key: '3b47359203802b385a3ebfb3112d358860bb3aef', class: "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: '4762b034c77712345d8dccbad21d670e0e4b00b8', class: "w-full" }, h("ul", { key: '4378c6902da37592f8a793e106a43ddee1ef93c4', class: "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: 'fbc81d54d8b403928b8ed06313b3c8cc43ed94ea', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '3cebed0ccba94099b7c7434009317ac5f2bd0b4c', label: "purple", size: "small", intent: "ghost", icon: "arrow-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block" }), "and", h("eds-link", { key: '022ecd8aee653634c17289be36406a57c50870e2', label: "support", size: "small", intent: "ghost", icon: "arrow-right", url: "../color-palette/#support-palette", "extra-class": "inline-block" }), "color palettes."), h("div", { key: '199e32e4956d061d8900905ff5bb5f5de3e241aa', class: "flex" }, h("div", { key: 'ff328c18717b9e8e59a556f1158d20c1ee81e7d8', class: "w-full" }, h("ul", { key: 'e01f03ac9c1926e545cb7eed8bda7bbac85ec1df', class: "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: '9c916943b14e9c30dc4c378cd1f17e01898c07ba', class: "w-full" }, h("ul", { key: 'f4ed3a0dbf49acf1f9377b88974a95aad039786e', class: "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: '4639f1444d9623cba363eeb5c2d8d31c878df248', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '06f173575af08f66a54cbecda06d8c8571831e14', label: "blue", size: "small", intent: "ghost", icon: "arrow-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block" }), "and", h("eds-link", { key: '27190261ee2836060d3a82ff8b1e99cf2a3a4418', label: "support", size: "small", intent: "ghost", icon: "arrow-right", url: "../color-palette/#support-palette", "extra-class": "inline-block" }), "color palettes."), h("div", { key: '56b46450301b6ff4971d3d0a8db82e4490926a7d', class: "flex" }, h("div", { key: '149dfb6f4888042bc3bc0155e13f0546619d0407', class: "w-full" }, h("ul", { key: '170c840e01c036180d14b4ad3ff05a91d0d2a294', class: "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: '7bf3c17e287839feb7de1f9efb025468b6be01d5', class: "w-full" }, h("ul", { key: '0933b22c83b1146fd3df7872168c46696612ee6f', class: "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: '13d3cc503cec5ff8368bb067669fd40c39474ad9', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '3d56221761895007dca7959d41dc9c2de7d5bee9', label: "redish", size: "small", intent: "ghost", icon: "arrow-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block" }), "and", h("eds-link", { key: '816bfadc9f98d2f2ac59bc14df8d4160d89116b3', label: "support", size: "small", intent: "ghost", icon: "arrow-right", url: "../color-palette/#support-palette", "extra-class": "inline-block" }), "color palettes."), h("div", { key: 'b6eab4a5bb07fd34b59c0e9460ad4aab06e424f6', class: "flex" }, h("div", { key: 'd2779763b7a8ac3b9d718cb2c98dcfeb6b81e311', class: "w-full" }, h("ul", { key: '269881df5e4209d3670ceae03c37182d5d17fe7f', class: "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: 'e014acde3e2676f4db049bd1df3f49fb68953470', class: "w-full" }, h("ul", { key: '6881842a8f199741784d1a1382353ff271869ee0', class: "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: '33f38f14e5b6e7271ae26608fb1a1ed0c7930c7c', class: "container" }, h("p", { key: '4857375e983add7d8e5e0a0d9896641774be018e', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '1c6bd69472074babf8f830fdba9be31e73afcd88', label: "primary", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: 'ae3429fadbea001f01731d3c15f28865d668a50a', label: "support", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: 'd8c6b9ab88abbf6194a4fb26120244982b59c2c4', class: "flex" }, h("div", { key: 'fc7f854940caabb9e032999f51732b64555e96e7', class: "w-full" }, h("ul", { key: '99c6a2e47c683ac38f2a14feec80177c0cf1c174', class: "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: '91048e89cff083356c589c0f1bfecdd482e0c797', class: "w-full" }, h("ul", { key: '6ee69388227089a5224a6d249c8e1eea4efde128', class: "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: 'c0a8e42942f2655648aa2ec3ce74bbf8d043ba63', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '3f272298bcd7d0e6ad791edc408ef636349fbf7d', label: "purple", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '9a0b28f388483944aa4b053b9f8e807c1383431e', label: "support", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '27ab1cdb936918fafe122c5a569c83322043bb79', class: "flex" }, h("div", { key: '037b9916ff3a3e8c2e9db64b650d44a57aedbcf9', class: "w-full" }, h("ul", { key: '60f4f6290b31a29852fb934c678edcaa61c8e930', class: "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: '36397292a31417703736b3be5b77e17241675dd9', class: "w-full" }, h("ul", { key: '20a9e6bb396c184c2718a18554eb1b4828817379', class: "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: '0b89819b9fce1dff39b06b70873d651b7a1c84ac', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '9b3e7d46ac8116ff5f47f895bb06e89cd49c4e03', label: "blue", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '94c3384e546bcae55d5634064a37436b4cdaab0f', label: "support", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '7e3fe503559fa6865b824fd7f93dfdf8ed368f34', class: "flex" }, h("div", { key: '4ed98a3b92ba8b73e3cd67dec625b4b8dfb34ee1', class: "w-full" }, h("ul", { key: '0ccfd018568eb834ae05771976122736f5944205', class: "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: 'd2cef9f5bd8ce7fb103e22a8964cee88853c1162', class: "w-full" }, h("ul", { key: '24301ce590bd1530316f351202bd76fafaa7dda5', class: "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: '748852527301ab6465b593f5f271dc6dcef9d198', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'f035467c04170412a1b06f05b8675b6be57e8aa2', label: "redish", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '6e4eb577c6582a160b8282b54a6edfc58f20926b', label: "support", size: "small", intent: "blueish", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '9209fd1ab3092cd21dd81a3328171c8de4fb8bca', class: "flex" }, h("div", { key: 'dc71b931a70fbd31a4f72814b23a1d97933bc721', class: "w-full" }, h("ul", { key: 'd3f6f25439b6fbc8e8c08b39bf46de9ce52482fa', class: "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: '78d64d48a72836043c53e485269402bf566a5d98', class: "w-full" }, h("ul", { key: '6eb824d03f4d0e2d3966963c899473e242b31dc6', class: "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 CHANGED Viewed

@@ -33,16 +33,12 @@ const incorrect = [
     ...purple,
     ...red
 ];
-/**
- * `CorrectUseOfColors` is a component that combines the primary palette and support palette
- * to display the correct use of colors.
- */
 /**
  * @internal
  */
 export class IncorrectUseOfColors {
     render() {
-        return (h("div", { key: '024316623703e89a7d5d226a75c25c145be9b2c6', class: "container" }, h("p", { key: 'c2ddb12f2d87bf1c5bb7f49bcf2b76d42ccfd310', class: "f-body-01" }, "Each of the four colour tones cannot be mixed in the same composition."), h("div", { key: 'c5f1acb20614d5732836240dd65b23a8dd074447', class: "flex" }, h("div", { key: 'cb2fb1c0355b744e53977c573383989be12fe1ad', class: "w-full" }, h("ul", { key: '9ceb752231d8a7764221d45653c4ef73fad4573d', class: "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: '494eaadc1547f91e11d93655b91424f98de6a635', class: "w-full" }, h("ul", { key: '51de6e25df144ab9014ca95ad645a437b6469441', class: "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: '2e660e9a788e46e68d6695ae8aa475bbb1ca395e', class: "container" }, h("eds-alert", { key: '1dc4552a33d88055a3a0c33eeb18c53a8379039a', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" }), h("div", { key: 'fd6bf7f0205422b1bd3ceb3f8374d5a9a73aaca0', class: "flex" }, h("div", { key: 'dae745447f5e9792136f059b1dcfc868e473dfd5', class: "w-full" }, h("ul", { key: 'daeec7514f4027ec3f688f05fb4f1e027b846a81', class: "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: '1ca202afa9384e78e3ed9c0674e06c51184d3a5a', class: "w-full" }, h("ul", { key: '7bdef2e7d64f3c5553193d127bac69ee89a93686', class: "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/design-tokens/token-list/token-list.js CHANGED Viewed

@@ -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: '12f2874bbc9a74aea2a37e3c9314e85b5cf96d8c', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) =>
+        return (h("section", { key: 'ac8573b341ad313eba0f9f082dcc72cfc81208b3', 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 CHANGED Viewed

@@ -5,7 +5,7 @@ import radii from "../../../../../../../../packages/assets/tokens/radii"; // Adj
  */
 export class TokenRadii {
     render() {
-        return (h("section", { key: '8b66cda1370f366c46ed2772ee0a5a18878cdc13', class: "w-full mt-28" }, h("ul", { key: '652f4812de4a40c94646b25429b16683bfc8f54c', class: "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: '84dabcd5a39d49e116f8fc9e9b26e00455c7fbb3', class: "w-full mt-28" }, h("ul", { key: 'a821c747c45b8898ab2e7626d2ead91814549335', class: "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 CHANGED Viewed

@@ -5,7 +5,7 @@ import ratios from "../../../../../../../../packages/assets/tokens/ratios"; // A
  */
 export class TokenRatios {
     render() {
-        return (h("section", { key: 'd6df281aee2b33d5dd1087c9d06aff6656bf9145', class: "w-full" }, h("eds-section-core", { key: 'fdf31da89f0fa75f5a724ae9bdb26d59dd22fe9e', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: '01473ff27842d278c1269870463fb0c1a0658406', 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: '9c4dc70bd40a40fbeedc88280ea3fdd4b2597e40', class: "w-full" }, h("eds-section-core", { key: '039b72b762e48f62a4fa58d5af7803d0ed73bf6a', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: 'be3e37d842a24536488b7bc03f24399faa1304ff', 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 CHANGED Viewed

@@ -5,7 +5,7 @@ import shadowTokens from "../../../../../../../../packages/assets/tokens/shadows
  */
 export class TokenShadows {
     render() {
-        return (h("section", { key: '6651a6dcd282a9f9df84249c73ab08a6e8d83597', class: "w-full mt-28" }, h("ul", { key: '12bda2b4a1306c9a8d1bc4f41da4edd5258e381f', class: "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: '4575feac8b5bff23aed39733e638fbb62916988f', class: "w-full mt-28" }, h("ul", { key: 'c9833aa0d698a7ec33911011ccb9227d43c8261a', class: "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 CHANGED Viewed

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class TokenSpacing {
     render() {
-        return (h("div", { key: 'ae388def4474fbd6e9766c2e04eb382ac9022bb8', class: "w-full" }, h("ul", { key: 'a2a51b9494dbd1bbb8b8d454117bc254e9602938', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '9e48e3551369f35ae6ec72d493ae888ebee3cceb', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '65b5b1192cdfef841bd4beed6eedf0068393ba8d', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '770870c171999d004aba77b6058fe32525b1703e', class: "spacing-sample m-32 bg-darker" }, h("span", { key: 'fdba92dbc2c78e55481277c2858de4ea220b2397', class: "text-white" }, "Margin: 2rem / m-32")))), h("li", { key: '9420b6110f30e9f3cff94d409362627d32782023', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '2e438e9ee4291d1326acb2630ccb55f981acfeaa', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'b199e19274f23490485347d2ef102741f583b612', class: "spacing-sample ml-64 bg-darker" }, h("span", { key: '2cde99dd7d0bb469b7f69b852f20abc4f61d6a01', class: "text-white" }, "Margin Left: 4rem / ml-64")))), h("li", { key: 'b8cdd7b7245cd3e7c8fe59297b76f2e9e20a1c2e', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '0f9cf988220669a2ebe2e93d33d904ee045af74a', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '88f5a191b1f9878ae6012efd5ec7365cf2f28da4', class: "spacing-sample mt-32 bg-darker" }, h("span", { key: 'af8f876d8cdc7620af861620173ea32fc706378f', class: "text-white" }, "Margin Top: 2rem / mt-32")))), h("li", { key: 'e65780c7ecfc9685791c40970350ba511e888283', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'c1a8e22fde087ac9f5e69602e23c8b7f429c0e3e', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '19aaa0273c1c818f1f6d57a0fd41d9be14aa4d1b', class: "spacing-sample p-32 bg-darker" }, h("span", { key: '18cbdee711f04e90e663d93bd8b752ec0d0b33ee', class: "text-white" }, "Padding: 2rem / p-32")))), h("li", { key: 'f2831db3170703786946a12a5b0c0e188c4f944a', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '68ac92294defd683a3c49e38ce0f4366a8b91208', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '6bfd849d0f841d6fefb39d91a4be49ae1db8d43f', class: "spacing-sample pt-32 bg-darker" }, h("span", { key: '7f3b5868baf86913d172b07347b15ca1e8901d21', class: "text-white" }, "Padding Top: 2rem / pt-32")))), h("li", { key: 'f3608f5562949c9fb82d987719753bc0b59ba999', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'fe9d90cf206906742000da310a53873ecefaa77c', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'd6590820496db0ba1009deea6a4b56c9195814e6', class: "spacing-sample pl-32 bg-darker" }, h("span", { key: 'c65179e127861a66ca1c0d6ff429b07bc0d88945', class: "text-white" }, "Padding Left: 2rem / pl-32")))))));
+        return (h("div", { key: '5f72b8386e92973faca8b22ebadcffa5b8ca8744', class: "w-full" }, h("ul", { key: '619cc2546059aaac566dc89f56b098f72f7c2bde', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'b90587543210e02a577854ce061472ef8f3bdc7a', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'd98ea95c641209ba592aae8c695e278549840420', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '6dd84540a213d98fa09480eac823fe030dfb2404', class: "spacing-sample m-32 bg-darker" }, h("span", { key: 'ad0493ba8d97cdcc15535505db4d726d6f69bd38', class: "text-white" }, "Margin: 2rem / m-32")))), h("li", { key: 'a0914d288cdb4b9caef6956af0069cd0937ee019', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '95adc2b10d3962378de300e00b749b691fda88af', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '8bad94397c9fe8112b49933a508958000f9cd99d', class: "spacing-sample ml-64 bg-darker" }, h("span", { key: '04229385104243a5ce9a194c4f8056f7341a6736', class: "text-white" }, "Margin Left: 4rem / ml-64")))), h("li", { key: 'f34e1fd5ccafc528ed9359766deaa5c615a2e14b', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '38e12800b2c8502ea2f9e912af929f71d3ec9699', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'f4e93d89576ab3de7f44ce3a85d9838f21bfa7f6', class: "spacing-sample mt-32 bg-darker" }, h("span", { key: 'e85e2e1c7c4c7e765dfafd25dc9f2c33b6bd5069', class: "text-white" }, "Margin Top: 2rem / mt-32")))), h("li", { key: 'b42299c17c024a5906bd09c80a2f309b461b6fde', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'f54a9e32893ac6f1b0384e79e2959d1e65a251e2', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '4209fa0c979a1d55d42d7b892bc94cc0f3788e88', class: "spacing-sample p-32 bg-darker" }, h("span", { key: '1d9249c56d3a42500dfb8cc1d3eae1f89e79cdcd', class: "text-white" }, "Padding: 2rem / p-32")))), h("li", { key: 'ad6f2e33e15c4c21bdfed8478b3d2faa905490fa', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '9950970e66b8a382e7b0158b54e980a5e5f45774', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '40e96cd046eaddf3a23387995affbfc399d171ae', class: "spacing-sample pt-32 bg-darker" }, h("span", { key: '2d120273f7a6d4429061d0ade2164ada9a14b506', class: "text-white" }, "Padding Top: 2rem / pt-32")))), h("li", { key: '8c3327edc63f8959c0cb01cce0a8407bf3a605af', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'c0be38039770c54577f073e1a707110cd0807ab5', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'd8085da375e734ed11fe580f1a9004f6fddef679', class: "spacing-sample pl-32 bg-darker" }, h("span", { key: '029857c00659221390438d8477734d0f130d1b97', class: "text-white" }, "Padding Left: 2rem / pl-32")))))));
     }
     static get is() { return "token-spacing"; }
 }

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

@@ -5,7 +5,7 @@ import typography from "../../../../../../../../packages/assets/tokens/typograph
  */
 export class TokenTypography {
     render() {
-        return (h("section", { key: '2078622c91b8906b71ee3aebdadcda0ac2c49512', class: "w-full" }, h("ul", { key: 'fe9212731cddcd43e3d5f5518245911d9d4cd493', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
+        return (h("section", { key: '23815518d694435812ed3d7b9aab850043941b96', class: "w-full" }, h("ul", { key: '366ed5bc5933c5b8a563d33b70471f507a21386c', 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/eds-components-section/eds-components-section.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import { h } from "@stencil/core";
 import { EdsComponentsOverview } from "../functional/overview";
 import { EdsDocsInstallation } from "../functional/installation";
-import { EdsDocsUsage } from "../functional/usage";
 import { EdsDocsReact } from "../functional/react";
 import { EdsDocsVue } from "../functional/vue";
 import { EdsDocsAngular } from "../functional/angular";
@@ -19,19 +18,17 @@ export class EdsComponentsSection {
             case 1:
                 return h(EdsDocsInstallation, null);
             case 2:
-                return h(EdsDocsUsage, null);
-            case 3:
                 return h(EdsDocsReact, null);
-            case 4:
+            case 3:
                 return h(EdsDocsVue, null);
-            case 5:
+            case 4:
                 return h(EdsDocsAngular, null);
             default:
                 return h("p", null, "Content not available.");
         }
     }
     render() {
-        return h("div", { key: 'faa14dc7bb5d966ea1328f60d8ca88b3c406ad51', class: "container" }, this.renderContent());
+        return h("div", { key: 'ce34514ab73daa5baa011bda56a13d6197f8bfd0', class: "container" }, this.renderContent());
     }
     static get is() { return "eds-components-section"; }
     static get properties() {

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

@@ -17,7 +17,7 @@ export class EdsDocsPalettes {
         }
     }
     render() {
-        return h("div", { key: 'c11e0de66c41770e7ebca46d3fb7ab11b454511e', class: "container" }, this.renderContent());
+        return h("div", { key: '42f0a4598c64661d98054522e88366ec591a2cb3', class: "container" }, this.renderContent());
     }
     static get is() { return "eds-docs-palettes"; }
     static get properties() {

package/dist/collection/eds-docs-ui/eds-docs-tokens/eds-docs-tokens.js CHANGED Viewed

@@ -25,7 +25,7 @@ export class EdsDocsContent {
         }
     }
     render() {
-        return h("div", { key: 'ef9cf093af7bc730b73f3561b36187f70aea29a7', class: "container" }, this.renderContent());
+        return h("div", { key: '10708d591c4077e4e1fe94073322f01121253bdb', class: "container" }, this.renderContent());
     }
     static get is() { return "eds-docs-tokens"; }
     static get properties() {

package/dist/collection/eds-docs-ui/eds-logo-variations/eds-logo-variations.js ADDED Viewed

@@ -0,0 +1,44 @@
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class EdsLogoVariations {
+    constructor() {
+        this.tabIndex = undefined;
+    }
+    renderContent() {
+        switch (this.tabIndex) {
+            case 0:
+                return h("logo-variations-horizontal", null);
+            case 1:
+                return h("logo-variations-vertical", null);
+            default:
+                return h("p", null, "Content not available.");
+        }
+    }
+    render() {
+        return h("div", { key: '9d6ce0e75030d6e636aab423181b0ce999f6f1b0', class: "container" }, this.renderContent());
+    }
+    static get is() { return "eds-logo-variations"; }
+    static get properties() {
+        return {
+            "tabIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active tab index to determine the content to display"
+                },
+                "attribute": "tab-index",
+                "reflect": false
+            }
+        };
+    }
+}

package/dist/collection/eds-docs-ui/eds-svg-repository/eds-svg-repository.js CHANGED Viewed

@@ -13,6 +13,11 @@ export class EdsSvgRepository {
             icon: svgContent // Pass SVG content as innerHTML
         }));
     }
+    get hostWidth() {
+        // Instead of using window.innerWidth, use the parent element's width.
+        const containerWidth = this.hostEl.parentElement ? this.hostEl.parentElement.offsetWidth : 400;
+        return containerWidth;
+    }
     render() {
         const svgData = this.getSvgData();
         // Define table configuration
@@ -20,8 +25,9 @@ export class EdsSvgRepository {
             icon: { format: 'svg' },
             name: { format: 'bold' }
         };
-        return (h("eds-table", { key: 'd5b4cdb69826e22d716bf9bf4ff7fb9ab1f65044', data: JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true }));
+        return (h("eds-table", { key: 'a1d4a1db6f0886a43513fc34707cdd6140ab685d', data: JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true, "host-width": this.hostWidth }));
     }
     static get is() { return "eds-svg-repository"; }
     static get encapsulation() { return "shadow"; }
+    static get elementRef() { return "hostEl"; }
 }

package/dist/collection/eds-docs-ui/functional/angular.js CHANGED Viewed

@@ -1,2 +1,2 @@
 import { h } from "@stencil/core";
-export const EdsDocsAngular = () => (h("div", null, h("h2", null, "Angular Wrappers"), h("p", null, "Learn how to use our components in a Angular Application."), h("eds-code-block", { code: "npm install @ebrains/angular", language: "javascript", "copy-label": "Copy Code" }), h("p", null, "Define the custom elements"), h("eds-code-block", { code: "import { defineCustomElements } from '@ebrains/components/loader';\ndefineCustomElements();", language: "javascript", "copy-label": "Copy Code" }), h("p", null, "Angular Custom Elements Schema"), h("eds-code-block", { code: 'import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";', language: "javascript", "copy-label": "Copy Code" }), h("eds-section-core", { "section-title": "Example Angular App", "heading-level": "h3" }, h("eds-code-block", { code: '\n<div class="container">\n  <h1 class="f-heading-01">{{ title }}</h1>\n  <eds-breadcrumb\n    intent="tertiary"\n    items="[\n      { "label": "Home", "url": "#" },\n      { "label": "Products", "url": "#" },\n    ]">\n  </eds-breadcrumb>\n  <eds-footer></eds-footer>\n</div>', language: "javascript", "copy-label": "Copy Code" }))));
+export const EdsDocsAngular = () => (h("div", null, h("h2", null, "Angular Wrappers"), h("p", null, "Learn how to use our components in a Angular Application."), h("eds-code-block", { code: "npm install @ebrains/angular", language: "javascript", "copy-label": "Copy Code" }), h("p", null, "Define the custom elements"), h("eds-code-block", { code: "import { defineCustomElements } from '@ebrains/components/loader';\ndefineCustomElements();", language: "javascript", "copy-label": "Copy Code" }), h("p", null, "Angular Custom Elements Schema"), h("eds-code-block", { code: 'import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";', language: "javascript", "copy-label": "Copy Code" }), h("eds-section-core", { "section-title": "Example Angular App", "heading-level": "h3" }, h("eds-code-block", { code: '\n<div class="container">\n  <eds-breadcrumb\n    intent="tertiary"\n    items="[\n      { "label": "Home", "url": "#" },\n      { "label": "Products", "url": "#" },\n    ]">\n  </eds-breadcrumb>\n  <eds-footer></eds-footer>\n</div>', language: "javascript", "copy-label": "Copy Code" }))));

package/dist/collection/eds-docs-ui/functional/installation.js CHANGED Viewed

@@ -1,2 +1,2 @@
 import { h } from "@stencil/core";
-export const EdsDocsInstallation = () => (h("div", null, h("p", null, "To start using the EBRAINS Design System, include the following scripts and styles in your project. You can also install it via npm for use with modern build tools."), h("eds-code-block", { code: "npm install @ebrains/components", language: "html", "copy-label": "Copy Code" }), h("p", null, "TBD")));
+export const EdsDocsInstallation = () => (h("div", null, h("p", null, "Before proceeding, ensure that Node.js is installed on your machine\u2014you can download the latest version from the official website. If your project doesn\u2019t already use npm and you plan to integrate EBRAINS Components, you'll need to create a package.json file by running npm init and following the on-screen instructions."), h("div", { class: "my-8" }, h("eds-code-block", { code: "npm install @ebrains/components", language: "html", "copy-label": "Copy Code" })), h("div", { class: "my-8" }, h("eds-code-block", { code: "npm install @ebrains/assets", language: "html", "copy-label": "Copy Code" })), h("div", { class: "my-8" }, h("eds-code-block", { code: "npm install @ebrains/react", language: "html", "copy-label": "Copy Code" }))));

package/dist/collection/eds-docs-ui/functional/overview.js CHANGED Viewed

@@ -1,2 +1,2 @@
 import { h } from "@stencil/core";
-export const EdsComponentsOverview = () => (h("div", { class: "static-content container" }, h("eds-alert", { message: "EBRAINS Design System makes it easy to implement and use its components across any framework or no framework at all. We\n      accomplish this by using standardized web platform APIs and Web Components.", intent: "default" }), h("h2", null, "Load the module"), h("p", null, "Integrating EDSs components to a project without a JavaScript framework is straight forward. If you\u2019re working on a simple HTML page, you can start using the components immediately by adding the tags below to the", ' ', h("code", null, "head"), "."), h("eds-code-block", { code: '<script type="module" href="https://unpkg.com/@ebrains/components@0.0.1/loader"/></script>', language: "javascript", "copy-label": "Copy Code" }), h("h2", null, "Load the styles"), 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")), h("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@0.0.1/styles/output.css"/>', language: "css", "copy-label": "Copy Code" }), h("h2", null, "Load the fonts"), h("p", null, "To load the correct webfonts as well, add either one of these tags to the ", h("code", null, "head")), h("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@0.0.1/styles/base/fonts.css"/>', language: "css", "copy-label": "Copy Code" }), h("h2", null, "Component Usage"), 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" })));
+export const EdsComponentsOverview = () => (h("div", { class: "static-content container" }, h("h2", null, "Load the module"), h("p", null, "Integrating EDSs components to a project without a JavaScript framework is straight forward. If you\u2019re working on a simple HTML page, you can start using the components immediately by adding the tags below to the", ' ', h("code", null, "head"), "."), h("eds-code-block", { code: "<script type='module'>\n  import { defineCustomElements } from 'https://unpkg.com/@ebrains/components@latest/loader/index.js'; \n  // Define custom elements\n  defineCustomElements(window);\n</script>", language: "javascript", "copy-label": "Copy Code" }), h("h2", null, "Load the styles"), 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")), 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("div", { class: "my-4" }, h("eds-alert", { message: "Note that, loading the predefined CSS framework above, automatically loads the fonts so you can skip loading them separately.", intent: "warning" })), h("h2", null, "Load the fonts"), h("p", null, "To load the webfonts, add the tag below to the ", h("code", null, "head")), h("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@0.0.1/styles/base/fonts.css"/>', language: "css", "copy-label": "Copy Code" }), h("h2", null, "Component Usage"), 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" })));

package/dist/collection/eds-docs-ui/functional/react.js CHANGED Viewed

@@ -1,2 +1,2 @@
 import { h } from "@stencil/core";
-export const EdsDocsReact = () => (h("div", null, h("h2", null, "React Wrappers"), h("p", null, "Learn how to use our components in a React Application."), "Simple install the package below and check out the examples", h("eds-code-block", { code: "npm install @ebrains/react", language: "javascript", "copy-label": "Copy Code" }), h("eds-section-core", { "section-title": "Example React App", "heading-level": "h3" }, h("eds-code-block", { code: '\nimport { EdsHeader } from "@ebrains/react";\n\ninterface User {\n  firstname: string;\n  lastname: string;\n  // Add any other properties your user object might have\n}\n\ninterface AuthStatus {\n  authenticated: boolean;\n  user: User | null;\n}\n\nimport { useEffect, useState } from "react";\n\nexport function App() {\n\n  const [authStatus, setAuthStatus] = useState<AuthStatus>({\n    authenticated: false,\n    user: null,\n  });\n  \n  const [activeTabIndex, setActiveTabIndex] = useState<number>(0);\n\n  // Use useEffect to render Stencil components dynamically after the component mounts\n  useEffect(() => {\n    \n    const handleAuthStatusChange = (event: CustomEvent) => {\n      console.log(event.detail);\n      setAuthStatus(event.detail); // Set the entire object\n    };\n\n    const handleTabChange = (\n      event: CustomEvent<{ index: number; name: string }>,\n    ) => {\n      console.log(event.detail);\n      setActiveTabIndex(event.detail.index);\n    };\n\n    document.addEventListener(\n      "authStatusChanged",\n      handleAuthStatusChange as EventListener,\n    );\n    document.addEventListener("tabChange", handleTabChange as EventListener);\n\n    return () => {\n      document.removeEventListener(\n        "authStatusChanged",\n        handleAuthStatusChange as EventListener,\n      );\n      document.removeEventListener(\n        "tabChange",\n        handleTabChange as EventListener,\n      );\n    };\n  }, []); // Empty dependency array ensures this runs only once after mounting\n\n  return (\n    <div id="main">\n      <EdsHeader\n        home-url="/"\n        user-feature={false}\n        keycloak-url="http://localhost:8080"\n        keycloak-realm="nigeor-realm"\n        keycloak-client-id="stencil-app"\n        links="[\n            { "label": "About", "url": "/about" },\n            { "label": "Focus Areas", "url": "/focus-areas" },\n            { "label": "News & Events", "url": "/news-and-events" },\n            { "label": "Contact", "url": "/contact" }\n          ]"\n      ></EdsHeader>\n\n      <div> \n        User is{" "} {authStatus.authenticated ? "authenticated" : "not authenticated"}\n      </div>\n      {authStatus.user && <div>Welcome, {authStatus.user.firstname}</div>}\n      </div>\n    </div>\n  );\n}\n\nexport default App;\n', language: "javascript", "copy-label": "Copy Code" }))));
+export const EdsDocsReact = () => (h("div", null, h("h2", null, "React Wrappers"), h("p", null, "Learn how to use our components in a React Application.Simple install the package below and check out the examples"), h("div", { class: "my-8" }, h("eds-code-block", { code: "npm install @ebrains/react", language: "javascript", "copy-label": "Copy Code" })), h("eds-section-core", { "section-title": "Example React App", "heading-level": "h3" }, h("eds-code-block", { code: '\nimport { EdsHeader } from "@ebrains/react";\n\ninterface User {\n  firstname: string;\n  lastname: string;\n}\n\ninterface AuthStatus {\n  authenticated: boolean;\n  user: User | null;\n}\n\nimport { useEffect, useState } from "react";\n\nexport function App() {\n\n  const [authStatus, setAuthStatus] = useState<AuthStatus>({\n    authenticated: false,\n    user: null,\n  });\n  \n  const [activeTabIndex, setActiveTabIndex] = useState<number>(0);\n\n  // Use useEffect to render Stencil components dynamically after the component mounts\n  useEffect(() => {\n    \n    const handleAuthStatusChange = (event: CustomEvent) => {\n      console.log(event.detail);\n      setAuthStatus(event.detail); // Set the entire object\n    };\n\n    const handleTabChange = (\n      event: CustomEvent<{ index: number; name: string }>,\n    ) => {\n      console.log(event.detail);\n      setActiveTabIndex(event.detail.index);\n    };\n\n    document.addEventListener(\n      "authStatusChanged",\n      handleAuthStatusChange as EventListener,\n    );\n    document.addEventListener("tabChange", handleTabChange as EventListener);\n\n    return () => {\n      document.removeEventListener(\n        "authStatusChanged",\n        handleAuthStatusChange as EventListener,\n      );\n      document.removeEventListener(\n        "tabChange",\n        handleTabChange as EventListener,\n      );\n    };\n  }, []); // Empty dependency array ensures this runs only once after mounting\n\n  return (\n    <div id="main">\n      <EdsHeader\n        home-url="/"\n        user-feature={false}\n        keycloak-url="http://localhost:8080"\n        keycloak-realm="nigeor-realm"\n        keycloak-client-id="stencil-app"\n        links="[\n            { "label": "About", "url": "/about" },\n            { "label": "Focus Areas", "url": "/focus-areas" },\n            { "label": "News & Events", "url": "/news-and-events" },\n            { "label": "Contact", "url": "/contact" }\n          ]"\n      ></EdsHeader>\n\n      <div> \n        User is{" "} {authStatus.authenticated ? "authenticated" : "not authenticated"}\n      </div>\n      {authStatus.user && <div>Welcome, {authStatus.user.firstname}</div>}\n      </div>\n    </div>\n  );\n}\n\nexport default App;\n', language: "javascript", "copy-label": "Copy Code" }))));