@ebrains/components 0.0.1-alpha.0

package/dist/esm/eds-section-core_2.entry.js

@@ -0,0 +1,54 @@
+import { r as registerInstance, h } from './index-f1426055.js';
+
+const edsSectionCoreCss = "";
+const EdsSectionCoreStyle0 = edsSectionCoreCss;
+
+const EdsSectionCore = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tag = 'section';
+        this.sectionTitle = '';
+        this.headingLevel = 'h2';
+    }
+    render() {
+        const TagType = this.tag; // Set dynamic tag type (div or section)
+        return (h(TagType, { key: '849c35d9cd587cf14b0d6bc6efd1310a85d447f2' }, h("eds-section-heading", { key: '7ed4486fcf6e7c653026869c9468be9471db1775', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '5d95ea6516ecaaab4e07a40b84cd20deb3d8d3b2' })));
+    }
+};
+EdsSectionCore.style = EdsSectionCoreStyle0;
+
+const EdsSectionHeading = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sectionTitle = undefined;
+        this.withContainer = true;
+        this.headingLevel = 'h2';
+        this.tag = 'div';
+        this.spacingLarge = false;
+    }
+    getHeadingClass() {
+        // Map heading levels to their respective classes
+        const headingClasses = {
+            h1: 'f-heading-01',
+            h2: 'f-heading-02',
+            h3: 'f-heading-03',
+            h4: 'f-heading-04',
+            h5: 'f-heading-05',
+            h6: 'f-heading-06'
+        };
+        // Return the class based on the heading level
+        return headingClasses[this.headingLevel];
+    }
+    render() {
+        const TagType = this.tag; // Dynamically set tag type for the container
+        const HeadingTag = this.headingLevel; // Dynamically set heading level
+        return (h(TagType, { key: '2c6466c0a02bf8598153c18eafb37affc3dac395', class: {
+                'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8 pb-20': true,
+                container: this.withContainer,
+                'pt-48': this.spacingLarge,
+                'pt-28': !this.spacingLarge
+            } }, h(HeadingTag, { key: 'fc7f0f09e02e8c63697e46811c465792497126e0', class: this.getHeadingClass() }, this.sectionTitle)));
+    }
+};
+
+export { EdsSectionCore as eds_section_core, EdsSectionHeading as eds_section_heading };

package/dist/esm/eds-section-heading.entry.js

@@ -0,0 +1,37 @@
+import { r as registerInstance, h } from './index-b384416e.js';
+
+const EdsSectionHeading = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sectionTitle = undefined;
+        this.withContainer = true;
+        this.headingLevel = 'h2';
+        this.tag = 'div';
+        this.spacingLarge = false;
+    }
+    getHeadingClass() {
+        // Map heading levels to their respective classes
+        const headingClasses = {
+            h1: 'f-heading-01',
+            h2: 'f-heading-02',
+            h3: 'f-heading-03',
+            h4: 'f-heading-04',
+            h5: 'f-heading-05',
+            h6: 'f-heading-06'
+        };
+        // Return the class based on the heading level
+        return headingClasses[this.headingLevel];
+    }
+    render() {
+        const TagType = this.tag; // Dynamically set tag type for the container
+        const HeadingTag = this.headingLevel; // Dynamically set heading level
+        return (h(TagType, { key: '2c6466c0a02bf8598153c18eafb37affc3dac395', class: {
+                'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8 pb-20': true,
+                container: this.withContainer,
+                'pt-48': this.spacingLarge,
+                'pt-28': !this.spacingLarge
+            } }, h(HeadingTag, { key: 'fc7f0f09e02e8c63697e46811c465792497126e0', class: this.getHeadingClass() }, this.sectionTitle)));
+    }
+};
+
+export { EdsSectionHeading as eds_section_heading };

package/dist/esm/eds-social-networks.entry.js

