@ebrains/components 0.0.1-alpha.0

package/dist/components/eds-tabs.js

@@ -0,0 +1,149 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { s as sendAnalytics } from './index2.js';
+import { c as cva } from './index3.js';
+import { d as defineCustomElement$2 } from './eds-tab2.js';
+
+const edsTabsCss = "";
+
+const EdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class EdsTabs extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.tabChange = createEvent(this, "tabChange", 7);
+        // cva configuration
+        this.tabCva = cva([
+            'relative px-16 py-12',
+            'f-ui-03 whitespace-nowrap',
+            'effect-color',
+            'focus-visible:text-default hover:text-default',
+            'border-2',
+            "after:content-[''] after:absolute after:inset-0 after:rounded-t-lg after:border-3 after:border-accent after:opacity-0",
+            'outline-none focus:outline-none focus-visible:outline-none focus-visible:after:opacity-100'
+        ], {
+            variants: {
+                position: {
+                    left: 'rounded-tl-lg border-r-0 pr-28 -mr-16 after:right-16',
+                    right: 'rounded-tr-lg border-l-0 pl-28 -ml-16 after:left-16',
+                    center: '',
+                    first: 'rounded-t-lg'
+                },
+                active: {
+                    false: 'text-lighter bg-dark hover:bg-darker border-softest',
+                    true: [
+                        'bg-default text-default z-99',
+                        'rounded-t-lg',
+                        "before:content-[''] before:absolute before:-bottom-2 z-1 before:inset-x-0 before:h-3 before:bg-default",
+                        'border-[#d2d2d2]'
+                    ]
+                }
+            }
+        });
+        this.id = undefined;
+        this.navAriaLabel = 'Tabs';
+        this.tabs = undefined;
+        this.parsedTabs = [];
+        this.activeIndex = -1;
+    }
+    componentWillLoad() {
+        this.parseTabs();
+        this.setActiveIndex();
+        this.tabChange.emit({ tabId: this.id, index: 0 });
+    }
+    parseTabs() {
+        try {
+            this.parsedTabs = JSON.parse(this.tabs);
+        }
+        catch (error) {
+            //console.error('Invalid JSON format for tabs:', error);
+            this.parsedTabs = [];
+        }
+    }
+    componentDidLoad() {
+        this.scrollToActiveTab();
+    }
+    setActiveIndex() {
+        this.activeIndex = this.parsedTabs.findIndex((tab) => tab.active);
+    }
+    scrollToActiveTab() {
+        var _a;
+        const activeTab = (_a = this.tabContainer) === null || _a === void 0 ? void 0 : _a.querySelector('[data-tab-active]');
+        if (activeTab) {
+            setTimeout(() => {
+                activeTab.scrollIntoView({
+                    inline: 'center',
+                    block: 'nearest'
+                });
+            }, 316);
+        }
+    }
+    getTabOptions(active, index) {
+        const position = active
+            ? 'center'
+            : this.activeIndex === -1 && index === 0
+                ? 'first'
+                : index < this.activeIndex
+                    ? 'left'
+                    : 'right';
+        return Object.assign({ class: this.tabCva({
+                active,
+                position
+            }), style: {
+                zIndex: `${active ? this.parsedTabs.length + 99 : position === 'left' ? index : this.parsedTabs.length + 1 - index}`
+            } }, (active ? { 'data-tab-active': 'true' } : {}));
+    }
+    handleTabClick(index, tabLabel) {
+        // Update the active index and set all tabs' active state accordingly
+        this.activeIndex = index;
+        this.parsedTabs = this.parsedTabs.map((tab, tabIndex) => (Object.assign(Object.assign({}, tab), { active: tabIndex === index })));
+        this.tabChange.emit({ tabId: this.id, index: index, name: tabLabel });
+        sendAnalytics({
+            category: 'ui-component',
+            tag: this.el.tagName.toLowerCase(),
+            name: (tabLabel === null || tabLabel === void 0 ? void 0 : tabLabel.toLowerCase()) || '',
+            action: 'click'
+        });
+    }
+    render() {
+        return (h("div", { key: '826fb378cc685039ef3dad47d927ec0398606c9b', id: `${this.id}`, class: "after:border-softest before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, h("div", { key: '7065bfd5e3dad0386af8bf5741a6517c5cf73db4', class: "scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, h("nav", { key: '41b08427b7c265c70ad506e87733592b28addeda', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+            //const TabComponent = tab.active ? 'span' : 'a';
+            const tabProps = this.getTabOptions(tab.active, index);
+            return (h("eds-tab", Object.assign({}, tabProps, { label: tab.label || tab.ariaLabel, url: tab.url, active: index === this.activeIndex, onClick: () => this.handleTabClick(index, tab.label) })));
+        })))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "tabs": ["parseTabs"]
+    }; }
+    static get style() { return edsTabsCss; }
+}, [0, "eds-tabs", {
+        "id": [1],
+        "navAriaLabel": [1, "nav-aria-label"],
+        "tabs": [1],
+        "parsedTabs": [32],
+        "activeIndex": [32]
+    }, undefined, {
+        "tabs": ["parseTabs"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-tabs", "eds-tab"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-tabs":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsTabs$1);
+            }
+            break;
+        case "eds-tab":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const EdsTabs = EdsTabs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsTabs, defineCustomElement };

