@ebrains/components 0.0.1-alpha.0

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

@@ -0,0 +1,11 @@
+import { h } from "@stencil/core";
+import shadowTokens from "../../../../../../../../packages/assets/tokens/shadows"; // Adjust the path as needed
+/**
+ * @internal
+ */
+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]" })))))))));
+    }
+    static get is() { return "token-shadows"; }
+}

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

@@ -0,0 +1,10 @@
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+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")))))));
+    }
+    static get is() { return "token-spacing"; }
+}

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

@@ -0,0 +1,27 @@
+import { h } from "@stencil/core";
+import typography from "../../../../../../../../packages/assets/tokens/typography"; // Adjust the path as needed
+/**
+ * @internal
+ */
+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)
+            .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,
+                fontWeight: style.fontWeight,
+                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: [
+                style.fontSize && `font-size: ${style.fontSize};`,
+                style.lineHeight && `line-height: ${style.lineHeight};`,
+                style.letterSpacing && `letter-spacing: ${style.letterSpacing};`,
+                style.fontWeight && `font-weight: ${style.fontWeight};`,
+                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" }))))))))));
+    }
+    static get is() { return "token-typography"; }
+}

package/dist/collection/eds-docs-ui/eds-components-section/eds-components-section.js

@@ -0,0 +1,58 @@
+import { h } from "@stencil/core";
+import { EdsComponentsOverview } from "../functional/overview";
+import { EdsDocsInstallation } from "../functional/installation";
+import { EdsDocsUsage } from "../functional/usage";
+import { EdsDocsReact } from "../functional/react";
+import { EdsDocsVue } from "../functional/vue";
+import { EdsDocsAngular } from "../functional/angular";
+/**
+ * @internal
+ */
+export class EdsComponentsSection {
+    constructor() {
+        this.tabIndex = undefined;
+    }
+    renderContent() {
+        switch (this.tabIndex) {
+            case 0:
+                return h(EdsComponentsOverview, null);
+            case 1:
+                return h(EdsDocsInstallation, null);
+            case 2:
+                return h(EdsDocsUsage, null);
+            case 3:
+                return h(EdsDocsReact, null);
+            case 4:
+                return h(EdsDocsVue, null);
+            case 5:
+                return h(EdsDocsAngular, null);
+            default:
+                return h("p", null, "Content not available.");
+        }
+    }
+    render() {
+        return h("div", { key: '289db339f218b1f440badee9bb13c7bb20962c9c', class: "container" }, this.renderContent());
+    }
+    static get is() { return "eds-components-section"; }
+    static get properties() {
+        return {
+            "tabIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active tab index to determine the content to display"
+                },
+                "attribute": "tab-index",
+                "reflect": false
+            }
+        };
+    }
+}

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

@@ -0,0 +1,44 @@
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class EdsDocsPalettes {
+    constructor() {
+        this.tabIndex = undefined;
+    }
+    renderContent() {
+        switch (this.tabIndex) {
+            case 0:
+                return (h("div", null, h("h2", null, "Primary Palette"), h("color-primary-palette", null), h("h2", null, "Secondary Palette"), h("color-secondary-palette", null), h("h2", null, "Support Palette"), h("color-support-palette", null)));
+            case 1:
+                return (h("div", null, h("h2", null, "Primary Palette"), h("gradient-primary-palette", null), h("h2", null, "Secondary Palette"), h("gradient-secondary-palette", null), h("h2", null, "Support Palette"), h("gradient-support-palette", null)));
+            default:
+                return h("p", null, "Content not available.");
+        }
+    }
+    render() {
+        return h("div", { key: '480cc269ee31de61190b4ae7502c3c17e673c3f9', class: "container" }, this.renderContent());
+    }
+    static get is() { return "eds-docs-palettes"; }
+    static get properties() {
+        return {
+            "tabIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active tab index to determine the content to display"
+                },
+                "attribute": "tab-index",
+                "reflect": false
+            }
+        };
+    }
+}

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

@@ -0,0 +1,52 @@
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class EdsDocsContent {
+    constructor() {
+        this.tabIndex = undefined;
+    }
+    renderContent() {
+        switch (this.tabIndex) {
+            case 0:
+                return h("token-list", { show: "background" });
+            case 1:
+                return h("token-list", { show: "text" });
+            case 2:
+                return h("token-list", { show: "border" });
+            case 3:
+                return h("token-radii", null);
+            case 4:
+                return h("token-list", { show: "outline" });
+            case 5:
+                return h("token-shadows", null);
+            default:
+                return h("p", null, "Content not available.");
+        }
+    }
+    render() {
+        return h("div", { key: '64ee8c20ec7dca1ea1a742ef53f0315c81107ead', class: "container" }, this.renderContent());
+    }
+    static get is() { return "eds-docs-tokens"; }
+    static get properties() {
+        return {
+            "tabIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active tab index to determine the content to display"
+                },
+                "attribute": "tab-index",
+                "reflect": false
+            }
+        };
+    }
+}

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

