@ebrains/components 2.4.0 → 3.0.0

package/dist/collection/components/eds-nps/eds-nps.js

@@ -5,9 +5,8 @@ export class EdsNps {
         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;
@@ -22,8 +21,7 @@ export class EdsNps {
             }
             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);
@@ -50,14 +48,25 @@ export class EdsNps {
         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) {
@@ -66,21 +75,14 @@ export class EdsNps {
     }
     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))));
     }
     static get is() { return "eds-nps"; }
     static get encapsulation() { return "shadow"; }
@@ -146,12 +148,30 @@ export class EdsNps {
                 },
                 "attribute": "right-label",
                 "reflect": false
+            },
+            "selectedValue": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current selected NPS value (controlled from parent)."
+                },
+                "attribute": "selected-value",
+                "reflect": false,
+                "defaultValue": "null"
             }
         };
     }
     static get states() {
         return {
-            "selectedValue": {}
+            "internalValue": {}
         };
     }
     static get events() {
@@ -163,7 +183,7 @@ export class EdsNps {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted when the NPS value changes."
+                    "text": ""
                 },
                 "complexType": {
                     "original": "number",
@@ -173,4 +193,10 @@ export class EdsNps {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "selectedValue",
+                "methodName": "handleSelectedValueChange"
+            }];
+    }
 }

package/dist/collection/components/eds-pagination/eds-pagination.js

@@ -248,7 +248,7 @@ export class EdsPagination {
     }
     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);
                 }
@@ -257,7 +257,7 @@ export class EdsPagination {
                 : 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/collection/components/eds-progress-bar/eds-progress-bar.css

@@ -7,7 +7,7 @@
 }
 
 .bg-default {
-  background-color: var(--grey-200);
+  background-color: var(--grey-light);
 }
 
 .rounded-lg {
@@ -31,7 +31,7 @@
 }
 
 .bg-accent {
-  background-color: var(--green-500);
+  background-color: var(--brand-green);
 }
 
 .bg-\[\#0034CB\] {
@@ -62,19 +62,35 @@
 }
 
 .text-default {
-  color: var(--black);
+  color: var(--brand-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);
+.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 {
@@ -94,4 +110,62 @@
 }
 .pointer-events-none {
   pointer-events: none;
+}
+
+/* Brand variant utilities */
+.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;
 }

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

