@ebrains/components 2.4.0 → 3.0.0

package/dist/components/eds-nps2.js

@@ -3,7 +3,7 @@ import { d as defineCustomElement$3 } from './eds-button2.js';
 import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$1 } from './eds-input-label2.js';
 
-const edsNpsCss = ".flex{display:flex}.justify-between{justify-content:space-between}.mt-4{margin-top:0.25rem}.mt-8{margin-top:0.5rem}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.grid{display:grid}.grid-col-span-1{--container-grid-columns:1;grid-column:span 1 / span 1}.grid-cols-11{grid-template-columns:repeat(11, minmax(0, 1fr))}.grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"]>*:nth-child(n)::before{border-bottom-width:1px}.grid-cols-11[class*=\"grid-line-xfull\"]>*:nth-child(n)::before{inset-inline-start:calc(var(--inner-gutter) / -2);inset-inline-end:calc(var(--inner-gutter) / -2)}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1)::before{inset-inline-start:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+11)::before{inset-inline-end:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1):nth-last-child(-n+11)::before{border-bottom-width:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1):nth-last-child(-n+11)~*::before{border-bottom-width:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(n)::after{border-inline-end-width:1px}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+11)::after{border-inline-end-width:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(-n+11)::after{top:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+1):nth-last-child(-n+11)::after{bottom:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+1):nth-last-child(-n+11)~li::after{bottom:0}.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)}";
+const edsNpsCss = ".flex{display:flex}.justify-between{justify-content:space-between}.mt-4{margin-top:0.25rem}.mt-8{margin-top:0.5rem}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.gap-2{gap:0.125rem}.gap-4{gap:0.25rem}.grid{display:grid}.grid-col-span-1{--container-grid-columns:1;grid-column:span 1 / span 1}.grid-cols-11{grid-template-columns:repeat(11, minmax(0, 1fr))}.grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"]>*:nth-child(n)::before{border-bottom-width:1px}.grid-cols-11[class*=\"grid-line-xfull\"]>*:nth-child(n)::before{inset-inline-start:calc(var(--inner-gutter) / -2);inset-inline-end:calc(var(--inner-gutter) / -2)}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1)::before{inset-inline-start:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+11)::before{inset-inline-end:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1):nth-last-child(-n+11)::before{border-bottom-width:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1):nth-last-child(-n+11)~*::before{border-bottom-width:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(n)::after{border-inline-end-width:1px}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+11)::after{border-inline-end-width:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(-n+11)::after{top:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+1):nth-last-child(-n+11)::after{bottom:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+1):nth-last-child(-n+11)~li::after{bottom:0}.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-dark)}.flex-wrap{flex-wrap:wrap}";
 const EdsNpsStyle0 = edsNpsCss;
 
 const EdsNps = /*@__PURE__*/ proxyCustomElement(class EdsNps extends HTMLElement {
@@ -16,9 +16,8 @@ const EdsNps = /*@__PURE__*/ proxyCustomElement(class EdsNps extends HTMLElement
         this.max = 10;
         this.btnRefs = [];
         this.onSelect = (value) => {
-            this.selectedValue = value;
+            this.internalValue = value;
             this.nps.emit(value);
-            // Move focus to the selected button (like your rating component)
             requestAnimationFrame(() => {
                 var _a, _b;
                 const idx = value - this.min;
@@ -33,8 +32,7 @@ const EdsNps = /*@__PURE__*/ proxyCustomElement(class EdsNps extends HTMLElement
             }
             e.preventDefault();
             const count = this.max - this.min + 1;
-            // Derive current index from selectedValue; if none, use 0 (first)
-            let currentIdx = this.selectedValue == null ? 0 : this.selectedValue - this.min;
+            let currentIdx = this.internalValue == null ? 0 : this.internalValue - this.min;
             switch (key) {
                 case 'ArrowRight':
                     currentIdx = Math.min(count - 1, currentIdx + 1);
@@ -61,14 +59,25 @@ const EdsNps = /*@__PURE__*/ proxyCustomElement(class EdsNps extends HTMLElement
         this.leftLabel = undefined;
         this.rightLabel = undefined;
         this.selectedValue = null;
+        this.internalValue = null;
+    }
+    /**
+     * Watch for changes to the selectedValue prop and sync internal state.
+     */
+    handleSelectedValueChange(newValue) {
+        this.internalValue = newValue;
+    }
+    /**
+     * Initialize internal value from prop on component load.
+     */
+    componentWillLoad() {
+        this.internalValue = this.selectedValue;
     }
     /** Move visual highlight & roving tabindex; optionally commit selection */
     setActiveByIndex(index, commit = false) {
         var _a;
         const value = this.min + index;
-        // Update highlight so focus movement is visible (like your rating)
-        this.selectedValue = value;
-        // Focus the button host (ensure eds-button forwards focus to its inner <button>)
+        this.internalValue = value;
         const target = this.btnRefs[index];
         typeof (target === null || target === void 0 ? void 0 : target.focusInner) === 'function' ? target.focusInner() : (_a = target === null || target === void 0 ? void 0 : target.focus) === null || _a === void 0 ? void 0 : _a.call(target);
         if (commit) {
@@ -77,29 +86,28 @@ const EdsNps = /*@__PURE__*/ proxyCustomElement(class EdsNps extends HTMLElement
     }
     render() {
         const count = this.max - this.min + 1;
-        return (h("div", { key: 'ca0a63dd6554e39b78fe1c607af0fede74c692c7', class: "eds-nps" }, h("eds-input-label", { key: 'bdf231836d8c6dbd46e852753696c4b7dad577c7', id: "nps-question", name: "nps-question", label: this.question }), h("div", { key: '004ad431ca02e57c7848a4c3fd0a4ecff40b6573', id: "nps-buttons", role: "radiogroup", "aria-labelledby": "nps-question", class: "grid grid-cols-11", onKeyDown: this.handleKeyNav }, Array.from({ length: count }, (_, i) => {
+        return (h("div", { key: '932d0a62e52376c1ddaf71e8d21bf5437c2d0b9f', class: "eds-nps" }, h("eds-input-label", { key: '60f5b6849dcc53f2a0d46fa5e44499076bd46174', id: "nps-question", name: "nps-question", label: this.question }), h("div", { key: '14d032aa6dc6b2cc67189f6e11a0fc59ca420cbb', id: "nps-buttons", role: "radiogroup", "aria-labelledby": "nps-question", onKeyDown: this.handleKeyNav, class: "flex flex-wrap gap-2 my-8" }, Array.from({ length: count }, (_, i) => {
             const val = this.min + i;
-            const isSelected = val === this.selectedValue;
-            // Roving tabindex: focusable is the selected; if none selected yet, first is focusable
-            const tabIndex = isSelected || (this.selectedValue == null && i === 0) ? 0 : -1;
-            return (h("div", { class: "grid-col-span-1", key: val }, h("eds-button", { ref: (el) => (this.btnRefs[i] = el), role: "radio", "aria-checked": isSelected ? 'true' : 'false', "aria-label": `${val}`,
-                // Use onClick so keyboard activation on inner <button> works natively
-                onClick: () => this.onSelect(val), tabIndex: tabIndex, intent: isSelected ? 'primary' : 'ghost', "extra-class": "!block !px-0 w-full", label: `${val}`,
-                // Optional: keep highlight in sync when tabbing into the group
-                onFocus: () => {
-                    // Only move highlight on initial focus or when roving; remove if you
-                    // want focus without highlight.
-                    this.selectedValue = val;
+            const isSelected = val === this.internalValue;
+            const tabIndex = isSelected || (this.internalValue == null && i === 0) ? 0 : -1;
+            return (h("div", { class: "flex", key: val }, h("eds-button", { ref: (el) => (this.btnRefs[i] = el), size: "large", role: "radio", "aria-checked": isSelected ? 'true' : 'false', "aria-label": `${val}`, onClick: () => this.onSelect(val), tabIndex: tabIndex, intent: isSelected ? 'brand' : 'neutral', "extra-class": "!block !px-0 w-full", label: `${val}`, pill: true, onFocus: () => {
+                    this.internalValue = val;
                 } })));
-        })), h("div", { key: 'ffd498e00559a76b44e8d98ed060db86e60fbde7', class: "flex justify-between mt-8" }, h("span", { key: '80065344c34d88ce3f01aac28d2b87ded60ec524', class: "f-ui-04 text-light ml-4" }, this.leftLabel), h("span", { key: '2a67b416e4e7b0bf61aa66cb4546192860bd372f', class: "f-ui-04 text-light mr-4" }, this.rightLabel))));
+        })), h("div", { key: 'f1fd58c7c1003f144b816c9a1d169a2edec4a768', class: "flex justify-between mt-8" }, h("span", { key: '476a3c3b3ef1c43744b8a69e577e597fff887beb', class: "f-ui-04 text-light ml-4" }, this.leftLabel), h("span", { key: '275ec0c204781365c2e57283c1096fadb853dbe5', class: "f-ui-04 text-light mr-4" }, this.rightLabel))));
     }
     get el() { return this; }
+    static get watchers() { return {
+        "selectedValue": ["handleSelectedValueChange"]
+    }; }
     static get style() { return EdsNpsStyle0; }
 }, [1, "eds-nps", {
         "question": [1],
         "leftLabel": [1, "left-label"],
         "rightLabel": [1, "right-label"],
-        "selectedValue": [32]
+        "selectedValue": [2, "selected-value"],
+        "internalValue": [32]
+    }, undefined, {
+        "selectedValue": ["handleSelectedValueChange"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/eds-pagination2.js

@@ -246,7 +246,7 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
     }
     render() {
         const navigableIndex = -1; // Track index for keyboard navigation
-        return (h("div", { key: '3ca147814cf1e0003bac73502a0ae2bf96412ce2' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '85e3fe3224888a4fc9029e91c53c5a753506af55', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, h("span", { key: '9edeecb5ae0a1c74dcbf11829a4079cdbbfd46e4', class: "text-light sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination Navigation", "aria-describedby": this.mode === 'default' ? 'pagination-info' : undefined, onKeyDown: this.handleKeyDown }, h("ul", { class: "flex items-center justify-center gap-x-8", role: "list" }, h("li", { class: "mr-auto" }, this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: this.prevLabel, disabled: this.mode === 'navigator' ? !this.prevUrl : this.isFirstPage(), "aria-label": "Go to previous page", icon: "chevron-left", "icon-pos": "left", size: "small", "icon-small": "true", intent: "ghost", "extra-class": "!p-8 lg:!pr-12 pagination-button", onClick: (event) => {
+        return (h("div", { key: '6d7dea7a6d544bf79e944dfeb80cffb2f5a0b0cb' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '77da5262419978bf0806155727f64c2c957e3bb1', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, h("span", { key: '537551dfe8de1af55d3350cef4fa62f503aba3c1', class: "text-light sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination Navigation", "aria-describedby": this.mode === 'default' ? 'pagination-info' : undefined, onKeyDown: this.handleKeyDown }, h("ul", { class: "flex items-center justify-center gap-x-8", role: "list" }, h("li", { class: "mr-auto" }, this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: this.prevLabel, disabled: this.mode === 'navigator' ? !this.prevUrl : this.isFirstPage(), "aria-label": "Go to previous page", icon: "chevron-left", "icon-pos": "left", size: "small", "icon-small": "true", intent: "secondary", "extra-class": "!p-8 lg:!pr-12 pagination-button", onClick: (event) => {
                 if (this.mode === 'default' && !this.isFirstPage()) {
                     this.handlePageClick(event, (this.currentPage || 1) - 1);
                 }
@@ -255,7 +255,7 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
                 : this.isFirstPage()
                     ? '#'
                     : this.generateLink(this.currentPage - 1).url, disabled: this.mode === 'navigator' ? !this.prevUrl : this.isFirstPage(), "aria-label": "Go to previous page", icon: "chevron-left", "icon-pos": "left", size: "small", "icon-small": "true", intent: "strong", "hide-label-on-small-screen": true, class: "!p-8 lg:!pr-12" }))), this.mode === 'default' &&
-            this.links.map((link, index) => (h("li", { key: index, class: "f-ui-02 flex h-36 items-center justify-center" }, typeof link === 'string' ? (h("span", { class: "flex items-center justify-center", "aria-hidden": "true" }, link)) : this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: link.label, "aria-label": link.current ? `Current page, page ${link.label}` : `Go to page ${link.label}`, "aria-current": link.current ? 'page' : undefined, size: "small", "extra-class": "!p-8 pagination-button", intent: link.current ? 'secondary' : 'ghost', onClick: (event) => this.handlePageClick(event, parseInt(link.label)) }))) : (h("eds-link", { url: link.url, "aria-label": link.ariaLabel, label: link.label, current: link.current, "aria-current": link.current ? 'page' : undefined, size: "small", class: "!p-8", intent: link.current ? 'secondary' : 'ghost', onClick: (event) => this.handlePageClick(event, parseInt(link.label)) }))))), h("li", { class: "ml-auto" }, this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: this.nextLabel, disabled: this.mode === 'navigator' ? !this.nextUrl : this.isLastPage(), "aria-label": "Go to next page", size: "small", "icon-small": "true", icon: "chevron-right", intent: "ghost", "extra-class": "!p-8 lg:!pl-12 pagination-button", onClick: (event) => {
+            this.links.map((link, index) => (h("li", { key: index, class: "f-ui-02 flex h-36 items-center justify-center" }, typeof link === 'string' ? (h("span", { class: "flex items-center justify-center", "aria-hidden": "true" }, link)) : this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: link.label, "aria-label": link.current ? `Current page, page ${link.label}` : `Go to page ${link.label}`, "aria-current": link.current ? 'page' : undefined, size: "small", "extra-class": "!p-8 pagination-button", intent: link.current ? 'primary' : 'secondary', onClick: (event) => this.handlePageClick(event, parseInt(link.label)) }))) : (h("eds-link", { url: link.url, "aria-label": link.ariaLabel, label: link.label, current: link.current, "aria-current": link.current ? 'page' : undefined, size: "small", class: "!p-8", intent: link.current ? 'primary' : 'secondary', onClick: (event) => this.handlePageClick(event, parseInt(link.label)) }))))), h("li", { class: "ml-auto" }, this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, h("eds-button", { label: this.nextLabel, disabled: this.mode === 'navigator' ? !this.nextUrl : this.isLastPage(), "aria-label": "Go to next page", size: "small", "icon-small": "true", icon: "chevron-right", intent: "secondary", "extra-class": "!p-8 lg:!pl-12 pagination-button", onClick: (event) => {
                 if (this.mode === 'default' && !this.isLastPage()) {
                     this.handlePageClick(event, (this.currentPage || 1) + 1);
                 }

package/dist/components/eds-pie.js

@@ -51,7 +51,7 @@ const EdsPie$1 = /*@__PURE__*/ proxyCustomElement(class EdsPie extends HTMLEleme
             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)';
+            const color = s.color || palette.shift() || '#8c8c8c';
             return Object.assign(Object.assign({}, s), { start, end, color });
         });
         const diameter = this.size;
@@ -66,7 +66,7 @@ const EdsPie$1 = /*@__PURE__*/ proxyCustomElement(class EdsPie extends HTMLEleme
         const ariaLabel = processed
             .map((s) => `${s.label}: ${this.display === 'percent' ? `${Math.round((s.value / total) * 100)}%` : s.value}`)
             .join(', ');
-        return (h(Host, null, h("div", { class: "wrapper" }, h("svg", { width: diameter, height: diameter, role: "img", "aria-label": `Pie chart: ${ariaLabel}`, class: "pie-chart" }, h("title", null, "Pie chart"), h("g", null, processed.map((s) => (h("path", { key: s.id, d: this.describeArc(radius, radius, outerRadius, s.start, s.end), fill: s.color }))), innerRadius > 0 && h("circle", { cx: radius, cy: radius, r: innerRadius, fill: "var(--white)" }), processed.map((s) => {
+        return (h(Host, null, h("div", { class: "wrapper" }, h("svg", { width: diameter, height: diameter, role: "img", "aria-label": `Pie chart: ${ariaLabel}`, class: "pie-chart" }, h("title", null, "Pie chart"), h("g", null, processed.map((s) => (h("path", { key: s.id, d: this.describeArc(radius, radius, outerRadius, s.start, s.end), fill: s.color }))), innerRadius > 0 && h("circle", { cx: radius, cy: radius, r: innerRadius, fill: "#FFFFFF" }), 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);
@@ -85,26 +85,26 @@ const EdsPie$1 = /*@__PURE__*/ proxyCustomElement(class EdsPie extends HTMLEleme
 EdsPie$1.MAX_SLICES = 9;
 EdsPie$1.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)'
+        '#00e766', // green-500
+        '#666666', // grey-700
+        '#00c959', // green-600
+        '#8c8c8c', // grey-500
+        '#63fb92', // green-400
+        '#d8d8d8', // grey-400
+        '#9dffb4', // green-300
+        '#e6e6e6', // grey-300
+        '#d3ffdc', // green-200
     ],
     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)'
+        '#666666', // grey-700
+        '#8c8c8c', // grey-500
+        '#e6e6e6', // grey-300
+        '#f8f8f8', // grey-100
+        '#4d4d4d', // grey-800
+        '#6e6e6e', // grey-600
+        '#d8d8d8', // grey-400
+        '#f2f2f2', // grey-200
+        '#242424', // grey-900
     ]
 };
 function defineCustomElement$1() {

package/dist/components/eds-progress-bar.js

@@ -1,4 +1,83 @@
-import { E as EdsProgressBar$1, d as defineCustomElement$1 } from './eds-progress-bar2.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const edsProgressBarCss = ".w-full{width:100%}.h-full{height:100%}.bg-default{background-color:var(--grey-light)}.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(--brand-green)}.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(--brand-black)}.text-inverse{color:var(--white)}.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)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.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}.brand-gradient{background:linear-gradient(90deg, var(--brand-green-dark) 0%, var(--brand-green) 100%)}.brand-glow{box-shadow:0 0 8px rgba(0, 255, 157, 0.5)}.transition-width{transition:width 0.5s cubic-bezier(0.4, 0, 0.2, 1)}.h-10{height:10px}.mb-12{margin-bottom:0.75rem}.bg-inverse{background-color:var(--white)}.bg-grey-light{background-color:var(--grey-light)}.bg-brand-black{background-color:var(--brand-black)}.text-brand-green-dark{color:var(--brand-green-dark)}.justify-start{justify-content:flex-start}.px-48{padding-left:3rem;padding-right:3rem}.pt-16{padding-top:1rem}.pb-12{padding-bottom:0.75rem}.items-center{align-items:center}";
+const EdsProgressBarStyle0 = edsProgressBarCss;
+
+const EdsProgressBar$1 = /*@__PURE__*/ proxyCustomElement(class EdsProgressBar extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.value = 0;
+        this.showLabel = false;
+        this.variant = 'default';
+        this.labelPaddingX = '3rem';
+    }
+    /**
+     * 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 0–100
+    }
+    render() {
+        const progressValue = Math.min(100, Math.max(0, this.value));
+        const isBrand = this.variant === 'brand';
+        if (isBrand) {
+            // Build inline styles for label container with custom padding
+            const labelContainerStyle = {
+                paddingLeft: this.labelPaddingX,
+                paddingRight: this.labelPaddingX
+            };
+            // Brand style - minimal container with gradient fill and top-aligned text
+            return (h("div", { class: "w-full" }, this.showLabel && (h("div", { class: "flex items-center pt-16 pb-12 bg-inverse", style: labelContainerStyle }, h("span", { class: "f-ui-03 text-brand-green-dark" }, "Progress: ", progressValue, "%"))), h("div", { role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: "w-full h-10 bg-grey-light overflow-hidden relative" }, h("div", { class: "h-full brand-gradient brand-glow transition-width", style: { width: `${progressValue}%` } }))));
+        }
+        // Default style - original implementation
+        const outerClasses = [
+            'outer',
+            'w-full',
+            'h-24',
+            'bg-default',
+            'border',
+            'border-softer',
+            'overflow-hidden',
+            'relative'
+        ]
+            .filter(Boolean)
+            .join(' ');
+        const fillClasses = [
+            'inner',
+            'h-full',
+            'transition-all',
+            'duration-300',
+            'bg-accent',
+            'z-0'
+        ]
+            .filter(Boolean)
+            .join(' ');
+        return (h("div", { role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, h("div", { class: fillClasses, style: { width: `${progressValue}%` } }), h("div", { class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, h("span", { class: "text-default f-ui-01" }, progressValue, "%"))));
+    }
+    static get style() { return EdsProgressBarStyle0; }
+}, [1, "eds-progress-bar", {
+        "value": [1026],
+        "showLabel": [4, "show-label"],
+        "variant": [1],
+        "labelPaddingX": [1, "label-padding-x"],
+        "updateValue": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-progress-bar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-progress-bar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsProgressBar$1);
+            }
+            break;
+    } });
+}
 
 const EdsProgressBar = EdsProgressBar$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/eds-rating2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 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 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(--brand-green);}.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 {
@@ -15,6 +15,19 @@ const EdsRating = /*@__PURE__*/ proxyCustomElement(class EdsRating extends HTMLE
         this.ratingType = 'star';
         this.ratingCount = 5;
         this.selectedRating = 0;
+        this.internalRating = 0;
+    }
+    /**
+     * Watch for changes to the selectedRating prop and sync internal state.
+     */
+    handleSelectedRatingChange(newValue) {
+        this.internalRating = newValue;
+    }
+    /**
+     * Initialize internal rating from prop on component load.
+     */
+    componentWillLoad() {
+        this.internalRating = this.selectedRating;
     }
     /**
      * Lifecycle method that runs when the component has fully loaded.
@@ -36,7 +49,7 @@ const EdsRating = /*@__PURE__*/ proxyCustomElement(class EdsRating extends HTMLE
         const event = new CustomEvent('parentContext', {
             detail: {
                 componentName: this.el.tagName.toLowerCase(),
-                identifier: this.selectedRating
+                identifier: this.internalRating
             }
         });
         btnElement.dispatchEvent(event);
@@ -46,7 +59,7 @@ const EdsRating = /*@__PURE__*/ proxyCustomElement(class EdsRating extends HTMLE
      * @param rating - The selected rating value.
      */
     onSelect(rating) {
-        this.selectedRating = rating;
+        this.internalRating = rating;
         this.rating.emit(rating);
         setTimeout(() => {
             const btn = this.buttonRefs[rating - 1];
@@ -60,7 +73,7 @@ const EdsRating = /*@__PURE__*/ proxyCustomElement(class EdsRating extends HTMLE
         }
         e.preventDefault();
         const increment = key === 'ArrowRight' || key === 'ArrowDown' ? 1 : -1;
-        let next = (this.selectedRating || 1) + increment;
+        let next = (this.internalRating || 1) + increment;
         if (next > this.ratingCount) {
             next = 1;
         }
@@ -70,21 +83,26 @@ const EdsRating = /*@__PURE__*/ proxyCustomElement(class EdsRating extends HTMLE
         this.onSelect(next);
     }
     render() {
-        return (h("div", { key: '52cc87859b174e2eb89392c083031ffde587fb7d', id: "rating-buttons", role: "group", "aria-labelledby": "rating", class: "stars flex space-x-1 my-8", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: this.ratingCount }, (_, index) => {
+        return (h("div", { key: '89671afe2d02d527001009ee83fb0d4e48550479', id: "rating-buttons", role: "group", "aria-labelledby": "rating", class: "stars flex space-x-1 my-8", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: this.ratingCount }, (_, index) => {
             const starRating = index + 1;
-            const isSelected = starRating <= this.selectedRating;
+            const isSelected = starRating <= this.internalRating;
             // Use the mapping text if available; otherwise, fall back to a generic label.
-            const checked = this.selectedRating === starRating;
-            return (h("eds-button", { ref: (el) => (this.buttonRefs[index] = el), icon: this.ratingType, "aria-label": `${starRating} ${this.ratingType}${starRating > 1 ? 's' : ''}`, onClick: () => this.onSelect(starRating), tabIndex: checked || (this.selectedRating === 0 && index === 0) ? 0 : -1, intent: isSelected ? 'primary' : 'ghost', size: "large", "extra-class": "p-2" // Optional padding or styling for the star button
-            }));
+            const checked = this.internalRating === starRating;
+            return (h("eds-button", { ref: (el) => (this.buttonRefs[index] = el), icon: this.ratingType, "aria-label": `${starRating} ${this.ratingType}${starRating > 1 ? 's' : ''}`, onClick: () => this.onSelect(starRating), tabIndex: checked || (this.internalRating === 0 && index === 0) ? 0 : -1, intent: isSelected ? 'brand' : 'neutral', size: "large" }));
         })));
     }
     get el() { return this; }
+    static get watchers() { return {
+        "selectedRating": ["handleSelectedRatingChange"]
+    }; }
     static get style() { return EdsRatingStyle0; }
 }, [1, "eds-rating", {
         "ratingType": [1, "rating-type"],
         "ratingCount": [2, "rating-count"],
-        "selectedRating": [32]
+        "selectedRating": [2, "selected-rating"],
+        "internalRating": [32]
+    }, undefined, {
+        "selectedRating": ["handleSelectedRatingChange"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

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

@@ -15,7 +15,7 @@ const EdsSectionCore = /*@__PURE__*/ proxyCustomElement(class EdsSectionCore ext
     }
     render() {
         const TagType = this.tag; // Set dynamic tag type (div or section)
-        return (h(TagType, { key: '97a75a0b2a26e912499d844df4e3eb10c2c9eb29' }, h("eds-section-heading", { key: 'fe5d0d7a0594bac513551c4a7ea45e34598ec265', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '5f6492d074ffc9996ac39449a037e267a5b399d2' })));
+        return (h(TagType, { key: '65cb765fe9b997b5e573f5befd4ca1ea6611f1c5' }, h("eds-section-heading", { key: 'a48c9fef0a45fbed08749e8b4f17d762d38bbb5b', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '7e26bc40132c32670db60f5765b412d00d64c129' })));
     }
     static get style() { return EdsSectionCoreStyle0; }
 }, [1, "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: '9003f6d452637cdc9ed3bea69689cd92546860b8', class: {
+        return (h(TagType, { key: '032f8629ef5ea1c45f40a135a54c32337f7181e9', 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
-            } }, h(HeadingTag, { key: '2cb120e1bf8e4816cb56c8ba8f8bbae546bd7baf', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, h(HeadingTag, { key: '37f821426fe05dba66445745da3d23c9ff75345e', class: this.getHeadingClass() }, this.sectionTitle)));
     }
 }, [0, "eds-section-heading", {
         "sectionTitle": [1, "section-title"],

package/dist/components/eds-sidebar.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { d as defineCustomElement$3 } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$2 } from './eds-link2.js';
 
-const edsSidebarCss = ":host{display:block;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;transition:width 0.3s ease}:host(.collapsed){width:4rem}:host::-webkit-scrollbar{width:8px}:host::-webkit-scrollbar-track{background:transparent}:host::-webkit-scrollbar-thumb{background:rgba(0, 0, 0, 0.2);border-radius:4px}:host::-webkit-scrollbar-thumb:hover{background:rgba(0, 0, 0, 0.3)}.sidebar-nav{padding:0.5rem 0}.sidebar-header{display:flex;justify-content:flex-end;padding:0.5rem 0.75rem;margin-bottom:0.5rem}:host(.collapsed) .sidebar-header{justify-content:center;padding:0.5rem}.collapse-toggle{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;background:none;border:none;cursor:pointer;padding:0;border-radius:0.375rem;transition:background-color 0.15s ease;color:inherit}.collapse-toggle:hover{background-color:rgba(0, 0, 0, 0.08)}.collapse-toggle:focus-visible{outline:2px solid var(--eds-focus-color, #0066cc);outline-offset:2px}.sidebar-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.125rem}.sidebar-item{display:flex;flex-direction:column}.sidebar-item-content{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;cursor:pointer;user-select:none;word-break:break-word;transition:background-color 0.15s ease;border-radius:0.375rem;margin:0 0.5rem;position:relative}:host(.collapsed) .sidebar-item-content{justify-content:center;padding:0.75rem;margin:0 0.5rem}.sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.04)}.sidebar-item-content:focus-visible{outline:2px solid var(--eds-focus-color, #0066cc);outline-offset:-2px;z-index:1}.sidebar-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem}.sidebar-content-wrapper{display:flex;align-items:center;gap:0.5rem;flex:1;min-width:0}.sidebar-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;padding:0;margin:-0.125rem 0;pointer-events:none}.sidebar-link-wrapper{flex:1;min-width:0;pointer-events:none}.sidebar-link{font-weight:400;pointer-events:none}.sidebar-children{list-style:none;margin:0.25rem 0 0 0;padding:0;display:flex;flex-direction:column;gap:0.125rem;overflow:hidden;animation:slideDown 0.2s ease}@keyframes slideDown{from{opacity:0;transform:translateY(-0.25rem)}to{opacity:1;transform:translateY(0)}}.sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}:host(.collapsed) .sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}.sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}.sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}.sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}.sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}.sidebar-item.level-5 .sidebar-item-content{padding-left:7rem}:host(.theme-default) .sidebar-item-content{border-radius:0.375rem;margin:0 0.5rem;padding:0.5rem 0.75rem}:host(.theme-default.collapsed) .sidebar-item-content{margin:0 0.5rem;border-radius:0.375rem}:host(.theme-default) .sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.04)}:host(.theme-default) .sidebar-item.active>.sidebar-item-content{background-color:transparent}:host(.theme-default) .sidebar-item.active>.sidebar-item-content .sidebar-link{font-weight:600}:host(.theme-default) .sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}:host(.theme-default) .sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}:host(.theme-default) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}:host(.theme-default) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}:host(.theme-default) .sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}:host(.theme-minimal) .sidebar-item-content{border-radius:0;margin:0;padding-left:1rem;padding-right:1rem}:host(.theme-minimal.collapsed) .sidebar-item-content{margin:0 0.25rem;border-radius:0.375rem}:host(.theme-minimal) .sidebar-item-content:hover{background-color:var(--grey-300)}:host(.theme-minimal) .sidebar-item.active>.sidebar-item-content{background-color:var(--grey-400);border-left:3px solid var(--grey-900);padding-left:calc(1rem - 3px)}:host(.theme-minimal.collapsed) .sidebar-item.active>.sidebar-item-content{border-left:none;border-radius:0.375rem;padding-left:0.75rem}:host(.theme-minimal) .sidebar-item.level-1.active>.sidebar-item-content{padding-left:calc(2rem - 3px)}:host(.theme-minimal) .sidebar-item.level-2.active>.sidebar-item-content{padding-left:calc(3.25rem - 3px)}:host(.theme-minimal) .sidebar-item.level-3.active>.sidebar-item-content{padding-left:calc(4.5rem - 3px)}:host(.theme-minimal) .sidebar-item.level-4.active>.sidebar-item-content{padding-left:calc(5.75rem - 3px)}:host(.theme-minimal) .sidebar-item.level-0 .sidebar-item-content{padding-left:1rem}:host(.theme-minimal) .sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}:host(.theme-minimal) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}:host(.theme-minimal) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}:host(.theme-minimal) .sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}:host(.theme-minimal) .sidebar-children{position:relative}:host(.theme-ebrains) .sidebar-item-content{padding:0.5rem 1rem;border-radius:0.5rem;margin:0 0.5rem}:host(.theme-ebrains.collapsed) .sidebar-item-content{padding:0.75rem}:host(.theme-ebrains) .sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.05)}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content{background-color:var(--green-600, #22c55e);color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-link{--eds-link-color:white;--eds-link-hover-color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-toggle{color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-icon{color:white}:host(.theme-ebrains) .sidebar-item.level-0 .sidebar-item-content{padding-left:1rem}:host(.theme-ebrains) .sidebar-item.level-1 .sidebar-item-content{padding-left:2.25rem}:host(.theme-ebrains) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.5rem}:host(.theme-ebrains) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.75rem}:host(.theme-ebrains) .sidebar-item.level-4 .sidebar-item-content{padding-left:6rem}@media (prefers-color-scheme: dark){.collapse-toggle:hover{background-color:rgba(255, 255, 255, 0.08)}:host(.theme-default) .sidebar-item-content:hover{background-color:rgba(255, 255, 255, 0.05)}:host(.theme-default) .sidebar-item.active>.sidebar-item-content{background-color:rgba(0, 102, 204, 0.15)}:host(.theme-minimal) .sidebar-item-content:hover{background-color:rgba(255, 255, 255, 0.06)}:host::-webkit-scrollbar-thumb{background:rgba(255, 255, 255, 0.2)}:host::-webkit-scrollbar-thumb:hover{background:rgba(255, 255, 255, 0.3)}}.sidebar-toggle eds-icon-wrapper,.sidebar-icon eds-icon-wrapper,.collapse-toggle eds-icon-wrapper{transition:transform 0.15s ease;display:flex;align-items:center;justify-content:center}.sidebar-item-content:focus-visible .sidebar-link{text-decoration:underline}.sidebar-item.active>.sidebar-item-content .sidebar-link{font-weight:500}:host(.collapsed) .sidebar-item-content::after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:0.5rem;padding:0.5rem 0.75rem;background:rgba(0, 0, 0, 0.9);color:white;border-radius:0.375rem;white-space:nowrap;font-size:0.875rem;opacity:0;pointer-events:none;transition:opacity 0.2s ease;z-index:1000}:host(.collapsed) .sidebar-item-content:hover::after{opacity:1;transition-delay:0.3s}.-ml-4{margin-left:-0.25rem}.mt-2{margin-top:0.125rem}";
+const edsSidebarCss = ":host{display:block;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;transition:width 0.3s ease}:host(.collapsed){width:4rem}:host::-webkit-scrollbar{width:8px}:host::-webkit-scrollbar-track{background:transparent}:host::-webkit-scrollbar-thumb{background:rgba(0, 0, 0, 0.2);border-radius:4px}:host::-webkit-scrollbar-thumb:hover{background:rgba(0, 0, 0, 0.3)}.sidebar-nav{padding:0.5rem 0}.sidebar-header{display:flex;justify-content:flex-end;padding:0.5rem 0.75rem;margin-bottom:0.5rem}:host(.collapsed) .sidebar-header{justify-content:center;padding:0.5rem}.collapse-toggle{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;background:none;border:none;cursor:pointer;padding:0;border-radius:0.375rem;transition:background-color 0.15s ease;color:inherit}.collapse-toggle:hover{background-color:rgba(0, 0, 0, 0.08)}.collapse-toggle:focus-visible{outline:2px solid var(--eds-focus-color, #0066cc);outline-offset:2px}.sidebar-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.125rem}.sidebar-item{display:flex;flex-direction:column}.sidebar-item-content{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;cursor:pointer;user-select:none;word-break:break-word;transition:background-color 0.15s ease;border-radius:0.375rem;margin:0 0.5rem;position:relative}:host(.collapsed) .sidebar-item-content{justify-content:center;padding:0.75rem;margin:0 0.5rem}.sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.04)}.sidebar-item-content:focus-visible{outline:2px solid var(--eds-focus-color, #0066cc);outline-offset:-2px;z-index:1}.sidebar-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem}.sidebar-content-wrapper{display:flex;align-items:center;gap:0.5rem;flex:1;min-width:0}.sidebar-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;padding:0;margin:-0.125rem 0;pointer-events:none}.sidebar-link-wrapper{flex:1;min-width:0;pointer-events:none}.sidebar-link{font-weight:400;pointer-events:none}.sidebar-children{list-style:none;margin:0.25rem 0 0 0;padding:0;display:flex;flex-direction:column;gap:0.125rem;overflow:hidden;animation:slideDown 0.2s ease}@keyframes slideDown{from{opacity:0;transform:translateY(-0.25rem)}to{opacity:1;transform:translateY(0)}}.sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}:host(.collapsed) .sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}.sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}.sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}.sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}.sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}.sidebar-item.level-5 .sidebar-item-content{padding-left:7rem}:host(.theme-default) .sidebar-item-content{border-radius:0.375rem;margin:0 0.5rem;padding:0.5rem 0.75rem}:host(.theme-default.collapsed) .sidebar-item-content{margin:0 0.5rem;border-radius:0.375rem}:host(.theme-default) .sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.04)}:host(.theme-default) .sidebar-item.active>.sidebar-item-content{background-color:transparent}:host(.theme-default) .sidebar-item.active>.sidebar-item-content .sidebar-link{font-weight:600}:host(.theme-default) .sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}:host(.theme-default) .sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}:host(.theme-default) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}:host(.theme-default) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}:host(.theme-default) .sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}:host(.theme-minimal) .sidebar-item-content{border-radius:0;margin:0;padding-left:1rem;padding-right:1rem}:host(.theme-minimal.collapsed) .sidebar-item-content{margin:0 0.25rem;border-radius:0.375rem}:host(.theme-minimal) .sidebar-item-content:hover{background-color:rgba(0, 255, 157, 0.05);color:var(--brand-black, #07140D)}:host(.theme-minimal) .sidebar-item.active>.sidebar-item-content{background-color:rgba(0, 255, 157, 0.1);border-left:3px solid var(--brand-green-dark, #00C87B);padding-left:calc(1rem - 3px);color:var(--brand-black, #07140D);font-weight:500}:host(.theme-minimal.collapsed) .sidebar-item.active>.sidebar-item-content{border-left:none;border-radius:0.375rem;padding-left:0.75rem;background-color:rgba(0, 255, 157, 0.1);color:var(--brand-black, #07140D)}:host(.theme-minimal) .sidebar-item.level-1.active>.sidebar-item-content{padding-left:calc(2rem - 3px)}:host(.theme-minimal) .sidebar-item.level-2.active>.sidebar-item-content{padding-left:calc(3.25rem - 3px)}:host(.theme-minimal) .sidebar-item.level-3.active>.sidebar-item-content{padding-left:calc(4.5rem - 3px)}:host(.theme-minimal) .sidebar-item.level-4.active>.sidebar-item-content{padding-left:calc(5.75rem - 3px)}:host(.theme-minimal) .sidebar-item.level-0 .sidebar-item-content{padding-left:1rem}:host(.theme-minimal) .sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}:host(.theme-minimal) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}:host(.theme-minimal) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}:host(.theme-minimal) .sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}:host(.theme-minimal) .sidebar-children{position:relative}:host(.theme-ebrains) .sidebar-item-content{padding:0.5rem 1rem;border-radius:0.5rem;margin:0 0.5rem}:host(.theme-ebrains.collapsed) .sidebar-item-content{padding:0.75rem}:host(.theme-ebrains) .sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.05)}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content{background-color:var(--brand-green-dark, #22c55e);color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-link{--eds-link-color:white;--eds-link-hover-color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-toggle{color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-icon{color:white}:host(.theme-ebrains) .sidebar-item.level-0 .sidebar-item-content{padding-left:1rem}:host(.theme-ebrains) .sidebar-item.level-1 .sidebar-item-content{padding-left:2.25rem}:host(.theme-ebrains) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.5rem}:host(.theme-ebrains) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.75rem}:host(.theme-ebrains) .sidebar-item.level-4 .sidebar-item-content{padding-left:6rem}@media (prefers-color-scheme: dark){.collapse-toggle:hover{background-color:rgba(255, 255, 255, 0.08)}:host(.theme-default) .sidebar-item-content:hover{background-color:rgba(255, 255, 255, 0.05)}:host(.theme-default) .sidebar-item.active>.sidebar-item-content{background-color:rgba(0, 102, 204, 0.15)}:host(.theme-minimal) .sidebar-item-content:hover{background-color:rgba(255, 255, 255, 0.06)}:host::-webkit-scrollbar-thumb{background:rgba(255, 255, 255, 0.2)}:host::-webkit-scrollbar-thumb:hover{background:rgba(255, 255, 255, 0.3)}}.sidebar-toggle eds-icon-wrapper,.sidebar-icon eds-icon-wrapper,.collapse-toggle eds-icon-wrapper{transition:transform 0.15s ease;display:flex;align-items:center;justify-content:center}.sidebar-item-content:focus-visible .sidebar-link{text-decoration:underline}.sidebar-item.active>.sidebar-item-content .sidebar-link{font-weight:500}:host(.collapsed) .sidebar-item-content::after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:0.5rem;padding:0.5rem 0.75rem;background:rgba(0, 0, 0, 0.9);color:white;border-radius:0.375rem;white-space:nowrap;font-size:0.875rem;opacity:0;pointer-events:none;transition:opacity 0.2s ease;z-index:1000}:host(.collapsed) .sidebar-item-content:hover::after{opacity:1;transition-delay:0.3s}.-ml-4{margin-left:-0.25rem}.mt-2{margin-top:0.125rem}";
 const EdsSidebarStyle0 = edsSidebarCss;
 
 const EdsSidebar$1 = /*@__PURE__*/ proxyCustomElement(class EdsSidebar extends HTMLElement {
@@ -152,13 +152,13 @@ const EdsSidebar$1 = /*@__PURE__*/ proxyCustomElement(class EdsSidebar extends H
                     e.preventDefault();
                     this.handleItemClick(item, e);
                 }
-            } }, hasChildren && (h("span", { class: "sidebar-toggle mt-2 -ml-4", "aria-hidden": "true" }, h("eds-icon-wrapper", { icon: isOpen ? 'chevron-down' : 'chevron-right' }))), h("span", { class: "sidebar-link-wrapper" }, h("eds-link", { label: item.title, url: item.url || '#', intent: isActive ? 'strong' : 'weak', size: "small", "aria-label": item.title, "extra-class": "sidebar-link", tabindex: "-1" }))), hasChildren && isOpen && (h("ul", { id: childrenId, class: "sidebar-children" }, item.children.map((child) => this.renderItem(child, level + 1))))));
+            } }, hasChildren && (h("span", { class: "sidebar-toggle -ml-4", "aria-hidden": "true" }, h("eds-icon-wrapper", { name: isOpen ? 'chevron-down' : 'chevron-right' }))), h("span", { class: "sidebar-link-wrapper" }, h("eds-link", { label: item.title, url: item.url || '#', intent: isActive ? 'strong' : 'weak', size: "small", "aria-label": item.title, "extra-class": "sidebar-link", tabindex: "-1" }))), hasChildren && isOpen && (h("ul", { id: childrenId, class: "sidebar-children" }, item.children.map((child) => this.renderItem(child, level + 1))))));
     }
     render() {
-        return (h(Host, { key: '4334d20e5d72671243633253910ab05b4da013da', class: {
+        return (h(Host, { key: 'a56e293e9b53b0dbffd6268c117f77828ba5f41a', class: {
                 'eds-sidebar': true,
                 [`theme-${this.theme}`]: true
-            } }, h("nav", { key: '319f6f42416d4229f1b011bf1216b39c8627302d', class: "sidebar-nav", "aria-label": "Sidebar" }, h("ul", { key: '687ceae3eca3e844e8f6a361db4a76d127d27813', class: "sidebar-list" }, this.parsedItems.map((item) => this.renderItem(item, 0))))));
+            } }, h("nav", { key: '07ca17add683f976b30e736389eddc473e1e5669', class: "sidebar-nav", "aria-label": "Sidebar" }, h("ul", { key: 'a102418d399f14715eddf34e1c3373cf1be9d4aa', class: "sidebar-list" }, this.parsedItems.map((item) => this.renderItem(item, 0))))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$1 } from './eds-link2.js';
 
-const edsSocialNetworksCss = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.mt-12{margin-top:0.75rem}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.gap-4{gap:0.25rem}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.hover\\:text-default:hover{color:var(--black)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-sm{border-radius:8px}";
+const edsSocialNetworksCss = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.f-ui-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)}.mt-12{margin-top:0.75rem}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.gap-4{gap:0.25rem}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-inverse{color:var(--white)}.hover\\:text-default:hover{color:var(--black)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-sm{border-radius:8px}";
 const EdsSocialNetworksStyle0 = edsSocialNetworksCss;
 
 const EdsSocialNetworks = /*@__PURE__*/ proxyCustomElement(class EdsSocialNetworks extends HTMLElement {
@@ -50,17 +50,22 @@ const EdsSocialNetworks = /*@__PURE__*/ proxyCustomElement(class EdsSocialNetwor
             }
         ];
         this.heading = 'Follow EBRAINS to keep up-to-date';
+        this.variant = 'default';
     }
     /**
      * Renders the component's HTML structure with links to EBRAINS social profiles.
      * Each social network link uses the `eds-link` component with specific classes and styles.
      */
     render() {
-        return (h("nav", { key: 'f56d034a9c934e1be2003a0fedaf6c9ec4fc5909', "aria-label": "Social media" }, h("p", { key: '66d7c2384206143eef36cdb085780d4a1590fe76', class: "f-ui-02" }, this.heading), h("ul", { key: '0ccb5fd44ee30f77c19fdb67dc1cc19fadd3561e', 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": `EBRAINS on ${network.label}`, url: network.url, icon: network.icon, intent: "strong" })))))));
+        const isInverse = this.variant === 'inverse';
+        const textClass = isInverse ? 'text-inverse' : '';
+        const linkIntent = isInverse ? 'inverse' : 'strong';
+        return (h("nav", { key: '11b876483142bb98c686a4cb722d28022ca9f40c', "aria-label": "Social media" }, h("p", { key: 'daf2865247ed69ab3e4233d191d8abb8d5be584f', class: `f-ui-02 ${textClass}` }, this.heading), h("ul", { key: '47918284e8a158d523d3329eb28f4881ac27233e', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { external: true, "aria-label": `EBRAINS on ${network.label}`, url: network.url, icon: network.icon, intent: linkIntent })))))));
     }
     static get style() { return EdsSocialNetworksStyle0; }
 }, [1, "eds-social-networks", {
-        "heading": [1, "title"]
+        "heading": [1, "title"],
+        "variant": [1]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/eds-spinner2.js

@@ -1,6 +1,6 @@
 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)}}.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)}";
+const edsSpinnerCss = ":host{display:block}.spinner{box-sizing:border-box;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.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)}";
 const EdsSpinnerStyle0 = edsSpinnerCss;
 
 const EdsSpinner = /*@__PURE__*/ proxyCustomElement(class EdsSpinner extends HTMLElement {
@@ -11,7 +11,7 @@ const EdsSpinner = /*@__PURE__*/ proxyCustomElement(class EdsSpinner extends HTM
         this.size = 'md';
         this.variant = 'secondary';
         this.message = undefined;
-        this.background = 'var(--grey-200)';
+        this.background = 'var(--grey-light)';
         this.fullscreen = false;
     }
     get spinnerSize() {
@@ -46,8 +46,8 @@ const EdsSpinner = /*@__PURE__*/ proxyCustomElement(class EdsSpinner extends HTM
     }
     render() {
         // derive colors from variant
-        const borderColor = this.variant === 'primary' ? 'var(--grey-900)' : 'var(--grey-400)';
-        const bottomColor = this.variant === 'primary' ? 'var(--green-400)' : 'var(--grey-900)';
+        const borderColor = this.variant === 'primary' ? 'var(--brand-black)' : 'var(--grey-dark)';
+        const bottomColor = this.variant === 'primary' ? 'var(--brand-green)' : 'var(--brand-black)';
         const spinnerStyle = Object.assign({ width: this.spinnerSize, height: this.spinnerSize, border: `${this.spinnerThickness} solid ${borderColor}`, borderBottomColor: bottomColor }, (!this.fullscreen && { display: 'inline-block' }));
         // Overlay style: use fixed positioning for fullscreen,
         // and absolute positioning for inline mode.
@@ -78,7 +78,7 @@ const EdsSpinner = /*@__PURE__*/ proxyCustomElement(class EdsSpinner extends HTM
                 alignItems: 'center',
                 justifyContent: 'center'
             };
-        return (h(Host, { key: 'c50ca410eb23855b3076babb78b4849246722cf7' }, h("div", { key: '9b3722b00777a0dd77288c4c3b29419a9b87640b', class: "spinner-overlay", style: overlayStyle }, h("span", { key: '5479d0195b6d8991613df8ae03eee34b2a095b6b', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: '448c3b0e6ce0aac6c21b53c58b97e423a1739864', class: "f-body-01" }, this.message))));
+        return (h(Host, { key: '16d20431aaa90a29b6e3d32cbd3403ece1f45345' }, h("div", { key: '0e29dafa5eb3a84f31305614ae083356604a81bf', class: "spinner-overlay", style: overlayStyle }, h("span", { key: 'cf63a83095e35a1ca4328fd14293e6895d8d9811', class: "spinner", style: spinnerStyle }), this.message && h("p", { key: '7bb83c40db5dc985c429ca6ac171145db80c011d', class: "f-ui-01" }, this.message))));
     }
     static get style() { return EdsSpinnerStyle0; }
 }, [1, "eds-spinner", {

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

@@ -1,8 +1,7 @@
 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';
+import { d as defineCustomElement$1 } from './eds-logo2.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 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:300px;height:60px;animation:loading-pulse 1.5s ease-in-out infinite}@keyframes loading-pulse{0%,100%{opacity:1}50%{opacity:0.6}}";
 const EdsSplashScreenStyle0 = edsSplashScreenCss;
 
 const EdsSplashScreen = /*@__PURE__*/ proxyCustomElement(class EdsSplashScreen extends HTMLElement {
@@ -49,7 +48,7 @@ const EdsSplashScreen = /*@__PURE__*/ proxyCustomElement(class EdsSplashScreen e
         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: "xs", background: "none", fullscreen: false })))));
+        return (h(Host, null, h("div", { class: "splash-overlay", style: { background: this.inverse ? 'var(--brand-black)' : 'var(--grey-light)' } }, h("div", { class: "logo-container" }, this.inverse ? h("eds-logo", { variant: "negative" }) : h("eds-logo", { variant: "positive" })))));
     }
     static get watchers() { return {
         "initPromise": ["watchInitPromise"]
@@ -66,7 +65,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["eds-splash-screen", "eds-logo", "eds-spinner"];
+    const components = ["eds-splash-screen", "eds-logo"];
     components.forEach(tagName => { switch (tagName) {
         case "eds-splash-screen":
             if (!customElements.get(tagName)) {
@@ -74,11 +73,6 @@ function defineCustomElement() {
             }
             break;
         case "eds-logo":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "eds-spinner":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }