@ebrains/components 0.9.2-beta → 0.9.3-beta

package/dist/components/{eds-splash-screen.entry.js → eds-splash-screen2.js}

@@ -1,10 +1,15 @@
-import { r as registerInstance, a as createEvent, h, e as Host } from './index-9d277061.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './eds-logo2.js';
+import { d as defineCustomElement$1 } from './eds-spinner2.js';
 
 const edsSplashScreenCss = ".splash-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999999;background-color:var(--grey-200);display:flex;flex-direction:column;align-items:center;justify-content:center}.logo-container{width:200px;height:200px;margin-bottom:1rem}.content-container{position:relative;width:5rem;height:5rem;display:flex;align-items:center;justify-content:center}";
+const EdsSplashScreenStyle0 = edsSplashScreenCss;
 
-const EdsSplashScreen = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const EdsSplashScreen = /*@__PURE__*/ proxyCustomElement(class EdsSplashScreen extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
         this.splash = createEvent(this, "splash", 7);
         this.inverse = false;
         this.initPromise = undefined;
@@ -49,7 +54,36 @@ const EdsSplashScreen = class {
     static get watchers() { return {
         "initPromise": ["watchInitPromise"]
     }; }
-};
-EdsSplashScreen.style = edsSplashScreenCss;
+    static get style() { return EdsSplashScreenStyle0; }
+}, [1, "eds-splash-screen", {
+        "inverse": [4],
+        "initPromise": [16],
+        "isVisible": [32]
+    }, [[8, "hideSplash", "handleHideSplash"]], {
+        "initPromise": ["watchInitPromise"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-splash-screen", "eds-logo", "eds-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-splash-screen":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsSplashScreen);
+            }
+            break;
+        case "eds-logo":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "eds-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
 
-export { EdsSplashScreen as eds_splash_screen };
+export { EdsSplashScreen as E, defineCustomElement as d };

package/dist/components/eds-steps-v2.d.ts

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

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

@@ -1,11 +1,17 @@
-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$4 } from './eds-button2.js';
+import { d as defineCustomElement$3 } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$2 } from './eds-img2.js';
 
-const edsStepsV2Css = "h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}.steps{position:sticky;margin-left:16px;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}.steps-img-placeholder{width:100%;height:200px;background:linear-gradient(to bottom, #9CE142, #00C959, #00A595);}.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-gradient-stops))}.from-\\[\\#9CE142\\]{--tw-gradient-from:#9CE142 var(--tw-gradient-from-position);--tw-gradient-to:rgb(156 225 66 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-\\[\\#00C959\\]{--tw-gradient-to:rgb(0 201 89 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #00C959 var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-\\[\\#00A595\\]{--tw-gradient-to:#00A595 var(--tw-gradient-to-position)}.bg-\\[\\#00A595\\]{--tw-bg-opacity:1;background-color:rgb(0 165 149 / var(--tw-bg-opacity))}.relative{position:relative}.f-heading-02{font-family:var(--f-heading-02-fontFamily);font-weight:var(--f-heading-02-fontWeight);font-size:var(--f-heading-02-fontSize);line-height:var(--f-heading-02-lineHeight);letter-spacing:var(--f-heading-02-letterSpacing)}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.f-heading-06{font-family:var(--f-heading-06-fontFamily);font-weight:var(--f-heading-06-fontWeight);font-size:var(--f-heading-06-fontSize);line-height:var(--f-heading-06-lineHeight);letter-spacing:var(--f-heading-06-letterSpacing)}.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)}.bg-dark{background-color:var(--grey-300)}.bg-strong{background-color:var(--grey-700)}.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)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}.mb-28{margin-bottom:1.75rem}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.p-16{padding:1rem}.p-24{padding:1.5rem}.p-48{padding:3rem}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.top-2{top:0.125rem}.bottom-2{bottom:0.125rem}.left-2{left:0.125rem}.right-2{right:0.125rem}.-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))}.bg-opacity-90{--tw-bg-opacity:0.9}";
+const edsStepsV2Css = "h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}.steps{position:sticky;margin-left:16px;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}.steps-img-placeholder{width:100%;height:200px;background:linear-gradient(to bottom, #9CE142, #00C959, #00A595);}.bg-gradient-to-b{background-image:linear-gradient(to bottom, var(--tw-gradient-stops))}.from-\\[\\#9CE142\\]{--tw-gradient-from:#9CE142 var(--tw-gradient-from-position);--tw-gradient-to:rgb(156 225 66 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-\\[\\#00C959\\]{--tw-gradient-to:rgb(0 201 89 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #00C959 var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-\\[\\#00A595\\]{--tw-gradient-to:#00A595 var(--tw-gradient-to-position)}.bg-\\[\\#00A595\\]{--tw-bg-opacity:1;background-color:rgb(0 165 149 / var(--tw-bg-opacity))}.relative{position:relative}.f-heading-02{font-family:var(--f-heading-02-fontFamily);font-weight:var(--f-heading-02-fontWeight);font-size:var(--f-heading-02-fontSize);line-height:var(--f-heading-02-lineHeight);letter-spacing:var(--f-heading-02-letterSpacing)}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.f-heading-06{font-family:var(--f-heading-06-fontFamily);font-weight:var(--f-heading-06-fontWeight);font-size:var(--f-heading-06-fontSize);line-height:var(--f-heading-06-lineHeight);letter-spacing:var(--f-heading-06-letterSpacing)}.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)}.bg-dark{background-color:var(--grey-300)}.bg-strong{background-color:var(--grey-700)}.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)}.w-full{width:100%}.h-52{height:3.25rem}.h-96{height:6rem}.h-\\[200px\\]{height:200px}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.mt-16{margin-top:1rem}.mb-0{margin-bottom:0rem}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}.mb-28{margin-bottom:1.75rem}.last\\:mb-0:last-child{margin-bottom:0rem}.last\\:mt-16:last-child{margin-top:1rem}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.relative{position:relative}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.rounded{border-radius:0.25rem}.rounded-lg{border-radius:16px}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.p-16{padding:1rem}.p-24{padding:1.5rem}.p-48{padding:3rem}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.top-2{top:0.125rem}.bottom-2{bottom:0.125rem}.left-2{left:0.125rem}.right-2{right:0.125rem}.-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))}.bg-opacity-90{--tw-bg-opacity:0.9}.overflow-hidden{overflow:hidden}.space-y-8{--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}";
+const EdsStepsV2Style0 = edsStepsV2Css;
 
-const EdsStepsV2 = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const EdsStepsV2$1 = /*@__PURE__*/ proxyCustomElement(class EdsStepsV2 extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
         this.step = createEvent(this, "step", 7);
         this.handleNext = () => {
             this.activeStep = this.activeStep + 1;
@@ -59,7 +65,7 @@ const EdsStepsV2 = class {
     articleClasses() {
         return [
             this.bg ? 'bg-inverse' : 'bg-default',
-            'border-softer effect-focus-within relative rounded-lg border-2 p-16'
+            'border-softer effect-focus-within relative rounded-lg border-2'
         ].join(' ');
     }
     handleStepClick(index) {
@@ -77,15 +83,55 @@ const EdsStepsV2 = class {
     }
     render() {
         const steps = this.parsedSteps;
-        return (h("div", { key: '06d6c64cd4389908276a6b0c738700c315d693af', class: this.articleClasses() }, this.imageSrc ? (h("div", { class: "mb-28" }, h("eds-img", { src: this.imageSrc, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (h("div", { class: "mb-28 w-full bg-[#00A595] relative" }, h("div", { class: "text-inverse f-heading-04 p-24 md:p-48" }, this.message)))), this.type === 'linear' ? (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), this.activeStep === index && (h("div", { class: "content" }, h("div", { class: "f-body-02 text-lighter my-16", innerHTML: step.content }), h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', intent: "primary", class: "next-btn", onClick: this.handleNext }), h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index === 0, "extra-class": index === 0 ? 'hidden' : 'ml-8 block' })))))))) : (
+        return (h("div", { key: 'e86620aed9aafbf0c8e0cde0230b2147df952379', class: this.articleClasses() }, this.imageSrc ? (h("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, h("eds-img", { src: this.imageSrc, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (h("div", { class: "w-full bg-[#00A595] rounded-t-lg border-2" }, h("div", { class: "p-24" }, h("span", { class: "text-inverse f-heading-04 " }, this.message))))), h("div", { key: '773e51621fbfbc7b828d196d1e64a9752d02e5a4', class: "p-8" }, this.type === 'linear' ? (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step space-y-8", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), this.activeStep === index && (h("div", { class: "content" }, h("div", { class: "f-body-02 text-lighter mt-16", innerHTML: step.content }), h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', intent: "primary", class: "next-btn", onClick: this.handleNext }), h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index === 0, "extra-class": index === 0 ? 'hidden' : 'ml-8 block' })))))))) : (
         // Static mode: show all steps with their content.
-        h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), h("div", { class: "content" }, h("div", { class: "f-body-02 text-lighter my-16", innerHTML: step.content })))))))));
+        h("div", { class: "steps space-y-8" }, steps.map((step, index) => (h("div", { class: "step", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), h("div", { class: "content" }, h("div", { class: "f-body-02 text-lighter mt-16", innerHTML: step.content }))))))))));
     }
-    get el() { return getElement(this); }
+    get el() { return this; }
     static get watchers() { return {
         "activeStep": ["activeStepChanged"]
     }; }
-};
-EdsStepsV2.style = edsStepsV2Css;
+    static get style() { return EdsStepsV2Style0; }
+}, [1, "eds-steps-v2", {
+        "steps": [1],
+        "type": [1],
+        "imageSrc": [1, "image-src"],
+        "bg": [4],
+        "message": [1],
+        "activeStep": [32]
+    }, undefined, {
+        "activeStep": ["activeStepChanged"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-steps-v2", "eds-button", "eds-icon-wrapper", "eds-img"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-steps-v2":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsStepsV2$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-img":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const EdsStepsV2 = EdsStepsV2$1;
+const defineCustomElement = defineCustomElement$1;
 
-export { EdsStepsV2 as eds_steps_v2 };
+export { EdsStepsV2, defineCustomElement };

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

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

package/dist/components/eds-steps.js

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

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 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,57 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const edsSwitchCss = ":host{display:inline-block}.switch-container{display:inline-flex;align-items:center}.switch-label{font-size:14px;margin:0 8px}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)}";
+const EdsSwitchStyle0 = edsSwitchCss;
+
+const EdsSwitch$1 = /*@__PURE__*/ proxyCustomElement(class EdsSwitch extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.toggle = createEvent(this, "toggle", 7);
+        this.toggleSwitch = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.checked = !this.checked;
+            this.toggle.emit(this.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: 'ef70db7a5ed4f8e8db7e1a9e94334a3686ec1d0e', class: "switch-container" }, this.labelOff && h("span", { key: '4a18de129ba0b4e643a0929b6fc797b7bc35cb4c', class: "switch-label switch-label--off" }, this.labelOff), h("button", { key: '2d75656fadf36a38269d361fef176e243e1291c2', 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: '71bd3c8c042ac337c1392977c27e8f4ccde5e79f', class: "switch-handle" })), this.labelOn && h("span", { key: '7cfa0b1f805271c9281853a872cedf93db7e07d8', class: "switch-label switch-label--on" }, this.labelOn)));
+    }
+    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: '9ac7ad4f02237c02eaf5d3b351ded21bce29bd6c' }, this.searchEnabled && (h("div", { key: '1cecf9a9089391c3bce72dd53a6f5ffa92692661' }, 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: '435bbfd0a4dd3ddd0a7766863cdd8c2eaf41eb8f', class: "mt-20" }, h("table", { key: '4785490532015b7069be068e80135220f37c3955', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: '8a99a961cf350bca26b1f73b8ffd6c8e1c48378f' }, h("tr", { key: 'a4ee04e342687830e905a3bd5217e53e513f0167', 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: '3c764ac7137d1b21f45003c6df5324e7d0db749f' }, 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: '98a1179b45fbc1b2f079825c899410ef4faf8c45', class: "mt-20" }, h("eds-pagination", { key: '662c479139658ea7f3d2a3955c77e24d44dd6e74', 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;