@ebrains/components 0.0.1-alpha.0

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

@@ -0,0 +1,56 @@
+  .f-ui-05 {
+    font-family: var(--f-ui-05-fontFamily);
+    font-weight: var(--f-ui-05-fontWeight);
+    font-size: var(--f-ui-05-fontSize);
+    line-height: var(--f-ui-05-lineHeight);
+    letter-spacing: var(--f-ui-05-letterSpacing);
+  }
+  .py-1 {
+    padding-top: 0.0625rem;
+    padding-bottom: 0.0625rem;
+  }
+  .px-4 {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+  .border-2 {
+    border-width: 2px;
+  }
+  .rounded-pill {
+    border-radius: 100px;
+  }
+  .border-default {
+    border: 2px solid var(--black);
+  }
+  .text-inverse {
+    color: var(--white);
+  }
+  .bg-strongest {
+    background-color: var(--black);
+  }
+  .text-\[\#0034CB\] {
+    --tw-text-opacity: 1;
+    color: rgb(0 52 203 / var(--tw-text-opacity));
+  }
+  .border-\[\#0034CB\] {
+    --tw-border-opacity: 1;
+    border: 2px solid rgb(0 52 203 / var(--tw-border-opacity));
+  }
+  .text-light {
+    color: var(--grey-700);
+  }
+  .bg-strongest-soft {
+    background-color: rgba(0, 0, 0, .05);
+  }
+  .border-transparent {
+    border-color: var(--transparent);
+  }
+  .border-inverse {
+    border-color: var(--white);
+  }
+  .bg-inverse {
+    background-color: var(--white);
+  }
+  .text-lighter {
+    color: var(--grey-600);
+  }

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

@@ -0,0 +1,94 @@
+import { h } from "@stencil/core";
+import { cva } from "class-variance-authority";
+// Define the CVA for the tag styles
+const tagStyles = cva(['f-ui-05 py-1 px-4 border-2 rounded-pill'], // Base classes
+{
+    variants: {
+        intent: {
+            default: 'border-default',
+            strong: 'text-inverse bg-strongest border-default',
+            accent: 'text-[#0034CB] border-[#0034CB]',
+            weak: 'text-light bg-strongest-soft border-transparent',
+            inverse: 'border-inverse text-inverse',
+            'inverse-strong': 'bg-inverse border-inverse text-lighter'
+        }
+    },
+    defaultVariants: {
+        intent: 'default'
+    }
+});
+/**
+ * `EdsTag` is a stylized label component designed to display short, categorical information.
+ * The component supports multiple visual styles to fit different use cases, such as accent or inverse styling.
+ *
+ * Key Features:
+ * - Configurable appearance through `intent` prop with options for various styles (default, strong, accent, weak, inverse, inverse-strong).
+ * - Displays a label passed as the `label` prop, required for defining the content of the tag.
+ *
+ * This component is useful for creating distinguishable tags or labels with consistent styling.
+ */
+export class EdsTag {
+    constructor() {
+        this.label = undefined;
+        this.intent = 'default';
+    }
+    /**
+     * Render the component.
+     * @returns The rendered HTML for the tag component with the applied styles and label.
+     */
+    render() {
+        const classes = tagStyles({ intent: this.intent });
+        return h("span", { key: '546bd7eb2c78760edc12cd7bb3ede5f6ab9099f3', class: classes }, this.label);
+    }
+    static get is() { return "eds-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-tag.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label to be displayed inside the tag.\nThis prop is required."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "intent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'strong' | 'accent' | 'weak' | 'inverse' | 'inverse-strong'",
+                    "resolved": "\"accent\" | \"default\" | \"inverse\" | \"inverse-strong\" | \"strong\" | \"weak\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The visual style or intent of the tag.\nOptions include:\n- 'default': The standard appearance.\n- 'strong': Strong emphasis with inverse text color.\n- 'accent': Accent color with a blue text and border.\n- 'weak': A softer look with lighter text and transparent border.\n- 'inverse': Inverse style with border and text inversion.\n- 'inverse-strong': Strong inverse with lighter text.\nDefaults to 'default'."
+                },
+                "attribute": "intent",
+                "reflect": false,
+                "defaultValue": "'default'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,27 @@
+export default {
+    title: 'Components/Tag',
+    component: 'eds-tag',
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'The label text for the tag'
+        },
+        intent: {
+            control: 'select',
+            options: ['default', 'strong', 'accent', 'weak', 'inverse', 'inverse-strong'],
+            description: 'The visual intent style for the tag'
+        }
+    },
+    args: {
+        label: 'Default Tag',
+        intent: 'default'
+    },
+    parameters: {}
+};
+export const Default = {
+    render: (args) => `<eds-tag label="${args.label}" intent="${args.intent}"></eds-tag>`,
+    args: {
+        label: 'Default Tag',
+        intent: 'default'
+    }
+};

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

