@ebrains/components 0.9.2-beta → 1.0.0

package/dist/collection/components/eds-toast/eds-toast.stories.js

@@ -0,0 +1,38 @@
+export default {
+    title: 'Components/Toast',
+    component: 'eds-toast',
+    argTypes: {
+        message: {
+            control: 'text',
+            description: 'The main message or text to be displayed in the toast.'
+        },
+        intent: {
+            control: 'select',
+            options: ['default', 'success', 'error', 'warning'],
+            description: 'The visual intent or style of the toast.'
+        },
+        duration: {
+            control: 'number',
+            description: 'The duration before the toast auto-dismisses (in milliseconds).'
+        }
+    },
+    args: {
+        message: 'This is a toast message.',
+        intent: 'default',
+        duration: 5000
+    }
+};
+export const Default = {
+    render: (args) => `
+      <eds-toast
+        message="${args.message}"
+        intent="${args.intent}"
+        duration="${args.duration}">
+      </eds-toast>
+    `,
+    args: {
+        message: 'This is a toast message.',
+        intent: 'default',
+        duration: 5000
+    }
+};

package/dist/collection/components/eds-tooltip/eds-tooltip.css

@@ -0,0 +1,90 @@
+.relative {
+  position: relative;
+}
+
+.absolute {
+  position: absolute;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.rounded-xs {
+  border-radius: 4px;
+}
+
+.bg-strongest {
+  background-color: var(--black);
+}
+
+.text-inverse {
+  color: var(--white);
+}
+
+.f-ui-03-light {
+  font-family: var(--f-ui-03-light-fontFamily);
+  font-weight: var(--f-ui-03-light-fontWeight);
+  font-size: var(--f-ui-03-light-fontSize);
+  line-height: var(--f-ui-03-light-lineHeight);
+  letter-spacing: var(--f-ui-03-light-letterSpacing);
+}
+
+.pointer-events-none {
+  pointer-events: none;
+}
+
+.left-1\/2 {
+  left: 50%;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-x-1\/2 {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.p-6 {
+  padding: 0.375rem;
+}
+
+.bottom-full {
+  bottom: 100%;
+}
+
+.mb-2 {
+  margin-bottom: 0.125rem;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-150 {
+  transition-duration: 150ms;
+}
+
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.group:hover .group-hover\:opacity-100 {
+  opacity: 1;
+}

package/dist/collection/components/eds-tooltip/eds-tooltip.js

@@ -0,0 +1,65 @@
+import { sendAnalytics } from "../../utils/analytics";
+import { h } from "@stencil/core";
+/**
+ * `EdsTooltip` dynamically positions a tooltip centered above the slotted element.
+ */
+export class EdsTooltip {
+    constructor() {
+        this.content = undefined;
+    }
+    /** fire analytics on every hover */
+    handleHover() {
+        sendAnalytics({
+            category: 'ui-component',
+            tag: this.el.tagName.toLowerCase(),
+            name: this.content.toLowerCase(),
+            action: 'hover'
+        });
+    }
+    render() {
+        return (h("div", { key: 'cf17cd61cd5888d6ea12bf6be0fb8c841072b4d6', class: "relative inline-block group" }, h("slot", { key: '7a41d90940fff4e8b887ec4a3240371466f219a5' }), h("div", { key: 'ccf06592f4c977030b0cf54cce48d13889c059f3', class: "absolute bottom-full left-1/2 \n            transform -translate-x-1/2 mb-2\n            rounded-xs bg-strongest text-inverse \n            f-ui-03-light pointer-events-none \n            z-10 whitespace-nowrap p-6 opacity-0 transition-opacity duration-150 ease-in-out\n            group-hover:opacity-100", role: "tooltip" }, this.content)));
+    }
+    static get is() { return "eds-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-tooltip.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "content": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The content of the tooltip."
+                },
+                "attribute": "content",
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "mouseenter",
+                "method": "handleHover",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

package/dist/collection/components/eds-tooltip/eds-tooltip.stories.js

@@ -0,0 +1,23 @@
+import { html } from "lit-html";
+export default {
+    title: 'Components/Tooltip',
+    component: 'eds-tooltip',
+    argTypes: {
+        content: { control: 'text' }
+    },
+    args: {
+        content: 'This is a tooltip message.'
+    }
+};
+export const Default = {
+    render: (args) => html `
+    <div class="mt-32">
+      <eds-tooltip content="${args.content}">
+        <eds-button label="Hover over me" intent="primary" size="large" aria-label="Hover over me"></eds-button>
+      </eds-tooltip>
+    </div>
+  `,
+    args: {
+        content: 'This is a tooltip message.'
+    }
+};

package/dist/collection/components/eds-trl/eds-trl.js

@@ -0,0 +1,68 @@
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class EdsTrl {
+    constructor() {
+        this.applications = undefined;
+    }
+    getParsedApplications() {
+        let apps = [];
+        // If applications is a string, attempt to parse it as JSON.
+        if (typeof this.applications === 'string') {
+            try {
+                apps = JSON.parse(this.applications || '[]');
+            }
+            catch (error) {
+                // eslint-disable-next-line
+                console.error('Invalid applications trl JSON', error);
+                apps = [];
+            }
+        }
+        // If applications is already an array, use it directly.
+        else if (Array.isArray(this.applications)) {
+            apps = this.applications;
+        }
+        return apps;
+    }
+    calculateProgress(currentTrl) {
+        const maxTrl = 9;
+        return Math.ceil((currentTrl / maxTrl) * 100); // Calculate percentage and round up
+    }
+    render() {
+        const apps = this.getParsedApplications();
+        // Map applications into table-friendly data.
+        const tableData = apps.map((app) => ({
+            Application: app.name,
+            'Current TRL Stage': `TRL ${app.currentTrl}`,
+            Progress: (h("div", { class: "w-[200px]" }, h("eds-progress-bar", { value: this.calculateProgress(app.currentTrl) })))
+        }));
+        const tableConfig = {
+            Application: { format: 'code' },
+            'Current TRL Stage': { format: 'text' }
+        };
+        return (h("div", { key: '8a798c644632d3168af51aa8a0775b7455ab5b52', class: "container mx-auto px-4 py-8" }, h("eds-table", { key: '82a692c0f7e46fe7438a594a7b5c567855c0e308', "table-data": JSON.stringify(tableData), config: JSON.stringify(tableConfig), "rows-per-page": "2", "pagination-enabled": "true", "search-enabled": "true", "column-size": "default" })));
+    }
+    static get is() { return "eds-trl"; }
+    static get properties() {
+        return {
+            "applications": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | any[]",
+                    "resolved": "any[] | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accepts a JSON string or an array of application objects."
+                },
+                "attribute": "applications",
+                "reflect": false
+            }
+        };
+    }
+}

package/dist/{components/color-primary-palette.entry.js → collection/eds-docs-ui/colors/color-palette/primary.js}

@@ -1,8 +1,9 @@
-import { r as registerInstance, h } from './index-9d277061.js';
-
-const ColorPrimaryPalette = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class ColorPrimaryPalette {
+    constructor() {
         // Primary palette data
         this.colors = [
             {
@@ -32,8 +33,7 @@ const ColorPrimaryPalette = class {
         ];
     }
     render() {
-        return (h("ul", { key: '970e6baf4b258e9a0ed194316daf1c862d17733e', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
+        return (h("ul", { key: '8279e944bfb0ddf1e3cb682daa1b8bcfe8cac3fd', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }
-};
-
-export { ColorPrimaryPalette as color_primary_palette };
+    static get is() { return "color-primary-palette"; }
+}

package/dist/{components/color-secondary-palette.entry.js → collection/eds-docs-ui/colors/color-palette/secondary.js}

@@ -1,8 +1,9 @@
-import { r as registerInstance, h } from './index-9d277061.js';
-
-const ColorSecondaryPalette = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class ColorSecondaryPalette {
+    constructor() {
         // Secondary palette data
         this.colors = [
             {
@@ -57,8 +58,28 @@ const ColorSecondaryPalette = class {
         this.show = undefined;
     }
     render() {
-        return (h("ul", { key: '54f985b91b28ae253a06ec313872ccc81449bf51', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
+        return (h("ul", { key: 'ab7abc8b8b9115446169d85c6b97f4ea2e387068', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }
-};
-
-export { ColorSecondaryPalette as color_secondary_palette };
+    static get is() { return "color-secondary-palette"; }
+    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/{components/color-support-palette.entry.js → collection/eds-docs-ui/colors/color-palette/support.js}

@@ -1,8 +1,9 @@
-import { r as registerInstance, h } from './index-9d277061.js';
-
-const ColorSupportPalette = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class ColorSupportPalette {
+    constructor() {
         this.colors = [
             { rgb: 'R20 G20 B20', cmyk: 'C78 M69 Y61 K87', hex: '#141414', pantoneC: '', pantoneU: '', background: '#141414' },
             {
@@ -57,12 +58,11 @@ const ColorSupportPalette = class {
         return 'text-default';
     }
     render() {
-        return (h("ul", { key: 'cf31dbb2778735cb95f40243f557e97c15cd29f0', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => {
+        return (h("ul", { key: '42a4eb08f07919ad464ba017dbba65667c91e005', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.colors.map((color) => {
             // compute once
             const textClass = this.getTextColor(color.background);
             return (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }, h("div", { class: "grid" }, h("span", { class: `f-body-02 ${textClass}` }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' }, class: textClass })), h("div", { class: "grid" }, h("span", { class: `f-body-02 ${textClass}` }, color.pantoneC), h("span", { class: `f-body-02 ${textClass}` }, color.pantoneU)))));
         })));
     }
-};
-
-export { ColorSupportPalette as color_support_palette };
+    static get is() { return "color-support-palette"; }
+}

package/dist/{components/gradient-primary-palette.entry.js → collection/eds-docs-ui/colors/gradient-palette/primary.js}

@@ -1,8 +1,9 @@
-import { r as registerInstance, h } from './index-9d277061.js';
-
-const GradientPrimaryPalette = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class GradientPrimaryPalette {
+    constructor() {
         // Gradient primary palette data
         this.colors = [
             {
@@ -32,10 +33,9 @@ const GradientPrimaryPalette = class {
         ];
     }
     render() {
-        return (h("ul", { key: '469fc7f19a4346b7e930095c489c0e89cc58e6df', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
+        return (h("ul", { key: '2bc09e1f15ce98c6ba133cffc09df3bf10ca343f', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16", style: {
                 background: 'linear-gradient(to bottom, #9CE142 0%, #00C959 50%, #00A595 100%)'
             } }, this.colors.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "effect-height flex items-center justify-between p-16" }, h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.rgb), h("span", { class: "f-body-02 w-full" }, color.cmyk), h("eds-code-block", { code: color.hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { class: "grid" }, h("span", { class: "f-body-02" }, color.pantoneC), h("span", { class: "f-body-02" }, color.pantoneU))))))));
     }
-};
-
-export { GradientPrimaryPalette as gradient_primary_palette };
+    static get is() { return "gradient-primary-palette"; }
+}

package/dist/collection/eds-docs-ui/colors/gradient-palette/secondary.js

@@ -0,0 +1,75 @@
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class GradientSecondaryPalette {
+    constructor() {
+        // Gradient secondary palette data
+        this.colors = [
+            {
+                rgb: 'R63 G169 B245',
+                cmyk: 'C68 M13 Y0 K0',
+                hex: '#3FA9F5',
+                pantoneC: 'PANTONE 298 C',
+                pantoneU: 'PANTONE 298 U',
+                background: 'linear-gradient(to bottom, #3FA9F5, #3FA9F5)'
+            },
+            {
+                rgb: 'R6 G68 B244',
+                cmyk: 'C92 M60 Y0 K0',
+                hex: '#0644F4',
+                pantoneC: 'PANTONE 2728 C',
+                pantoneU: 'PANTONE 2935 U',
+                background: 'linear-gradient(to bottom, #3FA9F5, #0644F4)'
+            },
+            {
+                rgb: 'R196 G97 B255',
+                cmyk: 'C52 M67 Y0 K0',
+                hex: '#C461FF',
+                pantoneC: 'PANTONE 252 C',
+                pantoneU: 'PANTONE 252 U',
+                background: 'linear-gradient(to bottom, #C461FF, #C461FF)'
+            },
+            {
+                rgb: 'R93 G61 B249',
+                cmyk: 'C83 M78 Y0 K0',
+                hex: '#5D3DF9',
+                pantoneC: 'PANTONE 266 C',
+                pantoneU: 'PANTONE 2735 U',
+                background: 'linear-gradient(to bottom, #C461FF, #5D3DF9)'
+            },
+            {
+                rgb: 'R255 G165 B67',
+                cmyk: 'C0 M43 Y76 K0',
+                hex: '#FFA543',
+                pantoneC: 'PANTONE 804 C',
+                pantoneU: 'PANTONE 136 U',
+                background: 'linear-gradient(to bottom, #FFA543, #FFA543)'
+            },
+            {
+                rgb: 'R255 G77 B104',
+                cmyk: 'C0 M81 Y42 K0',
+                hex: '#FF4D68',
+                pantoneC: 'PANTONE 1785 C',
+                pantoneU: 'PANTONE 185 U',
+                background: 'linear-gradient(to bottom, #FFA543, #FF4D68)'
+            }
+        ];
+    }
+    render() {
+        return (h("div", { key: '32943156b28f767dc9b2e524202a4f4906432472' }, h("ul", { key: 'bf0d9a310edc584b67e064b149c771417e4da9cc', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '3ed95b92fe0eea4e75be722c1d0abdedfaa9e00e', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'b5d4f381155b3e89bf441a87b9aff7718d4bd978', class: "effect-height flex items-center justify-between p-16", style: {
+                background: this.colors[0].background
+            } }, h("div", { key: 'c12a9c31da8078a9e6889e0084f1256dad389b59', class: "grid" }, h("span", { key: '2fa2d5e9bb0820f08d3c265d7797eeca4c47c73c', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: 'b609663a6bfebc37deee295b5c8316bb08e6c785', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: 'b3cc79d81900f4a9a12ff7c6ebaac286c4dc1cd6', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'f91c41b6301c6234387c4386c493a9df56869c84', class: "grid" }, h("span", { key: '1165b82de0328f60a495a563e14277d3722b7d87', class: "f-body-02" }, this.colors[0].pantoneC), h("span", { key: 'f364fa3b7d4a9c52e1b67a65a4992ea1055084c1', class: "f-body-02" }, this.colors[0].pantoneU))), h("div", { key: 'e798299fb6ffedd626aaf477593b928c73b177bc', class: "effect-height flex items-center justify-between p-16", style: {
+                background: this.colors[1].background
+            } }, h("div", { key: 'eee5b2de72d33f80c85fb0ad39e486cbd69d664b', class: "grid" }, h("span", { key: '5190b0bb900bf234f32ccad7d37749ae0e57c31c', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '49e3d6d1073dfa8d08054e9db612bfce1a811347', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: 'fd0c166cac7839de62cd782ec8071ba70378c15f', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'e9e95829a6eec21baab0238677a33cc649351185', class: "grid" }, h("span", { key: 'e8a6c41cc8193ca78794c7147f20d39604a1ae04', class: "f-body-02" }, this.colors[1].pantoneC), h("span", { key: '039cbc6eedc43de988b5dd823525bde00f7a21e5', class: "f-body-02" }, this.colors[1].pantoneU))))), h("eds-block-break", { key: '7f95cfde8f4724b236446c3732c04929e17a9aa0' }), h("ul", { key: '72f723c89d17ea54a962122867abbd690b4d9ad9', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'b2153dc607ed77d0a3b1398c3fc8b626163575e1', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'e9ff842671af9bf749857fb4b430dbd997eadbab', class: "effect-height flex items-center justify-between p-16", style: {
+                background: this.colors[2].background
+            } }, h("div", { key: 'fd8255c5ee1ffe2f1b44cc670e504540b2e19b17', class: "grid" }, h("span", { key: '17b71b6d17fe483a0eab1e80959da2076ad4647e', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: 'b3d39bde727347801976d1471875e3226f71d334', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: 'd37cfec78f74f7eec02047fb8e30962c55379f71', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'aa0ec054bb018ab8e564910ada76d849ee2d1608', class: "grid" }, h("span", { key: 'f633c21fb5227330e843b1c1f6d1fff40766c0d0', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: 'c41495a89c987cf7cfbbd0b4d1ff12ac0c650610', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: '18a802a0cb7cbd228840fb58fadf6a121d98ebf9', class: "effect-height flex items-center justify-between p-16", style: {
+                background: this.colors[3].background
+            } }, h("div", { key: 'edf5fe68043e4712e7174c405e73e1aa84570936', class: "grid" }, h("span", { key: '455d010554f4836b26ff4b0568d088a4505619f3', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '6a50beb860b13371178b9582279c76cca29f25cf', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: '98333266061cd31aa09d7d1394829c5d822c901f', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '9f1952601d13a96f1caade683d5474a26cf94298', class: "grid" }, h("span", { key: 'e43da3fba22655cef1690725654919a79d43a2f4', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: 'c3e280221454dc05f4112f03e3d226a6e70b70d3', class: "f-body-02" }, this.colors[3].pantoneU))))), h("eds-block-break", { key: '63355f298a7680e4307b6e467da0fd54faf9da14' }), h("ul", { key: 'ff5a5554b716e21b0e219228317bbe334fc96488', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'b4ecf3a608a9321ca0cfd1edad2778b3b8ddf918', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '587730e489242f8579b2db3aceea8fadf4ba0f75', class: "effect-height flex items-center justify-between p-16", style: {
+                background: this.colors[4].background
+            } }, h("div", { key: '883c226b73544a239f6d0ece7cbab020e1cc5874', class: "grid" }, h("span", { key: 'dc5031f2236d81513cc543997f9b445b0fdea4be', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: 'a90f91b008cb67e8ee4a0454ed9e75f683a1a960', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: '4c12f3a2500535970bdb70bb87b8d73348ef25bb', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '1ebadf2907a7f499d61e9edc7c71bb9e7378594a', class: "grid" }, h("span", { key: 'acfce5255506344a9b65b195933cf924e1030467', class: "f-body-02" }, this.colors[4].pantoneC), h("span", { key: 'a7c4c25345c91a9753c4615c5205cf3dc49c36af', class: "f-body-02" }, this.colors[4].pantoneU))), h("div", { key: '01ce94d66521e612357c61de65ca1acd01e84cb9', class: "effect-height flex items-center justify-between p-16", style: {
+                background: this.colors[5].background
+            } }, h("div", { key: '628435f8fab14df7613aa4427af0b8c15fc222c2', class: "grid" }, h("span", { key: '4b4bbd19051b9d8d1eb524f2c84104eab7dae20a', class: "f-body-02" }, this.colors[5].rgb), h("span", { key: 'bb01da8698315272a78bad8d7258cb79be98446b', class: "f-body-02 w-full" }, this.colors[5].cmyk), h("eds-code-block", { key: 'f28b072bdb7dc66f3f3be1e922e527a7e3f4bf34', code: this.colors[5].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '027adf31b26154f659c2cd8c9ee935b5886e8419', class: "grid" }, h("span", { key: 'f74af79724fd67f67ad0433f9390ca022c6788d8', class: "f-body-02" }, this.colors[5].pantoneC), h("span", { key: '87262b14ffcda0153b37a5090b25e58b7c71c5dd', class: "f-body-02" }, this.colors[5].pantoneU)))))));
+    }
+    static get is() { return "gradient-secondary-palette"; }
+}

package/dist/collection/eds-docs-ui/colors/gradient-palette/support.js

@@ -0,0 +1,59 @@
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class GradientSupportPalette {
+    constructor() {
+        // Gradient support palette data
+        this.colors = [
+            {
+                rgb: 'R20 G20 B20',
+                cmyk: 'C78 M69 Y61 K87',
+                hex: '#141414',
+                pantoneC: '',
+                pantoneU: '',
+                background: '#141414'
+            },
+            {
+                rgb: 'R56 G56 B56',
+                cmyk: 'C68 M58 Y55 K63',
+                hex: '#383838',
+                pantoneC: 'PANTONE 447 C',
+                pantoneU: 'PANTONE Neutral Black U',
+                background: '#383838'
+            },
+            {
+                rgb: 'R204 G204 B204',
+                cmyk: 'C23 M17 Y18 K0',
+                hex: '#CCCCCC',
+                pantoneC: 'PANTONE Cool Gray 2 C',
+                pantoneU: 'PANTONE Cool Gray 2 U',
+                background: 'linear-gradient(to bottom, #CCCCCC, #CCCCCC)'
+            },
+            {
+                rgb: 'R230 G230 B230',
+                cmyk: 'C12 M8 Y9 K0',
+                hex: '#E6E6E6',
+                pantoneC: 'PANTONE 663 C',
+                pantoneU: 'PANTONE 649 U',
+                background: 'linear-gradient(to bottom, #CCCCCC, #E6E6E6)'
+            },
+            {
+                rgb: 'R255 G255 B255',
+                cmyk: 'C0 M0 Y0 K0',
+                hex: '#FFFFFF',
+                pantoneC: '',
+                pantoneU: '',
+                background: '#FFFFFF'
+            }
+        ];
+    }
+    render() {
+        return (h("ul", { key: '54a1927a8b5d68b7ef0cda7e1b7d673b33605a3c', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '25d63af647cab86f74bb7fb261836f5938beb0c8', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '3a39fde1fd70cf8c456c9032ae0458976fd4e289', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[0].background } }, h("div", { key: '0d2bcd0138973145c717725c79b6a2f4ff290b97', class: "grid" }, h("span", { key: '31c920216944da65a446f6c7d3037aee600e71d8', class: "f-body-02" }, this.colors[0].rgb), h("span", { key: '838ab2e1e8664243e32726ab03539a4f32b32cf4', class: "f-body-02 w-full" }, this.colors[0].cmyk), h("eds-code-block", { key: '2f8a24075e0fe1d2a6fda01fb97b4cf49f85277f', code: this.colors[0].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '8482d6666b68cd1ceb866e1cbdd0d88343cf79da', class: "grid" }, h("span", { key: 'e3ba3599b4e5743691c35a28358f0050de18d32a', class: "f-body-02" }, this.colors[0].pantoneC || 'N/A'), h("span", { key: 'c3ac3af17201effeb89b017a334c9ac0b0d62ddf', class: "f-body-02" }, this.colors[0].pantoneU || 'N/A')))), h("li", { key: '447e0a60ef726347ec1f4f540f6de7747a450845', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: 'fd922845d2aa3f66fde4d7fcf9f5b2416332fe9c', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[1].background } }, h("div", { key: 'bcf9ff063b3c130e8f7e24247f032a9f9fa40bb6', class: "grid" }, h("span", { key: '0bcea7730d9f34ac44544cd1bc3bfa3b8ca361cf', class: "f-body-02" }, this.colors[1].rgb), h("span", { key: '9c5169394a89f4ba2adbb0ac2576bd885443aac3', class: "f-body-02 w-full" }, this.colors[1].cmyk), h("eds-code-block", { key: 'c50e9ba110494a1a0e9df18a081f02cb86c700c4', code: this.colors[1].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '365655cca2301d94a52f859fa9527ae5c0ef1ece', class: "grid" }, h("span", { key: '088fca6cf72c8c74244d9a6e19c7ec083c8a6711', class: "f-body-02" }, this.colors[1].pantoneC || 'N/A'), h("span", { key: 'b33043ed7e2ff751be0d3c229324369aeacd8f1e', class: "f-body-02" }, this.colors[1].pantoneU || 'N/A')))), h("li", { key: '3b619a6a67d31ea7b358b59a147f36bfe35c4323', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '21b63edaebce5e4fdd10e6ad2ffaf31597d748f6', class: "effect-height flex items-center justify-between p-16", style: {
+                background: this.colors[2].background
+            } }, h("div", { key: 'f6d5d058b645af61eebb8f6a7b2369e4c95c31fb', class: "grid" }, h("span", { key: 'b7b1101ac321600f6218cbc4371d9219b9aef016', class: "f-body-02" }, this.colors[2].rgb), h("span", { key: '2debc8469b2d82c0550f1173bb4f0c1cdf33a7e0', class: "f-body-02 w-full" }, this.colors[2].cmyk), h("eds-code-block", { key: '90753985397844a6cabeee1b0ac5b32a84f59ed1', code: this.colors[2].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: 'f46c245f70973cd91992a8f9ec47e57997345c5c', class: "grid" }, h("span", { key: '7c7eb23f1312208b313cd2a2bd5c5a5af2e7cdd3', class: "f-body-02" }, this.colors[2].pantoneC), h("span", { key: '47c19d9a120cedc5c2bbbd385efa2e91ad4fd8e8', class: "f-body-02" }, this.colors[2].pantoneU))), h("div", { key: 'dcbc1b771bea1166bbbb0ed0e6fcd2d1aaa53b7f', class: "effect-height flex items-center justify-between p-16", style: {
+                background: this.colors[3].background
+            } }, h("div", { key: '55dff4711f054b364df8a03381f768e93cd1b62a', class: "grid" }, h("span", { key: '3880f0ea82be335c750ed4553583bc87b7ca04cc', class: "f-body-02" }, this.colors[3].rgb), h("span", { key: '6952cfb758d707b3376032f1d997253c1edc9962', class: "f-body-02 w-full" }, this.colors[3].cmyk), h("eds-code-block", { key: '9e0bc4a1d79c41bfaa315fd3053752c4eda3cd18', code: this.colors[3].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '9561d012cfbe411eac373f768893cc304b2e6138', class: "grid" }, h("span", { key: 'e90d3b590653807e22697395397ac89be9f52b90', class: "f-body-02" }, this.colors[3].pantoneC), h("span", { key: 'ffd2be0e5f7ff3b72a73697e0ca2f92c7e9cc0a5', class: "f-body-02" }, this.colors[3].pantoneU)))), h("li", { key: 'e963dd45ee5a8f52348e1b2a331df6af94f90f5f', class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { key: '0586094b065fdfa034096ef7e1eb95c6a26c41fc', class: "effect-height flex items-center justify-between p-16", style: { backgroundColor: this.colors[4].background } }, h("div", { key: '6acfe9a84d72f0327c3eff6c44a616918fa627d3', class: "grid" }, h("span", { key: 'c3175b931ff1cc3365dbf1cdd548b550aaf662a3', class: "f-body-02" }, this.colors[4].rgb), h("span", { key: '42d1daa0c16dcceb7341c015b912e0ea27874282', class: "f-body-02 w-full" }, this.colors[4].cmyk), h("eds-code-block", { key: '56b32e9ba42ec77e3ba6263f27b78229996ce983', code: this.colors[4].hex, style: { minWidth: '150px', marginRight: '5px' } })), h("div", { key: '89226a45ae2cf148134d550d0507a3563978e1bd', class: "grid" }, h("span", { key: '6f9c4d6da4d4c3fe6ae8039291e6cd9c06635c24', class: "f-body-02" }, this.colors[4].pantoneC || 'N/A'), h("span", { key: '9b44fcec2f83ecaa9fb5a1b298bab55fce503e91', class: "f-body-02" }, this.colors[4].pantoneU || 'N/A'))))));
+    }
+    static get is() { return "gradient-support-palette"; }
+}