@ebrains/components 2.4.1 → 3.1.0

package/dist/components/eds-modal.js

@@ -3,7 +3,7 @@ import { s as sendAnalytics } from './analytics.js';
 import { d as defineCustomElement$3 } from './eds-button2.js';
 import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
 
-const edsModalCss = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.fixed{position:fixed}.inset-0{inset:0rem}.z-10{z-index:10}.z-50{z-index:50}.z-50{z-index:50}.z-9999991{z-index:9999991}.w-full{width:100%}.min-w-full{min-width:100%}.max-w-full{max-width:100%}.absolute{position:absolute}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-20{padding-top:1.25rem;padding-bottom:1.25rem}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-300)}.rounded-lg{border-radius:16px}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.left-1\\/2{left:50%}.left-20{left:1.25rem}.right-20{right:1.25rem}.top-1\\/2{top:50%}.top-0{top:0rem}.left-0{left:0rem}.top-20{top:1.25rem}.bottom-0{bottom:0rem}.bottom-20{bottom:1.25rem}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.border-b-2{border-bottom-width:2px}.border-softer{border-color:rgba(0, 0, 0, .1)}.pb-8{padding-bottom:0.5rem}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.bg-dark{background-color:var(--grey-300)}.bg-strong{background-color:var(--grey-700)}.bg-strongest{background-color:var(--black)}.ml-8{margin-left:0.5rem}.pt-8{padding-top:0.5rem}.bg-opacity-90{opacity:0.9}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}@media (min-width: 750px){.md\\:bottom-20{bottom:1.25rem}.md\\:w-auto{width:auto}.md\\:min-w-\\[500px\\]{width:500px}.md\\:top-20{top:1.25rem}.md\\:top-1\\/2{top:50%}.md\\:left-1\\/2{left:50%}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:gap-y-12{row-gap:0.75rem}}";
+const edsModalCss = ".modal-open{display:flex}.modal-closed{display:none}.modal-backdrop{}.backdrop-visible{opacity:0.9}.backdrop-hidden{opacity:0}.modal-content{}.modal-content-visible{opacity:1}.modal-content-hidden{opacity:0}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.flex-col{flex-direction:column}.inline-flex{display:inline-flex}.hidden{display:none}.fixed{position:fixed}.inset-0{inset:0rem}.z-10{z-index:10}.z-50{z-index:50}.z-50{z-index:50}.z-9999991{z-index:9999991}.w-full{width:100%}.min-w-full{min-width:100%}.max-w-full{max-width:100%}.absolute{position:absolute}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-20{padding-top:1.25rem;padding-bottom:1.25rem}.py-24{padding-top:1.5rem;padding-bottom:1.5rem}.leading-normal{line-height:1.5}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-light)}.rounded-lg{border-radius:16px}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.left-1\\/2{left:50%}.left-20{left:1.25rem}.right-20{right:1.25rem}.top-1\\/2{top:50%}.top-0{top:0rem}.top-16{top:1rem}.left-0{left:0rem}.top-20{top:1.25rem}.bottom-0{bottom:0rem}.bottom-16{bottom:1rem}.bottom-20{bottom:1.25rem}.grow{flex-grow:1}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.overflow-y-auto{overflow-y:auto}.max-h-\\[90vh\\]{max-height:90vh}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.border-b-2{border-bottom-width:2px}.border-softer{border-color:rgba(0, 0, 0, .1)}.pb-8{padding-bottom:0.5rem}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.bg-dark{background-color:var(--grey-light)}.bg-strong{background-color:var(--grey-dark)}.bg-strongest{background-color:var(--brand-black)}.mr-8{margin-right:0.5rem}.pt-8{padding-top:0.5rem}.bg-opacity-90{opacity:0.9}.modal-title{line-height:1.5;padding-bottom:2px;display:inline-block}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;padding-bottom:2px;}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;padding-bottom:2px;}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;padding-bottom:2px;}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;padding-bottom:2px;}.modal-small{min-width:300px;max-width:500px}.modal-medium{min-width:300px;max-width:700px}.modal-large{min-width:300px;max-width:900px}@media (max-width: 749px){.modal-small,.modal-medium,.modal-large{min-width:calc(100% - 2rem);max-width:calc(100% - 2rem);margin:0 1rem}}@media (min-width: 750px){.md\\:bottom-20{bottom:1.25rem}.md\\:w-auto{width:auto}.md\\:min-w-\\[500px\\]{width:500px}.md\\:top-20{top:1.25rem}.md\\:top-1\\/2{top:50%}.md\\:left-1\\/2{left:50%}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:gap-y-12{row-gap:0.75rem}}";
 const EdsModalStyle0 = edsModalCss;
 
 const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLElement {
@@ -11,15 +11,28 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.previousActiveElement = null;
         this.heading = '';
-        this.truncate = 1;
+        this.truncate = undefined;
         this.position = 'middle';
+        this.size = 'medium';
         this.inverseHeader = false;
         this.isOpen = false;
     }
     getTruncateClass() {
         return this.truncate ? `line-clamp-${this.truncate}` : '';
     }