@@ -0,0 +1,108 @@
+import { h } from "@stencil/core";
+import { cva } from "class-variance-authority";
+const toastStyles = cva(['relative right-4 bottom-4 w-auto p-12 rounded-lg shadow-md'], {
+    variants: {
+        intent: {
+            default: 'bg-dark text-light',
+            success: 'bg-success text-dark',
+            error: 'bg-error text-light',
+            warning: 'bg-warning text-dark'
+        }
+    },
+    defaultVariants: {
+        intent: 'default'
+    }
+});
+export class EdsToast {
+    constructor() {
+        /**
+         * Dismisses the toast.
+         */
+        this.dismissToast = () => {
+            this.visible = false;
+        };
+        this.message = undefined;
+        this.intent = 'default';
+        this.duration = 5000;
+        this.visible = true;
+    }
+    connectedCallback() {
+        // Auto-dismiss the toast after the specified duration
+        this.dismissTimeout = setTimeout(this.dismissToast, this.duration);
+    }
+    disconnectedCallback() {
+        // Clear the timeout when the component is removed
+        clearTimeout(this.dismissTimeout);
+    }
+    render() {
+        if (!this.visible) {
+            return null;
+        }
+        const classes = toastStyles({ intent: this.intent });
+        return (h("div", { class: classes }, h("div", { class: "flex items-center justify-between gap-4" }, h("p", { class: "f-ui-01" }, this.message), h("eds-button", { intent: "tertiary", icon: "close", "aria-label": "Close Toast", onClick: () => this.dismissToast(), "extra-class": "ml-8" }))));
+    }
+    static get is() { return "eds-toast"; }
+    static get properties() {
+        return {
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The main message or text to be displayed in the toast."
+                },
+                "attribute": "message",
+                "reflect": false
+            },
+            "intent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'success' | 'error' | 'warning'",
+                    "resolved": "\"default\" | \"error\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The visual intent or style of the toast, indicating the toast type."
+                },
+                "attribute": "intent",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "duration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines the duration before the toast auto-dismisses (in milliseconds).\nDefaults to 5000ms (5 seconds)."
+                },
+                "attribute": "duration",
+                "reflect": false,
+                "defaultValue": "5000"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "visible": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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,94 @@
+.relative {
+    position: relative;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .rounded-sm {
+    border-radius: 8px;
+  }
+  .rounded-xs {
+    border-radius: 4px;
+  }
+  .bg-stronger {
+    background-color: var(--grey-900);
+  }
+  .bg-strongest {
+    background-color: var(--black);
+  }
+  .text-inverse {
+    color: var(--white);
+  }
+  .text-default {
+    color: var(--black);
+  }
+  .f-ui-03 {
+    font-family: var(--f-ui-03-fontFamily);
+    font-weight: var(--f-ui-03-fontWeight);
+    font-size: var(--f-ui-03-fontSize);
+    line-height: var(--f-ui-03-lineHeight);
+    letter-spacing: var(--f-ui-03-letterSpacing);
+  }
+  .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;
+  }
+  .-top-8 {
+    top: -0.5rem;
+  }
+  .left-1\/2 {
+    left: 50%;
+  }
+  .z-10 {
+    z-index: 10;
+  }
+  .block {
+    display: block;
+  }
+  .-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));
+  }
+  .-translate-y-1\/2 {
+    --tw-translate-y: -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));
+  }
+  .-translate-y-full {
+    --tw-translate-y: -100%;
+    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;
+  }
+  .py-2 {
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
+  }
+  .px-4 {
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+  .p-4 {
+    padding: 0.25rem;
+  }
+  .p-6 {
+    padding: 0.375rem;
+  }
+  .p-8 {
+    padding: 0.5rem;
+  }
+  .p-12 {
+    padding: 0.75rem;
+  }
+  .p-16 {
+    padding: 1rem;
+  }
+  .p-20 {
+    padding: 1.25rem;
+  }

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

@@ -0,0 +1,170 @@
+import { h } from "@stencil/core";
+/**
+ * `EdsTooltip` dynamically positions a tooltip centered above the slotted element.
+ */
+export class EdsTooltip {
+    constructor() {
+        this.content = undefined;
+        this.position = 'above';
+        this.isVisible = false;
+        this.isPositioned = false;
+        this.tooltipStyle = { top: '0px', left: '0px', transform: '' };
+    }
+    /**
+     * Show the tooltip and update its position.
+     */
+    async showTooltip() {
+        await this.updateTooltipPosition();
+        this.isPositioned = true;
+        this.isVisible = true;
+    }
+    /**
+     * Hide the tooltip.
+     */
+    hideTooltip() {
+        this.isVisible = false;
+        this.isPositioned = false; // Reset positioning when hiding
+    }
+    /**
+     * Hide the tooltip when the `Escape` key is pressed.
+     */
+    handleKeyPress(event) {
+        if (event.key === 'Escape') {
+            this.isVisible = false;
+            this.isPositioned = false; // Reset positioning when hiding
+        }
+    }
+    /**
+     * Update the tooltip's position dynamically based on the slotted element's dimensions and position.
+     */
+    updateTooltipPosition() {
+        var _a, _b;
+        const slotElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        if (!slotElement) {
+            return;
+        }
+        const assignedNodes = (slotElement === null || slotElement === void 0 ? void 0 : slotElement.assignedNodes({ flatten: true })) || [];
+        const targetElement = assignedNodes.find((node) => node instanceof HTMLElement);
+        if (targetElement) {
+            const targetRect = targetElement.getBoundingClientRect();
+            const tooltipElement = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[role="tooltip"]');
+            if (tooltipElement) {
+                const tooltipWidth = tooltipElement.offsetWidth;
+                const tooltipHeight = tooltipElement.offsetHeight;
+                // Calculate position based on the preferred `position` prop
+                let top = 0;
+                let left = 0;
+                switch (this.position) {
+                    case 'above':
+                        top = window.scrollY - tooltipHeight - 8; // Above with offset
+                        left = targetRect.left + targetRect.width / 2 - tooltipWidth / 2; // Centered horizontally
+                        break;
+                    case 'below':
+                        top = tooltipHeight - window.scrollY + 18; // Below with offset
+                        left = targetRect.left + targetRect.width / 2 - tooltipWidth / 2; // Centered horizontally
+                        break;
+                    /*case 'left':
+                      top = targetRect.top - window.scrollY + targetRect.height / 2 - tooltipHeight / 2; // Centered vertically
+                      left = targetRect.left - tooltipWidth - 8; // To the left with offset
+                      break;
+                    case 'right':
+                      top = targetRect.top - window.scrollY + targetRect.height / 2 - tooltipHeight / 2; // Centered vertically
+                      left = targetRect.right + 8; // To the right with offset
+                      break;*/
+                }
+                this.tooltipStyle = {
+                    top: `${top}px`,
+                    left: `${left}px`,
+                    transform: 'translateX(0)' // No additional horizontal adjustment needed
+                };
+            }
+        }
+    }
+    render() {
+        return (h("div", { key: '79d0f81a61efe0e82be7870259f805c2bc3f47ad', class: "relative" }, h("slot", { key: 'dd923024ced5c206124cf72f395f75362e9df5b1' }), this.isVisible && this.isPositioned && this.content && (h("div", { key: '347ed6d492a2926ec3ec3fa407d0d9e3f727c4f1', class: "rounded-xs bg-strongest text-inverse f-ui-03-light pointer-events-none absolute z-10 whitespace-nowrap p-6", role: "tooltip", style: {
+                top: this.tooltipStyle.top,
+                left: this.tooltipStyle.left,
+                transform: this.tooltipStyle.transform
+            } }, 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
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'above' | 'below'",
+                    "resolved": "\"above\" | \"below\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The preferred position of the tooltip (`above`, `below`, `left`, `right`)."
+                },
+                "attribute": "position",
+                "reflect": false,
+                "defaultValue": "'above'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isVisible": {},
+            "isPositioned": {},
+            "tooltipStyle": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "mouseover",
+                "method": "showTooltip",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "mouseout",
+                "method": "hideTooltip",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "keydown",
+                "method": "handleKeyPress",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1,21 @@
+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 `
+    <eds-tooltip content="${args.content}">
+      <eds-button label="Hover over me" intent="primary" size="large" aria-label="Hover over me"></eds-button>
+    </eds-tooltip>
+  `,
+    args: {
+        content: 'This is a tooltip message.'
+    }
+};

package/dist/collection/eds-docs-ui/colors/color-palette/primary.js

@@ -0,0 +1,39 @@
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class ColorPrimaryPalette {
+    constructor() {
+        // Primary palette data
+        this.colors = [
+            {
+                rgb: 'R156 G225 B66',
+                cmyk: 'C52 M0 Y98 K0',
+                hex: '#9CE142',
+                pantoneC: 'PANTONE 367 C',
+                pantoneU: 'PANTONE 374 U',
+                background: '#9CE142'
+            },
+            {
+                rgb: 'R0 G201 B89',
+                cmyk: 'C75 M0 Y80 K0',
+                hex: '#00C959',
+                pantoneC: 'PANTONE 7480 C',
+                pantoneU: 'PANTONE 7481 U',
+                background: '#00C959'
+            },
+            {
+                rgb: 'R0 G165 B149',
+                cmyk: 'C78 M8 Y49 K0',
+                hex: '#00A595',
+                pantoneC: 'PANTONE 3272 C',
+                pantoneU: 'PANTONE 3275 U',
+                background: '#00A595'
+            }
+        ];
+    }
+    render() {
+        return (h("ul", { key: '153e3c0f00db6f824cb0f43b420645bcbd66632f', class: "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))))))));
+    }
+    static get is() { return "color-primary-palette"; }
+}