@@ -2,7 +2,9 @@ import { h } from "@stencil/core";
 export class EdsProgressBar {
     constructor() {
         this.value = 0;
-        this.rounded = true;
+        this.showLabel = false;
+        this.variant = 'default';
+        this.labelPaddingX = '3rem';
     }
     /**
      * Method to update the progress value externally.
@@ -13,7 +15,17 @@ export class EdsProgressBar {
     }
     render() {
         const progressValue = Math.min(100, Math.max(0, this.value));
-        // Outer container classes (conditionally rounded)
+        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',
@@ -22,24 +34,21 @@ export class EdsProgressBar {
             '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 (h("div", { key: 'feb13579d8257dd845e9c61ddfa8a6dd21594c84', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, h("div", { key: '2cef98e8ea9f099cb0642bf7927512f33fc8cad9', class: fillClasses, style: { width: `${progressValue}%` } }), h("div", { key: '00cdb6afecb2d2fc5da66d287171d6949d081b20', class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, h("span", { key: '43be66f9b0fe11e3fb5c41ba69e00b8c7f7cea1c', class: "text-default f-body-02" }, progressValue, "%"))));
+        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 is() { return "eds-progress-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -73,7 +82,7 @@ export class EdsProgressBar {
                 "reflect": false,
                 "defaultValue": "0"
             },
-            "rounded": {
+            "showLabel": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -85,11 +94,47 @@ export class EdsProgressBar {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether to render with rounded corners."
+                    "text": ""
                 },
-                "attribute": "rounded",
+                "attribute": "show-label",
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'brand'",
+                    "resolved": "\"brand\" | \"default\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant for the progress bar.\n- \"default\": Standard progress bar with border and centered text\n- \"brand\": EBRAINS branded progress bar with gradient, glow, and top text"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "labelPaddingX": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Horizontal padding for the label container (CSS value).\nExamples: \"3rem\", \"48px\", \"2rem\"\nDefault: \"3rem\""
+                },
+                "attribute": "label-padding-x",
+                "reflect": false,
+                "defaultValue": "'3rem'"
             }
         };
     }

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

@@ -3,22 +3,95 @@ export default {
     component: 'eds-progress-bar',
     argTypes: {
         value: {
-            control: {
-                type: 'range',
-                min: 0,
-                max: 100
-            },
-            description: 'The progress value (0-100)'
+            control: { type: 'range', min: 0, max: 100 },
+            description: 'The progress value (0-100).'
         },
-        rounded: { control: 'boolean' }
+        variant: {
+            control: 'select',
+            options: ['default', 'brand'],
+            description: 'Visual variant: default (standard) or brand (EBRAINS styled).'
+        },
+        showLabel: {
+            control: 'boolean',
+            description: 'Show label above progress bar (brand variant only).'
+        },
+        labelPaddingX: {
+            control: 'text',
+            description: 'Horizontal padding for the label container (CSS value).'
+        }
     },
     args: {
-        value: 50 // Default value
+        value: 50,
+        variant: 'default',
+        showLabel: false,
+        labelPaddingX: '3rem'
     }
 };
 export const Default = {
-    render: (args) => `<eds-progress-bar value="${args.value}" rounded="${args.rounded}"></eds-progress-bar>`,
+    render: (args) => `
+    <eds-progress-bar
+      value="${args.value}"
+      variant="default">
+    </eds-progress-bar>`,
+    args: {
+        value: 50
+    }
+};
+export const DefaultEmpty = {
+    render: () => `
+    <eds-progress-bar value="0" variant="default"></eds-progress-bar>`
+};
+export const DefaultComplete = {
+    render: () => `
+    <eds-progress-bar value="100" variant="default"></eds-progress-bar>`
+};
+export const Brand = {
+    render: (args) => `
+    <eds-progress-bar
+      value="${args.value}"
+      variant="brand"
+      ${args.showLabel ? 'show-label' : ''}>
+    </eds-progress-bar>`,
+    args: {
+        value: 65,
+        showLabel: false
+    }
+};
+export const BrandWithLabel = {
+    render: (args) => `
+    <eds-progress-bar
+      value="${args.value}"
+      variant="brand"
+      show-label
+      label-padding-x="${args.labelPaddingX}">
+    </eds-progress-bar>`,
     args: {
-        value: 50 // Default progress value for the story
+        value: 75,
+        labelPaddingX: '3rem'
     }
 };
+export const BrandComplete = {
+    render: () => `
+    <eds-progress-bar value="100" variant="brand" show-label></eds-progress-bar>`
+};
+export const Comparison = {
+    render: () => `
+    <div style="display: flex; flex-direction: column; gap: 2rem;">
+      <div>
+        <p style="margin-bottom: 0.5rem; font-weight: 500;">Default — 40%</p>
+        <eds-progress-bar value="40" variant="default"></eds-progress-bar>
+      </div>
+      <div>
+        <p style="margin-bottom: 0.5rem; font-weight: 500;">Brand — 40%</p>
+        <eds-progress-bar value="40" variant="brand" show-label></eds-progress-bar>
+      </div>
+      <div>
+        <p style="margin-bottom: 0.5rem; font-weight: 500;">Default — 80%</p>
+        <eds-progress-bar value="80" variant="default"></eds-progress-bar>
+      </div>
+      <div>
+        <p style="margin-bottom: 0.5rem; font-weight: 500;">Brand — 80%</p>
+        <eds-progress-bar value="80" variant="brand" show-label></eds-progress-bar>
+      </div>
+    </div>`
+};

package/dist/collection/components/eds-rating/eds-rating.css

@@ -19,7 +19,7 @@
 }
 
 .star.filled {
-    color: var(--green-500);
+    color: var(--brand-green);
     /* Default filled star color */
 }
 