@@ -0,0 +1,61 @@
+import { r as registerInstance, h } from './index-b384416e.js';
+
+const edsSocialNetworkCss = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.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)}.f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.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)}.mt-12{margin-top:0.75rem}.mt-16{margin-top:1rem}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.gap-4{gap:0.25rem}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.hover\\:text-default:hover{color:var(--black)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-sm{border-radius:8px}";
+
+const EdsSocialNetwork = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Array of social network objects, each containing label, URL, and icon.
+         * These are used to render the social network links.
+         *
+         * @private
+         * @type {SocialNetworks[]}
+         */
+        this.socialNetworks = [
+            {
+                label: 'Twitter',
+                url: 'https://twitter.com/ebrains_eu',
+                icon: 'twitter'
+            },
+            {
+                label: 'Linkedin',
+                url: 'https://www.linkedin.com/company/ebrains-eu/about/',
+                icon: 'linkedin'
+            },
+            {
+                label: 'Facebook',
+                url: 'https://www.facebook.com/people/Ebrains_eu/100046659909324/',
+                icon: 'facebook'
+            },
+            {
+                label: 'Youtube',
+                url: 'https://www.youtube.com/channel/UC6E796cVVR5Xrs2A5jJmleQ',
+                icon: 'youtube'
+            },
+            {
+                label: 'Mastodon',
+                url: 'https://mastodon.social/@ebrains',
+                icon: 'mastodon'
+            },
+            {
+                label: 'Bluesky',
+                url: 'https://bsky.app/profile/ebrains.bsky.social',
+                icon: 'bluesky'
+            }
+        ];
+        this.title = 'Follow EBRAINS to keep up-to-date';
+    }
+    /**
+     * Renders the component's HTML structure with links to EBRAINS social profiles.
+     * Each social network link uses the `eds-link` component with specific classes and styles.
+     *
+     * @returns {JSX.Element} The rendered JSX for the component.
+     */
+    render() {
+        return (h("div", { key: 'f9096e036107d0b61ac3351194dbcb1747637707' }, h("p", { key: 'c40797bdc36e4e9349005e0e6de2ee0a49c511a4', class: "f-ui-02" }, this.title), h("ul", { key: '62eb31dc0ce98e3c536985d193472443275f3129', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": network.label, url: network.url, icon: network.icon, intent: "strong" })))))));
+    }
+};
+EdsSocialNetwork.style = edsSocialNetworkCss;
+
+export { EdsSocialNetwork as eds_social_networks };

package/dist/esm/eds-svg-repository.entry.js

@@ -0,0 +1,28 @@
+import { r as registerInstance, h } from './index-b384416e.js';
+import { v as svgs } from './index-a9afa43f.js';
+
+const EdsSvgRepository = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    // Convert SVG data to a format usable by `eds-table`
+    getSvgData() {
+        return Object.entries(svgs)
+            .filter(([name]) => !name.toLowerCase().includes('logo') && !name.toLowerCase().includes('eu')) // Exclude names containing "logo" or "eu"
+            .map(([name, svgContent]) => ({
+            name,
+            icon: svgContent // Pass SVG content as innerHTML
+        }));
+    }
+    render() {
+        const svgData = this.getSvgData();
+        // Define table configuration
+        const tableConfig = {
+            icon: { format: 'svg' },
+            name: { format: 'bold' }
+        };
+        return (h("eds-table", { key: 'a13e24877de433c40b536cb5b74af4c0706aeecf', data: JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true }));
+    }
+};
+
+export { EdsSvgRepository as eds_svg_repository };

package/dist/esm/eds-tab.entry.js

@@ -0,0 +1,36 @@
+import { r as registerInstance, h } from './index-b384416e.js';
+import { c as cva } from './index-144c9ae8.js';
+
+const EdsTab = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tabCva = cva([
+            'cursor-pointer',
+            //'px-16 py-12',
+            //'border-b-2',
+            'text-gray-700',
+            'hover:text-black',
+            'focus:outline-none',
+            'focus-visible:ring'
+        ], {
+            variants: {
+                active: {
+                    true: 'border-blue-500 font-bold text-blue-600',
+                    false: 'border-transparent'
+                }
+            },
+            defaultVariants: {
+                active: false
+            }
+        });
+        this.label = undefined;
+        this.url = undefined;
+        this.active = false;
+        this.ariaLabel = undefined;
+    }
+    render() {
+        return (h("a", { key: 'ba4c995637d8d305249f018a0451775f45907716', "aria-label": this.label, "aria-current": this.active, class: this.tabCva({ active: this.active }) }, this.label));
+    }
+};
+
+export { EdsTab as eds_tab };

package/dist/esm/eds-table.entry.js

