@ebrains/components 0.9.2-beta → 1.0.0

package/dist/components/{eds-steps.entry.js → eds-steps2.js}

@@ -1,11 +1,16 @@
-import { r as registerInstance, a as createEvent, h, g as getElement } from './index-9d277061.js';
-import { p as parseData } from './sharedUtils-6a231dd4.js';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { p as parseData } from './sharedUtils.js';
+import { d as defineCustomElement$2 } from './eds-button2.js';
+import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
 
-const edsStepsCss = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.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)}.text-default{color:var(--black)}.text-error{color:var(--red-700)}.text-extra-light{color:var(--grey-300)}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.mb-28{margin-bottom:1.75rem}";
+const edsStepsCss = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.my-16{margin-top:1rem;margin-bottom:1rem}.mb-28{margin-bottom:1.75rem}";
+const EdsStepsStyle0 = edsStepsCss;
 
-const EdsSteps = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const EdsSteps = /*@__PURE__*/ proxyCustomElement(class EdsSteps extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
         this.step = createEvent(this, "step", 7);
         this.handleNext = () => {
             this.activeStep = this.activeStep + 1;
@@ -84,11 +89,40 @@ const EdsSteps = class {
         // Static mode: show all steps with their content, no navigation buttons.
         return (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-28", key: index }, h("h3", null, step.title), h("div", { class: "content" }, h("div", { class: "f-body-02 text-lighter my-16" }, step.content)))))));
     }
-    get el() { return getElement(this); }
+    get el() { return this; }
     static get watchers() { return {
         "activeStep": ["activeStepChanged"]
     }; }
-};
-EdsSteps.style = edsStepsCss;
+    static get style() { return EdsStepsStyle0; }
+}, [1, "eds-steps", {
+        "steps": [1],
+        "type": [1],
+        "activeStep": [32]
+    }, undefined, {
+        "activeStep": ["activeStepChanged"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-steps", "eds-button", "eds-icon-wrapper"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-steps":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsSteps);
+            }
+            break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
 
-export { EdsSteps as eds_steps };
+export { EdsSteps as E, defineCustomElement as d };

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

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

package/dist/components/eds-switch.js

@@ -0,0 +1,65 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { s as sendAnalytics } from './analytics.js';
+
+const edsSwitchCss = ":host{display:inline-block}.switch-container{display:inline-flex;align-items:center}.switch-label{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)}button.switch{position:relative;display:inline-flex;align-items:center;width:50px;height:26px;border:none;border-radius:13px;background-color:#ccc;padding:0;cursor:pointer;transition:background-color 0.2s}button.switch:focus{outline:none;box-shadow:0 0 0 2px #007aff}button.switch.switch--checked{background-color:var(--green-500)}button.switch.switch--disabled{opacity:0.6;cursor:not-allowed}.switch-handle{position:absolute;width:22px;height:22px;border-radius:50%;background-color:#fff;top:2px;left:2px;transition:transform 0.2s}button.switch.switch--checked .switch-handle{transform:translateX(24px)}.ml-8{margin-left:0.5rem}.mr-8{margin-right:0.5rem}";
+const EdsSwitchStyle0 = edsSwitchCss;
+
+const EdsSwitch$1 = /*@__PURE__*/ proxyCustomElement(class EdsSwitch extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.uiswitch = createEvent(this, "uiswitch", 7);
+        this.toggleSwitch = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.checked = !this.checked;
+            this.uiswitch.emit(this.checked);
+            sendAnalytics({
+                category: 'ui-component',
+                tag: this.el.tagName.toLowerCase(),
+                name: this.checked ? this.labelOn : this.labelOff || '',
+                action: 'checked'
+            });
+        };
+        this.checked = false;
+        this.disabled = false;
+        this.labelOn = '';
+        this.labelOff = '';
+    }
+    render() {
+        // Compute an accessible name based on state.
+        const accessibleLabel = this.labelOn || this.labelOff ? (this.checked ? this.labelOn : this.labelOff) : 'Toggle switch';
+        return (h("div", { key: '442876be1bad7ea8c9e383bc68b192a2744c38f9', class: "switch-container" }, this.labelOff && h("span", { key: 'e4a7b01c0188d26e5b6524741b1c8ef66e357e35', class: "switch-label switch-label--off mr-8" }, this.labelOff), h("button", { key: 'f56b3762622671acf793568a96567193c38999c7', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": accessibleLabel, class: {
+                switch: true,
+                'switch--checked': this.checked,
+                'switch--disabled': this.disabled
+            }, onClick: this.toggleSwitch, disabled: this.disabled }, h("span", { key: 'b76e89a1e37130542dd86ce3aed8c5690aeeda63', class: "switch-handle" })), this.labelOn && h("span", { key: '4e5d4f8a2f19bb612a17fa73e441e7e718b71508', class: "switch-label switch-label--on ml-8" }, this.labelOn)));
+    }
+    get el() { return this; }
+    static get style() { return EdsSwitchStyle0; }
+}, [1, "eds-switch", {
+        "checked": [1540],
+        "disabled": [4],
+        "labelOn": [1, "label-on"],
+        "labelOff": [1, "label-off"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-switch"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-switch":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsSwitch$1);
+            }
+            break;
+    } });
+}
+
+const EdsSwitch = EdsSwitch$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsSwitch, defineCustomElement };

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

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