package/dist/components/eds-tag.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsTag extends Components.EdsTag, HTMLElement {}
+export const EdsTag: {
+    prototype: EdsTag;
+    new (): EdsTag;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,40 @@
+import { r as registerInstance, h } from './index-b384416e.js';
+import { c as cva } from './index-144c9ae8.js';
+
+const edsTagCss = ".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)}";
+
+// 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'
+    }
+});
+const EdsTag = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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);
+    }
+};
+EdsTag.style = edsTagCss;
+
+export { EdsTag as eds_tag };

package/dist/components/eds-tag.js

@@ -0,0 +1,6 @@
+import { E as EdsTag$1, d as defineCustomElement$1 } from './eds-tag2.js';
+
+const EdsTag = EdsTag$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsTag, defineCustomElement };

package/dist/components/eds-tag2.js

@@ -0,0 +1,58 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as cva } from './index3.js';
+
+const edsTagCss = ".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)}";
+
+// 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'
+    }
+});
+const EdsTag = /*@__PURE__*/ proxyCustomElement(class EdsTag extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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 style() { return edsTagCss; }
+}, [1, "eds-tag", {
+        "label": [1],
+        "intent": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-tag"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-tag":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsTag);
+            }
+            break;
+    } });
+}
+
+export { EdsTag as E, defineCustomElement as d };

