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

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"; }

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

@@ -1,64 +1,169 @@
+.coloured {
+  background: linear-gradient(to left,
+      #9CE142 0%,
+      #00C959 50%,
+      #00A595 100%);
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.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;
+}
+
+.w-\[200px\] {
+  width: 200px;
+}
+
+.w-\[300px\] {
+  width: 300px;
+}
+
 .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;
+  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;
   }
-  .my-20 {
-    margin-top: 1.25rem;
-    margin-bottom: 1.25rem;
+
+  .md\:gap-y-12 {
+    row-gap: 0.75rem;
   }
-  .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: 900px) {
+  .lg\:gap-y-16 {
+    row-gap: 1rem;
   }
 
-  .w-\[150px\] {
-    width: 150px;
+  .lg\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
   }
+}
 
-  .w-\[200px\] {
-    width: 200px;
+@media (min-width: 1024px) {
+  .xl\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
   }
+}
 
-  .w-\[300px\] {
-    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/vertical/logo-variations-vertical.js

@@ -8,7 +8,7 @@ export class LogoVariationsVertical {
         this.type = undefined;
     }
     render() {
-        return (h("div", { key: '1afffa0e5e0253ca2d8aec1a740d351fc614e0c4' }, h("div", { key: '3756f6a667a09cde71a67cd9f9bfce1054a6d523', class: "container my-16" }, h("h3", { key: '371bd24965bcc0349dac7f65134b25f128423de3', class: "f-heading03" }, "Coloured Background"), h("div", { key: '23062436bef739840eb998b919adcc1b69c55740', class: "coloured w-[200px]" }, h("eds-logo", { key: '226140792cb59d82bf2696802d53d43f24171dea', orientation: "vertical", type: "no-bg", href: "#" }))), h("div", { key: 'a37d0871161b9753656768fcfe78158e63f52669', class: "container my-16" }, h("h3", { key: '0a3c80b44fd9161746203af3ef95654acd3986e8', class: "f-heading03" }, "Black and White Background"), h("div", { key: 'e3d9447be3a1499ed546e85cf534ba0709a846a0', class: "bg-default w-[200px]" }, h("eds-logo", { key: 'fc63b377517ba82dc141d3e3a82221018a3ef315', orientation: "vertical", type: "black", href: "#" }))), h("div", { key: '68e487c6be2e62caa1d7196a294ed9fadf6ab399', class: "container my-16" }, h("h3", { key: '505ab03210a8ace1dd0394df3fa159f1dd3bddf0', class: "f-heading03" }, "Dark Background "), h("div", { key: '6d08734cedf520554d746caa6c99561fdd73f855', class: "w-[200px]" }, h("eds-logo", { key: '63d2496b5dab9c66809cbe38b55a83928276cce0', orientation: "vertical", type: "color-white", href: "#" })))));
+        return (h("div", { key: 'e842e396933ee714f86a9443b55cd7045d12277e', class: "container" }, h("ul", { key: 'dfea7dc44294bfe2acbbfd580bff8908cbeb98bf', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'fe44c472c10b814ff815c2a8cd7101adb0890872', 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: '5ed6f1029df41907ca8b27a51612a1078f353ade', class: "f-body-01 text-center my-4" }, "#1 Coloured"), h("div", { key: 'eae38dbd0f8d4b92f2768559dbe65d6c136ba746', class: "mx-auto coloured w-[300px]" }, h("eds-logo", { key: '7a05dacc86c54c6ff51810b14c9dc99fad4e36b5', orientation: "vertical", type: "no-bg", href: "#" }))), h("li", { key: '4055ab71f60098acea7e27f2a8706c45aecb7097', 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: '340cfb0cbf6383d46eabd91b6fb591a003ec00f6', class: "f-body-01 text-center my-4" }, "#2 Black & White"), h("div", { key: 'd4158d0b6413cae236c333fe0ffdd77dbda22c88', class: "mx-auto bg-default w-[300px]" }, h("eds-logo", { key: 'a411c3438499758b68cf949a83d9097da70a11f0', orientation: "vertical", type: "black", href: "#" }))), h("li", { key: 'a7a97185be422337fb333709c61fe7c435bc82f3', 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: 'cef2acc75d1749cd93699a99a2d80aeaa61ed632', class: "f-body-01 text-center my-4" }, "#3 Dark"), h("div", { key: '43be8f5ca418a93b58c8f3a52d04a6e50b5bb03b', class: "mx-auto w-[300px]" }, h("eds-logo", { key: 'b5453b1009c0aa5c799c417e5c13b30cfc647840', orientation: "vertical", type: "color-white", href: "#" }))))));
     }
     static get is() { return "logo-variations-vertical"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 /**
  * @internal
  */
-export class EdsLogoVariations {
+export class LogoVariationsTabs {
     constructor() {
         this.tabIndex = undefined;
     }
@@ -17,9 +17,9 @@ export class EdsLogoVariations {
         }
     }
     render() {
-        return h("div", { key: '31bd93b3412b859adc59f6a4fe67018bf9c13336', class: "container" }, this.renderContent());
+        return h("div", { key: 'f0bc6f4cd2e1d34d77ff52c3a0ce35a3214a2f9f', class: "container" }, this.renderContent());
     }
-    static get is() { return "eds-logo-variations"; }
+    static get is() { return "logo-variations-tabs"; }
     static get properties() {
         return {
             "tabIndex": {