package/dist/collection/components/eds-rating/eds-rating.js

@@ -5,6 +5,19 @@ export class EdsRating {
         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.
@@ -26,7 +39,7 @@ export class EdsRating {
         const event = new CustomEvent('parentContext', {
             detail: {
                 componentName: this.el.tagName.toLowerCase(),
-                identifier: this.selectedRating
+                identifier: this.internalRating
             }
         });
         btnElement.dispatchEvent(event);
@@ -36,7 +49,7 @@ export class EdsRating {
      * @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];
@@ -50,7 +63,7 @@ export class EdsRating {
         }
         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;
         }
@@ -60,13 +73,12 @@ export class EdsRating {
         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" }));
         })));
     }
     static get is() { return "eds-rating"; }
@@ -87,9 +99,15 @@ export class EdsRating {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'star' | 'thumbs-up' | 'thumbs-down'",
-                    "resolved": "\"star\" | \"thumbs-down\" | \"thumbs-up\"",
-                    "references": {}
+                    "original": "IconName",
+                    "resolved": "\"copy\" | \"arrow-right\" | \"chevron-right\" | \"chevron-left\" | \"chevron-down\" | \"chevron-up\" | \"arrow-left\" | \"arrow-up-right\" | \"close\" | \"add\" | \"edit\" | \"checkmark\" | \"download\" | \"upload\" | \"view\" | \"exit\" | \"caretSort\" | \"bookmark\" | \"createLink\" | \"activity\" | \"account\" | \"analytics\" | \"template\" | \"documentExport\" | \"documentDownload\" | \"trashCan\" | \"chooseItem\" | \"copyLink\" | \"dragHorizontal\" | \"dragVertical\" | \"login\" | \"logout\" | \"move\" | \"replicate\" | \"sortAscending\" | \"sortDescending\" | \"requestQuote\" | \"reset\" | \"resultDraft\" | \"share\" | \"play\" | \"book\" | \"chatOff\" | \"forum\" | \"shareKnowledge\" | \"time\" | \"help\" | \"customerService\" | \"code\" | \"rocket\" | \"compass\" | \"menu\" | \"search\" | \"settings\" | \"notification\" | \"user\" | \"group\" | \"save\" | \"document\" | \"folder\" | \"image\" | \"calendar\" | \"information\" | \"warning\" | \"error\" | \"checkmark-filled\" | \"star\" | \"thumbs-up\" | \"thumbs-down\" | \"twitter\" | \"linkedin\" | \"facebook\" | \"youtube\" | \"mastodon\" | \"bluesky\"",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../../utils/icons",
+                            "id": "../../../packages/components/src/utils/icons.ts::IconName"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -118,12 +136,30 @@ export class EdsRating {
                 "attribute": "rating-count",
                 "reflect": false,
                 "defaultValue": "5"
+            },
+            "selectedRating": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current selected rating value (controlled from parent)."
+                },
+                "attribute": "selected-rating",
+                "reflect": false,
+                "defaultValue": "0"
             }
         };
     }
     static get states() {
         return {
-            "selectedRating": {}
+            "internalRating": {}
         };
     }
     static get events() {
@@ -145,4 +181,10 @@ export class EdsRating {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "selectedRating",
+                "methodName": "handleSelectedRatingChange"
+            }];
+    }
 }

package/dist/collection/components/eds-section/eds-section-core/eds-section-core.js

@@ -20,7 +20,7 @@ export class EdsSectionCore {
     }
     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 is() { return "eds-section-core"; }
     static get encapsulation() { return "shadow"; }