@ebrains/components 0.5.0-alpha.0 → 0.7.0-alpha.0

package/dist/components/eds-rating.js

@@ -1,87 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './eds-button2.js';
-import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
-
-const edsRatingCss = ":host{display:inline-block;font-size:2rem}.stars{display:flex;gap:0.25rem;cursor:pointer}.star{color:var(--star-empty-color, #ccc);transition:color 0.2s ease-in-out}.star.filled{color:var(--green-500);}.star:hover,.star.filled:hover{transform:scale(1.2)}.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-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}";
-const EdsRatingStyle0 = edsRatingCss;
-
-const EdsRating$1 = /*@__PURE__*/ proxyCustomElement(class EdsRating extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.ratingChange = createEvent(this, "ratingChange", 7);
-        this.stars = 5;
-        this.label = 'Rate your experience';
-        this.textMapping = ['Very Poor', 'Poor', 'Average', 'Good', 'Excellent'];
-        this.selectedRating = 0;
-    }
-    /**
-     * Parses the `textMapping` prop into an array of strings.
-     */
-    get parsedMappings() {
-        if (typeof this.textMapping === 'object') {
-            return this.textMapping;
-        }
-        else if (typeof this.textMapping === 'string') {
-            try {
-                return JSON.parse(this.textMapping);
-            }
-            catch (e) {
-                //console.error('Error parsing textMapping prop:', e);
-                return [];
-            }
-        }
-        return [];
-    }
-    /**
-     * Handles the click event on a star.
-     * @param rating - The selected rating value.
-     */
-    handleClick(rating) {
-        this.selectedRating = rating;
-        this.ratingChange.emit(rating);
-    }
-    render() {
-        return (h("div", { key: 'b613863ad54ae9b381a5741bce4b188eff806ef0', class: "relative w-full flex flex-col" }, h("span", { key: 'f35cef9c3691aab73995e2ca6e2554cc19bae837', class: "f-heading-05" }, this.label), h("div", { key: '37082eb4bbadf5c211c197f3f81501d0b0e61404', role: "radiogroup", "aria-label": this.label, class: "stars flex space-x-2" }, Array.from({ length: this.stars }, (_, index) => {
-            const starRating = index + 1;
-            const isSelected = starRating <= this.selectedRating;
-            // Use the mapping text if available; otherwise, fall back to a generic label.
-            const mappingText = this.parsedMappings[starRating - 1] || `Rating ${starRating}`;
-            return (h("eds-button", { label: "\u2605", role: "radio", "aria-checked": isSelected ? 'true' : 'false', "aria-label": mappingText, onClick: () => this.handleClick(starRating), tabIndex: this.selectedRating === 0 && index === 0 ? 0 : isSelected ? 0 : -1, intent: isSelected ? 'primary' : 'ghost', size: "small", "extra-class": "p-2" // Optional padding or styling for the star button
-            }));
-        })), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: '61b4b92e476cfa0dd9bf405cb080dedd995ff9c6', class: "f-ui-04 text-lighter mt-4" }, this.parsedMappings[this.selectedRating - 1]))));
-    }
-    static get style() { return EdsRatingStyle0; }
-}, [1, "eds-rating", {
-        "stars": [2],
-        "label": [1],
-        "textMapping": [1, "text-mapping"],
-        "selectedRating": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["eds-rating", "eds-button", "eds-icon-wrapper"];
-    components.forEach(tagName => { switch (tagName) {
-        case "eds-rating":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, EdsRating$1);
-            }
-            break;
-        case "eds-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "eds-icon-wrapper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
+import { E as EdsRating$1, d as defineCustomElement$1 } from './eds-rating2.js';
 
 const EdsRating = EdsRating$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/eds-rating2.js

@@ -0,0 +1,91 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './eds-button2.js';
+import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
+
+const edsRatingCss = ":host{display:inline-block}.block{display:block}.stars{display:flex;gap:0.25rem;cursor:pointer}.star{color:var(--star-empty-color, #ccc);transition:color 0.2s ease-in-out}.star.filled{color:var(--green-500);}.star:hover,.star.filled:hover{transform:scale(1.2)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.my-4{margin-top:0.25rem;margin-bottom:0.25rem}.my-8{margin-top:0.5rem;margin-bottom:0.5rem}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.0625rem * var(--tw-space-x-reverse));margin-left:calc(0.0625rem * calc(1 - var(--tw-space-x-reverse)))}";
+const EdsRatingStyle0 = edsRatingCss;
+
+const EdsRating = /*@__PURE__*/ proxyCustomElement(class EdsRating extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.rating = createEvent(this, "rating", 7);
+        this.ratingType = 'star';
+        this.ratingCount = 5;
+        this.selectedRating = 0;
+    }
+    /**
+     * Lifecycle method that runs when the component has fully loaded.
+     * It emits a custom event for each `eds-button` element contained within the breadcrumb.
+     */
+    componentDidLoad() {
+        const btns = this.el.shadowRoot.querySelectorAll('eds-button');
+        btns.forEach((btn) => {
+            this.emitContext(btn);
+        });
+    }
+    /**
+     * Emits a custom event called `parentContext` for a given link element.
+     * This event provides context information about the breadcrumb component.
+     *
+     * @param btnElement - The link element to which the event will be dispatched.
+     */
+    emitContext(btnElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.el.tagName.toLowerCase(),
+                identifier: this.selectedRating
+            }
+        });
+        btnElement.dispatchEvent(event);
+    }
+    /**
+     * Handles the click event on a star.
+     * @param rating - The selected rating value.
+     */
+    handleClick(rating) {
+        this.selectedRating = rating;
+        this.rating.emit(rating);
+    }
+    render() {
+        return (h("div", { key: '2ab4f3dbc4cc3dd5272143e99c67b23086b03e18', role: "radiogroup", class: "stars flex space-x-1 my-8" }, Array.from({ length: this.ratingCount }, (_, index) => {
+            const starRating = index + 1;
+            const isSelected = starRating <= this.selectedRating;
+            // Use the mapping text if available; otherwise, fall back to a generic label.
+            return (h("eds-button", { icon: this.ratingType, role: "radio", "aria-checked": isSelected ? 'true' : 'false', "aria-label": this.ratingType, onClick: () => this.handleClick(starRating), tabIndex: this.selectedRating === 0 && index === 0 ? 0 : isSelected ? 0 : -1, intent: isSelected ? 'primary' : 'ghost', size: "large", "extra-class": "p-2" // Optional padding or styling for the star button
+            }));
+        })));
+    }
+    get el() { return this; }
+    static get style() { return EdsRatingStyle0; }
+}, [1, "eds-rating", {
+        "ratingType": [1, "rating-type"],
+        "ratingCount": [2, "rating-count"],
+        "selectedRating": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-rating", "eds-button", "eds-icon-wrapper"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-rating":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsRating);
+            }
+            break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { EdsRating as E, defineCustomElement as d };