@@ -0,0 +1,138 @@
+import { r as registerInstance, h, g as getElement } from './index-b384416e.js';
+
+const edsTableCss = "table{text-indent:0;border-color:inherit;border-collapse:collapse;}.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}.pt-32{padding-top:2rem}.pt-40{padding-top:2.5rem}.pt-48{padding-top:3rem}.pb-28{padding-bottom:1.75rem}.pb-60{padding-bottom:3.75rem}.mt-20{margin-top:1.25rem}.mt-28{margin-top:1.75rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.overflow-x-auto{overflow-x:auto}.mt-6{margin-top:0.375rem}.p-0{padding:0rem}.m-0{margin:0rem}.border{border-width:1px}.border-softer{border:1px solid rgba(0, 0, 0, .1)}.even\\:bg-inverse-softer:nth-child(even){background-color:rgba(255, 255, 255, .15)}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.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)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}";
+
+const EdsTable = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.minWidth = 400; // Minimum width for components in px
+        this.data = null;
+        this.endpoint = null;
+        this.config = {};
+        this.rowsPerPage = 10;
+        this.paginationEnabled = true;
+        this.searchEnabled = false;
+        this.tableData = [];
+        this.columns = [];
+        this.currentPage = 1;
+        this.parsedConfig = {};
+        this.totalRows = 0;
+        this.searchQuery = '';
+    }
+    handleDataChange() {
+        this.parseData();
+    }
+    handleConfigChange() {
+        this.parseConfig();
+    }
+    componentWillLoad() {
+        this.parseConfig();
+        this.data ? this.parseData() : this.endpoint && this.fetchData();
+    }
+    componentDidLoad() {
+        this.setupPaginationListener();
+    }
+    componentDidUpdate() {
+        this.setupPaginationListener();
+    }
+    parseData() {
+        try {
+            this.tableData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data || [];
+            this.totalRows = this.tableData.length;
+            this.updateColumns();
+            this.currentPage = 1;
+        }
+        catch (error) {
+            // eslint-disable-next-line
+            console.error('Failed to parse data:', error);
+            this.tableData = [];
+        }
+    }
+    parseConfig() {
+        try {
+            this.parsedConfig = typeof this.config === 'string' ? JSON.parse(this.config) : this.config;
+        }
+        catch (error) {
+            // eslint-disable-next-line
+            console.error('Failed to parse config:', error);
+            this.parsedConfig = {};
+        }
+    }
+    async fetchData() {
+        try {
+            const response = await fetch(this.endpoint);
+            const data = await response.json();
+            this.data = data;
+        }
+        catch (error) {
+            // eslint-disable-next-line
+            console.error('Failed to fetch data:', error);
+        }
+    }
+    setupPaginationListener() {
+        if (!this.shouldEnablePagination()) {
+            return;
+        }
+        const paginationEl = this.hostEl.shadowRoot.querySelector('eds-pagination');
+        if (paginationEl && !paginationEl.hasAttribute('listener-attached')) {
+            paginationEl.addEventListener('pageChange', (event) => this.handlePageChange(event.detail));
+            paginationEl.setAttribute('listener-attached', 'true');
+        }
+    }
+    getFilteredRows() {
+        return this.tableData.filter((row) => Object.values(row).some((value) => value.toString().toLowerCase().includes(this.searchQuery.toLowerCase())));
+    }
+    getPaginatedRows() {
+        const filteredRows = this.getFilteredRows();
+        this.totalRows = filteredRows.length;
+        const start = (this.currentPage - 1) * this.rowsPerPage;
+        return filteredRows.slice(start, start + this.rowsPerPage);
+    }
+    handlePageChange(newPage) {
+        this.currentPage = newPage;
+    }
+    handleSearch(event) {
+        this.searchQuery = event.target.value;
+        this.currentPage = 1;
+    }
+    renderCell(value, column) {
+        var _a;
+        const format = (_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.format;
+        return format === 'uppercase' ? (value === null || value === void 0 ? void 0 : value.toString().toUpperCase()) : format === 'svg' ? (h("div", { innerHTML: value })) : format === 'bold' ? (h("strong", null, value)) : format === 'code' ? (h("code", null, value)) : (value);
+    }
+    shouldEnablePagination() {
+        return this.paginationEnabled && this.totalRows > this.rowsPerPage;
+    }
+    updateColumns() {
+        this.columns = this.tableData.length > 0 ? Object.keys(this.tableData[0]) : [];
+    }
+    getVisibleColumnsCount() {
+        return this.columns.filter((column) => { var _a; return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden); }).length;
+    }
+    render() {
+        const paginatedRows = this.getPaginatedRows();
+        const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
+        // Calculate column width based on minWidth and number of columns
+        //const columnWidth = Math.max(this.minWidth / this.columns.length, 100);
+        // Use the visible column count to calculate the column width
+        const visibleColumnsCount = this.getVisibleColumnsCount();
+        const columnWidth = visibleColumnsCount > 0 ? Math.max(this.minWidth / visibleColumnsCount, 100) : 100;
+        return (h("div", { key: 'c5e50673eb1ed5cf00e0294885bf9cd6d13f9366', class: "container", style: { minWidth: `${this.minWidth}px` } }, h("div", { key: '0e0814a8cb5ae1e11538a26cba630e59d39dde74' }, this.searchEnabled && (h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...",
+            // @ts-ignore
+            onInput: (event) => this.handleSearch(event) }))), h("div", { key: '65e0c9057c313f220655ecd7692a83c932f441b3', class: "mt-20" }, h("table", { key: '9e77153c2e0983f7598a21ef55ebcf3107655e09', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: '38e5ac67ffae80d896c29357615d19b5dfcc52d3' }, h("tr", { key: '526c5b30da0a2aa97bb90f5b473b3e9ea41dde6b', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            var _a;
+            return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (h("th", { class: "m-0 px-20 py-8 border border-softer f-ui-02", style: { minWidth: `${columnWidth}px` } }, column));
+        }))), h("tbody", { key: '5a10525ed86eac82291746be4c6cce5f65942d2d' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            var _a;
+            return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (h("td", { class: "text-center border border-softer m-0 px-20 py-8 f-ui-2", style: { minWidth: `${columnWidth}px` } }, this.renderCell(row[column], column)));
+        }))))))), h("div", { key: 'af1183fd3e635c7d7ac982231adfdd9d892f6979', class: "mt-20" }, this.shouldEnablePagination() && (h("eds-pagination", { key: 'a5de7f25054c2d67f0788bfd2bc37d07f46de02c', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+    }
+    get hostEl() { return getElement(this); }
+    static get watchers() { return {
+        "data": ["handleDataChange"],
+        "config": ["handleConfigChange"]
+    }; }
+};
+EdsTable.style = edsTableCss;
+
+export { EdsTable as eds_table };

package/dist/esm/eds-tabs-content.entry.js

@@ -0,0 +1,129 @@
+import { r as registerInstance, a as createEvent, h, g as getElement } from './index-b384416e.js';
+import { s as sendAnalytics } from './index-360dc790.js';
+import { c as cva } from './index-144c9ae8.js';
+
+const EdsTabsContent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tabContentChange = createEvent(this, "tabContentChange", 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.navAriaLabel = 'Tabs';
+        this.tabs = undefined;
+        this.parsedTabs = [];
+        this.activeIndex = -1;
+    }
+    componentWillLoad() {
+        this.parseTabs();
+        this.setActiveIndex();
+    }
+    parseTabs() {
+        try {
+            this.parsedTabs = JSON.parse(this.tabs);
+        }
+        catch (error) {
+            //console.error('Invalid JSON format for tabs:', error);
+            this.parsedTabs = [];
+        }
+    }
+    componentDidLoad() {
+        this.initializeTabContentVisibility();
+        this.el.addEventListener('tabContentChange', (e) => {
+            this.updateTabContentVisibility(e.detail.index);
+        });
+        this.scrollToActiveTab();
+    }
+    initializeTabContentVisibility() {
+        const allContent = this.el.querySelectorAll('.tab-content');
+        allContent.forEach((content, index) => {
+            content.setAttribute('style', `display: ${index === this.activeIndex ? 'block' : 'none'}`);
+        });
+    }
+    updateTabContentVisibility(index) {
+        const allContent = this.el.querySelectorAll('.tab-content');
+        allContent.forEach((content, contentIndex) => {
+            content.setAttribute('style', `display: ${contentIndex === index ? 'block' : 'none'}`);
+        });
+    }
+    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.tabContentChange.emit({ 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: '6e28a10b490f22edee3516ab1d0ec37248f1216a', 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: '62300b2980120504a5fc2e32e283552252a36344', class: "scroller-x max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, h("nav", { key: 'e0dbe930935f080bec4f2869ec640e89197b541d', 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, url: tab.url, active: index === this.activeIndex, ariaLabel: tab.ariaLabel, onClick: () => this.handleTabClick(index, tab.label) })));
+        })), h("slot", { key: '5ba55e25a79886beafa6f25b2e80cc42b5f2abee' }))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "tabs": ["parseTabs"]
+    }; }
+};
+
+export { EdsTabsContent as eds_tabs_content };

package/dist/esm/eds-tabs.entry.js

@@ -0,0 +1,118 @@
+import { r as registerInstance, a as createEvent, h, g as getElement } from './index-b384416e.js';
+import { s as sendAnalytics } from './index-360dc790.js';
+import { c as cva } from './index-144c9ae8.js';
+
+const edsTabsCss = "";
+
+const EdsTabs = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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 getElement(this); }
+    static get watchers() { return {
+        "tabs": ["parseTabs"]
+    }; }
+};
+EdsTabs.style = edsTabsCss;
+
+export { EdsTabs as eds_tabs };

package/dist/esm/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 };