@ebrains/components 2.2.0 → 2.3.1

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: '2ece8530e14e2578756ea7a4b7c6de47692ea437', class: "container" }, h("p", { key: '2c1de740ce1273bff57584a89d126996b89a2585', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '3ce5ec41aff1fa649799bb1b24e2c78ce3d5709e', label: "primary", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: 'f067c4b8812fb79ddd8302a6e469131bb5ca2540', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '07216a1e8bc1c8944d7cd266fd88fd779a47af2e', class: "flex" }, h("div", { key: '86594b56c689f5013ad372f61591256b96983d1e', class: "w-full" }, h("ul", { key: '890766f2292df846fddf466b950ad572bd012732', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'c118abd619f14e52c4987a7994603ff61976a30a', class: "w-full" }, h("ul", { key: '68ff730e9d179c7c29701f82f08d0086af20d00b', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: '183bb8155e1584b04b493934edaa437d5cf4b783', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'a040517846fb066a35816d293ac04bc7872b3b26', label: "purple", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '386c5220437d6e6659488e7bef5b3ffe52caf4ee', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '0d63252310aaa25e69938f3347454094d8722071', class: "flex" }, h("div", { key: 'e4afc567b16e421b47d60679f1ea35e6663d06c6', class: "w-full" }, h("ul", { key: '479d5422ddc0fbc7bb7364fd004c91b6091eb23c', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, purple.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'cd991c92db354f80862ae1542396ea32b95c208a', class: "w-full" }, h("ul", { key: 'b88178a45d9f371feab17accb2e7316ef8471380', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: '3777953463dcb70490b0c2ce6c42dc2dcbbf1d30', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '13fe2cb15600d4c8d38cb62537222b7cc254b4ea', label: "blue", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: 'e8156e3295aefedc79483b2f07abeb840980c76e', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: 'a37aa06966858518d02108f3dc62666fdac001ad', class: "flex" }, h("div", { key: '58dd02808202c7a3e1b09b9ca2dbd560e76cd336', class: "w-full" }, h("ul", { key: '0db69e93ff385af493c2b4e6797108d3b20eb4ff', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, blue.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'f7135c48160aec5de8d7a8f550b416e54ea2c7e8', class: "w-full" }, h("ul", { key: 'f0d5d0a49bcc9ea372266683b6c029b427db73bf', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: '0a42fea17681992eec8f8c107b49cc90934730b4', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '17c3efd3b9a55bea075920137d2a58cb910115c1', label: "redish", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '60e5ed7491f4d1814973f6c9f7fbfe8b96626f9d', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '87b6b39208abc11441edc407a81208f4cda8bf49', class: "flex" }, h("div", { key: 'a123aa0926649903d2167293788e02ebfced78b9', class: "w-full" }, h("ul", { key: '2e791bb7cd1c15cccb46942e92a3fa9f6241742a', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, red.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '3b7effab5bce2b76d6ac73c8d2353eb0d69cb021', class: "w-full" }, h("ul", { key: '2412301e05f2f711e5b48f86eff270795f363ee6', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
+        return (h("div", { key: 'd0be09152cb04a9a38d8a744187a9b26a1e89218', class: "container" }, h("p", { key: 'b271be0db9ebeb6b97f139d104c8ad22f67a0a07', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'c2166109121cb18a2bee1d7e97a829ad726dd635', 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: '77a3b2e02a38239cbdcdfacbe8375a8a37169fa5', 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: '82a056e939a0b263f1454a968688702038389842', class: "flex" }, h("div", { key: 'b9bb7e15d2a5cc4c490d2e4e7d6dd56112fde0f8', class: "w-full" }, h("ul", { key: '9190e2d3a5169fee4fe98a4edb0147be2e355455', 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: 'bae996225c7c49f584d6a5cc9cf3a8ad8f8807ec', class: "w-full" }, h("ul", { key: 'f70940212a1efa846e3563dfbf93df65cd0bbbf1', 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: '9ced01dbcfd41dfb15c40a3f85165b94ffe9de23', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'bc44a1e9c7bf221946c550457e146b8149735e43', 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: 'cf461572ff956405929ca6cf95dfa56d07744593', 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: '37d90b2c2f0269791c923ce440924c0c3b01ca71', class: "flex" }, h("div", { key: 'ff636e6bd9029bc7c9d53f3f0d8524f23b5b8ab3', class: "w-full" }, h("ul", { key: '4b8a8666c8b4a2ac30550a1d0ab2c0e0314f2fe5', 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: '94d98ed72746e71f47ab181cbbb528d2ef61dfce', class: "w-full" }, h("ul", { key: '3600baa2c87dd21cba3e2fc138df5b968c9c52ef', 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: '117caf5580bde7dd9347df9c38acbb4456ab98f8', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '6a82c99271f67352ada76deee022ef660b43815a', 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: '935f98fb55d98c8a7e430c14420502cace108e3f', 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: '7d9c32250cdd2f369c536bb4c6c90df2e74a5a33', class: "flex" }, h("div", { key: '376f8f6c2728c8044d058bab425d393534bd663d', class: "w-full" }, h("ul", { key: '317a5310649943460df30cd2e68dbf3dcc547499', 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: '7cde122042c334ddee130cd08ace0e5d85df6f8c', class: "w-full" }, h("ul", { key: '9b86c880cc07b785fcfe364ee3271947f2804079', 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: 'a2c6b976e0afb9f501bb19a6de47faa1a0de095e', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'f7b115c2c96e67123dc3f539cf191f93a8f411e0', 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: '236cba8f8133462144e771fa0911f5f5f3d7af58', 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: '1330c6ae0c7e870a94e9f120587240a605570883', class: "flex" }, h("div", { key: '548fd1822b448bc1d424d0d8d70e21643e0d4b7b', class: "w-full" }, h("ul", { key: '0a03e4b6817a18cfbcbadb0734c7970120b7d632', 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: '535d834c0520279fc1c1356275901aa942037e9c', class: "w-full" }, h("ul", { key: '3125151afe464cdb9ca4a33904ee9f865c743fed', 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: 'd09d8204f4369476882f0614e96c07c953b34f54', class: "container" }, h("div", { key: 'a80342ee08961192aa3a664f66406b220cd208ed', class: "mb-8" }, h("eds-alert", { key: '242c9bae130e9a7487412da4f75ab30a2db49335', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), h("div", { key: 'f9d60933f46189f848938a5beb1ca5fadfa84934', class: "flex" }, h("div", { key: 'd7f33f14834c5a97aafbdb447f723e1a20b5e498', class: "w-full" }, h("ul", { key: '0e3b7baf000534530164f373884a6957419539a7', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'd0422452dbb56de94fee33562b07867fb9bfd6ac', class: "w-full" }, h("ul", { key: 'e5daf06bbcec1227ccf03b3f3a8a6016a33c289c', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
+        return (h("div", { key: 'd433cf3416554a48fd728386bea79e2d876ac5fa', class: "container" }, h("div", { key: 'e8e821cdee53343675f171420ea6a37821d048f6', class: "mb-8" }, h("eds-alert", { key: '44f28c11e4c2997fe1774da68881a9f647631929', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), h("div", { key: '3478eb5fcd7c30a8474acae5892a1e3f1c3ae039', class: "flex" }, h("div", { key: '3921f7de637d98f5dd8f64c36258391392875f13', class: "w-full" }, h("ul", { key: '4d79c3d5330ae7cda3deecede1d2c3c784f13c32', 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: '1905adc0741fd76758d69c13f343dade55c9c7c1', class: "w-full" }, h("ul", { key: '72f35110e6c9da32b0df2be4d5ade3b778b58245', 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: 'a5c54560de99e81caaabafc4342522602ffe35a1', class: "container" }, this.renderContent());
+        return h("div", { key: '7c35270931bb242311baaa8b2d45f15135f72410', 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: '17148efe64117050084010b77d85de64bdfe2000', class: "container" }, this.renderContent());
+        return h("div", { key: '9afe4f5912087e80d327a7c79a69be68b1ffa677', 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: 'c5a0dc7f4e58c77624481262b1a6ac31df5425ee', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
+        return (h("section", { key: 'c8634946d5cd2813e8ed6eb3ee7a5071a8e80449', 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: 'd0e212f61414068b55b2ce1a3d9c7c2a51743908', class: "w-full mt-28" }, h("ul", { key: 'f656822bfc1a95bb4435eec2db9573e4362d1c59', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(radii).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${key}` }, h("eds-code-block", { language: "Utility Class", code: `rounded-${key}`, class: "mx-auto min-w-[200px] sm:mb-4 sm:max-w-[200px] mr-auto" }), h("eds-code-block", { code: `border-radius:${value}`, language: "css", class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto" }))))))));
+        return (h("section", { key: 'a274ee157395f49f9f224ef496813ea5c3b8503c', class: "w-full mt-28" }, h("ul", { key: 'd2d6dbee8ef7e54dc1a85eb400c37b5910928e58', 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: '0215729c6c798288f74b3e9a589763c8a71c6fd3', class: "w-full" }, h("eds-section-core", { key: '9ac3c1b933b7bb7cc6c8dd9aeface59ba3646750', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: 'd4ae2c487aa2402740dfd1465823fe3d04c19e18', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(ratios).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { class: "container ratio-box flex items-center justify-center text-center border-2 border-soft", style: {
+        return (h("section", { key: '01282f48cbcd27d349565fc5b87bd50159441e1f', class: "w-full" }, h("eds-section-core", { key: 'ff586dcefa969a84732fbbac7f237089ec8d358d', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: 'f3c879e4105194896fd3fb8d98c39ee614973c24', 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: '2f8e9eef279ee176ba1c72660181a4a36a184985', class: "w-full mt-28" }, h("ul", { key: 'a5ddc9f6faab20c73b6dbb08364925d3b221e848', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(shadowTokens).map(([category, tokens]) => Object.entries(tokens).map(([key, value]) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, h("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: value } }, h("eds-code-block", { code: `${category}-${key}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), h("eds-code-block", { code: `${value}`, language: "css", class: "ml-auto min-w-[200px]" })))))))));
+        return (h("section", { key: '44c305a74ba522938b27fe4a8deba5e18e752e72', class: "w-full mt-28" }, h("ul", { key: '8fa403e44506eb4847f1651a7fd519b9c5f336b8', 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: 'e01032fc0640d466fbf25d52c786c2ad09282deb', class: "w-full" }, h("ul", { key: '067499a0d422c6759393a729018a0e428ac5bb73', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '18811cd88f3627f824c09ed57522b624c905704a', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '6f810ada1266d71181c85ae01f6d0f03d74c5d62', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'be8c8193dd759eb651230904f482bdd29ece17d9', class: "spacing-sample m-16 bg-strong" }, h("span", { key: '3275ae8d2dcc26a097fcec9e47e865d122e8a7a0', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), h("li", { key: '1501280856acd0f86ed6d18deb2994e2b938d550', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '9c6bd09fb408bf28e1ff7259ee82858657055d53', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '66ce0e318e1ef01c95634678d8dad929261c3559', class: "spacing-sample ml-64 bg-strong" }, h("span", { key: '746c47d3d838c4a2afc3e33f97ea92e4152505a4', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), h("li", { key: '1e743a6b9907f8d533b6bb0e47204ca9f2ac1540', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '9b127a0fc072a67d2a03af42718407f7c570981c', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '603d387bfc95e7eaaa688d9bed69d17dcdbeb023', class: "spacing-sample mt-32 bg-strong" }, h("span", { key: '19105f04e3571991899dcd237a2e88285200fa2a', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), h("li", { key: 'a4bba328ebdb74767c06aed1ddf90251ff53c774', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '8c0ddf065902880ea676a0178d8d384696d11d44', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'c73eb82ac1b447d2441be39f1e07e4864bba2a49', class: "spacing-sample p-32 bg-strong" }, h("span", { key: '6c76e373c0827ed4449abfd0fa1b69db2e02ef10', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), h("li", { key: '23699817570e914c03849e8bc5ab3c72b732470c', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '253d94e4ddabd622302bbc38a5e866b9a9dc8826', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'c366056f299a7fd53eb589cedbf8f40aa996d032', class: "spacing-sample pt-32 bg-strong" }, h("span", { key: '22b94a1f3f4605af8f11dcd10b03f112ad426798', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), h("li", { key: '18418c7ea84aaaefe187e484774e96d5233946ab', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '953b9ebfb47560f768bdf606fdc455eae18fa351', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '1ee32fc2918a078e421e0641c84e76c2bf48e839', class: "spacing-sample pl-32 bg-strong" }, h("span", { key: '15f50b76c805eb9fc1610d8027cd710f6c8c89b4', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
+        return (h("div", { key: 'e6d23c9b0eecdbb9551da827e84b536c237c3fa2', class: "w-full" }, h("ul", { key: 'f8c8ea13fd5f36050858e813f3300c12c9ed8a93', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '9473a1f844d1d6e4cfd2aaf6e8ec8587ebbc8f46', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '86f5d11b9f24a78c2d000a487402ea203663472d', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '2aa3f316b2a8b9f75403bc148f1e0f2c5b008760', class: "spacing-sample m-16 bg-strong" }, h("span", { key: '178bcea91ee96b6ba7d7f35d3129ba0365103a51', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), h("li", { key: '3bea85f0dabe95c77f1f7efa20868e05dbe8ac29', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '5500ec5a1b8a408ace5f6b74a09af135953508b9', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '4fe620bb9f4e246aac4093a3bceeb504a91f7347', class: "spacing-sample ml-64 bg-strong" }, h("span", { key: '8043e928ce06e7eb4f9a980523b85bc1aeacce23', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), h("li", { key: '3909330218202d18909ece6bb6c24209cdf89737', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'eddaed5ba95dcff41b807123719b86a2e109f199', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '9d4ab0bce204ed45ec8a35079213a3663dff2e70', class: "spacing-sample mt-32 bg-strong" }, h("span", { key: '95a3e2eddf9d5b5659ee455de56815e83c873d22', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), h("li", { key: '3dfe973b5081f9c209386a0b090703c5d9ee9286', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'a82ec5b68b327c2d6c73109170babaa42866a7bb', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'bf446dc3468e554be2419cd4f86a9e015f36e027', class: "spacing-sample p-32 bg-strong" }, h("span", { key: '5569dc17bfd58e125651fa8bb7ff3c510e5a11c8', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), h("li", { key: '2bd50606ad35620c512c764008e1ebae74b7eb5a', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '6d3172e3d9db2aca2d44112795e030cbe8764327', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '7abece54dfbf26fa0f441079192e3de3d1924897', class: "spacing-sample pt-32 bg-strong" }, h("span", { key: 'dce98a63280c8b9e8a691074e7727a02c8683290', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), h("li", { key: '2330aed59c3748951cd1b99bec3324554b81f51b', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'f17b856f30a3ddaabc9d7dcc4438cde42f49956d', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'fb0907d427077e137a878adcb54b1e9b0cdf368e', class: "spacing-sample pl-32 bg-strong" }, h("span", { key: 'e5f919cc44e91ce7eb887bc0419f998039c95fa6', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
     }
     static get is() { return "token-spacing"; }
 }

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

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

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

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

package/dist/collection/eds-docs-ui/logo/logo-space/logo-space.js

@@ -5,7 +5,7 @@ import { vLogoMargins } from "../../../../../../../../packages/svgs/src/index";
  */
 export class LogoSpace {
     render() {
-        return (h("div", { key: '2ff3cdb12cbd61fc4053418d1a678409c05755f2', class: "container" }, h("ul", { key: 'abfc33d14841a457959f5b15e8542465e8a0f883', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'd81281a2d146a19d036678cb794f5224236ce521', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '9d3774468a2b09098b84a8354683b2c6940491f5', class: "logo-container mx-auto w-[300px]", innerHTML: vLogoMargins })), h("li", { key: 'cb4d4a3ff951b25fba627bd98cc1319dcb803158', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'fa2f563d8ad8100b6d12c626f41b4552d99c743e', class: "text-center mt-16" }, h("p", { key: 'bda0bb099f9e82b9462bee494f7d417bdd9984b9', class: "f-body-01" }, "To ensure legibility, follow these minimum size guidelines:"), h("eds-table", { key: '92b100f67e3a7dd84d817b5dbc8cdfe76d6b2408', data: '[\n                  { "Media": "Print", "Landscape": "0.75 cm", "Portrait": "1.75 cm" },\n                  { "Media": "Web", "Landscape": "29 px", "Portrait": "50 px" }\n                ]', config: '{\n                  "Media": { "format": "bold" }\n                }' }))), h("li", { key: '4d6ad4aacf24c4386493fe74ed928321627602ac', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }))));
+        return (h("div", { key: '411079c2662e0a3a30a86d5772cb805f4efa37ac', class: "container" }, h("ul", { key: 'c68ca64183ed475c7dc674dede1fd6487eddef63', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'e0100ca54422f34ff4cd15e0917644ec8712c156', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '812f16e80ab95933bffe6c7ef39e52f702b79edb', class: "logo-container mx-auto w-[300px]", innerHTML: vLogoMargins })), h("li", { key: 'c5209c8ede7c3f3fd5f0e9334aab586296c4d008', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '9ab0f8f9a361ee987dee921009f89123247c921d', class: "text-center mt-16" }, h("p", { key: '205d342af4c1a674cb84e3ef5d153228a1c093c8', class: "f-body-01" }, "To ensure legibility, follow these minimum size guidelines:"), h("eds-table", { key: '0391c6dea176b8752b1415fc1519808371f7d04c', data: '[\n                  { "Media": "Print", "Landscape": "0.75 cm", "Portrait": "1.75 cm" },\n                  { "Media": "Web", "Landscape": "29 px", "Portrait": "50 px" }\n                ]', config: '{\n                  "Media": { "format": "bold" }\n                }' }))), h("li", { key: '24d1d1e16a52cef90e4cc0cb20896b193e04f25d', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }))));
     }
     static get is() { return "logo-space"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class LogoVariationsHorizontal {
     render() {
-        return (h("div", { key: 'd8357d0a4234d0c411881928a6daabdda928f272', class: "container" }, h("ul", { key: '30e3d8efd0f5fd173f48c6e1e02005e7da813ce9', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '751d2de97fe8774614b15de1feda7f59c8da2ef0', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: 'd0ba9b152a505a591cabf5a54b720b6e718173e0', class: "f-body-01 text-center my-4" }, "#1 Coloured"), h("div", { key: '81b91d5c53a7ac440364083dd06222f32bf5dc51', class: "coloured" }, h("eds-logo", { key: '921cac572b2da3871eff8c2912de79babb909c91', type: "no-bg", href: "#" }))), h("li", { key: '74cebe6855e0e23d95a3ec74927b569c29b34d07', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: 'ed5484e8ff8f85251f85a61fb53d21639dbb914b', class: "f-body-01 text-center my-4" }, "#2 Black & White"), h("div", { key: '7a5f1894fe514a323e8955c01d1ab071187c2a5c', class: "bg-default" }, h("eds-logo", { key: '9a072cdaf4f7f901b8cb91d3fe9bc85ddb0e8eba', type: "black", href: "#" }))), h("li", { key: 'ea3f60807f78264c6305061dc292d1d17f7fd173', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '530e8f71e5d6f56a9f8981ad454ecbd00162030e', class: "f-body-01 text-center my-4" }, "#3 Dark"), h("div", { key: 'b74d2cfb21a8d6f8288444cfed8ba9dc80d929b7' }, h("eds-logo", { key: 'f31c76f4f3e3f03f02d2712a272ba893f7832a7a', type: "color-white", href: "#" }))))));
+        return (h("div", { key: '43ff78b2e28f748b65d76997fc217f694ab11210', class: "container" }, h("ul", { key: '0b41f3d923858c41b34ec2df2a2536dc0d5ee129', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '766c9f9b9555cccbf8a77f11a41ae7b1bc0fcbcb', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '1a7e7814e435a6ee20ba8925b5b6bf8ac590ea89', class: "f-body-01 text-center my-4" }, "#1 Coloured"), h("div", { key: '135de0fdb2863f618e8e6da2bf8e49b91d9f4053', class: "coloured" }, h("eds-logo", { key: '367b20f96d4318d6bc9750ea6b18b30bbce5036e', type: "no-bg", href: "#" }))), h("li", { key: '36d3d81aaf9518fd996bdc34498581bca3d70d2e', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: 'b24aa1c6658bacab12264a63a95062fcadc870cc', class: "f-body-01 text-center my-4" }, "#2 Black & White"), h("div", { key: 'cb77e4797f9b0c415d0df06a9250b356899f26f2', class: "bg-default" }, h("eds-logo", { key: '7ccba5fd14b38ff9c4ea7531231559b0ed02966c', type: "black", href: "#" }))), h("li", { key: '3926dd438bf041dd421cf244c50ada804894f32b', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '734670d268558409ac6a3f72b7076c2d31428174', class: "f-body-01 text-center my-4" }, "#3 Dark"), h("div", { key: 'a96c5dc623498e217fdab19ece1ccf0049077c6e' }, h("eds-logo", { key: '2edd46a62c77ae56801ad035cfd128f77e3bf90a', type: "color-white", href: "#" }))))));
     }
     static get is() { return "logo-variations-horizontal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ export class LogoVariationsVertical {
         this.type = undefined;
     }
     render() {
-        return (h("div", { key: '983decc613dcf98cc903eb0220e4604e6eaff4d0', class: "container" }, h("ul", { key: '4c76eb52168bc862e3d9ba4afcfce2feadb92ab8', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '4e51746424e45dcae4bd01fe5ff30a9634333e2f', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '18227e8430d94259740bcbcfe100540831d2a857', class: "f-body-01 text-center my-4" }, "#1 Coloured"), h("div", { key: '374be81aba7532670ff470026317a49d78f54762', class: "mx-auto coloured w-[300px]" }, h("eds-logo", { key: 'fdfe6b1cc100dff3a53c9065bc16803043df97e5', orientation: "vertical", type: "no-bg", href: "#" }))), h("li", { key: '5aaf638a69109964188bbcad753f420177859107', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: 'aadc470260f28236f3f4628ebf5c7261915f1fb2', class: "f-body-01 text-center my-4" }, "#2 Black & White"), h("div", { key: '3fed72cb0a3f38c6619d78a6995746a3cee5ee0e', class: "mx-auto bg-default w-[300px]" }, h("eds-logo", { key: 'bcf169b31b33615c82b768f20a0b648236644c65', orientation: "vertical", type: "black", href: "#" }))), h("li", { key: '62f0c6803ca0ec6090db435388da6754054c2007', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '32813722dca892164d108df2ef0a3048cb4ebbbd', class: "f-body-01 text-center my-4" }, "#3 Dark"), h("div", { key: 'e33669ea223f6d923d71e2a8568140ae5ef739e3', class: "mx-auto w-[300px]" }, h("eds-logo", { key: '4176811098a57727ed30bfc1db82fa16aa06bd6c', orientation: "vertical", type: "color-white", href: "#" }))))));
+        return (h("div", { key: 'ed4602bffec9b896853f794b6b9e56d2beed3a89', class: "container" }, h("ul", { key: '3ffbcc4dbd811288a4f381d8eba61b06cde9297d', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'd47f43861c009c634338d5a04fa74a5d89c30f94', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: 'e5db6a71f75fded654a99ec79e8fff330dd832ed', class: "f-body-01 text-center my-4" }, "#1 Coloured"), h("div", { key: '5868a3f04cd2a88df6cf3eefb46badbfada3ea8d', class: "mx-auto coloured w-[300px]" }, h("eds-logo", { key: '590e3dfc99929401fceebb37346dc87cb24b9aa4', orientation: "vertical", type: "no-bg", href: "#" }))), h("li", { key: 'd7dde19a741953af97b7c2ef52ac9fe535dd8d44', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '1301a26d1f989762dad8ada3f2e85d5975ae8416', class: "f-body-01 text-center my-4" }, "#2 Black & White"), h("div", { key: 'ede8c0b521720e3f73f7cd17a98df8d617d06d6b', class: "mx-auto bg-default w-[300px]" }, h("eds-logo", { key: '298f13765230a428fe948df4e7f580a7ea438786', orientation: "vertical", type: "black", href: "#" }))), h("li", { key: '558abf2aa94784e70252277adecae2f1f7be83ac', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: 'ccdde6e4a2cfd1eeca62362430f0e1ace6e33f9c', class: "f-body-01 text-center my-4" }, "#3 Dark"), h("div", { key: 'abdef9d3f5762ebbd571851192677bba00f45a48', class: "mx-auto w-[300px]" }, h("eds-logo", { key: 'b3c7f59aff43c12dfb70e1b93c5746c2d8f2499b', orientation: "vertical", type: "color-white", href: "#" }))))));
     }
     static get is() { return "logo-variations-vertical"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,7 +17,7 @@ export class LogoVariationsTabs {
         }
     }
     render() {
-        return h("div", { key: 'a7e8981363410d2a325478150990092516e74f2e', class: "container" }, this.renderContent());
+        return h("div", { key: '84eb012e0b54780f60d478863ce3561d48ce85b1', class: "container" }, this.renderContent());
     }
     static get is() { return "logo-variations-tabs"; }
     static get properties() {

package/dist/collection/eds-docs-ui/logo/logo-wrong-usage/logo-wrong-usage.js

@@ -5,7 +5,7 @@ import { hLogoColor } from "../../../../../../../../packages/svgs/src/index";
  */
 export class LogoWrongUsage {
     render() {
-        return (h("div", { key: 'fa573cdaaa0d55c820b5a355bff48d5f1d10544a', class: "container" }, h("ul", { key: '5c1941d3c45fa4814ffbdfaf30af106542862802', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'fd02c67fbe23ebb78289e5281c5b4917a44c950e', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '246527a7926c377c287a3c8073b06952b54dc694', class: "mx-auto no-other-bg-color logo", innerHTML: hLogoColor }), h("p", { key: '88ebc748214a558e6cee28b8624f287de2faf80c', class: "f-ui-02 text-center" }, "Do not use with backgrounds that make legibility difficult")), h("li", { key: 'dbf4655e3bbbad7566f64f5b8eb474c749967c38', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '5d2c9c916bc81ce831daf99c6293024aa9b0b2f0', class: "mx-auto no-other-color logo non-brand-color", innerHTML: hLogoColor }), h("p", { key: 'f9a37e0a587b60bf607efd2e1f3aa4114f67ef33', class: "f-ui-02 text-center" }, "Do not apply other colors")), h("li", { key: '3e1126e6636e0064ce852cc4249a684b77d7ba0a', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'a1eb4d8ea7764734f24b39cb95b36d6718f331a3', class: "mx-auto distorted logo", innerHTML: hLogoColor }), h("p", { key: 'e3d0156ec563c657c03beaa61a7ae068e78df09c', class: "f-ui-02 text-center" }, "Do not deform the logo")), h("li", { key: '062a45841b978d79fe82e5773ba82c98e8f9eb6c', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'd0f276a91bf1ea13b4f482e39e9f83b7ef3f2593', class: "mx-auto effects logo", innerHTML: hLogoColor }), h("p", { key: '62f67b5f28839a5bb3706e78004c1989feced677', class: "f-ui-02 text-center" }, "Do not apply effects")), h("li", { key: 'c4d0025e06c8385935a4b6162d65f78bc3d7b94d', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'c6118e7d56abcf4a54f6f590d9a77a9397fa3209', class: "mx-auto rotated logo", innerHTML: hLogoColor }), h("p", { key: 'a6c71000e3cf8b6d3a28c8f8c0df0840fdf2a749', class: "f-ui-02 text-center" }, "Do not rotate the logo")), h("li", { key: 'd558e277275a305f3d491eba94aad8c1e7eec471', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '56947add9521b76a88ea05f8f64b6f0f656a9863', class: "mx-auto outlined logo", innerHTML: hLogoColor }), h("p", { key: '0de198ca711a32e9b0f6ff7275af9dc2bce3c1b6', class: "f-ui-02 text-center" }, "Do not apply outlines")), h("li", { key: '12b7c15e994ae6b40041da68eaa609ee0ec499a7', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '9ef38af84bee3b83b04f881e6481769fc39991ff', class: "mx-auto" }, h("div", { key: '7f793491cf76a2c937ab0ca820dfd3f2a5779728', class: "bg-accent p-16" }, h("div", { key: '60bfff8e962a543dcda5db9d1bdf75a3702f8b38', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: '8a0a6a43def963fd5bd00e857ab7e21d60e54454', class: "f-ui-02 text-center" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones"))))));
+        return (h("div", { key: '47db71fa97eed9b24d6873aac34e4d513f835c8a', class: "container" }, h("ul", { key: 'f06cff3d8313404bbbe50e2744582a8d394384a2', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'ddac40db90edc523f2d95f7da243596baf3c00af', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'e7ec76fb43d846bfaa09b7fd12a70d3b3fd91476', class: "mx-auto no-other-bg-color logo", innerHTML: hLogoColor }), h("p", { key: '3288cbda1a66f4557dd0546cfc7fc1db64113520', class: "f-ui-02 text-center" }, "Do not use with backgrounds that make legibility difficult")), h("li", { key: 'af5f8b9fcf5583f970b2f097f2ebbf581f5e65c4', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '06c9a344c7505b5299bca221ca3b3222ff141cfe', class: "mx-auto no-other-color logo non-brand-color", innerHTML: hLogoColor }), h("p", { key: 'b9a018ccf607edb5f4646f41269f39b4146dfb07', class: "f-ui-02 text-center" }, "Do not apply other colors")), h("li", { key: '549d912c33d1d72b5a09e0bcf1b3866b83a42bcb', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '4e01b36b889bbd5a76581e4a7d7dad700cce647c', class: "mx-auto distorted logo", innerHTML: hLogoColor }), h("p", { key: '15c8d9949f2fe250005879152e96ac6ddf9a9dde', class: "f-ui-02 text-center" }, "Do not deform the logo")), h("li", { key: '4e3d38bba478657ef86242a5defab77340549e68', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '92b31722f79d8324a25cfea1583b64dc5710d96f', class: "mx-auto effects logo", innerHTML: hLogoColor }), h("p", { key: '0b9a84f0d8a9d3c02b7d8ace6b95964106239cd6', class: "f-ui-02 text-center" }, "Do not apply effects")), h("li", { key: 'ebfea671909f84d0b3bb018bf56ebdfabc2c3785', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'dec45dc8ca9fcca44be26c0001dbefe045fab6b5', class: "mx-auto rotated logo", innerHTML: hLogoColor }), h("p", { key: '32407a77fcd5bd9efe075f66fe7de260d6ac76bf', class: "f-ui-02 text-center" }, "Do not rotate the logo")), h("li", { key: '65fe0d30655a81fb4b791d19bbcad66e4b6098e9', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '561983d5e3ce55c7afa14999230838312c5682c6', class: "mx-auto outlined logo", innerHTML: hLogoColor }), h("p", { key: '230eeb47f7e1d3d864b4202cb39cdadb883649da', class: "f-ui-02 text-center" }, "Do not apply outlines")), h("li", { key: '3e30322cd2a4c1f9d03f9e9c5758a3e2141f61c1', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '6d19155d8c5f4413118f3a2f3af89e276c707311', class: "mx-auto" }, h("div", { key: '64d6e6b6502add707ccb16da25f4fbb6699ab1b0', class: "bg-accent p-16" }, h("div", { key: '8f2c70ce2a39638634f388b7d28e6e3869a6d30d', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: '9ce6b36d8c6ca1c90299664765bdca50c3d1d412', class: "f-ui-02 text-center" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones"))))));
     }
     static get is() { return "logo-wrong-usage"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,7 +25,7 @@ export class SvgRepository {
             icon: { format: 'svg' },
             name: { format: 'bold' }
         };
-        return (h("div", { key: '36ab796174ab215a5e8f834f0d6291853305e732', class: "full-width" }, h("eds-table", { key: '31fca470f340fa54137887ef426f4f7e1fc72f73', "table-data": JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true })));
+        return (h("div", { key: '4c92aff806bb91d25e1c29d6d01c035e0a534eef', class: "full-width" }, h("eds-table", { key: '3dd1d7abd1a310611a6229b356d7732ac4dc8e40', "table-data": JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true })));
     }
     static get is() { return "svg-repository"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-cookies-preference/eds-cookies-preference.js

@@ -25,7 +25,7 @@ export class EdsCookiesPreference {
         }
     }
     render() {
-        return (h("div", { key: '030dd5db2221d5613fae0fb215cac7c20c815c2b' }, h("eds-link", { key: '61d1bdf5e4299e65d980a08d25bec93b089f5330', size: "small", intent: this.intent, label: this.buttonText, onClick: () => this.toggleCookiesPopup() }), this.showMatomoNotice && h("eds-matomo-notice", { "force-show": true, key: this.noticeKey })));
+        return (h("div", { key: '778879d8a4552e7dd55ac77b60d90e0bae97522c' }, h("eds-link", { key: '832d45be8a294f90fc81b45c6604aec61c8f8174', size: "small", intent: this.intent, label: this.buttonText, onClick: () => this.toggleCookiesPopup() }), this.showMatomoNotice && h("eds-matomo-notice", { "force-show": true, key: this.noticeKey })));
     }
     static get is() { return "eds-cookies-preference"; }
     static get originalStyleUrls() {

package/dist/collection/shared-ui/eds-global-search/eds-global-search.css

@@ -0,0 +1,222 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+p {
+  margin: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.search-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.search-dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  right: 0;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
+  max-height: 500px;
+  overflow: hidden;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+}
+
+/* States */
+.dropdown-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 24px;
+  color: #616161;
+  font-size: 14px;
+}
+
+/* Results List */
+.dropdown-results {
+  list-style: none;
+  margin: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 440px;
+}
+
+.result-item {
+  padding: 10px 14px;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  border-left: 3px solid transparent;
+  overflow: hidden;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+.result-item:hover,
+.result-item--selected {
+  background-color: var(--grey-200);
+  border-left-color: var(--green-600);
+}
+
+.result-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.result-snippet {
+  font-size: 13px;
+  color: #616161;
+  line-height: 1.4;
+  margin: 0;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+/* Footer */
+.dropdown-footer {
+  border-top: 1px solid #e0e0e0;
+  padding: 8px 16px;
+  background: #fafafa;
+  flex-shrink: 0;
+}
+
+.footer-hint {
+  font-size: 11px;
+  color: #757575;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+kbd {
+  display: inline-block;
+  padding: 2px 5px;
+  font-size: 10px;
+  font-family: monospace;
+  line-height: 1;
+  color: #424242;
+  background-color: #f5f5f5;
+  border: 1px solid #bdbdbd;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+}
+
+/* Scrollbar */
+.dropdown-results::-webkit-scrollbar {
+  width: 8px;
+}
+
+.dropdown-results::-webkit-scrollbar-track {
+  background: #f5f5f5;
+}
+
+.dropdown-results::-webkit-scrollbar-thumb {
+  background: #bdbdbd;
+  border-radius: 4px;
+}
+
+.dropdown-results::-webkit-scrollbar-thumb:hover {
+  background: #9e9e9e;
+}
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.text-error {
+  color: var(--red-700);
+}
+
+.text-lighter {
+  color: var(--grey-600);
+}
+
+.text-lightest {
+  color: var(--grey-500);
+}
+
+.ml-4 {
+  margin-left: 0.25rem;
+}
+
+.ml-8 {
+  margin-left: 0.5rem;
+}
+
+.ml-16 {
+  margin-left: 1rem;
+}
+
+.p-16 {
+  padding: 1rem;
+}
+
+.p-64 {
+  padding: 4rem;
+}
+
+.f-body-02 {
+  font-family: var(--f-body-02-fontFamily);
+  font-weight: var(--f-body-02-fontWeight);
+  font-size: var(--f-body-02-fontSize);
+  line-height: var(--f-body-02-lineHeight);
+  letter-spacing: var(--f-body-02-letterSpacing);
+}
+
+.f-ui-03 {
+  font-family: var(--f-ui-03-fontFamily);
+  font-weight: var(--f-ui-03-fontWeight);
+  font-size: var(--f-ui-03-fontSize);
+  line-height: var(--f-ui-03-lineHeight);
+  letter-spacing: var(--f-ui-03-letterSpacing);
+}
+
+.f-ui-03-light {
+  font-family: var(--f-ui-03-light-fontFamily);
+  font-weight: var(--f-ui-03-light-fontWeight);
+  font-size: var(--f-ui-03-light-fontSize);
+  line-height: var(--f-ui-03-light-lineHeight);
+  letter-spacing: var(--f-ui-03-light-letterSpacing);
+}
+
+.f-ui-04 {
+  font-family: var(--f-ui-04-fontFamily);
+  font-weight: var(--f-ui-04-fontWeight);
+  font-size: var(--f-ui-04-fontSize);
+  line-height: var(--f-ui-04-lineHeight);
+  letter-spacing: var(--f-ui-04-letterSpacing);
+}