package/dist/components/eds-section-core2.js

@@ -14,7 +14,7 @@ const EdsSectionCore = /*@__PURE__*/ proxyCustomElement(class EdsSectionCore ext
     }
     render() {
         const TagType = this.tag; // Set dynamic tag type (div or section)
-        return (h(TagType, { key: 'e7ef9e7a589d8cde8aa54d73dff8421d74a7d0ac' }, h("eds-section-heading", { key: '379c6bc644612d3e0865ce2acd8eacb4d67c7769', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '5828a28c2c8ac65fbc56652f733f148a0d0198b7' })));
+        return (h(TagType, { key: '39c4280156ca46b83538de499baa9b152360b1b4' }, h("eds-section-heading", { key: '34da742e606f0e9bb485faac8aba1519eccc8934', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '517b8ecc112565e8c6bb0bf85b02525deaa6f9df' })));
     }
     static get style() { return EdsSectionCoreStyle0; }
 }, [4, "eds-section-core", {

package/dist/components/eds-section-heading2.js

@@ -26,12 +26,12 @@ const EdsSectionHeading = /*@__PURE__*/ proxyCustomElement(class EdsSectionHeadi
     render() {
         const TagType = this.tag; // Dynamically set tag type for the container
         const HeadingTag = this.headingLevel; // Dynamically set heading level
-        return (h(TagType, { key: 'c15f83f8aaa4fb01c884fb1390965fcf9dbd61fb', class: {
+        return (h(TagType, { key: '766d3f317904f2d735b7b531cf6ad582f22084e3', 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: 'e65e13820553eefa5aec8bc9740e5e9da828ac92', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, h(HeadingTag, { key: '41a9db3f627cf93f58d14cdebf3b991be6a6facf', class: this.getHeadingClass() }, this.sectionTitle)));
     }
 }, [0, "eds-section-heading", {
         "sectionTitle": [1, "section-title"],

package/dist/components/eds-social-networks2.js

@@ -58,7 +58,7 @@ const EdsSocialNetworks = /*@__PURE__*/ proxyCustomElement(class EdsSocialNetwor
      * @returns {JSX.Element} The rendered JSX for the component.
      */
     render() {
-        return (h("div", { key: '615a7cb2c26060d2d4cde875291a081b7de12e19' }, h("p", { key: '9e19ad59fcc94508cb60cd4aafa87c3878fb2ebc', class: "f-ui-02" }, this.title), h("ul", { key: 'a4811d16447ab148a7c129f188405f3f7050df70', 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" })))))));
+        return (h("div", { key: 'd394c8ce041b7f278f61f141d2a6353db037f776' }, h("p", { key: '88e87c17f014c5ed339f1f987051c3dcba8e4c90', class: "f-ui-02" }, this.title), h("ul", { key: '50cb6587a7fd5b46643e7f80e3c6bc7e7158d55a', 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" })))))));
     }
     static get style() { return EdsSocialNetworksStyle0; }
 }, [1, "eds-social-networks", {

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

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

package/dist/components/eds-spinner.js

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

package/dist/components/eds-spinner2.js

@@ -0,0 +1,72 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const edsSpinnerCss = ":host{display:block}.spinner{box-sizing:border-box;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}";
+const EdsSpinnerStyle0 = edsSpinnerCss;
+
+const EdsSpinner = /*@__PURE__*/ proxyCustomElement(class EdsSpinner extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.size = '1rem';
+        this.thickness = '10px';
+        this.borderColor = 'var(--grey-400)';
+        this.bottomColor = 'var(--grey-900)';
+        this.background = 'var(--grey-200)';
+        this.fullscreen = false;
+    }
+    render() {
+        const spinnerStyle = Object.assign({ width: this.size, height: this.size, border: `${this.thickness} solid ${this.borderColor}`, borderBottomColor: this.bottomColor }, (!this.fullscreen && { display: 'inline-block' }));
+        // Overlay style: use fixed positioning for fullscreen,
+        // and absolute positioning for inline mode.
+        const overlayStyle = this.fullscreen
+            ? {
+                position: 'fixed',
+                top: '0',
+                left: '0',
+                width: '100vw',
+                height: '100vh',
+                zIndex: '9999999',
+                backgroundColor: this.background,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
+            }
+            : {
+                position: 'absolute',
+                top: '0',
+                left: '0',
+                width: '100%',
+                height: '100%',
+                zIndex: '1000',
+                backgroundColor: this.background,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
+            };
+        return (h(Host, { key: '1e1e4ea2734fff8a680e55ca5163e69d2000a55d' }, h("div", { key: 'acf09f69d43404f317240c0d24e644ec0d046cd7', class: "spinner-overlay", style: overlayStyle }, h("span", { key: '3728629fdff738a0b753cd499dc26052b1e3cb7b', class: "spinner", style: spinnerStyle }))));
+    }
+    static get style() { return EdsSpinnerStyle0; }
+}, [1, "eds-spinner", {
+        "size": [1],
+        "thickness": [1],
+        "borderColor": [1, "border-color"],
+        "bottomColor": [1, "bottom-color"],
+        "background": [1],
+        "fullscreen": [4]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-spinner":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsSpinner);
+            }
+            break;
+    } });
+}
+
+export { EdsSpinner as E, defineCustomElement as d };

package/dist/components/eds-splash-screen.d.ts

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

package/dist/components/eds-splash-screen.js

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

package/dist/components/eds-splash-screen2.js

@@ -0,0 +1,78 @@
+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 = /*@__PURE__*/ proxyCustomElement(class EdsSplashScreen extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.splash = createEvent(this, "splash", 7);
+        this.inverse = false;
+        this.initPromise = undefined;
+        this.isVisible = true;
+    }
+    componentWillLoad() {
+        // If an initialization promise is provided, wait for it.
+        if (this.initPromise) {
+            this.initPromise
+                .then(() => {
+                // eslint-disable-next-line
+                console.log('Promises resolved');
+                this.hideSplash();
+            })
+                .catch((error) => {
+                // eslint-disable-next-line
+                console.error('Initialization error:', error);
+                this.splash.emit({ type: 'error', message: error.message || 'Unknown error' });
+                //this.hideSplash();
+            });
+        }
+    }
+    handleHideSplash() {
+        this.hideSplash();
+    }
+    hideSplash() {
+        this.isVisible = false;
+        this.splash.emit({ type: 'hidden', message: 'Splash screen hidden successfully' });
+    }
+    render() {
+        if (!this.isVisible) {
+            return null;
+        }
+        return (h(Host, null, h("div", { class: "splash-overlay", style: { background: this.inverse ? 'black' : 'var(--grey-200)' } }, h("div", { class: "logo-container" }, this.inverse ? (h("eds-logo", { orientation: "vertical", type: "color-white" })) : (h("eds-logo", { orientation: "vertical", type: "color" }))), h("div", { class: "content-container" }, h("eds-spinner", { size: "1rem", thickness: "3px", "border-color": "var(--grey-400)", "bottom-color": "var(--grey-900)", background: "none", fullscreen: false })))));
+    }
+    static get style() { return EdsSplashScreenStyle0; }
+}, [1, "eds-splash-screen", {
+        "inverse": [4],
+        "initPromise": [16],
+        "isVisible": [32]
+    }, [[8, "hideSplash", "handleHideSplash"]]]);
+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 E, defineCustomElement as d };

package/dist/components/eds-steps.js

@@ -1,36 +1,37 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { p as parseData } from './sharedUtils.js';
 import { d as defineCustomElement$5 } from './eds-alert2.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-link2.js';
 
-const edsStepsCss = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:24px;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:1.125rem;font-weight:500;position:relative;margin-top:1em;margin-bottom:1em}.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}";
+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$1 = /*@__PURE__*/ proxyCustomElement(class EdsSteps extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.stepClick = createEvent(this, "stepClick", 7);
+        this.__attachShadow();
+        this.step = createEvent(this, "step", 7);
         this.handleNext = () => {
+            this.activeStep = this.activeStep + 1;
             if (this.activeStep < this.parsedSteps.length) {
-                this.activeStep = this.activeStep + 1;
+                this.step.emit(this.activeStep);
             }
         };
         this.handleBack = () => {
             if (this.activeStep > 0) {
                 this.activeStep = this.activeStep - 1;
+                this.step.emit(this.activeStep);
             }
         };
-        this.handleReset = () => {
-            this.activeStep = 0;
-        };
         this.steps = [];
         this.type = 'static';
         this.activeStep = 0;
     }
     handleStepClick(index) {
-        this.stepClick.emit(index);
+        this.step.emit(index);
         // In linear mode, update the active step on header click.
         if (this.type === 'linear') {
             this.activeStep = index;
@@ -40,28 +41,18 @@ const EdsSteps$1 = /*@__PURE__*/ proxyCustomElement(class EdsSteps extends HTMLE
      * Parse the JSON string into an array of steps.
      */
     get parsedSteps() {
-        if (typeof this.steps === 'string') {
-            try {
-                const stepsStr = this.steps;
-                return JSON.parse(stepsStr);
-            }
-            catch (error) {
-                //console.error('Invalid steps JSON', error);
-                return [];
-            }
-        }
-        return this.steps;
+        return parseData(this.steps);
     }
     render() {
         const steps = this.parsedSteps;
         if (this.type === 'linear') {
-            return (h("div", null, h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-28", 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" }, step.content), h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', 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' }))))))), this.activeStep === steps.length && (h("div", { class: "completed" }, h("eds-alert", { intent: "success", message: "All steps completed - you're finished!" }), h("eds-button", { label: "Start again", onClick: this.handleReset, "extra-class": "mt-4" })))));
+            return (h("div", null, h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-28", 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" }, 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' }))))))), this.activeStep === steps.length && (h("div", { class: "completed" }, h("eds-alert", { intent: "success", message: "All steps completed - you're finished!" })))));
         }
         // 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)))))));
     }
     static get style() { return EdsStepsStyle0; }
-}, [0, "eds-steps", {
+}, [1, "eds-steps", {
         "steps": [1],
         "type": [1],
         "activeStep": [32]

package/dist/components/eds-svg-repository.js

@@ -24,6 +24,9 @@ import { m as menu } from './menu.js';
 import { m as more } from './more.js';
 import { u as user } from './user.js';
 import { c as copy } from './copy.js';
+import { t as thumbsUp } from './thumbs-up.js';
+import { t as thumbsDown } from './thumbs-down.js';
+import { s as star } from './star.js';
 import { d as defineCustomElement$c } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$b } from './eds-input2.js';
 import { d as defineCustomElement$a } from './eds-input-field2.js';
@@ -297,7 +300,10 @@ const svgs = /*#__PURE__*/Object.freeze({
   search: search,
   success: success,
   warning: warning,
-  unknown: unknown
+  unknown: unknown,
+  thumbsUp: thumbsUp,
+  thumbsDown: thumbsDown,
+  star: star
 });
 
 const EdsSvgRepository$1 = /*@__PURE__*/ proxyCustomElement(class EdsSvgRepository extends HTMLElement {
@@ -327,7 +333,7 @@ const EdsSvgRepository$1 = /*@__PURE__*/ proxyCustomElement(class EdsSvgReposito
             icon: { format: 'svg' },
             name: { format: 'bold' }
         };
-        return (h("eds-table", { key: 'a7d7fa426da72e174880a300202390c1016b74df', data: JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true, "host-width": this.hostWidth }));
+        return (h("eds-table", { key: 'e4c454638f02e043a5ad466ee95558be8723d214', data: JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true, "host-width": this.hostWidth }));
     }
     get hostEl() { return this; }
 }, [1, "eds-svg-repository"]);

package/dist/components/eds-switch.js

@@ -24,11 +24,11 @@ const EdsSwitch$1 = /*@__PURE__*/ proxyCustomElement(class EdsSwitch extends HTM
     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: 'd4c727cbb562921b2bcba269e84f25c359c7061b', class: "switch-container" }, this.labelOff && h("span", { key: '90b18fff27bd21501466deb5879e5fe6ff607043', class: "switch-label switch-label--off" }, this.labelOff), h("button", { key: '8675f5d9f972d3932710fa7f9b28f74f95a83003', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": accessibleLabel, class: {
+        return (h("div", { key: '624776d666ada7b31cb8e84b08380b888451b1a5', class: "switch-container" }, this.labelOff && h("span", { key: 'ced31e91b88f4cb032744bd846811dd012cb9dcd', class: "switch-label switch-label--off" }, this.labelOff), h("button", { key: '8cb4594687313076f18f30fc26062e1440ae0ab9', 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: '26aa30a01b10419c1665b1fd58b5696a02d1504a', class: "switch-handle" })), this.labelOn && h("span", { key: '3680d67555e9193a97e129c0639b411263e070a8', class: "switch-label switch-label--on" }, this.labelOn)));
+            }, onClick: this.toggleSwitch, disabled: this.disabled }, h("span", { key: '88897b4368c337ea2dc4a017a8503171117a2070', class: "switch-handle" })), this.labelOn && h("span", { key: 'bb66f4fd1d09935598d3e9485d3cdf28e182620e', class: "switch-label switch-label--on" }, this.labelOn)));
     }
     static get style() { return EdsSwitchStyle0; }
 }, [1, "eds-switch", {

package/dist/components/eds-table2.js

@@ -1,5 +1,6 @@
 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';
@@ -52,7 +53,8 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
     }
     parseData() {
         try {
-            this.tableData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data || [];
+            this.tableData = parseData(this.data);
+            //this.tableData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data || [];
             this.totalRows = this.tableData.length;
             this.updateColumns();
             this.currentPage = 1;
@@ -65,6 +67,7 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
     }
     parseConfig() {
         try {
+            //this.parsedConfig = parseData(this.config);
             this.parsedConfig = typeof this.config === 'string' ? JSON.parse(this.config) : this.config;
         }
         catch (error) {
@@ -90,7 +93,7 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
         }
         const paginationEl = this.hostEl.shadowRoot.querySelector('eds-pagination');
         if (paginationEl && !paginationEl.hasAttribute('listener-attached')) {
-            paginationEl.addEventListener('pageChange', (event) => this.handlePageChange(event.detail));
+            paginationEl.addEventListener('page', (event) => this.handlePageChange(event.detail));
             paginationEl.setAttribute('listener-attached', 'true');
         }
     }
@@ -163,15 +166,15 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
                     ? this.hostEl.getRootNode().host.getBoundingClientRect().width
                     : 400;
         const columnWidth = visibleColumnsCount > 0 ? Math.floor((containerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
-        return (h("div", { key: '66ca59804bc8054655ed0d942104516fe4cd259b' }, this.searchEnabled && (h("div", { key: 'df7267fc443da042e4b6ff81ded5800a2213bd73' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...",
+        return (h("div", { key: 'b77c9a601d3c8c0eae3cf7754839fdf4ca9b3ad4' }, this.searchEnabled && (h("div", { key: 'a1e652ce7b75f17527b6d1c83968a3c50ee50e23' }, 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: '80ac1fcb3802f9f5d5eabe016fb7345b88908b36', class: "mt-20" }, h("table", { key: '09acf39378b1a4c8bfe40b496ec6bf71a2d761ca', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: '8b844806cfef10d1a59da54a385ee8ed6c167050' }, h("tr", { key: '1b3cff91bdaf225e9f3b337e245cd80ad4772b6a', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            onInput: (event) => this.handleSearch(event) }))), h("div", { key: 'fd3de252d0ae287cea5409c4e7f651fc557a8fc9', class: "mt-20" }, h("table", { key: '80f767759a6049fae588e150e0ff166db4bc20b4', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: 'd7c39c1b36c9e247896082647372125d7cf11680' }, h("tr", { key: 'f32ca0941e118f89934c44dcad77a27880ea9e53', 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 - 5}px` } }, column));
-        }))), h("tbody", { key: '93dfd3abd196779c288f85bb6a357ad3e9c01418' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            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: '85a9c3e55d12c6f62f0175613a4ff84e703dc4c5' }, 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 - 5}px` } }, this.renderCell(row[column], column)));
-        }))))))), this.shouldEnablePagination() && (h("div", { key: '516b65d78a9ea91060c1dfcb3306bbd3ac2c6f58', class: "mt-20" }, h("eds-pagination", { key: 'abe3a593827d99437a06e204ea9d8ef92f80aba7', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+            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: '093e13235ad0041096f05e476e6199575bdb3265', class: "mt-20" }, h("eds-pagination", { key: 'a86d91875a3847d1b4735fe76910367ed1fd7875', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     get hostEl() { return this; }
     static get watchers() { return {