+    getSizeClass() {
+        switch (this.size) {
+            case 'small':
+                return 'modal-small';
+            case 'large':
+                return 'modal-large';
+            case 'medium':
+            default:
+                return 'modal-medium';
+        }
+    }
     /**
      * Returns the Tailwind CSS classes to position the modal based on the `position` prop.
      *
@@ -30,8 +43,8 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
         switch (this.position) {
             case 'top':
                 return [
-                    // mobile: pinned to top, full-width
-                    'top-0',
+                    // mobile: small gap from top, full-width
+                    'top-16',
                     'left-0',
                     'w-full',
                     // desktop: half-width centred and offset down
@@ -41,7 +54,7 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
                     'md:top-20'
                 ].join(' ');
             case 'bottom':
-                return ['bottom-0', 'left-0', 'w-full', 'md:left-1/2', 'md:w-auto', 'md:-translate-x-1/2', 'md:bottom-20'].join(' ');
+                return ['bottom-16', 'left-0', 'w-full', 'md:left-1/2', 'md:w-auto', 'md:-translate-x-1/2', 'md:bottom-20'].join(' ');
             /*case 'left':
               …
             case 'right':
@@ -50,10 +63,9 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
             default:
                 return [
                     // mobile: full-width, start from top with a little padding
-                    'top-0',
+                    'top-16',
                     'left-0',
                     'w-full',
-                    'pt-4',
                     // desktop: centred both axes
                     'md:left-1/2',
                     'md:top-1/2',
@@ -63,12 +75,51 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
                 ].join(' ');
         }
     }
+    trapFocus(event) {
+        var _a;
+        if (event.key !== 'Tab')
+            return;
+        const focusableElements = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        if (!focusableElements || focusableElements.length === 0)
+            return;
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        if (event.shiftKey) {
+            if (document.activeElement === firstElement) {
+                lastElement.focus();
+                event.preventDefault();
+            }
+        }
+        else {
+            if (document.activeElement === lastElement) {
+                firstElement.focus();
+                event.preventDefault();
+            }
+        }
+    }
+    lockBodyScroll() {
+        document.body.style.overflow = 'hidden';
+    }
+    unlockBodyScroll() {
+        document.body.style.overflow = '';
+    }
     /**
      * Opens the modal.
      */
     async open() {
         var _a;
+        // Store currently focused element
+        this.previousActiveElement = document.activeElement;
         this.isOpen = true;
+        this.lockBodyScroll();
+        // Focus first focusable element in modal after it renders
+        setTimeout(() => {
+            var _a;
+            const focusableElements = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+            if (focusableElements && focusableElements.length > 0) {
+                focusableElements[0].focus();
+            }
+        }, 100);
         sendAnalytics({
             category: 'ui-component',
             parentContext: null,
@@ -83,6 +134,14 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
     async close() {
         var _a;
         this.isOpen = false;
+        this.unlockBodyScroll();
+        // Return focus to previously focused element
+        if (this.previousActiveElement && typeof this.previousActiveElement.focus === 'function') {
+            setTimeout(() => {
+                var _a;
+                (_a = this.previousActiveElement) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 100);
+        }
         sendAnalytics({
             category: 'ui-component',
             parentContext: null,
@@ -95,7 +154,12 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
      * Toggles the modal open or closed.
      */
     async toggle() {
-        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            await this.close();
+        }
+        else {
+            await this.open();
+        }
     }
     /**
      * Listens for global custom events to open the modal.
@@ -110,19 +174,26 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
         this.close();
     }
     /**
-     * Closes the modal when the Escape key is pressed.
+     * Closes the modal when the Escape key is pressed and handles focus trapping on Tab.
      */
     handleKeyDown(event) {
-        if (this.isOpen && event.key === 'Escape') {
+        if (!this.isOpen)
+            return;
+        if (event.key === 'Escape') {
             this.close();
         }
+        else if (event.key === 'Tab') {
+            this.trapFocus(event);
+        }
     }
     render() {
         // Generate a unique id for the title so we can reference it for aria-labelledby.
         const titleId = `modal-title-${this.el.tagName.toLowerCase()}`;
-        return (h("div", { key: '6b7cbab7db29bb09415bb9538d69ac9a238a7776', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999991 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (h("div", { key: '56f00980b2f843b5c1ce85502409d4711d89fad7', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
-            ,
-            onClick: () => this.close() })), h("div", { key: '687e1975bb8a17b0a6eb42038f72117dc71ca876', class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: '653886c1ee090152b0a9d8dbb6e554762496167f', class: `flex justify-between items-center border-b-2 border-softer px-20 py-20  ${this.inverseHeader ? 'bg-strongest text-inverse' : 'bg-dark text-default'}` }, h("span", { key: 'efefadd7e6630d9d9b498e68480a41b604c16c9f', id: titleId, class: `f-heading-04 ${this.getTruncateClass()}` }, this.heading), h("eds-button", { key: '79a156bd0640990911f1480a4e6becc7c4c20d7b', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8 text-default" })), h("div", { key: '802a6cc72f1bb41e8f907baa8d37cb5a01baf0cf', class: "pt-8 px-20 py-20" }, h("slot", { key: '1a59aaa764e4c4ed972de7a700ddf8f716e40e58' })))));
+        // Don't render anything when modal is closed to prevent blocking clicks
+        if (!this.isOpen) {
+            return null;
+        }
+        return (h("div", { id: "eds-modal", class: "modal-open fixed inset-0 z-9999991 flex", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, h("div", { class: "modal-backdrop fixed inset-0 bg-dark backdrop-visible", onClick: () => this.close() }), h("div", { class: `container absolute bg-inverse z-10 rounded-lg shadow-lg ${this.getModalPositionClasses()} ${this.getSizeClass()} grow justify-center max-h-[90vh] flex flex-col modal-content modal-content-visible` }, h("div", { class: `flex justify-between items-center border-b-2 border-softer px-20 py-24 flex-shrink-0  ${this.inverseHeader ? 'bg-strongest text-inverse' : 'bg-dark text-default'}` }, h("span", { id: titleId, class: `f-heading-04 mr-8 modal-title ${this.getTruncateClass()}` }, this.heading), h("eds-button", { intent: this.inverseHeader ? 'ghostInverse' : 'secondary', size: "large", icon: "close", "aria-label": "Close modal", onClick: () => this.close() })), h("div", { class: "pt-8 px-20 py-20 overflow-y-auto flex-1" }, h("slot", null)))));
     }
     get el() { return this; }
     static get style() { return EdsModalStyle0; }
@@ -130,6 +201,7 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
         "heading": [1, "title"],
         "truncate": [2],
         "position": [1],
+        "size": [1],
         "inverseHeader": [4, "inverse-header"],
         "isOpen": [32],
         "open": [64],

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 = ".eds-nps__labels{padding-top:0.75rem;padding-bottom:0.5rem}.eds-nps__scale{display:block;width:fit-content;max-width:100%;padding-top:0.5rem;}#nps-buttons{gap:0.6rem}.eds-nps__btn{border-radius:9999px;transition:transform 0.15s ease-in-out}.eds-nps__btn.is-selected{transform:scale(1.12)}.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: 'f5e19e0f750c0de6da3bae5713dca0e13eba85fc', class: "eds-nps" }, h("eds-input-label", { key: '3ff611a932976956735395fb531d9a800b554974', id: "nps-question", name: "nps-question", label: this.question }), h("div", { key: 'da0c3af26dd24d7dc618675aa7f197f55023230f', 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: '412ddeabf0cc97829202063af25f17e3309b0754', class: "eds-nps" }, h("eds-input-label", { key: '100a47e710fa75d6a5761a87ca68e8bc8910e248', id: "nps-question", name: "nps-question", label: this.question }), h("div", { key: '9a7a63112e17f4c725005e1ae8e42c98107db7c4', class: "eds-nps__scale" }, h("div", { key: '501029dad573cd31d956ae3cae67f2db9f2649f1', 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' : 'brandLight', class: isSelected ? 'eds-nps__btn is-selected' : 'eds-nps__btn', "extra-class": "!block !px-0 w-full", label: `${val}`, pill: true, onFocus: () => {
+                    this.internalValue = val;
                 } })));
-        })), h("div", { key: '10b2f854cff8192e54ee30feb44ad4143c54ad10', class: "flex justify-between mt-8" }, h("span", { key: '361b421b368219f9d7aa6306d912913e9d401fa0', class: "f-ui-04 text-light ml-4" }, this.leftLabel), h("span", { key: '2969496e1b6f772fcdf49667f66eee6dee6760fa', class: "f-ui-04 text-light mr-4" }, this.rightLabel))));
+        })), h("div", { key: 'aa15457591f1edf6e59eed384bcfbb25d49c9fd5', class: "flex justify-between eds-nps__labels" }, h("span", { key: 'a468b290491e368e3084f17ce40c6aa39e00ad3a', class: "f-ui-04 text-light ml-4" }, this.leftLabel), h("span", { key: '146b9eea4bbc360f7765e69e319738c77beae69d', 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: '17128145803ac6af5f37d5e7c7f0576961c3e372' }, this.total > 0 && this.mode === 'default' && (h("p", { key: 'e50738bfadd0b115ed2d05b81199f0d4cfadda18', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, h("span", { key: '230f2306254d7c5fa2bfd354f308e4fa6b5c2994', 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: '5c11fd306f0ebf47a452e44d633e18b2e3860d78' }, this.total > 0 && this.mode === 'default' && (h("p", { key: 'fe8b7f7b6c7785152f1edd90a750f4a9a7e2768b', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, h("span", { key: '5e2c67535dbf765dc662770164404f0de69315a1', 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) => {
                 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 ? 'brand' : '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 ? '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: "ghost", "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)}.eds-rating__btn{transition:transform 0.15s ease-in-out}.eds-rating__btn.is-selected{transform:scale(1.05)}.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: '5d1cf924d2a59b4141eac1bd4f122c9cf640cf9c', 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: '01857f12c63fbe53b95152902ddba594aa736f6f', 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' : 'brandLight', class: isSelected ? 'eds-rating__btn is-selected' : 'eds-rating__btn', 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-icon-bookmark.d.ts → eds-search-select.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface EdsIconBookmark extends Components.EdsIconBookmark, HTMLElement {}
-export const EdsIconBookmark: {
-    prototype: EdsIconBookmark;
-    new (): EdsIconBookmark;
+interface EdsSearchSelect extends Components.EdsSearchSelect, HTMLElement {}
+export const EdsSearchSelect: {
+    prototype: EdsSearchSelect;
+    new (): EdsSearchSelect;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/eds-search-select.js

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