@@ -0,0 +1,27 @@
+import { h } from "@stencil/core";
+import * as svgs from "../../../../../../../packages/svgs/src/index";
+/**
+ * @internal
+ */
+export class EdsSvgRepository {
+    // Convert SVG data to a format usable by `eds-table`
+    getSvgData() {
+        return Object.entries(svgs)
+            .filter(([name]) => !name.toLowerCase().includes('logo') && !name.toLowerCase().includes('eu')) // Exclude names containing "logo" or "eu"
+            .map(([name, svgContent]) => ({
+            name,
+            icon: svgContent // Pass SVG content as innerHTML
+        }));
+    }
+    render() {
+        const svgData = this.getSvgData();
+        // Define table configuration
+        const tableConfig = {
+            icon: { format: 'svg' },
+            name: { format: 'bold' }
+        };
+        return (h("eds-table", { key: 'a13e24877de433c40b536cb5b74af4c0706aeecf', data: JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true }));
+    }
+    static get is() { return "eds-svg-repository"; }
+    static get encapsulation() { return "shadow"; }
+}

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

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

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

@@ -0,0 +1,2 @@
+import { h } from "@stencil/core";
+export const EdsDocsInstallation = () => (h("div", null, h("p", null, "To start using the EBRAINS Design System, include the following scripts and styles in your project. You can also install it via npm for use with modern build tools."), h("eds-code-block", { code: "npm install @ebrains/components", language: "html", "copy-label": "Copy Code" }), h("p", null, "TBD")));

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

@@ -0,0 +1,2 @@
+import { h } from "@stencil/core";
+export const EdsComponentsOverview = () => (h("div", { class: "static-content container" }, h("eds-alert", { message: "EBRAINS Design System makes it easy to implement and use its components across any framework or no framework at all. We\n      accomplish this by using standardized web platform APIs and Web Components.", intent: "default" }), h("h2", null, "Load the module"), h("p", null, "Integrating EDSs components to a project without a JavaScript framework is straight forward. If you\u2019re working on a simple HTML page, you can start using the components immediately by adding the tags below to the", ' ', h("code", null, "head"), "."), h("eds-code-block", { code: '<script type="module" href="https://unpkg.com/@ebrains/components@0.0.1/loader"/></script>', language: "javascript", "copy-label": "Copy Code" }), h("h2", null, "Load the styles"), h("p", null, "To directly use the produced css framework with a few predefined custom utility classes, add the tag below to the", ' ', h("code", null, "head")), h("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@0.0.1/styles/output.css"/>', language: "css", "copy-label": "Copy Code" }), h("h2", null, "Load the fonts"), h("p", null, "To load the correct webfonts as well, add either one of these tags to the ", h("code", null, "head")), h("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@0.0.1/styles/base/fonts.css"/>', language: "css", "copy-label": "Copy Code" }), h("h2", null, "Component Usage"), h("p", null, "Once included, components can be used in your markup like any other regular HTML elements:"), h("eds-code-block", { code: '<eds-button label="my bytton" intent="primary"></eds-button>', language: "html", "copy-label": "Copy Code" })));

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

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

package/dist/collection/eds-docs-ui/functional/usage.js

@@ -0,0 +1,2 @@
+import { h } from "@stencil/core";
+export const EdsDocsUsage = () => (h("div", null, h("h1", null, "Usage with basic HTML "), h("p", null, "TBD")));

package/dist/collection/eds-docs-ui/functional/vue.js

@@ -0,0 +1,2 @@
+import { h } from "@stencil/core";
+export const EdsDocsVue = () => (h("div", null, h("h2", null, "Vue Wrappers"), h("p", null, "Learn how to use our components in a Vue Application."), h("eds-code-block", { code: "npm install @ebrains/vue", language: "javascript", "copy-label": "Copy Code" }), h("p", null, "Define the custom elements"), h("eds-code-block", { code: "import { defineCustomElements } from '@ebrains/components/loader';\ndefineCustomElements();", language: "javascript", "copy-label": "Copy Code" }), h("eds-section-core", { "section-title": "Example Vue App", "heading-level": "h3" }, h("eds-code-block", { code: '\n<template>\n  <h1 className="f-heading-02">Vue App</h1>\n\n  <EdsHeader \n    home-url="/" \n    user-feature=false \n    keycloak-url="http://localhost:8080" \n    keycloak-realm="nigeor-realm"\n    keycloak-client-id="stencil-app" \n    links="[\n      { "label": "About", "url": "/about" },\n      { "label": "Focus Areas", "url": "/focus-areas" },\n      { "label": "News & Events", "url": "/news-and-events" },\n      { "label": "Contact", "url": "/contact" }\n    ]">\n  </EdsHeader>\n\n</template>\n\n<script>\n\nimport { EdsHeader } from "@ebrains/vue";\n\nexport default {\n  name: "App",\n  components: {\n    EdsHeader,\n  }\n};\n</script>\n', language: "javascript", "copy-label": "Copy Code" }))));

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

