@ebrains/components 0.9.3-beta → 1.1.0

package/dist/cjs/eds-icon-youtube.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f63169d.js');
+const index = require('./index-88c8039f.js');
 const youtube = require('./youtube-c238a461.js');
 
 const EdsIconYoutube = class {
@@ -11,7 +11,7 @@ const EdsIconYoutube = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: '2236f8f5ede15d7eef54f2fd4fe6ca81c996166f', class: this.class, innerHTML: youtube.youtube });
+        return index.h("span", { key: '0a6abd6b62e24c07b4338f0f1f6febbec876791f', class: this.class, innerHTML: youtube.youtube });
     }
 };
 

package/dist/cjs/eds-matomo-notice.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f63169d.js');
-const analytics = require('./analytics-d8fb3fdd.js');
+const index = require('./index-88c8039f.js');
+const analytics = require('./analytics-28713bf7.js');
 
 const edsMatomoNoticeCss = ".fixed{position:fixed}.absolute{position:absolute}.w-full{width:100%}.bottom-0{bottom:0rem}.bottom-4{bottom:0.25rem}.p-4{padding:0.25rem}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.z-10{z-index:10}.z-\\[999999\\]{z-index:999999}.left-0{left:0rem}.left-1\\/2{left:50%}.grow{flex-grow:1}.-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))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex{display:flex}.gap-12{gap:0.75rem}.gap-20{gap:1.25rem}.gap-4{gap:0.25rem}@media (min-width: 750px){.md\\:left-1\\/2{left:50%}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:-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))}.md\\:-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))}}";
 const EdsMatomoNoticeStyle0 = edsMatomoNoticeCss;
@@ -96,14 +96,16 @@ const EdsMatomoNotice = class {
         this.consent.emit('out');
     }
     noThanks() {
+        analytics.matomoOptOut();
         localStorage.setItem(`${window.location.host}-matomo-consent-given`, 'out');
         this.hideNotice();
+        this.consent.emit('out');
     }
-    deferDecision() {
-        sessionStorage.setItem(this.getStorageKey(), 'true');
-        this.hideNotice();
-        this.consent.emit('defer');
-    }
+    /*private deferDecision() {
+      sessionStorage.setItem(this.getStorageKey(), 'true');
+      this.hideNotice();
+      this.consent.emit('defer');
+    }*/
     keepMeIn() {
         this.hideNotice();
     }
