@ebrains/components 0.8.0-alpha.0 → 0.9.0-beta

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: '16cab4ed90701a89fe7586cb29e85e01156a2f9a', class: "w-full mt-28" }, h("ul", { key: 'e997b51855eb94a8cda474ce537ab81c88938ca9', 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: '912af038957cf8b00443e72529d4929b7a508a0a', class: "w-full mt-28" }, h("ul", { key: 'ffffacd1e6006a05a27d5e1248ce626c36abc73e', 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: '5e6ad389cf71ef5d70b7c4a92314b25ef7272f62', class: "w-full" }, h("eds-section-core", { key: '5dd2339752eddd0826987245e7b80edc64816a32', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: 'd71c41ed6a9d8f6b45c03fb8fa7070810f3fe6ba', 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: '595dc0d77e33bfb2109666d185933c9f5b23616e', class: "w-full" }, h("eds-section-core", { key: 'a3217b7808a1bc810ff0b158c4e6547bc2a77b06', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: '505f84a67b6eba8c33d1484c4cb0e94f4de68bc0', 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: '019be87dca82cd1edd392ef0758b8a2e37d09ff6', class: "w-full mt-28" }, h("ul", { key: 'ade136beb8b25087e26c3f2300b463aa3fda1e41', 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: 'af8f66e30d9115f920d483c02d1f7c2b718589f9', class: "w-full mt-28" }, h("ul", { key: '1588c580f981ab148ba23a76cd33b0c8b993822c', 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: 'a5ba01206487d07014bfd41fbed4f2f80f7d067e', class: "w-full" }, h("ul", { key: 'be6eb0bbe85f40b123ea04e02d839412401e0e0d', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '1617719d10e11cc1e36df8cdc368fb3f55536d9a', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '3510583e1adc5029a2562b96f33e9f6453240da5', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'b01170621405035c36efe8e5858201b6d12b23e9', class: "spacing-sample m-32 bg-darker" }, h("span", { key: 'ce9639400a99d478a5e31f95c9482cec914e90af', class: "text-white" }, "Margin: 2rem / m-32")))), h("li", { key: '96dd43d6786acdcb5cf9c911ce39efce00b09a77', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'd8d9178f9f700eb5e752c87333d894a2392d72e9', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'f357493cdad00a69ec48dc3fb7854ba4b25579ab', class: "spacing-sample ml-64 bg-darker" }, h("span", { key: '6e5e8b20be76970dead72ca485fb5cc9a6e7c1f1', class: "text-white" }, "Margin Left: 4rem / ml-64")))), h("li", { key: '22fec87f6102e0577bf912508128c12716b48cb4', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'dee21a637d965b41cbdd9b4131ae7e6fc241d39a', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '43b150abac42ee2e189ec5fe8de64f5b43fba2c8', class: "spacing-sample mt-32 bg-darker" }, h("span", { key: '3789c91cd7db3332af5df28308c4d69ccda4623d', class: "text-white" }, "Margin Top: 2rem / mt-32")))), h("li", { key: '07e7c1b44d09a873df7f4488381b561bd952b65f', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '898be718773fee0d091424178ff4302f2fbc137b', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '60ce8427ee0c6deeda95b385c6342ca1b6215bba', class: "spacing-sample p-32 bg-darker" }, h("span", { key: '97913f64a9c0b15b200811e59214e0d0b3d8837d', class: "text-white" }, "Padding: 2rem / p-32")))), h("li", { key: '01ba17c02dc6fb806a23ce4429091e0417d094c5', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '559de3d223e040d0e1edbff121b99e6218773917', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'a857560b3ad4d7a5a670d5db5baae3fcfbf18d21', class: "spacing-sample pt-32 bg-darker" }, h("span", { key: '5fff31ad7de22d84df6741c0f9a611164bbe5cc9', class: "text-white" }, "Padding Top: 2rem / pt-32")))), h("li", { key: '6ac602257cb50ac1a05d78b477bc84fb25e89b4c', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'a087fa3b78537b2c0e35b7e9c2693e972092d407', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '76265dd76d79f8eb33f20ae85794c70cf41dd38b', class: "spacing-sample pl-32 bg-darker" }, h("span", { key: 'fe6a57a3977218cb6f9ea10560650634080d0931', class: "text-white" }, "Padding Left: 2rem / pl-32")))))));
+        return (h("div", { key: '5526a1591fe499aa09c78be0143f69b7b7af6018', class: "w-full" }, h("ul", { key: '690fb216bebd9a7ded21792e9b06aa06afbc722b', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '601a7d094c2143cb0499251243282133b4389c7d', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '2c57a78fea544c8e76021031dba8addba73a6d47', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '8879361b69dabe72270b3eac45cf1c95e569f98b', class: "spacing-sample m-16 bg-strong" }, h("span", { key: 'a3ae615891152c0305386082b117083f8bafde9c', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), h("li", { key: '24142c0ecca843e6185201878ba34a7f01e22bc9', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'c1c25ff252577d8e00e7d1de77f9960e7e97dfde', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'c6797217f9bc11797961b3d26fe814bbb275e583', class: "spacing-sample ml-64 bg-strong" }, h("span", { key: '376548ee4fa82a8ac20a46b926b34ef6147350aa', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), h("li", { key: '973f0bb97ebb3c180d2283387f49df9513b7770f', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '573eb47f4cc69d46f0603a0a709315c7e191998b', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '71cd97ffaeed369e234c75909a5be4bbb3cb43d5', class: "spacing-sample mt-32 bg-strong" }, h("span", { key: '0f6af30c5d310aba1436d9ff92e8d67d7f139b59', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), h("li", { key: '884a928c8d8c7b5dbdfd024e4e4d76bf98b55f49', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'cfa9dd4088ece07293702056de592c39d68a43ae', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'aca9b21ca52d79a724a5e985d6639e543b495e6b', class: "spacing-sample p-32 bg-strong" }, h("span", { key: '550fc1d92e707439176933443fca6532b06209ca', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), h("li", { key: 'a56af0286e1deee424fe9e7e6d3f1dccc0a0a92c', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '738731e56be9be727e47687d9ef271ab5b0a087c', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '5448eeed3887bd66270be4e93761b9a3d8fe206c', class: "spacing-sample pt-32 bg-strong" }, h("span", { key: '535e325326444ab1d50e885de65d6acdd7f9ec63', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), h("li", { key: 'e0b1ba436681545f760823f1e0d073fd8bd2d44b', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '9d65df19fdc4be8054e9b34c18f8b54eadac7dbd', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'fe8656e6f0f3fafa3e7dd1ba9dd35251a3a19bf0', class: "spacing-sample pl-32 bg-strong" }, h("span", { key: '32b26c324b26b3c57062d149cb49d1f1eeb5b5c4', 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: '8a5867f30800adcc1e5ef9438f01b3a031110402', class: "w-full" }, h("ul", { key: 'd1fc83712676e6524bddc2e5d1bc50f0266b05eb', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
+        return (h("section", { key: 'b2e3951c7419dccdd31e446898a9ad126e36398e', class: "w-full" }, h("ul", { key: '78ec896dad35353bcdc4d9f9d4b68873e1274933', 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,
@@ -13,7 +13,7 @@ export class TokenTypography {
                 fontSize: style.fontSize,
                 lineHeight: style.lineHeight,
                 letterSpacing: style.letterSpacing
-            } }, h("span", { class: "text-default font-bold" }, `${typeKey} (${size})`)), h("div", { class: "mr-auto block lg:hidden p-4" }, h("span", { class: "text-default f-heading-05" }, `${typeKey} (${size})`)), h("div", { class: "ml-auto" }, h("eds-code-block", { code: `f-${typeKey}`, language: "Utility Class", class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `${size}:f-${typeKey}`, language: "Screen", class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: [
+            } }, h("span", { class: "text-default font-bold" }, `${typeKey} (${size})`)), h("div", { class: "mr-auto block lg:hidden p-4" }, h("span", { class: "text-default f-heading-05" }, `${typeKey} (${size})`)), h("div", { class: "ml-auto" }, h("eds-code-block", { code: [
                 style.fontSize && `font-size: ${style.fontSize};`,
                 style.lineHeight && `line-height: ${style.lineHeight};`,
                 style.letterSpacing && `letter-spacing: ${style.letterSpacing};`,
@@ -21,7 +21,7 @@ export class TokenTypography {
                 style.fontFamily && `font-family: ${style.fontFamily};`
             ]
                 .filter(Boolean) // Remove any falsy values (e.g., undefined, null)
-                .join('\n'), language: "css", class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-fontFamily)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-fontWeight)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-fontSize)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-lineHeight)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-letterSpacing)`, class: "min-w-[250px] mb-4" }))))))))));
+                .join('\n'), language: "css", class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `f-${typeKey}`, language: "Utility Class", class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `${size}:f-${typeKey}`, language: "Screen", class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-fontFamily)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-fontWeight)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-fontSize)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-lineHeight)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--var(--f-${typeKey}-letterSpacing)`, class: "min-w-[250px] mb-4" }), h("eds-code-block", { code: `--sans: Inter, Helvetica, Arial, sans-serif;`, class: "min-w-[250px] mb-4" }))))))))));
     }
     static get is() { return "token-typography"; }
 }

package/dist/collection/eds-docs-ui/{eds-docs-palettes/eds-docs-palettes.js → docs-palettes/docs-palettes.js}

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 /**
  * @internal
  */
-export class EdsDocsPalettes {
+export class DocsPalettes {
     constructor() {
         this.tabIndex = undefined;
     }
@@ -17,9 +17,9 @@ export class EdsDocsPalettes {
         }
     }
     render() {
-        return h("div", { key: '480cc269ee31de61190b4ae7502c3c17e673c3f9', class: "container" }, this.renderContent());
+        return h("div", { key: 'f985628b9ea3f02a511e2facbda99b54f0723acf', class: "container" }, this.renderContent());
     }
-    static get is() { return "eds-docs-palettes"; }
+    static get is() { return "docs-palettes"; }
     static get properties() {
         return {
             "tabIndex": {

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

@@ -1,53 +1,154 @@
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.text-center {
+  text-align: center;
+}
+
 .container {
-    width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
-    margin-right: auto;
-    margin-left: auto;
-  }
-  .container > * {
-    --container-outer-gutter: 0;
-    --breakout-container-outer-gutter: 0;
-  }
-  .bg-accent {
-    background-color: var(--green-500);
-  }
-  .bg-dark {
-    background-color: var(--grey-300);
-  }
-  .bg-strongest {
-    background-color: var(--black);
-  }
-  .text-default {
-    color: var(--black);
-  }
-  .text-inverse {
-    color: var(--white);
+  width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.container>* {
+  --container-outer-gutter: 0;
+  --breakout-container-outer-gutter: 0;
+}
+
+.grid-layout {
+  --grid-columns: 6;
+  display: grid;
+  grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);
+  grid-gap: var(--inner-gutter);
+}
+
+.grid-cols-6[class*="grid-line-x"][class*="grid-line-x"]>*:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+
+.grid-cols-6[class*="grid-line-xfull"]>*:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
+
+.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+1)::before {
+  inset-inline-start: 0;
+}
+
+.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+6)::before {
+  inset-inline-end: 0;
+}
+
+.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+1):nth-last-child(-n+6)::before {
+  border-bottom-width: 0;
+}
+
+.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+1):nth-last-child(-n+6)~*::before {
+  border-bottom-width: 0;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(6n+6)::after {
+  border-inline-end-width: 0;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(-n+6)::after {
+  top: 0;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(6n+1):nth-last-child(-n+6)::after {
+  bottom: 0;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(6n+1):nth-last-child(-n+6)~li::after {
+  bottom: 0;
+}
+
+.grid-col-span-6 {
+  --container-grid-columns: 6;
+  grid-column: span 6 / span 6;
+}
+
+.gap-y-8 {
+  row-gap: 0.5rem;
+}
+
+
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.f-ui-02 {
+  font-family: var(--f-ui-02-fontFamily);
+  font-weight: var(--f-ui-02-fontWeight);
+  font-size: var(--f-ui-02-fontSize);
+  line-height: var(--f-ui-02-lineHeight);
+  letter-spacing: var(--f-ui-02-letterSpacing);
+}
+
+@media (min-width: 750px) {
+  .md\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
   }
-  .p-8 {
-    padding: 0.5rem;
+
+  .md\:gap-y-12 {
+    row-gap: 0.75rem;
   }
-  .p-16 {
-    padding: 1rem;
+}
+
+@media (min-width: 900px) {
+  .lg\:gap-y-16 {
+    row-gap: 1rem;
   }
-  .my-16 {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
+
+  .lg\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
   }
-  .my-20 {
-    margin-top: 1.25rem;
-    margin-bottom: 1.25rem;
+}
+
+@media (min-width: 1024px) {
+  .xl\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
   }
-  .f-heading-05 {
-    font-family: var(--f-heading-05-fontFamily);
-    font-weight: var(--f-heading-05-fontWeight);
-    font-size: var(--f-heading-05-fontSize);
-    line-height: var(--f-heading-05-lineHeight);
-    letter-spacing: var(--f-heading-05-letterSpacing);
+}
+
+@media (min-width: 1280px) {
+  .xxl\:grid-col-span-2 {
+    --container-grid-columns: 2;
+    grid-column: span 2 / span 2;
   }
 
-  .w-\[150px\] {
-    width: 150px;
+  .xxl\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
   }
+}
+
+.w-\[150px\] {
+  width: 150px;
+}
 
-  .w-\[300px\] {
-    width: 300px;
-  }
+.w-\[300px\] {
+  width: 300px;
+}

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: '6d1dd1a42531168fa253a2627100be4d15befa01', class: "container my-20" }, h("div", { key: 'f405531b79f871634d0b7f2b8d164c5bfc5296e0', class: "w-[300px]" }, h("div", { key: '29eb549e14b00c6936bb397e2f60dfb7728a261f', class: "bg-dark" }, h("div", { key: '34c5784a90267142e604e59e6db480b4603d0760', class: "logo-container", innerHTML: vLogoMargins })))));
+        return (h("div", { key: 'ef880ea5beba757cdd39f435eeb2fffc31840b44', class: "container" }, h("ul", { key: '53cab505e89057b97a9e6d431e25886c8790a363', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'c5454fac34e2799ce7a10d57e9d1a659522325ac', 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: 'e8c8300bec00274891d0a5fca79955fa06efff67', class: "logo-container mx-auto w-[300px]", innerHTML: vLogoMargins })), h("li", { key: '4b3c0262751f08fd7b23937908c429ea95f0d053', 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: '93acac909ef53d6e08dc09d0f9bacd676bb5e7d9', class: "text-center mt-16" }, h("p", { key: 'e8f03d15125aeb471a876cd58f12ae094c1539d3', class: "f-body-01" }, "To ensure legibility, follow these minimum size guidelines:"), h("eds-table", { key: 'fbb39b9b45de955c46329f3d96209074a1e513ff', 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: '25b3994ab87f7c78b514b585aebf72893b4cc25f', 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.css

@@ -1,80 +1,161 @@
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.coloured {
+  background: linear-gradient(to left,
+      #9CE142 0%,
+      #00C959 50%,
+      #00A595 100%);
+}
+
+.f-body-01 {
+  font-family: var(--f-body-01-fontFamily);
+  font-weight: var(--f-body-01-fontWeight);
+  font-size: var(--f-body-01-fontSize);
+  line-height: var(--f-body-01-lineHeight);
+  letter-spacing: var(--f-body-01-letterSpacing);
+}
+
+.text-center {
+  text-align: center;
+}
+
 .container {
-    width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
-    margin-right: auto;
-    margin-left: auto;
-  }
-  .container > * {
-    --container-outer-gutter: 0;
-    --breakout-container-outer-gutter: 0;
-  }
-  .bg-accent {
-    background-color: var(--green-500);
-  }
-  .bg-dark {
-    background-color: var(--grey-300);
-  }
-  .bg-strongest {
-    background-color: var(--black);
-  }
-  .text-default {
-    color: var(--black);
-  }
-  .text-inverse {
-    color: var(--white);
-  }
-  .p-8 {
-    padding: 0.5rem;
-  }
-  .p-16 {
-    padding: 1rem;
-  }
-  .my-16 {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-  }
-  .my-20 {
-    margin-top: 1.25rem;
-    margin-bottom: 1.25rem;
-  }
-  .f-heading-05 {
-    font-family: var(--f-heading-05-fontFamily);
-    font-weight: var(--f-heading-05-fontWeight);
-    font-size: var(--f-heading-05-fontSize);
-    line-height: var(--f-heading-05-lineHeight);
-    letter-spacing: var(--f-heading-05-letterSpacing);
-  }
+  width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.container>* {
+  --container-outer-gutter: 0;
+  --breakout-container-outer-gutter: 0;
+}
+
+.grid-layout {
+  --grid-columns: 6;
+  display: grid;
+  grid-template-columns: repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);
+  grid-gap: var(--inner-gutter);
+}
+
+.grid-cols-6[class*="grid-line-x"][class*="grid-line-x"]>*:nth-child(n)::before {
+  border-bottom-width: 1px;
+}
+
+.grid-cols-6[class*="grid-line-xfull"]>*:nth-child(n)::before {
+  inset-inline-start: calc(var(--inner-gutter) / -2);
+  inset-inline-end: calc(var(--inner-gutter) / -2);
+}
 
-  .w-\[150px\] {
-    width: 150px;
+.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+1)::before {
+  inset-inline-start: 0;
+}
+
+.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+6)::before {
+  inset-inline-end: 0;
+}
+
+.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+1):nth-last-child(-n+6)::before {
+  border-bottom-width: 0;
+}
+
+.grid-cols-6[class*="grid-line-x"]>*:nth-child(6n+1):nth-last-child(-n+6)~*::before {
+  border-bottom-width: 0;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(n)::after {
+  border-inline-end-width: 1px;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(6n+6)::after {
+  border-inline-end-width: 0;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(-n+6)::after {
+  top: 0;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(6n+1):nth-last-child(-n+6)::after {
+  bottom: 0;
+}
+
+.grid-cols-6[class*="grid-line-y"][class*="grid-line-y"]>*:nth-child(6n+1):nth-last-child(-n+6)~li::after {
+  bottom: 0;
+}
+
+.grid-col-span-6 {
+  --container-grid-columns: 6;
+  grid-column: span 6 / span 6;
+}
+
+.gap-y-8 {
+  row-gap: 0.5rem;
+}
+
+
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.f-ui-02 {
+  font-family: var(--f-ui-02-fontFamily);
+  font-weight: var(--f-ui-02-fontWeight);
+  font-size: var(--f-ui-02-fontSize);
+  line-height: var(--f-ui-02-lineHeight);
+  letter-spacing: var(--f-ui-02-letterSpacing);
+}
+
+@media (min-width: 750px) {
+  .md\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
   }
 
-  .w-\[500px\] {
-    width: 500px;
+  .md\:gap-y-12 {
+    row-gap: 0.75rem;
   }
+}
 
-  @media (min-width: 750px) {
-    .md\:w-\[300px\] {
-      width: 300px;
-    }
+@media (min-width: 900px) {
+  .lg\:gap-y-16 {
+    row-gap: 1rem;
+  }
 
-    .md\:w-\[500px\] {
-      width: 500px;
-    }
+  .lg\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
   }
+}
 
-  @media (min-width: 900px) {
-    .lg\:w-\[300px\] {
-      width: 300px;
-    }
+@media (min-width: 1024px) {
+  .xl\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
+  }
+}
 
-    .lg\:w-\[500px\] {
-      width: 500px;
-    }
+@media (min-width: 1280px) {
+  .xxl\:grid-col-span-2 {
+    --container-grid-columns: 2;
+    grid-column: span 2 / span 2;
   }
 
-  .coloured {
-    background: linear-gradient(to left, 
-  #9CE142 0%, 
-  #00C959 50%, 
-  #00A595 100%);
-  }
+  .xxl\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
+  }
+}

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: 'cc9a05a766fad3600cc3da8d922320708526346a' }, h("div", { key: '3dbdd07b54f1ea55685788776ba89d51c3b1f455', class: "container my-16" }, h("h3", { key: 'd50b9de5ac50c6803938360781816bccc1c5aef5', class: "f-heading03" }, "Coloured Background"), h("div", { key: '29333683d59a9adf60834fea8517160da5976d98', class: "coloured lg:w-[500px] md:w-[300px]" }, h("eds-logo", { key: '53000c65e1abcbc2a611c1e49fbfbaac6cf22944', type: "no-bg", href: "#" }))), h("div", { key: 'b9b784d2a105478f38fa2e72353dadca1253ae37', class: "container my-16" }, h("h3", { key: '5c6b2684fb5635df6aadac68f14ba064a08bee2b', class: "f-heading03" }, "Black and White Background"), h("div", { key: '1c2e191ce81ac1603c8d109c31e2b3a5707899e3', class: "bg-default lg:w-[500px] md:w-[300px]" }, h("eds-logo", { key: '5faa6c2920349e614e2846489738664121237175', type: "black", href: "#" }))), h("div", { key: '9f28a5d14f8aadca0ac38371eab47265a8a35a1b', class: "container my-16" }, h("h3", { key: '1649d22547279c6cdfc7d415537b87d76d8915f6', class: "f-heading03" }, "Dark Background "), h("div", { key: '135f85d196898dde99fdf7d5b5f09c54894b59cb', class: "lg:w-[500px] md:w-[300px]" }, h("eds-logo", { key: '3a04310c0debcfe1785c972895d7439f79a6aaa7', type: "color-white", href: "#" })))));
+        return (h("div", { key: '02941660c566920227b36481dd7d211ad0ae35cc', class: "container" }, h("ul", { key: 'a1859aafecdba011251097f758b38171278cac22', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'c105a4f208a7b7f15c6e0b28aff947e14bd533b9', 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: '7b465faf996ae41431f505a81f86711988fcf680', class: "f-body-01 text-center my-4" }, "#1 Coloured"), h("div", { key: '6e4ecd4347777a1fed5502129abe7247e2963923', class: "coloured" }, h("eds-logo", { key: '8b129a330768f306d009bf93a4602d761559d0b8', type: "no-bg", href: "#" }))), h("li", { key: '451cadfdb5178acc0269988a06afb0e454a07833', 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: '7b9d5fc604ebea27478f9ea3f95bf353e3310132', class: "f-body-01 text-center my-4" }, "#2 Black & White"), h("div", { key: 'd3bb58f4f9c5c5e2d74511d7aac5375d221119e2', class: "bg-default" }, h("eds-logo", { key: 'bff3e05b114130b767cfecd65de33ba6ebf63778', type: "black", href: "#" }))), h("li", { key: 'f7a627949d4c2e2a31f2e8c713a311c440c7d644', 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: '09f14d2777c7462c493953748b92cdadf971e67e', class: "f-body-01 text-center my-4" }, "#3 Dark"), h("div", { key: 'c7b79be6d031fb97e875525b848350a988879193' }, h("eds-logo", { key: '8a7fcf5800747bca95402df008423fd57ef2ebde', type: "color-white", href: "#" }))))));
     }
     static get is() { return "logo-variations-horizontal"; }
     static get encapsulation() { return "shadow"; }