@@ -0,0 +1,53 @@
+.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);
+  }
+
+  .w-\[150px\] {
+    width: 150px;
+  }
+
+  .w-\[300px\] {
+    width: 300px;
+  }

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

@@ -0,0 +1,22 @@
+import { h } from "@stencil/core";
+import { vLogoMargins } from "../../../../../../../../packages/svgs/src/index";
+/**
+ * @internal
+ */
+export class LogoSpace {
+    render() {
+        return (h("div", { key: '696ba14bb0cd1e633937a4c493720ae5fe255c87', class: "container my-20" }, h("div", { key: '4509d6c00d141ad49852d21f1b065a12e16d7df7', class: "w-[300px]" }, h("div", { key: '28ebc1d66714ad8208feeed689b43f1e861ea1fd', class: "bg-dark" }, h("div", { key: 'fc23d1759745069b09c387e06c65e27c55b164a3', class: "logo-container", innerHTML: vLogoMargins })))));
+    }
+    static get is() { return "logo-space"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["logo-space.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["logo-space.css"]
+        };
+    }
+}

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

@@ -0,0 +1,60 @@
+.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);
+  }
+
+  .w-\[150px\] {
+    width: 150px;
+  }
+
+  .w-\[300px\] {
+    width: 500px;
+  }
+
+  .coloured {
+    background: linear-gradient(to left, 
+  #9CE142 0%, 
+  #00C959 50%, 
+  #00A595 100%);
+  }

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

@@ -0,0 +1,73 @@
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class LogoVariations {
+    constructor() {
+        this.orientation = 'horizontal';
+        this.type = undefined;
+    }
+    render() {
+        if (this.type === 'coloured') {
+            return (h("div", { class: "container my-16" }, h("div", { class: "coloured w-[300px]" }, h("eds-logo", { type: "no-bg", href: "#" }))));
+        }
+        if (this.type === 'black') {
+            return (h("div", { class: "container my-16" }, h("div", { class: "bg-default w-[300px]" }, h("eds-logo", { type: "black", href: "#" }))));
+        }
+        if (this.type === 'color-white') {
+            return (h("div", { class: "container my-16" }, h("div", { class: "w-[300px]" }, h("eds-logo", { type: "color-white", href: "#" }))));
+        }
+        return null;
+    }
+    static get is() { return "logo-variations-horizontal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["logo-variations-horizontal.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["logo-variations-horizontal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "orientation",
+                "reflect": false,
+                "defaultValue": "'horizontal'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'coloured' | 'black' | 'color-white'",
+                    "resolved": "\"black\" | \"color-white\" | \"coloured\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of logo variation to display.\nAvailable options: \"coloured\", \"mono\", \"dark\"."
+                },
+                "attribute": "type",
+                "reflect": false
+            }
+        };
+    }
+}

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

@@ -0,0 +1,64 @@
+.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);
+  }
+
+  .w-\[150px\] {
+    width: 150px;
+  }
+
+  .w-\[200px\] {
+    width: 200px;
+  }
+
+  .w-\[300px\] {
+    width: 500px;
+  }
+
+  .coloured {
+    background: linear-gradient(to left, 
+  #9CE142 0%, 
+  #00C959 50%, 
+  #00A595 100%);
+  }

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

@@ -0,0 +1,73 @@
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class LogoVariations {
+    constructor() {
+        this.orientation = 'horizontal';
+        this.type = undefined;
+    }
+    render() {
+        if (this.type === 'coloured') {
+            return (h("div", { class: "container my-16" }, h("div", { class: "coloured w-[200px]" }, h("eds-logo", { orientation: "vertical", type: "no-bg", href: "#" }))));
+        }
+        if (this.type === 'black') {
+            return (h("div", { class: "container my-16" }, h("div", { class: "bg-default w-[200px]" }, h("eds-logo", { orientation: "vertical", type: "black", href: "#" }))));
+        }
+        if (this.type === 'color-white') {
+            return (h("div", { class: "container my-16" }, h("div", { class: "w-[200px]" }, h("eds-logo", { orientation: "vertical", type: "color-white", href: "#" }))));
+        }
+        return null;
+    }
+    static get is() { return "logo-variations-vertical"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["logo-variations-vertical.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["logo-variations-vertical.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "orientation",
+                "reflect": false,
+                "defaultValue": "'horizontal'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'coloured' | 'black' | 'color-white'",
+                    "resolved": "\"black\" | \"color-white\" | \"coloured\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of logo variation to display.\nAvailable options: \"coloured\", \"mono\", \"dark\"."
+                },
+                "attribute": "type",
+                "reflect": false
+            }
+        };
+    }
+}