package/dist/components/eds-toast-manager.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsToastManager extends Components.EdsToastManager, HTMLElement {}
+export const EdsToastManager: {
+    prototype: EdsToastManager;
+    new (): EdsToastManager;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/eds-toast-manager.entry.js

@@ -0,0 +1,41 @@
+import { r as registerInstance, h, g as getElement } from './index-b384416e.js';
+import { t as toast } from './toastManager-b716afd8.js';
+
+const edsToastManagerCss = ".toast-container{position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:50;display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:36rem;}.toast-wrapper{width:100%;padding:0 1rem;}.eds-toast{box-shadow:0px 4px 6px rgba(0, 0, 0, 0.1);border-radius:0.5rem;animation:fade-in 0.3s ease-out;}@keyframes fade-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}";
+
+const EdsToastManager = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.toastId = 0;
+        this.toasts = [];
+    }
+    connectedCallback() {
+        // Initialize the ToastManager singleton with this element
+        toast.init(this.hostElement);
+        // Listen for custom events
+        this.hostElement.addEventListener('show-toast', (event) => {
+            const { message, intent } = event.detail;
+            this.addToast(message, intent);
+        });
+    }
+    /**
+     * Adds a new toast.
+     */
+    addToast(message, intent) {
+        const id = this.toastId++;
+        this.toasts = [...this.toasts, { id, message, intent }];
+    }
+    /**
+     * Removes a toast by ID.
+     */
+    removeToast(id) {
+        this.toasts = this.toasts.filter((t) => t.id !== id);
+    }
+    render() {
+        return (h("div", { key: '91104e9dfd85e638a5482d22c70506ce06989bbd', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
+    }
+    get hostElement() { return getElement(this); }
+};
+EdsToastManager.style = edsToastManagerCss;
+
+export { EdsToastManager as eds_toast_manager };

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

@@ -0,0 +1,78 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { t as toast } from './toastManager.js';
+import { d as defineCustomElement$4 } from './eds-button2.js';
+import { d as defineCustomElement$3 } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$2 } from './eds-toast2.js';
+
+const edsToastManagerCss = ".toast-container{position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:50;display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:36rem;}.toast-wrapper{width:100%;padding:0 1rem;}.eds-toast{box-shadow:0px 4px 6px rgba(0, 0, 0, 0.1);border-radius:0.5rem;animation:fade-in 0.3s ease-out;}@keyframes fade-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}";
+
+const EdsToastManager$1 = /*@__PURE__*/ proxyCustomElement(class EdsToastManager extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.toastId = 0;
+        this.toasts = [];
+    }
+    connectedCallback() {
+        // Initialize the ToastManager singleton with this element
+        toast.init(this.hostElement);
+        // Listen for custom events
+        this.hostElement.addEventListener('show-toast', (event) => {
+            const { message, intent } = event.detail;
+            this.addToast(message, intent);
+        });
+    }
+    /**
+     * Adds a new toast.
+     */
+    addToast(message, intent) {
+        const id = this.toastId++;
+        this.toasts = [...this.toasts, { id, message, intent }];
+    }
+    /**
+     * Removes a toast by ID.
+     */
+    removeToast(id) {
+        this.toasts = this.toasts.filter((t) => t.id !== id);
+    }
+    render() {
+        return (h("div", { key: '91104e9dfd85e638a5482d22c70506ce06989bbd', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
+    }
+    get hostElement() { return this; }
+    static get style() { return edsToastManagerCss; }
+}, [0, "eds-toast-manager", {
+        "toasts": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-toast-manager", "eds-button", "eds-icon-wrapper", "eds-toast"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-toast-manager":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsToastManager$1);
+            }
+            break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-toast":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const EdsToastManager = EdsToastManager$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsToastManager, defineCustomElement };

package/dist/components/eds-toast.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsToast extends Components.EdsToast, HTMLElement {}
+export const EdsToast: {
+    prototype: EdsToast;
+    new (): EdsToast;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,49 @@
+import { r as registerInstance, h, g as getElement } from './index-b384416e.js';
+import { c as cva } from './index-144c9ae8.js';
+
+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'
+    }
+});
+const EdsToast = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * 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" }))));
+    }
+    get el() { return getElement(this); }
+};
+
+export { EdsToast as eds_toast };

package/dist/components/eds-toast.js

@@ -0,0 +1,6 @@
+import { E as EdsToast$1, d as defineCustomElement$1 } from './eds-toast2.js';
+
+const EdsToast = EdsToast$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsToast, defineCustomElement };

package/dist/components/eds-toast2.js

@@ -0,0 +1,80 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as cva } from './index3.js';
+import { d as defineCustomElement$2 } from './eds-button2.js';
+import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
+
+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'
+    }
+});
+const EdsToast = /*@__PURE__*/ proxyCustomElement(class EdsToast extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        /**
+         * 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" }))));
+    }
+    get el() { return this; }
+}, [0, "eds-toast", {
+        "message": [1],
+        "intent": [1],
+        "duration": [2],
+        "visible": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-toast", "eds-button", "eds-icon-wrapper"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-toast":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsToast);
+            }
+            break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { EdsToast as E, defineCustomElement as d };

package/dist/components/eds-tooltip.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsTooltip extends Components.EdsTooltip, HTMLElement {}
+export const EdsTooltip: {
+    prototype: EdsTooltip;
+    new (): EdsTooltip;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,95 @@
+import { r as registerInstance, h, g as getElement } from './index-b384416e.js';
+
+const edsTooltipCss = ".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}";
+
+const EdsTooltip = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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))));
+    }
+    get el() { return getElement(this); }
+};
+EdsTooltip.style = edsTooltipCss;
+
+export { EdsTooltip as eds_tooltip };