package/dist/components/eds-table.js

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

package/dist/components/{eds-table.entry.js → eds-table2.js}

@@ -1,12 +1,25 @@
-import { r as registerInstance, h, g as getElement } from './index-9d277061.js';
-import { s as sendAnalytics } from './analytics-e29fcd53.js';
-import { p as parseData } from './sharedUtils-6a231dd4.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { s as sendAnalytics } from './analytics.js';
+import { p as parseData } from './sharedUtils.js';
+import { d as defineCustomElement$a } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$9 } from './eds-input2.js';
+import { d as defineCustomElement$8 } from './eds-input-field2.js';
+import { d as defineCustomElement$7 } from './eds-input-footer2.js';
+import { d as defineCustomElement$6 } from './eds-input-label2.js';
+import { d as defineCustomElement$5 } from './eds-input-range2.js';
+import { d as defineCustomElement$4 } from './eds-input-search2.js';
+import { d as defineCustomElement$3 } from './eds-input-select2.js';
+import { d as defineCustomElement$2 } from './eds-link2.js';
+import { d as defineCustomElement$1 } from './eds-pagination2.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}.break-words{overflow-wrap:anywhere}";
+const EdsTableStyle0 = edsTableCss;
 
-const EdsTable = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
         this.handleResize = () => {
             this.updateContainerWidth();
         };
@@ -167,22 +180,104 @@ const EdsTable = class {
         const columnWidth = visibleColumnsCount > 0 ? Math.floor((currentContainerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
         const paginatedRows = this.getPaginatedRows();
         const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
-        return (h("div", { key: '43add2309d8e2c85c98676709cd87fc07e4de017' }, this.searchEnabled && (h("div", { key: '1213d8aaa8a2402bd1705e03375d17f570877d5e' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...",
+        return (h("div", { key: '81735ac374853c8c92b3f50e26263ff9d71b326c' }, this.searchEnabled && (h("div", { key: '0b2ab8dbb343033f605e2028890bd963cd650998' }, 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: 'a2ec6392ed99a527e4de46a9018bc1ea9b383ecb', class: "mt-20" }, h("table", { key: 'ef79ce872f0cb1439dd6a7987f24cac005ac23ea', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: '0853a09e45f748b4bc85e319cbb08efd97426617' }, h("tr", { key: '64e114ae3661a027e9ab744ba45801d98f2faee9', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            onInput: (event) => this.handleSearch(event) }))), h("div", { key: 'eb3eebe6fb124d4e1983b2fb7e636707817d36bd', class: "mt-20" }, h("table", { key: '03b312ac20bdec28843a46907a3cc4fba69f62ae', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: 'ccab58dc46ae765df28da97ded6b1dd14d45d7f1' }, h("tr", { key: '904a125aad610cebe42b0bce46615be38f0ee17a', 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 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, column));
-        }))), h("tbody", { key: '1afd468551bab11221bbfc70d0f19f4e105e7432' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+        }))), h("tbody", { key: 'a4c54c9c89d15546020dbb684e5486decde33f30' }, 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 py-8 f-ui-2 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.renderCell(row[column], column)));
-        }))))))), this.shouldEnablePagination() && (h("div", { key: 'c415ded700580eec2464a72a1659bd8be5bcacb3', class: "mt-20" }, h("eds-pagination", { key: '81088574b7c7fd254e07761ceed6cd1d69c2f2ed', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+        }))))))), this.shouldEnablePagination() && (h("div", { key: '2a248cbbe81ac8c1ad4dfbb49a9615f15931bac6', class: "mt-20" }, h("eds-pagination", { key: '11701d81922ca4c8b36fe82be32316a175eddbcd', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
-    get hostEl() { return getElement(this); }
+    get hostEl() { return this; }
     static get watchers() { return {
         "data": ["handleDataChange", "parseData"],
         "config": ["handleConfigChange"]
     }; }
-};
-EdsTable.style = edsTableCss;
+    static get style() { return EdsTableStyle0; }
+}, [1, "eds-table", {
+        "data": [1, "table-data"],
+        "endpoint": [1],
+        "config": [1],
+        "rowsPerPage": [2, "rows-per-page"],
+        "paginationEnabled": [4, "pagination-enabled"],
+        "searchEnabled": [4, "search-enabled"],
+        "hostWidth": [1, "host-width"],
+        "columnSize": [1, "column-size"],
+        "tbData": [32],
+        "columns": [32],
+        "currentPage": [32],
+        "parsedConfig": [32],
+        "totalRows": [32],
+        "searchQuery": [32],
+        "containerWidth": [32]
+    }, undefined, {
+        "data": ["handleDataChange", "parseData"],
+        "config": ["handleConfigChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-table", "eds-icon-wrapper", "eds-input", "eds-input-field", "eds-input-footer", "eds-input-label", "eds-input-range", "eds-input-search", "eds-input-select", "eds-link", "eds-pagination"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-table":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsTable);
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "eds-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "eds-input-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "eds-input-footer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "eds-input-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "eds-input-range":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "eds-input-search":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "eds-input-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "eds-pagination":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
 
-export { EdsTable as eds_table };
+export { EdsTable as E, defineCustomElement as d };

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

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

package/dist/components/eds-tabs.js

@@ -0,0 +1,152 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { s as sendAnalytics } from './analytics.js';
+import { c as cva } from './index2.js';
+import { p as parseData } from './sharedUtils.js';
+
+const edsTabsCss = "*,::before,::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(147 197 253 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor;}::before,::after{--tw-content:''}a{color:inherit;text-decoration:inherit}.relative{position:relative}.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)}.whitespace-nowrap{white-space:nowrap}.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)}.focus-visible\\:text-default:focus-visible{color:var(--black)}.hover\\:text-default:hover{color:var(--black)}.border-2{border-width:2px}.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.after\\:bottom-0::after{bottom:0rem}.after\\:border-0::after{border-width:0px}.after\\:border-b-2::after{border-bottom-width:2px}.after\\:absolute::after{position:absolute}.after\\:inset-0::after{inset:0rem}.after\\:rounded-lg::after{border-radius:16px}.after\\:border-solid::after{border-style:solid}.after\\:border-3::after{border-width:3px}.after\\:border-accent::after{border-color:var(--green-500)}.after\\:opacity-0::after{opacity:0}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:after\\:opacity-100:focus-visible::after{opacity:1}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.rounded-tl-lg{border-top-left-radius:16px}.rounded-tr-lg{border-top-right-radius:16px}.border-l-0{border-left-width:0px}.border-r-0{border-right-width:0px}.pr-28{padding-right:1.75rem}.pl-28{padding-left:1.75rem}.-mr-16{margin-right:-1rem}.-ml-16{margin-left:-1rem}.px-16{padding-left:1rem;padding-right:1rem}.py-12{padding-top:0.75rem;padding-bottom:0.75rem}.after\\:left-16::after{left:1rem}.after\\:right-16::after{right:1rem}.text-lighter{color:var(--grey-600)}.bg-dark{background-color:var(--grey-300)}.hover\\:bg-darker:hover{background-color:var(--grey-400)}.border-soft{border-color:var(--grey-400)}.border-softest{border-color:rgba(0, 0, 0, .05)}.bg-default{background-color:var(--grey-200)}.text-default{color:var(--black)}.z-99{z-index:99}.before\\:bottom-0::before{bottom:0rem}.before\\:h-12::before{height:0.75rem}.before\\:opacity-5::before{opacity:0.05}.before\\:content-\\[\\'\\'\\]::before{--tw-content:'';content:var(--tw-content)}.before\\:absolute::before{position:absolute}.before\\:-bottom-2::before{bottom:-0.125rem}.after\\:inset-x-0::after{left:0rem;right:0rem}.before\\:inset-x-0::before{left:0rem;right:0rem}.before\\:h-3::before{height:0.1875rem}.before\\:bg-default::before{background-color:var(--grey-200)}.after\\:border-softest::after{border-color:rgba(0, 0, 0, .05)}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.before\\:bg-gradient-y::before{background:linear-gradient(to bottom, transparent, ease-in-out, black)}.scroller-x{-ms-overflow-style:none;scrollbar-width:none}.overflow-x-auto{overflow-x:auto}.max-w-xxxl{max-width:2200px}.z-1{z-index:1}.mx-auto{margin-left:auto;margin-right:auto}.pt-8{padding-top:0.5rem}.pr-16{padding-right:1rem}.pl-16{padding-left:1rem}.inline-flex{display:inline-flex}@media (min-width: 900px){.lg\\:px-28{padding-left:1.75rem;padding-right:1.75rem}}@media (min-width: 2200px){.xxxl\\:px-0{padding-left:0rem;padding-right:0rem}}";
+const EdsTabsStyle0 = edsTabsCss;
+
+const EdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class EdsTabs extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.tab = createEvent(this, "tab", 7);
+        // cva configuration
+        this.tabCva = cva([
+            'relative 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:opacity-0",
+            'outline-none focus:outline-none focus-visible:outline-none focus-visible:after:opacity-100'
+        ], {
+            variants: {
+                position: {
+                    first: 'px-16 rounded-t-lg',
+                    center: 'px-16',
+                    left: 'pl-16 pr-28 rounded-tl-lg border-r-0 -mr-16 after:right-16',
+                    right: 'pl-28 pr-16 rounded-tr-lg border-l-0 -ml-16 after:left-16'
+                },
+                active: {
+                    false: 'text-lighter bg-dark hover:bg-darker border-softest after:border-0',
+                    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-soft'
+                    ]
+                }
+            }
+        });
+        this.identifier = undefined;
+        this.navAriaLabel = 'Tabs';
+        this.tabs = undefined;
+        this.parsedTabs = [];
+        this.activeIndex = -1;
+    }
+    componentWillLoad() {
+        this.parseTabs();
+        this.setActiveIndex();
+        this.tab.emit({ tabId: this.identifier, index: 0 });
+    }
+    /**
+     * Parses the `links` prop into an array of link objects.
+     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
+     *
+     * @returns {any[]} Array of parsed link objects
+     */
+    /**
+     * Parses the `links` prop into an array of link objects.
+     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
+     *
+     * @returns {any[]} Array of parsed link objects
+     */
+    parseTabs() {
+        this.parsedTabs = parseData(this.tabs);
+    }
+    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.tab.emit({ tabId: this.identifier, 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: 'b6752f90f4c1a9501816c574baf92a0c8b95e802', id: `${this.identifier}` }, h("div", { key: '266813bd461bae3d5df1b76563b949b8dd900482', 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: 'b16c4f78ee24dace9a188097a8c5995476d7da41', 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(TabComponent, Object.assign({}, tabProps, { "aria-label": tab.label, "aria-current": index === this.activeIndex, onClick: () => this.handleTabClick(index, tab.label) }), tab.label || tab.ariaLabel));
+        }))), h("div", { key: '09c25532583d443eac47da606955955e1e66f2e8', class: "tab-panels" }, this.parsedTabs.map((_, index) => (h("div", { hidden: index !== this.activeIndex }, h("slot", { name: `panel-${index}` })))))));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "tabs": ["parseTabs"]
+    }; }
+    static get style() { return EdsTabsStyle0; }
+}, [1, "eds-tabs", {
+        "identifier": [1, "id"],
+        "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"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-tabs":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsTabs$1);
+            }
+            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.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,64 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as cva } from './index2.js';
+
+const edsTagCss = ".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-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-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-2{padding-top:0.125rem;padding-bottom:0.125rem}.py-3{padding-top:0.1875rem;padding-bottom:0.1875rem}.py-4{padding-top:0.25rem;padding-bottom:0.25rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.px-5{padding-left:0.3125rem;padding-right:0.3125rem}.px-6{padding-left:0.375rem;padding-right:0.375rem}.border-2{border-width:2px}.rounded-pill{border-radius:100px}.border-default{border:2px solid var(--black)}.text-inverse{color:var(--white)}.bg-accent{background-color:var(--green-500)}.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)}";
+const EdsTagStyle0 = edsTagCss;
+
+// Define the CVA for the tag styles
+const tagStyles = cva(['border-2 rounded-pill'], // Base classes
+{
+    variants: {
+        intent: {
+            primary: 'border-accent bg-accent',
+            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'
+        },
+        size: {
+            small: 'f-ui-05 py-2 px-4', // smaller padding
+            medium: 'f-ui-03 py-3 px-5', // moderate padding
+            large: 'f-ui-01 py-4 px-6' // larger padding
+        }
+    },
+    defaultVariants: {
+        intent: 'default',
+        size: 'small'
+    }
+});
+const EdsTag = /*@__PURE__*/ proxyCustomElement(class EdsTag extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.label = undefined;
+        this.intent = 'default';
+        this.size = 'small';
+    }
+    render() {
+        const classes = tagStyles({ intent: this.intent, size: this.size });
+        return h("span", { key: '78ef2d9ed4fc79f078df2fe418c339fc8934eef2', class: classes }, this.label);
+    }
+    static get style() { return EdsTagStyle0; }
+}, [1, "eds-tag", {
+        "label": [1],
+        "intent": [1],
+        "size": [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-timeline.d.ts

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