@@ -114,7 +116,7 @@ const EdsMatomoNotice = class {
         if (!this.showNotice) {
             return null;
         }
-        return (index.h("div", { class: "fixed bottom-0 p-8 z-[999999] grow md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 justify-center" }, index.h("eds-accordion", { title: this.heading, description: this.hasCookieConsent() ? this.optOutMessage : this.description, switchBg: true, expanded: true }, this.hasCookieConsent() ? (index.h("div", { class: "flex items-center gap-4" }, this.optedOut() ? (index.h("eds-button", { intent: "primary", label: "Opt me in again", "aria-label": "Opt me in again", onClick: () => this.optInAnalytics() })) : (index.h("eds-button", { intent: "primary", label: "Keep Me In", "aria-label": "Keep Me In", onClick: () => this.keepMeIn() })), index.h("eds-button", { intent: "ghostInverse", label: "Opt-out", "aria-label": "Opt-out from analytics", onClick: () => this.optOutAnalytics() }))) : (index.h("div", { class: "flex items-center gap-4" }, index.h("eds-button", { intent: "primary", label: "I agree", "aria-label": "Opt-in for analytics", onClick: () => this.optInAnalytics() }), index.h("eds-button", { intent: "ghost", label: "No, thanks", "aria-label": "Opt-out from analytics", onClick: () => this.noThanks() }), index.h("eds-button", { intent: "ghost", label: "Ask me later", "aria-label": "Defer analytics decision", onClick: () => this.deferDecision() }))))));
+        return (index.h("div", { class: "fixed bottom-0 p-8 z-[999999] grow md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 justify-center" }, index.h("eds-accordion", { title: this.heading, description: this.hasCookieConsent() ? this.optOutMessage : this.description, switchBg: true, expanded: true }, this.hasCookieConsent() ? (index.h("div", { class: "flex items-center gap-4" }, this.optedOut() ? (index.h("eds-button", { intent: "primary", label: "Opt me in again", "aria-label": "Opt me in again", onClick: () => this.optInAnalytics() })) : (index.h("eds-button", { intent: "primary", label: "Keep Me In", "aria-label": "Keep Me In", onClick: () => this.keepMeIn() })), index.h("eds-button", { intent: "ghostInverse", label: "Opt-out", "aria-label": "Opt-out from analytics", onClick: () => this.optOutAnalytics() }))) : (index.h("div", { class: "flex items-center gap-4" }, index.h("eds-button", { intent: "primary", label: "I agree", "aria-label": "Opt-in for analytics", onClick: () => this.optInAnalytics() }), index.h("eds-button", { intent: "ghost", label: "No, thanks", "aria-label": "Opt-out from analytics", onClick: () => this.noThanks() }))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/eds-pie.cjs.entry.js

@@ -0,0 +1,106 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-88c8039f.js');
+
+const edsPieCss = ".relative{position:relative}.absolute{position:absolute}.inline-block{display:inline-block}.rounded-full{border-radius:9999px}.overflow-hidden{overflow:hidden}.bg-inverse{background-color:var(--white)}.bg-current{background-color:currentColor}.bg-dark{background-color:var(--grey-300)}.bg-darker{background-color:var(--grey-400)}.bg-default{background-color:var(--grey-200)}.bg-strong{background-color:var(--grey-700)}.bg-strongest{background-color:var(--black)}.inset-0{inset:0rem}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.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-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)}.text-default{color:var(--black)}.w-8{width:0.5rem}.h-8{height:0.5rem}.mr-4{margin-right:0.25rem}:host{display:block}.wrapper{display:flex;align-items:center;justify-content:center;height:100%}.pie-chart{overflow:visible}.slice-label{font-size:var(--font-size-chart-label);font-weight:var(--font-weight-chart-label);fill:var(--color-text);pointer-events:none}.legend{list-style:none;margin:0;padding:0 0 0 1rem}.legend-item{display:flex;align-items:center;margin-bottom:0.5rem;outline:none}.legend-item:focus{outline:2px dashed var(--color-primary)}.legend-swatch{width:1rem;height:1rem;border-radius:50%;margin-right:0.5rem}.legend-label{font-size:var(--font-size-base);color:var(--color-text)}";
+const EdsPieStyle0 = edsPieCss;
+
+const EdsPie = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.size = 200;
+        this.slices = [];
+        this.thickness = 1;
+        this.display = 'value';
+        this.legend = true;
+        this.colorScheme = 'semantic';
+    }
+    parseSlices() {
+        if (typeof this.slices === 'string') {
+            try {
+                return JSON.parse(this.slices);
+            }
+            catch (_a) {
+                // eslint-disable-next-line
+                console.warn('eds-pie: invalid slices JSON');
+            }
+        }
+        return Array.isArray(this.slices) ? this.slices : [];
+    }
+    polarToCartesian(cx, cy, r, angle) {
+        const rad = (angle - 90) * (Math.PI / 180);
+        return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
+    }
+    describeArc(x, y, r, startAngle, endAngle) {
+        const start = this.polarToCartesian(x, y, r, endAngle);
+        const end = this.polarToCartesian(x, y, r, startAngle);
+        const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
+        return [`M ${start.x} ${start.y}`, `A ${r} ${r} 0 ${largeArcFlag} 0 ${end.x} ${end.y}`, `L ${x} ${y}`, 'Z'].join(' ');
+    }
+    render() {
+        const raw = this.parseSlices();
+        if (raw.length > EdsPie.MAX_SLICES) {
+            // eslint-disable-next-line
+            console.warn(`eds-pie: too many slices (${raw.length}), results may overlap.`);
+        }
+        const total = raw.reduce((sum, s) => sum + s.value, 0) || 1;
+        const palette = [...EdsPie.PALETTES[this.colorScheme]];
+        const sorted = [...raw].sort((a, b) => b.value - a.value);
+        let cumulative = 0;
+        const processed = sorted.map((s) => {
+            const angle = (s.value / total) * 360;
+            const start = cumulative, end = cumulative + angle;
+            cumulative = end;
+            const color = s.color || palette.shift() || 'var(--color-chart-neutral-1)';
+            return Object.assign(Object.assign({}, s), { start, end, color });
+        });
+        const diameter = this.size;
+        const radius = diameter / 2;
+        // clamp into [0.5, 1]
+        const tClamped = Math.min(Math.max(this.thickness, 0.5), 1);
+        const innerRadius = radius * (1 - tClamped);
+        const outerRadius = radius;
+        // **replace** the previous labelRadius line with this:
+        const labelRadius = (radius + innerRadius) / 2;
+        // Build ARIA description
+        const ariaLabel = processed
+            .map((s) => `${s.label}: ${this.display === 'percent' ? `${Math.round((s.value / total) * 100)}%` : s.value}`)
+            .join(', ');
+        return (index.h(index.Host, null, index.h("div", { class: "wrapper" }, index.h("svg", { width: diameter, height: diameter, role: "img", "aria-label": `Pie chart: ${ariaLabel}`, class: "pie-chart" }, index.h("title", null, "Pie chart"), index.h("g", null, processed.map((s) => (index.h("path", { key: s.id, d: this.describeArc(radius, radius, outerRadius, s.start, s.end), fill: s.color }))), innerRadius > 0 && index.h("circle", { cx: radius, cy: radius, r: innerRadius, fill: "var(--white)" }), processed.map((s) => {
+            const midAngle = s.start + (s.end - s.start) / 2;
+            const { x, y } = this.polarToCartesian(radius, radius, labelRadius, midAngle);
+            const text = this.display === 'percent' ? `${Math.round((s.value / total) * 100)}%` : String(s.value);
+            return (index.h("text", { key: s.id, x: x, y: y, class: "f-ui-02", "text-anchor": "middle", "alignment-baseline": "middle" }, text));
+        }))), this.legend && (index.h("ul", { class: "legend", role: "list" }, processed.map((s) => (index.h("li", { key: s.id, role: "listitem", tabindex: "0", class: "legend-item" }, index.h("span", { class: "legend-swatch", style: { backgroundColor: s.color } }), index.h("span", { class: "legend-label" }, s.label)))))))));
+    }
+};
+EdsPie.MAX_SLICES = 9;
+EdsPie.PALETTES = {
+    semantic: [
+        'var(--color-chart-accent)',
+        'var(--color-chart-strong)',
+        'var(--color-chart-accent-dark)',
+        'var(--color-chart-lighter)',
+        'var(--color-chart-accent-light)',
+        'var(--color-chart-lightest)',
+        'var(--color-chart-accent-lighter)',
+        'var(--color-chart-darker)',
+        'var(--color-chart-accent-lightest)'
+    ],
+    mono: [
+        'var(--grey-700)',
+        'var(--grey-500)',
+        'var(--grey-300)',
+        'var(--grey-100)',
+        'var(--grey-800)',
+        'var(--grey-600)',
+        'var(--grey-400)',
+        'var(--grey-200)',
+        'var(--grey-900)'
+    ]
+};
+EdsPie.style = EdsPieStyle0;
+
+exports.eds_pie = EdsPie;

package/dist/cjs/eds-progress-bar.cjs.entry.js

@@ -2,26 +2,53 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f63169d.js');
+const index = require('./index-88c8039f.js');
 
-const edsProgressBarCss = ".w-full{width:100%}.h-full{height:100%}.bg-default{background-color:var(--grey-200)}.rounded-lg{border-radius:16px}.h-24{height:1.5rem}.border{border-width:1px}.border-softer{border:2px solid rgba(0, 0, 0, .1 )}.overflow-hidden{overflow:hidden}.bg-accent{background-color:var(--green-500)}.bg-\\[\\#0034CB\\]{--tw-text-opacity:1;background-color:rgb(0 52 203 / var(--tw-text-opacity))}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.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)}";
+const edsProgressBarCss = ".w-full{width:100%}.h-full{height:100%}.bg-default{background-color:var(--grey-200)}.rounded-lg{border-radius:16px}.h-24{height:1.5rem}.border{border-width:1px}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.overflow-hidden{overflow:hidden}.bg-accent{background-color:var(--green-500)}.bg-\\[\\#0034CB\\]{--tw-text-opacity:1;background-color:rgb(0 52 203 / var(--tw-text-opacity))}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.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)}.absolute{position:absolute}.relative{position:relative}.z-0{z-index:0}.z-10{z-index:10}.inset-0{inset:0rem}.pointer-events-none{pointer-events:none}";
 const EdsProgressBarStyle0 = edsProgressBarCss;
 
 const EdsProgressBar = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.value = 0;
+        this.rounded = true;
     }
     /**
      * Method to update the progress value externally.
      * @param newValue The new progress value (0-100).
      */
     async updateValue(newValue) {
-        this.value = Math.min(100, Math.max(0, newValue)); // Clamp value between 0 and 100
+        this.value = Math.min(100, Math.max(0, newValue)); // Clamp 0–100
     }
     render() {
-        const progressValue = this.value;
-        return (index.h("div", { key: '0f47fedbf9d44887f65b399e184215f0937b1df1', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden" }, index.h("div", { key: 'a2d095d778842c969832ea6b1ba7f7ef917d1390', class: `inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02`, style: { width: `${progressValue}%` } }, progressValue, "%")));
+        const progressValue = Math.min(100, Math.max(0, this.value));
+        // Outer container classes (conditionally rounded)
+        const outerClasses = [
+            'outer',
+            'w-full',
+            'h-24',
+            'bg-default',
+            'border',
+            'border-softer',
+            'overflow-hidden',
+            this.rounded ? 'rounded-lg' : '',
+            'relative'
+        ]
+            .filter(Boolean)
+            .join(' ');
+        // Fill bar classes (conditionally rounded only when >0)
+        const fillClasses = [
+            'inner',
+            'h-full',
+            'transition-all',
+            'duration-300',
+            'bg-accent',
+            progressValue > 0 && this.rounded ? 'rounded-lg' : '',
+            'z-0'
+        ]
+            .filter(Boolean)
+            .join(' ');
+        return (index.h("div", { key: '3360c1a9e61c83fee5312d007f6d2965a8983eba', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, index.h("div", { key: '7210dc5931f08626b286c30ae790a3a864533632', class: fillClasses, style: { width: `${progressValue}%` } }), index.h("div", { key: '7586cd593b4e851f4605ad33b96781841ee0b1aa', class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, index.h("span", { key: '21fa3de543e5e717ed4fd76c689aa47c3fa6a853', class: "text-default f-body-02" }, progressValue, "%"))));
     }
 };
 EdsProgressBar.style = EdsProgressBarStyle0;

package/dist/cjs/eds-rating.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f63169d.js');
+const index = require('./index-88c8039f.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;
@@ -49,7 +49,7 @@ const EdsRating = class {
         this.rating.emit(rating);
     }
     render() {
-        return (index.h("div", { key: 'd1650c37f02bf467f888d0afd0a025198bc0eedc', role: "radiogroup", class: "stars flex space-x-1 my-8" }, Array.from({ length: this.ratingCount }, (_, index$1) => {
+        return (index.h("div", { key: '6686575f0b8b9017bf19b105208f6adbfd46dabd', role: "radiogroup", class: "stars flex space-x-1 my-8" }, Array.from({ length: this.ratingCount }, (_, index$1) => {
             const starRating = index$1 + 1;
             const isSelected = starRating <= this.selectedRating;
             // Use the mapping text if available; otherwise, fall back to a generic label.

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f63169d.js');
+const index = require('./index-88c8039f.js');
 
 const edsSectionCoreCss = "";
 const EdsSectionCoreStyle0 = edsSectionCoreCss;
@@ -16,7 +16,7 @@ const EdsSectionCore = class {
     }
     render() {
         const TagType = this.tag; // Set dynamic tag type (div or section)
-        return (index.h(TagType, { key: 'f07162204271dca0f1ec8a3d309ab9d38a9fff4f' }, index.h("eds-section-heading", { key: 'c4db2a67151fcec22306f624b071725518292e65', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), index.h("slot", { key: 'e610f4777f1b334e20482862504085f5317a63df' })));
+        return (index.h(TagType, { key: '43f8d599041ae0c9761988fdec4872ec4a8ca037' }, index.h("eds-section-heading", { key: 'd120ddd851a0485e2edb43e2a6f508a661f35c07', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), index.h("slot", { key: '9818b82a3eebcb741f5bccc9781e4212f2c5fa3d' })));
     }
 };
 EdsSectionCore.style = EdsSectionCoreStyle0;
@@ -46,12 +46,12 @@ const EdsSectionHeading = class {
     render() {
         const TagType = this.tag; // Dynamically set tag type for the container
         const HeadingTag = this.headingLevel; // Dynamically set heading level
-        return (index.h(TagType, { key: 'efa6dd7e228db2b86961efdff9b5dd9729a1a24b', class: {
+        return (index.h(TagType, { key: '740ed8b3208e07091a1f4c79888e172dec33773a', class: {
                 'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8': true,
                 container: this.withContainer,
                 'pt-48': this.spacingLarge,
                 'pt-28': !this.spacingLarge
-            } }, index.h(HeadingTag, { key: 'dd50f0fe3baf084c71dc4c8fa745484645a58f76', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, index.h(HeadingTag, { key: '4d4ceef35b7cb06bfbff2fdae47e66dd7ac10c49', class: this.getHeadingClass() }, this.sectionTitle)));
     }
 };
 

package/dist/cjs/eds-spinner.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f63169d.js');
+const index = require('./index-88c8039f.js');
 
 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;
@@ -46,7 +46,7 @@ const EdsSpinner = class {
                 alignItems: 'center',
                 justifyContent: 'center'
             };
-        return (index.h(index.Host, { key: '77f17386e37b3dae21c2893dab53ef046d74b8fb' }, index.h("div", { key: 'c9420f866d61331901df7d6d681d09f75e31846c', class: "spinner-overlay", style: overlayStyle }, index.h("span", { key: '83497de6228b75fad77225a1b6fee9a614d68fe4', class: "spinner", style: spinnerStyle }))));
+        return (index.h(index.Host, { key: 'f687ccbbb05840b7699202f3758ec4a8d0de1bc4' }, index.h("div", { key: '4bb5c697f1ccd90d2d65d519fcfb3ec809b106ac', class: "spinner-overlay", style: overlayStyle }, index.h("span", { key: 'a07722d9ee9c94d03d9766a4b297a498998c00be', class: "spinner", style: spinnerStyle }))));
     }
 };
 EdsSpinner.style = EdsSpinnerStyle0;

package/dist/cjs/eds-splash-screen.cjs.entry.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-88c8039f.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) {
+        index.registerInstance(this, hostRef);
+        this.splash = index.createEvent(this, "splash", 7);
+        this.inverse = false;
+        this.initPromise = undefined;
+        this.isVisible = true;
+    }
+    // When the component loads, check if there is a promise.
+    componentWillLoad() {
+        if (this.initPromise) {
+            this.handleInitPromise(this.initPromise);
+        }
+    }
+    // Watch for changes on initPromise.
+    async watchInitPromise(newPromise) {
+        if (newPromise) {
+            this.handleInitPromise(newPromise);
+        }
+    }
+    async handleInitPromise(promise) {
+        try {
+            await promise;
+            //console.log('Promises resolved');
+            this.hideSplash();
+        }
+        catch (error) {
+            //console.error('Initialization error:', error);
+            this.splash.emit({ type: 'error', message: error.message || 'Unknown error' });
+        }
+    }
+    handleHideSplash() {
+        this.hideSplash();
+    }
+    hideSplash() {
+        this.isVisible = false;
+        this.splash.emit({ type: 'hidden', message: 'Splash screen hidden successfully' });
+    }
+    render() {
+        if (!this.isVisible) {
+            return null;
+        }
+        return (index.h(index.Host, null, index.h("div", { class: "splash-overlay", style: { background: this.inverse ? 'black' : 'var(--grey-200)' } }, index.h("div", { class: "logo-container" }, this.inverse ? (index.h("eds-logo", { orientation: "vertical", type: "color-white" })) : (index.h("eds-logo", { orientation: "vertical", type: "color" }))), index.h("div", { class: "content-container" }, index.h("eds-spinner", { size: "1rem", thickness: "3px", "border-color": "var(--grey-400)", "bottom-color": "var(--grey-900)", background: "none", fullscreen: false })))));
+    }
+    static get watchers() { return {
+        "initPromise": ["watchInitPromise"]
+    }; }
+};
+EdsSplashScreen.style = EdsSplashScreenStyle0;
+
+exports.eds_splash_screen = EdsSplashScreen;

package/dist/cjs/eds-switch.cjs.entry.js

@@ -2,21 +2,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-2f63169d.js');
+const index = require('./index-88c8039f.js');
+const analytics = require('./analytics-28713bf7.js');
 
-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 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 = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.toggle = index.createEvent(this, "toggle", 7);
+        this.uiswitch = index.createEvent(this, "uiswitch", 7);
         this.toggleSwitch = () => {
             if (this.disabled) {
                 return;
             }
             this.checked = !this.checked;
-            this.toggle.emit(this.checked);
+            this.uiswitch.emit(this.checked);
+            analytics.sendAnalytics({
+                category: 'ui-component',
+                tag: this.el.tagName.toLowerCase(),
+                name: this.checked ? this.labelOn : this.labelOff || '',
+                action: 'checked'
+            });
         };
         this.checked = false;
         this.disabled = false;
@@ -26,12 +33,13 @@ const EdsSwitch = class {
     render() {
         // Compute an accessible name based on state.
         const accessibleLabel = this.labelOn || this.labelOff ? (this.checked ? this.labelOn : this.labelOff) : 'Toggle switch';
-        return (index.h("div", { key: 'ef70db7a5ed4f8e8db7e1a9e94334a3686ec1d0e', class: "switch-container" }, this.labelOff && index.h("span", { key: '4a18de129ba0b4e643a0929b6fc797b7bc35cb4c', class: "switch-label switch-label--off" }, this.labelOff), index.h("button", { key: '2d75656fadf36a38269d361fef176e243e1291c2', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": accessibleLabel, class: {
+        return (index.h("div", { key: '385c1463b11e83ff5b982218e0f28c54299210fd', class: "switch-container" }, this.labelOff && index.h("span", { key: 'f7e825a34487a1cec466b5172d77c2802029607c', class: "switch-label switch-label--off mr-8" }, this.labelOff), index.h("button", { key: 'fd1e8ffab675ee79edc6b99de4dfff42545d91af', 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 }, index.h("span", { key: '71bd3c8c042ac337c1392977c27e8f4ccde5e79f', class: "switch-handle" })), this.labelOn && index.h("span", { key: '7cfa0b1f805271c9281853a872cedf93db7e07d8', class: "switch-label switch-label--on" }, this.labelOn)));
+            }, onClick: this.toggleSwitch, disabled: this.disabled }, index.h("span", { key: '0d185957ffe2577ffc8798c298820c84c838a2a4', class: "switch-handle" })), this.labelOn && index.h("span", { key: 'f12b752ff94a363bb9593bd00cf43e7110e4399e', class: "switch-label switch-label--on ml-8" }, this.labelOn)));
     }
+    get el() { return index.getElement(this); }
 };
 EdsSwitch.style = EdsSwitchStyle0;