@ebrains/components 0.9.2-beta → 0.9.3-beta

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

@@ -0,0 +1,52 @@
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class DocsContent {
+    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: '2d4d06ef8d68dc42280f71042322a5f3ca528564', class: "container" }, this.renderContent());
+    }
+    static get is() { return "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/design-tokens/token-list/token-list.js

@@ -0,0 +1,98 @@
+import { h } from "@stencil/core";
+import colors from "../../../../../../../../packages/assets/tokens/colors"; // Adjust the path as needed
+/**
+ * @internal
+ */
+export class TokenList {
+    constructor() {
+        this.show = undefined;
+    }
+    getTextColor(value) {
+        if (value.startsWith('rgba') || value.startsWith('rgb')) {
+            const rgba = value
+                .replace(/rgba?\(/, '')
+                .replace(')', '')
+                .split(',')
+                .map((v) => parseFloat(v.trim()));
+            const r = rgba[0];
+            const g = rgba[1];
+            const b = rgba[2];
+            const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+            return brightness > 0.5 ? 'text-default' : 'text-inverse';
+        }
+        else if (value.startsWith('#')) {
+            const color = value.replace('#', '');
+            const r = parseInt(color.substring(0, 2), 16);
+            const g = parseInt(color.substring(2, 4), 16);
+            const b = parseInt(color.substring(4, 6), 16);
+            const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+            return brightness > 0.5 ? 'text-default' : 'text-inverse';
+        }
+        return 'text-default';
+    }
+    resolveColor(value) {
+        if (colors.tokens[value]) {
+            return colors.tokens[value];
+        }
+        return value;
+    }
+    renderSection(sectionName, sectionContent) {
+        if (sectionName === 'tokens') {
+            const groupedTokens = this.groupTokensByCategory(sectionContent);
+            return Object.entries(groupedTokens).map(([, tokens]) => (h("ul", { class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, tokens.map((token) => {
+                const tokenName = Object.keys(token)[0];
+                const tokenValue = this.resolveColor(token[tokenName]);
+                const textColorClass = this.getTextColor(tokenValue);
+                return (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height items-center justify-between p-16 hidden lg:flex", style: { backgroundColor: tokenValue } }, h("span", { class: `${textColorClass} f-body-02` }, tokenName), h("div", { class: "inline-flex" }, h("eds-code-block", { code: tokenValue, language: "hex", class: "min-w-[210px] mr-4" }), h("eds-code-block", { language: "css", code: `var(--${tokenName})`, class: "min-w-[210px]" }))), h("div", { class: "effect-height items-center justify-between p-16 block lg:hidden", style: { backgroundColor: tokenValue } }, h("span", { class: `${textColorClass} f-body-02` }, tokenName), h("div", { class: "inline block" }, h("eds-code-block", { code: tokenValue, class: "min-w-[210px] mb-4" }), h("eds-code-block", { code: `var(--${tokenName})`, class: "min-w-[210px]" })))));
+            }))));
+        }
+        return (h("ul", { class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(sectionContent).map(([key, value]) => {
+            const resolvedValue = this.resolveColor(value);
+            const textColorClass = this.getTextColor(resolvedValue);
+            const style = resolvedValue.startsWith('#') || resolvedValue.startsWith('rgb')
+                ? { backgroundColor: resolvedValue }
+                : { border: `2px solid ${resolvedValue}` };
+            return (h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col" }, h("div", { class: "effect-height block lg:flex items-center justify-between p-16", style: style }, h("div", { class: "w-full flex" }, h("span", { class: `${textColorClass} mr-auto font-bold` }, key), h("span", { class: `${textColorClass} ml-auto  mr-4 font-bold` }, value)), h("span", { class: `${textColorClass}` }, sectionName === 'background' ? (h("eds-code-block", { code: `bg-${key}`, class: "min-w-[210px] mr-4" })) : (h("eds-code-block", { code: `${sectionName}-${key}`, class: sectionName === 'border' ? 'min-w-[250px] mr-4' : 'min-w-[210px] mr-4' }))))));
+        })));
+    }
+    groupTokensByCategory(tokens) {
+        const grouped = {};
+        Object.entries(tokens).forEach(([key, value]) => {
+            const category = key.split('-')[0];
+            if (!grouped[category]) {
+                grouped[category] = [];
+            }
+            grouped[category].push({ [key]: value });
+        });
+        return grouped;
+    }
+    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: '61b0561443787bdc5d1fdf6db0bed0bebe8ba6cb', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
+        // Only render sections that exist in `colors`
+        sectionContent ? this.renderSection(sectionName, sectionContent) : null)));
+    }
+    static get is() { return "token-list"; }
+    static get properties() {
+        return {
+            "show": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show",
+                "reflect": false
+            }
+        };
+    }
+}

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

@@ -0,0 +1,44 @@
+import { html } from "lit-html";
+import colors from "../../../../../../../../packages/assets/tokens/colors"; // Adjust the path as needed
+export default {
+    title: 'Tokens/Colors',
+    component: 'token-list',
+    argTypes: {
+        section: {
+            control: 'select',
+            options: Object.keys(colors) // Sections like 'tokens', 'border', 'text', etc.
+        },
+        category: {
+            control: 'select',
+            options: [] // Will be dynamically set based on selected section
+        }
+    },
+    args: {
+        section: 'tokens',
+        category: 'grey' // Default category
+    },
+    parameters: {
+        actions: {
+            handles: ['section', 'category']
+        }
+    }
+};
+const Template = ({ section, category }) => {
+    // Render function dynamically creates the categories based on section
+    if (section === 'tokens') {
+        const groupedTokens = Object.entries(colors.tokens).filter(([key]) => key.startsWith(`${category}-`));
+        return html `
+      <token-list .items=${JSON.stringify(groupedTokens.map(([key, value]) => ({ [key]: value })))}></token-list>
+    `;
+    }
+    const sectionContent = colors[section];
+    const filteredItems = Object.entries(sectionContent).filter(([key]) => key.startsWith(category));
+    return html `
+    <token-list .items=${JSON.stringify(filteredItems.map(([key, value]) => ({ [key]: value })))}></token-list>
+  `;
+};
+export const Tokens = Template.bind({});
+Tokens.args = {
+    section: 'tokens',
+    category: 'grey'
+};

package/dist/{components/token-radii.entry.js → collection/eds-docs-ui/design-tokens/token-radii/token-radii.js}

@@ -1,21 +1,11 @@
-import { r as registerInstance, h } from './index-9d277061.js';
-
-const radii = {
-  xxs: '2px',
-  xs: '4px',
-  sm: '8px',
-  md: '12px',
-  lg: '16px',
-  pill: '100px'
-};
-
-const TokenRadii = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
+import { h } from "@stencil/core";
+import radii from "../../../../../../../../packages/assets/tokens/radii"; // Adjust the path as needed
+/**
+ * @internal
+ */
+export class TokenRadii {
     render() {
-        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" }))))))));
+        return (h("section", { key: 'f6e277d8d84957ad05f027a7a151f2dd0b5c6e21', class: "w-full mt-28" }, h("ul", { key: 'feeef0a573d704dc010b76fc94a5ac9a9a05f0da', 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" }))))))));
     }
-};
-
-export { TokenRadii as token_radii };
+    static get is() { return "token-radii"; }
+}

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

@@ -0,0 +1,15 @@
+import { h } from "@stencil/core";
+import ratios from "../../../../../../../../packages/assets/tokens/ratios"; // Adjust the path as needed
+/**
+ * @internal
+ */
+export class TokenRatios {
+    render() {
+        return (h("section", { key: 'c4348ae18a2c7644f7a191aa5190ac3b98b5ccb9', class: "w-full" }, h("eds-section-core", { key: '6f148fc0c0ebbaef05761fa1a773cf026e308517', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, h("ul", { key: 'eb932db069683046fcda8ea950bac277e1387c33', 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'
+            } }, h("span", { class: "text-default font-bold mr-auto" }, "aspect-", key), h("span", { class: "mt-2 text-sm ml-auto" }, value)))))))));
+    }
+    static get is() { return "token-ratios"; }
+}

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: '0d61c0eee38fbcffe111031da0829b3a9050bc8d', class: "w-full mt-28" }, h("ul", { key: '587c263280d086c23351c6bbeaf01f37c307ce65', 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

@@ -0,0 +1,10 @@
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class TokenSpacing {
+    render() {
+        return (h("div", { key: '00ca04338f0cb9233be63327e07c2bde4fdcde82', class: "w-full" }, h("ul", { key: '0228f39058d93ca3ef569040b8e035c89c7a8df4', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '470f8a49cd45dedde63f70c6ec6f79b97000bed1', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'f238156d3bef14454a9f17bcbc403f5b20b2fdce', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '8815c4d93ca0c3bc757d801bb2ea951b93424ff1', class: "spacing-sample m-16 bg-strong" }, h("span", { key: 'dfbcf9555690912be569bb01dbf20c44f7cd0a31', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), h("li", { key: '09764bbf15a7289d72e15096a5179c9378aad1a0', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '5f393cb3ed589009b6d12281d92f9128ef986191', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '980a9f253177cb3c9486c84baa11215222148e01', class: "spacing-sample ml-64 bg-strong" }, h("span", { key: '83bf097e6cba62e5195594968355c59f663b36e5', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), h("li", { key: '79b6dcfa4d469db308d116d98deda673bea35da4', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '19d5e0f7a987e5e252b7f65380caff58ee8bf900', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '6c03b5c8b9635c6786c6904c11e6d531a252c050', class: "spacing-sample mt-32 bg-strong" }, h("span", { key: '08245fe30349011f8607260ccf950eae211bb511', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), h("li", { key: '20e990162a6d8a6bb7c3756b471d06b0a812176e', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'cfb4e834829eab6dc889577b3c9686147fcc6314', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '79e124f2b2f4ae780f80187cef9d551995e1217c', class: "spacing-sample p-32 bg-strong" }, h("span", { key: '9ce890898292b81968ff5a6e10e38083cf63ab52', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), h("li", { key: '34a9a0933249e75a0cf00c1ee12d55dc999ee60c', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: '510d4573b38d5e9a6db1c3ef9494b9dfe1ac8e78', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: '90902dd8f7ac70b377884b9ed9c8cebd3f87447d', class: "spacing-sample pt-32 bg-strong" }, h("span", { key: '6b9041a4d3d1870362a0e168a31e0e890ca3b417', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), h("li", { key: '6c656fd467a8df4aa2d0781ac9a5687c407bd282', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, h("div", { key: 'e2332aa81af3e9e35dfebb4b8938acf8649240b8', class: "container p-8 item-center border-2 border-soft" }, h("div", { key: 'ca08cc17910e818d2537cb9e4d1f4dbef68be02b', class: "spacing-sample pl-32 bg-strong" }, h("span", { key: '6efb039d88c8995fcbdf7ea31485a06f6bdd793d', 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

@@ -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: '2448267dd93e815f2def0a4b711f28325d906d61', class: "w-full" }, h("ul", { key: 'ac73af17e45045d2122d54dd357f1141b3a5bad7', 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: [
+                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: `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/docs-palettes/docs-palettes.js

@@ -0,0 +1,44 @@
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class DocsPalettes {
+    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: '41ac7248f45204f420ab2954e26529577e2cb27f', class: "container" }, this.renderContent());
+    }
+    static get is() { return "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/logo/logo-space/logo-space.css

@@ -0,0 +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;
+}
+
+.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;
+  }
+
+  .md\:gap-y-12 {
+    row-gap: 0.75rem;
+  }
+}
+
+@media (min-width: 900px) {
+  .lg\:gap-y-16 {
+    row-gap: 1rem;
+  }
+
+  .lg\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
+  }
+}
+
+@media (min-width: 1024px) {
+  .xl\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
+  }
+}
+
+@media (min-width: 1280px) {
+  .xxl\:grid-col-span-2 {
+    --container-grid-columns: 2;
+    grid-column: span 2 / span 2;
+  }
+
+  .xxl\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
+  }
+}
+
+.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: 'ac45631802109b60cbccb09102ba1e0aa0fca3e6', class: "container" }, h("ul", { key: '8739e8d9facd30229db4f9dad4f21c1491513945', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'e5d12885d0faf35153d13e8da6d576ed421139b9', 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: 'f754292bf3d3f3c39773e6fced7893a79ea5eda3', class: "logo-container mx-auto w-[300px]", innerHTML: vLogoMargins })), h("li", { key: 'de9d24e26be14bb0e975ebbc3568a38cfea69420', 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: 'f040d91a7af79e939d3d5aa5c92d2c1527b0b2cb', class: "text-center mt-16" }, h("p", { key: '49759b744d2e71318d80712bfd3d6b19229a8a33', class: "f-body-01" }, "To ensure legibility, follow these minimum size guidelines:"), h("eds-table", { key: '54d2f4512baa60fa4c6d1bf9b96f5ee59fc32911', 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: '060029fa1f01bca29cb7450c8be43ce0705effe3', 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"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["logo-space.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["logo-space.css"]
+        };
+    }
+}